/* 선물함 */ @import url('/css/gift.css?1326'); /* 반값할인 */ @import url('/css/event_halfprice_m.css?1244'); /* 성인특별전 */ @import url('/css/event_adult_exhibition_m.css?1'); /* 회원가입/로그인창 */ @import url('/css/login_join_pop_s.css?1365'); /* 핸드폰가입 없는 회원가입창 */ /*@import url('/css/login_join_pop_nophone_m.css'); -->*/ /*출석체크*/ @import url('/css/event_daily_new_m.css?1243'); @font-face{ font-family:'NanumGothic'; src:url(NanumGothic.eot); src:url(NanumGothic.eot?#iefix) format('embeded-opentype'), url(NanumGothic.woff) format('woff') } body{max-width:100vw;font-family: 'Noto Sans KR', sans-serif;-webkit-text-size-adjust:none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;} html,body{width:100%; background:var(--main-bg-color); /* overflow-x:hidden; */-webkit-tap-highlight-color:rgba(0,0,0,0);} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button,input{margin:0;padding:0} body{font-size:13px; word-break:break-all;-ms-word-break:break-all; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;color:var(--main-ft-color);} img,fieldset,iframe{border:0 none} img, a{-webkit-user-drag:none;} li{list-style:none} input,select,button{vertical-align:middle;} i,em,address{font-style:normal} label,button{cursor:pointer} button{margin:0;padding:0;cursor:pointer;} a{color:#222;color:var(--main-ft-color);text-decoration:none;-webkit-tap-highlight-color:rgba(255, 255, 255, .1);cursor:pointer;} /* a:hover{color:#000;text-decoration:none} */ header,footer,nav,section,article,aside{display:block;} input,select,button,textarea{outline: 0;font-family: 'Noto Sans KR', sans-serif;} div,input,textarea{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} div::-webkit-scrollbar, nav::-webkit-scrollbar{width: 0px; height: 0px; border: 0px solid transparent;} /* input:autofill, input:autofill:hover, input:autofill:focus, input:autofill:active, input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{-webkit-text-fill-color:var(--sub-ft-color);transition:background-color 5000s ease-in-out 0s;} */ :focus, :active, :visited{outline:none;} .ui-icon-carat-r:after{background:none;} /* clearfix */ .clearfix {*zoom: 1;} .clearfix:after {content: ''; display: block; clear: both;} /* Hide */ .blind {display: block; position: absolute; left: 0; top: -9999em;} /* Skip */ .skip a {position: absolute; left: 0; top: -9999em; z-index: 9999; display: block; width: 100%; background-color: #039; color: #eee; text-transform: uppercase; text-decoration: none; line-height: 30px;} .skip a:hover,.skip a:active,.skip a:focus { top: 0;} /* 글씨 170116 */ .font-red{color:var(--bg-fc-color) !important;} .font-blue{color:#56a7ff !important;} .sub_font-red{color:var(--bg-fc-color) !important; border-bottom: 2px solid var(--bg-fc-color) !important;} .tag-red_bg{background:var(--bg-fc-color) !important;} .btn-red{color:#FFFFFF !important; background:var(--bg-fc-color) !important;} .btn-red2{color:#FFFFFF !important; background:var(--bg-fc-color) !important; border: 1px solid var(--bg-fc-color) !important;} .btn-redline{color:#FFFFFF !important; background:var(--main-ft-color) !important; border:1px solid var(--main-line-color) !important;} .btn-black{color:#FFFFFF !important; background:#404040 !important;} .btn-blackline{color:var(--main-ft-fc-color); /* background:#fff !important; border:1px solid #404040 !important; */} /* 글씨 170116 */ .btn-reset{padding:0;margin:0;background-color:transparent;border:0 none;border-radius:0;box-shadow:none;outline:none;font-family:inherit;text-decoration:none;cursor:pointer;} .btn-reset:focus{outline:none;} .flex_{display:-moz-flex;display:-webkit-flex;display:flex;} .inline_flex_{display:-moz-inline-flex;display:-webkit-inline-flex;display:inline-flex;} .flex_wrap{-moz-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;} .tabing{-moz-align-items:center;-webkit-align-items:center;align-items:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;} .align_it_center{-moz-align-items:center;-webkit-align-items:center;align-items:center;} .justify_between{-moz-justify-content:space-between;-webkit-justify-content:space-between;justify-content:space-between;} .justify_center{justify-content:center;} .truncated{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} .clearFix:after{content:"";display:block;clear:both;} .maninthebox{position:relative;width:14px;height:14px;vertical-align:middle;cursor:pointer;flex-shrink:0;} .maninthebox img{display:block;width:100%;height:100%;object-fit:scale-down;} .maninthebox.box2, .maninthebox.box2 img{width:auto !important;} .manintoolt{display:inline-block;display:none;position:absolute;top:100%;left:50%;padding:3px 10px;border:1px solid #E4B02B;border-radius:5px;background-color:#F7EAC5;font-size:12px;font-weight:500;color:#C79514;line-height:1.2;white-space:nowrap;cursor:default;z-index:11;margin-top:8px;transform:translateX(-50%);box-shadow:0 4px 10px rgba(0, 0, 0, 0.3);} .manintoolt.txt_center{text-align:center;} .manintoolt.left{left:0;transform:translateX(0);} .manintoolt.right{left:auto;right:0;transform:translateX(0);} .manintoolt.bottom{top:auto;bottom:100%;padding-top:5px;padding-bottom:6px;margin-top:0;margin-bottom:8px;} .manintoolt:before{content:"";display:block;position:absolute;bottom:100%;left:50%;width:8px;height:8px;border-style:solid;border-color:#E4B02B;border-width:0;border-top-width:1px;border-left-width:1px;background-color:#F7EAC5;transform:rotate(45deg);margin-bottom:-4px;margin-left:-4px;} .manintoolt.left:before{left:0;margin-left:12px;} .manintoolt.right:before{left:auto;right:0;margin-left:0;margin-right:12px;} .manintoolt.bottom:before{bottom:auto;top:100%;border-top-width:0;border-left-width:0;border-bottom-width:1px;border-right-width:1px;margin-bottom:0;margin-top:-4px;} .maninthebox.show_tt .manintoolt, .ic_prem_xtg.show_tt .manintoolt{display:block;} .maninclose{position:absolute;bottom:100%;left:100%;display:inline-block;width:16px;height:16px;border-radius:16px;background-color:#12141C;cursor:pointer;margin:0 0 -8px -8px;} .maninclose img, .ic_prem_xtg .maninclose img{display:block;width:100%;height:100%;object-fit:cover;} .manintoolt .co_red{color:var(--bg-fc2-color);} .manintoolt .premCharge_st{font-weight:500;text-decoration:underline;cursor:pointer;} .flt_blur2{-webkit-filter:blur(2px);filter:blur(2px);} /* */ #testpage{padding-bottom:0px !important; width:100%; overflow-x:hidden; -webkit-tap-highlight-color:rgba(0,0,0,0);} .body_wrap{width:100%;min-height:100.1vh; background:var(--main-bg-color);} .body_wrap a{text-shadow:none;} .pop_bg{display:none; background:url(https://cdn.metoon.co.kr/mimg/pop_bg.png); width:100%; height:100%; position:fixed;z-index:9999; top:0; left:0;} .layer_bg{width:100%;height:100%;background-color:rgba(0, 0, 0, 0.7);} .event_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_slide_m{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:20px 20px 25px;border-radius:10px;text-align:left;} .event_slide_m:after{content:"";display:block;clear:both;} .event_slide_m > div{text-align:center;} .event_slide_m p:first-child{margin-bottom:10px;font-size:16px;} .event_slide_m p.event_free a{font-weight:bold;font-size:16px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_slide_m p.event_end{position:absolute;top:5px;right:5px;} .event_btn_m{position:fixed;bottom:65px;right:10px;z-index:999;} @media all and (min-width:320px) and (max-width:340px){ .event_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_slide_m{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:2px solid var(--bg-fc-color);padding:20px 10px 25px;border-radius:10px;text-align:left;font-size:10px;} .event_slide_m:after{content:"";display:block;clear:both;} .event_slide_m > div{text-align:center;} .event_slide_m p:first-child{margin-bottom:10px;font-size:12px;} .event_slide_m p.event_free a{font-weight:bold;font-size:12px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:3px 7px;border-radius:5px;} .event_slide_m p.event_end{position:absolute;top:5px;right:5px;} .event_btn_m{position:fixed;bottom:65px;right:10px;z-index:999;} } @media all and (min-width:341px) and (max-width:360px){ .event_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_slide_m{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:2px solid var(--bg-fc-color);padding:20px 10px 25px;border-radius:10px;text-align:left;font-size:10px;} .event_slide_m:after{content:"";display:block;clear:both;} .event_slide_m > div{text-align:center;} .event_slide_m p:first-child{margin-bottom:10px;font-size:12px;} .event_slide_m p.event_free a{font-weight:bold;font-size:12px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:3px 7px;border-radius:5px;} .event_slide_m p.event_end{position:absolute;top:5px;right:5px;} .event_btn_m{position:fixed;bottom:65px;right:10px;z-index:999;} } @media all and (min-width:320px) and (max-width:360px){ .event_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_slide_m{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:2px solid var(--bg-fc-color);padding:20px 10px 25px;border-radius:10px;text-align:left;font-size:10px;} .event_slide_m:after{content:"";display:block;clear:both;} .event_slide_m > div{text-align:center;} .event_slide_m p:first-child{margin-bottom:10px;font-size:12px;} .event_slide_m p.event_free a{font-weight:bold;font-size:12px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:3px 7px;border-radius:5px;} .event_slide_m p.event_end{position:absolute;top:5px;right:5px;} .event_btn_m{position:fixed;bottom:65px;right:10px;z-index:999;} } @media all and (min-width:360px) and (max-width:600px){ .event_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_slide_m{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:20px 15px 25px;border-radius:10px;text-align:left;font-size:12px;} .event_slide_m:after{content:"";display:block;clear:both;} .event_slide_m > div{text-align:center;} .event_slide_m p:first-child{margin-bottom:10px;font-size:14px;} .event_slide_m p.event_free a.event_free{font-weight:bold;font-size:14px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_slide_m p.event_end{position:absolute;top:5px;right:5px;} .event_btn_m{position:fixed;bottom:65px;right:10px;z-index:999;} } @media all and (min-width:436px) and (max-width:600px){ .event_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_slide_m{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:20px 20px 25px;border-radius:10px;text-align:left;} .event_slide_m:after{content:"";display:block;clear:both;} .event_slide_m > div{text-align:center;} .event_slide_m p:first-child{margin-bottom:10px;font-size:16px;} .event_slide_m p.event_free a{font-weight:bold;font-size:16px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_slide_m p.event_end{position:absolute;top:5px;right:5px;} .event_btn_m{position:fixed;bottom:65px;right:10px;z-index:999;} } @media all and (min-width:436px) and (max-width:520px){ .event_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_slide_m{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:20px 20px 25px;border-radius:10px;text-align:left;} .event_slide_m:after{content:"";display:block;clear:both;} .event_slide_m > div{text-align:center;} .event_slide_m p:first-child{margin-bottom:10px;font-size:16px;} .event_slide_m p.event_free a{font-weight:bold;font-size:16px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_slide_m p.event_end{position:absolute;top:5px;right:5px;} .event_btn_m{position:fixed;bottom:65px;right:10px;z-index:999;} } @media all and (min-width:521px) and (max-width:600px){ .event_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_slide_m{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:20px 20px 25px;border-radius:10px;text-align:left;font-size:15px;} .event_slide_m:after{content:"";display:block;clear:both;} .event_slide_m > div{text-align:center;} .event_slide_m p:first-child{margin-bottom:10px;font-size:18px;} .event_slide_m p.event_free a{font-weight:bold;font-size:18px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_slide_m p.event_end{position:absolute;top:5px;right:5px;} .event_btn_m{position:fixed;bottom:65px;right:10px;z-index:999;} } @media all and (min-width:601px) and (max-width:810px){ .event_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_slide_m{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:20px 20px 25px;border-radius:10px;text-align:left;font-size:15px;position:relative;} .event_slide_m:after{content:"";display:block;clear:both;} .event_slide_m > div{text-align:center;} .event_slide_m p:first-child{margin-bottom:10px;font-size:18px;} .event_slide_m p.event_free a{font-weight:bold;font-size:18px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_slide_m p.event_end{position:absolute;top:5px;right:5px;} .event_btn_m{position:fixed;bottom:65px;right:10px;z-index:999;} } @media all and (max-width:1024px) and (min-width:781px){ .event_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_slide_m{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:20px 20px 25px;border-radius:10px;text-align:left;font-size:15px;} .event_slide_m:after{content:"";display:block;clear:both;} .event_slide_m > div{text-align:center;} .event_slide_m p:first-child{margin-bottom:10px;font-size:18px;} .event_slide_m p.event_free a{font-weight:bold;font-size:18px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_slide_m p.event_end{position:absolute;top:5px;right:5px;} .event_btn_m{position:fixed;bottom:65px;right:10px;z-index:999;} } .event_r_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_reply{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:7px 10px 15px;border-radius:10px;text-align:left;} .event_reply:after{content:"";display:block;clear:both;} .reply_box{margin-left:10px;margin-bottom:5px;} .reply_box .reply_img{margin-right:5px;} .reply_box .reply_alarm{line-height:1.7em;} .reply_box>p{float:left;} #reply_best{text-align:center;clear:both;padding:5px 10px;background-color:#FFFFFF;-moz-box-shadow: inset 0 0 5px #666;-webkit-box-shadow: inset 0 0 5px #666;box-shadow: inset 0 0 5px #666;margin-bottom:10px;} .event_reply p.free_reply{text-align:center;padding-top:5px;} .event_reply p.free_reply a{font-weight:bold;font-size:14px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_reply p.event_end_r{position:absolute;top:5px;right:5px;} .arrow{position:absolute;top:40px;left:25px;} /* event_reply responsive 2017-08-25 시작 */ @media all and (min-width:320px) and (max-width:359px){ .event_r_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_reply{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:7px 10px 15px;border-radius:10px;text-align:left;} .event_reply:after{content:"";display:block;clear:both;} .reply_box{margin-left:10px;margin-bottom:5px;} .reply_box .reply_img{margin-right:5px;} .reply_box .reply_alarm{line-height:2.0em;font-size:10px;} .reply_box>p{float:left;} #reply_best{font-size:12px;text-align:center;clear:both;padding:5px 10px;background-color:#FFFFFF;-moz-box-shadow: inset 0 0 5px #666;-webkit-box-shadow: inset 0 0 5px #666;box-shadow: inset 0 0 5px #666;margin-bottom:10px;} .event_reply p.free_reply{text-align:center;padding-top:5px;} .event_reply p.free_reply a{font-weight:bold;font-size:14px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_reply p.event_end_r{position:absolute;top:5px;right:5px;} .arrow{position:absolute;top:40px;left:15px;} } @media all and (min-width:360px) and (max-width:374px){ .event_r_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_reply{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:7px 10px 15px;border-radius:10px;text-align:left;} .event_reply:after{content:"";display:block;clear:both;} .reply_box{margin-left:10px;margin-bottom:5px;} .reply_box .reply_img{margin-right:5px;} .reply_box .reply_alarm{line-height:1.7em;} .reply_box>p{float:left;} #reply_best{text-align:center;clear:both;padding:5px 10px;background-color:#FFFFFF;-moz-box-shadow: inset 0 0 5px #666;-webkit-box-shadow: inset 0 0 5px #666;box-shadow: inset 0 0 5px #666;margin-bottom:10px;} .event_reply p.free_reply{text-align:center;padding-top:5px;} .event_reply p.free_reply a{font-weight:bold;font-size:14px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_reply p.event_end_r{position:absolute;top:5px;right:5px;} .arrow{position:absolute;top:40px;left:20px;} } @media all and (min-width:375px) and (max-width:413px) .event_r_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_reply{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:5px 10px 15px;border-radius:10px;text-align:left;} .event_reply:after{content:"";display:block;clear:both;} .reply_box{margin-left:10px;margin-bottom:10px;} .reply_box .reply_img{margin-right:5px;} .reply_box .reply_alarm{line-height:1.7em;font-size:12px;} .reply_box>p{float:left;} #reply_best{font-size:14px;text-align:center;clear:both;padding:5px 10px;background-color:#FFFFFF;-moz-box-shadow: inset 0 0 5px #666;-webkit-box-shadow: inset 0 0 5px #666;box-shadow: inset 0 0 5px #666;margin-bottom:10px;} .event_reply p.free_reply{text-align:center;padding-top:5px;} .event_reply p.free_reply a{font-weight:bold;font-size:14px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_reply p.event_end_r{position:absolute;top:5px;right:5px;} .arrow{position:absolute;top:45px;left:20px;} } @media all and (min-width:414px) and (max-width:600px){ .event_r_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_reply{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:5px 10px 15px;border-radius:10px;text-align:left;} .event_reply:after{content:"";display:block;clear:both;} .reply_box{margin-left:10px;margin-bottom:10px;} .reply_box .reply_img{margin-right:5px;} .reply_box .reply_alarm{line-height:1.7em;font-size:12px;} .reply_box>p{float:left;} #reply_best{font-size:14px;text-align:center;clear:both;padding:5px 10px;background-color:#FFFFFF;-moz-box-shadow: inset 0 0 5px #666;-webkit-box-shadow: inset 0 0 5px #666;box-shadow: inset 0 0 5px #666;margin-bottom:10px;} .event_reply p.free_reply{text-align:center;padding-top:5px;} .event_reply p.free_reply a{font-weight:bold;font-size:14px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_reply p.event_end_r{position:absolute;top:5px;right:5px;} .arrow{position:absolute;top:45px;left:20px;} } @media all and (min-width:601px) and (max-width:767px){ .event_r_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_reply{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:6px 10px 15px;border-radius:10px;text-align:left;} .event_reply:after{content:"";display:block;clear:both;} .reply_box{margin-left:10px;} .reply_box .reply_img{margin-right:5px;} .reply_box .reply_alarm{line-height:1.7em;font-size:14px;margin-bottom:10px;} .reply_box>p{float:left;} #reply_best{font-size:16px;text-align:center;clear:both;padding:5px 10px;background-color:#FFFFFF;-moz-box-shadow: inset 0 0 5px #666;-webkit-box-shadow: inset 0 0 5px #666;box-shadow: inset 0 0 5px #666;margin-bottom:10px;} .event_reply p.free_reply{text-align:center;padding-top:5px;} .event_reply p.free_reply a{font-weight:bold;font-size:14px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_reply p.event_end_r{position:absolute;top:5px;right:5px;} .arrow{position:absolute;top:55px;left:50px;} } @media all and (min-width:768px) and (max-width:1024px){ .event_r_wrap{width:100%;padding:0 5%;position:fixed;right:-1000px;bottom:95px;z-index:999;} .event_reply{position:relative;width:100%;color:#000;background-color:#FFFFFF;border:3px solid var(--bg-fc-color);padding:7px 10px 15px;border-radius:10px;text-align:left;} .event_reply:after{content:"";display:block;clear:both;} .reply_box{margin-left:10px;} .reply_box .reply_img{margin-right:5px;} .reply_box .reply_alarm{line-height:1.7em;font-size:16px;margin-bottom:10px;} .reply_box>p{float:left;} #reply_best{font-size:18px;text-align:center;clear:both;padding:5px 10px;background-color:#FFFFFF;-moz-box-shadow: inset 0 0 5px #666;-webkit-box-shadow: inset 0 0 5px #666;box-shadow: inset 0 0 5px #666;margin-bottom:10px;} .event_reply p.free_reply{text-align:center;padding-top:5px;} .event_reply p.free_reply a{font-weight:bold;font-size:14px;color:var(--main-ft-color);background-color:var(--bg-fc-color);padding:5px 10px;border-radius:5px;} .event_reply p.event_end_r{position:absolute;top:5px;right:5px;} .arrow{position:absolute;top:60px;left:70px;} } /* 하단공지 슬라이드 20170907 */ .notice_pop{ width:100%;max-width:1150px;margin:0 auto 25px;background:url(https://cdn.metoon.co.kr/mimg/btm_foot_line.png) repeat-x 0 100%; } .notice_pop .bx_notice li{ float:left; overflow:hidden; } .notice_pop a{display:block;padding:20px 15px;padding-left:5px;} .notice_pop p { color:white;font-size:1em;font-weight:300;text-align:left;} .notice_pop p.new_notice{text-indent:20px; background:url(https://cdn.metoon.co.kr/mimg/m_icon_notice_new1.png) no-repeat 0 center; background-size:13px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} .notice_pop p span.notice_date{float:right;font-size:0.8em;font-weight:normal;line-height:1.2;margin-right:5px;font-weight:lighter; } /* 하단공지 끝. HJ 수정 */ .btn_up{display:none; position:fixed; bottom:10px; right:10px; z-index:999;width: 45px; height: 45px;} .btn_up a{display:block;position: absolute; top: 0; right: 0;} .btn_up img{display:block;width:100%;filter:drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));} html:not([color-theme="light"]) .btn_up img{filter:brightness(1.5);} .ui-panel-animate.ui-panel-page-content-position-left{left: 11%;} .ui-panel-dismiss-open.ui-panel-dismiss-position-left{left: 70%;} /* 헤더배너 */ #header_banner_wrap{width:100%; /* position:fixed;top:0; left:0; z-index: 991; */position:relative;/* transition:margin-top 0.15s; */} .header.active #header_banner_wrap{margin-top:-60px;} #header_banner_wrap .header_banner{width:100%; position:relative; height: 60px; background:#41a8ff;} #header_banner_wrap .header_banner>div{width:100%; max-width:400px; margin: auto; color:var(--main-ft-color); position:relative; height:100%;} #header_banner_wrap .header_banner div a{color:var(--main-ft-color); display: block; height: 100%;} #header_banner_wrap .header_banner .close{width:25px; height:30px; z-index: 99; position:absolute; top:0px; left:0; right:auto; margin:auto; font-size:18px; padding:0 3px; color:#696969; overflow: hidden; display: block;} #header_banner_wrap .header_banner .close img{width:18px; height:18px; margin-top: 5px; float: right; display:block; position:relative;} #header_banner_wrap .header_banner .img_box{display:block; width:100%; height:100%;} #header_banner_wrap .header_banner .cont_box{height:initial; overflow:hidden; padding:7px 0; margin-left:11%;} #header_banner_wrap .header_banner .img_box img{width:45px; display:block; float:left;} #header_banner_wrap .header_banner .cont_box div{float: left; margin-top: 2px; margin-left:8px; font-size:1.1em; font-weight:normal; line-height:1.5; letter-spacing:-0.09em;} #header_banner_wrap .header_banner div span{z-index: 99; position:absolute; top:11px; right:3%; margin:auto; padding:10px; background:url(https://cdn.metoon.co.kr/mimg/header_banner_btn.png) no-repeat center; background-size: 100%; letter-spacing: -0.09em;} #header_banner_wrap .header_banner>a{display:block; width:100%; height:100%;} #header_banner_wrap .header_banner2>a{display:block; width:100%; height:100%;} #header_banner_wrap .header_banner2{width:100%; position:relative; height: 60px; background:#5600a3;} #header_banner_wrap .header_banner2 img{width:100%; max-width:400px;position: absolute; bottom: 0; left: 0; right: 0; top:0; margin: auto;} #header_banner_wrap .header_banner2 div{width:100%; max-width:400px; margin: auto; color:var(--main-ft-color); position:relative; height:100%;} #header_banner_wrap .header_banner2 div a{color:var(--main-ft-color); display: block; height: 100%;} #header_banner_wrap .header_banner2 .close{width:25px; height:30px; z-index: 99; position:absolute; top:0px; left:auto; right:0; margin:auto; font-size:18px; padding:0 3px; color:#696969; overflow: hidden; display: block;} #header_banner_wrap .header_banner2 .close img{width:18px; height:18px; margin-top: 5px; float: right; display:block; position:relative;} #header_banner_wrap .header_banner3>a{display:block; width:100%; height:100%;} #header_banner_wrap .header_banner3{width:100%; position:relative; height: 60px; /* background:#2860ff; */} #header_banner_wrap .header_banner3 img{width:100%; max-width:400px;position: absolute; bottom: 0; left: 0; right: 0; top:0; margin: auto;} #header_banner_wrap .header_banner3 div{width:100%; max-width:400px; margin: auto; color:var(--main-ft-color); position:relative; height:100%;} #header_banner_wrap .header_banner3 div a{color:var(--main-ft-color); display: block; height: 100%;} #header_banner_wrap .header_banner3 .close{width:25px; height:30px; z-index: 99; position:absolute; top:0px; left:auto; right:0; margin:auto; font-size:18px; padding:0 3px; color:#696969; overflow: hidden; display: block;} #header_banner_wrap .header_banner3 .close img{width:18px; height:18px; margin-top: 5px; float: right; display:block; position:relative;} #header_banner_wrap .header_banner4{background:#62aaf5;} #header_banner_wrap .header_banner4 .close{width:25px; height:30px; z-index: 99; position:absolute; top:0px; left:auto; right:0; margin:auto; font-size:18px; padding:0 3px; color:#696969; overflow: hidden; display: block;} #header_banner_wrap .header_banner4 .close img{width:18px; height:18px; margin-top: 5px; float: right; display:none; position:relative;} @media only screen and (min-width:600px){ #header_banner_wrap [class^="header_banner"] div{max-width:100%;} #header_banner_wrap [class^="header_banner"] .close{top:8px;right:15px;} } @media all and (min-width:320px) and (max-width:350px){ #header_banner_wrap .header_banner .img_box img{width: 45px;/* margin-top: 3px; */} #header_banner_wrap .header_banner .cont_box div{font-size: 1.05em; margin-left: 5px;/* margin-top: 3px; */} #header_banner_wrap .header_banner div span{letter-spacing: -0.09em; font-size: 0.9em;} } /* 헤더배너 */ /* 헤더 성인버튼 */ .head_top_adult_btn a{display:block; position:relative;} .head_top_adult_btn1 a{display:inline-block; position:relative; vertical-align:middle;} .head_top_adult_btn1 a.gift_icon{width:28px; height:23px; margin-left:10px;} .head_top_adult_btn1 a.gift_icon img{width:100%; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;} .head_top_adult_btn a img.bg{width:45px; display:block;} .head_top_adult_btn a img.btn_19{position:absolute; top:0; bottom:0; margin:auto; display:block; width:17px;} .head_top_adult_btn a.normal img.btn_19{left:3px;} .head_top_adult_btn a.adult img.btn_19{right:2px;border:1px solid #FFFFFF;border-radius:100%;} /* 헤더 성인버튼 */ /* 헤더 검색 170116 */ .search_box2{display:none; position:absolute; z-index:99; right:0%; top:0%; width:100%; height:54px; padding:6px 4px; border-bottom:1px solid #efefef; color:#ccc; background:#fff; overflow:hidden; z-index:999999;} .search_box2 .menu_form{width: 100%; margin-left:10px;} .search_box2 .menu_form_on{margin-left:10px;} .search_box2 .ui-input-text{width:70%; margin:0;background:none; text-shadow:none; display:block; color:#ccc; border:none; border-bottom:1px solid #eee; border-radius:0;} .search_box2 input{width:70%; color:#676767; height:33px; border:none; background:none; display:block; border-radius:5px; font-size:1.1em; line-height: 1; border-bottom:1px solid #eee; border-radius:0; padding: 10px; letter-spacing:-0.09em; ime-mode:active;} .search_box2 input::-webkit-input-placeholder { color:#ccc;} .search_box2 input:-moz-placeholder { color:#ccc; } .search_box2 input::-moz-placeholder { color:#ccc; } .search_box2 input:-ms-input-placeholder { color:#ccc; } .search_box2 input::-webkit-input-value { color:#ccc;} .search_box2 input:-moz-value { color:#ccc; } .search_box2 input::-moz-input-value{ color:#ccc; } .search_box2 input:-ms-input-value{ color:#ccc; } .headTop .search_txt_btn{position:absolute; top:0; right: 4.5%; width:20px; height:auto; bottom:0; margin:auto; z-index:999; padding:0; border:none;} .search_box2 .search_x_btn{position: absolute; top: 0; right: 18%; bottom: 0; margin: auto; display: block; height: 22px; width:22px;} .search_box2 .search_x_btn img{width:100%;} .search_box{display:none; position:absolute; z-index:99; left:0; top:100%; width:100%; height:50px; padding:5px 4px; background:#FDB9CE;} .search_box .ui-input-text{margin:0;} .search_box input{width:100%; height:38px; border:none; border-radius:5px; font-size:1.1em; line-height: 1; padding: 10px;} @media all and (min-width:601px) and (max-width:810px){ .search_box{height:55px;} .search_box input{font-size: 1.4em; height: 43px;} } /* 헤더 검색 170116 */ /* 헤더하단 170116 #header .headBottom{width:100%; float:left; border:none; border-bottom:1px solid #ddd; background:#fff;} .headBottom ul{width:100%;} .headBottom ul li{float:left; width:25%; text-align:center;} .headBottom ul li a{display:block; color:#4e4e4e; font-weight:bold;border:none; background:none; font-size:1.2em; padding:12px 0;} .headBottom ul li .ui-link{color:#4e4e4e; border:none; background:none; font-size:1.2em; padding:14px 0;} .headBottom ul li .ui-btn:focus,.headBottom ul li .ui-btn-active{background:#eee; box-shadow:none; color:#E84D7D; text-shadow:none;} .ui-page-theme-a .ui-btn.ui-btn-active{background:#eee; box-shadow:none; color:#E84D7D; text-shadow:none;} #header .headBottom2{position:relative;width:100%; float:left; border:none; border-bottom:1px solid #ddd; background:#fff;} #header .headBottom2.headUp:before{content:"";display:block;position:absolute;top:0;right:0;width:20px;height:100%;background:-webkit-linear-gradient(right, rgba(255, 255, 255, 1) 18%, rgba(255, 255, 255, .4) 76%, rgba(255, 255, 255, .12));background:linear-gradient(to left, rgba(255, 255, 255, 1) 18%, rgba(255, 255, 255, .4) 76%, rgba(255, 255, 255, .12));z-index:10;} .headBottom2 ul{width:100%;overflow:hidden; display:-webkit-box;display:-webkit-flex;display:flex; -webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;} .headBottom2.headUp #all_headBottom{float:right;width:calc(100% - 120px);padding:3px 7px 3px 0;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;} .headBottom2 ul li{-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1; text-align: center; height:42px; line-height:42px;padding:0 6px;} .headBottom2.headUp ul li:last-child{padding-right:15px;} .headBottom2 ul li a{display:block; color:#2d2d2d; border:none; background:none;font-size:13px;white-space:nowrap;} .headBottom2 ul li .ic_vd_adult{display:inline-block;padding-left:18px;background:url("https://cdn.metoon.co.kr/mimg/icon_19_new_white.png/me/resize/32x") no-repeat 0 center;background-size:16px;vertical-align:top;} .headBottom2 ul li a .sn_logo{position:relative;padding-left:10px;} .headBottom2 ul li a .sn_logo:before{content:""; display:block; position:absolute; top:50%; left:0; width:10px; height:41px; margin-top:-22px; background:url(https://cdn.metoon.co.kr/mimg/sn_logo.jpg) no-repeat center 40%; background-size:100% auto;} .headBottom2 ul li .ui-link{color:#4e4e4e; border:none; background:none; font-size:1.2em; padding:14px 0;} .headBottom2 ul li .ui-btn:focus,.headBottom2 ul li .ui-btn-active{background:#fff; box-shadow:none; text-shadow:none; position:relative; font-weight:bold;} .headBottom2 ul li .ui-btn:focus,.headBottom2 ul li .ui-btn-active:before{display:block; content:""; width:0; height:0; border:7px solid transparent; border-bottom:7px solid #e4e4e4; position:absolute; bottom:0; left:0; right:0; margin:auto;} .headBottom2.headUp ul li .ui-btn:focus, .headBottom2.headUp ul li .ui-btn-active:before{bottom:-3px;} .headBottom2 #all_headBottom li span{padding: 3px 5px; border: 1px solid #b7b7b7; border-radius: 30px; background: #f4f4f4;} .headBottom2 #all_headBottom li span.new_menu{padding:0; border:none; position:relative; background:none; margin-left:-10px;} .headBottom2 #all_headBottom li span.new_menu:after{display:block; content:""; width:13px; height:13px; position:absolute; top:-4px; right:-12px; background:url(https://cdn.metoon.co.kr/mimg/new_menu_icon.png) no-repeat center; background-size:13px;} .headBottom2 #all_headBottom li span.gift_new{padding:0; border:none; position:relative; background:none; margin-left:-12px;} .headBottom2 #all_headBottom li span.gift_new:after{display:block; content:""; width:13px; height:13px; position:absolute; top:-9px; right:-7px; background:url(https://cdn.metoon.co.kr/mimg/gift_new_icon.png) no-repeat center; background-size:13px;} .head_tab_menu2{float:left; width:100%; background:#fff; border-bottom:1px solid #ddd;} .head_tab_menu2 ul{display:-webkit-box;display:-webkit-flex;display:flex; -webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;} .head_tab_menu2 ul li{-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1; height:42px; line-height:40px; text-align:center;} .head_tab_menu2 ul li a{display:block; font-size:13px; font-weight:normal; border-bottom:2px solid #fff; letter-spacing:-1px; color:#4e4e4e;} .head_tab_menu2 ul li a.on{border-color:var(--bg-fc-color);color:var(--bg-fc-color);} #header.active .headTop.headFade{margin-top:-48px;} #header.active h1.logo{position:absolute;top:100%;left:0;margin-top:14px;z-index:991;} #header.active .hdb-menu-swipe{padding:6px 7px 0 5px;width:calc(100% - 65px);float:right;} #header.active .hdb-menu-swipe.main-dhb-menu{padding-bottom:6px;} #header.active .hdb-menu-swipe:after{content:"";display:block;position:absolute;top:0;right:5px;width:12px;height:100%;background:linear-gradient(to left, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, .6) 40%, rgba(255, 255, 255, 0) 100%);z-index:10;} @media all and (min-width:320px) and (max-width:360px){ .headBottom2 #all_headBottom li span{font-size:1em;} } @media all and (min-width:601px) and (max-width:810px){ .headBottom ul li .ui-link{font-size: 1.5em;} } @media all and (max-width:369px){ #header .headTop .ht_contbox{left:10px;} #header .headTop .ht_menu{right:10px;} #header .ui-title1{width:86px;} #header.active h1.logo{margin-top:15px;} .headBottom2.headUp #all_headBottom{width:calc(100% - 105px);} } @media all and (max-width:354px){ #header .headTop .ht_menu li + li{padding-left:5px;} } 헤더 */ #header_detail{position:-webkit-sticky;position:sticky; top:0; left:0; width:100%; height:54px; border-bottom:1px solid var(--main-line-color); background:var(--sub-bg-color); z-index:990;} #header_detail .hd_contbox{display:-webkit-box;display:-webkit-flex;display:flex; width:calc(100% - 124px); height:100%; overflow:hidden; -webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:0 15px 0 10px;} #header_detail .hd_contbox .hd_back{display:block; width:22px; height:18px; background:url("https://cdn.metoon.co.kr/mimg/hd_back_01.svg") no-repeat 0 center; background-size:21px auto; padding-right:10px;} #header_detail .hd_contbox .title{width:calc(100% - 32px); line-height:1;} #header_detail .hd_contbox .title h2{width:100%; font-size:17px;font-weight:500; color:var(--main-ft-color); text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} #header_detail .hd_contbox .title h3{width:100%; font-size:18px;font-weight:400; color:var(--main-ft-color); margin-top:5px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} #header_detail .hd_menu{height:100%; display:table;padding-right:10px;white-space:nowrap;} #header_detail .hd_menu li{display:table-cell;vertical-align:middle;} #header_detail .hd_menu li + li{padding-left:10px;} #header_detail .hd_menu li .htm_ic{display:block;text-align:center;height:20px;} #header_detail .hd_menu li .htm_ic img{width:18px;height:100%;object-fit:contain;} #header_detail .hd_menu li .htm_txt{display:block;text-align:center;font-size:10px;height:13px;line-height:13px;} #header_detail .hd_menu li .htm_txt img{height:8px;vertical-align:middle;margin-top:-1px;} #header_detail.hd_calendar{height:auto;} #header_detail .header_inner_cont{position:relative;width:100%;max-width:1200px;height:53px;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:0 auto;} #header_detail.hd_calendar .hd_detail_inner{border-bottom:1px solid #ddd;} #header_detail.hd_calendar .header_inner_cont{height:54px;} #header_detail.hd_calendar .hd_contbox{width:calc(100% - 160px);} #header_detail.hd_challenge{height:auto;} #header_detail.hd_challenge .header_inner_cont{border-bottom:1px solid #efefef;} #header_detail.hd_challenge .head_tab_menu2{border-bottom:0 none;} /* me_sidelogcont_wrap */ .me_sidencont_wrap{height: 100%; width: 80%; border-right: 1px solid #ddd; text-shadow:none; position:fixed; top:0; left:-80%; z-index:99999; overflow-y: scroll;} .ui-panel-display-overlay{z-index: 99999;} #me_sidelogcont_wrap{ background:#fff; float:left; box-sizing:border-box; z-index:99999; padding:0px 0 0px;overflow-y: auto; font-size:1.1em;} #me_sidelogcont_wrap .close_btn{position: absolute; z-index: 999999999; right: 7px; top: 7px; width:27px; height:27px; display:block; background:url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%; text-indent: -999999999999999999em; overflow:hidden;} #me_sidelogcont_wrap .select_title{height:44px; padding:10px 0px 10px; background:#E84D7D; color:var(--main-ft-color); z-index:99999; box-sizing: border-box; font-size:1.1em; font-weight:bold; text-align:center; letter-spacing:-0.09em; } #me_sidelogcont_wrap div p{height:20px; margin: auto;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width: 90%; } #me_sidelog_wrap ul{width:100%; overflow:hidden; background:#fff; margin:60px 0 0;} #me_sidelog_wrap li{padding:5px 5px 0; border-bottom:1px solid #ddd;} #me_sidelog_wrap li a{color:#676767;white-space: nowrap; text-overflow: ellipsis; font-weight:normal; overflow:hidden;display: block; letter-spacing:-0.09em; position:relative;font-size: 0.9em;} #me_sidelog_wrap li a img{width:100%; border-radius:5px;} #me_sidelog_wrap li a p{bottom:0; top: inherit; background:#fff;left: 0; width: 100%; padding: 3px 0;} #me_sidelog_wrap li:hover{background:#ececec;} /* me_sidelogcont_wrap */ /* 사이드메뉴 */ #side_menu_wrap{ width: 80%; background:#56606b; color:var(--main-ft-color); text-shadow:none; box-shadow:none; position:fixed; z-index:99999; top: 0; left:-100%; height: 100%; overflow-y:scroll;} #side_menu_wrap a{color:var(--main-ft-color);} #side_menu_wrap .log_box{padding:15px 10px; background:#e84d7d; overflow:hidden;} #side_menu_wrap .log_box ul{width:80%; text-align:left; } #side_menu_wrap .log_box li{text-align:center; display:inline-block; margin:15px 5px 5px 0; } #side_menu_wrap .log_box a{color:#e84d7d; background:#fff; padding:6px 10px 5px; border-radius:5px; font-size:1.1em; font-weight:bold;} #side_menu_wrap .log_after .log_id{display:block; max-width: 200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 5px;} #side_menu_wrap .log_after .log_id img{vertical-align: middle; width: 23px;} #side_menu_wrap .log_after p{padding:5px 0;} #side_menu_wrap .log_after .my_coin{font-weight:bold; display: inline-block; background:url(https://cdn.metoon.co.kr/mimg/icon_mycoin_point.png) no-repeat 5px center; text-indent:30px; background-size:21px;} #side_menu_wrap .log_after .my_coin span{color:#ffea00; margin-left:10px; font-size:1.1em;} #side_menu_wrap .sidemenu_list{width:100%; border-bottom:1px solid #727b86;} #side_menu_wrap .sidemenu_list li{border-bottom:1px solid #49535d; border-top:1px solid #727b86;} #side_menu_wrap .sidemenu_list .gift_page{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px center; background-size:18px 18px} #side_menu_wrap .sidemenu_list .mypage{background:url(https://cdn.metoon.co.kr/mimg/icon_mypage_big.png) no-repeat 15px center; background-size:15px 19px;} #side_menu_wrap .sidemenu_list .MEcoin{background:url(https://cdn.metoon.co.kr/mimg/icon_MEcoin_big.png) no-repeat 15px center; background-size:18px 16px;} #side_menu_wrap .sidemenu_list .coupon{background:url(https://cdn.metoon.co.kr/mimg/icon_coupon_big.png) no-repeat 15px center; background-size:22px 14px;} #side_menu_wrap .sidemenu_list .event{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px center; background-size:18px 18px} #side_menu_wrap .sidemenu_list .survice_center{background:url(https://cdn.metoon.co.kr/mimg/icon_survice_center_big.png) no-repeat 15px center; background-size:16px 15px;} #side_menu_wrap .sidemenu_list li a{font-weight:bold; font-size:1.1em; display:block; padding:15px 45px; background:url(https://cdn.metoon.co.kr/mimg/icon_arrow.png) no-repeat 95% center; background-size:6px; text-shadow:none;} #side_menu_wrap .sidemenu_list .MEcoin a{color:#e84d7d;} #side_menu_wrap .sidemenu_list .logout a{background:none;} #side_menu_wrap .sidemenu_list .logout{background:url(https://cdn.metoon.co.kr/mimg/btn_logout.png) no-repeat 15px center;} #side_menu_wrap .close_btn{position:absolute; top:10px; right:10px; width:27px; height:27px; display:block; text-indent:-999999em; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center;background-size:100%;} /* 성별 탭 */ .log_after{position:relative;} .log_after .my_gender{position:absolute; bottom:2px; right:0; top: auto; left: auto; background:#fff; border:1px solid #ddd; border-radius:3px; color:#2c2c2c; letter-spacing:-0.09em;} .log_after .my_gender p{padding:3px 5px !important;} .log_after .my_gender span.man{color:#4967ff;} .log_after .my_gender span.woman{color:#f05583;} .log_after .my_gender span.all_gender{color:#676767;} #side_menu .log_box .log_after .my_gender a{color:#2c2c2c; padding:0; font-weight:normal; font-size:1em;} #adult_side_menu .log_box .log_after .my_gender a{color:#2c2c2c; padding:0; font-weight:normal; font-size:1em;} /* 성별 탭 */ @media all and (min-width:601px) and (max-width:810px){ #side_menu_wrap{font-size: 1em;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #side_menu_wrap{font-size: 1em;} #side_menu_wrap .log_after .log_id img{vertical-align: middle; width: 23px;} #side_menu_wrap .log_after .my_coin{background: url(https://cdn.metoon.co.kr/mimg/icon_mycoin_point.png) no-repeat 5px 49%; background-size: 21px;} #side_menu_wrap .sidemenu_list .MEcoin{background: url(https://cdn.metoon.co.kr/mimg/icon_MEcoin_big.png) no-repeat 15px 48%;background-size: 18px 16px;} #side_menu_wrap .sidemenu_list .coupon{background: url(https://cdn.metoon.co.kr/mimg/icon_coupon_big.png) no-repeat 15px 49%; background-size: 22px 14px;} #side_menu_wrap .sidemenu_list .event{background: url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px 43%; background-size: 18px 18px;} #side_menu_wrap .sidemenu_list .survice_center{background: url(https://cdn.metoon.co.kr/mimg/icon_survice_center_big.png) no-repeat 15px 48%; background-size: 16px 15px;} #side_menu_wrap .sidemenu_list .logout{ background: url(https://cdn.metoon.co.kr/mimg/btn_logout.png) no-repeat 15px 48%;} #side_menu_wrap .sidemenu_list li a{font-size:1em;} } @media screen and (orientation:landscape) and (max-width:780px){ #side_menu_wrap{font-size: 1.2em;} } @media screen and (orientation:landscape) and (max-width:667px){ #side_menu_wrap{font-size: 1.2em;} } @media screen and (orientation:landscape) and (max-width:570px){ } @media screen and (orientation:landscape) and (max-width:480px){ #side_menu_wrap{font-size: 1em;} } /* 비성인 사이드메뉴 nav */ #side_menu_wrap_n{position: fixed;width:80%; background:#56606b; color:var(--main-ft-color); text-shadow:none; box-shadow:none;} .side_menu_n{display:none;} #side_menu_wrap_n .ui-listview{margin:0;} #side_menu_wrap_n .mm-navbar{border:none;} #side_menu_wrap_n .mm-title{display:none;} #side_menu_wrap_n .mm-prev{right:7px; top:7px; left:initial; width:27px; height:27px; display:block; text-indent:-999999em; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} #side_menu_wrap_n .mm-prev:before{display:none;} #side_menu_wrap_n a{color:var(--main-ft-color); } #side_menu_wrap_n #app_down_btn{width:100%; display:block; background:#eee; color:#3a3a3a; padding:10px 0;} #side_menu_wrap_n #app_down_btn span{padding-left:15px; font-size:1.15em; font-weight:bold; letter-spacing:-0.05em;} #side_menu_wrap_n #app_down_btn img{width:13%; display:inline-block; vertical-align: middle;margin-right:10px; max-width:50px;} @media all and (min-width:320px) and (max-width:350px){ #side_menu_wrap_n #app_down_btn span{font-size:1.1em;} } #side_menu_wrap_n .log_box{padding:15px 10px; background:#e84d7d; overflow:hidden; position:relative;/* width: 100%; */ display: block;} #side_menu_wrap_n .log_box ul{width:100%; text-align:left; } #side_menu_wrap_n .log_box li{text-align:center; display:inline-block; margin:15px 5px 5px 0; position:relative; } #side_menu_wrap_n .log_box li .mm-next{background:none; position:absolute; top:0; bottom:0; left:0; right:0; padding:0;} #side_menu_wrap_n .log_box li .mm-next:after{display:none;} #side_menu_wrap_n .log_box a{color:#e84d7d; background:#fff; padding:6px 10px 5px; border-radius:5px; font-size:1.1em; font-weight:bold;margin-right: 0;} #side_menu_wrap_n .log_after .log_id{display:block; margin-bottom: 0px; padding-top:0;} #side_menu_wrap_n .log_after .log_id img{vertical-align: middle; width: 23px; margin-right:5px;} #side_menu_wrap_n .log_after p{padding:5px 0;} #side_menu_wrap_n .log_after .my_coin{font-weight:bold; display: inline-block; background:url(https://cdn.metoon.co.kr/mimg/icon_mycoin_point.png) no-repeat 5px center; text-indent:30px; background-size:21px;} #side_menu_wrap_n .log_after .my_coin span{color:#ffea00; margin-left:10px; font-size:1.1em;} #side_menu_wrap_n .log_after .my_grade{display:none; overflow:hidden; border: 1px solid #ddd; text-align:center; border-radius:5px; width: 85%; margin: 20px auto 0; font-size:0.9em;} #side_menu_wrap_n .log_after .my_grade img{vertical-align: middle; width: 20px;} #side_menu_wrap_n .log_after .my_grade p{display:inline-block; width:50%; float:left; padding:10px 0; } #side_menu_wrap_n .log_after .my_grade p span{position:relative; padding-left:28px; } #side_menu_wrap_n .log_after .my_grade p span img{position:absolute; top:0; bottom:0; left:0; margin:auto;} #side_menu_wrap_n .log_after .my_grade .ticket_day{border-left:1px solid #eee; box-sizing:border-box;} #side_menu_wrap_n .side_log_banner_box{padding:10px 0; text-align:center; background:url(https://cdn.metoon.co.kr/mimg/side_log_banner_box_bg.png); background-size:100% 100%; line-height: 1.3; font-size: 13px; position:relative;} #side_menu_wrap_n .side_log_banner{margin:0; width:100%; position: static;} #side_menu_wrap_n .side_log_banner p{display:block; margin:2px auto 8px; font-size:0.9em;} #side_menu_wrap_n .side_log_banner img{width:23px; display:inline-block;} #side_menu_wrap_n .side_log_banner .coin_btn{display:inline-block; padding:3px 5px; font-size:1em; color:#e84d7d; background:#fff; border-radius:5px; font-weight:bold;} #side_menu_wrap_n .side_log_banner .close{position:absolute; top:5px; right:5px; display:block;width:19px; height:19px; padding:0; background: url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} #side_menu_wrap_n .sidemenu_list{width:100%; border-bottom:1px solid #727b86;} #side_menu_wrap_n .sidemenu_list li{border-bottom:1px solid #49535d; border-top:1px solid #727b86;} #side_menu_wrap_n .sidemenu_list .mypage{background:url(https://cdn.metoon.co.kr/mimg/icon_mypage_big.png) no-repeat 15px center; background-size:15px 19px;} #side_menu_wrap_n .sidemenu_list .freecoin{background:url(https://cdn.metoon.co.kr/mimg/icon_free_fill1.png) no-repeat 15px center; background-size:18px 18px;} #side_menu_wrap_n .sidemenu_list .MEcoin{background:url(https://cdn.metoon.co.kr/mimg/icon_me_fill2.png) no-repeat 15px center; background-size:18px 18px;} #side_menu_wrap_n .sidemenu_list .coupon{background:url(https://cdn.metoon.co.kr/mimg/icon_coupon_big.png) no-repeat 15px center; background-size:22px 14px;} #side_menu_wrap_n .sidemenu_list .event{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px center; background-size:18px 18px} #side_menu_wrap_n .sidemenu_list .event_li{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px center; background-size:18px 18px} #side_menu_wrap_n .sidemenu_list .survice_center{background:url(https://cdn.metoon.co.kr/mimg/icon_survice_center_big.png) no-repeat 15px center; background-size:16px 15px;} #side_menu_wrap_n .sidemenu_list .my_nobel_data{background:url(https://cdn.metoon.co.kr/mimg/icon_my_nobel_data.png) no-repeat 15px center; background-size:18px 17px;} #side_menu_wrap_n .sidemenu_list .my_zzim_data{background:url(https://cdn.metoon.co.kr/mimg/icon_my_like_data.png) no-repeat 15px center; background-size:18px 15px;} #side_menu_wrap_n .sidemenu_list li a{font-weight:bold; font-size:1em; display:block; padding:12px 45px; background:url(https://cdn.metoon.co.kr/mimg/icon_arrow.png) no-repeat 95% center; background-size:6px;} #side_menu_wrap_n .sidemenu_list .MEcoin a{color:#ffea00;} #side_menu_wrap_n .sidemenu_list .logout a{background:none;} #side_menu_wrap_n .sidemenu_list .logout{background:url(https://cdn.metoon.co.kr/mimg/btn_logout.png) no-repeat 15px center;} .mm-listview>li:not(.mm-divider):after{border:none !important;} #side_menu_wrap_n .sidemenu_list .event span{font-weight:bold; font-size:1em; display:block; padding:12px 45px; background: url(https://cdn.metoon.co.kr/mimg/icon_arrow_down.png) no-repeat 95% center; background-size: 12px;} #side_menu_wrap_n .sidemenu_list .event_box{border-bottom:0; display:none;} #side_menu_wrap_n .sidemenu_list .event_box a{font-size:0.9em; font-weight:normal; display:block; border-bottom:1px solid #727b86; padding: 8px 45px;} #side_menu_wrap_n .sidemenu_list .event_box .free{border-bottom:1px solid #49535d;} #side_menu_wrap_n #app_down_btn{width:100%; display:block; background:#eee; color:#3a3a3a; padding:10px 0; /* position:absolute; bottom:0; left:0; *//* text-align:center; */} #side_menu_wrap_n #app_down_btn span{padding-left:15px; font-size:1.15em; font-weight:bold; letter-spacing:-0.05em;} #side_menu_wrap_n #app_down_btn img{width:13%; display:inline-block; vertical-align: middle;margin-right:10px; max-width:50px;} #side_menu_wrap_n .close_btn_log{display:none;position:absolute; top:8px; right:8px; width:27px; height:27px; margin:0;} #side_menu_wrap_n .close_btn_log a{padding:0; width:27px; height:27px; display:block; text-indent:-999999em; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} #side_menu_wrap_n .sidemenu_list .close_btn{border:none; position: absolute; right: 10px; top: 10px; padding: 0; width: 27px; height: 27px; display: block; text-indent: -999999em; overflow: hidden; background: url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size: 100%;} #side_menu_wrap_n .sidemenu_list .close_btn a{padding:0; display:block; width:100%; height:100%; background:none;} #mm-blocker .close_btn{ position: absolute; left: -35px; top: 10px;padding:0; width:27px; height:27px; display:none; text-indent:-999999em; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} @media screen and (orientation:landscape) and (min-width:320px) and (max-width:950px){ #side_menu_wrap_n #app_down_btn{position:static;} } /* 비성인 사이드메뉴 nav */ /* 성인 사이드메뉴 nav */ #adult_side_menu_wrap_n{position: fixed;width:80%; background:#404040; color:var(--main-ft-color); text-shadow:none; box-shadow:none;} #adult_side_menu_wrap_n .ui-listview{margin:0;} #adult_side_menu_wrap_n .mm-navbar{border:none;} #adult_side_menu_wrap_n .mm-title{display:none;} #adult_side_menu_wrap_n .mm-prev{right:7px; top:7px; left:initial; width:27px; height:27px; display:block; text-indent:-999999em; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} #adult_side_menu_wrap_n .mm-prev:before{display:none;} #adult_side_menu_wrap_n a{color:var(--main-ft-color); } #adult_side_menu_wrap_n #app_down_btn{width:100%; display:block; background:#eee; color:#3a3a3a; padding:10px 0;} #adult_side_menu_wrap_n #app_down_btn span{padding-left:15px; font-size:1.15em; font-weight:bold; letter-spacing:-0.05em;} #adult_side_menu_wrap_n #app_down_btn img{width:13%; display:inline-block; vertical-align: middle;margin-right:10px; max-width:50px;} @media all and (min-width:320px) and (max-width:350px){ #adult_side_menu_wrap_n #app_down_btn{position:static;} #side_menu_wrap_n #app_down_btn{position:static;} #adult_side_menu_wrap_n #app_down_btn span{font-size:1.1em;} } @media screen and (orientation:landscape) and (min-width:320px) and (max-width:950px){ #adult_side_menu_wrap_n #app_down_btn{position:static;} } #adult_side_menu_wrap_n .log_box{padding:15px 10px; background:var(--bg-fc-color); overflow:hidden; display:block; position:relative;} #adult_side_menu_wrap_n .log_box ul{width:100%; text-align:left; } #adult_side_menu_wrap_n .log_box li{text-align:center; display:inline-block; margin:15px 5px 5px 0; position:relative; } #adult_side_menu_wrap_n .log_box li .mm-next{background:none; position:absolute; top:0; bottom:0; left:0; right:0; padding:0;} #adult_side_menu_wrap_n .log_box li .mm-next:after{display:none;} #adult_side_menu_wrap_n .log_box a{color:var(--bg-fc-color); background:#fff; padding:6px 10px 5px; border-radius:5px; font-size:1.1em; font-weight:bold;margin-right: 0;} #adult_side_menu_wrap_n .log_after .log_id{display:block; margin-bottom: 0px; } #adult_side_menu_wrap_n .log_after .log_id img{vertical-align: middle; width: 23px;} #adult_side_menu_wrap_n .log_after p{padding:5px 0;} #adult_side_menu_wrap_n .log_after .my_coin{font-weight:bold; display: inline-block; background:url(https://cdn.metoon.co.kr/mimg/icon_mycoin_point.png) no-repeat 5px center; text-indent:30px; background-size:21px;} #adult_side_menu_wrap_n .log_after .my_coin span{color:#ffea00; margin-left:10px; font-size:1.1em;} #adult_side_menu_wrap_n .sidemenu_list{width:100%; border-bottom:1px solid #484848;} #adult_side_menu_wrap_n .sidemenu_list li{border-bottom:1px solid #353535; border-top:1px solid #484848;} #adult_side_menu_wrap_n .sidemenu_list .mypage{background:url(https://cdn.metoon.co.kr/mimg/icon_mypage_big.png) no-repeat 15px center; background-size:15px 19px;} #adult_side_menu_wrap_n .sidemenu_list .freecoin{background:url(https://cdn.metoon.co.kr/mimg/icon_free_fill1.png) no-repeat 15px center; background-size:18px 18px;} #adult_side_menu_wrap_n .sidemenu_list .MEcoin{background:url(https://cdn.metoon.co.kr/mimg/icon_me_fill2.png) no-repeat 15px center; background-size:18px 18px;} #adult_side_menu_wrap_n .sidemenu_list .coupon{background:url(https://cdn.metoon.co.kr/mimg/icon_coupon_big.png) no-repeat 15px center; background-size:22px 14px;} #adult_side_menu_wrap_n .sidemenu_list .event{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px center; background-size:18px 18px} #adult_side_menu_wrap_n .sidemenu_list .event_li{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px center; background-size:18px 18px} #adult_side_menu_wrap_n .sidemenu_list .survice_center{background:url(https://cdn.metoon.co.kr/mimg/icon_survice_center_big.png) no-repeat 15px center; background-size:16px 15px;} #adult_side_menu_wrap_n .sidemenu_list .my_nobel_data{background:url(https://cdn.metoon.co.kr/mimg/icon_my_nobel_data.png) no-repeat 15px center; background-size:18px 17px;} #adult_side_menu_wrap_n .sidemenu_list .my_zzim_data{background:url(https://cdn.metoon.co.kr/mimg/icon_my_like_data.png) no-repeat 15px center; background-size:18px 15px;} #adult_side_menu_wrap_n .sidemenu_list li a{font-weight:bold; font-size:1em; display:block; padding:12px 45px; background:url(https://cdn.metoon.co.kr/mimg/icon_arrow.png) no-repeat 95% center; background-size:6px;} #adult_side_menu_wrap_n .sidemenu_list .MEcoin a{color:#ffea00;} #adult_side_menu_wrap_n .sidemenu_list .logout a{background:none;} #adult_side_menu_wrap_n .sidemenu_list .logout{background:url(https://cdn.metoon.co.kr/mimg/btn_logout.png) no-repeat 15px center;} #adult_side_menu_wrap_n .sidemenu_list .event span{font-weight:bold; font-size:1em; display:block; padding:12px 45px; background: url(https://cdn.metoon.co.kr/mimg/icon_arrow_down.png) no-repeat 95% center; background-size: 12px;} #adult_side_menu_wrap_n .sidemenu_list .event_box{border-bottom:0; display:none;} #adult_side_menu_wrap_n .sidemenu_list .event_box a{font-size:0.9em; font-weight:normal; display:block; border-bottom:1px solid #484848; padding: 8px 45px;} #adult_side_menu_wrap_n .sidemenu_list .event_box .free{border-bottom:1px solid #353535;} #adult_side_menu_wrap_n .sidemenu_list .close_btn{border:none; position: absolute; right: 10px; top: 10px; padding: 0; width: 27px; height: 27px; display: block; text-indent: -999999em; overflow: hidden; background: url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size: 100%;} #adult_side_menu_wrap_n .sidemenu_list .close_btn a{padding:0; display:block; width:100%; height:100%; background:none;} #adult_side_menu_wrap_n .close_btn_log{display:none;position:absolute; top:8px; right:8px; width:27px; height:27px; margin:0;} #adult_side_menu_wrap_n .close_btn_log a{padding:0; width:27px; height:27px; display:block; text-indent:-999999em; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} #adult_side_menu_wrap_n .log_after .my_grade{display:none; overflow:hidden; border: 1px solid #ddd; text-align:center; border-radius:5px; width: 85%; margin: 20px auto 0; font-size:0.9em;} #adult_side_menu_wrap_n .log_after .my_grade img{vertical-align: middle; width: 20px;} #adult_side_menu_wrap_n .log_after .my_grade p{display:inline-block; width:50%; float:left; padding:10px 0; } #adult_side_menu_wrap_n .log_after .my_grade p span{position:relative; padding-left:28px; } #adult_side_menu_wrap_n .log_after .my_grade p span img{position:absolute; top:0; bottom:0; left:0; margin:auto;} #adult_side_menu_wrap_n .log_after .my_grade .ticket_day{border-left:1px solid #eee; box-sizing:border-box;} #adult_side_menu_wrap_n .side_log_banner_box{padding:10px 0; text-align:center; background:url(https://cdn.metoon.co.kr/mimg/side_log_banner_box_bg.png); background-size:100% 100%; line-height: 1.3; font-size: 13px; position:relative;} #adult_side_menu_wrap_n .side_log_banner{margin:0; width:100%; position: static;} #adult_side_menu_wrap_n .side_log_banner p{display:block; margin:2px auto 8px; font-size:0.9em;} #adult_side_menu_wrap_n .side_log_banner img{width:23px; display:inline-block;} #adult_side_menu_wrap_n .side_log_banner .coin_btn{display:inline-block; padding:3px 5px; font-size:1em; color:#c53232; background:#fff; border-radius:5px; font-weight:bold;} #adult_side_menu_wrap_n .side_log_banner .close{position:absolute; top:5px; right:5px; display:block;width:19px; height:19px; padding:0; background: url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} /* 성인 사이드메뉴 nav */ span.side_menu_bg{position:fixed; width:100%; height:100%; top:0; left:0; bottom:0; display:block; background:rgba(0,0,0,0.4); z-index:1000; display:none;} /* 비성인 사이드메뉴 nav 170111 */ /* #side_menu{position: fixed; top: 0; left: -260px; bottom:0; width:260px; height:100%; z-index:1000; background:#56606b; color:var(--main-ft-color); text-shadow:none; box-shadow:none; overflow-y:scroll;}pink 버전 */ #side_menu{position: fixed; top: 0; left: -260px; bottom:0; width:260px; height:100%; z-index:1000; background:#404040; color:var(--main-ft-color); text-shadow:none; box-shadow:none; overflow-y:scroll;}/* white 버전 */ #side_menu .ui-listview{margin:0;} #side_menu .mm-navbar{border:none;} #side_menu .mm-title{display:none;} #side_menu .mm-prev{right:7px; top:7px; left:initial; width:27px; height:27px; display:block; text-indent:-999999em; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} #side_menu .mm-prev:before{display:none;} #side_menu a{color:var(--main-ft-color); } #side_menu #app_down_btn{width:100%; display:block; background:#eee; color:#3a3a3a; padding:10px 0;} #side_menu #app_down_btn span{padding-left:15px; font-size:1.15em; font-weight:bold; letter-spacing:-0.05em;} #side_menu #app_down_btn img{width:13%; display:inline-block; vertical-align: middle;margin-right:10px; max-width:50px;} @media all and (min-width:320px) and (max-width:350px){ #side_menu #app_down_btn span{font-size:1.1em;} #side_menu #app_down_btn{position:static;} } /* #side_menu .log_box{padding:15px 10px; background:#e84d7d; overflow:hidden; position:relative; display: block;}pink 버전 */ #side_menu .log_box{padding:15px 10px; background:var(--bg-fc-color); overflow:hidden; position:relative; display: block;}/* white 버전 */ #side_menu .log_box ul{width:100%; text-align:left; } #side_menu .log_box li{text-align:center; display:inline-block; margin:15px 5px 5px 0; position:relative; } #side_menu .log_box li .mm-next{background:none; position:absolute; top:0; bottom:0; left:0; right:0; padding:0;} #side_menu .log_box li .mm-next:after{display:none;} /* #side_menu .log_box a{color:#e84d7d; background:#fff; padding:6px 10px 5px; border-radius:5px; font-size:1.1em; font-weight:bold;margin-right: 0;}pink 버전 */ #side_menu .log_box a{color:#404040; background:#fff; padding:6px 10px 5px; border-radius:5px; font-size:1.1em; font-weight:bold;margin-right: 0;}/* white 버전 */ /* 변경후 */ #side_menu .log_box .log_before .side_logo{width:70px; display:block; margin-bottom:5px;} #side_menu .log_box .log_before .log_brfore_txt{font-size:1.1em; letter-spacing:-0.09em;} #side_menu .log_box .log_before .log_brfore_txt span{font-size:0.9em; display:block;} #side_menu .log_box .log_box_btn li{text-align:center; display:block; float:left; margin:8px 0 0px; position:relative; width:48.5%;} #side_menu .log_box .log_box_btn li:first-child{margin-right:3%;} #side_menu .log_box .log_box_btn a{color:#404040; background:#fff; padding:8px 0px 7px; border-radius:5px; font-size:1.1em; display:block; font-weight:bold;margin-right: 0;} /* 변경후 */ #side_menu .log_after .log_id{display:block; margin-bottom: 0px; /* padding-top:0; */} #side_menu .log_after .log_id img{vertical-align: middle; width: 23px; margin-right:5px;} #side_menu .log_after p{padding:5px 0;} #side_menu .log_after .my_coin{font-weight:bold; display: inline-block; background:url(https://cdn.metoon.co.kr/mimg/icon_mycoin_point.png) no-repeat 5px center; text-indent:30px; background-size:21px;} #side_menu .log_after .my_coin span{color:#ffea00; margin-left:10px; font-size:1.1em;} #side_menu .log_after .my_grade{display:none; overflow:hidden; border: 1px solid #ddd; text-align:center; border-radius:5px; width: 85%; margin: 20px auto 0; font-size:0.9em;} #side_menu .log_after .my_grade img{vertical-align: middle; width: 20px;} #side_menu .log_after .my_grade p{display:inline-block; width:50%; float:left; padding:10px 0; } #side_menu .log_after .my_grade p span{position:relative; padding-left:28px; } #side_menu .log_after .my_grade p span img{position:absolute; top:0; bottom:0; left:0; margin:auto;} #side_menu .log_after .my_grade .ticket_day{border-left:1px solid #eee; box-sizing:border-box;} #side_menu .side_log_banner_box{padding:10px 0; text-align:center; background:url(https://cdn.metoon.co.kr/mimg/side_log_banner_box_bg.png); background-size:100% 100%; line-height: 1.3; font-size: 13px; position:relative;} #side_menu .side_log_banner{margin:0; width:100%; position: static;} #side_menu .side_log_banner p{display:block; margin:2px auto 8px; font-size:0.9em;} #side_menu .side_log_banner img{width:23px; display:inline-block;} /* #side_menu .side_log_banner .coin_btn{display:inline-block; padding:3px 5px; font-size:1em; color:#e84d7d; background:#fff; border-radius:5px; font-weight:bold;}pink 버전 */ #side_menu .side_log_banner .coin_btn{display:inline-block; padding:3px 5px; font-size:1em; color:var(--bg-fc-color); background:#fff; border-radius:5px; font-weight:bold;}/* white 버전 */ #side_menu .side_log_banner .close{position:absolute; top:5px; right:5px; display:block;width:19px; height:19px; padding:0; background: url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} #side_menu .side_banner_box{width:100%; position:relative;} #side_menu .side_banner_box a{display:block; width:100%;} #side_menu .side_banner_box img{display:block; width:100%;} #side_menu .side_banner_box .close{position:absolute; top:2px; left:5px; display:block;width:19px; height:19px; padding:0; background: url(https://cdn.metoon.co.kr/mimg/m_header_banner_X_gray.png) no-repeat center; background-size:100%;} /* 2017-08-30 수정 */ #side_menu .sidemenu_list{width:100%; border-bottom:1px solid #484848;} /* #side_menu .sidemenu_list li{border-bottom:1px solid #49535d; border-top:1px solid #727b86;}pink 버전 */ #side_menu .sidemenu_list li{border-bottom:1px solid #353535; border-top:1px solid #484848;}/* white 버전 */ #side_menu .sidemenu_list .gift_page{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px center; background-size:18px 18px} #side_menu .sidemenu_list .mypage{background:url(https://cdn.metoon.co.kr/mimg/icon_mypage_big.png) no-repeat 15px center; background-size:15px 19px;} #side_menu .sidemenu_list .freecoin{background:url(https://cdn.metoon.co.kr/mimg/icon_free_fill1.png) no-repeat 15px center; background-size:18px 18px;} #side_menu .sidemenu_list .MEcoin{background:url(https://cdn.metoon.co.kr/mimg/icon_me_fill2.png) no-repeat 15px center; background-size:18px 18px;} #side_menu .sidemenu_list .coupon{background:url(https://cdn.metoon.co.kr/mimg/icon_coupon_big.png) no-repeat 15px center; background-size:22px 14px;} /* 변경전 */#side_menu .sidemenu_list .event{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px center; background-size:18px 18px}/* 변경전 */ /* 변경후 */#side_menu .sidemenu_list .event2{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big1.png) no-repeat 15px center; background-size:18px 18px}/* 변경후 */ #side_menu .sidemenu_list .event_li{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px center; background-size:18px 18px} #side_menu .sidemenu_list .survice_center{background:url(https://cdn.metoon.co.kr/mimg/icon_survice_center_big2.png) no-repeat 15px center; background-size:16px 15px;} #side_menu .sidemenu_list .setting{background:url(https://cdn.metoon.co.kr/mimg/icon_survice_center_big.png) no-repeat 15px center; background-size:16px 15px;} #side_menu .sidemenu_list .my_nobel_data{background:url(https://cdn.metoon.co.kr/mimg/icon_my_nobel_data.png) no-repeat 15px center; background-size:18px 17px;} #side_menu .sidemenu_list .my_zzim_data{background:url(https://cdn.metoon.co.kr/mimg/icon_my_like_data.png) no-repeat 15px center; background-size:18px 15px;} /* #side_menu .sidemenu_list .logout{background:url(https://cdn.metoon.co.kr/mimg/btn_logout.png) no-repeat 15px center;}pink 버전 */ #side_menu .sidemenu_list .logout{background:url(https://cdn.metoon.co.kr/mimg/adult_btn_logout.png) no-repeat 15px center; background-size:14px;}/* white 버전 */ #side_menu .sidemenu_list li a{font-weight:bold; font-size:1em; display:block; padding:12px 45px; background:url(https://cdn.metoon.co.kr/mimg/icon_arrow.png) no-repeat 95% center; background-size:6px;} #side_menu .sidemenu_list .MEcoin a{color:#ffea00;} #side_menu .sidemenu_list .logout a{background:none;} #side_menu .sidemenu_list .data_save a{background:none; position: relative; padding:12px;} #side_menu .sidemenu_list .data_save a span{display: inline-block; position:absolute; top:8px; right:8px; margin: auto;} #side_menu .sidemenu_list .data_save a span img.bg{width: 50px; display: block;} #side_menu .sidemenu_list .data_save a span img.btn_data{position: absolute; top: 0; bottom: 0; margin: auto; display: block; width: 19px;} #side_menu .sidemenu_list .data_save a span.off img.btn_data{left: 3px;} #side_menu .sidemenu_list .data_save a span.on img.btn_data{right: 3px;} .mm-listview>li:not(.mm-divider):after{border:none !important;} #side_menu .sidemenu_list .event span{font-weight:bold; font-size:1em; display:block; padding:12px 45px; background: url(https://cdn.metoon.co.kr/mimg/icon_arrow_down.png) no-repeat 95% center; background-size: 12px;} #side_menu .sidemenu_list .event_box{border-bottom:0; display:none;} /* #side_menu .sidemenu_list .event_box a{font-size:0.9em; font-weight:normal; display:block; border-bottom:1px solid #727b86; padding: 8px 45px;} #side_menu .sidemenu_list .event_box .free{border-bottom:1px solid #49535d;}pink버전 */ #side_menu .sidemenu_list .event_box a{font-size:0.9em; font-weight:normal; display:block; border-bottom: 1px solid #484848; padding: 8px 45px;} #side_menu .sidemenu_list .event_box .free{border-bottom: 1px solid #353535; /* border-top: 1px solid #484848; */}/* white버전 */ #side_menu #app_down_btn{width:100%; display:block; background:#eee; color:#3a3a3a; padding:10px 0; /* position:absolute; bottom:0; left:0; *//* text-align:center; */} #side_menu #app_down_btn span{padding-left:15px; font-size:1.15em; font-weight:bold; letter-spacing:-0.05em;} #side_menu #app_down_btn img{width:13%; display:inline-block; vertical-align: middle;margin-right:10px; max-width:50px;} #side_menu .close_btn_log{display:none;position:absolute; top:8px; right:8px; width:27px; height:27px; margin:0;} #side_menu .close_btn_log a{padding:0; width:27px; height:27px; display:block; text-indent:-999999em; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} #side_menu .sidemenu_list .close_btn{border:none; position: absolute; right: 10px; top: 10px; padding: 0; width: 27px; height: 27px; display: block; text-indent: -999999em; overflow: hidden; background: url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size: 100%;} #side_menu .sidemenu_list .close_btn a{padding:0; display:block; width:100%; height:100%; background:none;} #mm-blocker .close_btn{ position: absolute; left: -35px; top: 10px;padding:0; width:27px; height:27px; display:none; text-indent:-999999em; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} @media screen and (orientation:landscape) and (min-width:320px) and (max-width:950px){ #side_menu #app_down_btn{position:static;} } /* 비성인 사이드메뉴 nav 170111 */ /* 성인 사이드메뉴 nav 170111 */ #adult_side_menu{position: fixed; top: 0; left: -260px; bottom:0; width:260px; height:100%; z-index:1000; background:#404040; color:var(--main-ft-color); text-shadow:none; box-shadow:none; overflow-y:scroll;} #adult_side_menu .ui-listview{margin:0;} #adult_side_menu .mm-navbar{border:none;} #adult_side_menu .mm-title{display:none;} #adult_side_menu .mm-prev{right:7px; top:7px; left:initial; width:27px; height:27px; display:block; text-indent:-999999em; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} #adult_side_menu .mm-prev:before{display:none;} #adult_side_menu a{color:var(--main-ft-color); } #adult_side_menu #app_down_btn{width:100%; display:block; background:#eee; color:#3a3a3a; padding:10px 0;} #adult_side_menu #app_down_btn span{padding-left:15px; font-size:1.15em; font-weight:bold; letter-spacing:-0.05em;} #adult_side_menu #app_down_btn img{width:13%; display:inline-block; vertical-align: middle;margin-right:10px; max-width:50px;} @media all and (min-width:320px) and (max-width:350px){ #adult_side_menu #app_down_btn{position:static;} #side_menu #app_down_btn{position:static;} #adult_side_menu #app_down_btn span{font-size:1.1em;} } @media screen and (orientation:landscape) and (min-width:320px) and (max-width:950px){ #adult_side_menu #app_down_btn{position:static;} } #adult_side_menu .log_box{padding:15px 10px; background:var(--bg-fc-color); overflow:hidden; display:block; position:relative;} #adult_side_menu .log_box ul{width:100%; text-align:left; } #adult_side_menu .log_box li{text-align:center; display:inline-block; margin:15px 5px 5px 0; position:relative; } #adult_side_menu .log_box li .mm-next{background:none; position:absolute; top:0; bottom:0; left:0; right:0; padding:0;} #adult_side_menu .log_box li .mm-next:after{display:none;} /* #adult_side_menu .log_box a{color:var(--bg-fc-color); background:#fff; padding:6px 10px 5px; border-radius:5px; font-size:1.1em; font-weight:bold;margin-right: 0;}pink 버전 */ #adult_side_menu .log_box a{color:#404040; background:#fff; padding:6px 10px 5px; border-radius:5px; font-size:1.1em; font-weight:bold;margin-right: 0;}/* white 버전 */ /* 변경후 */ #adult_side_menu .log_box .log_before .side_logo{width:70px; display:block; margin-bottom:5px;} #adult_side_menu .log_box .log_before .log_brfore_txt{font-size:1.1em; letter-spacing:-0.09em;} #adult_side_menu .log_box .log_before .log_brfore_txt span{font-size:0.9em; display:block;} #adult_side_menu .log_box .log_box_btn li{text-align:center; display:block; float:left; margin:15px 0 0px; position:relative; width:48.5%;} #adult_side_menu .log_box .log_box_btn li:first-child{margin-right:3%;} #adult_side_menu .log_box .log_box_btn a{color:#404040; background:#fff; padding:8px 0px 7px; border-radius:5px; font-size:1.1em; display:block; font-weight:bold;margin-right: 0;} /* 변경후 */ #adult_side_menu .log_after .log_id{display:block; margin-bottom: 0px; } #adult_side_menu .log_after .log_id img{vertical-align: middle; width: 23px; margin-right: 5px;} #adult_side_menu .log_after p{padding:5px 0;} #adult_side_menu .log_after .my_coin{font-weight:bold; display: inline-block; background:url(https://cdn.metoon.co.kr/mimg/icon_mycoin_point.png) no-repeat 5px center; text-indent:30px; background-size:21px;} #adult_side_menu .log_after .my_coin span{color:#ffea00; margin-left:10px; font-size:1.1em;} #adult_side_menu .sidemenu_list{width:100%; border-bottom:1px solid #484848;} #adult_side_menu .sidemenu_list li{border-bottom:1px solid #353535; border-top:1px solid #484848;} #adult_side_menu .sidemenu_list .gift_page{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px center; background-size:18px 18px} #adult_side_menu .sidemenu_list .mypage{background:url(https://cdn.metoon.co.kr/mimg/icon_mypage_big.png) no-repeat 15px center; background-size:15px 19px;} #adult_side_menu .sidemenu_list .freecoin{background:url(https://cdn.metoon.co.kr/mimg/icon_free_fill1.png) no-repeat 15px center; background-size:18px 18px;} #adult_side_menu .sidemenu_list .MEcoin{background:url(https://cdn.metoon.co.kr/mimg/icon_me_fill2.png) no-repeat 15px center; background-size:18px 18px;} #adult_side_menu .sidemenu_list .coupon{background:url(https://cdn.metoon.co.kr/mimg/icon_coupon_big.png) no-repeat 15px center; background-size:22px 14px;} /* 변경전 */#adult_side_menu .sidemenu_list .event{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px center; background-size:18px 18px}/* 변경전 */ /* 변경후 */#adult_side_menu .sidemenu_list .event2{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big1.png) no-repeat 15px center; background-size:18px 18px}/* 변경후 */ #adult_side_menu .sidemenu_list .event_li{background:url(https://cdn.metoon.co.kr/mimg/icon_event_big.png) no-repeat 15px center; background-size:18px 18px} #adult_side_menu .sidemenu_list .survice_center{background:url(https://cdn.metoon.co.kr/mimg/icon_survice_center_big2.png) no-repeat 15px center; background-size:16px 15px;} #adult_side_menu .sidemenu_list .setting{background:url(https://cdn.metoon.co.kr/mimg/icon_survice_center_big.png) no-repeat 15px center; background-size:16px 15px;} #adult_side_menu .sidemenu_list .my_nobel_data{background:url(https://cdn.metoon.co.kr/mimg/icon_my_nobel_data.png) no-repeat 15px center; background-size:18px 17px;} #adult_side_menu .sidemenu_list .my_zzim_data{background:url(https://cdn.metoon.co.kr/mimg/icon_my_like_data.png) no-repeat 15px center; background-size:18px 15px;} #adult_side_menu .sidemenu_list li a{font-weight:bold; font-size:1em; display:block; padding:12px 45px; background:url(https://cdn.metoon.co.kr/mimg/icon_arrow.png) no-repeat 95% center; background-size:6px;} #adult_side_menu .sidemenu_list .MEcoin a{color:#ffea00;} #adult_side_menu .sidemenu_list .logout a{background:none;} /* #adult_side_menu .sidemenu_list .logout{background:url(https://cdn.metoon.co.kr/mimg/btn_logout.png) no-repeat 15px center;}pink 버전 */ #adult_side_menu .sidemenu_list .logout{background:url(https://cdn.metoon.co.kr/mimg/adult_btn_logout.png) no-repeat 15px center; background-size:14px;}/* white 버전 */ #adult_side_menu .sidemenu_list .data_save a{background:none; position: relative; padding:12px;} #adult_side_menu .sidemenu_list .data_save a span{display: inline-block; position:absolute; top:8px; right:8px; margin: auto;} #adult_side_menu .sidemenu_list .data_save a span img.bg{width: 50px; display: block;} #adult_side_menu .sidemenu_list .data_save a span img.btn_data{position: absolute; top: 0; bottom: 0; margin: auto; display: block; width: 19px;} #adult_side_menu .sidemenu_list .data_save a span.off img.btn_data{left: 3px;} #adult_side_menu .sidemenu_list .data_save a span.on img.btn_data{right: 3px;} #adult_side_menu .sidemenu_list .event span{font-weight:bold; font-size:1em; display:block; padding:12px 45px; background: url(https://cdn.metoon.co.kr/mimg/icon_arrow_down.png) no-repeat 95% center; background-size: 12px;} #adult_side_menu .sidemenu_list .event_box{border-bottom:0; display:none;} #adult_side_menu .sidemenu_list .event_box a{font-size:0.9em; font-weight:normal; display:block; border-bottom:1px solid #484848; padding: 8px 45px;} #adult_side_menu .sidemenu_list .event_box .free{border-bottom:1px solid #353535;} #adult_side_menu .sidemenu_list .close_btn{border:none; position: absolute; right: 10px; top: 10px; padding: 0; width: 27px; height: 27px; display: block; text-indent: -999999em; overflow: hidden; background: url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size: 100%;} #adult_side_menu .sidemenu_list .close_btn a{padding:0; display:block; width:100%; height:100%; background:none;} #adult_side_menu .close_btn_log{display:none;position:absolute; top:8px; right:8px; width:27px; height:27px; margin:0;} #adult_side_menu .close_btn_log a{padding:0; width:27px; height:27px; display:block; text-indent:-999999em; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} #adult_side_menu .log_after .my_grade{display:none; overflow:hidden; border: 1px solid #ddd; text-align:center; border-radius:5px; width: 85%; margin: 20px auto 0; font-size:0.9em;} #adult_side_menu .log_after .my_grade img{vertical-align: middle; width: 20px;} #adult_side_menu .log_after .my_grade p{display:inline-block; width:50%; float:left; padding:10px 0; } #adult_side_menu .log_after .my_grade p span{position:relative; padding-left:28px; } #adult_side_menu .log_after .my_grade p span img{position:absolute; top:0; bottom:0; left:0; margin:auto;} #adult_side_menu .log_after .my_grade .ticket_day{border-left:1px solid #eee; box-sizing:border-box;} #adult_side_menu .side_log_banner_box{padding:10px 0; text-align:center; background:url(https://cdn.metoon.co.kr/mimg/side_log_banner_box_bg.png); background-size:100% 100%; line-height: 1.3; font-size: 13px; position:relative;} #adult_side_menu .side_log_banner{margin:0; width:100%; position: static;} #adult_side_menu .side_log_banner p{display:block; margin:2px auto 8px; font-size:0.9em;} #adult_side_menu .side_log_banner img{width:23px; display:inline-block;} #adult_side_menu .side_log_banner .coin_btn{display:inline-block; padding:3px 5px; font-size:1em; color:#c53232; background:#fff; border-radius:5px; font-weight:bold;} #adult_side_menu .side_log_banner .close{position:absolute; top:5px; right:5px; display:block;width:19px; height:19px; padding:0; background: url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; background-size:100%;} #adult_side_menu .side_banner_box{width:100%;} #adult_side_menu .side_banner_box a{display:block; width:100%;} #adult_side_menu .side_banner_box img{display:block; width:100%;} #adult_side_menu .side_banner_box .close{position:absolute; top:92px; left:5px; display:block;width:19px; height:19px; padding:0; background: url(https://cdn.metoon.co.kr/mimg/m_header_banner_X_gray.png) no-repeat center; background-size:100%;} /* 2017-08-30 수정 */ /* 성인 사이드메뉴 nav 170111 */ /* 사이드메뉴 */ /* 메인배너 */ #main_banner{width:100%; display:block;} #main_banner ul{width:100%;} #main_banner li{width:100%;} #main_banner li a{position:relative; display:block; color:#4e4e4e; font-weight:normal; font-size: 1.0em; letter-spacing: -0.09em;} #main_banner ul img{width:100%;} #main_banner li .txt_box{ width:45%;} #main_banner li .txt_box p{position:absolute; top:0; bottom:0; left:2%; margin:auto; width:45%; text-align:left; font-size:1.2em; height:110px;letter-spacing: -0.1em} #main_banner li .txt_box p .nobel_title{display:block; font-size:0.9em; font-weight:bold; margin-top:15px; position: absolute; bottom: 0;} #main_banner .bx-wrapper{margin: 0 auto;} #main_banner .bx-wrapper .bx-pager.bx-default-pager{top:90%; left:0; right:0; margin:auto; text-align:center; position:absolute; padding:0;} #main_banner .bx-pager-item{width: 15px; height: 15px; margin:0 7px;} #main_banner2{width:100%; display:none;} #main_banner2 ul{width:100%;} #main_banner2 li{width:100%;} #main_banner2 li a{position:relative; display:block; color:#4e4e4e; font-weight:normal; font-size: 1.0em; letter-spacing: -0.09em;} #main_banner2 ul img{width:100%;} #main_banner2 li .txt_box{ width:45%;} #main_banner2 li .txt_box p{position:absolute; top:0; bottom:0; left:2%; margin:auto; width:45%; text-align:left; font-size:1.5em; height:110px;} #main_banner2 li .txt_box p .nobel_title{display:block; font-size:0.9em; font-weight:bold; margin-top:15px; position: absolute; bottom: 0;} #main_banner2 .bx-wrapper{margin: 0 auto; max-width:100% !important;} #main_banner2 .bx-wrapper .bx-pager.bx-default-pager{top:90%; left:0; right:0; margin:auto; text-align:center; position:absolute; padding:0;} #main_banner2 .bx-pager-item{width: 15px; height: 15px; margin:0 7px;} #main_banner2 .bx-wrapper .bx-viewport{height:auto !important;} #main_banner_02{width:100%; margin-top:8px; display:block;} #main_banner_02 ul{width:100%;} /* #main_banner_02 li{left:-3%; margin-left:-1%;padding:3px; border-radius:5px; background:#fff; border:1px solid #ddd;} */ #main_banner_02 li{left:-40%; width:60%; margin:0 2px;} #main_banner_02 li a{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:3px; background:#fff; border:1px solid #ddd; position:relative; width:100%; margin:0 auto; display:block; color:#4e4e4e; font-weight:normal; font-size: 1.0em; letter-spacing: -0.09em;} #main_banner_02 li a>div{position:relative; overflow:hidden;} #main_banner_02 ul img{width:100%; display:block;} #main_banner_02 ul .blurcover{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #main_banner_02 ul .blurcover_b{position:absolute; top:-5%; left:0; right:0; bottom:0; margin:auto; width:60%;} #main_banner_02 ul .novel_img{position:absolute; top:0; right:0; left:0; bottom:0;} #main_banner_02 li a>div .nobel_title{color:var(--main-ft-color); display:block; font-size:1em; font-weight:normal; position: absolute; bottom: 10px; right:10px; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #main_banner_02 li .txt_box{ width:100%; padding:5px 5px 25px; position:relative;} #main_banner_02 li .txt_box p{color:#2d2d2d; margin:auto; width:100%; text-align:left; font-size:1.1em; font-weight:bold; min-height:60px; letter-spacing: -0.1em; /* 여러줄 말줄임 */max-height: 100px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #main_banner_02 li .txt_box p .nobel_title{max-width:none; color:#2d2d2d; display:block; font-size:0.85em; font-weight:normal; position: absolute; bottom: 10px; left:5px; padding-top:5px; background:#fff;} #main_banner_02 li .txt_box p .tag_genre{background:#E84D7D; display:block; padding:1px 5px; text-align:center; min-width:40px;color:var(--main-ft-color); font-size:0.8em; font-weight:normal; position: absolute; bottom:9px; right:5px; border-radius:3px;} #main_banner_02 .bx-wrapper{margin: 0 auto;} #main_banner_02 .bx-wrapper .bx-pager.bx-default-pager{top:90%; left:0; right:0; margin:auto; text-align:center; position:absolute; padding:0;} #main_banner_02 .bx-pager-item{width: 15px; height: 15px; margin:0 7px;} #main_banner_02 li .content_tag p:nth-child(2){margin-left:3px;} /* 변경후 */ #main_banner_02 li .txt_box p .tag_box{position:absolute; bottom:7px; right:13px; text-align:center;} /* #main_banner_02 li .txt_box p .tag_box span{display:inline-block; padding:1px 3px 0; min-width:40px; color:var(--main-ft-color); font-size:0.9em; font-weight:normal; border-radius:3px; position:relative; letter-spacing: -0.05em;} #main_banner_02 li .txt_box p .tag_box .new_tag{background:#721de3;} #main_banner_02 li .txt_box p .tag_box .best_tag{background:#388afd;} #main_banner_02 li .txt_box p .tag_box .hot_tag{background:#e61e3f;} #main_banner_02 li .txt_box p .tag_box span>span{padding-left:18px; display:inline;} #main_banner_02 li .txt_box p .tag_box span img{position:absolute; top:-2px; bottom:0; left:0; margin:auto; width:14px; display:block;} #main_banner_02 li .txt_box p .tag_box .new_tag img{width:12px; left:2px;} #main_banner_02 li .txt_box p .tag_box .hot_tag img{width:9px; left:3px;} */ #main_banner_02 li .txt_box p .tag_box span{display:inline-block; position:relative;} #main_banner_02 li .txt_box p .tag_box .ic_tag01:after{content:""; display:block; position:absolute; top:0; right:-7px; border-right:7px solid transparent;} #main_banner_02 li .txt_box p .tag_box .ic_tag01 img{width:30px;} #main_banner_02 li .txt_box p .tag_box .new_tag:after{border-top:15px solid #46adf2;} #main_banner_02 li .txt_box p .tag_box .hot_tag:after{border-top:15px solid #fd404d;} #main_banner_02 li .txt_box p .tag_box .best_tag:after{border-top:15px solid #f471f4;} #main_banner_02 li .txt_box p .tag_box .chat_tag{margin-left:3px;} #main_banner_02 li .txt_box p .tag_box .chat_tag:after{right:-6px; border-right:6px solid transparent; border-top:15px solid #ffb72b;} #main_banner_02 li .txt_box p .tag_box .chat_tag img{width:27px; position:static;} /* 변경후 */ #main_banner_02 li a>div .patch{width:17%; position:absolute; top:0; left:5px; border-radius:0; min-width: 30px; max-width: 40px;} #main_banner_02 li .img_backbox {position: absolute; top: 0; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_banner_03{display:none;} #main_banner_03_big{display:none;} #main_banner_02_big{display:none;} @media all and (min-width:320px) and (max-width:360px){ #main_banner li .txt_box p{font-size: 1.1em; height:105px;} #main_banner li .txt_box p .nobel_title{bottom:10px;} } @media all and (min-width:436px) and (max-width:600px){ #main_banner li .txt_box p{font-size: 1.6em; height: 136px;} } @media all and (min-width:601px) and (max-width:810px){ #main_banner li .txt_box p{height: 160px; font-size: 2em;} /* #main_banner{display:none;} #main_banner2{display:block;} #main_banner2 .bxslider_banner1 li {width:600px !important; } #main_banner2 ul{margin-left: 12%;} */ } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #main_banner2 li .txt_box p{height: 130px; font-size: 1.4em;} #main_banner2 ul{margin-left: 27%;} #main_banner{display:none;} #main_banner2{display:block;} #main_banner2 .bxslider_banner1 li{width:480px !important;} } @media screen and (orientation:landscape) and (max-width:780px){ #main_banner2 li .txt_box p{height: 130px; font-size: 1.4em;} #main_banner2 ul{margin-left: 17%;} #main_banner{display:none;} #main_banner2{display:block;} #main_banner2 .bxslider_banner1 li{width:480px !important;} } @media screen and (orientation:landscape) and (max-width:667px){ #main_banner2 li .txt_box p{height: 130px; font-size: 1.4em;} #main_banner2 ul{margin-left: 15%;} #main_banner{display:none;} #main_banner2{display:block;} } @media screen and (orientation:landscape) and (max-width:570px){ #main_banner2 ul{margin-left: 8%;} } @media screen and (orientation:landscape) and (max-width:480px){ #main_banner2 li .txt_box p{height: 130px; font-size: 1.2em;} #main_banner2 ul{margin-left:11%;} #main_banner2 .bxslider_banner1 li{width: 370px !important;} #main_banner{display:none;} #main_banner2{display:block;} } @media all and (min-width:320px) and (max-width:350px){ #main_banner_02 li .txt_box p br{display:none;} } @media all and (min-width:320px) and (max-width:350px){ #main_banner_02 li .txt_box p{letter-spacing: -0.12em;} #main_banner_02 li .txt_box p .nobel_title{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} } .me_visual_wrap{position:relative;} .me_visual{width:100%; /* background:url("https://cdn.metoon.co.kr/mimg/xtagram_logo_5_mini.svg?1") no-repeat center; background-size:60px; */} .me_visual.before_init{opacity:0;pointer-events:none;} .me_visual .swiper-slide{width:100%;background-color:var(--sub-bg-color);background-image:url("https://cdn.metoon.co.kr/mimg/xtagram_logo_5_mini.svg?1");background-repeat:no-repeat;background-position:center;background-size:60px;} .me_visual .swiper-slide a{position:relative;display:block;width:100%;height:0;padding-bottom:53.4%;} .me_visual .swiper-slide a[href^="javascript:void(0)"]{cursor:default;} .me_visual .swiper-slide img{width:100%; vertical-align:top;position:absolute;top:0;left:0;object-fit:cover;} .me_visual .swiper-pagination{text-align:center; padding:0 20px; bottom:7px;} .me_visual .swiper-pagination-bullet{border-radius:8px;transition:width 0.25s;opacity:0.25;transform-origin:50% 50%;will-change:width;} .me_visual .swiper-pagination-bullet-active{width:16px;background:var(--bg-fc-color);opacity:1;} .me_visual_nav, .vd_srcShot_nav{position:absolute;top:50%;display:-webkit-flex;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px;background-color:#FFFFFF;box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.25);z-index:4;cursor:pointer;margin-top:-25px;transition:transform 0.2s;} .me_visual_nav.before_init{opacity:0;} .me_visual_nav.prev{left:15px;} .me_visual_nav.next{right:15px;} .me_visual_nav svg, .vd_srcShot_nav svg{width:8px;fill:#141414;} .main_home_contents{width:100%; margin-bottom:6px;} .main_home_contents nav{height:42px;margin-bottom:6px;border-top:1px solid #ddd; border-bottom:1px solid #ddd;} .main_home_contents nav ul{display:-webkit-box;display:flex; -webkit-box-pack:justify;justify-content:space-between;} .main_home_contents nav ul.menu_float{position:fixed;width:100%;top:54px;border-bottom:1px solid #ddd;z-index:990;} .main_home_contents nav ul li{-webkit-box-flex:1;flex-grow:1; height:42px; line-height:42px; text-align:center;} .main_home_contents nav ul li a{display:block; color:#2d2d2d; background:#fff; font-size:13px;} .main_home_contents nav ul li a span{position:relative;} .main_home_contents nav ul li a.on span:before{content:""; display:block; position:absolute; top:0; left:0; width:29px; height:18px; background:url(https://cdn.metoon.co.kr/mimg/ic_mm_chk01.png?1) no-repeat center; background-size:29px auto; margin:-12px 0 0 -11px;} /* 메인배너 */ /* 컨테이너 공통사항 */ #container{width:100%; padding:0; overflow-x:hidden; max-width:1250px; margin:0 auto;} .xtg_main #container{overflow-x:visible;} #container.pdb, #content_wrap.pdb{padding-bottom:20px;} #container:after{clear:both; display:block; content:"";} #container .contain{margin-top:10px;} .contain.pdb20{padding-bottom:20px;} .contain.minHgt{min-height:53vh;} #container .cont_title{width:94%; font-size:1.4em; margin:10px auto; overflow:hidden;} #container .cont_title h4{float:left;} #container .cont_title a{float:right; display:block; padding:5px 7px; font-size:0.7em; background:url(https://cdn.metoon.co.kr/mimg/btn_add.svg) no-repeat center; text-indent:-9999999em; overflow:hidden; background-size:21px;} #container .cont_title span{color:#F15584;} @media all and (min-width:601px) and (max-width:810px){ #container .cont_title{font-size:1.8em;} #container .cont_title a{padding: 6px 7px; background-size: 100%;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #container .cont_title{font-size: 1.2em;} #content_wrap .cont_title{font-size: 1.2em;margin: 10px auto 10px;} } @media screen and (orientation:landscape) and (max-width:780px){ #container .cont_title{font-size: 1.2em;} #content_wrap .cont_title{font-size: 1.2em;margin: 10px auto 10px;} } @media screen and (orientation:landscape) and (max-width:667px){ #container .cont_title{font-size: 1.2em;} #content_wrap .cont_title{font-size: 1.2em;margin: 10px auto 10px;} #content_wrap .cont_title a{background-size: 20px;} } @media screen and (orientation:landscape) and (max-width:480px){ #container .cont_title{font-size: 1.2em;} } /* @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #content_wrap .cont_title {font-size: 1.2em; margin: 10px auto 10px; margin: 5px 10px 10px; width: 100%;} #content_wrap .cont_title a{margin-right: 2%;} } */ /* 컨테이너 공통사항 */ /* 메인 컨테이너 */ #containerTop{float:left;} #containerBottom{width:100%; float:left;} /* 메인 오늘 */ #today a{color:#4e4e4e; font-weight: normal;} #today .today_cont{width:100%; } #today .today_cont ul{float:left; margin-left:-26%;} #today .swiper-container_today2{display:none;} #today .swiper-container_today2 .swiper-wrapper{float:left; margin-left:-32%;} #today .today_cont ul li{float:left; width:42% !important; height:215px; border-radius:5px; overflow:hidden; border:1px solid #ddd;} #today .today_cont ul li img{display:block; width:100%;} #today .today_cont ul li .novel_img{position:absolute; top:0; left:0; right:0;} #today .today_cont ul li a{display:block; height:100%; position:relative; width:100%;} #today .today_cont ul li p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;letter-spacing: -0.09em;} #today .today_cont ul li .nobel_txt{position:absolute; bottom:0; left:0; background:#fff; font-size:1.0em; width:100%; text-align:center; padding:10px 5px 15px; min-height:70px;} #today .today_cont ul li .nobel_title{display:block; font-weight:bold; font-size:1.1em; margin-bottom:7px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #today .today_cont ul li a .today_cont_back{position:absolute; top:0; left:0; right:0; height:100%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #today .today_cont ul li .up_nobel_main{width:35%; position:absolute; top:0; left:0;} #today .today_cont ul li .icon_19_patch{width: 22px !important; position: absolute; bottom: 100%; margin-bottom: 5px; right: 5px; z-index: 99;} #today .today_cont ul li .patch_box{width:100%; position:absolute; top:0; right:5px; z-index: 9; text-align: right;} #today .today_cont ul li .patch_box>img{width: 35px; display:inline-block; vertical-align: top; margin-left:3px;} #today .today_cont ul li .patch_box .patch{width:25%; min-width:30px; max-width: 40px;} .swiper-container_today {width: 100%; height: 100%; margin: 0 auto; overflow:hidden;} @media all and (min-width:320px) and (max-width:340px){ #today .today_cont ul li{height: 200px;} } @media all and (min-width:341px) and (max-width:360px){ #today .today_cont ul li{height: 215px;} } @media all and (min-width:320px) and (max-width:360px){ #today .today_cont ul li .nobel_txt{min-height: 70px;} } @media all and (min-width:436px) and (max-width:600px){ #today .today_cont ul li{height:280px;} } @media all and (min-width:601px) and (max-width:810px){ #today .today_cont ul li{height:300px; width:43% !important;} #today .today_cont ul li .nobel_txt{font-size:1.2em; min-height: 96px;} #today .today_cont ul li a .today_cont_back{height:80%;} } @media all and (min-width:1024px){ #today .today_cont ul li{height: 350px;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #today .swiper-container_today{display:none;} #today .swiper-container_today2{display:block;} #today .today_cont ul li{width: 30% !important; height: 260px;} #today .today_cont ul li .nobel_txt{font-size: 1em; min-height: 75px;} #today .today_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (max-width:780px){ #today .swiper-container_today{display:none;} #today .swiper-container_today2{display:block;} #today .today_cont ul li{width: 30% !important; height: 210px;} #today .today_cont ul li .nobel_txt{font-size: 1em; min-height: 75px;} #today .today_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (max-width:667px){ #today .swiper-container_today{display:none;} #today .swiper-container_today2{display:block;} #today .today_cont ul li{width: 30% !important; height: 210px;} #today .today_cont ul li .nobel_txt{font-size: 1em; min-height: 60px;} #today .today_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (max-width:480px){ #today .today_cont ul li{width: 30% !important; height: 180px;} #today .today_cont ul li .nobel_txt{font-size: 0.9em; min-height: 50px; padding: 5px 5px 5px;} #today .today_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1250px){ #today .swiper-container_today {display: none;} #today .swiper-container_today2{display:block;} #today .today_cont ul li{width: 30% !important; height: 285px;} #today .today_cont ul li a .today_cont_back{height: 58%;} } @media all and (min-width:601px) and (max-width:810px){ #today .today_cont ul li p{padding-top: 3%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #today .swiper-container_today {display: none;} #today .swiper-container_today2{display:block;} #today .today_cont ul li p{font-size: 1.1em;} #today .today_cont ul li{height: 260px;} #today .today_cont ul li a .today_cont_back{height: 65%;} } @media screen and (orientation:landscape) and (max-width:780px){ #today .today_cont ul li a .today_cont_back{height: 90%;} } @media screen and (orientation:landscape) and (max-width:500px){ #today .today_cont ul li a .today_cont_back{height: 95%;} } @media all and (min-width:1251px){ #today .swiper-container_today{display:none;} #today .swiper-container_today2{display:block;} #content_wrap #today{width: 49%; float:left; margin: 10px 0.5%;} #today .today_cont ul li{height: 245px;} #today .today_cont{width:97%;} #today .today_cont ul li a .today_cont_back{height: 70%;} #today .today_cont ul{margin-left: -28%;} } @media all and (min-width:1400px){ #today .swiper-container_today2 .swiper-wrapper{margin-left: -28%;} } /* 메인 오늘 */ /* 메인 추천 */ #best{width:100%; margin:0 auto; overflow:hidden;} #best a{color:#4e4e4e; font-weight: normal;} #best .best_tab{width:96%; position:relative; margin:0 auto; border-radius:5px; overflow:hidden; border:1px solid #ddd;} #best .best_tab ul{float:left; width:100%; background:#fff;} #best .best_tab li{float:left; width:50%; text-align:center;} #best .best_tab .rank a{ border-right: 1px solid #f1f1f1;} #best .best_tab li a{font-size:1.2em; display:block; padding:10px 0 8px; font-weight:bold; color:#9e9e9e;box-sizing: border-box;} #best .best_tab li .on{color:#E84D7D;} /* #best .on_line{position:absolute; bottom:0; width:50%; border:1px solid #E84D7D;} pink 버전 */ #best .on_line{position:absolute; bottom:0; width:50%; border:1px solid var(--bg-fc-color);}/* white 버전 */ #best .best_cont_box{width:96%; margin:5px auto;} #best .best_cont_box>div{width:100%; float:left;} #best .best_rank_cont ul{float:left; width:100%;} #best .best_rank_cont ul li{float:left; width:48.4%; margin:5px 2% 5px 0; border-radius:5px; border:1px solid #ddd; overflow:hidden; } #best .best_rank_cont ul .li_big{width:100%; margin:5px 0;} #best .best_rank_cont ul .right_none{margin-right:0; float:right;} #best .best_rank_cont ul li .best_nobel_box{display:block; width:100%; height:200px; position:relative; } #best .best_rank_cont ul li img{width:100%; display:block;} /* #best .best_rank_cont ul li .novel_img{width:150%; position:absolute; left:-25%; right:0; top:-1px; margin:auto;} */ #best .best_rank_cont ul li .novel_img{width:110%; position:absolute; left:-5%; right:0; top:-1px; margin:auto;} #best .best_rank_cont ul li p{background:#fff; position:absolute; bottom:0; left:0; width:100%; font-size:1.1em; letter-spacing: -0.08em; z-index: 9;} #best .best_rank_cont ul li p span{display:block; padding:5px 10px 10px;} #best .best_rank_cont ul li p .nobel_title{ font-weight:bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom:0;max-width: 100%;} #best .best_rank_cont ul li p .writer{float:right; padding-top:3px; padding-bottom:5px;letter-spacing: -0.1em;} #best .best_rank_cont ul .li_big img{width:100%; display:block; left:0;} #best .best_rank_cont ul .li_big .novel_img{width:100%; position:absolute; top:0; left:0; right:0;} #best .best_rank_cont ul .li_big .nobel_title{float:left; padding:8px 10px 10px;max-width: 50%;} #best .best_rank_cont ul .li_big .writer{padding:8px 10px 10px;} #best .best_rank_cont ul li .up_nobel_main{width:40%; position:absolute; top:0; left:0;max-width: 60px; right: inherit;} #best .best_rank_cont ul li .end_nobel_main{width:40%; position:absolute; top:0; left:0;max-width: 60px; right: inherit;} #best .best_rank_cont ul .li_big .up_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px; right: inherit;} #best .best_rank_cont ul .li_big .end_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px; right: inherit;} #best .best_rank_cont ul li p .hits{font-size: 0.9em; letter-spacing:0; position:absolute; right:0; top:-22px; color:var(--main-ft-color); background: rgba(0, 0, 0, 0.5); padding: 2px 2px 0; box-sizing: border-box; margin-top:0;} #best .best_rank_cont ul li p .hits .heart{padding:0; display: inline-block; background-size: 13px 11px; padding-left:10px; margin-top:0;} #best .best_rank_cont ul li .img_backbox{width:100%; height:100%; position:relative;} #best .best_rank_cont ul li .img_backbox div{position:absolute; top:0; left:0; right:0; height:79%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%; z-index: 9;} #best .best_rank_cont ul .li_big .img_backbox div{position:absolute; top:0; left:0; right:0; height:84%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%; z-index: 9;} #best .best_me_cont{display:none;} #best .best_me_cont ul{float:left; width:100%;} #best .best_me_cont ul li{float:left; width:48.4%; margin:5px 2% 5px 0; border-radius:5px; border:1px solid #ddd; overflow:hidden; } #best .best_me_cont ul .li_big{width:100%; margin:5px 0;} #best .best_me_cont ul .right_none{margin-right:0; float:right;} #best .best_me_cont ul li .best_nobel_box{display:block; width:100%; height:200px; position:relative; } #best .best_me_cont ul li img{width:100%; display:block;} /* #best .best_me_cont ul li .novel_img{width:150%; position:absolute; left:-25%; right:0; top:-1px; margin:auto;} */ #best .best_me_cont ul li .novel_img{width:110%; position:absolute; left:-5%; right:0; top:-1px; margin:auto;} #best .best_me_cont ul .li_big img{width:100%; display:block; left:0;} #best .best_me_cont ul .li_big .novel_img{width:100%; position:absolute; top:0; left:0; right:0;} #best .best_me_cont ul .li_big .nobel_title{float:left; padding:8px 10px 10px;max-width: 50%;} #best .best_me_cont ul .li_big .writer{padding:8px 10px 10px;} #best .best_me_cont ul li p{background:#fff; position:absolute; bottom:0; left:0; width:100%; font-size:1.1em; letter-spacing: -0.08em; z-index: 9;} #best .best_me_cont ul li p span{display:block; padding:5px 10px 10px;/* line-height:1.2; */} #best .best_me_cont ul li p .nobel_title{font-weight:bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom:0; max-width: 100%;} #best .best_me_cont ul li p .writer{float:right; padding-top:3px; padding-bottom:5px;letter-spacing: -0.1em;} #best .best_me_cont ul li .up_nobel_main{width:40%; position:absolute; top:0; left:0;max-width: 60px; right: inherit;} #best .best_me_cont ul li .end_nobel_main{width:40%; position:absolute; top:0; left:0;max-width: 60px; right: inherit;} #best .best_me_cont ul .li_big .up_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px; right: inherit;} #best .best_me_cont ul .li_big .end_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px; right: inherit;} #best .best_me_cont ul li p .hits{font-size: 0.9em; letter-spacing:0; position:absolute; right:0; top:-22px; color:var(--main-ft-color); background: rgba(0, 0, 0, 0.5); padding: 2px 2px 0; box-sizing: border-box; margin-top:0;} #best .best_me_cont ul li p .hits .heart{padding:0; display: inline-block; background-size: 13px 11px; padding-left:10px; margin-top:0;} #best .best_me_cont ul li .img_backbox{width:100%; height:100%; position:relative;} #best .best_me_cont ul li .img_backbox div{position:absolute; top:0; left:0; right:0; height:79%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #best .best_me_cont ul .li_big .img_backbox div{position:absolute; top:0; left:0; right:0; height:84%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} @media all and (min-width:320px) and (max-width:360px){ #best .best_rank_cont ul li{width:48%;} #best .best_rank_cont ul li .best_nobel_box{height: 175px;} #best .best_rank_cont ul li p{font-size:1.0em;} #best .best_rank_cont ul li p span{padding:5px 6px 10px;} #best .best_rank_cont ul .li_big .nobel_title{max-width: 50%; padding: 8px 10px 8px;} #best .best_rank_cont ul .li_big .writer{ padding: 8px 10px 8px;} #best .best_rank_cont ul li p .nobel_title{max-width: 100%;} #best .best_rank_cont ul li p .writer{padding-top: 6px;} #best .best_me_cont ul li{width:48%;} #best .best_me_cont ul li .best_nobel_box{height: 175px;} #best .best_me_cont ul li p{font-size:1.0em;} #best .best_me_cont ul li p span{padding:5px 6px 10px;} #best .best_me_cont ul .li_big .nobel_title{max-width: 50%; padding: 8px 10px 8px;} #best .best_me_cont ul .li_big .writer{ padding: 8px 10px 8px;} #best .best_me_cont ul li p .nobel_title{max-width: 100%;} #best .best_me_cont ul li p .writer{padding-top: 6px;} } @media all and (min-width:436px) and (max-width:600px){ #best .best_rank_cont ul li p{font-size: 1.2em; padding: 5px 0;} #best .best_me_cont ul li p{font-size: 1.2em; padding: 5px 0;} } @media all and (min-width:436px) and (max-width:520px){ #best .best_rank_cont ul li .best_nobel_box{height: 245px;} #best .best_me_cont ul li .best_nobel_box{height: 245px;} } @media all and (min-width:521px) and (max-width:600px){ #best .best_rank_cont ul li .best_nobel_box{height: 280px;} #best .best_me_cont ul li .best_nobel_box{height: 280px;} } @media all and (min-width:601px) and (max-width:810px){ #best .best_tab li a{font-size:1.7em;} #best .best_rank_cont ul li .best_nobel_box{height:335px;} #best .best_rank_cont ul li p{font-size: 1.4em; padding: 5px 0;} #best .best_me_cont ul li .best_nobel_box{height:335px;} #best .best_me_cont ul li p{font-size: 1.4em; padding: 5px 0;} #best .best_tab li a{font-size: 1.2em;} #best .best_rank_cont ul .li_big{width: 48%; margin: 5px 1%;} #best .best_rank_cont ul li{width: 24%; margin: 5px 0 5px;} #best .best_rank_cont ul li .best_nobel_box{height: 230px;} #best .best_rank_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #best .best_rank_cont ul .li_big .writer{padding-top: 10px; padding-bottom: 5px;} #best .best_rank_cont ul li p .writer{padding-top: 10px; padding-bottom: 5px;} #best .best_rank_cont ul li p{font-size: 1.2em;} #best .best_rank_cont ul li p span{font-size: 1em;} #best .best_me_cont ul .li_big{width: 48%; margin: 5px 1%;} #best .best_me_cont ul li{width: 24%; margin: 5px 0 5px;} #best .best_me_cont ul li .best_nobel_box{height: 230px;} #best .best_me_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #best .best_me_cont ul .li_big .writer{padding-top: 10px; padding-bottom: 5px;} #best .best_me_cont ul li p .writer{padding-top: 10px; padding-bottom: 5px;} #best .best_me_cont ul li p{font-size: 1.2em;} #best .best_me_cont ul li p span{font-size: 1em;} } @media all and (min-width:1024px){ #best{width: 49%; float: left;} #best .best_rank_cont ul li .best_nobel_box{height: 205px;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #best{width:100%;} #best .best_tab li a{font-size: 1.2em;} #best .best_rank_cont ul .li_big{width: 48%; margin: 5px 1%;} #best .best_rank_cont ul li{width: 24%; margin: 5px 0 5px;} #best .best_rank_cont ul li .best_nobel_box{height: 260px;} #best .best_rank_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #best .best_rank_cont ul .li_big .writer{padding-top:5px; padding-bottom: 5px;} #best .best_rank_cont ul li p .writer{padding-top: 5px; font-size:0.9em;padding-bottom: 5px;} #best .best_rank_cont ul li p{font-size: 1em;} #best .best_rank_cont ul li p span{font-size: 1em;} #best .best_me_cont ul .li_big{width: 48%; margin: 5px 1%;} #best .best_me_cont ul li{width: 24%; margin: 5px 0 5px;} #best .best_me_cont ul li .best_nobel_box{height: 210px;} #best .best_me_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #best .best_me_cont ul .li_big .writer{padding-top:5px; padding-bottom: 5px;} #best .best_me_cont ul li p .writer{padding-top: 5px; font-size:0.9em;padding-bottom: 5px;} #best .best_me_cont ul li p{font-size: 1em;} #best .best_me_cont ul li p span{font-size: 1em;} } @media screen and (orientation:landscape) and (max-width:780px){ #best .best_tab li a{font-size: 1.2em;} #best .best_rank_cont ul .li_big{width: 48%; margin: 5px 1%;} #best .best_rank_cont ul li{width: 24%; margin: 5px 0 5px;} #best .best_rank_cont ul li .best_nobel_box{height: 210px;} #best .best_rank_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #best .best_rank_cont ul .li_big .writer{padding-top: 10px; padding-bottom: 5px;} #best .best_rank_cont ul li p .writer{padding-top: 10px; padding-bottom: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 80px;} #best .best_rank_cont ul li p{font-size: 1.2em;} #best .best_rank_cont ul li p span{font-size: 1em;} #best .best_me_cont ul .li_big{width: 48%; margin: 5px 1%;} #best .best_me_cont ul li{width: 24%; margin: 5px 0 5px;} #best .best_me_cont ul li .best_nobel_box{height: 210px;} #best .best_me_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #best .best_me_cont ul .li_big .writer{padding-top: 10px; padding-bottom: 5px;} #best .best_me_cont ul li p .writer{padding-top: 10px; padding-bottom: 5px;} #best .best_me_cont ul li p{font-size: 1.2em;} #best .best_me_cont ul li p span{font-size: 1em;} } @media screen and (orientation:landscape) and (max-width:667px){ #best .best_tab li a{font-size: 1.2em;} #best .best_rank_cont ul .li_big{width: 48%; margin: 5px 1%;} #best .best_rank_cont ul li{width: 24%; margin: 5px 0 5px;} #best .best_rank_cont ul li .best_nobel_box{height: 210px;} #best .best_rank_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #best .best_rank_cont ul .li_big .writer{padding-top: 10px; padding-bottom: 5px;} #best .best_rank_cont ul li p .writer{padding-top: 10px; padding-bottom: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 80px;} #best .best_rank_cont ul li p{font-size: 1.2em;} #best .best_rank_cont ul li p span{font-size: 1em;} #best .best_me_cont ul .li_big{width: 48%; margin: 5px 1%;} #best .best_me_cont ul li{width: 24%; margin: 5px 0 5px;} #best .best_me_cont ul li .best_nobel_box{height: 210px;} #best .best_me_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #best .best_me_cont ul .li_big .writer{padding-top: 10px; padding-bottom: 5px;} #best .best_me_cont ul li p .writer{padding-top: 10px; padding-bottom: 5px;} #best .best_me_cont ul li p{font-size: 1.2em;} #best .best_me_cont ul li p span{font-size: 1em;} } @media screen and (orientation:landscape) and (max-width:570px){ #best .best_rank_cont ul li .best_nobel_box{height: 160px;} #best .best_rank_cont ul li p{font-size: 1em; padding:0;} #best .best_rank_cont ul li p span{padding:5px 10px;} #best .best_rank_cont ul li p .writer{padding-top:0px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 80px;} #best .best_rank_cont ul .li_big .writer{padding-top:0px;} #best .best_me_cont ul li .best_nobel_box{height: 160px;} #best .best_me_cont ul li p{font-size: 1em; padding:0;} #best .best_me_cont ul li p span{padding:5px 10px;} #best .best_me_cont ul li p .writer{padding-top:0px;} #best .best_me_cont ul .li_big .writer{padding-top:0px;} } @media screen and (orientation:landscape) and (max-width:480px){ #best .best_tab li a{font-size: 1.1em;} #best .best_rank_cont ul .li_big{width: 48%; margin: 5px 1%;} #best .best_rank_cont ul li{width: 24%; margin: 5px 0 5px;} #best .best_rank_cont ul li .best_nobel_box{height: 150px;} #best .best_rank_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #best .best_rank_cont ul .li_big .writer{padding-top: 5px; padding-bottom: 5px;} #best .best_rank_cont ul li p .writer{padding-top: 5px; padding-bottom: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 80px;} #best .best_rank_cont ul li p{font-size: 1em;} #best .best_rank_cont ul li p span{font-size: 1em;} #best .best_me_cont ul .li_big{width: 48%; margin: 5px 1%;} #best .best_me_cont ul li{width: 24%; margin: 5px 0 5px;} #best .best_me_cont ul li .best_nobel_box{height: 150px;} #best .best_me_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #best .best_me_cont ul .li_big .writer{padding-top: 5px; padding-bottom: 5px;} #best .best_me_cont ul li p .writer{padding-top:5px; padding-bottom: 5px;} #best .best_me_cont ul li p{font-size: 1em;} #best .best_me_cont ul li p span{font-size: 1em;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1250px){ #best .best_rank_cont ul li {width: 24%; margin: 5px 0 5px;} #best .best_rank_cont ul .li_big {width: 48%; margin: 5px 1%;} #best .best_rank_cont ul li .best_nobel_box { height: 290px;} #best .best_rank_cont ul li p {font-size: 1.1em;} #best .best_rank_cont ul li p {padding: 5px 0;} #best .best_rank_cont ul li p span {font-size: 1em;} #best .best_rank_cont ul .li_big .nobel_title {float: none; padding: 5px 10px 0;} #best .best_rank_cont ul .li_big .writer {padding-top: 3px; padding-bottom: 5px;} #best .best_rank_cont ul li .img_backbox div{height: 84%;} #best .best_me_cont ul li {width: 24%; margin: 5px 0 5px;} #best .best_me_cont ul .li_big {width: 48%; margin: 5px 1%;} #best .best_me_cont ul li .best_nobel_box { height: 290px;} #best .best_me_cont ul li p {font-size: 1.1em;} #best .best_me_cont ul li p {padding: 5px 0;} #best .best_me_cont ul li p span {font-size: 1em;} #best .best_me_cont ul .li_big .nobel_title {float: none; padding: 5px 10px 0;} #best .best_me_cont ul .li_big .writer {padding-top:3px; padding-bottom: 5px;} #best .best_me_cont ul li .img_backbox div{height: 84%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #best .best_rank_cont ul li .img_backbox div{height: 85%;} #best .best_me_cont ul li .img_backbox div{height: 85%;} #best .best_rank_cont ul li .best_nobel_box{height: 260px;} #best .best_me_cont ul li .best_nobel_box{height: 260px;} } @media all and (min-width:1251px){ #content_wrap #best{width: 49%; float: left; margin: 10px 0.5%;} #best .best_rank_cont ul li {width: 24%; margin: 5px 0 5px;} #best .best_rank_cont ul .li_big {width: 48%; margin: 5px 1%;} #best .best_rank_cont ul li .best_nobel_box { height: 195px;} #best .best_rank_cont ul li p {font-size: 1.1em;} #best .best_rank_cont ul li p {padding: 5px 0;} #best .best_rank_cont ul li p span {font-size: 1em;} #best .best_rank_cont ul .li_big .nobel_title {float: none; padding: 5px 10px 0;} #best .best_rank_cont ul .li_big .writer {padding-top: 3px; padding-bottom: 5px;} #best .best_rank_cont ul li .img_backbox div{height: 84%;} #best .best_me_cont ul li {width: 24%; margin: 5px 0 5px;} #best .best_me_cont ul .li_big {width: 48%; margin: 5px 1%;} #best .best_me_cont ul li .best_nobel_box { height: 195px;} #best .best_me_cont ul li p {font-size: 1.1em;} #best .best_me_cont ul li p {padding: 5px 0;} #best .best_me_cont ul li p span {font-size: 1em;} #best .best_me_cont ul .li_big .nobel_title {float: none; padding: 5px 10px 0;} #best .best_me_cont ul .li_big .writer {padding-top:3px; padding-bottom: 5px;} #best .best_me_cont ul li .img_backbox div{height: 84%;} } @media all and (min-width:1400px){ #best .best_me_cont ul .li_big .novel_img{width: 102%;} #best .best_me_cont ul .li_big .img_backbox div{height: 74%;} #best .best_me_cont ul li .img_backbox div{height: 74%;} #best .best_rank_cont ul .li_big .novel_img{width: 102%;} #best .best_rank_cont ul .li_big .img_backbox div{height: 74%;} #best .best_rank_cont ul li .img_backbox div{height: 74%;} } /* 메인 추천 */ /* 메인장르 */ #genre{width:100%; float:left; position:relative;} #genre a{color:#4e4e4e; font-weight: normal;} #genre .main_genre_tab{width:96%; margin:0 auto; position:relative; border-radius:5px; overflow:hidden; border:1px solid #ddd;} #genre .main_genre_tab ul{float:left; width:100%; background:#fff;} #genre .main_genre_tab li{float:left; width:20%; text-align:center;} #genre .main_genre_tab li a{font-size:1.1em; display:block; padding:6px 0 11px; font-weight:bold; color:#9e9e9e; border-right:1px solid #ddd;text-indent:-999999999em; overflow:hidden;} #genre .main_genre_tab .line_none a{border:none;} #genre .main_genre_tab li .on{color:#E84D7D;} #genre .main_genre_tab .on_line_genre{position:absolute; bottom:0; width:20%; border:1px solid #E84D7D; display:none;} #genre #adult_popular_cont1{display:block; } #genre #adult_popular_cont2{display:none;} #genre .adult_popular_cont{ width:100%;} #genre .paging{ background:none; text-align:center; overflow:hidden; } #genre .paging .btn_page{color:#9E9E9E; float: left; display:block; width:20%; height:35px; padding:8px 0 5px; font-size:1.1em; line-height:0; margin:0; background:#fff; border:none; font-weight: bold; box-sizing: border-box; letter-spacing:-0.09em; border-bottom: 2px solid #fff; border-right:1px solid #ddd;} #genre .paging .btn_page.on{color: #E84D7D; border-bottom: 2px solid #E84D7D;} #genre .paging .btn_page:last-child{ border-right:none;} #genre .paging .btn_more a{color: #9E9E9E; font-weight:bold; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #main_genre_touchSlider {min-height:430px;margin:0 auto; margin-right:10%; position:relative; overflow:visible; } #main_genre_touchSlider>ul { width:99999px;min-height:430px; position:absolute; top:0; left:0; overflow:hidden;} #main_genre_touchSlider>ul>li { float:left; margin-left:3%; width: 97% !important;} #genre .genre_cont_All{min-height:430px;} #genre .genre_cont_All ul{float:left; width:100%; width: 100%; top: 0; left: 0;} #genre .genre_cont_All ul li{float:left; width:100%; margin:5px 0; border-radius:5px; border:1px solid #ddd; overflow:hidden; background:#fff;} #genre .genre_cont_All ul li a{display:block; width:100%; height:130px; } #genre .genre_cont_All .img_box{width:45%; height:100%; overflow:hidden; float:left;position:relative;} #genre .genre_cont_All .img_box img{width:100%; display:block;} #genre .genre_cont_All .img_box .novel_img{margin-left:-4%; width:110%; position:absolute; top:0; left:0;} #genre #main_genre_cont1 .genre_cont_All .img_box div{margin-right: 0%;background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; position: absolute; bottom: 0; right: 0;left: 0; height: 100%; background-size:100% 100%; } #genre .genre_cont_All .img_box .up_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px; margin-left:0;} #genre .genre_cont_All .img_box .end_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px; margin-left:0;} #genre .genre_cont_All .txt_box{float:right; width:55%; height:100%; position:relative; padding:10px; } #genre .genre_cont_All .txt_box p{width:100%; font-size:1.0em; letter-spacing: -0.08em; display:block; text-align:left;} /* #genre .genre_cont_All .txt_box p .heart{font-size:1.0em; padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart.png) no-repeat 0 75%; background-size: 14px 12px; color:#E84D7D;} #genre .genre_cont_All .txt_box .on .heart{background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 40%; background-size: 12px 10px; }pink 버전 */ #genre .genre_cont_All .txt_box p .heart{font-size:1.0em; padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png) no-repeat 0 75%; background-size: 14px 12px; color:var(--bg-fc-color);} #genre .genre_cont_All .txt_box .on .heart{background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 40%; background-size: 12px 10px; }/* white 버전 */ #genre .genre_cont_All .txt_box .nobel_title{font-weight:bold; font-size:1.2em; display:block; padding:5px 0;white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #genre .genre_cont_All .txt_box .txt{margin:0px 0 25px;} #genre .genre_cont_All .txt_box .writer{position:absolute; bottom:10px; left:10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%;} #genre .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper{background:none;} @media all and (min-width:320px) and (max-width:360px){ #genre .genre_cont_All .txt_box .nobel_title{font-size:1.05em;} #genre .genre_tab li a{font-size:1.0em;} #genre .swiper-container_genre .swiper-pagination{ bottom: 87.5%;} } @media all and (min-width:400px) and (max-width:435px){ #genre .genre_cont_All ul li a{height:140px;} #main_genre_touchSlider{min-height: 455px;} } @media all and (min-width:436px) and (max-width:600px){ #genre .genre_cont_All ul li a{height:185px;} #main_genre_touchSlider{min-height: 595px;} } @media all and (min-width:500px) and (max-width:600px){ #genre .genre_cont_All .txt_box{padding:20px;} #genre .genre_cont_All .txt_box .nobel_title{padding-bottom:15px;} #genre .genre_cont_All .txt_box .writer{bottom:20px; left:20px;} } @media all and (min-width:601px) and (max-width:810px){ #genre .genre_cont_All ul li a{height:210px;} #main_genre_touchSlider{min-height: 670px;} #genre .genre_tab{font-size:1.4em;} #genre .swiper-container_genre .swiper-pagination{bottom: 85%;} #genre .bx-controls{height:45px;} #genre .bx-wrapper .bx-pager.bx-default-pager a{font-size: 1.4em; } #genre .bx-viewport{height: 645px;} #genre .genre_cont_All .txt_box{padding:20px;} #genre .genre_cont_All .txt_box .nobel_title{padding-bottom:20px;} #genre .genre_cont_All .txt_box .writer{bottom:20px; left:20px;} } @media all and (min-width:1024px){ #genre{width: 49%; float: left;} #main_genre_touchSlider{min-height: 440px;} #genre .genre_cont_All ul li a{height: 135px;} } @media screen and (orientation:landscape) and (max-width:1600px){ #container #genre{width: 50%; margin-top: 5px;} #main_genre_touchSlider{min-height:575px;margin:0 auto;position:relative; overflow:hidden; } #main_genre_touchSlider>ul { width:99999px;min-height:430px; position:absolute; top:0; left:0; overflow:hidden;} #main_genre_touchSlider>ul>li { float:left; margin-left:3%; width: 94% !important;} #genre .genre_cont_All ul li a{height: 180px;} #genre .genre_cont_All .txt_box{width: 54%; padding:20px 10px;} #genre .genre_cont_All .txt_box .nobel_title{padding: 10px 0 15px;} #genre .genre_cont_All .txt_box .writer{bottom:20px;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #container #genre {width: 50%; margin-top: 5px;} } @media screen and (orientation:landscape) and (max-width:970px){ #genre .genre_cont_All ul li a{height: 164px; } } @media screen and (orientation:landscape) and (max-width:1024px){ #container #genre{width: 50%; margin-top: 5px;} #main_genre_touchSlider{min-height:575px;margin:0 auto;position:relative; overflow:hidden; } #main_genre_touchSlider>ul { width:99999px;min-height:430px; position:absolute; top:0; left:0; overflow:hidden;} #main_genre_touchSlider>ul>li { float:left; margin-left:3%; width: 94% !important;} #genre .genre_cont_All ul li a{height: 178px;} #genre .genre_cont_All .txt_box{padding:15px 10px;} #genre .genre_cont_All .txt_box .writer{bottom:15px;} } @media screen and (orientation:landscape) and (max-width:960px){ #container #genre{width:50%;} } @media screen and (orientation:landscape) and (max-width:780px){ #genre .genre_cont_All .txt_box p{font-size: 0.9em; margin-top: 5px;} #genre .genre_cont_All .txt_box{width: 56%; height: 100%; background: #fff; font-size: 1em; } #genre .genre_cont_All .txt_box .txt{margin:10px 0 40px; } #genre .genre_cont_All .img_box{width: 43%;} #genre .genre_cont_All .txt_box{padding:10px;} #genre .genre_cont_All .txt_box .writer{bottom:10px;} #genre .genre_cont_All .txt_box .nobel_title{padding: 5px 0;} #container #genre{width:100%;} } @media screen and (orientation:landscape) and (max-width:667px){ #genre .genre_cont_All .img_box{width:50%;} #genre .genre_cont_All .txt_box{width: 50%;} } @media screen and (orientation:landscape) and (max-width:570px){ #genre .genre_cont_All .txt_box{width: 60%; /* padding: 3px 8px; */} #genre .genre_cont_All .txt_box .txt{margin: 10px 0 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #genre .genre_cont_All .txt_box .writer{left:10px;} #genre .genre_cont_All .txt_box .nobel_title{padding:0 0 10px;} #genre .genre_cont_All .img_box{width:40%;} } @media screen and (orientation:landscape) and (max-width:480px){ #genre .genre_cont_All .txt_box p{margin-top: 2px;} #genre .genre_cont_All .txt_box .nobel_title{padding-bottom:10px;} #genre .genre_cont_All .txt_box .writer{bottom:5px; width: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #genre .paging .btn_page{font-size:0.9em;} } @media screen and (orientation:landscape) and (max-width:780px){ #genre .genre_wrap2 .genre_cont_All .img_box img{left:0%;} } @media screen and (orientation:landscape) and (max-width:500px){ #genre .genre_wrap2 .genre_cont_All .img_box img{left:10%;} } @media all and (min-width:1251px){ #container #genre{width: 49%; margin-top: 5px; margin: 5px 0.5%;} } /* 메인 장르 */ /* 메인 편성 */ #container #schedule{width:100%; overflow:hidden; float:left;margin-top: 5px;} #schedule .schedule_cont{width:96%; margin:0 auto 30px;} #schedule .schedule_cont li{width:100%; border:1px solid #ddd; border-radius:5px; margin:10px auto; overflow:hidden; box-sizing:border-box;} #schedule .schedule_cont li a{display:block; width:100%; height:100%; color:#4e4e4e; position:relative; overflow: hidden; border-radius: 5px;} #schedule .schedule_cont li img{width:100%; display:block; border-radius: 5px 5px 0 0;} #schedule .schedule_cont li .novel_img{position:absolute; top:0; left:0; right:0;} #schedule .schedule_cont .nobel_txt{width:100%; background:#fff; border-radius: 0 0 5px 5px;} #schedule .schedule_cont .nobel_txt br{display:none;} #schedule .schedule_cont .nobel_txt p{position:relative; padding:7px; line-height:1.4; font-size:1.1em; font-weight:bold; text-align: center;} #schedule .schedule_cont .nobel_txt .writer{font-weight:normal; font-size: 0.9em;} #schedule .schedule_cont .nobel_copy{color:var(--main-ft-color); position: absolute; top: -110%; left: 0; right: 0; margin:0 auto; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #schedule .schedule_cont .nobel_copy span{padding:0 5px; background:rgba(0,0,0,.35); display: inline-block;font-size: 1.3em;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 95%;} #schedule .schedule_cont li .img_backbox{width:100%; position:relative;} #schedule .schedule_cont li .img_backbox div{border-radius:5px 5px 0 0; position:absolute; top:0; left:0; right:0; height:100%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #schedule .schedule_cont li .img_backbox .patch_box{ position:absolute; top:0; right:5px; z-index: 9; text-align: right; background: none; border: none; border-radius: 0; height: auto; width: auto; letter-spacing: 0; font-size: 0;} #schedule .schedule_cont li .img_backbox .patch_box>img{width: 35px; display:inline-block; vertical-align: top; margin-left:3px;} #schedule .schedule_cont li .img_backbox .patch_box .patch{width:40%; max-width: 45px;} #schedule .schedule_cont li .loadpre_logo{width:35%; position:absolute; top:0%; bottom:0; left:0; right:0; margin:auto; min-width:45px; max-width:60px;} @media all and (min-width:320px) and (max-width:360px){ #schedule .schedule_cont .nobel_txt p{font-size:1.0em;} } @media all and (min-width:521px) and (max-width:600px){ #schedule .schedule_cont li{ width: 100%;max-height: 180px;} #schedule .schedule_cont .nobel_txt .writer{bottom: 10px; width: 100%; left: 0; text-align: center;} } @media all and (min-width:600px) and (max-width:810px){ #schedule .schedule_cont li{ width: 49%; margin: 10px 0.5%; float: left;} #schedule .schedule_cont .nobel_txt .writer{bottom: 10px; width: 100%; left: 0; text-align: center;} #schedule .schedule_cont .nobel_copy{font-size: 0.9em; top: -35px;} #schedule .schedule_cont .nobel_copy span{max-width:90%;} #schedule .schedule_cont li .loadpre_logo{right: 40%;} } @media all and (min-width:1024px){ #schedule .schedule_cont li{width:49%; margin:5px 0.5%; float:left;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #container #schedule{width:50%; margin-bottom:10px;} #schedule .schedule_cont li{width:100%; margin:5px 0%; float:left;} #schedule .schedule_cont .nobel_txt .writer{bottom: 15px; font-size: 0.9em;right: 10px;} #schedule .schedule_cont li .loadpre_logo{right:25%;} } @media screen and (orientation:landscape) and (max-width:780px){ #container #schedule{width:100%; margin-bottom:10px;} #schedule .schedule_cont li{width:49%; margin:5px 0.5%; float:left;} #schedule .schedule_cont .nobel_txt .nobel_copy{padding: 5px 10px; text-align:center;} #schedule .schedule_cont .nobel_txt .writer{bottom: 5px; font-size: 0.9em;} #schedule .schedule_cont li .loadpre_logo{right: 0%;} } @media screen and (orientation:landscape) and (max-width:570px){ #container #schedule{width:100%; margin-bottom:10px;} #schedule .schedule_cont li{width:49%; margin:5px 0.5%; float:left;} #schedule .schedule_cont li img{max-width:100%;display: block;} #schedule .schedule_cont .nobel_txt .nobel_copy{padding: 5px 10px; text-align:center;} #schedule .schedule_cont .nobel_txt .writer{bottom: 5px; font-size: 1em;} } @media screen and (orientation:landscape) and (max-width:480px){ #schedule .schedule_cont .nobel_txt p{padding: 5px 7px; font-size: 0.9em;} #schedule .schedule_cont .nobel_txt .nobel_copy{padding: 0px 10px;} #schedule .schedule_cont .nobel_txt .writer{padding-top: 5px;} #schedule .schedule_cont li{width:100%; margin:5px auto;} } @media screen and (orientation:landscape) and (min-width:1025px) { #container #schedule {width: 50%;} #schedule .schedule_cont .nobel_txt .writer { bottom: 15px; font-size: 0.9em; right: 10px;} #schedule .schedule_cont .nobel_txt .writer{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; display: inline-block;} #schedule .schedule_cont li .loadpre_logo{right:33%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #schedule .schedule_cont .nobel_txt p{font-size: 1.1em;} #schedule .schedule_cont .nobel_txt .writer{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; display: inline-block;} } @media screen and (orientation:landscape) and (max-width:780px){ #schedule .schedule_cont .nobel_copy span{background: rgba(0,0,0,.35); color:var(--main-ft-color); max-width: 90%;} #schedule .schedule_cont .nobel_txt .nobel_copy{top: -40px; font-size: 0.9em;} } @media screen and (orientation:landscape) and (max-width:500px){ #schedule .schedule_cont .nobel_txt{padding:0;} #schedule .schedule_cont .nobel_txt .nobel_copy{top: -30px; font-size: 0.9em;} } /* 메인 편성 */ /* 메인 컨테이너 */ /* 성인메인 */ #adult_container{width: 100%; padding: 0; overflow-x: hidden; max-width: 1250px; margin: 0 auto;} #adult_container .contain{margin-top:10px;} /* 성인 메인 인기 */ #adult_popular{width:100%; float:left; position:relative;} #adult_popular a{color:#4e4e4e; font-weight: normal;} #adult_popular .adult_popular_tab{width:96%; margin:0 auto; position:relative; border-radius:5px; overflow:hidden; border:1px solid #ddd;} #adult_popular .adult_popular_tab ul{float:left; width:100%; background:#fff;} #adult_popular .adult_popular_tab li{float:left; width:20%; text-align:center;} #adult_popular .adult_popular_tab li a{font-size:1.1em; display:block; padding:6px 0 11px; font-weight:bold; color:#9e9e9e; border-right:1px solid #ddd;text-indent:-999999999em; overflow:hidden;} #adult_popular .adult_popular_tab .line_none a{border:none;} #adult_popular .adult_popular_tab li .on{color:#E84D7D;} #adult_popular .adult_popular_tab .on_line_genre{position:absolute; bottom:0; width:20%; border:1px solid #E84D7D; display:none;} #adult_popular #adult_popular_cont1{display:block; } #adult_popular #adult_popular_cont2{display:none;} #adult_popular .adult_popular_cont{ width:100%;} #adult_popular .paging{ background:none; text-align:center; overflow:hidden; } #adult_popular .paging .btn_page{color:#9E9E9E; float: left; display:block; width:20%; height:35px; padding:8px 0 5px; font-size:1.1em; line-height:0; margin:0; background:#fff; border:none; font-weight: bold; box-sizing: border-box; letter-spacing:-0.09em; border-bottom: 2px solid #fff; border-right:1px solid #ddd;} #adult_popular .paging .btn_page.on{color: #E84D7D; border-bottom: 2px solid #E84D7D;} #adult_popular .paging .btn_page:last-child{ border-right:none;} #adult_popular_touchSlider {min-height:430px;margin:0 auto; margin-right:10%; position:relative; overflow:visible; } #adult_popular_touchSlider>ul { width:99999px;min-height:430px; position:absolute; top:0; left:0; overflow:hidden;} #adult_popular_touchSlider>ul>li { float:left; margin-left:3%; width: 97% !important;} #adult_popular .genre_cont_All{min-height:430px;} #adult_popular .genre_cont_All ul{float:left; width:100%; width: 100%; top: 0; left: 0;} #adult_popular .genre_cont_All ul li{float:left; width:100%; margin:5px 0; border-radius:5px; border:1px solid #ddd; overflow:hidden; background:#fff;} #adult_popular .genre_cont_All ul li a{display:block; width:100%; height:130px; } #adult_popular .genre_cont_All .img_box{width:45%; height:100%; overflow:hidden; float:left;position:relative; } #adult_popular .genre_cont_All .img_box div{background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; position: absolute; bottom: 0; right: 0;left: 0; height: 100%; background-size:100% 100%; } #adult_popular .genre_cont_All .img_box img{margin-left:-4%; width:110%;} #adult_popular .genre_cont_All .img_box .up_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px; margin-left:0;} #adult_popular .genre_cont_All .img_box .end_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px; margin-left:0;} #adult_popular .genre_cont_All .txt_box{float:right; width:55%; height:100%; position:relative; padding:10px; } #adult_popular .genre_cont_All .txt_box p{width:100%; font-size:1.0em; letter-spacing: -0.08em; display:block; text-align:left;} #adult_popular .genre_cont_All .txt_box p .heart{font-size:1.0em; padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart.png) no-repeat 0 75%; background-size: 14px 12px; color:#E84D7D;} #adult_popular .genre_cont_All .txt_box .on .heart{background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 40%; background-size: 12px 10px; } #adult_popular .genre_cont_All .txt_box .nobel_title{font-weight:bold; font-size:1.2em; display:block; padding:5px 0;white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #adult_popular .genre_cont_All .txt_box .txt{margin:0px 0 25px;} #adult_popular .genre_cont_All .txt_box .writer{position:absolute; bottom:10px; left:10px;} #adult_popular .bx-viewport{min-height:430px;} #adult_popular .bx-wrapper{margin:0 auto;} #adult_popular .bx-controls{position:absolute; bottom:100%; left:0; right: 0; width: 96%; margin: auto; height: 35px;} #adult_popular .bx-pager-item{width:20%; height: 100%;} #adult_popular .bx-wrapper .bx-pager.bx-default-pager a.active{background: none; color:#E84D7D; border-bottom: 2px solid #E84D7D;} #adult_popular .bx-wrapper .bx-pager.bx-default-pager a{box-sizing: content-box; border-radius:0; width: 100%; margin:0; text-indent:0; background:none; font-size: 1.2em; color: #9E9E9E; font-weight: bold; box-sizing: border-box; padding: 9px 0; height:100%;} #adult_popular .bx-wrapper .bx-pager.bx-default-pager{top: 0; left: 0; height:100%; display:block;} #adult_popular .bx-wrapper .bx-pager{padding:0;} #adult_popular .swiper-container_genre {width: 100%; height: 100%; margin-left: auto; margin-right: auto;} #adult_popular .swiper-container_genre .swiper-slide {width: 92%; margin-left:10px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;} #adult_popular .swiper-container_genre .swiper-pagination{display:none; opacity:0;/* top:7.5%; */bottom: 87%; left: 0px; right: 0; margin:auto; height: 40px; width: 95.5%; background:none; z-index: 999;} #adult_popular .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{height: 36px; width:20%; margin:0 !important; background:none; border-bottom:none; border-radius:0;} #adult_popular .swiper-pagination-clickable .swiper-pagination-bullet {height: 36px; width:20%; margin:0 !important; background:none; border-bottom:none; border-radius:0;} #adult_popular .swiper-pagination-bullet-active{border-bottom:2px solid #E84D7D !important;} #adult_popular .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper{background:none;} @media all and (min-width:320px) and (max-width:360px){ #adult_popular .genre_cont_All .txt_box .nobel_title{font-size:1.05em;} } @media all and (min-width:400px) and (max-width:435px){ #adult_popular .genre_cont_All ul li a{height:140px;} #adult_popular_touchSlider{min-height: 455px;} } @media all and (min-width:436px) and (max-width:600px){ #adult_popular .genre_cont_All ul li a{height:185px;} #adult_popular_touchSlider{min-height: 595px;} } @media all and (min-width:601px) and (max-width:810px){ #adult_popular .genre_cont_All ul li a{height:210px;} #adult_popular_touchSlider{min-height: 670px;} } @media screen and (orientation:landscape)and (max-width:1600px){ #container #adult_popular{width: 50%; margin-top: 5px;} #adult_popular_touchSlider{min-height:575px;margin:0 auto;position:relative; overflow:hidden; } #adult_popular_touchSlider>ul { width:99999px;min-height:430px; position:absolute; top:0; left:0; overflow:hidden;} #adult_popular_touchSlider>ul>li { float:left; margin-left:3%; width: 94% !important;} #adult_popular .genre_cont_All ul li a{height: 180px;} #adult_popular .genre_cont_All .txt_box{width: 54%;} } @media screen and (orientation:landscape)and (max-width:1024px){ #container #adult_popular{width: 50%; margin-top: 5px;} #adult_popular_touchSlider{min-height:530px;margin:0 auto;position:relative; overflow:hidden; } #adult_popular_touchSlider { width:99999px;min-height:430px; position:absolute; top:0; left:0; overflow:hidden;} #adult_popular_touchSlider>ul>li { float:left; margin-left:3%; width: 94% !important;} #adult_popular .genre_cont_All ul li a{height: 164px;} } @media screen and (orientation:landscape)and (max-width:970px){ #adult_popular .genre_cont_All ul li a{height: 164px; } } @media screen and (orientation:landscape) and (max-width:780px){ #adult_popular .genre_cont_All .txt_box p{font-size: 0.9em; margin-top: 5px;} #adult_popular .genre_cont_All .txt_box{width: 56%; height: initial; background: #fff; font-size: 1em; } #adult_popular .genre_cont_All .txt_box .txt{margin:10px 0 40px; } #adult_popular .genre_cont_All ul li a{height: 164px;} #adult_popular .genre_cont_All .img_box{width: 43%;} } @media screen and (orientation:landscape) and (max-width:667px){ #adult_popular .genre_cont_All ul li a{height: 164px;} #adult_popular .genre_cont_All .img_box{width:47%;} #adult_popular .genre_cont_All .txt_box{width: 52%;} } @media screen and (orientation:landscape) and (max-width:570px){ #adult_popular .genre_cont_All .txt_box{width: 53%; padding: 3px 8px;} #adult_popular .genre_cont_All .txt_box .txt{margin: 10px 0 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #adult_popular .genre_cont_All .txt_box .writer{left:9px;} #adult_popular .genre_cont_All ul li a{height: 129px;} } @media screen and (orientation:landscape) and (max-width:480px){ #adult_popular .genre_cont_All ul li a{height: 109px;} #adult_popular .genre_cont_All .txt_box p{margin-top: 2px;} #adult_popular .genre_cont_All .txt_box .txt{margin: 0px 0 30px;} #adult_popular .genre_cont_All .txt_box .nobel_title{padding-bottom:10px;} #adult_popular .genre_cont_All .txt_box .writer{bottom:0;} #adult_popular .paging .btn_page{font-size:0.9em;} } /* 성인 메인 인기 */ /* 성인 메인 B급 */ #adult_main_b{width:100%; margin:0 auto; overflow:hidden;} #adult_main_b a{color:#4e4e4e; font-weight: normal;} #adult_main_b .adult_main_b_cont{width:96%; margin:5px auto;} #adult_main_b .adult_main_b_cont>div{width:100%; float:left;} #adult_main_b .adult_main_b_cont ul{float:left; width:100%;} #adult_main_b .adult_main_b_cont ul li{float:left; width:48.4%; margin:5px 2% 5px 0; border-radius:5px; border:1px solid #ddd; overflow:hidden; } #adult_main_b .adult_main_b_cont ul .li_big{width:100%; margin:5px 0;} #adult_main_b .adult_main_b_cont ul .right_none{margin-right:0; float:right;} #adult_main_b .adult_main_b_cont ul li .best_nobel_box{display:block; width:100%; height:200px; position:relative; } #adult_main_b .adult_main_b_cont ul li img{width:100%; display:block;} /* #adult_main_b .adult_main_b_cont ul li .novel_img{width:150%; position:absolute; left:-25%; right:0; top:-1px; margin:auto;} */ #adult_main_b .adult_main_b_cont ul li .novel_img{width:110%; position:absolute; left:-5%; right:0; top:-1px; margin:auto;} #adult_main_b .adult_main_b_cont ul li p{background:#fff; position:absolute; bottom:0; left:0; width:100%; font-size:1.1em; letter-spacing: -0.08em;} #adult_main_b .adult_main_b_cont ul li p span{display:block; padding:5px 10px 10px;} #adult_main_b .adult_main_b_cont ul li p .nobel_title{ font-weight:bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom:0;max-width: 100%;} #adult_main_b .adult_main_b_cont ul li p .writer{float:right; padding-top:3px; padding-bottom:5px;letter-spacing: -0.1em;} #adult_main_b .adult_main_b_cont ul .li_big img{width:100%; display:block; left:0;} #adult_main_b .adult_main_b_cont ul .li_big .novel_img{position:absolute; top:0; left:0; right:0;} #adult_main_b .adult_main_b_cont ul .li_big .nobel_title{float:left; padding:8px 10px 10px;max-width: 50%;} #adult_main_b .adult_main_b_cont ul .li_big .writer{padding:8px 10px 10px;} #adult_main_b .adult_main_b_cont ul li .up_nobel_main{width:40%; position:absolute; top:0; left:0;max-width: 60px; right: inherit;} #adult_main_b .adult_main_b_cont ul li .end_nobel_main{width:40%; position:absolute; top:0; left:0;max-width: 60px; right: inherit;} #adult_main_b .adult_main_b_cont ul .li_big .up_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px; right: inherit;} #adult_main_b .adult_main_b_cont ul .li_big .end_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px; right: inherit;} #adult_main_b .adult_main_b_cont ul li p .hits{font-size: 0.9em; letter-spacing:0; position:absolute; right:0; top:-22px; color:var(--main-ft-color); background: rgba(0, 0, 0, 0.5); padding: 2px 2px 0; box-sizing: border-box; margin-top:0;} #adult_main_b .adult_main_b_cont ul li p .hits .heart{padding:0; display: inline-block; background-size: 13px 11px; padding-left:10px; margin-top:0;} #adult_main_b .adult_main_b_cont ul li .img_backbox{width:100%; height:100%; position:relative;} #adult_main_b .adult_main_b_cont ul li .img_backbox div{position:absolute; top:0; left:0; right:0; height:79%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #adult_main_b .adult_main_b_cont ul .li_big .img_backbox div{position:absolute; top:0; left:0; right:0; height:84%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #adult_main_b .adult_main_b_cont ul .li_big img.icon_19_patch{width:22px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99; left: auto; top: auto;} #adult_main_b .adult_main_b_cont ul li img.icon_19_patch{width:22px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99; left: auto; top: auto;} @media all and (min-width:320px) and (max-width:360px){ #adult_main_b .adult_main_b_cont ul li{width:48%;} #adult_main_b .adult_main_b_cont ul li .best_nobel_box{height: 175px;} #adult_main_b .adult_main_b_cont ul li p{font-size:1.0em;} #adult_main_b .adult_main_b_cont ul li p span{padding:5px 6px 10px;} #adult_main_b .adult_main_b_cont ul .li_big .nobel_title{max-width: 50%; padding: 8px 10px 8px;} #adult_main_b .adult_main_b_cont ul .li_big .writer{ padding: 8px 10px 8px;} #adult_main_b .adult_main_b_cont ul li p .nobel_title{max-width: 100%;} #adult_main_b .adult_main_b_cont ul li p .writer{padding-top: 6px;} } @media all and (min-width:700px){ #adult_main_b .adult_main_b_cont ul li .best_nobel_box{height:300px;} #adult_main_b .adult_main_b_cont ul .li_big .img_backbox div{height:90%;} #adult_main_b .adult_main_b_cont ul li .img_backbox div{height:90%;} } @media all and (min-width:601px) and (max-width:810px){ #adult_main_b .adult_main_b_cont ul .li_big{width: 48%; margin: 5px 1%;} #adult_main_b .adult_main_b_cont ul li{width: 24%; margin: 5px 0 5px;} #adult_main_b .adult_main_b_cont ul li .best_nobel_box{height:230px;} #adult_main_b .adult_main_b_cont ul li p {font-size: 1.2em; padding: 5px 0;} #adult_main_b .adult_main_b_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #adult_main_b .adult_main_b_cont ul .li_big .writer{padding-top: 5px; padding-bottom: 5px;} #adult_main_b .adult_main_b_cont ul li p .writer {padding-top: 5px; padding-bottom: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 80px;} #adult_main_b .adult_main_b_cont ul .li_big .img_backbox div{height:80%;} #adult_main_b .adult_main_b_cont ul li .img_backbox div{height:80%;} } @media screen and (orientation:landscape)and (max-width:1600px){ #adult_main_b .adult_main_b_cont ul .li_big{width: 48%; margin: 5px 1%;} #adult_main_b .adult_main_b_cont ul li{width: 24%; margin: 5px 0 5px;} #adult_main_b .adult_main_b_cont ul li .best_nobel_box{height:260px;} #adult_main_b .adult_main_b_cont ul li p {font-size: 1em;} #adult_main_b .adult_main_b_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #adult_main_b .adult_main_b_cont ul .li_big .writer{padding-top: 5px; padding-bottom: 5px;} #adult_main_b .adult_main_b_cont ul li p .writer {padding-top: 5px; padding-bottom: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 80px;} } @media screen and (orientation:landscape)and (max-width:1024px){ #adult_main_b .adult_main_b_cont ul .li_big{width: 48%; margin: 5px 1%;} #adult_main_b .adult_main_b_cont ul li{width: 24%; margin: 5px 0 5px;} #adult_main_b .adult_main_b_cont ul li .best_nobel_box{height:260px;} #adult_main_b .adult_main_b_cont ul li p {font-size: 1em;} #adult_main_b .adult_main_b_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #adult_main_b .adult_main_b_cont ul .li_big .writer{padding-top: 5px; padding-bottom: 5px;} #adult_main_b .adult_main_b_cont ul li p .writer {padding-top: 5px; padding-bottom: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 80px;} } @media screen and (orientation:landscape)and (max-width:970px){ #adult_main_b .adult_main_b_cont ul .li_big{width: 48%; margin: 5px 1%;} #adult_main_b .adult_main_b_cont ul li{width: 24%; margin: 5px 0 5px;} #adult_main_b .adult_main_b_cont ul li .best_nobel_box{height:210px;} #adult_main_b .adult_main_b_cont ul li p {font-size: 1.2em;} #adult_main_b .adult_main_b_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #adult_main_b .adult_main_b_cont ul .li_big .writer{padding-top: 5px; padding-bottom: 5px;} #adult_main_b .adult_main_b_cont ul li p .writer {padding-top: 5px; padding-bottom: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 80px;} } @media screen and (orientation:landscape) and (max-width:780px){ #adult_main_b .adult_main_b_cont ul .li_big{width: 48%; margin: 5px 1%;} #adult_main_b .adult_main_b_cont ul li{width: 24%; margin: 5px 0 5px;} #adult_main_b .adult_main_b_cont ul li .best_nobel_box{height:210px;} #adult_main_b .adult_main_b_cont ul li p {font-size: 1.2em;} #adult_main_b .adult_main_b_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #adult_main_b .adult_main_b_cont ul .li_big .writer{padding-top: 5px; padding-bottom: 5px;} #adult_main_b .adult_main_b_cont ul li p .writer {padding-top: 5px; padding-bottom: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 80px;} } @media screen and (orientation:landscape) and (max-width:667px){ #adult_main_b .adult_main_b_cont ul .li_big{width: 48%; margin: 5px 1%;} #adult_main_b .adult_main_b_cont ul li{width: 24%; margin: 5px 0 5px;} #adult_main_b .adult_main_b_cont ul li p {font-size: 1.2em;} #adult_main_b .adult_main_b_cont ul .li_big .nobel_title {float: none; padding: 5px 10px 0;} #adult_main_b .adult_main_b_cont ul .li_big .writer {padding-top: 10px; padding-bottom: 5px;} #adult_main_b .adult_main_b_cont ul li p .writer { padding-top: 10px; padding-bottom: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 80px;} #adult_main_b .adult_main_b_cont ul .li_big .img_backbox div{height: 73%;} #adult_main_b .adult_main_b_cont ul li .img_backbox div{height: 73%;} } @media screen and (orientation:landscape) and (max-width:570px){ #adult_main_b .adult_main_b_cont ul li .best_nobel_box{height: 160px;} #adult_main_b .adult_main_b_cont ul li p {font-size: 1em; padding: 0;} #adult_main_b .adult_main_b_cont ul .li_big .writer{ padding-top: 0px;} #adult_main_b .adult_main_b_cont ul li p .writer{ padding-top: 0px;} #adult_main_b .adult_main_b_cont ul .li_big .img_backbox div{height: 77%;} #adult_main_b .adult_main_b_cont ul li .img_backbox div{height: 77%;} } @media screen and (orientation:landscape) and (max-width:500px){ #adult_main_b .adult_main_b_cont ul .li_big{width: 48%; margin: 5px 1%;} #adult_main_b .adult_main_b_cont ul li{ height: 150px;} #adult_main_b .adult_main_b_cont ul li .best_nobel_box{ height: 150px;} #adult_main_b .adult_main_b_cont ul li p {font-size: 1em;} #adult_main_b .adult_main_b_cont ul .li_big .nobel_title{float: none; padding: 5px 10px 0;} #adult_main_b .adult_main_b_cont ul .li_big .writer{padding-top: 5px; padding-bottom: 5px;} #adult_main_b .adult_main_b_cont ul li p .writer {padding-top: 5px; padding-bottom: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 80px;} #adult_main_b .adult_main_b_cont ul li img.icon_19_patch{/* bottom: 32%; */margin-bottom: 5px;} } @media all and (min-width:1251px){ #adult_main_b{width: 99%; margin: 10px 0.5%;} #adult_main_b .adult_main_b_cont{width:100%;} } /* 성인 메인 B급 */ /* 성인 메인 S소설 */ #adult_main_s a{color:#4e4e4e; font-weight: normal;} #adult_main_s .adult_main_s_cont{width:100%; } #adult_main_s .adult_main_s_cont ul{float:left; margin-left:-26%;} #adult_main_s .swiper-adult_main_s2{display:none;} #adult_main_s .swiper-adult_main_s2 .swiper-wrapper{float:left; margin-left:-32%;} #adult_main_s .adult_main_s_cont ul li{float:left; width:42% !important; height:215px; border-radius:5px; overflow:hidden; border:1px solid #ddd;} #adult_main_s .adult_main_s_cont ul li img{width:100%; display:block;} #adult_main_s .adult_main_s_cont ul li .novel_img{position:absolute; top:0; left:0; right:0;} #adult_main_s .adult_main_s_cont ul li a{display:block; height:100%; position:relative; width:100%;} #adult_main_s .adult_main_s_cont ul li p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;letter-spacing: -0.09em;} #adult_main_s .adult_main_s_cont ul li .nobel_txt{position:absolute; bottom:0; left:0; background:#fff; font-size:1.0em; width:100%; text-align:center; padding:10px 5px 15px; min-height:70px;} #adult_main_s .adult_main_s_cont ul li .nobel_title{display:block; font-weight:bold; font-size:1.1em; margin-bottom:7px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #adult_main_s .adult_main_s_cont ul li a .today_cont_back{position:absolute; top:0; left:0; right:0; height:100%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #adult_main_s .adult_main_s_cont ul li .up_nobel_main{width:35%; position:absolute; top:0; left:0;} #adult_main_s .adult_main_s_cont ul li .patch_box{width:100%; position:absolute; top:0; right:5px; z-index: 9; text-align: right;} #adult_main_s .adult_main_s_cont ul li .patch_box>img{width: 35px; display:inline-block; vertical-align: top; margin-left:3px;} #adult_main_s .adult_main_s_cont ul li .patch_box .patch{width:25%; min-width:30px; max-width: 40px;} #adult_main_s .adult_main_s_cont ul li img.icon_19_patch{width:22px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} .adult_main_s {width: 100%; height: 100%; margin: 0 auto; overflow:hidden;} @media all and (min-width:320px) and (max-width:340px){ #adult_main_s .adult_main_s_cont ul li{height:200px;} } @media all and (min-width:436px) and (max-width:600px){ #adult_main_s .adult_main_s_cont ul li{height:300px; width:43% !important;} #adult_main_s .adult_main_s_cont ul li .nobel_txt{ position: absolute; min-height: 70px; padding:10px 5px 15px;} #adult_main_s .adult_main_s_cont ul li a .today_cont_back{height: 95%;} } @media all and (min-width:601px) and (max-width:810px){ #adult_main_s .adult_main_s_cont ul li{height:300px; width:43% !important;} #adult_main_s .adult_main_s_cont ul li .nobel_txt{font-size:1.2em; min-height: 96px; position: absolute; padding:10px 5px 15px;} #adult_main_s .adult_main_s_cont ul li p { padding-top: 3%;} #adult_main_s .adult_main_s_cont ul li a .today_cont_back{height: 63%;} } @media screen and (orientation:landscape)and (max-width:1600px){ #adult_main_s .swiper-adult_main_s{display: none;} #adult_main_s .swiper-adult_main_s2{display:block;} #adult_main_s .adult_main_s_cont ul li{width: 30% !important; height: 285px;} #adult_main_s .adult_main_s_cont ul li a .today_cont_back{height: 58%;} #adult_main_s .adult_main_s_cont ul li .nobel_txt{font-size: 1.1em; min-height: 75px; position:absolute; padding: 10px 5px 15px;} } @media screen and (orientation:landscape)and (max-width:1024px){ #adult_main_s .swiper-adult_main_s_cont{display:none;} #adult_main_s .swiper-adult_main_s_cont2{display:block;} #adult_main_s .adult_main_s_cont ul li{width: 30% !important; height: 260px;} #adult_main_s .adult_main_s_cont ul li .nobel_txt{font-size: 1.1em; min-height: 75px; position:absolute; padding: 10px 5px 15px;} #adult_main_s .adult_main_s_cont ul{margin-left: -31%;} #adult_main_s .adult_main_s_cont ul li a .today_cont_back {height: 65%;} } @media screen and (orientation:landscape)and (max-width:970px){ #adult_main_s .swiper-adult_main_s_cont{display:none;} #adult_main_s .swiper-adult_main_s_cont2{display:block;} #adult_main_s .adult_main_s_cont ul li{width: 30% !important; height: 260px;} #adult_main_s .adult_main_s_cont ul li .nobel_txt{font-size: 1.1em; min-height: 75px; position:absolute; padding: 10px 5px 15px;} #adult_main_s .adult_main_s_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (max-width:780px){ #adult_main_s .swiper-adult_main_s_cont{display:none;} #adult_main_s .swiper-adult_main_s_cont2{display:block;} #adult_main_s .adult_main_s_cont ul li{width: 30% !important; height: 210px;} #adult_main_s .adult_main_s_cont ul li .nobel_txt{font-size: 1em; min-height: 65px;} #adult_main_s .adult_main_s_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (max-width:667px){ #adult_main_s .swiper-adult_main_s_cont{display:none;} #adult_main_s .swiper-adult_main_s_cont2{display:block;} #adult_main_s .adult_main_s_cont ul li{width: 30% !important; height: 210px;} #adult_main_s .adult_main_s_cont ul li .nobel_txt{font-size: 1em; min-height: 50px; position:absolute;} #adult_main_s .adult_main_s_cont ul{margin-left: -31%;} #adult_main_s .adult_main_s_cont ul li a .today_cont_back{height: 92%;} #adult_main_s .adult_main_s_cont ul li img.icon_19_patch{bottom: 100%;} } @media screen and (orientation:landscape) and (max-width:500px){ #adult_main_s .adult_main_s_cont ul li a .today_cont_back{height: 95%;} #adult_main_s .adult_main_s_cont ul li{height:180px;} #adult_main_s .adult_main_s_cont ul li .nobel_txt{position: absolute; font-size: 0.9em; min-height: 50px; padding: 5px 5px 5px;} } @media all and (min-width:1251px){ #adult_main_s{width: 49%; float: left; margin: 0 0.5%;} #adult_main_s .adult_main_s_cont{width: 97%;} #adult_main_s .adult_main_s_cont ul li{height: 245px;} #adult_main_s .adult_main_s_cont ul li a .today_cont_back{height: 95%;} #adult_main_s .swiper-adult_main_s2 .swiper-wrapper{margin-left: -35%;} } /* 성인 메인 S소설 */ /* 성인 메인 포토툰 */ #adult_main_toon a{color:#4e4e4e; font-weight: normal;} #adult_main_toon .adult_main_toon_cont{width:100%; max-width:1250px;} #adult_main_toon .adult_main_toon_cont ul{float:left; margin-left:-26%;} #adult_main_toon .swiper-adult_main_toon2{display:none;} #adult_main_toon .swiper-adult_main_toon2 .swiper-wrapper{float:left; margin-left:-32%;} #adult_main_toon .adult_main_toon_cont ul li{float:left; width:42% !important; height:215px; border-radius:5px; overflow:hidden; border:1px solid #ddd;} #adult_main_toon .adult_main_toon_cont ul li img{width:100%; display:block;} #adult_main_toon .adult_main_toon_cont ul li .novel_img{position:absolute; top:0; left:0; right:0;} #adult_main_toon .adult_main_toon_cont ul li a{display:block; height:100%; position:relative; width:100%;} #adult_main_toon .adult_main_toon_cont ul li p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;letter-spacing: -0.09em;} #adult_main_toon .adult_main_toon_cont ul li .nobel_txt{position:absolute; bottom:0; left:0; background:#fff; font-size:1.0em; width:100%; text-align:center; padding:10px 5px 15px; min-height:70px;} #adult_main_toon .adult_main_toon_cont ul li .nobel_title{display:block; font-weight:bold; font-size:1.1em; margin-bottom:7px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #adult_main_toon .adult_main_toon_cont ul li a .today_cont_back{position:absolute; top:0; left:0; right:0; height:100%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #adult_main_toon .adult_main_toon_cont ul li .up_nobel_main{width:35%; position:absolute; top:0; left:0;} #adult_main_toon .adult_main_toon_cont ul li .patch_box{width:100%; position:absolute; top:0; right:5px; z-index: 9; text-align: right;} #adult_main_toon .adult_main_toon_cont ul li .patch_box>img{width: 35px; display:inline-block; vertical-align: top; margin-left:3px;} #adult_main_toon .adult_main_toon_cont ul li .patch_box .patch{width:25%; min-width:30px; max-width: 40px;} #adult_main_toon .adult_main_toon_cont ul li img.icon_19_patch{width:22px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} .adult_main_toon {width: 100%; height: 100%; margin: 0 auto; overflow:hidden;} .swiper-slide {width: 60%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;} @media all and (min-width:320px) and (max-width:340px){ #adult_main_toon .adult_main_toon_cont ul li{height:200px;} } @media all and (min-width:436px) and (max-width:600px){ #adult_main_toon .adult_main_toon_cont ul li{height:300px; width:43% !important;} #adult_main_toon .adult_main_toon_cont ul li .nobel_txt{ position: absolute; min-height: 70px; padding:10px 5px 15px;} #adult_main_toon .adult_main_toon_cont ul li a .today_cont_back{height: 95%;} } @media all and (min-width:601px) and (max-width:810px){ #adult_main_toon .adult_main_toon_cont ul li{height:300px; width:43% !important;} #adult_main_toon .adult_main_toon_cont ul li .nobel_txt{font-size:1.2em; min-height: 96px; position: absolute; padding:10px 5px 15px;} #adult_main_toon .adult_main_toon_cont ul li p { padding-top: 3%;} #adult_main_toon .adult_main_toon_cont ul li a .today_cont_back{height: 63%;} } @media screen and (orientation:landscape)and (max-width:1600px){ #adult_main_toon .swiper-adult_main_toon {display: none;} #adult_main_toon .swiper-adult_main_toon2{display:block;} #adult_main_toon .adult_main_toon_cont ul li{width: 30% !important; height: 285px;} #adult_main_toon .adult_main_toon_cont ul li a .today_cont_back{height: 58%;} #adult_main_toon .adult_main_toon_cont ul li .nobel_txt{font-size: 1.1em; min-height: 75px; position:absolute; padding: 10px 5px 15px;} } @media screen and (orientation:landscape)and (max-width:1024px){ #adult_main_toon .swiper-adult_main_toon{display:none;} #adult_main_toon .swiper-adult_main_toon2{display:block;} #adult_main_toon .adult_main_toon_cont ul li{width: 30% !important; height: 260px;} #adult_main_toon .adult_main_toon_cont ul li .nobel_txt{font-size: 1.1em; min-height: 75px; position:absolute; padding: 10px 5px 15px;} #adult_main_toon .adult_main_toon_cont ul{margin-left: -31%;} #adult_main_toon .adult_main_toon_cont ul li a .today_cont_back {height: 65%;} } @media screen and (orientation:landscape)and (max-width:970px){ #adult_main_toon .swiper-adult_main_toon{display:none;} #adult_main_toon .swiper-adult_main_toon2{display:block;} #adult_main_toon .adult_main_toon_cont ul li{width: 30% !important; height: 260px;} #adult_main_toon .adult_main_toon_cont ul li .nobel_txt{font-size: 1.1em; min-height: 75px; position:absolute; padding: 10px 5px 15px;} #adult_main_toon .adult_main_toon_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (max-width:780px){ #adult_main_toon .swiper-adult_main_toon{display:none;} #adult_main_toon .swiper-adult_main_toon2{display:block;} #adult_main_toon .adult_main_toon_cont ul li{width: 30% !important; height: 210px;} #adult_main_toon .adult_main_toon_cont ul li .nobel_txt{font-size: 1em; min-height: 65px;} #adult_main_toon .adult_main_toon_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (max-width:667px){ #adult_main_toon .swiper-adult_main_toon{display:none;} #adult_main_toon .swiper-adult_main_toon2{display:block;} #adult_main_toon .adult_main_toon_cont ul li{width: 30% !important; height: 210px;} #adult_main_toon .adult_main_toon_cont ul li .nobel_txt{font-size: 1em; min-height: 50px; position:absolute;} #adult_main_toon .adult_main_toon_cont ul{margin-left: -31%;} #adult_main_toon .adult_main_toon_cont ul li a .today_cont_back{height: 92%;} } @media screen and (orientation:landscape) and (max-width:500px){ #adult_main_toon .adult_main_toon_cont ul li a .today_cont_back{height: 95%;} #adult_main_toon .adult_main_toon_cont ul li{height:180px;} #adult_main_toon .adult_main_toon_cont ul li .nobel_txt{position: absolute; font-size: 0.9em; min-height: 50px; padding: 5px 5px 5px;} } @media (min-width: 1251px){ #adult_main_toon{width: 99%; margin: 10px 0.5%;} #adult_main_toon .swiper-adult_main_toon2{width: 98%;} #adult_main_toon .swiper-adult_main_toon2 .swiper-wrapper{margin-left:-34.7%;} } /* 성인 메인 포토툰 */ /* 성인 메인 로맨스 */ #adult_main_romance{margin-bottom:30px;} #adult_main_romance a{color:#4e4e4e; font-weight: normal;} #adult_main_romance .adult_main_romance_cont{width:100%; max-width: 1250px;} #adult_main_romance .adult_main_romance_cont ul{float:left; margin-left:-26%;} #adult_main_romance .swiper-adult_main_romance2{display:none;} #adult_main_romance .swiper-adult_main_romance2 .swiper-wrapper{float:left; margin-left:-32%;} #adult_main_romance .adult_main_romance_cont ul li{float:left; width:42% !important; height:215px; border-radius:5px; overflow:hidden; border:1px solid #ddd;} #adult_main_romance .adult_main_romance_cont ul li img{width:100%; display:block;} #adult_main_romance .adult_main_romance_cont ul li .novel_img{position:absolute; top:0; left:0; right:0;} #adult_main_romance .adult_main_romance_cont ul li a{display:block; height:100%; position:relative; width:100%;} #adult_main_romance .adult_main_romance_cont ul li p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;letter-spacing: -0.09em;} #adult_main_romance .adult_main_romance_cont ul li .nobel_txt{position:absolute; bottom:0; left:0; background:#fff; font-size:1.0em; width:100%; text-align:center; padding:10px 5px 15px; min-height:70px;} #adult_main_romance .adult_main_romance_cont ul li .nobel_title{display:block; font-weight:bold; font-size:1.1em; margin-bottom:7px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #adult_main_romance .adult_main_romance_cont ul li a .today_cont_back{position:absolute;top:0; left:0; right:0; height:100%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #adult_main_romance .adult_main_romance_cont ul li .up_nobel_main{width:35%; position:absolute; top:0; left:0;} #adult_main_romance .adult_main_romance_cont ul li .icon_19_patch{width:22px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99; left: auto; top: auto;} #adult_main_romance .adult_main_romance_cont ul li .patch_box{width:100%; position:absolute; top:0; right:5px; z-index: 9; text-align: right;} #adult_main_romance .adult_main_romance_cont ul li .patch_box>img{width: 35px; display:inline-block; vertical-align: top; margin-left:3px;} #adult_main_romance .adult_main_romance_cont ul li .patch_box .patch{width:25%; min-width:30px; max-width: 40px;} .adult_main_romance {width: 100%; height: 100%; margin: 0 auto; overflow:hidden;} @media all and (min-width:320px) and (max-width:340px){ #adult_main_romance .adult_main_romance_cont ul li{height:200px;} } @media all and (min-width:436px) and (max-width:600px){ #adult_main_romance .adult_main_romance_cont ul li{height:300px; width:43% !important;} #adult_main_romance .adult_main_romance_cont ul li .nobel_txt{ position: absolute; min-height: 70px; padding:10px 5px 15px;} #adult_main_romance .adult_main_romance_cont ul li a .today_cont_back{height: 95%;} } @media all and (min-width:601px) and (max-width:810px){ #adult_main_romance .adult_main_romance_cont ul li{height:300px; width:43% !important;} #adult_main_romance .adult_main_romance_cont ul li .nobel_txt{font-size:1.2em; min-height: 96px; position: absolute; padding:10px 5px 15px;} #adult_main_romance .adult_main_romance_cont ul li p {padding-top: 3%;} #adult_main_romance .adult_main_romance_cont ul li a .today_cont_back{height: 63%;} } @media screen and (orientation:landscape)and (max-width:1600px){ #adult_main_romance .swiper-adult_main_romance {display: none;} #adult_main_romance .swiper-adult_main_romance2{display:block;} #adult_main_romance .adult_main_romance_cont ul li{width: 30% !important; height: 285px;} #adult_main_romance .adult_main_romance_cont ul li a .today_cont_back{height: 58%;} #adult_main_romance .adult_main_romance_cont ul li .nobel_txt{font-size: 1.1em; min-height:75px; position:absolute; padding: 10px 5px 15px;} } @media screen and (orientation:landscape)and (max-width:1024px){ #adult_main_romance .swiper-adult_main_romance{display:none;} #adult_main_romance .swiper-adult_main_romance2{display:block;} #adult_main_romance .adult_main_romance_cont ul li{width: 30% !important; height: 260px;} #adult_main_romance .adult_main_romance_cont ul li .nobel_txt{font-size: 1.1em; min-height:75px; position:absolute; padding: 10px 5px 15px;} #adult_main_romance .adult_main_romance_cont ul{margin-left: -31%;} #adult_main_romance .adult_main_romance_cont ul li a .today_cont_back {height: 65%;} } @media screen and (orientation:landscape)and (max-width:970px){ #adult_main_romance .swiper-adult_main_romance{display:none;} #adult_main_romance .swiper-adult_main_romance2{display:block;} #adult_main_romance .adult_main_romance_cont ul li{width: 30% !important; height: 260px;} #adult_main_romance .adult_main_romance_cont ul li .nobel_txt{font-size: 1.1em; min-height:75px; position:absolute; padding: 10px 5px 15px;} #adult_main_romance .adult_main_romance_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (max-width:780px){ #adult_main_romance .swiper-adult_main_romance{display:none;} #adult_main_romance .swiper-adult_main_romance2{display:block;} #adult_main_romance .adult_main_romance_cont ul li{width: 30% !important; height: 210px;} #adult_main_romance .adult_main_romance_cont ul li .nobel_txt{font-size: 1em; min-height:65px;} #adult_main_romance .adult_main_romance_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (max-width:667px){ #adult_main_romance .swiper-adult_main_romance{display:none;} #adult_main_romance .swiper-adult_main_romance2{display:block;} #adult_main_romance .adult_main_romance_cont ul li{width: 30% !important; height: 210px;} #adult_main_romance .adult_main_romance_cont ul li .nobel_txt{font-size: 1em; min-height: 50px; position:absolute;} #adult_main_romance .adult_main_romance_cont ul{margin-left: -31%;} #adult_main_romance .adult_main_romance_cont ul li a .today_cont_back{height: 92%;} } @media screen and (orientation:landscape) and (max-width:500px){ #adult_main_romance .adult_main_romance_cont ul li a .today_cont_back{height: 95%;} #adult_main_romance .adult_main_romance_cont ul li{height:180px;} #adult_main_romance .adult_main_romance_cont ul li .nobel_txt{position: absolute; font-size: 0.9em; min-height: 50px; padding: 5px 5px 5px;} } @media (min-width: 1251px){ #adult_main_romance{width: 99%; margin: 10px 0.5%;} #adult_main_romance .swiper-adult_main_romance2{width: 98%;} #adult_main_romance .swiper-adult_main_romance2 .swiper-wrapper{margin-left:-34.7%;} } /* 성인 메인 로맨스 */ /* 성인 메인 경험야설 */ .normal_real{float:left; width:100%;} .real_list{width:96%; margin:0 auto;} .real_list ul{overflow:hidden; width:100%; margin:0 auto;} .real_list li{width:100%; border-radius:5px; border:1px solid #ddd; background:#fff; letter-spacing:-0.09em; margin-top:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .real_list li a{display:block; width:100%; padding:7px 5px; overflow:hidden; font-weight:bold; position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .real_list li:nth-child(even){background:#f4f4f4;} .real_list li .real_title_box{float:left; width:60%;} .real_list li.top3 .real_title_box{float:left; width:70%;} .real_list li .real_title_box .rank{font-size:1.1em; font-style: italic; display:inline-block; width:10%; text-align:center;} .real_list li.top3 .real_title_box .rank{font-size:1.4em; font-style: italic; display:block; width:auto; margin-bottom:5px; text-align:left;} .real_list li .real_title_box .real_title{color:#676767; max-width:88%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:inline-block;} .real_list li.top3 .real_title_box .real_title{font-size:1.1em; color:#2c2c2c; max-width:100%;} .real_list li .real_tag_box{float:right; width:40%; margin-top: 2px;} .real_list li.top3 .real_tag_box{float:right; width:30%; margin-top: 2px;} .real_list li .real_tag_box .real_genre{display:inline-block; position:relative; padding-left:18px; float: right; color:#676767;} .real_list li .real_tag_box .real_genre img{width:15px; position:absolute; top:0; left:0; bottom:0; margin:auto;} .real_list li .real_tag_box .heart{font-weight:normal; margin-right:5px; float:right; color: var(--bg-fc-color); padding-left:17px; background: url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 25%; background-size: 13px 11px;} .real_list li.top3 .real_tag_box .heart{position: absolute; bottom: 7px; right: 5px; color: var(--bg-fc-color); padding-left:17px; margin-right:0;} @media all and (min-width:320px) and (max-width:350px){ .real_list li{font-size: 0.9em;} } @media all and (min-width:590px) and (max-width:810px){ .real_list li{width:49%; margin:5px 0.5% 0; float:left;} .real_list li.top3{width:99%; margin:5px 0.5% 0;} .real_list li .real_title_box .rank{display:block; text-align:left; margin-bottom: 5px;} .real_list li .real_tag_box .heart{position: absolute; bottom: 7px; right: 5px; margin-right:0;} } @media screen and (orientation:landscape) and (min-width:560px){ .real_list li{width:49%; margin:5px 0.5% 0; float:left;} .real_list li.top3{width:99%; margin:5px 0.5% 0;} .real_list li .real_title_box .rank{display:block; text-align:left; margin-bottom: 5px;} .real_list li .real_tag_box .heart{position: absolute; bottom: 7px; right: 5px; margin-right:0;} } @media screen and (orientation:landscape) and (min-width:960px){ .real_list li{width:32.3%; margin:5px 0.5% 0; float:left;} .real_list{width: 95%;} .normal_real{float:left; width:50%;} .normal_real li{width:99%; margin:5px 0.5% 0; float:left;} .normal_real .real_list li a{padding:5px;} .normal_real .real_list li.top3 .real_title_box .rank{font-size: 1.2em;} } @media screen and (orientation:landscape) and (min-width:1200px){ .real_list{width: 98%;} } @media screen and (orientation:landscape) and (max-width:800px){ .normal_real{float:left; width:100%;} } /* 성인 메인 경험야설 */ /* 성인메인 */ /* 웹툰메인 */ /* 웹툰 메인 연재 */ #content_wrap #today.webtoon_today{padding-top:0; margin-top:0; width:100% !important;} #today .webtoon_today_tab{width:100%; border-bottom:1px solid #ddd; position:relative; margin:0 auto 1px; overflow:hidden; font-size: 0.95em; font-weight: normal;} #today .webtoon_today_tab ul{float:left; width:100%; background:#fff;overflow:hidden;} #today .webtoon_today_tab li{float:left; width:12.5%; text-align:center;} #today .webtoon_today_tab li a{font-size:15px; display:block; padding:12px 0 8px; font-weight:normal; color:#4e4e4e;} /* 2017-09-20 수정 */ #today .webtoon_today_tab li .on{color:#E84D7D;} #today .webtoon_today_tab .on_line{ position:absolute; bottom:0; width:12.5%; border:1px solid var(--bg-fc-color); display:none;} #today #today_webtoon{position: relative;} #today #today_webtoon ul{box-shadow: none; margin: 5px 0 0;} #today #today_webtoon li{padding: 0px 0 10px;} #today #today_webtoon li div{display: block; width: 96%; position: relative; overflow: hidden; border-radius: 6px; padding: 0; margin: 0 auto; background: #fff; border-width: thin; color: #333; border: 1px solid #ddd; font-size: 1.05em; letter-spacing: -0.09em;} #today #today_webtoon li div a{display: block; height: 100%; overflow: hidden; margin: auto; left: 0; right: 0; width: 100%; z-index: 99;} #today #today_webtoon li .today_img_box{margin: 0; float: left; max-width: 45%; max-height: none; position: relative; border-radius: 0; border: 0;} #today #today_webtoon li img{width: 100%; display: block;} #today #today_webtoon li .blurcover{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #today #today_webtoon li .img_backbox{position: absolute; top: 0; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #today #today_webtoon li div .patch_box{position: absolute; top: 0; right: 5px; z-index: 9; text-align: right; background: none; border: none; border-radius: 0; height: auto; width: auto; letter-spacing: 0; font-size: 0;} #today #today_webtoon li div#list19_blind{position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; background: #fff; z-index: 100; width: 100%; border: none; border-radius: 0;} #today #today_webtoon li div#list19_blind>div{width: 100%; height: 100%; position: relative; border: none; border-radius: 0;} #today #today_webtoon li div#list19_blind .list19_blind_mark{width: 70%; max-width: 180px; position: absolute; top: 0; bottom:0; right: 0; left: 0; margin: auto;} #today #today_webtoon li .today_img_box .icon_19_patch{width: 22px !important; position: absolute; bottom: 5px; right: 5px; z-index: 99;} #today #today_webtoon li .novel_img{position: absolute; top: 0; left: 0; right: 0; border-radius: 0; width: 100%; border: none; bottom: 0;} #today #today_webtoon li .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center !important;} #today #today_webtoon li p{padding-top: 5px; font-size: 1em; width: 55%; float: right; letter-spacing: -0.09em;} #today #today_webtoon li span{display: block; white-space: normal; padding: 0 10px; font-size: 1em; margin-top: 5px;} #today #today_webtoon li .content_tag{bottom:0px; padding:0;} #today #today_webtoon li .content_tag .content_tag_toon {display: block; float: left; width: auto; z-index: 101; background: #fff; border-radius: 5px; font-size: 12px; padding: 1px 2px 0px; line-height: 1.3; letter-spacing: -0.05em; margin-right: 3px;} #today #today_webtoon li .on{position: relative;} #today #today_webtoon li .on .heart{font-size: 1.0em; padding-left: 25px; background: url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 75%; background-size:13px 11px; color: var(--bg-fc-color);} #today #today_webtoon li .title{font-weight: bold; font-size: 1.1em; margin: 10px 0 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block;} #today #today_webtoon li span br{display: none;} #today #today_webtoon li .writer{margin: 5px 0; position: absolute; bottom: 5px; right: 0px; max-width: 45%; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #today .today_webtoon_more{width: 100%; float: left;} #today .today_webtoon_more a{width: 96%; display: block; text-align: center; color: var(--bg-fc-color); background: #fff; padding: 9px 0 8px; font-size: 1.1em; border: 1px solid var(--bg-fc-color); border-radius: 5px; margin: 0px auto 5px; text-shadow: none; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #today .today_webtoon_more p{font-weight: bold; display: inline-block; margin-left: -3%;} #today .today_webtoon_more img{width: 16px; display: inline-block; position: absolute; top: 4px; bottom: 0; margin: auto; padding-left: 10px;} @media all and (min-width:320px) and (max-width:350px){ #today #today_webtoon li p>span{min-height: 50px; max-height: 100px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding:1px 10px;} #today #today_webtoon li .on .heart{margin-top:0;} #today #today_webtoon li .on{min-height:0;} #today #today_webtoon li .title{min-height:0; margin-top:5px;} #today #today_webtoon li .writer{min-height:0; display: inline-block;} } @media all and (min-width:320px) and (max-width:360px){ #today .webtoon_today_tab li a{font-size: 14px;} #today #today_webtoon li .today_img_box{width: 50%;} #today #today_webtoon li .title{font-size: 1.05em;} #today #today_webtoon li .writer{bottom:5px;} #today #today_webtoon li span{font-size: 0.95em;} } @media all and (min-width:435px) and (max-width:600px){ #today #today_webtoon li div{font-size:1.2em;} #today #today_webtoon li .today_img_box{width:50%;} #today #today_webtoon li p{font-size: 0.9em; margin-top: 2%;} #today #today_webtoon li .title{font-size: 1.1em;} #today #today_webtoon li span{font-size: 1em;} #today #today_webtoon li span br{display:block;} } @media all and (min-width:535px) and (max-width:600px){ #today #today_webtoon li div{font-size:1.1em;} #today #today_webtoon li .today_img_box{width:50%;} #today #today_webtoon li{width: 50%; float: left;} #today #today_webtoon li p{font-size: 0.9em; margin-top: 0; padding-top:0;} #today #today_webtoon li .title{font-size: 1.1em;} #today #today_webtoon li span{font-size: 1em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #today #today_webtoon{width: 98%; margin: 0 auto;} } @media all and (min-width:601px) and (max-width:810px){ #today #today_webtoon li{width: 50%; float: left;} #today #today_webtoon li .today_img_box{width:50%;} #today #today_webtoon li p{margin-top: 2%;} #today #today_webtoon li span{font-size: 1em; margin:0;} #today #today_webtoon li .title{margin: 3% 0;} #today #today_webtoon li .writer{font-size:1em; margin:0;} #today #today_webtoon li .on{font-size: 1em;} #today #today_webtoon li span br{display:block;} #today #today_webtoon{width: 98%; margin: 0 auto;} } @media all and (min-width:1000px){ #today #today_webtoon{width: 96%; margin: 5px auto; overflow: hidden;} #today #today_webtoon li{width: 33.3%; float: left;} #today #today_webtoon li p{font-size:0.9em;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #today #today_webtoon li{width: 50%; float: left;} #today #today_webtoon li p{margin:0; font-size: 0.9em;} #today #today_webtoon li .title{margin: 15px 0 5px;} #today #today_webtoon li .writer{bottom:10px;} } @media screen and (orientation:landscape) and (max-width:780px){ #today #today_webtoon li{width: 50%; float: left;} #today #today_webtoon li p{margin:0; margin-top: 2%; font-size: 0.9em;} #today #today_webtoon li .title{margin: 15px 0 5px;} #today #today_webtoon li .writer{bottom:10px;} } @media screen and (orientation:landscape) and (max-width:667px){ #today #today_webtoon li{width: 50%; float: left;} #today #today_webtoon li p{margin:0; font-size: 0.9em;} #today #today_webtoon li .title{margin: 15px 0 5px;} #today #today_webtoon li .writer{bottom:10px;} } @media screen and (orientation:landscape) and (max-width:570px){ #today #today_webtoon li .writer{bottom: 5px;} #today #today_webtoon li .title{margin: 5px 0 5px;} #today #today_webtoon li span{font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #today #today_webtoon li span br{display:none;} } @media screen and (orientation:landscape) and (max-width:480px){ #today #today_webtoon li{width: 100%; float: left;} #today #today_webtoon li p{margin:0; font-size: 0.8em; padding: 15px 0;} #today #today_webtoon li .title{padding:7px 10px 10px;} #today #today_webtoon li .writer{bottom: 5px;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #today #today_webtoon{width: 96%; margin: 5px auto; overflow: hidden;} #today #today_webtoon li{width: 49%; float: left; margin: 0 0.5%;} #today #today_webtoon li div{width:100%; /* height: 220px; */} #today #today_webtoon li p{margin-top: 5%; font-size: 1.15em; margin-top: 3%;} #today #today_webtoon li .title{margin: 15px 0 25px;} } @media all and (min-width:601px) and (max-width:810px){ #today #today_webtoon li div .patch{max-width:45px;} #today #today_webtoon li .writer {bottom: 5%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #today #today_webtoon li p{font-size:1em; margin-top: 2%;} #today #today_webtoon li .title{margin: 10px 0 15px;} } @media screen and (orientation:landscape) and (max-width:500px){ #today #today_webtoon li span {font-size: 1em;} #today #today_webtoon li .title {margin: 7px 0 0px;} #today #today_webtoon li span{margin-top: 2px;} } @media all and (min-width:1300px){ #today #today_webtoon{width: 96%; margin: 5px auto; overflow: hidden;} #today #today_webtoon li{width: 32.3%; float: left; margin: 0 0.5%;} #today #today_webtoon li div{width:100%;} #today #today_webtoon li p{margin-top: 3%;} #today #today_webtoon li .title{margin: 15px 0 25px;} } /* 웹툰 메인 연재 */ /* 웹툰 메인 장르 */ #content_wrap #main_webtoon_genre.webtoon_genre{padding-top:7px; margin-top:0; width:100% !important;} #main_webtoon_genre .webtoon_genre_tab{width:96%; border:1px solid #ddd; background:#fff; border-radius:5px; position:relative; margin:0 auto; overflow:hidden; font-size: 0.95em; font-weight: normal;} #main_webtoon_genre .webtoon_genre_tab>div{width:100%; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch;} #main_webtoon_genre .webtoon_genre_tab ul{padding:0 15px; white-space: nowrap; margin: 0 auto; overflow: visible; vertical-align: top; position: relative; display: table;} #main_webtoon_genre .webtoon_genre_tab li{width:200px; text-align:center; display: table-cell; white-space: nowrap;} #main_webtoon_genre .webtoon_genre_tab li a{font-size:15px; display:block; letter-spacing:-0.05em; padding:10px 8px 8px; font-weight:normal; color:#4e4e4e;} #main_webtoon_genre .webtoon_genre_tab li .on{color:var(--bg-fc-color); border-bottom:2px solid var(--bg-fc-color);} #main_webtoon_genre .webtoon_genre_tab .on_line{ position:absolute; bottom:0; width:12.5%; border:1px solid var(--bg-fc-color); display:none;} #main_webtoon_genre .webtoon_genre_tab:before{display:block; width:15px; content:""; z-index:9; position:absolute; top:0; bottom:0; margin:auto; left:0; background:url(https://cdn.metoon.co.kr/mimg/chall_grad_left.png) no-repeat 100% 0;} #main_webtoon_genre .webtoon_genre_tab:after{display:block; width:15px; content:""; z-index:9; position:absolute; top:0; bottom:0; margin:auto; right:0; background:url(https://cdn.metoon.co.kr/mimg/chall_grad_right.png) no-repeat 0 0;} #main_webtoon_genre #webtoon_genre{position: relative;} #main_webtoon_genre #webtoon_genre ul{box-shadow: none; margin: 10px 0 0;} #main_webtoon_genre #webtoon_genre li{padding: 0px 0 10px;} #main_webtoon_genre #webtoon_genre li div{display: block; width: 96%; position: relative; overflow: hidden; border-radius: 6px; padding: 0; margin: 0 auto; background: #fff; border-width: thin; color: #333; border: 1px solid #ddd; font-size: 1.05em; letter-spacing: -0.09em;} #main_webtoon_genre #webtoon_genre li div a{display: block; height: 100%; overflow: hidden; margin: auto; left: 0; right: 0; width: 100%; z-index: 99;} #main_webtoon_genre #webtoon_genre li .img_box{margin: 0; float: left; max-width: 45%; max-height: none; position: relative; border-radius: 0; border: 0;} #main_webtoon_genre #webtoon_genre li img{width: 100%; display: block;} #main_webtoon_genre #webtoon_genre li .img_backbox{position: absolute; top: 0; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_webtoon_genre #webtoon_genre li div .patch_box{position: absolute; top: 0; right: 5px; z-index: 9; text-align: right; background: none; border: none; border-radius: 0; height: auto; width: auto; letter-spacing: 0; font-size: 0;} #main_webtoon_genre #webtoon_genre li .img_box .icon_19_patch{width: 22px !important; position: absolute; bottom: 5px; right: 5px; z-index: 99;} #main_webtoon_genre #webtoon_genre li .novel_img{position: absolute; top: 0; left: 0; right: 0; border-radius: 0; width: 100%; border: none; bottom: 0;} #main_webtoon_genre #webtoon_genre li .blurcover{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #main_webtoon_genre #webtoon_genre li .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center !important;} #main_webtoon_genre #webtoon_genre li p{padding-top: 5px; font-size: 1em; width: 55%; float: right; letter-spacing: -0.09em;} #main_webtoon_genre #webtoon_genre li span{display: block; white-space: normal; padding: 0 10px; font-size: 1em; margin-top: 5px;} #main_webtoon_genre #webtoon_genre li .on{position: relative;} #main_webtoon_genre #webtoon_genre li .on .heart{font-size: 1.0em; padding-left: 25px; background: url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 75%; background-size:13px 11px; color: var(--bg-fc-color);} #main_webtoon_genre #webtoon_genre li .title{font-weight: bold; font-size: 1.1em; margin: 10px 0 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block;} #main_webtoon_genre #webtoon_genre li span br{display: none;} #main_webtoon_genre #webtoon_genre li .writer{margin: 5px 0; position: absolute; bottom: 5px; right: 0px; max-width: 45%; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #main_webtoon_genre .genre_webtoon_more{width: 100%; float: left;} #main_webtoon_genre .genre_webtoon_more a{width: 96%; display: block; text-align: center; color: var(--bg-fc-color); background: #fff; padding: 9px 0 8px; font-size: 1.1em; border: 1px solid var(--bg-fc-color); border-radius: 5px; margin: 0px auto 5px; text-shadow: none; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #main_webtoon_genre .genre_webtoon_more p{font-weight: bold; display: inline-block; margin-left: -3%;} #main_webtoon_genre .genre_webtoon_more img{width: 16px; display: inline-block; position: absolute; top: 4px; bottom: 0; margin: auto; padding-left: 10px;} @media all and (min-width:320px) and (max-width:350px){ #main_webtoon_genre #webtoon_genre li p>span{min-height: 50px; max-height: 100px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding:1px 10px;} #main_webtoon_genre #webtoon_genre li .on .heart{margin-top:0;} #main_webtoon_genre #webtoon_genre li .on{min-height:0;} #main_webtoon_genre #webtoon_genre li .title{min-height:0; margin-top:5px;} #main_webtoon_genre #webtoon_genre li .writer{min-height:0; display: inline-block;} } @media all and (min-width:320px) and (max-width:360px){ #main_webtoon_genre .webtoon_genre_tab li a{font-size: 14px;} #main_webtoon_genre #webtoon_genre li .img_box{width: 50%;} #main_webtoon_genre #webtoon_genre li .title{font-size: 1.05em;} #main_webtoon_genre #webtoon_genre li .writer{bottom:5px;} #main_webtoon_genre #webtoon_genre li span{font-size: 0.95em;} } @media all and (min-width:435px) and (max-width:600px){ #main_webtoon_genre #webtoon_genre li div{font-size:1.2em;} #main_webtoon_genre #webtoon_genre li .img_box{width:50%;} #main_webtoon_genre #webtoon_genre li p{font-size: 0.9em; margin-top: 2%;} #main_webtoon_genre #webtoon_genre li .title{font-size: 1.1em;} #main_webtoon_genre #webtoon_genre li span{font-size: 1em;} #main_webtoon_genre #webtoon_genre li span br{display:block;} } @media all and (min-width:535px) and (max-width:600px){ #main_webtoon_genre #webtoon_genre li div{font-size:1.1em;} #main_webtoon_genre #webtoon_genre li .img_box{width:50%;} #main_webtoon_genre #webtoon_genre li{width: 50%; float: left;} #main_webtoon_genre #webtoon_genre li p{font-size: 0.9em; margin-top: 0; padding-top:0;} #main_webtoon_genre #webtoon_genre li .title{font-size: 1.1em;} #main_webtoon_genre #webtoon_genre li span{font-size: 1em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #main_webtoon_genre #webtoon_genre{width: 98%; margin: 0 auto;} } @media all and (min-width:601px) and (max-width:810px){ #main_webtoon_genre #webtoon_genre li{width: 50%; float: left;} #main_webtoon_genre #webtoon_genre li .img_box{width:50%;} #main_webtoon_genre #webtoon_genre li p{margin-top: 2%;} #main_webtoon_genre #webtoon_genre li span{font-size: 1em; margin:0;} #main_webtoon_genre #webtoon_genre li .title{margin: 3% 0;} #main_webtoon_genre #webtoon_genre li .writer{font-size:1em; margin:0;} #main_webtoon_genre #webtoon_genre li .on{font-size: 1em;} #main_webtoon_genre #webtoon_genre li span br{display:block;} #main_webtoon_genre #webtoon_genre{width: 98%; margin: 0 auto;} } @media all and (min-width:1000px){ #main_webtoon_genre #webtoon_genre{width: 96%; margin: 5px auto; overflow: hidden;} #main_webtoon_genre #webtoon_genre li{width: 33.3%; float: left;} #main_webtoon_genre #webtoon_genre li p{font-size:0.9em;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #main_webtoon_genre #webtoon_genre li{width: 50%; float: left;} #main_webtoon_genre #webtoon_genre li p{margin:0; font-size: 0.9em;} #main_webtoon_genre #webtoon_genre li .title{margin: 15px 0 5px;} #main_webtoon_genre #webtoon_genre li .writer{bottom:10px;} } @media screen and (orientation:landscape) and (max-width:780px){ #main_webtoon_genre #webtoon_genre li{width: 50%; float: left;} #main_webtoon_genre #webtoon_genre li p{margin:0; margin-top: 2%; font-size: 0.9em;} #main_webtoon_genre #webtoon_genre li .title{margin: 15px 0 5px;} #main_webtoon_genre #webtoon_genre li .writer{bottom:10px;} } @media screen and (orientation:landscape) and (max-width:667px){ #main_webtoon_genre #webtoon_genre li{width: 50%; float: left;} #main_webtoon_genre #webtoon_genre li p{margin:0; font-size: 0.9em;} #main_webtoon_genre #webtoon_genre li .title{margin: 15px 0 5px;} #main_webtoon_genre #webtoon_genre li .writer{bottom:10px;} } @media screen and (orientation:landscape) and (max-width:570px){ #main_webtoon_genre #webtoon_genre li .writer{bottom: 5px;} #main_webtoon_genre #webtoon_genre li .title{margin: 5px 0 5px;} #main_webtoon_genre #webtoon_genre li span{font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #main_webtoon_genre #webtoon_genre li span br{display:none;} } @media screen and (orientation:landscape) and (max-width:480px){ #main_webtoon_genre #webtoon_genre li{width: 100%; float: left;} #main_webtoon_genre #webtoon_genre li p{margin:0; font-size: 0.8em; padding: 15px 0;} #main_webtoon_genre #webtoon_genre li .title{padding:7px 10px 10px;} #main_webtoon_genre #webtoon_genre li .writer{bottom: 5px;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #main_webtoon_genre #webtoon_genre{width: 96%; margin: 5px auto; overflow: hidden;} #main_webtoon_genre #webtoon_genre li{width: 49%; float: left; margin: 0 0.5%;} #main_webtoon_genre #webtoon_genre li div{width:100%; /* height: 220px; */} #main_webtoon_genre #webtoon_genre li p{margin-top: 5%; font-size: 1.15em; margin-top: 3%;} #main_webtoon_genre #webtoon_genre li .title{margin: 15px 0 25px;} } @media all and (min-width:601px) and (max-width:810px){ #main_webtoon_genre #webtoon_genre li div .patch{max-width:45px;} #main_webtoon_genre #webtoon_genre li .writer {bottom: 5%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #main_webtoon_genre #webtoon_genre li p{font-size:1em; margin-top: 2%;} #main_webtoon_genre #webtoon_genre li .title{margin: 10px 0 15px;} } @media screen and (orientation:landscape) and (max-width:500px){ #main_webtoon_genre #webtoon_genre li span {font-size: 1em;} #main_webtoon_genre #webtoon_genre li .title {margin: 7px 0 0px;} #main_webtoon_genre #webtoon_genre li span{margin-top: 2px;} } @media all and (min-width:1300px){ #main_webtoon_genre #webtoon_genre{width: 96%; margin: 5px auto; overflow: hidden;} #main_webtoon_genre #webtoon_genre li{width: 32.3%; float: left; margin: 0 0.5%;} #main_webtoon_genre #webtoon_genre li div{width:100%;} #main_webtoon_genre #webtoon_genre li p{margin-top: 3%;} #main_webtoon_genre #webtoon_genre li .title{margin: 15px 0 25px;} } /* 웹툰 메인 장르 */ /* 웹툰 메인 일본만화 */ #main_japan_toon{padding: 0; padding-top:7px; position: relative; margin: 0 auto; width: auto !important;} #main_japan_toon .main_japan_toon_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #main_japan_toon .main_japan_toon_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_japan_toon .main_japan_toon_wrap li{float: none; display: inline-block; border: 1px solid #ddd; border-radius: 5px; width: 180px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #main_japan_toon .main_japan_toon_wrap li:last-child{margin-right:10px !important;} #main_japan_toon .main_japan_toon_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; border-radius: 5px; padding-bottom:30px;} #main_japan_toon .main_japan_toon_wrap .patch_box{position:absolute; top:0; right:5px; text-align:center; z-index:15;} #main_japan_toon .main_japan_toon_wrap .patch_box img{display:inline-block; width:35px;} #main_japan_toon .main_japan_toon_wrap .img_box{width: 100%; position: relative;} #main_japan_toon .main_japan_toon_wrap .img_box img{display: block; width: 100%; border-radius:0 0 5px 5px;} #main_japan_toon .main_japan_toon_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0; border-radius:3px;} #main_japan_toon .main_japan_toon_wrap .img_box .blurcover{position:absolute; top:-20%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #main_japan_toon .main_japan_toon_wrap .img_box .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center 25% !important;} #main_japan_toon .main_japan_toon_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_japan_toon .main_japan_toon_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-radius:0 0 5px 5px;} #main_japan_toon .main_japan_toon_wrap .nobel_txt .content_tag{width: auto; left: 5px; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #main_japan_toon .main_japan_toon_wrap .nobel_txt img.icon_19_patch{width:22px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} #main_japan_toon .main_japan_toon_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #main_japan_toon .main_japan_toon_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* 웹툰 메인 일본만화 */ /* 웹툰 메인 국내만화 */ #main_korea_toon{padding: 0; position: relative; margin: 0 auto; width: auto !important;} #main_korea_toon .main_korea_toon_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #main_korea_toon .main_korea_toon_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_korea_toon .main_korea_toon_wrap li{float: none; display: inline-block; border: 1px solid #ddd; border-radius: 5px; width: 180px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #main_korea_toon .main_korea_toon_wrap li:last-child{margin-right:10px !important;} #main_korea_toon .main_korea_toon_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; border-radius: 5px; padding-bottom:30px;} #main_korea_toon .main_korea_toon_wrap .patch_box{position:absolute; top:0; right:5px; text-align:center; z-index:15;} #main_korea_toon .main_korea_toon_wrap .patch_box img{display:inline-block; width:35px;} #main_korea_toon .main_korea_toon_wrap .img_box{width: 100%; position: relative;} #main_korea_toon .main_korea_toon_wrap .img_box img{display: block; width: 100%; border-radius:0 0 5px 5px;} #main_korea_toon .main_korea_toon_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0; border-radius:3px;} #main_korea_toon .main_korea_toon_wrap .img_box .blurcover{position:absolute; top:-20%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #main_korea_toon .main_korea_toon_wrap .img_box .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center 25% !important;} #main_korea_toon .main_korea_toon_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_korea_toon .main_korea_toon_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-radius:0 0 5px 5px;} #main_korea_toon .main_korea_toon_wrap .nobel_txt .content_tag{width: auto; left: 5px; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #main_korea_toon .main_korea_toon_wrap .nobel_txt img.icon_19_patch{width:22px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} #main_korea_toon .main_korea_toon_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #main_korea_toon .main_korea_toon_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* 웹툰 메인 국내만화 */ /* 웹툰메인 */ /* 레이어 */ /* 코인레이어 공통 */ #layer_body{width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; display:none;} #layer_body .layer_wrap{width:100%; height:100%; position:relative; letter-spacing:-0.09em;} #layer_body .layer_box h3{text-align:center; font-size:1.7em; font-weight:800; color:#2c2c2c; padding-top:85px;} #layer_body .layer_cont{width:100%; overflow:scroll; }/* 2017-11-08 수정 */ #layer_body .layer_cont p{width:100%; text-align:center; font-size:1.2em; color:#676767; padding-top:25px; line-height:1.3;} #layer_body .layer_cont .txt_1line{padding-top:18px;} #layer_body .layer_cont span{color:#e84d7d;} #layer_body .layer_btn{width:100%;position: relative; margin-top:10px; text-align: center;} #layer_body .layer_btn a{display:inline-block; text-align:center; min-width:120px; padding:8px 10px; font-size:1.1em; color:var(--main-ft-color); font-weight:bold; border-radius:5px; text-shadow:none; } /* #layer_body .layer_btn .ok{background:#e84d7d; margin-right:13px; margin-top:5px;} #layer_body .layer_btn .coin{background:#e84d7d; margin-right:13px;}pink버전 */ #layer_body .layer_btn .ok{background:#d52b2c; margin-right:13px; margin-top:5px;} #layer_body .layer_btn .coin{background:#d52b2c; margin-right:13px;}/* white버전 */ #layer_body .layer_btn .cancle{background:#56606b;} #layer_body .layer_bg{width:100%; height:100%; background:url(https://cdn.metoon.co.kr/img/tm_img_back.png); position:absolute; top:0; left:0;} /* 코인레이어 공통 */ /* 코인소진 레이어 */ #layer_body_coin{width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; display:none;} #layer_body_coin .layer_wrap{width:100%; height:100%; position:relative; letter-spacing:-0.09em;} #layer_body_coin .layer_box h3{text-align:center; font-size:1.7em; font-weight:700; color:#2c2c2c; padding-top:85px;} #layer_body_coin .layer_cont{width:100%; } #layer_body_coin .layer_cont p{width:100%; text-align:center; font-size:1.2em; color:#676767; padding-top:25px; line-height:1.3;} #layer_body_coin .layer_cont .txt_1line{padding-top:18px;} #layer_body_coin .layer_cont span{color:#e84d7d;} #layer_body_coin .layer_btn{width:100%;position: relative; margin-top:10px; text-align: center;} #layer_body_coin .layer_btn a{display:inline-block; text-align:center; min-width:120px; padding:10px 15px; font-size:1.3em; color:var(--main-ft-color); font-weight:bold; border-radius:5px; text-shadow:none; } /* #layer_body_coin .layer_btn .ok{background:#e84d7d; margin-right:13px; margin-top:5px;} #layer_body_coin .layer_btn .coin{background:#e84d7d; margin-right:13px;}pink버전 */ #layer_body_coin .layer_btn .ok{background:#d52b2c; margin-right:13px; margin-top:5px;} #layer_body_coin .layer_btn .coin{background:#d52b2c; margin-right:13px;}/* white버전 */ #layer_body_coin .layer_btn .cancle{background:#56606b;} #layer_body_coin .layer_bg{width:100%; height:100%; /* background:url(https://cdn.metoon.co.kr/img/tm_img_back.png); */background-color:rgba(0, 0, 0, 0.6); position:absolute; top:0; left:0;} #layer_body_coin .layer_coin_useup{display:none; width:95%; max-width:380px; min-height:260px; background:url(https://cdn.metoon.co.kr/mimg/bg_layer_black.png) no-repeat; position:absolute; top:15%; left:0; right:0; margin:auto; z-index:999; background-size:100%;background-color:#FFFFFF;border-radius:7px;color:#141414;} #layer_body_coin .layer_coin_lack .layer_coin_useup{margin-top: 30px;} #layer_body_coin .layer_coin_useup form{text-align:center; margin-top:10px; margin-left:-5px;} #layer_body_coin .layer_coin_useup form input{margin-right: 5px;} #layer_body_coin .layer_coin_useup form label{vertical-align: middle;} #layer_body_coin .layer_coin_useup .close_btn{display: block; position: absolute; top: -30px; right: 5px; width: 25px; height: 25px; background: url(https://cdn.metoon.co.kr/mimg/log_pop_X.png) no-repeat;} @media all and (min-width:320px) and (max-width:350px){ #layer_body_coin .layer_btn{margin-top:5px;} } /* 코인소진 레이어 */ /* 코인부족 레이어 */ #layer_body_coin .layer_coin_lack .layer_btn{width:100%;position: relative; margin-top:15px; text-align: center;} #layer_body_coin .layer_coin_lack .layer_btn a{display:inline-block; text-align:center; min-width:95px; padding:10px 15px; font-size:1.1em; color:var(--main-ft-color); font-weight:bold; border-radius:5px; text-shadow:none; } /* #layer_body_coin .layer_coin_lack .layer_btn .ok{background:#e84d7d; margin-right:13px; margin-top:5px;} #layer_body_coin .layer_coin_lack .layer_btn .coin{background:#e84d7d; margin-right:13px;}pink버전 */ #layer_body_coin .layer_coin_lack .layer_btn .ok{background:#d52b2c; margin-right:13px; margin-top:5px;} #layer_body_coin .layer_coin_lack .layer_btn .coin{background:#d52b2c; margin-right:13px;}/* white버전 */ #layer_body_coin .layer_coin_lack .layer_btn .cancle{background:#56606b;} #layer_body_coin .layer_coin_lack{display:none; width:95%; max-width:380px; min-height:260px; background:url(https://cdn.metoon.co.kr/mimg/bg_layer_black.png) no-repeat; position:absolute; top:15%; left:0; right:0; margin:auto; z-index:999; background-size:100%;} #layer_body_coin .layer_coin_lack{margin-top: 30px;} #layer_body_coin .layer_coin_lack form{text-align:center; margin-top:10px; margin-left:-5px;} #layer_body_coin .layer_coin_lack form input{margin-right: 5px;} #layer_body_coin .layer_coin_lack form label{vertical-align: middle;} #layer_body_coin .layer_coin_lack .close_btn{display: block; position: absolute; top: -30px; right: 5px; width: 25px; height: 25px; background: url(https://cdn.metoon.co.kr/mimg/log_pop_X.png) no-repeat;} /* 코인부족 레이어 */ /* 오픈준비중 레이어 */ #layer_body_lack{width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; display:block;} #layer_body_lack .layer_wrap_lack{width:100%; height:100%; position:relative; letter-spacing:-0.09em;} #layer_body_lack .layer_box h3{text-align:center; font-size:1.7em; font-weight:800; color:#2c2c2c; padding-top:95px; padding-bottom:5px;} #layer_body_lack .layer_coin_lack{width:95%; max-width:380px; min-height:260px; background:url(https://cdn.metoon.co.kr/mimg/bg_layer_open.png) no-repeat; position:absolute; top:15%; left:0; right:0; margin:auto; z-index:999; background-size:100%;border-radius: 5px;} #layer_body_lack .layer_cont p{width:100%; text-align:center; font-size:1em; color:#676767; padding-top:25px; line-height:1.3;} #layer_body_lack .layer_coin_lack .layer_btn{margin-top: 25px;text-align:center;} #layer_body_lack .layer_coin_lack .layer_cont .txt_1line{padding-top:12px;} #layer_body_lack .layer_btn a{display:inline-block; text-align:center; min-width:120px; padding:10px 15px; font-size:1.3em; color:var(--main-ft-color); font-weight:bold; border-radius:5px; text-shadow:none; margin:0 auto;} #layer_body_lack .layer_btn .cancle{background:#56606b;} #layer_body_lack .layer_bg{width:100%; height:100%; background:url(https://cdn.metoon.co.kr/img/tm_img_back.png); position:absolute; top:0; left:0;} /* 오픈준비중 레이어 */ /* 오픈포인트 레이어 */ #layer_body_point{width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; display:block;} #layer_body_point .layer_wrap_point{width:100%; height:100%; position:relative; letter-spacing:-0.09em;} #layer_body_point .layer_box{position:relative;} #layer_body_point .layer_coin_point{width:301px; position:absolute; top:14%; left:0; right:0; margin:auto; z-index:999;} #layer_body_point .layer_coin_point img{display:block;} #layer_body_point .layer_cont>a{width:211px; position:absolute; bottom:85px; left:0; right:0; margin:auto; display:inline-block; text-align:center;} #layer_body_point .layer_cont>a img{margin:0 auto;} #layer_body_point .layer_cont ul{width:100%; position:absolute; bottom:0px; left:0; text-align:center;} #layer_body_point .layer_cont ul li{display:inline-block; width:50%; float:left;font-size: 1.2em; font-weight: 800; padding:18px 0; cursor:pointer;} #layer_body_point .layer_cont ul a{color: #676767; letter-spacing:-0.1em;} #layer_body_point .layer_cont ul li:hover a{color:#222} #layer_body_point .layer_bg{width:100%; height:100%; background:url(https://cdn.metoon.co.kr/mimg/tm_img_back_b.png); position:absolute; top:0; left:0;} @media all and (min-width:320px) and (max-width:350px){ #layer_body_point .layer_coin_point{top:5%;} #layer_body_coin .layer_box h3{font-size: 1.5em;} #layer_body_coin .layer_cont .txt_1line{padding-top: 13px;} #layer_body_coin .layer_cont{font-size: 0.9em;} #layer_body_coin .layer_btn .ok{padding: 8px 0; font-size: 1.1em;} } @media all and (min-width:320px) and (max-width:360px){ #layer_body_coin .layer_box h3{padding-top: 70px;} #layer_body_coin .layer_cont .txt_1line{padding-top: 10px;} #layer_body_coin .layer_btn .ok{font-size: 1.2em; padding: 9px 15px;} } /* 오픈포인트 레이어 */ /* 연재문의 레이어 */ #layer_body .layer_inquire_nobel{width:95%; max-width:380px; background:#fff; position:absolute; top:15%; left:0; right:0; margin:auto; z-index:999; border-radius:5px; overflow:scroll;}/* 2017-11-08 수정 */ #layer_body .layer_inquire_nobel .series_pop_tab{width:100%; overflow:hidden; border-radius:5px 5px 0 0;} #layer_body .layer_inquire_nobel .series_pop_tab li{float:left; width:50%;} #layer_body .layer_inquire_nobel .series_pop_tab .on h3{background:#e7e6e6; color:#575757;} #layer_body .layer_inquire_nobel .series_pop_tab li h3{background:#404040; font-size:1.2em; color:var(--main-ft-color); padding:15px 0; text-shadow:none;} #layer_body .layer_inquire_nobel .layer_cont p{font-size:0.9em; line-height:1.6; letter-spacing:-0.09em; padding:20px 0 10px; padding:0;} #layer_body .layer_inquire_nobel .layer_btn{bottom:15px;} #layer_body .layer_inquire_nobel .layer_cont p .br_none{display:none;} #layer_body .layer_inquire_nobel .layer_cont p a{font-weight:bold;} #layer_body .layer_inquire_nobel .cont{width:93%; margin:15px auto 15px; font-size:1.2em; text-align:center; line-height:1.5;} #layer_body .layer_inquire_nobel .cont ul{width:100%; margin:10px auto; overflow:hidden; float:none; font-size: 1em;} #layer_body .layer_inquire_nobel .cont ul li{text-align:left; width:100%; float:left; letter-spacing:-0.09em; margin:10px 0; font-size:0.9em; color:#2b2b2b;} /* #layer_body .layer_inquire_nobel .cont ul li a{color:#ff2660; font-weight:normal; letter-spacing:0.01em;}pink버전 */ #layer_body .layer_inquire_nobel .cont ul li a{color:#d52b2c; font-weight:normal; letter-spacing:0.01em;}/* white버전 */ /* #layer_body .layer_inquire_nobel .cont ul span{background:#e84e7e; color:var(--main-ft-color); font-weight:bold; padding:0px 5px; text-indent:-2px; font-size:0.9em; text-align:center; border-radius:3px; display: block; float:left; margin-right:5px;}pink버전 */ #layer_body .layer_inquire_nobel .cont ul span{background:#d52b2c; color:var(--main-ft-color); font-weight:bold; padding:0px 5px; text-indent:-2px; font-size:0.9em; text-align:center; border-radius:3px; display: block; float:left; margin-right:5px;}/* white버전 */ #layer_body .layer_inquire_nobel .cont ul p{float:left; display:block;} #layer_body .layer_inquire_nobel .cont p{ text-align:left;margin:0 auto; width: 90%;} /* #layer_body .layer_inquire_nobel .cont .list_title{margin:0 auto; width:100%;font-weight:bold; float: none; background:url(https://cdn.metoon.co.kr/img/dot_icon.png) no-repeat 0 center; padding-left:10px; font-size:0.9em; letter-spacing:-0.09em;color:#2b2b2b;}pink버전 */ #layer_body .layer_inquire_nobel .cont .list_title{margin:0 auto; width:100%;font-weight:bold; float: none; background:url(https://cdn.metoon.co.kr/img/icon_ask_title_dot1.png) no-repeat 0 center; padding-left:10px; font-size:0.9em; letter-spacing:-0.09em;color:#2b2b2b;}/* white버전 */ #layer_body .layer_inquire_nobel .cont .txt{color:#676767; width:100%; text-align:center;float: none; font-size:0.85em;} #layer_body .layer_inquire_nobel .cont .txt a{color:#676767; text-decoration:underline; font-weight:normal; letter-spacing:0.01em;} /* 연재문의 레이어 */ @media all and (min-width:320px) and (max-width:360px){ #layer_body .layer_inquire_nobel .cont{font-size: 1.1em;} #layer_body .layer_inquire_nobel .series_pop_tab li h3{font-size:1.1em; padding:11px 0;} #layer_body .layer_inquire_nobel .layer_cont p .br_none{display:block;} #layer_body .layer_cont p{font-size: 1.0em;} #layer_body .layer_btn a{font-size: 1.0em; min-width: 90px;} #layer_body .layer_inquire_nobel .cont{width: 96%; margin: 10px auto 15px;} #layer_body .layer_coin_nobel h3{font-size: 1.3em; padding: 12px 0;} #layer_body .layer_coin_nobel .layer_cont p{font-size:0.9em;} #layer_body .layer_inquire_nobel .cont ul{margin: 5px auto;} #layer_body .layer_inquire_nobel{ top: 10%;} } @media all and (min-width:320px) and (max-width:340px){ #layer_body .layer_coin_useup h3{padding-top:75px; padding-bottom:0;} #layer_body .layer_coin_useup .layer_btn{margin-top: 15px;} #layer_body_lack .layer_box h3{padding-top:85px; padding-bottom:0;} #layer_body_lack .layer_coin_lack .layer_btn{margin-top: 25px;} } @media all and (min-width:341px) and (max-width:360px){ #layer_body .layer_coin_useup h3{padding-top:85px; padding-bottom:0; font-size: 1.5em;} #layer_body .layer_coin_useup .layer_btn{margin-top: 20px;} } @media all and (min-width:500px){ #layer_body .layer_coin_useup h3{padding-top:90px;} #layer_body .layer_coin_useup .layer_btn{margin-top: 20px;} #layer_body_lack .layer_box h3{padding-top:95px; padding-bottom:5px;} #layer_body_lack .layer_coin_lack .layer_btn{margin-top: 25px;} } @media screen and (orientation:landscape) and (max-width:780px){ #layer_body .layer_wrap{overflow: scroll;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #layer_body .layer_btn .ok{margin-top:10px;} #layer_body .layer_btn a{font-size:1.1em; padding: 7px 0px;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #layer_body .layer_btn .ok{margin-top:10px;} #layer_body .layer_btn a{font-size:1.1em; padding: 7px 0px;} } /* 로그인 이벤트 코인 지급 팝업 */ #layer_body_event_login_coin{width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; display:none;} #layer_body_event_login_coin .layer_wrap{width:100%; height:100%; position:relative; letter-spacing:-0.09em;} #layer_body_event_login_coin .layer_event_login_coin h3{text-align:center; font-size:1.7em; font-weight:800; color:#2c2c2c; padding-top:85px;} #layer_body_event_login_coin .layer_cont{width:100%; } #layer_body_event_login_coin .layer_cont p{width:100%; text-align:center; font-size:1.2em; color:#676767; padding-top:25px; line-height:1.3;} #layer_body_event_login_coin .layer_cont .txt_1line{padding-top:18px;} #layer_body_event_login_coin .layer_cont span{color:#e84d7d;} #layer_body_event_login_coin .layer_btn{width:100%;position: relative; margin-top:10px; text-align: center;} #layer_body_event_login_coin .layer_btn a{display:inline-block; text-align:center; min-width:120px; padding:10px 15px; font-size:1.3em; color:var(--main-ft-color); font-weight:bold; border-radius:5px; text-shadow:none; } #layer_body_event_login_coin .layer_btn .ok{background:#e84d7d; margin-right:13px; margin-top:5px;} #layer_body_event_login_coin .layer_btn .coin{background:#e84d7d; margin-right:13px;} #layer_body_event_login_coin .layer_btn .cancle{background:#56606b;} #layer_body_event_login_coin .layer_bg{width:100%; height:100%; background:url(https://cdn.metoon.co.kr/img/tm_img_back.png); position:absolute; top:0; left:0;} #layer_body_event_login_coin .layer_event_login_coin{width:95%; max-width:380px; min-height:260px; background:url(https://cdn.metoon.co.kr/mimg/bg_layer_black.png) no-repeat; position:absolute; top:15%; left:0; right:0; margin:auto; z-index:999; background-size:100%;} #layer_body_event_login_coin .layer_event_login_coin .close_btn{display: block; position: absolute; top: -30px; right: 5px; width: 25px; height: 25px; background: url(https://cdn.metoon.co.kr/mimg/log_pop_X.png) no-repeat;} @media all and (min-width:320px) and (max-width:350px){ #layer_body_event_login_coin .layer_box h3{padding-top: 70px;} #layer_body_event_login_coin .layer_cont .txt_1line{font-size:1.1em; padding-top: 10px;} #layer_body_event_login_coin .layer_btn .ok{font-size:1.1em;} } @media all and (min-width:350px) and (max-width:360px){ #layer_body_event_login_coin .layer_box h3{padding-top: 75px;} #layer_body_event_login_coin .layer_cont .txt_1line{padding-top: 15px;} #layer_body_event_login_coin .layer_btn .ok{font-size: 1.2em; padding: 9px 15px;} } /* 로그인 이벤트 코인 지급 팝업 */ /* 이벤트 최대100코인받기 팝업 */ #event_mileage_layer_body{width:100%; height:100%; position:fixed; z-index:99999999; top:0; left:0; overflow-y:scroll;} #event_mileage_layer_body .layer_wrap{margin:0px auto 20px; display: block; position: relative; z-index: 99; width:90%; max-width:400px; height:auto; top:15%;} #event_mileage_layer_body .layer_bg{width:100%; height:100%; background:url(https://cdn.metoon.co.kr/img/tm_img_back.png); position:fixed; top:0; left:0;} #event_mileage_layer_body .cont{display:block;} #event_mileage_layer_body .close{position:absolute; top:5px; right:5px; display:block; width:17px;} #event_mileage_layer_body img{display:block; cursor:pointer; width:100%;} #event_mileage_layer_body .close_box{margin-top:10px; text-align:center;} #event_mileage_layer_body .close_box a{padding:8px 0; display:inline-block; width:100px; font-weight:bold; font-size:15px; border-radius:5px; color:var(--main-ft-color); background:#676767;} /* 이벤트 최대100코인받기 팝업 */ /* 이벤트 ok캐쉬백 팝업 */ #event_okcashbag_layer_body{width:100%; height:100%; position:fixed; z-index:99999999; top:0; left:0; overflow-y:scroll;} #event_okcashbag_layer_body .layer_wrap{margin:0px auto 20px; display: block; position: relative; z-index: 99; width:90%; max-width:400px; height:auto; top:15%;} #event_okcashbag_layer_body .layer_bg{width:100%; height:100%; background:url(https://cdn.metoon.co.kr/img/tm_img_back.png); position:fixed; top:0; left:0;} #event_okcashbag_layer_body .cont{display:block;} #event_okcashbag_layer_body .close{position:absolute; top:5px; right:5px; display:block; width:17px;} #event_okcashbag_layer_body img{display:block; cursor:pointer; width:100%;} #event_okcashbag_layer_body .okcashbag_btn{width: 90%; margin-top:10px; text-align:center; position:absolute; bottom:0; left:0; right:0; margin:10px auto;} #event_okcashbag_layer_body .okcashbag_btn a{padding:8px 0; display:inline-block; width:100px; font-weight:bold; font-size:15px; border-radius:5px; color:var(--main-ft-color); background:#676767;} /* 이벤트 ok캐쉬백 팝업 */ /* 메인 롤링 팝업 */ #main_rolling_layer_body{width:100%; height:100%; position:fixed; z-index:99999999; top:0; left:0; overflow-y:scroll;} #main_rolling_layer_body .layer_wrap{margin:0px auto 20px; text-align: center; display: block; position: relative; z-index: 99; width:98%; max-width:400px; height:auto; top:15%;} #main_rolling_layer_body .layer_bg{width:100%; height:100%; background:rgba(0, 0, 0, 0.4); position:fixed; top:0; left:0;} #main_rolling_layer_body .close{position:absolute; top:3%; right:5%; display:block; width:23px; z-index:99;} #main_rolling_layer_body img{display:block; cursor:pointer; width:100%;} #main_rolling_layer_body .layer_wrap div a{display:block;} #main_rolling_layer_body .go_btn{max-width:208px; display:block; margin: 0 auto; margin-top: -40px;} #main_rolling_layer_body .swiper-slide{width:100%;} #main_rolling_layer_body .swiper-container-cube .swiper-cube-shadow{background:none;} #main_rolling_layer_body .swiper-slide-shadow-left, #main_rolling_layer_body .swiper-slide-shadow-right{background:none;} #main_rolling_layer_body a.week_check{display:inline-block; margin:10px auto 0; padding-left:25px; color:var(--main-ft-color); font-size:14px; position:relative; letter-spacing:-0.05em;} #main_rolling_layer_body a.week_check .check{display:block; position:absolute; top:0; bottom:0; left:0; width:20px; height:20px; background:url(https://cdn.metoon.co.kr/mimg/roll_pop_check_off.png) no-repeat 0 center;} #main_rolling_layer_body a.week_check .check.on{background:url(https://cdn.metoon.co.kr/mimg/roll_pop_check_on.png) no-repeat 0 center;} /* 메인 롤링 팝업 */ /* 레이어 */ /* sub_info */ #header_prev_temrs{position:fixed;position:sticky;top:0;left:0;width:100%;background-color:var(--sub-bg-color);border-bottom:1px solid var(--main-line-color);z-index:100;} #header_prev_temrs .header_terms_container{max-width:1250px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:0 15px;height:59px;margin:0 auto;} #header_prev_temrs .header_terms_container h1{display:block;width:100px;margin:0;} #header_prev_temrs .header_terms_container h1 img{display:block;width:100%;} #header_prev_temrs .sub_title{font-size:15px;font-weight:500;color:var(--main-ft-color);margin-left:15px;} #sub_info .info_cont {font-size:1em; margin:5px; margin-bottom:30px; background:var(--sub-bg-color); border:1px solid var(--main-line-color); box-sizing:border-box; border-radius:3px; padding:10px 0;} #sub_info .info_cont .title{font-size:1em; font-weight:500; padding-left:15px; /* background:url(https://cdn.metoon.co.kr/mimg/agree_line.png) no-repeat 7px 55%; */ line-height:1.5; color:var(--main-ft-color); letter-spacing:-0.025em;} #sub_info .info_cont p{padding:0 10px 0 15px; line-height:1.7; white-space:pre-wrap; color:var(--sub2-ft-color);} #sub_info .info_cont .prev_private_list{padding:0 15px;margin-top:5px;} #sub_info .prev_private_list + .prev_private_list{margin-top:7px;} #sub_info .prev_private_list:last-child{margin-bottom:10px;} #sub_info .prev_private_list a{position:relative;display:inline-block;padding-left:1.2em;color:#5b96cf;} #sub_info .prev_private_list a::before{content:"-";content:"▷";position:absolute;top:0;left:0;margin-top:-1px;} /* sub_info */ /* 서브 공통사항 */ #content_wrap{max-width:936px;max-width:1200px; width:100%; padding:0; /* padding-top:91px; */ overflow:hidden;margin:0 auto;}/* 2017-11-08 수정 */ #content_wrap:after{clear:both; display:block; content:"";} #content_wrap.xtg_main{overflow:visible;} #content_wrap.content_coupon{max-width:1230px;padding-left:15px;padding-right:15px;} #content_wrap .cont_title{width:100%; font-size:16px; margin:10px auto 10px; padding:0 8px; overflow:hidden;} #content_wrap .cont_title h4{float:left; font-weight:normal; font-size:1em;} #content_wrap .cont_title a{float:right; display:block; padding:5px 7px; font-size:0.7em; background:url(https://cdn.metoon.co.kr/mimg/btn_add.svg) no-repeat center; text-indent:-9999999em; overflow:hidden; background-size: 18px;} #content_wrap .cont_title span{color:#F15584;} #content_wrap .cont_title span.font-sm{color:#000; font-size:0.8em; letter-spacing:-0.09em;} #content_wrap .contain{ overflow:hidden;} #content_wrap .sub-mypage{padding-top:10px;} @media all and (min-width:1251px){ #content_wrap .cont_title{width: 100%;} } /* 웹소설/웹툰 탭 170116 */ #order_tab{float:left; border:1px solid #ddd; border-radius:3px; background:#fff; overflow:hidden;} #order_tab li{float:left !important; width:59px !important; text-align:center !important;} #order_tab li.ebook{border-left:1px solid #ddd;} #order_tab li:first-child{border-right:1px solid #ddd;}/* 2017-09-11 수정 */ #order_tab li.all_best{border-right:0;} #order_tab li.all_best:focus{background-color:#d52b2c;} #order_tab li.all_best:focus a{color:var(--main-ft-color);} #order_tab li.all_content{border-left:1px solid #ddd;} #order_tab a{font-size:13.1px; padding:3px 5px 3px; display:block; font-weight:normal; color:#9e9e9e;} #order_tab a.on{background:#676767; color:var(--main-ft-color);} /* 웹소설/웹툰 탭 170116 */ /* 웹소설/웹툰 탭 리뉴얼 */ #order_tab_re{float:left; border:1px solid #ddd; background:#fff; overflow:hidden;} #order_tab_re li{float:left !important; width:59px !important; text-align:center !important;} #order_tab_re li.ebook{border-left:1px solid #ddd;} #order_tab_re li.novel{border-left:1px solid #ddd;} #order_tab_re li:first-child{border-right:1px solid #ddd;}/* 2017-09-11 수정 */ #order_tab_re li.all_best{border-right:0;} #order_tab_re li.all_best:focus{background-color:#d52b2c;} #order_tab_re li.all_best:focus a{color:var(--main-ft-color);} #order_tab_re li a{font-size:13px; padding:6px 5px 6px; display:block; font-weight:normal; color:#9e9e9e;} #order_tab_re li a.on{background:#676767; color:var(--main-ft-color); font-weight:bold;} /* 웹소설/웹툰 탭 리뉴얼 E */ /* 연재 best 부분 2017-09-11 */ .best_wrap{width:96%;margin:6px auto; overflow:hidden;background-color:#FFFFFF;border-radius:5px;padding:10px;border:1px solid #ddd;margin-bottom:7px;} /* 2017-09-20 수정 */ .top_best1 img{width:30%;} .top_best2 img{width:30%;} .top_best3 img{width:30%;} .lazyload_logo { display:block; position:absolute; top:50%; left:50%; margin-top:-25%; margin-left:-25%; z-index:1; } .best_wrap .all_top_best{overflow:hidden;width:100%;margin:0 auto;} .best_wrap .all_top_best a{float:left; width:32.5%;margin-right:1.2%;} .best_wrap .all_top_best a:last-child{margin-right:0;} .best_wrap .all_top_best .top_best_wrap { position:relative; } .best_wrap .all_top_best .top_best_wrap .lazyload_logo { width:50%; margin-top:-40%; } .best_wrap .all_top_best .top_best_wrap div{position:relative;z-index:2;height:115px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} .best_wrap .all_top_best .top_best_wrap .blurcover{position:absolute; top:-25%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:3;} .best_txt{text-align:center;font-size:0.8em;font-weight:normal;overflow:hidden;} .best_txt span{display:block;font-size:1.2em;font-weight:bold;} @media all and (min-width:320px) and (max-width:340px){ .best_wrap .all_top_best .top_best_wrap div{height:92px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} } @media all and (min-width:341px) and (max-width:360px){ .best_wrap .all_top_best .top_best_wrap div{height:101px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} } @media all and (min-width:361px) and (max-width:375px){ .best_wrap .all_top_best .top_best_wrap div{height:109px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} } @media all and (min-width:376px) and (max-width:383px){ .best_wrap .all_top_best .top_best_wrap div{height:111px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} } @media all and (min-width:384px) and (max-width:411px){ .best_wrap .all_top_best .top_best_wrap div{height:112px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} } @media all and (min-width:412px) and (max-width:413px){ .best_wrap .all_top_best .top_best_wrap div{height:121.36px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} } @media all and (min-width:414px) and (max-width:580px){ .best_wrap .all_top_best .top_best_wrap div{height:122.02px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} } @media all and (min-width:580px) and (max-width:600px){ .best_wrap .all_top_best .top_best_wrap div{height:180.05px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} } @media all and (min-width:601px) and (max-width:622px){ .best_wrap .all_top_best .top_best_wrap div{height:179.05px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} } @media all and (min-width:623px) and (max-width:768px){ .best_wrap .all_top_best .top_best_wrap div{height:232.45px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} } @media all and (min-width:769px) and (max-width:800px){ .best_wrap .all_top_best .top_best_wrap div{height:232.77px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} } @media all and (min-width:801px) and (max-width:1024px){ .best_wrap .all_top_best .top_best_wrap div{height:242.75px;background-size:100%;background-repeat:no-repeat;border:1px solid #ddd;border-radius:5px;overflow:hidden;margin-bottom:10px;} } /* 연재 best 부분 end */ /* 성별 탭 */ #gender_tab{float:left; position:relative; border-radius: 5px; overflow: hidden; margin:0 5px 0; height: 25px; width: 31px; font-size:12px;} #gender_tab label{border:1px solid #ddd; border-radius: 5px; /* box-sizing:border-box; */ position:absolute; top:0; left:0; bottom:0; right:0; opacity:0; z-index:-5; margin:auto; /* width:29px; */ padding:5px 0 5px; color:var(--main-ft-color); text-align: center; letter-spacing:-0.05em;} #gender_tab label.man_tab{background:#fff; color:#4967ff;transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg);} #gender_tab label.woman_tab{background:#fff; color:#f05583;transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg);} #gender_tab label.all_gender_tab{background:#fff;color:#676767;transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg);} #gender_tab label.check{opacity:1; z-index:5; transition:0.5s; -webkit-transition:0.5s; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d;transform:rotateY(0deg); -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg);} #gender_tab input{position:absolute; top:0; left:0; z-index:-5; opacity:0; height: 26px; width: 31px;} #gender_tab_re{float:right; position:relative; overflow: hidden; height: 30px; font-size:12px;} #gender_tab_re label{border:1px solid #ddd; background-color:#f5f5f5; /* box-sizing:border-box; */ padding:6px 5px 7px; color:var(--main-ft-color); text-align: center; letter-spacing:-0.05em; float:left;} #gender_tab_re label.man_tab{color:#4967ff; border-left:0 none;} #gender_tab_re label.woman_tab{color:#f05583;} #gender_tab_re label.all_gender_tab{color:#676767; border-right:0 none;} #gender_tab_re label.check{background-color:#FFFFFF; font-weight:bold;} #gender_tab_re input{position:absolute; top:0; left:0; z-index:-5; opacity:0;} #gender_tab_re02{float:right; position:relative; overflow: hidden; height: 30px; width: 31px; font-size:12px;} #gender_tab_re02 label{border:1px solid #ddd; /* box-sizing:border-box; */ position:absolute; top:0; left:0; bottom:0; right:0; opacity:0; z-index:-5; margin:auto; /* width:29px; */ padding:7px 0 6px; color:var(--main-ft-color); text-align: center; letter-spacing:-0.05em;} #gender_tab_re02 label.man_tab{background:#fff; color:#4967ff;transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg);} #gender_tab_re02 label.woman_tab{background:#fff; color:#f05583;transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg);} #gender_tab_re02 label.all_gender_tab{background:#fff;color:#676767;transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg);} #gender_tab_re02 label.check{opacity:1; z-index:5; transition:0.5s; -webkit-transition:0.5s; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d;transform:rotateY(0deg); -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg);} #gender_tab_re02 input{position:absolute; top:0; left:0; z-index:-5; opacity:0; height: 26px; width: 31px;} /* 성별 탭 */ /* 서브 연재 */ /* 연재 헤더 */ #header .head_today_tab_wrap{width:100%; background:#f9f9f9; border-bottom:1px solid #ddd; margin:5px auto; overflow: hidden; display:none;} /* #header .head_today_tab{width:96%; position:relative; margin:3px auto; border-radius:5px; overflow:hidden; border:1px solid #ddd; font-size: 0.95em; font-weight: normal;} */ #header .head_today_tab{position:relative; overflow:hidden; font-size: 0.95em; font-weight: normal; width:100%; margin:-2px auto 0;} #header .head_today_tab ul{float:left; display:-webkit-box;display:flex; -webkit-box-pack:justify;justify-content:space-between; width:100%; background:#fff;} #header .head_today_tab li{float:left; -webkit-box-flex:1;flex-grow:1; height:42px; line-height:42px; text-align:center;} #header .head_today_tab li a{font-size:13px; display:block; font-weight:normal; color:#4e4e4e;} #header .head_today_tab li .on{color:#E84D7D;} #header .head_today_tab_tab_wrap .on_line{position:absolute; bottom:0; width:100%; border:1px solid #E84D7D;} /* 연재 헤더 */ #sub_today .cont_title{display:none;} #sub_today .ui-btn-icon-right:after{display:none;} #sub_today .sub_today_tab{width:100%; border-bottom:1px solid #ddd; position:relative; margin:0 auto; overflow:hidden; font-size: 0.95em; font-weight: normal;} #sub_today .sub_today_tab ul{float:left; display:-webkit-box;display:flex; -webkit-box-pack:justify;justify-content:space-between; width:100%; background:#fff;} #sub_today .sub_today_tab li{float:left; -webkit-box-flex:1;flex-grow:1; height:42px; line-height:42px; text-align:center;} #sub_today .sub_today_tab li a{font-size:13px; display:block; font-weight:normal; color:#4e4e4e; letter-spacing:-1px;} #sub_today .sub_today_tab li .on{color:#E84D7D;} /* #sub_today .on_line{ position:absolute; bottom:0; width:12.5%; border:1px solid #E84D7D; display:none;}pink 버전 */ #sub_today .on_line{ position:absolute; bottom:0; width:100%; border:1px solid var(--bg-fc-color); display:none;}/* white 버전 */ /* 정렬순서 170116 */ #sub_today .today_radio{width: 96%; overflow: hidden; margin: 6px auto 6px; padding:0;} #sub_today .today_radio fieldset{text-align:right; float:left; padding:0;} #sub_today .today_radio select{border:1px solid #ddd; padding:2px 7px; padding-right:15px; font-size:13px; height:30px; line-height: normal; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ic_select.png) no-repeat 92% 70%,#fff; background-size: 8px; border-radius:0; -webkit-appearance:none; color:#676767; float:left;}/* white 버전 */ #sub_today .today_radio #orderby{margin-left:5px;} /* 정렬순서 170116 */ #sub_today .today_cont{position:relative; padding-top:10px;} #sub_today .today_cont .today_list_more{width: 100%; padding-bottom: 15px; float: left; background: #f5f5f5;} #sub_today .today_cont .today_list_more a{width: 96%;display: block; text-align: center; color: var(--bg-fc-color); background: #fff; padding: 9px 0 8px; font-size: 1.1em; border: 1px solid var(--bg-fc-color); border-radius: 5px; margin: 5px auto; text-shadow: none; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_today .today_cont .today_list_more p{font-weight: bold; display: inline-block; margin-left: -3%;} #sub_today .today_cont .today_list_more img{width: 16px; display: inline-block; position: absolute; top: 4px; bottom: 0; margin: auto; padding-left: 10px;} #sub_today .today_cont .today_cont_list{box-shadow:none;} #sub_today .today_cont .today_cont_list li{padding:0px 0 12px; } #sub_today .today_cont .today_cont_list li div a{display: block; width:96%; position: relative; overflow: hidden; padding:0; margin:0 auto; background:#fff; border-width:thin; color:#333; border:1px solid #ddd; font-size:1.05em; letter-spacing:-0.09em; box-sizing:border-box;} #sub_today .today_cont .today_cont_list li .today_img_box{margin:0; float:left; max-width:45%; width:45%; max-height: none; position:relative; border-radius:0; border:0; box-sizing:border-box; border-right:1px solid #ddd;} #sub_today .today_cont .today_cont_list li img{width:100%; display:block;} #sub_today .today_cont .today_cont_list li .novel_img{position:absolute; top:0; left:0; right:0; border-radius: 0; width: 100%; border: none; bottom: 0;} #sub_today .today_cont .today_cont_list li .blurcover{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #sub_today .today_cont .today_cont_list li .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center !important;} #sub_today .today_cont .today_cont_list li .up_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px; z-index:9; display:none;}/* 썸네일up띠 */ #sub_today .today_cont .today_cont_list li .end_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px; z-index:9; display:none;}/* 썸네일완결띠 */ #sub_today .today_cont .today_cont_list li .today_img_box .patch_div{position:absolute; bottom:5px; right:5px; z-index:99;} #sub_today .today_cont .today_cont_list li .today_img_box .patch_div img{width:18px; display:inline-block;} #sub_today .today_cont .today_cont_list li div .patch_box{ position:absolute; top:0; right:5px; z-index: 9; text-align: right; background: none; border: none; border-radius: 0; height: auto; width: auto; letter-spacing: 0; font-size: 0;} #sub_today .today_cont .today_cont_list li div .patch_box>img{width: 35px; display:inline-block; vertical-align: top; margin-left:3px;} #sub_today .today_cont .today_cont_list li div .patch{width:40%; max-width: 45px;} #sub_today .today_cont .today_cont_list li p{padding-top: 5px; font-size:1em; width: 55%; float:right; letter-spacing:-0.09em;} #sub_today .today_cont .today_cont_list li span{display:block; white-space: normal; padding: 0 10px; font-size: 1em; margin-top: 5px; } #sub_today .today_cont .today_cont_list li .img_backbox{display:none;} #sub_today .today_cont .today_cont_list li span br{display:none;} #sub_today .today_cont .today_cont_list li .title{font-weight:bold; font-size:1.1em; margin:10px 0 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display:block;} #sub_today .today_cont .today_cont_list li .writer{margin:5px 0; position:absolute; bottom:5px; right:0px; max-width: 45%; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_today .today_cont .today_cont_list li .on{position:relative; } #sub_today .today_cont .today_cont_list li .on .heart{font-size:1.0em; padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png) no-repeat 0 75%; background-size: 14px 12px; color:var(--bg-fc-color);} #sub_today .today_cont .today_cont_list li .on .heart{background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 25%; background-size: 13px 11px; }/* white 버전 */ #sub_today .today_cont .today_cont_list li .today_img_box #list19_blind{position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; background: #fff; z-index: 100; width: 100%; border: none; border-radius: 0;} #sub_today .today_cont .today_cont_list li .today_img_box #list19_blind>div{width: 100%; height: 100%; position: relative; border: none; border-radius: 0;} #sub_today .today_cont .today_cont_list li .today_img_box #list19_blind .list19_blind_mark{width: 70%; max-width: 180px; position: absolute; top: 0; bottom:0; right: 0; left: 0; margin: auto;} #sub_today .today_cont .today_cont_list li .on .txt_tag{position:absolute; top:-3px; right:12px; padding:0; margin:0;} #sub_today .today_cont .today_cont_list li .on .txt_tag span{display:inline-block; position:relative; padding:0;} #sub_today .today_cont .today_cont_list li .on .txt_tag .ic_tag01:after{content:""; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #sub_today .today_cont .today_cont_list li .on .txt_tag .ic_tag01 img{width:24px; position:static;} #sub_today .today_cont .today_cont_list li .on .txt_tag .new_tag:after{border-top:12px solid #46adf2;} #sub_today .today_cont .today_cont_list li .on .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #sub_today .today_cont .today_cont_list li .on .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #sub_today .today_cont .today_cont_list li .on .txt_tag .up_txt_tag img{width:22px; position:static;} #sub_today .today_cont .today_cont_list li .on .txt_tag .up_txt_tag:after{content:""; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #1567c3;} #sub_today .today_cont .today_cont_list li .on .txt_tag .chat_tag img{width:22px; position:static;} #sub_today .today_cont .today_cont_list li .on .txt_tag .chat_tag:{content:""; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #ffb72b;} @media all and (min-width:320px) and (max-width:350px){ #sub_today .today_cont .today_cont_list li p>span{min-height: 50px; max-height: 100px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding:1px 10px;} #sub_today .today_cont .today_cont_list li .on .heart{margin-top:0;} #sub_today .today_cont .today_cont_list li .on{min-height:0;} #sub_today .today_cont .today_cont_list li .title{min-height:0; margin-top:5px;} #sub_today .today_cont .today_cont_list li .writer{min-height:0; display: inline-block;} } @media all and (min-width:320px) and (max-width:360px){ #header .head_today_tab li a{font-size: 14px;} #sub_today .sub_today_tab li a{font-size: 14px;} #sub_today .today_radio{font-size: 0.9em;} #sub_today .today_radio label:not(#gender_re02 label){padding-right: 3px;} #sub_today .today_radio .ui-radio input{width: 14px; height: 14px; top:2px;} #sub_today .today_cont .today_cont_list li .today_img_box{width: 50%;} #sub_today .today_cont .today_cont_list li .title{font-size: 1.05em;} #sub_today .today_cont .today_cont_list li .writer{bottom:5px;} #sub_today .today_cont .today_cont_list li span{font-size: 0.95em;} #sub_today .today_radio .chkselect:after{top:-1px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_on.png) no-repeat center; background-size: 12px;} #sub_today .today_radio label:after{top:-1px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_off.png) no-repeat center; background-size: 12px;} #sub_today .today_radio #gender_tab label{padding:5px 0;} } @media all and (min-width:435px) and (max-width:600px){ #sub_today .ui-field-contain>label~[class*=ui-], .ui-field-contain .ui-controlgroup-controls{width: 100%;} #sub_today .today_cont .today_cont_list li div{/* height: 185px; */ font-size:1.2em;} #sub_today .today_cont .today_cont_list li .today_img_box{width:50%;} #sub_today .today_cont .today_cont_list li p{font-size: 0.9em; margin-top: 2%;} #sub_today .today_cont .today_cont_list li .title{font-size: 1.1em;} #sub_today .today_cont .today_cont_list li span{font-size: 1em;} #sub_today .today_cont .today_cont_list li span br{display:block;} } @media all and (min-width:535px) and (max-width:600px){ #sub_today .today_cont .today_cont_list li div{/* height: 185px; */ font-size:1.1em;} #sub_today .today_cont .today_cont_list li .today_img_box{width:50%;} #sub_today .today_cont .today_cont_list li{width: 50%; float: left;} #sub_today .today_cont .today_cont_list li p{font-size: 0.9em; margin-top: 0; padding-top:0;} #sub_today .today_cont .today_cont_list li .title{font-size: 1.1em;} #sub_today .today_cont .today_cont_list li span{font-size: 1em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #sub_today .today_cont .today_cont_list li .on .heart{padding-left:15px;} #sub_today .today_cont .today_cont_list li .on .txt_tag{right:5px;} #sub_today .today_cont .today_cont_list{width: 98%; margin: 0 auto;} /* #sub_today .today_cont .today_cont_list li span br{display:block;} */ } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_today .cont_title{font-size: 1.6em;} #sub_today .ui-field-contain>label~[class*=ui-], .ui-field-contain .ui-controlgroup-controls{width: 100%;} #sub_today .today_radio label{font-size: 1.1em;} #sub_today .today_cont .today_cont_list li{width: 50%; float: left;} /* #sub_today .today_cont .today_cont_list li div{height: 190px;} */ #sub_today .today_cont .today_cont_list li .today_img_box{width:50%;} #sub_today .today_cont .today_cont_list li p{/* font-size: 1.2em; */ margin-top: 2%;} #sub_today .today_cont .today_cont_list li span{font-size: 1em; margin:0;} #sub_today .today_cont .today_cont_list li .title{/* padding-bottom:3%;font-size: 1.15em; */ margin: 3% 0;} #sub_today .today_cont .today_cont_list li .writer{font-size:1em; margin:0;} #sub_today .today_cont .today_cont_list li .on{font-size: 1em;} #sub_today .today_cont .today_cont_list li span br{display:block;} #sub_today .today_cont .today_cont_list{width: 98%; margin: 0 auto;} } @media all and (min-width:1000px){ #sub_today .today_cont .today_cont_list{width: 96%; margin: 5px auto; overflow: hidden;} #sub_today .today_cont .today_cont_list li{width: 33.3%; float: left;} #sub_today .today_cont .today_cont_list li p{font-size:0.9em;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #content_wrap #sub_today .cont_title{font-size: 1.2em;margin: 5px auto 10px;} #sub_today{margin-top:0;} #sub_today .today_cont .today_cont_list li{width: 50%; float: left;} #sub_today .today_cont .today_cont_list li p{margin:0; font-size: 0.9em;} /* #sub_today .today_cont .today_cont_list li div{height: 160px;} */ #sub_today .today_cont .today_cont_list li .title{margin: 15px 0 5px;} #sub_today .today_cont .today_cont_list li .writer{bottom:10px;} } @media screen and (orientation:landscape) and (max-width:780px){ #content_wrap #sub_today .cont_title{font-size: 1.2em;margin: 5px auto 10px;} #sub_today{margin-top:0;} #sub_today .today_cont .today_cont_list li{width: 50%; float: left;} #sub_today .today_cont .today_cont_list li p{margin:0; margin-top: 2%; font-size: 0.9em;} /* #sub_today .today_cont .today_cont_list li div{height: 160px;} */ #sub_today .today_cont .today_cont_list li .title{margin: 15px 0 5px;} #sub_today .today_cont .today_cont_list li .writer{bottom:10px;} } @media screen and (orientation:landscape) and (max-width:667px){ #sub_today{margin-top:0;} #sub_today .today_cont .today_cont_list li{width: 50%; float: left;} #sub_today .today_cont .today_cont_list li p{margin:0; font-size: 0.9em;} /* #sub_today .today_cont .today_cont_list li div{height: 150px;} */ #sub_today .today_cont .today_cont_list li .title{margin: 15px 0 5px;} #sub_today .today_cont .today_cont_list li .writer{bottom:10px;} } @media screen and (orientation:landscape) and (max-width:570px){ /* #sub_today .today_cont .today_cont_list li div{height: 135px;} */ #sub_today .today_cont .today_cont_list li .writer{bottom: 5px;} #sub_today .today_cont .today_cont_list li .title{margin: 5px 0 5px;} #sub_today .today_cont .today_cont_list li span{font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_today .today_cont .today_cont_list li span br{display:none;} } @media screen and (orientation:landscape) and (max-width:480px){ #sub_today .today_cont .today_cont_list li{width: 100%; float: left;} #sub_today .today_cont .today_cont_list li p{margin:0; font-size: 0.8em; padding: 15px 0;} /* #sub_today .today_cont .today_cont_list li div{height: 155px;} */ #sub_today .today_cont .today_cont_list li .title{padding:7px 10px 10px;} #sub_today .today_cont .today_cont_list li .writer{bottom: 5px;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #sub_today .today_cont .today_cont_list{width: 96%; margin: 5px auto; overflow: hidden;} #sub_today .today_cont .today_cont_list li{width: 49%; float: left; margin: 0 0.5%;} #sub_today .today_cont .today_cont_list li div{width:100%; /* height: 220px; */} #sub_today .today_cont .today_cont_list li p{margin-top: 5%; font-size: 1.15em; margin-top: 3%;} #sub_today .today_cont .today_cont_list li .title{margin: 15px 0 25px;} } @media all and (min-width:601px) and (max-width:810px){ #sub_today .today_cont .today_cont_list li div .patch{max-width:45px;} #sub_today .today_cont .today_cont_list li .writer {bottom: 5%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #sub_today .today_cont .today_cont_list li p{font-size:1em; margin-top: 2%;} #sub_today .today_cont .today_cont_list li .title{margin: 10px 0 15px;} } @media screen and (orientation:landscape) and (max-width:500px){ #sub_today .today_cont .today_cont_list li span {font-size: 1em;} #sub_today .today_cont .today_cont_list li .title {margin: 7px 0 0px;} #sub_today .today_cont .today_cont_list li span{margin-top: 2px;} } @media all and (min-width:1300px){ #sub_today .today_cont .today_cont_list{width: 96%; margin: 5px auto; overflow: hidden;} #sub_today .today_cont .today_cont_list li{width: 32.3%; float: left; margin: 0 0.5%;} #sub_today .today_cont .today_cont_list li div{width:100%;/* height: 210px; */} #sub_today .today_cont .today_cont_list li p{ /* font-size: 1.15em; */margin-top: 3%;} #sub_today .today_cont .today_cont_list li .title{margin: 15px 0 25px;} } /* 서브 연재 */ /* 서브 추천 */ #sub_best .cont_title{display:none;} #sub_best .sub_best_tab{width:96%; position:relative; margin:0 auto; border-radius:5px; overflow:hidden; border:1px solid #ddd; font-size: 0.95em; font-weight: normal;} #sub_best .sub_best_tab ul{float:left; width:100%; background:#fff;} #sub_best .sub_best_tab li{float:left; width:50%; text-align:center;} #sub_best .sub_best_tab li a{font-size:1.2em; display:block; padding:8px 0 7px; font-weight:bold; color:#9e9e9e; box-sizing:border-box; border-right:1px solid #f1f1f1;} #sub_best .sub_best_tab .line_none a{border-right:none;} #sub_best .sub_best_tab li .on{color:#E84D7D;} #sub_best .on_line{position:absolute; bottom:0; width:50%; border:1px solid #E84D7D;} #sub_best .ui-btn-icon-right:after{display:none;} #sub_best .best_cont {width: 97%; margin: 0 auto 15px; overflow:hidden;} #sub_best .best_cont .best_cont_list{box-shadow:none; margin: 5px 0; float:left;} #sub_best .best_cont .best_cont_list li{padding:5px 0 0; float:left; width:50%;} #sub_best .best_cont .best_cont_list li div{display: block; width:96%; position: relative; overflow: hidden; border-radius: 6px; padding:0; margin:0 auto; height:200px; background:#fff; border-width:thin; color: #333; border:1px solid #DDD; font-size:1em; letter-spacing:-0.09em;} #sub_best .best_cont .best_cont_list li .img_backbox{position:absolute; top:0; left:0; right:0; height:80%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #sub_best .best_cont .best_cont_list li div a{display:block; width:85%; left: 0; top:0; position: absolute; right: 0; margin:auto; height: 100%; z-index:99;} #sub_best .best_cont .best_cont_list li img{width: 100%; max-width:101%; max-height: none; display:block;} #sub_best .best_cont .best_cont_list li .up_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px;} #sub_best .best_cont .best_cont_list li .end_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px;} #sub_best .best_cont .best_cont_list li p{ width: 100%; position:absolute; bottom:0; background:#fff; margin:0;} #sub_best .best_cont .best_cont_list li span{display:block; font-size: 0.9em; margin-top: 10px; padding:0 5px; line-height: 1.3;} #sub_best .best_cont .best_cont_list li .title{font-weight:bold; font-size:1em; margin:5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_best .best_cont .best_cont_list li .writer{margin:0 0 5px; display: block; text-align:right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_best .best_cont .best_cont_list li .hits{position:absolute; right:2px; top:-20px; color:#E84D7D;background: rgba(255, 255, 255, 0.75); padding: 2px 2px 0; border-radius:3px; border:1px solid #E84D7D;box-sizing: border-box; margin-top:0;} #sub_best .best_cont .best_cont_list li .hits .heart{background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 25%; background-size: 13px 11px; padding-left:17px; margin-top:0;} #sub_best .best_cont .best_cont_list li .rank_num{width: 25px; height: 40px; text-align: center; padding-top: 5px; margin:0; font-size: 1.15em; font-weight: bold; text-indent: -1%; position:absolute; top:0; left:-1px; color:var(--main-ft-color); background:url(https://cdn.metoon.co.kr/mimg/rank_bg.png) no-repeat center 0; background-size:100%;} #sub_best .best_cont .best_cont_list li .rank_1{background:url(https://cdn.metoon.co.kr/mimg/rank_bg_01.png) no-repeat center 0; background-size:100%;} #sub_best .best_me_cont{display:none;} @media all and (min-width:320px) and (max-width:360px){ #sub_best .best_cont .best_cont_list li div{height: 170px; font-size:1em;} #sub_best .best_cont .best_cont_list li .title{font-size:1em;} } @media all and (min-width:435px) and (max-width:600px){ #sub_best .best_cont .best_cont_list li div{height: 240px; font-size:1.1em;} } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_best .cont_title{font-size: 1.6em;} #sub_best .best_cont .best_cont_list li div{height: 270px; font-size:1.1em;} #sub_best .best_cont .best_cont_list li .rank_num{font-size:large;} #sub_best .best_cont .best_cont_list li .hits{top: -25px;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #content_wrap #sub_best .cont_title{font-size: 1.2em;margin: 5px auto 10px;} #sub_best .best_cont .best_cont_list li{width: 33.3%;} #sub_best .best_cont .best_cont_list li div{font-size: 1.3em; height: 230px;} #sub_best .best_cont .best_cont_list li .writer{font-size:0.8em;} } @media screen and (orientation:landscape) and (max-width:780px){ #content_wrap #sub_best .cont_title{font-size: 1.2em;margin: 5px auto 10px;} #sub_best .best_cont .best_cont_list li{width: 33.3%;} #sub_best .best_cont .best_cont_list li div{font-size: 1.3em; height: 230px;} #sub_best .best_cont .best_cont_list li .writer{font-size:0.8em;} } @media screen and (orientation:landscape) and (max-width:667px){ #content_wrap #sub_best .cont_title{font-size: 1.2em;margin: 5px auto 10px;} #sub_best .best_cont .best_cont_list li{width: 33.3%;} #sub_best .best_cont .best_cont_list li div{font-size: 1.3em; height: 230px;} #sub_best .best_cont .best_cont_list li .writer{font-size:0.8em;} } @media screen and (orientation:landscape) and (max-width:480px){ #sub_best .best_cont .best_cont_list li{width: 33.3%;} #sub_best .best_cont .best_cont_list li div{font-size: 1.2em; height: 180px;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #sub_best .best_cont .best_cont_list li{width:33%;} #sub_best .best_cont .best_cont_list li div{height: 310px;} #sub_best .best_cont .best_cont_list li .img_backbox{height: 85%;} #sub_best .best_cont .best_cont_list li p{font-size: 1.2em;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #sub_best .best_cont .best_cont_list li div{font-size: 1.1em;} } /* 서브 추천 */ /* 서브 장르 */ #sub_genre .cont_title{display:none;} #sub_genre .ui-btn-icon-right:after{display:none;} #header .head_genre_tab_wrap{width: 100%; background: #f9f9f9; border-bottom: 1px solid #ddd; margin: 5px auto; overflow: hidden;} #header .head_genre_tab{width:96%; position:relative; margin:5px auto; border-radius:5px; overflow:hidden; border:1px solid #ddd; font-size: 0.95em; font-weight: normal;} #header .head_genre_tab ul{float:left; width:100%; background:#fff;} #header .head_genre_tab li{float:left; width:20%; text-align:center;box-sizing:border-box; border-right:1px solid #f1f1f1;} #header .head_genre_tab .line_none{border-right:none;} #header .head_genre_tab li a{font-size:1.2em; display:block; padding:10px 0 8px; font-weight:bold; color:#9e9e9e;} #header .head_genre_tab li .on{color:#E84D7D;} /* #header .on_line{position:absolute; bottom:0; width:12.5%; border:1px solid #E84D7D; display:none;}pink 버전 */ #header .on_line{ position:absolute; bottom:0; width:100%; border:1px solid var(--bg-fc-color); display:none;}/* white 버전 */ #header .head_genre_tab_wrap .on_line{position:absolute; bottom:0; width:20%; border:1px solid #E84D7D;} #sub_genre .sub_genre_tab{width:96%; position:relative; margin:0 auto; border-radius:5px; overflow:hidden; border:1px solid #ddd; font-size: 0.95em; font-weight: normal;} #sub_genre .sub_genre_tab ul{float:left; width:100%; background:#fff;} #sub_genre .sub_genre_tab li{float:left; width:20%; text-align:center; box-sizing:border-box; border-right:1px solid #f1f1f1;} #sub_genre .sub_genre_tab .line_none{border-right:none;} #sub_genre .sub_genre_tab li a{font-size:1.2em; display:block; padding:10px 0 8px; font-weight:bold; color:#9e9e9e;} #sub_genre .sub_genre_tab li .on{color:#E84D7D;} #sub_genre .on_line{position:absolute; bottom:0; width:20%; border:1px solid #E84D7D;} #sub_genre .genre_radio{width: 96%; overflow: hidden; margin: 5px auto 0; padding:0;} #sub_genre .genre_radio fieldset{text-align:right;} #sub_genre .genre_radio .ui-controlgroup{float:right;} #sub_genre .genre_radio .ui-radio{float:left;} #sub_genre .genre_radio label{border:none; background: none; font-size: 1em; padding-right: 5px; color:#9e9e9e;} #sub_genre .genre_radio input{vertical-align: bottom;} #sub_genre .genre_radio .ui-radio input{width: 15px; height:15px; top: 0; bottom: 0; margin: auto;} #sub_genre .ui-radio .ui-btn.ui-radio-on:after{opacity:0; width:8px; height:8px; margin: -4px 2px 0 6px; border:none; background:#F15584;} #sub_genre .ui-radio .ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{width: 15px; height:15px; opacity:0;} #sub_genre .genre_radio .chkselect{color: #F15584;} #sub_genre .genre_cont .genre_cont_list{box-shadow:none; margin: 5px 0;} #sub_genre .genre_cont .genre_cont_list li{padding:5px 0;} #sub_genre .genre_cont .genre_cont_list li div{display: block; width:96%; position: relative; overflow: hidden; border-radius: 6px; padding:0; margin:0 auto; height:145px; background:#fff; border-width:thin; border:1px solid #DDD; color:#333;} #sub_genre .genre_cont .genre_cont_list li div a{display: block; height: 100%; position: absolute;margin:auto; left:0; right:0; width:80%; z-index:99;} #sub_genre .genre_cont .genre_cont_list li img{width:100%; max-height: initial; float:left;} #sub_genre .genre_cont .genre_cont_list li .up_nobel_main{width:17%; position:absolute; top:0; left:0; max-width:89px;} #sub_genre .genre_cont .genre_cont_list li .end_nobel_main{width:17%; position:absolute; top:0; left:0; max-width:89px;} #sub_genre .genre_cont .genre_cont_list li .img_backbox{border:none; border-radius:0; max-width: 50%; max-height: initial; float: left;position:relative;} #sub_genre .genre_cont .genre_cont_list li .img_backbox span{position:absolute; top:0; left:0; right:0; height:100%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #sub_genre .genre_cont .genre_cont_list .txt_box{float:right; width:50%; height:100%; padding:10px; font-size:1.2em; border:none;} #sub_genre .genre_cont .genre_cont_list .txt_box p{width:100%; font-size:0.9em; letter-spacing: -0.08em; display:block; margin:0; white-space: pre-wrap;} #sub_genre .genre_cont .genre_cont_list .txt_box p .heart{font-size:1.0em; padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart.png) no-repeat 0 75%; background-size: 14px 12px; color:#E84D7D;} #sub_genre .genre_cont .genre_cont_list .txt_box .on .heart{background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 25%; background-size: 13px 11px; } #sub_genre .genre_cont .genre_cont_list .txt_box .nobel_title{font-weight:bold; font-size:1.1em; display:block; padding:5px 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #sub_genre .genre_cont .genre_cont_list .txt_box .txt{margin:5px 0 25px;} #sub_genre .genre_cont .genre_cont_list .txt_box .writer{position:absolute; bottom:10px; right: 10px; text-align:right; width: 100%; font-size:0.85em; letter-spacing:-0.09em;} @media all and (min-width:320px) and (max-width:360px){ #header .head_genre_tab li a{font-size: 1.1em;} #sub_genre .sub_genre_tab li a{font-size: 1.1em;} #sub_genre .genre_radio{font-size: 0.9em;} #sub_genre .genre_radio .ui-radio input{width: 14px; height: 14px; top:2px;} #sub_genre .genre_radio label{padding-right: 3px;} #sub_genre .genre_cont .genre_cont_list .txt_box{font-size: 1.1em;} #sub_genre .genre_cont .genre_cont_list .txt_box .txt{margin: 5px 0 25px;} #sub_genre .genre_cont .genre_cont_list .txt_box .nobel_title{padding: 3px 0;} #sub_genre .genre_cont .genre_cont_list .txt_box .on .heart{background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 40%; background-size: 12px 10px; } } @media all and (min-width:435px) and (max-width:600px){ #sub_genre .ui-field-contain>label~[class*=ui-], .ui-field-contain .ui-controlgroup-controls{width: 100%;} #sub_genre .genre_cont .genre_cont_list li div{height: 185px;} #sub_genre .genre_cont .genre_cont_list .txt_box .txt{margin: 5% 0 25px;} #sub_genre .genre_cont .genre_cont_list .txt_box .nobel_title{padding: 5px 0 3%;} } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_genre .cont_title{font-size: 1.6em;} #sub_genre .ui-field-contain>label~[class*=ui-], .ui-field-contain .ui-controlgroup-controls{width: 100%;} #sub_genre .genre_radio label{font-size: 1.1em;} #sub_genre .genre_cont .genre_cont_list li div{height: 250px;} #sub_genre .genre_cont .genre_cont_list .txt_box{padding: 2% 10px; font-size: 1.5em;} #sub_genre .genre_cont .genre_cont_list .txt_box .txt{margin: 3% 0 25px;} #sub_genre .genre_cont .genre_cont_list .txt_box .nobel_title{padding: 5px 0 3%;} #sub_genre .genre_cont .genre_cont_list .txt_box .writer{bottom: 10%;} #sub_genre .genre_cont .genre_cont_list .txt_box .on .heart{background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 40%; background-size: 15px 13px; } } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #content_wrap #sub_genre .cont_title{font-size: 1.2em;margin: 5px auto 10px;} } @media screen and (orientation:landscape) and (max-width:780px){ #content_wrap #sub_genre .cont_title{font-size: 1.2em;margin: 5px auto 10px;} #sub_genre .genre_cont .genre_cont_list li{width: 50%; float: left;} #sub_genre .genre_cont .genre_cont_list li div{height: 160px;} #sub_genre .genre_cont .genre_cont_list .txt_box{margin:0; font-size: 1.2em;} } @media screen and (orientation:landscape) and (max-width:667px){ #content_wrap #sub_genre .cont_title{font-size: 1.2em;margin: 5px auto 10px;} #sub_genre .genre_cont .genre_cont_list li{width: 50%; float: left;} #sub_genre .genre_cont .genre_cont_list li div{height: 150px;} #sub_genre .genre_cont .genre_cont_list .txt_box{margin:0; font-size: 1.2em;} } @media screen and (orientation:landscape) and (max-width:570px){ } @media screen and (orientation:landscape) and (max-width:480px){ #header .head_genre_tab li a{font-size: 1.1em;} #sub_genre .sub_genre_tab li a{font-size: 1.1em;} #sub_genre .genre_cont .genre_cont_list li{width: 50%; float: left;} #sub_genre .genre_cont .genre_cont_list li div{height: 115px;} #sub_genre .genre_cont .genre_cont_list .txt_box{margin:0; font-size: 1em;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #sub_genre .genre_cont .genre_cont_list{width: 96%; margin: 5px auto; overflow: hidden;} #sub_genre .genre_cont .genre_cont_list li{width: 49%; float: left; margin: 0 0.5%;} #sub_genre .genre_cont .genre_cont_list li div{width:100%; height: 220px;} #sub_genre .genre_cont .genre_cont_list li div a{width:90%;} #sub_genre .genre_cont .genre_cont_list li p{margin-top: 5%; font-size: 1.2em;} #sub_genre .genre_cont .genre_cont_list .txt_box .writer{font-size: 1.15em;} #sub_genre .genre_cont .genre_cont_list .txt_box p{font-size:1em;} #sub_genre .genre_cont .genre_cont_list .txt_box .writer{font-size:1em;} #sub_genre .genre_cont .genre_cont_list .txt_box{font-size: 1.15em; padding: 15px 10px;} #sub_genre .genre_cont .genre_cont_list .txt_box .nobel_title{margin: 5px 0 20px;} } @media all and (min-width:601px) and (max-width:810px){ #sub_genre .genre_cont .genre_cont_list .txt_box .writer{bottom: 5%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #sub_genre .genre_cont .genre_cont_list .txt_box{font-size: 1.2em; padding: 15px 10px;} #sub_genre .genre_cont .genre_cont_list .txt_box p{font-size: 1em;} #sub_genre .genre_cont .genre_cont_list .txt_box .writer{font-size:0.9em; bottom: 15px;} #sub_genre .genre_cont .genre_cont_list li .up_nobel_main{max-width:66px;} #sub_genre .genre_cont .genre_cont_list .txt_box .nobel_title{margin: 5px 0 20px;} } @media screen and (orientation:landscape) and (max-width:500px){ #sub_genre .genre_cont .genre_cont_list .txt_box{padding: 5px 10px;} #sub_genre .genre_cont .genre_cont_list .txt_box .on .heart {background: url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 48%; background-size: 13px 11px;} #sub_genre .genre_cont .genre_cont_list .txt_box .writer{bottom: 5px; right: 6px;} #sub_genre .genre_cont .genre_cont_list .txt_box .txt{margin: 0 0 25px;} } /* 서브 장르 */ /* 서브 검색 */ #sub_search .ui-btn-icon-right:after{display:none;} #content_wrap #sub_search .cont_title{display:block; font-size:14px; width:auto; max-width:100%; margin:10px 0 0; margin-left:2% !important; float: left;} /* 정렬순서 */ #sub_search .search_radio{width: auto; overflow: hidden; margin: 0; margin-right:2% !important; padding:0; float:right;} #sub_search .search_radio .ui-controlgroup{float:right;} #sub_search .search_radio fieldset{text-align:right;} #sub_search .search_radio .ui-radio{float:left;} #sub_search .search_radio .ui-radio input{width: 15px; height:15px; top: 0; bottom: 0; margin: auto; opacity:0} #sub_search .ui-radio .ui-btn.ui-radio-on:after{opacity:0; width:8px; height:8px; margin: -4px 2px 0 6px; border:none; background:#F15584;} #sub_search .ui-radio .ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{width: 15px; height:15px; opacity:0;} #sub_search .search_radio input{ opacity:0;} #sub_search .search_radio label{border:none; background: none; font-size: 1em; padding-right: 5px; color:#9e9e9e; position:relative;} #sub_search .search_radio label:after{content: ""; display: block; position: absolute; top: 2px; left: -15px; width: 13px; height: 13px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_off.png) no-repeat center; background-size: 13px;} #sub_search .search_radio .chkselect{color: var(--bg-fc-color);} #sub_search .search_radio .chkselect:after{content: ""; display: block; position: absolute; top: 2px; left: -15px; width: 13px; height: 13px; background: url(https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png) no-repeat center; background-size: 13px;}/* white 버전 */ /* 정렬순서 */ /* 정렬순서 170116 */ #content_wrap #sub_search .cont_title{margin-bottom:0;} #sub_search .search_radio{width: auto; overflow: hidden; margin:5px 0; margin-right:2% !important; padding:0; float:right;} #sub_search .search_radio fieldset{text-align:right; float:right; padding:0; margin-top:1px;} #sub_search .search_radio select{border:1px solid #ddd; padding:2px 3px; padding-right:15px; font-size:1.1em; border-radius:3px; height:25px; line-height: normal; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/select_arrow2.png) no-repeat 92% center,#fff; background-size: 9px; -webkit-appearance:none; color:#676767;} /* 정렬순서 170116 */ #sub_search .search_cont{width: 97%; margin: 0 auto 15px; overflow: hidden;} #sub_search .search_cont .search_cont_list{box-shadow:none; margin: 5px 0;} #sub_search .search_cont .search_cont_list li{padding:5px 0; width:50%; float:left;} #sub_search .search_cont .search_cont_list li a{display: block; width:96%; position: relative; overflow: hidden; border-radius: 6px; padding:0; margin:0 auto; min-height:205px; background:#fff; border-width:thin; color:#676767;border: 1px solid #ddd; box-sizing:border-box;font-size: 0.9em; letter-spacing:-0.09em;} #sub_search .search_cont .search_cont_list li img{max-width:100%; width:100%; max-height: none;} #sub_search .search_cont .search_cont_list li .novel_img{position:absolute; top:0; left:0; right:0;} #sub_search .search_cont .search_cont_list li .img_backbox{position:absolute; top:0; left:0; right:0; height:77%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #sub_search .search_cont .search_cont_list li p{width: 100%; position: absolute; bottom: 0; background: #fff; margin: 0;} #sub_search .search_cont .search_cont_list li span{display:block; white-space: pre-wrap; padding: 0 10px; font-size: 1em; margin:5px 0 0;} /* #sub_search .search_cont .search_cont_list li .ganre{color:#F15584; font-weight:bold; font-size:1.0em;}pink 버전 */ #sub_search .search_cont .search_cont_list li .ganre{color:var(--bg-fc-color); font-weight:bold; font-size:1.0em;} /* white 버전 */ #sub_search .search_cont .search_cont_list li .title{font-weight:bold; font-size:1.2em; margin-top:1px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #sub_search .search_cont .search_cont_list li .writer{margin:2px 0 7px;} #sub_search .search_cont .search_cont_list .not_find, .search_result_new .not_find{border:none; width:100%; height:100px; position:relative; background:none; margin-top:20px;} .search_result_new .not_find{margin:60px auto 80px;} #sub_search .search_cont .search_cont_list .not_find p, .search_result_new .not_find p{text-align:center; background:none; font-size:1.1em; color:var(--sub2-ft-color); font-weight:500; letter-spacing:-0.025em; position:absolute; top:0; bottom:0; left:0; right:0; padding-top:60px; height:25px; margin:auto; background:url("https://cdn.metoon.co.kr/mimg/ht_search.svg") no-repeat center 0;background-size:auto 46px;} [color-theme="light"] #sub_search .search_cont .search_cont_list .not_find p, [color-theme="light"] .search_result_new .not_find p{background-image:url("https://cdn.metoon.co.kr/mimg/ht_search_ctlgt.svg");} @media all and (min-width:320px) and (max-width:360px){ #sub_search .search_radio{font-size: 0.9em;} #sub_search .search_cont .search_cont_list li a{min-height: 185px;} #sub_search .search_cont .search_cont_list li .title{font-size: 1em;} /* #sub_search .search_radio .chkselect:after{top:-1px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_on.png) no-repeat center; background-size: 12px;}pink 버전 */ #sub_search .search_radio .chkselect:after{top:-1px; background: url(https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png) no-repeat center; background-size: 12px;}/* white 버전 */ #sub_search .search_radio label:after{top:-1px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_off.png) no-repeat center; background-size: 12px;} } @media all and (min-width:435px) and (max-width:600px){ #sub_search .ui-field-contain>label~[class*=ui-], .ui-field-contain .ui-controlgroup-controls{width: 100%;} #sub_search .search_cont .search_cont_list li a{min-height: 240px;} } @media all and (min-width:601px) and (max-width:810px){ #sub_search .search_radio label{font-size: 1.1em;} #sub_search .ui-field-contain>label~[class*=ui-], .ui-field-contain .ui-controlgroup-controls{width: 100%;} #sub_search .search_cont .search_cont_list .not_find p, .search_result_new .not_find p{font-size: 1.2em;} #sub_search .search_cont .search_cont_list li a{min-height: 270px;} #sub_search .search_cont .search_cont_list li p{font-size: 0.8em;} } @media all and (min-width:800px){ #sub_search .search_cont .search_cont_list li{width:33.3%;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { } @media screen and (orientation:landscape) and (max-width:780px){ } @media screen and (orientation:landscape) and (max-width:667px){ #sub_search .search_cont .search_cont_list li p{font-size: 1em;} #sub_search .search_radio{font-size: 0.9em;} #sub_search .search_cont .search_cont_list li a{height: 235px;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #sub_search .search_cont .search_cont_list li{width:33.3%;} #sub_search .search_cont .search_cont_list li .img_backbox{height: 85%;} } @media all and (min-width:601px) and (max-width:810px){ #sub_search .search_cont .search_cont_list li .img_backbox{height: 85%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #sub_search .search_cont .search_cont_list li{width:33.3%;} #sub_search .search_cont .search_cont_list li .img_backbox{height: 80%;} } @media all and (min-width:1000px){ #sub_search .search_cont .search_cont_list li {width: 25%;} } @media all and (min-width:1300px){ #sub_search .search_cont .search_cont_list li {width: 20%;} } /* 서브 검색 */ /* 서브 삽화보기 */ #sub_artwork .ui-btn-icon-right:after{display:none;} #content_wrap #sub_artwork{padding-bottom:62px;} #content_wrap #sub_artwork .cont_title{width:94%; font-size:1.4em; margin:0px auto 5px; overflow:hidden; display:block;} #content_wrap #sub_artwork .cont_title .back{float:right; display:block; padding:5px 7px; font-size:0.7em; background:url(https://cdn.metoon.co.kr/mimg/btn_back_big.png) no-repeat center; background-size:23px; text-indent:-9999999em; overflow:hidden;} #sub_artwork .artwork_cont {width: 97%; margin: 0 auto; overflow:hidden;} #sub_artwork .artwork_cont .artwork_cont_list{box-shadow:none; margin:0; overflow:hidden;} #sub_artwork .artwork_cont .artwork_cont_list li{padding:2px 1%; float:left; width:31.3%; margin-bottom:2px; margin:5px 0;} #sub_artwork .artwork_cont .artwork_cont_list li a{display: block; width:100%; position: relative; overflow: hidden; border-radius: 6px; padding:0; margin:0 auto; background:#fff; line-height: 0; box-sizing:border-box; border: 1px solid #ddd;} #sub_artwork .artwork_cont .artwork_cont_list li img{margin:0 auto; width:100%; max-width:100%; position: static; max-height: static;} #sub_artwork .artwork_cont .artwork_cont_list li .novel_img{position:absolute; top:0; left:0; right:0; z-index:99; border-radius:3px;} #sub_artwork .artwork_cont .artwork_cont_list li .rank_num{width: 25px; height: 40px; text-align: center; padding-top: 5px; margin:0; position:absolute; top:0; left:0; color:var(--main-ft-color); background:url(https://cdn.metoon.co.kr/mimg/rank_bg.png) no-repeat center 0; background-size:100%;} #sub_artwork .artwork_cont .artwork_cont_list li .rank_1{background:url(https://cdn.metoon.co.kr/mimg/rank_bg_01.png) no-repeat center 0; background-size:100%;} #sub_artwork .best_me_cont{display:none;} #sub_artwork .artwork_pager{text-align:center; margin-top:15px;} #sub_artwork .artwork_pager a{display:inline-block; padding:10px 10px; font-size:0.7em; text-indent:-9999999em; overflow:hidden;} #sub_artwork .artwork_pager .prev{background:url(https://cdn.metoon.co.kr/mimg/btn_prev.png) no-repeat center; background-size:28px;} #sub_artwork .artwork_pager .next{background:url(https://cdn.metoon.co.kr/mimg/btn_next.png) no-repeat center; background-size:28px;} #content_wrap #sub_artwork form{text-align:right; width: 97%; margin: 0 auto; padding:8px 0;border-top:1px solid #ddd; } #content_wrap #sub_artwork label{position: relative; border: none; background: none; font-size: 1em; padding-right: 5px; color: #9e9e9e;} #content_wrap #sub_artwork label:after{ content: ""; display: block; position: absolute; top: 2px; left: -15px; width: 13px; height: 13px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_off.png) no-repeat center; background-size: 13px;} #content_wrap #sub_artwork input{ vertical-align: bottom; opacity:0;} #content_wrap #sub_artwork form .chkselect{color:var(--bg-fc-color);} /* #content_wrap #sub_artwork form .chkselect:after{content: ""; display: block; position: absolute; top: 2px; left: -15px; width: 13px; height: 13px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_on.png) no-repeat center; background-size: 13px;}pink 버전 */ #content_wrap #sub_artwork form .chkselect:after{content: ""; display: block; position: absolute; top: 2px; left: -15px; width: 13px; height: 13px; background: url(https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png) no-repeat center; background-size: 13px;}/* white 버전 */ @media all and (min-width:320px) and (max-width:360px){ } @media all and (min-width:435px) and (max-width:600px){ } @media all and (min-width:601px) and (max-width:810px){ #sub_artwork .artwork_cont .artwork_cont_list li{width: 23%;} } @media all and (min-width:810px){ #sub_artwork .artwork_cont .artwork_cont_list li{width: 18%;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #content_wrap #sub_artwork .cont_title{margin: 10px auto 10px;} } @media screen and (orientation:landscape) and (max-width:780px){ #content_wrap #sub_artwork .cont_title{margin: 10px auto 10px;} } @media screen and (orientation:landscape) and (max-width:667px){ #sub_artwork .artwork_cont .artwork_cont_list li{margin-bottom: 5px;} } @media screen and (orientation:landscape) and (max-width:570px){ } @media screen and (orientation:landscape) and (max-width:480px){ } /* 서브 삽화보기 */ /* 서브 삽화보기 big */ #content_wrap #sub_artwork .cont_title .back{float:right; display:block; padding:5px 7px; font-size:0.7em; background:url(https://cdn.metoon.co.kr/mimg/btn_back_big.png) no-repeat center; background-size:23px; text-indent:-9999999em; overflow:hidden;} #sub_artwork .ui-btn-icon-right:after{display:none;} #sub_artwork .artwork_big_cont {width:100%; overflow:hidden; position: relative;} #sub_artwork .artwork_big_cont .artwork_big_box{width: 97%; max-width: 750px; margin: 0 auto; overflow:hidden; border:1px solid #ddd; border-radius:5px; background:#fff; position:relative;} #sub_artwork .artwork_big_cont .artwork_big_box span{display:block; position:absolute; top:0; left:0; right:0; margin:auto; width:70%; height:85%;} #sub_artwork .artwork_big_cont .artwork_big_box a{display:block;} #sub_artwork .artwork_big_cont img{width:100%; max-width:750px; margin:0 auto; display:block;} #sub_artwork .artwork_big_cont .novel_img{position:absolute; top:0; right:0; left:0; z-index:9;} #sub_artwork .artwork_big_cont .artwork_txt{font-size:1.1em; padding:5px 10px; width:100%; margin-bottom: 5px; letter-spacing:-0.025em;overflow: hidden; max-width: 750px; margin: 0 auto; z-index: 9; position: relative; background: #fff; border-radius: 0 0 5px 5px;} #sub_artwork .artwork_big_cont .artwork_txt .detail_title{font-weight:bold; margin-bottom: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* #sub_artwork .artwork_big_cont .artwork_txt .heart{display:inline-block; background:url(https://cdn.metoon.co.kr/mimg/icon_illust_heart_big.png) no-repeat 0 45%; background-size: 15px; padding-left:20px; color:#F15584; font-size: 0.9em;}pink 버전 */ #sub_artwork .artwork_big_cont .artwork_txt .heart{display:inline-block; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 45%; background-size: 15px; padding-left:20px; color:var(--bg-fc-color); font-size: 0.9em;}/* white 버전 */ #sub_artwork .artwork_big_cont .artwork_txt a{display:inline-block; padding:2px 5px 3px; border:1px solid #ddd; background:#fff; color:#767676; border-radius:3px; font-size:0.9em; float:right;} #sub_artwork .artwork_big_cont .artwork_pager{text-align:center; width:100%; height:50px; position: absolute; top: 0; bottom: 0; margin: auto;} #sub_artwork .artwork_big_cont .artwork_pager a{position:absolute; top:10%; bottom:0; padding:0; z-index:9; margin:auto; overflow:hidden; display:inline-block; width:39px; height:64px; font-size:0.7em; text-indent:-9999999em;} #sub_artwork .artwork_big_cont .artwork_pager .prev{left:1.5%; background:url(https://cdn.metoon.co.kr/mimg/btn_big_prev.png) no-repeat center; } #sub_artwork .artwork_big_cont .artwork_pager .next{right:1.5%; background:url(https://cdn.metoon.co.kr/mimg/btn_big_next.png) no-repeat center; } @media all and (min-width:320px) and (max-width:360px){ } @media all and (min-width:435px) and (max-width:600px){ } @media all and (min-width:601px) and (max-width:810px){ } /* 서브 삽화보기 big */ /* 서브 고객센터 */ /* 서브 자주하는질문 */ #content_wrap #sub_faq{margin:30px auto 45px;}/* 2017-11-08 수정 */ #sub_faq .cont_title{display:none;} #sub_faq .faq_cont{width: 96%; overflow: hidden; margin: 0 auto; padding:0; position:relative;} #sub_faq .title_box{width:100%; float:left;/* margin-bottom:5px; */}/* 2017-11-08 수정 */ #sub_faq .title_box ul{width:100%; float:left; border-radius:3px; overflow: hidden;display:flex;} #sub_faq .title_box ul li{background:#383C44;background:var(--opt-bg-color); float:left; width:25%;flex:1 1 auto;} #sub_faq .title_box ul li a{text-align:center; color:var(--sub2-ft-color); font-size:1.1em; display:block; border:1px solid var(--main-line-color);border-right-width:0;/* border-right:1px solid var(--main-line-color); */padding:10px 0;} /* #sub_faq .title_box ul .on{background:#e84d7d; border:none;}pink 버전 */ #sub_faq .title_box ul .on{background:var(--bg-fc-color);font-weight:500; border:none;}/* white 버전 */ #sub_faq .title_box ul li.on a{border-color:var(--bg-fc-color);color:#FFFFFF;} #sub_faq .title_box ul .line_non{border-right-width:1px;} #sub_faq .faq_notice_box, #sub_faq .faq_ask_box{margin-top:8px;} #sub_faq .faq_notice_box{float: left; width: 100%;} #sub_faq .faq_notice_box .list_box{/* border:1px solid #ddd; border-bottom:none; border-radius:3px; */margin-top:10px; overflow:hidden;} #sub_faq .faq_notice_box .list_box{border:1px solid var(--main-line-color);box-sizing:border-box;} #sub_faq .faq_notice_box li h1{ font-size:1em; padding:15px 10px;/* padding:15px 10px 10px; background:#1E1E1E; */background-color:var(--sub-bg-color); border-bottom:1px solid var(--main-line-color);cursor:pointer;} #sub_faq .faq_notice_box li:last-child h1{border-bottom:0 none;} #sub_faq .faq_notice_box li h1.on{background:#242424;} #sub_faq .faq_notice_box li h1 a{background:#fff; padding:10px; font-size: 1.1em;} #sub_faq .faq_notice_box li h1 p{display:inline-block; font-weight:normal;} #sub_faq .faq_notice_box li h1 .new{background:url(https://cdn.metoon.co.kr/mimg/m_icon_notice_new1.png) no-repeat 0 center; text-indent:20px; max-width: 75%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; background-size:13px;} #sub_faq .faq_notice_box li:first-child h1 p, #sub_faq .faq_notice_box li:nth-child(2) h1 p, #sub_faq .faq_notice_box li:nth-child(3) h1 p{color:var(--bg-fc-color);} #sub_faq .faq_notice_box li h1 .date{float: right; font-size:0.9em; font-weight:normal;color:var(--sub-ft-color); line-height:1.5;} /* #sub_faq .faq_notice_box li .on p{color:#e84d7d; font-weight:bold}pink 버전 */ #sub_faq .faq_notice_box li .on p{color:var(--bg-fc-color); /* font-weight:500; */}/* white 버전 */ #sub_faq .faq_notice_box .notice_txt{padding:20px 15px; border-bottom:1px solid var(--main-line-color); display:none;background:#2C2C2C;color:#CCCCCC;} #sub_faq .faq_notice_box .ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content{background:#eee;} #sub_faq .faq_notice_box .ui-icon-plus:after{display:none;} #sub_faq .faq_notice_box .ui-icon-minus:after{display:none; } #sub_faq .faq_notice_box .ui-icon-minus p{color:#e84d7d; font-weight:bold;} #sub_faq .faq_qna_box{float: left; width: 100%;} #sub_faq .qna_tab{overflow:hidden; /* border-radius:3px; background:#fff; border:1px solid #ddd; */margin-top:10px;}/* 2017-11-08 수정 */ #sub_faq .qna_tab li{width:33.3%; float:left; text-align:center; /* border-right:1px solid #ddd; */ box-sizing: border-box;} #sub_faq .qna_tab .line-none{border:none;} #sub_faq .qna_tab li a{color:#9e9e9e; padding:10px 0 8px; display:block;} /* #sub_faq .qna_tab .on a{color:#e84d7d;} #sub_faq .qna_tab li .tap_line{display:none; width:100%; height:0; border:1px solid #e84d7d;}pink 버전 */ #sub_faq .qna_tab .on a{color:var(--bg-fc-color);font-weight:500;} #sub_faq .qna_tab li .tap_line{display:none; width:100%; height:0; border:1px solid var(--bg-fc-color);}/* white 버전 */ #sub_faq .qna_tab .on .tap_line{display:block;} #sub_faq .faq_qna_box .list_box ul{display:none;border:1px solid var(--main-line-color);box-sizing:border-box;} #sub_faq .faq_ask_box .form_box{display:none;margin-top:10px;} #sub_faq .faq_qna_box .list_box{/* border:1px solid #ddd; border-bottom:none; border-radius:5px; */ margin-top:10px; overflow:hidden;} #sub_faq .faq_qna_box li h1{ font-size:1em; padding:15px 10px 10px; /* background:#fff; */background-color:var(--sub-bg-color); border-bottom:1px solid var(--main-line-color);cursor:pointer;} #sub_faq .faq_qna_box li h1.on{background-color:#242424;} [color-theme="light"] #sub_faq .faq_notice_box li h1.on, [color-theme="light"] #sub_faq .faq_qna_box li h1.on{background-color:#E1E1E1;} #sub_faq .faq_qna_box li:last-child h1{border-bottom:0 none;} #sub_faq .faq_qna_box li h1 a{background:#fff; padding:10px; font-size: 1.05em;} #sub_faq .faq_qna_box li h1 p{display:inline-block; font-weight:normal; letter-spacing:-0.025em;} #sub_faq .faq_qna_box li:first-child h1 p, #sub_faq .faq_qna_box li:nth-child(2) h1 p, #sub_faq .faq_qna_box li:nth-child(3) h1 p{color:var(--bg-fc-color);} /* #sub_faq .faq_qna_box li .on p{color:#e84d7d; font-weight:bold}pink 버전 */ #sub_faq .faq_qna_box li .on p{color:var(--bg-fc-color); font-weight:500} /* white 버전 */ #sub_faq .faq_qna_box li h1 .que{background:url("https://cdn.metoon.co.kr/mimg/icon_pna_que.svg") no-repeat 0 center; text-indent:23px; width:100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; background-size:15px;} [color-theme="light"] #sub_faq .faq_qna_box li h1 .que{background-image:url("https://cdn.metoon.co.kr/mimg/icon_pna_que_ctlgt.svg");} #sub_faq .faq_qna_box li h1 .date{float: right; font-size:0.9em; font-weight:normal; line-height:1.5;} /* #sub_faq .faq_qna_box .qna_txt{background:#eee; display:none; padding:20px 30px; background:url(https://cdn.metoon.co.kr/mimg/icon_pna_ans.png) no-repeat 10px 21px; background-size:13px; border-bottom:1px solid #ddd;}pink 버전 */ #sub_faq .faq_qna_box .qna_txt{background:#eee; display:none; padding:20px 30px 20px 33px; background:url("https://cdn.metoon.co.kr/mimg/icon_pna_ans.svg") no-repeat 10px 22px, #2C2C2C; background-size:15px; border-bottom:1px solid var(--main-line-color);color:#CCCCCC}/* white 버전 */ [color-theme="light"] #sub_faq .faq_notice_box .notice_txt, [color-theme="light"] #sub_faq .faq_qna_box .qna_txt{background-image:url("https://cdn.metoon.co.kr/mimg/icon_pna_ans_ctlgt.svg");background-color:var(--opt2-bg-color);color:var(--sub2-ft-color);} [color-theme="light"] #sub_faq .faq_notice_box .notice_txt{background-image:none;} #sub_faq .faq_qna_box .list_box li:last-child .qna_txt{border-bottom:0 none;} #sub_faq .faq_qna_box .qna_txt img{ max-width:100%; }; #sub_faq .faq_qna_box .ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content{background:#eee;} #sub_faq .faq_qna_box .ui-icon-plus:after{display:none;} #sub_faq .faq_qna_box .ui-icon-minus:after{display:none; } #sub_faq .faq_qna_box .ui-icon-minus p{color:#e84d7d; font-weight:bold;} #sub_faq .faq_ask_box{float: left; width: 100%;} #sub_faq .faq_ask_box .list_box ul{margin-top:10px;border-bottom: 1px solid var(--main-line-color);} #sub_faq .faq_ask_box .list_box ul li{border:1px solid var(--main-line-color); border-bottom:none; overflow:hidden;} #sub_faq .faq_ask_box li h1{ font-size:1em; padding:15px 10px 10px; background:var(--sub-bg-color);cursor:pointer;} #sub_faq .faq_ask_box li h1.on{background:#242424;} [color-theme="light"] #sub_faq .faq_ask_box li h1.on{background:#E1E1E1;} #sub_faq .faq_ask_box li h1 a{background:#fff; padding:10px; font-size: 1.1em;} #sub_faq .faq_ask_box li h1 p{display:inline-block; font-weight:normal; letter-spacing:-0.025em;} #sub_faq .faq_ask_box li div{overflow:hidden;} /* #sub_faq .faq_ask_box li .on .title{color:#e84d7d; font-weight:bold}pink 버전 */ #sub_faq .faq_ask_box li .on .title{color:var(--bg-fc-color); font-weight:bold} /* white 버전 */ #sub_faq .faq_ask_box .ui-icon-plus:after{display:none;} #sub_faq .faq_ask_box .ui-icon-minus:after{display:none; } #sub_faq .faq_ask_box .ui-icon-minus .title{color:#e84d7d; font-weight:bold;} #sub_faq .faq_ask_box li .top{display:flex;margin-bottom:8px;} #sub_faq .faq_ask_box li .top p{float:left;} #sub_faq .faq_ask_box li .top .kind{width:90px; padding-right:5px; font-size:0.9em; line-height:1.5;color:var(--sub2-ft-color);box-sizing:border-box;flex-shrink:0;} #sub_faq .faq_ask_box li .top .title{font-weight:500;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;flex:1 1 auto;} #sub_faq .faq_ask_box li .bottom p{float: right; font-size:0.9em; font-weight:normal; line-height:1.5;color:var(--main-ft-fc-color);} #sub_faq .faq_ask_box li .bottom .date{float: left; font-size:0.9em; font-weight:normal; line-height:1.5;color:var(--sub-ft-color);} /* #sub_faq .faq_ask_box li .bottom .complete{color:#e84d7d; font-weight:bold;}pink 버전 */ #sub_faq .faq_ask_box li .bottom .complete{color:var(--bg-fc-color); font-weight:bold;}/* white 버전 */ #sub_faq .faq_ask_box .quenask{display:none;background:#2C2C2C; } [color-theme="light"] #sub_faq .faq_ask_box .quenask{background-color:var(--opt2-bg-color);} #sub_faq .faq_ask_box .que_txt{padding:20px 30px; background:url(https://cdn.metoon.co.kr/mimg/icon_pna_que.png) no-repeat 10px 21px;border-bottom:1px solid var(--main-line-color);background-size: 13px;} /* #sub_faq .faq_ask_box .ask_txt{border-bottom: 1px solid #ddd; padding:20px 30px; background:url(https://cdn.metoon.co.kr/mimg/icon_pna_ans.png) no-repeat 10px 21px;background-size: 13px;}pink 버전 */ #sub_faq .faq_ask_box .ask_txt{/* border-bottom: 1px solid var(--main-line-color); */padding:20px 30px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_pna_ans.png) no-repeat 10px 21px;background-size: 13px;}/* white 버전 */ #sub_faq .faq_ask_box .ask_btn{margin:10px auto; width:100%; text-align:right;} /* #sub_faq .faq_ask_box .ask_btn a{display:inline-block; padding:8px 10px; min-width:65px; background:#e84d7d; color:var(--main-ft-color); border-radius:3px;}pink 버전 */ #sub_faq .faq_ask_box .ask_btn a{display:inline-block; padding:8px 10px; min-width:65px; background:var(--bg-fc-color); color:var(--main-ft-color); border-radius:3px;}/* white 버전 */ #sub_faq .faq_ask_box .ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content{background:#eee;} #sub_faq .form_box form{width:100%; padding:10px; overflow:hidden; /* background:#fff; border:1px solid #ddd; border-radius:3px; */ box-sizing: border-box;} #sub_faq .form_box form>div{overflow:hidden; margin:10px auto; width:100%;} #sub_faq .form_box form>div+div{margin-top:20px;} #sub_faq .form_box label{margin: 7px 0; display:inline-block; float:left; width:23%; font-size: 14px; text-indent:12px; background:url(https://cdn.metoon.co.kr/mimg/icon_my_data_dot1.png) no-repeat 0 center; font-weight:500; background-size:4px;} #sub_faq .form_box .ask_contents_box label{margin:0;} #sub_faq .form_box .ui-select{margin:0;} #sub_faq .form_box #ask_select{padding: 8px; font-size: 1em; font-weight: normal; text-align: left; background: var(--opt-bg-color); width: 75%; border:1px solid var(--main-line-color); color:#ABABAB;} #sub_faq .form_box .ui-input-text{display:inline-block; float:left; width:77%; margin:0; box-shadow: none;} #sub_faq .form_box input{padding: 8px; font-size: 1em; font-weight: normal; text-align: left; background: var(--opt-bg-color); width: 75%; border:1px solid var(--main-line-color); color:#ABABAB;} #sub_faq .form_box #ask_contents{resize: none; box-shadow: none; height:150px !important; overflow-y: auto; background:var(--opt-bg-color); width: 75%;padding:10px;border:1px solid var(--main-line-color); color:#ABABAB;} [color-theme="light"] #sub_faq .form_box #ask_select, [color-theme="light"] #sub_faq .form_box input, [color-theme="light"] #sub_faq .form_box #ask_contents{color:var(--main-ft-color);} #sub_faq .form_box .form_btn{margin:10px auto; width:100%; text-align:center;} #sub_faq .form_box .form_btn a{display:inline-block; padding:8px 10px; min-width:65px; color:var(--main-ft-color); border-radius:3px; margin:0 5px;} /* #sub_faq .form_box .form_btn .send{background:#e84d7d;}pink 버전 */ #sub_faq .form_box .form_btn .send{background:var(--bg-fc-color);}/* white 버전 */ #sub_faq .form_box .form_btn .cancel{background:#56606b;} .ui-content .ask_select_box .ui-icon-carat-d:after{background:url(https://cdn.metoon.co.kr/mimg/icon_select_btn.png) no-repeat center;} #sub_faq .form_box #ask_select:focus, #sub_faq .form_box input:focus, #sub_faq .form_box #ask_contents:focus{border-color:var(--main-ft-fc-color);} @media all and (min-width:320px) and (max-width:360px){ #content_wrap #sub_faq .cont_title{font-size: 1.2em; margin: 15px auto 10px;} #sub_faq .title_box ul li a{font-size:0.9em;} #sub_faq .faq_notice_box li h1{font-size: 0.9em;} #sub_faq .qna_tab li{font-size: 0.9em;} #sub_faq .faq_qna_box li h1 a{font-size: 1em;} #sub_faq .faq_ask_box li h1 a{font-size: 1em;} #sub_faq .form_box #ask_contents{height: 100px !important;} #sub_faq .form_box form{font-size: 0.9em;} } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_faq .cont_title{font-size: 1.6em;} #sub_faq .faq_notice_box li h1 a{font-size:1.4em;} #sub_faq .faq_notice_box .ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content{font-size:1.3em;} #sub_faq .qna_tab li{font-size:1.1em;} #sub_faq .faq_qna_box li h1 a{font-size:1.4em;} #sub_faq .faq_qna_box .ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content{font-size: 1.3em;} #sub_faq .faq_ask_box li h1 a{font-size: 1.4em;} #sub_faq .faq_ask_box li .top .kind{min-width: 115px;} #sub_faq .faq_ask_box .ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content{font-size: 1.3em;} #sub_faq .form_box #ask_contents{height: 200px !important;} #sub_faq .form_box form{font-size: 1.1em;} #sub_faq .faq_ask_box .ask_btn a{font-size: 1.1em;} #sub_faq .form_box .form_btn a{font-size: 1.1em;} } /* 서브 자주하는질문 */ @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #content_wrap #sub_faq .cont_title{font-size: 1.2em;margin: 5px auto 10px;} } @media screen and (orientation:landscape) and (max-width:780px){ #content_wrap #sub_faq .cont_title{font-size: 1.2em;margin: 5px auto 10px;} } @media screen and (orientation:landscape) and (max-width:667px){ #sub_faq .faq_qna_box li h1 a{font-size: 1em;} #sub_faq .faq_qna_box .ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content{font-size: 1.1em; line-height: 1;} #sub_faq .title_box ul li a{font-size: 1.1em;} #sub_faq .faq_notice_box li h1 a{font-size: 1em;} #sub_faq .qna_tab li{font-size: 1em;} #sub_faq .faq_ask_box .ask_btn a{font-size: 1em;} #sub_faq .form_box form{font-size: 1em;} #sub_faq .form_box .form_btn a{font-size: 1em;} #sub_faq .faq_ask_box .ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content{font-size: 1.1em; line-height: 1;} #sub_faq .faq_ask_box li h1 a{font-size: 1.2em;} #sub_faq .faq_notice_box .ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content{font-size: 1em;} } @media screen and (orientation:landscape) and (max-width:570px){ } @media screen and (orientation:landscape) and (max-width:480px){ #sub_faq .faq_qna_box li h1 a{font-size: 1em;} #sub_faq .faq_qna_box .ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content{font-size: 1.1em; line-height: 1;} } /* 서브 고객센터 */ /* 서브 이벤트 */ #sub_event .sub_event_tab{width:96%; position:relative; margin:0 auto; border-radius:5px; overflow:hidden; border:1px solid #ddd; font-size: 0.95em; font-weight: normal;} #sub_event .sub_event_tab ul{float:left; width:100%; background:#fff;} #sub_event .sub_event_tab li{float:left; width:50%; text-align:center;} #sub_event .sub_event_tab li a{font-size:1.2em; display:block; padding:6px 0 10px; font-weight:bold; color:#9e9e9e;} #sub_event .sub_event_tab li .on{color:#E84D7D;} #sub_event .on_line{position:absolute; bottom:0; width:50%; border:1px solid #E84D7D;} #sub_event .ui-btn-icon-right:after{display:none;} #sub_event .event_cont {width: 97%; margin: 0 auto 15px; overflow:hidden;} /* #sub_event .event_cont .event_cont_list{box-shadow:none; margin: 5px 0; border-radius:0;} #sub_event .event_cont .event_cont_list li{padding:5px 0 10px; margin: 7px auto; border-bottom: 1px solid #ddd;} #sub_event .event_cont .event_cont_list li a{display: block; width:100%; position: relative; overflow: hidden; border-radius: 6px; padding:0; margin:0 auto; min-height:auto; background:none; border: none;} #sub_event .event_cont .event_cont_list li img{max-width:100%; width:100%; max-height: none; position: static;} #sub_event .event_cont .event_cont_list li.end_event img{filter:grayscale(100%); -webkit-filter:grayscale(100%); -ms-filter:grayscale(100%);} #sub_event .event_cont .event_cont_list li p{background:none; margin:0; padding:0 5px; font-size:0.9em; color:#2e2e2e; letter-spacing:-0.06em;} #sub_event .event_cont .event_cont_list li span{width:100%; display:block; font-size: 1.0em; line-height: 1.3; } #sub_event .event_cont .event_cont_list li .title{font-weight:bold; font-size:1.2em; margin:5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_event .event_cont .event_cont_list li .date{margin:7px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color:#676767; font-weight:bold; letter-spacing:0.03em;} #sub_event .event_cont .event_cont_list li .rank_num{width: 25px; height: 40px; text-align: center; padding-top: 5px; margin:0; position:absolute; top:0; left:0; color:var(--main-ft-color); background:url(https://cdn.metoon.co.kr/mimg/rank_bg.png) no-repeat center 0; background-size:100%;} #sub_event .best_cont .event_cont_list li .rank_1{background:url(https://cdn.metoon.co.kr/mimg/rank_bg_01.png) no-repeat center 0; background-size:100%;} #sub_event .event_end_cont{display:none;} @media all and (min-width:320px) and (max-width:360px){ #sub_event .event_cont .event_cont_list li p{font-size: 0.9em;} } @media all and (min-width:435px) and (max-width:600px){ } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_event .cont_title{font-size: 1.6em;} #sub_event .event_cont .event_cont_list li a{min-height: inherit; position: relative;} #sub_event .event_cont .event_cont_list li img{float: left;width: 50%;} #sub_event .event_cont .event_cont_list li p{position: absolute; left: 410px; top: 0; bottom: 0; margin: auto; height: 95px;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #sub_event .event_cont .event_cont_list li{width:31%; margin:7px 1%; float:left;} } @media screen and (orientation:landscape) and (max-width:780px){ #sub_event .event_cont .event_cont_list li img{width:100%; border-radius: 5px;} #sub_event .event_cont .event_cont_list li{width: 48%; margin: 0 1%; float: left; min-height: 145px; padding-top:10px;} #sub_event .event_cont .event_cont_list li a{min-height: 145px;font-size: 1em;} #sub_event .event_cont .event_cont_list li p{position: static; height: auto;} } @media screen and (orientation:landscape) and (max-width:667px){ #sub_event .event_cont .event_cont_list li img{width:100%; border-radius: 5px;} #sub_event .event_cont .event_cont_list li{width: 48%; margin: 0 1%; float: left; min-height: 145px; padding-top:10px;} #sub_event .event_cont .event_cont_list li a{min-height: 145px;font-size: 1em;} #sub_event .event_cont .event_cont_list li p{position: static; height: auto;} } @media screen and (orientation:landscape) and (max-width:570px){ #sub_event .event_cont .event_cont_list li{width: 48%; margin: 0 1%; float: left; min-height: auto; padding-top:10px;} #sub_event .event_cont .event_cont_list li a{min-height: auto;font-size: 1em;} } @media screen and (orientation:landscape) and (max-width:480px){ #sub_event .event_cont .event_cont_list li{width: 48%; margin: 0 1%; float: left; min-height: auto; padding-top:10px;} #sub_event .event_cont .event_cont_list li a{min-height: auto;font-size: 1em;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #sub_event .event_cont .event_cont_list li {width: 31%; margin: 7px 1%; float: left;} } */ /* 서브 이벤트 */ /* 이벤트 페이지 탭메뉴 추가 20181106 */ .event_tab{width:100%; background:#fff; border-bottom:1px solid #ddd; margin:2px auto 0; overflow:hidden;} .event_tab li{width:25%; float:left;} .event_tab li a{display:block; width:100%; background:#fff; border-bottom:2px solid #fff; text-align:center; font-size:1.154em; font-weight:normal; color:#4e4e4e; letter-spacing:-1px; padding:10px 0 6px; transition:all 0.2s ease; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease;} .event_tab li a.on{color:var(--bg-fc-color); border-bottom:2px solid var(--bg-fc-color);} /* 이벤트 페이지 탭메뉴 추가 20181106 END */ /* 서브 마이페이지 공통 */ #sub_mypage .cont_title{display:none;} #sub_mypage .cont_wrap{width: 96%; overflow: hidden; margin: 0 auto; padding:0; position:relative;} #sub_mypage .my-cont-wrap{width:100%;} #sub_mypage .mypage_cont{width:100%;padding:7px 0;border-top:1px solid var(--main-line-color);} #sub_mypage .mypage_cont:first-child{border-top:0 none;} #sub_mypage .mypage_cont:not(.no-bg){background-color:#FFFFFF; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} #sub_mypage .mypage_cont p{text-shadow:none;} #sub_mypage .mypage_cont .title_box{height:36px; line-height:36px; position:relative; padding:0 15px;/* margin-bottom:7px; */} #sub_mypage .mypage_cont .title_box p{color:var(--main-ft-color); font-size:1.2em;font-size:1em; text-align:center; text-indent: 0; position: relative; margin:0 auto; display: inline-block; padding: 0;} #sub_mypage .mypage_cont .title_box.white p{color:var(--main-ft-color);} #sub_mypage .mypage_cont .title_box p span{ display:inline-block; vertical-align:text-bottom; margin-right: 8px;} #sub_mypage .mypage_cont .btn_close{position:absolute; right:8px; top:0; bottom:0; margin:auto; background:url("https://cdn.metoon.co.kr/mimg/ico_close.svg") no-repeat center; width:18px; height:18px; display:block; overflow:hidden; text-indent:-99999999em; background-size:18px; } #sub_mypage .mypage_cont .btn_add{position:absolute; right:8px; top:7px; background:url("https://cdn.metoon.co.kr/mimg/btn_add.svg") no-repeat center 45%; background-size:18px; width:23px; height:23px; display:block; overflow:hidden; text-indent:-99999999em;} [color-theme="light"] #sub_mypage .mypage_cont .btn_add{background-image:url("https://cdn.metoon.co.kr/mimg/btn_add_ctlgt.svg");} #sub_mypage .clpage_cont .title_box{background:#404040;border:1px solid #404040; border-radius:3px 3px 0 0;} #sub_mypage .clpage_cont .btn_close{right:8px; width:18px; height:18px; background-size:18px;} #sub_mypage .mypage_cont .con_box{position:relative; padding:0 8px 10px;} #sub_mypage .mypage_cont:not(.my_data) .con_box{overflow: hidden;} .ui-content #sub_mypage .ui-listview{margin:0;} .ui-content #sub_mypage .ui-listview div{display:inline-block; width:100%; padding:5px; margin:0; background: #fff; box-shadow: none; font-size: 1em; text-align: left; letter-spacing:-0.025em;} .ui-content #sub_mypage .ui-listview #select_detail_title-button{width:100%;} .ui-content #sub_mypage .ui-listview .ui-select{padding: 5px 0;} .ui-content #sub_mypage .ui-icon-carat-d:after{background:url(https://cdn.metoon.co.kr/mimg/icon_select_btn.png) no-repeat center} .ui-content #sub_mypage .ui-select .ui-btn>span:not(.ui-li-count){color:#676767;padding-right: 30px;} /*#sub_mypage .my_data .title_box{border:1px solid var(--bg-fc-color); border-radius: 3px 3px 0 0;}*//* white 버전 */ #sub_mypage .my_data .title_box p{text-indent:0; color:#c53232;color:var(--main-ft-color);} #sub_mypage .my_data .title_box p span{width:14px; height:18px; background:url("https://cdn.metoon.co.kr/mimg/ico_settings.svg") no-repeat center; background-size:14px; margin-right:9px;} #sub_mypage .my_data .con_box{padding-bottom:0;} #sub_mypage .my_data .con_box p{font-size:1.1em; margin-bottom:14px; text-indent:10px;display: block; background:url(https://cdn.metoon.co.kr/mimg/icon_my_data_dot1.png) no-repeat 0 center; background-size:4px;color:#C1C1C1;} #sub_mypage .my_data .con_box p:first-child{margin-top:0;} #sub_mypage .my_data .con_box > p{position:relative;width:100%;padding-right:100px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} #sub_mypage .my_data .con_box .user_email{font-weight:500; overflow: hidden; display: inline-block; max-width: calc(100% - 48px); white-space: nowrap; text-overflow: ellipsis; vertical-align: text-top;text-indent:0;} #sub_mypage .my_data .con_box .user_email img{vertical-align: text-bottom; width: 16px; margin:0 5px 0 15px;} #sub_mypage .my_data .con_box .nick_txt{font-size:1.1em; margin-bottom:14px; text-indent:10px;display: block; background:url(https://cdn.metoon.co.kr/mimg/icon_my_data_dot1.png) no-repeat 0 center; background-size:4px;color:#C1C1C1;} #sub_mypage .my_data .con_box .user_nick{color:var(--main-ft-color); margin-left:10px; font-weight:normal; letter-spacing:0em; overflow: hidden; display: inline-block; max-width: calc(100% - 160px); white-space: nowrap; text-overflow: ellipsis; vertical-align: text-top;text-indent:0;} #sub_mypage .my_data .con_box .user_coin{color:#e83131; margin-left:10px; font-weight:bold;}/* white 버전 */ #sub_mypage .my_data .con_box .adult_cert_btn{padding: 3px 5px 2px; background: #f21439; border-radius: 3px; color: #fff; margin-left: 3%; font-weight:normal;} #sub_mypage .my_data .con_box .adult_cert_clear_btn{padding: 3px 5px 2px; background: #c6c6c6; border-radius: 3px; color: #757575; margin-left: 3%; font-weight:normal;} #sub_mypage .my_data .con_box .adult_cert_btn span{background:#fff; border-radius:35px; color:#2d2d2d; padding:2px 5px 0px 3px; margin-right:3px; font-size:0.9em; font-weight:bold;} #sub_mypage .my_data .con_box .adult_cert_clear_btn span{color:var(--main-ft-color); background:#808080; border-radius:35px; padding:2px 5px 0px 3px; margin-right:3px; font-size:0.9em; font-weight:bold;} /* #sub_mypage .nick_change_btn{float:left; margin:10px 5px 10px 0; display:inline-block; text-align:center; background:#e84d7d; padding:4px 0 3px; min-width:80px; border-radius:3px; color:var(--main-ft-color); font-size:0.9em; letter-spacing:-0.025em;}pink버전 */ #sub_mypage .nick_change_btn{float:left; margin:6px 0 6px 8px; display:inline-block; text-align:center; background:var(--bg-fc-color); padding:4px 0 3px; min-width:80px; border-radius:3px; color:var(--main-ft-color); font-size:0.9em; letter-spacing:-0.025em;}/* white버전 */ /* #sub_mypage .writeruser_page_btn{float:left; margin:10px 0; display:inline-block; text-align:center; border: 1px solid #e84d7d; background:#fff; padding:3px 5px 2px; min-width:85px; border-radius:3px; color:#e84d7d; font-size:0.9em; letter-spacing:-0.025em; box-sizing: border-box;}pink 버전 */ #sub_mypage .writeruser_page_btn{float:left; margin:6px 0 6px 8px; display:inline-block; text-align:center; border: 1px solid var(--bg-fc-color); background:#fff; padding:3px 5px 2px; min-width:85px; border-radius:3px; color:var(--bg-fc-color); font-size:0.9em; letter-spacing:-0.025em; box-sizing: border-box;}/* white 버전 */ #sub_mypage .my_data .con_box .my_coin_data{position:absolute; right:0%; bottom:-3px;} #sub_mypage .my_data .con_box .my_coin_data a{font-size: 12px; display:block; text-align:center; padding:3px 0 4px; background:#e84d7d; border-radius:3px; color:var(--main-ft-color); font-weight:normal;text-indent:0; min-width:80px; width: 75%; max-width: 110px;} #sub_mypage .my_data .con_box p.wt_pass_p{position:relative;} #sub_mypage .my_data .con_box p .wt_pass_date{margin-left:1%; color:#676767; font-weight:normal; letter-spacing:0em; overflow:hidden; display:inline-block; white-space:nowrap; text-overflow:ellipsis; vertical-align:top; min-width:116px;} #sub_mypage .my_data .con_box p.wt_pass_p .we_pass_fix_btn{font-size:13px; display:block; text-align:center; padding:3px 0 2px; background:#c53232; color:var(--main-ft-color); border-radius:3px; font-weight:normal; letter-spacing:-0.025em; min-width:50px; width:80px; position:absolute; right:0; bottom:-3px;} .subexc_btn{position:absolute;top:0;right:0;width:48px;height:22px;background-size:auto 100%;background-position:right center;background-repeat:no-repeat;background-image:url(https://cdn.metoon.co.kr/mimg/adult_off_bg.png);text-indent:-9999px;font-size:0;} .subexc_btn:before, .subexc_btn:after{content:"";display:block;position:absolute;top:50%;border-radius:50%;} .subexc_btn:before{left:6px;width:14px;height:14px;background:#fff;margin-top:-7px;} .subexc_btn:after{left:9px;width:8px;height:8px;background:#dadada;margin-top:-4px;} .subexc_btn.on{background-image:url(https://cdn.metoon.co.kr/mimg/adult_on_bg.png);} .subexc_btn.on:before{left:auto;right:6px;} .subexc_btn.on:after{left:auto;right:9px;background:#d52b2c;} #sub_mypage .my_data .coinpop_btn{position:absolute;top:0;right:0;width:48px;height:22px;background-size:auto 100%;background-position:right center;background-repeat:no-repeat;background-image:url(https://cdn.metoon.co.kr/mimg/adult_off_bg.png);text-indent:-9999px;font-size:0;} #sub_mypage .my_data .coinpop_btn:before, #sub_mypage .my_data .coinpop_btn:after{content:"";display:block;position:absolute;top:50%;border-radius:50%;} #sub_mypage .my_data .coinpop_btn:before{left:6px;width:14px;height:14px;background:#fff;margin-top:-7px;} #sub_mypage .my_data .coinpop_btn:after{left:9px;width:8px;height:8px;background:#dadada;margin-top:-4px;} #sub_mypage .my_data .coinpop_btn.on{background-image:url(https://cdn.metoon.co.kr/mimg/adult_on_bg.png);} #sub_mypage .my_data .coinpop_btn.on:before{left:auto;right:6px;} #sub_mypage .my_data .coinpop_btn.on:after{left:auto;right:9px;background:#d52b2c;} #sub_mypage .my_data_wrap{overflow: hidden;} #sub_mypage .switch_user_acc{text-align:right; margin:6px 0; padding:0 8px;} #sub_mypage .switch_user_acc a{display:inline-block; text-align:center; background:#56606b; padding:3px 0 4px; min-width:80px; border-radius:3px; color:var(--main-ft-color); font-size:0.9em; letter-spacing:-0.025em;} /* #sub_mypage .switch_user_acc .switch_pw{margin-right:2%;} */ /* #sub_mypage .switch_user_acc .switch_acc{margin-right:2%; display:none;} */ #sub_mypage .my_payment .title_box p{text-indent:0;} #sub_mypage .my_payment .title_box p span{width:23px; height:22px; background:url(https://cdn.metoon.co.kr/mimg/icon_my_payment.png) no-repeat center; background-size:22px;} #sub_mypage .my_payment{margin:5px auto 10px;} #sub_mypage .my_payment .con_box{padding:10px 5px;} #sub_mypage .my_payment ul{width:100%; overflow:hidden;} #sub_mypage .my_payment .list_title{border-top:1px solid #eee; border-bottom:1px solid #eee; font-weight:bold;} #sub_mypage .my_payment ul li{float:left; width:25%; text-align:center; padding:10px 0 5px;} #sub_mypage .my_payment .list_cont li{ border-bottom:1px solid #eee;} #sub_mypage .my_data .myp_memvip_btn{display:block;position:absolute;bottom:0;right:0;width:80px;padding:4px 0 3px;text-align:center;font-size:12px;line-height:1.4;font-weight:normal;border-radius:3px;letter-spacing:-0.03em;} #sub_mypage .my_data .myp_freeC_btn{position:absolute;top:0;right:0;display:inline-block;padding:3px 6px 4px;font-size:12px;font-weight:normal;border-radius:3px;text-indent:0;letter-spacing:-0.03em;font-weight:normal;} @media all and (max-width:359px){ #sub_mypage .my_data .con_box .user_nick{max-width:45%;} #sub_mypage .my_data .con_box p.wt_pass_p .we_pass_fix_btn{max-width:60px; width:auto;} } /* 20180220 수정 */ /* 마이페이지 결제 내역 */ #sub_mypage .mypage_cont_csb{width:100%;/* background-color:#FFFFFF; */ padding:7px 0;border-top:1px solid var(--main-line-color); /* border-bottom:1px solid #ddd; */} #sub_mypage .mypage_cont_csb .title_box_csb {height:36px; line-height:36px; position:relative; padding:0 15px;margin-bottom:7px;} #sub_mypage .mypage_cont_csb .title_box_csb p{color:var(--main-ft-color); font-size:1em; text-align:center; text-indent: 0; position: relative; margin:0 auto; display: inline-block; padding: 0;} #sub_mypage .mypage_cont_csb .title_box_csb p span{ display:inline-block; vertical-align:text-top; margin-right: 8px;} #sub_mypage .my_payment_csb .title_box_csb p span {width:18px; height:18px; background:url("https://cdn.metoon.co.kr/mimg/icon_my_payment.svg?1") no-repeat center; background-size:17px;} [color-theme="light"] #sub_mypage .my_payment_csb .title_box_csb p span{background-image:url("https://cdn.metoon.co.kr/mimg/icon_my_payment_ctlgt.svg?1");} #sub_mypage .my_payment_csb{margin:35px auto 6px;} #sub_mypage .mypage_cont_csb .btn_add{position:absolute; right:8px; top:50%; background:url("https://cdn.metoon.co.kr/mimg/btn_add.svg") no-repeat center 45%; background-size:18px; width:23px; height:23px; display:block; overflow:hidden; text-indent:-99999999em;transform:translateY(-50%);} [color-theme="light"] #sub_mypage .mypage_cont_csb .btn_add{background-image:url("https://cdn.metoon.co.kr/mimg/btn_add_ctlgt.svg");} #sub_mypage .mypage_cont_csb .con_box_csb {position:relative; padding:0 8px 10px; overflow:hidden; } #sub_mypage .mypage_cont_csb .payment_list_csb { display:table; width:100%; } #sub_mypage .my_payment_csb .list_title_csb { font-weight:500; } #sub_mypage .my_payment_csb .list_title_csb li { border-top:1px solid var(--main-line-color); border-bottom:1px solid var(--main-line-color); padding:8px 0 7px; background-color:#2E2E2E; color:#ABABAB;} #sub_mypage .my_payment_csb ul { display:table-row; width:100%; overflow:hidden; } #sub_mypage .my_payment_csb ul li { display:table-cell; text-align:center; padding:10px 0 5px; clear:left; width:auto; color:var(--sub2-ft-color); } #sub_mypage .my_payment_csb .list_cont_csb { display:table-row; } #sub_mypage .my_payment_csb .list_cont_csb li { /* border-bottom:1px solid #eee; */ } /* 결제 내역 */ #sub_mypage #payment .con_box_csb{/* background:#fff; border:1px solid #eee; border-top:0 none; border-radius:0 0 3px 3px; */ position:relative; padding:25px 20px;background-color:#2E2E2E;border:1px solid var(--main-line-color);} [color-theme="light"] #sub_mypage #payment .con_box_csb{background-color:var(--main-bg-color);} #sub_mypage .my_payment_list_csb .con_box_csb{padding:10px 5px;} #sub_mypage .my_payment_list_csb ul{width:100%; overflow:hidden;} #sub_mypage .my_payment_list_csb .list_title_csb{/* border-top:1px solid #eee; */ border-top:1px solid var(--main-line-color);border-bottom:1px solid var(--main-line-color);background-color:#2A2A2A; font-weight:500;color:#ABABAB;} #sub_mypage .my_payment_list_csb .list_title_csb > li:last-child { width:40%; } #sub_mypage .my_payment_list_csb ul li{float:left; width:20%; text-align:center; padding:10px 0;} #sub_mypage .my_payment_list_csb ul li ul > li:last-child { width:40%; } #sub_mypage .my_payment_list_csb .co_link{font-weight:500;color:var(--main-ft-fc-color);text-decoration:underline;} #sub_mypage .my_payment_list_csb .list_cont_csb > li{width:100%;border-bottom:1px solid #eee;} #sub_mypage .my_payment_list_csb .list_cont_csb > li:last-child{border-bottom:0 none;} #sub_mypage .my_payment_list_csb .list_cont_csb ul{width:100%;display:flex;align-items:center;} .pay_clearing_btn{display:inline-block;padding:4px 12px;border:1px solid var(--main-ft-fc-color);border-radius:4px;background-color:var(--opt-bg-color);font-size:13px;color:var(--main-ft-fc-color);line-height:1.2;transition:0.15s;} .pay_clearing_btn:hover{background-color:var(--main-ft-fc-color);color:var(--main-bg-color);} /* END */ #sub_mypage .my_nobel_data .title_box p{text-indent:0;} #sub_mypage .my_nobel_data .title_box p span{width:18px; height:18px; background:url("https://cdn.metoon.co.kr/mimg/icon_my_nobel_data.svg") no-repeat center; background-size:18px;} [color-theme="light"] #sub_mypage .my_nobel_data .title_box p span{background-image:url("https://cdn.metoon.co.kr/mimg/icon_my_nobel_data_ctlgt.svg");} #sub_mypage .my_nobel_data ul li{border:none; padding:0; border-bottom: 1px solid #eee;float: left; position:relative; width:100%;} #sub_mypage .my_nobel_data ul li a{display:block; width:100%; overflow:hidden;} #sub_mypage .my_nobel_data ul .img_box{width:30%; overflow:hidden; border-radius:5px; margin:10px 0; float:left; position:relative;} #sub_mypage .my_nobel_data ul .img_box a{display:block;} #sub_mypage .my_nobel_data ul .img_box img{display:block; width:100%;border-radius:5px;} #sub_mypage .my_nobel_data ul .img_box .novel_img{position:absolute; top:0; left:0; right:0;} #sub_mypage .my_nobel_data ul p{font-size:1.0em; color:#676767; padding: 0 3px; width:100%; float:left; letter-spacing:-0.025em; } #sub_mypage .my_nobel_data ul .title{float:left; font-size:1.1em;width: 70%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} #sub_mypage .my_nobel_data ul .detail_title{font-weight:bold; font-size:1.15em; margin-top: 10px;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} #sub_mypage .my_nobel_data ul .writer{float:right; font-size:1em; max-width:30%; padding-right:3px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} #sub_mypage .my_nobel_data ul .cont_box{width: 70%;float: left;position:absolute; top:0; bottom:0; right:0; margin:auto; padding:15px 10px;} #sub_mypage .my_nobel_data ul .day{text-align:right; position: absolute; right: 5px; bottom: 15px;} #sub_mypage .my_nobel_data ul .day span{color:#2c2c2c; margin-right:5px;} #sub_mypage .my_nobel_data{margin:35px auto 6px; overflow: hidden;} #sub_mypage .my_like_data .title_box p{text-indent:0;} #sub_mypage .my_like_data .title_box p span{width:18px; height:18px; background:url("https://cdn.metoon.co.kr/mimg/ico_list_subsc.svg?1") no-repeat center; background-size:18px;} #sub_mypage .my_like_data ul li{border:none; padding:0; border-bottom: 1px solid #eee;float: left; position:relative; width: 100%;} [color-theme="light"] #sub_mypage .my_like_data .title_box p span{background-image:url("https://cdn.metoon.co.kr/mimg/ico_list_subsc_ctlgt.svg?1");} #sub_mypage .my_like_data ul li.data_none{float:none; border-bottom:none; color:#999;} #sub_mypage .my_like_data ul li a{display:block; width:100%; overflow: hidden;} #sub_mypage .my_like_data ul .img_box{width:30%; overflow:hidden; border-radius:5px; margin:10px 0; float:left; position:relative;} #sub_mypage .my_like_data ul .img_box a{display:block;} #sub_mypage .my_like_data ul .img_box img{display:block; width:100%;border-radius:5px;} #sub_mypage .my_like_data ul .img_box .novel_img{position:absolute; top:0; left:0; right:0;} #sub_mypage .my_like_data ul p{font-size:1.0em; color:#676767; padding: 0 3px; width:100%; float:left; letter-spacing:-0.025em; } #sub_mypage .my_like_data ul .title{float:left; font-size:1.1em;width: 70%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} #sub_mypage .my_like_data ul .detail_title{font-weight:bold; font-size:1.1em;} #sub_mypage .my_like_data ul .writer{float:right; font-size:1em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} #sub_mypage .my_like_data ul .cont_box{width: 70%;float: left;position:absolute; top:0; bottom:0; right:0; margin:auto; padding:15px 10px;} #sub_mypage .my_like_data ul .day{text-align:right; position: absolute; right: 5px; bottom: 15px;} #sub_mypage .my_like_data ul .day span{color:#2c2c2c; margin-right:5px;} #sub_mypage .my_like_data{margin:35px auto 6px; overflow: hidden;} /* 성별 탭 */ .mypage_gender_tab{display: inline-block; float:right; text-align:center; position:relative;border:1px solid #505050; border-radius: 20px; overflow: hidden; width: 90px; background:url(https://cdn.metoon.co.kr/mimg/gender_tabbg2.png) no-repeat center;background:#303030; margin-top: -5px; margin-left: 10px; background-size:100%;text-indent:0;} [color-theme="light"] .mypage_gender_tab{border:1px solid var(--main-line2-color);background:#f5f5f5;} .usaccset_comm_con .mypage_gender_tab{margin:0;} .mypage_gender_tab span{display: inline-block; width:26px; letter-spacing: -0.025em;} .mypage_gender_tab span label{margin:auto; display:block; width:26px; padding:5px 0 5px; color:#b3b3b3; text-align: center; font-size: 12px;} /* .mypage_gender_tab span.man_tab{float: left;} .mypage_gender_tab span.woman_tab{float: right;} */ .mypage_gender_tab span.man_tab .check{background:url(https://cdn.metoon.co.kr/mimg/man_tabbg2.png) no-repeat center; color:#FFF; background-size:100%;} .mypage_gender_tab span.all_gender_tab .check{background:url(https://cdn.metoon.co.kr/mimg/allgender_tabbg2.png) no-repeat center; color:#FFF; background-size:100%;} .mypage_gender_tab span.woman_tab .check{background:url(https://cdn.metoon.co.kr/mimg/woman_tabbg2.png) no-repeat center; color:#FFF; background-size:100%;} .mypage_gender_tab input{position:absolute; top:0; left:0; z-index:-5; opacity:0;} /* 성별 탭 */ @media all and (min-width:320px) and (max-width:360px){ #content_wrap #sub_mypage .cont_title{font-size: 1.2em; /* margin: 5px auto 10px; */} .ui-content #sub_mypage .ui-listview .ui-select{padding: 0;} #sub_mypage .my_nobel_data ul p{font-size:0.9em;} #sub_mypage .my_nobel_data ul .detail_title{font-size:1.05em;} } @media all and (min-width:435px) and (max-width:600px){ .ui-content #sub_mypage .ui-listview .cont_box{height: 150px; position: absolute; top: 0; bottom: 0; margin: auto;} .ui-content #sub_mypage .ui-listview p{font-size: 1.1em; padding: 0 5px;} .ui-content #sub_mypage #select_detail_title-button{font-size: 1.1em;} .ui-content #sub_mypage .ui-listview .day{font-size:1.05em;} #sub_mypage .my_like_data ul .img_box{padding:10px;} #sub_mypage .my_like_data ul .cont_box{padding:5% 3%; font-size: 1.1em;} #sub_mypage .my_like_data ul .title{font-weight:bold;} #sub_mypage .my_like_data ul .day{right:3%; bottom:15%;} #sub_mypage .my_nobel_data ul .img_box{padding:10px;} #sub_mypage .my_nobel_data ul .cont_box{padding:5% 3%; font-size: 1.1em;} #sub_mypage .my_nobel_data ul .title{ font-size: 1.1em;} #sub_mypage .my_nobel_data ul .detail_title{font-size: 1.2em; margin-top: 5%;} #sub_mypage .my_nobel_data ul .day{right:3%; bottom:15%;} } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_mypage .cont_title{font-size: 1.6em;} #sub_mypage .mypage_cont .title_box p{/* font-size: 1.2em; padding: 5px 0 5px; background-size:19px; padding-left: 20px; */} #sub_mypage .mypage_cont .con_box{/*font-size: 1.1em;*/} #sub_mypage .my_data .con_box p{/*font-size: 1.2em;*/} #sub_mypage .my_data .con_box .my_coin_data a{font-weight:bold; min-width: 110px; padding: 7px 0 7px;} /* #sub_mypage .switch_user_acc{font-size: 1.3em;} */ /* #sub_mypage .switch_user_acc a{min-width: 110px; padding: 7px 0 7px;} */ #sub_mypage .mypage_cont .btn_add{right: 1%; margin: auto; bottom: 0; top: 0;} #sub_mypage .nick_change_btn{font-size: 1.3em; min-width: 110px; padding: 7px 0 7px;} .ui-content #sub_mypage .ui-listview .cont_box{height: 150px; position: absolute; top: 0; bottom: 0; margin: auto;} .ui-content #sub_mypage .ui-listview p{font-size: 1.1em; padding: 0 5px;} .ui-content #sub_mypage #select_detail_title-button{font-size: 1.1em;} .ui-content #sub_mypage .ui-listview .day{font-size:1.05em;} } @media screen and (orientation:landscape) and (max-width:667px){ #sub_mypage .nick_change_btn{font-size: 1em; font-weight: bold;} #sub_mypage .switch_user_acc .switch_pw{margin-right: 1%;} #sub_mypage .my_nobel_data ul .cont_box{padding: 4% 3%; padding-left:1%; font-size: 1em;} #sub_mypage .my_like_data ul .cont_box{padding: 4% 3%; padding-left:1%; font-size: 1em;} #sub_mypage .my_nobel_data ul .detail_title{margin-top: 6%;} #sub_mypage .my_nobel_data ul .day{bottom:8%; right:3%;} .ui-content #sub_mypage .my_like_data .ui-listview .cont_box{width: 50%; font-size: 0.9em; height: 140px;} .ui-content #sub_mypage .my_like_data .ui-listview p{font-size: 1em; margin-top: 0;} .ui-content #sub_mypage .my_like_data .ui-listview .title{display: block; width: 100%;} .ui-content #sub_mypage .my_like_data .ui-listview .day{position: absolute; bottom: 5px;} .ui-content #sub_mypage .my_like_data .ui-listview .detail_title{text-overflow: inherit; white-space: initial;} .ui-content #sub_mypage .my_like_data .ui-listview .img_box{width: 50%;} .ui-content #sub_mypage .my_like_data .ui-listview{overflow:hidden;} .ui-content #sub_mypage .my_like_data .ui-listview li{width: 50%; float: left; clear: none; min-height: 140px;} } @media screen and (orientation:landscape) and (max-width:480px){ .ui-content #sub_mypage .my_like_data .ui-listview .cont_box{width: 50%; font-size: 0.9em; height: 140px;} .ui-content #sub_mypage .my_like_data .ui-listview p{font-size: 1em; margin-top: 0;} .ui-content #sub_mypage .my_like_data .ui-listview .title{display: block; width: 100%;} .ui-content #sub_mypage .my_like_data .ui-listview .day{position: absolute; bottom: 5px;} .ui-content #sub_mypage .my_like_data .ui-listview .detail_title{text-overflow: inherit; white-space: initial;} .ui-content #sub_mypage .my_like_data .ui-listview .img_box{width: 50%;} .ui-content #sub_mypage .my_like_data .ui-listview{overflow:hidden;} .ui-content #sub_mypage .my_like_data .ui-listview li{width: 50%; float: left; clear: none; min-height: 140px;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #sub_mypage .pw_cont_wrap .pw_btn_box a{padding: 7px 3% 8px;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ /* #sub_mypage .my_like_data ul li{width: 48%; margin: 0 1%;} #sub_mypage .my_nobel_data ul li{width: 48%; margin: 0 1%;} */ } /* 서브 닉네임 */ #sub_nickname .cont_title{display:none;} #sub_nickname .nickname_cont_wrap .con_box{background:#2E2E2E; border:1px solid var(--main-line-color); position:relative; padding:10px 20px;} [color-theme="light"] #sub_nickname .nickname_cont_wrap .con_box{background-color:#FAFAFA;} #sub_nickname .nickname_cont_wrap{width: 96%; overflow: hidden; margin: 0 auto; padding:0; position:relative; padding:7px 0 5px;} #sub_nickname .nickname_cont_wrap .title_box{height:36px; line-height:36px; background:#404040; border:1px solid #404040;border-radius: 3px 3px 0 0; padding:0 15px; position:relative;} #sub_nickname .nickname_cont_wrap .title_box p{text-shadow:none; color:#FFF; font-size:1em; text-indent: 0; position:relative; display: inline-block;} #sub_nickname .nickname_cont_wrap .title_box span{display: inline-block; vertical-align: text-bottom; margin-right: 5px; background:url(https://cdn.metoon.co.kr/mimg/icon_nickname.png) no-repeat 37% 40%; background-size:18px; width: 18px; height: 18px;} #sub_nickname .nickname_cont_wrap .btn_close{position:absolute; right:8px; top:0; bottom:0; margin:auto; background:url("https://cdn.metoon.co.kr/mimg/ico_close.svg") no-repeat center; width:18px; height:18px; display:block; overflow:hidden; text-indent:-99999999em; background-size:18px; } #sub_nickname .nickname_cont_wrap .mypage_cont .con_box{padding:20px;} #sub_nickname .nickname_cont_wrap .con_box>div{width:90%; margin:15px auto 25px; text-align:center;} #sub_nickname .nickname_cont_wrap .con_box .title{color:#ABABAB;margin-bottom:10px;} [color-theme="light"] #sub_nickname .nickname_cont_wrap .con_box .title{color:#707070;} #sub_nickname .nickname_cont_wrap .con_box p{font-size:1.1em; font-weight:500; display:inline; line-height:1.5; } #sub_nickname .nickname_cont_wrap .con_box .title span{font-size:1.03em; vertical-align: middle; margin-right:3px;} #sub_nickname .nickname_cont_wrap .con_box .xtg_logo{height:1.1em;} #sub_nickname .nickname_cont_wrap .nick_form{margin:15px auto 20px; width:90%; position:relative;} #sub_nickname .nickname_cont_wrap .nick_form .del{position:absolute; right:5px; top:0; bottom:0; margin:auto; display: none; width: 20px; height: 20px;} #sub_nickname .nickname_cont_wrap .nick_form .del img{width: 100%; display: block;} #sub_nickname .nickname_cont_wrap .nick_form input{padding: 10px 28px 10px 10px; width:100%; border:1px solid #505050; border-radius:5px;background-color:var(--main-line-color);color:var(--main-ft-color);} [color-theme="light"] #sub_nickname .nickname_cont_wrap .nick_form input{background-color:#F1F1F1;} #sub_nickname .nickname_cont_wrap .nick_btn_box{width:100%; text-align:center; letter-spacing:-0.025em; padding-top:20px;} #sub_nickname .nickname_cont_wrap .nick_btn_box a{font-size:1.1em; display:inline-block; width:80px;padding:8px 7% 9px; color:var(--main-ft-color); border-radius:5px; margin:0 1%; font-weight:bold;} #sub_nickname .nickname_cont_wrap .nick_btn_box .ok{background:#e84d7d;} #sub_nickname .nickname_cont_wrap .nick_btn_box .cancel{background:#56606b;color:#FFF;} @media all and (min-width:320px) and (max-width:360px){ #content_wrap #sub_nickname .cont_title{font-size: 1.2em; margin: 5px auto 10px;} #sub_nickname .pw_cont_wrap .mypage_cont .con_box{padding: 15px;} #sub_nickname .pw_cont_wrap .con_box p{font-size: 0.95em;} #sub_nickname .pw_cont_wrap .pw_form{font-size: 0.9em; margin: 10px auto 15px;} #sub_nickname .pw_cont_wrap .pw_btn_box a{font-size: 1em;} } @media all and (min-width:435px) and (max-width:600px){ #sub_nickname .pw_cont_wrap .mypage_cont .con_box{padding: 30px;} #sub_nickname .pw_cont_wrap .pw_form{margin:25px auto 25px;} #sub_nickname .pw_cont_wrap .pw_form label{margin: 10px 0;} #sub_nickname .pw_cont_wrap .pw_btn_box a{font-size:1.2em;} #sub_nickname .nickname_cont_wrap .nick_form{width:65%;} } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_nickname .cont_title{font-size: 1.6em;} #sub_nickname .pw_cont_wrap .mypage_cont .con_box{padding: 30px 50px;} #sub_nickname .pw_cont_wrap .con_box p{font-size: 1.2em;} #sub_nickname .pw_cont_wrap .pw_form{margin: 30px auto 30px; font-size: 1.2em;} #sub_nickname .pw_cont_wrap .pw_form label{margin: 10px 0;} #sub_nickname .pw_form .new_pw_box{margin: 30px auto;} #sub_nickname .pw_cont_wrap .pw_btn_box{margin-bottom: 10px;} #sub_nickname .pw_cont_wrap .pw_btn_box a{font-size: 1.3em; padding: 9px 7% 10px;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #sub_nickname .nickname_cont_wrap .nick_btn_box a{padding: 7px 3% 8px;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #sub_nickname .nickname_cont_wrap .nick_btn_box a{padding: 7px 3% 8px;} } /* 서브 닉네임 */ /* 서브 찜목록 */ #sub_mypage #mylike{margin:0px auto 10px;} #sub_mypage #mylike .title_box p{color:var(--main-ft-color); font-size:1.15em; font-weight:bold; text-align:center; text-indent:0; padding-left:20px;} #sub_mypage #mylike .title_box p span{width:22px; height:22px; display:inline-block; vertical-align:middle; background:url(https://cdn.metoon.co.kr/mimg/icon_my_like_data.png) no-repeat center; background-size: 22px;} #sub_mypage #mylike .con_box{background:#fff; border:1px solid #eee; border-radius:0 0 3px 3px; position:relative; padding:5px 10px 10px; margin-top:1px;} #mylike ul{margin:0; border-top:1px solid #eee; overflow:hidden;} #mylike ul li{border:none; padding:0; border-bottom:1px solid #eee;float: left; width:100%;} #mylike ul div{display:inline-block; width:100%; padding:5px; margin:0; background: #fff; box-shadow: none; font-size: 1em; text-align: left; letter-spacing:-0.025em;} #mylike ul .img_box a{display:block; position:relative;} #mylike ul select{padding: 5px 0; width: 100%;border: 1px solid #ddd; border-radius: 5px; margin: 5% auto;} #mylike ul .img_box{width:30%; overflow:hidden; border-radius:5px; float: left;} #mylike ul .img_box img{width:100%; border-radius:5px; display:block;} #mylike ul .img_box .novel_img{position:absolute; top:0; left:0; right:0;} #mylike ul p{font-size:1.0em; font-weight:bold; color:#676767; padding: 0 3px;} #mylike ul .title{float:left; font-size:1.1em;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;width: 70%;} #mylike ul .writer{float:right; font-size:1em; max-width:30%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right:5px;} #mylike ul .cont_box{width: 70%;float: left; padding-top: 2%;} #mylike ul select:after{display:block; background:url(https://cdn.metoon.co.kr/mimg/icon_select_btn.png) no-repeat center;} .ui-content #mylike .ui-select .ui-btn>span:not(.ui-li-count){color:#676767;} #mylike ul .day{text-align:right;} #mylike ul .day span{color:#2c2c2c; margin-right:5px;} #mylike #select_like_detail_title .non_mynobel{color:#eee;} #mylike .mylike_pager{width:100%; text-align:center; margin:10px auto;font-size:1.1em} #mylike .mylike_pager a{color:#2c2c2c;} /* #mylike .mylike_pager .on{color:#E84D7D;}pink 버전 */ #mylike .mylike_pager .on{color:var(--bg-fc-color);}/* white 버전 */ #mylike .mylike_pager a{color:#747474; text-align:center; display:inline-block; padding:2px 6px;background:#fff; border:1px solid #eee;} #mylike .mylike_pager ul{ text-align:center; display:inline-block; border:none;} #mylike .mylike_pager ul li{display:inline-block; margin:0 3px; width:auto; border-bottom:none;} @media all and (min-width:320px) and (max-width:350px){ #mylike ul .cont_box{font-size:0.9em;} #mylike ul select{margin: 3% auto;} } @media all and (min-width:350px) and (max-width:360px){ #mylike ul .cont_box{font-size:0.9em;} } @media all and (min-width:435px) and (max-width:600px){ #sub_mypage #mylike .con_box{font-size: 1.1em;} #sub_mypage .mylike_pager{font-size: 1.1em;} #mylike ul .cont_box{padding-top:4%;} #mylike ul select{margin:5% auto;} } @media all and (min-width:601px) and (max-width:810px){ #sub_mypage #mylike .con_box{font-size: 1.1em;} #sub_mypage .mylike_pager{font-size: 1.2em;} #mylike ul li{width:48%; margin:0 1%; font-size: 0.9em;} } @media screen and (orientation:landscape) and (max-width:667px){ #mylike ul .cont_box{padding: 5% 3%; font-size: 1.1em;} #mylike ul select{margin: 7% 0;} #mylike ul li{width:100%;} } @media screen and (orientation:landscape) and (max-width:570px){ #mylike ul .cont_box{font-size: 0.9em;} #mylike ul select{margin:6% 0;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #mylike .like_data_list li{width: 48%; margin: 0 1%;} #mylike ul .cont_box{padding-top:6%;} #mylike ul select{margin:5% auto;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #mylike .like_data_list li{width: 48%; margin: 0 1%;} #mylike ul .cont_box{padding-top:4%;} #mylike ul select{margin:5% auto;} } /* 서브 찜목록 */ /* 서브 구매목록 */ #sub_mypage #mybuy .title_box p span{width:23px; height:23px; display:inline-block; vertical-align:middle; background:url(https://cdn.metoon.co.kr/mimg/icon_my_nobel_data.png) no-repeat center; background-size:23px;} #mybuy ul{margin:0; border-top:1px solid #eee; overflow:hidden;} #mybuy ul li{border:none; padding:0; border-bottom:1px solid #eee;float: left;width: 100%; text-align: center; } #mybuy ul div{display:inline-block; width:100%; padding:5px; margin:0; background: #fff; box-shadow: none; font-size: 1em; text-align: left; letter-spacing:-0.025em;} #mybuy ul .img_box a{display:block;} #mybuy ul select{padding: 5px 0; width: 100%;border: 1px solid #ddd; border-radius: 5px;margin:4.5% 0;} #mybuy ul .img_box{width:30%; overflow:hidden; border-radius:5px; float: left;} #mybuy ul .img_box img{width:100%;border-radius:5px;} #mybuy ul p{font-size:1.0em; font-weight:bold; color:#676767; padding: 0 3px;} #mybuy ul .title{float:left; font-size:1.1em;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;width: 70%;} #mybuy ul .writer{float:right; font-size:1em;text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width:30%; padding-right:5px;} #mybuy ul .cont_box{width: 70%;float: left;} #mybuy ul select:after{display:block; background:url(https://cdn.metoon.co.kr/mimg/icon_select_btn.png) no-repeat center;} #mybuy #select_detail_title .non_mynobel{color:#eee;} #mybuy ul .day{text-align:right;} #mybuy ul .day span{color:#2c2c2c; margin-right:5px;} @media all and (min-width:320px) and (max-width:350px){ #mybuy ul select{margin:2% 0;} } @media all and (min-width:400px){ #mybuy ul .cont_box{padding:3%;} } @media all and (min-width:600px){ #mybuy ul .cont_box{padding:5% 3%;} } @media all and (min-width:435px) and (max-width:600px){ #sub_mypage #mybuy .con_box{font-size: 1.1em;} #sub_mypage .mycoin_pager{font-size: 1.1em;} } @media all and (min-width:601px) and (max-width:810px){ #sub_mypage #mybuy .con_box{font-size: 1.1em;} #sub_mypage .mycoin_pager{font-size: 1.2em;} } @media screen and (orientation:landscape) and (max-width:667px){ #mybuy ul .cont_box{padding: 4% 3%; font-size: 1.1em;} #mybuy ul select{margin: 7% 0;} } @media screen and (orientation:landscape) and (max-width:570px){ #mybuy ul .cont_box{font-size: 0.9em;} #mybuy ul select{margin:6% 0;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #mybuy .nobel_data_list li{width: 48%; margin: 0 1%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #mybuy .nobel_data_list li{width: 48%; margin: 0 1%;} } /* 서브 구매목록 */ /* 서브 비밀번호변경 */ #sub_mypage .pw_cont_wrap .con_box{background:var(--opt-bg-color); border:1px solid var(--main-line-color); position:relative; padding:5px 10px;/* margin-top:1px; */} #sub_mypage .pw_cont_wrap .title_box + .con_box{border-top:0 none;} #sub_mypage .pw_cont_wrap{width: 96%; overflow: hidden; margin: 0 auto; padding:0; position:relative; padding-bottom:5px;} #sub_mypage .pw_cont_wrap .title_box{background:var(--sub-bg-color); border:1px solid var(--main-line-color);border-radius: 3px 3px 0 0; position:relative;/* margin-bottom:20px; */} #sub_mypage .pw_cont_wrap .title_box p span{width:14px; height:18px; background:url(https://cdn.metoon.co.kr/mimg/icon_switch_pw.png) no-repeat center; background-size:14px;} [color-theme="light"] #sub_mypage .mypage_cont .title_box.white p, [color-theme="light"] #sub_mypage .away_cont_wrap .title_box p{color:#FFF;} [color-theme="light"] #sub_mypage .pw_cont_wrap .title_box, [color-theme="light"] #sub_mypage .away_cont_wrap .title_box{background:#404040;} #sub_mypage .pw_cont_wrap .mypage_cont .con_box{padding:20px;} /* #sub_mypage .pw_cont_wrap .con_box p{font-size:1.1em; font-weight:bold; background:url(https://cdn.metoon.co.kr/mimg/icon_pw_notice.png) no-repeat 0 4px; padding-left:25px; color:#676767; line-height:1.5; letter-spacing:-0.025em; background-size:17px;} #sub_mypage .pw_cont_wrap .con_box p span{color:#e84d7d; display:block; font-size:1.03em;}pink 버전 */ #sub_mypage .pw_cont_wrap .con_box p{font-size:1.1em; font-weight:500; background:url("https://cdn.metoon.co.kr/mimg/adult_icon_pw_notice.png") no-repeat 0 4px; padding-left:25px; color:var(--sub2-ft-color); line-height:1.5; background-size:17px;} #sub_mypage .pw_cont_wrap .con_box p span{color:var(--bg-fc-color); display:block; font-size:1.03em;}/* white 버전 */ #sub_mypage .pw_cont_wrap .pw_form{letter-spacing:-0.025em; margin:15px auto 20px; overflow:hidden;} #sub_mypage .pw_cont_wrap .pw_form label{float:left; font-size:1.1em; font-weight:400; background:url(https://cdn.metoon.co.kr/mimg/icon_my_data_dot1.png) no-repeat 0 center; padding-left:15px; margin:25px 0 10px; background-size:4px;} #sub_mypage .pw_cont_wrap .pw_form div{width:100%; overflow: hidden; } #sub_mypage .pw_cont_wrap .pw_form input{float:right; border:1px solid var(--main-line-color); border-radius: 5px; background-color:var(--sub-bg-color);width: 100%; padding: 7px 10px; margin:3px 0; font-size:1.1em;color:#ABABAB;} [color-theme="light"] #sub_mypage .pw_cont_wrap .pw_form input{color:var(--sub2-ft-color);} #sub_mypage .pw_cont_wrap .pw_form input:focus{border-color:var(--main-ft-fc-color);} /* #sub_mypage .pw_cont_wrap .pw_form #pw_now{margin-bottom:15px;} */ #sub_mypage .pw_form .ui-input-text{width:90%; margin:0 auto; box-shadow:none; padding:3px;} #sub_mypage .pw_form .new_pw_box{margin:15px auto;} #sub_mypage .pw_cont_wrap .pw_btn_box{width:100%; text-align:center; letter-spacing:-0.025em;} #sub_mypage .pw_cont_wrap .pw_btn_box a{font-size:1.1em; display:inline-block; padding:7px 7% 8px; color:var(--main-ft-color); border-radius:5px; margin:0 1%;} #sub_mypage .pw_cont_wrap .pw_btn_box .switch{background:#e84d7d;} #sub_mypage .pw_cont_wrap .pw_btn_box .cancel{background:#56606b;} #sub_mypage .pw_cont_wrap .switch_acc{font-size: 1.15em; display: block; text-align:center; max-width:90px;padding: 5px 5px 6px; color: #fff; border-radius: 5px; margin:40px auto 40px; background: #56606b;} @media all and (min-width:320px) and (max-width:360px){ #sub_mypage .pw_cont_wrap .mypage_cont .con_box{padding: 15px;} #sub_mypage .pw_cont_wrap .con_box p{font-size: 0.95em;} #sub_mypage .pw_cont_wrap .pw_form{font-size: 0.9em; margin: 10px auto 15px;} #sub_mypage .pw_cont_wrap .pw_btn_box a{font-size: 1em;} } @media all and (min-width:435px) and (max-width:600px){ #sub_mypage .pw_cont_wrap .mypage_cont .con_box{padding: 30px 15%;} #sub_mypage .pw_cont_wrap .pw_form{margin:25px auto 25px;} #sub_mypage .pw_cont_wrap .pw_form label{margin: 10px 0;} #sub_mypage .pw_cont_wrap .pw_btn_box a{font-size:1.1em;} } @media all and (min-width:601px) and (max-width:810px){ #sub_mypage .pw_cont_wrap .mypage_cont .con_box{padding: 30px 15%;} /* #sub_mypage .pw_cont_wrap .con_box p{font-size: 1.2em;} */ #sub_mypage .pw_cont_wrap .pw_form{margin: 30px auto 30px;} #sub_mypage .pw_cont_wrap .pw_form label{margin: 10px 0;} #sub_mypage .pw_form .new_pw_box{margin: 30px auto;} #sub_mypage .pw_cont_wrap .pw_btn_box{margin-bottom: 10px;} #sub_mypage .pw_cont_wrap .pw_btn_box a{font-size: 1em; padding: 9px 7% 10px;} #sub_mypage .pw_cont_wrap .switch_acc{padding: 9px 10px 10px;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #sub_mypage .pw_cont_wrap .pw_btn_box a{padding: 7px 3% 8px;} } /* 서브 비밀번호변경 */ #sub_mypage .my_payment_list .con_box{padding:10px 5px;} @media all and (min-width:320px) and (max-width:360px){ .ui-content #sub_mypage .ui-listview .ui-select{padding: 0;} } @media all and (min-width:435px) and (max-width:600px){ .ui-content #sub_mypage .ui-listview .day{font-size:1.05em;} .ui-content #sub_mypage .ui-listview .cont_box{height: 150px; position: absolute; top: 0; bottom: 0; margin: auto;} } @media all and (min-width:601px) and (max-width:810px){ .ui-content #sub_mypage .ui-listview .cont_box{height: 150px; position: absolute; top: 0; bottom: 0; margin: auto;} .ui-content #sub_mypage .ui-listview p{font-size: 1.1em; padding: 0 5px;} .ui-content #sub_mypage #select_detail_title-button{font-size: 1.1em;} .ui-content #sub_mypage .ui-listview .day{font-size:1.05em;} } /* 서브 결제내역 */ #sub_mypage #payment .title_box p{color:var(--main-ft-color); font-size:1em; text-align:center;} [color-theme="light"] #sub_mypage #payment .title_box p{color:#FFF;} #sub_mypage #payment .title_box p span{width:18px; height:18px; background:url(https://cdn.metoon.co.kr/mimg/icon_my_payment.png) no-repeat 0 center; background-size:18px; vertical-align:text-top;} #sub_mypage #payment{margin:0px auto 10px;} #sub_mypage #payment .con_box{background:#fff; border:1px solid #eee; border-radius:0 0 3px 3px; position:relative; padding:5px 10px 10px; margin-top:1px;} #sub_mypage .my_payment_list .con_box{padding:10px 5px;} #sub_mypage .my_payment_list ul{width:100%; overflow:hidden;} #sub_mypage .my_payment_list .list_title{border-top:1px solid #eee; border-bottom:1px solid #eee; font-weight:bold;} #sub_mypage .my_payment_list ul li{float:left; width:25%; text-align:center; padding:5px 0;} #sub_mypage .my_payment_list .list_cont>li{width:100%;border-bottom:1px solid #eee;} #sub_mypage .my_payment_list .list_cont ul{width:100%;} #sub_mypage .payment_pager{width:100%; text-align:center; margin:10px auto;font-size:1.1em} #sub_mypage .payment_pager a{color:#2c2c2c;} /* #sub_mypage .payment_pager .on{color:#E84D7D;}pink 버전 */ #sub_mypage .payment_pager a{color:var(--main-ft-color); text-align:center; display:inline-block; padding:4px 8px;background:var(--sub-bg-color); border:1px solid var(--main-line-color);font-size:13px;/* margin:0 5px; */} #sub_mypage .payment_pager .on{border-color:var(--main-ft-fc-color);background:var(--opt-bg-color);font-weight:500;color:var(--main-ft-fc-color);}/* white 버전 */ #sub_mypage .payment_pager ul{ text-align:center; display:inline-block;} #sub_mypage .payment_pager ul li{display:inline-block; margin:0 3px; } @media all and (min-width:435px) and (max-width:600px){ #sub_mypage #payment .con_box{font-size: 1.1em;} #sub_mypage .payment_pager{font-size: 1.1em;} } @media all and (min-width:601px) and (max-width:810px){ #sub_mypage #payment .con_box{font-size: 1.2em;} #sub_mypage .payment_pager{font-size: 1.2em;} } /* 서브 결제내역 */ /* 서브 코인내역 */ #sub_mypage #mycoin .title_box p{color:var(--main-ft-color); font-size:1em; text-align:center; } [color-theme="light"] #sub_mypage #mycoin .title_box p{color:#FFF;} #sub_mypage #mycoin .title_box p span{width:18px; height:18px; background:url(https://cdn.metoon.co.kr/mimg/icon_my_coin.png) no-repeat 0 center;background-size: 18px; vertical-align:text-top;} #sub_mypage #mycoin{margin:0px auto 10px; border:0 none;} #sub_mypage #mycoin .con_box{background-color:#2E2E2E;border:1px solid var(--main-line-color); position:relative; padding:25px 20px;} [color-theme="light"] #sub_mypage #mycoin .con_box{background-color:var(--main-bg-color);} #sub_mypage #mycoin .pop_checkbox{text-align: right; padding-bottom:5px;} #sub_mypage #mycoin .pop_checkbox input{margin-right:5px;} #sub_mypage #mycoin .pop_checkbox label{vertical-align:middle;} #sub_mypage .mycoin_list .con_box{padding:10px 5px;} #sub_mypage .mycoin_list ul{width:100%;} #sub_mypage .mycoin_list .list_title{display:flex;align-items:center;height:36px;border-top:1px solid var(--main-line-color); border-bottom:1px solid var(--main-line-color);background-color:#2A2A2A; font-weight:500;color:#ABABAB;} #sub_mypage .mycoin_list ul li{width:25%; text-align:center;} .mycoin_list .mycoin_li_row li{position:relative;padding:11px 5px;} .mycoin_list .mycoin_li_row li .tooltip_date{width:100%;min-width:146px;} #sub_mypage .mycoin_list ul .li_sm { cursor:pointer; } #sub_mypage .mycoin_list ul .li_xsm{width:18%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #sub_mypage .mycoin_list ul .li_L{position:static;width:39%; box-sizing:border-box; cursor:pointer; overflow:hidden;} #sub_mypage .mycoin_list ul .li_L p {left:auto;right:0;width:39%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } #sub_mypage .mycoin_list .list_cont>li{position:relative;width:100%;border-bottom:1px solid var(--main-line-color);} #sub_mypage .mycoin_list .list_cont ul{width:100%;overflow:visible;} #sub_mypage .mycoin_list .list_cont ul li { text-overflow:ellipsis; white-space:nowrap; } #sub_mypage .mycoin_list .list_cont p { display:none; white-space:normal; position:absolute; width:100%; top:-3px; left:0; z-index:4; background:var(--opt-bg-color); border:1px solid var(--main-ft-fc-color); border-radius:7px; text-align:center; box-sizing:border-box; padding:16px 5px; } #sub_mypage .mycoin_list .list_cont .coin_textbox { display:block; width:90%; float:left; white-space:normal; } #sub_mypage .mycoin_list .list_cont .coin_close_btn { position:absolute; top:15px; right:1.479%; display:block; float:right; width:20px; padding-bottom:20px; background:url(https://cdn.metoon.co.kr/mimg/btn_close_gray.png) no-repeat center; background-size:20px 20px; vertical-align:middle; margin-left:5px; cursor:pointer; } #sub_mypage .mycoin_list .list_cont .con_none{border:none; font-size:15px; color:#ABABAB; font-weight:500; padding:25px 0 20px;} #sub_mypage .mycoin_list ul li a{width: 100%; overflow: hidden; border-radius: 5px; display: block;} #sub_mypage .mycoin_list ul li a img{width:100%; border-radius: 5px;} #sub_mypage .mycoin_pager{width:100%; text-align:center; margin:25px auto;font-size:13px;} #sub_mypage .mycoin_pager a{color:#ABABAB;} /* #sub_mypage .mycoin_pager .on{color:#E84D7D;}pink 버전 */ #sub_mypage .mycoin_pager a{color:var(--main-ft-color); text-align:center; display:inline-block; padding:4px 8px;background:var(--sub-bg-color); border:1px solid var(--main-line-color);} /* [color-theme="light"] #sub_mypage .mycoin_pager a{background-color:var(--sub-bg-color);} */ #sub_mypage .mycoin_pager .on{border-color:var(--main-ft-fc-color);background:var(--opt-bg-color);font-weight:500;color:var(--main-ft-fc-color);}/* white 버전 */ #sub_mypage .mycoin_pager ul{ text-align:center; display:inline-block; border:none;} #sub_mypage .mycoin_pager ul li{display:inline-block; margin:0 3px; width:auto;} /* @media all and (min-width:435px) and (max-width:600px){ #sub_mypage #mycoin .con_box{font-size: 1.1em;} #sub_mypage .mycoin_pager{font-size: 1.1em;} } @media all and (min-width:601px) and (max-width:810px){ #sub_mypage #mycoin .con_box{font-size: 1.2em;} #sub_mypage .mycoin_pager{font-size: 1.2em;} } */ /* 서브 코인내역 */ /* 서브 탈퇴 */ #sub_mypage .away_cont_wrap .con_box{background:var(--opt-bg-color); border:1px solid var(--main-line-color); border-radius:0 0 3px 3px; position:relative; padding:5px 10px;/* margin-top:1px; */} #sub_mypage .away_cont_wrap .title_box + .con_box{border-top:0 none;} #sub_mypage .away_cont_wrap{width: 96%; overflow: hidden; margin: 0 auto; padding:0; position:relative;} #sub_mypage .away_cont_wrap .title_box{background:var(--sub-bg-color); border:1px solid var(--main-line-color);border-radius: 3px 3px 0 0; letter-spacing:-0.025em; position:relative;} #sub_mypage .away_cont_wrap .title_box p{text-shadow:none; color:var(--main-ft-color); } #sub_mypage .away_cont_wrap .title_box p span{width:14px; height:18px; background:url("https://cdn.metoon.co.kr/mimg/icon_switch_pw.png") no-repeat center; background-size:14px;} #sub_mypage .away_cont_wrap .mypage_cont .con_box{padding:20px 20px 25px;} #sub_mypage .away_cont_wrap .reason_form{letter-spacing:-0.025em; margin:0 auto 20px; position:relative; overflow: hidden; max-width:450px;display:flex;justify-content:space-between;gap:5px 15px;} #sub_mypage .away_cont_wrap .reason_form #reason{/* width:75%;margin-left: 1%; margin-top:0; float:right; */width:100%;color:var(--sub2-ft-color); padding:8px 27px 8px 15px; font-size: 1.05em; border:1px solid var(--main-line-color); border-radius:5px; background:url("https://cdn.metoon.co.kr/mimg/ico_add_pg_btn_wh.svg") no-repeat 97% center,var(--sub-bg-color); background-size: 9px; -webkit-appearance:none;cursor:pointer;flex:1 1 auto;} #sub_mypage .away_cont_wrap .reason_form label{font-size:1.1em; color:var(--main-ft-color); font-weight:500; background:url("https://cdn.metoon.co.kr/mimg/adult_icon_pw_notice.png") no-repeat 0 50%; display:inline-block; padding:5px 0 5px 22px;/* margin:0; position:absolute; top:0; left:0; */background-size:17px;align-self:center;flex-shrink:0;}/* white 버전 */ #sub_mypage .away_cont_wrap .ui-select{ width:75%; margin-left: 1%; margin-top:0; float:right;} #sub_mypage .away_cont_wrap #reason-button{font-size: 1.05em; color:#676767; width: 100%; text-align:left; box-shadow:none; background:#fff; font-weight:normal;} #sub_mypage .away_cont_wrap .ui-icon-carat-d:after{background:url(https://cdn.metoon.co.kr/mimg/icon_select_btn.png) no-repeat center} #sub_mypage .reason_form .ui-input-text{display:inline-block;width:90%; margin:0 auto; box-shadow:none; padding:3px;} #sub_mypage .reason_form .new_pw_box{margin:15px auto;} #sub_mypage .away_cont_wrap .con_box p{font-size:0.9em; font-weight:normal; color:var(--sub2-ft-color); letter-spacing:-0.025em; text-align:center; padding-bottom:20px;} #sub_mypage .away_cont_wrap .con_box p span{color:var(--bg-fc-color);} #sub_mypage .away_cont_wrap .away_btn_box{width:100%; text-align:center; letter-spacing:-0.025em;} #sub_mypage .away_cont_wrap .away_btn_box a{font-size:1.1em; display:inline-block; padding:8px 0; width: 35%; max-width: 130px; color:var(--main-ft-color); border-radius:5px; margin:0 1%; font-weight:normal;} #sub_mypage .away_cont_wrap .away_btn_box .away{background:var(--bg-fc-color);} #sub_mypage .away_cont_wrap .away_btn_box .cancel{background:#56606b;} @media all and (min-width:320px) and (max-width:360px){ #sub_mypage .away_cont_wrap .mypage_cont .con_box{padding: 15px;} #sub_mypage .away_cont_wrap .con_box p{font-size: 0.9em; line-height:1.5;} #sub_mypage .away_cont_wrap .ui-select{width: 70%;} #sub_mypage .away_cont_wrap #reason-button{font-size: 1em;} #sub_mypage .away_cont_wrap .away_btn_box a{font-size: 1em;} #sub_mypage .away_cont_wrap .reason_form #reason{width: 70%;} } @media all and (min-width:435px) and (max-width:600px){ /* #sub_mypage .away_cont_wrap .reason_form label{font-size: 1.2em; background: url(https://cdn.metoon.co.kr/mimg/adult_icon_pw_notice.png) no-repeat 0 70%; background-size:17px;padding-left: 25px;} */ #sub_mypage .away_cont_wrap .ui-select{margin-left: 4%;} /* #sub_mypage .away_cont_wrap .con_box p{font-size: 1.2em; padding-bottom: 30px;} */ #sub_mypage .away_cont_wrap #reason-button{font-size: 1.1em;} /* #sub_mypage .away_cont_wrap .away_btn_box a{font-size: 1.2em;} */ #sub_mypage .away_cont_wrap .mypage_cont .con_box{padding:30px 30px 35px;} } @media all and (min-width:601px) and (max-width:810px){ /* #sub_mypage .away_cont_wrap .reason_form label{font-size: 1.3em; background: url(https://cdn.metoon.co.kr/mimg/adult_icon_pw_notice.png) no-repeat 0 60%; padding: 5px 0 5px 40px; background-size: 26px;} */ #sub_mypage .away_cont_wrap #reason-button{font-size: 1.2em;} #sub_mypage .away_cont_wrap .mypage_cont .con_box{padding:30px 50px 35px;} /* #sub_mypage .away_cont_wrap .con_box p{font-size: 1.3em; line-height: 1.5; padding-bottom: 30px;} */ /* #sub_mypage .away_cont_wrap .away_btn_box a{font-size: 1.3em;} */ #sub_mypage .away_cont_wrap .pw_form{margin: 30px auto 30px; font-size: 1.2em;} #sub_mypage .away_cont_wrap .pw_form label{margin: 10px 0;} #sub_mypage .pw_form .new_pw_box{margin: 30px auto;} #sub_mypage .away_cont_wrap .pw_btn_box{margin-bottom: 10px;} #sub_mypage .away_cont_wrap .pw_btn_box a{font-size: 1.3em; padding: 9px 7% 10px;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #sub_mypage .away_cont_wrap{padding-bottom: 5px;} } @media screen and (orientation:landscape) and (max-width:780px){ #sub_mypage .away_cont_wrap{padding-bottom: 5px;} } @media screen and (orientation:landscape) and (max-width:667px){ #sub_mypage .away_cont_wrap{padding-bottom: 5px;} } @media screen and (orientation:landscape) and (max-width:570px){ #sub_mypage .away_cont_wrap{padding-bottom: 5px;} } @media screen and (orientation:landscape) and (max-width:480px){ /* #sub_mypage .away_cont_wrap .reason_form label{font-size: 1.1em; background: url(https://cdn.metoon.co.kr/mimg/adult_icon_pw_notice.png) no-repeat 0 60%; background-size:17px;} */ #sub_mypage .away_cont_wrap .con_box p{font-size: 0.9em;} #sub_mypage .away_cont_wrap{padding-bottom: 5px;} } /* 서브 탈퇴 */ /* 마이페이지 수정 */ /* 찜목록 컨테이너 */ #sub_mypage .my_like_data .like_data_list1 ul{box-shadow: none; margin: 0 auto; float: left; width: 100%;display:flex;overflow-x:auto;gap:8px 0;-webkit-overflow-scrolling:touch;/* overscroll-behavior:contain; */scroll-snap-type:x mandatory;} /* #sub_mypage .my_like_data .like_data_list1 ul::-webkit-scrollbar{height:10px;} #sub_mypage .my_like_data .like_data_list1 ul::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.25);background-color:var(--opt-bg-color);} #sub_mypage .my_like_data .like_data_list1 ul::-webkit-scrollbar-track{background-color:rgba(255, 255, 255, 0.3);background-color:var(--sub-bg-color);} */ #sub_mypage .my_like_data .like_data_list1 li{padding: 0 4px; width:-webkit-calc((100% - 100px) / 5);width:-moz-calc((100% - 100px) / 5);width:calc((100% - 100px) / 5); border-bottom:none; -webkit-box-sizing:border-box; box-sizing:border-box;flex-shrink:0;min-width:140px;scroll-snap-align:start;} #sub_mypage .my_like_data .like_data_list1 li div a{display: block; width:100%;} #sub_mypage .my_like_data .like_data_list1 li .zzim_list_contbox{position:relative; border: 1px solid var(--main-line-color); border-radius: 6px;} #sub_mypage .my_like_data .like_data_list1 li div{display: block; width: 100%; position: relative; overflow: hidden; padding: 0; margin: 0 auto; border-width: thin; font-size: 1em; letter-spacing: -0.025em;} #sub_mypage .my_like_data .like_data_list1 li img{width: 100%; display: block; max-width: 101%; max-height: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_mypage .my_like_data .like_data_list1 li .novel_img{position: relative; width:100%;height:0;padding-bottom:140%;border-radius: 6px;background-size:cover;} #sub_mypage .my_like_data .like_data_list1 li .ebook_imgbox{position:relative;width:100%; height:0;padding-bottom:140%;} #sub_mypage .my_like_data .like_data_list1 li .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #sub_mypage .my_like_data .like_data_list1 li .ebook_imgbox .novel_img{opacity:0.2;} #sub_mypage .my_like_data .like_data_list1 li .ebook_imgbox .ebook_cover{position:absolute; width:70%; top:0; left:0; right:0; bottom:0; margin:auto; z-index:2; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} #sub_mypage .my_like_data .like_data_list1 li p{width: 100%; text-align:center; padding:0; display:block; letter-spacing:-0.025em; margin-top:0px;} #sub_mypage .my_like_data .like_data_list1 li p span{display: block; position: relative; float:none; width:auto; padding:0 2px;} #sub_mypage .my_like_data .like_data_list1 li .title{font-weight: normal; text-align: center; font-size: 14px; color:var(--main-ft-color);padding:5px 2px 2px; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_mypage .my_like_data .like_data_list1 li .genre{font-size:11px; display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_mypage .my_like_data .like_data_list1 li.more{/* padding-bottom:33%; */position:relative;width:100px;min-width:auto;} #sub_mypage .my_like_data .like_data_list1 li.more > a{position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; margin:auto; padding:0 4px; -webkit-box-sizing:border-box; box-sizing:border-box;} #sub_mypage .my_like_data .like_data_list1 li.more > a div{display:-webkit-box;display:flex; border:1px solid var(--main-line-color);background-color:var(--sub-bg-color); width:100%; height:100%; -webkit-box-align:center;align-items:center; -webkit-box-pack:center;justify-content:center;transition:border-color 0.2s;} #sub_mypage .my_like_data .like_data_list1 li.more > a div span{display:inline-block; padding-bottom:24px; background:url(https://cdn.metoon.co.kr/mimg/btn_add.svg) no-repeat center 100%; background-size:18px; color:var(--main-ft-color);} /* 찜목록 컨테이너 */ /* 내서재 컨테이너 */ #sub_mypage .my_nobel_data .nobel_data_list1 ul{box-shadow: none; margin: 0 auto 0; float: left; width: 100%;display:flex;display:flex;overflow-x:auto;gap:8px 0;-webkit-overflow-scrolling:touch;/* overscroll-behavior:contain; */scroll-snap-type:x mandatory;} #sub_mypage .my_nobel_data .nobel_data_list1 li{padding: 0 4px; width:-webkit-calc((100% - 100px) / 5);width:-moz-calc((100% - 100px) / 5);width:calc((100% - 100px) / 5); border-bottom:none; -webkit-box-sizing:border-box; box-sizing:border-box;flex-shrink:0;min-width:140px;scroll-snap-align:start;} #sub_mypage .my_nobel_data .nobel_data_list1 li div a{display: block; width:100%;} #sub_mypage .my_nobel_data .nobel_data_list1 li .buy_list_contbox{position:relative; border: 1px solid var(--main-line-color); border-radius: 6px;} #sub_mypage .my_nobel_data .nobel_data_list1 li div{display: block; width: 100%; position: relative; overflow: hidden; padding: 0; margin: 0 auto; border-width: thin; font-size: 1em; letter-spacing: -0.025em;} #sub_mypage .my_nobel_data .nobel_data_list1 li img{width: 100%; display: block; max-width: 101%; max-height: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_mypage .my_nobel_data .nobel_data_list1 li .novel_img{position: relative; width:100%;height:0;padding-bottom:140%; border-radius: 5px;background-size:cover;} #sub_mypage .my_nobel_data .nobel_data_list1 li .ebook_imgbox{position:relative;width:100%;height:0;padding-bottom:140%;} #sub_mypage .my_nobel_data .nobel_data_list1 li .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #sub_mypage .my_nobel_data .nobel_data_list1 li .ebook_imgbox .novel_img{opacity:0.2;} #sub_mypage .my_nobel_data .nobel_data_list1 li .ebook_imgbox .ebook_cover{position:absolute; width:70%; top:0; left:0; right:0; bottom:0; margin:auto; z-index:2; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} #sub_mypage .my_nobel_data .nobel_data_list1 li p{width: 100%; text-align:center; padding:0; display:block; letter-spacing:-0.025em; margin-top:0px;} #sub_mypage .my_nobel_data .nobel_data_list1 li p span{display: block; position: relative; float:none; width:auto; padding:0 2px;} #sub_mypage .my_nobel_data .nobel_data_list1 li .title{font-weight: normal; text-align: center; font-size: 14px;color:var(--main-ft-color); padding:5px 2px 2px; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_mypage .my_nobel_data .nobel_data_list1 li .genre{font-size:11px; display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_mypage .my_nobel_data .nobel_data_list1 li.more{/* padding-bottom:33%; */position:relative;width:100px;min-width:auto;} #sub_mypage .my_nobel_data .nobel_data_list1 li.more > a{position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; margin:auto; padding:0 4px; -webkit-box-sizing:border-box; box-sizing:border-box;} #sub_mypage .my_nobel_data .nobel_data_list1 li.more > a div{display:-webkit-box;display:flex; border:1px solid var(--main-line-color);background-color:var(--sub-bg-color); width:100%; height:100%; -webkit-box-align:center;align-items:center; -webkit-box-pack:center;justify-content:center;transition:border-color 0.2s;} #sub_mypage .my_nobel_data .nobel_data_list1 li.more > a div span{display:inline-block; padding-bottom:24px; background:url(https://cdn.metoon.co.kr/mimg/btn_add.svg) no-repeat center 100%; background-size:18px; color:var(--main-ft-color);} #sub_mypage .my_nobel_data .nobel_data_list1 li .vd_thumbnail_cont{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;overflow:hidden;} #sub_mypage .my_nobel_data .nobel_data_list1 li .inner_thumb{width:100%;height:100%;background-repeat:no-repeat;background-position:27% center;background-size:cover;/* opacity:.6; */} #sub_mypage .my_nobel_data .nobel_data_list1 li .vd_thumbnail{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:0;padding-bottom:56.39%;background-repeat:no-repeat;background-position:center;background-size:cover;margin:auto;} /* 내서재 컨테이너 */ #mypage_novel_toon_tab{width: 100%; margin: 0 auto 10px; min-width: 300px; /* border: 1px solid var(--bg-fc-color);border-radius: 3px; */} #mypage_novel_toon_tab ul{width: 100%; overflow: hidden; /* border-radius: 3px; */display:-webkit-box;display:flex;} #mypage_novel_toon_tab ul li{float: left; width: 33.333%; text-align: center;-webkit-box-flex:1;flex:1;} #mypage_novel_toon_tab ul li a{display: block; padding: 7px 0; font-size: 1em; color: #676767; background: #fff;border:1px solid var(--bg-fc-color);box-sizing:border-box;} #mypage_novel_toon_tab ul li + li a{border-left:0 none;} #mypage_novel_toon_tab ul li:first-child a{border-radius:3px 0 0 3px;border-left:1px solid var(--bg-fc-color);} #mypage_novel_toon_tab ul li:last-child a{border-radius:0 3px 3px 0;} #mypage_novel_toon_tab ul li a.on{background:var(--bg-fc-color); color:var(--main-ft-color);} /* 서브 찜목록 */ #content_wrap #sub_mypage.zzim .cont_title{position:relative; overflow: initial; width: 96%;} #content_wrap #sub_mypage.zzim .cont_title:after{clear:both; display:block; content:"";} #content_wrap #sub_mypage.zzim .cont_title h4{font-size:15px; font-weight:500;line-height:24px; margin:0;} #content_wrap #sub_mypage.zzim .cont_title .btn_close{position:absolute; top:0; bottom:0; right:0; margin:auto; width:18px; height:18px; padding:0; display:block; background:none;} #content_wrap #sub_mypage.zzim .cont_title .btn_close img{width:100%; display:block;} #content_wrap #sub_mypage.zzim .cont_box{width:100%;} #content_wrap #sub_mypage.zzim .cont_box:after{clear:both; display:block; content:"";} #content_wrap #sub_mypage.zzim .my_zzim_count{float: left; font-size: 13px;line-height:24px; font-weight: normal; letter-spacing: -0.04em;margin-left:8px;} #content_wrap #sub_mypage.zzim .my_zzim_count span{padding-right:0;font-weight:500;} #content_wrap #sub_mypage.zzim .my_zzim_delete{float: right; display: block; height:26px;line-height:24px;padding:0 10px;border-radius: 13px; text-align: center; font-size: 12px; font-weight: normal; letter-spacing: -0.05em;padding:0 10px;border:1px solid #505050;background-color:#2E2E2E;color:#ABABAB;-webkit-box-sizing:border-box;box-sizing:border-box;} #content_wrap #sub_mypage.zzim .my_zzim_delete span{display:inline-block; padding-left: 12px; background: url("https://cdn.metoon.co.kr/mimg/ico_close.svg") no-repeat 0 center; background-size: 8px;} #content_wrap #sub_mypage.zzim .like_data_list{width: 100%; float: left; margin:10px auto; overflow:hidden;} #content_wrap #sub_mypage.zzim .like_data_list ul{box-shadow: none; margin: 0px; float: left; /* width: 102%; margin-left:-1%; */width:100%;display:flex;flex-wrap:wrap;gap:5px 0;} #content_wrap #sub_mypage.zzim .like_data_list li{padding: 0 0 10px; float: left; width: 33.3%;} #content_wrap #sub_mypage.zzim .like_data_list li div a{display: block; width:100%;} #content_wrap #sub_mypage.zzim .like_data_list li div{display: block; width: 96%; position: relative; overflow: hidden; padding: 0; margin: 0 auto; border-width: thin; /* color: var(--main-ft-color); */ font-size: 1em; letter-spacing: -0.025em;} #content_wrap #sub_mypage.zzim .like_data_list li img{width: 100%; display: block; max-width: 101%; max-height: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #content_wrap #sub_mypage.zzim .like_data_list li .novel_img{position: relative;width:100%;height:0;padding-bottom:140%;border: 1px solid var(--main-line-color); border-radius: 6px;background-size:cover;} #content_wrap #sub_mypage.zzim .like_data_list li .ebook_imgbox{position:relative;width:100%; height:0;padding-bottom:140%; border-radius:6px; border:1px solid var(--main-line-color);} #content_wrap #sub_mypage.zzim .like_data_list li .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #content_wrap #sub_mypage.zzim .like_data_list li .ebook_imgbox .novel_img{opacity:0.2; border:none;} #content_wrap #sub_mypage.zzim .like_data_list li .ebook_imgbox .ebook_cover{position:absolute; width:70%; top:0; left:0; right:0; bottom:0; margin:auto; z-index:2; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} #content_wrap #sub_mypage.zzim .like_data_list li p{width: 100%; text-align:center; letter-spacing:-0.025em; margin-top:0px;} #content_wrap #sub_mypage.zzim .like_data_list li p span{display: block; position: relative;} #content_wrap #sub_mypage.zzim .like_data_list li .title{font-weight: normal; text-align: center; font-size: 14px; padding:5px 5px 2px; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #content_wrap #sub_mypage.zzim .like_data_list li .genre{margin: 0 0 5px; font-size:12px; display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #content_wrap #sub_mypage.zzim .like_data_list li .delete_check:not(.text-hidden){position: absolute; top: 5px; right: 10px; z-index: 99; width: 15px; height: 15px;} #content_wrap #sub_mypage.zzim .like_data_list li .label_box{position:absolute; bottom:5px; left:0; width:auto; z-index:12;} #content_wrap #sub_mypage.zzim .like_data_list li .label_box .nLabel{display:block; width:30px; height:18px; background-size:100% auto; background-position:center; background-repeat:no-repeat;} #content_wrap #sub_mypage.zzim .like_data_list li .label_box .nLabel_toon{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_toon.png);} #content_wrap #sub_mypage.zzim .like_data_list li .label_box .nLabel_novel{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_novel.png);} #content_wrap #sub_mypage.zzim .like_data_list li .label_box .nLabel_comics{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_comics.png);} #content_wrap #sub_mypage.zzim .like_data_list li .label_box .nLabel_ebook{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_ebook.png);} #content_wrap #sub_mypage.zzim .like_data_list li .label_box .nLabel_photo{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_photo.png);} .delete_check_label{display:flex;align-items:center;justify-content:center;position:absolute;top:3px;right:9px;width:18px;height:18px;border:1px solid #A1A1A1;border-radius:3px;background-color:#FFFFFF;z-index:99;cursor:pointer;box-shadow:0 0 4px rgba(0, 0, 0, 0.2);margin:2px 0;} .delete_check_label svg{width:12px;fill:#ABABAB;} input.delete_check:checked + .delete_check_label{border-color:var(--bg-fc-color);background-color:var(--bg-fc-color);} input.delete_check:checked + .delete_check_label svg{fill:#FFFFFF;} @media all and (min-width:600px){ #content_wrap #sub_mypage.zzim .like_data_list li{width:25%;} .delete_check_label{margin:5px;} } @media all and (min-width:950px){ #content_wrap #sub_mypage.zzim .like_data_list li{width:20%;} } /* 서브 찜목록 */ @media all and (min-width:601px){ #sub_mypage .my_nobel_data .nobel_data_list1 li.more{padding-bottom:29%;} #sub_mypage .my_nobel_data .nobel_data_list1 li .title{font-size:15px;} #sub_mypage .my_nobel_data .nobel_data_list1 li .genre{font-size:14px;} #sub_mypage .my_like_data .like_data_list1 li .title, #sub_mypage .my_nobel_data .nobel_data_list1 li .title{font-size:16px;} #sub_mypage .my_like_data .like_data_list1 li .genre{font-size:14px;} #sub_mypage .my_nobel_data .nobel_data_list1 li.more > a div span{font-size:15px;} #sub_mypage .my_like_data .like_data_list1 li.more > a div span{font-size:15px;} } /* 서브 내서재 */ #content_wrap #sub_mypage.buylist .cont_title{position:relative; overflow: initial; width: 96%;} #content_wrap #sub_mypage.buylist .cont_title:after{clear:both; display:block; content:"";} #content_wrap #sub_mypage.buylist .cont_title h4{font-size:15px; font-weight:500;line-height:24px; margin:0;} #content_wrap #sub_mypage.buylist .cont_title .btn_close{position:absolute; top:0; bottom:0; right:0; margin:auto; width:18px; height:18px; padding:0; display:block; background:none;} #content_wrap #sub_mypage.buylist .cont_title .btn_close img, .buylist-btn-close-svg{width:100%; display:block;fill:currentColor;} [color-theme="light"] .buylist-btn-close-svg{fill:var(--sub-ft-color);} #content_wrap #sub_mypage.buylist .cont_box{width:100%;} #content_wrap #sub_mypage.buylist .cont_box:after{clear:both; display:block; content:"";} #content_wrap #sub_mypage.buylist .my_zzim_count{float: left; font-size: 13px;line-height:24px; font-weight: normal; letter-spacing: -0.04em; margin-left:8px;} #content_wrap #sub_mypage.buylist .my_zzim_count span{padding-right:0;font-weight:500;} #content_wrap #sub_mypage.buylist .my_zzim_delete span{display:inline-block;padding-left: 12px; background: url("https://cdn.metoon.co.kr/mimg/ico_close.svg") no-repeat 0 center; background-size: 8px;} #content_wrap #sub_mypage.buylist .my_zzim_delete{float: right; display: block;height:26px;line-height:24px; border-radius: 13px; text-align: center; font-size: 12px; font-weight: normal; padding:0 10px;border:1px solid #505050;background-color:#2E2E2E;color:#ABABAB;-webkit-box-sizing:border-box;box-sizing:border-box;} #content_wrap #sub_mypage.buylist .nobel_data_list{width: 100%; float: left; margin:10px auto; overflow:hidden;} #content_wrap #sub_mypage.buylist .nobel_data_list ul{box-shadow: none; margin: 0px; float: left; width: 100%;/* margin-left:-1%; */display:flex;flex-wrap:wrap;gap:5px 0;} #content_wrap #sub_mypage.buylist .nobel_data_list li{padding: 0 0 10px; float: left; width: 33.3%;} #content_wrap #sub_mypage.buylist .nobel_data_list li div a{display: block; width:100%;} #content_wrap #sub_mypage.buylist .nobel_data_list li div{display: block; width: 96%; position: relative; overflow: hidden; padding: 0; margin: 0 auto; border-width: thin; /* color: #333; */ font-size: 1em; letter-spacing: -0.025em;} #content_wrap #sub_mypage.buylist .nobel_data_list li img{width: 100%; display: block; max-width: 101%; max-height: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #content_wrap #sub_mypage.buylist .nobel_data_list li .novel_img{position: relative;width:100%;height:0;padding-bottom:140%;border: 1px solid var(--main-line-color); border-radius: 6px;background-position:center;background-size:cover;} .novel_img:has(.novel_vd_img_in):before, #sub_gift .gift_cont .img_box .novel_img:has(.novel_vd_img_in){content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.6);backdrop-filter:blur(1px);} .novel_vd_img_in{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;box-shadow:2px 2px 8px rgba(0, 0, 0, 0.3);z-index:2;margin:auto;} #content_wrap #sub_mypage.buylist .nobel_data_list li .ebook_imgbox{position:relative;width:100%; height:0;padding-bottom:140%; border-radius:6px; border:1px solid var(--main-line-color);} #content_wrap #sub_mypage.buylist .nobel_data_list li .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #content_wrap #sub_mypage.buylist .nobel_data_list li .ebook_imgbox .novel_img{opacity:0.2; border:none;} #content_wrap #sub_mypage.buylist .nobel_data_list li .ebook_imgbox .ebook_cover{position:absolute; width:70%; top:0; left:0; right:0; bottom:0; margin:auto; z-index:2; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} #content_wrap #sub_mypage.buylist .nobel_data_list li .label_box{position:absolute; bottom:5px; left:0; width:auto; z-index:12;} #content_wrap #sub_mypage.buylist .nobel_data_list li .label_box .nLabel{display:block; width:30px; height:18px; background-size:100% auto; background-position:center; background-repeat:no-repeat;} #content_wrap #sub_mypage.buylist .nobel_data_list li .label_box .nLabel_toon{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_toon.png);} #content_wrap #sub_mypage.buylist .nobel_data_list li .label_box .nLabel_novel{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_novel.png);} #content_wrap #sub_mypage.buylist .nobel_data_list li .label_box .nLabel_comics{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_comics.png);} #content_wrap #sub_mypage.buylist .nobel_data_list li .label_box .nLabel_ebook{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_ebook.png);} #content_wrap #sub_mypage.buylist .nobel_data_list li .label_box .nLabel_photo{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_photo.png);} #content_wrap #sub_mypage.buylist .nobel_data_list li p{width: 100%; text-align:center; letter-spacing:-0.025em; margin-top:0px;} #content_wrap #sub_mypage.buylist .nobel_data_list li p span{display: block; position: relative;} #content_wrap #sub_mypage.buylist .nobel_data_list li .title{font-weight: normal; text-align: center; font-size: 14px; color:var(--main-ft-color);padding:5px 5px 2px; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #content_wrap #sub_mypage.buylist .nobel_data_list li .genre{margin: 0 0 5px; font-size:12px; display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #content_wrap #sub_mypage.buylist .nobel_data_list li .delete_check:not(.text-hidden){position: absolute; top: 5px; right: 10px; z-index: 99; width: 15px; height: 15px;} /* 마이페이지 추가 20200914 */ #sub_mypage .my_opt_area:after{content:"";display:block;clear:both;} #sub_mypage .my_select_sort{border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-border-radius:0;box-shadow:none;outline:none;display:block;float:left;height:26px;font-size:12px;color:#000;border:1px solid #e8e8e8;background:url("https://cdn.metoon.co.kr/mimg/icon_my_slt_sort.png") no-repeat calc(100% - 10px) center, #fff;background-size:10px auto;padding:0 22px 0 8px;} #sub_mypage .my_select_sort::-ms-expand{display:none;} #sub_mypage .my_select_sort:focus{outline:none;} #sub_mypage .nobel_data_list .icon_my_up, #sub_mypage .like_data_list .icon_my_up{position:absolute;top:0;left:0;display:block;z-index:15;} #sub_mypage .nobel_data_list .icon_my_up:before, #sub_mypage .like_data_list .icon_my_up:before{content:"";display:block;border-left:34px solid #000;border-bottom:36px solid transparent;} #sub_mypage .nobel_data_list .icon_my_up i, #sub_mypage .like_data_list .icon_my_up i{position:absolute;top:3px;left:5px;display:inline-block;font-size:11px;font-weight:700;color:var(--main-ft-color);line-height:15px;} #sub_mypage .nobel_data_list .my_chapter_area, #sub_mypage .like_data_list .my_chapter_area{position:absolute;bottom:3px;right:0;display:inline-block;background-color:rgba(0, 0, 0, .58);color:var(--main-ft-color);line-height:18px;padding:0 6px;font-size:11px;font-weight:700;z-index:15;} .prdt_mine_li_thumb{position:relative;} .mine_works_lb{position:absolute;bottom:0;left:0;display:flex;flex-direction:column;gap:3px 3px;z-index:2;margin-bottom:7px;} @media all and (min-width:600px){ #content_wrap #sub_mypage.buylist .nobel_data_list li{width:25%;} } @media all and (min-width:950px){ #content_wrap #sub_mypage.buylist .nobel_data_list li{width:20%;} } /* 서브 내서재 */ /* 마이페이지 수정 */ /* 서브 마이페이지 */ /* 서브 충전소 */ #content_wrap #sub_charge{padding-top:0;} #sub_charge{overflow:inherit;position: relative; z-index: 2; overflow-x: inherit;} #sub_charge .charge_banner_box{width: 100%;position: relative;z-index: 2;display: block;} .charge_banner{width:100%; position: fixed; top: 88px; left: 0; width: 100%; z-index: 1;} html.mm-opening .mm-slideout .charge_banner{/* -webkit-transform:translate3d(80%,0,0);transform:translate3d(80%,0,0) */position:absolute !important;} .charge_banner img{width:100%; max-width:450px; margin:0 auto; display: block; line-height:0;} #sub_charge .my_coin_box{width:100%; background:#4e4e4e; padding:4px 0; display: block; margin-top: 35%;position: relative;z-index: 2;} #sub_charge .my_coin_box p{display:inline-block; font-size:12px; color:var(--main-ft-color); text-shadow:none; font-weight:normal; vertical-align: super; padding:3px 0 3px;} #sub_charge .my_coin_box .my_coin_title{background:url(https://cdn.metoon.co.kr/mimg/icon_mycoin_point.png) no-repeat 0 center; padding-left:30px; margin-left:10px; background-size:18px;} #sub_charge .my_coin_box .my_coin{float:right; display:inline-block; margin-right:10px;} #sub_charge .my_coin_box .my_coin p{display:inline-block; text-shadow:none; font-weight:normal; padding:2px 0;} #sub_charge .my_coin_box .my_coin .my_coin_count{color:#ffe83e; margin:0 5px; font-size:13px; vertical-align: top;} #sub_charge .charge_form_cont_wrap{width:100%; /* background:#f5f5f5; */ background:#fff; float:left;position: relative;z-index: 2;} #sub_charge .charge_form_cont{width: 96%; overflow: hidden; margin: 10px auto; padding:0; } #sub_charge .charge_form_cont>p{font-size:1.1em; color:#676767; letter-spacing:-0.025em; font-weight:bold;} #sub_charge .charge_form_cont .payment_type_title{display:none;} #sub_charge .charge_form_cont .charge_form_tab{overflow:hidden; width:100%; margin:10px auto 0; border-radius:5px 5px 0 0;} #sub_charge .charge_form_cont .charge_form_tab li{float:left; width:50%; text-align:center; background:#ccc; box-sizing: border-box; border-bottom: 2px solid #676767; border-top: 2px solid #ccc;} #sub_charge .charge_form_cont .charge_form_tab li.on{background:#fff; border: 2px solid #676767; border-bottom: 2px solid #fff;} #sub_charge .charge_form_cont .charge_form_tab a{display:block; padding:10px 0; font-size:1.3em; font-weight:bold; color:#676767;} #sub_charge .charge_form_cont .charge_form_tab li.on a{color: #333;} #sub_charge .charge_form_cont #coin_form>div{width:100%; float: left; margin:5px auto 10px;} #sub_charge .charge_form_cont #coin_form>div label{width:100%; float: left; margin-top:5px; border-radius:5px; overflow:hidden; background:#fff; border:1px solid transparent; box-sizing: border-box;} #sub_charge .charge_form_cont #coin_form>div input{display:none;} #sub_charge .charge_form_cont li .ui-radio{margin:0;} #sub_charge .charge_form_cont li .ui-radio input{opacity:0;} #sub_charge .charge_form_cont #badge_box{width:100%; float:left; border:1px solid #e2e2e2; border-radius:5px; background:#eaeaea; position:relative; margin: 10px 0; text-align:left;} #sub_charge .charge_form_cont .badge_box_notice {padding-top:10px;font-size:0.85em; letter-spacing:-0.025em; font-weight:normal;} #sub_charge .charge_form_cont #badge_box ul{width:100%; overflow:hidden;} #sub_charge .charge_form_cont #badge_box li{width:25%; float:left;padding:0 1.5%; background:url(https://cdn.metoon.co.kr/img/grade_dot.png) no-repeat 100% center;position:relative; } #sub_charge .charge_form_cont #badge_box .dot_none{background:none;} #sub_charge .charge_form_cont #badge_box .badge_grade_box{ position:relative; top:0; bottom:0; left:0; text-align: center;width:100%;} #sub_charge .charge_form_cont #badge_box .badge_grade_text_box p{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height: 42px;} #sub_charge .charge_form_cont #badge_box .badge_grade_box .cover_grade_hide{opacity:0; position:relative; width:100%;} #sub_charge .charge_form_cont #badge_box .badge_grade_box_on{position:relative;} #sub_charge .charge_form_cont #badge_box .badge_grade_box img{width:40%;} #sub_charge .charge_form_cont #badge_box .badge_grade_box .cover_grade{position:relative; z-index:9; width:100%;} #sub_charge .charge_form_cont #badge_box .badge_grade_on{position:absolute;top:8%; left:0; bottom:15%; margin:auto; width:100%; text-align: center; z-index:9;} #sub_charge .charge_form_cont #badge_box .badge_grade_off{position:absolute;top:8%; left:0; bottom:15%; margin:auto; width:100%; text-align: center; color:#747474;} #sub_charge .charge_form_cont #badge_box .badge_grade_box div p{font-size:0.9em; font-weight:bold;position:absolute; left:0; right:0; bottom:-3px; margin:auto;} #sub_charge .charge_form_cont #coin_form label{width:100%; padding:0; display:block;float:left; background:none; border:none;} #sub_charge .charge_form_cont #coin_form label{width:100%; display:block;float:left; position:relative; font-weight:bold;} #sub_charge .charge_form_cont #coin_form label p{color:#222; float:left; font-size:1em; padding:7px 0 7px; letter-spacing:-0.05em;} /* #sub_charge .charge_form_cont #coin_form label .coin_goods{color:var(--main-ft-color); width:15%; min-width:60px; max-width: 95px; float:left; text-align:left; padding-left:26px; padding-right:3px; background:url(https://cdn.metoon.co.kr/mimg/icon_coin_w.png) no-repeat 6px 48%,#e84d7d;background-size:15px;}pink 버전 */ #sub_charge .charge_form_cont #coin_form label .coin_goods{color:var(--main-ft-color); width:15%; min-width:60px; max-width: 95px; float:left; text-align:left; padding-left:26px; padding-right:3px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_coin_w.png) no-repeat 6px 48%,var(--bg-fc-color); background-size:15px;}/* white 버전 */ #sub_charge .charge_form_cont #coin_form label .free_ticket_goods{background: url(https://cdn.metoon.co.kr/mimg/free_ticket_goods.png) no-repeat 6px 48%, #844de8; background-size: 15px;} #sub_charge .charge_form_cont #ticket_form>div{width:100%; float: left; margin:5px auto 10px;} #sub_charge .charge_form_cont #ticket_form>div label{width:100%; float: left; margin-top:5px; border-radius:5px; overflow:hidden; background:#fff; border:1px solid transparent; box-sizing: border-box;} #sub_charge .charge_form_cont #ticket_form>div input{display:none;} #sub_charge .charge_form_cont #ticket_form label{width:100%; padding:0; display:block;float:left; background:none; border:none;} #sub_charge .charge_form_cont #ticket_form label{width:100%; display:block;float:left; position:relative; font-weight:bold;} #sub_charge .charge_form_cont #ticket_form label p{color:#222; float:left; font-size:1em; padding:7px 0 7px; letter-spacing:-0.05em;} #sub_charge .charge_form_cont #ticket_form label .day_goods{color:var(--main-ft-color); width:15%; min-width:55px; padding:7px 13px; max-width: 95px; text-align:center; background:#4261cd;} #sub_charge .charge_form_cont #ticket_form label .free_day_goods{background:#ff5876; padding: 15px 13px;} #sub_charge .charge_form_cont #ticket_form label .free_ticket_goods{background:#844de8;} #sub_charge .charge_form_cont #ticket_form label .free_month_ticket span{position:relative; padding:0 10px 0 5px;} #sub_charge .charge_form_cont #ticket_form label .free_month_ticket span img{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; display:block; width:100%;} #sub_charge .charge_form_cont #ticket_form label .free_month_ticket .txt_red{padding:0; color:#ff0042} #sub_charge .charge_form_cont #coin_form label .icon_grade_img{position:absolute; top:0; bottom:0; left:inherit; width:25px; height:25px; margin:auto 3px;} #sub_charge .charge_form_cont #coin_form label .icon_grade_img_box{margin-left:-5px;} #sub_charge .charge_form_cont #ticket_form label .icon_grade_img{position:absolute; top:0; bottom:0; left:inherit; width:25px; height:25px; margin:auto 3px;} #sub_charge .charge_form_cont #ticket_form label .icon_grade_img_box{margin-left:-5px;} #sub_charge .charge_form_cont .coin_detail{float:left;margin-left:2%; min-width:34%;} /* #sub_charge .charge_form_cont .coin_detail span{background:url(https://cdn.metoon.co.kr/mimg/icon_coin_p.png) no-repeat 0 40%; padding-left:20px; text-align:left; background-size:15px; min-width: 32px; display: inline-block;}pink 버전 */ #sub_charge .charge_form_cont .coin_detail span{background:url(https://cdn.metoon.co.kr/mimg/adult_icon_coin_p.png) no-repeat 0 40%; padding-left:20px; text-align:left; background-size:15px; min-width: 32px; display: inline-block;}/* white 버전 */ #sub_charge .charge_form_cont .coin_detail .bonus_coin{min-width:30px;} #sub_charge .charge_form_cont .coin_detail .bb_box{display: none; background: none; padding: 0;} #sub_charge .charge_form_cont .free_ticket_txt{float:left;margin-left:2%; min-width:34%;} #sub_charge .charge_form_cont .free_month_ticket{margin-left:2%;} #sub_charge .charge_form_cont .coin_detail span{background:url(https://cdn.metoon.co.kr/mimg/adult_icon_coin_p.png) no-repeat 0 40%; padding-left:20px; text-align:left; background-size:15px; min-width: 32px; display: inline-block;} #sub_charge .charge_form_cont .coin_detail .bonus_coin{min-width:30px;} #sub_charge .charge_form_cont .coin_detail .bb_box{display: none; background: none; padding: 0;} #sub_charge .charge_form_cont #coin_form label .coin_price{float:right; text-align:right; min-width:90px; background:url(https://cdn.metoon.co.kr/mimg/icon_coin_price.png) no-repeat 7% 50%; margin-right:3%; background-size:17px;} #sub_charge .charge_form_cont #ticket_form label .coin_price{float:right; text-align:right; min-width:80px; background:url(https://cdn.metoon.co.kr/mimg/icon_coin_price.png) no-repeat 7% 50%; margin-right:3%; background-size:17px;} #sub_charge .charge_form_cont #ticket_form .free_ticket3 .coin_price{ padding:15px 0;} #sub_charge .charge_form_cont .charge_con{width:100%; float:left; border:1px solid #e2e2e2; border-radius:5px; background:#e7e7e7; position:relative; margin-top:10px;} #sub_charge .charge_form_cont .charge_con div{float:left; width:25%; font-weight:bold; text-align:center; padding:7px 0; font-size:1.1em;margin:0 auto; line-height:1.4;} #sub_charge .charge_form_cont .charge_con .charge_con_left_box{width:20%; margin:10px auto; padding:0px 0; background:url(https://cdn.metoon.co.kr/mimg/charge_con_left_box.png) no-repeat 100% center;} #sub_charge .charge_form_cont .charge_con .charge_con_left_box .txt{font-size:1em; color:#2c2c2c;} #sub_charge .charge_form_cont .charge_con div p{width:100%;font-size:0.9em;} #sub_charge .charge_form_cont .charge_con div .txt{ color:#676767;} #sub_charge .charge_form_cont .charge_con span{color:#e84d7d; font-size:1.5em; margin-right:3px; font-weight:800;} #sub_charge .charge_form_cont .charge_con .plus_icon{background:url(https://cdn.metoon.co.kr/mimg/icon_coin_plus.png) no-repeat 100% 65%; background-size:8px 8px;} #sub_charge .charge_form_cont .charge_con .equals_icon{background:url(https://cdn.metoon.co.kr/mimg/icon_coin_equals.png) no-repeat 100% 65%; background-size:7px 6px;} #sub_charge .charge_form_cont .charge_con .total{color:#ea1f41;} #sub_charge .charge_form_cont .charge_con .free_ticket_txt{padding:5.5% 0 0;} #sub_charge .charge_form_cont #coin_form .coin_detail .bonus_bonus_coin{display:none; background:url(https://cdn.metoon.co.kr/mimg/icon_coin_P.png) no-repeat 0 center; padding-left:21px; text-align:left;} #sub_charge .charge_form_cont #ticket_form .coin_detail .bonus_bonus_coin{display:none; background:url(https://cdn.metoon.co.kr/mimg/icon_coin_P.png) no-repeat 0 center; padding-left:21px; text-align:left;} #sub_charge .charge_con .plus_icon_left{display:none; background:url(https://cdn.metoon.co.kr/mimg/icon_coin_plus.png) no-repeat 0 65%; background-size:8px 8px;} #sub_charge .charge_form_cont #coin_form .coin_detail .bb_box{display:none; background:none; padding:0;} #sub_charge .charge_form_cont #ticket_form .coin_detail .bb_box{display:none; background:none; padding:0;} #sub_charge .charge_btn{width:100%; float:left; margin-bottom:10px;} #sub_charge .charge_btn div{float:left; padding: 10px 0; width: 100%; text-align: center;} /* #sub_charge .charge_btn a{padding:10px 50px; margin:0 auto; text-align:center; font-weight:bold; font-size:1.0em; color:var(--main-ft-color); border-radius:5px; background:#e84d7d;}pink 버전 */ #sub_charge .charge_btn a{padding:10px 50px; margin:0 auto; text-align:center; font-weight:bold; font-size:1.0em; color:var(--main-ft-color); border-radius:5px; background:var(--bg-fc-color);}/* white 버전 */ #sub_charge .charge_btn .btn_2{padding:0;} #sub_charge .charge_btn .btn_2 a{display:inline-block; padding: 10px 20px; background:#404554;} #sub_charge .charge_btn_back{display:none; width:100%; float:left; margin-bottom:35px;} #sub_charge .charge_btn_back div{float:left; padding: 10px 0; width: 100%; text-align: center;} #sub_charge .charge_btn_back a{padding:10px 50px; margin:0 auto; text-align:center; font-weight:bold; font-size:1.0em; color:var(--main-ft-color); border-radius:5px; background:#a2a2a2;} #sub_charge .charge_notice{width:97%; margin:35px auto 15px; overflow:hidden;} #sub_charge .charge_notice .title{font-weight:bold;font-size:1em; padding:0; margin-bottom:5px;} #sub_charge .charge_notice p{font-size:0.9em; padding:0 12px; letter-spacing:-0.025em;} #sub_charge .charge_notice span{color:#ea0000; display:block;} #sub_charge #payment_type{display:none; width:100%;float: left;} #sub_charge #payment_type ul{width:100%; margin:10px auto 0px;} #sub_charge #payment_type li{background:none; width:48%; float:left; margin:0 1% 5px; position:relative;} #sub_charge #payment_type li img{width:100%; max-width:100%; position: inherit; float: left;} #sub_charge #payment_type li a{width:100%; display:block;padding:0; background:none; text-shadow:none; position:absolute; top:0; left:0; border: none;} #sub_charge #payment_type li a p{float: right; text-align:right; font-weight:bold; font-size:0.9em;color:var(--main-ft-color); margin:0; margin-right: 3%; padding:16px 0 0; font-size: 1.05em; letter-spacing:-0.025em;} #sub_charge .ui-btn-icon-right:after{display:none;} @media all and (min-width:320px) and (max-width:360px){ #content_wrap #sub_charge .cont_title{font-size: 1.2em; margin: 15px auto 10px;} #sub_charge .my_coin_box .my_coin_title{background:url(https://cdn.metoon.co.kr/mimg/icon_mycoin_point.png) no-repeat 0 50%; background-size:18px;} #sub_charge .charge_form_cont{margin:5px auto 10px;} #sub_charge .charge_form_cont>p{font-size: 0.9em; margin: 3px 0;} #sub_charge .charge_form_cont ul{margin: 0 auto 10px;} #sub_charge .charge_form_cont li{font-size: 0.9em;} #sub_charge .charge_form_cont .charge_con div{padding: 5px 0;} #sub_charge .charge_form_cont .charge_con .free_ticket_txt{padding:16px 0 15px;} #sub_charge .charge_form_cont .charge_con .charge_con_left_box{margin: 7px auto;} #sub_charge .charge_form_cont .charge_con .charge_con_left_box .txt{font-size: 0.9em;} #sub_charge .charge_form_cont .charge_con{font-size: 0.85em;} #sub_charge .charge_form_cont .charge_con span{font-size: 1.4em;} #sub_charge .charge_form_cont ul li p{font-size: 1.0em;} #sub_charge .charge_form_cont #coin_form>div{margin: 0 auto 0px;} #sub_charge .charge_form_cont #coin_form>div label{font-size: 0.9em;} #sub_charge .charge_form_cont #coin_form label .coin_price{min-width: 70px;float: right; background:url(https://cdn.metoon.co.kr/mimg/icon_coin_price.png) no-repeat 0% 50%; background-size:17px;} /* #sub_charge .charge_form_cont #coin_form label .coin_goods{padding-left: 24px; min-width: 53px; background: url(https://cdn.metoon.co.kr/mimg/icon_coin_w.png) no-repeat 6px 48%,#e84d7d;background-size: 15px;} */ #sub_charge .charge_form_cont #coin_form label p{letter-spacing: -0.025em;} #sub_charge .charge_form_cont #coin_form label .coin_goods{min-width: 50px; padding-left: 25px; background: url(https://cdn.metoon.co.kr/mimg/adult_icon_coin_w.png) no-repeat 6px 45%,var(--bg-fc-color); background-size:13px;} #sub_charge .charge_form_cont #coin_form label .free_ticket_goods{background:url(https://cdn.metoon.co.kr/mimg/free_ticket_goods.png) no-repeat 6px 45%, #844de8; background-size:13px;} #sub_charge .charge_form_cont #coin_form label .coin_price{background: url(https://cdn.metoon.co.kr/mimg/icon_coin_price.png) no-repeat 0% 40%;background-size:14px;} #sub_charge .charge_form_cont #coin_form label .coin_detail{margin-left: 1.5%;min-width: 32%;} #sub_charge .charge_form_cont .coin_detail span{padding-left: 16px; background: url(https://cdn.metoon.co.kr/mimg/adult_icon_coin_p.png) no-repeat 0 10%; background-size: 13px;min-width: 27px;} #sub_charge .charge_form_cont .coin_detail .bonus_coin{min-width: 25px;} #sub_charge .charge_form_cont #ticket_form>div{margin: 0 auto 0px;} #sub_charge .charge_form_cont #ticket_form>div label{font-size: 0.9em;} #sub_charge .charge_form_cont #ticket_form label .coin_price{min-width: 60px;float: right; background:url(https://cdn.metoon.co.kr/mimg/icon_coin_price.png) no-repeat 0% 50%; background-size:17px;} #sub_charge .charge_form_cont #ticket_form label .day_goods{ min-width: 45px; background: #4261cd;} #sub_charge .charge_form_cont #ticket_form label .free_day_goods{background:#ff5876; padding:15px 13px;} #sub_charge .charge_form_cont #ticket_form label .free_month_ticket{margin-left:2%;} #sub_charge .charge_form_cont #ticket_form label p{letter-spacing: -0.025em;} #sub_charge .charge_form_cont #ticket_form label .coin_goods{min-width: 50px; padding-left: 25px; background: url(https://cdn.metoon.co.kr/mimg/icon_coin_w.png) no-repeat 6px 45%,#e84d7d; background-size:13px;} #sub_charge .charge_form_cont #ticket_form label .coin_price{background: url(https://cdn.metoon.co.kr/mimg/icon_coin_price.png) no-repeat 0% 40%;background-size:14px;} #sub_charge .charge_form_cont #ticket_form label .coin_detail{margin-left: 1.5%;min-width: 32%;} #sub_charge .charge_form_cont #ticket_form label .free_month_ticket_price{background: url(https://cdn.metoon.co.kr/mimg/icon_coin_price.png) no-repeat 0% 50%; background-size: 14px; padding: 15px 0;} #sub_charge #payment_type li a p{padding: 14px 0 0;} #sub_charge .charge_notice .title{font-size:0.9em;} #sub_charge .charge_notice p{font-size:0.85em;} } @media all and (min-width:435px) and (max-width:600px){ #sub_charge .charge_form_cont li{font-size: 1em;} #sub_charge .charge_form_cont ul li p{padding: 7px 0 9px;} #sub_charge .charge_form_cont .charge_con div{padding: 15px 0;} #sub_charge .charge_form_cont .charge_con .charge_con_left_box{margin: 16px auto;} #sub_charge #payment_type li a p{padding: 8% 0;} #sub_charge .charge_notice .title{font-size:1.1em;} #sub_charge .charge_notice p{font-size:1em;} #sub_charge .charge_form_cont .coin_detail{min-width: 22%;} #sub_charge .charge_form_cont #coin_form label .coin_goods{width: 12%;padding-left: 30px;background: url(https://cdn.metoon.co.kr/mimg/adult_icon_coin_w.png) no-repeat 9px 48%,var(--bg-fc-color); background-size: 15px;} #sub_charge .charge_form_cont #coin_form label .free_ticket_goods{background:url(https://cdn.metoon.co.kr/mimg/free_ticket_goods.png) no-repeat 9px 48%, #844de8; background-size:15px;} #sub_charge .charge_form_cont .charge_con .free_ticket_txt{padding:4.5% 0 0;} } @media all and (min-width:457px){ #sub_charge .my_coin_box{margin-top: 158px;} } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_charge .cont_title{font-size: 1.6em;} #sub_charge .my_coin_box .my_coin_title{margin-left: 3%;} #sub_charge .my_coin_box .my_coin{margin-right:3%;} #sub_charge .charge_form_cont>p{font-size: 1.2em; margin-top:5px;} #sub_charge .charge_form_cont li{font-size: 1.3em;} #sub_charge .charge_form_cont .charge_form_tab li{font-size:1em;} #sub_charge .charge_form_cont ul{margin: 10px auto 20px;} #sub_charge .charge_form_cont ul li p{padding:10px 0 10px;} #sub_charge .charge_form_cont .coin_goods{padding-left: 50px;background: url(https://cdn.metoon.co.kr/mimg/icon_coin_w.png) no-repeat 15% 48%,#e84d7d;background-size:15px;} #sub_charge .charge_form_cont .coin_price{min-width: 120px;background: url(https://cdn.metoon.co.kr/mimg/icon_coin_price.png) no-repeat 7% 48%;background-size:15px;} #sub_charge .charge_form_cont .charge_con{font-size: 1.3em;} #sub_charge .charge_form_cont .charge_con div{padding: 20px 0;} #sub_charge .charge_form_cont .charge_con .charge_con_left_box{margin: 21px auto;} #sub_charge .charge_form_cont .coin_detail span{background: url(https://cdn.metoon.co.kr/mimg/adult_icon_coin_p.png) no-repeat 0 45%; background-size: 15px;} #sub_charge .charge_form_cont #coin_form label .coin_goods{width: 9%;padding-left: 4%;background: url(https://cdn.metoon.co.kr/mimg/adult_icon_coin_w.png) no-repeat 10% 48%,var(--bg-fc-color); background-size: 15px;} #sub_charge .charge_form_cont #coin_form label .free_ticket_goods{background:url(https://cdn.metoon.co.kr/mimg/free_ticket_goods.png) no-repeat 10% 48%, #844de8; background-size:15px;} #sub_charge .charge_form_cont #coin_form label p{min-width: 16%;} #sub_charge .charge_form_cont #coin_form>div label{font-size: 1.1em;} #sub_charge .charge_form_cont #coin_form label .coin_price{ background: url(https://cdn.metoon.co.kr/mimg/icon_coin_price.png) no-repeat 0% 50%; background-size: 17px; min-width: 95px;} #sub_charge .charge_btn{margin-top:10px; margin-bottom:15px;} #sub_charge .charge_btn div{padding: 15px 0;} #sub_charge .charge_btn a{padding: 15px 50px; font-size: 1.3em;} #sub_charge .charge_btn_back{margin-top:10px;} #sub_charge .charge_btn_back div{padding: 15px 0;} #sub_charge .charge_btn_back a{padding: 15px 50px; font-size: 1.3em;} #sub_charge #payment_type li{width:23%;} #sub_charge #payment_type li a p{font-size:0.8em; padding:7% 0; margin-right: 5%;} #sub_charge .charge_notice .title{font-size:1.2em;} #sub_charge .charge_notice p{font-size:1.1em;} #sub_charge .charge_notice span{display:block;} } @media all and (min-width:750px){ #sub_charge .charge_form_cont .charge_con .free_ticket_txt{padding: 4.5% 0 0;} } @media all and (min-width:1024px){ #sub_charge .charge_form_cont .charge_con .free_ticket_txt{padding: 20px 0 0;} #sub_charge .charge_form_cont .coin_detail{min-width:auto;} #sub_charge .charge_form_cont #coin_form .free_ticket_label .coin_detail{padding-right: 10px;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { } @media screen and (orientation:landscape) and (max-width:780px){ } @media screen and (orientation:landscape) and (max-width:667px){ #sub_charge #payment_type li{width: 31%; font-size: 1em;} #sub_charge #payment_type li a p{font-size: 1em;padding: 8% 0;} #sub_charge .charge_form_cont #coin_form>div label{font-size: 1em;} } @media screen and (orientation:landscape) and (max-width:570px){ } @media screen and (orientation:landscape) and (max-width:480px){ #sub_charge #payment_type li{width: 31%;} #sub_charge #payment_type li a p{font-size: 1em; padding:6% 1px;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #sub_charge .charge_form_cont .coin_detail{min-width: 10%;} #sub_charge #payment_type li{width: 18%;} #sub_charge #payment_type li a{height:100%;} #sub_charge #payment_type li a p{padding: 8% 0;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #sub_charge .charge_form_cont .coin_detail{min-width: 12%;} } /* 서브 충전소 */ /* 서브 쿠폰 */ #sub_coupon .cont_title{display:none;} #sub_coupon .coupon_cont{width: 96%; overflow: hidden; margin: 0 auto; padding:0; position:relative; background-size:100%;} #sub_coupon .coupon_cont img{width:100%; display: block; opacity:1; max-width:570px;} #sub_coupon .coupon_cont .coupon_cont_btm{position:relative;} #sub_coupon .coupon_cont .coupon_form_box{position:absolute; top:10%; bottom:15%; margin:auto; left:0; width:100%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap{width:85%; margin: 0 auto; position: relative;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap>div{width:100%; position:relative;} #sub_coupon .coupon_cont .coupon_form_box form div{display:block; width:48%; float:left; border:2px solid #56606b; border-radius:5px; position:relative; overflow:hidden;} #sub_coupon .coupon_cont .coupon_form_box form .coupon_pw{margin-left:1%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap form{width:75%; float:left;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap .coupon_form_btn{float:right; width:25%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap label{float:left; background:#56606b; color:var(--main-ft-color); text-shadow:none; width:25%; position:absolute; top:15%; bottom:0; left:0; margin:auto; text-align:center;height:20px; padding: 5px 0; font-size:0.9em;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap input{float:right; letter-spacing:-0.025em; font-size:0.9em; line-height:inherit; width:75%; border:none; padding:5px; } #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap #coupon_num{width:100%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap .ui-input-text{float:right; border:none; border-radius:0; width: 75%; margin:0;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap .coupon_num_box{width:97%; margin:3px 0;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap .coupon_num_box .ui-input-text{width:100%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap .coupon_form_btn{ height:100%;position:absolute; top:0; bottom:0;right:0; margin:auto;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap a{position:relative; display:block; background:#56606b; text-align:center; color:var(--main-ft-color); font-size:0.9em; text-shadow:none; border-radius:5px; overflow:hidden; padding:10px 0 5px;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap span{padding:18px 0 13px; display:block;background:url(https://cdn.metoon.co.kr/mimg/icon_coupon_btn.png) no-repeat center 0; background-size:18px;} #sub_coupon .coupon_cont ul{width:100%; overflow:hidden; margin:5px auto 3px; float:left;} #sub_coupon .coupon_cont li{display:inline-block; font-size:0.9em; letter-spacing:-0.025em; float:left; margin-left:10px;} #sub_coupon .coupon_cont ul .right{float:left; margin-right:10px;} #sub_coupon .coupon_note{width: 96%; overflow: hidden; margin: 15px auto; letter-spacing:-0.025em;} #sub_coupon .coupon_note p{font-weight:bold; font-size:1.1em;} #sub_coupon .coupon_note ul{width:95%; margin: 3px auto 0;} #sub_coupon .coupon_note li{font-size:0.9em; position:relative; padding:3px 10px; line-height:1.4;} #sub_coupon .coupon_note li span{position:absolute; left:0;} #sub_coupon .coupon_cont .coupon_form_box .coupon_checkbox{overflow:hidden;width: 100%; margin: 0 auto;} #sub_coupon .coupon_cont .coupon_form_box .coupon_checkbox .ui-checkbox{margin:0; position:relative;width: 100%; margin: 0 auto; overflow:hidden;} #sub_coupon .coupon_cont .coupon_form_box .coupon_checkbox input{width:11px; height:11px; position:absolute; top:0px; bottom:0; left:1px; margin:auto; border-radius:3px;} #sub_coupon .coupon_cont .coupon_form_box .coupon_checkbox .coupon_check{color:#676767; background:none; position:inherit; padding:0; padding-left: 15px; font-size: 0.9em; border: none; font-weight: normal; width:100%;height: inherit; margin:0; text-align:left;} #sub_coupon .coupon_cont .coupon_form_box .coupon_checkbox .coupon_check:after{display:none;} @media all and (min-width:320px) and (max-width:360px){ #content_wrap #sub_coupon .cont_title{font-size: 1.2em; margin: 15px auto 10px;} #sub_coupon .coupon_cont .coupon_form_box{top:10%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap a{ font-size:0.85em; letter-spacing:-0.025em;} #sub_coupon .coupon_cont ul{margin: 0px auto 0; width:100%;} #sub_coupon .coupon_cont li{font-size: 0.85em;letter-spacing: -0.1em; margin-left: 0px;} #sub_coupon .coupon_cont ul .right{margin-right: 5px;} #sub_coupon .coupon_note{font-size: 1em;} } @media all and (min-width:435px) and (max-width:600px){ #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap{width: 80%;} #sub_coupon .coupon_cont .coupon_form a{font-size: 1em; padding: 2.5% 0;} #sub_coupon .coupon_cont ul{width: 100%;} #sub_coupon .coupon_cont li{font-size: 1em;} } @media all and (min-width:500px) and (max-width:600px){ #sub_coupon .coupon_cont .coupon_form_box{top:15%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap{width: 80%;} #sub_coupon .coupon_cont img{max-width: 450px;} #sub_coupon .coupon_cont{background:url(https://cdn.metoon.co.kr/mimg/bg_coupon_formbox_w1.png) no-repeat center; background-size:100%;} #sub_coupon .coupon_cont .coupon_form{width:55%; height: 40px;} #sub_coupon .coupon_cont ul{ width: 100%; font-size: 0.9em;} } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_coupon .cont_title{font-size: 1.6em;} #sub_coupon .coupon_cont .coupon_form_box{top: 15%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap{width: 70%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap label{font-size:1em; top:5%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap input{font-size:1em;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap a{font-size: 1.1em;letter-spacing: -0.025em;padding: 15px 0 6px;} #sub_coupon .coupon_cont{max-width: 600px;background:url(https://cdn.metoon.co.kr/mimg/bg_coupon_formbox_w1.png) no-repeat center;background-size:100%;} #sub_coupon .coupon_cont .coupon_form{width:55%; height: 40px;} #sub_coupon .coupon_cont .coupon_form .ui-input-text input{font-size: 1.2em;} #sub_coupon .coupon_cont .coupon_form a{font-size: 1.2em; padding: 2% 0;} #sub_coupon .coupon_cont ul{font-size: 0.9em;} #sub_coupon .coupon_cont li{font-size: 1.2em;} #sub_coupon .coupon_note{font-size: 1.2em;} } @media all and (min-width:810px){ #content_wrap #sub_coupon .cont_title{font-size: 1.6em;} #sub_coupon .coupon_cont .coupon_form_box{top: 15%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap{width: 70%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap label{font-size:1em; top:5%;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap input{font-size:1em;} #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap a{font-size: 1.1em;letter-spacing: -0.025em;padding: 15px 0 6px;} #sub_coupon .coupon_cont{max-width: 600px;background:url(https://cdn.metoon.co.kr/mimg/bg_coupon_formbox_w1.png) no-repeat center;background-size:100%;} #sub_coupon .coupon_cont .coupon_form{width:55%; height: 40px;} #sub_coupon .coupon_cont .coupon_form .ui-input-text input{font-size: 1.2em;} #sub_coupon .coupon_cont .coupon_form a{font-size: 1.2em; padding: 2% 0;} #sub_coupon .coupon_cont ul{font-size: 0.9em;} #sub_coupon .coupon_cont li{font-size: 1.2em;} #sub_coupon .coupon_note{font-size: 1.2em;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { } @media screen and (orientation:landscape) and (max-width:780px){ } @media screen and (orientation:landscape) and (max-width:667px){ #sub_coupon .coupon_cont .coupon_form_box .form_box_wrap{width: 85%;} #sub_coupon .coupon_cont{max-width:450px; background: url(https://cdn.metoon.co.kr/mimg/bg_coupon_formbox.png) no-repeat center; background-size: 100%;} } @media screen and (orientation:landscape) and (max-width:570px){ } @media screen and (orientation:landscape) and (max-width:480px){ } /* 서브 쿠폰 */ /* 서브 쿠폰 로그인 */ /* #sub_coupon_login .cont_title{display:none;} */ #sub_coupon_login .coupon_cont_login{width: 96%;width:100%; overflow: hidden; margin: 0 auto; padding:0; position:relative; background-size:100%;} #sub_coupon_login .coupon_cont_login img{width:100%; display: block; opacity:1;} #sub_coupon_login .coupon_cont_login .coupon_form_box{position:absolute; top:15%; bottom:15%; left:0; margin:auto; width:100%;} #sub_coupon_login .coupon_cont_login .coupon_form{width:85%; margin:0 auto; border:2px solid #56606b; border-radius:5px; position:relative; height: 40px; margin-bottom:5px;} /* #sub_coupon_login .coupon_cont_login .coupon_cont_btm:before{content:"";display:block;position:absolute;bottom:0;left:0;right:0;width:100%;height:44%;background-color:#FFFFFF;border:1px solid #ededed;border-top:0 none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} */ #sub_coupon_login .coupon_cont_login .coupon_cont_btm{position:relative;background:url("https://cdn.metoon.co.kr/mimg/bg_coupon_formbox_btm_login_xtg.png") no-repeat center 0, linear-gradient(to bottom, transparent 40px, #FFFFFF 40px);background-size:100% auto;overflow:hidden;color:#141414;} #sub_coupon_login .coupon_cont_login .coupon_form_box{position:relative; /* top:15%;left:0;bottom:15%; */ margin:auto; width:100%;overflow:hidden;padding:15px 0 10px;z-index:10;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap{width:85%; margin: 0 auto; position: relative;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap>div{width:100%;} #sub_coupon_login .coupon_cont_login .coupon_form_box form div{display:block; width:100%; float:left; border:2px solid #56606b; border-radius:5px; position:relative; overflow:hidden;} #sub_coupon_login .coupon_cont_login .coupon_form_box form input{width:70%; padding:5px; height:100%; font-size:1em; letter-spacing:-0.03em; border:none; } #sub_coupon_login .coupon_cont_login .coupon_form .ui-input-text{display:inline-block; width:70%; height:100%; margin:0; border:none;} #sub_coupon_login .coupon_cont_login .coupon_form a{display:inline-block;display:inline-flex;align-items:center;justify-content:center;text-align:center; width:30%; background:#56606b; position:absolute; top:0; right:0; bottom:0; margin:auto; padding:12px 0; font-size:1em; color:var(--main-ft-color);} #sub_coupon_login .coupon_cont_login .coupon_form span{background:url(https://cdn.metoon.co.kr/mimg/icon_coupon_btn.png) no-repeat 0 center; padding-left: 20px; background-size:18px;} #sub_coupon_login .coupon_cont_login .coupon_form .ui-input-text input{border:none; border-radius: 0; background:inherit; height: 100%;} #sub_coupon_login .coupon_cont_login ul{width:100%;line-height:1.5; overflow:hidden; margin:5px auto 5px; float:left;} #sub_coupon_login .coupon_cont_login li{display:inline-block; font-size:0.9em;/* letter-spacing:-0.025em; */float:left; margin-left:10px;} #sub_coupon_login .coupon_cont_login ul .right{float:left; margin-right:10px;} #sub_coupon_login .coupon_note{padding:30px 20px;background-color:#21201E;color:#ADACAA;overflow: hidden; margin: 0 auto;} #sub_coupon_login .coupon_note p{font-weight:500; font-size:1.1em;color:var(--main-ft-color);} #sub_coupon_login .coupon_note ul{/* width:95%; */ margin: 15px auto 0;} #sub_coupon_login .coupon_note li{display:flex;gap:5px 3px;font-size:0.9em; position:relative; padding:3px 0; line-height:1.4;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap02{width:85%;margin:0 auto;position:relative;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap02 .coupon_form{border:1px solid #7d7d7d;border-radius:0;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap02 .coupon_form a{background:#eee;color:#3c3c3c;border-left:1px solid #7d7d7d;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap02 input{font-size:14px;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap02 .coupon_form a span{background:url(https://cdn.metoon.co.kr/mimg/m_coupon_chk_ic.png) no-repeat 0 center;background-size:8px;padding-left:12px;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap02 p{font-size:11px;letter-spacing:-0.03em;text-align:center;} /* @media all and (min-width:320px) and (max-width:360px){ #content_wrap #sub_coupon_login .cont_title{font-size: 1.2em; margin: 15px auto 10px;} #sub_coupon_login .coupon_cont_login .coupon_form_box{top:12%;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap a{ font-size:0.85em; letter-spacing:-0.025em;} #sub_coupon_login .coupon_cont_login ul{margin: 0px auto 0; width:100%;} #sub_coupon_login .coupon_cont_login li{font-size: 0.85em;letter-spacing: -0.1em; margin-left: 0px;} #sub_coupon_login .coupon_cont_login ul .right{margin-right: 5px;} #sub_coupon_login .coupon_cont_login .coupon_form .ui-input-text{font-size: 0.9em;} #sub_coupon_login .coupon_note{font-size: 1em;} } @media all and (min-width:435px) and (max-width:600px){ #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap{width: 80%;} #sub_coupon_login .coupon_cont_login .coupon_form a{font-size: 1em; padding: 2.5% 0;} #sub_coupon_login .coupon_cont_login ul{width: 100%;} #sub_coupon_login .coupon_cont_login li{font-size: 1em;} } @media all and (min-width:500px) and (max-width:600px){ #sub_coupon_login .coupon_cont_login .coupon_form_box{top:20%;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap{width: 80%;} #sub_coupon_login .coupon_cont_login img{max-width: 450px;} #sub_coupon_login .coupon_cont_login{max-width:600px; background:url(https://cdn.metoon.co.kr/mimg/bg_coupon_formbox_w1.png) no-repeat center; background-size:100%;} #sub_coupon_login .coupon_cont_login .coupon_form{width:55%; height: 40px;} #sub_coupon_login .coupon_cont_login ul{ width: 100%; font-size: 0.9em;} } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_coupon_login .cont_title{font-size: 1.6em;} #sub_coupon_login .coupon_cont_login img{max-width: 450px;} #sub_coupon_login .coupon_cont_login .coupon_form_box{top: 20%;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap{width: 70%;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap label{font-size:1em; top:5%;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap input{font-size:1em;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap a{font-size: 1.1em;letter-spacing: -0.025em;padding:10px 0 8px;} #sub_coupon_login .coupon_cont_login{max-width:600px; background:url(https://cdn.metoon.co.kr/mimg/bg_coupon_formbox_w1.png) no-repeat center; background-size:100%;} #sub_coupon_login .coupon_cont_login .coupon_form{width:55%; height: 40px;} #sub_coupon_login .coupon_cont_login .coupon_form .ui-input-text input{font-size: 1.2em;} #sub_coupon_login .coupon_cont_login .coupon_form a{font-size: 1.2em; padding: 2% 0;} #sub_coupon_login .coupon_cont_login ul{font-size: 0.9em;} #sub_coupon_login .coupon_cont_login li{font-size: 1.2em;} #sub_coupon_login .coupon_note{font-size: 1.2em;} } */ @media all and (min-width:810px){ #content_wrap #sub_coupon_login .cont_title{font-size: 1.6em;} #sub_coupon_login .coupon_cont_login .coupon_form_box{top: 15%;padding-top:25px;padding-bottom:25px;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap{width: 70%;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap label{font-size:1em; top:5%;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap input{padding-left:20px;font-size:1.2em;} #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap a{font-size: 1.2em;padding:10px 0 10px;} #sub_coupon_login .coupon_cont_login .coupon_form{width:55%; height: 50px;} #sub_coupon_login .coupon_cont_login .coupon_form .ui-input-text input{font-size: 1.2em;} #sub_coupon_login .coupon_cont_login .coupon_form a{font-size: 1.2em; padding: 2% 0;} #sub_coupon_login .coupon_cont_login ul{font-size: 0.9em;} #sub_coupon_login .coupon_cont_login li{font-size: 1.2em;} #sub_coupon_login .coupon_note{padding:38px 65px 45px;font-size: 1.2em;} } @media screen and (orientation:landscape) and (max-width:667px){ #sub_coupon_login .coupon_cont_login .coupon_form_box .form_box_wrap{width: 85%;} #sub_coupon_login .coupon_cont_login{max-width:450px; background: url(https://cdn.metoon.co.kr/mimg/bg_coupon_formbox_login.png) no-repeat center; background-size: 100%;} } /* 서브 쿠폰 로그인 */ /* 변경전 */#sub_popular .sub_popular_tab_new{width:96%; margin:0 auto; border:1px solid #ddd; border-radius:5px; overflow: hidden; box-sizing: content-box;} #sub_popular .sub_popular_tab_new ul{width:100%; overflow:hidden; } #sub_popular .sub_popular_tab_new li{float:left; text-align:center; background:#fff; padding:0; border-right:1px solid #f1f1f1; box-sizing:border-box;} #sub_popular .sub_popular_tab_new li a{font-size:1.05em; display:block; letter-spacing:-0.025em; border-bottom:2px solid #fff; font-weight:normal; color: #9e9e9e;} #sub_popular .sub_popular_tab_new li a.on{color: #E84D7D; border-bottom: 2px solid #E84D7D;} #sub_popular .sub_popular_tab_new li:last-child{border:none;} #sub_popular #popular_tab19 li{width:25%;} #sub_popular #popular_tab19 li:nth-child(4){border-right:none;} #sub_popular #popular_tab19 li:nth-child(n+5){width:25%; border-top:1px solid #f1f1f1;} /* 변경전 */ /* 변경후 */#sub_popular .sub_popular_tab_new1{width:100%; margin:0 auto; border:none; border-bottom:1px solid #ddd; border-radius:0px; overflow: hidden; box-sizing: content-box;} #sub_popular .sub_popular_tab_new1 ul{width:100%; overflow:hidden; background:#fff; display:-webkit-box;display:flex; -webkit-box-pack:justify;justify-content:space-between;} #sub_popular .sub_popular_tab_new1 li{-webkit-box-flex:1;flex-grow:1; text-align:center; background:#fff; padding:0;/* border-right:1px solid #f1f1f1; */ border-right:none; box-sizing:border-box; height:42px; line-height:40px;} #sub_popular .sub_popular_tab_new1 li.novel{width:28%;} #sub_popular .sub_popular_tab_new1 li a{font-size:13px; display:block; letter-spacing:-1px; border-bottom:2px solid #fff; font-weight:normal; color: #4e4e4e;} #sub_popular .sub_popular_tab_new1 li a.on{color: #E84D7D; border-bottom: 2px solid #E84D7D; font-weight:bold;} #sub_popular .sub_popular_tab_new1 li a span.adult{padding-left:16px; background: url(https://cdn.metoon.co.kr/img/popular_adult_icon.png) no-repeat 0 center; background-size:14px;} #sub_popular .sub_popular_tab_new1 li a.on span.adult{padding-left:16px; background: url(https://cdn.metoon.co.kr/img/popular_adult_icon_on.png) no-repeat 0 center; background-size:14px;} #sub_popular .sub_popular_tab_new1 li:last-child{border:none;} #sub_popular .sub_popular_tab_new1 #popular_tab19 li{width:20%; border-bottom:1px solid #ececec; border-right:none;} #sub_popular .sub_popular_tab_new1 #popular_tab19 li:nth-child(5){border-right:none;} #sub_popular .sub_popular_tab_new1 #popular_tab19 li:nth-child(4){border-right:1px solid #f1f1f1; border-right:none;} #sub_popular .sub_popular_tab_new1 #popular_tab19 li:nth-child(n+5){border-top:none;} #sub_popular .sub_popular_tab_new1 #popular_tab19 li:nth-child(n+6){width:20%; border-top:none; border-bottom:none;} #sub_popular .sub_popular_tab_new1 #popular_tab19 li:last-child{border-right:1px solid #f1f1f1; border-right:none;} /* 변경후 */ /* 정렬순서 */ /* #sub_popular .popular_radio{width: 96%; overflow: hidden; margin: 5px auto; padding:0;} #sub_popular .popular_radio fieldset{text-align:right; float:right; padding:6px 0;} #sub_popular .popular_radio .ui-controlgroup{float:right;} #sub_popular .popular_radio .ui-radio{float:left;} #sub_popular .popular_radio label{border:none; position:relative; background: none; font-size: 1em; padding-right: 5px; color:#9e9e9e;} #sub_popular .popular_radio input{vertical-align: bottom; opacity: 0;} #sub_popular .popular_radio .ui-radio input{width: 15px; height:15px; top: 0; bottom: 0; margin: auto;} #sub_popular .ui-radio .ui-btn.ui-radio-on:after{opacity:0; width:8px; height:8px; margin: -4px 2px 0 6px; border:none; background:#F15584;} #sub_popular .ui-radio .ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{width: 15px; height:15px; opacity:0;} #sub_popular .popular_radio .chkselect{color: #F15584;} #sub_popular .popular_radio label:after{content: ""; display: block; position: absolute; top: 2px; left: -15px; width: 13px; height: 13px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_off.png) no-repeat center; background-size: 13px;} #sub_popular .popular_radio .chkselect:after{content: ""; display: block; position: absolute; top: 2px; left: -15px; width: 13px; height: 13px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_on.png) no-repeat center; background-size: 13px;} pink 버전 */ /* 정렬순서 */ /* 정렬순서 170116 */ /*#sub_popular .popular_radio{width: 96%; overflow: hidden; margin: 4.5px auto 5.5px; padding:0;} /* 2017-09-20 수정 */ #sub_popular .popular_radio{width: 96%; overflow: hidden; margin: 6px auto 6px; padding:0;} #sub_popular .popular_radio fieldset{text-align:right; float:left; padding:0; margin-left:5px;} #sub_popular .popular_radio select{border:1px solid #ddd; padding:2px 7px; padding-right:15px; font-size:13px; height:30px; line-height: normal; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ic_select.png) no-repeat 92% 70%,#fff; background-size: 8px; border-radius:0; -webkit-appearance:none; color:#676767;}/* white 버전 */ /* 정렬순서 170116 */ #sub_popular .ui-btn-icon-right:after{display:none;} #sub_popular .popular_cont{overflow:hidden;margin:0 auto;width:100%; padding:10px 0 0;} /* 2017-09-20 추가 */ #sub_popular .popular_cont .popular_cont_list{box-shadow:none; margin: 5px 0;} #sub_popular .popular_cont .popular_cont_list li{padding:5px 0;} #sub_popular .popular_cont .popular_cont_list li div{display: block; width:96%; position: relative; overflow: hidden; border-radius: 6px; padding:0; margin:0 auto; height:145px; background:#fff; border-width:thin; border:1px solid #DDD; color:#333;} #sub_popular .popular_cont .popular_cont_list li div a{display: block; height: 100%; position: absolute;margin:auto; left:0; right:0; width:80%; z-index:99;} #sub_popular .popular_cont .popular_cont_list li img{width:100%; max-height: initial; float:left;} #sub_popular .popular_cont .popular_cont_list li .up_nobel_main{width:17%; position:absolute; top:0; left:0; max-width:89px;} #sub_popular .popular_cont .popular_cont_list li .end_nobel_main{width:17%; position:absolute; top:0; left:0; max-width:89px;} #sub_popular .popular_cont .popular_cont_list li .img_backbox{border:none; border-radius:0; max-width: 50%; max-height: initial; float: left;position:relative;} #sub_popular .popular_cont .popular_cont_list li .img_backbox span{position:absolute; top:0; left:0; right:0; height:100%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #sub_popular .popular_cont .popular_cont_list .txt_box{float:right; width:50%; height:100%; padding:10px; font-size:1.2em; border:none;} #sub_popular .popular_cont .popular_cont_list .txt_box p{width:100%; font-size:0.9em; letter-spacing: -0.08em; display:block; margin:0; white-space: pre-wrap;} #sub_popular .popular_cont .popular_cont_list .txt_box p .heart{font-size:1.0em; padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart.png) no-repeat 0 75%; background-size: 14px 12px; color:#E84D7D;} #sub_popular .popular_cont .popular_cont_list .txt_box .on .heart{background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 25%; background-size: 13px 11px; } #sub_popular .popular_cont .popular_cont_list .txt_box .nobel_title{font-weight:bold; font-size:1.1em; display:block; padding:5px 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #sub_popular .popular_cont .popular_cont_list .txt_box .txt{margin:5px 0 25px;} #sub_popular .popular_cont .popular_cont_list .txt_box .writer{position:absolute; bottom:10px; right: 10px; text-align:right; width: 100%; font-size:0.85em; letter-spacing:-0.025em;} #sub_popular .popular_top10_list{box-shadow:none; margin:0px; float:left; width:100%; padding:0 4px; -webkit-box-sizing:border-box; box-sizing:border-box;} #sub_popular .popular_top10_list li{padding: 0 4px 8px; float:left; width:50%; position:relative; -webkit-box-sizing:border-box; box-sizing:border-box;} #sub_popular .popular_top10_list li div{display: block; position: relative; overflow: hidden; padding:0; margin:0 auto; /* height:200px; */ background:#fff; border-width:thin; color: #333; border:1px solid #DDD; font-size:1em; letter-spacing:-0.025em;} #sub_popular .popular_top10_list li div a{display: block; width:100%; position: relative; overflow: hidden; padding:0; margin:0 auto; height: 100%;} #sub_popular .popular_top10_list li .img_backbox{position:absolute; top:0; left:0; right:0; z-index: 9; height:80%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #sub_popular .popular_top10_list li .img_box{display:block; height:100%; max-height:320px; width:100%;border: none; position:relative; overflow:hidden;} #sub_popular .popular_top10_list li img{display:block; max-height: none;} #sub_popular .popular_top10_list li .novel_img{position:absolute; left:0; right:0; top:0; border: none; width: 100%; padding-bottom:100%; border-radius: 0;} #sub_popular .popular_top10_list li .ebook_imgbox{position:absolute; top:0; left:0; width:100%; height:100%;} #sub_popular .popular_top10_list li .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #sub_popular .popular_top10_list li .ebook_imgbox .novel_img{opacity:0.2;} #sub_popular .popular_top10_list li .ebook_imgbox .ebook_img{position:absolute; width:65%; top:0; left:0; right:0; bottom:0; margin:auto; border:none; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); background-repeat:no-repeat !important;} #sub_popular .popular_top10_list li .blurcover{position:absolute; top:-25%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #sub_popular .popular_top10_list li .blurcover_b{background:url('https://cdn.metoon.co.kr/img/list19_blind_mark.png') no-repeat center 20% !important; background-size:60% !important;} #sub_popular .popular_top10_list li .up_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px;} #sub_popular .popular_top10_list li .end_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px;} #sub_popular .popular_top10_list li p{ width: 100%; position:absolute; bottom:0; background:#fff; margin:0; min-height:45px; border-top:1px solid #ddd; z-index: 9;} #sub_popular .popular_top10_list li p>span{display:block; position:relative; width:100%;} #sub_popular .popular_top10_list li span span{display:block; font-size: 0.9em; margin-top: 10px; padding:0 5px; line-height: 1;} #sub_popular .popular_top10_list li .title{font-weight:bold; text-align:left; font-size:1em; padding:5px; margin-top:0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_popular .popular_top10_list li .writer{margin:0 0 5px; display: block; text-align:center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_popular .popular_top10_list li .writer .wr_tag{display:block;float:left;font-size:10px;padding:3px 5px; background:#ffdcfd; color:#e743ce; font-weight:bold;line-height:1;margin-right:5px;} #sub_popular .popular_top10_list li .hits{display:none; position:absolute; right:2px; top:-20px; color:#E84D7D;background: rgba(255, 255, 255, 0.75); padding: 2px 2px 0; border-radius:3px; border:1px solid #E84D7D;box-sizing: border-box; margin-top:0;} #sub_popular .popular_top10_list li .hits .heart{background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 25%; background-size: 13px 11px; padding-left:17px; margin-top:0;} /* #sub_popular .popular_top10_list li .rank_num{width: 35px; height: 40px; text-align: center; padding-top: 5px; margin:0; font-size: 1.15em; font-weight: bold; text-indent: -1%; position:absolute; top:0; left:-1px; color:var(--main-ft-color); background:url(https://cdn.metoon.co.kr/mimg/rank_bg_01.png) no-repeat center 0; background-size:100%;} pink 버전 */ #sub_popular .popular_top10_list li .rank_num{width: 25px; padding:4px 0 3px; text-align: center; margin:0; font-size: 12px; font-weight: bold; position:absolute; top:0; left:-1px; color:var(--main-ft-color); background:#ed1c24;}/* white 버전 */ #sub_popular .popular_top10_list li .icon_19_patch{width: 18px !important; position: absolute; bottom: 100%; margin-bottom:5px; right: 5px; z-index: 99;} #sub_popular .popular_top10_list li .txt_tag .up_txt_tag{position:relative; padding:0; margin-left:1px; border:0 none !important; background:transparent !important;} #sub_popular .popular_top10_list li .txt_tag .up_txt_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #1567c3; border-right:5px solid transparent;} #sub_popular .popular_top10_list li .txt_tag .up_txt_tag img{width:22px; position:static;} #sub_popular .popular_top10_list li .txt_tag .ic_tag01{position:relative;} #sub_popular .popular_top10_list li .txt_tag .ic_tag01:after{content:""; position:absolute; top:0; right:-6px; border-right:6px solid transparent; display:block;} #sub_popular .popular_top10_list li .txt_tag .new_tag:after{ border-top:12px solid #46adf2;} #sub_popular .popular_top10_list li .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #sub_popular .popular_top10_list li .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #sub_popular .popular_top10_list li .txt_tag .up_txt_tag span{padding:0;} #sub_popular .popular_top10_list li .txt_tag .end_txt_tag span{padding:0;} #sub_popular .popular_top10_list li .txt_tag .hot_tag span{padding-right:3px;} #sub_popular .popular_top10_list li .txt_tag .ic_tag01 img{position:static; width:24px !important; display:block;} #sub_popular .popular_other_list{box-shadow:none; margin:0; float:left; width:100%;} #sub_popular .popular_other_list li{padding: 0 0 5px; float:left; width:50%;} #sub_popular .popular_other_list li div{display: block; width:96%; position: relative; overflow: hidden; border-radius: 6px; padding:0; margin:0 auto; height:200px; background:#fff; border-width:thin; color: #333; border:1px solid #DDD; font-size:1em; letter-spacing:-0.025em;} #sub_popular .popular_other_list li div a{display: block; width:100%; position: relative; overflow: hidden; padding:0; margin:0 auto; height: 100%;} #sub_popular .popular_other_list li .img_backbox{position:absolute; top:0; left:0; right:0; height:80%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%;} #sub_popular .popular_other_list li .img_box{display:block; height:100%; width:100%;border: none; position:relative; overflow:hidden;} #sub_popular .popular_other_list li img{width: 100%; max-width:101%; max-height: none;} #sub_popular .popular_other_list li .novel_img{position:absolute; left:0; right:0; top:0; border: none; width: 100%; border-radius: 0;} #sub_popular .popular_other_list li .blurcover{position:absolute; top:-25%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #sub_popular .popular_other_list li .blurcover_b{background:url('https://cdn.metoon.co.kr/img/list19_blind_mark.png') no-repeat center 20% !important; background-size:60% !important;} #sub_popular .popular_other_list li .up_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px;} #sub_popular .popular_other_list li .end_nobel_main{width:35%; position:absolute; top:0; left:0;max-width: 60px;} #sub_popular .popular_other_list li p{ width: 100%; position:absolute; bottom:0; background:#fff; margin:0;min-height:50px;} #sub_popular .popular_other_list li p>span{display:block; position:relative;} #sub_popular .popular_other_list li span span{display:block; font-size: 0.9em; margin-top: 10px; padding:0 10px; line-height: 1.3;} #sub_popular .popular_other_list li .title{font-weight:bold; font-size:1em; text-align:center; padding:5px; margin-top:0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_popular .popular_other_list li .writer{margin:0 0 5px; display: block; text-align:center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_popular .popular_other_list li .hits{display:none; position:absolute; right:2px; top:-20px; color:#E84D7D;background: rgba(255, 255, 255, 0.75); padding: 2px 2px 0; border-radius:3px; border:1px solid #E84D7D;box-sizing: border-box; margin-top:0;} #sub_popular .popular_other_list li .hits .heart{background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 25%; background-size: 13px 11px; padding-left:17px; margin-top:0;} #sub_popular .popular_other_list li .rank_num{width: 35px; height: 40px; text-align: center; padding-top: 5px; margin:0; font-size: 1.15em; font-weight: bold; text-indent: -1%; position:absolute; top:0; left:-1px; color:var(--main-ft-color); background:url(https://cdn.metoon.co.kr/mimg/adult_rank_bg2.png) no-repeat center 0; background-size:100%;} #sub_popular .popular_other_list li .icon_19_patch{width: 22px !important; position: absolute; bottom: 100%; margin-bottom:5px; right: 5px; z-index: 99;} #sub_popular .popular_list_more{width: 100%; padding-bottom: 15px; float: left; background: #f5f5f5;} /* #sub_popular .popular_list_more a{width: 96%; display: block; text-align: center; color: #f74a7d; background: #fff; padding: 9px 0 8px; font-size: 1.1em; border: 1px solid #f74a7d; border-radius: 5px; margin: 5px auto; text-shadow: none; position: relative;}pink 버전 */ #sub_popular .popular_list_more a{width: 96%; display: block; text-align: center; color: var(--bg-fc-color); background: #fff; padding: 9px 0 8px; font-size: 1.1em; border: 1px solid var(--bg-fc-color); border-radius: 5px; margin: 5px auto; text-shadow: none; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}/* white 버전 */ #sub_popular .popular_list_more p{font-weight: bold; display: inline-block; margin-left: -3%;} #sub_popular .popular_list_more img{width: 16px; display: inline-block; position: absolute; top: 4px; bottom: 0; margin: auto; padding-left: 10px;} #sub_popular .popular_cont ul li .txt_tag{position:absolute; bottom:100%; left:0; padding:0; margin:0 0 5px;} #sub_popular .popular_cont ul li .txt_tag>span{margin:0; display: inline-block; text-align: center; vertical-align: text-top; /* margin: 0px 0 0 3px; border-radius: 3px; */ padding: 2px 3px 0; font-size: 10px; letter-spacing: -0.025em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_popular .popular_cont ul li .txt_tag .ic_tag01{padding:0;} #sub_popular .popular_cont ul li .txt_tag .up_txt_tag{padding:0;} #sub_popular .popular_cont ul li .txt_tag .up_txt_tag:after{content:""; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #1567c3;} #sub_popular .popular_cont ul li .txt_tag .up_txt_tag img{width:22px; position:static;} #sub_popular .popular_cont ul li .icon_end_re{width:22px; position:absolute; bottom:100%; margin-bottom:5px; right:30px; z-index:99;} #sub_popular .popular_cont ul li .txt_tag .new_tag{margin-left:0;} #sub_popular .popular_cont ul li .txt_tag .best_tag{margin-left:0;} #sub_popular .popular_cont ul li .txt_tag .hot_tag{margin-left:0;} #sub_popular .popular_cont ul li .txt_tag span>span{margin-top:0; padding:0 2px; padding-left:14px; display:inline-block;position:relative; } #sub_popular .popular_cont ul li .txt_tag .chat_tag img{width:22px; position:static;} #sub_popular .popular_cont ul li .txt_tag .hot_tag img{width:8px; left:1px;} #sub_popular .popular_cont ul li .txt_tag .new_tag img{width:11px; left:0px;} #sub_popular .popular_cont ul li .txt_tag .best_tag img{width:11px; left:0;} #sub_popular .popular_cont ul.popular_top10_list li .txt_tag .chat_tag{position:relative; padding:0 !important; margin-left:1px !important; background:transparent !important; border:0 none;} #sub_popular .popular_cont ul.popular_top10_list .chat_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #ffb72b; border-right:5px solid transparent;} #sub_popular .popular_cont ul.popular_top10_list .chat_tag img{width:22px !important; position:static;} #sub_popular .popular_cont ul li .patch_box{display:block; position:absolute; bottom:100%; right:5px; padding:0; margin:0; margin-bottom:5px; line-height:1;} #sub_popular .popular_cont ul li .patch_box img{position:static; margin:0; padding:0; display:inline-block;} @media all and (min-width:320px) and (max-width:350px){ /* #sub_popular .popular_top10_list li div{height:150px;} #sub_popular .popular_other_list li div{height:150px;} */ } @media all and (min-width:351px) and (max-width:360px){ /* #sub_popular .popular_top10_list li div{height:170px;} #sub_popular .popular_other_list li div{height:170px;} */ } @media all and (min-width:360px) and (max-width:360px){ #sub_popular .sub_genre_tab li a{font-size: 1.1em;} #sub_popular .sub_popular_tab_new1 li a{font-size: 14px;} #sub_popular .popular_radio{font-size: 0.9em;} #sub_popular .popular_radio .ui-radio input{width: 14px; height: 14px; top:2px;} #sub_popular .popular_radio label{padding-right: 3px; padding-left:3px;} #sub_popular .popular_cont .popular_cont_list .txt_box{font-size: 1.1em;} #sub_popular .popular_cont .popular_cont_list .txt_box .txt{margin: 5px 0 25px;} #sub_popular .popular_cont .popular_cont_list .txt_box .nobel_title{padding: 3px 0;} #sub_popular .popular_cont .popular_cont_list .txt_box .on .heart{background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 40%; background-size: 12px 10px; } #sub_popular .popular_top10_list li div{/* height: auto; */font-size:1em;} #sub_popular .popular_top10_list li .title{font-size:1em;} #sub_popular .popular_other_list li div{/* height: auto; */ font-size:1em;} #sub_popular .popular_other_list li .title{font-size:1em;} #sub_popular .popular_radio .chkselect:after{top:-1px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_on.png) no-repeat center; background-size: 12px;} #sub_popular .popular_radio label:after{top:-1px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_off.png) no-repeat center; background-size: 12px;} } @media all and (min-width:320px) and (max-width:359px){ #sub_popular .sub_genre_tab li a{font-size: 1.1em;} #sub_popular .sub_popular_tab_new1 li a{font-size: 14px;} #sub_popular .popular_radio{font-size: 0.9em;} #sub_popular .popular_radio .ui-radio input{width: 14px; height: 14px; top:2px;} #sub_popular .popular_radio label{padding-right: 3px; padding-left:3px;} #sub_popular .popular_cont .popular_cont_list .txt_box{font-size: 1.1em;} #sub_popular .popular_cont .popular_cont_list .txt_box .txt{margin: 5px 0 25px;} #sub_popular .popular_cont .popular_cont_list .txt_box .nobel_title{padding: 3px 0;} #sub_popular .popular_cont .popular_cont_list .txt_box .on .heart{background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 40%; background-size: 12px 10px; } #sub_popular .popular_top10_list li div{/* height: auto; */font-size:1em;} #sub_popular .popular_top10_list li .ebook_imgbox .ebook_img{width:70%;} #sub_popular .popular_top10_list li p{border-top:0 none;} #sub_popular .popular_top10_list li .title{font-size:1em;} #sub_popular .popular_other_list li div{/* height: auto; */ font-size:1em;} #sub_popular .popular_other_list li .title{font-size:1em;} #sub_popular .popular_radio .chkselect:after{top:-1px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_on.png) no-repeat center; background-size: 12px;} #sub_popular .popular_radio label:after{top:-1px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_off.png) no-repeat center; background-size: 12px;} } @media all and (min-width:361px) and (max-width:375px){ #sub_popular .popular_top10_list li div{height:216px;} } @media all and (min-width:376px) and (max-width:384px){ #sub_popular .popular_top10_list li div{height:216px;} } @media all and (min-width:320px) and (max-width:385px){ #sub_popular .popular_top10_list li div{width:auto;} } @media all and (min-width:385px){ #sub_popular .popular_top10_list li{width:33.333%;} } @media all and (min-width:390px){ #sub_popular .popular_top10_list li .ebook_imgbox .ebook_img{width:65%;} } @media all and (min-width:435px) and (max-width:600px){ #sub_popular .ui-field-contain>label~[class*=ui-], .ui-field-contain .ui-controlgroup-controls{width: 100%;} #sub_popular .popular_cont .popular_cont_list li div{height: 185px;} #sub_popular .popular_cont .popular_cont_list .txt_box .txt{margin: 5% 0 25px;} #sub_popular .popular_cont .popular_cont_list .txt_box .nobel_title{padding: 5px 0 3%;} #sub_popular .popular_top10_list li{padding: 0 0 11.77px;} /* 2017-09-20 추가 */ #sub_popular .popular_top10_list li div{height: 280px; font-size:1.1em;} #sub_popular .popular_other_list li div{height: 280px; font-size:1.1em;} #sub_popular .popular_top10_list li p{min-height:55px;} #sub_popular .popular_other_list li p{min-height:55px;} #sub_popular .popular_top10_list li .img_backbox{height:85%;} #sub_popular .popular_other_list li .img_backbox{height:85%;} } @media all and (min-width:535px) and (max-width:600px){ #sub_popular .popular_cont{width: 98%; margin: auto;} #sub_popular .popular_top10_list li{padding: 0 0 13.77px;} /* 2017-09-20 추가 */ } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_popular .cont_title{font-size: 1.6em;} #sub_popular .ui-field-contain>label~[class*=ui-], .ui-field-contain .ui-controlgroup-controls{width: 100%;} #sub_popular .popular_radio label{font-size: 1.1em;} #sub_popular .popular_cont .popular_cont_list li div{height: 250px;} #sub_popular .popular_cont .popular_cont_list .txt_box{padding: 2% 10px; font-size: 1.5em;} #sub_popular .popular_cont .popular_cont_list .txt_box .txt{margin: 3% 0 25px;} #sub_popular .popular_cont .popular_cont_list .txt_box .nobel_title{padding: 5px 0 3%;} #sub_popular .popular_cont .popular_cont_list .txt_box .writer{bottom: 10%;} #sub_popular .popular_cont .popular_cont_list .txt_box .on .heart{background:url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0 40%; background-size: 15px 13px; } #sub_popular .popular_top10_list li div{font-size:1.1em;} /* #sub_popular .popular_top10_list li .rank_num{font-size:large;} */ #sub_popular .popular_top10_list li .hits{top: -25px;} #sub_popular .popular_other_list li div{height: 359px; font-size:1.1em;} #sub_popular .popular_other_list li .rank_num{font-size:large;} #sub_popular .popular_other_list li .hits{top: -25px;} #sub_popular .popular_top10_list li p{min-height:60px; display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center;} #sub_popular .popular_other_list li p{min-height:60px; display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center;} #sub_popular .popular_top10_list li .title{padding:8px 5px;} #sub_popular .popular_other_list li .title{padding:8px 5px;} #sub_popular .popular_top10_list li .img_backbox{height:90%;} #sub_popular .popular_other_list li .img_backbox{height:90%;} #sub_popular .popular_cont{width: 98%; margin: auto;} } @media all and (min-width:1000px){ #sub_popular .popular_cont{width: 96%; margin: 0 auto;} #sub_popular .popular_top10_list li div{height: 300px;} #sub_popular .popular_other_list li div{height: 300px;} #sub_popular .popular_top10_list li .img_backbox{height: 85%;} #sub_popular .popular_other_list li .img_backbox{height: 85%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width: 1024px) { #sub_popular .popular_top10_list li div{height: 173px} #sub_popular .popular_other_list li div{height: 173px} } @media screen and (orientation:landscape) and (min-width:1200px){ #sub_popular .popular_top10_list li div{height: 222px} #sub_popular .popular_other_list li div{height: 222px} #sub_popular .popular_top10_list li .img_backbox{height: 85%;} #sub_popular .popular_other_list li .img_backbox{height: 85%;} } @media all and (min-width:1251px){ #sub_popular .popular_cont{width: 96%; margin: 0 auto;} } /* 서브 인기 */ /* 서브 디테일 */ /* 비성인 디테일 */ .detail_cont_wrap{overflow-x: inherit;} #content_wrap #sub_detail{padding-top:0;overflow: visible;} #sub_detail{position: relative;} #sub_detail .detail_title{width:94%; font-size:1.4em; margin:5px auto; display:none; overflow:hidden; letter-spacing:-0.025em;} #sub_detail .detail_title h4{float:left;} #sub_detail .detail_title h5{color:#757575;} #sub_detail .detail_banner{width:100%; position: relative;z-index: 5; /* background: #1E1E1E; */min-width:0;} #sub_detail .detail_banner img{width:100%;vertical-align:top;} .detail_banner_img{width:100%; display:block;position:relative;width: 100%;margin: 0 auto; text-align:center;background-color:#383C44;background-color:var(--opt-bg-color);overflow:hidden;} .detail_banner_img img{display:block;width:100%;/* max-width:600px;max-height:378px; */margin:0 auto;object-fit:cover;background-size:0;} .detail_banner_img .icon_19_patch{position:absolute;top:0;right:0;width:18px;z-index:5;margin:5px 5px 0 0;} .detail_banner_img:after{content:"";display:block;position:absolute;top:-50%;left:-70%;width:50%; height:210%; background-image:linear-gradient(to right, rgba(255, 255, 255, .1) 25%, rgba(255, 255, 255, .7) 58%, rgba(255, 255, 255, .02));transform:skewX(140deg);animation:shineDimg 1.3s forwards;animation-delay:1s;} @keyframes shineDimg{ from{left:-70%} to{left:130%;} } html.mm-opening .mm-slideout .detail_banner_img{position:absolute !important;} .detail_banner_img .label_box{position:absolute;bottom:10px;left:10px;} .detail_banner_img .label_box .nLabel{display:block;width:30px;height:18px;background-size:100% auto;background-position:center;background-repeat:no-repeat;} .detail_banner_img .label_box .nLabel_toon{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_toon.png);} .detail_banner_img .label_box .nLabel_novel{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_novel.png);} .detail_banner_img .label_box .nLabel_comics{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_comics.png);} .detail_banner_img .label_box .nLabel_photo{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_photo.png);} #sub_detail .detail_nav{width:100%; display: block; width: 100%; margin-top: 47%; position: relative;z-index: 1;} #sub_detail_nobeltitle{position: absolute; z-index: 2; left:5px; top:-23px; font-size:1.15em; max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_detail .detail_banner .detail_caption .detail_banner_tagbox{display:inline-block;box-sizing: border-box;vertical-align:top;} #sub_detail .detail_banner .detail_caption .detail_banner_tagbox p{display: inline-block;} #sub_detail .detail_banner .detail_caption .detail_banner_tagbox .chat_tag{background:#ff8f00; color:var(--main-ft-color); border:1px solid #ff8f00; border-radius:3px; font-size:1em; padding:1px 3px 0 !important; line-height:1.3; letter-spacing:normal; font-weight:normal;margin-right:3px;} #sub_detail .detail_banner .detail_caption .detail_banner_tagbox .chat_tag:after{content:none;} #sub_detail .detail_banner .detail_caption .hits{color:#8da6c2;} #sub_detail .detail_banner .detail_caption .hits .heart{background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 center; background-size: 13px 11px; padding-left:25px;}/* white 버전 */ #sub_detail .detail_nav .detail_nav_ul{width:100%; text-align:center; background:#fff; border-top:1px solid #ddd; height: 36px;} #sub_detail .detail_nav .detail_nav_ul li{width:25%; float:left; height:100%; text-align:center; display:inline-block; position:relative;} #sub_detail .detail_nav .detail_nav_ul li a{display:block; width:100%; letter-spacing:-0.025em; padding:10px 0; height:100%; border-left:1px solid #ddd; color:#767676; box-sizing: border-box;} #sub_detail .detail_nav .detail_nav_ul li .first{color:#E84D7D;} #sub_detail .detail_nav .detail_nav_ul li .heart{color:#E84D7D;} #sub_detail .detail_nav .detail_nav_ul li .heart_on {color:#E84D7D;} #sub_detail .detail_nav .detail_nav_ul li .first span{padding-left:25px; background: url(https://cdn.metoon.co.kr/mimg/icon_detail_first.png) no-repeat 0% center; background-size: 17px;} /* #sub_detail .detail_nav .detail_nav_ul li .heart span{padding-left:25px; background: url(https://cdn.metoon.co.kr/mimg/icon_genre_heart.png) no-repeat 0% center; background-size: 17px;} #sub_detail .detail_nav .detail_nav_ul li .heart_on span{padding-left:25px; background: url(https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png) no-repeat 0% center; background-size: 17px;}pink 버전 */ #sub_detail .detail_nav .detail_nav_ul li .heart span{padding-left:25px; background: url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png) no-repeat 0% center; background-size: 17px;} #sub_detail .detail_nav .detail_nav_ul li .heart_on span{padding-left:25px; background: url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0% center; background-size: 17px;}/* white 버전 */ #sub_detail .detail_nav .detail_nav_ul li .sns{border-right:1px solid #ddd; position:relative;} #sub_detail .detail_nav .detail_nav_ul li .sns span{padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/sns.png) no-repeat 0 center; background-size:17px;} #sub_detail .detail_nav .detail_nav_ul li .sns_box{display:none; position:absolute; width:130px; height:55px; bottom: 100%; right:0; background:url(https://cdn.metoon.co.kr/mimg/bg_sns_box_top.png) no-repeat center;} #sub_detail .detail_nav .detail_nav_ul li .sns_box ul{ height:100%;} #sub_detail .detail_nav .detail_nav_ul li .sns_box li{width:33.3%; height:100%; position:relative;} #sub_detail .detail_nav .detail_nav_ul li .sns_box li a{width:30px; height:30px; position:absolute; top:0; bottom:10%; left:0; right:0; margin:auto; display:block; border:none; text-indent:-99999999em; overflow:hidden; border-radius:25px;} #sub_detail .detail_nav .detail_nav_ul li .sns_box .tw a{background:url(https://cdn.metoon.co.kr/mimg/tw_icon.png) no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul li .sns_box .fb a{background:url(https://cdn.metoon.co.kr/mimg/fb_icon.png) no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul li .sns_box .kakao a{padding: 0; background:url(https://cdn.metoon.co.kr/mimg/kakao_icon.png) no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul li .sns_box .kakao img{width:32px; height: 32px; border-radius:25px; position:absolute; top:0; bottom:10%; left:0; right:0; margin:auto;} #sub_detail .detail_nav .detail_nav_ul_noimg{width:100%; text-align:center; background:#fff; border-top:1px solid #ddd; height: 36px;} #sub_detail .detail_nav .detail_nav_ul_noimg li{width:33.3%; float:left; height:100%; text-align:center; display:inline-block; position:relative;} #sub_detail .detail_nav .detail_nav_ul_noimg li a{display:block; width:100%; letter-spacing:-0.025em; padding:10px 0; height:100%; border-left:1px solid #ddd; color:#767676; box-sizing: border-box;} #sub_detail .detail_nav .detail_nav_ul_noimg li:first-child a{border-left:none;} /* #sub_detail .detail_nav .detail_nav_ul_noimg li .first{color:#E84D7D; } #sub_detail .detail_nav .detail_nav_ul_noimg li .heart{color:#E84D7D; } #sub_detail .detail_nav .detail_nav_ul_noimg li .heart_on {color:#E84D7D;}pink 버전 */ #sub_detail .detail_nav .detail_nav_ul_noimg li .first{color:var(--bg-fc-color); } #sub_detail .detail_nav .detail_nav_ul_noimg li .heart{color:var(--bg-fc-color); } #sub_detail .detail_nav .detail_nav_ul_noimg li .heart_on {color:var(--bg-fc-color);}/* white 버전 */ #sub_detail .detail_nav .detail_nav_ul_noimg li .first span{padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/icon_detail_first.png) no-repeat 0% center; background-size:14px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .heart span{padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/thumb_up_wh.svg) no-repeat 0% center; background-size:17px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .heart_on span{padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/thumb_up_red.svg) no-repeat 0% center; background-size:17px;}/* white 버전 */ #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box{display:none; position:absolute; width:130px; height:55px; bottom: 100%; right:0; background:url(https://cdn.metoon.co.kr/mimg/bg_sns_box_top.png) no-repeat center;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box ul{ height:100%;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box li{width:33.3%; height:100%; position:relative;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box li a{width:30px; height:30px; position:absolute; top:0; bottom:10%; left:0; right:0; margin:auto; display:block; border:none; text-indent:-99999999em; overflow:hidden; border-radius:25px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box .tw a{background:url(https://cdn.metoon.co.kr/mimg/tw_icon.png) no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box .fb a{background:url(https://cdn.metoon.co.kr/mimg/fb_icon.png) no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box .kakao a{padding: 0; background:url(https://cdn.metoon.co.kr/mimg/kakao_icon.png) no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box .kakao img{width:32px; height: 32px; border-radius:25px; position:absolute; top:0; bottom:10%; left:0; right:0; margin:auto;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns span{padding-left: 25px; background: url(https://cdn.metoon.co.kr/mimg/sns.png) no-repeat 0 center; background-size: 17px;} #sub_detail .bottom_detail_nav{position:fixed; bottom:0; left:0; display:none; z-index:999;} #sub_detail .bottom_detail_nav .detail_nav_ul li a{padding:10px 0; } #sub_detail .bottom_detail_nav .detail_nav_ul li .sns_box{z-index:99; background:url(https://cdn.metoon.co.kr/mimg/bg_sns_box_top.png) no-repeat center;} #sub_detail .detail_banner .detail_caption{/* border:1px solid var(--main-line-color); border-left:none; border-right:none; */color:var(--main-ft-color); /* background:#1E1E1E; */padding:10px; text-shadow:none;position: relative;z-index: 1;} #sub_detail .detail_banner .detail_caption .title{display: block; width:calc(100% - 70px); font-size:1.2em; color:var(--main-ft-color); letter-spacing:-0.025em; font-weight:bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #sub_detail .detail_banner .detail_caption .title.flex_{display:flex;} #sub_detail .detail_banner .detail_caption .dtl_caption_inner .title{width:auto;flex:1 1 auto;} /* #sub_detail .detail_banner .detail_caption .ganre_mark{display: inline-block; font-size:0.9em; background:#E84D7D; border-radius:3px; color:var(--main-ft-color); padding:1px 2px; vertical-align: top; margin:0 5px;}pink 버전 */ #sub_detail .detail_banner .detail_caption .ganre_mark{display: inline-block; font-size:0.9em; background:#d52b2c; border-radius:3px; color:var(--main-ft-color); padding:0 2px; height:18px; line-height:19px; vertical-align: top; margin:0 0 0 5px;}/* white 버전 */ .detail_bnr{width:100%;/* padding-bottom:7px;background-color:#f5f5f5; */} .detail_bnr a{display:block;position:relative;} .detail_bnr a img{display:block;width:100%;max-width:400px;margin:0 auto;} #sub_detail .detail_banner .detail_caption .up_mark{display: inline-block; font-size:0.9em; background:var(--bg-fc-color); border-radius:3px; color:var(--main-ft-color); padding:0 2px; height:18px; line-height:19px; vertical-align: top; margin-left:5px;} #sub_detail .detail_banner .detail_caption .chat_tag{display: inline-block; font-size:0.9em; color:#daae58;} #sub_detail .detail_banner .detail_caption .chat_tag:after{content:none;} #sub_detail .detail_banner .detail_caption .caption_info{width:100%; margin:7px 0;display:flex;flex-wrap:wrap;} #sub_detail .detail_banner .detail_caption p{display:inline-block; font-size: 0.9em; letter-spacing:-0.05em; vertical-align:top;} #sub_detail .detail_banner .detail_caption p.hits{display:inline-flex;white-space:nowrap;align-items:center;} #sub_detail .detail_banner .detail_caption p.new_mark{color:#7CB0D3;} #sub_detail .detail_banner .detail_caption p.hot_mark{color:#E55D5D;} #sub_detail .detail_banner .detail_caption .likeThumbSvg{height:0.9em;fill:#8da6c2;flex-shrink:0;margin-right:4px;} #sub_detail .detail_banner .detail_caption .caption_info p + p:before{content:""; display:inline-block; width:1px; height:10px; background:#ddd; margin:0 5px;} #sub_detail .detail_banner .detail_caption .detail_isbn, .de_summ_pop .detail_isbn, .vd_detail_bt_note{display:block;line-height:1;vertical-align:top;padding-top:12px;font-size:11px;color:#707070;} .vd_detail_bt_note{display:flex;gap:4px 4px;color:var(--sub-ft-color);line-height:1.2;} .de_summ_pop .detail_isbn{padding-top:0;margin-bottom:15px;} #sub_detail .detail_banner .detail_caption .writer{font-size: 0.9em; position: relative; text-align:left; /* text-overflow:ellipsis; overflow:hidden; white-space:nowrap; max-width:110px; */} #sub_detail .detail_banner .detail_caption .genre{color:#ea6161;} #sub_detail .detail_banner .detail_caption .up_day{font-size: 0.9em; letter-spacing:-0.025em; position: relative; text-align:left;} #sub_detail .detail_banner .detail_caption .up_day span{border-radius: 30px; border: 1px solid var(--bg-fc-color); color: var(--bg-fc-color); text-align: center; height: 15px;line-height:15px; min-width: 15px; display: inline-block; letter-spacing:0;margin-left:2px;}/* white 버전 */ #sub_detail .detail_banner .detail_caption .caption_info > p:empty{display:none;} #sub_detail .detail_banner .detail_caption div{position:relative;} /* #sub_detail .detail_banner .detail_caption div:not(.dtl_caption_inner):after{content:""; display:block; clear:both;} #sub_detail .detail_banner .detail_caption div>div{margin-bottom:5px;} */ #sub_detail .detail_banner .detail_caption .zzim_btn{position:absolute; top:13px; right:10px; margin-bottom:0; z-index:1;} #sub_detail .detail_banner .detail_caption .dtl_caption_inner .zzim_btn, .zzim_btn_common{position:relative;top:auto;right:auto;flex-shrink:0;align-self:center;} #sub_detail .detail_banner .detail_caption .zzim_btn > a, .zzim_li_common{display:flex; color:var(--sub2-ft-color); text-align:center; font-size:0; letter-spacing:-0.05em;} #sub_detail .detail_banner .detail_caption .zzim_btn > a span, .zzim_li_common .zzim_txt{display:inline-block; vertical-align:middle; font-size:11px;} #sub_detail .detail_banner .detail_caption .zzim_btn > a .zzim_ic, .zzim_li_common .zzim_ic{width:12px;height:12px;background-image:url("https://cdn.metoon.co.kr/mimg/thumb_up_wh.svg"); background-repeat:no-repeat; background-position:center 0; background-size:12px; margin:0 3px 2px 0;} #sub_detail .detail_banner .detail_caption .zzim_btn .zzim_ic_svg, .zzim_btn_common .zzim_ic_svg{width:12px;height:12px;fill:var(--main-ft-color);margin-right:5px;align-self:center;flex-shrink:0;} #sub_detail .detail_banner .detail_caption .zzim_btn .heart_on, .zzim_btn_common .heart_on{color:var(--bg-fc-color);} #sub_detail .detail_banner .detail_caption .zzim_btn .heart_on .zzim_ic, .zzim_btn_common .heart_on .zzim_ic{background-image:url("https://cdn.metoon.co.kr/mimg/thumb_up_red.svg");} #sub_detail .detail_banner .detail_caption .zzim_btn .heart_on .zzim_ic_svg, .zzim_btn_common .heart_on .zzim_ic_svg{fill:var(--bg-fc-color);} #sub_detail .detail_banner .detail_caption .zzim_btn .zzim_pop, .zzim_btn_common .zzim_pop{position:absolute;transform:translateX(0);left:auto;right:5px;margin-bottom:0;} .zzim_btn_common .zzim_pop{z-index:10;} #sub_detail .detail_banner .detail_caption .summary_container{display:-webkit-box;display:flex;-webkit-box-align:end;align-items:flex-end;} #sub_detail .detail_banner .detail_caption .summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:ellipsis;overflow:hidden; font-size:1em;color:var(--sub2-ft-color); line-height:1.4;-webkit-box-flex:1;flex:1 1 auto;} #sub_detail .detail_banner .detail_caption .summary_btn{display:block;white-space:nowrap;padding:2px 5px 3px;border:1px solid var(--main-line-color);border-radius:5px;background-color:var(--sub-bg-color);font-size:11px; color:var(--sub2-ft-color); margin-left:10px;-webkit-user-drag:none;} .de_summ_pop_wrap{display:none;position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:99999999;} .de_summ_pop_wrap:before{content:"";display:inline-block;width:1px;height:100%;margin-left:-4px;vertical-align:middle;} .de_summ_pop_wrap .de_summ_back{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);z-index:1;} .de_summ_pop_wrap .de_summ_pop{position:relative;display:inline-block;max-width:440px;width:96%;background:#fff;vertical-align:middle;border-radius:4px;-webkit-transform:translate(0, -20%);transform:translate(0, -20%);-webkit-transition:transform .3s ease-in-out;transition:transform .3s ease-in-out;z-index:2;box-shadow:0 0 12px rgba(255, 255, 255, 0.45);} .de_summ_pop_wrap.active .de_summ_pop{-webkit-transform:translate(0, 0);transform:translate(0, 0);} .de_summ_contents{padding:0 20px;word-break:break-word;word-wrap:break-word;} .de_summ_contents .de_summ_title{width:100%;padding:15px 0 10px;border-bottom:1px solid #ddd;font-size:16px;line-height:1.5;color:#000;} .de_summ_contents .de_summ_title strong{font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;white-space:normal;word-break:keep-all;} .de_summ_contents .de_summary{text-align:left;font-size:14px;line-height:1.5;color:#555;max-height:307px;margin:15px auto 10px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;} .de_summ_contents .de_summary::-webkit-scrollbar{width:5px;height:auto;} .de_summ_contents .de_summary::-webkit-scrollbar-thumb{width:5px;height:auto;background:#ccc;} .de_summ_contents .de_summary::-webkit-scrollbar-track{background:#efefef;} .de_summ_contents .de_summ_btn{display:block;max-width:300px;width:100%;padding:8px 0 5px;border-radius:3px;background:#2B2C36;border-bottom:3px solid #000000;font-size:15px;color:#FFFFFF;margin:0 auto 18px;-webkit-user-drag:none;} .fanpg_link_area{display:flex;gap:5px 10px;padding:4px 9px 5px;background-color:var(--opt-bg-color);font-size:0.95em;color:var(--sub2-ft-color);box-sizing:border-box;margin-top:15px;} .fanpg_link_area:after{content:none !important;} .fanpg_link_area .name{white-space:nowrap;flex-shrink:0;} .fanpg_link_area .link_box{display:inline-block;color:var(--main-ft-fc-color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex:1 1 auto;} /* 디테일 해시태그 */ #sub_detail .detail_banner .detail_caption .hash, .vd_detail_hash{width:100%; display: flex;flex-wrap:wrap;gap:8px 5px; padding-top: 18px; overflow: hidden;line-height:1.5;} #sub_detail .detail_banner .detail_caption .hash p, .vd_detail_hash > span{display:inline-block; margin:0; border:1px solid var(--main-line-color);background:#2F2F2F;background:var(--opt-bg-color); color:#84C7E3;color:var(--main-ft-fc-color); padding:0.35em 0.7em 0.4em; border-radius:35px; font-size:0.9em; text-align: center; /* letter-spacing: -0.025em; */line-height:1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* 디테일 해시태그 */ #sub_detail .detail_nobel_list{position: relative;z-index: 5;} #sub_detail .detail_nobel_list > div:not(.detail_radio):after{content:"";display:block;clear:both;} #sub_detail .detail_nobel_list .detail_cont{width:100%; position: relative; z-index: 5;} #sub_detail .detail_next{width:100%; padding:15px 0; position: relative; z-index: 5;} #sub_detail .detail_next.comics_det_nxt{padding-top:7px;} #sub_detail .detail_next a{display: block; width: 96%;width:calc(100% - 24px); margin:0 auto; text-align:center; border-radius: 5px; padding:9px 0; font-weight:400; color:var(--main-ft-color); border: 1px solid var(--main-ft-fc-color); font-size:1.1em; background:var(--sub-bg-color);transition-property:background-color, color;transition-duration:0.15s;}/* white 버전 */ [color-theme="light"] #sub_detail .detail_next a{color:var(--main-ft-fc-color);} #sub_detail .detail_next .next_view_title{max-width: 60%; display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;vertical-align: bottom;} #sub_detail .detail_last_view .detail_cont_list{box-shadow:none; margin: 5px 0;} #sub_detail .detail_last_view .detail_cont_list li{padding:5px 0;} #sub_detail .detail_last_view .detail_cont_list li a{display: block; width:96%; position: relative; overflow: hidden; border-radius: 6px; padding:0; margin:0 auto; min-height:140px; background:#fff;border-width:thin; height:100%;} #sub_detail .detail_last_view .detail_cont_list li img{width:100%; max-width:100%; max-height: initial;} #sub_detail .detail_last_view .detail_cont_list .txt_box{float:right; padding:5px 10px; position:absolute; bottom:0; left:0; right:0; border-top: 1px solid #ddd; background:#fff;} #sub_detail .detail_last_view .detail_cont_list .txt_box p{width:100%; font-size:0.8em; letter-spacing: -0.025em; display:block; margin:0;} #sub_detail .detail_last_view .detail_cont_list .txt_box p .heart{font-size:1.0em; padding-left:25px; background:url("https://cdn.metoon.co.kr/mimg/icon_genre_heart.png") no-repeat 0 75%; background-size: 14px 12px; color:#E84D7D;} #sub_detail .detail_last_view .detail_cont_list .txt_box .on .heart{background:url("https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png") no-repeat 0 75%; background-size: 14px 12px; } #sub_detail .detail_last_view .detail_cont_list .txt_box .nobel_title{font-weight:bold; font-size:1.05em; display:block; padding: 0 0 5px;} #sub_detail .detail_last_view .detail_cont_list .txt_box .txt{width: 78%; float: left; display: inline-block;} #sub_detail .detail_last_view .detail_cont_list .txt_box .date{width: initial; display: inline; position: absolute; bottom: 5px; right: 10px; } #sub_detail .detail_radio{display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center; -webkit-box-pack:justify;justify-content:space-between; /* overflow: hidden; */ margin:0 auto 0; padding:10px 12px; border-top:1px solid var(--main-line-color);border-bottom: 1px solid var(--main-line-color); position: relative;gap:6px 25px;} #sub_detail .detail_radio:has(.parent_pd_none){padding-top:0;padding-left:0;padding-bottom:0;} #sub_detail .detail_memvip + .detail_radio{border-top:1px solid var(--main-line-color);} #sub_detail .detail_radio .ui-controlgroup{float:right;} #sub_detail .detail_radio .ui-radio{float:left;} #sub_detail .detail_radio .ui-radio input{width: 15px; height:15px; top: 0; bottom: 0; margin: auto;} #sub_detail .ui-radio .ui-btn.ui-radio-on:after{opacity:0; width:8px; height:8px; margin: -4px 2px 0 6px; border:none; background:#F15584;} #sub_detail .ui-radio .ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{width:15px;height:15px;opacity:0;} .ui-btn-icon-left:after{left: .3em;} #sub_detail .detail_radio fieldset {/* float:right;width:100%; */-webkit-box-flex:0 0 auto;-webkit-flex:0 0 auto;flex:0 0 auto;margin-left:auto;} #sub_detail .detail_radio fieldset .contents_sort{position:relative; font-size:0;float:right;/* padding:10px 0 10px; */} #sub_detail .detail_radio fieldset .contents_sort label{display:inline-block;font-size:13px;color:#C1C1C1;letter-spacing:-0.05em;} #sub_detail .detail_radio fieldset .contents_sort .bar{display:inline-block; width:1px; height:10px; background:#C1C1C1; margin:0 7px;} #sub_detail .detail_radio fieldset input{position:absolute; top:0; left:0; opacity:0; z-index:-1;} #sub_detail .detail_radio label:after{content: ""; display: block; position: absolute; top: 2px; left: -15px; width: 13px; height: 13px; background: url("https://cdn.metoon.co.kr/mimg/radio_check_off.png") no-repeat center; background-size: 13px;} #sub_detail .detail_radio fieldset .contents_sort .chkselect{color:var(--bg-fc-color);} #sub_detail .detail_radio .chkselect:after{content: ""; display: block; position: absolute; top: 2px; left: -15px; width: 13px; height: 13px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 13px;}/* white 버전 */ .detail_rd_text{gap:4px 4px;} /* .detail_rd_text a{border-bottom:1px solid var(--bg-fc-color);} */ .detail_rd_text .co_red{position:relative;display:inline-block;color:var(--bg-fc-color);} .detail_rd_text .co_red:before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--bg-fc-color);} #sub_detail .detail_radio #detail_order_label:after{content:none;} #sub_detail .detail_radio #detail_up_label:after{content:none;} #sub_detail .ui-btn-icon-right:after{display:none;} #sub_detail .detail_cont .detail_cont_list{box-shadow:none; padding: 10px 9px;width:100%; position:relative; z-index:5;display:flex;flex-wrap:wrap;box-sizing:border-box;} .dtl_caption_inner{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;gap:10px 15px;} #sub_detail .detail_cont .detail_cont_list li{width:16.666%;width:calc(100% / 6);padding:6px;border:none; background:none;border-radius:0;box-sizing:border-box;} #sub_detail .detail_cont .detail_cont_list li .detail_cont_box{display: block; width:100%; position: relative; overflow: hidden; border-radius: 6px 6px 0 0; padding:0; margin:0 auto; border-width:thin; border: 1px solid var(--main-line-color);border-bottom:0 none;} #sub_detail .detail_cont .detail_cont_list li .detail_cont_box:only-child{border-bottom:1px solid var(--main-line-color);border-bottom-right-radius:6px;border-bottom-left-radius:6px;} #sub_detail .detail_cont .detail_cont_list li .detail_cont_box a{display:block; height:100%; position:relative; overflow:hidden;-webkit-user-drag:none;} #sub_detail .detail_cont .detail_cont_list li .up_icon{max-width: 60px; width: 35%; position:absolute; top:0px; left:0px; z-index: 9; text-align: right; background: none; border: none; border-radius: 0;} #sub_detail .detail_cont .detail_cont_list li .patch_box{ position:absolute; top:0; right:5px; z-index: 9; text-align: right; background: none; border: none; border-radius: 0; height: auto; width: auto; letter-spacing: 0; font-size: 0;} #sub_detail .detail_cont .detail_cont_list li .patch_box>img{width: 35px; display:inline-block; vertical-align: top; margin-left:3px; margin-top: 0;} #sub_detail .detail_cont .detail_cont_list li .img_box{width:100%; height:0;padding-bottom:140.35%;position:relative;} #sub_detail .detail_cont .detail_cont_list li .novel_img{position:relative;width:100%;height:100%; display:block;object-fit:cover;} #sub_detail .detail_cont .detail_cont_list li .novel_img{position:absolute; top:0; left:0; right:0;-webkit-user-drag:none;} #sub_detail .detail_cont .detail_cont_list li .novel_img.flt_blur, img.flt_blur{-webkit-filter:blur(15px);filter:blur(2px);} #sub_detail .detail_cont .detail_cont_list li .blurcover{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:30%; z-index:1;} #sub_detail .detail_cont .detail_cont_list li .blurcover_b{background-size:30% !important; background-repeat:no-repeat !important; background-position:center !important; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:30%; z-index:1;} #sub_detail .detail_cont .detail_cont_list .icon_box{position:absolute; top:0; left:0; width:55px;} #sub_detail .detail_cont .detail_cont_list .icon_box img{width:100%; margin-top:0;} #sub_detail .detail_cont .detail_cont_list li .detail_cont_box .up_nobel{width:40px; position:absolute; top:0; left:10px;margin-top: 0;} .x-time-limit.comm_li{position:absolute;bottom:0;left:0;width:100%;padding:2px 5px 3px;background-color:rgba(255, 255, 255, 0.7);font-size:12px;font-weight:500;color:var(--main-bg-color);text-align:center;} #sub_detail .detail_cont .detail_cont_list .txt_box{float:right; width:100%; position: relative; padding:8px 10px; bottom:0; left:0; right:0; border-top: 1px solid var(--main-line-color); background:var(--sub-bg-color);} #sub_detail .detail_cont .detail_cont_list .txt_box p{width:100%; font-size:1em; letter-spacing: -0.025em; display:block; margin:0;} #sub_detail .detail_cont .detail_cont_list .txt_box p .heart{font-size:1.0em; padding-left:25px; background:url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png") no-repeat 0 75%; background-size: 14px 12px; color:var(--bg-fc-color);}/* white 버전 */ #sub_detail .detail_cont .detail_cont_list .txt_box .on{width: auto; display: inline-block; position: absolute; right: 10px; top: 5px; padding-right: 1px;} #sub_detail .detail_cont .detail_cont_list .txt_box .on .heart{background:url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0 45%; background-size: 14px 12px; }/* white 버전 */ #sub_detail .detail_cont .detail_cont_list .txt_box .nobel_title{font-weight:500; font-size:1.12em; color:var(--sub2-ft-color); display:block; /* padding: 0 0 5px; */padding-right:;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_detail .detail_cont .detail_cont_list .txt_box .txt:has(.sp_sale) .nobel_title{padding-right:5px;} #sub_detail .detail_cont .detail_cont_list .txt_box .nobel_title:only-child{padding-bottom:0;} #sub_detail .detail_cont .detail_cont_list .txt_box .txt{/* width: 78%; float: left; */ display: flex;align-items:center;min-width:0;} .detail_cont_list .wr_text_tag.sp_sale{flex-shrink:0;margin-left:auto;} #sub_detail .detail_cont .detail_cont_list .txt_box .date{width: initial; display: none; position: absolute; bottom: 5px; right: 10px; } #sub_detail .detail_cont .detail_cont_list .txt_box .txt_recent_icon{font-size: 10px; letter-spacing: 0; color: #fff; padding: 0 4px; border-radius: 3px; margin: 0 5px 0 0; font-weight: 500; display: inline-block; text-align: center;vertical-align: 1px; background: #852cfa;line-height: 14px;} #sub_detail .detail_cont_list .list_btn{color:var(--main-ft-color); background:var(--sub-bg-color); display:block; text-align: center; padding: 8px 0; font-size: 1.1em; border: 1px solid var(--main-line-color); border-radius:0 0 6px 6px; /* margin: 10px auto 5px; */ margin: 0 auto 5px;text-shadow:none;cursor:pointer;-webkit-user-drag:none;} #sub_detail .detail_cont_list .list_pink_btn{color:var(--main-ft-color); background:#E84D7D; border: 1px solid #E84D7D;} #sub_detail .detail_cont_list .btn-red{border: 1px solid #c53232;}/* white 버전 */ #sub_detail .detail_cont_list .free_btn span{background:url("https://cdn.metoon.co.kr/mimg/detail_free_icon.svg?3") no-repeat 0 42%; padding-left:20px; background-size:15px;}/* white 버전 */ [color-theme="light"] #sub_detail .detail_cont_list .free_btn span{background-image:url("https://cdn.metoon.co.kr/mimg/detail_free_icon_ctlgt.svg");} #sub_detail .detail_cont_list .coin_btn span{background:url("https://cdn.metoon.co.kr/mimg/ht_coin.svg") no-repeat 0 50%; padding-left:20px; background-size:15px;}/* white 버전 */ [color-theme="light"] #sub_detail .detail_cont_list .coin_btn span{background-image:url("https://cdn.metoon.co.kr/mimg/ht_coin_gold.svg");} #sub_detail .detail_cont_list .list_btn > span:not(.memvip_free){padding-top:1px;padding-bottom:1px;} #sub_detail .detail_cont_list .list_btn.memvip_btn{height:34px;line-height:34px;padding:0;} #sub_detail .detail_cont_list .list_btn.memvip_btn span:not(.memvip_free){position:relative;color:#8c8c8c;background:url("https://cdn.metoon.co.kr/mimg/detail_coin_icon_gray.png?1") no-repeat 0 center;background-size:13px;font-size:0.9em;padding-left:16px;} #sub_detail .detail_cont_list .list_btn.memvip_btn span:not(.memvip_free):after{content:"";display:block;position:absolute;top:50%;left:-5%;width:110%;height:1px;background:var(--bg-fc-color);opacity:0.8;} #sub_detail .detail_cont_list .list_btn.memvip_btn .memvip_free{padding-left:0;padding-right:6px;font-size:1.05em;font-weight:bold;background:none;} /* 코인 할인 */ #sub_detail .detail_cont_list .coin_btn span.coin_sale{background:none; position:relative; padding:0 10px; margin-right:5px; font-size:0.9em; margin-top:-2px; color:var(--sub2-ft-color);/* width:90%; */} #sub_detail .detail_cont_list .coin_btn span.coin_sale img{display:block; position:absolute; top:0; bottom:0; right:0; left:0;max-width:100%; margin: auto;} #sub_detail .detail_cont_list .coin_btn span.coin_sale:before, #sub_detail .detail_cont_list .coin_btn span.coin_sale:after{content:"";display:block;position:absolute;opacity:0.9;} #sub_detail .detail_cont_list .coin_btn span.coin_sale:before{top:0;bottom:0;left:0;width:100%;height:1px;background-color:var(--main-ft-fc-color);margin:auto;} #sub_detail .detail_cont_list .coin_btn span.coin_sale:after{top:50%;right:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid var(--main-ft-fc-color);margin-top:-5px;opacity:1;} /* 코인 할인 */ /* 회원가입후 보기 sns버튼 */ #sub_detail .detail_cont .detail_cont_list .sns_join_btn .fb_join{background:#395a9c; border: 1px solid #2c4b87;} #sub_detail .detail_cont .detail_cont_list .sns_join_btn .naver_join{background:#1ec800; border: 1px solid #1cb900;} #sub_detail .detail_cont .detail_cont_list .sns_join_btn p{width:auto; display:inline-block; position:relative; padding-left:25px; color:var(--main-ft-color);} #sub_detail .detail_cont .detail_cont_list .sns_join_btn img{width:18px; height:18px; position:absolute; top:0; left:0; bottom:0; margin:auto; display:block;} /* 회원가입후 보기 sns버튼 */ #sub_detail .detail_cont_list .detail_btn_box{width:100%; text-align:center; } #sub_detail .detail_cont_list .detail_btn_box a{padding:8px 0; margin: 5px 1%; display: inline-block; width: 48%; background:#56606b; color:var(--main-ft-color); border: 1px solid #56606b; border-radius: 5px;} #sub_detail .detail_cont_list .detail_btn_box .buy_btn{margin-left:0;} #sub_detail .detail_cont_list .detail_btn_box .rent_btn{margin-right:0;} #sub_detail .detail_cont .detail_pager{width:100%; margin:0px auto 0; padding:15px 0 20px; background: #f5f5f5; float:left;} #sub_detail .detail_cont .detail_pager ul{width:100%; text-align:center;} #sub_detail .detail_cont .detail_pager ul li{display:inline-block; margin:10px 3px 0;} #sub_detail .detail_cont .detail_pager ul li a{color:#767676; padding:1px 6px 2px; background:#fff; border:1px solid #ddd;} #sub_detail .detail_cont .detail_pager ul li .on{color:#E84D7D;} #sub_detail .detail_cont .detail_list_more, .vd_detail_list_area .detail_list_more{width:100%; padding-bottom:20px;border-bottom:1px solid var(--main-line-color);clear:both;} .vd_detail_list_area .detail_list_more{background:transparent;border-bottom:0 none;/* padding-bottom:30px; */padding-bottom:20px;} #sub_detail .detail_cont .detail_list_more a, .vd_detail_list_area .detail_list_more a, #sub_detail .adult_noimg_detail_cont #detail_list_more a{width:96%; display:block; text-align:center; color: var(--main-ft-color); background: var(--sub-bg-color); padding: 9px 0 9px; font-size: 1.1em; border: 1px solid var(--main-line-color); border-radius: 5px; margin: 0 auto; text-shadow: none; position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;cursor:pointer;transition:border-color 0.2s;}/* white 버전 */ [color-theme="light"] #sub_detail .detail_cont .detail_list_more a, [color-theme="light"] .vd_detail_list_area .detail_list_more a, [color-theme="light"] #sub_detail .adult_noimg_detail_cont #detail_list_more a{background-color:#FBFBFB;} .vd_detail_list_area .detail_list_more a{width:calc(100% - 16px);} #sub_detail .detail_cont .detail_list_more a.no_pointer, #detail_list_more a.no_pointer{cursor:default;} #sub_detail .detail_cont .detail_list_more p, .vd_detail_list_area .detail_list_more p{font-weight:normal; display:inline-block;} #sub_detail .detail_cont .detail_list_more img, .vd_detail_list_area .detail_list_more img{width:12px; display:inline-block; position: absolute; top:0px; bottom: 0; margin: auto; padding-left: 7px;} #sub_detail .adult_noimg_detail_cont #detail_list_more{width: 100%; padding-top:10px;} /* #sub_detail .adult_noimg_detail_cont #detail_list_more a{width: 96%; display: block; text-align: center; background: #fff; padding: 9px 0 9px; font-size: 1.1em; border-radius: 5px; margin: 0 auto; text-shadow: none; position: relative; color: var(--bg-fc-color); border: 1px solid var(--bg-fc-color); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}white 버전 */ #sub_detail .adult_noimg_detail_cont #detail_list_more img{width: 16px; display: inline-block; position: absolute; top: 0px; bottom: 0; margin: auto; padding-left: 10px;} #sub_detail .adult_noimg_detail_cont #detail_list_more p{font-weight: normal; display: inline-block; margin-left: -3%;} #add_cmt_box{ margin-top:5px; } #add_cmt_box p{ display: inline-block; margin-left: -3%;} #add_cmt_box a{width:96%; display:block; text-align:center; color: var(--main-ft-color); background: var(--sub-bg-color); padding: 9px 0 9px; font-size: 1.1em; border: 1px solid var(--main-line-color); border-radius: 5px; margin: 5px auto; text-shadow: none; position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;transition:border-color 0.2s;}/* white 버전 */ #add_cmt_box a img, #add_cmt_box .ico_add_pg_btn{width: 12px; display: inline-block; position: absolute; top: 0px; bottom: 0; margin: auto; padding-left: 7px;} [color-theme="light"] #add_cmt_box a img{-webkit-filter:brightness(0.4);filter:brightness(0.4);} #add_cmt_box .ico_add_pg_btn{fill:currentColor;} /* 무료카운트 */ .free_count_box{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background:url("https://cdn.metoon.co.kr/mimg/free_count_box_bg.png") repeat center 100%;z-index:3;} .free_count_box div{width:100%; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:60px; text-align:center;} .free_count_box img{display:block; margin:0 auto 8px; width:35px !important;} .free_count_box p{color:#FFF; font-size:17px; letter-spacing:-0.05em;} .free_count_box span{color:#ffea00;} /* 무료카운트 */ @media all and (min-width:320px) and (max-width:360px){ #sub_detail_nobeltitle{font-size:1em;} #sub_detail .detail_title h4{font-size: 0.9em;} /* #sub_detail .detail_cont .detail_cont_list .txt_box .on .heart{background:url("https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png") no-repeat 0 45%; background-size: 12px 10px; }pink 버전 */ #sub_detail .detail_radio{font-size: 0.9em;} #sub_detail .detail_radio .ui-radio input{width: 14px; height: 14px; top:2px;} #sub_detail .genre_radio label{padding-left: 1.75em; padding-right: 3px;} #sub_detail .detail_cont .detail_cont_list .txt_box{font-size: 0.9em;} #sub_detail .detail_nav .detail_nav_ul li .first span{padding-left:20px;} #sub_detail .detail_nav .detail_nav_ul li .heart_on span{padding-left:20px;} #sub_detail .detail_nav .detail_nav_ul li .heart span{padding-left:20px;} /* #sub_detail .detail_radio .chkselect:after{top:-1px; background: url("https://cdn.metoon.co.kr/mimg/radio_check_on.png") no-repeat center; background-size: 12px;}pink 버전 */ #sub_detail .detail_radio .chkselect:after{top:-1px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 12px;}/* white 버전 */ #sub_detail .detail_radio label:after{top:-1px; background: url("https://cdn.metoon.co.kr/mimg/radio_check_off.png") no-repeat center; background-size: 12px;} #sub_detail .detail_nav .detail_nav_ul li .sns span{background: url("https://cdn.metoon.co.kr/mimg/sns.png") no-repeat 0 center; background-size: 15px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns span{background: url("https://cdn.metoon.co.kr/mimg/sns.png") no-repeat 0 center; background-size: 15px;} } @media all and (min-width:435px) and (max-width:600px){ #sub_detail .detail_nav .detail_nav_ul{font-size:1.1em;} /* #sub_detail .detail_cont_list .list_btn{width: 80%;} */ #sub_detail .detail_cont_list .detail_btn_box a{width:38%; margin:5px 1%;} /* #sub_detail .detail_radio{padding-bottom:10px;} */ #sub_detail .detail_last_view .detail_cont_list li{height: 175px;} #sub_detail .detail_cont .detail_cont_list .txt_box{font-size: 1.1em;} #sub_detail .ui-field-contain>label~[class*=ui-], .ui-field-contain .ui-controlgroup-controls{width: 100%;} #sub_detail .detail_cont .detail_cont_list li img{/* width: 100%; */ margin-top: 0px;} #sub_detail .detail_cont .detail_cont_list .txt_box .txt{margin: 0 0 5px;} #sub_detail .detail_cont .detail_cont_list .txt_box .nobel_title{padding: 5px 0;} #sub_detail .detail_cont .detail_cont_list .txt_box .date{bottom: 10px;} #sub_detail .detail_last_view .detail_cont_list li img{width: 100%;} #sub_detail .detail_last_view .detail_cont_list .txt_box{font-size: 1.1em;} #sub_detail .detail_last_view .detail_cont_list .txt_box .txt{margin: 0 0 5px;} #sub_detail .detail_last_view .detail_cont_list .txt_box .nobel_title{padding: 5px 0;} #sub_detail .detail_last_view .detail_cont_list .txt_box .date{bottom: 10%;} } @media all and (min-width:435px) and (max-width:500px){ #sub_detail .detail_last_view .detail_cont_list{height: 245px;} } @media all and (min-width:501px) and (max-width:560px){ #sub_detail .detail_last_view .detail_cont_list{height: 265px;} } @media all and (min-width:561px) and (max-width:600px){ #sub_detail .detail_last_view .detail_cont_list{height: 285px;} } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_detail .cont_title{font-size: 1.6em;} #sub_detail .detail_nav .detail_nav_ul{font-size:1.1em;} #sub_detail .detail_cont_list .detail_btn_box a{width:38%; font-size: 1.3em; margin: 10px 1%;} /* #sub_detail .detail_cont .detail_cont_list li{width:48%; margin:0 1%; float:left;} #sub_detail .detail_cont .detail_cont_list li:first-child{margin-top:0;} */ #sub_detail .detail_cont .detail_pager{float: left;} #sub_detail .ui-field-contain>label~[class*=ui-], .ui-field-contain .ui-controlgroup-controls{width: 100%;} #sub_detail .detail_radio label{font-size: 1.1em;} #sub_detail .detail_last_view .detail_cont_list li{height: 285px;} #sub_detail .detail_last_view .detail_cont_list li img{width: 100%;} #sub_detail .detail_last_view .detail_cont_list .txt_box{font-size: 1.3em;} #sub_detail .detail_last_view .detail_cont_list .txt_box .date{bottom: 10%;} /* #sub_detail .detail_cont .detail_cont_list .txt_box{font-size: 1.3em;} #sub_detail .detail_cont .detail_cont_list .txt_box .nobel_title{font-size:1em;} */ #sub_detail .detail_cont .detail_cont_list .txt_box .on .heart{background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0 35%; background-size:15px;} #sub_detail .detail_cont .detail_cont_list .txt_box .date{bottom: 10%;} } @media all and (min-width:810px){ #sub_detail .detail_cont .detail_cont_list{/* width: 98%; */ margin: 0 auto; float:none; } /* #sub_detail .detail_cont .detail_cont_list:after{clear:both; content:""; display:block;} #sub_detail .detail_cont .detail_cont_list li{width:48%; margin:0 1%; float:left;} #sub_detail .detail_cont .detail_cont_list li:first-child{margin-top:0;} */ } @media all and (min-width:1024px){ #sub_detail .detail_cont .detail_cont_list{/* width: 98%; */ margin: 0 auto; float:none; } /* #sub_detail .detail_cont .detail_cont_list:after{clear:both; content:""; display:block;} #sub_detail .detail_cont .detail_cont_list li{width: 31.3%; margin: 0 1%; float:left;} #sub_detail .detail_cont .detail_cont_list li:first-child{margin-top:0;} */ } @media all and (min-width:1350px){ #sub_detail .detail_nav{margin-top: 20%;} } @media screen and (orientation:landscape) and (max-width:667px){ #sub_detail .detail_cont .detail_cont_list .txt_box p{ font-size: 0.9em;} #sub_detail .detail_nav{margin-top: 30.5%;} } @media screen and (orientation:landscape) and (max-width:570px){ #sub_detail .detail_nav{margin-top: 35.5%;} /* #sub_detail .detail_cont .detail_cont_list li{width:48%; margin:5px 1%; float:left;} */ } @media screen and (orientation:landscape) and (max-width:480px){ #sub_detail .detail_nav{margin-top: 30.5%;} } @media all and (min-width:700px){ #sub_detail .detail_nav{margin-top:34%;} } @media all and (min-width:960px){ #sub_detail .detail_nav{margin-top:29%;} } @media all and (min-width:1024px){ #sub_detail .detail_nav{margin-top:27%;} } @media all and (min-width:1280px){ #sub_detail .detail_nav{margin-top:22%;} } @media all and (min-width:1400px){ #sub_detail .detail_nav{margin-top:19%;} } /* 비성인 디테일 */ /* 성인디테일 img_none */ #adult_noimg_detail_banner{border-top:1px solid #ddd; width:100%; margin-top:7px;} #adult_noimg_detail_banner.detail_comics{border-top:0 none;margin-top:0;} #adult_noimg_detail_banner:after {content: '';display: block; clear: both;} #adult_noimg_detail_banner>div{padding:2px 5px 0;} #adult_noimg_detail_banner .detail_imgbox{width:45%; float:left; padding:5px; max-width:200px;} #adult_noimg_detail_banner.detail_comics .detail_imgbox{width:114px;padding-top:8px;padding-bottom:8px;} #adult_noimg_detail_banner .detail_imgbox img{width:100%; border-radius:5px;} #adult_noimg_detail_banner .detail_txtbox{width:55%; float:left; padding:10px;} #adult_noimg_detail_banner.detail_comics .detail_txtbox{width:-webkit-calc(100% - 114px);width:-moz-calc(100% - 114px);width:calc(100% - 114px);padding:8px 10px 8px 6px;} #adult_noimg_detail_banner .detail_txtbox>div{margin-top:2px;} #adult_noimg_detail_banner .detail_txtbox .ganre_mark{font-size: 0.9em;letter-spacing:-0.02em; background: var(--bg-fc-color); border-radius: 3px; color: #fff; padding: 0 4px;line-height:20px;/* margin: 0 5px 0 0;vertical-align: middle; font-weight: bold; */margin:0;display: inline-block;vertical-align:top;} #adult_noimg_detail_banner .detail_txtbox .up_day{font-size: 0.9em; letter-spacing: -0.02em; height: 20px;/* margin: 2px 0 0; */margin:0;position: relative; text-align: left;display: inline-block;vertical-align:top;} /* #adult_noimg_detail_banner .detail_txtbox .up_day span { border-radius: 30px; border: 1px solid #e84d7d; padding: 1px 1px 0 0; color: #e84d7d; text-align: center; height: 15px; width: 15px; display: inline-block; margin-right: 2px;}pink버전 */ #adult_noimg_detail_banner .detail_txtbox .up_day span { border-radius: 30px; border: 1px solid var(--bg-fc-color); padding: 0 4px;line-height:18px; color: var(--bg-fc-color); text-align: center; width: 15px; display: inline-block;/* margin-right: 2px;height: 15px; */vertical-align:top;}/* white버전 */ #adult_noimg_detail_banner .detail_txtbox .up_day span.end{vertical-align: middle; border-radius:3px; border:1px solid #e3e3e3; color:#676767; background:#fff; height: auto; width: auto;} #adult_noimg_detail_banner .detail_txtbox .title{font-size:1.2em; font-weight:700; color:var(--main-ft-color);letter-spacing: -0.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #adult_noimg_detail_banner .detail_txtbox .writer{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #adult_noimg_detail_banner .detail_txtbox p{margin:5px 0; font-size:1em; color:var(--sub2-ft-color);} #adult_noimg_detail_banner.detail_comics .detail_txtbox p.detail_nobeltxt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-height:1.4;text-overflow:ellipsis;overflow:hidden;margin:0;} #adult_noimg_detail_banner .detail_txtbox .adult_mark{display: inline-block; font-size:0.9em; background:var(--bg-fc-color); border-radius:30px; color:var(--main-ft-color); padding:1px 2px; vertical-align: top;} #adult_noimg_detail_banner .detail_nobeltxt{width: 100%; color:#676767; letter-spacing:-0.03em; margin:0 auto 10px; padding-top: 5px;} #adult_noimg_detail_banner .detail_nobeltxt br{display:none;} #adult_noimg_detail_banner.detail_comics div.hash{padding-top:18px;margin:0;} #adult_noimg_detail_banner.detail_comics div.hash:after{content:"";display:block;clear:both;} #adult_noimg_detail_banner.detail_comics div.hash span{float:left;display:block;padding:0 3px;font-size:0.9em;color:var(--bg-fc-color);letter-spacing:-0.02em;margin-right:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} #adult_noimg_detail_banner .detail_nav_ul {width: 100%; text-align: center; background: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; height: 36px; float:left;} #adult_noimg_detail_banner .detail_nav_ul li {width:33.3%; float: left; height: 100%; text-align: center; display: inline-block; position: relative;} #adult_noimg_detail_banner .detail_nav_ul li a {display: block; width: 100%; letter-spacing: -0.025em; padding: 10px 0; height: 100%; border-left: 1px solid #ddd; color: #767676; box-sizing: border-box;} #adult_noimg_detail_banner .detail_nav_ul li:first-child a{border-left:0 none;} #adult_noimg_detail_banner .detail_nav_ul li:last-child a{border-right:0 none;} #adult_noimg_detail_banner .detail_nav_ul li .heart {color: #f52b2b;} #adult_noimg_detail_banner .detail_nav_ul li .heart span{padding-left:35px; background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png") no-repeat 0% center;background-size: 17px;} #adult_noimg_detail_banner .detail_nav_ul li .heart_on {color: #f52b2b; } #adult_noimg_detail_banner .detail_nav_ul li .heart_on span{padding-left:35px; background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0% center; background-size: 17px;} #adult_noimg_detail_banner .detail_nav_ul li .first {color: #f52b2b; } #adult_noimg_detail_banner .detail_nav_ul li .first span{padding-left:35px; background: url("https://cdn.metoon.co.kr/mimg/adult_icon_detail_first.png") no-repeat 00% center; background-size: 14px;} #adult_noimg_detail_banner .detail_nav_ul li .sns {border-right: 1px solid #ddd; background: url("https://cdn.metoon.co.kr/mimg/sns.png") no-repeat 20% center; text-indent: 25%; position: relative; background-size: 17px;} #adult_noimg_detail_banner .sns_box {display: none; position: absolute; width: 130px; height: 55px; bottom: 100%; right: 0; background: url("https://cdn.metoon.co.kr/mimg/bg_sns_box_top.png") no-repeat center;} #adult_noimg_detail_banner .sns_box ul { height: 100%;} #adult_noimg_detail_banner .sns_box li {width: 33.3%; height: 100%; position: relative;} #adult_noimg_detail_banner .sns_box li a {width: 30px; height: 30px; position: absolute; top: 0; bottom: 10%; left: 0; right: 0; margin: auto; display: block; border: none; text-indent: -99999999em; overflow: hidden; border-radius: 25px;} #adult_noimg_detail_banner .sns_box .fb a {background: url("https://cdn.metoon.co.kr/mimg/fb_icon.png") no-repeat center; background-size: 30px;} #adult_noimg_detail_banner .sns_box .tw a {background: url("https://cdn.metoon.co.kr/mimg/tw_icon.png") no-repeat center; background-size: 30px;} #adult_noimg_detail_banner .sns_box .kakao a {padding: 0; background: url("https://cdn.metoon.co.kr/mimg/kakao_icon.png") no-repeat center; background-size: 30px;} #adult_noimg_detail_banner .sns_box .kakao img { width: 32px; height: 32px; border-radius: 25px; position: absolute; top: 0; bottom: 10%; left: 0; right: 0; margin: auto;} .adult_noimg_detail_cont{padding:0 8px 10px; width: 100%; overflow: hidden; margin: 0 auto 0; position: relative; /* background: #f5f5f5; */ border-bottom:1px solid var(--main-line-color); z-index: 9;} .adult_noimg_detail_title_box{padding:10px 10px 0; position: relative; background: #f5f5f5; z-index: 9;} .adult_noimg_cont_title{font-size:1.2em; border-bottom:2px solid var(--main-line-color);padding-bottom:5px;} .adult_noimg_detail_radio{width: 96%; overflow: hidden; margin: 0 auto 0;padding: 8px 0 0;} .adult_noimg_detail_radio fieldset{display: block; float: right;} .adult_noimg_detail_radio fieldset input{ vertical-align: bottom;} .adult_noimg_detail_radio label{border: none; background: none; font-size: 1em; padding-right: 5px; color: #9e9e9e;} .adult_noimg_detail_radio .chkselect{color: #F15584;} /* .adult_noimg_detail_list{border-top:1px solid var(--main-line-color);} */ .adult_noimg_detail_list:after {content: '';display: block; clear: both;} .adult_noimg_detail_list li{float:left; border-bottom:1px solid var(--main-line-color); width:100%;position: relative;display:flex;align-items:center;} .adult_noimg_detail_list li div{float:left; height:100%; padding:0; width:100%;} .adult_noimg_btn>a>span{float:right; background:#fff; display: block; border: 1px solid var(--main-line-color); padding: 8px 0px; border-radius:5px; width:90%; text-align:center; font-weight:normal; color:#767676;box-sizing: border-box;} .adult_noimg_btn .free_btn span{background:url("https://cdn.metoon.co.kr/mimg/detail_free_icon.png") no-repeat 0 center; padding:2px 0; padding-left:20px; background-size:15px;} .adult_noimg_btn .coin_btn span{background:url("https://cdn.metoon.co.kr/mimg/detail_coin_icon.png") no-repeat 0 center; padding:2px 0; padding-left:18px; background-size:15px;} .adult_noimg_btn.memvip_btn .coin_btn span{position:relative;} .adult_noimg_btn.memvip_btn .coin_btn span:after{content:"";display:block;position:absolute;top:50%;left:-5%;width:110%;height:2px;background:var(--bg-fc-color);} .adult_noimg_btn .list_pink_btn{color: #fff; background: #e84d7d; border: 1px solid var(--bg-fc-color);} .adult_noimg_detail_list li a{overflow:hidden; display:block;cursor:pointer;flex:1 1 auto;} .adult_noimg_detail_list li .adult_noimg_list_box{display: block; /* float: left; width:70%; */} .adult_noimg_detail_list li .adult_noimg_btn{display: block; width: 40%;width:100px; height:36px; position: relative; top: 0;right: 0;margin:auto; bottom:0; padding: 11px 0; text-align: center; border-radius: 5px; cursor: pointer; max-width: 120px; float: right; letter-spacing: -0.05em; color: #424242; font-size: 1em; margin: 0 auto;flex-shrink:0;} /* 회원가입후 보기 sns버튼 */ .adult_noimg_detail_list li .sns_join_btn>a>span{padding:8px 0; color:var(--main-ft-color); border-radius:3px;} .adult_noimg_detail_list li .sns_join_btn>a>span p{width:auto; margin:0; padding:0; font-size:1em; color:var(--main-ft-color); display:inline-block; padding-left:20px; position:relative;} .adult_noimg_detail_list li .sns_join_btn>a>span img{width:18px; height:18px; display:block; position:absolute; top:0; bottom:0; left:0; margin:auto;} .adult_noimg_detail_list li .sns_join_btn .fb_join span{background: #395a9c; border: 1px solid #2c4b87;} .adult_noimg_detail_list li .sns_join_btn .naver_join span{background: #1ec800; border: 1px solid #1cb900;} /* 회원가입후 보기 sns버튼 */ .adult_noimg_detail_list p{padding-bottom:5px; margin:10px 0; font-weight:500; font-size:14px; letter-spacing:-0.025em;text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 95%;} .adult_noimg_detail_list p.date{display:none;} .adult_noimg_detail_list p .sub_title{padding-right:3px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 85%; display: inline-block;} .adult_noimg_detail_list .txt_up_icon{font-size: 10px; letter-spacing: -0.025em; color: #fff; padding: 1px 3px 0; border-radius: 3px; margin: 0px 3px 0 3px; font-weight: bold; display: inline-block; text-align: center; vertical-align: text-top; background: #2c5faf;line-height: normal;} .adult_noimg_detail_list .txt_recent_icon{font-size: 10px; letter-spacing: -0.025em; color: #fff; padding: 1px 3px 0; border-radius: 3px; margin: 1px 3px 0 3px; font-weight: bold; display: inline-block; text-align: center; vertical-align: text-top; background: #852cfa;line-height: normal;} .adult_noimg_detail_list .nobel_title {height:36px;line-height:36px;color:var(--sub2-ft-color); font-size:13px; padding:0;/* padding-left:20px; *//* text-indent:2.5%; width: 65%;*/float: left; position:relative;margin:0;} .adult_noimg_detail_list .nobel_title .title_area_wrap{display:inline-block;max-width:calc(100% - 90px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:middle;padding-right:5px;-webkit-box-sizing:border-box;box-sizing:border-box;} .adult_noimg_detail_list .nobel_title > span:only-child{max-width:100%;} .adult_noimg_detail_list .nobel_title .free_coupon_txt{display:inline-block;vertical-align:middle;font-size:11px;height:18px;line-height:18px;padding:0 5px;background:#f56e74;border-radius:3px;color:var(--main-ft-color);} .adult_noimg_detail_list p .heart{margin-left:10px; font-size: 1.0em; padding-left: 20px; background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart.png") no-repeat 0 75%; background-size: 14px 12px; color: #c53232;} .adult_noimg_detail_list .on .heart{background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0 45%; background-size: 14px 12px;}/* white 버전 */ .adult_noimg_detail_list .date{display:none; font-weight:normal; font-size:1em; padding:0; float:right; width:20.5%; text-align: right; padding-right:2.5%;} #adult_noimg_detail_wrap .adult_noimg_detail_list_more{width: 100%; padding-bottom: 15px; float: left; position: relative; background: #f5f5f5; z-index: 9;} #adult_noimg_detail_wrap .adult_noimg_detail_list_more a{width: 96%; display: block; text-align: center; background: #fff; padding: 9px 0 8px; font-size: 1.1em; border-radius: 5px; margin: 5px auto; text-shadow: none; position: relative; color: #f5284a; border: 1px solid #f5284a; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #adult_noimg_detail_wrap .adult_noimg_detail_list_more p{font-weight: bold; display: inline-block; margin-left: -3%;} #adult_noimg_detail_wrap .adult_noimg_detail_list_more img{width: 16px; display: inline-block; position: absolute; top: 4px; bottom: 0; margin: auto; padding-left: 10px;} #adult_noimg_detail_wrap .adult_noimg_detail_next{width:100%; padding:10px 0 5px; position: relative; z-index: 2; background:#f5f5f5;} #adult_noimg_detail_wrap .adult_noimg_detail_next a{display: block; width: 96%; margin:5px auto 0; text-align:center; border-radius: 6px; padding:7px 0 9px; font-weight:bold; color:var(--main-ft-color); background: #c53232; border: 1px solid var(--bg-fc-color); font-size:1.1em;} #adult_noimg_detail_wrap .adult_noimg_detail_next .next_view_title{max-width: 60%; display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;vertical-align: bottom;} #sub_detail .detail_banner .detail_caption .adult_mark{display: inline-block; font-size:0.9em; background:var(--bg-fc-color); border-radius:18px; color:var(--main-ft-color); width:18px; height:18px; line-height:19px; vertical-align: top; margin-left:5px; text-align:center;} #sub_detail .detail_banner .detail_caption .icon_19_patch{display: inline-block; margin-left: 3px; vertical-align: top; width: 18px;} /* 무료카운트 txt */ .nobel_title img{display:inline-block !important; margin-right:3px;/* position:absolute; top:-2px; left:3px; bottom:0; margin:auto; */ width:10px !important;} .free_count_box_txt{display:inline-block;} .free_count_box_txt img{display:block; position:absolute; top:-2px; left:3px; bottom:0; margin:auto; width:10px !important;} .free_count_box_txt span{color:var(--bg-fc-color); position:relative; padding-left:5px; font-weight:normal;} /* 무료카운트 txt */ @media all and (min-width:320px) and (max-width:350px){ .adult_noimg_detail_txtbox{padding: 7px;} .adult_noimg_detail_txtbox>div{margin:0;} .adult_noimg_detail_txtbox p{margin:2px 0; font-size: 0.9em;} .adult_noimg_detail_txtbox .title{font-size: 1.15em;} .adult_noimg_detail_nobeltxt{padding-top:3px;} .adult_noimg_btn>a>span{font-size:0.9em;} } @media all and (min-width:400px){ /* .adult_noimg_detail_list li .adult_noimg_btn{max-width:110px;} .adult_noimg_detail_list li .adult_noimg_list_box{width: 70%;} */ } @media all and (min-width:435px) and (max-width:600px){ .adult_noimg_detail_txtbox p{margin:10px 0;} .adult_noimg_detail_nobeltxt{padding-top:10px;} .adult_noimg_detail_txtbox>div{margin-top:5px;} } @media all and (min-width:435px) and (max-width:500px){ .adult_noimg_detail_txtbox{width: 55%;} } @media all and (min-width:501px) and (max-width:600px){ .adult_noimg_detail_txtbox{width: 65%;} } @media all and (min-width:601px){ .adult_noimg_detail_txtbox{width: 65; padding: 10px; margin-left: 10px;} .adult_noimg_detail_txtbox p{margin:10px 0;} .adult_noimg_detail_nobeltxt{padding-top:10px;} .adult_noimg_detail_list li{width: 49%; margin: 0; padding: 5px 1%; position:relative;} .adult_noimg_detail_list li:nth-child(odd){border-right:1px solid var(--main-line-color); box-sizing:border-box;} .adult_noimg_detail_list p{margin:15px 0 10;} /* .adult_noimg_detail_list li .adult_noimg_btn{right:2%; width:34%;} */ } @media all and (min-width:561px) and (max-width:600px){ #adult_noimg_detail_banner .detail_nav_ul li .first{background: url("https://cdn.metoon.co.kr/mimg/icon_detail_first.png") no-repeat 30% center; text-indent: 17%; background-size: 14px;} /* #adult_noimg_detail_banner .detail_nav_ul li .heart{background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart.png") no-repeat 30% center; text-indent: 17%; background-size: 17px;} #adult_noimg_detail_banner .detail_nav_ul li .heart_on {background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png") no-repeat 30% center; text-indent: 17%; background-size: 17px;} */ #adult_noimg_detail_banner .detail_nav_ul li .sns{background: url("https://cdn.metoon.co.kr/mimg/sns.png") no-repeat 30% center; text-indent: 17%; background-size: 17px;} } @media all and (min-width:601px) and (max-width:810px){ #adult_noimg_detail_banner .detail_nav_ul li .first{background: url("https://cdn.metoon.co.kr/mimg/icon_detail_first.png") no-repeat 36% center; text-indent: 12%; background-size: 14px;} /* #adult_noimg_detail_banner .detail_nav_ul li .heart{background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart.png") no-repeat 36% center; text-indent: 12%; background-size: 17px;} #adult_noimg_detail_banner .detail_nav_ul li .heart_on {background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png") no-repeat 36% center; text-indent: 12%; background-size: 17px;} */ #adult_noimg_detail_banner .detail_nav_ul li .sns{background: url("https://cdn.metoon.co.kr/mimg/sns.png") no-repeat 36% center; text-indent: 12%; background-size: 17px;} } @media all and (min-width:790px){ /* #adult_noimg_detail_banner .detail_nav_ul li .first{background: url("https://cdn.metoon.co.kr/mimg/icon_detail_first.png") no-repeat 35% center; text-indent: 12%; background-size: 14px;} #adult_noimg_detail_banner .detail_nav_ul li .heart{background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart.png") no-repeat 35% center; text-indent: 12%; background-size: 17px;} #adult_noimg_detail_banner .detail_nav_ul li .heart_on {background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png") no-repeat 35% center; text-indent: 12%; background-size: 17px;} */ #adult_noimg_detail_banner .detail_nav_ul li .sns{background: url("https://cdn.metoon.co.kr/mimg/sns.png") no-repeat 35% center; text-indent: 12%; background-size: 17px;} } @media all and (min-width:920px){ /* #adult_noimg_detail_banner .detail_nav_ul li .first{background: url("https://cdn.metoon.co.kr/mimg/icon_detail_first.png") no-repeat 40% center; text-indent: 11%; background-size: 14px;} #adult_noimg_detail_banner .detail_nav_ul li .heart {background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart.png") no-repeat 40% center; text-indent: 11%; background-size: 17px;} #adult_noimg_detail_banner .detail_nav_ul li .heart_on {background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png") no-repeat 40% center; text-indent: 11%; background-size: 17px;} */ #adult_noimg_detail_banner .detail_nav_ul li .sns{background: url("https://cdn.metoon.co.kr/mimg/sns.png") no-repeat 40% center; text-indent: 11%; background-size: 17px;} } @media all and (min-width:1024px){ /* #adult_noimg_detail_banner .detail_nav_ul li .first{background: url("https://cdn.metoon.co.kr/mimg/icon_detail_first.png") no-repeat 40% center; text-indent: 10%; background-size: 14px;} #adult_noimg_detail_banner .detail_nav_ul li .heart {background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart.png") no-repeat 40% center; text-indent: 10%; background-size: 17px;} #adult_noimg_detail_banner .detail_nav_ul li .heart_on {background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png") no-repeat 40% center; text-indent: 10%; background-size: 17px;} */ #adult_noimg_detail_banner .detail_nav_ul li .sns{background: url("https://cdn.metoon.co.kr/mimg/sns.png") no-repeat 40% center; text-indent: 10%; background-size: 17px;} } @media all and (min-width:1250px){ /* #adult_noimg_detail_banner .detail_nav_ul li .first{background: url("https://cdn.metoon.co.kr/mimg/icon_detail_first.png") no-repeat 42% center; text-indent: 8%; background-size: 14px;} #adult_noimg_detail_banner .detail_nav_ul li .heart {background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart.png") no-repeat 42% center; text-indent: 8%; background-size: 17px;} #adult_noimg_detail_banner .detail_nav_ul li .heart_on {background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png") no-repeat 42% center; text-indent: 8%; background-size: 17px;} */ #adult_noimg_detail_banner .detail_nav_ul li .sns{background: url("https://cdn.metoon.co.kr/mimg/sns.png") no-repeat 42% center; text-indent: 8%; background-size: 17px;} } /* 성인디테일 img_none */ /* 디테일 sns_box 수정 */ #sub_detail .detail_nav .detail_nav_ul li .sns_box_wrap{display:none; position:absolute; width:170px; height:50px; bottom: 100%; margin-bottom:5px; right:5px; background:rgba(255, 255, 255, 0.8); border: 1px solid #ddd; border-radius: 5px; padding: 0 5px;} #sub_detail .detail_nav .detail_nav_ul li .sns_box_wrap .sns_list{ height:100%;} #sub_detail .detail_nav .detail_nav_ul li .sns_box_wrap .sns_list li{width:23%; margin:0 1%; height:100%; position:relative;} #sub_detail .detail_nav .detail_nav_ul li .sns_box_wrap .sns_list li a{width:30px; height:30px; position:absolute; top:0; bottom:0%; left:0; right:0; margin:auto; display:block; border:none; text-indent:-99999999em; overflow:hidden; border-radius:25px;} #sub_detail .detail_nav .detail_nav_ul li .sns_box_wrap .sns_list .tw a{background:url("https://cdn.metoon.co.kr/mimg/tw_icon.png") no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul li .sns_box_wrap .sns_list .fb a{background:url("https://cdn.metoon.co.kr/mimg/fb_icon.png") no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul li .sns_box_wrap .sns_list .kakao a{padding: 0; background:url("https://cdn.metoon.co.kr/mimg/kakaotalk_icon.png") no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul li .sns_box_wrap .sns_list .kakao img{width:30px; height: 30px; border-radius:25px; position:absolute; top:0; bottom:0%; left:0; right:0; margin:auto;} #sub_detail .detail_nav .detail_nav_ul li .sns_box_wrap .sns_list .share a{background:url("https://cdn.metoon.co.kr/mimg/share_icon.png") no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box_wrap{display:none; position:absolute; width:170px; height:50px; bottom: 100%; margin-bottom:5px; right:5px; background:rgba(255, 255, 255, 0.8); border: 1px solid #ddd; border-radius: 5px; padding: 0 5px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box_wrap .sns_list{ height:100%;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box_wrap .sns_list li{width:23%; margin:0 1%; height:100%; position:relative;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box_wrap .sns_list li a{width:30px; height:30px; position:absolute; top:0; bottom:0%; left:0; right:0; margin:auto; display:block; border:none; text-indent:-99999999em; overflow:hidden; border-radius:25px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box_wrap .sns_list .tw a{background:url("https://cdn.metoon.co.kr/mimg/tw_icon.png") no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box_wrap .sns_list .fb a{background:url("https://cdn.metoon.co.kr/mimg/fb_icon.png") no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box_wrap .sns_list .kakao a{padding: 0; background:url("https://cdn.metoon.co.kr/mimg/kakaotalk_icon.png") no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box_wrap .sns_list .kakao img{width:30px; height: 30px; border-radius:25px; position:absolute; top:0; bottom:0%; left:0; right:0; margin:auto;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box_wrap .sns_list .share a{background:url("https://cdn.metoon.co.kr/mimg/share_icon.png") no-repeat center; background-size:30px;} #chall_detail_banner .sns_box_wrap{display:none; position:absolute; width:170px; height:50px; bottom: 100%; margin-bottom:5px; right:5px; background:rgba(255, 255, 255, 0.8); border: 1px solid #ddd; border-radius: 5px; padding: 0 5px;} #chall_detail_banner .sns_box_wrap .sns_list{ height:100%;} #chall_detail_banner .sns_box_wrap .sns_list li{width:23%; margin:0 1%; height:100%; position:relative;} #chall_detail_banner .sns_box_wrap .sns_list li a{width:30px; height:30px; position:absolute; top:0; bottom:0%; left:0; right:0; margin:auto; display:block; border:none; text-indent:-99999999em; overflow:hidden; border-radius:25px;} #chall_detail_banner .sns_box_wrap .sns_list .tw a{background:url("https://cdn.metoon.co.kr/mimg/tw_icon.png") no-repeat center; background-size:30px;} #chall_detail_banner .sns_box_wrap .sns_list .fb a{background:url("https://cdn.metoon.co.kr/mimg/fb_icon.png") no-repeat center; background-size:30px;} #chall_detail_banner .sns_box_wrap .sns_list .kakao a{padding: 0; background:url("https://cdn.metoon.co.kr/mimg/kakaotalk_icon.png") no-repeat center; background-size:30px;} #chall_detail_banner .sns_box_wrap .sns_list .kakao img{width:30px; height: 30px; border-radius:25px; position:absolute; top:0; bottom:0%; left:0; right:0; margin:auto;} #chall_detail_banner .sns_box_wrap .sns_list .share a{background:url("https://cdn.metoon.co.kr/mimg/share_icon.png") no-repeat center; background-size:30px;} #adult_noimg_detail_banner .detail_nav_ul li .sns_box_wrap{display:none; position:absolute; width:170px; height:50px; bottom: 100%; margin-bottom:5px; right:5px; background:rgba(255, 255, 255, 0.8); border: 1px solid #ddd; border-radius: 5px; padding: 0 5px;} #adult_noimg_detail_banner .detail_nav_ul li .sns_box_wrap .sns_list{ height:100%;} #adult_noimg_detail_banner .detail_nav_ul li .sns_box_wrap .sns_list li{width:23%; margin:0 1%; height:100%; position:relative;} #adult_noimg_detail_banner .detail_nav_ul li .sns_box_wrap .sns_list li a{width:30px; height:30px; position:absolute; top:0; bottom:0%; left:0; right:0; margin:auto; display:block; border:none; text-indent:-99999999em; overflow:hidden; border-radius:25px;} #adult_noimg_detail_banner .detail_nav_ul li .sns_box_wrap .sns_list .tw a{background:url("https://cdn.metoon.co.kr/mimg/tw_icon.png") no-repeat center; background-size:30px;} #adult_noimg_detail_banner .detail_nav_ul li .sns_box_wrap .sns_list .fb a{background:url("https://cdn.metoon.co.kr/mimg/fb_icon.png") no-repeat center; background-size:30px;} #adult_noimg_detail_banner .detail_nav_ul li .sns_box_wrap .sns_list .kakao a{padding: 0; background:url("https://cdn.metoon.co.kr/mimg/kakaotalk_icon.png") no-repeat center; background-size:30px;} #adult_noimg_detail_banner .detail_nav_ul li .sns_box_wrap .sns_list .kakao img{width:30px; height: 30px; border-radius:25px; position:absolute; top:0; bottom:0%; left:0; right:0; margin:auto;} #adult_noimg_detail_banner .detail_nav_ul li .sns_box_wrap .sns_list .share a{background:url("https://cdn.metoon.co.kr/mimg/share_icon.png") no-repeat center; background-size:30px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box_wrap.sns_box3{width: 130px;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box_wrap.sns_box3 .sns_list li{width: 31.3%;} #sub_detail .detail_nav .detail_nav_ul_noimg li .sns_box_wrap.sns_box3 .sns_list li.fb{display:none;} #adult_noimg_detail_banner .detail_nav_ul li .sns_box_wrap.sns_box3{width: 130px;} #adult_noimg_detail_banner .detail_nav_ul li .sns_box_wrap.sns_box3 .sns_list li{width: 31.3%;} #adult_noimg_detail_banner .detail_nav_ul li .sns_box_wrap.sns_box3 .sns_list li.fb{display:none;} #chall_detail_banner .sns_box_wrap.sns_box3{width: 130px;} #chall_detail_banner .sns_box_wrap.sns_box3 .sns_list li{width: 31.3%;} #chall_detail_banner .sns_box_wrap.sns_box3 .sns_list li.fb{display:none;} /* 디테일 sns_box 수정 */ /* 서브 디테일 */ /* 서브 편성 */ #sub_sch .cont_title{display:none;} #sub_sch .sch_controller_wrap{width:100%; position:relative; margin:5px auto 0px; border-radius:5px; overflow:hidden; font-size: 1.2em; font-weight: normal; text-align:center;} #sub_sch .sch_controller{ margin:0 auto;text-align: center; display: inline-block;} #sub_sch .sch_controller a{font-size:1.2em; display:inline-block; text-indent:-999999em; overflow:hidden; height:26px; width:26px; vertical-align: middle; margin:0 5px; float: left;} #sub_sch .sch_controller .prev{background:url("https://cdn.metoon.co.kr/mimg/btn_sch_prev2.png") no-repeat center; background-size:26px;} #sub_sch .sch_controller .next{background:url("https://cdn.metoon.co.kr/mimg/btn_sch_next2.png") no-repeat center; background-size:26px;} #sub_sch .sch_controller .today_btn{background:url("https://cdn.metoon.co.kr/mimg/btn_sch_today.png") no-repeat center; background-size:26px;} #sub_sch .sch_controller p{ font-size:1.2em; display:inline-block; color:#676767;vertical-align: middle; margin:0 5px; float: left;line-height:1.4;} #sub_sch form{display: inline-block;float: left;margin-top: 1px;} #sub_sch form #s_month{float:left; border:none; background:none; border-bottom:1px solid #ddd; color:#676767; border-radius:0; font-size:1.2em;margin-top:-2px; vertical-align:top;padding:0px 0 0;background:transparent;height:28px;line-height:1.6;} #sub_sch .ui-select{display: inline-block; margin:0; border-bottom:1px solid #ddd;} #sub_sch .ui-select span{line-height:1.4;color:#676767; font-weight:normal; font-size:0.95em;} #sub_sch #year-button:after {display:block; background:url("https://cdn.metoon.co.kr/mimg/reply_open.png") no-repeat 100% center;right: 0; background-size: 10px;} #sub_sch #year-button{border:none; padding:0; padding-right:15px; margin-left:5px;} #sub_sch #s_month-button:after {display:block; background:url("https://cdn.metoon.co.kr/mimg/reply_open.png") no-repeat 100% center;right: 0; background-size: 10px;} #sub_sch #s_month-button{border:none; padding:0; padding-right:15px; margin-right:5px;} #sub_sch .ui-btn:hover{background:none;} #sub_sch .days{margin-left:5px; color:#E84D7D;} #sub_sch .sch_controller .date{margin: 1px 5px 0;} #sub_sch .sch_controller #t_year{margin:0 5px; } #sub_sch .ui-btn-icon-right:after{display:none;} #sub_sch .sch_cont {width: 97%; margin: 0 auto 15px; overflow:hidden;} #sub_sch .sch_cont .sch_cont_list{box-shadow:none; margin: 5px 0; float: left;} #sub_sch .sch_cont .sch_cont_list li{padding:5px 0; float:left; width:100%;} #sub_sch .sch_cont .sch_cont_list li div{display: block; width:96%; position: relative; overflow: hidden; border-radius: 6px; padding:0; margin:0 auto; background:#fff; border-width:thin; border:1px solid #ddd; color:#676767;} #sub_sch .sch_cont .sch_cont_list li .img_box_wrap{width:100%; border:none; border-radius:0;} #sub_sch .sch_cont .sch_cont_list li div a{display: block; width:100%; z-index:99; position:relative;} #sub_sch .sch_cont .sch_cont_list .sch_coin{position:absolute; top:7px; left:7px; } #sub_sch .sch_cont .sch_cont_list img{width:100%; max-width:100%; display:block; max-height: none;} #sub_sch .sch_cont .sch_cont_list .novel_img{position:absolute; top:0; left:0; right:0;} #sub_sch .sch_cont .sch_cont_list .patch_box{ position:absolute; top:0; right:5px; z-index: 9; text-align: right; background: none; border: none; border-radius: 0; height: auto; width: auto; letter-spacing: 0; font-size: 0;} #sub_sch .sch_cont .sch_cont_list .patch_box>img{width: 35px; display:inline-block; vertical-align: top; margin-left:3px;} #sub_sch .sch_cont .sch_cont_list .patch_box .patch{width:40%; max-width: 45px;} #sub_sch .sch_cont .sch_cont_list .today_cont_txt{overflow: visible; border-radius:0; border:none; position:relative; bottom:0; background:#fff; margin:0; font-size: 1.1em; font-weight:bold; width:100%; white-space: normal; text-align: center; letter-spacing:-0.05em; min-height:30px; z-index:99;} #sub_sch .sch_cont .sch_cont_list span{display: block;} #sub_sch .sch_cont .sch_cont_list .img_backbox{padding:0; position:absolute; top:0; left:0; right:0; height:100%; background:url("https://cdn.metoon.co.kr/mimg/img_back_sm4.png") repeat-x 100% 100%; background-size:100% 100%;z-index: 1;} #sub_sch .sch_cont .sch_cont_list .nobel_txt_box{overflow: visible; border-radius:0; min-height: inherit; background:none; border:none; position:relative; text-align:center;} #sub_sch .sch_cont .sch_cont_list .nobel_txt_box p{position:absolute; top:-85%; width:100%;left: 0; right: 0; margin: 0 auto; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #sub_sch .sch_cont .sch_cont_list .nobel_txt{color:var(--main-ft-color);padding: 0 5px; background: rgba(0,0,0,.35); display: inline-block; font-size: 1.2em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width:95%;} #sub_sch .sch_cont .sch_cont_list .nobel_title{padding:10px 8px; } @media all and (min-width:320px) and (max-width:360px){ #content_wrap #sub_sch .cont_title{margin:15px auto 10px;} #sub_sch .sch_controller{margin: 0px auto 5px;} #sub_sch .sch_cont .sch_cont_list p{font-size: 0.9em;} #sub_sch .sch_cont{margin: -10px auto 15px;} } @media all and (min-width:435px) and (max-width:600px){ #sub_sch .sch_controller a{width:25px; height:25px;} #sub_sch .sch_controller p{font-size:1.2em; height:25px;} #sub_sch .sch_controller .prev{ background-size:100%;} #sub_sch .sch_controller .next{ background-size:100%;} #sub_sch .sch_controller .today_btn{ background-size:100%;} } @media all and (min-width:601px) and (max-width:810px){ #content_wrap #sub_sch .cont_title{font-size: 1.6em;} #sub_sch .sch_controller a{width:27px; height:27px;} #sub_sch .sch_controller p{font-size:1.3em; height:27px;} #sub_sch .sch_controller .prev{ background-size:100%;} #sub_sch .sch_controller .next{ background-size:100%;} #sub_sch .sch_controller .today_btn{ background-size:100%;} #sub_sch .sch_cont .sch_cont_list li{width: 48%; margin: 0 1%;} #sub_sch .sch_cont .sch_cont_list img{width:100%;} #sub_sch .sch_cont .sch_cont_list li div{width: 100%;} #sub_sch .sch_cont .sch_cont_list p{font-size:1em;} #sub_sch .ui-select span{font-size: 1.15em;} #sub_sch .sch_cont .sch_cont_list span{padding: 10px 27px;} #sub_sch form #s_month{font-size: 1.3em;} } @media all and (min-width:1000px){ #sub_sch .sch_cont{width:96%;} #sub_sch .sch_cont .sch_cont_list li{width: 48%; margin: 0 1%;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #sub_sch .sch_cont .sch_cont_list li{margin: 0 1%; width: 31%; float: left;} #sub_sch .sch_cont .sch_cont_list li div{width: 100%; } } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #sub_sch .sch_cont{width:96%;} #sub_sch .sch_cont .sch_cont_list li{width: 48%; margin: 0 1%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #sub_sch .sch_cont .sch_cont_list{border-bottom:0;} } @media all and (min-width:1300px){ #sub_sch .sch_cont .sch_cont_list li{margin: 0 1%; width: 31%; float: left;} #sub_sch .sch_cont .sch_cont_list li div{width: 100%; } } /* 서브 편성 */ /* 뷰어 */ .body_cs{overflow: hidden; height: 100%;} #view_header{width:100%; border: none; height:60px; top:0; left:0; padding-top:0; background:var(--sub-bg-color);} [color-theme="light"] #view_header{background-color:#404040;} #view_header:after{clear:both; display:block; content:"";} #view_header.topnone{top:-60px;} #view_header .ui-title{margin:0 auto;} #view_header .bookmark{position: absolute; top: 100%; right: 15px; opacity:1;} #view_header .bookmark img{margin-top:-80%; transition:.3s;} #view_header .bookmark img{width:46px; display:block; margin-top:-80%; transition:.3s;} #view_header .bookmark.on img{margin-top:0%;} #view_header .bookmark.topnone{top:-100%; transition:.5s;} #view_header .headTop{max-width:1220px;width:100%; position:relative; height:60px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:0 auto;}/* white 버전 */ #view_header .headTop .view_detail_list_form{/* width:calc(100% - 124px); */min-width:0;height:100%; position:relative;letter-spacing:-0.025em;-webkit-box-flex:1;-webkit-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:flex; -webkit-box-align:center;-webkit-align-items:center;align-items:center;float:left;} /* #view_header .headTop .view_detail_list_form_novel{width:calc(100% - 165px);} #view_header .headTop .view_detail_list_form_challenge{width:calc(100% - 131px);} #view_header .headTop .view_detail_list_form.gall_adult_toon{width:calc(100% - 156px);} #view_header .headTop .view_detail_list_form_novel.gall_adult{width:calc(100% - 197px);} #view_header .headTop .view_detail_list_form_challenge.gall_adult{width:calc(100% - 163px);} */ #view_header .headTop .view_detail_list_form>div{display:inline-block; padding-left:50px;padding-right:12px; width: 100%;}/* white 버전 */ #view_header .headTop .view_detail_list_form p{text-shadow:none; color:#FFFFFF; padding-bottom:0; font-weight:normal; text-indent: 0; font-size:1.15em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width:100%; max-width: 100%; display: block; letter-spacing:-0.025em;} #view_header .headTop .view_detail_list_form p:not(.nobel_title){margin-top:5px;} #view_header .headTop .view_detail_list_form .ui-select{margin:0;} #view_header .headTop .view_detail_list_form .nobel_title{font-weight:bold; font-size:1em;} #view_header .headTop .view_detail_list_form .nobel_title:only-child{font-size:1.15em;font-weight:500;} #view_header .headTop .view_detail_list_form #view_detail_list-button{background:none; border:none; box-shadow:none; text-shadow:none; color:var(--main-ft-color); padding: 5px; font-size:1.05em; max-width: 250px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-indent: 23px; margin-left:5px; text-align:left;} .view_detail_list_form .ui-select .ui-icon-carat-d:after{top: 12px; width: 27px; height: 26px; left:-2px; background: url("https://cdn.metoon.co.kr/mimg/icon_viewselect_btn.png") no-repeat center; background-size:20px;} .view_detail_list_form .list_back_btn{ background:url("https://cdn.metoon.co.kr/mimg/hd_back_01.svg") no-repeat center; background-size:21px; text-indent:-99999999em; padding-right: 6px; width: 35px; height:45px; overflow: hidden; display: block; margin: auto; position: absolute; left: 5px; top: 0; bottom: 0;} #view_header .menu_btn_box{display:-webkit-box;display:-webkit-flex;display:flex; position:relative; width:auto;height:100%; text-align:center;gap:5px 0;padding-right:10px;} /* #view_header .menu_btn_box > div{float:left; margin:0 10px 0 0;} */ #view_header .headTop .menu_btn{text-align:center; display:inline-block; width:31px; height:100%; position:relative;} #view_header .headTop .menu_btn a{display:block; width:100%; height:57px; top:0; bottom:0; position:absolute; margin:auto; background:url("https://cdn.metoon.co.kr/mimg/ic_view_set.png") no-repeat center; text-indent:-9999999em; overflow:hidden; background-size:31px;} .menu_btn_box a{display:flex;flex-direction:column;align-items:center;justify-content:center;/* width:30px; */padding:0 5px;height:100%;gap:5px 10px;} /* #view_header .headTop .home_btn{display:inline-block; width:19px; height:100%; position:relative;} #view_header .headTop .home_btn a {display:block; width:100%; height:57px; top:0; bottom:0; position:absolute; margin:auto; background:url("https://cdn.metoon.co.kr/mimg/ic_view_home_xtg.png") no-repeat center; text-indent:-9999999em; overflow:hidden; background-size:19px;} #view_header .headTop .home_btn a.red{background:url("https://cdn.metoon.co.kr/mimg/ic_view_home_r.png") no-repeat center; background-size:19px;} #view_header .headTop .list_btn{display:inline-block; text-align:center; width:19px; height:100%; position:relative;} #view_header .headTop .list_btn a{display:block; width:100%; height:57px; top:0; bottom:0; position:absolute; margin:auto; background:url("https://cdn.metoon.co.kr/mimg/ic_view_menu.png") no-repeat center; text-indent:-9999999em; overflow:hidden; background-size:19px;} #view_header .headTop .pass_btn{display:inline-block; text-align:center; width:24px; height:100%; position:relative;} #view_header .headTop .pass_btn a{display:block; width:100%; height:57px; top:0; bottom:0; position:absolute; margin:auto; background:url("https://cdn.metoon.co.kr/mimg/ic_view_pass.png") no-repeat center; background-size:24px; text-indent:-9999999em; overflow:hidden;} #view_header .headTop .pass_btn a.pass_on{background:url("https://cdn.metoon.co.kr/mimg/ic_view_pass_r.png") no-repeat center; background-size:24px;} #view_header .headTop .gall_ad_btn{display:inline-block; text-align:center; width:22px; height:100%; position:relative;overflow:hidden;} #view_header .headTop .gall_ad_btn a{display:block;width:100%;height:57px;background:url("https://cdn.metoon.co.kr/mimg/ic_view_adult.png?1") no-repeat center;background-size:22px;text-indent:-9999px;} */ .vwr_menu_btn_ico{display:block;width:20px;height:20px;margin:0 auto;fill:#FFFFFF;} .home_btn .vwr_menu_btn_ico{width:18px;} .pass_btn .vwr_menu_btn_ico{width:17px;} .list_btn .vwr_menu_btn_ico{width:16px;} .vwr_menu_btn_txt{position:relative;width:100%;font-size:10px;font-weight:400;color:#FFFFFF;text-align:center;} .vwr_menu_btn_txt img{position:absolute;top:0;left:0;bottom:0;right:0;display:block;width:10px;height:10px;margin:auto;} .pass_on svg.vwr_menu_btn_ico{fill:var(--bg-fc-color);} .pass_on .vwr_menu_btn_txt{color:var(--bg-fc-color);} #view_header .view_control_menu{position:absolute; right:7px; margin:auto;width:170px; background:#fff; border:1px solid #ddd; border-radius:3px; margin-top: 1px; display:none;z-index:101;} #view_header .view_control_menu>div{width:100%;} #view_header .view_control_menu .view_font_onoff a{display: block; color: #676767; padding: 5px; font-size: 1.1em; font-weight: normal; letter-spacing: -0.025em; text-align: center; text-indent: 23px; background: url("https://cdn.metoon.co.kr/mimg/icon_character_off.png") no-repeat 10px center; background-size: 19px;} /* #view_header .view_control_menu .view_font_onoff .on{background: url("https://cdn.metoon.co.kr/mimg/icon_character_on.png") no-repeat 10px center; background-size: 19px;}pink 버전 */ #view_header .view_control_menu .view_font_onoff .on{background: url("https://cdn.metoon.co.kr/mimg/icon_character_on1.png") no-repeat 10px center; background-size: 19px;}/* white 버전 */ #view_header .view_control_menu .view_font_size{text-align:center; width:100%; height:30px; position:relative; margin: 5px auto;} #view_header .view_control_menu .view_font_size a{position:absolute; top:0; bottom:0; margin:auto; display:inline-block; text-indent:-99999999em; overflow:hidden; width:22px; height:22px;} #view_header .view_control_menu .view_font_size .size_down{left:15px; background:url("https://cdn.metoon.co.kr/mimg/icon_font_minus.png") no-repeat 0 center; background-size:22px;} #view_header .view_control_menu .view_font_size .size_up{right:15px; background:url("https://cdn.metoon.co.kr/mimg/icon_font_plus.png") no-repeat 0 center;background-size:22px;} #view_header .view_control_menu .view_font_size p{font-size: 20px; display:inline-block;} #view_header .view_control_menu .view_bg_color{width:100%; height:30px; margin: 5px 0 10px;} #view_header .view_control_menu .view_bg_color ul{width:100%; text-align:center; height:100%;} #view_header .view_control_menu .view_bg_color li{display:inline-block; width:20%; margin:0 1%; height:100%; text-indent:-99999999999em; overflow:hidden; border-radius:5px;} #view_header .view_control_menu .view_bg_color li a{width:100%; display:block; height:100%;} #view_header .view_control_menu .view_bg_color .bg_white{background:#fff; border:1px solid #ddd; box-sizing:border-box;} #view_header .view_control_menu .view_bg_color .bg_black{background:#000;} #view_header .view_control_menu .view_bg_color .bg_gray{background:#ededed;} #view_header .view_control_menu .view_bg_color .bg_beige{background:#ffeecc;} #view_header .view_control_menu .character_on{width:100%; position:relative; border-top:1px solid #ddd; padding: 5px 0;} #view_header .view_control_menu .character_on a{display:block; color:#676767; padding:5px; font-size:1.1em; font-weight:normal; letter-spacing:-0.025em; text-align:center; text-indent:23px; background:url("https://cdn.metoon.co.kr/mimg/icon_character_off.png") no-repeat 10px center;background-size:19px;} /* #view_header .view_control_menu .character_on .on{ background:url("https://cdn.metoon.co.kr/mimg/icon_character_on.png") no-repeat 10px center; background-size:19px;}pink 버전 */ #view_header .view_control_menu .character_on .on{ background:url("https://cdn.metoon.co.kr/mimg/icon_character_on1.png") no-repeat 10px center; background-size:19px;}/* white 버전 */ #view_logcont_wrap{ width: 100%; margin-left: -100%; border:none;} /* 줄간격 */ #view_header .view_control_menu .view_font_height{text-align:center; width:100%; height:30px; position:relative; margin: 5px auto;} #view_header .view_control_menu .view_font_height a{position:absolute; top:0; bottom:0; margin:auto; display:inline-block; text-indent:-99999999em; overflow:hidden; width:22px; height:22px;} #view_header .view_control_menu .view_font_height .height_down{left:15px; background:url("https://cdn.metoon.co.kr/mimg/icon_font_minus.png") no-repeat 0 center; background-size:22px;} #view_header .view_control_menu .view_font_height .height_up{right:15px; background:url("https://cdn.metoon.co.kr/mimg/icon_font_plus.png") no-repeat 0 center;background-size:22px;} #view_header .view_control_menu .view_font_height p{font-size: 16px; padding-top: 5px; letter-spacing: -0.05em; display:inline-block;} /* 줄간격 */ /* 자간 */ #view_header .view_control_menu .view_font_width{text-align:center; width:100%; height:30px; position:relative; margin: 5px auto;} #view_header .view_control_menu .view_font_width a{position:absolute; top:0; bottom:0; margin:auto; display:inline-block; text-indent:-99999999em; overflow:hidden; width:22px; height:22px;} #view_header .view_control_menu .view_font_width .width_down{left:15px; background:url("https://cdn.metoon.co.kr/mimg/icon_font_minus.png") no-repeat 0 center; background-size:22px;} #view_header .view_control_menu .view_font_width .width_up{right:15px; background:url("https://cdn.metoon.co.kr/mimg/icon_font_plus.png") no-repeat 0 center;background-size:22px;} #view_header .view_control_menu .view_font_width p{font-size: 16px; padding-top: 5px; letter-spacing: -0.05em; display:inline-block;} /* 자간 */ /* 글꼴 */ #view_header .view_control_menu .view_font_style{text-align:center; width:100%; /* height:30px; */ overflow:hidden; position:relative; margin: 5px auto;} #view_header .view_control_menu .view_font_style p{float:left; width:100%; font-size: 16px; padding:5px 10px 0; text-align:center; letter-spacing: -0.05em; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #view_header .view_control_menu .view_font_style>div{float:left; width:100%; padding:2px 5px; position:relative;} #view_header .view_control_menu .view_font_style>div a{padding:5px 0; display:block; float:left; width:50%; text-align:center;} #view_header .view_control_menu .view_font_style>div a.on{color:var(--bg-fc-color);} #view_header .view_control_menu .view_font_style>div:after{content: "｜"; width: 13px; position: absolute; top: 0; bottom: 0; display: block; right: 0; left: 0; margin: auto; height: 15px; font-size: 12px;} /* 글꼴 */ /* 기본값복원 */ #view_header .view_control_menu .reset_view{width:100%; position:relative; border-top:1px solid #ddd; padding: 7px 0; overflow:hidden; background:#f8f8f8; text-align:center;} #view_header .view_control_menu .reset_view a{display:block; text-indent:0px; color:#b8b8b8; font-size:1.1em; letter-spacing:-0.025em; font-weight:normal; } /* 기본값복원 */ /* */ #view_sidencont_wrap .mm-panel.mm-hasnavbar .mm-navbar{display:none;} #view_sidencont_wrap .mm-panels>.mm-panel:after, .mm-panels>.mm-panel:before{height:0 !important;} #view_sidencont_wrap .mm-listview>li:not(.mm-divider):after{border:none !important;} #view_sidencont_wrap .mm-navbar .mm-title{display:none;} #view_sidelist_wrap .mm-panel.mm-hasnavbar{padding:0 !important;} .sidencont_wrap{height: 100%; width: 70%; box-sizing:border-box;text-shadow:none; position:fixed; top:0; z-index:999; overflow-y: scroll;} .ui-panel-display-overlay{z-index: 999;} #view_sidelist_wrap{width:100%; background:#fff; float:left; box-sizing:border-box; z-index:999; padding:0px 0 0px;overflow-y: auto; font-size:1.1em;} #view_sidencont_wrap .select_title{height:60px; padding:0 0px 0; background:#E84D7D; color:var(--main-ft-color); position: fixed; z-index:999; box-sizing: border-box; font-size:1.1em; font-weight:normal; letter-spacing:-0.025em; width:100%;} #view_sidencont_wrap .select_title span{position:absolute; top:0; bottom:0; left:10px; height:20px; margin: auto;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width: 90%;} #view_sidelist_wrap ul{width:100%; overflow:hidden; background:#fff; margin:60px 0 0;} #view_sidelist_wrap li{padding:5px 5px 0; border-bottom:1px solid var(--main-line-color); min-height:175px;} #view_sidelist_wrap.noimg_list li{min-height:auto;padding-bottom:5px;} #view_sidelist_wrap .on a .bg_detail_img{background:none; position: absolute; top: 0; left:10px; right:10px; margin:auto; display:block; height:78%;background-size: 100% 100%; border-radius:5px;} #view_sidelist_wrap li a .sidelist_img_box{position:relative;} #view_sidelist_wrap.noimg_list li a .sidelist_img_box{display:none;} #view_sidelist_wrap li.no_img{min-height: 0; padding:5px;} #view_sidelist_wrap li.no_img .sidelist_img_box{display:none;} #view_sidencont_wrap #view_logcont_wrap .mm-listview>li:not(.mm-divider):after{display:none;} #view_sidencont_wrap #view_logcont_wrap .log_txt{display:block;width:100%; font-size:1.1em; padding:14px 0 15px; font-weight:normal; color:#676767; background:url("https://cdn.metoon.co.kr/mimg/login_title_img.png") no-repeat 0 20px; margin:0; background-size:100px;} #view_sidencont_wrap #view_logcont_wrap .log_txt span{font-size: 0.8em; letter-spacing: -0.025em; display: block; padding-top:40px;} #view_sidencont_wrap #view_logcont_wrap .log_txt span br{display:none;} #view_sidencont_wrap #view_logcont_wrap .ui-field-contain{padding-bottom:22px;} #view_sidencont_wrap #view_logcont_wrap .log_form{width:100%;padding-bottom:23px; border-bottom:1px solid #ddd; overflow:hidden;} #view_sidencont_wrap #view_logcont_wrap .log_form .userTxt{width:100%; background:#eee; border:1px solid #e8e8e8; line-height:2; margin-bottom:5px; font-size:1em; border-radius:5px; padding: 5px;} #view_sidencont_wrap #view_logcont_wrap .log_form .ui-input-text{margin:0; border:none; background:none; text-shadow:none;} #view_sidencont_wrap #view_logcont_wrap .log_form .login_btn{ display:block; width:100%; padding:9px 0 10px; background:#f74a7d; border:1px solid #dd275d; margin-top:20px; font-size:1.2em; font-weight:bold; color:var(--main-ft-color); margin: 10px auto 5px; border-radius:3px; text-align:center; box-sizing: border-box;} #view_sidencont_wrap #view_logcont_wrap .log_form .ui-input-text #l_userPass{margin-bottom:10px;} #view_sidencont_wrap #view_logcont_wrap label{border:none; background:none; font-size: 0.9em; letter-spacing: -0.05em; overflow: visible; margin-top: -1px;} #view_sidencont_wrap #view_logcont_wrap .check_box{width:12px;box-sizing: border-box;margin-left: 1px;vertical-align: text-top;display: inline-block; margin:0;} #view_sidencont_wrap #view_logcont_wrap .check_input{margin:0px; font-size:0.85em; letter-spacing:-0.025em; display: inline-block; font-weight:bold; padding:1% 0; border:none; color:#676767; background:none; text-shadow:none;} #view_sidencont_wrap #view_logcont_wrap input{top:5px; bottom:0; margin:auto;} #view_sidencont_wrap #view_logcont_wrap #login_check{margin-left:1%;} #view_sidencont_wrap #view_logcont_wrap label:after{display:none;} #view_sidencont_wrap #view_logcont_wrap .find_btn{width: 40%; float:right;margin-top:0px;} #view_sidencont_wrap #view_logcont_wrap .find_btn li{float:left; width:100%; border:none;} #view_sidencont_wrap #view_logcont_wrap .find_btn li a{display:block; background:#929292; border:1px solid #838383; min-width:80px; padding:3px 1px 1px; text-align:center; color:var(--main-ft-color); font-weight:normal; text-shadow:none; margin-top:1px; margin-right: 5%; border-radius:3px; float:right;} #view_sidencont_wrap #view_logcont_wrap .sns_txt{font-weight:bold; color:#747474; font-size:0.9em; letter-spacing:-0.025em; display:block; width:100%;margin:10px 0;} #view_sidencont_wrap #view_logcont_wrap .sns_login{width:100%; float:left; text-align: center; padding-bottom:10px; margin-top:0;} #view_sidencont_wrap #view_logcont_wrap .sns_login li{width:30%; margin:5px 0; display:inline-block; padding:0; float:left; border:none;} #view_sidencont_wrap #view_logcont_wrap .sns_login .fb_btn{margin:5px 3%;} #view_sidencont_wrap #view_logcont_wrap .sns_login li a{display:block; padding:0; width:100%; font-weight:bold; font-size:1.3em; text-indent: -999999999em; overflow:hidden; height:45px; color:var(--main-ft-color);} #view_sidencont_wrap #view_logcont_wrap .naver_btn a{background:url("https://cdn.metoon.co.kr/mimg/naver_logo.png") no-repeat center, #1ec800; border:1px solid #1cb900;} #view_sidencont_wrap #view_logcont_wrap .fb_btn a{background:url("https://cdn.metoon.co.kr/mimg/fb_logo.png") no-repeat center, #395a9c; border:1px solid #2c4b87;} #view_sidencont_wrap #view_logcont_wrap .google_btn a{background:url("https://cdn.metoon.co.kr/mimg/google_logo.png") no-repeat center, #db4431; border:1px solid #d03c2a;} #view_sidencont_wrap #view_logcont_wrap .sns_login li a span{display:block; width: 70%; float:right; text-align:left; line-height:2.4;} #view_sidencont_wrap #view_logcont_wrap .select_title span{text-align:center; font-weight:bold; font-size:1.1em;} #view_content_wrap{position: relative; z-index: 3;width:100%; padding:0px 0 35px; float:left;} #view_content_wrap:after{clear:both; display:block; content:"";} #view_content_wrap .view_cont_wrap{padding:80px 20px 20px; font-size: 21px; font-family: "KoPub Dotum";} #view_content_wrap .view_cont_wrap .title{border-bottom:1px solid #ddd; padding:5px 0 15px; font-weight:bold; color:#767676; text-align:left; margin:0px auto 20px;} #view_content_wrap .view_cont_wrap .title span{color:#2c2c2c; display:block; font-size:0.9em; margin-bottom:5px;} #view_content_wrap .view_cont_wrap #view_copyright img{width:100%;} #view_content_wrap .view_cont_wrap .txt{max-width: 700px; margin: 0 auto;} #view_content_wrap .view_cont_wrap p{width: 100%; margin: 50px auto; max-width: 700px; text-shadow:none; line-height: 35px; letter-spacing:0;} #view_content_wrap .view_cont_wrap .nobel_detail_num{text-align: center;} #view_content_wrap .view_cont_wrap .txt_center{text-align: center;} #view_content_wrap .view_cont_wrap .talk{position:relative; margin: 0 auto; width:100%;} #view_content_wrap .view_cont_wrap .talk .character_icon{width:45px; height:45px; display:inline-block;} #view_content_wrap .view_cont_wrap .talk .character_icon img{width:100%; height:100%;} #view_content_wrap .view_cont_wrap .talk .icon_cover{position:absolute; top:0; left:-1px; width:45px; height:45px; z-index:10;} #view_content_wrap .view_cont_wrap .talk .icon_cover img{display:none; width:46px; height:46px;} #view_content_wrap .view_cont_wrap .talk .talk_p{margin:0; max-width:80%; display:inline-block; vertical-align: top; padding-left: 10px;} /* 댓글 리뉴얼 */ #view_content_wrap{position: relative; z-index: 3; width: 100%; padding: 0px 0 35px; float: left;} #view_content_wrap .view_comm_wrap1{width: 100%; padding: 20px 0; /* background: #fff; */} #view_content_wrap .view_comm_wrap1 .view_comm_edit{width: 100%; padding: 0 10px;} #view_content_wrap .view_comm_wrap1 .view_comm_edit h4{font-size: 1.2em; padding-bottom: 15px;} #view_content_wrap .view_comm_wrap1 .view_comm_edit h4 span{font-weight:normal; font-size:13px; color: var(--sub-ft-color); vertical-align: text-bottom; letter-spacing: -0.025em;} #view_content_wrap .view_comm_wrap1 .view_comm_edit form>div{position: relative;} #view_content_wrap .view_comm_wrap1 .view_comm_edit .view_side_log_btn{background: none; color: var(--sub-ft-color); text-align: left; padding: 0; border: 1px solid var(--main-line-color);} #view_content_wrap .view_comm_wrap1 .view_comm_edit .nick_name_txt{letter-spacing: -0.025em; position: static; right: 0; left: 0; top: 0; padding: 8px 12px 7px; padding-right: 65px; border: none; background: var(--sub-bg-color);cursor:default;gap:5px 5px;} [color-theme="light"] #view_content_wrap .view_comm_wrap1 .view_comm_edit .nick_name_txt{background-color:#FFF;} #view_content_wrap .view_comm_wrap1 .view_comm_edit .comm_edit_btn{width: 60px; position: absolute; right: 0; top: 0;} #view_content_wrap .view_comm_wrap1 .view_comm_edit a:not(.comment_l_btn){display: block; padding: 8px 0; font-size: 1.1em; text-align: center; color: #C1C1C1; text-shadow: none;} [color-theme="light"] #view_content_wrap .view_comm_wrap1 .view_comm_edit a:not(.comment_l_btn){color:#707070;} #view_content_wrap .view_comm_wrap1 .view_comm_edit textarea{width: 100%; resize: none; box-shadow: none; border-radius: 0; padding: 12px; height: 100px !important; border: 1px solid var(--main-line-color);background-color:var(--opt-bg-color); overflow: overlay; margin-top: -1px; border-top:0;color:var(--main-ft-color);position:relative;} [color-theme="light"] #view_content_wrap .view_comm_wrap1 .view_comm_edit textarea{border-top:1px solid var(--main-line-color);background-color:#FBFBFB;} #view_content_wrap .view_comm_wrap1 .view_comm_edit textarea:focus{outline:1px solid var(--main-ft-fc-color);} #view_content_wrap .view_comm_wrap1 .view_comm_box1{ width: 100%; margin: 10px auto 0px; border-top: none; padding: 0 15px; /* min-height: 200px; background: url('https://cdn.metoon.co.kr/mimg/xtagram_logo_5_mini.svg?1') no-repeat center; background-size:80px; */ } #view_content_wrap .view_comm_wrap1 .view_comm_box1 .view_comm_best{width: 100%; background: #fff;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .comm_box{padding:10px 0; overflow: hidden; border-bottom: 1px solid var(--main-line-color);} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .user_id{color:var(--main-ft-color); font-weight: normal; font-size: 14px; letter-spacing: -0.02em; /* line-height: 2; */} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .user_id>img{width: 18px;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .user_id span{font-weight: normal; font-size: 0.9em; color:var(--main-ft-color); vertical-align:middle;vertical-align:baseline;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .user_id .date{font-size:0.8em;color: #676767; margin-left: 5px;flex-shrink:0;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .user_id .ep{background: #909090; margin-left: 3px; padding: 2px 5px; border-radius: 5px; letter-spacing: -0.025em; font-size: 11px;color:#FFFFFF;line-height:1.32;flex-shrink:0;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .comm_area{margin: 5px auto 10px;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .comm_area p{width: 100%; color:#C1C1C1;letter-spacing: -0.02em;margin-top:5px;} [color-theme="light"] #view_content_wrap .view_comm_wrap1 .view_comm_box1 .comm_area p{color:#707070;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .comm_area .best_comm{font-size: 11px; padding: 1px 4px; border-radius: 5px; margin-right: 5px;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .recomm_set{display: inline-block; float: right;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .recomm_set .recomm_set_box{padding: 0;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .recomm_set a{padding:2px 10px;border:1px solid var(--main-line-color);background-color:var(--opt-bg-color);} #view_content_wrap .view_comm_wrap1 .nobel_comment_pager{width: 100%; margin: 0px auto 0; padding: 5px 0 10px; float: left;float:none; text-align: center;} #view_content_wrap .view_comm_wrap1 .nobel_comment_pager a{display: inline-block; color: #767676; padding: 2px 6px 1px; background: #fff; border: 1px solid #ddd; margin: 0 2px;} #view_content_wrap .view_comm_wrap1 .nobel_comment_pager a.on{color: #d52b2c;color:var(--main-ft-fc-color);} #view_content_wrap .view_comm_wrap1 .nobel_comment_pager .comm_pager_btn{border:1px solid #fff; padding: 1 6px; width: auto; height: auto; line-height: normal;} #view_content_wrap .view_comm_wrap1 .nobel_comment_pager .comm_pager_btn img{height: 13px; vertical-align: middle;} /* 댓글 리뉴얼 */ /* 뷰어 사이드 */ /* 뷰어 사이드 170111 */ #view_sidencont_wrap .mm-panel.mm-hasnavbar .mm-navbar{display:none;} #view_sidencont_wrap .mm-panels>.mm-panel:after, .mm-panels>.mm-panel:before{height:0 !important;} #view_sidencont_wrap .mm-listview>li:not(.mm-divider):after{border:none !important;} #view_sidencont_wrap .mm-navbar .mm-title{display:none;} #view_sidelist_wrap .mm-panel.mm-hasnavbar{padding:0 !important;} .sidencont_wrap{position: fixed; top: 0; right: -260px; bottom:0; width:260px; height:100%; z-index:1000; color:var(--main-ft-color); text-shadow:none; box-shadow:none; overflow-y:scroll; box-sizing:border-box; border-left: 1px solid var(--main-line-color);background-color:var(--opt-bg-color); text-shadow:none;} .ui-panel-display-overlay{z-index: 999;} #view_sidelist_wrap{width:100%; float:left; box-sizing:border-box; z-index:999; padding:0px 0 0px;overflow-y: auto; font-size:1.1em;} /* #view_sidencont .side_select_title{height:60px; padding:0 0px 0; top:0; background:#E84D7D; color:var(--main-ft-color); position: fixed; z-index:999; box-sizing: border-box; font-size:1.1em; font-weight:normal; letter-spacing:-0.025em; width:260px;}pink 버전 */ #view_sidencont .side_select_title{height:60px; padding:0 0px 0; top:0; background:var(--opt-bg-color); color:var(--main-ft-color); position: fixed; z-index:999; box-sizing: border-box; font-size:1.1em; font-weight:normal; letter-spacing:-0.025em; width:260px;border-left:1px solid var(--main-line-color);border-bottom:1px solid var(--main-line-color);}/* white 버전 */ [color-theme="light"] #view_sidencont .side_select_title{background-color:#404040;border-bottom-color:#404040;border-left-color:#707070;color:#FFFFFF;} #view_sidencont .side_select_title .sub_title{position:absolute; top:0; bottom:0; left:10px; height:20px; margin: auto;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width: 90%;} #view_sidelist_wrap ul{width:100%; overflow:hidden; background:var(--opt-bg-color); margin:60px 0 0;} #view_sidelist_wrap li{padding:0; border-bottom:1px solid var(--main-line-color); min-height:auto;} #view_sidelist_wrap li a{color:var(--main-ft-color);font-weight:normal;overflow:hidden;display: block; letter-spacing:-0.025em; position:relative;font-size: 0.9em;display:flex;padding:10px;} #view_sidelist_wrap li a .bg_detail_img{background:url("https://cdn.metoon.co.kr/mimg/bg_text_gradient.png") repeat-X center 0; position: absolute; top: 0; left:0px; right:0px; margin:auto; display:block; height:100%;background-size: 100% 100%; opacity:0.8;} #view_sidelist_wrap .on a .bg_detail_img{background:none; position: absolute; top: 0; left:10px; right:10px; margin:auto; display:block; height:78%;background-size: 100% 100%; border-radius:5px;} #view_sidelist_wrap li a .sidelist_img_box{position:relative;width:70px;height:105px;background-color:var(--sub-bg-color);box-sizing:border-box;overflow:hidden;flex-shrink:0;} #view_sidelist_wrap li a img.sidelist_img{width:100%; border-radius:3px; min-height:auto; display:block;height:100%;object-fit:contain;object-fit:cover;} #view_sidelist_wrap li a img.flt_blur{filter:blur(3px);} #view_sidelist_wrap li a p{bottom:0; top: inherit; left: 0; width: 100%; padding: 3px 0 0 15px;align-self:center;white-space:normal;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;} #view_sidelist_wrap li:hover{background:var(--sub-bg-color);} #view_sidelist_wrap li.no_img{min-height: 0; padding:5px;} #view_sidelist_wrap li.no_img .sidelist_img_box{display:none;} /* #view_sidelist_wrap .on p{font-weight: bold; color:#e84d7d;} #view_sidelist_wrap .on img{border:2px solid #e84d7d; box-sizing: border-box;} pink 버전 */ #view_sidelist_wrap .on p{font-weight: 700; color:var(--main-ft-fc-color);} #view_sidelist_wrap .on img.sidelist_img{border:2px solid var(--bg-fc-color); box-sizing: border-box;}/* white 버전 */ #view_sidencont #view_logcont_wrap .mm-listview>li:not(.mm-divider):after{display:none;} #view_sidencont #view_logcont_wrap .log_txt{display:block;width:100%; font-size:1.1em; padding:14px 0 15px; font-weight:normal; color:#676767; background:url("https://cdn.metoon.co.kr/mimg/login_title_img.png") no-repeat 0 20px; margin:0; background-size:100px;} #view_sidencont #view_logcont_wrap .log_txt span{font-size: 0.8em; letter-spacing: -0.025em; display: block; padding-top:40px;} #view_sidencont #view_logcont_wrap .log_txt span br{display:none;} #view_sidencont #view_logcont_wrap .ui-field-contain{padding-bottom:22px;} #view_sidencont #view_logcont_wrap .log_form{width:100%;padding-bottom:23px; border-bottom:1px solid #ddd; overflow:hidden;} #view_sidencont #view_logcont_wrap .log_form .userTxt{width:100%; background:#eee; border:1px solid #e8e8e8; line-height:2; margin-bottom:5px; font-size:1em; border-radius:5px; padding: 5px;} #view_sidencont #view_logcont_wrap .log_form .ui-input-text{margin:0; border:none; background:none; text-shadow:none;} #view_sidencont #view_logcont_wrap .log_form .login_btn{ display:block; width:100%; padding:9px 0 10px; background:#f74a7d; border:1px solid #dd275d; margin-top:20px; font-size:1.2em; font-weight:bold; color:var(--main-ft-color); margin: 10px auto 5px; border-radius:3px; text-align:center; box-sizing: border-box;} #view_sidencont #view_logcont_wrap .log_form .ui-input-text #l_userPass{margin-bottom:10px;} #view_sidencont #view_logcont_wrap label{border:none; background:none; font-size: 0.9em; letter-spacing: -0.05em; overflow: visible; margin-top: -1px;} #view_sidencont #view_logcont_wrap .check_box{width:12px;box-sizing: border-box;margin-left: 1px;vertical-align: text-top;display: inline-block; margin:0;} #view_sidencont #view_logcont_wrap .check_input{margin:0px; font-size:0.85em; letter-spacing:-0.025em; display: inline-block; font-weight:bold; padding:1% 0; border:none; color:#676767; background:none; text-shadow:none;} #view_sidencont #view_logcont_wrap input{top:5px; bottom:0; margin:auto;} #view_sidencont #view_logcont_wrap #login_check{margin-left:1%;} #view_sidencont #view_logcont_wrap label:after{display:none;} #view_sidencont #view_logcont_wrap .find_btn{width: 40%; float:right;margin-top:0px;} #view_sidencont #view_logcont_wrap .find_btn li{float:left; width:100%; border:none;} #view_sidencont #view_logcont_wrap .find_btn li a{display:block; background:#929292; border:1px solid #838383; min-width:80px; padding:3px 1px 1px; text-align:center; color:var(--main-ft-color); font-weight:normal; text-shadow:none; margin-top:1px; margin-right: 5%; border-radius:3px; float:right;} #view_sidencont #view_logcont_wrap .sns_txt{font-weight:bold; color:#747474; font-size:0.9em; letter-spacing:-0.025em; display:block; width:100%;margin:10px 0;} #view_sidencont #view_logcont_wrap .sns_login{width:100%; float:left; text-align: center; padding-bottom:10px; margin-top:0;} #view_sidencont #view_logcont_wrap .sns_login li{width:30%; margin:5px 0; display:inline-block; padding:0; float:left; border:none;} #view_sidencont #view_logcont_wrap .sns_login .fb_btn{margin:5px 3%;} #view_sidencont #view_logcont_wrap .sns_login li a{display:block; padding:0; width:100%; font-weight:bold; font-size:1.3em; text-indent: -999999999em; overflow:hidden; height:45px; color:var(--main-ft-color);} #view_sidencont #view_logcont_wrap .naver_btn a{background:url("https://cdn.metoon.co.kr/mimg/naver_logo.png") no-repeat center, #1ec800; border:1px solid #1cb900;} #view_sidencont #view_logcont_wrap .fb_btn a{background:url("https://cdn.metoon.co.kr/mimg/fb_logo.png") no-repeat center, #395a9c; border:1px solid #2c4b87;} #view_sidencont #view_logcont_wrap .google_btn a{background:url("https://cdn.metoon.co.kr/mimg/google_logo.png") no-repeat center, #db4431; border:1px solid #d03c2a;} #view_sidencont #view_logcont_wrap .sns_login li a span{display:block; width: 70%; float:right; text-align:left; line-height:2.4;} #view_sidencont #view_logcont_wrap .select_title span{text-align:center; font-weight:bold; font-size:1.1em;} #view_content_wrap{position: relative; max-width:936px;max-width:100%; z-index: 3;width:100%; padding:0px 0px 0px; float:none;margin:0 auto;} #view_content_wrap:after{clear:both; display:block; content:"";} #view_content_wrap .view_cont_wrap{padding:80px 20px 20px; font-size: 21px;} #view_content_wrap .view_cont_wrap .title{border-bottom:1px solid #ddd; padding:5px 0 15px; font-weight:bold; color:#767676; text-align:left; margin:0px auto 20px; position:relative;} #view_content_wrap .view_cont_wrap .title span{color:#2c2c2c; display:block; font-size:0.9em; margin-bottom:5px;} #view_content_wrap .view_cont_wrap #view_copyright{width:100%; margin:0 auto; padding:0px 0 20px;} #view_content_wrap .view_cont_wrap #view_copyright img{width:100%;} #view_content_wrap .view_cont_wrap .txt{max-width: 700px; margin: 0 auto;} #view_content_wrap .view_cont_wrap p{width: 100%; margin: 50px auto; max-width: 700px; text-shadow:none; line-height: 35px;} #view_content_wrap .view_cont_wrap .nobel_detail_num{text-align: center;} #view_content_wrap .view_cont_wrap .txt_center{text-align: center;} #view_content_wrap .view_cont_wrap .talk{position:relative; margin: 0 auto; width:100%;} #view_content_wrap .view_cont_wrap .talk .character_icon{width:45px; height:45px; display:inline-block;} #view_content_wrap .view_cont_wrap .talk .character_icon img{width:100%; height:100%;} #view_content_wrap .view_cont_wrap .talk .icon_cover{position:absolute; top:0; left:-1px; width:45px; height:45px; z-index:10;} #view_content_wrap .view_cont_wrap .talk .icon_cover img{display:none; width:46px; height:46px;} #view_content_wrap .view_cont_wrap .talk .talk_p{margin:0; max-width:80%; display:inline-block; vertical-align: top; padding-left: 10px;} /* .side_menu_bg .close_panel_btn_box{color:var(--main-ft-color); position: fixed; top:0; left:0; width:100%; z-index:999; border-left:1px solid #ddd; height:60px; background:#E84D7D; display:block; height:60px;}pink 버전 */ .side_menu_bg .close_panel_btn_box{color:var(--main-ft-color); position: fixed; top:0; right:0; width:100%;width:50px; z-index:999;/* border-left:1px solid var(--main-line-color); */background-color:var(--sub-bg-color);height:60px; display:block; height:60px;}/* white 버전 */ [color-theme="light"] .side_menu_bg .close_panel_btn_box{background-color:#404040;} .side_menu_bg .close_panel_btn{width: 45px; height: 45px; position: absolute; right: 5px; margin: auto; background-size: 2px 80%; top: 0; bottom: 0;flex-direction:column;gap:5px 5px;cursor:pointer;} .side_menu_bg .close_panel_btn span{width: 35px; height: 45px; background: url("https://cdn.metoon.co.kr/mimg/icon_viewselect_btn_2_close.png") no-repeat 0 center; background-size: 35px; display: block;cursor:pointer;} /* 뷰어 사이드 170111 */ .not_scroll{ position: fixed; overflow: hidden; width: 100%; height: 100% } .not_scroll #testpage { position: relative; top: 0; } /* 뷰어 댓글 */ #view_content_wrap_btm{width:100%; padding:0px 0 45px; /* float:left; */clear:both;} #view_content_wrap .view_comm_wrap{width:100%; /* padding:20px 0 10px; */padding:20px 0;} #view_content_wrap .view_comm_edit{width:100%; padding: 0 20px;} #view_content_wrap .view_comm_edit h4{font-size:1.2em; padding-bottom:15px;} #view_content_wrap .view_comm_edit form>div{position:relative;} #view_content_wrap .view_comm_edit .nick_name_txt{position:absolute; right:0; left:0; top:0;padding:5px; border:1px solid var(--main-line-color);} #view_content_wrap .view_comm_edit textarea{width:100%; resize:none; box-shadow:none; border-radius:0;padding: 20px 5px 8px; height: 100px !important; border: 1px solid #eee; overflow: overlay;} #view_content_wrap .view_comm_edit .comm_edit_btn{width:100%;} #view_content_wrap .view_comm_edit a:not(.comment_l_btn){display:block; padding:8px 0; font-size:1.1em; text-align:center; background:#E84D7D; color:var(--main-ft-color); text-shadow:none;} .comment_l_btn{display:inline-block; font-size:13px; font-weight:400; color:var(--main-ft-color); height:24px; line-height:25px; background-color:var(--bg-fc-color); border-radius:3px; padding:0 8px; margin-left:5px;} #view_content_wrap .view_comm_edit .view_side_log_btn{background:none; color:#676767; text-align:left;} #view_content_wrap .view_comm_wrap #comm_radio_form{text-align:right; padding-top:10px;} #view_content_wrap .view_comm_wrap #comm_radio_form label{margin-left:3px;border: none; background: none; font-size: 1em;color: #9e9e9e;} #view_content_wrap .view_comm_wrap #comm_radio_form input{margin-left:5px; vertical-align: sub;} #view_content_wrap .view_comm_wrap #comm_radio_form .chkselect { color: #F15584; } #view_content_wrap .view_comm_box{width:100%; margin:10px auto;border-top:1px solid #eee;} #view_content_wrap .view_comm_box>div{width:100%; padding:5px 0;} #view_content_wrap .view_comm_box .comm_box{padding:5px 20px 10px 20px; overflow:hidden;border-bottom:1px solid #eee;} #view_content_wrap .view_comm_box .user_id{color:#2c2c2c; font-weight:700; /* line-height:2; */ font-size:1.1em;display:flex;align-items:center;gap:5px 5px;min-width:0;} #view_content_wrap .view_comm_box .user_id>img{vertical-align: middle; width: 20px;} #view_content_wrap .view_comm_box .user_id span{ font-weight:400; font-size:0.9em;} #view_content_wrap .view_comm_box .user_id .date{color:#676767;margin-left:10px;} #view_content_wrap .view_comm_box .reply_btn{display: inline-block; float:left;} #view_content_wrap .view_comm_box .reply_btn_func{position:relative;display:block;display:flex; padding:3px 10px;border:1px solid var(--main-line-color);background-color:var(--opt-bg-color);color:var(--main-ft-fc-color); font-weight:400; font-size: 0.9em;cursor:pointer;} #view_content_wrap .view_comm_box .reply_btn_func:after{content:"";display:inline-block;width:9px;height:8px;background:url("https://cdn.metoon.co.kr/mimg/ico_add_pg_btn_wh.svg") no-repeat 100% 55%; background-size:100%;align-self:center;margin-left:6px;transition:transform 0.2s;} [color-theme="light"] #view_content_wrap .view_comm_box .reply_btn_func:after{background-image:url("https://cdn.metoon.co.kr/mimg/ico_add_pg_btn_ctlgt.svg?1");} #view_content_wrap .view_comm_box .reply_btn_func.open{border-color:var(--main-ft-fc-color);} #view_content_wrap .view_comm_box .reply_btn_func.open:after{transform:rotate(180deg);} #view_content_wrap .view_comm_box .reply_btn .reply_count{color:var(--bg-fc-color); margin-left:5px;} #view_content_wrap .view_comm_box .recomm_set{display: inline-block; float:right;} #view_content_wrap .view_comm_box .recomm_set .recomm_set_box{padding: 3px 0;} .recomm_set_box.flex_{display:flex;gap:5px 10px;} #view_content_wrap .view_comm_box .recomm_set a{padding:2px 10px;border:1px solid var(--main-line-color);background-color:var(--opt-bg-color);} #view_content_wrap .view_comm_box .recomm_set .recomm_btn_dsg{padding-left: 20px;} #view_content_wrap .view_comm_box .recomm_set .recomm_count{background:url("https://cdn.metoon.co.kr/mimg/icon_re1.svg") no-repeat 0 center; color:var(--bg-fc-color); background-size:11px;} [color-theme="light"] #view_content_wrap .view_comm_box .recomm_set .recomm_count{background-image:url("https://cdn.metoon.co.kr/mimg/icon_re1_strk.svg");} #view_content_wrap .view_comm_box .recomm_set .unrecomm_count{background:url("https://cdn.metoon.co.kr/mimg/icon_unre.svg") no-repeat 0 center; color:#6594d3; background-size:11px;} [color-theme="light"] #view_content_wrap .view_comm_box .recomm_set .unrecomm_count{background-image:url("https://cdn.metoon.co.kr/mimg/icon_unre_strk.svg");} #view_content_wrap .view_comm_box .comm_area{margin:15px 0 20px;} #view_content_wrap .view_comm_box .comm_area p{width:100%;} #view_content_wrap .view_comm_box .nobel_comment_pager{width: 100%; margin: 0px auto 0; padding: 15px 0 20px; float: left;float:none; text-align:center;} #view_content_wrap .view_comm_box .nobel_comment_pager a {color: var(--main-ft-color); padding: 1px 0px 3px; background: var(--sub-bg-color); border: 1px solid var(--main-line-color); margin:0 2px; display:inline-block; width: 19px; font-size: 12px;} #view_content_wrap .view_comm_box .nobel_comment_pager .on {border-color:var(--main-ft-fc-color);background:var(--opt-bg-color);color: var(--main-ft-fc-color);} #view_content_wrap .view_comm_box .recomme_cont{width: 100%; border: none; border-bottom: 1px solid #eee; background: #fff; padding-bottom: 10px;} #view_content_wrap .view_comm_box .recomme_textarea{width:100%; padding:5px 5px 0 5px; float:left; position:relative;} #view_content_wrap .view_comm_box .recomme_textarea textarea{font-size:1em; width:80%; float:left; max-height:35px;border:1px solid #eeeeee; padding:10px; font-family: inherit; resize:none; max-width:744px; height:54px; box-shadow:none; border-radius:0;} #view_content_wrap .view_comm_box .recomme_textarea .comment_btn{display:block;font-size:1em; height:33px;box-sizing: border-box;width:17.5%; text-align:center; float:right; position:absolute; top:5px; bottom:0; right:5px; margin:auto; background: #f15584;padding: 7px 0;border: 1px solid #f15584; color:var(--main-ft-color); font-weight:bold; cursor:pointer; overflow:visible; white-space: nowrap;font-family: inherit;} #view_content_wrap .view_comm_box .view_comm_best{width:100%; background:#fbfbfb;} #view_content_wrap .view_comm_best .user_id .icon_best{color:#f15584; border:1px solid #f15584; border-radius:5px; padding:0 4px;letter-spacing: -1px;margin-right:6px; vertical-align: middle; background:#fff; font-size:0.8em;} #view_content_wrap .recomme_cont>ul{width: 95%; margin-left: 5px; overflow: hidden;} #view_content_wrap .recomme_cont>ul>li{width: 100%; padding: 5px 0; float: left; } #view_content_wrap .recomme_cont .recomm_con_box {padding-left: 20px; overflow: hidden;box-sizing:border-box;background:url("https://cdn.metoon.co.kr/mimg/sp_cbox.png") no-repeat 0 4px;} #view_content_wrap .recomme_cont .comm_area{margin: 0;} #view_content_wrap .view_comm_wrap1 .view_comm_box .recomme_cont{width: 100%; border: none; border: 1px solid var(--main-line-color); border-top:0 none;background: #2C2C2C;background:var(--sub-bg-color); padding-bottom: 10px;} [color-theme="light"] #view_content_wrap .view_comm_wrap1 .view_comm_box .recomme_cont{background-color:#FFFFFF;} #view_content_wrap .view_comm_wrap1 .view_comm_box .recomme_textarea{width:100%; padding:10px 15px 0; float:left; position:relative;} #view_content_wrap .view_comm_wrap1 .view_comm_box .recomme_textarea textarea{font-size:1em; width:100%; float:left; max-height:40px; border:1px solid #4E4E4E;border-color:var(--main-line-color);background-color:#3E3E3E;background-color:var(--opt-bg-color); padding:10px; font-family: inherit;color:var(--main-ft-color); resize:none; max-width:744px; height:54px; box-shadow:none; -webkit-box-shadow:none; -webkit-appearance:none; border-radius:0; padding-right: 65px;} #view_content_wrap .view_comm_wrap1 .view_comm_box .recomme_textarea textarea:focus{border-color:var(--main-ft-fc-color);} #view_content_wrap .view_comm_wrap1 .view_comm_box .recomme_textarea .comment_btn{display:block;font-size:1.1em; height:35px;box-sizing: border-box; width:17.5%; text-align:center; float:right; position:absolute; top:10px; bottom:0; right:15px; margin:auto; background: #404040; padding: 8px 0; border: none; color:var(--main-ft-color); font-weight:normal; cursor:pointer; overflow:visible; white-space: nowrap;font-family: inherit;}/* white 버전 */ #view_content_wrap .view_comm_wrap1 .recomme_cont>ul{display:flex;flex-direction:column;width: 95%;padding-left:20px; margin-left: 5px; overflow: visible;box-sizing:border-box;margin:0 auto;} #view_content_wrap .view_comm_wrap1 .recomme_cont>ul>li{width: 100%; padding: 5px 0; float: left;} #view_content_wrap .view_comm_wrap1 .recomme_cont>ul>li:first-child{margin-top:15px;} #view_content_wrap .view_comm_wrap1 .recomme_cont .recomm_con_box {padding-left: 20px; overflow: visible;box-sizing:border-box; background: url("https://cdn.metoon.co.kr/mimg/sp_cbox.png") no-repeat 0 4px;} #view_content_wrap .view_comm_wrap1 .recomme_cont .recomm_con_line{border-color:var(--main-line-color);margin:4px auto 5px;} #view_content_wrap .view_comm_wrap1 .recomme_cont>ul>li:first-child .recomm_con_line{display:none;} #view_content_wrap .view_comm_wrap1 .recomme_cont .comm_area{margin: 0;} #view_content_wrap_btm .view_comm_wrap{border-top:1px solid var(--main-line-color);width:100%; padding:20px 0;} #view_content_wrap_btm .view_comm_edit{width:100%; padding: 0 20px;} #view_content_wrap_btm .view_comm_edit h4{font-size:1.2em; padding-bottom:5px;} #view_content_wrap_btm .view_comm_edit form>div{position:relative;} #view_content_wrap_btm .view_comm_edit .nick_name_txt{position:absolute; right:0; left:0; top:0;padding:5px; border:1px solid var(--main-line-color);} #view_content_wrap_btm .view_comm_edit textarea{width:100%; resize:none; box-shadow:none; border-radius:0;padding: 20px 5px 8px; height: 100px !important; border: 1px solid var(--main-line-color); overflow: overlay;} #view_content_wrap_btm .view_comm_edit .comm_edit_btn{width:100%;} #view_content_wrap_btm .view_comm_edit a{display:block; padding:8px 0; font-size:1.1em; text-align:center; background:#E84D7D; color:var(--main-ft-color); text-shadow:none;} #view_content_wrap_btm .view_comm_edit .view_side_log_btn{background:none; color:#676767; text-align:left;} #view_content_wrap_btm .view_comm_wrap #comm_radio_form{text-align:right; padding-top:10px;} #view_content_wrap_btm .view_comm_wrap #comm_radio_form label{margin-left:3px;border: none; background: none; font-size: 1em;color: #9e9e9e;} #view_content_wrap_btm .view_comm_wrap #comm_radio_form input{margin-left:5px; vertical-align: sub;} #view_content_wrap_btm .view_comm_wrap #comm_radio_form .chkselect { color: #F15584; } /* #view_content_wrap_btm .view_comm_box{width:100%; margin:10px auto;border-top:1px solid #eee;} #view_content_wrap_btm .view_comm_box>div{width:100%; padding:5px 0;} #view_content_wrap_btm .view_comm_box .comm_box{padding:5px 20px 10px 20px; overflow:hidden;border-bottom:1px solid #eee;} #view_content_wrap_btm .view_comm_box .user_id{color:#2c2c2c; font-weight:700; line-height:2; font-size:1.1em;} #view_content_wrap_btm .view_comm_box .user_id>img{vertical-align: middle; width: 20px;} #view_content_wrap_btm .view_comm_box .user_id span{ font-weight:normal; font-size:0.9em;} #view_content_wrap_btm .view_comm_box .user_id .date{color:#676767;margin-left:10px;} #view_content_wrap_btm .view_comm_box .reply_btn{display: inline-block; float:left;} #view_content_wrap_btm .view_comm_box .reply_btn p{display:block; color:#676767; font-weight:normal; padding-right:15px; background:url("https://cdn.metoon.co.kr/mimg/ico_add_pg_btn_wh.svg") no-repeat 100% 65%; background-size:10px; font-size:0.9em;} #view_content_wrap_btm .view_comm_box .reply_btn .reply_count{color:var(--bg-fc-color); margin-left:5px;} #view_content_wrap_btm .view_comm_box .recomm_set{display: inline-block; float:right;} #view_content_wrap_btm .view_comm_box .recomm_set .recomm_set_box{padding: 3px 0;} #view_content_wrap_btm .view_comm_box .comm_area{margin:15px 0 20px;} #view_content_wrap_btm .view_comm_box .comm_area p{width:100%;} #view_content_wrap_btm .view_comm_box .recomme_cont{width: 100%; border: none; border-bottom: 1px solid #eee; background: #fff; padding-bottom: 10px;} #view_content_wrap_btm .view_comm_box .recomme_textarea{width:100%; padding:5px 5px 0 5px; float:left; position:relative;} #view_content_wrap_btm .view_comm_box .recomme_textarea textarea{font-size:1em; width:80%; float:left; max-height:35px; border:1px solid #eeeeee; padding:10px; font-family: inherit; resize:none; max-width:744px; height:54px; box-shadow:none; border-radius:0;} #view_content_wrap_btm .view_comm_box .recomme_textarea .comment_btn{display:block;font-size:1em; height:33px;box-sizing: border-box; width:17.5%; text-align:center; float:right; position:absolute; top:5px; bottom:0; right:5px; margin:auto; background: #404040; padding: 7px 0; border: 1px solid #404040; color:var(--main-ft-color); font-weight:bold; cursor:pointer; overflow:visible; white-space: nowrap;font-family: inherit;} #view_content_wrap_btm .view_comm_box .view_comm_best{width:100%; background:#fbfbfb;} #view_content_wrap_btm .view_comm_best .user_id .icon_best{color:#f15584; border:1px solid #f15584; border-radius:5px; padding:0 4px;letter-spacing: -1px; margin-right:6px; vertical-align: middle; background:#fff; font-size:0.8em;} #view_content_wrap_btm .recomme_cont>ul{width: 95%; margin-left: 5px; overflow: hidden;} #view_content_wrap_btm .recomme_cont>ul>li{width: 100%; padding: 5px 0; float: left; background: url("https://cdn.metoon.co.kr/mimg/sp_cbox.png") no-repeat 0 14px;} #view_content_wrap_btm .recomme_cont .recomm_con_box {margin-left: 20px; overflow: hidden;} #view_content_wrap_btm .recomme_cont .comm_area{margin: 0;} 뷰어 댓글 */ /* 뷰어 댓글 리뉴얼 #view_content_wrap_btm{position: relative; z-index: 3; width: 100%; padding: 0px 0 50px; float: left; } #view_content_wrap_btm .view_comm_wrap1{width: 100%; padding: 20px 0; } #view_content_wrap_btm .view_comm_wrap1 .view_comm_edit{width: 100%; padding: 0 10px;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_edit h4{font-size: 1.2em; padding-bottom: 15px;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_edit h4 span{font-weight:normal; font-size:13px; color: #676767; vertical-align: text-bottom; letter-spacing: -0.025em; display:block; margin-top: 2px;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_edit form>div{position: relative;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_edit a{display: block; padding: 8px 0; font-size: 1.1em; text-align: center; color: #fff; text-shadow: none;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_edit .view_side_log_btn{background: none; color: #676767; text-align: left; padding: 0; border: 1px solid var(--main-line-color);} #view_content_wrap_btm .view_comm_wrap1 .view_comm_edit .nick_name_txt{letter-spacing: -0.05em; position: static; right: 0; left: 0; top: 0; padding: 8px 5px 7px; padding-right: 65px; border: none; } #view_content_wrap_btm .view_comm_wrap1 .view_comm_edit .comm_edit_btn{width: 60px; position: absolute; right: 0; top: 0;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_edit a{display: block; padding: 8px 0; font-size: 1.1em; text-align: center; color: #fff; text-shadow: none;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_edit textarea{width: 100%; resize: none; box-shadow: none; border-radius: 0; padding: 5px; height: 100px !important; border: 1px solid var(--main-line-color); border-top:none; overflow: overlay; margin-top: -1px;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box1{width: 100%; margin: 10px auto 5px; border-top: none;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box1 .view_comm_best{width: 100%; background: #fff;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box1 .comm_box{padding: 5px 0 10px; overflow: hidden; border-bottom: 1px solid var(--main-line-color);} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box1 .user_id{color: #2c2c2c; font-weight: normal; font-size: 14px; letter-spacing: -0.05em; line-height: 2;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box1 .user_id>img{width: 18px;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box1 .user_id span{font-weight: normal; font-size: 0.9em; vertical-align:middle;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box1 .user_id .date{color: #676767; margin-left: 5px;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box1 .comm_area{margin: 5px auto;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box1 .comm_area p{width: 100%; letter-spacing: -0.05em;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box1 .comm_area .best_comm{font-size: 11px; padding: 1px 4px; border-radius: 5px; margin-right: 5px;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box1 .recomm_set{display: inline-block; float: right; margin-top:-5px;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box1 .recomm_set .recomm_set_box{padding: 3px 0;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box .recomme_textarea{width:100%; padding:10px 15px 0; float:left; position:relative;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box .recomme_textarea textarea{font-size:1em; width:100%; float:left; max-height:35px; border:1px solid #4E4E4E; padding:10px; font-family: inherit; resize:none; max-width:744px; height:54px; box-shadow:none; -webkit-box-shadow:none; -webkit-appearance:none; border-radius:0; padding-right: 60px;} #view_content_wrap_btm .view_comm_wrap1 .view_comm_box .recomme_textarea .comment_btn{display:block;font-size:1em; height:35px;box-sizing: border-box; width:17.5%; text-align:center; float:right; position:absolute; top:10px; bottom:0; right:15px; margin:auto; background: #404040; padding: 8px 0; border: none; color:var(--main-ft-color); font-weight:normal; cursor:pointer; overflow:visible; white-space: nowrap;font-family: inherit;} #view_content_wrap_btm .view_comm_wrap1 .recomme_cont>ul{width: 95%; margin-left: 5px; overflow: hidden;} #view_content_wrap_btm .view_comm_wrap1 .recomme_cont>ul>li{width: 100%; padding: 5px 0; float: left; background: url("https://cdn.metoon.co.kr/mimg/sp_cbox.png") no-repeat 0 14px;} #view_content_wrap_btm .view_comm_wrap1 .recomme_cont .recomm_con_box{margin-left: 20px; overflow: hidden;} #view_content_wrap_btm .view_comm_wrap1 .recomme_cont .comm_area{margin: 0;} 뷰어 댓글 리뉴얼 */ /* 뷰어 캐릭터 아이콘 */ #view_content_wrap .character_icon{width:50px; height:50px; position:relative; display:inline-block; top:0;} #view_content_wrap .character_icon img{width:100%;} #view_content_wrap .character_icon .icon_cover{display:block !important;} #view_content_wrap .character_icon .icon_cover_white{position:absolute; top:0; left:0;width:100%; height:100%; background:url("https://cdn.metoon.co.kr/mimg/icon_cover_white.png") no-repeat center;background-size: 100%;} #view_content_wrap .character_icon .icon_cover_black{display:none; position:absolute; top:0; left:0;width:100%; height:100%; background:url("https://cdn.metoon.co.kr/mimg/icon_cover_black.png") no-repeat center;background-size: 100%;} #view_content_wrap .character_icon .icon_cover_gray{display:none; position:absolute; top:0; left:0;width:100%; height:100%; background:url("https://cdn.metoon.co.kr/mimg/icon_cover_gray.png") no-repeat center;background-size: 100%;} #view_content_wrap .character_icon .icon_cover_beige{display:none; position:absolute; top:0; left:0;width:100%; height:100%; background:url("https://cdn.metoon.co.kr/mimg/icon_cover_beige.png") no-repeat center;background-size: 100%;} #view_content_wrap .view_cont_wrap .character_p{width:61%; padding-left:4%; margin-top: -35px;} #view_content_wrap .view_cont_wrap .character_p_g{width:61%; padding-left:4%; margin-top: -35px;} /* 말풍선 */ #view_content_wrap .view_cont_wrap .character_p {display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 40px; -webkit-margin-end: 40px;} #view_content_wrap .view_cont_wrap .character_p_g {display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 40px; -webkit-margin-end: 40px;} #view_content_wrap .view_cont_wrap .character_p:before {position: absolute; top: -60px; left: 0; height: 36px; display: block;} #view_content_wrap .view_cont_wrap .character_p_g:before {position: absolute; top: -60px; left: 0; height: 36px; display: block;} #view_content_wrap .view_cont_wrap .character_p{position: relative; width: initial; max-width: 70%; margin-top: -35px; left: 8%; padding: 15px; color: #333; background: #eee; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} #view_content_wrap .view_cont_wrap .character_p:after {content: ""; position: absolute; top: 15px; left: -15px; border: 15px solid transparent; border-top-color: #eee; display: block; width: 0;} #view_content_wrap .view_cont_wrap .character_p_g{position: relative; width: initial; max-width: 70%; margin-top: -35px; left: 8%; padding: 15px; color: #333; background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} #view_content_wrap .view_cont_wrap .character_p_g:after {content: ""; position: absolute; top: 15px; left: -15px; border: 15px solid transparent; border-top-color:var(--main-ft-color); display: block; width: 0;} /* 말풍선 */ /* 뷰어 다음화보기 버튼 */ .view_btn_group{text-align:center;margin:30px auto;} .view_btn_group .inner{display:inline-block;vertical-align:top;} #nxt_btn, .view_btn_group .view_con_btn{display:block; margin:30px auto; color:var(--main-ft-fc-color); background:var(--opt-bg-color); border:1px solid var(--main-ft-fc-color); padding:12px 10px; width:20%; min-width:100px; text-align:center; font-weight:500; font-size:15px !important; font-family: 'Noto Sans KR', sans-serif !important;}/* white 버전 */ .view_btn_group .view_con_btn{float:left;position:relative;} #nxt_btn.view_con_btn, .view_btn_group .view_con_btn{margin:0;} .view_btn_group .view_con_btn + .view_con_btn{margin-left:20px;} .view_btn_group .bonus_bal{position:absolute;bottom:100%;right:-20px;display:inline-block;padding:0 10px;height:20px;line-height:20px;border-radius:3px;background-color:#003567;background-color:var(--main-ft-fc-color);font-size:11px;font-weight:700;color:var(--main-bg-color);margin-bottom:-8px;cursor:pointer;} .view_btn_group .bonus_bal:before{content:"";display:inline-block;position:absolute;top:0;left:-7px;border-right:7px solid #001325;border-right-color:var(--main-ft-fc-color);border-top:9px solid transparent;margin-top:3px;} /* 뷰어 다음화보기 버튼 */ /* 뷰어 사이드리스트*/ #view_sidelist_wrap .log_txt{display:block;width:100%; font-size:1.1em; padding:14px 0 15px; font-weight:normal;color:#676767; background:url("https://cdn.metoon.co.kr/mimg/login_title_img.png") no-repeat 10px center; margin:0;} #view_sidelist_wrap .ui-field-contain{padding-bottom:22px;} #view_sidelist_wrap .log_form{width:100%;padding-bottom:23px; border-bottom:1px solid #ddd; overflow:hidden;} #view_sidelist_wrap .log_form .userTxt{width:100%; background:#eee; border:1px solid #e8e8e8; line-height:2; margin-bottom:5px; font-size:1.2em; border-radius:5px; padding: 5px;} #view_sidelist_wrap .log_form .ui-input-text{margin:0; border:none; background:none; text-shadow:none;} #view_sidelist_wrap .log_form .login_btn{ display:block; width:100%; padding:9px 0 10px; background:#f74a7d; border:1px solid #dd275d; margin-top:20px; font-size:1.3em; font-weight:normal; color:var(--main-ft-color); margin: 10px auto 5px; border-radius:3px; text-align:center; box-sizing: border-box;} #view_sidelist_wrap .log_form .ui-input-text #l_userPass{margin-bottom:10px;} #view_sidelist_wrap label{border:none; background:none; font-size: 0.9em; letter-spacing: -0.05em; overflow: visible; margin-top: -1px;} #view_sidelist_wrap .check_box{width:12px;box-sizing: border-box;margin-left: 1px;vertical-align: text-top;display: inline-block; margin:0;} #view_sidelist_wrap .check_input{margin:0px; font-size:0.85em; letter-spacing:-0.025em; display: inline-block; font-weight:bold; padding:1% 0; border:none; background:none; text-shadow:none;} #view_sidelist_wrap input{top:5px; bottom:0; margin:auto;} #view_sidelist_wrap #login_check{margin-left:1%;} #view_sidelist_wrap label:after{display:none;} #view_sidelist_wrap .find_btn{width: 40%; float:right;margin-top:0px;} #view_sidelist_wrap .find_btn li{float:left; width:100%; border:none;} #view_sidelist_wrap .find_btn li a{display:block; background:#929292; border:1px solid #838383; min-width:80px; padding:3px 1px 1px; text-align:center; color:var(--main-ft-color); font-weight:normal; text-shadow:none; margin-top:1px; margin-right: 5%; border-radius:3px; float:right;} #view_sidelist_wrap .sns_txt{font-weight:bold; color:#747474; font-size:1.0em; display:block; width:100%;margin:10px 0;} #view_sidelist_wrap .sns_login{width:100%; float:left; text-align: center; padding-bottom:10px; margin-top:0;} #view_sidelist_wrap .sns_login li{width:30%; margin:5px 0; display:inline-block; padding:0; float:left;} #view_sidelist_wrap .sns_login .fb_btn{margin:5px 3%;} #view_sidelist_wrap .sns_login li a{display:block; padding:0; width:100%; font-weight:bold; font-size:1.3em; text-indent: -999999999em; overflow:hidden; height:45px; color:var(--main-ft-color);} #view_sidelist_wrap .naver_btn a{background:url("https://cdn.metoon.co.kr/mimg/naver_logo.png") no-repeat center, #1ec800; border:1px solid #1cb900;} #view_sidelist_wrap .fb_btn a{background:url("https://cdn.metoon.co.kr/mimg/fb_logo.png") no-repeat center, #395a9c; border:1px solid #2c4b87;} #view_sidelist_wrap .google_btn a{background:url("https://cdn.metoon.co.kr/mimg/google_logo.png") no-repeat center, #db4431; border:1px solid #d03c2a;} #view_sidelist_wrap .sns_login li a span{display:block; width: 70%; float:right; text-align:left; line-height:2.4;} /* 뷰어 사이드리스트*/ /* 뷰어 풋터 */ #view_footer{ display: block; position: fixed; bottom: 0; left:0; right:0; width: 100%; overflow: hidden; z-index: 999; } #view_footer.btmnone{bottom: -100px;transition:.5s;} #view_footer .view_footer_navbar{border-top:1px solid var(--main-line-color); text-align:center; background:var(--sub-bg-color);} #view_footer .view_footer_navbar ul{display:-webkit-box;display:-webkit-flex;display:flex;width:100%;max-width:1200px; overflow:hidden;margin:0 auto;} #view_footer .view_footer_navbar li{-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1; border-bottom:none;/* width:25%; float: left; */display:inline-block;box-sizing:border-box;} #view_footer .view_footer_navbar a{min-width:34px;height:45px; color:var(--main-ft-color); font-size:0.9em; border-color:var(--main-line-color); box-shadow:none; text-shadow:none; display:block; border-right:1px solid var(--main-line-color);text-align:center;box-sizing:border-box;} #view_footer .view_footer_navbar .up_btn a{background:url("https://cdn.metoon.co.kr/mimg/page_up_btn.svg") no-repeat center; text-indent:-99999999em; background-size:16px;} [color-theme="light"] #view_footer .view_footer_navbar .up_btn a{background-image:url("https://cdn.metoon.co.kr/mimg/page_up_btn_ctlgt.svg?1");} #view_footer .view_footer_navbar .down_btn a{background:url("https://cdn.metoon.co.kr/mimg/page_down_btn.svg") no-repeat center; text-indent:-99999999em; background-size:16px;} [color-theme="light"] #view_footer .view_footer_navbar .down_btn a{background-image:url("https://cdn.metoon.co.kr/mimg/page_down_btn_ctlgt.svg?1");} #view_footer .view_footer_navbar .prev_btn a, #view_footer .view_footer_navbar .next_btn a{font-size:1em;} #view_footer .view_footer_navbar .prev_btn a span{display:inline-block;background:url("https://cdn.metoon.co.kr/mimg/next_view_prev.svg") no-repeat 0 center; padding-left:24px; background-size:8px;line-height:45px;} #view_footer .view_footer_navbar .next_btn a span{display:inline-block;background:url("https://cdn.metoon.co.kr/mimg/next_view_next.svg") no-repeat calc(100% - 1px) center; padding-right:24px; background-size:8px;line-height:45px;} [color-theme="light"] #view_footer .view_footer_navbar .prev_btn a span{background-image:url("https://cdn.metoon.co.kr/mimg/next_view_prev_ctlgt.svg");} [color-theme="light"] #view_footer .view_footer_navbar .next_btn a span{background-image:url("https://cdn.metoon.co.kr/mimg/next_view_next_ctlgt.svg");} #view_footer .view_footer_navbar .src_control_toggle a{display:table-cell;text-align:center;vertical-align:middle;border:0 none;} #view_footer .view_footer_navbar .view_comics_btn a{display:table;width:100%;padding:0 5px;} #view_footer .view_footer_navbar .view_comics_btn span{display:table-cell;vertical-align:middle;} #mm-blocker .close_panel_btn_box{color:var(--main-ft-color);position: fixed;top:0; right:0; width:100%; height:60px; background:#E84D7D;} #mm-blocker .close_panel_btn{width: 45px; height: 45px; background: url("https://cdn.metoon.co.kr/mimg/view_head_line.png") no-repeat 100% 53%;position: absolute; left: 5px; margin: auto; background-size: 2px 80%; top: 0; bottom: 0;} #mm-blocker .close_panel_btn p{width: 35px; height: 45px; background: url("https://cdn.metoon.co.kr/mimg/icon_viewselect_btn_2_close.png") no-repeat 0 center; background-size: 35px; display: block;} /* 뷰어 풋터 */ @media all and (min-width:320px) and (max-width:360px){ #view_header .headTop .view_detail_list_form p{font-size:1.05em;} #view_header .headTop .view_detail_list_form>div{left: 50px;} #view_content_wrap .view_comm_best .user_id .icon_best{margin-right: 4px; font-size: 0.7em;} #view_content_wrap .view_cont_wrap .character_p{left:10%;} #view_content_wrap .view_cont_wrap .character_p_g{left:10%;} } @media all and (min-width:435px) and (max-width:600px){ #view_content_wrap .view_cont_wrap{padding:90px 35px;} #view_content_wrap .view_comm_edit a{padding:10px 0;} } @media all and (min-width:531px) and (max-width:600px){ #view_content_wrap .view_cont_wrap .character_p{max-width: 80%; left: 6%;} #view_content_wrap .view_cont_wrap .character_p_g{max-width: 80%; left: 6%;} } @media all and (min-width:601px) and (max-width:810px){ #view_content_wrap .view_cont_wrap{padding:100px 90px;} #view_header .headTop .view_detail_list_form #view_detail_list-button{width:100%; max-width: none; } #view_content_wrap .view_comm_edit a{padding:10px 0;} #view_content_wrap .view_cont_wrap .character_p{max-width: 80%; left: 5%;} #view_content_wrap .view_cont_wrap .character_p_g{max-width: 80%; left: 5%;} } @media all and (min-width:700px) and (max-width:810px){ #view_content_wrap .view_comm_edit textarea{min-height: 90px;} #view_footer .view_footer_navbar a{font-size:1.1em;} #view_sidencont_wrap .select_title{font-size:1.3em; padding:30px 0;} #view_sidelist_wrap ul{margin: 60px 0 0; font-size:1.1em;} } @media all and (min-width:900px){ #view_content_wrap .view_cont_wrap .character_p{left: 5%;} #view_content_wrap .view_cont_wrap .character_p_g{left: 5%;} } /* 출판뷰어 */ #pub_view{width:100%; height:100%;} #pub_view:after{display:block; content:""; clear:both;} #pub_view .guide-screen{position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background: rgba(0,0,0,0.8); text-align: center; vertical-align: middle; z-index: 100;} #pub_view .guide-screen img.picGuide{position: absolute; left: 0; top:0%; bottom:0; right:0; width:80%; margin:auto; max-width:400px;} #pub_view .ctrlToggle{width:20%; position:fixed; top:0; right:0; left:0; bottom:0; margin:auto; z-index:12; height:100%;} #pub_view .view_t{width: 100%; font-size: 13px; text-align: left; color: #F3F3F3; position: fixed; top: 0; left: 0; z-index: 30; text-align:center; border-bottom: 1px solid rgba(74, 74, 74, 0.5);} #pub_view .view_top{width: 100%; position: relative; height: 60px; background:rgba(0,0,0,0.8);} #pub_view .view_top .view_detail_list_form{height:100%; position:relative; display:inline-block; width:70%; letter-spacing:-0.025em;} #pub_view .view_top .view_detail_list_form>div{position:absolute; top:0; left:50px; bottom:0; margin:auto; height:50px; width: calc(100% - 148px);} #pub_view .view_top .view_detail_list_form p{line-height: 2.8; text-shadow:none; text-align:left; color:var(--main-ft-color); padding-top: 8px; font-weight:normal; text-indent: 0; font-size:1em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; letter-spacing:-0.025em;} #pub_view .view_top .view_detail_list_form .ui-select{margin:0;} #pub_view .view_top .view_detail_list_form #view_detail_list-button{background:none; border:none; box-shadow:none; text-shadow:none; color:var(--main-ft-color); padding: 5px; font-size:1.05em; max-width: 250px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-indent: 23px; margin-left:5px; text-align:left;} #pub_view .view_top .view_detail_list_form .list_back_btn{ background:url("https://cdn.metoon.co.kr/mimg/hd_back_01.png") no-repeat center; background-size:21px; text-indent:-99999999em; padding-right: 6px; width: 35px; height:45px; overflow: hidden; display: block; margin: auto; position: absolute; left: 5px; top: 0; bottom: 0;} #pub_view .view_top .headTop{height:100%;} #pub_view .view_top .headTop>div{position: inherit;} #pub_view .view_top .headTop .menu_btn_box{display:inline-block;float:right; height:100%; text-align:center;} #pub_view .view_top .headTop .menu_btn_box div{margin-right:10px; float:left;} #pub_view .view_top .headTop .menu_btn{text-align:center; display:inline-block; width:32px; height:100%; position:relative;} #pub_view .view_top .headTop .menu_btn a{display:block; width:100%; height:57px; top:0; bottom:0; position:absolute; margin:auto; background:url("https://cdn.metoon.co.kr/mimg/icon_viewmenu.png") no-repeat center; text-indent:-9999999em; overflow:hidden; background-size:32px;} #pub_view .view_top .headTop .home_btn, #pub_view .view_top .headTop .gall_ad_btn{display:inline-block; width:19px; height:100%; position:relative;} #pub_view .view_top .headTop .gall_ad_btn{width:22px;} #pub_view .view_top .headTop .home_btn a, #pub_view .view_top .headTop .gall_ad_btn a{display:block; width:100%; height:57px; top:0; bottom:0; position:absolute; margin:auto; background:url("https://cdn.metoon.co.kr/mimg/ic_view_home.png") no-repeat center; text-indent:-9999999em; overflow:hidden; background-size:19px;} #pub_view .view_top .headTop .gall_ad_btn a{background:url("https://cdn.metoon.co.kr/mimg/ic_view_adult.png?1") no-repeat 0 44%;background-size:22px;} #pub_view .view_top .headTop .list_btn{display:inline-block; text-align:center; width:19px; height:100%; position:relative;} #pub_view .view_top .headTop .list_btn a{display:block; width:100%; height:57px; top:0; bottom:0; position:absolute; margin:auto; background:url("https://cdn.metoon.co.kr/mimg/ic_view_menu.png") no-repeat center; text-indent:-9999999em; overflow:hidden; background-size:19px;} #pub_view .view_t .pub_view_type{padding:8px; background:rgba(211,43,43,0.7); font-weight:bold; color:var(--main-ft-color); border-radius:5px; letter-spacing: -0.025em; line-height:normal; line-height: normal; position: absolute; left: 0; right: 0; margin: 5px auto; top: 100%; width: 170px;} #pub_view .view_t .pub_view_type_l span{background:url("https://cdn.metoon.co.kr/mimg/pub_view_type_l.png") no-repeat 0 center; background-size:15px; padding-left:25px;} #pub_view .view_t .pub_view_type_r span{background:url("https://cdn.metoon.co.kr/mimg/pub_view_type_r.png") no-repeat 100% center; background-size:15px; padding-right:25px;} #pub_view .view{width: 100%; background-color: #fff; overflow-x: hidden;} #pub_view .view_nav_area{height: 50px;height:auto; position: fixed; bottom: 0px !important; left: 0; width: 100%; z-index: 99; border-top: 1px solid rgba(74, 74, 74, 0.5);} #pub_view .ctrl_nav_inner{height: 50px; width: 100%; background: rgba(0,0,0,0.8); overflow: hidden; border-bottom: 1px solid #dbd9d9;} #pub_view .ctrl_nav_inner li{float: left; text-align: center; width: 20%; background:url("https://cdn.metoon.co.kr/mimg/pub_view_head_line.png") no-repeat 0 center;} #pub_view .ctrl_nav_inner li a{font-size: 0.9em; font-weight:500; color: #fff; display: block; width: 100%; padding: 5px 0 0px; letter-spacing: -0.025em;} #pub_view .ctrl_nav_inner li span{display: block; width: 100%; height: 20px; margin: 0px auto 5px;} #pub_view .ctrl_nav_inner .btn_first span{ background: url("https://cdn.metoon.co.kr/mimg/pub_btn_first.png") no-repeat center; background-size:15px;} #pub_view .ctrl_nav_inner .btn_left span{ background: url("https://cdn.metoon.co.kr/mimg/pub_btn_left.png") no-repeat center; background-size:18px;} #pub_view .ctrl_nav_inner .btn_right span{ background: url("https://cdn.metoon.co.kr/mimg/pub_btn_right.png") no-repeat center; background-size:18px;} #pub_view .ctrl_nav_inner .original_view span{ background: url("https://cdn.metoon.co.kr/mimg/pub_btn_original.png") no-repeat center; background-size:15px;} #pub_view .ctrl_nav_inner .btn_all span{ background: url("https://cdn.metoon.co.kr/mimg/pub_btn_all.png") no-repeat center; background-size:15px;} #pub_view .side_select_title{height: 61px; padding: 0 0px 0; top: 0; background: rgba(0,0,0,0.8); color: #fff; position: fixed; z-index: 999; box-sizing: border-box; font-size: 1.1em; font-weight: normal; letter-spacing: -0.025em; width: 260px;} #pub_view .side_menu_bg .close_panel_btn_box{color: #fff; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; border-left: 1px solid #ddd; height: 61px; background:#333; display: block;} #pub_view .fotorama .fotorama__loaded--img>img{height: auto !important; bottom: 0; margin: auto; max-height: 100% !important; max-width: 700px !important;} @media all and (min-width:700px){ #pub_view .fotorama .fotorama__loaded--img>img{margin:0;} } @media all and (min-width:320px) and (max-width:350px){ #pub_view .guide-screen img.picGuide{width:75%;} } @media all and (orientation:landscape){ #pub_view .fotorama .fotorama__loaded--img>img{margin:0;} } /* 출판뷰어 */ /* 뷰어 */ /* 서브 s소설 전체 */ #content_wrap #sub_s_nobel{padding-top:2px;} #sub_s_nobel .s_content{width:100%; overflow:hidden;} #sub_s_nobel .s_nobel_cont .all_content{overflow:hidden; margin-bottom:10px;} #sub_s_nobel .s_nobel_cont .all_content li{padding: 5px 0 0; float: left; width: 50%;} #sub_s_nobel .s_nobel_cont .all_content li div{display: block; width: 96%; position: relative; overflow: hidden; border-radius: 6px; padding: 0; margin: 0 auto; height: 200px; background: #fff; border-width: thin; color: #333; border: 1px solid #DDD; font-size: 1em; letter-spacing: -0.025em;} #sub_s_nobel .s_nobel_cont .all_content li div a{display: block; width: 85%; left: 0; top: 0; position: absolute; right: 0; margin: auto; height: 100%; z-index: 99;} #sub_s_nobel .s_nobel_cont .all_content li img{width: 100%; max-width: 101%; max-height: none; display:block;} #sub_s_nobel .s_nobel_cont .all_content li .novel_img{position:absolute; top:0; left:0; right:0;} #sub_s_nobel .s_nobel_cont .all_content li p{width: 100%; position: absolute; bottom: 0; background: #fff; margin: 0; min-height:50px; z-index: 9;} #sub_s_nobel .s_nobel_cont .all_content li .hits{ position: absolute; right: 2px; top: -20px; color: #E84D7D; background: rgba(255, 255, 255, 0.75); padding: 2px 2px 0; border-radius: 3px; border: 1px solid #E84D7D; box-sizing: border-box; margin-top: 0;} #sub_s_nobel .s_nobel_cont .all_content li span{display: block; font-size: 0.9em; margin-top: 10px; padding: 0 5px; line-height: 1.3;} #sub_s_nobel .s_nobel_cont .all_content li .hits .heart{background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png") no-repeat 0 25%; background-size: 13px 11px; padding-left: 17px; margin-top: 0;} #sub_s_nobel .s_nobel_cont .all_content li .title{font-weight: bold; font-size: 1em; margin: 5px 0;text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_s_nobel .s_nobel_cont .all_content li .writer{margin: 0 0 5px; display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_s_nobel .s_nobel_cont .all_content li .img_box{position: relative; overflow:hidden; width:100%; border:none; height:inherit;} #sub_s_nobel .s_nobel_cont .all_content li .img_box .img_backbox{position: absolute; top: 0; left: 0; right: 0; z-index: 9; height: 80%; background: url("https://cdn.metoon.co.kr/mimg/img_back_sm4.png") repeat-x 100% 100%; background-size: 100% 100%;} #sub_s_nobel .s_nobel_cont .all_content li .hits{color:#f52b2b; border: 1px solid #f52b2b;} #sub_s_nobel .s_nobel_cont .all_content li .hits .heart{color:#f52b2b; background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0 25%; background-size: 13px 11px;} @media all and (min-width:320px) and (max-width:350px){ #sub_s_nobel .s_nobel_cont .all_content li .img_box{height:initial;} } @media all and (min-width:320px) and (max-width:360px){ #sub_s_nobel .s_nobel_cont .all_content li div{height: 170px; font-size:1em;} #sub_s_nobel .s_nobel_cont .all_content li .title{font-size:1em;} #sub_s_nobel .s_nobel_cont .all_content li .img_box .img_backbox{height:75%;} } @media all and (min-width:435px) and (max-width:600px){ #sub_s_nobel .s_nobel_cont .all_content li div{height: 240px; font-size:1.1em;} #sub_s_nobel .s_nobel_cont .all_content li p{min-height:55px;} } @media all and (min-width:535px) and (max-width:600px){ #sub_s_nobel .s_content{width:98%; margin:0 auto;} } @media (min-width: 750px){ #sub_s_nobel .s_nobel_cont .all_content li{width:33%;} #sub_s_nobel .s_nobel_cont .all_content li div{height:245px;} #sub_s_nobel .s_nobel_cont .all_content li .img_box .img_backbox{height:77%;} #sub_s_nobel .s_nobel_cont .all_content li p{min-height:55px;} #sub_s_nobel .s_nobel_cont .all_content li .title{margin:8px 0;} } @media all and (min-width:601px) and (max-width:810px){ #sub_s_nobel .s_nobel_cont .all_content li div{height: 245px; font-size:1.1em;} #sub_s_nobel .s_nobel_cont .all_content li p{min-height:60px;} #sub_s_nobel .s_nobel_cont .all_content li .title{margin:8px 0;} #sub_s_nobel .s_content{width:98%; margin:0 auto;} } @media (min-width: 800px){ #sub_s_nobel .s_nobel_cont .all_content li div{height:230px;} } @media all and (min-width:1251px){ #sub_s_nobel .s_nobel_cont .all_content li{width:24%; margin:5px 0.5%;} #sub_s_nobel .s_nobel_cont .all_content li div{height:280px;} } /* 서브 s소설 전체 */ /* 서브 s소설 */ #s_nobel_sm_slide .s_nobel_sm_swiper{margin-left:2%;} #s_nobel_sm_slide li a{display:block; width:100%;} #s_nobel_sm_slide li a img{width:100%; display:block;} #s_nobel_sm_slide li .swiper_box{position:relative;} #s_nobel_sm_slide li .swiper_box .txt_box{position:absolute; bottom:0; left:0; right:0; margin:auto; text-align:center; background: rgba(0,0,0,.35);} #s_nobel_sm_slide li .swiper_box .txt_box p{color:var(--main-ft-color); padding:3px 0; font-size:1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_s_nobel #s_nobel_sm_slide{max-width:370px; margin:0 auto 5px;} #sub_s_nobel #s_nobel_sm_slide li{overflow:hidden; max-width:27%; margin-right:10px;} /* 변경전 */#s_nobel_tab_wrap{width: 96%; position: relative; box-sizing: content-box; margin: 0 auto; border-radius: 5px; overflow: hidden; border: 1px solid #ddd; font-size: 0.95em; font-weight: normal;} #s_nobel_tab_wrap ul{width: 100%; background: #fff; box-sizing: content-box; } #s_nobel_tab_wrap li{float:left; width:25%; text-align:center; } #s_nobel_tab_wrap .list_li5 li{width:20%;} #s_nobel_tab_wrap .list_li3 li{width:33.33%;} #s_nobel_tab_wrap li a{padding:9px 0 7px; border-bottom:2px solid #fff; display:block; font-size:1.15em; font-weight:normal; letter-spacing:-0.025em; background:#fff; width:100%; box-sizing:border-box; border-right:1px solid #f1f1f1; color:#9e9e9e;}/* 변경전 */ /* 변경후 */#s_nobel_tab_wrap.s_nobel_tab1{width: 100%; position: relative; box-sizing: content-box; margin: 0 auto 1px; border-radius: 0px; overflow: hidden; border:none; border-bottom: 1px solid #ddd; font-size: 1em; font-weight: normal;} #s_nobel_tab_wrap.s_nobel_tab1 ul{width: 100%; background: #fff; box-sizing: content-box; } #s_nobel_tab_wrap.s_nobel_tab1 li{float:left; width:25%; text-align:center; } #s_nobel_tab_wrap.s_nobel_tab1 .list_li5 li{width:20%;} #s_nobel_tab_wrap.s_nobel_tab1 .list_li3 li{width:33.33%;} #s_nobel_tab_wrap.s_nobel_tab1 .list_li4 li{width:25%;} #s_nobel_tab_wrap.s_nobel_tab1 .list_li10 li{width:25%;} #s_nobel_tab_wrap.s_nobel_tab1 li a{padding:10px 0 6px; border-bottom:2px solid #fff; display:block; font-size:15px; font-weight:normal; letter-spacing:-1px; background:#fff; width:100%; box-sizing:border-box; border-right:1px solid #f1f1f1; border-right:none; color:#4e4e4e;}/* 변경후 */ #s_nobel_tab_wrap li a.on{color:var(--bg-fc-color); border-bottom:2px solid var(--bg-fc-color);} #s_nobel_tab_wrap li:last-child a{border-right:none;} /* 정렬순서 170223 */ #sub_s_nobel .s_nobel_radio{width: 96%; overflow: hidden; margin: 6px auto 5px; padding:0;} #sub_s_nobel .s_nobel_radio fieldset{display:inline-block; text-align:right; padding:0;} #sub_s_nobel .s_nobel_radio select{border:1px solid #ddd; padding:2px 3px; padding-right:15px; font-size:13px; border-radius:3px; height:25px; line-height: normal; overflow:hidden; background:url("https://cdn.metoon.co.kr/mimg/select_arrow2.png") no-repeat 92% center,#fff; background-size: 9px; -webkit-appearance:none; color:#676767;}/* white 버전 */ /* 정렬순서 170223 */ #sub_s_nobel .s_nobel_cont {width:100%; margin:0 auto 10px;} /* s소설 컨텐츠 17.02.23 */ #sub_s_nobel .s_nobel_cont .s_content li{padding:0px 0 10px; } #sub_s_nobel .s_nobel_cont .s_content li div{display: block; width:96%; position: relative; overflow: hidden; padding:0; margin:0 auto; /* height:145px; */ background:#fff; border-width:thin; color:#333; border:1px solid #ddd; font-size:1.05em; letter-spacing:-0.025em;} #sub_s_nobel .s_nobel_cont .s_content li div a{display: block; height: 100%; overflow:hidden; /* position: absolute; */margin:auto; left:0; right:0; width:100%; z-index:99;} #sub_s_nobel .s_nobel_cont .s_content li .s_img_box{margin:0; float:left;max-width:45%; max-height: none; position:relative; border-radius:0; border:0; box-sizing:border-box; border-right:1px solid #ddd;} #sub_s_nobel .s_nobel_cont .s_content li img{width:100%; display:block;} #sub_s_nobel .s_nobel_cont .s_content li .novel_img{position:absolute; top:0; left:0; right:0; bottom: 0; border: none; border-radius: 0;} #sub_s_nobel .s_nobel_cont .s_content li .blurcover{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #sub_s_nobel .s_nobel_cont .s_content li .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center !important;} #sub_s_nobel .s_nobel_cont .s_content li .s_img_box .content_tag{width:auto; background:none; position:absolute; right:auto; top:auto; bottom:5px; left:5px; z-index:101; padding:0;} #sub_s_nobel .s_nobel_cont .s_content li .s_img_box .content_tag span{display:block; float: left; width:auto; z-index:101; background:#fff; border-radius:3px; font-size:12px; padding:1px 2px 0px; line-height: 1.3; letter-spacing:-0.05em; margin-right:3px;} #sub_s_nobel .s_nobel_cont .s_content li p{padding-top: 5px; font-size:1em; width: 55%; float:right; letter-spacing:-0.025em;} #sub_s_nobel .s_nobel_cont .s_content li span{display:block; white-space: normal; padding:0px 10px; font-size: 1em; margin-top: 5px; } #sub_s_nobel .s_nobel_cont .s_content li span br{display:none;} #sub_s_nobel .s_nobel_cont .s_content li .title{font-weight:bold; font-size:1.1em; margin:10px 0 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display:block;} #sub_s_nobel .s_nobel_cont .s_content li .writer{margin:5px 0; position:absolute; bottom:5px; right:0px; max-width: 45%; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_s_nobel .s_nobel_cont .s_content li .img_backbox{position:absolute; top:0; left:0; right:0; height:100%; background:url("https://cdn.metoon.co.kr/mimg/img_back_sm4.png") repeat-x 100% 100%; background-size:100% 100%;} #sub_s_nobel .s_nobel_cont .s_content li .series_txt{margin: 5px 0; position: absolute; bottom: 5px; right: 0px; max-width: 45%; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height:0;} #sub_s_nobel .s_nobel_cont .s_content li .on{position:relative; } #sub_s_nobel .s_nobel_cont .s_content li .on .heart{font-size:1.0em; padding-left:25px; background:url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png") no-repeat 0 75%; background-size: 14px 12px; color:var(--bg-fc-color);} #sub_s_nobel .s_nobel_cont .s_content li .on .heart{background:url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0 25%; background-size: 13px 11px; }/* white 버전 */ #sub_s_nobel .s_nobel_cont .s_content li .patch_div{position:absolute; bottom:5px; right:5px; width:auto; overflow:visible; background:transparent; border:0 none; z-index:99;} #sub_s_nobel .s_nobel_cont .s_content li .patch_div img{width:18px; position:static; display:inline-block;} /* s소설 컨텐츠 17.02.23 */ /* s소설 컨텐츠 sm 17.04.19 */ #sub_s_nobel .s_nobel_cont .s_content_sm{overflow:hidden; width:100%; padding-top: 10px;} #sub_s_nobel .s_nobel_cont .s_content_sm li{padding:0px 0 10px; float:left; width:100%;} #sub_s_nobel .s_nobel_cont .s_content_sm li div{display: block; width:96%; position: relative; overflow: hidden; border-radius: 6px; padding:5px; margin:0 auto; background:#fff; border-width:thin; color:#333; border:1px solid #ddd; font-size:1.05em; letter-spacing:-0.025em;} #sub_s_nobel .s_nobel_cont .s_content_sm li div a{display: block; height: 100%; overflow:hidden; margin:auto; position:relative; left:0; right:0; width:100%; z-index:99; min-height:60px;} #sub_s_nobel .s_nobel_cont .s_content_sm li .s_img_box{margin:0; float:left; width: 60px; max-width:none; max-height: none; position:absolute; top:0; left:0; right:0; bottom: 0; border-radius:5px; border:1px solid #ddd;} #sub_s_nobel .s_nobel_cont .s_content_sm li img{width:100%; display:block;} #sub_s_nobel .s_nobel_cont .s_content_sm li .novel_img{position:absolute; top:0; left:0; right:0; bottom: 0; border: none; border-radius: 0;} #sub_s_nobel .s_nobel_cont .s_content_sm li p{padding: 6px 0; font-size:1em; float:left; padding-left:65px; letter-spacing:-0.025em; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_s_nobel .s_nobel_cont .s_content_sm li span{display:block; white-space: normal; padding:0px; font-size: 0.95em; margin-top: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #sub_s_nobel .s_nobel_cont .s_content_sm li span br{display:none;} #sub_s_nobel .s_nobel_cont .s_content_sm li .title{font-weight:bold; font-size:1.1em; margin:0px 0 0; padding-right: 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display:block;} #sub_s_nobel .s_nobel_cont .s_content_sm li .writer{margin:5px 0; position:absolute; bottom:5px; right:0px; max-width: 45%; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_s_nobel .s_nobel_cont .s_content_sm li .img_backbox{position:absolute; top:0; left:0; right:0; height:100%; background:url("https://cdn.metoon.co.kr/mimg/img_back_sm4.png") repeat-x 100% 100%; background-size:100% 100%;} #sub_s_nobel .s_nobel_cont .s_content_sm li .series_txt{margin: 5px 0; position: absolute; bottom: 5px; right: 0px; max-width: 45%; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height:0;} #sub_s_nobel .s_nobel_cont .s_content_sm li .icon_19_patch{width: 19px !important; position: absolute; top: 0; margin-top: 0; right: 0; z-index: 99;} #sub_s_nobel .s_content_list_more{width: 100%; padding-bottom: 15px; float: left; background: #f5f5f5;} #sub_s_nobel .s_content_list_more a{width: 96%; display: block; text-align: center; color: var(--bg-fc-color); background: #fff; padding: 9px 0 8px; font-size: 1.1em; border: 1px solid var(--bg-fc-color); border-radius: 5px; margin: 5px auto; text-shadow: none; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}/* white 버전 */ #sub_s_nobel .s_content_list_more p{font-weight: bold; display: inline-block; margin-left: -3%;} #sub_s_nobel .s_content_list_more img{width: 16px; display: inline-block; position: absolute; top: 4px; bottom: 0; margin: auto; padding-left: 10px;} @media all and (min-width:601px){ #sub_s_nobel .s_nobel_cont .s_content_sm li{width:50%;} #sub_s_nobel .s_nobel_cont .s_content_sm{width: 98%; margin: 0 auto; overflow: hidden;} } @media all and (min-width:1000px){ #sub_s_nobel .s_nobel_cont .s_content_sm li{width:33.3%;} #sub_s_nobel .s_nobel_cont .s_content_sm{width: 96%; margin: 5px auto; overflow: hidden;} } /* s소설 컨텐츠 sm 17.04.19 */ .s_novel_tab{width: 96%; margin:0 auto; margin-top: 5px;} #s_novel_tab_list{border-spacing: 0; width: 100%; overflow: hidden; border-radius: 0; background: #f0f0f0; position:relative; border:1px solid #c3c3c3; box-sizing: border-box;} #s_novel_tab_list tr{height:26px;} #s_novel_tab_list .s_tab_line_1 td{border-bottom: 1px solid #c3c3c3; border-right:0;} #s_novel_tab_list .s_tab_line_2 td{border-right:0;} #s_novel_tab_list td{text-align: center; box-sizing: border-box; border-radius: 0px; margin:0; border-left: 1px solid #c3c3c3; max-height: none;} #s_novel_tab_list td:first-child{border-left:none;} #s_novel_tab_list td a{ padding:8px 0 7px; color:#555555; display:block; font-weight: normal; font-size: 1em; border-bottom:2px solid #f0f0f0;} #s_novel_tab_list td a.on{background:#555555; color:var(--main-ft-color); border-bottom:2px solid #d52b2c;} #sub_s_nobel .s_banner_wrap{width: 100%; float: left;} #sub_s_nobel .s_banner_wrap>div{width: 96%; margin: 5px auto; border:1px solid #ddd;} #sub_s_nobel .s_banner_wrap li>div{height: 100%; display: block; overflow: hidden; position: relative;} #sub_s_nobel .s_banner_wrap #s_banner{width: 100%; overflow: hidden; max-width: 800px; margin: 0 auto;} #sub_s_nobel .s_banner_wrap .s_banner_all{width: 100%;} #sub_s_nobel .s_banner_wrap #s_banner li{margin: 0; width:100% !important;} #sub_s_nobel .s_banner_wrap #s_banner li a{position:relative;} #sub_s_nobel .s_banner_wrap .s_banner_all img{float: right; width: 96%; margin-right: 0px; max-width: 332px;} #sub_s_nobel .s_banner_wrap #s_banner li .txt_box{position: absolute; top: 0; bottom: 0; left: 2%; margin: auto; width: 55%; text-align: left; height: 80px; letter-spacing: -0.1em;} #sub_s_nobel .s_banner_wrap #s_banner li .txt_box p{width: 100%; position: static; text-align: left; font-size: 1em; height: 75px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #sub_s_nobel .s_banner_wrap #s_banner li .txt_box p .nobel_title{display: block; font-size: 1.25em; font-weight: bold; margin-bottom: 5px;} #sub_s_nobel .s_content li .on .txt_tag{position:absolute; top:-3px; right:12px; padding:0; margin:0;} #sub_s_nobel .s_content li .on .txt_tag span{display:inline-block; position:relative; padding:0;} #sub_s_nobel .s_content li .on .txt_tag .ic_tag01:after{content:""; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #sub_s_nobel .s_content li .on .txt_tag .ic_tag01 img{width:24px; position:static;} #sub_s_nobel .s_content li .on .txt_tag .new_tag:after{border-top:12px solid #46adf2;} #sub_s_nobel .s_content li .on .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #sub_s_nobel .s_content li .on .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #sub_s_nobel .s_content li .on .txt_tag .chat_tag img{width:22px; position:static;} #sub_s_nobel .s_content li .on .txt_tag .chat_tag:after{content:""; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #ffb72b;} #sub_s_nobel .s_content li .on .txt_tag .up_txt_tag img{width:22px; position:static;} #sub_s_nobel .s_content li .on .txt_tag .up_txt_tag:after{content:""; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #1567c3;} @media all and (min-width:320px) and (max-width:350px){ #sub_s_nobel .s_nobel_cont .s_content li p > span{min-height: 50px; max-height: 100px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding: 1px 10px;} #sub_s_nobel .s_nobel_cont .s_content li .on .heart{margin-top:0;} #sub_s_nobel .s_nobel_cont .s_content li .on{min-height:0;} #sub_s_nobel .s_nobel_cont .s_content li .title{min-height:0; margin-top:5px;} #sub_s_nobel .s_nobel_cont .s_content li .writer{min-height:0; display: inline-block;} #sub_s_nobel .s_banner_wrap #s_banner li .txt_box p .nobel_title{font-size:1.15em;} } @media all and (min-width:351px) and (max-width:360px){ #sub_s_nobel .s_banner_wrap .s_banner_all img{width: 91%;} } @media all and (min-width:320px) and (max-width:360px){ #s_nobel_tab_wrap.s_nobel_tab1 li a{font-size: 14px;} #sub_s_nobel .s_nobel_cont .s_content li .s_img_box{width: 50%;} #sub_s_nobel .s_nobel_cont .s_content li .title{font-size: 1.05em;} #sub_s_nobel .s_nobel_cont .s_content li .writer{bottom:5px;} #sub_s_nobel .s_nobel_cont .s_content li span{font-size: 0.95em;} #sub_s_nobel .photo_radio .chkselect:after{top:0px; background: url("https://cdn.metoon.co.kr/mimg/radio_check_on.png") no-repeat center; background-size: 12px;} #sub_s_nobel .photo_radio label:after{top:0px; background: url("https://cdn.metoon.co.kr/mimg/radio_check_off.png") no-repeat center; background-size: 12px;} #sub_s_nobel .s_banner_wrap #s_banner li .txt_box p{font-size: 1em; height:74px;} } @media all and (min-width:435px) and (max-width:600px){ #sub_s_nobel .s_nobel_cont .s_content li div{font-size:1.2em;} #sub_s_nobel .s_nobel_cont .s_content li .s_img_box{width:50%;} #sub_s_nobel .s_nobel_cont .s_content li p{font-size: 0.9em; margin-top: 2%;} #sub_s_nobel .s_nobel_cont .s_content li .title{font-size: 1.1em;} #sub_s_nobel .s_nobel_cont .s_content li span{font-size: 1em;} #sub_s_nobel .s_nobel_cont .s_content li span br{display:block;} } @media all and (min-width:535px) and (max-width:600px){ #sub_s_nobel .s_nobel_cont .s_content li div{font-size:1.1em;} #sub_s_nobel .s_nobel_cont .s_content li .s_img_box{width:50%;} #sub_s_nobel .s_nobel_cont .s_content li{width: 50%; float: left; margin:0;} #sub_s_nobel .s_nobel_cont .s_content li p{font-size: 0.9em; margin-top: 0; padding-top:0;} #sub_s_nobel .s_nobel_cont .s_content li .title{font-size: 1.1em;} #sub_s_nobel .s_nobel_cont .s_content li span{font-size: 1em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #sub_s_nobel .s_nobel_cont .s_content li .on .heart{padding-left:15px;} #sub_s_nobel .s_nobel_cont .s_content li .on .txt_tag{right:5px;} } @media all and (min-width:601px) and (max-width:810px){ #sub_s_nobel .s_nobel_cont .s_content li{width: 50%; float: left; margin:0;} #sub_s_nobel .s_nobel_cont .s_content li .s_img_box{width:50%;} #sub_s_nobel .s_nobel_cont .s_content li p{margin-top: 2%;} #sub_s_nobel .s_nobel_cont .s_content li span{font-size: 1em; margin:0;} #sub_s_nobel .s_nobel_cont .s_content li .title{margin: 3% 0;} #sub_s_nobel .s_nobel_cont .s_content li .writer{font-size:1em; margin:0;} #sub_s_nobel .s_nobel_cont .s_content li .on{font-size: 1em;} #sub_s_nobel .s_nobel_cont .s_content li span br{display:block;} } @media all and (min-width:1000px){ #sub_s_nobel .s_nobel_cont .s_content{width: 96%; margin: 5px auto; overflow: hidden;} #sub_s_nobel .s_nobel_cont .s_content li{width: 33.3%; float: left; margin:0;} #sub_s_nobel .s_nobel_cont .s_content li p{font-size:0.9em;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #sub_s_nobel .s_nobel_cont .s_content li{width: 50%; float: left; margin:0;} #sub_s_nobel .s_nobel_cont .s_content li p{margin:0; font-size: 0.9em;} #sub_s_nobel .s_nobel_cont .s_content li .title{margin: 15px 0 5px;} #sub_s_nobel .s_nobel_cont .s_content li .writer{bottom:10px;} } @media screen and (orientation:landscape) and (max-width:780px){ #sub_s_nobel .s_nobel_cont .s_content li{width: 50%; float: left; margin:0;} #sub_s_nobel .s_nobel_cont .s_content li p{margin:0; margin-top: 2%; font-size: 0.9em;} #sub_s_nobel .s_nobel_cont .s_content li .title{margin: 15px 0 5px;} #sub_s_nobel .s_nobel_cont .s_content li .writer{bottom:10px;} } @media screen and (orientation:landscape) and (max-width:667px){ #sub_s_nobel .s_nobel_cont .s_content li{width: 50%; float: left; margin:0;} #sub_s_nobel .s_nobel_cont .s_content li p{margin:0; font-size: 0.9em; padding-top:10px;} #sub_s_nobel .s_nobel_cont .s_content li .title{margin: 10px 0 5px;} #sub_s_nobel .s_nobel_cont .s_content li .writer{bottom:10px;} } @media screen and (orientation:landscape) and (max-width:570px){ #sub_s_nobel .s_nobel_cont .s_content li .writer{bottom: 5px;} #sub_s_nobel .s_nobel_cont .s_content li .title{margin: 5px 0 5px;} #sub_s_nobel .s_nobel_cont .s_content li span{font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_s_nobel .s_nobel_cont .s_content li span br{display:none;} } @media screen and (orientation:landscape) and (max-width:480px){ #sub_s_nobel .s_nobel_cont .s_content li{width: 100%; float: left; margin:0;} #sub_s_nobel .s_nobel_cont .s_content li p{margin:0; font-size: 0.8em; padding: 15px 0;} #sub_s_nobel .s_nobel_cont .s_content li .title{padding:7px 10px 10px;} #sub_s_nobel .s_nobel_cont .s_content li .writer{bottom: 5px;} #sub_s_nobel .s_nobel_cont .s_content li span{font-size: 0.9em; white-space: normal; overflow: inherit; text-overflow: inherit;} #sub_s_nobel .s_nobel_cont .s_content li span br{display:block;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #sub_s_nobel .s_nobel_cont .s_content{width: 96%; margin: 5px auto; overflow: hidden;} #sub_s_nobel .s_nobel_cont .s_content li{width:32.3%; float: left; margin: 0 0.5%;} #sub_s_nobel .s_nobel_cont .s_content li div{width:100%; /* height: 220px; */} #sub_s_nobel .s_nobel_cont .s_content li p{margin-top: 5%; font-size: 1em; margin-top: 3%;} #sub_s_nobel .s_nobel_cont .s_content li .title{margin: 15px 0;} } @media all and (min-width:601px) and (max-width:810px){ #sub_s_nobel .s_nobel_cont .s_content li div .patch{max-width:45px;} #sub_s_nobel .s_nobel_cont .s_content li .writer {bottom: 5%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #sub_s_nobel .s_nobel_cont .s_content li p{font-size:1em; margin-top: 2%;} #sub_s_nobel .s_nobel_cont .s_content li .title{margin: 10px 0 15px;} } @media screen and (orientation:landscape) and (max-width:500px){ #sub_s_nobel .s_nobel_cont .s_content li span {font-size: 1em;} #sub_s_nobel .s_nobel_cont .s_content li .title {margin: 7px 0 0px;} #sub_s_nobel .s_nobel_cont .s_content li span{margin-top: 2px;} } @media all and (min-width:1300px){ #sub_s_nobel .s_nobel_cont .s_content{width: 96%; margin: 5px auto; overflow: hidden;} #sub_s_nobel .s_nobel_cont .s_content li{width: 32.3%; float: left; margin: 0 0.5%;} #sub_s_nobel .s_nobel_cont .s_content li div{width:100%;/* height: 210px; */} #sub_s_nobel .s_nobel_cont .s_content li p{ /* font-size: 1.15em; */margin-top: 3%;} #sub_s_nobel .s_nobel_cont .s_content li .title{margin: 15px 0 25px;} } /* 서브 s소설 */ /* 서브 b소설 */ #sub_s_nobel .b_banner_wrap{width:100%; float:left;} #sub_s_nobel .b_banner_wrap>div{width: 96%; margin: 5px auto 0;} #sub_s_nobel .b_banner_wrap>img{width:100%;} #sub_s_nobel .b_banner_wrap #b_banner{width:100%; overflow:hidden;/* max-width: 800px; */ margin: 0 auto;} #sub_s_nobel .b_banner_wrap #b_banner li{margin:0;} #sub_s_nobel .b_banner_wrap .b_banner_all{width:100%; margin-bottom:5px;} #sub_s_nobel .b_nobel_cont .b_banner_all li>div{max-width: 600px; margin: 0 auto; position: relative;} #sub_s_nobel .b_banner_wrap .b_benner_img{width: 100%; left: 0; right: 0; display: block; overflow: hidden;} #sub_s_nobel .b_banner_wrap .b_benner_img div{position: relative; display: block; color: #4e4e4e; font-weight: normal; font-size: 1.0em; letter-spacing: -0.025em; max-width: 400px; margin: 0 auto;} #sub_s_nobel .b_banner_wrap .b_benner_img div:after{clear:both; display:block; content:"";} #sub_s_nobel .b_banner_wrap .b_banner_all img{float: right; width: 88.5%; margin-right: 0px; max-width: 332px;} #sub_s_nobel .b_banner_wrap .b_banner_all .txt_box_b{width: 80%; position: absolute; top: 0; bottom: 0; margin: auto; left: 3%; height: 110px; text-align: left; display: block; color: #4e4e4e; font-weight: normal; font-size: 1.0em; letter-spacing: -0.025em; max-width: 400px;} #sub_s_nobel .b_banner_wrap .b_banner_all .txt_box_b p{position: static; width: 100%; height: auto; text-align: left; letter-spacing: -0.025em;} #sub_s_nobel .b_banner_wrap .b_banner_all .txt_box_b .big_txt{color: #2c2c2c; font-weight: 900; font-size: 1.9em; margin-bottom: 8px; } #sub_s_nobel .b_banner_wrap .b_banner_all .txt_box_b .big_txt span{color: #b82935;} #sub_s_nobel .b_banner_wrap .b_banner_all .txt_box_b .mid{color: #663716; font-weight: 900; font-size: 1.5em; margin-bottom: 20px;} #sub_s_nobel .b_banner_wrap .b_banner_all .txt_box_b .sm{color: #fff; background: #53230a; font-weight: 900; font-size: 1.2em; display: inline-block; width: auto; padding: 1px 3px;} #sub_s_nobel .b_banner_wrap .b_benner_img .all img{width:89%; margin-right:0px; max-width:321px; margin:0 auto; float: none;} #sub_s_nobel .b_banner_wrap .b_benner_img .all{position:relative;} #sub_s_nobel .b_banner_wrap .b_benner_img .all div{position:absolute; bottom:0; width:100%;} #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main{width:100%; max-width:400px; height:inherit; left:0; right:0;} #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .sm{color:var(--main-ft-color); background:none; font-weight:normal; font-size:1.2em; display: inline-block; width: 100%; padding:1% 0 1%; text-align:center; background:#d32424;} #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .mid{width:58%; text-align:right; color:#ffcf10; margin-bottom:0px; font-size:1.35em; } #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .mid2{width:58%; text-align:right; color:var(--main-ft-color); font-size:1.4em; margin-bottom: 20px; letter-spacing:-0.025em;} #sub_s_nobel .b_banner_wrap #b_banner li .txt_box{position: absolute; top: 0; bottom: 0; left: 2%; margin: auto; width: 55%; text-align: left; height: 80px; letter-spacing: -0.1em;} #sub_s_nobel .b_banner_wrap #b_banner li .txt_box p{width: 100%; position: static; text-align: left; font-size: 1.15em; height: 80px;} #sub_s_nobel .b_banner_wrap #b_banner li .txt_box p .nobel_title{display: block; font-size: 0.95em; font-weight: bold; margin-top: 15px;position: absolute; bottom: 0;} #sub_s_nobel .b_nobel_cont ul{width:100%; margin:0 auto 10px;} #sub_s_nobel .b_nobel_cont li{width:100%; box-sizing:border-box; overflow:hidden; margin:0 0; position:relative;} #sub_s_nobel .b_nobel_cont li > div{height:100%;display: block; overflow: hidden;} #sub_s_nobel .b_nobel_cont li a{display:block;} #sub_s_nobel .b_nobel_cont li > a{width:100%; margin:0 auto; padding:0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_s_nobel .b_nobel_cont li .genre_tag{position:absolute; right:5px; bottom:5px;z-index: 99; display:block;} #sub_s_nobel .b_nobel_cont li .genre_tag img{width:22px; float:right; margin-left:3px; } #sub_s_nobel .b_nobel_cont img{width:100%; display:block;} #sub_s_nobel .b_nobel_cont .b_nobel_cont_img{ border-radius:3px; border:1px solid #ccc; width:40%;border-radius:3px; overflow:hidden; position:relative;} #sub_s_nobel .b_nobel_cont a .txt_box{width:59%;position:absolute; right:0; top:0; bottom:0; background:#fff; border:1px solid #ccc; border-radius:3px; overflow:hidden; box-sizing:border-box;} #sub_s_nobel .b_nobel_cont a .txt_box div{padding:15px 5px 0; height:100%; width:95%; margin:0 auto;position:relative; font-weight:bold; color:#676767;} #sub_s_nobel .b_nobel_cont a .txt_box .title{font-size:1.2em; font-weight:bold; padding:0 0 13px; color:#3b3b3b;} #sub_s_nobel .b_nobel_cont a .txt_box .txt{width:100%; margin-top:0px; font-weight:normal;} #sub_s_nobel .b_nobel_cont a .txt_box .series{display:inline-block; font-size:1em; background:#e85784; padding: 2px 5px; color:var(--main-ft-color); border-radius:3px; font-weight:normal; margin-bottom:12px;} #sub_s_nobel .b_nobel_cont a .txt_box .writer{position:absolute; bottom:15px; left:5px; font-size:1em; font-weight:normal; color:#828282;} #sub_s_nobel .b_nobel_cont a .txt_box .title span{font-size: 10px; letter-spacing: -0.025em; color: #fff; padding: 1px 3px; border-radius: 3px; margin:2px 0 0 3px; display:inline-block; text-align: center; vertical-align: text-top;} #sub_s_nobel .b_nobel_cont a .txt_box .title span.new{background: #e85784;} #sub_s_nobel .b_nobel_cont a .txt_box .title span.up{background: #2c5faf;} #sub_s_nobel .b_nobel_cont .b_nobel_cont_img .img_bg {background: url("https://cdn.metoon.co.kr/mimg/img_back_sm4.png") repeat-x 0 100%; background-size:100% 100%; display: block; position: absolute; left: 0; width: 100%; height: 100%; bottom: 0; margin: auto;} /* b소설 컨텐츠 17.02.23 */ #sub_s_nobel .b_nobel_cont .all_list{padding:0px 0 10px; margin:0;} #sub_s_nobel .b_nobel_cont .all_list div{display: block; width:96%; position: relative; overflow: hidden; border-radius: 6px; padding:0; margin:0 auto; /* height:145px; */ background:#fff; border-width:thin; color:#333; border:1px solid #ddd; font-size:1.05em; letter-spacing:-0.025em;} #sub_s_nobel .b_nobel_cont .all_list div a{display: block; height: 100%; overflow:hidden; /* position: absolute; */margin:auto; left:0; right:0; width:100%; z-index:99;} #sub_s_nobel .b_nobel_cont .all_list .b_nobel_cont_img{margin:0; float:left;max-width:45%; max-height: none; position:relative; border-radius:0; border:0;} #sub_s_nobel .b_nobel_cont .all_list img{width:100%; display:block;} #sub_s_nobel .b_nobel_cont .all_list .novel_img{position:absolute; top:0; left:0; right:0; bottom:0; width:100%; border:none; border-radius:0;} #sub_s_nobel .b_nobel_cont .all_list .blurcover{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #sub_s_nobel .b_nobel_cont .all_list .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center !important;} #sub_s_nobel .b_nobel_cont .all_list p{padding-top: 5px; font-size:1em; width: 55%; float:right; letter-spacing:-0.025em; border:none;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span{display:block; white-space: normal; padding: 0 10px; font-size: 1em; margin-top: 5px; } #sub_s_nobel .b_nobel_cont .all_list a .txt_box span br{display:none;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{font-weight:bold; font-size:1.1em; margin:10px 0 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display:block;} #sub_s_nobel .b_nobel_cont .all_list .writer{margin:5px 0; position:absolute; bottom:5px; right:0px; max-width: 45%; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_s_nobel .b_nobel_cont .all_list .img_backbox{position:absolute; top:0; left:0; right:0; height:100%; background:url("https://cdn.metoon.co.kr/mimg/img_back_sm4.png") repeat-x 100% 100%; background-size:100% 100%;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .series_txt{margin: 5px 0; position: absolute; bottom: 5px; right: 0px; max-width: 45%; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height:0;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag{position:absolute; top:0; right:10px; padding:0; margin:0;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag>span{margin:0; display: inline-block; text-align: center; vertical-align: text-top; margin: 0px 0 0 3px; border-radius: 3px; padding: 2px 3px 0; font-size: 10px; letter-spacing: -0.025em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag .up_txt_tag{border:1px solid #2c5faf; color:#2c5faf; background:#fff;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag .end_txt_tag{border:1px solid #7d52e0; color:#7d52e0; background:#fff;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag .new_tag{border:1px solid #721de3; background:#721de3; width:auto; color: #fff;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag .best_tag{border:1px solid #388afd; background:#388afd; width:auto; color: #fff;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag .hot_tag{border:1px solid #e61e3f; background:#e61e3f; width:auto; color: #fff;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag span>span{padding:0 2px; padding-left:14px; display:inline-block;position:relative; margin-top:0;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag .up_txt_tag span{padding:0;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag .end_txt_tag span{padding:0;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag .hot_tag span{padding-right:3px;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag span img{position:absolute; top:-2px; bottom:0; left:0; margin:auto; width:11px; display:block;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag .new_tag img{width:11px; left:0px;} #sub_s_nobel .b_nobel_cont .all_list .on .txt_tag .hot_tag img{width:8px; left:1px;} #sub_s_nobel .b_nobel_cont .all_list .on{position:relative; } #sub_s_nobel .b_nobel_cont .all_list .on .heart{font-size:1.0em; padding-left:25px; background:url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png") no-repeat 0 75%; background-size: 14px 12px; color:var(--bg-fc-color);} #sub_s_nobel .b_nobel_cont .all_list .on .heart{background:url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0 25%; background-size: 13px 11px; }/* white 버전 */ #sub_s_nobel .b_nobel_cont .all_list .icon_19_patch{width: 22px !important; position: absolute; bottom: 0; margin-bottom: 5px; right: 5px; z-index: 99;} /* b소설 컨텐츠 17.02.23 */ #sub_s_nobel .b_nobel_cont li .txt_box_all{width: 100%; border-bottom: 1px solid #ddd; padding: 12px 0 13px; position: relative; overflow: hidden;} #sub_s_nobel .b_nobel_cont li:first-child .txt_box_all{border-top: 1px solid #ddd; padding-top: 11px; padding-bottom: 13px;} #sub_s_nobel .b_nobel_cont li .txt_box_all div{float: left; font-size:13px; width: 70%;} #sub_s_nobel .b_nobel_cont li .txt_box_all div p{letter-spacing: -0.05em; padding-right: 3px;} #sub_s_nobel .b_nobel_cont li .txt_box_all div p.title{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:95%; color:#545454; font-size:14px; padding:2px 0 3px;} #sub_s_nobel .b_nobel_cont li .txt_box_all div .series{display: inline-block; font-size: 0.9em; background: #c53232; padding: 2px 5px; color: #fff; border-radius: 3px; font-weight: normal; margin-bottom: 5px;} #sub_s_nobel .b_nobel_cont li .txt_box_all{font-size: 1em; font-weight: bold;/* margin-bottom: 5px; margin-top: 3px; */ color: #3b3b3b;} #sub_s_nobel .b_nobel_cont li .txt_box_all .btn_span{display: block; width: 30%; height: 34px; right: 1%; padding: 8px 0; background: #ffffff; border: 1px solid #bbb; text-align: center; border-radius: 5px; cursor: pointer; max-width: 120px; float: right; letter-spacing: -0.05em; color: #424242; font-size: 1em; margin: 5px auto 0px; position:absolute; /* margin-right:1%; */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_s_nobel .b_nobel_cont li .txt_box_all .btn_span span{background: url("https://cdn.metoon.co.kr/mimg/icon_coin_black2.png") no-repeat 0 center; padding-left: 20px; background-size: 15px;} #sub_s_nobel .b_nobel_cont li .txt_box_all .list_btn{display: block; width: 30%; height: 34px; right: 1%; padding: 8px 0; background: #ffffff; border: 1px solid #bbb; text-align: center; border-radius: 5px; cursor: pointer; max-width: 120px; float: right; letter-spacing: -0.05em; color: #424242; font-size: 1em; margin: 5px auto 0px; position:absolute; /* margin-right:1%; */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_s_nobel .b_nobel_cont li .txt_box_all .nolog_btn{font-size: 0.9em; letter-spacing: -0.025em;} #sub_s_nobel .b_nobel_cont li .txt_box_all .btn_span.coin_btn{color: #fff; background: #c53232; border: 1px solid var(--bg-fc-color)} #sub_s_nobel .b_nobel_cont li .txt_box_all .free_btn span{background:url("https://cdn.metoon.co.kr/mimg/detail_free_icon.png") no-repeat 0 center; padding-left:20px; background-size:15px;} #sub_s_nobel .b_nobel_cont li .txt_box_all .btn_span.coin_btn span{background:url("https://cdn.metoon.co.kr/mimg/detail_coin_icon.png") no-repeat 0 center; padding-left:20px; background-size:15px;} #sub_s_nobel .b_nobel_cont .b_nobel_cont_img .hits{color:#f52b2b; border: 1px solid #f52b2b;} #sub_s_nobel .b_nobel_cont .b_nobel_cont_img .hits .heart{color:#f52b2b; background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0 25%; background-size: 13px 11px;} .b_novel_tab{width: 96%; margin:0 auto 7px; margin-top: 5px;} #b_novel_tab_list{border-spacing: 0; width: 100%; overflow: hidden; border-radius: 0; background: #f0f0f0; position:relative; border:1px solid #c3c3c3; box-sizing: border-box;} #b_novel_tab_list tr{height:26px;} #b_novel_tab_list .b_tab_line_1 td{border-bottom: 1px solid #c3c3c3; border-right:0;} #b_novel_tab_list .b_tab_line_2 td{border-bottom: 1px solid #c3c3c3; border-right:0;} #b_novel_tab_list .b_tab_line_3 td{border-right:0;} #b_novel_tab_list .b_tab_line_3 td.select_box{background: #fff;} #b_novel_tab_list .b_tab_line_3 td.select_box select{width:100%; border:none; background: url("https://cdn.metoon.co.kr/mimg/select_arrow2.png") no-repeat 92% center,#fff; background-size: 9px; -webkit-appearance: none; padding: 5px; line-height: normal; color:#676767;} #b_novel_tab_list td{text-align: center; box-sizing: border-box; border-radius: 0px; margin:0; border-left: 1px solid #c3c3c3; max-height: none;} #b_novel_tab_list td:first-child{border-left:none;} #b_novel_tab_list td a{ padding:10px 0 8px; border-bottom:1px solid #f0f0f0; color:#555555; display:block; font-weight: normal; font-size: 1em;} #b_novel_tab_list td a.on{background:#555555; color:var(--main-ft-color); border-bottom:2px solid #d52b2c;} #b_novel_tab_list td a#request_btn{background:#c3c3c3; margin:0 auto; } #b_novel_tab_list td a#request_btn.on{background:#fff; color: #4a4a4a;} /* S소설 하단nav */ #sub_s_nobel .detail_nav{width:100%;} #sub_s_nobel .bottom_detail_nav{position:fixed; bottom:0; left:0; display:none; z-index:999;} #sub_s_nobel .detail_nav .detail_nav_ul_noimg{width:100%; text-align:center; background:#fff; border-top:1px solid #ddd; height: 36px;} #sub_s_nobel .detail_nav .detail_nav_ul_noimg li{width:33.3%; float:left; height:100%; text-align:center; display:inline-block; position:relative;} #sub_s_nobel .detail_nav .detail_nav_ul_noimg li a{display:block; width:100%; letter-spacing:-0.025em; padding:10px 0; height:100%; border-left:1px solid #ddd; color:#767676; box-sizing: border-box;} #sub_s_nobel .detail_nav .detail_nav_ul_noimg li .first{color:var(--bg-fc-color); } #sub_s_nobel .detail_nav .detail_nav_ul_noimg li .heart{color:var(--bg-fc-color); } #sub_s_nobel .detail_nav .detail_nav_ul_noimg li .heart_on {color:var(--bg-fc-color);} #sub_s_nobel .detail_nav .detail_nav_ul_noimg li .first span{padding-left:25px; background:url("https://cdn.metoon.co.kr/mimg/adult_icon_detail_first.png") no-repeat 0% center; background-size:14px;} #sub_s_nobel .detail_nav .detail_nav_ul_noimg li .heart span{padding-left:25px; background:url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png") no-repeat 0% center; background-size:17px;} #sub_s_nobel .detail_nav .detail_nav_ul_noimg li .heart_on span{padding-left:25px; background:url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0% center; background-size:17px;} /* S소설 하단nav */ @media all and (min-width:320px) and (max-width:350px){ #sub_s_nobel .b_nobel_cont .all_list a .txt_box > span{min-height: 50px; max-height: 60px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } #sub_s_nobel .b_nobel_cont .all_list a .txt_box .heart{margin-top:0;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .on{min-height:0; padding:1px 10px;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{min-height:0; margin-top:5px;} #sub_s_nobel .b_nobel_cont .all_list .writer{min-height:0; display: inline-block;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box{font-size: 1em;} #sub_s_nobel .b_nobel_cont a .txt_box div{padding-top:12px;} #sub_s_nobel .b_nobel_cont a .txt_box{font-size:0.9em;} #sub_s_nobel .b_nobel_cont a .txt_box .series{margin-bottom:8px;} #sub_s_nobel .b_nobel_cont a .txt_box .title{padding-bottom:8px;} #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .sm{padding: 1% 0 1.5%; font-size: 1.1em;} #sub_s_nobel .b_banner_wrap .b_benner_img .all img{width:97%;} } @media all and (min-width:320px) and (max-width:360px){ #sub_s_nobel .b_nobel_cont .all_list .b_nobel_cont_img{width: 50%;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{font-size: 1.05em;} #sub_s_nobel .b_nobel_cont .all_list .writer{bottom:5px;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span{font-size: 0.95em; } #sub_s_nobel .b_banner_wrap #b_banner li .txt_box p{font-size:1.05em;} #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .mid2{font-size: 1.2em;} #b_novel_tab_list td a{font-size: 0.9em;} } @media all and (min-width:351px) and (max-width:360px) { #sub_s_nobel .b_nobel_cont a .txt_box .series{margin-bottom:9px;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{padding-bottom:9px;} } @media all and (min-width:410px) and (max-width:535px){ #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .sm{padding: 1.3% 0 1.3%;} } @media all and (min-width:435px) and (max-width:600px){ #sub_s_nobel .b_nobel_cont .all_list div{font-size:1.2em;} #sub_s_nobel .b_nobel_cont .all_list .b_nobel_cont_img{width:50%;} #sub_s_nobel .b_nobel_cont .all_list p{font-size: 0.9em; margin-top: 2%;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{font-size: 1.1em;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span{font-size: 1em;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span br{display:block;} } @media all and (min-width:535px) and (max-width:600px){ #sub_s_nobel .b_nobel_cont .all_list div{font-size:1.1em;} #sub_s_nobel .b_nobel_cont .all_list .b_nobel_cont_img{width:50%;} #sub_s_nobel .b_nobel_cont .all_list{width: 50%; float: left;} #sub_s_nobel .b_nobel_cont .all_list p{font-size: 0.9em; margin-top: 0; padding-top:0;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{font-size: 1.1em; margin-top:5px;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span{font-size: 1em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span br:nth-child(2){display:none;} #sub_s_nobel .b_nobel_cont .b_content{width:98%; margin:0 auto;} #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .sm{padding:1.5% 0 1.5%;} } @media all and (min-width:600px) { #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .mid{width: 57%;} #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .mid2{width: 57%;} } @media all and (min-width:601px) and (max-width:810px){ #sub_s_nobel .b_nobel_cont .all_list{width: 50%; float: left;} #sub_s_nobel .b_nobel_cont .all_list .s_img_box{width:50%;} #sub_s_nobel .b_nobel_cont .all_list p{margin-top: 2%;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span{font-size: 1em; margin:0;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{margin: 3% 0;} #sub_s_nobel .b_nobel_cont .all_list .writer{font-size:1em; margin:0;} #sub_s_nobel .b_nobel_cont .all_list .on{font-size: 1em;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span br{display:block;} #sub_s_nobel .b_nobel_cont .b_content{width:98%; margin:0 auto;} } @media all and (min-width:750px) { #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .sm{padding:1.6% 0 1.6%;} #sub_s_nobel .b_nobel_cont .b_content li{width: 48%; float: left; margin:5px 1%;} #sub_s_nobel .b_nobel_cont li:first-child .txt_box_all{padding-top:12px;border-top:0;} #sub_s_nobel .b_nobel_cont .b_content .all_list{padding-bottom:0; width:50%;margin:5px 0;} } @media all and (min-width:800px) { #sub_s_nobel .b_nobel_cont .b_content li{width: 48%; float: left; margin:5px 1%;} #sub_s_nobel .b_nobel_cont li:first-child .txt_box_all{padding-top:12px;border-top:0;} } @media all and (min-width:1000px){ #sub_s_nobel .b_nobel_cont .b_content{width: 96%; margin: 5px auto; overflow: hidden;} #sub_s_nobel .b_nobel_cont .all_list{width: 33.3%; float: left;} #sub_s_nobel .b_nobel_cont .all_list p{font-size:0.9em;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width: 1024px) { #sub_s_nobel .b_nobel_cont .b_content li{width: 50%; float: left; margin:0px;} #sub_s_nobel .b_nobel_cont li:first-child .txt_box_all{padding-top:12px;border-top:0;} #sub_s_nobel .b_nobel_cont li .txt_box_all{margin-bottom:0;} #sub_s_nobel .b_nobel_cont .all_list{width: 50%; float: left;} #sub_s_nobel .b_nobel_cont .all_list p{margin:0; font-size: 0.9em;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{margin: 15px 0 5px;} #sub_s_nobel .b_nobel_cont .all_list .writer{bottom:10px;} #sub_s_nobel .b_nobel_cont ul{width:98%;} } @media screen and (orientation:landscape) and (max-width:780px){ #sub_s_nobel .b_nobel_cont .all_list{width: 50%; float: left;} #sub_s_nobel .b_nobel_cont .all_list p{margin:0; margin-top: 2%; font-size: 0.9em;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{margin: 15px 0 5px;} #sub_s_nobel .b_nobel_cont .all_list .writer{bottom:10px;} #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .sm{padding: 1.7% 0 1.7%;} } @media screen and (orientation:landscape) and (max-width:667px){ #sub_s_nobel .b_nobel_cont .all_list{width: 50%; float: left;} #sub_s_nobel .b_nobel_cont .all_list p{margin:0; font-size: 0.9em; padding-top:10px;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{margin: 10px 0 5px;} #sub_s_nobel .b_nobel_cont .all_list .writer{bottom:10px;} #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .sm{padding: 1.7% 0 1.7%;} } @media screen and (orientation:landscape) and (max-width:570px){ #sub_s_nobel .b_nobel_cont .all_list .writer{bottom: 5px;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{margin: 5px 0 5px;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span{font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span br{display:none;} #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .sm{padding: 1.7% 0 1.7%;} } @media screen and (orientation:landscape) and (max-width:480px){ #sub_s_nobel .b_nobel_cont .all_list{width: 100%; float: left;} #sub_s_nobel .b_nobel_cont .all_list p{margin:0; font-size: 0.8em; padding: 15px 0;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{padding:7px 10px 10px;} #sub_s_nobel .b_nobel_cont .all_list .writer{bottom: 5px;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span{font-size: 0.9em; white-space: normal; overflow: inherit; text-overflow: inherit;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span br{display:block;} #sub_s_nobel .b_banner_wrap .b_benner_img .all .txt_box_b_main .sm{padding: 1.7% 0 1.7%;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1280px){ #sub_s_nobel .b_nobel_cont .b_content{width: 96%; margin: 5px auto; overflow: hidden;} #sub_s_nobel .b_nobel_cont .all_list{width: 49%; float: left; margin: 0 0.5%;} #sub_s_nobel .b_nobel_cont .all_list div{width:100%;} #sub_s_nobel .b_nobel_cont .all_list p{margin-top: 5%; font-size: 1.15em; margin-top: 3%;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{margin: 15px 0 25px;} } @media all and (min-width:601px) and (max-width:810px){ #sub_s_nobel .b_nobel_cont .all_list div .patch{max-width:45px;} #sub_s_nobel .b_nobel_cont .all_list .writer {bottom: 5%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #sub_s_nobel .b_nobel_cont .all_list p{font-size:1em; margin-top: 2%;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{margin: 10px 0 15px;} } @media screen and (orientation:landscape) and (max-width:500px){ #sub_s_nobel .b_nobel_cont .all_list a .txt_box span {font-size: 1em;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title {margin: 7px 0 0px;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box span{margin-top: 2px;} } @media screen and (orientation:landscape) and (min-width:1200px){ #sub_s_nobel .b_nobel_cont .b_content li{width: 48%; float: left; margin:0px 1%;} #sub_s_nobel .b_nobel_cont li:first-child .txt_box_all{padding-top:12px;border-top:0;} #sub_s_nobel .b_nobel_cont li .txt_box_all{margin-bottom:0;} } @media all and (min-width:1251px){ #sub_s_nobel .b_banner_wrap #b_banner{max-width:none;} #sub_s_nobel .b_banner_wrap #b_banner li{width:100%;} #sub_s_nobel .b_banner_wrap .b_banner_all img{max-width:800px;} #sub_s_nobel .b_nobel_cont .b_content li>div{max-width: 800px; margin: 0 auto; position:relative;} #sub_s_nobel .b_nobel_cont .b_content li{width: 32.3%; margin: 0px 0.5%;} #sub_s_nobel .b_nobel_cont li:first-child .txt_box_all{padding-top:12px;border-top:0;} } @media all and (min-width:1300px){ #sub_s_nobel .b_nobel_cont .b_content{width: 96%; margin: 5px auto; overflow: hidden;} #sub_s_nobel .b_nobel_cont .b_content .all_list{width: 32.3%; float: left; margin: 0 0.5% 10px;} #sub_s_nobel .b_nobel_cont .all_list div{width:100%;} #sub_s_nobel .b_nobel_cont .all_list p{margin-top: 3%;} #sub_s_nobel .b_nobel_cont .all_list a .txt_box .title{margin: 15px 0 25px;} } /* 서브 b소설 */ /* 서브 작품요청 */ #adult_req{width: 95%; margin: 10px auto; background: #ffffff; border: 1px dashed #d7d7d7; border-radius: 5px; padding: 20px;} #adult_req:after{display:block; content:""; clear:both;} #adult_req h3{text-align: center; font-size: 1.3em; margin-bottom: 5px; letter-spacing: -0.05em;} #adult_req p{letter-spacing: -0.025em; color: #676767; text-align: center;} #adult_req p br{display: none;} #adult_req form{margin-top: 10px;} #adult_req .input_box{width: 100%; float: left;} #adult_req .input_box label{width: 17%; display: block; float: left; text-align: right; margin-right: 3%; font-weight: bold; margin-top: 5px;} #adult_req .input_box select{width: 80%; display: block; float: left; border: 1px solid #ccc; height: 25px; padding: 0px 5px; font-size: 13px;} #adult_req .input_box_etc{width: 100%; float: left; margin: 10px 0;} #adult_req .input_box_etc input{width: 80%; display: block; float: right; border: 1px solid #ccc; font-size: 13px; height: 25px; padding: 0px 5px;} #adult_req .input_box_big{width: 100%; float: left; margin: 10px 0;} #adult_req .input_box_big label{width: 17%; display: block; float: left; text-align: right; margin-right: 3%; font-weight: bold;} #adult_req .input_box_big textarea{float: left; width: 80%; border: 1px solid #ccc; padding: 5px; resize: none;} #adult_req .input_box_big p{text-align: left; width: 80%; float: right; font-size: 0.95em; margin-top: 3px;} #adult_req .btn_box{width: 100%; float: left;} #adult_req .btn_box button{display: block; margin: 5px auto 0; padding: 5px 10px; width: 35%; max-width: 150px; height: 35px; background: #484848; border: 1px solid #3c3c3c; color: #fff; font-weight: bold; border-radius: 5px;} @media all and (min-width:1251px){ #adult_req form{margin:20px auto 0; width:80%;} } /* 서브 작품요청 */ /* 서브 포토툰 */ #sub_s_nobel .s_nobel_cont .toon_content{overflow:hidden; width: 96%; margin: 0 auto; margin-bottom:10px;} #sub_s_nobel .s_nobel_cont .toon_content li{padding: 0 0 5px; float: left; width: 49%; margin: 0 0.5%;} #sub_s_nobel .s_nobel_cont .toon_content li div{display: block; width:100%; position: relative; overflow: hidden; border-radius: 6px; padding: 0; margin: 0 auto; height: 200px; background: #fff; border-width: thin; color: #333; border: 1px solid #DDD; font-size: 1em; letter-spacing: -0.025em;} #sub_s_nobel .s_nobel_cont .toon_content li div a{display: block; width: 85%; left: 0; top: 0; position: absolute; right: 0; margin: auto; height: 100%; z-index: 99;} #sub_s_nobel .s_nobel_cont .toon_content li img{width: 100%; max-width: 101%; max-height: none; display:block;} #sub_s_nobel .s_nobel_cont .toon_content li .novel_img{position:absolute; top:0; left:0; right:0; border:none;} #sub_s_nobel .s_nobel_cont .toon_content li .blurcover{position:absolute; top:-10%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #sub_s_nobel .s_nobel_cont .toon_content li .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center 15% !important;} #sub_s_nobel .s_nobel_cont .toon_content li p{width: 100%; position: absolute; bottom: 0; background: #fff; margin: 0; min-height:50px; z-index: 9; border-radius: 0 0 6px 6px;} #sub_s_nobel .s_nobel_cont .toon_content li .hits{position: absolute; left: 2px; top: -20px; color: #E84D7D; background: rgba(255, 255, 255, 0.75); padding: 2px 2px 0; border-radius: 3px; border: 1px solid #E84D7D; box-sizing: border-box; margin-top: 0;} #sub_s_nobel .s_nobel_cont .toon_content li span{display: block; font-size: 0.9em; margin-top: 10px; padding: 0 5px; line-height: 1.3;} #sub_s_nobel .s_nobel_cont .toon_content li .hits .heart{background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png") no-repeat 0 25%; background-size: 13px 11px; padding-left: 17px; margin-top: 0;} #sub_s_nobel .s_nobel_cont .toon_content li .title{font-weight: bold; font-size: 1em; margin: 5px 0;text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_s_nobel .s_nobel_cont .toon_content li .writer{margin: 0 0 5px; display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub_s_nobel .s_nobel_cont .toon_content li .img_box{position: relative; overflow:hidden; width:100%; height:80%; border:none;} #sub_s_nobel .s_nobel_cont .toon_content li .img_box .img_backbox{position: absolute; top: 0; left: 0; right: 0; z-index: 9; height: 90%; background: url("https://cdn.metoon.co.kr/mimg/img_back_sm4.png") repeat-x 100% 100%; background-size: 100% 100%;} #sub_s_nobel .s_nobel_cont .toon_content li .icon_19_patch{width: 22px !important; position: absolute; bottom: 100%; margin-bottom: 5px; right: 5px; z-index: 99;} /* 정렬순서 170116 */ #sub_today .photo_radio{width: 96%; overflow: hidden; margin: 5px auto 7px; padding:0;} #sub_today .photo_radio fieldset{text-align:right; float:right; padding:0; margin-top:1px;} #sub_today .photo_radio select{border:1px solid #ddd; padding:2px 3px; padding-right:15px; font-size:1.1em; border-radius:3px; height:25px; line-height: normal; overflow:hidden; background:url("https://cdn.metoon.co.kr/mimg/select_arrow2.png") no-repeat 92% center,#fff; background-size: 9px; -webkit-appearance:none; color:#676767;}/* white 버전 */ /* 정렬순서 170116 */ @media all and (min-width:320px) and (max-width:360px) { #sub_s_nobel .s_nobel_cont .toon_content li div{height:185px;} #adult_req .input_box_big label{ letter-spacing:-0.15em;} #sub_s_nobel .photo_radio .chkselect:after{top:0px; background: url("https://cdn.metoon.co.kr/mimg/radio_check_on.png") no-repeat center; background-size: 12px;} #sub_s_nobel .photo_radio label:after{top:0px; background: url("https://cdn.metoon.co.kr/mimg/radio_check_off.png") no-repeat center; background-size: 12px;} } @media all and (max-width: 600px) and (min-width: 435px){ #sub_s_nobel .s_nobel_cont .toon_content li div{height: 240px; font-size: 1.1em;} #sub_s_nobel .s_nobel_cont .toon_content li .img_box .img_backbox{height:100%;} } @media all and (min-width:601px) and (max-width:750px) { #sub_s_nobel .s_nobel_cont .toon_content li .img_box .img_backbox{height:100%;} #sub_s_nobel .s_nobel_cont .toon_content li p{min-height:55px;} } @media all and (min-width:750px) { #sub_s_nobel .s_nobel_cont .toon_content li{width:32.3%;} #sub_s_nobel .s_nobel_cont .toon_content li div{height:245px;} #sub_s_nobel .s_nobel_cont .toon_content li .img_box .img_backbox{height:100%;} #sub_s_nobel .s_nobel_cont .toon_content li p{min-height:55px;} #sub_s_nobel .s_nobel_cont .toon_content li .title{margin:8px 0;} } @media all and (min-width:601px) and (max-width:810px) { #sub_s_nobel .s_nobel_cont .toon_content li div{height:245px; font-size: 1.1em;} } @media all and (min-width:800px) { #sub_s_nobel .s_nobel_cont .toon_content li div{height:230px;} #sub_s_nobel .s_nobel_cont .toon_content li .img_box{height:83%;} #sub_s_nobel .s_nobel_cont .toon_content li .img_box .img_backbox{height:100%;} #sub_s_nobel .s_nobel_cont .toon_content li p{min-height:60px;} #sub_s_nobel .s_nobel_cont .toon_content li .title{margin:8px 0;} } @media screen and (orientation:landscape) and (max-width:1025px){ #sub_s_nobel .photo_radio .chkselect:after{top:1px;} #sub_s_nobel .photo_radio label:after{top:1px;} } @media screen and (orientation:landscape)and (min-width:600px){ #sub_s_nobel .s_nobel_cont .toon_content li{width:32.3%;} #sub_s_nobel .s_nobel_cont .toon_content li div{height:220px;} #sub_s_nobel .s_nobel_cont .toon_content li .img_box{height:90%;} #sub_s_nobel .s_nobel_cont .toon_content li .img_box .img_backbox{height:90%;} } @media screen and (orientation:landscape)and (min-width:1200px){ #sub_s_nobel .s_nobel_cont .toon_content li{width:24%;} } /* 서브 포토툰 */ /* 서브 웹툰 메인 */ /* 서브 웹툰 메인 오늘 */ @media screen and (orientation:landscape) and (min-width:750px) and (max-width:1024px){ #container #today.webtoon_today{width: 50%; margin-top: 5px; float:left;} #container #today.webtoon_today .today_cont ul li{height: 220px;} #container #today.webtoon_today .today_cont ul li a .today_cont_back{height:100%;} } @media all and (min-width:1251px){ #container #today.webtoon_today{width: 49%; margin: 5px 0 0;} } /* 서브 웹툰 메인 오늘 */ /* 서브 웹툰 메인 장르 */ @media screen and (max-width: 1600px) and (orientation: landscape){ #genre.webtoon_genre .genre_cont_All ul li a{height: 165px;} } @media screen and (max-width: 1024px) and (orientation: landscape){ #container #genre.webtoon_genre{width:100%;} } @media screen and (max-width: 570px) and (orientation: landscape){ #container #genre.webtoon_genre{width:100%;} #genre.webtoon_genre #main_genre_touchSlider{min-height:530px;} #genre.webtoon_genre .genre_cont_All ul li a{height: 164px;} #genre.webtoon_genre .genre_cont_All .txt_box{padding:10px;} #genre.webtoon_genre .genre_cont_All .txt_box .writer{bottom: 10px;} } @media screen and (orientation:landscape) and (min-width:571px) and (max-width:699px){ #container #genre.webtoon_genre{width:100%;} #genre.webtoon_genre .genre_cont_All ul li a{height: 184px;} #genre.webtoon_genre #main_genre_touchSlider{min-height:590px;} } @media screen and (orientation:landscape) and (min-width:750px) and (max-width:1600px){ #container #genre.webtoon_genre{float:right; width:50%;} } @media screen and (orientation: landscape) and (min-width:750px) and (max-width: 1024px){ #container #genre.webtoon_genre .genre_cont_All ul li a{height: 145px;} #genre.webtoon_genre #main_genre_touchSlider{height:500px;} #genre.webtoon_genre .genre_cont_All .txt_box .nobel_title{padding:5px 0;} #genre.webtoon_genre .genre_cont_All .txt_box p{font-size:1em;} } /* 서브 웹툰 메인 장르 */ /* 서브 웹툰 메인 BL */ #novel_bl{width: 100%; float: left; position: relative; margin-bottom: 30px;} #novel_bl a{color:#4e4e4e; font-weight: normal;} #novel_bl .bl_cont{width:100%; } #novel_bl .bl_cont ul{float:left; margin-left:-26%;} #novel_bl .swiper-container_bl2{display:none;} #novel_bl .swiper-container_bl2 .swiper-wrapper{float:left; margin-left:-32%;} #novel_bl .bl_cont ul li{float:left; width:42% !important; height:215px; border-radius:5px; overflow:hidden; border:1px solid #ddd;} #novel_bl .bl_cont ul li img{display:block; width:100%;} #novel_bl .bl_cont ul li .novel_img{position:absolute; top:0; left:0; right:0;} #novel_bl .bl_cont ul li a{display:block; height:100%; position:relative; width:100%;} #novel_bl .bl_cont ul li p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;letter-spacing: -0.025em;} #novel_bl .bl_cont ul li .nobel_txt{position:absolute; bottom:0; left:0; background:#fff; font-size:1.0em; width:100%; text-align:center; padding:10px 5px 15px; min-height:70px;} #novel_bl .bl_cont ul li .nobel_title{display:block; font-weight:bold; font-size:1.1em; margin-bottom:7px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #novel_bl .bl_cont ul li a .today_cont_back{position:absolute; top:0; left:0; right:0; height:100%; background:url("https://cdn.metoon.co.kr/mimg/img_back_sm4.png") repeat-x 100% 100%; background-size:100% 100%;} #novel_bl .bl_cont ul li .up_nobel_main{width:35%; position:absolute; top:0; left:0;} #novel_bl .bl_cont ul li .icon_19_patch{width: 22px !important; position: absolute; bottom: 100%; margin-bottom: 5px; right: 5px; z-index: 99;} #novel_bl .bl_cont ul li .patch_box{width:100%; position:absolute; top:0; right:5px; z-index: 9; text-align: right;} #novel_bl .bl_cont ul li .patch_box>img{width: 35px; display:inline-block; vertical-align: top; margin-left:3px;} #novel_bl .bl_cont ul li .patch_box .patch{width:25%; min-width:30px; max-width: 40px;} .swiper-container_today {width: 100%; height: 100%; margin: 0 auto; overflow:hidden;} @media all and (min-width:320px) and (max-width:340px){ #novel_bl .bl_cont ul li{height: 200px;} } @media all and (min-width:341px) and (max-width:360px){ #novel_bl .bl_cont ul li{height: 215px;} } @media all and (min-width:320px) and (max-width:360px){ #novel_bl .bl_cont ul li .nobel_txt{min-height: 70px;} #container #novel_bl{margin-top:0px;} } @media all and (min-width:436px) and (max-width:600px){ #novel_bl .bl_cont ul li{height:280px;} } @media all and (min-width:436px) and (max-width:520px){ } @media all and (min-width:521px) and (max-width:600px){ } @media all and (min-width:601px) and (max-width:810px){ #novel_bl .bl_cont ul li{height:300px; width:43% !important;} #novel_bl .bl_cont ul li .nobel_txt{font-size:1.2em; min-height: 96px;} #novel_bl .bl_cont ul li a .today_cont_back{height:80%;} } @media screen and (orientation:landscape) and (max-width:1024px) and (min-width:781px) { #novel_bl{margin-top:5px;} #novel_bl .swiper-container_bl{display:none;} #novel_bl .swiper-container_bl2{display:block;} #novel_bl .bl_cont ul li{width: 30% !important; height: 260px;} #novel_bl .bl_cont ul li .nobel_txt{font-size: 1em; min-height: 75px;} #novel_bl .bl_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (max-width:780px){ #novel_bl .swiper-container_bl{display:none;} #novel_bl .swiper-container_bl2{display:block;} #novel_bl .bl_cont ul li{width: 30% !important; height: 210px;} #novel_bl .bl_cont ul li .nobel_txt{font-size: 1em; min-height: 75px;} #novel_bl .bl_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (min-width:550px) and (max-width:699px){ #container #novel_bl{margin-top:5px;} } @media screen and (orientation:landscape) and (max-width:667px){ #novel_bl .swiper-container_bl{display:none;} #novel_bl .swiper-container_bl2{display:block;} #novel_bl .bl_cont ul li{width: 30% !important; height: 210px;} #novel_bl .bl_cont ul li .nobel_txt{font-size: 1em; min-height: 60px;} #novel_bl .bl_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (max-width:570px){ } @media screen and (orientation:landscape) and (max-width:480px){ #novel_bl .bl_cont ul li{width: 30% !important; height: 180px;} #novel_bl .bl_cont ul li .nobel_txt{font-size: 0.9em; min-height: 50px; padding: 5px 5px 5px;} #novel_bl .bl_cont ul{margin-left: -31%;} } @media screen and (orientation:landscape) and (min-width:1025px) and (max-width:1250px){ #novel_bl .swiper-container_bl {display: none;} #novel_bl .swiper-container_bl2{display:block;} #novel_bl .bl_cont ul li{width: 30% !important; height: 285px;} #novel_bl .bl_cont ul li a .today_cont_back{height: 58%;} } @media all and (min-width:601px) and (max-width:810px){ #novel_bl .bl_cont ul li p{padding-top: 3%;} } @media screen and (orientation:landscape) and (min-width:781px) and (max-width:1024px){ #novel_bl .swiper-container_bl {display: none;} #novel_bl .swiper-container_bl2{display:block;} #novel_bl .bl_cont ul li p{font-size: 1.1em;} #novel_bl .bl_cont ul li{height: 260px;} #novel_bl .bl_cont ul li a .today_cont_back{height: 100%;} #novel_bl{width:50%;} #novel_bl .bl_cont ul li{height: 220px;} } @media screen and (orientation:landscape) and (max-width:780px){ #novel_bl .bl_cont ul li a .today_cont_back{height: 90%;} } @media screen and (orientation:landscape) and (max-width:500px){ #novel_bl .bl_cont ul li a .today_cont_back{height: 95%;} } @media all and (min-width:1251px){ #novel_bl .swiper-container_bl{display:none;} #novel_bl .swiper-container_bl2{display:block;} #content_wrap #novel_bl{width: 49%; float:left; margin: 15px 0%;} #novel_bl .bl_cont ul li{height: 245px;} #novel_bl .bl_cont{width:97%;} #novel_bl .bl_cont ul li a .today_cont_back{height: 70%;} #novel_bl .bl_cont ul{margin-left: -28%;} } @media all and (min-width:1400px){ #novel_bl .swiper-container_bl2 .swiper-wrapper{margin-left: -28%;} } /* 서브 웹툰 메인 BL */ /* 서브 웹툰 메인 */ /* 서브 무료 */ .free_content_box{width:96%; margin:0 auto;} .free_content_box .free_cont{padding:15px 0 20px; border-top:1px dashed #fff; border-bottom:1px dashed #ddd;} .free_content_box .free_cont#all_free{border-top:none;} .free_content_box .free_cont#half_free{border-bottom:none;} .free_content_box .free_cont .sub_page_title{font-size:15px; letter-spacing:-0.025em; margin-bottom:8px; font-weight: normal;} .free_content_box .free_cont img{width:100%; display:block;} .free_content_box .free_cont .novel_img{position:absolute; top:0; left:0; margin: auto;} .free_content_box .free_cont a{display:block; position:relative;} .free_content_box .free_cont li{margin:10px auto 0; max-width: 350px;} #sub_free .slick-list{overflow:visible; outline: none !important;} #sub_free .slider-nav{width:100%; background:#fff;} #sub_free .slider-nav .txt{width:25% !important; float:left; letter-spacing:-0.1em; text-align:center; font-weight:bold; padding:6px 0 4px; line-height:1.4; font-size:1.05em; border-left:1px solid #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_free .slider-nav .txt:first-child{border-left:none;} #sub_free .slider-nav .txt span{color:#585858; display:block;} #sub_free .slider-nav .slick-current{background:#d52b2c; color:var(--main-ft-color);} #sub_free .slider-nav .slick-current span{color:#fff !important;} #sub_free .slick-slide a:focus {outline:none;} #sub_free .slick-slide:focus {outline:none;} #sub_free .slider-for{width:100%;} #sub_free .slider-for img{width:100%; max-width:450px; margin:0 auto; display:block; cursor:pointer;} #sub_free .slider-for img{display:none;} #sub_free .slider-for div:first-child img{display:block;} .free_menu{width:100%; background:#fff; overflow:hidden;} .free_menu li{width:25% !important; float:left; } .free_menu li a{letter-spacing:-0.1em; display:block; text-align:center; font-weight:normal; padding:6px 0 4px; line-height:1.4; font-size:1.05em; border-left:1px solid #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .free_menu li:first-child a{border-left:none;} .free_menu a span{color:#585858; display:block;} .free_menu .active a{background:#d52b2c; color:var(--main-ft-color);} .free_menu .active a span{color:#fff !important;} /* 무료 리스트 04.07 */ #sub_free .free_cont1 ul{width:96%; margin:0 auto 10px;} #sub_free .free_cont1 ul:after{content:""; display:block; clear:both;} #sub_free .free_cont1 li{width:100%; border:1px solid #ddd; background:#fff; overflow:hidden; margin-top:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_free .free_cont1 li:nth-child(even){background:#f4f4f4;} #sub_free .free_cont1 a{display:block; padding:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_free .free_cont1 a:after{content:""; display:block; clear:both;} #sub_free .free_cont1 a>.con_box{width:100%; position:relative;} #sub_free .free_cont1 .img_box{width:72px; position:absolute; top:0; bottom:0; left:0; margin:auto; overflow:hidden;} #sub_free .free_cont1 .img_box img{width:100%; display:block;} #sub_free .free_cont1 .img_box .novel_img{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index:9;} #sub_free .free_cont1 .img_box .blurcover{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:80%; z-index:10;} #sub_free .free_cont1 .img_box .ebook_imgbox{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:100% auto;z-index:4;} #sub_free .free_cont1 .img_box .ebook_imgbox:before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(to top right, #555 60%, #fff);opacity:.8;z-index:1;} #sub_free .free_cont1 .img_box .ebook_imgbox .ebook_cover{display:block;position:relative;width:67%;height:100%;margin:0 auto;background-repeat:no-repeat;background-position:center;background-size:cover;z-index:2;} #sub_free .free_cont1 .img_box img.icon_19_patch{width: 17px !important; position: absolute; bottom: 0; margin-bottom: 3px; right: 3px; z-index: 99;} #sub_free .free_cont1 .txt_box{display:block;/* line-height:1.5; */ padding:5px 0; padding-left:80px; padding-right: 27%; letter-spacing:-0.05em;} #sub_free .free_cont1 .txt_box p{margin-bottom:3px; color:#676767; font-size:0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_free .free_cont1 .txt_box .title{font-size:1.1em; font-weight:bold; color:#2c2c2c;} #sub_free .free_cont1 .txt_box .writer{padding-top: 5px;} #sub_free .free_cont1 .go_btn{position:absolute; top:0; bottom:0; right:0; margin:auto; font-size: 1em; width: 25%;max-width: 120px; padding: 25px 0; height: 36px; text-align:center; letter-spacing: -0.05em;} #sub_free .free_cont1 .go_btn p{border: 1px solid var(--bg-fc-color); background: #fff; color: var(--bg-fc-color); padding: 8px 0px; text-align:center;} /* 무료 리스트 04.07 */ @media all and (min-width:320px) and (max-width:350px){ #sub_free .slider-nav .txt{font-size:0.95em;} .free_menu li a{font-size:0.95em;} } @media all and (min-width:400px){ .free_content_box .free_cont{overflow:hidden;} .free_content_box .free_cont li{width: 49%; float: left; margin: 10px 0.5% 0;} } @media all and (min-width:750px){ .free_content_box .free_cont li{width:32.3%} } @media all and (min-width:1200px){ .free_content_box .free_cont li{width:24%} } @media all and (min-width:320px) and (max-width:350px){ #sub_free .free_cont1 .go_btn{font-size: 13px;} } @media all and (min-width:601px){ #sub_free .free_cont1 li{width:49%; float:left; margin:0 0.5% 5px;} } @media all and (min-width:1200px){ #sub_free .free_cont1 li{width:32.3%; float:left; margin:0 0.5% 5px;} } /* 서브 무료 */ /* 선물함/무료 탭 */ #gift_free_tab{width:80%; margin:6px auto 10px; min-width:150px; border:1px solid var(--bg-fc-color); /* max-width: 300px; */overflow:hidden;} /* 2017-09-20 수정 */ #gift_free_tab ul{width:100%; overflow:hidden; display:-webkit-box;display:flex;} #gift_free_tab ul li{float:left; /* width:33.333%; */ -webkit-box-flex:1; flex:1; text-align:center; border-right:1px solid var(--bg-fc-color); box-sizing:border-box;}/* 2017-10-23 수정 */ #gift_free_tab ul li:last-child{border-right:none; /* width:33.14%; */} #gift_free_tab ul li a{display:block; padding:4px 0; font-size:1em; color:var(--bg-fc-color); background:#fff;} #gift_free_tab ul li a.on{background:var(--bg-fc-color); color:var(--main-ft-color);} /* 선물함/무료 탭 */ @media all and (min-width:320px) and (max-width:340px){ #gift_free_tab{width:100%; margin:7px auto; min-width:150px; border:1px solid var(--bg-fc-color); border-radius:3px; max-width: 300px;} /* 2017-09-20 수정 *//* 2017-10-23 수정 */ } /* 서브 경험야설 */ #content_wrap #sub_real{padding-top:2px;} #sub_real .sub_real_banner{width:100%;} #sub_real .sub_real_banner>div{width:100%; max-width:450px; margin:0 auto; position:relative;} #sub_real .sub_real_banner img{width:100%; max-width:450px; margin:0 auto; display:block;} #sub_real .sub_real_cont{width: 96%; margin: 10px auto 10px;} #sub_real .sub_real_cont>div{margin-top:10px;} #sub_real .sub_real_cont .cont_titile{font-size:13px; letter-spacing:-0.025em;} #sub_real .sub_real_cont .cont_titile span{font-size:15px;} #sub_real .sub_real_cont ul{width:100%;} #sub_real .sub_real_cont ul:after{content:""; display:block; clear:both;} #sub_real .sub_real_cont li{width: 100%; padding:5px 12px; border: 1px solid #ddd; background: #fff; border-radius: 5px; overflow: hidden; margin-top: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_real .sub_real_cont li:nth-child(even){background: #f4f4f4;} #sub_real .sub_real_cont li>a{display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position:relative;} #sub_real .sub_real_cont li>a:after{content:""; display:block; clear:both;} #sub_real .sub_real_cont li>a .con_box{width:100%; position:relative;} #sub_real .sub_real_cont .txt_box{display:block;/* line-height:1.5; */ padding:5px 0; padding-right:28%;} #sub_real .sub_real_cont .txt_box p{margin-bottom:3px; color:#676767; font-size:12px; letter-spacing:-0.05em;} #sub_real .sub_real_cont .txt_box .title{font-size:14px; font-weight:bold; color:#2c2c2c; margin-bottom:10px;} #sub_real .sub_real_cont .txt_box .txt{height: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #sub_real .sub_real_cont .sub_real_btn{position:absolute; top:0; bottom:0; right:0px; margin:auto; font-size:13px; width: 25%;max-width: 120px; /* padding: 20px 0; */ height: 28px; text-align:center; letter-spacing: -0.05em; /* width:54px; */} #sub_real .sub_real_cont .sub_real_btn p{border:1px solid var(--bg-fc-color); border-radius:5px; background:#fff; color:var(--bg-fc-color); padding: 5px 0px; } @media all and (min-width:320px) and (max-width:350px){ } @media all and (min-width:320px) and (max-width:360px){ } @media all and (min-width:600px){ } @media all and (min-width:750px){ #sub_real .sub_real_cont li{width:49%; float:left; margin:5px 0.5% 0;} } @media all and (min-width:1000px){ } @media all and (min-width:1200px){ #sub_real .sub_real_cont li{width:32.3%; float:left; margin:5px 0.5% 0;} } /* 서브 경험야설 */ /* 서브 */ /* 이벤트 */ .event_body{width:100%; display:block;} .event_title_box{border-bottom: 3px solid var(--bg-fc-color);}/* white 버전 */ /* 추가적립 이벤트 event_daily */ .event_dailly_wrap{max-width:1000px; margin:0 auto; position:relative;} .event_dailly_wrap h4{padding:10px; font-size:1.2em; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .event_dailly_wrap a{padding:3px 12px; line-height:23px; font-weight:bold; border:1px solid #ddd; color:#767676; position:absolute; top:0%; bottom:0%; margin:auto; right:5px; display:block; height:20px; font-size:1.1em; border-radius:5px; background:#fff;} .event_wrap_top{max-width:1200px; margin:0 auto; position:relative; border-bottom: 2px solid #e84e7e;} .event_daily_day{font-size:0.9em; margin-left:-3px;} .event_daily_li{display:block;width:14.2%; float:left; height:16.4%; position:relative;margin-right:0.08%; margin-bottom:0.2%;} .event_daily_month{height:100%; } @media all and (min-width:320px) and (max-width:340px){ .event_daily_day{font-size:0.8em; margin-left:-3px;} } @media all and (min-width:340px) and (max-width:360px){ .event_daily_day{font-size:0.8em; margin-left:-3px;} } @media all and (min-width:435px) and (max-width:600px){ .event_daily_day{font-size:0.9em; margin-left:-3px;} } @media all and (min-width:601px) and (max-width:810px){ .event_daily_day{font-size:1em; margin-left:2px;} .event_daily_month{height:98%; margin-top: 2px;} .event_daily_li{height:16.7%;} .event_dailly_wrap h4{padding:15px 10px; font-size:1.4em;} .event_dailly_wrap a{font-size:1.2em;} } /* 추가적립 이벤트 event_daily */ /* 본인인증 이벤트 event_cert */ .event_dailly_wrap{max-width:1000px; margin:0 auto; position:relative;} .event_dailly_wrap h4{padding:10px; font-size:1.2em; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .event_dailly_wrap a{padding:3px 12px; font-weight:bold; border:1px solid #ddd; color:#767676; position:absolute; top:0%; bottom:0%; margin:auto; right:5px; display:block; height:20px; font-size:1.1em; border-radius:5px; background:#fff;} .event_cert_top{max-width:800px;margin:20px auto 0;display:block;width:100%; position:relative;} .event_cert_top img{width:100%; display:block;} .event_cert_top a{position:absolute; width:60%; max-width:350px; margin-left:10px; left:5%; bottom:17%;} .event_cert_txt_wrap{width:100%; max-width: 800px; margin:0 auto;} .event_cert_txt{background:#434343; width:100%; text-shadow:none; color:var(--main-ft-color); padding:0 10px; font-size:0.9em; max-width: 800px; margin: 0 auto;} .event_cert_txt>p{font-size:1.1em;padding-top:10px;} .event_cert_txt ul{padding:10px 0; text-align:left;} .event_cert_txt li{margin:2px 0;} .event_cert_txt li .dot{display:inline-block; vertical-align: top;} .event_cert_txt li .txt{display:inline-block; width:95%;} @media all and (min-width:320px) and (max-width:360px){ .event_cert_top a{position:absolute; width:61%; left:3%; bottom:17%;} .event_cert_txt li{font-size:1em; letter-spacing:-0.05em;} } @media all and (min-width:435px) and (max-width:600px){ .event_cert_txt li br{display:none;} } @media all and (min-width:601px){ .event_cert_txt li br{display:none;} .event_cert_top a{left:9%; bottom:25%;} .event_cert_txt_wrap{padding:0 10px;} .event_cert_top{padding:0 10px;} .event_dailly_wrap h4{padding:15px 10px; font-size:1.4em;} .event_dailly_wrap a{font-size:1.2em;} } /* 본인인증 이벤트 event_cert */ /* 미션 이벤트 event_mission */ .event_dailly_wrap{max-width:1000px; margin:0 auto; position:relative;} .event_dailly_wrap h4{padding:10px; font-size:1.2em; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .event_dailly_wrap a{padding:3px 12px; font-weight:bold; border:1px solid #ddd; color:#767676; position:absolute; top:0%; bottom:0%; margin:auto; right:5px; display:block; height:20px; font-size:1.1em; border-radius:5px; background:#fff;} .event_mission{max-width:800px;margin:0 auto;display:block;width:100%;} .event_mission>img{width:100%; display:block;} .event_mission_txt{position:relative;} .event_mission_txt>img{width:100%; display:block;} .event_mission_txt p{color:#ffe400; position:absolute; right:17%; bottom:0; top:0; margin:auto; font-size:1.3em; font-weight:800; height:18px;} .event_mission_mid{position:relative;} .event_mission_mid>img{width:100%; display:block;} .event_mission_mid ul{position:absolute; bottom:18%; left:0; right:0; margin:auto; width:90%;padding-left: 3px;} .event_mission_mid ul li{position:relative; float:left;width:33%;} .event_mission_mid ul li a{ display:block; width:100%;} .event_mission_mid ul li a>img{width:100%;} .event_mission_mid ul li div{position:absolute; bottom:-17%; left:0; right:0; margin:auto; display:block; width: 90%;} .event_mission_mid ul li div img{width:100%;} .event_mission_mid ul li .mission_check{position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; width:70%;} .event_mission_btm{position:relative;width:100%; background:#ffe400;} .event_mission_btm>img{width:100%; display:block;} .event_mission_btm ul{position:absolute;left:0;right:0; margin:auto;width:90%;padding-left: 3px;} .event_mission_btm .event_mission_btm_ul1{top:8%;} .event_mission_btm .event_mission_btm_ul2{bottom:16%;} .event_mission_btm>ul li{position:relative; float:left;width:33%;} .event_mission_btm>ul li a{display:block; width:100%;} .event_mission_btm>ul li a>img{width:100%;} .event_mission_btm>ul li div{position:absolute; bottom:10px; left:0; right:0; margin:auto; width: 90%;} .event_mission_btm>ul li div img{width:100%;} @media all and (min-width:320px) and (max-width:360px){ .event_mission_txt p{font-size: 1em;height: 12px;} } @media all and (min-width:435px) and (max-width:600px){ .event_mission_txt p{font-size: 1.6em;height: 20px;} } @media all and (min-width:601px){ .event_mission{padding: 0 10px;} .event_dailly_wrap h4{padding:15px 10px; font-size:1.4em;} .event_dailly_wrap a{font-size:1.2em;} .event_mission_txt p{font-size: 2.3em; height: 24px;} } @media screen and (orientation:landscape) and (max-width:780px){ .event_mission_txt p{height:28px;} } /* 미션 이벤트 event_mission */ /* 공유 이벤트 event_share */ .event_share_wrap{max-width:1000px; margin:0 auto; position:relative;} .event_share_wrap h4{padding:10px; font-size:1.2em; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .event_share_wrap a{padding:3px 12px; font-weight:bold; border:1px solid #ddd; color:#767676; position:absolute; top:0%; bottom:0%; margin:auto; right:5px; display:block; height:20px; font-size:1.1em; border-radius:5px; background:#fff;} .event_share{max-width:800px;margin:20px auto 0;display:block;width:100%; position:relative;} .event_share>img{width:100%; display:block;} .event_share_top{position:relative;} .event_share_top>img{width:100%; display:block;} .event_share_top div{width:60%; position:absolute; bottom: 0; left: 9%; top: 0; margin: auto;max-height: 225px;} .event_share_top div ul{width:100%; overflow:hidden; float: left;} .event_share_top div ul li{float:left; margin:4px 3%; width:27%;} .event_share_top div ul li img{width:100%;} .event_share_mid{position:relative;width:100%;} .event_share_mid>img{width:100%; display:block;} .event_share_mid div{margin:auto;position:absolute; bottom:2%; left:0px; right:0; height:30px; height: 45px; background: none; border: none;} .event_share_mid .ui-input-text{margin:0; width:100%; padding: 5px 0 6px; font-size: 17px; position: relative;height:100%; background: none;} .event_share_mid input{ border:none; position: absolute; top: 0; left: 0;height: 100%; min-height: inherit;padding: 0px 30px; background: none;} .event_share_mid a{display:block; margin:20px auto;} .event_share_mid a img{display:block;width:100%; max-width: 300px; margin:0 auto;} .event_mission_btm{position:relative;width:100%; background:#ffe400;} .event_mission_btm>img{width:100%; display:block;} .event_mission_btm ul{position:absolute;left:0;right:0; margin:auto;width:90%;padding-left: 3px;} .event_mission_btm .event_mission_btm_ul1{top:8%;} .event_mission_btm .event_mission_btm_ul2{bottom:16%;} .event_mission_btm>ul li{position:relative; float:left;width:33%;} .event_mission_btm>ul li a{display:block; width:100%;} .event_mission_btm>ul li a>img{width:100%;} .event_mission_btm>ul li div{position:absolute; bottom:10px; left:0; right:0; margin:auto; width: 90%;} .event_mission_btm>ul li div img{width:100%;} .event_share_txt{width:100%; text-shadow:none; color:var(--main-ft-color); font-size:0.9em; max-width: 800px; margin: 0 auto 10px;} .event_share_txt img{width:100%;} .event_share_txt>p{font-size:1.1em;padding-top:10px;} .event_share_txt ul{padding:10px 0; text-align:left;} .event_share_txt li{margin:2px 0;} .event_share_txt li .dot{display:inline-block; vertical-align: top;} .event_share_txt li .txt{display:inline-block; width:95%;} @media all and (min-width:320px) and (max-width:340px){ .event_share_top div{max-height: 200px;} .event_share_mid div{bottom:0;} .event_share_mid a{margin:10px auto;} .event_share_mid a img{max-width: 280px;} } @media all and (min-width:341px) and (max-width:360px){ .event_share_top div{max-height: 220px;} } @media all and (min-width:414px) and (max-width:500px){ .event_share_top div{max-height: 245px;} .event_share_mid input{padding:0 35px;} .event_share_mid div{bottom:4%;} } @media all and (min-width:501px) and (max-width:600px){ .event_share{max-width: 520px;} .event_share_top div{max-height: 290px;} .event_share_mid input{padding:0 40px;} .event_share_mid div{bottom:7%;} .event_share_top div ul li{max-width: 60px; margin: 15px;} .event_share_mid a{margin: 40px auto;} .event_share_mid a img{max-width: 325px;} } @media all and (min-width:601px){ .event_share{max-width: 520px;} .event_share_top div{max-height: 290px;} .event_share_mid input{padding:0 40px;} .event_share_mid div{bottom:7%;} .event_share_top div ul li{max-width: 60px; margin: 15px;} .event_share_mid a{margin: 40px auto;} .event_share_mid a img{max-width: 325px;} } /* 공유 이벤트 event_share */ /* 리뷰 이벤트 event_review */ .event_review_top{max-width:800px;margin:20px auto 0;display:block;width:100%; position:relative;background: #ededed;} .event_review_top img{width:100%; display:block;} .event_review_top a{position:absolute; width:65%; max-width:350px; left:0; right:0; margin:auto;bottom:-4%; z-index:99;} .event_review_btm{max-width:800px;padding: 20px 0 5px; background: #ededed; margin: 0px auto 0;display:block;width:100%; position:relative;} .event_review_btm img{width:100%; display:block;} .event_review_txt_wrap{width:100%; max-width: 800px; margin:0 auto;} .event_review_txt{background:#f5f5f5; width:100%; text-shadow:none; color:#666666; padding:0 10px; font-size:0.9em; max-width: 800px; margin: 0 auto 10px;} .event_review_txt>p{font-size:1.1em;padding-top:10px;} .event_review_txt ul{padding:10px 0; text-align:left;} .event_review_txt li{margin:2px 0;} .event_review_txt li .dot{display:inline-block; vertical-align: top;} .event_review_txt li .txt{display:inline-block; width:95%;} @media all and (min-width:320px) and (max-width:360px){ .event_review_top a{position:absolute; width:61%; bottom:-4%;} .event_review_txt li{font-size:1em; letter-spacing:-0.05em;} } @media all and (min-width:435px) and (max-width:600px){ .event_review_txt li br{display:none;} .event_review_top a{position:absolute; bottom:-3%;} } @media all and (min-width:601px){ .event_review_txt li br{display:none;} .event_review_top a{ bottom:-1%; max-width: 370px;} .event_review_txt_wrap{padding:0 10px;} .event_review_top{margin-top:10px; padding:10px 10px 0;} } /* 리뷰 이벤트 event_review */ /* 마일리지 이벤트 event_mileage */ .event_mileage_wrap{max-width:1000px; margin:0 auto; position:relative;} .event_mileage_wrap h4{padding:10px; font-size:1.2em;font-weight:500; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .event_mileage_wrap a{padding:3px 12px; font-weight:500; border:1px solid var(--main-line-color); color:var(--main-ft-fc-color); position:absolute; top:50%; /* margin:auto; */ right:5px; display:block; font-size:1em; border-radius:5px; background:var(--opt-bg-color);transform:translateY(-50%);} .event_mileage_top{max-width:800px;margin:0 auto;display:block;width:100%; position:relative;} /* 2017-09-21 수정 */ .event_mileage_top img{width:100%; display:block;} .event_mileage_top a{position:absolute; width:90%; max-width:550px; margin-left:10px; left:0%; right:0; margin:auto; bottom:4%;} .event_mileage_top .em_new_btn{position:absolute;bottom:35.87%;display:block;width:46.2%;} .event_mileage_top.edited .em_new_btn{bottom:22%;} .event_mileage_top .em_new_btn1{left:3.2%;right:auto;} .event_mileage_top .em_new_btn2{right:2.8%;left:auto;} .event_mileage_top .em_new_btn img{display:block;width:100%;cursor:pointer;} .event_mileage_txt_wrap{width:100%; max-width: 800px;background:#2d2d2d; margin:0 auto;} .event_mileage_txt{width:100%; text-shadow:none; color:var(--main-ft-color); padding:20px; font-size:0.88em; max-width: 800px; margin: 0 auto;} .event_mileage_txt>p{font-size:1.03em;padding-top:10px;} .event_mileage_txt ul{padding:5px 0 10px; text-align:left;} .event_mileage_txt li{margin:2px 0;} .event_mileage_txt li + li{margin-top:4px;} .event_mileage_txt li .dot{display:inline-block; vertical-align: top;} .event_mileage_txt li .txt{display:inline-block; width:95%;} .event_mileage_point{max-width:800px;margin:20px auto 0;display:block;width:100%; position:relative;} .event_mileage_point img{width:100%; display:block;} .event_mileage_point_btn{position:absolute; width:80%; max-width:550px; margin-left:10px; left:0%; right:0; margin:auto; bottom:37%; text-align:center;} .event_mileage_point_btn a{display:inline-block; width: 44%;} .event_mile_point_txt_wrap{width:100%; max-width: 800px; margin:0 auto;} .event_mile_point_txt{background:#464646; width:100%; text-shadow:none; color:var(--main-ft-color); padding:0 10px; font-size:0.88em; max-width: 800px; /* letter-spacing:-0.025em; */margin: 0 auto 10px;} .event_mile_point_txt>p{font-size:1.03em;padding-top:5px;} .event_mile_point_txt ul{padding:5px 0 5px; text-align:left;} .event_mile_point_txt li{margin:2px 0;} .event_mile_point_txt li .dot{display:inline-block; vertical-align: top;} .event_mile_point_txt li .txt{display:inline-block; width:95%;} .event_mile_point_txt li .add{display:inline-block; width:75%;} @media all and (min-width:320px) and (max-width:360px){ .event_mileage_txt li{font-size:1em; letter-spacing:-0.05em;} .event_mile_point_txt li .add{width: 70%;} } @media all and (min-width:435px) and (max-width:600px){ .event_mileage_txt{font-size:0.9em; } } @media all and (min-width:601px){ .event_mileage_txt{font-size:0.9em; } .event_mileage_txt_wrap{padding:0 10px;} .event_mileage_top{padding:0 10px;} .event_mileage_wrap h4{padding:15px 10px; font-size:1.3em;} } /* 마일리지 이벤트 event_mileage */ /* 미소설 로그인 이벤트 event_melogin */ .event_melogin_wrap{max-width:1000px; margin:0 auto; position:relative;} .event_melogin_wrap h4{padding:10px; font-size:1.2em; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .event_melogin_wrap a{padding:3px 12px; line-height:23px; font-weight:bold; border:1px solid #ddd; color:#767676; position:absolute; top:0%; bottom:0%; margin:auto; right:5px; display:block; height:20px; font-size:1.1em; border-radius:5px; background:#fff;} .event_melogin_top{max-width:800px;margin:20px auto 0;display:block;width:100%; position:relative;} .event_melogin_top img{width:100%; display:block;} .event_melogin_top a{position:absolute; width:55%; max-width:550px; margin-left:10px; left:0%; right:0; margin:auto; bottom:0%;} .event_melogin_mid{max-width:800px;margin:0px auto 0;display:block;width:100%; position:relative;} .event_melogin_mid img{width:100%; display:block;} .event_melogin_txt_wrap{max-width:800px;margin:0px auto 20px;display:block;width:100%; position:relative;} .event_melogin_txt_wrap img{width:100%; display:block;} .event_melogin_txt{margin:5px auto; width:100%; text-shadow:none; color:#434343; padding:0 13px; font-size:0.9em; max-width: 800px;letter-spacing: -0.025em; } .event_melogin_txt>p{font-size:1.03em;padding-top:10px;} .event_melogin_txt ul{ text-align:left; } .event_melogin_txt li{margin:2px 0;} .event_melogin_txt li .dot{display:inline-block; vertical-align: top;} .event_melogin_txt li .txt{display:inline-block; width:95%;} .header_event{width: 100%; border: none; background: none; top: 0; position: fixed; left: 0; right: 0; z-index:99999;} .header_event .top{display:block; height: 45px; width: 100%;} .header_event ul{width: 100%; border: 1px solid transparent; border-top: none; height: 45px;} .header_event ul li{float: left; width: 20%; text-align: center; height:100%; padding: 12px 0; font-size: 1.2em; color:transparent;} .header_event ul li span{position:relative; padding: 3px 7px; border: 1px solid transparent; border-radius: 30px;} .nav_adult_btn{display:block; position:absolute; top:-20px; right:0;margin:auto; } @media all and (min-width:320px) and (max-width:360px){ .event_melogin_txt li{font-size:1em; letter-spacing:-0.05em;} .header_event ul li{font-size: 1.1em; letter-spacing: -0.025em;} } @media all and (min-width:435px) and (max-width:600px){ .event_melogin_txt{font-size:0.9em; } } @media all and (min-width:601px){ .event_melogin_txt{font-size:0.9em; } .event_melogin_txt_wrap{padding:0 10px;} .event_melogin_top{padding:0 10px;} .event_melogin_mid{padding:0 10px;} .event_melogin_wrap h4{padding:15px 10px; font-size:1.4em;} .event_melogin_wrap a{font-size:1.2em;} } #melogin_wrap{width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999999;} #melogin_wrap .layer_wrap{width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; overflow: scroll;} #melogin_wrap .layer_wrap .melogin_box{width:300px; margin:40% auto 10px; position:relative; z-index:999;} #melogin_wrap .layer_wrap .melogin_box img{display:block; width:100%;} #melogin_wrap .layer_wrap .melogin_box a{display:block; width:90%; margin:0 auto; position:absolute; left:0; right:0; bottom:5%;} #melogin_wrap .layer_bg{width: 100%; height: 100%; background: url("https://cdn.metoon.co.kr/img/tm_img_back.png"); position: absolute; top: 0; left: 0;} /* 미소설 로그인 이벤트 event_melogin */ /* 미소설 카카오 이벤트 event_kakao */ .event_kakao_wrap{max-width:1000px; margin:0 auto; position:relative;} .event_kakao_wrap h4{padding:10px; font-size:1.2em; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .event_kakao_wrap a{padding:3px 12px; line-height:23px; font-weight:bold; border:1px solid #ddd; color:#767676; position:absolute; top:0%; bottom:0%; margin:auto; right:5px; display:block; height:20px; font-size:1.1em; border-radius:5px; background:#fff;} .event_kakao_top{max-width:800px;margin:20px auto 0;display:block;width:100%; position:relative;} .event_kakao_top img{width:100%; display:block;} .event_kakao_top a{position:absolute; width:55%; max-width:550px; margin-left:10px; left:0%; right:0; margin:auto; bottom:0%;} .event_kakao_txt_wrap{max-width:800px;margin:0px auto 20px;display:block;width:100%; position:relative;} .event_kakao_txt_wrap img{width:100%; display:block;} .event_kakao_txt{margin:0px auto; width:100%; text-shadow:none; color:#434343; padding:5px; 13px; font-size:0.9em; max-width: 800px;letter-spacing: -0.025em; background:#332826;} .event_kakao_txt>p{font-size:1.03em;padding-top:10px;} .event_kakao_txt ul{ text-align:center; } .event_kakao_txt li{margin:2px 0; color:var(--main-ft-color);} .event_kakao_txt li .dot{display:inline-block; vertical-align: top;} .event_kakao_txt li .txt{display:inline-block; } @media all and (min-width:320px) and (max-width:360px){ .event_kakao_txt li{font-size:1em; letter-spacing:-0.05em;} } @media all and (min-width:435px) and (max-width:600px){ .event_kakao_txt{font-size:0.9em; } } @media all and (min-width:601px){ .event_kakao_txt{font-size:0.9em; } .event_kakao_top{padding:0 10px;} .event_kakao_wrap h4{padding:15px 10px; font-size:1.4em;} .event_kakao_wrap a{font-size:1.2em;} } /* 미소설 카카오 이벤트 event_kakao */ /* 행운의 코인뽑기 event_coin_roulette_detail */ .event_roulette_wrap{max-width:1000px; margin:0 auto; position:relative;} .event_roulette_wrap h4{padding:10px; font-size:1.2em; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .event_roulette_wrap a{padding:3px 12px; font-weight:bold; border:1px solid #ddd; color:#767676; position:absolute; top:0%; bottom:0%; margin:auto; right:5px; display:block; height:20px; font-size:1.1em; border-radius:5px; background:#fff;} .event_roulette_top{max-width:400px;margin:20px auto 0;display:block;width:100%; position:relative;} .event_roulette_top img{width:100%; display:block;} .event_roulette_top a{position:absolute; width:55%; max-width:550px; margin-left:10px; left:0%; right:0; margin:auto; bottom:0%;} .event_roulette_txt_wrap{max-width:800px;margin:0px auto 20px;display:block;width:100%; position:relative;} .event_roulette_txt_wrap img{width:100%; display:block;} .event_roulette_txt{margin:0px auto; width:100%; text-shadow:none; color:#434343; padding:5px; 13px; font-size:0.9em; max-width: 800px;letter-spacing: -0.025em; background:#64bef2;} .event_roulette_txt>p{font-size:1.03em;padding-top:10px;} .event_roulette_txt ul{ text-align:center; } .event_roulette_txt li{margin:2px 0; color:var(--main-ft-color);} .event_roulette_txt li .dot{display:inline-block; vertical-align: top;} .event_roulette_txt li .txt{display:inline-block; } @media all and (min-width:320px) and (max-width:360px){ .event_roulette_txt li{font-size:1em; letter-spacing:-0.05em;} } @media all and (min-width:435px) and (max-width:600px){ .event_roulette_txt{font-size:0.9em; } } @media all and (min-width:601px){ .event_roulette_txt{font-size:1em; } .event_roulette_top{padding:0 10px;} .event_roulette_wrap h4{padding:15px 10px; font-size:1.4em;} .event_roulette_wrap a{font-size:1.2em;} } /* 행운의 코인뽑기 event_coin_roulette_detail */ /* 하나멤버스 이벤트 event_hana */ .event_dailly_wrap{max-width:1000px; margin:0 auto; position:relative;} .event_dailly_wrap h4{padding:10px; font-size:1.2em; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .event_dailly_wrap a{padding:3px 12px; font-weight:500; border:1px solid var(--main-line-color); color:var(--main-ft-fc-color); position:absolute; top:50%;bottom:auto; right:5px; display:block;height:auto;line-height:1.2; font-size:1em; border-radius:5px; background:var(--opt-bg-color);transform:translateY(-50%);box-sizing:border-box;} .event_hana_top{max-width:800px;margin:20px auto 0;display:block;width:100%; position:relative;} .event_hana_top img{width:100%; display:block;} .event_hana_top a{position: absolute; width: 65%; max-width:450px; margin-left: 10px; left: 0; top: 13.35%; right: 0; margin: auto;} @media all and (min-width:601px){ .event_hana_top{padding:0 10px;} .event_dailly_wrap h4{padding:15px 10px; font-size:1.3em;} } /* 하나멤버스 이벤트 event_hana */ /* ok캐쉬백 이벤트 event_okcashbag */ .event_okcashbag_top{max-width:800px;margin:0 auto;display:block;width:100%; position:relative;} .event_okcashbag_top img{width:100%; display:block;} .event_okcashbag_top a{position:absolute; width:80%; max-width:550px; margin-left:10px; left:0%; right:0; margin:auto; bottom:12%;} .event_okcashbag_top a>p{color:var(--main-ft-color); letter-spacing:-0.025em; font-size:15px; text-align:center; font-weight:bold; margin:8px auto; text-shadow: 1px 1px 1px #000;} .event_okcashbag_top a>p span{color:#ffea00;} @media all and (min-width:600px){ .event_okcashbag_top a{bottom: 14%;} .event_okcashbag_top a>p{font-size: 18px; margin:10px auto;} } @media all and (min-width:750px){ .event_okcashbag_top a>p{margin:15px auto;} } /* ok캐쉬백 이벤트 event_okcashbag */ /* 이벤트 */ /* #me_sidejoincont_wrap */ #me_sidejoincont_wrap .select_title {height: 44px; padding: 10px 0px 10px; background: #E84D7D; color: #fff; z-index: 99999; box-sizing: border-box; font-size: 1.1em; font-weight: bold; text-align: center; letter-spacing: -0.025em; } #me_sidejoincont_wrap {background: #fff; float: left; box-sizing: border-box; z-index: 99999; padding: 0px 0 0px; overflow-y: auto; font-size: 1.1em;} #me_sidejoincont_wrap #me_sidelog_wrap .join_txt {display: block; width: 100%; font-size: 1.1em; padding: 14px 0 15px; font-weight: normal; color: #676767; background: url("https://cdn.metoon.co.kr/mimg/join_title_img.png") no-repeat 0 20px; margin: 0; background-size: 100px;} #me_sidejoincont_wrap #me_sidelog_wrap .join_txt span {font-size: 0.8em; letter-spacing: -0.025em; display: block; padding-top: 40px;} #me_sidejoincont_wrap #me_sidelog_wrap .join_form {width: 100%; padding-bottom: 23px; border-bottom: 1px solid #ddd; overflow: hidden;} #me_sidejoincont_wrap #me_sidelog_wrap .join_form .userTxt {width: 100%; background: #eee; border: 1px solid #e8e8e8; line-height: 2; margin-bottom: 5px; font-size: 1em; border-radius: 5px; padding: 5px; letter-spacing:-0.025em;} #me_sidejoincont_wrap #me_sidelog_wrap .join_form .pop_join_btn {display: block; width: 100%; padding: 9px 0 10px; background: #f74a7d; border: 1px solid #dd275d; margin-top: 20px; font-size: 1.2em; font-weight: 500; color: #fff; margin: 10px auto 5px; border-radius: 3px; text-align: center; box-sizing: border-box;} #me_sidejoincont_wrap #me_sidelog_wrap .check_box{width: 12px; box-sizing: border-box; margin-left: 1px; vertical-align: text-top; display: inline-block; margin: 0;} #me_sidejoincont_wrap #me_sidelog_wrap .check_input {margin: 0px; font-size: 0.85em; letter-spacing: -0.025em; display: inline-block; font-weight: 500; padding: 1% 0; border: none; color: #676767; background: none; text-shadow: none;} #me_sidejoincont_wrap #me_sidelog_wrap p{font-size:1.0em; letter-spacing:-0.025em;} #me_sidejoincont_wrap #me_sidelog_wrap .mail{float:left;font-size:0.9em; margin-right:10px; display:block; font-weight:bold; color:#676767;} #me_sidejoincont_wrap #me_sidelog_wrap .mail a{color:#676767;} #me_sidejoincont_wrap #me_sidelog_wrap .color_pink{display:block; float:left; font-size:1.0em;} #me_sidejoincont_wrap #me_sidelog_wrap .tell{display:block; float:left; color:#676767;} #me_sidejoincont_wrap #me_sidelog_wrap .tell span{vertical-align:top;} #me_sidejoincont_wrap #me_sidelog_wrap .sns_txt{font-weight: bold; color: #747474; font-size: 0.9em; letter-spacing:-0.09em; display: block; width: 100%; margin: 10px 0;} #me_sidejoincont_wrap #me_sidelog_wrap .sns_join {width: 100%; float: left; text-align: center; padding-bottom: 10px; margin-top: 0;} #me_sidejoincont_wrap #me_sidelog_wrap .sns_join li{width: 30%; margin: 5px 0; display: inline-block; padding: 0; float: left; border:none;} #me_sidejoincont_wrap #me_sidelog_wrap .sns_join li a {display: block;padding: 0; width: 100%; font-weight: bold; font-size: 1.3em; text-indent: -999999999em; overflow: hidden; height: 45px; color: #fff;} #me_sidejoincont_wrap #me_sidelog_wrap .naver_btn a {background: url("https://cdn.metoon.co.kr/mimg/naver_logo.png") no-repeat center, #1ec800; border: 1px solid #1cb900;} #me_sidejoincont_wrap #me_sidelog_wrap .fb_btn a {background: url("https://cdn.metoon.co.kr/mimg/fb_logo.png") no-repeat center, #395a9c; border: 1px solid #2c4b87;} #me_sidejoincont_wrap #me_sidelog_wrap .sns_join .fb_btn {margin: 5px 3%;} #me_sidejoincont_wrap #me_sidelog_wrap .google_btn a {background: url("https://cdn.metoon.co.kr/mimg/google_logo.png") no-repeat center, #db4431; border: 1px solid #d03c2a;} #me_sidejoincont_wrap .mm-listview>li:not(.mm-divider):after{border:none !important;} /* #me_sidejoincont_wrap */ /* 플로팅배너 */ #floating_banner{position: fixed; height:200px;bottom: 0; right: 10px; z-index: 999;} #floating_banner a{display:block;} #floating_banner img{margin-top:-30%;} #floating_banner>div{width:100%; height:100%; position:relative;} #floating_banner .btn_floating_banner{position: absolute; top:8%; right:11%; z-index:9999;margin-top:-30%;} @media screen and (orientation:landscape) and (max-width:780px){ #floating_banner img{margin:0;} #floating_banner .btn_floating_banner{margin:0;} } /* 플로팅배너 */ /* 도전메인 */ #content_wrap #chall_main{padding-top:53px;} #chall_main .cont_title{margin:5px auto;} #chall_main .cont_title{display:none;} #s_chall_main_banner{display:block;} #l_chall_main_banner{display:none;} .chall_main_banner{width: 100%; display: block; border-right: 0; padding: 0px 0 7px; border-left: 0;} .chall_main_banner #chall_mb_all{position:relative;} .chall_main_banner ul{width:100%;} .chall_main_banner li{max-width: 51.5%; left:-3%; margin-left:-1%;padding:3px; border-radius:5px; background:#fff; border:1px solid #ddd;} .chall_main_banner li a{position:relative; display:block; color:#4e4e4e; font-weight:normal; font-size: 1.0em; letter-spacing: -0.09em; max-width:100%;} .chall_main_banner li a>div{position:relative; border-radius:5px; overflow:hidden;} .chall_main_banner li a>div img{width:100%; display:block; border-radius:5px;} .chall_main_banner li a>div .novel_img{position:absolute; top:0; left:0; right:0;} .chall_main_banner li a>div .nobel_title{color:var(--main-ft-color); display:block; font-size:1em; font-weight:normal;} .chall_main_banner li .txt_box{ width:100%; padding:10px 5px 10px; position:relative;} .chall_main_banner li .txt_box p{color:#2d2d2d; margin:auto; width:100%; text-align:center; font-size:1.0em; font-weight:normal;min-height:60px; letter-spacing: -0.1em; min-height:90px;} .chall_main_banner li .txt_box p .nobel_title{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom:10px; position: relative; color:#2d2d2d; display:block; font-size:1.2em; font-weight:bold; bottom:inherit; right:inherit;} .chall_main_banner li .txt_box p br{display:none;} .chall_main_banner li .txt_box p .tag_genre{display:block; background:#E84D7D; padding:1px 0; text-align:center; width:50px;color:var(--main-ft-color); font-size:0.8em; font-weight:normal; position: absolute; bottom:9px; right:5px; border-radius:3px;} .chall_main_banner li .txt_box p .writer{display:block; padding:1px 0; text-align:center; font-size:0.95em; font-weight:normal; position: absolute; bottom: 10px; margin-top: 0; left: 0; right: 0; margin: auto;} .chall_main_banner .bx-wrapper{margin: 0 auto;} .chall_main_banner .bx-wrapper .bx-pager.bx-default-pager{top:90%; left:0; right:0; margin:auto; text-align:center; position:absolute; padding:0;} .chall_main_banner .bx-pager-item{width: 15px; height: 15px; margin:0 7px;} .chall_main_banner li a>div .patch_chall{width:17%; position:absolute; top:0; left:5px; border-radius:0; max-width:35px;} .chall_main_banner li .img_backbox {position: absolute; top: 0; left: 0; right: 0; height: 100%; background: url("https://cdn.metoon.co.kr/mimg/img_back_sm4.png") repeat-x 100% 100%; background-size: 100% 100%;} .chall_main_banner{ position: absolute; top: 0px;} /* 도전 tab ul */ .chall_banner_new{width:100%;} .chall_banner_new li{left:-3%; margin-left:-1%;padding:3px; border-radius:5px; background:#fff; border:1px solid #ddd;} .chall_banner_new li a{position:relative; display:block; width:100%; color:#4e4e4e; font-weight:normal; font-size: 1.0em; letter-spacing: -0.09em; max-width:100%;} .chall_banner_new li a>div{position:relative; border-radius:5px; overflow:hidden;} .chall_banner_new a>div img{width:100%; display:block; border-radius:5px;} .chall_banner_new a>div .novel_img{position:absolute; top:0; left:0; right:0;} .chall_banner_new li a>div .img_txt_box{position: absolute; bottom: 10px; right:10px; margin: auto; width:90%;} .chall_banner_new li a>div .img_txt_box .nobel_title{text-align: right; color:var(--main-ft-color); display:block; font-size:1em; font-weight:normal; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .chall_banner_new li a>div .img_txt_box .writer{display:block; color:var(--main-ft-color); padding:1px 0 5px; text-align:right; font-size:1em; font-weight:normal; } .chall_banner_new li .txt_box{ width:100%; padding:10px 5px 10px; position:relative; overflow:visible;} .chall_banner_new li .txt_box p{color:#2d2d2d; margin:auto; width:100%; text-align:center; font-size:1.0em; font-weight:normal;min-height:60px; letter-spacing: -0.1em;} .chall_banner_new li .txt_box p .nobel_title{max-width: none; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom:10px; position: relative; color:#2d2d2d; display:block; font-size:1.2em; font-weight:bold; bottom:inherit; right:inherit;} .chall_banner_new li .txt_box p br{display:none;} .chall_banner_new li .txt_box p .tag_genre{display:block; background:#E84D7D; padding:1px 0; text-align:center; width:50px;color:var(--main-ft-color); font-size:0.8em; font-weight:normal; position: absolute; bottom:9px; right:5px; border-radius:3px;} .chall_banner_new li .txt_box p .writer{display:block; padding:1px 0; text-align:center; font-size:0.95em; font-weight:normal; position: absolute; bottom: 10px; margin-top: 0; left: 0; right: 0; margin: auto;} .chall_banner_new li .txt_box .icon_19_patch{position:absolute; bottom:100%; left:7px; margin-bottom:7px; width:12%; max-width:30px; z-index:99;} .chall_banner_new .bx-wrapper{margin: 0 auto;} .chall_banner_new .bx-wrapper .bx-pager.bx-default-pager{top:90%; left:0; right:0; margin:auto; text-align:center; position:absolute; padding:0;} .chall_banner_new .bx-pager-item{width: 15px; height: 15px; margin:0 7px;} .chall_banner_new li a>div .patch_chall{width:17%; position:absolute; top:0; left:5px; border-radius:0; max-width:50px; z-index: 1000;} .chall_banner_new li .img_backbox {position: absolute; top: 0; left: 0; right: 0; height: 100%; background: url("https://cdn.metoon.co.kr/mimg/img_back_sm4.png") repeat-x 100% 100%; background-size: 100% 100%;} @media all and (min-width:320px) and (max-width:350px){ .chall_banner_new li .txt_box p{font-size:0.95em;} } @media all and (min-width:320px) and (max-width:360px){ .chall_banner_new li .txt_box p .nobel_title{font-size:1.15em;} .chall_banner_new li a>div .nobel_title{font-size: 0.95em;} } .chall_banner_new li a>div #list19_blind{position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; background: #fff; z-index: 999; border: 1px solid #ddd;} .chall_banner_new li a>div #list19_blind>div{width: 100%; height: 100%; position: relative;} .chall_banner_new li a>div #list19_blind .list19_blind_mark{width: 70%; max-width: 180px; position: absolute; top: 25px; right: 0; left: 0; margin: auto;} @media all and (min-width:750px){ .chall_banner_new li a>div #list19_blind .list19_blind_mark{top: 0; bottom: 0;} } @media all and (min-width:1251px){ .chall_banner_new li a>div #list19_blind .list19_blind_mark{top: 0; bottom: 0;} } /* 도전 tab ul */ .chall_main_banner1{display:none;} #chall_list_wrap .chall_list_tab{position:relative; } #chall_list_wrap{width:96%; overflow:hidden; margin:0 auto;} /* 도전 수정전 */ #chall_list_wrap .chall_list_tab{background:#fff; box-sizing: border-box;overflow: hidden; border-radius:3px; border:1px solid #ddd; width:100%; position:relative;} #chall_list_wrap .chall_list_tab div{width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; height:42px;position: relative;} #chall_list_wrap .chall_list_tab ul{display: table; height: 40px; padding: 0 15px; white-space: nowrap; position:absolute; top:0; bottom:0; left:0; margin:auto; width: 100%; box-sizing: border-box;} #chall_list_wrap .chall_list_tab li{display: table-cell; margin: 0; width: 200px; white-space: nowrap; text-align: center;} #chall_list_wrap .chall_list_tab a{color:#9e9e9e; font-weight:bold; padding:10px; font-size:1.15em; display: block;} #chall_list_wrap .chall_list_tab .on{color:#E84D7D;} #chall_list_wrap .chall_list_tab span{position:absolute; top:0;display: block; width: 20px; height: 40px;} #chall_list_wrap .chall_list_tab .chall_grad_left{left:0; background:url("https://cdn.metoon.co.kr/mimg/chall_grad_left.png") no-repeat 100% 0;} #chall_list_wrap .chall_list_tab .chall_grad_right{right:0; background:url("https://cdn.metoon.co.kr/mimg/chall_grad_right.png") no-repeat 0 0;} #chall_list_wrap .big_li{width:48%;} #chall_list_wrap .sm_li{width:12%;} .chall_list_box_title{overflow:hidden; margin:10px auto; width:100%;} .chall_list_box_title li{float:left; width:20%; text-align:center; padding:10px 0; font-size:1.1em; letter-spacing:-0.1em; font-weight:bold;} .chall_list_box_title{background:var(--bg-fc-color); color:var(--main-ft-color);}/* white 버전 */ .chall_list_box_cont>li{overflow:hidden; margin:5px auto; width:100%; border:1px solid #ddd; box-sizing: border-box;} .chall_list_box_cont>li li{ color:#777; float:left; width:20%; text-align:center; padding:10px 0;ont-size:1em; letter-spacing:-0.09em; font-weight:bold; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .chall_list_box_cont>li:nth-of-type(odd){background:#fff;} .chall_list_box a{display:block; overflow:hidden;} #chall_list_wrap .chall_list_box_cont .big_li{color:#3c3c3c; text-align:left;} #chall_list_wrap .chall_list_box_cont .sm_li{color:#3c3c3c; font-style: italic;} #chall_list_wrap .chall_list_box_cont .big_li span{padding:0 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; max-width: 95%;} #chall_list_wrap .chall_list_box_cont .big_li .icon_19_patch{margin-left: 3px; vertical-align: text-top; width: 13px} #chall_list_wrap .chall_list_box_cont .big_li .adult_patch{background: red; color: #fff; font-size: 0.8em; letter-spacing: -0.09em; padding: 1px 3px 1px 2px; border-radius: 35px; vertical-align: top; display: inline-block; margin-left: 3px;} #chall_list_wrap .chall_list_tab li a .adult_patch{background:red; color:var(--main-ft-color); font-size:0.8em; letter-spacing:-0.09em; padding:1px 3px 1px 2px; border-radius:35px; vertical-align: top; display: inline-block; margin-left:3px;} #chall_list_wrap .chall_list_tab li a span{position:relative; width: auto; height: auto;} #chall_list_wrap .chall_list_tab li a .icon_19_patch{width: 16px;vertical-align: middle;margin-left: 3px; margin-top:-3px;} #chall_list_wrap .detail_list_more{width: 100%; float: left; background: #f5f5f5;} #chall_list_wrap .detail_list_more a{box-sizing: border-box; width: 100%; display: block; text-align: center; color: var(--bg-fc-color); background: #fff; padding: 7px 0 7px; font-size: 1.1em; border: 1px solid var(--bg-fc-color); border-radius: 5px; margin: 5px auto; text-shadow: none; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}/* white 버전 */ #chall_list_wrap .detail_list_more p{font-weight: bold; display: inline-block; text-align:center;} #chall_list_wrap .detail_list_more img{width: 16px; display: inline-block; position: absolute; top: 0px; bottom: 0; margin: auto; padding-left: 5px;} #new_formal{width:100%; overflow: hidden; margin:5px auto 0; padding: 10px 0;} #new_formal:after{clear:both; display:block; content:"";} #new_formal h4{background:#7c7c7c; text-align:center; border-radius:3px; padding: 10px 0; font-size: 1.1em; letter-spacing: -0.1em; font-weight: bold; color:var(--main-ft-color);} #new_formal .new_formal_list{margin-top:5px; border:1px solid #ddd; border-radius:3px; background:#fff; overflow:hidden;} #new_formal .new_formal_list>li{width:100%; float:left; border-bottom:1px solid #ddd;} #new_formal .new_formal_list>li:last-child{border:none;} #new_formal .new_formal_list>li a{padding:10px 0; display:block; float:left; width:100%;} #new_formal .new_formal_list ul li{float:left; text-align:center; color: #777; width: 20%; letter-spacing: -0.09em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: bold;} #new_formal .new_formal_list ul .big_li{width: 48%; color: #3c3c3c; text-align: left;} #new_formal .new_formal_list ul .sm_li{width: 12%;} #new_formal .new_formal_list ul .sm_li span{display:inline-block; font-weight: bold; color: #fff;margin: 0 5px; background: #676767; padding: 1px 4px; border-radius: 3px; font-size: 0.85em;} #new_formal .new_formal_list ul .sm_li .first{background:#007bc8;} #new_formal .new_formal_list ul .big_li .icon_19_patch{margin-left: 3px; vertical-align: text-top; width: 13px;} #chall_writer_btn{display:block; color:var(--main-ft-color); font-weight:bold; background:#56606b; width:96%; margin:5px auto 0; letter-spacing:-0.09em; border-radius:5px; padding:10px 0; text-align:center; margin-bottom:12px; font-size:1.1em; vertical-align: middle;} #chall_writer_btn span{color:#fff600;} /* 도전 수정전 */ /* 도전 수정후 */ #chall_list_wrap2{padding:0 8px;} #chall_list_wrap2 .chall_list_box{width:100%; margin:0 auto;} #chall_list_wrap2 .chall_list_tab{background:#fff; box-sizing: border-box;overflow: hidden; width:100%; position:relative; border:none; border-bottom:1px solid #ddd; border-radius:0; font-size: 0.95em;} #chall_list_wrap2 .chall_list_tab div{width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; height:auto;position: relative; } #chall_list_wrap2 .chall_list_tab ul{display: block; height: auto; float: left; padding:0; width: 100%; background: #fff; position:static;} #chall_list_wrap2 .chall_list_tab li{display: block; margin: 0; width: 200px; white-space: nowrap; float:left; text-align: center; width:20%;} #chall_list_wrap2 .chall_list_tab .normal li{width:25%;} #chall_list_wrap2 .chall_list_tab a{color:#4e4e4e; font-weight:normal; padding:10px 0 6px; font-size:15px; display: block; border-bottom:2px solid #fff; letter-spacing:-1px;} #chall_list_wrap2 .chall_list_tab .on{color:#E84D7D; border-bottom:2px solid var(--bg-fc-color);} #chall_list_wrap2 .chall_list_tab .chall_grad{position:absolute; top:0;display: none; width: 20px; height: 40px;} #chall_list_wrap2 .chall_list_tab .chall_grad_left{left:0; background:url("https://cdn.metoon.co.kr/mimg/chall_grad_left.png") no-repeat 100% 0;} #chall_list_wrap2 .chall_list_tab .chall_grad_right{right:0; background:url("https://cdn.metoon.co.kr/mimg/chall_grad_right.png") no-repeat 0 0;} #chall_list_wrap2 .chall_list_box_title .big_li{width:40%; margin:0 1%;} #chall_list_wrap2 .chall_list_box_title .sm_li1{width:12%;} #chall_list_wrap2 .chall_list_box_title .sm_li1 img{position:absolute; top:-1px; left:-1px; height:100%; display:block;} #chall_list_wrap2 .chall_list_box_title .sm_li2{width:20%;} #chall_list_wrap2 .chall_list_box_cont .big_li{width:40%; margin:0 1%;} #chall_list_wrap2 .chall_list_box_cont .sm_li1{width:12%; font-style: italic; color:#3c3c3c;} #chall_list_wrap2 .chall_list_box_cont .sm_li2{width:20%;} #chall_list_wrap2 .chall_list_box_cont .chall_top3 li{padding:20px 0;} #chall_list_wrap2 .chall_list_box_cont .chall_top3 .chall_num{font-size:1.2em; color:var(--bg-fc-color); font-style: italic; padding-bottom:0;} #chall_list_wrap2 .chall_list_box_cont .chall_top3 .wirter_li{width:30%; position:relative; margin-left:1%;} #chall_list_wrap2 .chall_list_box_cont .chall_top3 .big_li{width:40%;} #chall_list_wrap2 .chall_list_box_title{ position:relative; overflow:hidden; margin:0 auto 6px; width:100%; background:#404040; color:var(--main-ft-color);display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-evenly;justify-content:space-evenly;} /* 2017-09-20 수정 */ #chall_list_wrap2 .chall_list_box_title li{float:left; width:18%; text-align:center; padding:10px 0; font-size:1em; letter-spacing:-0.1em; font-weight:normal;} #chall_list_wrap2 .chall_list_box_cont>li{overflow:hidden; margin:5px auto; width:100%; border:1px solid #ddd; box-sizing: border-box;} #chall_list_wrap2 .chall_list_box_cont>li li{ color:#777; float:left; width:30%; text-align:center; padding:10px 0;font-size:1em; letter-spacing:-0.09em; font-weight:normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #chall_list_wrap2 .chall_list_box_cont>li:nth-of-type(odd){background:#fff;} #chall_list_wrap2 .chall_list_box_cont a{display:block; overflow:hidden;} #chall_list_wrap2 .chall_list_box_cont .chall_top3 li .writer{padding-left:45px; display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;} #chall_list_wrap2 .chall_list_box_cont .chall_top3 li .img_box{display:block; width:42px; height: 42px; position:absolute; top:0; left:0; bottom:0; margin:auto; overflow:hidden;} #chall_list_wrap2 .chall_list_box_cont .chall_top3 li .img_box img{display:block;width:100%;} #chall_list_wrap2 .chall_list_box_cont a > ul{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-evenly;} #chall_list_wrap2 .chall_list_box_cont .big_li{color:#3c3c3c; text-align:left;} #chall_list_wrap2 .chall_list_box_cont .sm_li{color:#676767; font-style: normal;} #chall_list_wrap2 .chall_list_box_cont .big_li span{padding:0 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position:relative; display: inline-block; max-width: 100%; width: auto; display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;} #chall_list_wrap2 .chall_list_box_cont .big_li span i{vertical-align:middle;font-weight:normal;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} #chall_list_wrap2 .chall_list_box_cont .big_li .icon_19_patch{margin-left: 3px; vertical-align: middle; width: 13px;} #chall_list_wrap2 .chall_list_box_cont .big_li .adult_patch{background: red; color: #fff; font-size: 0.8em; letter-spacing: -0.09em; padding: 1px 3px 1px 2px; border-radius: 35px; vertical-align: top; display: inline-block; margin-left: 3px;} #chall_list_wrap2 .chall_list_tab li a .adult_patch{background:red; color:var(--main-ft-color); font-size:0.8em; letter-spacing:-0.09em; padding:1px 3px 1px 2px; border-radius:35px; vertical-align: top; display: inline-block; margin-left:3px;} #chall_list_wrap2 .chall_list_tab li a span{position:relative; width: auto; height: auto;} #chall_list_wrap2 .chall_list_tab li a .icon_19_patch{width: 16px;vertical-align: middle;margin-left: 3px; margin-top:-3px;} #chall_list_wrap2 .detail_list_more{width: 100%; margin:0 auto; background: #f5f5f5;} #chall_list_wrap2 .detail_list_more:after{display:block; clear:both; content:"";} #chall_list_wrap2 .detail_list_more a{box-sizing: border-box; width: 96%; display: block; text-align: center; color: var(--bg-fc-color); background: #fff; padding: 7px 0 7px; font-size: 1.1em; border: 1px solid var(--bg-fc-color); margin: 10px auto; text-shadow: none; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #chall_list_wrap2 .detail_list_more p{font-weight: bold; display: inline-block; text-align:center;} #chall_list_wrap2 .detail_list_more img{width: 16px; display: inline-block; position: absolute; top: 0px; bottom: 0; margin: auto; padding-left: 5px;} #chall_list_wrap2 #new_formal{width:96%; max-width:600px; overflow: hidden; margin:5px auto 0; padding: 10px 0;} #chall_list_wrap2 #new_formal:after{clear:both; display:block; content:"";} #chall_list_wrap2 #new_formal h4{background:#7c7c7c; text-align:center; border-radius:3px; padding: 10px 0; font-size: 1.1em; letter-spacing: -0.1em; font-weight: bold; color:var(--main-ft-color);} #chall_list_wrap2 #new_formal .new_formal_list{margin-top:5px; border:1px solid #ddd; border-radius:3px; background:#fff; overflow:hidden;} #chall_list_wrap2 #new_formal .new_formal_list>li{width:100%; float:left; border-bottom:1px solid #ddd;} #chall_list_wrap2 #new_formal .new_formal_list>li:last-child{border:none;} #chall_list_wrap2 #new_formal .new_formal_list>li a{padding:10px 0; display:block; float:left; width:100%;} #chall_list_wrap2 #new_formal .new_formal_list ul li{float:left; text-align:center; color: #777; width: 20%; letter-spacing: -0.09em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: bold;} #chall_list_wrap2 #new_formal .new_formal_list ul .big_li{width: 48%; color: #3c3c3c; text-align: left;} #chall_list_wrap2 #new_formal .new_formal_list ul .sm_li{width: 12%;} #chall_list_wrap2 #new_formal .new_formal_list ul .sm_li span{display:inline-block; font-weight: bold; color: #fff;margin: 0 5px; background: #676767; padding: 1px 4px; border-radius: 3px; font-size: 0.85em;} #chall_list_wrap2 #new_formal .new_formal_list ul .sm_li .first{background:#007bc8;} #chall_list_wrap2 #new_formal .new_formal_list ul .big_li .icon_19_patch{margin-left: 3px; vertical-align: text-top; width: 13px;} #chall_writer_btn2{display:block; color:#56606b; max-width:600px; font-weight:bold; border:1px solid #56606b; width:100%; margin:0 auto 10px; letter-spacing:-0.09em; padding:10px 0; text-align:center; font-size:1.1em;} #chall_writer_btn2 span{/*color:#bfba1e;*/color:var(--bg-fc-color);} #chall_admin_btn { display:block; width:96%; color:var(--main-ft-color); max-width:600px; font-weight:bold; background:#b22b2f; margin:5px auto 0; letter-spacing:-0.09em; border-radius:5px; padding:10px 0; text-align:center; margin-bottom:12px; font-size:1.1em; vertical-align:middle; } /* 도전 수정후 */ .chall_list_box .chall_submenu{width: 100%; text-align:center; display:none; overflow-x: scroll; height: 42px; position: relative; margin-top:-2px; background: #fff; border: 1px solid #ddd; border-top: 1px dashed #ddd; border-radius: 0 0 3px 3px; } #chall_genre_sub ul{width:100%; margin-top: -2px; z-index: 9; display: table; height: 40px; white-space: nowrap; position: absolute; top: 0; bottom: 0; left: 0; margin: auto;} .chall_list_box .chall_submenu ul:after{content:""; display:block;clear: both;} #chall_genre_sub li{display: inline-block; margin: 0; width: 19%; white-space: nowrap; border-left:1px dashed #ddd; box-sizing:border-box;} #chall_genre_sub .border_none{border: none;} .chall_list_box .chall_submenu .border_none{border:none;} .chall_list_box .chall_submenu li a{padding:10px 0; display:block;} .chall_list_box .chall_submenu li .on{color:#E84D7D;} #chall_age_sub li{width:33.3%; display:inline-block; float:left; border-left:1px dashed #ddd; box-sizing:border-box;} #chall_age_sub .border_none{border: none;} #chall_list_wrap .chall_submenu span{position:absolute; top:0;display: block; width: 20px; height: 40px;} #chall_list_wrap .chall_submenu .chall_grad_left{left:0; background:url("https://cdn.metoon.co.kr/mimg/chall_grad_left.png") no-repeat 100% 0;} #chall_list_wrap .chall_submenu .chall_grad_right{right:0; background:url("https://cdn.metoon.co.kr/mimg/chall_grad_right.png") no-repeat 0 0;} @media all and (min-width:320px) and (max-width:360px){ #chall_list_wrap2 .chall_list_tab a{font-size: 14px;} #m_sub_ebook .m_sub_ebook_tab_new1 ul li a{font-size:14px;} } @media screen and (orientation:landscape) and (max-width:1600px){ .chall_main_banner{display:none;} .chall_main_banner1{width: 100%; display: block; border-right: 0; padding: 0px 0 7px; border-left: 0;} .chall_main_banner1 ul{width:100%;} .chall_main_banner1 li{left:-3%; margin-left:0%;padding:3px; border-radius:5px; background:#fff; border:1px solid #ddd;} .chall_main_banner1 li a{position:relative; display:block; color:#4e4e4e; font-weight:normal; font-size: 1.0em; letter-spacing: -0.09em;} .chall_main_banner1 li a>div{position:relative; border-radius:5px; overflow:hidden;} .chall_main_banner1 ul img{width:100%; border-radius:5px;} .chall_main_banner1 li a>div .nobel_title{color:var(--main-ft-color); display:block; font-size:1em; font-weight:normal;} .chall_main_banner1 li .txt_box{ width:100%; padding:10px 5px 10px; position:relative;} .chall_main_banner1 li .txt_box p{color:#2d2d2d; margin:auto; width:100%; text-align:center; font-size:1.0em; font-weight:normal; letter-spacing: -0.1em} .chall_main_banner1 li .txt_box p .nobel_title{margin-bottom:10px; position: inherit; color:#2d2d2d; display:block; font-size:1.2em; font-weight:bold;} .chall_main_banner1 li .txt_box p .tag_genre{display:block; background:#E84D7D; padding:1px 0; text-align:center; width:50px;color:var(--main-ft-color); font-size:0.8em; font-weight:normal; position: absolute; bottom:9px; right:5px; border-radius:3px;} .chall_main_banner1 li .txt_box p .writer{display:block; padding:1px 0; text-align:center; font-size:0.95em; margin-top:10px; font-weight:normal;} .chall_main_banner1 .bx-wrapper{margin: 0 auto;} .chall_main_banner1 .bx-wrapper .bx-pager.bx-default-pager{top:90%; left:0; right:0; margin:auto; text-align:center; position:absolute; padding:0;} .chall_main_banner1 .bx-pager-item{width: 15px; height: 15px; margin:0 7px;} .chall_main_banner1 li a>div .patch_chall{width:17%; position:absolute; top:0; left:5px; border-radius:0; max-width:35px;} .chall_main_banner1 li .img_backbox {position: absolute; top: 0; left: 0; right: 0; height: 100%; background: url("https://cdn.metoon.co.kr/mimg/img_back_sm4.png") repeat-x 100% 100%; background-size: 100% 100%;} .chall_main_banner1 .swiper-slide{width:32% !important;} .chall_main_banner1{position: absolute; top: 0px;} #chall_writer_btn{margin: 5px auto 10px;} #chall_genre_sub li{width:19%;} } @media screen and (min-width:600px) { #s_chall_main_banner{display:none;} #l_chall_main_banner{display:block;} #l_chall_main_banner .chall_main_banner{display:block;} #l_chall_main_banner .chall_main_banner1{display:none;} #l_chall_main_banner .chall_main_banner ul{width: 98%; margin:0 auto;} #l_chall_main_banner .chall_banner_new li{max-width:31%; margin:0 0.5%; left:0;} #l_chall_main_banner .chall_main_banner1 ul{width:80%; margin:0 auto;} #l_chall_main_banner .chall_main_banner1 li{max-width: 31%; margin:0 0.5%; left: 0;} } @media screen and (orientation:landscape) and (min-width:800px) { #l_chall_main_banner .chall_main_banner{display:none;} #l_chall_main_banner .chall_main_banner1{display:block;} } /* 도전메인 */ /* 도전디테일 */ #chall_detail_banner{/* border-top:1px solid #ddd;*/width:100%; background:#fff; /*margin-top:7px;*/} #chall_detail_banner:after {content: '';display: block; clear: both;} #chall_detail_banner>div:not(.detail_bnr){padding:5px 5px 0;} .detail_imgbox{width:45%; float:left; padding:5px; max-width:200px; position:relative;} .detail_imgbox .mark_box{position:absolute; top:10px; left:5px;} .detail_imgbox .new_mark{display: inline-block; font-weight: bold; font-size: 0.9em; background: #ff8125; border-radius: 3px; color: #fff; padding: 1px 2px; vertical-align: top; margin-left: 5px;} .detail_imgbox .up_mark{display: inline-block; font-weight: bold; font-size: 0.9em; background: var(--bg-fc-color); border-radius: 3px; color: #fff; padding: 1px 2px; vertical-align: top; margin-left: 5px;} .detail_imgbox img{width:100%; border-radius:5px;} #adult_noimg_detail_banner.detail_comics .detail_imgbox img{border-radius:0;} .detail_txtbox{width:55%; float:left; padding:10px; position:relative;} .detail_txtbox>div{margin-top:2px;} .detail_txtbox .chal_tag{margin:0;} .detail_txtbox .chal_tag p{display:inline-block; font-size:0.9em; letter-spacing:-0.05em; margin:0;} .detail_txtbox .chal_tag p + p:before{content:""; display:inline-block; width:1px; height:10px; background:#ddd; margin:0 5px;} .detail_txtbox .ganre_mark{color:#ea6161;}/* white 버전 */ .detail_txtbox .chal_tag .hits{color:#8da6c2;} .detail_txtbox .up_day{font-size: 0.9em; letter-spacing: -0.09em; height: 20px; margin: 5px 0 0; position: relative; text-align: left;display: inline-block;} .detail_txtbox .up_day span { border-radius: 30px; border: 1px solid var(--bg-fc-color); padding: 1px 1px 0 0; color: var(--bg-fc-color); text-align: center; height: 15px; width: 15px; display: inline-block; margin-right: 2px;}/* white버전 */ .detail_txtbox .title{font-size:1.2em; font-weight:bold; line-height:1; color:#2c2c2c;letter-spacing: -0.09em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:calc(100% - 60px); margin-bottom:10px;} .detail_txtbox .adult_mark{display: inline-block; font-size: 0.75em; background: var(--bg-fc-color); border-radius: 30px; margin-left:5px;color: #fff; padding: 1px 3px; vertical-align: middle;} .detail_txtbox p{margin:5px 0; font-size:1em; color:#676767;} .detail_txtbox .zzim_btn{position:absolute; top:14px; right:5px; z-index:1;} .detail_txtbox .zzim_btn > a{display:block; color:#999; text-align:center; font-size:0; letter-spacing:-0.05em;} .detail_txtbox .zzim_btn > a span{display:inline-block; vertical-align:middle; font-size:11px;} .detail_txtbox .zzim_btn > a .zzim_ic{width:12px;height:12px;background-image:url("https://cdn.metoon.co.kr/mimg/thumb_up_wh.svg"); background-repeat:no-repeat; background-position:center 0; background-size:12px; margin:0 3px 2px 0;} .detail_txtbox .zzim_btn .zzim_ic_svg{width:12px;height:12px;fill:var(--main-ft-color);margin-right:3px;align-self:center;flex-shrink:0;} .detail_txtbox .zzim_btn .heart_on{color:var(--bg-fc-color);} .detail_txtbox .zzim_btn .heart_on .zzim_ic{background-image:url("https://cdn.metoon.co.kr/mimg/thumb_up_red.svg");} .detail_txtbox .zzim_btn .heart_on .zzim_ic_svg{fill:var(--bg-fc-color);} .detail_txtbox .zzim_btn .zzim_pop{position:absolute;transform:translateX(0);left:auto;right:7px;bottom:-500%;margin-bottom:0;} .detail_txtbox .zzim_btn .zzim_pop>div>p{top:0;margin:23px auto 0;} .detail_txtbox .zzim_btn .zzim_pop>div .close{bottom:0;top:auto;right:auto;left:0;transform:translate(-25%, 25%);} .detail_txtbox .title span:not(.mark_19){white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: relative; display: inline-block; max-width: calc(100% - 19px);} .detail_txtbox .title span:only-child{max-width:100%;} .detail_txtbox .title .mark_19{display:inline-block; width:16px; vertical-align:top; margin-left:3px;} .detail_txtbox .icon_19_patch{width:16px; vertical-align:top;} #adult_noimg_detail_banner .detail_txtbox .icon_19_patch{width:16px; vertical-align:middle; margin-left:3px; position: static; right: 0; top: 0; bottom: 0; margin: auto;} .detail_txtbox .detail_nobeltxt{width: 100%; color:#676767; letter-spacing:-0.03em; margin:0 auto; padding-top: 5px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; text-overflow:ellipsis; overflow:hidden; line-height:1.4;} .detail_txtbox .summary_btn_cont{text-align:right;line-height:1;} .detail_txtbox .summary_btn_cont .summary_btn{font-size:0.9em;color:#676767;} #chall_detail_banner .detail_nav_ul {width: 100%; text-align: center; background: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; height: 36px; float:left;} #chall_detail_banner .detail_nav_ul li {width:33.3%; float: left; height: 100%; text-align: center; display: inline-block; position: relative;} #chall_detail_banner .detail_nav_ul li a {display: block; width: 100%; letter-spacing: -0.09em; padding: 10px 0; height: 100%; color: #767676; box-sizing: border-box;} #chall_detail_banner .detail_nav_ul li:nth-of-type(2) a { border-left:1px solid #ddd; border-right:1px solid #ddd; } #chall_detail_wrap .bottom_detail_nav{position: fixed; bottom: 0; left: 0; display: none; z-index: 999; width: 100%; margin-top: 47%;} #chall_detail_wrap .bottom_detail_nav{width: 100%; text-align: center; background: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; height: 36px; float:left;} #chall_detail_wrap .bottom_detail_nav li{width:33.3%; float: left; height: 100%; text-align: center; display: inline-block; position: relative;} #chall_detail_wrap .bottom_detail_nav li a{display: block; width: 100%; letter-spacing: -0.09em; padding: 10px 0; height: 100%; border-left: 1px solid #ddd; color: #767676; box-sizing: border-box;} #chall_detail_wrap .bottom_detail_nav li .first{color:var(--bg-fc-color);} #chall_detail_wrap .bottom_detail_nav li .heart{color:var(--bg-fc-color);} #chall_detail_wrap .bottom_detail_nav li .heart_on {color:var(--bg-fc-color);}/* white 버전 */ #chall_detail_wrap .bottom_detail_nav li .first span{padding-left:25px; background: url("https://cdn.metoon.co.kr/mimg/icon_detail_first.png") no-repeat 0% center; background-size: 17px;} #chall_detail_wrap .bottom_detail_nav li .heart span{padding-left:25px; background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png") no-repeat 0% center; background-size: 17px;} #chall_detail_wrap .bottom_detail_nav li .heart_on span{padding-left:25px; background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0% center; background-size: 17px;}/* white 버전 */ #chall_detail_banner .detail_nav_ul li .first{color:var(--bg-fc-color);} #chall_detail_banner .detail_nav_ul li .heart{color:var(--bg-fc-color);} #chall_detail_banner .detail_nav_ul li .heart_on {color:var(--bg-fc-color);}/* white 버전 */ #chall_detail_banner .detail_nav_ul li .first span{padding-left:25px; background: url("https://cdn.metoon.co.kr/mimg/icon_detail_first.png") no-repeat 0% center; background-size: 17px;} #chall_detail_banner .detail_nav_ul li .heart span{padding-left:25px; background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png") no-repeat 0% center; background-size: 17px;} #chall_detail_banner .detail_nav_ul li .heart_on span{padding-left:25px; background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0% center; background-size: 17px;}/* white 버전 */ #chall_detail_banner .detail_nav_ul li .sns{position:relative;} #chall_detail_banner .detail_nav_ul li .sns span{padding-left:25px; background:url("https://cdn.metoon.co.kr/mimg/sns.png") no-repeat 0 center; background-size:17px;} #chall_detail_banner .sns_box {display: none; position: absolute; width: 130px; height: 55px; bottom: 100%; right: 0; background: url("https://cdn.metoon.co.kr/mimg/bg_sns_box_top.png") no-repeat center;} #chall_detail_banner .sns_box ul { height: 100%;} #chall_detail_banner .sns_box li {width: 33.3%; height: 100%; position: relative;} #chall_detail_banner .sns_box li a {width: 30px; height: 30px; position: absolute; top: 0; bottom: 10%; left: 0; right: 0; margin: auto; display: block; border: none; text-indent: -99999999em; overflow: hidden; border-radius: 25px;} #chall_detail_banner .sns_box .fb a {background: url("https://cdn.metoon.co.kr/mimg/fb_icon.png") no-repeat center; background-size: 30px;} #chall_detail_banner .sns_box .tw a {background: url("https://cdn.metoon.co.kr/mimg/tw_icon.png") no-repeat center; background-size: 30px;} #chall_detail_banner .sns_box .kakao a {padding: 0; background: url("https://cdn.metoon.co.kr/mimg/kakao_icon.png") no-repeat center; background-size: 30px;} #chall_detail_banner .sns_box .kakao img {width: 32px; height: 32px; border-radius: 25px; position: absolute; top: 0; bottom: 10%; left: 0; right: 0; margin: auto;} /* 도전디테일2 */ #chall_detail_banner1{width: 100%; position: relative; z-index: 2; background: #fff;} #chall_detail_banner1:after {content: '';display: block; clear: both;} #chall_detail_banner1_body .detail_banner_img {max-width:600px; width: 100%; display: block; position: fixed; top: 89px; left: 0; width: 100%; z-index: -1; max-width: 800px; margin: 0 auto;} #chall_detail_banner1 .detail_nav{width:100%; display: block; width: 100%; margin-top: 47%; position: relative;z-index: 1;} #chall_detail_banner1 .detail_nav .hits{position:absolute; right:5px; top:-25px; color:#E84D7D;background: rgba(255, 255, 255, 0.75); padding: 2px 2px 0px; border-radius:3px; border:1px solid #E84D7D;box-sizing: border-box;} #chall_detail_banner1 .detail_nav .hits .heart{background:url("https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png") no-repeat 0 25%; background-size: 13px 11px; padding-left:25px;} #chall_detail_banner1 .detail_nav_ul {width: 100%; text-align: center; background: #fff; border-top: 1px solid #ddd; height: 36px;} #chall_detail_banner1 .detail_nav_ul li {width:33.3%; float: left; height: 100%; text-align: center; display: inline-block; position: relative;} #chall_detail_banner1 .detail_nav_ul li a {display: block; width: 100%; letter-spacing: -0.09em; padding: 10px 0; height: 100%; border-left: 1px solid #ddd; color: #767676; box-sizing: border-box;} #chall_detail_banner1 .detail_nav_ul li .heart {color: #E84D7D; background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart.png") no-repeat 20% center; text-indent: 25%; background-size: 17px;} #chall_detail_banner1 .detail_nav_ul li .heart_on {color: #E84D7D; background: url("https://cdn.metoon.co.kr/mimg/icon_genre_heart_on.png") no-repeat 20% center; text-indent: 25%; background-size: 17px;} #chall_detail_banner1 .detail_nav_ul li .first {color: #E84D7D; background: url("https://cdn.metoon.co.kr/mimg/icon_detail_first.png") no-repeat 20% center; text-indent: 25%; background-size: 14px;} #chall_detail_banner1 .detail_nav_ul li .sns {border-right: 1px solid #ddd; background: url("https://cdn.metoon.co.kr/mimg/sns.png") no-repeat 20% center; text-indent: 25%; position: relative; background-size: 17px;} #chall_detail_banner1 .sns_box {display: none; position: absolute; width: 130px; height: 55px; bottom: 100%; right: 0; background: url("https://cdn.metoon.co.kr/mimg/bg_sns_box_top.png") no-repeat center;} #chall_detail_banner1 .sns_box ul { height: 100%;} #chall_detail_banner1 .sns_box li {width: 33.3%; height: 100%; position: relative;} #chall_detail_banner1 .sns_box li a {width: 30px; height: 30px; position: absolute; top: 0; bottom: 10%; left: 0; right: 0; margin: auto; display: block; border: none; text-indent: -99999999em; overflow: hidden; border-radius: 25px;} #chall_detail_banner1 .sns_box .fb a {background: url("https://cdn.metoon.co.kr/mimg/fb_icon.png") no-repeat center; background-size: 30px;} #chall_detail_banner1 .sns_box .tw a {background: url("https://cdn.metoon.co.kr/mimg/tw_icon.png") no-repeat center; background-size: 30px;} #chall_detail_banner1 .sns_box .kakao a {padding: 0; background: url("https://cdn.metoon.co.kr/mimg/kakao_icon.png") no-repeat center; background-size: 30px;} #chall_detail_banner1 .sns_box .kakao img { width: 32px; height: 32px; border-radius: 25px; position: absolute; top: 0; bottom: 10%; left: 0; right: 0; margin: auto;} #chall_detail_banner1 .detail_caption{border:1px solid #ddd; color:#767676; background:#fff;padding:10px; text-shadow:none;position: relative; z-index: 1;} #chall_detail_banner1 .detail_caption .title{font-size:1.2em; color:#2e2e2e; letter-spacing:-0.09em; max-width:100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #chall_detail_banner1 .detail_caption .ganre_mark{font-size:0.9em; background:#E84D7D; border-radius:3px; color:var(--main-ft-color); padding:1px 2px; vertical-align: top; margin:0 5px;} #chall_detail_banner1 .detail_caption .up_mark{font-size:0.9em; background:var(--bg-fc-color); border-radius:3px; color:var(--main-ft-color); padding:1px 2px; vertical-align: top;} #chall_detail_banner1 .detail_caption .adult_mark{font-size:0.9em; background:var(--bg-fc-color); border-radius:30px; color:var(--main-ft-color); padding:1px 2px; vertical-align: top;} #chall_detail_banner1 .detail_caption .writer{font-size: 0.9em; letter-spacing:-0.09em; height: 20px; position: relative; width: 50%; text-align:right;} #chall_detail_banner1 .detail_caption .up_day{font-size: 0.9em; letter-spacing:-0.09em; height: 20px; margin-top:2px;position: relative; width: 50%; text-align:left;} #chall_detail_banner1 .detail_caption .up_day span{border-radius: 30px; border: 1px solid #e84d7d; padding: 1px 1px 0 0; color: #e84d7d; text-align: center; height: 15px; width: 15px; display: inline-block; margin-right: 2px;} #chall_detail_banner1 .detail_caption div{position:relative; margin-bottom:5px;} #chall_detail_banner1 .detail_caption div p{display:inline-block; font-weight:bold;} /* 도전디테일2 */ .chall_detail_cont{padding:10px 8px 10px; position: relative; background: #f5f5f5; z-index: 9;} /*.chall_detail_title_box{padding:10px 10px 0; position: relative; background: #f5f5f5; z-index: 9;}*/ .chall_detail_title_box{padding:0px 10px 0; position: relative; background: #f5f5f5; z-index: 9;} .chall_cont_title{font-size:1.2em; border-bottom:2px solid #ddd;padding-bottom:5px;} .chall_detail_radio{width: 100%; overflow: hidden; margin: 0 auto 0;padding: 8px 0 0; position:relative;} .chall_detail_radio fieldset{display: block; float: right;} .chall_detail_radio fieldset .contents_sort{position:relative; font-size:0;} .chall_detail_radio fieldset input{ position:absolute; top:0; left:0; opacity:0; z-index:-1;} .chall_detail_radio label:not(.detail_sort_radio){position: relative; border: none; background: none; font-size: 1em; padding-right: 5px; color: #9e9e9e;} .chall_detail_radio fieldset .contents_sort label{display:inline-block; font-size:12px; color:#999; letter-spacing:-0.05em;} .chall_detail_radio fieldset .contents_sort .bar{display:inline-block; width:1px; height:10px; background:#c1c1c1; margin:0 7px;} .chall_detail_radio label:after{ content: ""; display: block; position: absolute; top: 2px; left: -15px; width: 13px; height: 13px; background: url("https://cdn.metoon.co.kr/mimg/radio_check_off.png") no-repeat center; background-size: 13px;} /* .chall_detail_radio .chkselect{color: var(--bg-fc-color);} */ .chall_detail_radio .chkselect:after{content: ""; display: block; position: absolute; top: 2px; left: -15px; width: 13px; height: 13px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 13px;}/* white 버전 */ .chall_detail_radio label:not(.detail_sort_radio){border:none; opacity:0; z-index:-9; background: none; font-size: 1em; padding-right: 5px; color:#404040; background:#f5f5f5; position:absolute; bottom:0; right:2px; margin:auto; letter-spacing:-0.05em;} .chall_detail_radio label:after{content: ""; display: block; position: absolute; top: 2px; left: -15px; width: 13px; height: 13px; background: url("https://cdn.metoon.co.kr/mimg/radio_check_off.png") no-repeat center; background-size: 13px;} .chall_detail_radio fieldset .contents_sort .chkselect{color:var(--bg-fc-color);} .chall_detail_radio #chall_detail_order_label:after{content: none;} .chall_detail_radio #chall_detail_up_label:after{content: none;} @media all and (max-width:350px){ .chall_detail_radio fieldset .contents_sort label{font-size:11px;} .chall_detail_radio fieldset .contents_sort .bar{margin:0 5px;} } .chall_detail_list{border-top:1px solid #ddd;} .chall_detail_list:after {content: '';display: block; clear: both;} .chall_detail_list li{float:left; border-bottom:1px solid #ddd; width:100%;position: relative;} .chall_detail_list li a{display:block; overflow:hidden;} .chall_detail_list li div{float:left; height:100%; padding:0; width:100%;} .chall_detail_list li .chall_btn{float: none; margin: auto; width:98%; margin-bottom:10px; box-sizing:border-box; overflow:hidden;} .chall_btn a{float:right; background:#fff; display: block; border: 1px solid #ddd; padding: 8px 0px; border-radius:5px; width:100%; text-align:center; font-weight:bold; color:#767676;box-sizing: border-box;} .chall_btn .list_pink_btn{color: #fff; background: #E84D7D; border: 1px solid #E84D7D;} .chall_detail_list li .noimg_list_box{display: block; float: left; width: 70%;} .chall_detail_list li .noimg_btn{display: block; width: 30%; top:0; right: 1%; padding: 11px 0; text-align: center; border-radius: 5px; cursor: pointer; max-width: 100px; float: right; letter-spacing: -0.05em; color: #424242; font-size: 1em; margin: 6px auto 0px; position:absolute;} .chall_detail_list li .noimg_btn>span{float: right; background: #fff; display: block; border: 1px solid #ddd; padding: 8px 0px; border-radius: 5px; width: 100%; text-align: center; font-weight: normal; color: #767676; box-sizing: border-box;} .chall_detail_list li .noimg_btn .list_pink_btn{color: #fff; background: #E84D7D; border: 1px solid #E84D7D;} .chall_detail_list li .noimg_btn .list_pink_btn span{background: url("https://cdn.metoon.co.kr/mimg/icon_coin_w.png") no-repeat 0 center; background-size: 15px; padding-left: 20px;} .chall_detail_list li .noimg_btn .free_btn span{background:url("https://cdn.metoon.co.kr/mimg/detail_free_icon.png") no-repeat 0 center; padding:2px 0; padding-left:20px; background-size:15px;} .chall_detail_list li .noimg_btn .coin_btn span{background:url("https://cdn.metoon.co.kr/mimg/detail_coin_icon.png") no-repeat 0 center; padding:2px 0; padding-left:20px; background-size:15px;} .chall_detail_list p{padding-bottom:5px; margin:10px auto; color:#545454; font-weight:bold; font-size:1.1em; letter-spacing:-0.09em;text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 95%;} .chall_detail_list p .sub_title{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-right: 3px; max-width: 90%; display: inline-block;} .chall_detail_list .txt_up_icon{font-size: 10px; letter-spacing: -0.09em; color: #fff; padding: 1px 3px 0; border-radius: 3px; margin: 2px 3px 0 3px; font-weight: bold; display: inline-block; text-align: center; vertical-align: text-top; background: #2c5faf;line-height: normal;} .chall_detail_list .nobel_title {color:#2b2b2b; font-size:1em; padding:0; text-indent:2.5%; /* width: 65%; */float: left;} .chall_detail_list p .heart{margin-left:10px; font-size: 1.0em; padding-left: 20px; padding-right: 5px; background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png") no-repeat 0 75%; background-size: 14px 12px; color: var(--bg-fc-color); float:right;} .chall_detail_list .on .heart{background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0 45%; background-size: 14px 12px;}/* white 버전 */ .chall_detail_list .date{font-weight:normal; font-size:1em; padding:0; float:right; width:20.5%; text-align: right; padding-right:2.5%;} #chall_detail_wrap .detail_list_more{width: 100%; padding-bottom: 10px; float: left; position: relative; background: #f5f5f5; border-bottom:1px solid #ddd; z-index: 9;} #chall_detail_wrap .detail_list_more a{width: 96%; display: block; text-align: center; color: #d52b2c; background: #fff; padding: 9px 0 8px; font-size: 1.1em; border: 1px solid #d52b2c; border-radius: 5px; margin: 0 auto; text-shadow: none; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}/* white 버전 */ #chall_detail_wrap .detail_list_more p{font-weight: normal; display: inline-block; margin-left: -3%;} #chall_detail_wrap .detail_list_more img{width: 16px; display: inline-block; position: absolute; top: 4px; bottom: 0; margin: auto; padding-left: 10px;} #chall_detail_wrap .chall_detail_next{width:calc(100% - 20px); padding:7px 0; position: relative; z-index: 2; background:#f5f5f5; margin:0 auto; border-bottom:1px solid #ddd;} #chall_detail_wrap .chall_detail_next a{display: block; width: 100%; text-align:center; border-radius: 6px; background:#fff; padding:7px 0 9px; font-weight:bold; color:var(--bg-fc-color); border: 1px solid var(--bg-fc-color); font-size:1.1em; -webkit-box-sizing:border-box; box-sizing:border-box;}/* white 버전 */ #chall_detail_wrap .chall_detail_next .next_view_title{max-width: 60%; display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;vertical-align: bottom;} @media all and (max-width:360px){ .detail_txtbox .detail_nobeltxt{padding-top:3px;} } @media all and (min-width:320px) and (max-width:350px){ .detail_txtbox{padding: 7px;} .detail_txtbox>div{margin:0;} .detail_txtbox p{margin:2px 0; font-size: 0.9em;} .detail_txtbox .title{font-size: 1.15em; margin-top:8px;} .detail_txtbox .detail_nobeltxt{-webkit-line-clamp:2;} } @media all and (min-width:320px) and (max-width:360px){ .chall_detail_list li .noimg_btn .list_pink_btn{font-size:0.9em;} } @media all and (min-width:435px) and (max-width:600px){ .detail_txtbox p{margin:10px 0;} .detail_nobeltxt{padding-top:10px;} .detail_txtbox>div{margin-top:5px;} } @media all and (min-width:435px) and (max-width:500px){ .detail_txtbox{width: 55%;} } @media all and (min-width:501px) and (max-width:600px){ .detail_txtbox{width: 65%;} } @media all and (min-width:601px){ .detail_txtbox{width: calc(65% - 10px); padding: 10px; margin-left: 10px;} #adult_noimg_detail_banner.detail_comics .detail_txtbox{margin-left:0;} .detail_txtbox p{margin:10px 0;} .detail_nobeltxt{padding-top:10px;} .chall_detail_list li{width: 49%; margin: 0; padding: 5px 1%; position:relative;} .chall_detail_list li:nth-child(odd){border-right:1px solid #ddd; box-sizing:border-box;} .chall_detail_list p{margin:15px auto 10px;} .chall_detail_list li .noimg_btn{right:2%;} } /* 도전디테일 */ /* 도전뷰어 */ #chall_view_sidencont_wrap .mm-panel.mm-hasnavbar .mm-navbar{display:none;} #chall_view_sidencont_wrap .mm-panels>.mm-panel:after, .mm-panels>.mm-panel:before{height:0 !important;} #chall_view_sidencont_wrap .mm-listview>li:not(.mm-divider):after{border:none !important;} #chall_view_sidencont_wrap .mm-navbar .mm-title{display:none;} #chall_view_sidencont_wrap .mm-panel.mm-hasnavbar{padding:0 !important;} #chall_view_sidelist_wrap{width:100%; background:#fff; float:left; box-sizing:border-box; z-index:999; padding:0px 0 0px;overflow-y: auto; font-size:1.1em;} #chall_view_sidencont_wrap .select_title{height:60px; padding:0 0px 0; background:#E84D7D; color:var(--main-ft-color); position: fixed; z-index:999; box-sizing: border-box; font-size:1.1em; font-weight:normal; letter-spacing:-0.09em; width:100%;} #chall_view_sidencont_wrap .select_title span{position:absolute; top:0; bottom:0; left:10px; height:20px; margin: auto;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width: 90%; } #chall_view_sidelist_wrap ul{width:100%; overflow:hidden; background:#fff; margin:60px 0 0;} #chall_view_sidelist_wrap li{padding:5px; border-bottom:1px solid #ddd; } #chall_view_sidelist_wrap li a{color:#676767;white-space: nowrap; text-overflow: ellipsis; font-weight:normal;overflow:hidden;display: block; letter-spacing:-0.09em; position:relative;font-size: 0.9em;} #chall_view_sidelist_wrap li a .bg_detail_img{background:url("https://cdn.metoon.co.kr/mimg/bg_text_gradient.png") repeat-X center 0; position: absolute; top: 0; left:0px; right:0px; margin:auto; display:block; height:100%;background-size: 100% 100%; border-radius:5px; opacity:0.8;} #chall_view_sidelist_wrap .on a .bg_detail_img{background:none; position: absolute; top: 0; left:10px; right:10px; margin:auto; display:block; height:78%;background-size: 100% 100%; border-radius:5px;} #chall_view_sidelist_wrap li a .sidelist_img_box{position:relative; display:none;} #chall_view_sidelist_wrap li a img{width:100%; border-radius:5px; min-height:130px; display:block;} #chall_view_sidelist_wrap li a p{bottom:0; top: inherit; background:#fff;left: 0; width: 100%; padding: 3px 0;} #chall_view_sidelist_wrap li:hover{background:#ececec;} #chall_view_sidelist_wrap li:hover a p{background:#ececec;} #chall_view_sidelist_wrap .on p{font-weight: bold; color:#e84d7d;} #chall_view_sidelist_wrap .on img{border:2px solid #e84d7d; box-sizing: border-box;} /* 도전뷰어 */ /* 도전뷰어 170112 */ #chall_view_sidencont .mm-panel.mm-hasnavbar .mm-navbar{display:none;} #chall_view_sidencont .mm-panels>.mm-panel:after, .mm-panels>.mm-panel:before{height:0 !important;} #chall_view_sidencont .mm-listview>li:not(.mm-divider):after{border:none !important;} #chall_view_sidencont .mm-navbar .mm-title{display:none;} #chall_view_sidencont .mm-panel.mm-hasnavbar{padding:0 !important;} #chall_view_sidencont{width:260px; background:#fff; float:left; box-sizing:border-box; z-index:9999; padding:0px 0 0px;overflow-y: auto; font-size:1.1em;} #chall_view_sidencont .side_select_title{height:60px; padding:0 0px 0; top:0; background:#404040; color:var(--main-ft-color); position: fixed; z-index:999; box-sizing: border-box; font-size:1.1em; font-weight:normal; letter-spacing:-0.09em; width:260px;}/* white 버전 */ #chall_view_sidencont .side_select_title .sub_title{position:absolute; top:0; bottom:0; left:10px; height:20px; margin: auto;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width: 90%;} #chall_view_sidencont ul{width:100%; overflow:hidden; background:#fff; margin:60px 0 0;} #chall_view_sidencont li{padding:5px; border-bottom:1px solid #ddd; } #chall_view_sidencont li a{color:#676767;white-space: nowrap; text-overflow: ellipsis; font-weight:normal;overflow:hidden;display: block; letter-spacing:-0.09em; position:relative;font-size: 0.9em;} #chall_view_sidencont li a .bg_detail_img{background:url("https://cdn.metoon.co.kr/mimg/bg_text_gradient.png") repeat-X center 0; position: absolute; top: 0; left:0px; right:0px; margin:auto; display:block; height:100%;background-size: 100% 100%; border-radius:5px; opacity:0.8;} #chall_view_sidencont .on a .bg_detail_img{background:none; position: absolute; top: 0; left:10px; right:10px; margin:auto; display:block; height:78%;background-size: 100% 100%; border-radius:5px;} #chall_view_sidencont li a .sidelist_img_box{position:relative; display:none;} #chall_view_sidencont li a img{width:100%; border-radius:5px; min-height:130px; display:block;} #chall_view_sidencont li a p{bottom:0; top: inherit; background:#fff;left: 0; width: 100%; padding: 3px 0;} #chall_view_sidencont li:hover{background:#ececec;} #chall_view_sidencont li:hover a p{background:#ececec;} #chall_view_sidencont .on p{font-weight: bold; color:var(--bg-fc-color);}/* white 버전 */ #chall_view_sidencont .on img{border:2px solid #e84d7d; box-sizing: border-box;} /* 도전뷰어 170112 */ /* 도전작가신청 */ .chall_writer_box{width: 96%; margin: 0 auto;} .chall_writer_box .title_img{width: 70%; max-width:220px; margin: 20px auto; display: block;} .wright_form_box_wrap{background:#fff; border-radius:5px; overflow:hidden; max-width:600px; margin: 0 auto 20px;} .wright_form_box_wrap h3{background:#56606b; color:var(--main-ft-color); padding:10px 0; text-align:center; font-size:1.3em; letter-spacing:-0.09em; } .wright_form_wrap{margin:20px auto 30px; width:90%; max-width:400px;} .wright_form_wrap .chall_form_title{display:block; font-size:1.15em; font-weight:bold; letter-spacing:-0.09em; margin-bottom:5px;} .wright_form_wrap .input_box{margin:15px 0; color: #2c2c2c;} .wright_form_wrap .input_box input{border-radius:3px; border:1px solid #ddd; padding:7px 5px; color: #2c2c2c;} .wright_form_wrap .input_box #chall_name, .wright_form_wrap .input_box #chall_email{width:100%;} .wright_form_wrap .input_box #chall_birth_year{width: 18%; margin-right:3px;} .wright_form_wrap .chall_tel_box input{width:30%; margin:0 1.3%;} .wright_form_wrap .chall_tel_box .chall_tel_1{margin-left:0;} .chall_sex_box label{margin:0 10px 0 5px;} .wright_form_wrap .input_box span{margin-right:5px;} .wright_form_wrap .input_box select{border-radius:3px; border:1px solid #ddd; padding:3px 0px; height: 32px; margin-right:3px;} .wright_form_wrap .input_box .chall_birth_radio input{margin-right:3px;} .wright_form_wrap .input_box textarea{resize: none; width:100%; min-height:150px; padding:10px; border: 1px solid #ddd; border-radius: 3px;} .wright_form_wrap .input_box p{font-weight: bold; letter-spacing: -0.05em; margin-top: 5px; text-indent: 2%; background: url("https://cdn.metoon.co.kr/mimg/icon_my_data_dot1.png") no-repeat 0 center; background-size: 4px; color: #2c2c2c;} .chall_wright_form_box .btn_img{width:100%; display:block; max-width: 300px;margin: 0 auto 20px;} .chall_wright_form_box .btn_img img{width:100%;} .chall_writer_page_bg{padding:20px 0; text-align:center; display:block; width:100%; background:url("https://cdn.metoon.co.kr/img/chall_writer_top_img.png") no-repeat 3% 100%;} .chall_writer_form_box{width:100%;} .chall_writer_form_box h3{background:#56606b; color:var(--main-ft-color); text-align:center; padding:14px 0; font-size:1.2em;} #chall_writer_form{width:100%; max-width: 600px; margin: 10px auto 0;} #chall_writer_form .chall_writer_notice{color:#676767; padding:15px ; text-align:left; border:1px solid #ddd; background:#fff; border-radius:5px; font-size:1.05em; margin-bottom:10px; letter-spacing:-0.09em;} #chall_writer_form h3{margin-bottom:10px; padding-top:0px; font-size: 1.2em;} #chall_writer_form h3 img{vertical-align: middle; display: inline-block; margin-right:5px;} #chall_writer_form table{width:100%; border-top:1px solid #ccc; border-bottom:1px solid #ccc; border-spacing: 0px;} #chall_writer_form td{padding-left:10px; font-size:1em;border-bottom:1px solid #ddd; color:#545454; letter-spacing:-0.09em;} #chall_writer_form .last td{border:none;} #chall_writer_form td br{display:none;} #chall_writer_form .input_td{padding:10px; color:#676767; width:80%;} #chall_writer_form input{ font-size:1em; border:1px solid #ccc; border-radius:3px; margin-right:5%; color:#676767;} #chall_writer_form input[type="text"]{ width: 56%; padding:5px 8px; font-size:1.05em; font-family: 'Nanum Gothic', sans-serif;} #chall_writer_form input[type="radio"]{margin-right:0px;} #chall_writer_form label{margin-right:5%;} #chall_writer_form #chall_name{} #chall_writer_form .chall_sex_box{display:inline-block; width:35%; margin:0;} #chall_writer_form .chall_sex_box label{margin:0 3px; margin-right:5%;} #chall_writer_form .chall_tel_input input[type="text"]{margin:0 2.7%; width:27%;} #chall_writer_form input[type="text"]:focus{box-shadow: 0px 0px 10px 0px #ff94b4;} #chall_writer_form input[type="email"]:focus{box-shadow: 0px 0px 10px 0px #ff94b4;} #chall_writer_form #chall_tel_1{margin-left:0;} #chall_writer_form #chall_email{width:95%; } #chall_writer_form #mychall_nobel_title{width:95%;} #chall_writer_form #mychall_nobel_subtitle{width:95%;} #chall_writer_form #mychall_nobel_intro{color:#676767; letter-spacing:-0.05em;} #chall_writer_form input[type="email"]{padding:5px 8px; font-size:1.05em; font-family: 'Nanum Gothic', sans-serif;} #chall_writer_form textarea{-webkit-writing-mode: horizontal-tb;resize:none; padding:5px 8px;letter-spacing:-0.09em; border:1px solid #ccc; border-radius:3px; width:95%; font-family: 'Nanum Gothic', sans-serif; color:#a5a5a5; line-height:1.5; font-size:1.05em;-webkit-overflow-scrolling:touch;} #chall_writer_form .txtarea_box{overflow: scroll; border:1px solid #ccc; border-radius:3px; width:95%; background:#fff; max-height:200px;} #chall_writer_form .txtarea_box textarea{ padding:5px 8px 0; border:none; width:100%; } #chall_writer_form .txtarea_box p{/* width:100%; */margin-top: -3px; font-weight:bold; padding:0 8px 5px; font-family: 'Nanum Gothic', sans-serif; color:#afafaf; line-height:1.5; letter-spacing:-0.09em; font-size:1.05em;} #chall_writer_form .txtarea_box p br{display:block;} #chall_writer_form .file_path_div{position:relative; width:100%; display:block;} #chall_writer_form .file_path_div #file_path{margin-right:10px; width: 60%;} #chall_writer_form .file_path_hidden{position:absolute; width: 60%; top:0; left:0; height:29px; margin-right:10px; opacity:0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0); -khtml-opacity: 0; -moz-opacity:0; } #chall_writer_form .file_path_btn{width:30%; max-width: 110px; background:#56606b; color:var(--main-ft-color); font-size:0.9em; border-radius:3px; padding: 6px 0;} #chall_writer_form .file_path_div p{margin-top:5px;} #chall_writer_form span{display:block; margin-top:5px;} #chall_writer_form span input{vertical-align:middle; margin-right:3px; margin-top: -1px;} #chall_writer_form .form_btn{display:block; text-align:center; padding:20px 0;} #chall_writer_form .form_btn a{display:inline-block; width:30%; max-width: 120px; font-weight:bold; font-size:1em; padding:8px 0; color:#676767; border-radius:5px; background:#fff; border:1px solid #ccc; margin:0 5px;} #chall_writer_form .form_btn .ok{background:#56606b; color:var(--main-ft-color); transition:.3s;} @media all and (min-width:320px) and (max-width:360px){ .wright_form_wrap .chall_birth_radio{display: block; margin-top: 5px;} .wright_form_wrap .input_box #chall_birth_year{width:30%; margin-right:3px;} .wright_form_wrap .input_box select{padding: 3px 5px; margin-right:3px;} .wright_form_wrap .input_box .chall_birth_radio label{margin: 0 10px 0 5px;} .wright_form_wrap .input_box .chall_birth_radio input{margin-right:0;} .wright_form_wrap .chall_tel_box input{margin: 0 1%;} #chall_writer_form h3{font-size:1.1em;} #chall_writer_form td{font-size:0.9em;} #chall_writer_form td br{display:block;} #chall_writer_form .input_td{width:75%;} #chall_writer_form input[type="text"]{width:50%; margin-right:3%;} #chall_writer_form .chall_sex_box{display: inline-block; width: 45%; margin: 0; margin-top: 5px;} #chall_writer_form #chall_email{width:96%;} #chall_writer_form #mychall_nobel_title{width:96%;} #chall_writer_form #mychall_nobel_subtitle{width:96%;} #chall_writer_form textarea{width:96%;} #chall_writer_form .file_path_hidden{width:62%; margin-right:3%;} #chall_writer_form .file_path_div #file_path{width:62%; margin-right:3%;} } @media all and (min-width:435px) and (max-width:600px){ } @media all and (min-width:601px){ #chall_writer_form textarea{font-size:1em;} #chall_writer_form #mychall_nobel_intro{font-size:1.05em;} } /* 도전작가신청 */ /* 도전 카테고리, 목록개수 셀렉트박스 추가 2018/04/17 start */ /* 장르 셀렉트박스 */ #chall_list_wrap2 .m_chall_radio { width:96%; margin:6px auto 7px; overflow:hidden; } #chall_list_wrap2 .m_chall_radio #genretab_box { float:left; width:120px; } #chall_list_wrap2 .m_chall_radio #genretab_box #SetCate { width:100%; height:30px; border:1px solid #ddd; border-radius:0; font-size:13px; line-height:normal; color:#676767; padding:2px 3px; padding-left:7px; overflow:hidden; background:url("https://cdn.metoon.co.kr/mimg/ic_select.png") no-repeat 95% 70%,#fff; background-size:8px; -webkit-appearance:none; } /* 목록개수 셀렉트박스 */ #chall_list_wrap2 .m_chall_radio #m_chall_list_tab { float:right; width:85px; } #chall_list_wrap2 .m_chall_radio #m_chall_list_tab #SetList { width:100%; height:30px; border:1px solid #ddd; border-radius:0; font-size:13px; line-height:normal; color:#676767; padding:2px 3px; padding-left:7px; overflow:hidden; background:url("https://cdn.metoon.co.kr/mimg/ic_select.png") no-repeat 95% 70%,#fff; background-size:8px; -webkit-appearance:none; } /* 정렬순서 */ #chall_list_wrap2 .m_chall_radio fieldset#orderby_box { float:left; /* text-align:right; */ } #chall_list_wrap2 .m_chall_radio select#orderby { height:30px; border:1px solid #ddd; border-radius:0; font-size:13px; line-height:normal; color:#676767; padding:2px 7px; padding-right:15px; overflow:hidden; background:url("https://cdn.metoon.co.kr/mimg/ic_select.png") no-repeat 92% 70%,#fff; background-size:8px; margin-left:5px; -webkit-appearance:none; } /* 도전 카테고리, 목록개수 셀렉트박스 추가 2018/04/17 end */ /* 성인인증페이지 헤더O */ .adult_cert_noticebox{position:relative; text-align: center; background:#fff; border-top:2px solid #ff306d; padding:30px 0; margin-top:1%;} .adult_cert_noticebox>img{width:30%; min-width: 100px; max-width: 150px; padding:0px 0 15px;} .adult_cert_noticebox h3{font-size:1.3em; font-weight:bold; line-height:1.5; width:95%; margin:0 auto 10px; letter-spacing:-0.05em;} .adult_cert_noticebox h3 span{background:#ff306d; color:var(--main-ft-color); padding:0 2px 2px;} .adult_cert_noticebox p{font-size:0.9em; width:95%; margin:0 auto; color:#676767; max-width: 430px;} .nonadult_btn{margin-top:20px;} .nonadult_btn a{display:block;} .nonadult_btn img{cursor:pointer; width: 250px;} .adult_cert_noticebox2>img{display:block; margin:60px auto 50px;} .adult_cert_noticebox2{ padding:20px 0;} .adult_cert_noticebox2 h3{display:none; font-size:1.3em; font-weight:bold; line-height:1.5; width:95%; margin:0 auto 10px; letter-spacing:-0.05em;} .adult_cert_noticebox2 h3 span{background:#ff306d; color:var(--main-ft-color); padding:0 2px 2px;} .adult_cert_noticebox2 p{display:none; font-size:0.9em; width:95%; margin:0 auto; color:#676767;} .adult_cert_btn_phon{text-align: center;} .adult_cert_btn_phon a{display:inline-block;} .adult_cert_btn_phon img{cursor:pointer; width: 250px;} /* 성인인증페이지 헤더O */ /* 성인인증페이지 헤더X */ #adult_container .adult_cert_noticebox{position:relative; text-align: center; background:#fff; border-top:2px solid #ff306d; padding:30px 0; margin-top:1%;} #adult_container .adult_cert_noticebox>img{width:30%; min-width: 100px; max-width: 150px; padding:0px 0 15px;} #adult_container .adult_cert_noticebox h3{font-size:1.3em; font-weight:bold; line-height:1.5; width:95%; margin:0 auto 10px; letter-spacing:-0.05em;} #adult_container .adult_cert_noticebox h3 span{background:#ff306d; color:var(--main-ft-color); padding:0 2px 2px;} #adult_container .adult_cert_noticebox p{font-size:0.9em; width:95%; margin:0 auto; color:#676767; max-width: 430px;} #adult_container .nonadult_btn{margin-top:20px;} #adult_container .nonadult_btn a{display:block;} #adult_container .nonadult_btn img{cursor:pointer; width: 250px;} #adult_container .adult_cert_noticebox2>img{display:block; margin:60px auto 50px;} #adult_container .adult_cert_noticebox2{ padding:20px 0; max-width: 600px; margin: 0 auto;} #adult_container .adult_cert_noticebox2 h3{display:none; font-size:1.3em; font-weight:bold; line-height:1.5; width:95%; margin:0 auto 10px; letter-spacing:-0.05em;} #adult_container .adult_cert_noticebox2 h3 span{background:#ff306d; color:var(--main-ft-color); padding:0 2px 2px;} #adult_container .adult_cert_noticebox2 p{display:none; font-size:0.9em; width:95%; margin:0 auto; color:#676767;} #adult_container .adult_cert_btn_phon{text-align: center;} #adult_container .adult_cert_btn_phon a{display:inline-block; margin:0 1%; min-width:145px; max-width:250px; width: 45%;} #adult_container .adult_cert_btn_phon img{cursor:pointer; width:100%;} #adult_container #adult_page_wrap{padding:0; position:absolute; top: 5%; right: 0; left: 0; bottom: 0; margin: auto; height:auto;} /* 성인인증페이지 헤더X */ /* 성인인증레이어 */ #layer_body_adult{width: 100%;height: 100%; display: none; position: fixed; z-index: 99999;} #layer_body_adult .layer_wrap{width: 100%; height: 100%; position: relative;} #layer_body_adult .layer_bg{width: 100%; height: 100%; background: url("https://cdn.metoon.co.kr/img/tm_img_back.png"); position: absolute; top: 0; left: 0;} .layer_adult_pop{display:inline-block;vertical-align:middle;text-align:center; position: relative; width: 95%; max-width: 380px; min-height: 260px; background: #fff; border-radius: 5px; overflow: hidden;/* position: absolute; top: 15%; */left: 0; right: 0; margin: auto; z-index: 999; background-size: 100%;} .layer_adult_pop_top{background:#404040; text-align: center; position: relative; height: 65px;} .layer_adult_pop_top>img{position: absolute; border: 10px solid #fff; border-radius: 100px; background: #fff; top: 15px; left: 0; right: 0; width: 71px; margin: auto;} .layer_adult_pop .head_group{padding:40px 15px 0;letter-spacing:-0.03em;} #layer_body_adult .layer_adult_pop h3{text-align: center; font-size: 1.6em; font-weight: 800; color: #2c2c2c; margin-bottom: 10px;} .layer_adult_pop .head_group p{font-size:12px;color:#676767;line-height:1.5;word-break:keep-all;} #layer_body_adult .layer_adult_pop .layer_cont{width: 100%;} #layer_body_adult .layer_adult_pop .layer_cont .txt_1line{padding-top: 15px;} #layer_body_adult .layer_adult_pop .layer_cont p{width: 100%; text-align: center; font-size: 1.1em; color: #676767; padding-top: 25px; line-height: 1.3;letter-spacing: -0.09em;} #layer_body_adult .layer_adult_pop .layer_btn{width: 100%; position: relative; margin-top: 25px; text-align: center; padding-bottom: 25px;} #layer_body_adult .layer_adult_pop .layer_btn a{display: inline-block; text-align: center; min-width:90px; padding: 10px 10px; font-size: 1.2em; color: #fff; font-weight: bold; border-radius: 5px; text-shadow: none;} #layer_body_adult .layer_adult_pop .layer_btn .ok{background: #e84d7d; margin-right: 10px; margin-top: 5px;} #layer_body_adult .layer_adult_pop .layer_btn .close{background: #56606b;} #layer_body_adult .layer_adult_pop .radio_box{width: 90%; margin: 0 auto;} #layer_body_adult .layer_adult_pop .radio_box div{font-size:1.4em; margin:25px 0 15px; letter-spacing:-0.05em;} #layer_body_adult .layer_adult_pop .radio_box div.ipin{margin-top:0;margin-bottom:25px;} #layer_body_adult .layer_adult_pop .radio_box input{margin-right:5px; opacity:0;} #layer_body_adult .layer_adult_pop .radio_box label{position:relative; padding-left:5px;} #layer_body_adult .layer_adult_pop .pop_notice{text-align: left; margin: 0 auto; padding:5px 15px 5px; background:#f1f1f1;} #layer_body_adult .layer_adult_pop .pop_notice p{display:block; color:#676767;} #layer_body_adult .layer_adult_pop .pop_notice a{color:inherit;} #layer_body_adult .layer_adult_pop .radio_box label:after{content: ""; display: block; position: absolute; top: 5px; left: -22px; width: 20px; height: 20px; background: url("https://cdn.metoon.co.kr/mimg/radio_check_off.png") no-repeat center; background-size: 20px;} #layer_body_adult .layer_adult_pop .radio_box .chkselect:after{content: ""; display: block; position: absolute; top: 5px; left: -22px; width: 20px; height: 20px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 20px;} #layer_body_adult .layer_wrap{width: 100%; height: 100%; background:url("https://cdn.metoon.co.kr/img/tm_img_back.png");} #layer_body_adult .adult_pop_l_wrap{color:#141414;text-align:center;} #layer_body_adult .adult_pop_l_wrap:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-left:-4px;} /* 성인인증레이어 */ /* 성인인증레이어 (보물을 찾아라) */ #layer_body_name{width: 100%;height: 100%; display: none; position: fixed; z-index: 99999;} #layer_body_name .layer_wrap{width: 100%; height: 100%; position: relative;} #layer_body_name .layer_bg{width: 100%; height: 100%; background: url("https://cdn.metoon.co.kr/img/tm_img_back.png"); position: absolute; top: 0; left: 0;} #layer_body_name .layer_name_pop{text-align:center; position: relative; width: 95%; max-width: 380px; min-height: 260px; background: #fff; border-radius: 5px; overflow: hidden; position: absolute; top: 15%; left: 0; right: 0; margin: auto; z-index: 999; background-size: 100%;} #layer_body_name .layer_adult_pop_top{background:#404040; text-align: center; position: relative; height: 65px;} #layer_body_name .layer_adult_pop_top>img{position: absolute; border: 10px solid #fff; border-radius: 100px; background: #fff; top: 15px; left: 0; right: 0; width: 71px; margin: auto;} #layer_body_name .layer_name_pop h3{text-align: center; font-size: 1.6em; font-weight: 800; color: #2c2c2c; padding-top: 40px; letter-spacing: -0.09em; margin-bottom: 25px;} #layer_body_name .layer_name_pop .layer_cont{width: 100%;} #layer_body_name .layer_name_pop .layer_cont .txt_1line{padding-top: 15px;} #layer_body_name .layer_name_pop .layer_cont p{width: 100%; text-align: center; font-size: 1.1em; color: #676767; padding-top: 25px; line-height: 1.3;letter-spacing: -0.09em;} #layer_body_name .layer_name_pop .layer_btn{width: 100%; position: relative; margin-top: 25px; text-align: center; padding-bottom: 30px;} #layer_body_name .layer_name_pop .layer_btn a{display: inline-block; text-align: center; min-width:90px; padding: 10px 10px; font-size: 1.2em; color: #fff; font-weight: bold; border-radius: 5px; text-shadow: none;} #layer_body_name .layer_name_pop .layer_btn .ok{background: #e84d7d; margin-right: 10px; margin-top: 5px;} #layer_body_name .layer_name_pop .layer_btn .close{background: #56606b;} #layer_body_name .layer_name_pop .radio_box{width: 90%; margin: 0 auto;} #layer_body_name .layer_name_pop .radio_box div{font-size:1.4em; margin:25px 0; letter-spacing:-0.05em;} #layer_body_name .layer_name_pop .radio_box input{margin-right:5px; opacity:0;} #layer_body_name .layer_name_pop .radio_box label{position:relative; padding-left:5px;} #layer_body_name .layer_name_pop .pop_notice{text-align: left; margin: 0 auto; padding:5px 15px 5px; background:#f1f1f1;} #layer_body_name .layer_name_pop .pop_notice p{display:block; color:#676767;} #layer_body_name .layer_name_pop .pop_notice a{text-decoration:underline;} #layer_body_name .layer_name_pop .radio_box label:after{content: ""; display: block; position: absolute; top: 5px; left: -22px; width: 20px; height: 20px; background: url("https://cdn.metoon.co.kr/mimg/radio_check_off.png") no-repeat center; background-size: 20px;} #layer_body_name .layer_name_pop .radio_box .chkselect:after{content: ""; display: block; position: absolute; top: 5px; left: -22px; width: 20px; height: 20px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 20px;} #layer_body_name .layer_wrap{width: 100%; height: 100%; background:url("https://cdn.metoon.co.kr/img/tm_img_back.png");} /* 성인인증레이어 (보물을 찾아라) */ #coin_notice_pop_wrap{display:none; width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999999;} #coin_notice_pop_wrap .coin_notice_box1{width:100%; height:100%; position:absolute; top:0; left:0; display:flex;margin:auto;z-index:2;} #coin_notice_pop_wrap .coin_notice_box1 .container_box{width:300px; padding:10px 5px; margin:auto; background:#f6f6f6;color:#141414;} #coin_notice_pop_wrap .coin_notice_box1 .container_box h2{color:var(--bg-fc-color); text-indent:5px; font-size:1.2em; position:relative; margin-bottom:10px; cursor: default;} #coin_notice_pop_wrap .coin_notice_box1 .container_box h2 a{position:absolute; top:-4px; bottom:0; right:5px; margin:auto; width:24px;} #coin_notice_pop_wrap .coin_notice_box1 .container_box h2 img{width:100%; display:block; cursor: pointer;} #coin_notice_pop_wrap .coin_notice_box1 .container_box>div{border:1px solid #ddd; background:#fff; padding:10px; text-align:center; letter-spacing: -0.09em;} #coin_notice_pop_wrap .coin_notice_box1 .container_box h3{color:var(--bg-fc-color); margin-top:5px;} #coin_notice_pop_wrap .coin_notice_box1 .container_box p{float:none; margin:5px auto 10px;} #coin_notice_pop_wrap .coin_notice_box1 .container_box .btn_box{width:100%; position:relative;} #coin_notice_pop_wrap .coin_notice_box1 .container_box .btn_box>img{width:100%;} #coin_notice_pop_wrap .coin_notice_box1 .container_box .btn_box div{position:absolute; top:0; left:0; text-align:center; width:100%; height:100%; overflow:hidden;} #coin_notice_pop_wrap .coin_notice_box1 .container_box .btn_box div a{width:50%; float:left; display:block; height:100%; cursor: pointer; position:relative;} #coin_notice_pop_wrap .coin_notice_box1 .container_box .btn_box div a img{margin-top:17px; cursor: pointer;} #coin_notice_pop_wrap .coin_notice_box1 .container_box .btn_box div p{ color:#FFFFFF; font-weight:700; margin-top:10px; font-size: 1.1em; letter-spacing: -0.05em; cursor: pointer;} #coin_notice_pop_wrap .layer_bg{width: 100%; height: 100%; background:url("https://cdn.metoon.co.kr/img/tm_img_back.png");} @media all and (min-width:320px) and (max-width:360px){ #coin_notice_pop_wrap .coin_notice_box1 .container_box{width:285px;} #coin_notice_pop_wrap .coin_notice_box1 .container_box .btn_box div p{margin-top:5px;} #coin_notice_pop_wrap .coin_notice_box1 .container_box h2{margin-bottom:5px;} } /* 코인 알림 */ #coin_notice_pop_wrap2{display:none; width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999999;} #coin_notice_pop_wrap2 .coin_notice_box1_2{width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box{width:300px; padding:10px 5px; margin:30% auto; background:#f6f6f6;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box h2{color:var(--bg-fc-color); text-indent:5px; font-size:1.2em; position:relative; margin-bottom:10px; cursor: default;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box h2 a{position:absolute; top:-4px; bottom:0; right:5px; margin:auto; width:24px;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box h2 img{width:100%; display:block; cursor: pointer;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box>div{border:1px solid #ddd; background:#fff; padding:10px; text-align:center; letter-spacing: -0.09em;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box h3{color:var(--bg-fc-color); margin-top:5px;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box p{float:none; margin:5px auto 10px;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box .btn_box{width:100%; position:relative;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box .btn_box>img{width:100%;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box .btn_box div{position:absolute; top:0; left:0; text-align:center; width:100%; height:100%; overflow:hidden;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box .btn_box div a{position:relative; width:50%; float:left; display:block; height:100%; cursor: pointer;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box .btn_box div a img{margin-top:17px; cursor: pointer;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box .btn_box div p{ color:var(--main-ft-color); font-weight:bold; margin-top:10px; font-size: 1.1em; letter-spacing: -0.05em; cursor: pointer;} #coin_notice_pop_wrap2 .layer_bg{width: 100%; height: 100%; background:url("https://cdn.metoon.co.kr/img/tm_img_back.png");} @media all and (min-width:320px) and (max-width:360px){ #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box{width:285px;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box .btn_box div p{margin-top:5px;} #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box h2{margin-bottom:5px;} } @media screen and (orientation:landscape)and (max-width:1024px){ #coin_notice_pop_wrap2 .coin_notice_box1_2 .container_box{margin:10% auto;} }/* white 버전 */ /* 코인 알림2 */ #coin_notice_fill_wrap{display:none; width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999999;} #coin_notice_fill_wrap .coin_notice_fill_box1{width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; } #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box{width:95%; margin:5% auto; background:#f6f6f6; max-width: 430px; -webkit-animation:slide-down 0.8s forwards; animation:slide-down 0.8s forwards;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box.close{-webkit-animation:slide-up 0.8s forwards; animation:slide-up 0.8s forwards;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box h2{color:var(--bg-fc-color); text-indent:5px; font-size:1.2em; position:relative; margin-bottom:10px; cursor: default;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box h2 a{position:absolute; top:-4px; bottom:0; right:5px; margin:auto; width:24px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box h2 img{width:100%; display:block; cursor: pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box>div{ padding:20px 5px 10px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box .con_box{max-height:480px; border:1px solid #ddd; background:#fff; padding:10px 10px 5px; text-align:center; letter-spacing: -0.09em; height:100%; overflow:scroll;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box h3{color:var(--bg-fc-color); margin-top:5px; font-size:1.25em;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box p{float:none; margin:5px auto 10px; font-size:1em; font-weight:bold; } #coin_notice_fill_wrap input{display:none;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box{width:100%; background:var(--bg-fc-color); margin:0 auto; padding:3px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box img{display:inline-block; vertical-align:middle; margin-bottom: 5px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .title{display: inline-block; padding:15px 0; margin:0; color:var(--main-ft-color); letter-spacing:-0.09em; font-size: 1em; cursor: default; margin-left: 3%; text-align: center; float: none;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .title span{color:#fffc00; font-weight:900;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box p{margin:0; font-size:0.9em; float:left; color:#2c2c2c; cursor:pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .title br{display:none;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box2{margin: 5px auto; width:100%;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box2 .banner{display:block; width:100%;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .top_wrap{background:#fff5f8; width:100%; overflow:hidden;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .top_wrap div{width:100%; overflow:hidden; border:1px solid #fff5f8; border-bottom:1px solid #ffc4d6; box-sizing: border-box; } #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .top_wrap div:last-child{border:1px solid #fff5f8; border-bottom: 1px solid var(--bg-fc-color);} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .top_wrap div.on{background: #fff; border-top: 1px solid var(--bg-fc-color); border-bottom: 1px solid var(--bg-fc-color);} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .top_wrap div label{display:block; overflow:hidden; padding:10px 5px; position:relative; padding-left: 5px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .top_wrap div .chkselect{padding-left:20px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .top_wrap div label:after{content: ""; display: block; position: absolute; top:11px; left: 4px; width: 12px; height: 12px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .top_wrap div .chkselect:after{top: 11px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 12px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .top_wrap div span{color:var(--bg-fc-color); cursor:pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .pay_del{float:right; position:relative; color:#777;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .pay_del:before{content:""; position:absolute; top:50%; left:50%; width:102%; height:1px; background:#555; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%);} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .ic_arrow{float:right; width:7px; height:10px; background:url("https://cdn.metoon.co.kr/mimg/ic_pay_arrow.png") no-repeat center; background-size:100%; margin:2px 5px 0;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .cash{float:right;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .coin_p{width:auto; text-align:left; margin-right:5px; font-size:1.1em;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .top_wrap .coin_popular_tag{display:none; width: 30px; margin: 0 5px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .top_wrap>div:nth-child(2) .coin_popular_tag{ display: inline-block; } #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill{position:relative; margin-bottom:31px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill h2{text-align:left; text-indent:0; padding-left:20px; line-height:18px; font-size:15px; font-weight:bold; color:var(--bg-fc-color); background:url('https://cdn.metoon.co.kr/img/auto_fill_gif.gif') no-repeat 0 center; background-size:16px; margin-bottom:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; opacity:0; -webkit-animation:font-sliding 0.8s forwards; -moz-animation:font-sliding 0.8s forwards; animation:font-sliding 0.8s forwards; -webkit-animation-delay:0.5s; -moz-animation-delay:0.5s; animation-delay:0.5s;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill h2 span{font-size:11px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info{/* padding:7px 5px; */ border:1px solid #d52b2c; border-radius:3px; margin:7px auto;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info input{position:absolute; top:0; left:0; opacity:0; z-index:-1; visibility:hidden;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info.on{background: #fff5f8; border: 1px solid var(--bg-fc-color);} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info label{display:block; overflow:hidden; padding:9px 10px; position:relative; padding-left:20px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info .chkselect{padding-left:20px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info label:after{content: ""; display: block; position: absolute; top:14px; left: 4px; width: 12px; height: 12px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info label p{margin:0; float:left; color:#676767; font-size:0.9em; cursor:pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info .chkselect:after{top: 10px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 12px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box p{margin:0; float:left; color:#676767; font-size:0.9em; cursor:pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info span{color:var(--bg-fc-color); cursor:pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info span.coin_del{color:#b4b4b4;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info .coin_p{width:auto; text-align:left; margin-right:5px; color:#2c2c2c; font-size:1.1em; line-height:1;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info .pay_del{float:right; position:relative; color:#777;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info .pay_del:before{content:""; position:absolute; top:50%; left:50%; width:102%; height:1px; background:#555; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%);} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info .ic_arrow{float:right; width:7px; height:10px; background:url("https://cdn.metoon.co.kr/mimg/ic_pay_arrow.png") no-repeat center; background-size:100%; margin:2px 5px 0 7px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info .cash{float:right; color:#2c2c2c;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill a.s_promo_btn{display:block; width:100%; height:37px; line-height:37px; text-align:center; border-radius:3px; background-color:var(--bg-fc-color); color:var(--main-ft-color); font-size:14px; font-weight:bold; border-bottom:3px solid #a22828;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill a.s_promo_btn:hover{background-color:#b20f0f;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill a.s_promo_info_btn{display:inline-block; float:right; font-size:11px; color:#363636; margin-top:5px; line-height:1;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .notice_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.2); z-index:1;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .notice{position:absolute; top:10%; left:50%; margin-left:-135px; width:270px; background-color:#f5f5f5; padding:15px 5px 10px; color:#010101; border:1px solid #ddd;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .notice div{padding:15px 10px 5px; font-size:12px; background-color:#FFFFFF; text-align:left; border:1px solid #ddd;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .notice p{position:relative; margin-bottom:7px; line-height:1.4; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding-left:10px; letter-spacing:-0.05em;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .notice p:before{content:"-"; display:block; color:#010101; position:absolute; top:0; left:0;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .notice p:last-child{margin-bottom:0;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .notice .notice_btn{display:block; width:60px; height:30px; line-height:30px; font-size:14px; color:var(--main-ft-color); font-weight:bold; text-align:center; margin:15px auto 7px; background-color:var(--bg-fc-color); border-radius:3px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt:after{content:""; display:block; clear:both;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info{position:relative; padding:15px 0 2px; border:1px solid #d52b2c; border-radius:3px; margin:7px auto;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt{padding-top:5px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_kt_info .promo_logo_box{position:absolute; top:0; left:11px; width:70%; max-width:222px; min-width:182px; border:1px solid var(--bg-fc-color); background-color:#FFFFFF; border-radius:4px; margin:-3% auto 0; display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_kt_info .promo_logo_box:after{content:""; display:block; clear:both;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_kt_info .promo_logo_box p{float:left; margin:0;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_kt_info .promo_logo_box .promo_logo{width:32%; -webkit-box-flex:1;flex:1;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_kt_info .promo_logo_box .promo_logo img{width:70%; vertical-align:top;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_kt_info .promo_logo_box .promo_logo_txt{width:68%; -webkit-box-flex:2;flex:2; background-color:var(--bg-fc-color);} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_kt_info .promo_logo_box .promo_logo_txt img{width:100%; vertical-align:top;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info input{position:absolute; top:0; left:0; opacity:0; z-index:-1; visibility:hidden;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info.on{background: #fff5f8; border: 1px solid var(--bg-fc-color);} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info label{display:block; overflow:hidden; padding:9px 10px; position:relative; padding-left:20px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info .chkselect{padding-left:20px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info label:after{content: ""; display: block; position: absolute; top:14px; left: 4px; width: 12px; height: 12px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info label p{margin:0; float:left; color:#676767; font-size:0.9em; cursor:pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info .chkselect:after{top: 10px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 12px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box p{margin:0; float:left; color:#676767; font-size:0.9em; cursor:pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info span{color:var(--bg-fc-color); cursor:pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info span.coin_del{color:#b4b4b4;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info .coin_p{width:auto; text-align:left; margin-right:5px; color:#2c2c2c; font-size:1.1em; line-height:1;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info .pay_del{float:right; position:relative; color:#777;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info .pay_del:before{content:""; position:absolute; top:50%; left:50%; width:102%; height:1px; background:#555; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%);} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info .ic_arrow{float:right; width:7px; height:10px; background:url("https://cdn.metoon.co.kr/mimg/ic_pay_arrow.png") no-repeat center; background-size:100%; margin:2px 5px 0 7px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info .cash{float:right; color:#2c2c2c;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt a.s_promo_btn{display:block; width:100%; height:37px; line-height:37px; text-align:center; border-radius:3px; background-color:var(--bg-fc-color); color:var(--main-ft-color); font-size:14px; font-weight:bold; border-bottom:3px solid #a22828;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt a.s_promo_btn:hover{background-color:#b20f0f;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt a.s_promo_info_kt_btn{display:inline-block; float:right; font-size:11px; color:#363636; margin-top:5px; line-height:1;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .notice_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.2); z-index:1;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .notice{position:absolute; top:10%; left:50%; margin-left:-135px; width:270px; background-color:#f5f5f5; padding:15px 5px 10px; color:#010101; border:1px solid #ddd;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .notice div{padding:15px 10px 5px; font-size:12px; background-color:#FFFFFF; text-align:left; border:1px solid #ddd;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .notice p{position:relative; margin-bottom:7px; line-height:1.4; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding-left:10px; letter-spacing:-0.05em;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .notice p:before{content:"-"; display:block; color:#010101; position:absolute; top:0; left:0;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .notice p:last-child{margin-bottom:0;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .notice .notice_btn{display:block; width:60px; height:30px; line-height:30px; font-size:14px; color:var(--main-ft-color); font-weight:bold; text-align:center; margin:15px auto 7px; background-color:var(--bg-fc-color); border-radius:3px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box{width:100%; margin-top:10px; border-top:2px solid #cecece;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .bottom_wrap{width:100%; overflow:hidden;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .bottom_wrap div{width:100%; overflow:hidden; border:1px solid #fff; box-sizing: border-box; border-bottom:1px solid #e1e1e1; } #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .bottom_wrap div.on{background: #fff5f8; border: 1px solid var(--bg-fc-color);} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .bottom_wrap div label{display:block; overflow:hidden; padding:9px 10px; position:relative; padding-left:20px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .bottom_wrap div .chkselect{padding-left:20px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .bottom_wrap div label:after{content: ""; display: block; position: absolute; top:14px; left: 4px; width: 12px; height: 12px; background-size: 12px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .bottom_wrap div .chkselect:after{top: 10px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 12px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box p{margin:0; float:left; color:#676767; font-size:0.9em; cursor:pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box p.coin_txt10{padding-top:2px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .bottom_wrap div span{color:var(--bg-fc-color); cursor:pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .bottom_wrap div span.coin_del{color:#b4b4b4;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .coin_p{width:auto; text-align:left; margin-right:5px; color:#2c2c2c; font-size:1.1em; line-height:1;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .pay_del{float:right; position:relative; color:#777;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .pay_del:before{content:""; position:absolute; top:50%; left:50%; width:102%; height:1px; background:#555; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%);} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .ic_arrow{float:right; width:7px; height:10px; background:url("https://cdn.metoon.co.kr/mimg/ic_pay_arrow.png") no-repeat center; background-size:100%; margin:2px 5px 0 7px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .cash{float:right; color:#2c2c2c;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .coin_popular_tag{width: 35px; margin: 0 5px; display: none; vertical-align: middle;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .bottom_wrap>div:nth-child(3) .coin_popular_tag{ display: inline-block; } #coin_notice_fill_wrap .coin_notice_fill_box1 .phone_fill_btn{height:37px; border:none; position:relative; display: block; width:100%; background:var(--bg-fc-color); color:var(--main-ft-color); margin:10px auto; border-radius:3px; font-size:1.1em; font-weight:bold; border-bottom:3px solid #a22828; box-sizing:content-box;} #coin_notice_fill_wrap .coin_notice_fill_box1 .phone_fill_btn_line:after{display:block; content:""; border:1px solid #fff; position:absolute; top:2px; bottom:2px; left:2px; right:2px; margin:auto; border-radius: 3px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .phone_fill_btn:hover{background:#b20f0f;} #coin_notice_fill_wrap .coin_notice_fill_box1 .today_close{text-align:right; padding-right:10px; font-size:13px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .today_close input{display:inline-block;} #coin_notice_fill_wrap .coin_notice_fill_box1 .today_close input, #coin_notice_fill_wrap .coin_notice_fill_box1 .today_close label{vertical-align:middle;} #coin_notice_fill_wrap .coin_notice_fill_box1 .today_close .auto_fill_kt_close{display:inline-block; width:40px; height:25px; border:0 none; background-color:var(--bg-fc-color); color:var(--main-ft-color); border-radius:3px; font-size:13px; font-weight:bold; letter-spacing:-0.05em; vertical-align:middle;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box .btn_box{width:100%; position:relative;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box .btn_box>img{width:100%;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box .btn_box div{position:absolute; top:0; left:0; text-align:center; width:100%; height:100%; overflow:hidden;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box .btn_box div a{position:relative; width:50%; float:left; display:block; height:100%; cursor: pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box .btn_box div a img{margin-top:17px; cursor: pointer;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box .btn_box div p{ color:var(--main-ft-color); font-weight:bold; margin-top:10px; font-size: 1.1em; letter-spacing: -0.05em; cursor: pointer;} #coin_notice_fill_wrap .layer_bg{width: 100%; height: 100%; background:url("https://cdn.metoon.co.kr/img/tm_img_back.png");} @media all and (min-width:320px) and (max-width:350px){ #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box img{vertical-align: text-bottom; margin-bottom:0;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box p{font-size:0.9em;} } @media all and (min-width:350px) and (max-width:360px){ #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box img{vertical-align: text-bottom; margin-bottom:0;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box{margin-top:7%;} } @media all and (min-width:320px) and (max-width:360px){ #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .coin_p{width:auto; font-size:1em;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .coin_p{width:auto; font-size:1em;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .title br{display:block;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .title{padding: 10px 0 15px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box .con_box{max-height:80vh; overflow:scroll;} #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .top_wrap div label{padding: 10px 5px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box .bottom_wrap div label{padding: 9px 5px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info label{padding:9px 5px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info label .bonus{display:none;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info label{padding:9px 5px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info label .bonus{display:none;} } @media all and (min-width:340px) and (max-width:360px){ #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill .s_promo_info label{padding:9px 10px;} #coin_notice_fill_wrap .coin_notice_fill_box1 .s_promo_fill_kt .s_promo_kt_info label{padding:9px 10px;} } @media screen and (orientation:landscape)and (max-width:1024px){ #coin_notice_fill_wrap .coin_notice_fill_box1 .top_box .title br{display:none;} #coin_notice_fill_wrap .coin_notice_fill_box1 .container_box .con_box{height:70vh; overflow:scroll;} }/* white 버전 */ /* 코인 알림 결제 */ #coin_notice_fill_wrap2{display:none; width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999999;} #coin_notice_fill_wrap2 .coin_notice_fill_box2{width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; } #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box{width:95%; margin:5% auto; background:#f6f6f6; max-width: 430px; position:relative; -webkit-animation:slide-down 0.8s forwards; animation:slide-down 0.8s forwards; z-index:99;} @keyframes slide-down{ 0%{ -webkit-transform:translate3d(0, -50%, 0); -moz-transform:translate3d(0, -50%, 0); -o-transform:translate3d(0, -50%, 0); -ms-transform:translate3d(0, -50%, 0); transform:translate3d(0, -50%, 0); opacity:0; } 100%{ -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); opacity:1; } } #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box.close{-webkit-animation:slide-up 0.8s forwards; animation:slide-up 0.8s forwards;} @keyframes slide-up{ 0%{ -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); opacity:1; } 100%{ -webkit-transform:translate3d(0, -50%, 0); -moz-transform:translate3d(0, -50%, 0); -o-transform:translate3d(0, -50%, 0); -ms-transform:translate3d(0, -50%, 0); transform:translate3d(0, -50%, 0); opacity:0; } } #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box h2{color:var(--bg-fc-color); text-indent:5px; font-size:1.2em; position:relative; margin-bottom:10px; cursor: default;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box h2 a{position:absolute; top:-4px; bottom:0; right:5px; margin:auto; width:24px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box h2 img{width:100%; display:block; cursor: pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box>div{ padding:20px 5px 10px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box .con_box{max-height:480px; border:1px solid #ddd; background:#fff; padding:10px 10px 5px; text-align:center; letter-spacing: -0.09em; height:100%; overflow:scroll;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box h3{color:var(--bg-fc-color); margin-top:5px; font-size:1.25em;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box p{float:none; margin:5px auto 10px; font-size:1.05em; font-weight:bold; } #coin_notice_fill_wrap2 input{display:none;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box{width:100%; background:var(--bg-fc-color); margin:0 auto; padding:3px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box img{display:inline-block; vertical-align:middle; margin-bottom: 5px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .title{display: inline-block; padding:15px 0; margin:0; color:var(--main-ft-color); letter-spacing:-0.09em; font-size: 1em; cursor: default; margin-left: 3%; text-align: center; float: none;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .title span{color:#fffc00; font-weight:900;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box p{margin:0; float:left; color:#2c2c2c; font-size:0.9em; cursor:pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .title br{display:none;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box2{margin: 5px auto; width:100%;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box2 .banner{display:block; width:100%;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap{background:#fff5f8; width:100%; overflow:hidden;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap div{width:100%; overflow:hidden; border:1px solid #fff5f8; border-bottom:1px solid #ffc4d6; box-sizing: border-box; } #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap div:last-child{border:1px solid #fff5f8; border-bottom: 1px solid var(--bg-fc-color);} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap div.on{background: #fff; border-top: 1px solid var(--bg-fc-color); border-bottom: 1px solid var(--bg-fc-color);} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap div label{display:block; overflow:hidden; padding:10px 5px; position:relative; padding-left:5px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap div .chkselect{padding-left:20px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap div label:after{content: ""; display: block; position: absolute; top:11px; left: 4px; width: 12px; height: 12px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap div .chkselect:after{top: 11px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 12px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap div span{color:var(--bg-fc-color); cursor:pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .pay_del{float:right; position:relative; color:#777;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .pay_del:before{content:""; position:absolute; top:50%; left:50%; width:102%; height:1px; background:#555; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%);} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .ic_arrow{float:right; width:7px; height:10px; background:url("https://cdn.metoon.co.kr/mimg/ic_pay_arrow.png") no-repeat center; background-size:100%; margin:2px 5px 0;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .cash{float:right;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .coin_p{width:auto; text-align:left; margin-right:5px; font-size:1.1em;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap .coin_popular_tag{display:none; width: 30px; margin: 0 5px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap>div:nth-child(2) .coin_popular_tag{ display: inline-block; } #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill{position:relative; margin-bottom:31px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill h2{text-align:left; text-indent:0; padding-left:20px; line-height:18px; font-size:15px; font-weight:bold; color:var(--bg-fc-color); background:url('https://cdn.metoon.co.kr/img/auto_fill_gif.gif') no-repeat 0 center; background-size:16px; margin-bottom:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; opacity:0; -webkit-animation:font-sliding 0.8s forwards; -moz-animation:font-sliding 0.8s forwards; animation:font-sliding 0.8s forwards; -webkit-animation-delay:0.5s; -moz-animation-delay:0.5s; animation-delay:0.5s;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill h2 span{font-size:11px;} @keyframes font-sliding{ 0%{ -webkit-transform:translateX(50%) scale(0.4); -moz-transform:translateX(50%) scale(0.4); -o-transform:translateX(50%) scale(0.4); -ms-transform:translateX(50%) scale(0.4); transform:translateX(50%) scale(0.4); opacity:0; } 55%{ -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); } 68%{ -webkit-transform:translateX(3px); -moz-transform:translateX(3px); -o-transform:translateX(3px); -ms-transform:translateX(3px); transform:translateX(3px); } 100%{ -webkit-transform:translateX(0) scale(1); -moz-transform:translateX(0) scale(1); -o-transform:translateX(0) scale(1); -ms-transform:translateX(0) scale(1); transform:translateX(0) scale(1); opacity:1; } } #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info{/* padding:7px 5px; */ border:1px solid #d52b2c; border-radius:3px; margin:7px auto;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info input{position:absolute; top:0; left:0; opacity:0; z-index:-1; visibility:hidden;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info.on{background: #fff5f8; border: 1px solid var(--bg-fc-color);} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info label{display:block; overflow:hidden; padding:9px 10px; position:relative; padding-left:20px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info .chkselect{padding-left:20px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info label:after{content: ""; display: block; position: absolute; top:14px; left: 4px; width: 12px; height: 12px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info label p{margin:0; float:left; color:#676767; font-size:0.9em; cursor:pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info .chkselect:after{top: 10px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 12px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box p{margin:0; float:left; color:#676767; font-size:0.9em; cursor:pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info span{color:var(--bg-fc-color); cursor:pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info span.coin_del{color:#b4b4b4;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info .coin_p{width:auto; text-align:left; margin-right:5px; color:#2c2c2c; font-size:1.1em; line-height:1;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info .pay_del{float:right; position:relative; color:#777;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info .pay_del:before{content:""; position:absolute; top:50%; left:50%; width:102%; height:1px; background:#555; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%);} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info .ic_arrow{float:right; width:7px; height:10px; background:url("https://cdn.metoon.co.kr/mimg/ic_pay_arrow.png") no-repeat center; background-size:100%; margin:2px 5px 0 7px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info .cash{float:right; color:#2c2c2c;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill a.s_promo_btn{display:block; width:100%; height:37px; line-height:37px; text-align:center; border-radius:3px; background-color:var(--bg-fc-color); color:var(--main-ft-color); font-size:14px; font-weight:bold; border-bottom:3px solid #a22828;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill a.s_promo_btn:hover{background-color:#b20f0f;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill a.s_promo_info_btn{display:inline-block; float:right; font-size:11px; color:#363636; margin-top:5px; line-height:1;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .notice_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.2); z-index:1;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .notice{position:absolute; top:10%; left:50%; margin-left:-135px; width:270px; background-color:#f5f5f5; padding:15px 5px 10px; color:#010101; border:1px solid #ddd;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .notice div{padding:15px 10px 5px; font-size:12px; background-color:#FFFFFF; text-align:left; border:1px solid #ddd;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .notice p{position:relative; margin-bottom:7px; line-height:1.4; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding-left:10px; letter-spacing:-0.05em;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .notice p:before{content:"-"; display:block; color:#010101; position:absolute; top:0; left:0;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .notice p:last-child{margin-bottom:0;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .notice .notice_btn{display:block; width:60px; height:30px; line-height:30px; font-size:14px; color:var(--main-ft-color); font-weight:bold; text-align:center; margin:15px auto 7px; background-color:var(--bg-fc-color); border-radius:3px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt:after{content:""; display:block; clear:both;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info{position:relative; padding:15px 0 2px; border:1px solid #d52b2c; border-radius:3px; margin:7px auto;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt{padding-top:5px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_kt_info .promo_logo_box{position:absolute; top:0; left:11px; width:70%; max-width:222px; border:1px solid var(--bg-fc-color); background-color:#FFFFFF; border-radius:4px; margin:-3% auto 0; display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_kt_info .promo_logo_box:after{content:""; display:block; clear:both;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_kt_info .promo_logo_box p{float:left; margin:0;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_kt_info .promo_logo_box .promo_logo{width:32%; -webkit-box-flex:1;flex:1;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_kt_info .promo_logo_box .promo_logo img{width:70%; vertical-align:top;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_kt_info .promo_logo_box .promo_logo_txt{width:68%; -webkit-box-flex:2;flex:2; background-color:var(--bg-fc-color);} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_kt_info .promo_logo_box .promo_logo_txt img{width:100%; vertical-align:top;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info input{position:absolute; top:0; left:0; opacity:0; z-index:-1; visibility:hidden;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info.on{background: #fff5f8; border: 1px solid var(--bg-fc-color);} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info label{display:block; overflow:hidden; padding:9px 10px; position:relative; padding-left:20px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info .chkselect{padding-left:20px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info label:after{content: ""; display: block; position: absolute; top:14px; left: 4px; width: 12px; height: 12px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info label p{margin:0; float:left; color:#676767; font-size:0.9em; cursor:pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info .chkselect:after{top: 10px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 12px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box p{margin:0; float:left; color:#676767; font-size:0.9em; cursor:pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info span{color:var(--bg-fc-color); cursor:pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info span.coin_del{color:#b4b4b4;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info .coin_p{width:auto; text-align:left; margin-right:5px; color:#2c2c2c; font-size:1.1em; line-height:1;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info .pay_del{float:right; position:relative; color:#777;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info .pay_del:before{content:""; position:absolute; top:50%; left:50%; width:102%; height:1px; background:#555; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%);} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info .ic_arrow{float:right; width:7px; height:10px; background:url("https://cdn.metoon.co.kr/mimg/ic_pay_arrow.png") no-repeat center; background-size:100%; margin:2px 5px 0 7px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info .cash{float:right; color:#2c2c2c;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt a.s_promo_btn{display:block; width:100%; height:37px; line-height:37px; text-align:center; border-radius:3px; background-color:var(--bg-fc-color); color:var(--main-ft-color); font-size:14px; font-weight:bold; border-bottom:3px solid #a22828;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt a.s_promo_btn:hover{background-color:#b20f0f;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt a.s_promo_info_kt_btn{display:inline-block; float:right; font-size:11px; color:#363636; margin-top:5px; line-height:1;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .notice_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.2); z-index:1;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .notice{position:absolute; top:10%; left:50%; margin-left:-135px; width:270px; background-color:#f5f5f5; padding:15px 5px 10px; color:#010101; border:1px solid #ddd;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .notice div{padding:15px 10px 5px; font-size:12px; background-color:#FFFFFF; text-align:left; border:1px solid #ddd;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .notice p{position:relative; margin-bottom:7px; line-height:1.4; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding-left:10px; letter-spacing:-0.05em;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .notice p:before{content:"-"; display:block; color:#010101; position:absolute; top:0; left:0;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .notice p:last-child{margin-bottom:0;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .notice .notice_btn{display:block; width:60px; height:30px; line-height:30px; font-size:14px; color:var(--main-ft-color); font-weight:bold; text-align:center; margin:15px auto 7px; background-color:var(--bg-fc-color); border-radius:3px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box{width:100%; margin-top:10px; border-top:2px solid #cecece;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box:after{display:block; content:""; clear:both;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .bottom_wrap{width:100%; overflow:hidden;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .bottom_wrap div{width:100%; overflow:hidden; border:1px solid #fff; box-sizing: border-box; border-bottom:1px solid #e1e1e1; } #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .bottom_wrap div.on{background: #fff5f8; border: 1px solid var(--bg-fc-color);} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .bottom_wrap div label{display:block; overflow:hidden; padding:9px 10px; position:relative; padding-left:20px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .bottom_wrap div .chkselect{padding-left:20px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .bottom_wrap div label:after{content: ""; display: block; position: absolute; top:14px; left: 4px; width: 12px; height: 12px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .bottom_wrap div .chkselect:after{top: 10px; background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 12px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box p{margin:0; float:left; color:#676767; font-size:0.9em; cursor:pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .bottom_wrap div span{color:var(--bg-fc-color); cursor:pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .bottom_wrap div span.coin_del{color:#b4b4b4;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .coin_p{width:auto; text-align:left; margin-right:5px; color:#2c2c2c; font-size:1.1em; line-height:1;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .pay_del{float:right; position:relative; color:#777;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .pay_del:before{content:""; position:absolute; top:50%; left:50%; width:102%; height:1px; background:#555; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%);} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .ic_arrow{float:right; width:7px; height:10px; background:url("https://cdn.metoon.co.kr/mimg/ic_pay_arrow.png") no-repeat center; background-size:100%; margin:2px 5px 0 7px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .cash{float:right; color:#2c2c2c;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .coin_popular_tag{width: 35px; margin: 0 5px; display: none; vertical-align: middle;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .bottom_wrap>div:nth-child(3) .coin_popular_tag{ display: inline-block; } #coin_notice_fill_wrap2 .coin_notice_fill_box2 .phone_fill_btn{height:37px; border:none; position:relative; display: block; width:100%; background:var(--bg-fc-color); color:var(--main-ft-color); margin:10px auto; border-radius:3px; font-size:1.1em; font-weight:bold; border-bottom:3px solid #a22828; box-sizing:content-box;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .phone_fill_btn:hover{background-color:#b20f0f;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .phone_fill_btn_line:after{display:block; content:""; border:1px solid #fff; position:absolute; top:2px; bottom:2px; left:2px; right:2px; margin:auto; border-radius: 3px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .phone_fill_btn2{width:48%; margin:10px 1%; float:left;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .today_close{text-align:right; padding-right:10px; font-size:13px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .today_close input{display:inline-block;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .today_close input, #coin_notice_fill_wrap2 .coin_notice_fill_box2 .today_close label{vertical-align:middle;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .today_close .auto_fill_close{display:inline-block; width:40px; height:25px; border:0 none; background-color:var(--bg-fc-color); color:var(--main-ft-color); border-radius:3px; font-size:13px; font-weight:bold; letter-spacing:-0.05em; vertical-align:middle;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box .btn_box{width:100%; position:relative;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box .btn_box>img{width:100%;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box .btn_box div{position:absolute; top:0; left:0; text-align:center; width:100%; height:100%; overflow:hidden;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box .btn_box div a{width:50%; float:left; display:block; height:100%; cursor: pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box .btn_box div a img{margin-top:17px; cursor: pointer;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box .btn_box div p{ color:var(--main-ft-color); font-weight:bold; margin-top:10px; font-size: 1.1em; letter-spacing: -0.05em; cursor: pointer;} #coin_notice_fill_wrap2 .layer_bg{position:fixed; top:0; left:0; right:0; bottom:0; width: 100%; height: 100%; background:url("https://cdn.metoon.co.kr/img/tm_img_back.png");} @media all and (min-width:320px) and (max-width:350px){ #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box img{vertical-align: text-bottom; margin-bottom:0;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box p{font-size:0.9em;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap>div:nth-child(2) .coin_popular_tag{display:none;} } @media all and (min-width:350px) and (max-width:360px){ #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box img{vertical-align: text-bottom; margin-bottom:0;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box{margin-top:7%;} } @media all and (min-width:320px) and (max-width:360px){ #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .coin_p{width:auto; font-size:1em;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .coin_p{width:auto; font-size:1em;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .title br{display:block;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .title{padding: 10px 0 15px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box .con_box{height:80vh; overflow:scroll;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .top_wrap div label{padding: 10px 5px; } #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .bottom_wrap div label{padding: 9px 5px; } #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box .bottom_wrap div .chkselect:after{top:10px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info label{padding:9px 5px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info .chkselect:after{top:10px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info .bonus{display:none;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info label{padding:9px 5px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info .bonus{display:none;} } @media all and (min-width:340px) and (max-width:360px){ #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill .s_promo_info label{padding:9px 10px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .s_promo_fill_kt .s_promo_kt_info label{padding:9px 10px;} } @media screen and (orientation:landscape)and (max-width:1024px){ #coin_notice_fill_wrap2 .coin_notice_fill_box2 .top_box .title br{display:none;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .container_box .con_box{height:70vh; overflow:scroll;} }/* white버전 */ /* 코인 알림 결제 */ /* 포토툰 */ #menu_btn_box_toon .list_btn{float:right;} #toon_view_cont_wrap img{width:100%; display:block; max-width:720px; margin:0 auto;-webkit-user-drag:none;} #toon_view_cont_wrap .toon_img{text-align:center;} #toon_view_cont_wrap .toon_img > img{display:none; vertical-align:top;} .xtg_work_img{position:relative;} /* 포토툰 */ #content_wrap .s_notice_txt{float:left; margin-top: 4px; letter-spacing:-0.05em;} #content_wrap .s_notice_txt a{color: #4a4a4a; text-decoration: underline;} #content_wrap .radio_nobel_data_btn{float: left; border:1px solid #ddd; border-radius:3px; background:#fff; padding:5px 3px 5px 8px; display:block; width:23%; max-width:100px; min-width:80px; text-align:center; letter-spacing:-0.09em; color:#676767; display:none;} #content_wrap .radio_nobel_data_btn span{display:none; width: 16px; height: 16px; margin-right: 2px; background: url("https://cdn.metoon.co.kr/mimg/buy_tag_img_white.png") no-repeat center;background-size: 16px; vertical-align: middle; margin-top: 0; margin-left: -5px;} /* 성인 버튼 css */ #adult_body_wrap #s_nobel_tab_wrap li a.on{color: var(--bg-fc-color); border-bottom: 2px solid var(--bg-fc-color);} #adult_body_wrap #sub_s_nobel .photo_radio .chkselect{color:var(--bg-fc-color)} #adult_body_wrap #sub_s_nobel .s_nobel_cont .toon_content li .hits{color:#f52b2b; border: 1px solid #f52b2b;} #adult_body_wrap #sub_s_nobel .s_nobel_cont .toon_content li .hits .heart{color:#f52b2b; background: url("https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png") no-repeat 0 25%; background-size: 13px 11px;} #adult_body_wrap #sub_s_nobel .b_nobel_cont .all_list a .txt_box .series{background:#c53232;} #adult_body_wrap #sub_s_nobel .b_nobel_cont li .txt_box_all div .series{background:#c53232;} #adult_body_wrap #sub_s_nobel .photo_radio .chkselect:after{background: url("https://cdn.metoon.co.kr/mimg/adult_radio_check_on.png") no-repeat center; background-size: 13px;} #adult_body_wrap #chall_list_wrap .detail_list_more a{color:var(--bg-fc-color); border:1px solid var(--bg-fc-color);} #adult_body_wrap #sub_today .today_cont .today_list_more{width: 100%; padding-bottom:15px; background: #f5f5f5;} #adult_body_wrap #sub_today .today_cont .today_list_more a{ color: var(--bg-fc-color); border: 1px solid var(--bg-fc-color);} /* 성인 버튼 css */ /* 프리미엄 상품권 */ #giftcard_layer_body{width: 100%;height: 100%; position: fixed; z-index: 100000000; top:0; left:0%; overflow: auto;background: url(https://cdn.metoon.co.kr/img/tm_img_back.png);} #giftcard_layer_body:not(.flex_){display: none;} #giftcard_layer_body .layer_wrap{width:95%; max-width:360px; margin:auto; position:relative; z-index: 9999;} #giftcard_layer_body .giftcard_box{position:relative; width:100%; color:var(--main-ft-color); font-size:1em;letter-spacing: -0.05em;line-height:1.7; } #giftcard_layer_body .giftcard_box>img{width:100%; display:block;} #giftcard_layer_body .giftcard_box>div{width:90%; position:absolute; top:0; left:0; right:0; margin: auto;} #giftcard_layer_body h3{font-size:30px; letter-spacing:-0.1em; color:var(--main-ft-color); padding-top:10px; padding-bottom: 5px;} #giftcard_layer_body .giftcard_btm h3{color:#5c274e;} #giftcard_layer_body h3 span{font-size:20px;} #giftcard_layer_body .giftcard_btm{color:#343434; padding-bottom:40px; border-radius:0 0 5px 5px; background-color:#EAEAEA;} #giftcard_layer_body .giftcard_btm p{font-size:15px;word-break:keep-all;word-wrap:break-word;text-shadow:0 1px #FFF, 0 -1px #FFF, 1px 0 #FFF, -1px 0 #FFF;} #giftcard_layer_body .giftcard_btm div{cursor:default;} #giftcard_layer_body .giftcard_btm a{cursor:pointer; /* border:1px solid #734667; */ color:#734667; padding:2px 3px; border-radius:3px; /* margin-top: 5px; */ display: inline-block; } #giftcard_layer_body .giftcard_box form{width:90%; position:absolute; bottom:0; left:0; right:0; margin:auto; padding-bottom:20px;} #giftcard_layer_body .giftcard_box input{width:100%; border:1px solid #d5d5d5; box-sizing:border-box; margin-bottom:5px; border-radius:5px; height: 36px; padding:10px; font-size: 1.1em; cursor:text;} #giftcard_layer_body .giftcard_box input[type="text"]::placeholder{color:var(--sub-ft-color);} #giftcard_layer_body .giftcard_box button{width:100%; border:none; border-radius:5px; color:#FFF; font-weight:500; height: 36px; font-size: 1.1em; line-height: 0; background:#332e30;} #giftcard_layer_body .giftcard_btm button{background:#5c274e;} #giftcard_layer_body .back_btn{position: absolute; top: 10px; right: 10px; z-index: 999;} #giftcard_layer_body .back_btn img{display:block;cursor:pointer;filter:drop-shadow(0 0 1px rgba(0, 0, 0, 0.7)); } /* @media all and (min-width:280px) and (max-width:350px){ */ @media all and (max-width:350px){ #giftcard_layer_body h3{font-size: 27px; padding-bottom:0;} #giftcard_layer_body h3 span{font-size: 17px;} #giftcard_layer_body p{font-weight:normal;} #giftcard_layer_body p br{display:none;} #giftcard_layer_body .giftcard_btm a{padding:1px 3px;} #giftcard_layer_body .giftcard_btm p{font-size:14px;line-height:1.4;word-break:break-word;} #giftcard_layer_body .giftcard_box form{width:90%; position:absolute; bottom:0; left:0; right:0; margin:auto; padding-bottom:15px;} #giftcard_layer_body .giftcard_box input{width:100%; border:1px solid #d5d5d5; box-sizing:border-box; margin-bottom:5px; border-radius:5px; height: 32px; padding:5px; font-size: 1.1em; cursor:text;} #giftcard_layer_body .giftcard_box button{width:100%; border:none; border-radius:5px; color:var(--main-ft-color); font-weight:bold; height: 32px; font-size: 1.1em; line-height: 0; /* background:#332e30; */} } @media all and (max-width:320px){ #giftcard_layer_body .giftcard_box > img.giftcard_btm_bg{min-height:215px;object-fit:scale-down;object-position:center 0;} } /* 프리미엄 상품권 */ /* 아이폰 홈 바로가기 */ #plus_home{position:fixed; bottom:0; right:0; left:0; margin:auto; z-index: 99999;} #plus_home>div{position:relative; width: 85%; max-width: 320px; min-width: 280px; margin:0 auto;} #plus_home>div>img{width:100%; display:block;} #plus_home .plus_home_txt{position: absolute; top: 0; left: 0; right: 0; margin: auto; padding: 10px;} #plus_home .plus_home_txt>img{max-width:100px; width:25%; float: left; margin-right:10px;} #plus_home .plus_home_txt p{color:#676767; font-size:14px; letter-spacing:-0.09em; margin-top: 5px; line-height: 1.5;} #plus_home .plus_home_txt p img{width:25px; vertical-align: text-bottom; margin-right: 5px; } #plus_home .close{position: absolute; top: -10px; right: -10px; width: 30px; display: block;} #plus_home .close img{width:100%; display:block;} @media all and (min-width:320px) and (max-width:350px){ #plus_home .plus_home_txt p{font-size: 12px;} } @media all and (min-width:350px) and (max-width:360px){ #plus_home .plus_home_txt p{font-size: 13px; letter-spacing: -0.05em; margin-top: 7px;} } /* 아이폰 홈 바로가기 */ /* 티머니 */ #tmoney_layer_body{width: 100%;height: 100%; display: black; position: fixed; z-index: 9999999; top:0; left:0%; overflow: scroll;background: url(https://cdn.metoon.co.kr/img/tm_img_back.png);} #tmoney_layer_body .layer_wrap{width:95%; max-width:300px; margin:10% auto; position:absolute; top:0; right:0; left:0; z-index: 9999;} #tmoney_layer_body .tmoney_box{position:relative; width:100%;max-width: 250px; margin:0 auto; color:var(--main-ft-color); font-weight:bold; font-size:1em;letter-spacing: -0.15em;line-height:1.7; } #tmoney_layer_body .tmoney_box>img{width:100%; display:block;} #tmoney_layer_body .tmoney_btn_box img{cursor:pointer; } #tmoney_layer_body .tmoney_btn_box{position: absolute; bottom: 0; left: 0; right: 0; text-align:center;} #tmoney_layer_body .tmoney_btn_box ul{font-size: 1.3em;} #tmoney_layer_body .tmoney_btn_box li{width:50%; float:left; text-align:center;} #tmoney_layer_body .tmoney_btn_box li{padding: 9px 0; font-size: 0.9em; display: block; color: #676767;} #tmoney_layer_body .tmoney_btn_box .tmoney_btn{display: inline-block; margin:0 auto 7px;} @media all and (min-width:320px) and (max-width:350px){ } /* 티머니 */ /* ok캐시백 */ #okcash_layer_body{width: 100%;height: 100%; display: black; position: fixed; z-index: 9999999; top:0; left:0%; overflow: scroll;background: url(https://cdn.metoon.co.kr/img/tm_img_back.png);} #okcash_layer_body .layer_wrap{width:95%; max-width:300px; margin:10% auto; position:absolute; top:0; right:0; left:0; z-index: 9999;} #okcash_layer_body .okcash_box{position:relative; width:100%;max-width: 250px; margin:0 auto; color:var(--main-ft-color); font-weight:bold; font-size:1em;letter-spacing: -0.15em;line-height:1.7; } #okcash_layer_body .okcash_box>img{width:100%; display:block;} #okcash_layer_body .okcash_btn_box img{cursor:pointer; width:100%;} #okcash_layer_body .okcash_btn_box{position: absolute; bottom: 0; left: 0; right: 0; text-align:center;} #okcash_layer_body .okcash_btn_box ul{font-size: 1.3em;} #okcash_layer_body .okcash_btn_box li{width:50%; float:left; text-align:center;} #okcash_layer_body .okcash_btn_box li{padding: 9px 0; font-size: 0.9em; display: block; color: #676767;} #okcash_layer_body .okcash_btn_box .okcash_btn{display: inline-block; margin:0 auto 7px; width:80%;} @media all and (min-width:320px) and (max-width:350px){ } /* ok캐시백 */ /* 뷰어하단 인기 리스트 */ #popular_novel{width:100%; margin-top:5px; background:#f6f6f6; border:1px solid #ededed; padding:10px 0 0;} #popular_novel h3{margin-left:10px; letter-spacing:-0.09em; background:url(https://cdn.metoon.co.kr/mimg/icon_my_data_dot1.png) no-repeat 0 center; background-size:4px 6px; padding-left:8px; margin-bottom:5px;} .popular_s-box{background:none; border:none; margin-top:5px; width:100%; overflow:hidden; position: relative;} .popular_s-box>div{ width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; position: relative; padding-bottom:15px;} #popular_novel #popular_list{display: table; border:none; text-align:left; width: 500%; margin-left:1%;white-space: nowrap; position:static; top:0; bottom:0; left:0; margin:auto;} #popular_novel #popular_list li{max-width:25%; margin:0px 0.5% 0px 0; display:inline-block; display: table-cell; white-space: nowrap; text-align: center; float:left;} #popular_novel #popular_list li a{display:block;} #popular_novel #popular_list .img_box{width:92%;margin:5px auto; border:1px solid #ddd; position:relative; border-radius:5px; overflow:hidden; } #popular_novel #popular_list .img_box img{width:100%; display:block; border-radius:0;} #popular_novel #popular_list .img_box .img_bg{background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 0 100%; display:block; position:absolute; left:0; width:100%; height:100%; bottom:0; margin:auto;} #popular_novel #popular_list .txt_box p{color:#676767; font-weight:bold; text-align:center; width:100%; font-size:1.1em; margin:8px auto 0px;} .popular_s-box > div{scrollbar-3dlight-color: transparent; scrollbar-arrow-color: transparent; scrollbar-track-color: transparent; scrollbar-darkshadow-color: transparent; scrollbar-face-color: transparent; scrollbar-highlight-color: transparent; scrollbar-shadow-color:transparent;} /* ::-webkit-scrollbar {width: 0px; height: 0px; border: 0px solid transparent;} ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; width:0px; height: 0px; background: transparent;} ::-webkit-scrollbar-track {background:transparent; -webkit-border-radius: 0px; border-radius:0px; -webkit-box-shadow:none;} ::-webkit-scrollbar-thumb {height: 0px; width: 0px; background: transparent; -webkit-border-radius: 0px; border-radius: 0px; -webkit-box-shadow:none; } */ #popular_novel #popular_s-box_wrap>div{position:relative; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height:140px;} #popular_novel #popular_s-box_wrap #popular_list1{/* display: block; */ position: absolute; top: 0; bottom: 0; left: 0; margin: auto; display: table-caption;} #popular_novel #popular_s-box_wrap #popular_list1>div{display: table-cell; width: 210px;} #popular_novel #popular_s-box_wrap #popular_list1>div a{display:block; overflow:hidden; margin:0 5px; width: 95px;} #popular_novel #popular_s-box_wrap #popular_list1 .img_box{width:100%; margin: 5px auto; border: 1px solid #ddd; position: relative; border-radius: 5px; overflow: hidden;} #popular_novel #popular_s-box_wrap #popular_list1 .img_box img{width:100%; display: block; border-radius: 0;} #popular_novel #popular_s-box_wrap #popular_list1 .img_box .img_bg{background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 0 100%; display: block; position: absolute; left: 0; width: 100%; height: 100%; bottom: 0; margin: auto; border-radius: 0 0 5px 5px;} #popular_novel #popular_s-box_wrap #popular_list1 .txt_box p{color: #676767; font-weight: normal; text-align: center; width: 100%; font-size: 1.1em; margin: 5px auto 0px; letter-spacing:-0.09em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #popular_novel #popular_s-box_test>div{position:relative; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height:140px;} #popular_novel #popular_s-box_test #popular_list2{/* display: block; */ position: absolute; top: 0; bottom: 0; left: 0; margin: auto; display: table-caption;} #popular_novel #popular_s-box_test #popular_list2>div{display: table-cell; width: 210px;} #popular_novel #popular_s-box_test #popular_list2>div a{display:block; overflow:hidden; margin:0 5px; width: 95px;} #popular_novel #popular_s-box_test #popular_list2 .img_box{width:100%; margin:5px auto; border:1px solid #ddd; position:relative; border-radius:5px; overflow:hidden;} #popular_novel #popular_s-box_test #popular_list2 .img_box img{width:100%; display:block; border-radius:0;} #popular_novel #popular_s-box_test #popular_list2 .img_box .img_bg{background:url(/assets/img/mobile/img19_bg.png) repeat-x 0 100%; display:block; position:absolute; left:0; width:100%; height:100%; bottom:0; margin:auto;} #popular_novel #popular_s-box_test #popular_list2 .txt_box p{color:#676767; font-weight:bold; text-align:center; width:100%; font-size:1.1em; margin:5px auto 0px; letter-spacing:-0.09em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} @media all and (min-width:380px){ #popular_novel #popular_s-box_test>div{height:160px;} #popular_novel #popular_s-box_test #popular_list2>div a{width:118px;} } @media all and (min-width:550px){ #popular_novel #popular_s-box_test>div{height:220px;} #popular_novel #popular_s-box_test #popular_list2>div a{width:175px;} #popular_novel{max-width:800px; margin:5px auto 0;} } @media all and (min-width:900px){ #popular_novel{padding:10px 10px 0;} } /* 뷰어하단 인기 리스트 */ /* 뷰어하단 인기 리스트1 */ #popular_novel1, #view_content_wrap_btm{max-width:936px;margin-left:auto;margin-right:auto;} #popular_novel1{width:100%; margin-top:5px; padding:0; padding-bottom:10px;} #popular_novel1 #popular_s-box_wrap{width:100%;max-width:690px; border-top:1px solid var(--main-line-color); overflow:hidden;padding-bottom:20px;margin:0 auto;} #popular_novel1 .swiper-container_popularlist{width:100%; position:relative; padding:0 35px; border-bottom:1px solid var(--main-line-color); overflow:visible;} #popular_novel1 .swiper-container_popularlist:after{content:"";display:block;clear:both;} #popular_novel1 #popular_list1{width:100%;} #popular_novel1 #popular_list1 li{width:100%;} #popular_novel1 #popular_list1 a{width:100%; display:block;} #popular_novel1 #popular_list1 a img{display:block; width:100%;} #popular_novel1 #popular_list1 a>div{position:relative; width:100%; /* max-width: 600px; */max-height:32.777vw;max-height:40.777vw; margin: 0px auto;} #popular_novel1 #popular_list1 .txt_box{position:absolute; top: 0; left: 4%; /* letter-spacing: -0.09em; */ max-width: 170px; bottom: 0; margin: auto; height: 90px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;text-shadow:1px 0 rgba(0, 0, 0, 0.84), -1px 0 rgba(0, 0, 0, 0.84), 0 1px rgba(0, 0, 0, 0.84), 0 -1px rgba(0, 0, 0, 0.84);text-shadow:0 0 4px rgba(0, 0, 0, 1);} #popular_novel1 #popular_list1 .txt_box>span{width:100%;} #popular_novel1 #popular_list1 .txt_box .txt{/* font-size:16px !important; */font-size:16px;} #popular_novel1 #popular_list1 .txt_box .title{/* font-size:14px !important; */ font-size:14px;font-weight:500; margin-top:7%; max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #popular_novel1 #popular_list1 .txt_box br{display:none;} #popular_novel1 .swiper-button{height:100%; top:0; bottom:0; background:var(--opt-bg-color); margin-top:0; z-index:99; width:35px;border-left:1px solid var(--main-line-color); border-right:1px solid var(--main-line-color);} #popular_novel1 .swiper-button img{width:10px; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;} [color-theme="light"] #popular_novel1 .swiper-button img{-webkit-filter:brightness(0.6);filter:brightness(0.6);} #popular_novel1 .swiper-button-next{right:0;} #popular_novel1 .swiper-button-prev{left: 0;} #popular_novel1 .swiper-pagination{margin:5px auto; left:0; right:0; top: 100%;} #popular_novel1 .swiper-pagination-bullet{width:8px; height:8px; background:#b3b3b3; opacity:0.5; margin:5px;} #popular_novel1 .swiper-pagination-bullet-active{background:var(--bg-fc-color); opacity:1;} @media all and (min-width:550px){ #popular_novel1 #popular_list1 .txt_box{max-width:200px;} } /* 뷰어하단 인기 리스트1 */ /* 설정 */ #sub_set .cont_wrap{width: 96%; overflow: hidden; margin: 0 auto; padding: 0; position: relative;} #sub_set .cont_wrap_pd{padding-top:20px;min-height:62vh;} #sub_set .cont_title{display: none;} #sub_set .title_box p{color: #fff; font-size: 1.25em; font-weight: 500; text-align: center; padding:12px 8px;} #sub_set #myset{margin: 0px auto 10px; width: 100%;max-width:768px;} #sub_set .myset_cont .title_box{background: var(--sub-bg-color); border: 1px solid var(--main-line-color); border-radius: 3px 3px 0 0; letter-spacing: -0.09em; position: relative;} [color-theme="light"] #sub_set .myset_cont .title_box{background:#404040;} #sub_set .myset_cont .btn_close{position: absolute; left: 20px; top: 0; bottom: 0; margin: auto; background: url(https://cdn.metoon.co.kr/mimg/icon_set_back.png) no-repeat center; width: 25px; height: 25px; display: block; overflow: hidden; text-indent: -99999999em; background-size: 100%;} #sub_set #myset .con_box{background: var(--opt-bg-color); border: 1px solid var(--main-line-color); border-radius: 0 0 3px 3px; position: relative; padding: 5px 20px 10px;color:var(--main-ft-color);border-top:0 none;} [color-theme="light"] #sub_set #myset .con_box{background:var(--sub-bg-color);} #sub_set .myset_list ul{width: 100%; overflow: hidden;} #sub_set .myset_list .list_cont>li{width: 100%; border-bottom: 1px solid #eee; font-size:1.15em; font-weight:600; color:#565656;} #sub_set .myset_list .list_cont > li:only-child{border-bottom:0 none;} #sub_set .myset_list ul li{float: left; width: 25%; position:relative;} #sub_set .myset_list ul a{text-align:left; padding-left:15px; padding: 15px 0; display:block;} #sub_set .myset_list ul p{float:left; display:inline-block; margin-left:1%; padding: 15px 0;} #sub_set .myset_list ul .right_txt{float:right; margin-right:2%;} #sub_set .myset_list ul a span{display:block; width:27px; height:27px; background:url(https://cdn.metoon.co.kr/mimg/icon_myset_check.png) no-repeat center; background-size:27px; position:absolute; top:0; bottom:0; right:0; margin:auto;} #sub_set .myset_list ul .on span{display:block; width:25px; height:25px; background:url(https://cdn.metoon.co.kr/mimg/icon_myset_check1_on.png) no-repeat center; background-size:25px;} /* 앱 폰트설정 알림 */ #viewfont_notice_wrap{display:none; width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999999; } #viewfont_notice_wrap .viewfont_notice_box{width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background: url(https://cdn.metoon.co.kr/img/tm_img_back.png)} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont{text-align: center; width:95%; max-width:350px; letter-spacing: -0.09em; margin:30% auto; background:#f6f6f6; position:relative; border-radius:5px;} #viewfont_notice_wrap .close{position:absolute; top:0; bottom:0; margin:auto; right:5px; width:25px; margin-bottom:5px;} #viewfont_notice_wrap .close img{width:100%; display:block;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont h2{position:relative;background:#56606b; color:var(--main-ft-color); text-align:center; padding:14px 0; font-size: 17px; border-radius:5px 5px 0 0; } #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont div{text-align:center; padding:10px 10px 0;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont div p{margin:0 0 10px; color:#676767; font-weight:bold; font-size: 14px; line-height: 1.4; letter-spacing: -0.12em;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont div span{color:#2c2c2c; text-decoration: underline;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont .viewfont_btm{padding-top:0;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont .viewfont_btm h3{text-align:left; letter-spacing: -0.09em;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont .viewfont_btm p{text-align:left; margin:3px 0 6px; font-size:15px;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont .viewfont_btm img{width:100%; display:block;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont .viewfont_btm span{ text-decoration: none; vertical-align:middle;} #viewfont_notice_wrap .close_btn{display: inline-block; margin: 10px auto 10px; padding: 10px; color: #fff; font-weight: bold; background: var(--bg-fc-color); border-radius: 5px; width: 25%;} #viewfont_notice_wrap .br_320{display:none;} @media all and (min-width:320px) and (max-width:350px){ #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont{margin:5% auto;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont div p{ font-size: 13px;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont h2{font-size:16px;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont .viewfont_btm p{font-size:13px;} #viewfont_notice_wrap .close_btn{font-size:12px;} #viewfont_notice_wrap .br_320{display:block;} #viewfont_notice_wrap .br_360{display:none;} } @media all and (min-width:351px) and (max-width:360px){ #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont{margin:8% auto;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont div p{ font-size: 13px;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont h2{font-size:16px;} #viewfont_notice_wrap .viewfont_notice_box .viewfont_cont .viewfont_btm p{font-size:13px;} #viewfont_notice_wrap .br_320{display:block;} #viewfont_notice_wrap .br_360{display:none;} } /* 앱 폰트설정 알림 */ /* ok캐시백 */ #m_pop_box .pop_container .join_txt_okcash{background:none;} #m_pop_box .pop_container .join_txt_okcash img{width: 100px; float:left; padding-right: 5px; border-right: 1px solid #ddd;} #m_pop_box .pop_container .join_txt_okcash>span{padding-left:0; float:left; font-size:0.85em; padding-left:5px; letter-spacing:-0.09em; text-align:left;} @media all and (min-width:320px) and (max-width:360px){ #m_pop_box .pop_container .join_txt_okcash{padding: 12px 0 13px;} #m_pop_box .pop_container .join_txt_okcash img{border-right:none; padding-left:5px; } #m_pop_box .pop_container .join_txt_okcash>span{font-size:0.9em;} } /* ok캐시백 */ /* 성인인증페이지2 */ #adult_page .ladult_page2_box{width:95%; margin:10px auto 20px ; border-radius:5px; overflow:hidden; background:#fff; border:1px solid #ddd; max-width: 500px;} #adult_page .ladult_page2_box .layer_adult_pop_top {background: #fff; text-align: center; position: relative; height: auto; margin:0px auto; width:90%; padding:30px 0; border-bottom:1px solid #ddd;} #adult_page .ladult_page2_box .layer_adult_pop_top .title{font-size:1.8em; font-weight:bold; position:relative; display:inline-block; padding-left:45px;} #adult_page .ladult_page2_box .layer_adult_pop_top img{position:absolute; top:0; left:0; bottom:0; margin:auto; display:block; width:40px;} #adult_page .ladult_page2_box h3 {text-align: center; font-size: 1.6em; font-weight: 800; color: #676767; padding-top: 40px; letter-spacing: -0.09em; margin-bottom: 45px;} #adult_page .ladult_page2_box .radio_box {width: 90%; margin: 0 auto; text-align: center;} #adult_page .ladult_page2_box .radio_box div {font-size: 1.4em; margin: 25px 0; letter-spacing: -0.05em;} #adult_page .ladult_page2_box .radio_box input {margin-right: 5px; opacity: 0;} #adult_page .ladult_page2_box .radio_box label {position: relative; padding-left: 5px;} #adult_page .ladult_page2_box .radio_box span{border:1px solid #ddd; border-radius:50px; width:15px; height:15px; display:block; position:absolute; top: 7px; left: -22px;} #adult_page .ladult_page2_box .radio_box .chkselect:after {content: ""; display: block; position: absolute; top: 3px; left: -22px; width: 20px; height: 20px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_on1.png) no-repeat center; background-size: 20px;} #adult_page .ladult_page2_box .radio_box label:after {content: ""; display: block; position: absolute; top: 3px; left: -22px; width: 20px; height: 20px; background: url(https://cdn.metoon.co.kr/mimg/radio_check_off.png) no-repeat center; background-size: 20px;} #adult_page .ladult_page2_box .layer_btn {width: 100%; position: relative; margin-top: 45px; text-align: center; padding-bottom: 40px;} #adult_page .ladult_page2_box .layer_btn .ok {background: var(--bg-fc-color); margin-right: 10px; margin-top: 5px;} #adult_page .ladult_page2_box .layer_btn a {display: inline-block; text-align: center; min-width: 90px; padding: 10px 10px; font-size: 1.2em; color: #fff; font-weight: bold; border-radius: 5px; text-shadow: none;} #adult_page .ladult_page2_box .layer_btn .close {background: #56606b;} #adult_page .ladult_page2_box .pop_notice {text-align: left; margin: 0 auto; padding: 5px 15px 5px; background: #f1f1f1;} #adult_page .ladult_page2_box .pop_notice p {display: block; color: #676767;} #adult_page .ladult_page2_box .pop_notice a {text-decoration: underline;} /* 성인인증페이지2 */ /* 마지막 화차 팝업 */ #list_last_layer_body{width:100%; height:100%; position:fixed;z-index:9999999; top:0; left:0; display:none;} #list_last_layer_body .layer_wrap{width:100%; height:100%; position:relative; z-index: 99; overflow: scroll;} #list_last_layer_body .layer_box{position:relative; margin: 0 auto; border-radius: 5px; max-width: 400px;color:#141414;} #list_last_layer_body .layer_box .back_btn{display:block; position:absolute; top:-30px; right:5px; width:25px; height:25px; background:url(https://cdn.metoon.co.kr/mimg/log_pop_X.png) no-repeat;} #list_last_layer_body .layer_bg{width:100%; height:100%; background-image:url(https://cdn.metoon.co.kr/mimg/tm_img_back.png); position:absolute; top:0; left:0;} #list_last_layer_body .layer_box h3{text-align:center; font-size:1.3em; font-weight:bold; color:var(--main-ft-color); padding:15px 0; background:#404040; border-radius:5px 5px 0 0;} #list_last_layer_body .layer_box .txt_box{margin:30px auto; letter-spacing: -0.09em;} #list_last_layer_body .layer_box h4{color:#2c2c2c; font-size:1.4em; text-align: center;} #list_last_layer_body .layer_cont{width:100%; } #list_last_layer_body .layer_cont form{display: block; margin: 10px auto 0; text-align: center;} #list_last_layer_body .layer_cont form input{margin-right:5px;} #list_last_layer_body .layer_cont p{width:100%; text-align:center; font-size:1.1em; color:#676767; padding-top:15px; line-height:1.5;} #list_last_layer_body .layer_cont .txt_1line{padding-top:18px;} #list_last_layer_body .layer_cont span{font-weight:500;color:var(--bg-fc-color);} #list_last_layer_body .layer_btn{width:100%;position: relative; margin-top:10px; text-align: center; padding-bottom: 25px;} #list_last_layer_body .layer_btn a{display:inline-block; text-align:center; min-width:90px; padding:8px 10px; font-size:1.2em; color:var(--main-ft-color); font-weight:500; border-radius:5px; text-shadow:none;} #list_last_layer_body .layer_btn .ok{background:var(--bg-fc-color); margin-right:13px; margin-top:5px;} #list_last_layer_body .layer_btn .cancle{background:#56606b;} #list_last_pop{background:#fff; width: 95%; top: 15%;} #list_last_pop:after{content:""; display:block; clear:both;} #list_last_pop .list_scroll_wrap{/* padding:10px; */ width:95%; margin:0 auto;} #list_last_pop .novel_list{border:none; max-width:none; overflow:hidden; width:95%; overflow-x: scroll; /* padding:0 10px; */} #list_last_layer_body .layer_cont .novel_list .img_box{width:100%; border:1px solid #ddd; border-radius:3px;} #list_last_layer_body .layer_cont .novel_list .img_box img{display:block; width:100%; cursor: pointer;} #list_last_layer_body .layer_cont .novel_list .nobel_txt{position:relative;} #list_last_layer_body .layer_cont .novel_list .icon_19_patch{position:absolute; bottom: 100%; margin-bottom: 5px; right: 5px; z-index: 99; width: 21px; height: 21px;} #list_last_layer_body .layer_cont .novel_list .nobel_title{font-size:1.1em; font-weight:bold; color: #2c2c2c;} #list_last_layer_body .layer_cont .novel_list p{font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding:0; letter-spacing: -0.09em; cursor: pointer;} #list_last_layer_body .layer_cont .novel_list .ganre{color:#7d52e0;} #list_last_layer_body .layer_cont .novel_list ul{float:left; margin-bottom: 20px;} #list_last_layer_body .layer_cont .novel_list li {float: left; width: 35% !important; margin-right:10px;} #list_last_layer_body .layer_cont .novel_list li a{display:block; width:100%; } #list_last_layer_body .list_last_x_btn{position:absolute; right:0; bottom:100%; margin: 5px; z-index: 999; width: 25px; height: 25px;} #list_last_layer_body .list_last_x_btn img{ cursor:pointer; display: block; width: 100%;} @media all and (min-width:320px) and (max-width:350px){ #list_last_pop{top:10%;} #list_last_layer_body .layer_box h3{padding:12px 0; font-size:1.2em;} #list_last_layer_body .layer_box h4{font-size:1.3em;} #list_last_layer_body .layer_box .txt_box{margin:20px auto;} #list_last_layer_body .layer_cont p{font-size:1em;} #list_last_layer_body .layer_btn{margin-top:5px; padding-bottom:20px;} } /* 마지막 화차 팝업 */ /* 코인뽑기 */ #roulette_body{width:100%; background: #1f90d1;} #roulette_body img{width:100%; display:block; max-width:350px; margin:0 auto;} #roulette_body>div{position:relative; display:block; width:100%; background:#dbeaf3;} #roulette_body .top{padding-top:20px;} #roulette_body>div.btm_txt{background: #1f90d1;} #roulette_body .btn{position:absolute; top:0; left:0; right:0; width:80%; margin:auto; max-width:250px;} #roulette_body .btn a{display:block; margin:0 auto;} #roulette_body .mid p{position: absolute; top: 0px; bottom: 0; left: -5px; right: 0; font-size: 1.2em; color: #676767; font-weight: bold; text-align: center; margin: auto;} #roulette_body .mid .date_over{ height: 70px;} #roulette_body .mid .game_complete{font-size:1em; font-weight:normal; height: 140px; letter-spacing:-0.05em;} #roulette_body .mid .game_complete span{display:block;} #roulette_body .mid .game_complete .title{font-size: 1.1em; font-weight: bold; color:#2c2c2c; padding-bottom:15px; letter-spacing:-0.1em;} #roulette_body .mid .game_complete .title img{width: 40%; max-width:140px;} #roulette_body .mid .game_complete .my_coin{font-size: 1.15em; color:#ff3774; font-weight: bold; line-height:1.5;} #roulette_body .mid .game_complete1 .my_coin{font-size:1.9em;} #roulette_body .mid .game_complete .date2{padding-top:20px; letter-spacing:-0.1em;} #roulette_body .mid .game_complete1 .date2{padding-top:5px;} #roulette_body .roulette_img{position:absolute; top:0px; left:0; right:0; margin:auto;width:100%;} #roulette_body .roulette_img img{display:block; margin:auto;} #roulette_body .mid .roulette_img p{font-size: 1.4em; color: #fff300; font-weight: bold; text-align: center; height: 25px; top:-20px; letter-spacing:-0.09em;} #roulette_body .btm{padding-bottom:20px;} @media all and (min-width:320px) and (max-width:350px){ #roulette_body .top{padding-top:10px;} } /* 코인뽑기 */ /* 웹소설/웹툰 태그 */ .content_tag{position:absolute; right:5px; top:5px; z-index:101;} .content_tag p{display:block; float: left; width:auto; z-index:101; background:#fff; border-radius:5px; font-size:12px; padding:1px 2px 0px; line-height: 1.3; letter-spacing:-0.05em;} .content_tag_toon{color:#fc5863 !important; border:1px solid #fc5863; background:#fff;} .content_tag_nobel{color:#2b90e1 !important; border:1px solid #2b90e1; background:#fff;} .content_tag_audio{color:#fff !important; border:1px solid var(--bg-fc-color); background: var(--bg-fc-color) !important;} #sub_today .today_cont .today_cont_list li .content_tag .content_tag_ebook{color:#0096a6; border:1px solid #0096a6; padding:1px 4.5px 0;} #sub_today .today_cont .today_cont_list li .content_tag{width:auto; background:none; position:absolute; right:auto; top:auto; bottom:5px; left:5px; z-index:101; padding:0;} #sub_today .today_cont .today_cont_list li .content_tag span{display:block; float: left; width:auto; z-index:101; background:#fff; border-radius:3px; font-size:12px; padding:1px 2px 0px; line-height: 1.3; letter-spacing:-0.05em; margin-right:3px;} #sub_today .today_cont .today_cont_list li.content_tag_toon{color:#fc5863; border:1px solid #fc5863;} #sub_today .today_cont .today_cont_list li .content_tag_nobel{color:#2b90e1; border:1px solid #2b90e1;} #sub_popular .popular_top10_list li .content_tag span{display:block; float: left; width:auto; z-index:101; background:#fff; border-radius:3px; font-size:11px; font-weight:normal; padding:1px 2px 0px; line-height: 1.3; letter-spacing:-0.05em; margin-top:0;} #sub_popular .popular_other_list li .content_tag span{display:block; float: left; width:auto; z-index:101; background:#fff; border-radius:3px; font-size:11px; font-weight:normal; padding:1px 2px 0px; line-height: 1.3; letter-spacing:-0.05em; margin-top:0;} /* 웹소설/웹툰 태그 */ /* 무료, hot, best, new, 완결, up 태그 */ .free_tag{background:#00b233 !important; color:var(--main-ft-color); border: 1px solid #00b233; border-radius:3px; font-size:1em; padding:1px 3px 0px !important; line-height: 1.3; letter-spacing:normal; font-weight:normal; margin-right:3px;} #sub_today .today_cont .today_cont_list li .free_tag{width:auto;} .sale_tag{background:#0089e8 !important; color:var(--main-ft-color); border:1px solid #0089e8;} .free_icon{position:absolute; top:-1px; left:-2px; border-radius:0; width:65px !important;} .end_tag{background:#6408de !important; color:var(--main-ft-color); border:1px solid #6408de; height:auto !important; letter-spacing: -0.05em !important;} .up_tag{background:#fd3025 !important; color:var(--main-ft-color); border:1px solid #fd3025; height:auto !important; letter-spacing: -0.05em !important;} .chat_tag{display:inline-block; position:relative; padding:0 !important;} .chat_tag:after{content:""; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #ffb72b;} .chat_tag img{width:22px; position:static;} .up_nobel_main{position: absolute; top: 0; left: 0; width: 60px; right: inherit; z-index:15;} .end_nobel_main{position: absolute; top: 0; left: 0; width: 60px; right: inherit; z-index:15;} #today .swiper-container_today li .content_tag{width:auto; left:5px; right:auto; bottom:100%; top:auto; margin-bottom:5px;} #today .swiper-container_today li .content_tag .free_tag{font-size:11px; min-width:0;} #today .swiper-container_today li .content_tag .free_tag span{padding:0;} #today .swiper-container_today li .content_tag>span{font-size:11px;} #today .swiper-container_today li .content_tag span{display:inline-block; padding:1px 3px 0; min-width:40px; color:var(--main-ft-color); font-weight:normal; border-radius:3px; position:relative; letter-spacing: -0.05em;} #today .swiper-container_today li .content_tag .new_tag{width:38px; background:#721de3; border: 1px solid #721de3;} #today .swiper-container_today li .content_tag .best_tag{width:38px; background:#388afd; border: 1px solid #388afd;} #today .swiper-container_today li .content_tag .hot_tag{width:38px; background:#e61e3f; border: 1px solid #e61e3f;} #today .swiper-container_today li .content_tag span>span{padding-left:18px; display:inline;} #today .swiper-container_today li .content_tag span img{position:absolute; top:-2px; bottom:0; left:0; margin:auto; width:13px; display:block;} #today .swiper-container_today li .content_tag .new_tag img{width:11px; left:2px;} #today .swiper-container_today li .content_tag .hot_tag img{width:8px; left:3px;} #container .content_tag{width:auto; left:5px; right:auto; bottom:100%; top:auto; margin-bottom:5px;} #container .content_tag .free_tag{font-size:11px; min-width:0;} #container .content_tag .free_tag span{padding:0;} #container .content_tag>span{font-size:11px;} #container .content_tag span{display:inline-block; padding:1px 2px 0; /* min-width:40px; */ color:var(--main-ft-color); font-weight:normal; border-radius:3px; position:relative; letter-spacing: -0.05em;} #container .content_tag .new_tag{width:auto; background:#721de3; border: 1px solid #721de3; padding:0 2px;} #container .content_tag .best_tag{width:auto; background:#388afd; border: 1px solid #388afd; padding:0 2px;} #container .content_tag .hot_tag{width:auto; background:#e61e3f; border: 1px solid #e61e3f; padding:0 2px;} #container .content_tag span>span{padding-left:16px; display:inline-block;} #container .content_tag span img{position:absolute; top:-2px; bottom:0; left:0; margin:auto; width:13px; display:block;} #container .content_tag .new_tag img{width:11px; left:2px;} #container .content_tag .hot_tag img{width:8px; left:3px;} #container .content_tag .up_txt_tag{font-size:11px; min-width:0; position:static; width:auto; background:rgba(255, 255, 255, 0.5); border: 1px solid #2c5faf;} #container .content_tag .end_txt_tag{font-size:11px; min-width:0; position:static; width:auto; background:rgba(255, 255, 255, 0.5); border: 1px solid #7d52e0;} #container .content_tag .up_txt_tag span{padding:0; color:#2c5faf;} #container .content_tag .end_txt_tag span{padding:0; color:#7d52e0;} #adult_container .content_tag{width:auto; left:5px; right:auto; bottom:100%; top:auto; margin-bottom:5px;} #adult_container .content_tag .free_tag{font-size:11px; min-width:0;} #adult_container .content_tag .free_tag span{padding:0;} #adult_container .content_tag>span{font-size:11px;} #adult_container .content_tag span{display:inline-block; padding:1px 3px 0; min-width:40px; color:var(--main-ft-color); font-weight:normal; border-radius:3px; position:relative; letter-spacing: -0.05em;} #adult_container .content_tag .new_tag{width:38px; background:#721de3; border: 1px solid #721de3;} #adult_container .content_tag .best_tag{width:38px; background:#388afd; border: 1px solid #388afd;} #adult_container .content_tag .hot_tag{width:38px; background:#e61e3f; border: 1px solid #e61e3f;} #adult_container .content_tag span>span{padding-left:18px; display:inline;} #adult_container .content_tag span img{position:absolute; top:-2px; bottom:0; left:0; margin:auto; width:13px !important; display:block;} #adult_container .content_tag .new_tag img{width:11px !important; left:2px;} #adult_container .content_tag .hot_tag img{width:8px !important; left:3px;} #adult_container .content_tag .up_txt_tag{font-size:11px; min-width:0; position:static; width:auto; background:rgba(255, 255, 255, 0.5); border: 1px solid #2c5faf;} #adult_container .content_tag .end_txt_tag{font-size:11px; min-width:0; position:static; width:auto; background:rgba(255, 255, 255, 0.5); border: 1px solid #7d52e0;} #adult_container .content_tag .up_txt_tag span{padding:0; color:#2c5faf;} #adult_container .content_tag .end_txt_tag span{padding:0; color:#7d52e0;} /* 무료, hot, best, new, 완결, up 태그 */ /* 구글랜딩페이지 */ #landing_page .cont_title img{width:80%; max-width: 300px; display:block;} .landing_cont{margin:0px auto 10px; width:96%;} .landing_cont ul{width:100%; overflow:hidden;} .landing_cont li{float:left; width:100%; margin:0px auto 10px;} .landing_cont a{display:block; max-width:400px; margin:0 auto;} .landing_cont a img{width:100%; max-width:400px; display:block; margin:0 auto; cursor:pointer;} @media all and (min-width:550px){ .landing_cont li{width:49%; margin:0 0.5% 10px;} } @media all and (min-width:900px){ .landing_cont li{width: 32.3%;} } @media all and (min-width:1200px){ .landing_cont li{width: 24%;} } /* 구글랜딩페이지 */ /* 서브 완결 */ #sub_completed .completed_radio{width: 96%; overflow: hidden; margin: 6px auto 6px; padding:0;} /* 2017-09-20 수정 */ #sub_completed .completed_radio fieldset{text-align:right; float:left; padding:0; margin-left:5px;} #sub_completed .completed_radio select{border:1px solid #ddd; padding:2px 7px; padding-right:15px; font-size:13px; height:30px; line-height: normal; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ic_select.png) no-repeat 92% 70%,#fff; background-size: 8px; border-radius:0; -webkit-appearance:none; color:#676767;}/* white 버전 */ #sub_completed .completed_top{ border:none; margin-top:0px; width:100%; overflow:hidden; position: relative;} #sub_completed .completed_top h3{width:96%; margin:0 auto; text-indent:5px; padding:10px 0; letter-spacing:-0.09em; font-size:1.3em;} #sub_completed .completed_top h3 span{display:block; font-size:0.8em; font-weight:normal; line-height:1.4;} #sub_completed .completed_top_cont{padding-bottom: 5px; overflow: auto; overflow-x: auto; overflow-y: hidden; margin: 0 0 0 2%; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} /* 2017-09-20 수정 */ #sub_completed .completed_top_cont>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top;} #sub_completed .completed_top_cont>ul li{float: none; display: inline-block; border:1px solid #ddd; border-radius:5px; background:#fff; width: 150px !important; margin:0 5px !important; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%;} #sub_completed .completed_top_cont>ul li a{display:block;} #sub_completed .completed_top_cont>ul .img_box{width:100%;margin:0px auto; /* border:1px solid #ddd; */ position:relative; border-radius:5px 5px 0 0; overflow:hidden; } #sub_completed .completed_top_cont>ul .img_box img{width:100%; display:block; border-radius:0;} #sub_completed .completed_top_cont>ul .img_box .novel_img{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index:9; border-radius:5px 5px 0 0;} #sub_completed .completed_top_cont>ul .img_box .blurcover{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:10;} #sub_completed .completed_top_cont>ul .img_box .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center !important;} #sub_completed .completed_top_cont>ul .img_box .img_bg{background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 0 100%; display:block; position:absolute; left:0; width:100%; height:100%; bottom:0; margin:auto;} #sub_completed .completed_top_cont>ul .txt_box{padding:0 5px 5px; position:relative;} #sub_completed .completed_top_cont>ul .txt_box img.icon_19_patch{width: 22px !important; position: absolute; bottom: 100%; margin-bottom: 5px; right: 5px; z-index: 99;} #sub_completed .completed_top_cont>ul .txt_box p{color:#676767; font-weight:normal; text-align:center; width:100%; font-size:1em; margin:0px auto 0px; line-height:1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_completed .completed_top_cont>ul .txt_box p.title{font-size:1.2em; color:#2c2c2c; font-weight:bold; margin-top:5px;} #sub_completed .completed_top_cont{scrollbar-3dlight-color: transparent; scrollbar-arrow-color: transparent; scrollbar-track-color: transparent; scrollbar-darkshadow-color: transparent; scrollbar-face-color: transparent; scrollbar-highlight-color: transparent; scrollbar-shadow-color:transparent;} #sub_completed .completed_btm{padding-bottom:10px;} #sub_completed .completed_btm h4{width:96%; margin:0 auto; font-weight:normal; letter-spacing:-0.09em; font-size:1.2em;} #sub_completed .completed_btm ul{width:96%; margin:0 auto;} #sub_completed .completed_btm ul:after{content:""; display:block; clear:both;} #sub_completed .completed_btm li{width:100%; border:1px solid #ddd; background:#fff; overflow:hidden; margin-top:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_completed .completed_btm li:nth-child(even){background:#f4f4f4;} #sub_completed .completed_btm a{display:block; padding:6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sub_completed .completed_btm a:after{content:""; display:block; clear:both;} #sub_completed .completed_btm a>.con_box{width:100%; position:relative;} #sub_completed .completed_btm .img_box{width:80px; position:absolute; top:0; bottom:0; left:0; margin:auto; overflow:hidden;} #sub_completed .completed_btm .img_box img{width:100%; display:block;} #sub_completed .completed_btm .img_box .novel_img{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index:9;} #sub_completed .completed_btm .img_box .blurcover{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:80%; z-index:10;} #sub_completed .completed_btm .img_box .blurcover_b{background:url('https://cdn.metoon.co.kr/img/list19_blind_mark.png') no-repeat center 30% !important; background-size:90% !important;} #sub_completed .completed_btm .img_box img.icon_19_patch{width: 17px !important; position: absolute; bottom: 0; margin-bottom: 3px; right: 3px; z-index: 99;} #sub_completed .completed_btm ul li .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #sub_completed .completed_btm ul li .ebook_imgbox .novel_img{opacity:0.2;} #sub_completed .completed_btm ul li .ebook_imgbox .ebook_cover{position:absolute; width:65%; top:0; left:0; right:0; bottom:0; margin:auto; opacity:0.9999; z-index:10; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} #sub_completed .completed_btm .txt_box{display:block;/* line-height:1.5; */ padding:10px 0; padding-left:90px; padding-right: 27%; letter-spacing:-0.05em;} #sub_completed .completed_btm .txt_box p{margin-bottom:3px; color:#676767; font-size:0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_completed .completed_btm .txt_box .title{font-size:1.1em; font-weight:bold; color:#2c2c2c;} #sub_completed .completed_btm .go_btn{position:absolute; top:0; bottom:0; right:0; margin:auto; font-size: 1em; width: 25%;max-width: 120px; padding: 25px 0; height: 36px; text-align:center; letter-spacing: -0.05em;} #sub_completed .completed_btm .go_btn p{border: 1px solid var(--bg-fc-color); background: #fff; color: var(--bg-fc-color); padding: 8px 0px; text-align:center;} #sub_completed .sub_today_tab{width:96%; position:relative; margin:0 auto; border-radius:5px; overflow:hidden; border:1px solid #ddd; font-size: 0.95em; font-weight: normal;} #sub_completed .sub_today_tab ul{float:left; display:-webkit-box;display:flex; -webkit-box-pack:justify;justify-content:space-between; width:100%; background:#fff;} #sub_completed .sub_today_tab li{float:left; -webkit-box-flex:1;flex-grow:1; height:42px; line-height:42px; text-align:center;} #sub_completed .sub_today_tab li a{font-size:13px; display:block; font-weight:normal; color:#4e4e4e; letter-spacing:-1px;} #sub_completed .sub_today_tab li .on{color:#E84D7D;} #sub_completed .on_line{ position:absolute; bottom:0; width:100%; border:1px solid var(--bg-fc-color); display:none;} #sub_completed .completed_list_more{width: 100%; padding-bottom: 15px; float: left; background: #f5f5f5;} #sub_completed .completed_list_more a{width: 96%; display: block; text-align: center; color: var(--bg-fc-color); background: #fff; padding: 9px 0 8px; font-size: 1.1em; border: 1px solid var(--bg-fc-color); border-radius: 5px; margin: 5px auto; text-shadow: none; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}/* white 버전 */ #sub_completed .completed_list_more p{font-weight: bold; display: inline-block; margin-left: -3%;} #sub_completed .completed_list_more img{width: 16px; display: inline-block; position: absolute; top: 4px; bottom: 0; margin: auto; padding-left: 10px;} @media all and (min-width:320px) and (max-width:350px){ #sub_completed .completed_btm .go_btn{font-size: 13px;} } @media all and (min-width:320px) and (max-width:360px){ #sub_completed .sub_today_tab li a{font-size: 14px;} } @media all and (min-width:601px){ #sub_completed .completed_btm li{width:49%; float:left; margin:0 0.5% 5px;} } @media all and (min-width:1000px){ #sub_completed .completed_top_cont>ul li{width:180px !important;} } @media all and (min-width:1200px){ #sub_completed .completed_btm li{width:32.3%; float:left; margin:0 0.5%;} } /* 서브 완결 */ /* 메인 리뉴얼 */ #content_wrap .contain_main2{margin-top:0; padding-top:5px;} #content_wrap .contain_main2 .cont_title a{padding:0; width:20px; height:20px;} #content_wrap .cont_title .h4_sm{color:#676767; font-weight:normal; font-size:0.8em; letter-spacing:-0.09em;} /* 메인 이벤트 배너 */ #main_event_banner{width:100%; position:fixed; top:90px; left:0; right:0; margin:auto; z-index:102;} #main_event_banner>div{width:100%; position:relative; z-index:99; background: #2a0405;} #main_event_banner a{display:block;} #main_event_banner .banner_img{display:block; width:100%; max-width: 450px; margin: 0 auto;} #main_event_banner .close{display:block; position:absolute; top:0px; right:0px; padding:10px;} #main_event_banner .close img{width:20px; height:20px; display:block;} #main_event_banner .bg{display:block; position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.5);} /* 메인 이벤트 배너 */ /* 메인 최신업데이트 */ #content_wrap #main_today_update{padding: 0; position: relative; margin: 0 auto; width: auto !important; margin-top:15px;} #main_today_update .today_up_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 15px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} /* 2017-11-06 수정 */ #main_today_update .today_up_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_today_update .today_up_wrap li{float: none; display: inline-block; border: 1px solid #ddd; width: 180px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #main_today_update .today_up_wrap li:last-child{margin-right:10px !important;} #main_today_update .today_up_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; padding-bottom:30px;} #main_today_update .today_up_wrap .patch_box{position:absolute; top:0; right:5px; text-align:center; z-index:15;} #main_today_update .today_up_wrap .patch_box img{display:inline-block; width:35px;} #main_today_update .today_up_wrap .img_box{width: 100%; position: relative;} #main_today_update .today_up_wrap .img_box img{display: block; width: 100%;} #main_today_update .today_up_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0;} #main_today_update .today_up_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_today_update .today_up_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-top:1px solid #ddd;} #main_today_update .today_up_wrap .nobel_txt .content_tag{width: auto; left: 0; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #main_today_update .today_up_wrap .nobel_txt .content_tag span{display:inline-block; padding:0; border-radius:0; position:relative;} #main_today_update .today_up_wrap .nobel_txt .content_tag .ic_tag01{background:transparent; border:0 none;} #main_today_update .today_up_wrap .nobel_txt .content_tag .ic_tag01:after{content:""; display:block; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #main_today_update .today_up_wrap .nobel_txt .content_tag .new_tag:after{border-top:12px solid #46adf2;} #main_today_update .today_up_wrap .nobel_txt .content_tag .hot_tag:after{border-top:12px solid #fd404d;} #main_today_update .today_up_wrap .nobel_txt .content_tag .best_tag:after{border-top:12px solid #f471f4;} #main_today_update .today_up_wrap .nobel_txt .content_tag .ic_tag01 img{width:24px; display:block; position:static;} #main_today_update .today_up_wrap .nobel_txt .content_tag .chat_tag{line-height:normal; background:transparent !important; border:0 none; margin:0 0 0 3px;} #main_today_update .today_up_wrap .nobel_txt .content_tag .chat_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #ffb72b; border-right:5px solid transparent;} #main_today_update .today_up_wrap .nobel_txt .content_tag .chat_tag img{width:22px; display:block; position:static;} #main_today_update .today_up_wrap .nobel_txt .content_tag .free_tag{line-height:normal; background:transparent !important; border:0 none; margin:0 0 0 3px; padding:0 !important;} #main_today_update .today_up_wrap .nobel_txt .content_tag .free_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #00b233; border-right:5px solid transparent;} #main_today_update .today_up_wrap .nobel_txt .content_tag .free_tag img{width:22px; display:block; position:static;} #main_today_update .today_up_wrap .nobel_txt img.icon_19_patch{width:18px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} #main_today_update .today_up_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #main_today_update .today_up_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* 메인 최신업데이트 */ /* 메인 top5 */ #content_wrap #main_top5 .cont_title{display:none; margin-bottom:10px; border-bottom:1px solid #ddd; padding-bottom:10px;} #content_wrap #main_top5{padding: 0; position: relative; margin: 0 auto; width: auto !important;} #main_top5 .top5_wrap{width: 98%; margin: 0 0 0 3%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;-webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;}/* 2017-11-06 수정 */ #main_top5 .top5_wrap .top5_cont{display: inline-block; white-space: nowrap; margin: 0 auto; overflow: visible; vertical-align: top; } #main_top5 .top5_wrap .top5_cont_box{ margin: 10px auto; box-sizing: border-box; float: none; display: inline-block; width: 300px !important; margin:0px !important; vertical-align:top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%;} #main_top5 .top5_wrap .top5_cont_box:last-child{margin-right:1% !important;} #main_top5 .top5_wrap .top5_cont_box a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; border-radius: 5px;} #main_top5 .top5_cont_box .top5_title{display:block;margin: 10px 0 10px; font-size: 15px; letter-spacing:-0.05em; font-weight:normal;}/* 2017-11-06 수정 */ #main_top5 .top5_cont_box ul{width:100%;} #main_top5 .top5_cont_box ul li{width:100%; border:1px solid #ddd; background:#fff; margin-top:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #main_top5 .top5_cont_box ul li:nth-child(even){background:#f8f8f8;} #main_top5 .top5_cont_box ul li a{display: block; padding:0 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #main_top5 .top5_cont_box ul li .con_box{width: 100%; position: relative;} #main_top5 .top5_cont_box ul li .img_box{width: 70px; position: absolute; top: 5px; bottom: 5px; left: 0; margin: auto; overflow: hidden;} #main_top5 .top5_cont_box ul li .img_box img{width: 100%; display: block;} #main_top5 .top5_cont_box ul li .img_box .blurcover{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:70%; z-index:10;} #main_top5 .top5_cont_box ul li .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 9; } #main_top5 .top5_cont_box ul li .img_box .blurcover_b{background-position:center !important; background-repeat:no-repeat !important;} #main_top5 .top5_cont_box ul li .txt_box{display: block; padding: 12px 0px; padding-left: 80px;} #main_top5 .top5_cont_box ul li .txt_box p{margin-bottom: 3px; color: #676767; font-size: 0.9em; letter-spacing:-0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #main_top5 .top5_cont_box ul li .txt_box .title_line{font-size: 1.2em; font-weight: bold; color: #2c2c2c; padding-bottom:5px; letter-spacing:-0.09em; overflow:hidden;} #main_top5 .top5_cont_box ul li .txt_box .title_line span{float:left; padding-right:3px;} #main_top5 .top5_cont_box ul li .txt_box .title_line .title{max-width:68%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} #main_top5 .top5_cont_box ul li .txt_box .title_line .genre{font-size:0.8em; font-weight:normal; float:right; padding-right:2px; color: #676767;} #main_top5 .top5_cont_box ul li .txt_box .txt{width: 95%;padding:5px 0;/* white-space: normal; height: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; */ white-space:nowrap; overflow: hidden; text-overflow: ellipsis;} #main_top5 .top5_cont_box ul li .txt_box .txt br{display:none;} @media all and (min-width:320px) and (max-width:360px){ #main_top5 .top5_cont_box .top5_title{font-size:14px;} } /* 메인 top5 */ /* 메인 완결 */ #main_completed{padding: 0; position: relative; margin: 0 auto; width: auto !important;} #main_completed .main_completed_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #main_completed .main_completed_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_completed .main_completed_wrap li{float: none; display: inline-block; border: 1px solid #ddd; width: 180px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #main_completed .main_completed_wrap li:last-child{margin-right:10px !important;} #main_completed .main_completed_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; padding-bottom:30px;} #main_completed .main_completed_wrap .patch_box{position:absolute; top:0; right:5px; text-align:center; z-index:15;} #main_completed .main_completed_wrap .patch_box img{display:inline-block; width:35px;} #main_completed .main_completed_wrap .img_box{width: 100%; position: relative;} #main_completed .main_completed_wrap .img_box img{display: block; width: 100%;} #main_completed .main_completed_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0;} #main_completed .main_completed_wrap .img_box .blurcover{position:absolute; top:-20%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #main_completed .main_completed_wrap .img_box .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center 25% !important;} #main_completed .main_completed_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_completed .main_completed_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-top:1px solid #ddd;} #main_completed .main_completed_wrap .nobel_txt .content_tag{width: auto; left: 0; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #main_completed .main_completed_wrap .nobel_txt .content_tag span{display:inline-block; padding:0; border-radius:0; position:relative;} #main_completed .main_completed_wrap .nobel_txt .content_tag .ic_tag01{background:transparent; border:0 none;} #main_completed .main_completed_wrap .nobel_txt .content_tag .ic_tag01:after{content:""; display:block; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #main_completed .main_completed_wrap .nobel_txt .content_tag .new_tag:after{border-top:12px solid #46adf2;} #main_completed .main_completed_wrap .nobel_txt .content_tag .hot_tag:after{border-top:12px solid #fd404d;} #main_completed .main_completed_wrap .nobel_txt .content_tag .best_tag:after{border-top:12px solid #f471f4;} #main_completed .main_completed_wrap .nobel_txt .content_tag .ic_tag01 img{width:24px; display:block; position:static;} #main_completed .main_completed_wrap .nobel_txt .content_tag .chat_tag{line-height:normal; background:transparent !important; border:0 none; margin:0 0 0 3px;} #main_completed .main_completed_wrap .nobel_txt .content_tag .chat_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #ffb72b; border-right:5px solid transparent;} #main_completed .main_completed_wrap .nobel_txt .content_tag .chat_tag img{width:22px; display:block; position:static;} #main_completed .main_completed_wrap .nobel_txt .content_tag .free_tag{line-height:normal; background:transparent !important; border:0 none; margin:0 0 0 3px; padding:0 !important;} #main_completed .main_completed_wrap .nobel_txt .content_tag .free_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #00b233; border-right:5px solid transparent;} #main_completed .main_completed_wrap .nobel_txt .content_tag .free_tag img{width:22px; display:block; position:static;} #main_completed .main_completed_wrap .nobel_txt img.icon_19_patch{width:18px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} #main_completed .main_completed_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #main_completed .main_completed_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* 메인 완결 */ /* 메인 로맨스 */ #main_romance{padding: 0; position: relative; margin: 0 auto; width: auto !important;} #main_romance .main_romance_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #main_romance .main_romance_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_romance .main_romance_wrap li{float: none; display: inline-block; border: 1px solid #ddd; width: 180px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #main_romance .main_romance_wrap li:last-child{margin-right:10px !important;} #main_romance .main_romance_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; padding-bottom:30px;} #main_romance .main_romance_wrap .patch_box{position:absolute; top:0; right:5px; text-align:center; z-index:15;} #main_romance .main_romance_wrap .patch_box img{display:inline-block; width:35px;} #main_romance .main_romance_wrap .img_box{width: 100%; position: relative;} #main_romance .main_romance_wrap .img_box img{display: block; width: 100%;} #main_romance .main_romance_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0;} #main_romance .main_romance_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_romance .main_romance_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-top:1px solid #ddd;} #main_romance .main_romance_wrap .nobel_txt .content_tag{width: auto; left: 0; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #main_romance .main_romance_wrap .nobel_txt .content_tag span{display:inline-block; padding:0; border-radius:0; position:relative;} #main_romance .main_romance_wrap .nobel_txt .content_tag .ic_tag01{background:transparent; border:0 none;} #main_romance .main_romance_wrap .nobel_txt .content_tag .ic_tag01:after{content:""; display:block; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #main_romance .main_romance_wrap .nobel_txt .content_tag .new_tag:after{border-top:12px solid #46adf2;} #main_romance .main_romance_wrap .nobel_txt .content_tag .hot_tag:after{border-top:12px solid #fd404d;} #main_romance .main_romance_wrap .nobel_txt .content_tag .best_tag:after{border-top:12px solid #f471f4;} #main_romance .main_romance_wrap .nobel_txt .content_tag .ic_tag01 img{width:24px; display:block; position:static;} #main_romance .main_romance_wrap .nobel_txt .content_tag .chat_tag{line-height:normal; background:transparent !important; border:0 none; margin:0 0 0 3px;} #main_romance .main_romance_wrap .nobel_txt .content_tag .chat_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #ffb72b; border-right:5px solid transparent;} #main_romance .main_romance_wrap .nobel_txt .content_tag .chat_tag img{width:22px; display:block; position:static;} #main_romance .main_romance_wrap .nobel_txt .content_tag .free_tag{line-height:normal; background:transparent !important; border:0 none; margin:0 0 0 3px; padding:0 !important;} #main_romance .main_romance_wrap .nobel_txt .content_tag .free_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #00b233; border-right:5px solid transparent;} #main_romance .main_romance_wrap .nobel_txt .content_tag .free_tag img{width:22px; display:block; position:static;} #main_romance .main_romance_wrap .nobel_txt img.icon_19_patch{width:18px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} #main_romance .main_romance_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #main_romance .main_romance_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* 메인 로맨스 */ /* 메인 해시태그 */ #main_hashtag{padding: 0; position: relative; margin: 0 auto; width: auto !important;} /* #content_wrap #main_hashtag .cont_title .h4_sm{font-size:1em; letter-spacing:normal;} */ #main_hashtag .main_hashtag_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #main_hashtag .main_hashtag_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_hashtag .main_hashtag_wrap li{float: none; display: inline-block; border: 1px solid #ddd; width: 110px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #main_hashtag .main_hashtag_wrap li:last-child{margin-right:10px !important;} #main_hashtag .main_hashtag_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; padding-bottom:30px;} #main_hashtag .main_hashtag_wrap .img_box{width: 100%; position: relative; padding-bottom: 30px;} #main_hashtag .main_hashtag_wrap .img_box img{display: block; width: 100%;} #main_hashtag .main_hashtag_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0; /* margin-left: -10%; */} #main_hashtag .main_hashtag_wrap .img_box .blurcover{position:absolute; top:-22%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #main_hashtag .main_hashtag_wrap .img_box .blurcover_b{background-size:70% !important; background-position:center 20% !important; background-repeat:no-repeat !important;} #main_hashtag .main_hashtag_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_hashtag .main_hashtag_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-top:1px solid #ddd;} #main_hashtag .main_hashtag_wrap .nobel_txt .content_tag{width: auto; left: 5px; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #main_hashtag .main_hashtag_wrap .nobel_txt img.icon_19_patch{width:22px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} #main_hashtag .main_hashtag_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #main_hashtag .main_hashtag_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .hashtag_tab{width:94%; display: block; margin:0 auto; padding-bottom: 5px; overflow:hidden;} .hashtag_tab a{display:block; float:left; margin:0 3px 5px 0; border:1px solid var(--bg-fc-color); background:#fff; color:var(--bg-fc-color); padding:3px 0px; border-radius:35px; font-size:12px; width: 64px; text-align: center; letter-spacing: -0.05em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .hashtag_tab a.on{background:var(--bg-fc-color); color:var(--main-ft-color);} /* 메인 해시태그 */ /* 메인 내가보던작품 */ #mine_ing{padding: 0; position: relative; margin: 0 auto; width: auto !important;} #mine_ing .main_mine_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 14px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #mine_ing .main_mine_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #mine_ing .main_mine_wrap li{float: none; display: inline-block; border: 1px solid #ddd; width: 110px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #mine_ing .main_mine_wrap li:last-child{margin-right:10px !important;} #mine_ing .main_mine_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; padding-bottom:30px;} #mine_ing .main_mine_wrap .img_box{width: 100%; position: relative; padding-bottom: 30px;} #mine_ing .main_mine_wrap .img_box img{display: block; width: 100%;} #mine_ing .main_mine_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0; /* margin-left: -10%; */} #mine_ing .main_mine_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #mine_ing .main_mine_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-top:1px solid #ddd;} #mine_ing .main_mine_wrap .nobel_txt .content_tag{width: auto; left: 5px; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #mine_ing .main_mine_wrap .nobel_txt img.icon_19_patch{width:22px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} #mine_ing .main_mine_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #mine_ing .main_mine_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* 메인 밀리언셀러 */ #million{padding: 0; position: relative; margin: 0 auto; width: auto !important;} #million .main_million_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #million .main_million_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #million .main_million_wrap li{float: none; display: inline-block; border: 1px solid #ddd; width: 110px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #million .main_million_wrap li:last-child{margin-right:10px !important;} #million .main_million_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; padding-bottom:30px;} #million .main_million_wrap .img_box{width: 100%; position: relative; padding-bottom: 30px;} #million .main_million_wrap .img_box img{display: block; width: 100%;} #million .main_million_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0; /* margin-left: -10%; */} #million .main_million_wrap .img_box .blurcover{position:absolute; top:-22%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #million .main_million_wrap .img_box .blurcover_b{background-size:70% !important; background-repeat:no-repeat !important; background-position:center 20% !important;} #million .main_million_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #million .main_million_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-top:1px solid #ddd;} #million .main_million_wrap .nobel_txt .content_tag{width: auto; left: 5px; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #million .main_million_wrap .nobel_txt img.icon_19_patch{width:22px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} #million .main_million_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #million .main_million_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* 메인 무료 */ #main_sale{padding: 0; position: relative; margin: 0 auto; width: auto !important;} #main_sale .main_sale_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #main_sale .main_sale_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_sale .main_sale_wrap li{float: none; display: inline-block; border: 1px solid #ddd; width: 180px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #main_sale .main_sale_wrap li:last-child{margin-right:10px !important;} #main_sale .main_sale_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; padding-bottom:30px;} #main_sale .main_sale_wrap .img_box{width: 100%; position: relative;} #main_sale .main_sale_wrap .img_box img{display: block; width: 100%;} #main_sale .main_sale_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0;} #main_sale .main_sale_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_sale .main_sale_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-top:1px solid #ddd;} #main_sale .main_sale_wrap .nobel_txt .content_tag{width: auto; left: 0; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #main_sale .main_sale_wrap .nobel_txt .content_tag span{display:inline-block; padding:0; border-radius:0; position:relative;} #main_sale .main_sale_wrap .nobel_txt .content_tag .ic_tag01{background:transparent; border:0 none;} #main_sale .main_sale_wrap .nobel_txt .content_tag .ic_tag01:after{content:""; display:block; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #main_sale .main_sale_wrap .nobel_txt .content_tag .new_tag:after{border-top:12px solid #46adf2;} #main_sale .main_sale_wrap .nobel_txt .content_tag .hot_tag:after{border-top:12px solid #fd404d;} #main_sale .main_sale_wrap .nobel_txt .content_tag .best_tag:after{border-top:12px solid #f471f4;} #main_sale .main_sale_wrap .nobel_txt .content_tag .ic_tag01 img{width:24px; display:block; position:static;} #main_sale .main_sale_wrap .nobel_txt .content_tag .chat_tag{line-height:normal; background:transparent !important; border:0 none; margin:0 0 0 3px;} #main_sale .main_sale_wrap .nobel_txt .content_tag .chat_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #ffb72b; border-right:5px solid transparent;} #main_sale .main_sale_wrap .nobel_txt .content_tag .chat_tag img{width:22px; display:block; position:static;} #main_sale .main_sale_wrap .nobel_txt .content_tag .free_tag{line-height:normal; background:transparent !important; border:0 none; margin:0 0 0 3px; padding:0 !important;} #main_sale .main_sale_wrap .nobel_txt .content_tag .free_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #00b233; border-right:5px solid transparent;} #main_sale .main_sale_wrap .nobel_txt .content_tag .free_tag img{width:22px; display:block; position:static;} #main_sale .main_sale_wrap .nobel_txt img.icon_19_patch{width:18px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} #main_sale .main_sale_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #main_sale .main_sale_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* 메인 무료 */ /* 메인 도전 */ #content_wrap #main_challenge{margin:6px auto 5px; padding-top:0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} #main_challenge .chall_list_box{padding:0 8px;} #main_challenge .chall_list_tab{background:#fff; box-sizing: border-box;overflow: hidden; width:100%; position:relative; border:none; border-bottom:1px solid #ddd; border-radius:0; font-size: 0.95em;} #main_challenge .chall_list_tab div{width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; height:auto;position: relative; } #main_challenge .chall_list_tab ul{display: block; height: auto; float: left; padding:0; width: 100%; background: #fff; position:static;} #main_challenge .chall_list_tab li{display: block; margin: 0; width: 200px; white-space: nowrap; float:left; text-align: center; width:20%;} #main_challenge .chall_list_tab a{color:#9e9e9e; font-weight:normal; padding:10px 0 6px; font-size:1.1em; display: block; border-bottom:2px solid #fff; } #main_challenge .chall_list_tab .on{color:#E84D7D; border-bottom:2px solid var(--bg-fc-color);} #main_challenge .chall_list_tab .chall_grad{position:absolute; top:0;display: none; width: 20px; height: 40px;} #main_challenge .chall_list_tab .chall_grad_left{left:0; background:url(https://cdn.metoon.co.kr/mimg/chall_grad_left.png) no-repeat 100% 0;} #main_challenge .chall_list_tab .chall_grad_right{right:0; background:url(https://cdn.metoon.co.kr/mimg/chall_grad_right.png) no-repeat 0 0;} #main_challenge .chall_list_box_title .big_li{width:48%; margin:0 1%;} #main_challenge .chall_list_box_title .sm_li1{width:12%;} #main_challenge .chall_list_box_title .sm_li2{width:15%;} #main_challenge .chall_list_box_cont .big_li{width:40%; margin:0 1%;} #main_challenge .chall_list_box_cont .sm_li1{width:12%; font-style: italic; color:#3c3c3c;} #main_challenge .chall_list_box_cont .sm_li2{width:20%;} #main_challenge .chall_list_box_cont .chall_top3 li{padding:20px 0;} #main_challenge .chall_list_box_cont .chall_top3 .chall_num{font-size:1.2em; color:var(--bg-fc-color); font-style: italic; padding-bottom:0;} #main_challenge .chall_list_box_cont .chall_top3 .wirter_li{width:30%; position:relative; margin-left:1%;} #main_challenge .chall_list_box_cont .chall_top3 .big_li{width:40%;} #main_challenge .chall_list_box_title{overflow:hidden; margin:10px auto 0; width:100%; border-radius:0; background:#404040; color:var(--main-ft-color); position:relative;} #main_challenge .chall_list_box_title li{float:left; width:23%; text-align:center; padding:10px 0; font-size:1em; letter-spacing:-0.1em; font-weight:normal;} #main_challenge .chall_list_box_title .sm_li1 img{position:absolute; top:-1px; left:-1px; height:100%; display:block;} #main_challenge .chall_list_box_cont>li{overflow:hidden; margin:5px auto; width:100%; border-radius:0; border:1px solid #ddd; box-sizing: border-box;} #main_challenge .chall_list_box_cont>li li{ color:#777; float:left; width:30%; text-align:center; padding:10px 0;font-size:1em; letter-spacing:-0.09em; font-weight:normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #main_challenge .chall_list_box_cont>li:nth-of-type(odd){background:#fff;} #main_challenge .chall_list_box_cont a{display:block; overflow:hidden;} #main_challenge .chall_list_box_cont a ul{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-evenly;} #main_challenge .chall_list_box_cont .chall_top3 li .writer{padding-left:45px; display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;} #main_challenge .chall_list_box_cont .chall_top3 li .img_box{display:block; width:42px; height: 42px; position:absolute; top:0; left:0; bottom:0; margin:auto; overflow:hidden;} #main_challenge .chall_list_box_cont .chall_top3 li .img_box img{display:block;width:100%;} #main_challenge .chall_list_box_cont .big_li{color:#3c3c3c; text-align:left;} #main_challenge .chall_list_box_cont .sm_li{color:#676767; font-style: normal;} #main_challenge .chall_list_box_cont .big_li span{padding:0 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position:relative; display: inline-block; max-width: 100%; width: auto; display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;} #main_challenge .chall_list_box_cont .big_li span i{vertical-align:middle;font-style:normal;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} #main_challenge .chall_list_box_cont .big_li .icon_19_patch{margin-left: 3px; vertical-align: middle; width: 13px; } #main_challenge .chall_list_box_cont .big_li .adult_patch{background: red; color: #fff; font-size: 0.8em; letter-spacing: -0.09em; padding: 1px 3px 1px 2px; border-radius: 35px; vertical-align: top; display: inline-block; margin-left: 3px;} #main_challenge .chall_list_tab li a .adult_patch{background:red; color:var(--main-ft-color); font-size:0.8em; letter-spacing:-0.09em; padding:1px 3px 1px 2px; border-radius:35px; vertical-align: top; display: inline-block; margin-left:3px;} #main_challenge .chall_list_tab li a span{position:relative; width: auto; height: auto;} #main_challenge .chall_list_tab li a .icon_19_patch{width: 16px;vertical-align: middle;margin-left: 3px; margin-top:-3px;} #main_challenge #new_formal{width:100%; max-width:600px; overflow: hidden; margin:5px auto 0; padding: 10px 0;} #main_challenge #new_formal:after{clear:both; display:block; content:"";} #main_challenge #new_formal h4{background:#7c7c7c; text-align:center; border-radius:3px; padding: 10px 0; font-size: 1.1em; letter-spacing: -0.1em; font-weight: bold; color:var(--main-ft-color);} #main_challenge #new_formal .new_formal_list{margin-top:5px; border:1px solid #ddd; border-radius:3px; background:#fff; overflow:hidden;} #main_challenge #new_formal .new_formal_list>li{width:100%; float:left; border-bottom:1px solid #ddd;} #main_challenge #new_formal .new_formal_list>li:last-child{border:none;} #main_challenge #new_formal .new_formal_list>li a{padding:10px 0; display:block; float:left; width:100%;} #main_challenge #new_formal .new_formal_list ul li{float:left; text-align:center; color: #777; width: 20%; letter-spacing: -0.09em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: bold;} #main_challenge #new_formal .new_formal_list ul .big_li{width: 48%; color: #3c3c3c; text-align: left;} #main_challenge #new_formal .new_formal_list ul .sm_li{width: 12%;} #main_challenge #new_formal .new_formal_list ul .sm_li span{display:inline-block; font-weight: bold; color: #fff;margin: 0 5px; background: #676767; padding: 1px 4px; border-radius: 3px; font-size: 0.85em;} #main_challenge #new_formal .new_formal_list ul .sm_li .first{background:#007bc8;} #main_challenge #new_formal .new_formal_list ul .big_li .icon_19_patch{margin-left: 3px; vertical-align: text-top; width: 13px;} #main_challenge .main_challenge_more{width: 100%; float: left;} #main_challenge .main_challenge_more a{width: 96%; display: block; text-align: center; color: var(--bg-fc-color); background: #fff; padding: 9px 0 8px; font-size: 1.1em; border: 1px solid var(--bg-fc-color); margin: 5px auto; text-shadow: none; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #main_challenge .main_challenge_more p{display: inline-block;} #main_challenge .main_challenge_more img{width: 16px; display: inline-block; position: absolute; top: 4px; bottom: 0; margin: auto; padding-left: 10px;} #main_challenge .main_chall_notice{float:left;width:100%;padding:3px 0 12px;font-size:12px;color:#777;margin:0 auto;} #main_challenge .main_chall_notice p{width:96%;margin:0 auto;} /* 메인 도전 */ /* 성인메인 최신업데이트 */ #content_wrap .main_content_swipe{padding: 0; position: relative; margin:0 auto; width: auto !important; /* margin: 6px auto 0;background-color:#FFFFFF;border-top:1px solid #ddd; */border-bottom:1px solid var(--opt-bg-color);} /* #content_wrap #main_today_update_adult.main_content_swipe{border-bottom:0 none;} */ #content_wrap .main_content_swipe:first-child{border-top:0 none;margin-top:5px;} #content_wrap .main_content_swipe:last-child{border-bottom:0 none;} .main_top5_cont + .main_content_swipe{border-top:1px solid var(--opt-bg-color);} /* #content_wrap .main_comp_update{margin-top:0;padding-top:12px;border-top:0 none;} #content_wrap .main_comp_update + .main_comp_update{margin-top:6px;padding-top:0;border-top:1px solid #ddd;} */ .main_content_swipe .mcs1-title{padding:0 4px 0 8px; height:40px; line-height:40px; overflow:hidden;margin-bottom:5px;} .main_content_swipe .mcs1-title .title{float:left; font-size:15px;} .main_content_swipe .mcs1-title .title .h4_sm{color:#676767; font-weight:normal; font-size:0.8em; letter-spacing:-0.09em;} .main_content_swipe .mcs1-title .comp2_toon-pagination, .main_content_swipe .mcs1-title .comp2_novel-pagination, .mcs1-title .mtitle-pagination{float:right; display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center; height:100%; margin-right:4px;} .mcs1-title .tit_more{display:inline-block;width:20px;height:20px;background:url(https://cdn.metoon.co.kr/mimg/btn_add.svg) no-repeat center;background-size:18px;overflow:hidden;text-indent:-99999px;border-radius:100%;float:right;margin-top:11px;} [color-theme="light"] #content_wrap .cont_title a, [color-theme="light"] .mcs1-title .tit_more{background-image:url("https://cdn.metoon.co.kr/mimg/btn_add_ctlgt.svg");} .main_content_swipe .mcs1-title .comp2_toon-pagination li, .main_content_swipe .mcs1-title .comp2_novel-pagination li, .mcs1-title .mtitle-pagination li{display:block; font-size:12px; color:#666;} .main_content_swipe .mcs1-title .comp2_toon-pagination li a, .main_content_swipe .mcs1-title .comp2_novel-pagination li a, .mcs1-title .mtitle-pagination li a{display:block; width:auto; height:auto; border-radius:0; opacity:1; background:none; height:22px; line-height:20px; padding:0 5px; outline:none; border-radius:11px;color:var(--sub-ft-color); -webkit-box-sizing:border-box; box-sizing:border-box;} .main_content_swipe .mcs1-title .comp2_toon-pagination li a.on, .main_content_swipe .mcs1-title .comp2_novel-pagination li a.on, .mcs1-title .mtitle-pagination li a.on{border:1px solid var(--bg-fc-color); color:var(--bg-fc-color);} .mcs1-title .mtitle-pagination li:first-child a.on{margin-right:2px;} .main_content_swipe .mcs_wrap{width:calc(100% - 4px); margin: 0 0 0 4px; padding-bottom: 12px;overflow:hidden;position: relative;} .main_content_swipe .mcs_wrap>ul{/* display: inline-block; */ white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} .main_content_swipe .mcs_wrap li{float: none; display: inline-block; width: 135px !important; margin:0 4px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} .main_content_swipe .mcs_wrap .more{width:auto !important; height:249px; border:1px solid var(--main-line-color);transition:border-color 0.2s;} .main_content_swipe .mcs_wrap li:last-child{margin-right:10px !important;} .main_content_swipe .mcs_wrap li a{display: block; width: 100%; height: 100%; color: var(--sub-ft-color); position: relative;} .main_content_swipe .mcs_wrap .more a{padding:0 20px; display:table;background-color:var(--sub-bg-color); text-align:center; -webkit-box-sizing:border-box; box-sizing:border-box;} .main_content_swipe .mcs_wrap .more a .more_wrap{display:table-cell; vertical-align:middle;} .main_content_swipe .mcs_wrap .more a span{display:inline-block; padding-bottom:28px; background:url(https://cdn.metoon.co.kr/mimg/btn_add.svg) no-repeat center 99%; background-size:18px; font-size:14px; color:var(--main-ft-color);} [color-theme="light"] #sub_mypage .my_nobel_data .nobel_data_list1 li.more > a div span, [color-theme="light"] .main_content_swipe .mcs_wrap .more a span{background-image:url("https://cdn.metoon.co.kr/mimg/btn_add.png");} .main_content_swipe .mcs_wrap .more.main{border:0 none;} .main_content_swipe .mcs_wrap .more.main a{height:49%; border:1px solid var(--main-line-color);transition:border-color 0.2s;} .main_content_swipe .mcs_wrap .more.main a + a{margin-top:4%;} .main_content_swipe .mcs_wrap .patch_box{position:absolute; top:0; right:5px; text-align:center; z-index:15;} .main_content_swipe .mcs_wrap .patch_box img{display:inline-block; width:35px;} .main_content_swipe .mcs_wrap .img_box{width: 100%; position: relative; border-radius:5px 5px 0 0;} .main_content_swipe .mcs_wrap .img_box img{display: block; width: 100%; border-radius:0 0 5px 5px;} .main_content_swipe .mcs_wrap .img_box .blurcover{position:absolute; top:-20%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} .main_content_swipe .mcs_wrap .img_box .novel_img{position: relative;height:0;padding-bottom:140%;background-size:cover;background-position:center 0;border-radius:5px 5px 0 0;border:1px solid var(--main-line-color);z-index:2;} .main_content_swipe .mcs_wrap .img_box .novel_img .icon19, span.icon19{position:absolute;top:0;right:0;display:inline-block; width:18px; margin:3px 3px 0 0; float:right; opacity:.9;z-index:20;} .main_content_swipe .mcs_wrap .img_box .novel_img .icon19 img.icon_19_patch, span.icon19 .icon_19_patch{width:100% !important; vertical-align:top; margin-right:0;} .main_content_swipe .mcs_wrap .img_box .blurcover_b{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background-size:60% !important; background-repeat:no-repeat !important; background-position:center 25% !important;} .main_content_swipe .mcs_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} .main_content_swipe .mcs_wrap .nobel_txt{position: relative; /* background: #fff; */ font-size: 1.0em; width: 100%; padding: 5px 5px 5px; border-radius:0 0 5px 5px;z-index:3;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag{width: auto; left: 0; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag span{display:inline-block; padding:0; border-radius:0; position:relative;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag .ic_tag01{background:transparent; border:0 none;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag .ic_tag01:after{content:""; display:block; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag .new_tag:after{border-top:12px solid #46adf2;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag .hot_tag:after{border-top:12px solid #fd404d;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag .best_tag:after{border-top:12px solid #f471f4;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag .ic_tag01 img{width:24px; display:block; position:static;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag .chat_tag{line-height:normal; background:transparent !important; border:0 none; margin:0 0 0 3px;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag .chat_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #ffb72b; border-right:5px solid transparent;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag .chat_tag img{width:22px; display:block; position:static;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag .free_tag{line-height:normal; background:transparent !important; border:0 none; margin:0 0 0 3px; padding:0 !important;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag .free_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #00b233; border-right:5px solid transparent;} .main_content_swipe .mcs_wrap .nobel_txt .content_tag .free_tag img{width:22px; display:block; position:static;} .main_content_swipe .mcs_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; /* height:52px; letter-spacing: -0.09em; */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align:left;} .main_content_swipe .mcs_wrap .nobel_txt .nobel_title{display: block;display:flex; font-weight: 500; font-size: 1.15em;color:var(--main-ft-color); margin:2px 0 3px; white-space: nowrap;/* text-overflow: ellipsis; */min-width:0;overflow: hidden; /* height:17px; line-height:17px; */line-height:1.24;} .main_content_swipe .mcs_wrap .nobel_txt .nobel_title span{display:inline-block;/* width:calc(100% - 24px); */overflow:hidden; white-space:nowrap; text-overflow:ellipsis; vertical-align:top;flex:1 1 auto;} /* .main_content_swipe .mcs_wrap .nobel_txt .nobel_title span:only-child{width:100%;} */ .main_content_swipe .mcs_wrap .nobel_txt .label_box{position:absolute;bottom:100%;left:0;margin-bottom:5px;} .main_content_swipe .mcs_wrap .nobel_txt .label_box .nLabel{display:block;width:30px;height:18px;background-size:100% auto;background-position:center;background-repeat:no-repeat;} .main_content_swipe .mcs_wrap .nobel_txt .label_box .nLabel + .nLabel{margin-top:2px;} .main_content_swipe .mcs_wrap .nobel_txt .label_box .nLabel_up{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_up01.png);} .main_content_swipe .mcs_wrap .nobel_txt .label_box .nLabel_mo{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_mo01.png);} .main_content_swipe .mcs_wrap .nobel_txt .label_box .nLabel_novel{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_novel.png);} .main_content_swipe .mcs_wrap .nobel_txt .label_box .nLabel_toon{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_toon.png);} .main_content_swipe .mcs_wrap .nobel_txt .label_box .nLabel_comics{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_comics.png);} .main_content_swipe .mcs_wrap .nobel_txt .label_box .nLabel_ebook{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_ebook.png);} .main_content_swipe .mcs_wrap .nobel_txt .label_box .nLabel_photo{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_photo.png);} .main_event_bnr{width:100%; overflow:hidden; padding-bottom:12px;background-color:#FFFFFF;margin:6px auto;border-top:1px solid #ddd;border-bottom:1px solid #ddd;} #content_wrap .main_event_bnr .cont_title a{padding:0; width:21px; height:21px;} .main_event_wrap{width:100%; padding:0 8px;} .main_event_wrap .content_event{width:100%;} .main_event_wrap .content_event + .content_event{margin-top:10px;} .main_event_wrap .content_event img{width:100%;} .main_contents_bnr{position:relative;width:100%;overflow:hidden;background:#fff;} .main_contents_bnr .swiper-slide a{display:block;position:relative;width:100%;height:0;padding-bottom:27.6%;background-color:#FFFFFF;background-position:center top;background-repeat:no-repeat;background-size:cover;} /* 성인메인 최신업데이트 */ /* 성인메인 경험야설 */ #content_wrap #main_real{padding: 0; position: relative; margin: 0 auto; width: auto !important;} #main_real .main_real_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #main_real .main_real_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_real .main_real_wrap li{float: none; display: inline-block;/* border: 1px solid #ddd; */ border-radius: 5px; width: 250px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #main_real .main_real_wrap li:last-child{margin-right:10px !important;} #main_real .main_real_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative;/* overflow: hidden; */ border-radius: 5px; padding-bottom:0px;} #main_real .main_real_wrap .img_box{width: 100%; position: relative;} #main_real .main_real_wrap .img_box img{display: block; width: 100%; border-radius:5px;} /* #main_real .main_real_wrap .img_box .mark19_icon{width: 22px !important; position: absolute; bottom: 5px; right: 5px; z-index: 99;} */ #main_real .main_real_wrap .img_box .real_tag{position: absolute; bottom: 5px; right: 5px; z-index: 99; color:var(--main-ft-color); padding-left:18px; font-size: 13px;} #main_real .main_real_wrap .img_box .real_tag .mark19_icon{display:block; width:16px !important; position: absolute; top: 0; bottom: 0; left: 0; margin: auto;} #main_real .main_real_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; border-radius:3px;} #main_real .main_real_wrap .img_box .content_tag{bottom:5px; margin-bottom:0;} #main_real .main_real_wrap .img_box .content_tag .new_tag img{width: 11px;} #main_real .main_real_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_real .main_real_wrap .list_box{width:100%; padding:5px; background:#fff; border:1px solid #ddd; border-radius:5px; margin-top:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #main_real .main_real_wrap .top_txt{width:100%;} #main_real .main_real_wrap .top_txt:after{display:block; content:""; clear:both;} #main_real .main_real_wrap .top_txt .num{font-size:15px; font-style: italic; font-weight:bold; float:left; margin-right:7px;} /* #main_real .main_real_wrap .top_txt .txt_right{font-size:13px; float:right; letter-spacing:-0.05em; padding: 4px 0;} #main_real .main_real_wrap .top_txt .heart{font-weight:normal; color: var(--bg-fc-color); padding-left:17px; background: url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 25%; background-size: 13px 11px;} #main_real .main_real_wrap .top_txt .genre_tag{color:#676767; position:relative; } #main_real .main_real_wrap .top_txt .genre_tag img{width:15px; display:none; position:absolute; top:0; bottom:0; left:0; margin:auto;} */ #main_real .main_real_wrap .title_txt{display:block; float:left; font-size:15px; padding: 5px 0px; padding-right:5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%; color:#2c2c2c; letter-spacing:-0.05em; font-size:15px; font-weight:bold; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #main_real .main_real_wrap .btm_txt{width:100%; padding-bottom:5px;} #main_real .main_real_wrap .btm_txt p{max-height: 30px; display: -webkit-box; -webkit-line-clamp: 2; white-space: normal; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} @media all and (min-width:600px){ #main_real .main_real_wrap li{width:48% !important; margin:0 0.5% !important;} } /* 성인메인 경험야설 */ /* 성인메인 S소설 */ #content_wrap #main_s_novel{padding: 0; position: relative; margin: 0 auto; width: auto !important;} #main_s_novel .main_s_novel_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #main_s_novel .main_s_novel_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_s_novel .main_s_novel_wrap li{float: none; display: inline-block; border: 1px solid #ddd; width: 180px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #main_s_novel .main_s_novel_wrap li:last-child{margin-right:10px !important;} #main_s_novel .main_s_novel_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; padding-bottom:30px;} #main_s_novel .main_s_novel_wrap .patch_box{position:absolute; top:0; right:5px; text-align:center; z-index:15;} #main_s_novel .main_s_novel_wrap .patch_box img{display:inline-block; width:35px;} #main_s_novel .main_s_novel_wrap .img_box{width: 100%; position: relative;} #main_s_novel .main_s_novel_wrap .img_box img{display: block; width: 100%; border-radius:0 0 5px 5px;} #main_s_novel .main_s_novel_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0;} #main_s_novel .main_s_novel_wrap .img_box .blurcover{position:absolute; top:-20%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #main_s_novel .main_s_novel_wrap .img_box .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center 25% !important;} #main_s_novel .main_s_novel_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_s_novel .main_s_novel_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-top:1px solid #ddd;} #main_s_novel .main_s_novel_wrap .nobel_txt .content_tag{width: auto; left: 5px; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #main_s_novel .main_s_novel_wrap .nobel_txt .content_tag .up_txt_tag{padding:0; border-radius:0; position:relative; background:transparent; border:0 none;} #main_s_novel .main_s_novel_wrap .nobel_txt .content_tag .up_txt_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #1567c3;} #main_s_novel .main_s_novel_wrap .nobel_txt .content_tag .up_txt_tag img{width:22px; position:static;} #main_s_novel .main_s_novel_wrap .nobel_txt .content_tag .chat_tag{padding:0; border-radius:0; position:relative; background:transparent !important; border:0 none; margin-right:3px;} #main_s_novel .main_s_novel_wrap .nobel_txt .content_tag .chat_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #ffb72b;} #main_s_novel .main_s_novel_wrap .nobel_txt .content_tag .chat_tag img{width:22px; position:static;} #main_s_novel .main_s_novel_wrap .nobel_txt .patch_cont{position:absolute; bottom:100%; right:5px; margin-bottom:5px; z-index:99;} #main_s_novel .main_s_novel_wrap .nobel_txt .patch_cont img{width:18px; display:inline-block; position:static;} /* #main_s_novel .main_s_novel_wrap .nobel_txt img.icon_19_patch{width:22px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} */ #main_s_novel .main_s_novel_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #main_s_novel .main_s_novel_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* 성인메인 S소설 */ /* 성인메인 빨간책 */ #content_wrap #main_b_novel{padding: 0; position: relative; margin: 0 auto; width: auto !important;} #main_b_novel .main_b_novel_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #main_b_novel .main_b_novel_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_b_novel .main_b_novel_wrap li{float: none; display: inline-block; border: 1px solid #ddd; width: 180px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #main_b_novel .main_b_novel_wrap li:last-child{margin-right:10px !important;} #main_b_novel .main_b_novel_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; padding-bottom:30px;} #main_b_novel .main_b_novel_wrap .patch_box{position:absolute; top:0; right:5px; text-align:center; z-index:15;} #main_b_novel .main_b_novel_wrap .patch_box img{display:inline-block; width:35px;} #main_b_novel .main_b_novel_wrap .patch_cont{position:absolute; bottom:100%; right:5px; margin-bottom:5px; z-index:15;} #main_b_novel .main_b_novel_wrap .patch_cont img{width:18px; display:inline-block;} #main_b_novel .main_b_novel_wrap .img_box{width: 100%; position: relative;} #main_b_novel .main_b_novel_wrap .img_box img{display: block; width: 100%;} #main_b_novel .main_b_novel_wrap .img_box .blurcover{position:absolute; top:-20%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #main_b_novel .main_b_novel_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0;} #main_b_novel .main_b_novel_wrap .img_box .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center 25% !important;} #main_b_novel .main_b_novel_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_b_novel .main_b_novel_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-top:1px solid #ddd;} #main_b_novel .main_b_novel_wrap .nobel_txt .content_tag{width: auto; left: 5px; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #main_b_novel .main_b_novel_wrap .nobel_txt .content_tag .up_txt_tag{display:inline-block; position:relative; background:transparent; border:0 none; padding:0;} #main_b_novel .main_b_novel_wrap .nobel_txt .content_tag .up_txt_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #1567c3;} #main_b_novel .main_b_novel_wrap .nobel_txt .content_tag .up_txt_tag img{width:22px; position:static;} /* #main_b_novel .main_b_novel_wrap .nobel_txt img.icon_19_patch{width:22px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} */ #main_b_novel .main_b_novel_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #main_b_novel .main_b_novel_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* 성인메인 빨간책 */ /* 메인 E북 */ #content_wrap #main_b_ebook{padding: 0; position: relative; margin: 0 auto; width: auto !important;} /* #content_wrap #main_b_ebook .cont_title { margin-bottom:2px; } */ #content_wrap #main_b_ebook .cont_title .h4_sm { display:inline-block; margin-left:4px; } #main_b_ebook .main_b_ebook_wrap{width: 100%; padding-bottom: 8px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #main_b_ebook .main_b_ebook_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_b_ebook .main_b_ebook_wrap>ul li{display:inline-block; width:141px; float:none; background-color:#FFFFFF; margin-right:10px; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%;} #main_b_ebook .main_b_ebook_wrap>ul li:first-child{margin-left:10px;} #main_b_ebook .main_b_ebook_wrap>ul li a{position:relative; display:block; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; border:1px solid #ddd;} #main_b_ebook .main_b_ebook_wrap>ul li a .ebook_re_thumb{position:relative; width:100%; overflow:hidden;} #main_b_ebook .main_b_ebook_wrap>ul li a .ebook_re_thumb > img:not(.thumb_placeholder){position:absolute;} #main_b_ebook .main_b_ebook_wrap>ul li a .ebook_re_thumb img.thumb_placeholder{width:100%;} #main_b_ebook .main_b_ebook_wrap>ul li a .ebook_re_thumb img.ebook_img{width:100%; top:0; left:0;} #main_b_ebook .main_b_ebook_wrap>ul li a .ebook_re_thumb .adult_mark{position:absolute; bottom:5px; right:5px; display:block; width:18px; z-index:1;} #main_b_ebook .main_b_ebook_wrap>ul li a .ebook_re_thumb .adult_mark img{width:100%;} #main_b_ebook .main_b_ebook_wrap>ul li a dl{width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; text-align:center; color:#2c2c2c; padding:4px; line-height:1.1; border-top:1px solid #ddd;} #main_b_ebook .main_b_ebook_wrap>ul li a dl dt{font-size:13px; font-weight:bold; padding-bottom:5px; padding-top:2px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #main_b_ebook .main_b_ebook_wrap>ul li a dl dd{padding-bottom:4px; font-size:11px; font-weight:normal; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #main_b_ebook .main_b_ebook_wrap>ul li a dl dd .genre{color:#d52b2c;} /* 성인메인 빨간책 */ /* 성인메인 로맨스 */ #content_wrap #main_adult_romance{padding: 0; position: relative; margin: 0 auto; width: auto !important;} #main_adult_romance .main_adult_romance_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #main_adult_romance .main_adult_romance_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_adult_romance .main_adult_romance_wrap li{float: none; display: inline-block; border: 1px solid #ddd; width: 180px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #main_adult_romance .main_adult_romance_wrap li:last-child{margin-right:10px !important;} #main_adult_romance .main_adult_romance_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; padding-bottom:30px;} #main_adult_romance .main_adult_romance_wrap .patch_box{position:absolute; top:0; right:5px; text-align:center; z-index:15;} #main_adult_romance .main_adult_romance_wrap .patch_box img{display:inline-block; width:35px;} #main_adult_romance .main_adult_romance_wrap .img_box{width: 100%; position: relative;} #main_adult_romance .main_adult_romance_wrap .img_box img{display: block; width: 100%;} #main_adult_romance .main_adult_romance_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0;} #main_adult_romance .main_adult_romance_wrap .img_box .blurcover{position:absolute; top:-20%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #main_adult_romance .main_adult_romance_wrap .img_box .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center 25% !important;} #main_adult_romance .main_adult_romance_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_adult_romance .main_adult_romance_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-top:1px solid #ddd;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag{width: auto; left: 0; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag span{padding:0; border-radius:0;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag .ic_tag01{background:transparent; border:0 none;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag .ic_tag01:after{content:""; display:block; position:absolute; top:0; right:-5px; border-right:5px solid transparent;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag .ic_tag01 img{width:24px; position:static;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag .new_tag:after{border-top:12px solid #46adf2;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag .hot_tag:after{border-top:12px solid #fd404d;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag .best_tag:after{border-top:12px solid #f471f4;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag .free_tag{background:transparent !important; border:0 none; padding:0 !important; margin-left:3px; line-height:normal;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag .free_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #00b233;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag .free_tag img{width:22px; position:static;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag .chat_tag{background:transparent !important; border:0 none; padding:0 !important; line-height:normal; margin-left:3px;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag .chat_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #ffb72b;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .content_tag .chat_tag img{width:22px; position:static;} #main_adult_romance .main_adult_romance_wrap .nobel_txt img.icon_19_patch{width:18px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} #main_adult_romance .main_adult_romance_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #main_adult_romance .main_adult_romance_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* 성인메인 로맨스 */ /* 성인메인 포토툰 */ #content_wrap #main_phototoon{padding: 0; position: relative; margin: 0 auto; width: auto !important;} #main_phototoon .main_phototoon_wrap{width: 98%; margin: 0 0 0 2%; padding-bottom: 10px; overflow: auto; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory;} #main_phototoon .main_phototoon_wrap>ul{display: inline-block; white-space: nowrap; font-size: 0; margin: 0 auto; overflow: visible; vertical-align: top; position: relative;} #main_phototoon .main_phototoon_wrap li{float: none; display: inline-block; border: 1px solid #ddd; width: 180px !important; margin:0 2px !important; vertical-align: top; scroll-snap-coordinate: 0% 0%; -webkit-scroll-snap-coordinate: 0% 0%; font-size: 12px;} #main_phototoon .main_phototoon_wrap li:last-child{margin-right:10px !important;} #main_phototoon .main_phototoon_wrap li a{display: block; width: 100%; height: 100%; color: #4e4e4e; position: relative; overflow: hidden; padding-bottom:30px;} #main_phototoon .main_phototoon_wrap .patch_box{position:absolute; top:0; right:5px; text-align:center; z-index:15;} #main_phototoon .main_phototoon_wrap .patch_box img{display:inline-block; width:35px;} #main_phototoon .main_phototoon_wrap .img_box{width: 100%; position: relative;} #main_phototoon .main_phototoon_wrap .img_box img{display: block; width: 100%;} #main_phototoon .main_phototoon_wrap .img_box .novel_img{position: absolute; top: 0; left: 0; right: 0; bottom:0;} #main_phototoon .main_phototoon_wrap .img_box .blurcover{position:absolute; top:-20%; left:0; right:0; bottom:0; margin:auto; width:60%; z-index:1;} #main_phototoon .main_phototoon_wrap .img_box .blurcover_b{background-size:60% !important; background-repeat:no-repeat !important; background-position:center 25% !important;} #main_phototoon .main_phototoon_wrap .img_box .today_cont_back{position: absolute; bottom: 30px; left: 0; right: 0; height: 100%; background: url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size: 100% 100%;} #main_phototoon .main_phototoon_wrap .nobel_txt{position: absolute; bottom: 0; left: 0; right: 0; background: #fff; font-size: 1.0em; width: 100%; text-align: center; padding: 5px 5px 5px; border-top:1px solid #ddd;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag{width: auto; left: 0; right: auto; bottom: 100%; top: auto; margin-bottom: 5px;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag span{padding:0; border-radius:0;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag .ic_tag01{background:transparent; border:0 none;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag .ic_tag01:after{content:""; display:block; position:absolute; top:0; right:-5px; border-right:5px solid transparent;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag .ic_tag01 img{width:24px; position:static;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag .new_tag:after{border-top:12px solid #46adf2;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag .hot_tag:after{border-top:12px solid #fd404d;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag .best_tag:after{border-top:12px solid #f471f4;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag .free_tag{background:transparent !important; border:0 none; padding:0 !important; margin-left:3px; line-height:normal;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag .free_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #00b233;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag .free_tag img{width:22px; position:static;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag .chat_tag{background:transparent !important; border:0 none; padding:0 !important; line-height:normal; margin-left:3px;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag .chat_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #ffb72b;} #main_phototoon .main_phototoon_wrap .nobel_txt .content_tag .chat_tag img{width:22px; position:static;} #main_phototoon .main_phototoon_wrap .nobel_txt img.icon_19_patch{width:18px !important;position:absolute; bottom:100%; margin-bottom:5px; right:5px; z-index:99;} #main_phototoon .main_phototoon_wrap .nobel_txt p{white-space: normal; overflow: hidden; text-overflow: ellipsis; height:52px; letter-spacing: -0.09em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #main_phototoon .main_phototoon_wrap .nobel_txt .nobel_title{display: block; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /* 성인메인 포토툰 */ /* 메인 리뉴얼 */ /* 충전소 리뉴얼 */ .charge_banner1{width:100%; position: fixed; top: 54px; left: 0; width: 100%; z-index: 1;} .charge_banner1 img{display:block; width:100%;} #sub_charge .charge_form_cont1{width: 96%; overflow: hidden; margin: 7px auto; padding: 0;} #charge_pop{position:fixed; top:0; bottom:0; right:0; left:0; z-index:9999; overflow-y:auto;} #charge_pop>div{margin: 10px auto; padding: 10px; position: absolute; transform: translateY(-55%); top: 50%; z-index: 99; left: 0; right: 0;} #charge_pop .charge_pop_wrap{width:98%; max-width:350px; text-align:center; z-index:9; position:relative; margin:auto;/* position:absolute; top:0; left:0; right:0; overflow:hidden; */ background:#fff; border-radius:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #charge_pop .charge_pop_wrap h4{position:relative; background:#404040; color:var(--main-ft-color); padding:12px 10px; border-radius: 5px 5px 0 0; width:100%; font-size:16px; letter-spacing:-0.09em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #charge_pop .charge_pop_wrap .btn_close{position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; background: url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; width: 25px; height: 25px; display: block; overflow: hidden; text-indent: -99999999em; background-size: 23px;} #charge_pop #payment_type{width:100%; padding:10px;} #charge_pop #payment_type img{display:block; width:100%;} #charge_pop #payment_type .select_coin{overflow:hidden; text-align:center; padding:10px 10px; border:1px solid #ddd; border-radius:3px; margin:0 auto 10px;} #charge_pop #payment_type .select_coin p{/* display:table-cell; vertical-align:middle; */ display:inline-block; font-size:15px; letter-spacing:-0.09em; text-align:left; /* float:left; */} #charge_pop #payment_type .select_coin .sm{font-size:13px; text-align:left; margin-left:5px; vertical-align: top; padding-top: 8px;} #charge_pop #payment_type .select_coin .all_coin_box{width:auto; display:inline-block; width:100%; text-align:center;} #charge_pop #payment_type .select_coin .all_coin_box>span{ padding:3px 5px; border-radius:5px; display: inline-block; margin-bottom:3px; font-size:17px;} #charge_pop #payment_type .select_coin .grade_box{display:inline-block; /* float:right; */position:relative; width:85px; } #charge_pop #payment_type .select_coin .grade_box:after{display:block; content:"+"; position:absolute; top:0; left:0; bottom:0; margin:auto; height: 20px;} #charge_pop #payment_type .select_coin .grade_box p{font-size:11px;} #charge_pop #payment_type .select_coin .grade_box img{display:block; width:25px; margin:0 auto;} #charge_pop #payment_type .fill_notice{color:#676767; font-size:11px; letter-spacing:-0.05em; text-align:left; padding-bottom:10px;} #charge_pop #payment_type .select_coin .fix_cash{padding:0; font-weight:normal; font-size:14px; letter-spacing:-0.05em;} #charge_pop #payment_type .select_coin .fix_cash > span{margin-right:5px;} #charge_pop #payment_type .select_coin .fix_cash .pay_before{margin-right:5px; position:relative; padding:0; padding-left:15px;} #charge_pop #payment_type .select_coin .fix_cash .pay_before img{position:absolute; top:0; bottom:0; left:0; margin:auto; display:block; width:68px;} #charge_pop #payment_type .select_coin .fix_cash .pay_before .pay{color:var(--bg-fc-color); padding-left:30px; font-size:18px; font-weight:bold;} #charge_pop #type_form{width:100%; overflow:hidden;} #charge_pop #type_form ul{width:102%; overflow:hidden; margin-left:-1%;} #charge_pop #type_form ul li{width:48%; /* float:left; */ margin:0 0.5% 5px; display: inline-block;} #charge_pop #type_form ul li a{display:block; position:relative;} #charge_pop #type_form ul li p{font-size: 13px; color:#303030; letter-spacing:-0.05em; position:absolute; top:50%; right:5px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%);} #charge_pop #type_form ul li.paytype_05, #charge_pop #type_form ul li.paytype_10 { width:22.83%; margin:0 0.5% 5px; } #charge_pop .close_btn_box{position:absolute; top:100%; left:0; right:0; margin:10px auto;} #charge_pop .close_btn_box a{display:inline-block; width:120px; padding:8px 0; color:var(--main-ft-color); background:#676767; font-size:14px; font-weight:bold; border-radius:5px;} #charge_pop .bg{background:rgba(0,0,0,0.5); display:block; width:100%; height:100%; position:fixed; top:0; left:0; bottom:0; margin:auto;} .fill_notice_list{width:100%; letter-spacing:-0.09em; margin-top:15px; border-top: 1px dashed #a5a5a5;} .fill_notice_list p{font-size:14px; margin-bottom:5px; margin-top: 10px; color:#464646;} .fill_notice_list li{line-height:1.5; color:#676767;} /* 월 자동결제 */ /* #coin_fill_form .self_clearing .coin_txt_box{border: 1px solid #d52b2c;} #coin_fill_form .self_clearing .coin_txt_box .cash>span{font-weight:normal; margin-right:5px; font-size:13px; vertical-align: middle;} #coin_fill_form .self_clearing_fix100 .coin_txt_box .cash>span{font-weight:normal; margin-right:5px; font-size:13px; vertical-align: middle;} */ #charge_pop #payment_type .self_clearing_notice{width:100%; margin:5px auto; text-align:left; color: #676767; font-size: 12px; letter-spacing: -0.05em;} #charge_pop #payment_type .self_clearing_notice p{font-size: 13px; margin-bottom: 5px;} #coin_fill_form a label .fill_secret_tag{position:absolute; bottom:0; left:0; width:50px; z-index:1; display:block;} /* 월 자동결제 */ /* 웹툰 정액권 자동결제 */ #charge_pop #payment_type .self_clearing_notice_fix100{width:100%; margin:5px auto; text-align:left; color: #676767; font-size: 12px; letter-spacing: -0.05em;} #charge_pop #payment_type .self_clearing_notice_fix100 p{font-size: 13px; margin-bottom: 5px;} #charge_pop #payment_type .self_clearing_notice_fix100 ul li{position:relative; padding-left:10px; box-sizing:border-box;} #charge_pop #payment_type .self_clearing_notice_fix100 ul li:nth-of-type(10){padding-left:15px;} #charge_pop #payment_type .self_clearing_notice_fix100 ul li span{position:absolute; top:0; left:0;} #charge_pop #payment_type .self_clearing_notice_fix100 ul li:nth-of-type(10) span{left:-2px;} /* 웹툰 정액권 자동결제 END */ /* 충전수단 선택 묶음 */ #charge_pop #type_form .paym_wrap{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.4);} #charge_pop #type_form .paym_wrap .paym_cont{position:relative; top:32%; margin:0 auto; width:92%; max-width:350px; overflow:hidden; background:#fff; border-radius:5px;} #charge_pop #type_form .paym_wrap .paym_cont h4 a{position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; background: url(https://cdn.metoon.co.kr/mimg/ico_close.svg) no-repeat center; width: 25px; height: 25px; display: block; overflow: hidden; text-indent: -99999999em; background-size: 23px;} #charge_pop #type_form .paym_wrap .paym_cont .paym_list{box-sizing:border-box; padding:10px;} #charge_pop #type_form .paym_wrap .paym_cont .paym_list li{margin-bottom:0;} /* #charge_pop #type_form .paym_wrap .paym_cont .paym_list li:nth-of-type(3), #charge_pop #type_form .gift_cont_wrap .gift_cont .gift_list li:nth-of-type(4){ margin-bottom:0; } */ /* 충전수단 선택 묶음 */ @media all and (min-width:320px) and (max-width:350px){ #charge_pop #type_form ul li p{font-size: 12px;} #charge_pop>div{transform: translateY(-50%);} #charge_pop #payment_type .self_clearing_notice{font-size:11px;} #charge_pop #payment_type .self_clearing_notice p{font-size:12px;} } @media screen and (orientation:landscape) and (max-width:750px){ #charge_pop>div{transform: translateY(0%); top:5%;} } /* 충전소 리뉴얼 */ /* 출석이벤트 */ .daily_check_list_box{position: relative; height:380px; width:250px; margin: 15px auto 0;} .daily_check_list .daily_check_day{position: absolute; width:25px; font-size: 13px; line-height: 25px; margin: 17px 0; text-align: center;} .daily_check_list .daily_check_day>div{z-index:7; position:relative; width:25px; font-size: 13px; line-height: 25px; color:#676767; background: #ededed; border-radius: 100%;} .daily_check_list .daily_check_day.on>div{background:#f54633; color:var(--main-ft-color);} .daily_check_list .daily_check_day .check_point{line-height: 15px; z-index:7; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto; color:#676767; width:50px; height:50px; background:#ededed; border-radius:100%;} .daily_check_list .daily_check_day .check_point .coin{display:block; font-size:14px; line-height: normal; color:#f54633; font-weight:bold;} .daily_check_list .daily_check_day.on .check_point{background:#f54633; color:var(--main-ft-color);} .daily_check_list .daily_check_day.on .check_point .coin{color:#fff330;} .daily_check_list .daily_check_day .check_point>span{padding: 8px 0; display: block;} .daily_check_list .daily_check_day:nth-child(-n+5){top: 0;} .daily_check_list .daily_check_day:nth-child(n+6):nth-child(-n+10){top: 60px;} .daily_check_list .daily_check_day:nth-child(n+11):nth-child(-n+15){top: 120px;} .daily_check_list .daily_check_day:nth-child(n+16):nth-child(-n+21){top: 180px;} .daily_check_list .daily_check_day:nth-child(n+22):nth-child(-n+26){top: 240px;} .daily_check_list .daily_check_day:nth-child(n+27):nth-child(-n+31){top: 300px;} .daily_check_list .daily_check_day:nth-child(2){left: 47px;} .daily_check_list .daily_check_day:nth-child(3){left: 97px;} .daily_check_list .daily_check_day:nth-child(4){left: 172px;} .daily_check_list .daily_check_day:nth-child(5){left: 217px;} .daily_check_list .daily_check_day:nth-child(6){left: 207px;} .daily_check_list .daily_check_day:nth-child(7){left: 165px;} .daily_check_list .daily_check_day:nth-child(8){left: 122px;} .daily_check_list .daily_check_day:nth-child(9){left: 52px;} .daily_check_list .daily_check_day:nth-child(10){left: 7px;} .daily_check_list .daily_check_day:nth-child(11){left: -5px;} .daily_check_list .daily_check_day:nth-child(12){left: 37px;} .daily_check_list .daily_check_day:nth-child(13){left: 107px;} .daily_check_list .daily_check_day:nth-child(14){left: 152px;} .daily_check_list .daily_check_day:nth-child(15){left: 197px;} .daily_check_list .daily_check_day:nth-child(16){left: 232px;} .daily_check_list .daily_check_day:nth-child(17){left: 195px;} .daily_check_list .daily_check_day:nth-child(18){left: 130px;} .daily_check_list .daily_check_day:nth-child(19){left: 92px;} .daily_check_list .daily_check_day:nth-child(20){left: 52px;} .daily_check_list .daily_check_day:nth-child(21){left: -13px;} .daily_check_list .daily_check_day:nth-child(22){left: 10px;} .daily_check_list .daily_check_day:nth-child(23){left: 55px;} .daily_check_list .daily_check_day:nth-child(24){left: 97px;} .daily_check_list .daily_check_day:nth-child(25){left: 167px;} .daily_check_list .daily_check_day:nth-child(26){left: 215px;} .daily_check_list .daily_check_day:nth-child(27){left: 205px;} .daily_check_list .daily_check_day:nth-child(28){left: 163px;} .daily_check_list .daily_check_day:nth-child(29){left: 116px;} .daily_check_list .daily_check_day:nth-child(30){left: 47px;} .daily_check_list .daily_check_day:nth-child(31){left: 0px;} .daily_check_list .daily_check_day:nth-child(2):before, .daily_check_list .daily_check_day:nth-child(3):before, .daily_check_list .daily_check_day:nth-child(4):before, .daily_check_list .daily_check_day:nth-child(5)>div:before, .daily_check_list .daily_check_day:nth-child(12)>div:before, .daily_check_list .daily_check_day:nth-child(13):before, .daily_check_list .daily_check_day:nth-child(14):before, .daily_check_list .daily_check_day:nth-child(15):before, .daily_check_list .daily_check_day:nth-child(23)>div:before, .daily_check_list .daily_check_day:nth-child(24):before, .daily_check_list .daily_check_day:nth-child(25):before, .daily_check_list .daily_check_day:nth-child(26)>div:before{content:""; position: absolute; z-index: 1; left:auto; right: 100%; top: 50%; width: 25px; height: 4px; margin-top: -2px; background: #ededed;} .daily_check_list .daily_check_day:nth-child(7)>div:before, .daily_check_list .daily_check_day:nth-child(8):before, .daily_check_list .daily_check_day:nth-child(10)>div:before, .daily_check_list .daily_check_day:nth-child(17)>div:before, .daily_check_list .daily_check_day:nth-child(19):before, .daily_check_list .daily_check_day:nth-child(20):before, .daily_check_list .daily_check_day:nth-child(28):before, .daily_check_list .daily_check_day:nth-child(29):before, .daily_check_list .daily_check_day:nth-child(31):before{content:""; position: absolute; z-index: 1; left:auto; left: 100%; top: 50%; width: 25px; height: 4px; margin-top: -2px; background: #ededed;} .daily_check_list .daily_check_day:nth-child(9) .check_point:before, .daily_check_list .daily_check_day:nth-child(21) .check_point:before{width:20px; left:100%; right:auto; content:""; position: absolute; z-index: 1; top: 50%; height: 4px; margin-top: -2px; background: #ededed;} .daily_check_list .daily_check_day:nth-child(18) .check_point:before, .daily_check_list .daily_check_day:nth-child(30) .check_point:before{content:""; position: absolute; z-index: 1; left:auto; left: 100%; top: 50%; width: 15px; height: 4px; margin-top: -2px; background: #ededed;} .daily_check_list .daily_check_day:nth-child(17)>div:before{width:12px;} .daily_check_list .daily_check_day:nth-child(5)>div:before, .daily_check_list .daily_check_day:nth-child(10)>div:before, .daily_check_list .daily_check_day:nth-child(23)>div:before, .daily_check_list .daily_check_day:nth-child(25):before, .daily_check_list .daily_check_day:nth-child(30) .check_point:before{width:20px;} .daily_check_list .daily_check_day:nth-child(7)>div:before, .daily_check_list .daily_check_day:nth-child(12)>div:before{width:17px;} .daily_check_list .daily_check_day:nth-child(19):before{width:13px;} .daily_check_list .daily_check_day:nth-child(20):before, .daily_check_list .daily_check_day:nth-child(21) .check_point:before{width:15px;} .daily_check_list .daily_check_day:nth-child(26)>div:before{width:23px;} .daily_check_list .daily_check_day:nth-child(30) .check_point:before{width:19px;} .daily_check_list .daily_check_day:nth-child(6):before, .daily_check_list .daily_check_day:nth-child(27):before{content: ""; position: absolute; z-index: 1; bottom: 15%; width: 65px; height: 65px; margin-top: 0px; border: 4px solid #ededed; border-radius: 100%; left: -10px; right: auto;} .daily_check_list .daily_check_day:nth-child(16):before{content: ""; position: absolute; z-index: 1; bottom: 27%; width: 65px; height: 63px; margin-top: 0px; border: 4px solid #ededed; border-radius: 100%; left: -35px; right: auto;} .daily_check_list .daily_check_day:nth-child(5):after, .daily_check_list .daily_check_day:nth-child(15)>div:after, .daily_check_list .daily_check_day:nth-child(26):after{content:""; background:#fff; width:50px; height:55px; position:absolute; z-index:3; top:50%; left:-20px; z-index:6; margin-top:2px;} .daily_check_list .daily_check_day:nth-child(15)>div:after{content:""; background:#fff; width:45px; height:70px; position:absolute; z-index:3; top:50%; left:-2px; z-index:6; margin-top:2px;} .daily_check_list .daily_check_day:nth-child(11):before{content:""; position: absolute; z-index: 1; bottom: 15%; width: 65px; height: 65px; margin-top: 0; border: 4px solid #ededed; border-radius: 100%; right:-35px; left:auto;} .daily_check_list .daily_check_day:nth-child(10):after{content:""; background:#fff; width:55px; height:70px; position:absolute; z-index:3; top:50%; right:-35px; z-index:6; margin-top:2px;} .daily_check_list .daily_check_day:nth-child(22):before{content:""; position: absolute; z-index: 1; bottom: 32%; width: 60px; height: 60px; margin-top: 0; border: 4px solid #ededed; border-radius: 100%; right:-13px; left:auto;} .daily_check_list .daily_check_day:nth-child(21):after{content:""; background:#fff; width:45px; height:70px; position:absolute; z-index:3; top:50%; right:-47px; z-index:6; margin-top:2px;} .daily_check_list .daily_check_day.on:nth-child(2):before, .daily_check_list .daily_check_day.on:nth-child(3):before, .daily_check_list .daily_check_day.on:nth-child(4):before, .daily_check_list .daily_check_day.on:nth-child(5)>div:before, .daily_check_list .daily_check_day.on:nth-child(12)>div:before, .daily_check_list .daily_check_day.on:nth-child(13):before, .daily_check_list .daily_check_day.on:nth-child(14):before, .daily_check_list .daily_check_day.on:nth-child(15):before, .daily_check_list .daily_check_day.on:nth-child(23)>div:before, .daily_check_list .daily_check_day.on:nth-child(24):before, .daily_check_list .daily_check_day.on:nth-child(25):before, .daily_check_list .daily_check_day.on:nth-child(26)>div:before{background:#f54633;} .daily_check_list .daily_check_day.on:nth-child(7)>div:before, .daily_check_list .daily_check_day.on:nth-child(8):before, .daily_check_list .daily_check_day.on:nth-child(10)>div:before, .daily_check_list .daily_check_day.on:nth-child(17)>div:before, .daily_check_list .daily_check_day.on:nth-child(19):before, .daily_check_list .daily_check_day.on:nth-child(20):before, .daily_check_list .daily_check_day.on:nth-child(28):before, .daily_check_list .daily_check_day.on:nth-child(29):before, .daily_check_list .daily_check_day.on:nth-child(31):before{background:#f54633;} .daily_check_list .daily_check_day.on:nth-child(9) .check_point:before, .daily_check_list .daily_check_day.on:nth-child(21) .check_point:before{background: #f54633;} .daily_check_list .daily_check_day.on:nth-child(18) .check_point:before, .daily_check_list .daily_check_day.on:nth-child(30) .check_point:before{background: #f54633;} .daily_check_list .daily_check_day.on:nth-child(6):before, .daily_check_list .daily_check_day.on:nth-child(27):before{border: 4px solid #f54633;} .daily_check_list .daily_check_day.on:nth-child(16):before{margin-top: 0px; border: 4px solid #f54633;} .daily_check_list .daily_check_day.on:nth-child(11):before{border: 4px solid #f54633;} .daily_check_list .daily_check_day.on:nth-child(22):before{border: 4px solid #f54633;} /* 출석이벤트 팝업 */ #event_daily_pop{position:fixed; width:100%; top:0; bottom:0; left:0; right:0; margin:auto; z-index:99999999; background:url(https://cdn.metoon.co.kr/img/tm_img_back.png);} #event_daily_pop .event_daily_pop_wrap{width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; padding: 20px 0; overflow: hidden; overflow-y: auto;} #event_daily_pop .event_daily_pop_wrap>div{width: 300px; display: block; overflow-y: auto; position: absolute; margin: 0 auto 0; top: 5%; bottom: 0; left: 0; right: 0; /* height: 100%; */} #event_daily_pop .event_daily_pop_wrap .close{position:absolute; right:5px; top:0; bottom:0; width:20px; height:20px; margin:auto;} #event_daily_pop .event_daily_pop_wrap .close img{display:block; width:100%; cursor:pointer;} /* 출석이벤트 팝업 */ /* 출석이벤트 미니팝업 */ .mini_pop_wrap{position:fixed; z-index:999; bottom:80px; right:0px; width: 130px;} .mini_pop_wrap>div{position:relative; width:100%;} .mini_pop_wrap .mini_banner_daily{display:block; width:100%; max-width: 110px;} .mini_pop_wrap .mini_banner_daily>img{width:100%; display:block;} .mini_pop_wrap .mini_banner_close{width:23px; display:block; position:absolute; top:0; right:0; padding: 5px;} .mini_pop_wrap .mini_banner_close>img{width:100%; display:block;} /* 출석이벤트 미니팝업 */ /* 출석이벤트 */ /* 보물을 찾아라 이벤트 */ /* 보물을 찾아라 이벤트 레이어 */ #event_hunt_pop_body{width: 100%; height: 100%; position: fixed; z-index: 99999999; /* display: none; */} #event_hunt_pop_body .layer_wrap{width: 100%; height: 100%; position: relative;} #event_hunt_pop_body .layer_box{width: 95%; max-width:380px; min-height: 230px; background: #fff; border-radius: 5px; overflow: hidden; position: absolute; top: 25%; left: 0; right: 0; margin: auto; z-index: 999; background-size: 100%;} #event_hunt_pop_body .event_hunt_pop_top{background:#404040; text-align: center; position: relative; height: 60px;} #event_hunt_pop_body .event_hunt_pop_top span{position: absolute; top: 15px; left: 0; right: 0; width: 91px; height: 91px; padding: 8px; margin: auto; background:#fff; border-radius: 100px; } #event_hunt_pop_body .event_hunt_pop_top span>img{display:block; width: 100%;/* border: 15px solid #fff;background: #fff; */} #event_hunt_pop_body .layer_box .back_btn{display: block; position: absolute; top: -30px; right: 5px; width: 25px; height: 25px; background: url(https://cdn.metoon.co.kr/img/log_pop_X.png) no-repeat;} #event_hunt_pop_body .layer_box h3{text-align: center; font-size: 2em; font-weight: bold; color: #2c2c2c; padding-top: 42px; position: relative; z-index: 3;} #event_hunt_pop_body .layer_cont{width: 100%;} #event_hunt_pop_body .layer_cont p{width: 100%; text-align: center; font-size: 1.2em; color: #676767; padding-top: 25px; line-height: 1.3;} #event_hunt_pop_body .layer_cont p span{font-weight:bold;} #event_hunt_pop_body .layer_cont .txt_1line{padding-top: 10px;} #event_hunt_pop_body .layer_btn{width: 100%; position: relative; margin-top: 20px; margin-bottom:20px; text-align: center;} #event_hunt_pop_body .layer_btn a{display: inline-block; text-align: center; min-width: 120px; padding: 10px 15px; font-size: 1.3em; color: #fff; font-weight: bold; border-radius: 5px; text-shadow: none;} #event_hunt_pop_body .loading_img{display:block; width:190px; position: absolute; top: 25%; left: 0; right: 0; margin: auto; z-index: 999;} #event_hunt_pop_body .loading_img img{display: block; margin: 0 auto; width: 100%;} #event_hunt_pop_body .loading_img img.shadow{display:block; position:absolute; bottom:27px; left:-1px; right:0; width: 181px;} #event_hunt_pop_body .loading_img p{position: absolute; top: 90%; left: 0; right: 0; display: block; margin-top: -10px; margin: auto; text-align: center; font-size: 19px; color: #fff; font-weight: bold; text-shadow: 2px 1px 1px rgba(0,0,0,0.7);} #event_hunt_pop_body .loading_img p>span{opacity:0; display:inline-block;} #event_hunt_pop_body .loading_img p span.on{-webkit-animation: on1 1s forwards; animation: on1 1s forwards;} @-webkit-keyframes on1 { 30% {opacity:1;transform: translateY(-5px);} 60% {transform: translateY(0px);} 80% {transform: translateY(-5px);} 100% {opacity:1; transform: translateY(0px);} } #event_hunt_pop_body .event_hunt_pop_bg{width:100%; height:100%; background:url(https://cdn.metoon.co.kr/img/tm_img_back.png); position:absolute; top:0; left:0;} /* 보물을 찾아라 이벤트 레이어 */ .icon_event_hunt{width:40px; display:block;} .icon_event_hunt img{width:100%; display:block; cursor:pointer;} /* 보물을 찾아라 이벤트 */ /* 안드로이드 완전판 설명페이지 */ #and_fullver_page .and_fullver_banner{width:100%; background:##3b3b3b;} #and_fullver_page .and_fullver_banner img{width:100%; max-width:600px; margin:0 auto; display:block;} #and_fullver_page .and_fullver_box{max-width:1200px; margin:0 auto; width:100%;} #and_fullver_page .down_btn{display:block; cursor:pointer; width:45%;max-width:220px; font-size:14px; font-weight:bold; text-align:center; padding:15px 0; border-radius:5px; margin:30px auto; } #and_fullver_page .down_btn span{padding-left:25px; position:relative; cursor:pointer;} #and_fullver_page .down_btn span img{width:16px; position:absolute; top:0; bottom:0; left:0; display:block; margin:auto; cursor:pointer;} #and_fullver_page .and_fullver_box h3{width:96%; max-width:600px; margin:0 auto; margin-top:20px; font-size:18px; text-align:center; background:url(https://cdn.metoon.co.kr/mimg/and_fullver_titleline.png) center no-repeat;} #and_fullver_page .and_fullver_box>div{text-align:center;width:96%; margin:0 auto; max-width:400px; margin-top:30px; color:var(--sub2-ft-color); letter-spacing:-0.05em;} #and_fullver_page .and_fullver_box>div h4{font-size:15px; margin-bottom:10px; color:var(--main-ft-fc-color);} #and_fullver_page .and_fullver_box>div p{font-size:13px; line-height: 1.5;} #and_fullver_page .and_fullver_box>div img{margin-top:30px; width:100%; display:block;} #and_fullver_page .and_fullver_notice{width:100%; background:var(--opt-bg-color); padding:20px 0; letter-spacing:-0.05em; margin-top:30px;} #and_fullver_page .and_fullver_notice p{max-width:1200px; width:98%; margin:5px auto; font-size:12px; line-height:1.5;} #and_fullver_page .and_fullver_notice .title{font-size:15px; color:var(--sub-ft-color); margin-bottom:5px;} /* 안드로이드 완전판 설명페이지 */ /* 구글 광고 인트로 */ #content_wrap .google_intro_contain{width:96%; margin:0 auto;max-width:450px;} #content_wrap .google_intro_contain .title{max-width:600px; margin:0px auto 10px; width:100%;} #content_wrap .google_intro_contain .title img{display:block; width:55%; max-width: 190px; margin:5px 0 7px;} #content_wrap #google_webtoon_intro_box .title img{width:57%; max-width:200px;} #content_wrap #google_phototoon_intro_box .title img{width:57%; max-width:200px;} #content_wrap .google_intro_contain ul img{width:100%; display:block; margin:0 auto 5px;} #content_wrap .google_intro_contain ul li{width:100%;} #content_wrap .google_intro_contain .swiper-pagination{position:static; margin-bottom:10px;} #content_wrap .google_intro_contain .swiper-pagination>span{margin:0 3px;} #content_wrap .google_intro_contain .swiper-pagination-bullet{width:8px; height:8px; background: #939393;} #content_wrap .google_intro_contain .swiper-pagination-bullet-active{background:var(--bg-fc-color);} /* 구글 광고 인트로 */ /* 챗뷰어 */ .view_chat_header{display:none;} .view_chat_header.on{display:block;} #view_header .view_control_menu .original_novel_view{width: 100%; position: relative; /* border-top: 1px solid #ddd; */ padding: 7px 0; overflow: hidden; background: #f8f8f8; text-align: center;} #view_header .view_control_menu .original_novel_view a{display: block; text-indent: 0px; color: #404040; font-size: 1.15em; letter-spacing: -0.09em; font-weight: normal;} #view_header .view_control_menu .chat_novel_view{width: 100%; position: relative; border-top: 1px solid #ddd; padding: 7px 0; overflow: hidden; background: #fff; text-align: center;} #view_header .view_control_menu .chat_novel_view a{display: block; text-indent: 0px; color: #676767; font-size: 1.1em; letter-spacing: -0.09em; font-weight: normal;} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap{font-size: 17px; height:100%; background:#ededed !important; padding: 0px; padding-bottom:20px; box-sizing: content-box; overflow:scroll; padding-bottom: 160px; -webkit-tap-highlight-color:rgba(0,0,0,0);} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap>div{height: 100%; overflow: scroll; width: 100%; padding:0 20px; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color:rgba(0,0,0,0);} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap>div>.title{padding-top:15px;} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap div.txt p{line-height: 30px; border: 1px solid #ededed; border-radius:5px; padding:3px 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap div.txt p:last-child{background: #fff; border:1px solid #b9b9b9; opacity:0;} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap div.txt p:nth-child(2){opacity:1;} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap>div img{/* margin-bottom:10px; */display: block; margin: 0 auto;} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap .character_icon{width: 50px; height: 50px; overflow: hidden; position: absolute; display: inline-block; top: -20px; right: 100%; margin-right: 17px;} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap div.txt .character_p{margin-top:60px !important; margin-bottom: 50px !important; border:none !important; padding: 15px !important; background: #fff !important; border-radius: 10px !important; -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important;} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap div.txt .character_p:after{border-top-color: #fff;} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap .character_p .character_name{position: absolute; bottom: 100%; left: 5px; line-height: 1.5; font-size: 13px;} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap .character_icon .icon_cover_white{display:none !important;} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap .character_icon .icon_cover_gray{display:block !important;} #view_content_wrap .view_cont_wrap.view_chat_cont_wrap .character_icon span.icon_name{background: #fff; display: block; max-height: 30px; overflow: hidden; line-height: 33px; text-align: center; padding: 10px 0; font-size:16px;} #view_chat_footer{width:100%; overflow:hidden; border:none; position:fixed; bottom:0; left: 0; z-index: 9;} .chat_next_txt{ position:relative; width:100%; padding:18px 20px; padding-left:80px; text-align:center; background:#ededed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .chat_next_txt a{display:block;width:100%; background:#fff; border:1px solid #ddd; color:var(--bg-fc-color); font-size:18px; padding:50px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);} .chat_next_txt a.next_novel.on{background:var(--bg-fc-color); color:var(--main-ft-color); transition:.3s;} .chat_next_txt span{display:none; content:''; position:absolute; top:18px; bottom:18px; left:20px; right:20px; background:rgba(255, 255, 255, 0.7); border: 1px solid #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #view_chat_footer .original_novel_view{width: 60px; text-align: center; position: absolute; top: 18px; left: 21px;} #view_chat_footer .original_novel_view a{display: block; width: 100%; padding: 16px 5px; background: var(--bg-fc-color); border: 1px solid #ddd; color:var(--main-ft-color); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #view_chat_footer .up_btn{width: 60px; text-align: center; position: absolute; bottom: 18px; left: 21px; background:#fff;} #view_chat_footer .up_btn a{display: block; width: 100%; padding: 0 5px; height:60px; background: url(https://cdn.metoon.co.kr/mimg/page_up_btn.png) no-repeat center;background-size: 15px; border: 1px solid #ddd; color:#767676; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .chat_view_notice .chat_view_notice_btn{text-align:center; width:100%; position: relative; z-index: 99; margin-top: 10%;} .chat_view_notice .chat_view_notice_btn a{display:inline-block; padding:8px 15px; font-size:1.2em; letter-spacing:-0.09em; margin: 0 5px; color:var(--main-ft-color); border-radius:5px;} @media all and (min-width:320px) and (max-width:350px){ .chat_view_notice .chat_view_notice_btn{margin-top:3%;} .chat_view_notice .chat_view_notice_btn a{font-size:1.1em;} } /* 챗뷰어 */ /* 디테일 구매 대여 탭 */ #rent_tab{float:left;border-left:1px solid var(--main-line-color);} #rent_tab li{float:left; width:100px; text-align:center; border-right:1px solid var(--main-line-color);} #rent_tab li a{position:relative;font-size:14px; display:block; /* padding:8px 0; */ line-height:37px; background:#1E1E1E; color:var(--sub-ft-color);} #rent_tab li a.on{background:var(--opt-bg-color); color:var(--main-ft-color); font-weight:500;outline:1px solid var(--main-ft-fc-color);} /* 디테일 구매 대여 탭 */ /* 프리뷰 웹소설/웹툰 버튼 */ #novel_toon_choice{text-align: center; width: 90%; margin: 50px auto; max-width: 700px; overflow: hidden;} #novel_toon_choice a{width: 100%; float: left; display: block; margin-bottom: 20px;} #novel_toon_choice a img{width:100%; display:block; border: 1px solid #000; cursor:pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #novel_toon_choice a span{display: block; cursor: pointer; margin: 20px auto 0; width: 100%; color: #d52b2c; border: 1px solid #d52b2c; padding: 15px 10px; text-align: center; font-size: 15px !important; letter-spacing: -0.02em; font-weight: bold; font-family: 'Nanum Gothic', sans-serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} @media all and (min-width:600px){ #novel_toon_choice{width:100%;} #novel_toon_choice a{width: 48%; margin-bottom: 0px;} #novel_toon_choice a:first-child{margin-right: 4%;} #novel_toon_choice a span{font-size: 14px !important; letter-spacing: -0.05em;} } /* 프리뷰 웹소설/웹툰 버튼 */ /* 무료전환 설명 팝업 */ .free_count_pop_wrap{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999999;} .free_count_pop_wrap>div{width: 96%; max-width:320px; position: absolute; top: 50%; margin: auto; left: 0; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);} .free_count_pop_wrap>div img{width:100%; display:block;} .free_count_pop_wrap>div a{font-size: 13px; font-weight: bold; width:100px; text-align:center; padding: 10px 0px; display: block; margin:20px auto 0; border-radius: 5px; cursor:pointer;} .free_count_pop_wrap .free_count_pop_bg{display: block; width: 100%; height: 100%; background:rgba(0, 0, 0, 0.6);} @media screen and (orientation:landscape) and (max-width:600px){ .free_count_pop_wrap>div{width: 50%;} } /* 무료전환 설명 팝업 */ /* 구독하기 팝업 */ li.zzim_li{position:relative;} .zzim_pop{width: 144px; position:absolute; bottom:100%; left: 50%; margin:0 auto 10px; transform: translateX(-50%);} .zzim_pop>div{position:relative;} .zzim_pop>div img{display:block;} .zzim_pop>div>p{position:absolute; bottom:0; left:0; right:0; margin:0 auto 23px; font-size: 13px; letter-spacing: -0.03em; color: #8da6c2; line-height: 1.3; text-align: center;} .zzim_pop>div .close{width: 20px !important; border:none !important; height: auto !important; padding:0 !important; position:absolute; top:0; left:0; transform: translate(-20%, -30%); background:none !important;} .zzim_pop>div .close img{cursor:pointer;} /* 구독하기 팝업 */ /* 월 자동결제 안내 팝업 */ #selfclearing_layer_body{width:100%; height:100%; position:fixed; z-index:99999999; top:0; left:0; overflow-y:scroll;} #selfclearing_layer_body .layer_wrap{margin:0px auto 20px; display: block; position: relative; z-index: 99; width:95%; max-width:350px; height:auto; top:15%;} #selfclearing_layer_body .layer_bg{width:100%; height:100%; background:url(https://cdn.metoon.co.kr/img/tm_img_back.png); position:absolute; top:0; left:0;} #selfclearing_layer_body .cont{display:block;} #selfclearing_layer_body .close{position:absolute; top:5px; right:5px; display:block; width:23px;} #selfclearing_layer_body img{display:block; cursor:pointer; width:100%;} #selfclearing_layer_body .txt{position:absolute; top:30%; left:0; right:0; width:90%; font-size:14px; letter-spacing:-0.09em; color:#404040; margin:auto; text-align: center; line-height:1.4;} #selfclearing_layer_body .txt p>span{max-width: 200px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; padding-right: 3px;} #selfclearing_layer_body .txt>span{margin-top:10px; display: block;} #selfclearing_layer_body .close_btn{margin:auto; display:block; position:absolute; bottom:8%; left:0; right:0; max-width: 190px; cursor: pointer; width: 56%;} @media all and (max-width:359px){ #selfclearing_layer_body .txt{font-size: 13px; } } /* 월 자동결제 안내 팝업 */ /* 구글 리타게팅 전환소스 영역 제거 */ iframe[name='google_conversion_frame']{height:0 !important;width:0 !important;line-height:0 !important;font-size:0 !important;margin-top:-13px;float:left;} /* 구글 리타게팅 전환소스 영역 제거 */ /*핸드폰로그인 아이콘*/ .join_mail { position:relative; top: -1px; right:10px; vertical-align:middle;} .join_phone { position:relative; top: -2px; right:10px; vertical-align:middle;} /*개인정보취급방침 추가 테이블*/ .agree_cont_table{padding:0 10px;margin-top:5px;} .agree_cont_table table{width:100%;border-collapse:collapse; border:1px solid var(--main-line-color); border-bottom:0; border-left:0; margin-bottom:0px;} .agree_cont_table table th, .agree_cont_table table td{border-bottom:1px solid var(--main-line-color); height:20px; border-left:1px solid var(--main-line-color); font-size:12px; line-height:18px; padding:10px 5px;} .agree_cont_table table th{font-weight:500;background:var(--opt-bg-color);} .agree_cont_table table thead th{background:var(--opt-bg-color);} .agree_cont_table table td{padding:10px;color:var(--sub2-ft-color);} .agree_cont span.point_blue_color, .info_cont span.point_blue_color{color:#5b96cf;} /* 20180223 detail_ebook페이지 수정 */ #ebook_banner{width:100%; display:none; overflow:hidden;} #ebook_banner .content_tag{top:5px; right:5px;} #ebook_banner ul{width:100%; box-sizing:border-box; padding:10px 0; border-top:1px solid var(--main-line-color); border-bottom:1px solid var(--main-line-color);} #ebook_banner ul li{position:relative; float:left; width:100px; margin:0 5px; font-size:12px; box-sizing:border-box;} #ebook_banner ul li a{display:block; width:100%;} #ebook_banner ul li a .thumb_box{position:relative; width:100%; height:108px; overflow:hidden; box-sizing:border-box; -webkit-box-sizing:border-box; border:1px solid var(--main-line-color); transition:border .3s ease-in-out; -webkit-transition:border .3s ease-in-out;} #ebook_banner ul li.slick-center a .thumb_box{border:1px solid #ed1c24;} #ebook_banner ul li a .thumb_box .thumb_tag{position:absolute; top:3px; left:3px; display:block; width:25px; height:14px; border-radius:3px; background-color:#FFFFFF; text-align:center; line-height:14px; font-size:11px; font-weight:normal;} #ebook_banner ul li a .thumb_box .tag_webtoon{border:1px solid #fc5863; color:#fc5863;} #ebook_banner ul li a .thumb_box img{width:100%;} #ebook_banner ul li a > p{white-space:nowrap; overflow:hidden; max-width:100%; text-overflow:ellipsis; box-sizing:border-box; -webkit-box-sizing:border-box; padding:4px 0 0; text-align:center; font-size:1em;} #ebook_banner ul li a > p .tag_box{display:inline-block; line-height:1; vertical-align:top;} #ebook_banner ul li a > p .tag_box span{display:block; font-size:10px; width:14px; height:14px; line-height:14px; border-radius:3px; text-align:center;} #ebook_banner ul li a > p .tag_box .best_tag_s{background:#388afd; color:var(--main-ft-color);} #ebook_banner ul li a > p .tag_box .hot_tag_s{background:#e61e3f; color:var(--main-ft-color);} #ebook_banner ul li a > p .tag_box .new_tag_s{background:#721de3; color:var(--main-ft-color);} #m_sub_ebook .ebook_sale_txt{position:relative; width:94%; margin:0 auto; padding:5px 0 8px; z-index:100;} #m_sub_ebook .ebook_sale_txt a{color:#4a4a4a; text-decoration:underline;} #ebooL_content { width:100%; float:left; overflow:hidden; background:#f5f5f5; } #ebook_content_wrap { width:100%; padding-top:54px; overflow:hidden; } #ebook_detail_wrap { width:100%; border-bottom:1px solid #ddd; /* background:#fff; */ float:left; } #ebook_detail_banner { width:100%; } #ebook_detail_banner:after { content:""; display:block; clear:both; } #ebook_detail_visual { position:relative; width:100%; background:#fff; border-bottom:1px solid #ddd; display:-webkit-box;display:-webkit-flex;display:flex;} #ebook_detail_visual:after{content:""; display:block; clear:both;} .ebook_detail_imgbox { position:relative; width:120px; margin-left:6px; float:left; -webkit-align-self:center;align-self:center;} .ebook_mark_box { position:absolute; z-index:4; bottom:7.329%; right:8.571%; } .ebook_new_mark { display:inline-block; font-size:0.9em; font-weight:bold; background:#ff8125; border-radius:3px; color:var(--main-ft-color); padding:3px; float:left; margin-right:2.142%; } .ebook_up_mark { display:inline-block; font-size:0.9em; font-weight:bold; background:var(--bg-fc-color); border-radius:3px; color:var(--main-ft-color); padding:3px; float:left; border-radius:20px; } .ebook_detail_imgcover { position:relative; width:100%; background:url("https://cdn.metoon.co.kr/mimg/detail_mobile_eb.png?1") no-repeat 0 center; padding-bottom:136.428%; background-size:100% 100%; z-index:3; float:left; } .m_ebook_img { width:85.571%; max-height:87.967%; padding:10px 9px; overflow:hidden; } .m_ebook_img img { width:100%; vertical-align:top; box-shadow:2px 2px 4px 0px rgba(0, 0, 0, .3); } .ebook_detail_txtbox .hash{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.2;max-height:38px;font-size:0;overflow:hidden;text-overflow:ellipsis;margin:0 -2px;} .ebook_detail_txtbox .hash p{display:inline-block;font-size:12px;color:red;padding:2px;margin:0;} .ebook_detail_txtbox { position:relative; padding:10px 15px 10px 6px; float:left; width:calc(100% - 126px); } .ebook_detail_txtbox .zzim_btn{position:absolute;top:20px;right:15px;z-index:1;} .ebook_detail_txtbox .zzim_btn > a{display:block; color:#999; text-align:center; font-size:0; letter-spacing:-0.05em;} .ebook_detail_txtbox .zzim_btn > a span{display:inline-block; vertical-align:middle; font-size:11px;} .ebook_detail_txtbox .zzim_btn > a .zzim_ic{width:12px;height:12px;background-image:url(https://cdn.metoon.co.kr/mimg/thumb_up_wh.svg); background-repeat:no-repeat; background-position:center 0; background-size:12px; margin:0 3px 2px 0;} .ebook_detail_txtbox .zzim_btn .heart_on{color:var(--bg-fc-color);} .ebook_detail_txtbox .zzim_btn .heart_on .zzim_ic{background-image:url(https://cdn.metoon.co.kr/mimg/thumb_up_red.svg);} .ebook_detail_txtbox p { margin:5px 0; color:#676767; font-size:1em; } .ebook_detail_txtbox .detail_isbn{display:block;line-height:1;vertical-align:top;font-size:10px;color:#999;margin:0;} .ebook_detail_txtbox .ebook_genre_mark { color:#ea6161; } .ebook_detail_txtbox .ebook_up_day { display:inline-block; } .ebook_detail_txtbox .m_title { font-size:1.2em; font-weight:bold; color:#2c2c2c; letter-spacing:-0.09em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:calc(100% - 65px); line-height:1; margin-bottom:8px; } .ebook_detail_txtbox .m_title span { position:relative; display:inline-block; padding:0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:100%; width:auto; } .ebook_detail_txtbox .ed_tag_cont p{display:inline-block; margin:0; font-size:0.9em; letter-spacing:-0.05em;} .ebook_detail_txtbox .ed_tag_cont p + p:before{content:""; display:inline-block; width:1px; height:10px; background:#ddd; margin:0 5px;} .ebook_detail_txtbox .ed_tag_cont .hits{color:#8da6c2;} .ebook_detail_txtbox .m_detail_nobeltxt { width:100%; font-size:1em; letter-spacing:-0.05em; padding-top:5px; margin:2px 0 0; } .ebook_ellipsis-all { text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-wrap:break-word; line-height:1.4; /* height:5.6em; */ } .ebook_detail_txtbox .summary_btn_cont{text-align:right;margin:2px 0 5px;line-height:1;} .ebook_detail_txtbox .summary_btn_cont .summary_btn{font-size:12px;color:#676767;} .ebook_detail_nav_ul { width:100%; height:36px; text-align:center; background:#fff; border-bottom:1px solid #ddd; float:left; } /*.ebook_detail_nav_ul li { float:left; width:33.3%; height:100%; position:relative; border-top:1px solid #ddd; }*/ .ebook_detail_nav_ul li { float:left; width:49.9%; height:100%; position:relative; border-top:1px solid #ddd; } .ebook_detail_nav_ul li a { display:block; width:100%; height:100%; letter-spacing:-0.09em; color:#767676; padding:10px 0; box-sizing:border-box; } .ebook_detail_nav_ul li .first { color:var(--bg-fc-color); } .ebook_detail_nav_ul > li:nth-of-type(2) { border-left:1px solid #ddd; border-right:1px solid #ddd; box-sizing:border-box; } .ebook_detail_nav_ul li .heart { color:var(--bg-fc-color); } .ebook_detail_nav_ul li .heart_on {color:var(--bg-fc-color);} .ebook_detail_nav_ul li .heart span { padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png) no-repeat 0 center; background-size:17px; } .ebook_detail_nav_ul li .heart_on span{padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0% center; background-size:17px;} .ebook_detail_nav_ul li .sns span { padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/sns.png) no-repeat 0 center; background-size:17px; } /* 공유 추가 */ .ebook_sns_box_wrap{display:none; position:absolute; width:170px; height:50px; bottom: 100%; margin-bottom:5px; right:5px; background:rgba(255, 255, 255, 0.8); border: 1px solid #ddd; border-radius: 5px; padding: 0 5px;} /* .ebook_sns_box3 { width:130px; } */ .ebook_sns_box_wrap .ebook_sns_list{ height:100%;} .ebook_sns_box_wrap .ebook_sns_list li{width:23%; margin:0 1%; height:100%; position:relative;} .ebook_sns_box_wrap .ebook_sns_list li a{width:30px; height:30px; position:absolute; top:0; bottom:0%; left:0; right:0; margin:auto; display:block; border:none; text-indent:-99999999em; overflow:hidden; border-radius:25px;} .ebook_sns_box_wrap .ebook_sns_list .tw a{background:url(https://cdn.metoon.co.kr/mimg/tw_icon.png) no-repeat center; background-size:30px; border:none;} .ebook_sns_box_wrap .ebook_sns_list .fb a{background:url(https://cdn.metoon.co.kr/mimg/fb_icon.png) no-repeat center; background-size:30px;} .ebook_sns_box_wrap .ebook_sns_list .kakao a{padding: 0; background:url(https://cdn.metoon.co.kr/mimg/kakaotalk_icon.png) no-repeat center; background-size:30px;} .ebook_sns_box_wrap .ebook_sns_list .kakao img{width:30px; height: 30px; border-radius:25px; position:absolute; top:0; bottom:0%; left:0; right:0; margin:auto;} .ebook_sns_box_wrap .ebook_sns_list .share a{background:url(https://cdn.metoon.co.kr/mimg/share_icon.png) no-repeat center; background-size:30px;} /* 공유 추가 END */ .ebook_detail_next { position:relative; width:100%; padding:7px 0; z-index:5; background:#f5f5f5; } .ebook_detail_next a { display:block; width:94%; margin:0 auto; text-align:center; border:1px solid var(--bg-fc-color); border-radius:6px; padding:9px 0; font-size:1.1em; font-weight:bold; background-color:#FFFFFF; color:var(--bg-fc-color);} .ebook_detail_next .next_view_title { display:inline-block; max-width:60%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; vertical-align:bottom; } .ebook_detail_title_box { padding:0 10px 0; background:#f5f5f5; } .ebook_detail_title_box > div:not(.ebook_detail_radio):after{content:"";display:block;clear:both;} .ebook_cont_title { font-size:1.2em; border-bottom:2px solid #ddd; padding-bottom:6px; } /* 20180222 대여/구매 추가 */ .ebook_detail_radio {display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center; -webkit-box-pack:justify;justify-content:space-between; position:relative; width:100%; overflow:hidden; margin:0 auto; } .ebook_detail_radio #ebook_rent_tab { float:left; } .ebook_detail_radio #ebook_rent_tab li { float:left; width:100px; text-align:center; border-right:1px solid #ddd; } .ebook_detail_radio #ebook_rent_tab li a { display:block; font-size:14px; line-height:35px; } .ebook_detail_radio #ebook_rent_tab li a.on { background:#fff; color:#404040; font-weight:bold; } .ebook_detail_radio fieldset { float:right; display:block;width:100%;-webkit-box-flex:1;-webkit-flex:1;flex:1; } .ebook_detail_radio fieldset .contents_sort{position:relative; font-size:0;float:right;padding:10px 0;} .ebook_detail_radio fieldset input { position:absolute; top:0; left:0; opacity:0; z-index:-1;} .ebook_detail_radio fieldset label {display:inline-block; font-size:13px; color:#999;} .ebook_detail_radio fieldset .contents_sort .bar{display:inline-block; width:1px; height:10px; background:#c1c1c1; margin:0 7px;} .ebook_detail_cont { position:relative; padding:0 10px 10px; background:#f5f5f5; overflow:hidden; } @media all and (max-width:350px){ .ebook_detail_radio .edr_span{font-size:11px;} .ebook_detail_radio fieldset label{font-size:11px;} .ebook_detail_radio fieldset .contents_sort .bar{margin:0 5px;} } /* 20180222 대여/구매 추가 END*/ .ebook_detail_radio fieldset .contents_sort .chkselect{color:var(--bg-fc-color);}/* white 버전 */ .ebook_detail_list { border-top:1px solid #ddd; overflow:hidden; } .ebook_detail_list li { position:relative; float:left; border-bottom:1px solid #ddd; width:100%; } .ebook_detail_list li a { display:block; overflow:hidden;} .ebook_detail_list li .m_noimg_list_box { display:block; float:left; width:69%; } .ebook_detail_list p { margin:10px 0; font-size:1.1em; font-weight:bold; letter-spacing:-0.09em; color:#545454; padding-bottom:5px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:95%; } .ebook_detail_list .m_nobel_title { width:100%;height:36px;line-height:36px; float:left; color:#2b2b2b; font-size:1em; padding:0; margin:0; } .ebook_detail_list .m_nobel_title .title_area_wrap{display:inline-block;max-width:calc(100% - 90px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:middle;padding-right:5px;-webkit-box-sizing:border-box;box-sizing:border-box;} .ebook_detail_list .m_nobel_title > span:only-child{max-width:100%;} .ebook_detail_list .m_nobel_title .free_coupon_txt{display:inline-block;vertical-align:middle;font-size:11px;height:18px;line-height:19px;padding:0 5px;background:#f56e74;border-radius:3px;color:var(--main-ft-color);} .ebook_detail_list .m_nobel_title .txt_recent_icon{font-size: 10px; letter-spacing: -0.09em; color: #fff; padding: 1px 3px 0; border-radius: 3px; margin: 1px 3px 0 3px; font-weight: bold; display: inline-block; text-align: center; vertical-align: text-top; background: #852cfa;line-height: normal;} .ebook_detail_list .m_nobel_title img{display:inline-block !important; margin-right:3px; width:10px !important;} .ebook_detail_list p .sub_title { display:inline-block; max-width:90%; padding-right:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ebook_detail_list li .m_noimg_btn { position:absolute; display:block; width:30%; top:50%; right:1%; /* padding:11px 0; */ border-radius:5px; text-align:center; max-width:100px; border-radius:5px; float:right; font-size:1em; letter-spacing:-0.05em; color:#424242;/* margin:6px auto 0; */ cursor:pointer;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%); } .ebook_detail_list li .m_noimg_btn > span { float:right; display:block; padding:8px 0; border-radius:5px; width:100%; text-align:center; font-weight:normal; box-sizing:border-box; } .ebook_detail_list li .list_btn span{word-break:keep-all;} .ebook_detail_list li .m_noimg_btn .free_btn span { background:url(https://cdn.metoon.co.kr/mimg/detail_free_icon.png) no-repeat 0 center; background-size:15px; padding:2px 0; padding-left:20px; } .ebook_detail_list li .txt_up_icon{font-size: 10px; letter-spacing: -0.09em; color: #fff; padding: 1px 3px 0; border-radius: 3px; margin: 0px 3px 0 3px; font-weight: bold; display: inline-block; text-align: center; vertical-align: text-top; background: #2c5faf;line-height: normal;} .ebook_detail_list li .coin_btn span{background:url(https://cdn.metoon.co.kr/mimg/detail_coin_icon.png) no-repeat 0 center; padding:2px 0; padding-left:18px; background-size:15px;} #ebook_detail_wrap .ebook_detail_list_more { position:relative; float:left; width:100%; background:#f5f5f5; padding-bottom:15px; } #ebook_detail_wrap .ebook_detail_list_more a { position:relative; display:block; width:96%; text-align:center; font-size:1.1em; color:#d52b2c; background:#fff; padding:9px 0 8px; border:1px solid #d52b2c; border-radius:5px; margin:5px auto; } #ebook_detail_wrap .ebook_detail_list_more a img { display:inline-block; width:16px; position:absolute; top:0; bottom:0; margin:auto; padding-left:10px; } #ebook_detail_wrap .ebook_detail_list_more p { display:inline-block; font-weight:bold; margin-left:-3%; } #ebook_detail_wrap .bottom_detail_nav { display:none; position:fixed; bottom:0; left:0; width:100%; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd; height:36px; z-index:999; } /*#ebook_detail_wrap .bottom_detail_nav li { position:relative; display:inline-block; width:33.3%; float:left; height:100%; text-align:center; }*/ #ebook_detail_wrap .bottom_detail_nav li { position:relative; display:inline-block; width:49.9%; float:left; height:100%; text-align:center; } #ebook_detail_wrap .bottom_detail_nav li > a { display:block; width:100%; height:100%; border-left:1px solid #ddd; padding:10px 0; box-sizing:border-box; color:#767676; letter-spacing:-0.09em; } #ebook_detail_wrap .bottom_detail_nav li .first { color:var(--bg-fc-color); } #ebook_detail_wrap .bottom_detail_nav li .heart { color:var(--bg-fc-color); } #ebook_detail_wrap .bottom_detail_nav li .heart span { padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart.png) no-repeat 0 center; background-size:17px; } #ebook_detail_wrap .bottom_detail_nav li .heart_on span{padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0% center; background-size:17px;} .ebook_detail_list li .m_noimg_btn.memvip_btn .list_btn span{position:relative;} .ebook_detail_list li .m_noimg_btn.memvip_btn .list_btn span:after{content:"";display:block;position:absolute;top:50%;left:-5%;width:110%;height:2px;background:var(--bg-fc-color);} @media all and (min-width:601px) and (max-width:649px) { .ebook_detail_list li .m_noimg_btn > span { font-size:0.88em; } } @media (min-width:601px) { .ebook_detail_list li { width:48.777%; margin:0; padding:5px 1%; display:inline-block; } .ebook_detail_list li:nth-child(odd) { border-right:1px solid #ddd; box-sizing:border-box; } .ebook_detail_list p { margin:15px 0 10px; } .ebook_detail_list li .m_noimg_btn { right:2%; } } @media (max-width:360px) { .ebook_detail_txtbox p { margin:3px 0; } .ebook_detail_txtbox .m_detail_nobeltxt{margin:3px 0 0;} .ebook_detail_txtbox .summary_btn_cont{margin:2px 0;} .ebook_detail_txtbox .detail_isbn{padding-top:5px;} } @media (max-width:340px) { .ebook_detail_imgbox{width:100px;margin-left:0;} .ebook_detail_txtbox{width:calc(100% - 100px);padding-right:10px;} .ebook_ellipsis-all{-webkit-line-clamp:2;} .ebook_detail_list li .m_noimg_btn > span { font-size:0.9em; } } @media (max-width:320px) { #ebook_content_wrap { min-width:297px; } .ebook_detail_txtbox .m_detail_nobeltxt { max-height:69px; font-size:0.9em; } .ebook_detail_txtbox .summary_btn_cont .summary_btn{font-size:0.9em;} } /* 20180223 detail_ebook페이지 수정 END*/ /* 20180226 ebook 모바일페이지 수정 */ #m_content_wrap { padding-top:86px; width:100%; overflow:hidden; } #m_sub_ebook { padding-top:2px; overflow:hidden; } /* 서브장르 */ #m_sub_ebook .m_sub_ebook_tab_new1 { width:100%; margin:0 auto; border-bottom:1px solid #ddd; box-sizing:content-box; } #m_sub_ebook .m_sub_ebook_tab_new1 ul { width:100%; background:#fff; overflow:hidden; } #m_sub_ebook .m_sub_ebook_tab_new1 ul li { float:left; width:25%; text-align:center; box-sizing:border-box; } #m_sub_ebook .m_sub_ebook_tab_new1 ul li a { display:block; padding:10px 0 6px; font-size:15px; letter-spacing:-1px; font-weight:normal; border-bottom:2px solid #fff; color:#4e4e4e; } #m_sub_ebook .m_sub_ebook_tab_new1 ul li a.m_sub_font-red { color:var(--bg-fc-color); border-bottom:2px solid var(--bg-fc-color); } #m_sub_ebook .m_sub_ebook_tab_new1 ul li a span{position:relative; width:auto; height:auto;} #m_sub_ebook .m_sub_ebook_tab_new1 ul li a .icon_19_patch{width:16px; vertical-align:middle; margin-left:3px; margin-top:-3px;} /* 장르 셀렉트박스 */ /*#m_sub_ebook .m_ebook_radio { width:96%; margin:5px auto 7px; overflow:hidden; }*/ #m_sub_ebook .m_ebook_radio { width:96%; margin:6px auto 6px; overflow:hidden; } #m_sub_ebook .m_ebook_radio #genretab_box { float:left; width:120px; } #m_sub_ebook .m_ebook_radio #genretab_box #SetCate { width:100%; height:30px; border:1px solid #ddd; border-radius:0; font-size:13px; line-height:normal; color:#676767; padding:2px 3px; padding-left:7px; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ic_select.png) no-repeat 95% 70%,#fff; background-size:8px; -webkit-appearance:none; } /* 목록개수 셀렉트박스 */ #m_sub_ebook .m_ebook_radio #m_ebook_list_tab { float:right; width:85px; } #m_sub_ebook .m_ebook_radio #m_ebook_list_tab #SetList { width:100%; height:30px; border:1px solid #ddd; border-radius:0; font-size:13px; line-height:normal; color:#676767; padding:2px 3px; padding-left:7px; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ic_select.png) no-repeat 92% 70%,#fff; background-size:8px; -webkit-appearance:none; } /* 이북 스위치버튼 */ #m_sub_ebook .m_ebook_radio .m_switch_button { width:30px; height:30px; border:1px solid #ddd; text-align:center; float:right; margin-left:5px; background:url(https://cdn.metoon.co.kr/mimg/switch_view_3.png) no-repeat center, #fff; background-size:20px; cursor:pointer; text-indent:-9999px; } #m_sub_ebook .m_ebook_radio .m_switch_button.view_middle { background-image:url(https://cdn.metoon.co.kr/mimg/switch_view_1.png); } #m_sub_ebook .m_ebook_radio .m_switch_button.view_big { background-image:url(https://cdn.metoon.co.kr/mimg/switch_view_2.png); } /* 정렬순서 */ #m_sub_ebook .m_ebook_radio fieldset#orderby_box { float:left; text-align:right; margin-left:5px; } #m_sub_ebook .m_ebook_radio select#orderby { height:30px; border:1px solid #ddd; border-radius:0; font-size:13px; line-height:normal; color:#676767; padding:2px 7px; padding-right:15px; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ic_select.png) no-repeat 92% 70%,#fff; background-size:8px; -webkit-appearance:none; } /* 웹소설리스트 small */ .m_ebook_cont .m_ebook_list li.ebook_list_small { min-width:304px; width:100%; height:84px; background:#fff; border:1px solid #ddd; margin-bottom:5px; padding-left:16px; box-sizing:border-box; } /* 책이미지 small */ li.ebook_list_small .ebook_small_box { position:relative; float:left; } li.ebook_list_small .ebook_small_box .ebook_small_imgcover { position:relative; z-index:2; width:58px; height:68px; background:url(https://cdn.metoon.co.kr/mimg/view3_eb.png?1) no-repeat 0 center; background-size:58px 68px; margin-top:8px; } li.ebook_list_small .ebook_small_box .ebook_small_imgbox { position:absolute; top:11px; left:3px; width:41px; height:61px; line-height:61px; overflow:hidden; } li.ebook_list_small .ebook_small_box .ebook_small_imgbox img { width:100%; } li.ebook_list_small span.adult_mark { position:absolute; bottom:10%; right:30%; display:block; width:17px; height:17px; z-index:6; } li.ebook_list_small span.adult_mark img { width:100%; } /* 텍스트박스 small */ li.ebook_list_small .ebook_small_textbox { color:#222222; width:83.21%; height:82px; padding:10px 20px 9px 3px; float:right; box-sizing:border-box; } li.ebook_list_small .ebook_small_textbox dt { font-size:1.15em; line-height:1; margin-top:5px; margin-bottom:5px; width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } li.ebook_list_small .ebook_small_textbox dd.ebook_genre_writer { width:100%; text-overflow:ellipsis; white-space:nowrap; line-height:1.1; overflow:hidden; font-size:0.92em; letter-spacing:-0.1em; } li.ebook_list_small .ebook_small_textbox dd.ebook_genre_writer .ebook_small_writer { color:#d52b2c; } li.ebook_list_small .ebook_small_textbox dd.ebook_small_summary { width:100%; font-size:0.92em; margin-top:7px; letter-spacing:-0.1em; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; height:1.3em; } /* 최근본작품 small */ .m_ebook_cont .ebook_small_lately { min-width:304px; position:relative; width:100%; height:84px; background:#fff; border:1px solid #c70304; margin-bottom:5px; padding-left:16px; box-sizing:border-box; } .m_ebook_cont .ebook_small_lately .view_lately{position:absolute; top:0; left:0; width:70px; height:70px; z-index:3;} .ebook_small_lately .ebook_small_box { position:relative; float:left; } .ebook_small_lately .ebook_small_box .ebook_small_imgcover { position:relative; z-index:2; width:58px; height:68px; background:url(https://cdn.metoon.co.kr/mimg/view3_eb.png?1) no-repeat 0 center; background-size:58px 68px; margin-top:8px; } .ebook_small_lately .ebook_small_box .ebook_small_imgbox { position:absolute; top:11px; left:3px; width:41px; height:61px; line-height:61px; overflow:hidden; } .ebook_small_lately .ebook_small_box .ebook_small_imgbox img { width:100%; } .ebook_small_lately span.adult_mark { position:absolute; bottom:10%; right:30%; display:block; width:20px; height:20px; z-index:6; } .ebook_small_lately span.adult_mark img { width:100%; } .ebook_small_lately .ebook_small_textbox { color:#222222; width:83.21%; height:82px; padding:10px 20px 9px 3px; float:right; box-sizing:border-box; } .ebook_small_lately .ebook_small_textbox dt { font-size:1.15em; line-height:1; margin-top:5px; margin-bottom:5px; width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .ebook_small_lately .ebook_small_textbox dd.ebook_genre_writer { width:100%; text-overflow:ellipsis; white-space:nowrap; line-height:1.1; overflow:hidden; font-size:0.92em; letter-spacing:-0.1em; } .ebook_small_lately .ebook_small_textbox dd.ebook_genre_writer .ebook_small_writer { color:#d52b2c; } .ebook_small_lately .ebook_small_textbox dd.ebook_small_summary { width:100%; font-size:0.92em; margin-top:7px; letter-spacing:-0.1em; text-overflow:ellipsis; overflow:hidden; height:1.3em; white-space:nowrap; } /* .lately_cover { position:relative; overflow:hidden; width:100%; margin-bottom:5px; } .lately_cover .lately_box_small { position:absolute; width:100%; top:0; left:0; text-align:center; color:var(--main-ft-color); background:#c70304; font-size:0.92em; height:22px; line-height:22px; z-index:3; } .lately_cover .lately_toggle span { position:absolute; top:50%; margin-top:-4px; right:16px; display:block; width:14px; height:8px; background:url(/img/lately_arrow_up.png) no-repeat 0 center; background-size:14px 8px; } .lately_cover .lately_toggle span.down { background-image:url(/img/lately_arrow_down.png); } */ /* small 리스트 1~3위 */ .m_ebook_cont .ebook_small_rank { min-width:304px; position:relative; width:100%; height:84px; background:#fff; border:1px solid #e52000; margin-bottom:5px; padding-left:16px; box-sizing:border-box; } .ebook_small_rank .ebook_small_rankimg { position:absolute; top:0; left:0; width:49px; height:49px; z-index:4; } .ebook_small_rank .ebook_re_rank{display:block; position:absolute; top:0; left:0; width:25px; padding:4px 0 3px; text-align:center; font-size:12px; font-weight:bold; color:var(--main-ft-color); background-color:#ed1c24; z-index:4;} .ebook_small_rank .ebook_small_box { position:relative; float:left; } .ebook_small_rank .ebook_small_box .ebook_small_imgcover { position:relative; z-index:2; width:58px; height:68px; background:url(https://cdn.metoon.co.kr/mimg/view3_eb.png?1) no-repeat 0 center; background-size:58px 68px; margin-top:8px; } .ebook_small_rank .ebook_small_box .ebook_small_imgbox { position:absolute; top:11px; left:3px; width:41px; height:61px; line-height:61px; overflow:hidden; } .ebook_small_rank .ebook_small_box .ebook_small_imgbox img { width:100%; } .ebook_small_rank span.adult_mark { position:absolute; bottom:10%; right:30%; display:block; width:17px; height:17px; z-index:6; } .ebook_small_rank span.adult_mark img { width:100%; } .ebook_small_rank .ebook_small_textbox { color:#222222; width:83.21%; height:82px; padding:10px 20px 9px 3px; float:right; box-sizing:border-box; } .ebook_small_rank .ebook_small_textbox dt { font-size:1.15em; line-height:1; margin-top:5px; margin-bottom:5px; width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .ebook_small_rank .ebook_small_textbox dd.ebook_genre_writer { width:100%; text-overflow:ellipsis; white-space:nowrap; line-height:1.1; overflow:hidden; font-size:0.92em; letter-spacing:-0.1em; } .ebook_small_rank .ebook_small_textbox dd.ebook_genre_writer .ebook_small_writer { color:#d52b2c; } .ebook_small_rank .ebook_small_textbox dd.ebook_small_summary { width:100%; font-size:0.92em; margin-top:7px; letter-spacing:-0.1em; text-overflow:ellipsis; overflow:hidden; height:1.3em; white-space:nowrap; } @media(min-width:430px){ li.ebook_list_small .ebook_small_textbox{ float:left; } .ebook_small_lately .ebook_small_textbox { float:left; } .ebook_small_rank .ebook_small_textbox { float:left; } } @media (max-width:379px){ li.ebook_list_small .ebook_small_textbox { width:81%; } .ebook_small_lately .ebook_small_textbox { width:81%; } .ebook_small_rank .ebook_small_textbox { width:81%; } } @media all and (min-width:320px) and (max-width:360px){ #m_sub_ebook .m_sub_ebook_tab_new1 ul li a{font-size:14px;} } @media (max-width:340px){ #m_sub_ebook .m_ebook_radio #genretab_box { width:115px; } #m_sub_ebook .m_ebook_radio #genretab_box #SetCate { padding-left:3px; } #m_sub_ebook .m_ebook_radio select#orderby{padding-left:3px;} #m_sub_ebook .m_ebook_radio #m_ebook_list_tab { width:80px; } #m_sub_ebook .m_ebook_radio #m_ebook_list_tab #SetList { padding-left:3px; } li.ebook_list_small .ebook_small_textbox { width:80%; } .ebook_small_lately .ebook_small_textbox { width:80%; } .ebook_small_rank .ebook_small_textbox { width:80%; } } @media (max-width:323px){ li.ebook_list_small .ebook_small_textbox { width:79%; } .ebook_small_rank .ebook_small_textbox { width:79%; } .ebook_small_lately .ebook_small_textbox { width:79%; } } /* 웹소설리스트 middle */ #m_sub_ebook .m_ebook_cont { width:100%; overflow:hidden; padding:0 8px 0; background:#f5f5f5; } #m_sub_ebook .m_ebook_cont:after{content:""; display:block; clear:both;} #m_sub_ebook .m_ebook_cont .m_ebook_list { width:100%; } #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle { width:49.3%; min-width:267px; float:left; margin-bottom:12px; overflow:hidden; background:#fff; } #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle:nth-child(even) { margin-left:1.074%; } #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle a { position:relative; display:block; width:100%; border:1px solid #ddd; box-sizing:border-box; overflow:hidden; } /* 책이미지 middle */ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_imgbox { position:relative; float:left; max-width:152px; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_imgbox .m_ebook_cover { display:block; position:relative; width:100%; z-index:4; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_imgbox .m_ebook_img { display:block; position:absolute; top:11px; left:12px; z-index:3; width:78.571%; height:144.5px; overflow:hidden; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_imgbox .m_ebook_img > img { width:100%; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_imgbox .adult_mark { position:absolute; bottom:15.333%; right:20.375%; display:inline-block; width:18px; z-index:5; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_imgbox .adult_mark img { width:100%; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_imgbox .ebook_middle_rankimg { position:absolute; top:5px; right:20px; z-index:5; width:30px; } /* 텍스트박스 middle */ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { position:relative; float:left; width:80%; height:180px; padding:12px 3.266% 14px 1.256%; box-sizing:border-box; line-height:1.2; letter-spacing:-0.09em; box-sizing:border-box; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox .heart { font-size:1.07em; color:var(--bg-fc-color); padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 center; background-size:13px 11px; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox dl { margin-top:10px; font-size:1.07em; color:#222222; width:102%; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox dl dt { font-size:1.15em; font-weight:bold; margin-bottom:14px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox dl dd { text-overflow:ellipsis; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox .writer { position:absolute; bottom:15px; right:1.7%; font-size:1.07em; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox .writer > span { color:var(--bg-fc-color); } .ellipsis-all { overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-wrap:break-word; line-height:1.2; height:3.5em; } /* 최근본작품 middle */ /* .m_ebook_cont .lately_cover_middle { width:100%; margin-bottom:12px; } */ .m_ebook_cont .ebook_middle_lately { position:relative; width:100%; min-width:267px; float:left; background:#fff; border:1px solid #c70304; box-sizing:border-box; margin-bottom:12px; } .m_ebook_cont .ebook_middle_lately .view_lately{position:absolute; top:0; left:0; width:70px; height:70px; z-index:5;} .m_ebook_cont .ebook_middle_lately .m_ebook_imgbox { position:relative; float:left; max-width:152px; } .m_ebook_cont .ebook_middle_lately .m_ebook_imgbox .m_ebook_cover { display:block; position:relative; width:100%; z-index:4; } .m_ebook_cont .ebook_middle_lately .m_ebook_imgbox .m_ebook_img { display:block; position:absolute; top:11px; left:12px; z-index:3; width:78.571%; height:144.5px; overflow:hidden; } .m_ebook_cont .ebook_middle_lately .m_ebook_imgbox .m_ebook_img > img { width:100%; } .m_ebook_cont .ebook_middle_lately .m_ebook_imgbox .adult_mark { position:absolute; bottom:15.333%; right:20.375%; display:inline-block; width:25px; height:25px; z-index:5; } .m_ebook_cont .ebook_middle_lately .m_ebook_imgbox .adult_mark img { width:100%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { position:relative; float:left; width:80%; height:180px; padding:12px 3.266% 14px 1.256%; box-sizing:border-box; line-height:1.2; letter-spacing:-0.09em; box-sizing:border-box; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox .heart { font-size:1.07em; color:var(--bg-fc-color); padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 center; background-size:13px 11px; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox dl { margin-top:10px; font-size:1.07em; color:#222222; width:102%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox dl dt { font-size:1.15em; font-weight:bold; margin-bottom:14px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox dl dd { text-overflow:ellipsis; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox .writer { position:absolute; bottom:15px; right:1.7%; font-size:1.07em; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox .writer > span { color:var(--bg-fc-color); } .m_ebook_cont .lately_cover_middle .lately_box_middle { position:absolute; width:100%; top:0; left:0; text-align:center; color:var(--main-ft-color); background:#c70304; font-size:0.92em; height:22px; line-height:22px; z-index:3; } /* 이북 리뉴얼 20190221 */ .ebook_list_re01_lately{width:49.2%; float:left; background-color:#FFFFFF; margin-bottom:7px;} .ebook_list_re01_lately a{display:block; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; border:1px solid #ddd;} .ebook_list_re01_lately a .ebook_re_thumb{position:relative; width:100%; overflow:hidden;} .ebook_list_re01_lately a .ebook_re_thumb > img:not(.thumb_placeholder){position:absolute;} .ebook_list_re01_lately a .ebook_re_thumb img.thumb_placeholder{width:100%;} .ebook_list_re01_lately a .ebook_re_thumb img.lazyload{width:100%; top:0; left:0;} .ebook_list_re01_lately a .ebook_re_thumb .ebook_imgbox{position:absolute; top:0; left:0; width:100%; height:100%;} .ebook_list_re01_lately a .ebook_re_thumb .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} .ebook_list_re01_lately a .ebook_re_thumb .ebook_imgbox .ebook_back{position:absolute; top:0; left:0; width:100%; opacity:0.2;} .ebook_list_re01_lately a .ebook_re_thumb .ebook_imgbox .ebook_cover{position:absolute; top:0; left:0; right:0; margin:auto; width:70%; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} .ebook_list_re01_lately a .ebook_re_thumb img.view_lately{width:70px; top:0; left:0; z-index:1;} .ebook_list_re01_lately a .ebook_re_thumb .adult_mark{position:absolute; bottom:5px; right:5px; display:block; width:18px; z-index:1;} .ebook_list_re01_lately a .ebook_re_thumb .adult_mark img{width:100%;} .ebook_list_re01_lately a .ebook_re01_textbox{width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; text-align:center; color:#2c2c2c; padding:4px; line-height:1.1; border-top:1px solid #ddd;} .ebook_list_re01_lately a .ebook_re01_textbox dt{font-size:1em; font-weight:bold; padding-bottom:3px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .ebook_list_re01_lately a .ebook_re01_textbox dd{padding-bottom:2px; font-size:0.82em; font-weight:normal; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .ebook_list_re01_lately a .ebook_re01_textbox dd .writer{color:#d52b2c;} .ebook_list_re01{width:49.2%; float:left; background-color:#FFFFFF; margin-bottom:7px;} .ebook_list_re01:nth-child(odd){margin-right:1.6%;} .ebook_list_re01 a{position:relative; display:block; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; border:1px solid #ddd;} .ebook_list_re01 a img.ebook_big_rankimg{position:absolute; top:0; left:0; margin:-10px 0 0 0; z-index:2;} .ebook_list_re01 a .ebook_re_rank{position:absolute; top:0; left:-1px; display:block; width:25px; padding:4px 0 3px; text-align:center; font-size:12px; font-weight:bold; color:var(--main-ft-color); background-color:#ed1c24; z-index:2;} .ebook_list_re01 a .ebook_re_thumb{position:relative; width:100%; overflow:hidden;} .ebook_list_re01 a .ebook_re_thumb > img:not(.thumb_placeholder){position:absolute;} .ebook_list_re01 a .ebook_re_thumb img.thumb_placeholder{width:100%;} .ebook_list_re01 a .ebook_re_thumb img.lazyload{width:100%; top:0; left:0;} .ebook_list_re01 a .ebook_re_thumb .ebook_imgbox{position:absolute; top:0; left:0; width:100%; height:100%;} .ebook_list_re01 a .ebook_re_thumb .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} .ebook_list_re01 a .ebook_re_thumb .ebook_imgbox .ebook_back{position:absolute; top:0; left:0; width:100%; opacity:0.2;} .ebook_list_re01 a .ebook_re_thumb .ebook_imgbox .ebook_cover{position:absolute; top:0; left:0; right:0; margin:auto; width:70%; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} .ebook_list_re01 a .ebook_re_thumb .adult_mark{position:absolute; bottom:5px; right:5px; display:block; width:18px; z-index:1;} .ebook_list_re01 a .ebook_re_thumb .adult_mark img{width:100%;} .ebook_list_re01 a .ebook_re01_textbox{width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; text-align:center; color:#2c2c2c; padding:4px; line-height:1.1; border-top:1px solid #ddd;} .ebook_list_re01 a .ebook_re01_textbox dt{font-size:1em; font-weight:bold; padding-bottom:3px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .ebook_list_re01 a .ebook_re01_textbox dd{padding-bottom:2px; font-size:0.82em; font-weight:normal; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .ebook_list_re01 a .ebook_re01_textbox dd .writer{color:#d52b2c;} /* 이북 리뉴얼 20190221 E */ /* 로딩 이미지 */ .m_ebook_cont .m_ebook_list img.ebook_loaderImg { position:absolute !important; top:50% !important; left:50% !important; width:50% !important; margin:-25% 0 0 -20%; } .m_ebook_cont .m_ebook_list img.lazyload { position:relative; z-index:1; } .m_ebook_cont .ebook_list_big img.lazyload { z-index:2 !important; } .m_ebook_cont .ebook_list_big img.ebook_loaderImg { z-index:1 !important; } /* 더보기버튼 */ #m_sub_ebook .m_ebook_list_more { width:100%; padding-bottom:15px; float:left; background:#f5f5f5; } #m_sub_ebook .m_ebook_list_more a { display:block; width:96%; text-align:center; color:var(--bg-fc-color); background:#fff; padding:9px 0 8px; font-size:1.1em; border:1px solid var(--bg-fc-color); border-radius:5px; margin:5px auto; text-shadow:none; box-sizing:border-box; } #m_sub_ebook .m_ebook_list_more a p { font-weight:bold; display:inline-block; } #m_sub_ebook .m_ebook_list_more a img { display:inline-block; width:16px; padding-left:10px; margin-bottom:2px; } /* 리스트 페이징 */ #m_sub_ebook .m_ebook_page_list { width:100%; height:28px; overflow:hidden; text-align:center; padding:7px 0 30px; min-width:303px; box-sizing:content-box; } .m_ebook_page_list p { width:64px; display:inline-block; } .m_ebook_page_list p span { display:block; float:left; width:32px; height:28px; text-align:center; line-height:26px; box-sizing:border-box; border:1px solid #ddd; border-radius:2px; background:#fff; font-size:12px; } .m_ebook_page_list p span a { color:#676767; } .m_ebook_page_list p span a img { vertical-align:middle; } .m_ebook_page_list ol { display:inline-block; overflow:hidden; vertical-align:top; } .m_ebook_page_list ol li { display:inline-block; font-size:1.2em; font-weight:bold; margin:0 3px; } .m_ebook_page_list ol li a { display:inline-block; width:28px; height:28px; line-height:26px; border:1px solid #ddd; background:#e9e5e5; border-radius:2px; box-sizing:border-box; color:#676767; } .m_ebook_page_list ol li a.on { border:1px solid var(--bg-fc-color); color:var(--bg-fc-color); background:#fff; } .m_ebook_page_list .m_ebook_prevbox { margin-right:1%; } .m_ebook_page_list .m_ebook_nextbox { margin-left:1%; } .m_ebook_page_list .m_ebook_prevbox span { float:right; } /* 로딩 이미지 */ #m_ebook_loading { display:none; position:fixed; top:0; left:0; z-index:999; width:100%; height:100%; background:#000; opacity:0.7; } @media all and (max-width:1638px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:79%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:79%; } } @media all and (max-width:1561px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:78%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:78%; } } @media all and (max-width:1491px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:77%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:77%; } } @media all and (max-width:1426px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:70%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:70%; } } @media all and (max-width:1104px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:69%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:69%; } } @media all and (max-width:1062px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:68%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:68%; } } @media all and (max-width:1030px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:60%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:60%; } } @media all and (max-width:1024px){ #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle { float:left; width:49.3%; margin:0; margin-bottom:12px; } #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle:nth-child(even) { margin-left:1.074%; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:66%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:66%; } } @media all and (max-width:970px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:60%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:60%; } } @media all and (max-width:827px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:55%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:55%; } } @media all and (max-width:768px){ #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle { float:left; width:49.3%; margin:0; margin-bottom:12px; } #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle:nth-child(even) { margin-left:1.4%; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:50%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:50%; } } @media all and (max-width:665px){ #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle { clear:both; width:100%; margin:0; margin-bottom:12px; } #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle:nth-child(even) { margin-left:0; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:75%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:75%; } } @media all and (max-width:659px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:74%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:74%; } } @media all and (max-width:634px) { #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:73%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:73%; } } @media all and (max-width:611px) { #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:72%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:72%; } } @media all and (max-width:590px) { #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:71%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:71%; } } @media all and (max-width:569px) { #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:70%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:70%; } } @media all and (max-width:551px) { #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:69%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:69%; } } @media all and (max-width:534px) { #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:68%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:68%; } } @media all and (max-width:524px){ #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle { margin:0; margin-bottom:12px; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:63%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:63%; } } @media all and (max-width:450px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:62%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:62%; } } @media all and (max-width:417px){ #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle { margin:0; margin-bottom:12px; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:62%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:62%; } } @media all and (max-width:389px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:60%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:60%; } } @media all and (max-width:375px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:59%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:59%; } li.ebook_list_big .ebook_big_box dl dt { font-size:1em; margin-bottom:4%; } li.ebook_list_big .ebook_big_box dl dd { font-size:0.8em; } } @media all and (max-width:362px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:57%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:57%; } } @media all and (max-width:349px){ #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle { min-width:300px; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:52%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:52%; } } @media all and (max-width:340px){ li.ebook_list_big .ebook_big_box dl { padding-top:5.842%; } li.ebook_list_big .ebook_big_box dl dt { font-size:0.9em; margin-bottom:3%; } li.ebook_list_big .ebook_big_box dl dd { font-size:0.73em; } .ebook_big_lately .ebook_big_box dl { padding-top:5.842%; } .ebook_big_lately .ebook_big_box dl dt { font-size:0.9em; margin-bottom:3%; } .ebook_big_lately .ebook_big_box dl dd { font-size:0.73em; } } @media all and (max-width:337px){ #m_sub_ebook .m_ebook_cont .m_ebook_list li.ebook_list_middle { margin:0; margin-bottom:12px; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:52%; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox dl dd { font-size:1em; } #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox .writer { font-size:1em; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:52%; } } @media all and (max-width:330px){ #m_sub_ebook .m_notice_txt a { font-size:0.9em; } } @media all and (max-width:320px){ #m_sub_ebook .m_ebook_cont .m_ebook_list .m_ebook_txtbox { width:51%; } .m_ebook_cont .ebook_middle_lately .m_ebook_txtbox { width:51%; } } /* 20180226 ebook 모바일페이지 수정 END */ /* 100원 코인당첨 웹팝업 2018/04/11 start */ #m_coin_100_pop_wrap { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000; background:rgba(0,0,0,0.4); } #m_coin_100_pop_wrap .m_coin_100_pop { position:relative; top:30%; margin:0 auto; width:80%; background:#493335; overflow:hidden; max-width:300px; min-width:253px; } #m_coin_100_pop_wrap .m_coin_100_pop_top { width:100%; box-sizing:border-box; overflow:hidden; padding:11% 9.333% 9.666% 6.333%; } #m_coin_100_pop_wrap .m_coin_100_pop_logo { width:30%; float:left; } #m_coin_100_pop_wrap .m_coin_100_pop_logo img { width:100%; display:block; } #m_coin_100_pop_wrap .m_coin_100_pop_top p { float:right; color:var(--main-ft-color); font-size:16px; line-height:1.6; } #m_coin_100_pop_wrap .m_coin_100_pop_top p strong { font-weight:bold; } #m_coin_100_pop_wrap .m_coin_100_pop_bottom { width:100%; overflow:hidden; border-top:1px solid #2a1e20; } #m_coin_100_pop_wrap .m_coin_100_pop_bottom > div { width:50%; float:left; } #m_coin_100_pop_wrap .m_coin_100_pop_bottom > div > a { width:100%; display:block; box-sizing:border-box; text-align:center; padding:6.333% 0; font-size:16px; color:var(--main-ft-color); } #m_coin_100_pop_wrap .m_coin_100_pop_close a { border-right:1px solid #2a1e20; } @media all and (max-width:360px){ #m_coin_100_pop_wrap .m_coin_100_pop_top p { font-size:14px; margin-top:1%; } } /* 100원 코인당첨 웹팝업 2018/04/11 end */ /* 회원가입 유도배너 2018/05/14 start */ .gift_100_free_cont { position:fixed; width:100%; height:90px; bottom:-100px; z-index:99999; } .gift_100_free_cont .gift_100_free { position:relative; padding-left:90px; width:97%; height:64px; margin:24px auto 0; background:rgba(0, 0, 0, 0.8); border-radius:6px; box-sizing:border-box; } .gift_100_free_cont .gift_100_free .gift_100_free_img { float:left; position:absolute; bottom:-3px; left:0; } .gift_100_free_cont .gift_100_free p { float:left; font-size:13px; color:var(--main-ft-color); line-height:1.8; margin-top:8px; letter-spacing:-1px; } .gift_100_free_cont .gift_100_free .gift_100_closebtn { position:absolute; top:3px; right:3px; } .gift_100_free_cont .gift_100_free p .gift_100_red { color:#ff383c; } .gift_100_free_cont .gift_100_free p .gift_100_yellow { color:#fff600; } @media all and (max-width:374px){ .gift_100_free_cont .gift_100_free p { font-size:12px; margin-top:12px; } } @media all and (max-width:345px){ .gift_100_free_cont .gift_100_free p { font-size:11px; margin-top:14px; } } /* 회원가입 유도배너 2018/05/14 end */ /* 블러 필터 모자이크 */ .blurfilter{filter:blur(5px); -webkit-filter:blur(5px); -moz-filter:blur(5px); -o-filter:blur(5px);} /* 블러 필터 모자이크 end */ /* 스크롤 게이지 2018/06/08 */ .progressContainer{position:fixed; top:0; left:0; width:100%; height:0.3em; overflow:hidden; margin-top:60px; z-index:98;} .progressContainer .progressBar{float:left; width:0%; height:100%; max-width:100%; background-color:var(--bg-fc-color); transition:width 0.2s ease; -webkit-transition:width 0.2s ease; -o-transition:width 0.2s ease; -moz-transition:width 0.2s ease;} /* 스크롤 게이지 2018/06/08 END */ /* 정주행 모드 팝업 2018/06/11 */ .passPopupContainer{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:100000; display:flex;overflow:overlay;} .passPopupContainer .passPopup{position:relative;top:30px; width:90%; max-width:330px; margin:auto; border-radius:3px; letter-spacing:-1px;} .passPopupContainer .passPopup > a{position:absolute; top:0; right:0; margin-top:-30px;} .passPopupContainer .passPopup > a img{cursor:pointer;} .passPopupContainer .passPopup h6{width:100%; height:49px; line-height:49px; text-align:center; border-bottom:1px solid #d0d0d0; background:#e6e6e6; font-size:18px; color:#141414; font-weight:700; border-radius:3px 3px 0 0;} .passPopupContainer .passPopup .passPopupCont{width:100%; overflow:hidden; background:#fff; text-align:center; box-sizing:border-box; padding:22px 8.787% 12px; border-radius:0 0 3px 3px;} .passPopupContainer .passPopup .passPopupCont p{line-height:1.5; font-size:15px; color:#333333;} .passPopupContainer .passPopup .passPopupCont ul{width:100%; overflow:hidden; margin-top:20px;} .passPopupContainer .passPopup .passPopupCont ul li{width:48%;} .passPopupContainer .passPopup .passPopupCont ul li a{width:100%; box-sizing:border-box; padding:15px 0; display:block; font-size:16px; font-weight:500; color:#FFFFFF;} .passPopupContainer .passPopup .passPopupCont ul li:first-child{float:left;} .passPopupContainer .passPopup .passPopupCont ul li:first-child a{background-color:#db0000;} .passPopupContainer .passPopup .passPopupCont ul li:last-child{float:right;} .passPopupContainer .passPopup .passPopupCont ul li:last-child a{background-color:#666666;} .pass_layerbox{width:100%; height:50px; display:none;} .pass_layerbox_view{height:200px;} /* 정주행 모드 팝업 2018/06/11 END */ /* 코인충전 후팝업 2018/06/15 */ #coin_notice_fill_wrap3{display:none; width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0, 0, 0, 0.5);z-index:99999999;} #coin_notice_fill_wrap3 .coin_notice_fill_box3{width:100%; height:100%; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container{width:95%; max-width:430px; margin:5% auto; background:#f5f5f5; position:relative; z-index:99;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container > div{padding:10px 5px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container h2{color:var(--bg-fc-color); text-indent:5px; font-size:1.2em; position:relative; margin-bottom:10px; cursor:default;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container h2 a{position:absolute; top:-4px; bottom:0; right:5px; margin:auto; width:24px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container h2 a img{width:100%; display:block; cursor:pointer;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body{border:1px solid #d9d9d9; background:#fff; padding:4.047% 4.285% 3.571% 4.761%; max-height:500px; letter-spacing:-0.09em; height:100%; overflow:scroll;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body img.coin_notice3_banner{display:block; width:100%;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont{width:100%; overflow:hidden; margin-top:28px; margin-bottom:30px; position:relative;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont > img{position:absolute; top:50px; left:50%; margin-left:-52px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont dl{line-height:1; width:100%; box-sizing:border-box;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont dl dt{font-size:17px; font-weight:bold; color:#000; margin-bottom:15px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont dl dd{font-size:16px; color:#000;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont dl dd .coin_notice3_red{color:#bf242a; font-weight:bold;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont dl dd .coin_notice3_price{display:inline-block; float:right;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont1 dd .coin_notice3_price{margin-right:20px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont1{border-bottom:1px solid #cecece; margin-bottom:58px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont1 dd{margin-bottom:14px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont1 dd .coin_notice3_red{position:relative;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont1 dd .coin_notice3_red:before{content:""; display:block; width:45px; height:20px; background:url(https://cdn.metoon.co.kr/img/coin_notice3_del.png) no-repeat center; background-size:100%; position:absolute; top:0; left:0;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont2{padding:20px 20px 20px 26px; border:1px solid #bf242a; background:#ffefef;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont2 dt{position:relative;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont2 dt img{position:absolute; top:0; left:-18px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_btn{display:block; width:100%; height:40px; line-height:40px; background:#bf242a; color:var(--main-ft-color); text-align:center; border-radius:3px; font-size:1.1em; font-weight:bold; border:none; margin-bottom:10px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body input#sevenDay_none{margin:0 5px 0 0;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .check_cont{float:right;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .check_cont input{vertical-align:middle;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .check_cont label{vertical-align:middle;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .check_cont a{display:inline-block; background-image:linear-gradient(to bottom right, #333, #ddd); color:var(--main-ft-color); width:45px; height:20px; line-height:20px; text-align:center; font-weight:bold; font-size:0.85em; border-radius:3px; letter-spacing:1px; margin-left:5px; border:1px solid #ddd; transition:0.2s all; -webkit-transition:0.2s all; -moz-transition:0.2s all; -o-transition:0.2s all;} @media all and (max-width:350px){ #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont > img{top:45px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont dl dt{font-size:15px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont dl dd{font-size:14px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont2{padding-right:15px;} #coin_notice_fill_wrap3 .coin_notice_fill_box3 .coin_notice3_container .coin_notice3_body .coin_notice3_cont2 dt img{width:5%; left:-15px;} } /* 코인충전 후팝업 2018/06/15 END */ /* 정주행 배너 2018/06/21 */ .pass_banner{position:absolute; top:0; right:0; z-index:1000;} .pass_banner .pass_banner_cover{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5);} .pass_banner .pass_banner_cont{position:fixed; top:0; right:0; margin-right:50px; z-index:1;} .pass_banner .pass_banner_cont_toon{margin-right:55px;} .pass_banner .pass_banner_cont > img{width:261px;} .pass_banner .pass_banner_cont a.passBanner_close{position:absolute; top:130px; right:12px;} .pass_banner .pass_banner_cont a.passBanner_close img{width:16px;} .pass_banner .pass_banner_cont a.passBanner_btn{position:absolute; top:4px; right:73px; width:56px; height:56px; display:block; background:transparent;} .pass_banner .pass_banner_cont a.passBanner_btn_toon{position:absolute; top:4px; right:27px; width:56px; height:56px; display:block; background:transparent;} /* 정주행 배너 2018/06/21 END */ /* 웹툰 리뉴얼 2018/07/03 */ #webtoon_banner{width:100%; display:none; overflow:hidden;} #webtoon_banner .content_tag{top:5px; right:5px;} #webtoon_banner ul{width:100%; box-sizing:border-box; padding:10px 0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} #webtoon_banner ul li{position:relative; float:left; background:#fff; width:100px; margin:0 5px; font-size:12px; box-sizing:border-box;} #webtoon_banner ul li a{display:block; width:100%;} #webtoon_banner ul li a .thumb_box{position:relative; width:100%; height:108px; overflow:hidden; box-sizing:border-box; -webkit-box-sizing:border-box; border:1px solid #ddd; transition:border .3s ease-in-out; -webkit-transition:border .3s ease-in-out;} #webtoon_banner ul li.slick-center a .thumb_box{border:1px solid #ed1c24;} #webtoon_banner ul li a .thumb_box .thumb_tag{position:absolute; top:3px; left:3px; display:block; width:25px; height:14px; border-radius:3px; background-color:#FFFFFF; text-align:center; line-height:14px; font-size:11px; font-weight:normal;} #webtoon_banner ul li a .thumb_box .tag_webtoon{border:1px solid #fc5863; color:#fc5863;} #webtoon_banner ul li a .thumb_box img{width:100%;} #webtoon_banner ul li a > p{white-space:nowrap; overflow:hidden; max-width:100%; text-overflow:ellipsis; box-sizing:border-box; -webkit-box-sizing:border-box; padding:4px 0 0; text-align:center; font-size:1em;} #webtoon_banner ul li a > p .tag_box{display:inline-block; line-height:1; vertical-align:top;} #webtoon_banner ul li a > p .tag_box span{display:block; font-size:10px; width:14px; height:14px; line-height:14px; border-radius:3px; text-align:center;} #webtoon_banner ul li a > p .tag_box .best_tag_s{background:#388afd; color:var(--main-ft-color);} #webtoon_banner ul li a > p .tag_box .hot_tag_s{background:#e61e3f; color:var(--main-ft-color);} #webtoon_banner ul li a > p .tag_box .new_tag_s{background:#721de3; color:var(--main-ft-color);} #content_wrap .webtoon_container{box-sizing:border-box; padding-top:40px;} #content_wrap .webtoon_genre_tab{ width:100%; margin:0 auto; border-bottom:1px solid #ddd; box-sizing:content-box; } #content_wrap .contain_webtoon{ overflow: hidden; /* background:#fff; */ min-height:64vh; } #content_wrap .webtoon_genre_tab ul{display:-webkit-box;display:flex; -webkit-box-pack:justify;justify-content:space-between; width: 100%; background: #fff; overflow: hidden;} #content_wrap .webtoon_genre_tab ul li{-webkit-box-flex:1;flex-grow:1; height:42px; line-height:40px; text-align:center; float:left;} #content_wrap .webtoon_genre_tab ul li a{ display: block; font-size:13px; font-weight: normal; border-bottom:2px solid #fff; letter-spacing:-1px; color:#4e4e4e; transition:all 0.2s ease; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease;} #content_wrap .webtoon_genre_tab ul li a span img{width:16px; vertical-align:middle; margin-top:-5px; margin-left:3px;} #content_wrap .webtoon_genre_tab ul li a.on{border-bottom:2px solid var(--bg-fc-color); color:var(--bg-fc-color);} #content_wrap #container .webtoon_set_box{width:96%; margin:6px auto 6px; overflow:hidden;} #content_wrap #container .webtoon_set_box select{border:1px solid #ddd; padding:2px 7px; padding-right:15px; font-size:13px; height:30px; line-height:normal; overflow:hidden; background:url("https://cdn.metoon.co.kr/mimg/ic_select.png") no-repeat 95% 70%, #fff; background-size:8px; border-radius:0; color:#676767; appearance:none; -webkit-appearance:none; -moz-appearance:none;} #content_wrap #container .webtoon_set_box select::-ms-expand{display:none;} #content_wrap #container .webtoon_set_box #SetCate{width:120px; background-position-x:95%;} #content_wrap #container .webtoon_set_box #SetList{width:85px; float:right;} #content_wrap #container .webtoon_set_box #orderby{padding-left:7px; padding-right:15px; margin-left:1.5px; background-position-x:92%;} #content_wrap #container .webtoon_set_box .webtoon_switch_btn{width:30px; height:30px; border:1px solid #ddd; text-align:center; float:right; margin-left:5px; background:url(https://cdn.metoon.co.kr/mimg/switch_view_3.png) no-repeat center #fff; background-size:20px; cursor:pointer; text-indent:-9999px;} #content_wrap #container .webtoon_set_box .webtoon_switch_btn.on1{background:url(https://cdn.metoon.co.kr/mimg/switch_view_2.png) no-repeat center #fff; background-size:20px;} #content_wrap #container .webtoon_set_box .webtoon_switch_btn.on2{background:url(https://cdn.metoon.co.kr/mimg/switch_view_1.png) no-repeat center #fff; background-size:20px;} #content_wrap #container .webtoon_cont{width:100%; overflow:hidden; /* padding-top:43px; */} #content_wrap #container .adult_count_sub{display:none;position:relative;width:100%;border-bottom:1px solid #ddd;} #content_wrap #container .adult_count_sub img{display:block;width:100%;} #content_wrap #container .adult_count_sub .adult_count_sub_x{position:absolute;top:2px;right:2px;display:block;width:13px;height:13px;background:url(https://cdn.metoon.co.kr/mimg/m_adult_con_count_x.png) no-repeat center;background-size:100%;text-indent:-9999px;} #content_wrap #container .webtoon_cont ul{width:100%; overflow:hidden; margin:10px auto 0; padding:0 4px; -webkit-box-sizing:border-box; box-sizing:border-box;display:flex;flex-wrap:wrap;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li:not(.subm_bnr){position:relative;width:33.333%; -webkit-box-sizing:border-box; box-sizing:border-box; padding:0 4px 8px; float:left;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li:not(.subm_bnr) a:not(.xtgli_hidden_cut){display:block; width:100%; box-sizing:border-box; border-radius:5px; /* background:#fff; */ position:relative;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_imgbox{width:100%; overflow:hidden; position:relative;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a img{width:100%; display:block;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_imgbox .patch_box{position:absolute; top:3px; right:3px; z-index:12;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_imgbox .patch_box img{display:inline-block;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_imgbox .patch_box .icon_19_patch{display:block;width:16px;opacity:.9;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_imgbox .icon_end_re{width:16px;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .toon_img{position:relative; height:0; padding-bottom:140.35%; background-repeat:no-repeat; background-size:100%; background-size:cover; background-position:center 0; border:1px solid var(--main-line-color); border-radius:5px 5px 0 0; z-index:2;} .toon_img .rankCrown, .rankCrown.pos_abs{position:absolute;top:0;left:0;z-index:4;margin:5px;} .sub_vd_list .rankCrown, .rankCrown.right{left:auto;right:0;} .rankCrown .atc_logo{display:block;width:44px;fill:#909090;filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));} .rankCrown.ranking1 svg{fill:#FFCC41;} .rankCrown.ranking2 svg{fill:#D4D4D4;} .rankCrown.ranking3 svg{fill:#DA661B;} .rankCrown .rankCrown_num{position:absolute;top:50%;left:0;width:100%;font-size:15px;font-weight:700;color:#FFF;text-align:center;line-height:1;text-shadow:0 1px rgba(0, 0, 0, 0.5), 0 -1px rgba(0, 0, 0, 0.5), 1px 0 rgba(0, 0, 0, 0.5), -1px 0 rgba(0, 0, 0, 0.5);transform:translateY(-50%);margin-top:5px;} .thumb19_logo_new{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#e8e8e8;z-index:9;} .thumb19_logo_new i{position:absolute;top:50%;left:0;width:100%;height:76px;background:url("https://cdn.metoon.co.kr/img/adult_thumb_logo.png") no-repeat center 56%, #a5a5a5;background-size:32px;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .ebook_imgbox img{position:absolute; top:0; left:0;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .ebook_imgbox .ebook_img{width:100%; opacity:0.2;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .ebook_imgbox .ebook_cover{width:70%; right:0; bottom:0; margin:auto; z-index:2; -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, .7); box-shadow:10px 10px 20px rgba(0, 0, 0, .7);} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .rank{position:absolute; top:0; left:-1px; width:25px; padding:4px 0 3px; text-align:center; margin:0; font-size:12px; font-weight:bold; color:var(--main-ft-color); background:#ed1c24; z-index:101;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .adult_19_mark{position:absolute; top:-5%; left:0; right:0; bottom:0; margin:auto; width:80%;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .cate_tag{position:absolute; right:5px; top:5px; z-index:101;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .cate_tag span{display:block; float:left; background:#fff; border-radius:3px; font-size:11px; font-weight:normal; padding:1px 2px 0px; line-height:1.3; letter-spacing:-0.05em; margin-top:0;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .cate_tag .cate_tag_toon{color:#fc5863; border:1px solid #fc5863;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .cate_tag .cate_tag_novel{color:#2b90e1; border:1px solid #2b90e1;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .cate_tag .cate_tag_ebook{color:#0096a6; border:1px solid #0096a6;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt, .mcs_wrap .webtoon_txt{position:relative; width:100%; /* background:rgba(255, 255, 255, 1); */ box-sizing:border-box; color:var(--sub2-ft-color); padding:5px 2px; line-height:1.1; border-radius:0 0 5px 5px;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .title, .mcs_wrap .webtoon_txt .title{width:100%; font-size:1em; font-weight:500;color:var(--main-ft-color); padding-bottom:5px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .mcs_wrap .webtoon_txt .title{font-size:1.12em;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .title span, .mcs_wrap .webtoon_txt .title span{display:inline-block;width:calc(100% - 20px); vertical-align:middle;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .title span:only-child, .mcs_wrap .webtoon_txt .title span:only-child{width:100%;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .title .txt, .mcs_wrap .webtoon_txt .title .txt{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .title .mark19, .mcs_wrap .webtoon_txt .title .mark19{float:right;width:17px;height:17px;background:url(https://cdn.metoon.co.kr/mimg/ic_19_re.png) no-repeat center; background-size:16px;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt dd:not(.txt_tag), .mcs_wrap .webtoon_txt dd:not(.txt_tag){width:100%; height:18px; font-size:0.82em; font-weight:normal; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt dd.info, .mcs_wrap .webtoon_txt dd.info{display:flex;justify-content:space-between;gap:0 10px;min-width:0;align-items:center;height:auto;/* margin-bottom:8px; */margin-bottom:6px;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .info span, .mcs_wrap .webtoon_txt .info span{display:inline-block;/* float:left;width:50%; */font-size:11px;/* color:#777; */min-width:0;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .info .turn, .mcs_wrap .webtoon_txt .info .turn{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .info .hits, .mcs_wrap .webtoon_txt .info .hits{flex-shrink:0;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .info .hits i, .mcs_wrap .webtoon_txt .info .hits i{display:inline-block;width:10px;height:12px;margin-right:3px;background:url("https://cdn.metoon.co.kr/mimg/thumb_up_red.svg") no-repeat center 53%;background-size:100%;vertical-align:top;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .text, .mcs_wrap .webtoon_txt .text{display:flex;flex-wrap:wrap;height:16px;padding-bottom:2px;gap:5px 0;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .text .wr_tag, .mcs_wrap .webtoon_txt .text .wr_tag{display:block;float:left;height:16px;margin-right:4px;background-size:100% auto;background-position:center;background-repeat:no-repeat;} #content_wrap ul.webtoon_rect_list .wr_tag:last-child, #content_wrap ul.webtoon_rect_list .wr_tag:only-child, .mcs_wrap .webtoon_txt .wr_tag:last-child, .mcs_wrap .webtoon_txt .wr_tag:only-child{margin-right:0 !important;} #content_wrap .webtoon_rect_list .webtoon_txt .wr_new, .mcs_wrap .webtoon_txt .wr_new{width:28px;background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_new.png);} #content_wrap .webtoon_rect_list .webtoon_txt .wr_comp, .mcs_wrap .webtoon_txt .wr_comp{width:28px;background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_comp.png);} #content_wrap .webtoon_rect_list .webtoon_txt .wr_md, .mcs_wrap .webtoon_txt .wr_md{width:43px;background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_md.png);} #content_wrap .webtoon_rect_list .webtoon_txt .wr_look, .mcs_wrap .webtoon_txt .wr_look{width:49px;background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_look.png);} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .text2 .genre, .mcs_wrap .webtoon_txt .text2 .genre{color:#f0070c;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .txt_tag, .mcs_wrap .webtoon_txt .txt_tag{position:absolute; bottom:100%; left:0; margin-bottom:5px;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .text:empty, .mcs_wrap .webtoon_txt .text:empty, #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .txt_tag:empty, .mcs_wrap .webtoon_txt .txt_tag:empty{display:none;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .txt_tag .nLabel, .mcs_wrap .webtoon_txt .txt_tag .nLabel{display:block; width:30px; height:18px;background-size:100% auto;background-position:center;background-repeat:no-repeat;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .txt_tag .nLabel + .nLabel, .mcs_wrap .webtoon_txt .txt_tag .nLabel + .nLabel{margin-top:3px;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .txt_tag .nLabel_up, .mcs_wrap .webtoon_txt .txt_tag .nLabel_up{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_up01.png);} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .txt_tag .nLabel_mo, .mcs_wrap .webtoon_txt .txt_tag .nLabel_mo{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_mo01.png);} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .rank_num{width:35px; height:40px; text-align:center; padding-top:5px; margin:0; font-size:1.15em; font-weight:bold; text-indent:-1%; position:absolute; top:0; left:-1px; color:var(--main-ft-color); background:url(https://cdn.metoon.co.kr/mimg/adult_rank_bg1.png) no-repeat center 0; background-size:100%; z-index:2;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .txt_tag, .mcs_wrap .webtoon_txt .txt_tag{position:absolute; bottom:7px; left:-4px; padding:0; margin:0; z-index:3;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .txt_tag span>span, .mcs_wrap .webtoon_txt .txt_tag span>span{margin-top:0; padding:0 2px; padding-left:14px; display:inline-block; position:relative;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .txt_tag span, .mcs_wrap .webtoon_txt .txt_tag span{display:inline-block; position:relative;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li .txt_tag .end_txt_tag, .mcs_wrap .webtoon_txt .txt_tag .end_txt_tag{border:1px solid #7d52e0; color:#7d52e0; background:#fff; line-height:1.1;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li .txt_tag .end_txt_tag span, .mcs_wrap .webtoon_txt .txt_tag .end_txt_tag span{padding:0; margin:0; -webkit-text-size-adjust:100%; position:relative;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .txt_tag span img, .mcs_wrap .webtoon_txt .txt_tag span img{width:30px;} /* #content_wrap #container .webtoon_cont .event_cont_list{max-width:541px;padding:0 8px 15px;} #content_wrap #container .webtoon_cont .event_cont_list li{padding:5px 0 10px; border-bottom:1px solid var(--main-line-color);margin-bottom:7px;} #content_wrap #container .webtoon_cont .event_cont_list li:first-child{padding-top:0;} #content_wrap #container .webtoon_cont .event_cont_list li a{display:block; width:100%; position:relative; overflow:hidden; border-radius:6px;} #content_wrap #container .webtoon_cont .event_cont_list li img{width:100%;} #content_wrap #container .webtoon_cont .event_cont_list .end_event img{-webkit-filter:grayscale(100%); -ms-filter:grayscale(100%); filter:grayscale(100%);} #content_wrap #container .webtoon_cont .event_cont_list li p{padding:0 5px; font-size:0.9em;} #content_wrap #container .webtoon_cont .event_cont_list li p span{width:100%; display:block; font-size:1em; line-height:1.3;} #content_wrap #container .webtoon_cont .event_cont_list li .title{font-weight:500; font-size:1.2em; margin:5px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #content_wrap #container .webtoon_cont .event_cont_list li .date{margin:7px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sub-ft-color);} */ @media only screen and (min-width:768px){ #content_wrap #container .webtoon_cont ul.webtoon_rect_list li:not(.subm_bnr){padding:0 7px 14px;} } @media only screen and (min-width:600px){ #content_wrap #container .webtoon_cont ul.webtoon_rect_list li:not(.subm_bnr){width:25%;} #content_wrap #container .webtoon_cont ul{margin-top:15px;} } @media only screen and (min-width:1000px){ #content_wrap #container .webtoon_cont ul.webtoon_rect_list li:not(.subm_bnr){width:16.666%;} #content_wrap #container .webtoon_cont ul{margin-top:20px;} } @media only screen and (max-width:350px){ #content_wrap #container .webtoon_cont ul.webtoon_rect_list li:not(.subm_bnr), #content_wrap #sub_mypage.buylist .nobel_data_list li, #content_wrap #sub_mypage.zzim .like_data_list li{width:50%;} } #container .sub_sorting_option{padding:10px 0 0;} #container .sub_sorting_option:after{content:"";display:block;clear:both;} #container .sub_sorting_option select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:30px;border:1px solid #ddd;font-size:13px;padding-left:7px;padding-right:15px;background-image:url(https://cdn.metoon.co.kr/mimg/ic_select.png);background-size:8px;background-repeat:no-repeat;background-position:95% 70%;background-color:#FFFFFF;border-radius:0;} #container .sub_sorting_option select::-ms-expand{display:none;} #container .sub_sorting_option .sortCate{float:left;} #container .sub_sorting_option .sortCount{float:right;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li{padding:0 0 12px;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li a{display:block; width:100%; position:relative; overflow:hidden; background:#fff; border-width:thin; color:#4e4e4e; border:1px solid #ddd; font-size:1.05em; letter-spacing:-0.09em; font-weight:normal; box-sizing:border-box;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li a .webtoon_img_box{margin:0;float:left; width:45%; max-height:none; position:relative; border-radius:0; border:0; box-sizing:border-box; border-right:1px solid #ddd;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li span{display:block; white-space:normal; padding:0 10px; font-size:1em; margin-top:5px;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .content_tag{bottom:0; padding:0;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .content_tag .content_tag_toon{display:block; float:left; width:auto; z-index:101; background:#fff; border-radius:5px; font-size:12px; padding:1px 2px 0; line-height:1.3; letter-spacing:-0.05em; margin-right:3px;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li img{width:100%; display:block;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li a .webtoon_img_box .patch_div{position:absolute; bottom:5px; right:5px; z-index:99;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li a .webtoon_img_box .patch_div img{width:18px; display:inline-block;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .webtoon_bar_img{position:absolute; top:0; left:0; right:0; bottom:0; margin:0 auto; padding:0; width:100%; border:none;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .adult_19_mark{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:70%;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li #list19_blind{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background:#fff; z-index:100; width:100%; border:none; border-radius:0;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li #list19_blind > div{width:100%; height:100%; position:relative; border:none; border-radius:0;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .patch_box{position:absolute; top:0; right:5px; z-index:9; text-align:right; background:none; border:none; border-radius:0; height:auto; width:auto; letter-spacing:0; font-size:0;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .webtoon_cont_box{padding-top:5px; font-size:1em; width:55%; float:right; letter-spacing:-0.09em;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .on{position:relative;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .on .heart{font-size:1.0em; padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 75%; background-size:13px 11px; color:var(--bg-fc-color);} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .on .txt_tag{position:absolute; top:0; right:12px; padding:0; margin:0;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .on .txt_tag span{display:inline-block; position:relative; padding:0; margin:0;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .on .txt_tag .ic_tag01:after{content:""; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .on .txt_tag .ic_tag01 img{width:24px; position:static;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .on .txt_tag .new_tag:after{border-top:12px solid #46adf2;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .on .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .on .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .webtoon_cont_box dl{width:100%; box-sizing:border-box; padding:0 10px; font-size:1em; margin-top:5px;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .webtoon_cont_box dl dt{font-weight:bold; font-size:1.1em; margin:10px 0 0; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .webtoon_cont_box dl dd{margin-top:5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .writer{margin:5px 0; position:absolute; bottom:5px; right:0px; max-width:45%; font-size:0.95em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #content_wrap #container .webtoon_cont ul.webtoon_line_list{margin-bottom:7px;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li{width:100%; border:1px solid #ddd; background:#fff; overflow:hidden; margin-top:5px; box-sizing:border-box;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li:nth-of-type(even){background:#f4f4f4;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li a{display:block; padding:6px; box-sizing:border-box;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .con_box{width:100%; position:relative;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .img_box{width:80px; position:absolute; top:0; bottom:0; left:0; margin:auto; overflow:hidden;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .img_box img{width:100%; display:block;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .img_box img.list19_blind_mark{width:100%; display:block; position:absolute;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .img_box .webtoon_img{width:100%; display:block; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index:9;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .img_box .adult_19_mark{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:90%;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .img_box .patch_div{position:absolute; bottom:3px; right:3px; z-index:10;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .img_box .patch_div img{width:17px; display:inline-block; position:static;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box{padding:0 0 0 90px; letter-spacing:-0.05em; overflow:hidden; position:relative;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box p{margin-bottom:3px; color:#676767; font-size:0.9em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; max-width:151px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box .title{font-size:1.1em; font-weight:bold; color:#2c2c2c; float:none; max-width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box span{display:inline-block; float:left; margin:0 2%;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box .cont_txt{width:98%; float:left; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; max-width:98%; color:#2c2c2c; margin-bottom:0; margin-top:5px;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li a:after{content:""; display:block; clear:both;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box .on{float:none; margin:0; width:100%;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box .on .heart{font-size:1.0em; padding-left:15px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 75%; background-size:13px 11px; color:var(--bg-fc-color); float:left; margin:0;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box .on .txt_tag{padding:0; margin:0; float:right; padding-right:6px;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box .on .txt_tag span{display:inline-block; position:relative;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box .on .txt_tag .ic_tag01:after{content:""; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box .on .txt_tag .ic_tag01 img{width:24px; position:static; vertical-align:top;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box .on .txt_tag .new_tag:after{border-top:12px solid #46adf2;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box .on .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #content_wrap #container .webtoon_cont ul.webtoon_line_list li .txt_box .on .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #content_wrap #container .webtoon_sale_txt{position:relative; width:94%; margin:0 auto; padding:5px 0 8px; z-index:100;} #content_wrap #container .webtoon_sale_txt a{color:#4a4a4a; text-decoration:underline;} #content_wrap #container .webtoon_sale_txt a img{vertical-align:bottom;} #content_wrap #container .webtoon_sale_txt a.webtoon_pass_notice_txt{color:#262626; letter-spacing:-1px; text-decoration:none; line-height:1; display:inline-block; vertical-align:bottom; position:relative;} #content_wrap #container .webtoon_sale_txt a.webtoon_pass_notice_txt span.wt_pass_ic{display:inline-block; padding:3px 4px 2px; border-radius:3px; font-weight:bold; color:var(--main-ft-color); font-size:9px; text-align:center; vertical-align:bottom; line-height:1; background:var(--bg-fc-color); margin-right:3px;} #content_wrap #container .webtoon_sale_txt a.webtoon_pass_notice_txt > p{display:inline-block; vertical-align:bottom;} #content_wrap #container .webtoon_sale_txt a.webtoon_pass_notice_txt span.wt_pass_color{color:#ca1606; vertical-align:bottom;} #content_wrap #container .webtoon_sale_txt a.webtoon_pass_notice_txt strong{font-weight:bold; vertical-align:bottom;} #content_wrap #container .webtoon_sale_txt .wt_pass_buy{position:absolute; top:50%; right:0; display:inline-block; /*width:65px; text-align:center; height:20px; line-height:20px;*/ padding:6px 10px 5px; line-height:1; color:var(--main-ft-color); font-weight:bold; font-size:12px; background:var(--bg-fc-color); border-radius:3px; margin-top:-11px; margin-right:-74px; overflow:hidden;} .pass_ticket_wrap{position:relative; width:100%;background:#ffffe3;border-bottom:1px solid #e8e8b2; padding:10px 8px;} .pass_ticket_wrap .pt_close{position:absolute; top:50%; right:5px; width:14px; height:14px; margin-top:-8px;} .pass_ticket_wrap .pt_close:before, .pass_ticket_wrap .pt_close:after{content:""; display:block; position:absolute; top:50%; left:0; width:100%; border-top:1px solid #333;} .pass_ticket_wrap .pt_close:before{-webkit-transform:rotate(45deg); transform:rotate(45deg);} .pass_ticket_wrap .pt_close:after{-webkit-transform:rotate(-45deg); transform:rotate(-45deg);} .pass_ticket_wrap p a{display:inline-block; font-size:1em; padding-left:18px; background:url(https://cdn.metoon.co.kr/mimg/ic_saleT.png) no-repeat 0 center; background-size:15px;} #content_wrap .webtoon_list_paging{width:100%; /* height:28px; */ overflow:hidden;font-size:0; text-align:center; padding:5px 0 30px; /* min-width:303px; */ box-sizing:content-box;display:flex;align-items:center;justify-content:center;} #content_wrap .webtoon_list_paging p{width:64px; display:inline-block;} #content_wrap .webtoon_list_paging .webtoon_prevBox{margin-right:1%;} #content_wrap .webtoon_list_paging .webtoon_nextbox{margin-left:1%;} #content_wrap .webtoon_list_paging p span{display:block; float:left; width:32px; height:28px; box-sizing:border-box; background:var(--opt-bg-color); border:1px solid var(--main-line-color); text-align:center; line-height:26px; font-size:12px;} #content_wrap .webtoon_list_paging p span a{color:var(--main-ft-color);cursor:pointer;} #content_wrap .webtoon_list_paging .webtoon_prevBox span{float:right;} #content_wrap .webtoon_list_paging p span a img{vertical-align:middle;} #content_wrap .webtoon_list_paging ol{display:inline-block;display:inline-flex; overflow:hidden; vertical-align:top;} #content_wrap .webtoon_list_paging ol li{display:inline-block; font-size:15px; font-weight:bold; margin:0 3px;} #content_wrap .webtoon_list_paging ol li a{display:inline-block; width:28px; height:28px; line-height:26px; border:1px solid var(--main-line-color); background:var(--sub-bg-color); border-radius:2px; box-sizing:border-box;font-weight:400; color:var(--main-ft-color);} #content_wrap .webtoon_list_paging ol li a.on{border:1px solid var(--main-ft-fc-color); color:var(--main-ft-fc-color); background:var(--opt-bg-color);font-weight:500;} @media all and (min-width:601px){ #content_wrap #container .webtoon_cont ul.webtoon_line_list li{width:49%; float:left; margin:0 0.5% 5px;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li{width:49%; float:left;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li:nth-of-type(odd){margin-right:2%;} } @media all and (min-width:800px){ #content_wrap #container .webtoon_cont ul.webtoon_bar_list li{width:32.3%; float:left; margin:0 1% 5px;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li:nth-of-type(odd){margin-right:0;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li:nth-of-type(even){margin-right:0;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li:nth-of-type(3n){margin-right:0;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .webtoon_cont_box dl dd{text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block;} } @media all and (min-width:1050px){ #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .webtoon_cont_box dl dd{text-overflow:ellipsis; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;} } @media all and (min-width:1200px){ #content_wrap #container .webtoon_cont ul.webtoon_line_list li{width:32.3%; float:left; margin:0 0.5% 5px;} } @media all and (max-width:700px) and (min-width:535px){ #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .webtoon_cont_box dl dd{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;} } @media all and (max-width:600px) and (min-width:535px){ #content_wrap #container .webtoon_cont ul.webtoon_bar_list li{width:49%; float:left;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li:nth-of-type(odd){margin-right:2%;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .on .heart{font-size:1em; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} } @media all and (max-width:600px){ #content_wrap #container .webtoon_cont ul.webtoon_line_list li:first-child{margin-top:0;} } @media all and (max-width:360px) and (min-width:320px){ #content_wrap .webtoon_genre_tab ul li a{font-size:14px;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .webtoon_cont_box dl dt{font-size:1.05em;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .writer{bottom:5px;} } @media all and (max-width:350px) and (min-width:320px){ #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .on{min-height:0; margin-top:2px;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .on .heart{margin-top:0;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .webtoon_cont_box dl{padding:0 10px;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .webtoon_cont_box dl dt{min-height:0; margin-top:5px;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .webtoon_cont_box dl dd{min-height:50px; max-height:100px; padding:1px 0;} #content_wrap #container .webtoon_cont ul.webtoon_bar_list li .writer{min-height:0; display:inline-block;} } @media all and (max-width:340px){ #content_wrap #container .webtoon_set_box #SetCate{width:115px; padding-left:3px;} #content_wrap #container .webtoon_set_box #SetList{width:80px; padding-left:3px;} #content_wrap #container .webtoon_set_box #orderby{padding-left:3px;} } /* 웹툰 리뉴얼 2018/07/03 END */ /* 음성서비스 2018/07/06 */ #view_content_wrap .view_cont_wrap .title .tts_side_btn{border:0; padding:0; background:transparent; position:absolute; top:0; right:0; font-size:14px; line-height:20px; margin-top:25px; color:#666666;} #view_content_wrap .view_cont_wrap .title .tts_side_btn b{vertical-align:top; position:relative; padding-left:22px;} #view_content_wrap .view_cont_wrap .title .tts_side_btn b:before{content:""; position:absolute; top:0; bottom:0; left:0; margin:auto; width:16px; height:16px; border-radius:20px; border:1px solid #666; background:url(https://cdn.metoon.co.kr/mimg/tts_icon.png) no-repeat center; background-size:12px;} #view_content_wrap .view_cont_wrap .title .tts_stop2 b:before{animation:btnTwink 1.5s infinite; -webkit-animation:btnTwink 1.5s infinite; -moz-animation:btnTwink 1.5s infinite; animation-timing-function:linear; -webkit-animation-timing-function:linear; -moz-animation-timing-function:linear;} @keyframes btnTwink{ 0%{opacity:1;} 50%{opacity:0.2;} 100%{opacity:1;} } #view_content_wrap .view_cont_wrap .title .tts_stop2 b{color:var(--bg-fc-color);} #view_content_wrap .view_cont_wrap .title .tts_stop2 b:before{content:""; position:absolute; top:0; bottom:0; left:0; margin:auto; width:16px; height:16px; border-radius:20px; border:1px solid var(--bg-fc-color); background:url(https://cdn.metoon.co.kr/mimg/tts_speak_icon.png) no-repeat center; background-size:12px;} .tts_stop_layer{width:96%; box-sizing:border-box; padding:10px 0; background:rgba(0, 0, 0, 0.8); border-radius:5px; text-align:center; font-size:16px; color:var(--main-ft-color); font-weight:normal; position:fixed; bottom:60px; left:0; right:0; margin:auto; z-index:10000;} .tts_stop_layer span{font-weight:bold; color:#0ee9e6;} #view_header .view_control_menu .tts_control_box{width:100%; position:relative; border-top:1px solid #ddd; padding:5px 0;} #view_header .view_control_menu .tts_control_box h5{color:#676767; padding:5px; font-size:1.1em; font-weight:normal; letter-spacing:-0.09em; text-align:center; text-indent:10px; background:url(https://cdn.metoon.co.kr/mimg/tts_icon2.png) no-repeat 10px center; background-size:20px;} #view_header .view_control_menu .tts_control_box .tts_rate_box{text-align:center; width:100%; height:30px; position:relative; margin:5px auto;} #view_header .view_control_menu .tts_control_box .tts_rate_box a{position:absolute; top:0; bottom:0; margin:auto; display:inline-block; text-indent:-99999999em; overflow:hidden; width:22px; height:22px;} #view_header .view_control_menu .tts_control_box .tts_rate_box .rate_down{left:15px; background:url(https://cdn.metoon.co.kr/mimg/icon_font_minus.png) no-repeat 0 center; background-size:22px;} #view_header .view_control_menu .tts_control_box .tts_rate_box .rate_up{right:15px; background:url(https://cdn.metoon.co.kr/mimg/icon_font_plus.png) no-repeat 0 center; background-size:22px;} #view_header .view_control_menu .tts_control_box .tts_rate_box p{font-size:16px; padding-top:5px; letter-spacing:-0.05em; display:inline-block;} #view_header .view_control_menu .tts_control_box .tts_rate_box .speech_rate_box{position:absolute; top:0; right:0; margin-right:-9999px; opacity:0;} #view_header .view_control_menu .tts_control_box .tts_btn_box{text-align:center; width:100%; height:30px; position:relative; margin:10px auto 5px;} #view_header .view_control_menu .tts_control_box .tts_btn_box button{display:inline-block; width:100px; text-align:center; height:30px; line-height:30px; font-size:14px; font-weight:bold; border:none; background:var(--bg-fc-color); color:var(--main-ft-color); border-radius:3px;} #view_header .view_control_menu .tts_control_box .tts_btn_box .tts_play{border:2px solid var(--bg-fc-color); background:transparent; line-height:26px; box-sizing:border-box; color:var(--bg-fc-color);} /* 음성서비스 2018/07/06 END */ /* 인기, 연재, 완결 리뉴얼 2018/08/02 */ #sub_popular .popular_radio #SetCate{width:120px; height:30px; border:1px solid #ddd; font-size:13px; line-height:normal; color:#676767; padding:2px 3px; padding-left:7px; overflow:hidden; float:left; background:url(https://cdn.metoon.co.kr/mimg/ic_select.png) no-repeat 95% 70%,#fff; background-size:8px; appearance:none; -webkit-appearance:none; -moz-appearance:none;} #sub_popular .popular_radio #SetCate::-ms-expand{display:none;} @media all and (max-width:375px){ #order_tab li{width:50px !important; white-space:nowrap;} #order_tab_re li{width:50px !important; white-space:nowrap;} } @media all and (max-width:340px){ #order_tab li{width:46px !important;} #order_tab_re li{width:46px !important;} } @media all and (max-width:320px){ #order_tab li{width:50px !important;} #order_tab_re li{width:50px !important;} } /* 인기, 연재, 완결 리뉴얼 2018/08/02 END */ /* 연재 페이징 2018/08/16 */ #sub_today .m_today_page_list{width:100%; height:28px; overflow:hidden; text-align:center; padding:7px 0 30px; min-width:303px; box-sizing:content-box;} #sub_today .m_today_page_list p{width:64px; display:inline-block;} #sub_today .m_today_page_list .m_ebook_prevbox{margin-right:1%;} #sub_today .m_today_page_list .m_ebook_nextbox{margin-left:1%;} #sub_today .m_today_page_list p span{display:block; float:left; width:32px; height:28px; box-sizing:border-box; background:#fff; border:1px solid #ddd; text-align:center; line-height:26px; font-size:12px;} #sub_today .m_today_page_list p span a{color:#676767;} #sub_today .m_today_page_list .m_ebook_prevbox span{float:right;} #sub_today .m_today_page_list p span a img{vertical-align:middle;} #sub_today .m_today_page_list ol{display:inline-block; overflow:hidden; vertical-align:top;} #sub_today .m_today_page_list ol li{display:inline-block; font-size:1.2em; font-weight:bold; margin:0 3px;} #sub_today .m_today_page_list ol li a{display:inline-block; width:28px; height:28px; line-height:26px; border:1px solid #ddd; background:#e9e5e5; border-radius:2px; box-sizing:border-box; color:#676767;} #sub_today .m_today_page_list ol li a.on{border:1px solid var(--bg-fc-color); color:var(--bg-fc-color); background:#fff;} /* 연재 페이징 2018/08/16 END */ /* 인기 리뉴얼 2018/08/17 */ #sub_popular .popular_radio .popular_switch_btn{width:30px; height:30px; border:1px solid #ddd; text-align:center; float:right; margin-left:5px; background:url(https://cdn.metoon.co.kr/mimg/switch_view_2.png) no-repeat center, #fff; background-size:20px; cursor:pointer; text-indent:-9999px;} #sub_popular .popular_radio .popular_switch_btn.on1{background:url(https://cdn.metoon.co.kr/mimg/switch_view_1.png) no-repeat center, #fff; background-size:20px;} #sub_popular .popular_radio .popular_switch_btn.on2{background:url(https://cdn.metoon.co.kr/mimg/switch_view_3.png) no-repeat center, #fff; background-size:20px;} #sub_popular .popular_box_list li{width:98%; margin:0 auto; padding:0 0 12px;} #sub_popular .popular_box_list li a{display:block; width:100%; position:relative; overflow:hidden; background:#fff; border-width:thin; color:#4e4e4e; border:1px solid #ddd; font-size:1.05em; letter-spacing:-0.09em; font-weight:normal; box-sizing:border-box;} #sub_popular .popular_box_list li a .popular_img_box{margin:0;float:left; width:45%; max-height:none; position:relative; border-radius:0; border:0; box-sizing:border-box; border-right:1px solid #ddd;} #sub_popular .popular_box_list li span{display:block; white-space:normal; padding:0 10px; font-size:1em; margin-top:5px;} #sub_popular .popular_box_list li .content_tag{width:auto; background:none; position:absolute; right:auto; top:auto; bottom:5px; left:5px; z-index:101; padding:0;} #sub_popular .popular_box_list li .content_tag span{display:block; float: left; width:auto; z-index:101; background:#fff; border-radius:3px; font-size:12px; padding:1px 2px 0px; line-height: 1.3; letter-spacing:-0.05em; margin-right:3px;} #sub_popular .popular_box_list li .content_tag .content_tag_toon{display:block; float:left; width:auto; z-index:101; background:#fff; border-radius:5px; font-size:12px; padding:1px 2px 0; line-height:1.3; letter-spacing:-0.05em; margin-right:3px;} #sub_popular .popular_box_list li img{width:100%; display:block;} #sub_popular .popular_box_list li a .popular_img_box .icon_19_patch{width:18px !important; position:absolute; bottom:5px; right:5px; z-index:99;} #sub_popular .popular_box_list li .popular_box_img{position:absolute; top:0; left:0; right:0; bottom:0; margin:0 auto; padding:0; width:100%; border:none;} #sub_popular .popular_box_list li .ebook_imgbox{position:absolute; top:0; left:0; width:100%; height:100%;} #sub_popular .popular_box_list li .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #sub_popular .popular_box_list li .ebook_imgbox .popular_box_img{opacity:0.2;} #sub_popular .popular_box_list li .ebook_imgbox .popular_ebook_img{position:absolute; width:75%; top:0; left:0; right:0; bottom:0; margin:auto; opacity:0.9999; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} #sub_popular .popular_box_list li .adult_19_mark{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:70%;} #sub_popular .popular_box_list li .patch_box{position:absolute; top:0; right:5px; z-index:9; text-align:right; background:none; border:none; border-radius:0; height:auto; width:auto; letter-spacing:0; font-size:0;} #sub_popular .popular_box_list li .popular_cont_box{padding-top:5px; font-size:1em; width:55%; float:right; letter-spacing:-0.09em;} #sub_popular .popular_box_list li .on{position:relative;} #sub_popular .popular_box_list li .on .heart{font-size:1.0em; padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 75%; background-size:13px 11px; color:var(--bg-fc-color);} #sub_popular .popular_box_list li .on .txt_tag{position:absolute; top:0; left:auto; bottom:auto; right:10px; padding:0 3px 0 0; margin:0;} #sub_popular .popular_box_list li .on .txt_tag > span{display:inline-block; position:relative;} #sub_popular .popular_box_list li .on .txt_tag > span > span{padding:0 2px; padding-left:14px; display:inline-block; position:relative;} #sub_popular .popular_box_list li .on .txt_tag .ic_tag01:after{content:""; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #sub_popular .popular_box_list li .on .txt_tag .ic_tag01 img{width:24px; position:static;} #sub_popular .popular_box_list li .on .txt_tag .new_tag:after{border-top:12px solid #46adf2;} #sub_popular .popular_box_list li .on .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #sub_popular .popular_box_list li .on .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #sub_popular .popular_box_list li .on .txt_tag .end_txt_tag{border:1px solid #7d52e0; color:#7d52e0; background:#fff;} #sub_popular .popular_box_list li .on .txt_tag .end_txt_tag span{padding:0;} #sub_popular .popular_box_list li .popular_cont_box dl{width:100%; box-sizing:border-box; padding:0 10px; font-size:1em; margin-top:5px;} #sub_popular .popular_box_list li .popular_cont_box dl dt{font-weight:bold; font-size:1.1em; margin:10px 0 0; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} #sub_popular .popular_box_list li .popular_cont_box dl dd{margin-top:5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} #sub_popular .popular_box_list li .writer{margin:5px 0; position:absolute; bottom:5px; right:0px; max-width:45%; font-size:0.95em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #sub_popular .popular_box_list li a .rank_num{width:25px; padding:4px 0 3px; text-align:center; margin:0; font-size:12px; font-weight:bold; position:absolute; top:0; left:-1px; color:var(--main-ft-color); background-color:#ed1c24;} #sub_popular .popular_box_list li a .blackLabel{width:25px; padding:4px 0 3px; text-align:center; margin:0; font-size:12px; font-weight:bold; position:absolute; top:0; left:-1px; color:var(--main-ft-color); background-color:#414141;} #sub_popular .popular_box_list li .content_tag .chat_tag{background-color:#ff8f00; color:var(--main-ft-color); border:1px solid #ff8f00; padding:1px 3px 0px !important; font-weight:normal;} #sub_popular .popular_box_list li .content_tag .chat_tag:after{content:none;} #sub_popular .popular_line_list{width:98%; margin:0 auto 7px;} #sub_popular .popular_line_list li{width:100%; border:1px solid #ddd; background:#fff; overflow:hidden; margin-top:5px; box-sizing:border-box;} #sub_popular .popular_line_list li:nth-of-type(even){background:#f4f4f4;} #sub_popular .popular_line_list li a{display:block; padding:6px; box-sizing:border-box;} #sub_popular .popular_line_list li .con_box{width:100%; position:relative;} #sub_popular .popular_line_list li .img_box{width:80px; position:absolute; top:0; bottom:0; left:0; margin:auto; overflow:hidden;} #sub_popular .popular_line_list li .img_box img{width:100%; display:block;} #sub_popular .popular_line_list li .img_box img.list19_blind_mark{width:100%; display:block; position:absolute;} #sub_popular .popular_line_list li .img_box .popular_line_img{width:100%; display:block; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index:9;} #sub_popular .popular_line_list li .ebook_imgbox{position:absolute; top:0; left:0; width:100%; height:100%;} #sub_popular .popular_line_list li .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #sub_popular .popular_line_list li .ebook_imgbox .popular_line_img{opacity:0.2;} #sub_popular .popular_line_list li .ebook_imgbox .popular_ebook_img{position:absolute; width:65%; top:0; left:0; right:0; bottom:0; margin:auto; opacity:0.9999; z-index:9; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} #sub_popular .popular_line_list li .img_box .adult_19_mark{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:90%;} #sub_popular .popular_line_list li .img_box .icon_19_patch{position:absolute; bottom:3px; right:3px; width:18px; z-index:10;} #sub_popular .popular_line_list li .txt_box{padding:0 0 0 90px; letter-spacing:-0.05em; overflow:hidden; position:relative;} #sub_popular .popular_line_list li .txt_box p{margin-bottom:3px; color:#676767; font-size:0.9em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; max-width:151px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} #sub_popular .popular_line_list li .txt_box .title{font-size:1.1em; font-weight:bold; color:#2c2c2c; float:none; max-width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #sub_popular .popular_line_list li .txt_box span{display:inline-block; float:left; margin:0 2%;} #sub_popular .popular_line_list li .txt_box .cont_txt{width:98%; float:left; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; max-width:98%; color:#2c2c2c; margin-bottom:0; margin-top:5px;} #sub_popular .popular_line_list li a:after{content:""; display:block; clear:both;} #sub_popular .popular_line_list li .txt_box .on{float:none; margin:0; width:100%;} #sub_popular .popular_line_list li .txt_box .on .heart{font-size:1.0em; padding-left:15px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 75%; background-size:13px 11px; color:var(--bg-fc-color); float:left; margin:0;} #sub_popular .popular_line_list li .txt_box .on .txt_tag{padding:0; margin:0; float:right; position:static; padding-right:6px;} #sub_popular .popular_line_list li .txt_box .on .txt_tag span{position:relative; display:inline-block;} #sub_popular .popular_line_list li .txt_box .on .txt_tag .ic_tag01:after{content:""; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #sub_popular .popular_line_list li .txt_box .on .txt_tag .ic_tag01 img{width:24px; position:static;} #sub_popular .popular_line_list li .txt_box .on .txt_tag .new_tag:after{border-top:12px solid #46adf2;} #sub_popular .popular_line_list li .txt_box .on .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #sub_popular .popular_line_list li .txt_box .on .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #sub_popular .popular_line_list li .txt_box .on .txt_tag .up_txt_tag{margin-left:3px;} #sub_popular .popular_line_list li a .rank_num{width:25px; padding:4px 0 3px; text-align:center; margin:0; font-size:12px; font-weight:bold; position:absolute; top:-6px; left:-6px; color:var(--main-ft-color); background-color:#ed1c24; z-index:10;} #sub_popular .popular_line_list li a .blackLabel{width:25px; padding:4px 0 3px; text-align:center; margin:0; font-size:12px; font-weight:bold; position:absolute; top:-6px; left:-6px; color:var(--main-ft-color); background-color:#414141; z-index:10;} #sub_popular .popular_cont ul li .txt_tag .up_txt_tag span{padding:0;} #sub_popular .popular_list_paging{width:100%; height:28px; overflow:hidden; text-align:center; padding:7px 0 30px; min-width:303px; box-sizing:content-box;} #sub_popular .popular_list_paging p{width:64px; display:inline-block;} #sub_popular .popular_list_paging .popular_prevBox{margin-right:1%;} #sub_popular .popular_list_paging .popular_nextBox{margin-left:1%;} #sub_popular .popular_list_paging p span{display:block; float:left; width:32px; height:28px; box-sizing:border-box; background:#fff; border:1px solid #ddd; text-align:center; line-height:26px; font-size:12px;} #sub_popular .popular_list_paging p span a{color:#676767;} #sub_popular .popular_list_paging .popular_prevBox span{float:right;} #sub_popular .popular_list_paging p span a img{vertical-align:middle;} #sub_popular .popular_list_paging ol{display:inline-block; overflow:hidden; vertical-align:top;} #sub_popular .popular_list_paging ol li{display:inline-block; font-size:1.2em; font-weight:bold; margin:0 3px;} #sub_popular .popular_list_paging ol li a{display:inline-block; width:28px; height:28px; line-height:26px; border:1px solid #ddd; background:#e9e5e5; border-radius:2px; box-sizing:border-box; color:#676767;} #sub_popular .popular_list_paging ol li a.on{border:1px solid var(--bg-fc-color); color:var(--bg-fc-color); background:#fff;} #sub_popular .popular_cont .popular_line_list li .txt_box .on .txt_tag .up_txt_tag span{padding:0;} #sub_popular .popular_top10_list li .blackLabel {width: 25px; padding:4px 0 3px; text-align: center; margin: 0; font-size: 12px; font-weight: bold; position: absolute; top: 0; left: -1px; color: #fff; background: #414141;} @media all and (min-width:601px){ #sub_popular .popular_line_list li{width:49%; float:left; margin:0 0.5% 5px;} #sub_popular .popular_box_list li{width:49%; float:left;} #sub_popular .popular_box_list li:nth-of-type(odd){margin-right:2%;} } @media all and (min-width:800px){ #sub_popular .popular_box_list li{width:32.3%; float:left; margin:0 1% 5px;} #sub_popular .popular_box_list li:nth-of-type(odd){margin-right:0;} #sub_popular .popular_box_list li:nth-of-type(even){margin-right:0;} #sub_popular .popular_box_list li:nth-of-type(3n){margin-right:0;} #sub_popular .popular_box_list li .popular_cont_box dl dd{text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block;} } @media all and (min-width:1050px){ #sub_popular .popular_box_list li .popular_cont_box dl dd{text-overflow:ellipsis; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;} } @media all and (min-width:1200px){ #sub_popular .popular_line_list li{width:32.3%; float:left; margin:0 0.5% 5px;} } @media all and (max-width:700px) and (min-width:535px){ #sub_popular .popular_box_list li .popular_cont_box dl dd{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;} } @media all and (max-width:600px) and (min-width:535px){ #sub_popular .popular_box_list li{width:49%; float:left;} #sub_popular .popular_box_list li:nth-of-type(odd){margin-right:2%;} #sub_popular .popular_box_list li .on .heart{font-size:1em; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} } @media all and (max-width:600px){ #sub_popular .popular_line_list li:first-child{margin-top:0;} } @media all and (max-width:360px) and (min-width:320px){ #sub_popular .popular_box_list li .popular_cont_box dl dt{font-size:1.05em;} #sub_popular .popular_box_list li .writer{bottom:5px;} } @media all and (max-width:350px) and (min-width:320px){ #sub_popular .popular_box_list li .on{min-height:0; margin-top:2px;} #sub_popular .popular_box_list li .on .heart{margin-top:0;} #sub_popular .popular_box_list li .popular_cont_box dl{padding:0 10px;} #sub_popular .popular_box_list li .popular_cont_box dl dt{min-height:0; margin-top:5px;} #sub_popular .popular_box_list li .popular_cont_box dl dd{min-height:50px; max-height:100px; padding:1px 0;} #sub_popular .popular_box_list li .writer{min-height:0; display:inline-block;} } @media all and (max-width:340px){ #gender_tab{margin:0 0 0 2px;} #sub_popular .popular_radio #SetCate{width:110px; padding-left:3px;} #sub_popular .popular_radio fieldset{margin-left:2px;} #sub_popular .popular_radio select{padding-left:3px;} } /* 인기 리뉴얼 2018/08/17 END */ /* 연재 리뉴얼 2018/08/17 */ #sub_today .today_cont .today_cont_list li .ebook_imgbox{position:absolute; top:0; left:0; width:100%; height:100%; border-radius:6px 0 0 6px;} #sub_today .today_cont .today_cont_list li .ebook_imgbox .novel_img{opacity:0.2;} #sub_today .today_cont .today_cont_list li .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #sub_today .today_cont .today_cont_list li .ebook_cover{width:75%; top:0; left:0; right:0; bottom:0; margin:auto; opacity:0.9999; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} .best_banner{width:100%; display:none; overflow:hidden;} .best_banner .content_tag{top:5px; right:5px;} .best_banner ul{width:100%; box-sizing:border-box; padding:10px 0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} .best_banner ul li{position:relative; float:left; background:#fff; width:100px; margin:0 5px; font-size:12px; box-sizing:border-box;} .best_banner ul li a{display:block; width:100%;} .best_banner ul li a .thumb_box{position:relative; width:100%; height:108px; overflow:hidden; box-sizing:border-box; -webkit-box-sizing:border-box; border:1px solid #ddd; transition:border .3s ease-in-out; -webkit-transition:border .3s ease-in-out;} .best_banner ul li.slick-center a .thumb_box{border:1px solid #ed1c24;} .best_banner ul li a .thumb_box .thumb_tag{position:absolute; top:3px; left:3px; display:block; width:25px; height:14px; border-radius:3px; background-color:#FFFFFF; text-align:center; line-height:14px; font-size:11px; font-weight:normal;} .best_banner ul li a .thumb_box .tag_webtoon{border:1px solid #fc5863; color:#fc5863;} .best_banner ul li a .thumb_box .tag_novel{border:1px solid #2b90e1; color:#2b90e1;} .best_banner ul li a .thumb_box .tag_ebook{border:1px solid #0096a6; color:#0096a6;} .best_banner ul li a .thumb_box img{width:100%;} .best_banner ul li a > p{white-space:nowrap; overflow:hidden; max-width:100%; text-overflow:ellipsis; box-sizing:border-box; -webkit-box-sizing:border-box; padding:4px 0 0; text-align:center; font-size:1em;} .best_banner ul li a > p .tag_box{display:inline-block; line-height:1; vertical-align:top;} .best_banner ul li a > p .tag_box span{display:block; font-size:10px; width:14px; height:14px; line-height:14px; border-radius:3px; text-align:center;} .best_banner ul li a > p .tag_box .best_tag_s{background:#388afd; color:var(--main-ft-color);} .best_banner ul li a > p .tag_box .hot_tag_s{background:#e61e3f; color:var(--main-ft-color);} .best_banner ul li a > p .tag_box .new_tag_s{background:#721de3; color:var(--main-ft-color);} /* .best_banner{width:100%; display:none; overflow:hidden;} .best_banner .content_tag{top:5px; right:5px;} .best_banner ul{width:100%; box-sizing:border-box; padding:10px 0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} .best_banner ul li{position:relative; float:left; border-radius:7px; background:#fff; width:100px; margin:0 3px; font-size:12px; box-sizing:border-box;} .best_banner ul li .bestbanner_border{display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:2px solid #fff; border-radius:5px; box-sizing:border-box; background:transparent; transition:all 1s cubic-bezier(1,-0.1, 0.29, 2.04); -webkit-transition:all 1s cubic-bezier(1,-0.1, 0.29, 2.04); -moz-transition:all 2s ease; -o-transition:all 2s ease; z-index:10;} .best_banner ul .slick-list{height:100%; overflow:visible;} .best_banner ul li a{position:relative; display:block; padding:0; box-sizing:border-box; background:#fff; position:relative; width:100%; margin:0 auto; color:#4e4e4e; font-weight:normal; font-size:1em; letter-spacing:-0.09em; border-radius:7px; overflow:hidden;} .best_banner ul .slick-center .bestbanner_border{display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:2px solid var(--bg-fc-color); border-radius:6px; box-sizing:border-box; background:transparent; transition:all 1s cubic-bezier(1,-0.1, 0.29, 2.04); -webkit-transition:all 1s cubic-bezier(1,-0.1, 0.29, 2.04); -moz-transition:all 2.5s ease; -o-transition:all 2.5s ease; animation:2.5s activeBD forwards; z-index:10;} @keyframes activeBD{ 0%{margin-left:0;} 15%{margin-left:0;} 33%{margin-left:5px;} 38%{margin-left:3px;} 39%{margin-left:2px;} 40%{margin-left:1px;} 41%{margin-left:0;} 100%{margin-left:0;} } .best_banner ul li a > div{width:100%; margin:0 auto; position:relative; overflow:hidden; border-radius:2px;} .best_banner ul li a > div img{width:100%; display:block; border-radius:0;} .best_banner ul li a > div .best_img{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index:9;} .best_banner ul li a > div .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} .best_banner ul li a > div .ebook_imgbox .best_img{opacity:0.2;} .best_banner ul li a > div .ebook_imgbox .ebook_cover{position:absolute; width:73%; top:0; left:0; right:0; bottom:0; margin:auto; z-index:9; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} .best_banner ul li a > div .best_title{color:var(--main-ft-color); display:block; font-size:1em; font-weight:bold; position:absolute; bottom:7px; right:5px; max-width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:10;} .best_banner ul li a > div .tag_box{position:absolute; bottom:0; left:2px; padding:0; margin:0 0 5px; z-index:10;} .best_banner ul li a > div .tag_box span{line-height:1.3; display:inline-block; text-align:center; vertical-align:text-top; margin:0 0 0 3px; border-radius:3px; font-size:0.9em; font-weight:bold; box-sizing:border-box; padding:0 3px; position:relative;} .best_banner ul li a > div .tag_box span img{position:absolute; top:-2px; bottom:0; left:0; margin:auto; width:11px; display:block;} .best_banner ul li a > div .tag_box .best_tag_s{border:1px solid #388afd; background:#388afd; width:auto; color:var(--main-ft-color);} .best_banner ul li a > div .tag_box .hot_tag_s{border:1px solid #e61e3f; background:#e61e3f; color:var(--main-ft-color); width:auto;} .best_banner ul li a > div .tag_box .new_tag_s{border:1px solid #721de3; background:#721de3; width:auto; color:var(--main-ft-color);} .best_banner ul li a .img_backbox{position:absolute; top:0; left:0; right:0; height:100%; background:url(https://cdn.metoon.co.kr/mimg/img_back_sm4.png) repeat-x 100% 100%; background-size:100% 100%; z-index:9;} .best_banner ul li a .txt_box{width:100%; padding:5px 5px 25px; position:relative;} .best_banner ul li a .txt_box p{color:#2d2d2d; margin:auto; width:100%; text-align:left; font-size:1.1em; font-weight:bold; letter-spacing:-0.1em; max-height:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .best_banner ul li a .txt_box p .best_title{max-width:none; color:#2d2d2d; display:inline-block; font-size:0.85em; font-weight:normal; position:absolute; bottom:7px; left:5px; background:#fff;} */ #content_wrap .best_sale_txt{width:94%; overflow:hidden; margin:5px auto 7px; padding:0;} #content_wrap .best_sale_txt a{color:#4a4a4a; text-decoration:underline;} /* 연재 스위치 버튼 */ #sub_today .today_switch_btn{width:30px; height:30px; border:1px solid #ddd; text-align:center; float:right; background:url('https://cdn.metoon.co.kr/mimg/switch_view_2.png') no-repeat center, #fff; background-size:20px; cursor:pointer; margin-left:5px; text-indent:-9999px;} #sub_today .today_switch_btn.on1{background:url('https://cdn.metoon.co.kr/mimg/switch_view_1.png') no-repeat center, #fff; background-size:20px;} #sub_today .today_switch_btn.on2{background:url('https://cdn.metoon.co.kr/mimg/switch_view_3.png') no-repeat center, #fff; background-size:20px;} /* today_cont2 */ #sub_today .today_cont .today_cont_list2{width:96%; overflow:hidden; margin:0 auto;} #sub_today .today_cont .today_cont_list2 li{width:100%; border:1px solid #ddd; background:#fff; overflow:hidden; margin-top:5px; box-sizing:border-box;} #sub_today .today_cont .today_cont_list2 li a{display:block; padding:6px; box-sizing:border-box;} #sub_today .today_cont .today_cont_list2 li a:after{content:""; display:block; clear:both;} #sub_today .today_cont .today_cont_list2 li a .con_box{width:100%; position:relative;} #sub_today .today_cont .today_cont_list2 li a .img_box{width:80px; position:absolute; top:0; bottom:0; left:0; margin:auto; overflow:hidden;} #sub_today .today_cont .today_cont_list2 li a .img_box img{width:100%; display:block;} #sub_today .today_cont .today_cont_list2 li a .img_box .today_img{width:100%; display:block; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index:9;} #sub_today .today_cont .today_cont_list2 li a .img_box .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #sub_today .today_cont .today_cont_list2 li a .img_box .ebook_imgbox .today_img{opacity:0.2;} #sub_today .today_cont .today_cont_list2 li a .img_box .ebook_imgbox .ebook_cover{position:absolute; width:67%; top:0; left:0; right:0; bottom:0; margin:auto; z-index:9; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} #sub_today .today_cont .today_cont_list2 li a .txt_box{padding:0 0 0 90px; letter-spacing:-0.05em; overflow:hidden; position:relative;} #sub_today .today_cont .today_cont_list2 li a .txt_box span{display:inline-block; float:left; margin:0 2%;} #sub_today .today_cont .today_cont_list2 li a .txt_box .on{float:none; margin:0; width:100%;} #sub_today .today_cont .today_cont_list2 li a .txt_box .on .txt_tag{padding:0; margin:0; float:right; padding-right:6px;} #sub_today .today_cont .today_cont_list2 li a .txt_box .on .txt_tag span{display:inline-block; position:relative;} #sub_today .today_cont .today_cont_list2 li a .txt_box .on .txt_tag .ic_tag01:after{content:""; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #sub_today .today_cont .today_cont_list2 li a .txt_box .on .txt_tag .ic_tag01 img{width:24px; position:static; vertical-align:top;} #sub_today .today_cont .today_cont_list2 li a .txt_box .on .txt_tag .new_tag:after{border-top:12px solid #46adf2;} #sub_today .today_cont .today_cont_list2 li a .txt_box .on .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #sub_today .today_cont .today_cont_list2 li a .txt_box .on .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #sub_today .today_cont .today_cont_list2 li a .img_box .patch_div{position:absolute; bottom:3px; right:3px; z-index:10;} #sub_today .today_cont .today_cont_list2 li a .img_box .patch_div img{width:18px; position:static; display:inline-block;} #sub_today .today_cont .today_cont_list2 li a .txt_box .on .heart{font-size:1em; padding-left:15px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 75%; background-size:13px 11px; color:var(--bg-fc-color); float:left; margin:0;} #sub_today .today_cont .today_cont_list2 li a .txt_box p{margin-bottom:3px; color:#676767; font-size:0.9em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; max-width:151px; } #sub_today .today_cont .today_cont_list2 li a .txt_box .title{font-size:1.1em; font-weight:bold; color:#2c2c2c; float:none; max-width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #sub_today .today_cont .today_cont_list2 li a .txt_box .cont_txt{width:98%; float:left; text-overflow:hidden; max-width:98%; color:#2c2c2c; margin-bottom:0; margin-top:5px;} /* today_cont3 */ #sub_today .today_cont .today_cont_list3{width:100%; overflow:hidden; margin:0 auto; padding:0 4px; -webkit-box-sizing:border-box; box-sizing:border-box;} #sub_today .today_cont .today_cont_list3 li{width:33.333%; padding:0 4px 8px; float:left; -webkit-box-sizing:border-box; box-sizing:border-box;} #sub_today .today_cont .today_cont_list3 li a{display:block; width:100%; box-sizing:border-box; border:1px solid #ddd; background:#fff; position:relative; overflow:hidden;} #sub_today .today_cont .today_cont_list3 li a .today_imgbox{width:100%; overflow:hidden; position:relative;} #sub_today .today_cont .today_cont_list3 li a .today_imgbox img{width:100%; display:block;} #sub_today .today_cont .today_cont_list3 li a .today_img{width:100%; position:absolute; top:0; left:0; z-index:2;} #sub_today .today_cont .today_cont_list3 li a .today_imgbox .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #sub_today .today_cont .today_cont_list3 li a .today_imgbox .ebook_imgbox .today_img{opacity:0.2;} #sub_today .today_cont .today_cont_list3 li a .today_imgbox .ebook_imgbox .ebook_cover{position:absolute; width:70%; top:0; left:0; right:0; bottom:0; margin:auto; z-index:2; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} #sub_today .today_cont .today_cont_list3 li a .txt_tag{position:absolute; top:0; left:0; padding:0; margin:10px 0 0; z-index:3;} #sub_today .today_cont .today_cont_list3 li a .txt_tag span{position:relative; display:inline-block; text-align:center; vertical-align:text-top;} #sub_today .today_cont .today_cont_list3 li a .txt_tag span img{width:24px; display:block;} #sub_today .today_cont .today_cont_list3 li a .txt_tag span:after{content:""; display:block; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #sub_today .today_cont .today_cont_list3 li a .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #sub_today .today_cont .today_cont_list3 li a .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #sub_today .today_cont .today_cont_list3 li a .txt_tag .new_tag:after{border-top:12px solid #46adf2;} #sub_today .today_cont .today_cont_list3 li a .txt_tag .end_txt_tag{border:1px solid #7d52e0; color:#7d52e0; background:#fff; padding:0 4px 2px 0;} #sub_today .today_cont .today_cont_list3 li a .txt_tag .end_txt_tag span{padding:0;} #sub_today .today_cont .today_cont_list3 li a .tag_list3{position:absolute; top:7px; right:5px; border-radius:3px; padding:1px 2px 0; line-height:1.3; letter-spacing:-0.05em; background:#fff; font-size:11px;font-weight:normal; z-index:2;} #sub_today .today_cont .today_cont_list3 li a .today_txt{width:100%; overflow:hidden; background:rgba(255, 255, 255, 1); box-sizing:border-box; color:#2c2c2c; padding:5px; line-height:1.1; border-top:1px solid #ddd;} #sub_today .today_cont .today_cont_list3 li a .today_txt .title{width:100%; font-size:1em; font-weight:bold; padding-bottom:5px; text-overflow:ellipsis; white-space:nowrap;overflow:hidden;} #sub_today .today_cont .today_cont_list3 li a .today_txt dd{width:100%; font-size:0.82em; font-weight:normal; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #sub_today .today_cont .today_cont_list3 li a .today_txt .text{padding-bottom:2px;} #sub_today .today_cont .today_cont_list3 li a .today_txt dd .wr_tag{display:block; float:left; font-size:10px; padding:3px 5px; background:#ffdcfd; color:#e743ce; font-weight:bold; line-height:1; margin-right:5px;} #sub_today .today_cont .today_cont_list3 li a .today_imgbox .patch_box{position:absolute; bottom:5px; right:5px; z-index:12;} #sub_today .today_cont .today_cont_list3 li a .today_imgbox .patch_box img{display:inline-block; width:18px;} @media all and (max-width:600px) { #sub_today .today_cont .today_cont_list2 li:first-child{margin-top:0;} } @media all and (max-width:400px) and (min-width:375px){ #order_tab li{width:50px !important;} #order_tab_re li{width:50px !important;} } @media all and (max-width:380px){ #sub_today .today_cont .today_cont_list3 li{width:50%;} #sub_today .today_cont .today_cont_list3 li a .webtoon_txt .title{font-size:1.1em;} #sub_today .today_cont .today_cont_list3 li a .webtoon_txt dd{font-size:0.87em;} } @media all and (max-width:360px){ #sub_today #order_tab .webtoon, #sub_today #order_tab .ebook{width:45px !important;} #sub_today #order_tab_re .webtoon, #sub_today #order_tab_re .ebook{width:45px !important;} } @media all and (max-width:350px){ #sub_today #order_tab .webtoon, #sub_today #order_tab .ebook{width:40px !important;} #sub_today #order_tab_re .webtoon, #sub_today #order_tab_re .ebook{width:40px !important;} } @media all and (max-width:330px){ #sub_today #order_tab .webtoon, #sub_today #order_tab .ebook{width:35px !important;} #sub_today #order_tab_re .webtoon, #sub_today #order_tab_re .ebook, #sub_today #order_tab_re .all_content{width:35px !important;} } /* 연재 리뉴얼 2018/08/17 END */ /* 완결 리뉴얼 2018/08/17 */ #sub_completed .completed_banner{width:100%; display:none; overflow:hidden;} #sub_completed .completed_banner .content_tag{top:5px; right:5px;} #sub_completed .completed_banner ul{width:100%; box-sizing:border-box; padding:10px 0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} #sub_completed .completed_banner ul li{position:relative; float:left; background:#fff; width:100px; margin:0 5px; font-size:12px; box-sizing:border-box;} #sub_completed .completed_banner ul li a{display:block; width:100%;} #sub_completed .completed_banner ul li a .thumb_box{position:relative; width:100%; height:108px; overflow:hidden; box-sizing:border-box; -webkit-box-sizing:border-box; border:1px solid #ddd; transition:border .3s ease-in-out; -webkit-transition:border .3s ease-in-out;} #sub_completed .completed_banner ul li.slick-center a .thumb_box{border:1px solid #ed1c24;} #sub_completed .completed_banner ul li a .thumb_box .thumb_tag{position:absolute; top:3px; left:3px; display:block; width:25px; height:14px; border-radius:3px; background-color:#FFFFFF; text-align:center; line-height:14px; font-size:11px; font-weight:normal;} #sub_completed .completed_banner ul li a .thumb_box .tag_webtoon{border:1px solid #fc5863; color:#fc5863;} #sub_completed .completed_banner ul li a .thumb_box .tag_novel{border:1px solid #2b90e1; color:#2b90e1;} #sub_completed .completed_banner ul li a .thumb_box .tag_ebook{border:1px solid #0096a6; color:#0096a6;} #sub_completed .completed_banner ul li a .thumb_box img{width:100%;} #sub_completed .completed_banner ul li a > p{white-space:nowrap; overflow:hidden; max-width:100%; text-overflow:ellipsis; box-sizing:border-box; -webkit-box-sizing:border-box; padding:4px 0 0; text-align:center; font-size:1em;} #sub_completed .completed_banner ul li a > p .tag_box{display:inline-block; line-height:1; vertical-align:top;} #sub_completed .completed_banner ul li a > p .tag_box span{display:block; font-size:10px; width:14px; height:14px; line-height:14px; border-radius:3px; text-align:center;} #sub_completed .completed_banner ul li a > p .tag_box .best_tag_s{background:#388afd; color:var(--main-ft-color);} #sub_completed .completed_banner ul li a > p .tag_box .hot_tag_s{background:#e61e3f; color:var(--main-ft-color);} #sub_completed .completed_banner ul li a > p .tag_box .new_tag_s{background:#721de3; color:var(--main-ft-color);} #sub_completed .completed_sale_txt{width:94%; overflow:hidden; margin:5px auto 7px; padding:0;} #sub_completed .completed_sale_txt a{color:#4a4a4a; text-decoration:underline;} /* 완결 스위치 버튼 #sub_completed .completed_switch_btn{width:25px; height:25px; border:1px solid #ddd; border-radius:2px; text-align:center; float:right; margin-right:1.941%; background:url('/img/switch_view_3.png') no-repeat 0 center, #fff; background-size:18px; background-position:2px 2px; cursor:pointer; text-indent:-9999px; margin-top:1px;} #sub_completed .completed_switch_btn.on1{background:url('/img/switch_view_2.png') no-repeat 0 center, #fff; background-size:18px; background-position:2px 2px;} #sub_completed .completed_switch_btn.on2{background:url('/img/switch_view_1.png') no-repeat 0 center, #fff; background-size:18px; background-position:2px 2px;} */ #sub_completed .completed_switch_btn{width:30px; height:30px; border:1px solid #ddd; text-align:center; float:right; background:url('https://cdn.metoon.co.kr/mimg/switch_view_2.png') no-repeat center, #fff; background-size:20px; margin-left:5px; cursor:pointer; text-indent:-9999px;} #sub_completed .completed_switch_btn.on1{background:url('https://cdn.metoon.co.kr/mimg/switch_view_1.png') no-repeat center, #fff; background-size:20px;} #sub_completed .completed_switch_btn.on2{background:url('https://cdn.metoon.co.kr/mimg/switch_view_3.png') no-repeat center, #fff; background-size:20px;} /* completed_btm2 */ #sub_completed .completed_btm2{padding-top:10px;} #sub_completed .completed_btm2 ul{width:100%; overflow:hidden; margin:0 auto; -webkit-box-sizing:border-box; box-sizing:border-box; padding:0 4px;} #sub_completed .completed_btm2 ul li{width:33.333%; float:left; -webkit-box-sizing:border-box; box-sizing:border-box; padding:0 4px 8px;} #sub_completed .completed_btm2 ul li a{display:block; width:100%; box-sizing:border-box; border:1px solid #ddd; background:#fff; position:relative; overflow:hidden;} #sub_completed .completed_btm2 ul li a .completed_imgbox{width:100%; overflow:hidden; position:relative;} #sub_completed .completed_btm2 ul li a .completed_imgbox img{width:100%; display:block;} #sub_completed .completed_btm2 ul li a .completed_img{width:100%; position:absolute; top:0; left:0; z-index:2;} #sub_completed .completed_btm2 ul li .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #sub_completed .completed_btm2 ul li .ebook_imgbox .completed_img{opacity:0.2;} #sub_completed .completed_btm2 ul li .ebook_imgbox .completed_ebook_img{position:absolute; width:70%; top:0; left:0; right:0; bottom:0; margin:auto; z-index:2; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} #sub_completed .completed_btm2 ul li a .txt_tag{position:absolute; top:0; left:0; padding:0; margin:10px 0 0; z-index:3;} #sub_completed .completed_btm2 ul li a .txt_tag span{display:inline-block; position:relative;} #sub_completed .completed_btm2 ul li a .txt_tag .ic_tag01 img{width:24px; display:block;} #sub_completed .completed_btm2 ul li a .txt_tag .ic_tag01:after{content:""; display:block; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #sub_completed .completed_btm2 ul li a .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #sub_completed .completed_btm2 ul li a .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #sub_completed .completed_btm2 ul li a .txt_tag .new_tag:after{border-top:12px solid #46adf2;} #sub_completed .completed_btm2 ul li a .txt_tag .end_txt_tag{border:1px solid #7d52e0; color:#7d52e0; background:#fff; padding:0 4px 2px 0;} #sub_completed .completed_btm2 ul li a .txt_tag .end_txt_tag span{padding:0;} #sub_completed .completed_btm2 ul li a .completed_txt{width:100%; overflow:hidden; background:rgba(255, 255, 255, 1); box-sizing:border-box; color:#2c2c2c; padding:5px; line-height:1.1; border-top:1px solid #ddd;} #sub_completed .completed_btm2 ul li a .completed_txt .title{width:100%; font-size:1em; font-weight:bold; padding-bottom:5px; text-overflow:ellipsis; white-space:nowrap;overflow:hidden;} #sub_completed .completed_btm2 ul li a .completed_txt dd{width:100%; font-size:0.82em; font-weight:normal; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #sub_completed .completed_btm2 ul li a .completed_txt dd .wr_tag{display:block; float:left; font-size:10px; padding:3px 5px; background:#ffdcfd; color:#e743ce; font-weight:bold; line-height:1; margin-right:5px;} #sub_completed .completed_btm2 ul li a .completed_txt .text{padding-bottom:2px;} #sub_completed .completed_btm2 ul li a .completed_imgbox .patch_box{position:absolute; bottom:5px; right:5px; z-index:12;} #sub_completed .completed_btm2 ul li a .completed_imgbox .patch_box img{display:inline-block; width:18px;} #sub_completed .completed_btm2 ul li a .completed_imgbox .tag_genre{position:absolute; top:5px; right:5px; border-radius:3px; font-size:11px; font-weight:normal; padding:1px 2px 0; line-height:1.3; letter-spacing:-0.05em; background-color:#FFFFFF; z-index:3;} /* completed_btm3 */ #sub_completed .completed_btm3{padding-bottom:10px;} #sub_completed .completed_btm3 ul{width:96%; overflow:hidden; margin:0 auto;} #sub_completed .completed_btm3 ul li{padding:0 0 12px;} #sub_completed .completed_btm3 ul li a{display:block; width:100%; position:relative; overflow:hidden; background:#fff; border-width:thin; color:#4e4e4e; border:1px solid #ddd; font-size:1.05em; letter-spacing:-0.09em; font-weight:normal; box-sizing:border-box;} #sub_completed .completed_btm3 ul li a .completed_imgbox{margin:0;float:left; width:45%; max-height:none; position:relative; border-radius:0; border:0; box-sizing:border-box; border-right:1px solid #ddd;} #sub_completed .completed_btm3 ul li span{display:block; white-space:normal; padding:0 10px; font-size:1em; margin-top:5px;} #sub_completed .completed_btm3 ul li .content_tag{width:auto; left:5px; right:auto; top:auto; margin-bottom:5px; bottom:0; padding:0;} #sub_completed .completed_btm3 ul li .content_tag .content_tag_toon{display:block; float:left; width:auto; z-index:101; background:#fff; border-radius:5px; font-size:12px; padding:1px 2px 0; line-height:1.3; letter-spacing:-0.05em; margin-right:3px;} #sub_completed .completed_btm3 ul li .content_tag .content_tag_nobel{display:block; float:left; width:auto; z-index:101; background:#fff; border-radius:5px; font-size:12px; padding:1px 2px 0; line-height:1.3; letter-spacing:-0.05em; margin-right:3px;} #sub_completed .completed_btm3 ul li .content_tag .content_tag_ebook{display:block; float:left; width:auto; z-index:101; background:#fff; border-radius:5px; font-size:12px; padding:1px 4.5px 0; line-height:1.3; letter-spacing:-0.05em; margin-right:3px;} #sub_completed .completed_btm3 ul li .content_tag .free_tag{display:block; float:left; width:auto; z-index:101; background:#fff; border-radius:5px; font-size:12px; padding:1px 2px 0; line-height:1.3; letter-spacing:-0.05em; margin-right:3px;} #sub_completed .completed_btm3 ul li img{width:100%; display:block;} #sub_completed .completed_btm3 ul li a .completed_imgbox .patchbox{position:absolute; bottom:5px; right:5px; z-index:99;} #sub_completed .completed_btm3 ul li a .completed_imgbox .patchbox img{width:18px; position:static; display:inline-block;} #sub_completed .completed_btm3 ul li .completed_img{position:absolute; top:0; left:0; right:0; bottom:0; margin:0 auto; padding:0; width:100%; border:none;} #sub_completed .completed_btm3 ul li .ebook_imgbox:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to top right, #676767 60%, #fff);} #sub_completed .completed_btm3 ul li .ebook_imgbox .completed_img{opacity:0.2;} #sub_completed .completed_btm3 ul li .ebook_imgbox .completed_ebook_img{position:absolute; width:75%; top:0; left:0; right:0; bottom:0; margin:auto; opacity:0.9999; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.7);} #sub_completed .completed_btm3 ul li .adult_19_mark{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:80%;} #sub_completed .completed_btm3 ul li .patch_box{position:absolute; top:0; right:5px; z-index:9; text-align:right; background:none; border:none; border-radius:0; height:auto; width:auto; letter-spacing:0; font-size:0;} #sub_completed .completed_btm3 ul li .completed_cont_box{padding-top:5px; font-size:1em; width:55%; float:right; letter-spacing:-0.09em;} #sub_completed .completed_btm3 ul li .on{position:relative;} #sub_completed .completed_btm3 ul li .on .heart{font-size:1.0em; padding-left:25px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 75%; background-size:13px 11px; color:var(--bg-fc-color);} #sub_completed .completed_btm3 ul li .on .txt_tag{position:absolute; top:-3px; right:12px; padding:0; margin:0;} #sub_completed .completed_btm3 ul li .on .txt_tag span{display:inline-block; position:relative; padding:0;} #sub_completed .completed_btm3 ul li .on .txt_tag .ic_tag01:after{content:""; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #sub_completed .completed_btm3 ul li .on .txt_tag .ic_tag01 img{width:24px; position:static;} #sub_completed .completed_btm3 ul li .on .txt_tag .new_tag:after{border-top:12px solid #46adf2;} #sub_completed .completed_btm3 ul li .on .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #sub_completed .completed_btm3 ul li .on .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #sub_completed .completed_btm3 ul li .completed_cont_box dl{width:100%; box-sizing:border-box; padding:0 10px; font-size:1em; margin-top:5px;} #sub_completed .completed_btm3 ul li .completed_cont_box dl dt{font-weight:bold; font-size:1.1em; margin:10px 0 0; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} #sub_completed .completed_btm3 ul li .completed_cont_box dl dd{margin-top:5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} #sub_completed .completed_btm3 ul li .writer{margin:5px 0; position:absolute; bottom:5px; right:0px; max-width:45%; font-size:0.95em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} @media all and (min-width:601px){ #sub_completed .completed_btm3 ul li{width:49%; float:left;} #sub_completed .completed_btm3 ul li:nth-of-type(odd){margin-right:2%;} } @media all and (min-width:800px){ #sub_completed .completed_btm3 ul li{width:32.3%; float:left; margin:0 1% 5px;} #sub_completed .completed_btm3 ul li:nth-of-type(odd){margin-right:0;} #sub_completed .completed_btm3 ul li:nth-of-type(even){margin-right:0;} #sub_completed .completed_btm3 ul li:nth-of-type(3n){margin-right:0;} #sub_completed .completed_btm3 ul li .completed_cont_box dl dd{text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block;} } @media all and (min-width:1050px){ #sub_completed .completed_btm2 ul li{width:24%; margin-right:1.3%;} #sub_completed .completed_btm2 ul li:nth-of-type(3n){margin-right:1.3%;} #sub_completed .completed_btm2 ul li:nth-of-type(4n){margin-right:0;} #sub_completed .completed_btm3 ul li .completed_cont_box dl dd{text-overflow:ellipsis; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;} } @media all and (max-width:700px) and (min-width:535px){ #sub_completed .completed_btm3 ul li .completed_cont_box dl dd{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;} } @media all and (max-width:600px) and (min-width:535px){ #sub_completed .completed_btm3 ul li{width:50%; float:left;} #sub_completed .completed_btm3 ul li .on .heart{font-size:1em; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} } @media all and (max-width:400px) and (min-width:375px){ #order_tab li{width:50px !important;} #order_tab_re li{width:50px !important;} } @media all and (max-width:380px){ #sub_completed .completed_btm2 ul li{width:50%;} #sub_completed .completed_btm2 ul li a .webtoon_txt .title{font-size:1.1em;} #sub_completed .completed_btm2 ul li a .webtoon_txt dd{font-size:0.87em;} } @media all and (max-width:360px){ #sub_completed #order_tab_re .webtoon, #sub_completed #order_tab_re .ebook{width:45px !important;} } @media all and (max-width:350px) and (min-width:320px){ #sub_completed .completed_btm3 ul li .on{min-height:0; margin-top:2px;} #sub_completed .completed_btm3 ul li .on .heart{margin-top:0;} #sub_completed .completed_btm3 ul li .completed_cont_box dl{padding:0 10px;} #sub_completed .completed_btm3 ul li .completed_cont_box dl dt{min-height:0; margin-top:5px;} #sub_completed .completed_btm3 ul li .completed_cont_box dl dd{min-height:50px; max-height:100px; padding:1px 0;} #sub_completed .completed_btm3 ul li .writer{min-height:0; display:inline-block;} #sub_completed #order_tab_re .webtoon, #sub_completed #order_tab_re .ebook{width:40px !important;} } @media all and (max-width:330px){ #sub_completed #order_tab_re .webtoon, #sub_completed #order_tab_re .ebook, #sub_completed #order_tab_re .all_content{width:35px !important;} } .m_today_page_list{ width: 100%; height: 28px; overflow: hidden; text-align: center; padding: 7px 0 30px; min-width: 303px; box-sizing: content-box; } .m_today_page_list .m_ebook_prevbox { margin-right: 1%; } .m_today_page_list .m_ebook_nextbox{ margin-left:1%; } .m_today_page_list p { width: 90px; display: inline-block; } .m_today_page_list p span{ display:block; float:left; width:45px; height:28px; box-sizing:border-box; background:#fff; border:1px solid #ddd; text-align:center; line-height:26px; font-size:12px; } .m_today_page_list p span a{ color:#676767; } .m_today_page_list ol { display: inline-block; overflow: hidden; vertical-align: top; } .m_today_page_list ol li { display: inline-block; font-size: 1.2em; font-weight: bold; margin: 0 3px; } .m_today_page_list ol li a.on { border: 1px solid var(--bg-fc-color); color: var(--bg-fc-color); background: #fff; } .m_today_page_list ol li a { display: inline-block; width: 28px; height: 28px; line-height: 26px; border: 1px solid #ddd; background:#e9e5e5; border-radius: 2px; box-sizing: border-box; color: #676767; } /* 완결 리뉴얼 2018/08/17 END */ /* S소설 리뉴얼 2018/08/17 */ #sub_s_nobel .s_nobel_banner{width:100%; display:none; overflow:hidden;} #sub_s_nobel .s_nobel_banner .content_tag{top:5px; right:5px;} #sub_s_nobel .s_nobel_banner ul{width:100%; box-sizing:border-box; padding:10px 0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} #sub_s_nobel .s_nobel_banner ul li{position:relative; float:left; background:#fff; width:100px; margin:0 5px; font-size:12px; box-sizing:border-box;} #sub_s_nobel .s_nobel_banner ul li a{display:block; width:100%;} #sub_s_nobel .s_nobel_banner ul li a .thumb_box{position:relative; width:100%; height:108px; overflow:hidden; box-sizing:border-box; -webkit-box-sizing:border-box; border:1px solid #ddd; transition:border .3s ease-in-out; -webkit-transition:border .3s ease-in-out;} #sub_s_nobel .s_nobel_banner ul li.slick-center a .thumb_box{border:1px solid #ed1c24;} #sub_s_nobel .s_nobel_banner ul li a .thumb_box .thumb_tag{position:absolute; top:3px; left:3px; display:block; width:25px; height:14px; border-radius:3px; background-color:#FFFFFF; text-align:center; line-height:14px; font-size:11px; font-weight:bold;} #sub_s_nobel .s_nobel_banner ul li a .thumb_box .tag_novel{border:1px solid #2b90e1; color:#2b90e1;} #sub_s_nobel .s_nobel_banner ul li a .thumb_box img{width:100%;} #sub_s_nobel .s_nobel_banner ul li a > p{white-space:nowrap; overflow:hidden; max-width:100%; text-overflow:ellipsis; box-sizing:border-box; -webkit-box-sizing:border-box; padding:4px 0 0; text-align:center; font-size:1em;} #sub_s_nobel .s_nobel_banner ul li a > p .tag_box{display:inline-block; line-height:1; vertical-align:top;} #sub_s_nobel .s_nobel_banner ul li a > p .tag_box span{display:block; font-size:10px; width:14px; height:14px; line-height:14px; border-radius:3px; text-align:center;} #sub_s_nobel .s_nobel_banner ul li a > p .tag_box .best_tag_s{background:#388afd; color:var(--main-ft-color);} #sub_s_nobel .s_nobel_banner ul li a > p .tag_box .hot_tag_s{background:#e61e3f; color:var(--main-ft-color);} #sub_s_nobel .s_nobel_banner ul li a > p .tag_box .new_tag_s{background:#721de3; color:var(--main-ft-color);} #sub_s_nobel .s_nobel_radio select{height:30px; border:1px solid #ddd; font-size:13px; line-height:normal; color:#676767; padding:2px 3px; padding-left:7px; overflow:hidden; background:url(https://cdn.metoon.co.kr/mimg/ic_select.png) no-repeat 92% 70%,#fff; background-size:8px; border-radius:0; appearance:none; -webkit-appearance:none; -moz-appearance:none;} #sub_s_nobel .s_nobel_radio select::-ms-expand{display:none;} #sub_s_nobel .s_nobel_radio #SetCate{width:120px; background-position-x:95%;} #sub_s_nobel .s_nobel_radio #SetList{width:85px; float:right;} #sub_s_nobel .s_nobel_radio #orderby{padding-left:7px; padding-right:15px; margin-left:1px;} #sub_s_nobel .s_nobel_sale_txt{width:94%; overflow:hidden; margin:5px auto 7px; padding:0;} #sub_s_nobel .s_nobel_sale_txt a{color:#4a4a4a; text-decoration:underline;} #sub_s_nobel .s_nobel_radio .s_nobel_switch_btn{width:30px; height:30px; border:1px solid #ddd; text-align:center; float:right; background:url(https://cdn.metoon.co.kr/mimg/switch_view_2.png) no-repeat center, #fff; background-size:20px; margin-left:5px; cursor:pointer; text-indent:-9999px;} #sub_s_nobel .s_nobel_radio .s_nobel_switch_btn.on1{background:url(https://cdn.metoon.co.kr/mimg/switch_view_1.png) no-repeat center, #fff; background-size:20px;} #sub_s_nobel .s_nobel_radio .s_nobel_switch_btn.on2{background:url(https://cdn.metoon.co.kr/mimg/switch_view_3.png) no-repeat center, #fff; background-size:20px;} #sub_s_nobel .s_nobel_line_list{margin-bottom:7px; width:96%; overflow:hidden; margin:0 auto;} #sub_s_nobel .s_nobel_line_list li{width:100%; border:1px solid #ddd; background:#fff; overflow:hidden; margin-top:5px; box-sizing:border-box;} #sub_s_nobel .s_nobel_line_list li:nth-of-type(even){background:#f4f4f4;} #sub_s_nobel .s_nobel_line_list li a{display:block; padding:6px; box-sizing:border-box;} #sub_s_nobel .s_nobel_line_list li .con_box{width:100%; position:relative;} #sub_s_nobel .s_nobel_line_list li .img_box{width:80px; position:absolute; top:0; bottom:0; left:0; margin:auto; overflow:hidden;} #sub_s_nobel .s_nobel_line_list li .img_box img{width:100%; display:block;} #sub_s_nobel .s_nobel_line_list li .img_box img.list19_blind_mark{width:100%; display:block; position:absolute;} #sub_s_nobel .s_nobel_line_list li .img_box .s_nobel_line_img{width:100%; display:block; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index:9;} #sub_s_nobel .s_nobel_line_list li .img_box .adult_19_mark{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:90%;} #sub_s_nobel .s_nobel_line_list li .img_box .patch_div{position:absolute; bottom:3px; right:3px; z-index:10;} #sub_s_nobel .s_nobel_line_list li .img_box .patch_div img{width:18px; display:inline-block;} #sub_s_nobel .s_nobel_line_list li .txt_box{padding:0 0 0 90px; letter-spacing:-0.05em; overflow:hidden; position:relative;} #sub_s_nobel .s_nobel_line_list li .txt_box p{margin-bottom:3px; color:#676767; font-size:0.9em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; max-width:151px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} #sub_s_nobel .s_nobel_line_list li .txt_box .title{font-size:1.1em; font-weight:bold; color:#2c2c2c; float:none; max-width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #sub_s_nobel .s_nobel_line_list li .txt_box span{display:inline-block; float:left; margin:0 2%;} #sub_s_nobel .s_nobel_line_list li .txt_box .cont_txt{width:98%; float:left; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; max-width:98%; color:#2c2c2c; margin-bottom:0; margin-top:5px;} #sub_s_nobel .s_nobel_line_list li a:after{content:""; display:block; clear:both;} #sub_s_nobel .s_nobel_line_list li .txt_box .on{float:none; margin:0; width:100%;} #sub_s_nobel .s_nobel_line_list li .txt_box .on .heart{font-size:1.0em; padding-left:15px; background:url(https://cdn.metoon.co.kr/mimg/adult_icon_genre_heart_on.png) no-repeat 0 75%; background-size:13px 11px; color:var(--bg-fc-color); float:left; margin:0;} #sub_s_nobel .s_nobel_line_list li .txt_box .on .txt_tag{padding:0; margin:0; float:right; position:static; padding-right:6px;} #sub_s_nobel .s_nobel_line_list li .txt_box .on .txt_tag span{display:inline-block; position:relative;} #sub_s_nobel .s_nobel_line_list li .txt_box .on .txt_tag .ic_tag01:after{content:""; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #sub_s_nobel .s_nobel_line_list li .txt_box .on .txt_tag .ic_tag01 img{width:24px; position:static; vertical-align:top;} #sub_s_nobel .s_nobel_line_list li .txt_box .on .txt_tag .new_tag:after{border-top:12px solid #46adf2;} #sub_s_nobel .s_nobel_line_list li .txt_box .on .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #sub_s_nobel .s_nobel_line_list li .txt_box .on .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #sub_s_nobel .s_nobel_line_list li .txt_box .on .txt_tag .up_txt_tag img{width:22px; vertical-align:top;} #sub_s_nobel .s_nobel_line_list li .txt_box .on .txt_tag .up_txt_tag:after{content:""; position:absolute; top:0; right:-5px; border-right:5px solid transparent; border-top:12px solid #1567c3;} #sub_s_nobel .s_nobel_rect_list{width:96%; overflow:hidden; margin:0 auto;} #sub_s_nobel .s_nobel_rect_list li{width:32.2%; margin:0 1.685% 7px 0; float:left;} #sub_s_nobel .s_nobel_rect_list li:nth-of-type(3n){margin-right:0;} #sub_s_nobel .s_nobel_rect_list li a{display:block; width:100%; box-sizing:border-box; border:1px solid #ddd; background:#fff; transition:all 0.2s ease; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; position:relative; overflow:hidden;} #sub_s_nobel .s_nobel_rect_list li a .s_nobel_imgbox{width:100%; overflow:hidden; position:relative;} #sub_s_nobel .s_nobel_rect_list li a img{width:100%; display:block;} #sub_s_nobel .s_nobel_rect_list li a .s_nobel_imgbox .patch_box{position:absolute; bottom:5px; right:5px; z-index:12;} #sub_s_nobel .s_nobel_rect_list li a .s_nobel_imgbox .patch_box img{display:inline-block; width:18px;} #sub_s_nobel .s_nobel_rect_list li a .s_nobel_rect_img{width:100%; position:absolute; top:0; left:0; z-index:2;} #sub_s_nobel .s_nobel_rect_list li a .adult_19_mark{position:absolute; top:-5%; left:0; right:0; bottom:0; margin:auto; width:80%;} #sub_s_nobel .s_nobel_rect_list li a .s_nobel_rect_txt{width:100%; overflow:hidden; background:rgba(255, 255, 255, 1); box-sizing:border-box; text-align:center; color:#2c2c2c; padding:4px; line-height:1.1; border-top:1px solid #ddd;} #sub_s_nobel .s_nobel_rect_list li a .s_nobel_rect_txt .title{width:100%; font-size:1em; font-weight:bold; padding-bottom:3px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #sub_s_nobel .s_nobel_rect_list li a .s_nobel_rect_txt dd{width:100%; font-size:0.82em; font-weight:normal; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #sub_s_nobel .s_nobel_rect_list li a .s_nobel_rect_txt .text{padding-bottom:2px;} #sub_s_nobel .s_nobel_rect_list li a .s_nobel_rect_txt .text > br{display:none;} #sub_s_nobel .s_nobel_rect_list li a .s_nobel_rect_txt .text2 .genre{color:#f0070c;} #sub_s_nobel .s_nobel_rect_list li a .rank_num{width:35px; height:40px; text-align:center; padding-top:5px; margin:0; font-size:1.15em; font-weight:bold; text-indent:-1%; position:absolute; top:0; left:-1px; color:var(--main-ft-color); background:url(https://cdn.metoon.co.kr/mimg/adult_rank_bg1.png) no-repeat center 0; background-size:100%; z-index:2;} #sub_s_nobel .s_nobel_rect_list li a .txt_tag{position:absolute; top:0; left:0; padding:0; margin:10px 0 0; z-index:3;} #sub_s_nobel .s_nobel_rect_list li a .txt_tag span{display:inline-block; position:relative;} #sub_s_nobel .s_nobel_rect_list li a .txt_tag .ic_tag01:after{content:""; display:block; position:absolute; top:0; right:-6px; border-right:6px solid transparent;} #sub_s_nobel .s_nobel_rect_list li a .txt_tag .ic_tag01 img{width:24px; display:block;} #sub_s_nobel .s_nobel_rect_list li a .txt_tag .best_tag:after{border-top:12px solid #f471f4;} #sub_s_nobel .s_nobel_rect_list li a .txt_tag .hot_tag:after{border-top:12px solid #fd404d;} #sub_s_nobel .s_nobel_rect_list li a .txt_tag .new_tag:after{border-top:12px solid #46adf2;} #sub_s_nobel .s_nobel_rect_list li a .txt_tag .up_txt_tag{margin-left:1px;} #sub_s_nobel .s_nobel_rect_list li a .txt_tag .up_txt_tag img{width:22px;} #sub_s_nobel .s_nobel_rect_list li a .txt_tag .up_txt_tag:after{content:""; display:block; position:absolute; top:0; right:-5px; border-top:12px solid #1567c3; border-right:5px solid transparent;} #sub_s_nobel .s_nobel_list_paging{width:100%; height:28px; overflow:hidden; text-align:center; padding:7px 0 30px; min-width:303px; box-sizing:content-box;} #sub_s_nobel .s_nobel_list_paging p{width:64px; display:inline-block;} #sub_s_nobel .s_nobel_list_paging .s_nobel_prevBox{margin-right:1%;} #sub_s_nobel .s_nobel_list_paging .s_nobel_nextBox{margin-left:1%;} #sub_s_nobel .s_nobel_list_paging p span{display:block; float:left; width:32px; height:28px; box-sizing:border-box; background:#fff; border:1px solid #ddd; text-align:center; line-height:26px; font-size:12px;} #sub_s_nobel .s_nobel_list_paging p span a{color:#676767;} #sub_s_nobel .s_nobel_list_paging .s_nobel_prevBox span{float:right;} #sub_s_nobel .s_nobel_list_paging p span a img{vertical-align:middle;} #sub_s_nobel .s_nobel_list_paging ol{display:inline-block; overflow:hidden; vertical-align:top;} #sub_s_nobel .s_nobel_list_paging ol li{display:inline-block; font-size:1.2em; font-weight:bold; margin:0 3px;} #sub_s_nobel .s_nobel_list_paging ol li a{display:inline-block; width:28px; height:28px; line-height:26px; border:1px solid #ddd; background:#e9e5e5; border-radius:2px; box-sizing:border-box; color:#676767;} #sub_s_nobel .s_nobel_list_paging ol li a.on{border:1px solid var(--bg-fc-color); color:var(--bg-fc-color); background:#fff;} .content_tag_ebook{color:#0096a6; border:1px solid #0096a6; padding:1px 5px 0 !important;} @media all and (min-width:601px){ #sub_s_nobel .s_nobel_line_list li{width:49%; float:left; margin:0 0.5% 5px;} } @media all and (min-width:1050px){ #sub_s_nobel .s_nobel_rect_list li{width:24%; margin-right:1.3%;} #sub_s_nobel .s_nobel_rect_list li:nth-of-type(3n){margin-right:1.3%;} #sub_s_nobel .s_nobel_rect_list li:nth-of-type(4n){margin-right:0;} } @media all and (min-width:1200px){ #sub_s_nobel .s_nobel_line_list li{width:32.3%; float:left; margin:0 0.5% 5px;} } @media all and (max-width:600px){ #sub_s_nobel .s_nobel_line_list li:first-child{margin-top:0;} } @media all and (max-width:380px){ #sub_s_nobel .s_nobel_rect_list li{width:49.2%; margin-right:1.6%;} #sub_s_nobel .s_nobel_rect_list li:nth-of-type(3n){margin-right:1.6%;} #sub_s_nobel .s_nobel_rect_list li:nth-of-type(even){margin-right:0;} #sub_s_nobel .s_nobel_rect_list li a .webtoon_txt .title{font-size:1.1em;} #sub_s_nobel .s_nobel_rect_list li a .webtoon_txt dd{font-size:0.87em;} } @media all and (max-width:340px){ #sub_s_nobel .s_nobel_radio #SetCate{width:115px; padding-left:3px;} #sub_s_nobel .s_nobel_radio #orderby{padding-left:3px;} #sub_s_nobel .s_nobel_radio #SetList{width:80px; padding-left:3px;} } /* S소설 리뉴얼 2018/08/17 END */ /* 디테일 전체구매 2018/08/23 */ .detail_buy_all{padding:20px;/* margin:7px auto 0; background:#fff; */border:1px solid var(--main-line-color);background-color:var(--sub-bg-color);color:var(--main-ft-color);overflow:hidden;margin-top:10px;} .detail_buy_all > div{width:100%; float:left;} .detail_buy_all .detail_buy_all1 h4{font-size:1.04em; color:#f71d02; /* padding-bottom:5px; border-bottom:1px solid #ddd; margin-bottom:5px; */} /*.detail_buy_all .detail_buy_all1 p{box-sizing:border-box; padding-left:17px; background:url(https://cdn.metoon.co.kr/mimg/buy_all_icon1.png) no-repeat 0 7%; background-size:14px; font-weight:bold; font-size:1.08em; color:#2e2e2e; line-height:1;} .detail_buy_all .detail_buy_all1 p span{display:block;} .detail_buy_all .detail_buy_all1 p .detail_all1_p{margin-top:10px; line-height:1;padding-bottom:12px;border-bottom:1px solid #ddd;} .detail_buy_all .detail_buy_all1 p strong{color:var(--bg-fc-color);font-weight:bold;} */ .detail_buy_all .detail_buy_all1 a{display:block; width:100%; height:34px; text-align:center; line-height:34px; border-radius:5px; background-color:var(--bg-fc-color); color:var(--main-ft-color); font-size:1.1em;font-weight:500; transition:background-color 0.15s;margin-top:15px;} .detail_buy_all .detail_buy_all2{display:none;} .detail_buy_all .detail_buy_all2 h4, .detail_buy_all .detail_buy_all1 .de_buyall1_txt1{font-size:1.08em; padding-bottom:6px;line-height:1.2;} .detail_buy_all .detail_buy_all1 .de_buyall1_txt1{/* padding-left:22px;background:url("https://cdn.metoon.co.kr/mimg/ic_gfbox.png") no-repeat 0 0;background-size:18px auto;*/font-weight:500;} .detail_buy_all svg{width:1.08em;/* height:1.08em; */fill:var(--main-ft-fc-color);margin-right:0.45em;flex-shrink:0;align-self:baseline;} .detail_buy_all .detail_buy_all2 p, .detail_buy_all .detail_buy_all1 .de_buyall1_txt2{font-size:1em; line-height:1; padding:3px 0 15px;border-bottom:1px solid var(--main-line-color);} .detail_buy_all .detail_buy_all2 p i, .detail_buy_all .detail_buy_all1 .de_buyall1_txt2{display:block; color:var(--sub2-ft-color);box-sizing:border-box; background-size:14px;} .detail_buy_all .detail_buy_all2 p span, .detail_buy_all .detail_buy_all1 .ft-red{display:inline-block; /* font-size:1.03em; */ font-weight:700; color:var(--bg-fc-color);} .detail_buy_all .detail_buy_all2 .buy_all_btn_group{display:flex;flex-wrap:wrap;width:100%; overflow:hidden; margin-top:15px;gap:6px 15px;} .detail_buy_all .detail_buy_all2 .buy_all_btn_group a{/* width:48%; */padding:0 20px;height:34px; line-height:34px; display:block; text-align:center; font-size:1.1em; box-sizing:border-box; border-radius:5px;flex:1 1 auto;flex-shrink:0;transition:background-color 0.15s;} .detail_buy_all .detail_buy_all2 .buy_all_btn_group a.buy_all_btn1{/* float:left; */background:var(--bg-fc-color); color:var(--main-ft-color);} .detail_buy_all .detail_buy_all2 .buy_all_btn_group a.buy_all_btn_coin{display:none;} .detail_buy_all .detail_buy_all2 .buy_all_btn_group a.buy_all_btn_cancel{/* float:right;background:#fff; */border:1px solid var(--main-ft-fc-color); color:var(--main-ft-fc-color); line-height:30px;} .detail_buy_all_ebook{width:100%; background:#f5f5f5;} .detail_buy_all_ebook .detail_buy_all{border-top:1px solid #ddd; border-bottom:none;} @media all and (max-width:340px){ .detail_buy_all .detail_buy_all2 p{font-size:0.94em;} .detail_buy_all .detail_buy_all2 .buy_all_btn_group{margin-top:11px;} } /* 디테일 전체구매 2018/08/23 END */ /* 웹툰 정액권 팝업 */ .webtoon_pass_icon{position:fixed; bottom:16%; right:20px; width:150px; height:150px; z-index:999;} .webtoon_pass_icon a{position:absolute; display:block;} .webtoon_pass_icon a img{cursor:pointer;} .webtoon_pass_icon .webtoon_pass_open{top:0; left:0; width:100%; z-index:1;} .webtoon_pass_icon .webtoon_pass_open img{width:100%;} .webtoon_pass_icon .webtoon_pass_close{top:0; right:0; width:23px; z-index:2;} .webtoon_pass_icon .webtoon_pass_close img{width:100%;} .webtoon_pass_layer_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.4); z-index:99998;} .webtoon_pass_layer_wrap .webtoon_pass_back{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;} .webtoon_pass_layer_wrap .webtoon_pass_layer{position:relative; width:95%; max-width:430px; margin:5% auto; background:#f0f0f0; box-sizing:border-box; padding:0 4px 10px; z-index:99;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_notice{width:100%; height:33px; background:#f0f0f0; font-size:1.35em; font-weight:bold; color:#b21212; box-sizing:border-box; padding:8px 6px 5px;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_notice span{display:block; float:left;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_notice a{display:block; float:right;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_notice a img{cursor:pointer;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont{width:100%; background:#fff; box-sizing:border-box; border:1px solid #ccc; padding:10px 10px 10px;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont .webtoon_pass_layer_visual{width:100%; margin-bottom:10px;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont .webtoon_pass_layer_visual img{width:100%;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul{width:100%; margin-bottom:10px; box-sizing:border-box; border-top:1px solid #cecece;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li{position:relative; width:100%; box-sizing:border-box;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li input{position:absolute; top:0; left:0; opacity:0; z-index:-1;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label{display:block; width:100%; box-sizing:border-box; padding:13px 5px; border-bottom:1px solid #e1e1e1; overflow:hidden; cursor:pointer;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label p{float:left; font-size:0.9em; font-weight:bold; color:#2c2c2c; letter-spacing:-1px; box-sizing:border-box; cursor:pointer;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_title{font-size:0.923em;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_title span{text-decoration:line-through; color:#a0a0a0; margin-right:3px;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label i{display:block; float:left; margin:0 1.65% 0 2.22%; color:#2c2c2c; font-size:0.9em; font-weight:bold;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_strike{position:relative; color:#676767;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_strike:before, .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_strike:after{content:""; display:block; width:100%; height:1px; position:absolute; top:49%; left:0; background:var(--bg-fc-color);} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_strike:before{transform:rotate(12deg); -webkit-transform:rotate(12deg); -moz-transform:rotate(12deg); -o-transform:rotate(12deg); -ms-transform:rotate(12deg);} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_strike:after{transform:rotate(-12deg); -webkit-transform:rotate(-12deg); -moz-transform:rotate(-12deg); -o-transform:rotate(-12deg); -ms-transform:rotate(-12deg);} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_sale{margin-left:5px; color:var(--bg-fc-color);} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_arrow{float:right; margin-right:5%;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_arrow img{vertical-align:top; margin-top:3px;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_coin{float:right; font-size:1.12em; line-height:1;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li input[type=radio]:checked + label{border:1px solid var(--bg-fc-color); padding-left:17px; box-sizing:border-box; background:url(https://cdn.metoon.co.kr/img/adult_radio_check_on.png) no-repeat 3px center, #fff5f8; background-size:12px;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont .webtoon_pass_buy{display:block; width:100%; height:40px; line-height:40px; text-align:center; background:var(--bg-fc-color); color:var(--main-ft-color); margin:0 auto; border-radius:5px; font-size:1.1em; font-weight:bold; transition:background-color 0.3s ease; -webkit-transition:background-color 0.3s ease; -moz-transition:background-color 0.3s ease; -o-transition:background-color 0.3s ease;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont .webtoon_pass_buy:hover{background:rgb(255, 0, 3);} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont .wt_pass_notice{font-size:0.95em; color:#2c2c2c; margin-top:7px; line-height:1.4; box-sizing:border-box; position:relative; padding-left:10px; letter-spacing:-1px;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont .wt_pass_notice:before{content:"*"; position:absolute; display:inline-block; font-size:0.95em; color:#2c2c2c; top:0; left:0;} @media all and (max-width:375px){ .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_arrow{margin-right:2%; width:12px;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_arrow img{width:100%; margin-top:5px;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_coin{font-size:1em;} } @media all and (max-width:370px){ .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_arrow{display:none;} } @media all and (max-width:340px){ .webtoon_pass_icon{bottom:11%;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_title{font-size:0.9em;} .webtoon_pass_layer_wrap .webtoon_pass_layer .webtoon_pass_layer_cont ul li label .wt_coin{font-size:1.05em;} } /* 웹툰 정액권 팝업 END */ /* 딱 한번 100원 세일 배너 2018/09/10 */ .pop_sale_100_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.4); z-index:99999999;} .pop_sale_100_wrap .pop_sale_100{position:relative; width:95%; max-width:520px; margin:5% auto 0;} .pop_sale_100_wrap .pop_sale_100 > img{width:100%;} .pop_sale_100_wrap .pop_sale_100 > a{display:block; position:absolute;} .pop_sale_100_wrap .pop_sale_100 .pop_sale_100_x{top:0; right:0; width:7%; max-width:27px; margin:14px 14px 0 0;} .pop_sale_100_wrap .pop_sale_100 .pop_sale_100_x img{width:100%; cursor:pointer;} .pop_sale_100_wrap .pop_sale_100 .pop_sale_100_btn{bottom:0; left:0; right:0; width:65%; max-width:266px; margin:0 auto 4.2%;} .pop_sale_100_wrap .pop_sale_100 .pop_sale_100_btn img{width:100%; cursor:pointer;} .pop_pay100_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.4); z-index:99999999;} .pop_pay100_wrap .pop_pay100{position:relative; top:0; left:0; right:0; width:95%; max-width:420px; margin:12% auto 0; background:#f0f0f0; box-sizing:border-box; padding:0 5px 10px; letter-spacing:-1px;} .pop_pay100_wrap .pop_pay100 p{width:100%; height:37px; line-height:37px; overflow:hidden;} .pop_pay100_wrap .pop_pay100 p span{font-size:1.2em; color:#000; margin-left:5px; font-weight:bold;} .pop_pay100_wrap .pop_pay100 p a{display:inline-block; float:right; margin:3px 5px 0 0;} .pop_pay100_wrap .pop_pay100 .pop_pay100_cont{width:100%; box-sizing:border-box; background:#fff; padding:12px 10px 11px; border:1px solid #aaaaff; overflow:hidden;} .pop_pay100_wrap .pop_pay100 p a img{cursor:pointer;} .pop_pay100_wrap .pop_pay100 .pop_pay100_banner{width:100%; margin-bottom:5px;} .pop_pay100_wrap .pop_pay100 .pop_pay100_banner img{width:100%;} .pop_pay100_wrap .pop_pay100 ul{width:100%;} .pop_pay100_wrap .pop_pay100 ul li{float:left; width:32.7%; margin-right:0.883%; box-sizing:border-box; border:1px solid #dfdfdf;} .pop_pay100_wrap .pop_pay100 ul li:last-child{margin-right:0;} .pop_pay100_wrap .pop_pay100 ul li a dl{width:100%;} .pop_pay100_wrap .pop_pay100 ul li a dl dt{width:100%;} .pop_pay100_wrap .pop_pay100 ul li a dl dt img{width:100%; cursor:pointer;} .pop_pay100_wrap .pop_pay100 ul li a dl dd{width:100%; text-align:center; line-height:1; padding:3px 0 2px; background:#dfdfdf; font-size:13px; font-weight:bold; color:var(--main-ft-color);} .pop_pay100_wrap .pop_pay100 .pop_pay100_notice{width:100%;} .pop_pay100_wrap .pop_pay100 .pop_pay100_notice dl{width:100%; overflow:hidden;} .pop_pay100_wrap .pop_pay100 .pop_pay100_notice dl dt{font-size:13px; margin-bottom:5px; margin-top:6px; padding-top:4px; border-top:1px dashed #a5a5a5; color:#676767; font-weight:bold;} .pop_pay100_wrap .pop_pay100 .pop_pay100_notice dl dd{line-height:1.6; color:#676767; width:100%; margin:0; box-sizing:border-box; padding-left:12px; position:relative; font-size:12px;} .pop_pay100_wrap .pop_pay100 .pop_pay100_notice dl dd:nth-of-type(10){padding-left:15px;} .pop_pay100_wrap .pop_pay100 .pop_pay100_notice dl dd:nth-of-type(10) span{left:-2px;} .pop_pay100_wrap .pop_pay100 .pop_pay100_notice dl dd span{position:absolute; top:0; left:0;} @media all and (max-width:360px) and (min-width:320px){ .pop_sale_100_wrap .pop_sale_100{margin-top:7%;} } @media all and (max-width:359px){ .pop_pay100_wrap .pop_pay100{margin-top:5%;} .pop_pay100_wrap .pop_pay100 .pop_pay100_notice dl dd{line-height:1.4;} /* .pop_pay100_wrap .pop_pay100 .pop_pay100_notice dl dd{padding-left:0; position:static; line-height:1.4;} .pop_pay100_wrap .pop_pay100 .pop_pay100_notice dl dd:nth-of-type(10){padding-left:0;} .pop_pay100_wrap .pop_pay100 .pop_pay100_notice dl dd span{position:static;} */ } /* 딱 한번 100원 세일 배너 2018/09/10 END */ /* 디테일 웹툰 정액권 안내멘트 및 구매버튼 2018/09/11 */ .wt_pass_detail_notice{position:relative; float:left; margin-left:5px; padding: 10px 0 10px;} .wt_pass_detail_notice .wt_pass_ic{display:inline-block; font-size:9px; font-weight:bold; color:var(--main-ft-color); padding:3.5px 4px 2px; border-radius:3px; line-height:1; background:var(--bg-fc-color); margin-right:3px; margin-top:-3px;} .wt_pass_detail_notice .wt_pass_detail_btn{position:absolute; top:50%; right:0; display:inline-block; padding:6px 10px; line-height:1; color:var(--main-ft-color); font-weight:bold; font-size:12px; background:var(--bg-fc-color); border-radius:3px; margin:-12.5px -74px 0 0;} @media all and (max-width:330px){ .wt_pass_detail_notice:not(.wt_pass_detail_btn){letter-spacing:-1px;} } /* 디테일 웹툰 정액권 안내멘트 및 구매버튼 2018/09/11 END */ /* 해피머니 추가캐시 이벤트 2018/09/20 */ .event_happy_coin{width:100%; position:relative;} .event_happy_coin > img{width:100%;} .event_happy_coin a{display:block; position:absolute; bottom:0; right:0; width:30%; margin:11%;} .event_happy_coin a img{width:100%;} /* 해피머니 추가캐시 이벤트 2018/09/20 END */ /* 한가위 출첵 이벤트 2018/09/21 */ .event_tgc{width:100%; position:relative;} .event_tgc > img{width:100%;} .event_tgc ul{position:absolute; top:38.2%; left:19.5%; width:65.4%;} .event_tgc ul li{float:left; width:20%;} .event_tgc ul li img{width:95%;} .event_tgc a.event_tgc_btn{display:block; position:absolute; top:51.5%; left:35%; width:35%;} .event_tgc a.event_tgc_btn img{width:100%; cursor:pointer;} /* 한가위 출첵 이벤트 2018/09/21 END */ /* 무료충전코인 팝업 20181107 */ .free_fill_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000;} .free_fill_wrap .free_fill_cover{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.2); z-index:1;} .free_fill_wrap .free_fill{position:absolute; top:50%; left:50%; background:#f6f6f6; width:96%; max-width:430px; overflow:hidden; box-sizing:border-box; padding:10px 5px; z-index:2; transform:translate(-50%, -50%); letter-spacing:-1px;} .free_fill_wrap .free_fill h3{line-height:20px; font-size:1.2em; color:var(--bg-fc-color); box-sizing:border-box; padding:0 5px; margin-bottom:10px;} .free_fill_wrap .free_fill h3 a{float:right; width:20px; display:inline-block;} .free_fill_wrap .free_fill h3 a img{cursor:pointer; width:100%;} .free_fill_wrap .free_fill .free_fill_contents{width:100%; background:#fff; overflow:hidden; box-sizing:border-box; border:1px solid #ddd; padding:10px;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_bnr{width:100%;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_bnr img{width:100%;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_list{width:100%; margin-top:11px; overflow:hidden; border-top:2px solid #cecece; border-bottom:2px solid #cecece;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_list ul{width:100%; overflow:hidden;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_list ul li{width:100%; border-bottom:1px solid #e1e1e1; box-sizing:border-box; height:46px; line-height:45px; font-size:1.07em; color:#2c2c2c; padding:0 2px 0 1.5%;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_list ul li span{display:inline-block; width:73%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_list ul li a{display:inline-block; width:70px; height:32px; background:var(--bg-fc-color); border-radius:4px; text-align:center; box-sizing:border-box; color:var(--main-ft-color); padding:2px; float:right; margin-top:6px; line-height:26px;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_list ul li a b{display:inline-block; cursor:pointer; font-weight:bold; width:100%; height:100%; border:1px solid rgba(255, 255, 255, 0.9); border-radius:3px; box-sizing:border-box;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_list ul li a:hover{background:rgb(255, 0, 3);} .free_fill_wrap .free_fill .free_fill_contents .free_fill_paging{width:100%; overflow:hidden; text-align:center; margin:10px auto;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_paging button{display:inline-block; outline:none; width:22px; height:21px; box-sizing:border-box; border:1px solid #ccc; border-radius:3px; text-indent:-9999px;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_paging button.free_fill_prev{background:url(https://cdn.metoon.co.kr/img/free_fill_prev.png) no-repeat center, #fff; background-size:8px;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_paging button.free_fill_next{background:url(https://cdn.metoon.co.kr/img/free_fill_next.png) no-repeat center, #fff; background-size:8px;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_paging span{font-size:1.179em; font-weight:bold; color:var(--bg-fc-color); margin:0 5px; vertical-align:middle; display:inline-block; margin-top:-4px;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_btn{display:block; width:100%; height:40px; line-height:40px; background:var(--bg-fc-color); text-align:center; font-size:1.179em; font-weight:bold; color:var(--main-ft-color); margin-bottom:9px; margin-top:19px;} .free_fill_wrap .free_fill .free_fill_contents .free_fill_btn:hover{background:rgb(255, 0, 3);} @media all and (max-width:355px){ .free_fill_wrap .free_fill .free_fill_contents .free_fill_list ul li{font-size:0.923em; padding:0;} } /* 무료충전코인 팝업 20181107 END */ /* new 회원가입 로그인 팝업 */ .join_login_pop_cover{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.4); z-index:100000000;} #join_login_pop_wrap{position:fixed; top:0; left:0;display:-moz-flex;display:-webkit-flex;display:flex; width:100%; height:100%; z-index:100000001; letter-spacing:-0.03em;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;} #join_login_pop_wrap #join_login_pop{position:relative;/* top:0; left:0; right:0; */margin:auto; width:96%; max-width:397px; background:#fff; border:1px solid #e5e5e5;border-radius:4px;color:#141414;/* margin-top:18%;margin-bottom:60px; */} #join_login_pop_wrap #join_login_pop .jl_head{width:100%;position:relative;padding:0 3.022%;} #join_login_pop_wrap #join_login_pop .jl_head .jl_close{position:absolute; top:0; right:1px; display:block; /* width:15px; */padding:10px;z-index:20;} #join_login_pop_wrap #join_login_pop .jl_head .jl_close img{display:block;width:100%;width:15px; cursor:pointer;} #join_login_pop_wrap #join_login_pop .jl_head h1{position:relative;width:100%;/* height:0;padding-bottom:27.341%; */} #join_login_pop_wrap #join_login_pop .jl_head h1 img{max-width:100%;display:block;/* position:absolute;bottom:0;left:0;right:0; */margin:0 auto;} #join_login_pop .jl_contents{width:100%; box-sizing:border-box; padding:0 3.022%;} #join_login_pop .jl_contents .jl_popup{width:100%;} #join_login_pop .jl_contents .jl_popup .jl_top_txt{font-size:12px; font-weight:bold; color:#676767; width:100%; line-height:32px;} #join_login_pop .jl_contents .jl_popup .jl_top_txt span{color:var(--bg-fc-color);} #join_login_pop .jl_contents .jl_popup .jl_change_box{width:100%; height:44px;} #join_login_pop .jl_contents .jl_popup .jl_change_box li{position:relative; width:50%; height:100%; float:left;} #join_login_pop .jl_contents .jl_popup .jl_change_box li a{position:absolute; bottom:0; left:0; display:block; width:100%; height:44px; border:1px solid #d6d6d6; background:#f5f5f5; line-height:42px; text-align:center; font-size:15px; font-weight:400; color:#ABABAB; box-sizing:border-box;} #join_login_pop .jl_contents .jl_popup .jl_change_login li.jl_chg_join a{border-left:1px solid #f5f5f5;} #join_login_pop .jl_contents .jl_popup .jl_change_join li.jl_chg_login a{border-right:1px solid #eeedf0;} #join_login_pop .jl_contents .jl_popup .jl_change_join li.jl_chg_join a{background:#fff; border:1px solid #d6d6d6; border-left:1px solid #d6d6d6; border-bottom:1px solid #fff; font-weight:700;color:#ef2a23;color:#141414;} #join_login_pop .jl_contents .jl_popup .jl_change_login li.jl_chg_login a{background:#fff; border:1px solid #d6d6d6; border-right:1px solid #d6d6d6; border-bottom:1px solid #fff; font-weight:700;color:#ef2a23;color:#141414;} #join_login_pop .jl_contents .jl_popup .jl_sns{width:100%; margin-top:27px;} .jl_line_title{width:100%; height:1px; position:relative; background:#dddddd; font-size:14px; font-weight:bold; color:#333;} .jl_line_title span{display:inline-block; position:absolute; top:50%; left:50%; width:170px;letter-spacing:0;text-align:center;background:#fff; white-space:nowrap; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%);} #join_login_pop .jl_contents .jl_popup .jl_sns ul{width:100%; overflow:hidden; margin-top:19px;margin-top:25px; text-align:center; box-sizing:border-box; padding:0 4.021%; font-size:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:space-between;justify-content:space-evenly;flex-wrap:wrap;gap:20px 20px;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li{display:inline-block;/* -webkit-box-flex:1;-webkit-flex:1;flex:1; */flex-shrink:0;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li a{display:block; text-align:center;/* padding:0 10px; */-webkit-user-drag:none;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li a.jl_sns_btn i{display:flex;align-items:center;justify-content:center;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li a.jl_sns_btn svg{width:28px;height:28px;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li i{display:block;width:55px;height:55px;border-radius:100%;margin:0 auto;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li span{font-size:12px;color:#555;display:block;line-height:1.1;margin-top:8px;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li a.jl_naver i{background:url("https://cdn.metoon.co.kr/mimg/jl_naver_logo_c.png") no-repeat center; background-size:100%;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li a.jl_kakao i{background:url("https://cdn.metoon.co.kr/mimg/jl_kakao_logo_c.png") no-repeat center; background-size:100%;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li a.jl_facebook i{background:url("https://cdn.metoon.co.kr/mimg/jl_facebook_logo_c.png") no-repeat center; background-size:100%;background-color:#3860bf;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li a.jl_google i{background:url("https://cdn.metoon.co.kr/mimg/jl_google_logo_c.png") no-repeat center; background-size:100%;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li a.jl_line i{background-color:#3ACE01;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li a.jl_yahoo i{background-color:#6B0094;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li a.jl_yahoo svg{fill:#FFFFFF;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li a.jl_apple i{background-color:#000000;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li a.jl_apple svg{width:100%;height:100%;} #join_login_pop .jl_contents .jl_popup .jl_input{width:100%; margin-top:37px;} #join_login_pop .jl_contents .jl_popup .jl_input input.jl_text{width:100%; height:40px; background:#fff; box-sizing:border-box; padding-left:10px; border:1px solid #dddddd; font-size:16px; border-radius:0;-webkit-appearance:none;} #join_login_pop .jl_contents .jl_popup .jl_input input.jl_text:focus{box-shadow:0px 0px 5px 1px inset rgb(255, 100, 146); -webkit-box-shadow:0px 0px 5px 1px inset var(--main-ft-fc-color); border:1px solid var(--main-ft-fc-color);} #join_login_pop .jl_contents .jl_popup .jl_input input[type="text"]::placeholder, #join_login_pop .jl_contents .jl_popup .jl_input input[type="password"]::placeholder{font-size:13px;} #join_login_pop .jl_contents .jl_popup .jl_input input[type="text"]{margin-bottom:7px;} #join_login_pop .jl_contents .jl_popup .jl_input input[name="user_inv_code"]{background-color:#F1F1F1;margin:7px auto 0;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_form .user_domain_box{position:absolute; top:40px; left:0; width:100%; box-sizing:border-box; border:1px solid #ddd; border-top:none; border-bottom:none; background:#fff; z-index:99;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_form .user_domain_box li{width:100%; box-sizing:border-box; padding:8px; font-size:14px;color:#404040;border-bottom:1px solid #ddd;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box{width:100%; overflow:hidden; margin:16px auto 12px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li{float:left; width:50%; height:24px; line-height:24px; text-align:center; font-size:12px; color:#333333;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li a{display:inline-block; position:relative;cursor:pointer;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li a span{display:inline-block; width:24px; height:24px; margin-right:6px; text-indent:-9999px; border-radius:100%; cursor:pointer;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li a em{color:#757575;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li a.on em{color:#333;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li a.jl_email_btn span{background:url("https://cdn.metoon.co.kr/mimg/email_icon.png") no-repeat center, #ABABAB; background-size:14px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li a.jl_phone_btn span{background:url("https://cdn.metoon.co.kr/mimg/phone_icon.png") no-repeat center, #ABABAB; background-size:9px;} /* #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li a.on:before{content:""; position:absolute; top:50%; left:-16px; display:block; background:url("https://cdn.metoon.co.kr/mimg/jl_login_checked_m.png") no-repeat 0 center; width:13px; height:11px; margin-top:-5px; background-size:13px;} */ #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li a.jl_email_btn.on span{background:url("https://cdn.metoon.co.kr/mimg/email_icon.png") no-repeat center, #12141C; background-size:14px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li a.jl_phone_btn.on span{background:url("https://cdn.metoon.co.kr/mimg/phone_icon.png") no-repeat center, #12141C; background-size:9px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form{width:100%; position:relative;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check{width:100%; overflow:hidden; margin:3px auto 0;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check li{/* width:50%; margin-top:5px; */float:left; line-height:14px; font-size:12px; color:#000; box-sizing:border-box; position:relative;margin:7px 8px 0 0;} /* #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check li:first-child, #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check li:nth-of-type(2){margin-top:0;} */ #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check li:nth-child(odd){min-width:170px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check li:last-child{margin-right:0;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check li input{position:absolute; top:0; left:0; opacity:0; width:0;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check li label{position:relative;display:inline-block; padding-left:18px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check li label:before{content:"";display:inline-block;position:absolute;top:50%;left:0;width:14px;height:14px;border:1px solid #ddd;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-top:-7px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check li input[type="checkbox"]:checked + label:before{background:url("https://cdn.metoon.co.kr/mimg/jl_checked_m_new.png") no-repeat center; background-size:100%;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form button.jl_btn{display:inline-block; width:100%; height:43px; line-height:43px; text-align:center; background:#ef2a23;background:#1E202A; color:#FFF; font-weight:700; font-size:16px; border-radius:3px; border:none; outline:none; margin-top:12px;} #join_login_pop .jl_contents .jl_popup .jl_questions{font-size:12px; color:#757575;text-align:center; line-height:1.1;padding:12px 3.022%;background-color:#f7f7f7; margin-top:12px;margin-left:-3.022%;margin-right:-3.022%;border-radius:0 0 4px 4px;} #join_login_pop .jl_contents .jl_popup .jl_questions:after{content:"";display:block;clear:both;} #join_login_pop .jl_contents .jl_popup .jl_questions .terms_grp{margin-bottom:8px;} #join_login_pop .jl_contents .jl_popup .jl_questions .terms_grp a + a{margin-left:4px;} #join_login_pop .jl_contents .jl_popup .jl_questions a{color:#757575;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login{margin-top:20px; position:relative;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_form_check{width:100%;margin-top:12px;position:relative; box-sizing:border-box;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_form_check:after{content:"";display:block;clear:both;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_form_check li{float:left; line-height:13px; position:relative;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_form_check li:first-child{margin-right:15px;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_form_check li input{position:absolute; top:0; left:0; opacity:0; width:0;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_form_check li label{display:inline-block; line-height:14px; padding-left:20px;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_form_check li label:before{content:"";display:inline-block;position:absolute;top:50%;left:0;width:16px;height:16px;border:1px solid #ddd;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-top:-8px;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_form_check li input[type="checkbox"]:checked + label:before{background:url("https://cdn.metoon.co.kr/mimg/jl_checked_m_new.png") no-repeat center; background-size:100%;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_form_check .jl_pw_find{display:block; position:absolute; top:0; right:0; margin-top:-5px;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_form_check .jl_pw_find a{display:inline-block; padding:0 5px; height:20px; line-height:20px; text-align:center; font-size:12px; color:#757575; background:#fff; border-radius:3px;border:1px solid #ddd;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_log_add{width:100%; margin-top:8px; margin-bottom:8px; float:left; box-sizing:border-box;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_log_add span{display:block; float:left;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_log_add span a{display:inline-block; display:inline-block; padding:0 9px; height:22px; line-height:22px; text-align:center; font-size:12px; color:#FFF; background:#929292; border-radius:3px;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_log_add .jl_service{margin-right:10px;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form button.jl_btn{display:inline-block; width:100%; height:43px; line-height:43px; text-align:center; background:#ef2a23;background:#1E202A; color:#FFF; font-weight:700; font-size:16px; border-radius:3px; margin-top:12px; border:none; outline:none;} #join_login_pop .jl_contents .jl_popup .jl_form button.jl_btn .jl_btn_loading{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex;height:20px;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;vertical-align:middle;text-align:center;} #join_login_pop .jl_contents .jl_popup .jl_form button.jl_btn .jl_btn_loading span{-webkit-box-flex:1;-ms-flex:1;-webkit-flex:1;flex:1;display:block;width:3px;height:10px;background:rgba(255, 255, 255, .9);-webkit-animation:jlLoading 1s infinite linear;-moz-animation:jlLoading 1s infinite linear;animation:jlLoading 1s infinite linear;} #join_login_pop .jl_contents .jl_popup .jl_form button.jl_btn .jl_btn_loading span + span{margin-left:3px;} #join_login_pop .jl_contents .jl_popup .jl_form button.jl_btn .jl_btn_loading span:nth-child(1){animation-delay:-0.15s} #join_login_pop .jl_contents .jl_popup .jl_form button.jl_btn .jl_btn_loading span:nth-child(2){animation-delay:0s} #join_login_pop .jl_contents .jl_popup .jl_form button.jl_btn .jl_btn_loading span:nth-child(3){animation-delay:0.15s} #join_login_pop .jl_contents .jl_popup .jl_form button.jl_btn .jl_btn_loading span:nth-child(4){animation-delay:0.3s} #join_login_pop .jl_contents .jl_popup .jl_form button.jl_btn .jl_btn_loading span:nth-child(5){animation-delay:0.45s} @-webkit-keyframes jlLoading{ 0, 50%{-webkit-transform:scaleY(.3);-moz-transform:scaleY(.3);-o-transform:scaleY(.3);-ms-transform:scaleY(.3);transform:scaleY(.3);} 25%{-webkit-transform:scaleY(1.8);-moz-transform:scaleY(1.8);-o-transform:scaleY(1.8);-ms-transform:scaleY(1.8);transform:scaleY(1.8);} } @-moz-keyframes jlLoading{ 0, 50%{-webkit-transform:scaleY(.3);-moz-transform:scaleY(.3);-o-transform:scaleY(.3);-ms-transform:scaleY(.3);transform:scaleY(.3);} 25%{-webkit-transform:scaleY(1.8);-moz-transform:scaleY(1.8);-o-transform:scaleY(1.8);-ms-transform:scaleY(1.8);transform:scaleY(1.8);} } @keyframes jlLoading{ 0, 50%{-webkit-transform:scaleY(.3);-moz-transform:scaleY(.3);-o-transform:scaleY(.3);-ms-transform:scaleY(.3);transform:scaleY(.3);} 25%{-webkit-transform:scaleY(1.8);-moz-transform:scaleY(1.8);-o-transform:scaleY(1.8);-ms-transform:scaleY(1.8);transform:scaleY(1.8);} } #join_login_pop .jl_contents .jl_popup .jl_input input[type="number"]::-webkit-outer-spin-button, #join_login_pop .jl_contents .jl_popup .jl_input input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_certify{position:absolute; top:51px; right:2%; width:74px; height:26px; line-height:26px; border-radius:4px; font-size:13px; text-align:center;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_certify a{display:block; width:100%; height:100%; background:#666666; color:var(--main-ft-color); border-radius:4px;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_cert_list{width:100%; overflow:hidden; margin:6px auto 6px;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_cert_list li{width:100%; line-height:1.1;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_cert_list li:first-child{margin-bottom:4px;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_cert_list li p{font-size:12px; color:#222222;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_cert_list li p span{color:#ef2a23; font-weight:bold;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_cert_list li:last-child span{display:block; float:left;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_cert_list li:last-child span.jl_service{margin-right:10px;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_cert_list li:last-child span a{display:inline-block; padding:0 9px; height:22px; line-height:22px; text-align:center; font-size:12px; color:var(--main-ft-color); background:#929292; border-radius:3px;} @media all and (max-width:410px){ #join_login_pop .jl_contents .jl_popup .jl_sns ul{padding:0 10px;} } @media all and (max-width:380px){ #join_login_pop_wrap{letter-spacing:-1px;} #join_login_pop .jl_contents .jl_popup .jl_top_txt{line-height:1.5;} #join_login_pop .jl_contents .jl_popup .jl_sns{margin-top:20px;} #join_login_pop .jl_contents .jl_popup .jl_input{margin-top:30px;} #join_login_pop .jl_contents .jl_popup .jl_input input.jl_text{font-size:14px; height:38px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form button.jl_btn{height:38px; line-height:38px;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form button.jl_btn{height:38px; line-height:38px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check li:nth-child(odd){min-width:160px;} } @media all and (max-width:370px){ #join_login_pop .jl_contents .jl_popup .jl_change_box{height:40px;} #join_login_pop .jl_contents .jl_popup .jl_sns ul li i{width:46px;height:46px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li{font-size:12px;} } @media all and (max-width:359px){ #join_login_pop .jl_contents .jl_popup .jl_input input.jl_text{height:40px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li{line-height:20px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li a span{width:20px; height:20px; margin-right:3px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .ep_chg_box li a.on:before{width:11px; height:9px; background-size:11px; left:-13px; margin-top:-5px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check li{font-size:11px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form .jl_form_check li:nth-child(odd){min-width:150px;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_form_check .jl_pw_find{margin-right:3%; margin-top:-4px;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form_login .jl_log_add{padding:0 3%; margin-top:12px;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form button.jl_btn{margin-top:16px;} #join_login_pop .jl_contents .jl_popup .jl_ep_join .jl_form button.jl_btn{height:40px; line-height:40px; font-size:15px;} #join_login_pop .jl_contents .jl_popup .jl_ep_login .jl_form button.jl_btn{height:40px; line-height:40px; font-size:15px;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_cert_list{margin:6px auto 7px;} #join_login_pop .jl_contents .jl_popup .jl_input .jl_cert_list li p{letter-spacing:-1px; font-size:11px;} } /* 비밀번호 찾기 NEW */ #findpw_pop_wrap{position:fixed; top:0; left:0; width:100%; height:100%; z-index:100000001; letter-spacing:-0.03em;} #findpw_pop_wrap #findpw_pop{position:absolute; top:50%; left:50%; width:96%; max-width:397px; background:#fff; border:1px solid #e5e5e5;border-radius:4px; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); z-index:2;} #findpw_pop_wrap #findpw_pop .fp_head{width:100%;position:relative;padding:0 3.022%;} #findpw_pop_wrap #findpw_pop .fp_head .fp_close{position:absolute; top:12px; right:11px; display:block; width:25px;z-index:20;} #findpw_pop_wrap #findpw_pop .fp_head .fp_close img{display:block;width:16px;cursor:pointer;margin:auto;} #findpw_pop_wrap #findpw_pop .fp_head h1{position:relative;width:100%;/* height:0;padding-bottom:27.341%; */} #findpw_pop_wrap #findpw_pop .fp_head h1 img{display:block;/* position:absolute;bottom:0;left:0;right:0; */width:100%;margin:0 auto;} #findpw_pop .fp_contents{width:100%; box-sizing:border-box; padding:0 12px 20px;} #findpw_pop .fp_contents .findpw_new{width:100%; overflow:hidden;} #findpw_pop .fp_contents .findpw_new .fp_change_box{width:100%; height:44px; margin-bottom:20px;} #findpw_pop .fp_contents .findpw_new .fp_change_box li{position:relative; width:50%; height:100%; float:left;} #findpw_pop .fp_contents .findpw_new .fp_change_box li a{position:absolute; bottom:0; left:0; display:block; width:100%; height:44px; border:1px solid #d6d6d6; background:#f5f5f5; line-height:42px; text-align:center; font-size:15px; font-weight:400; color:#ABABAB; box-sizing:border-box;} #findpw_pop .fp_contents .findpw_new .fp_change_box li.fp_chg_login a{border-left:1px solid #f5f5f5;} #findpw_pop .fp_contents .findpw_new .fp_change_box li.fp_chg_findpw a{border-right:1px solid #f5f5f5;} #findpw_pop .fp_contents .findpw_new .fp_change_box li.fp_chg_findpw a{height:100%; line-height:42px; background:#fff; border:1px solid #d6d6d6;border-bottom:1px solid #fff; color:#ef2a23;font-weight:700;color:#141414;} #findpw_pop .fp_contents .fp_form{width:100%;} #findpw_pop .fp_contents .fp_form .jl_line_title{margin-bottom:15px;} #findpw_pop .fp_contents .fp_form input{width:100%; height:43px; line-height:41px; background:#fff; box-sizing:border-box; padding-left:10px; padding-right:10px; border:1px solid #dddddd; font-size:16px;} #findpw_pop .fp_contents .fp_form input::placeholder{letter-spacing:-0.05em; font-size:11px;} #findpw_pop .fp_contents .fp_form .findpw_btn{display:inline-block; width:100%; height:43px; line-height:43px; text-align:center; background:#1E202A; color:#FFF; font-weight:bold; font-size:16px; border-radius:3px; margin-top:16px; border:none; outline:none;} #findpw_pop .fp_contents .fp_form .fp_terms{width:100%; overflow:hidden; margin-top:12px;} #findpw_pop .fp_contents .fp_form .fp_terms ul li{float:right; margin-right:10px;} #findpw_pop .fp_contents .fp_form .fp_terms ul li:first-child{margin-right:0;} #findpw_pop .fp_contents .fp_form .fp_terms ul li a{display:inline-block; display:inline-block; padding:0 5px; height:20px; line-height:20px; text-align:center; font-size:12px; color:#757575;border:1px solid #ddd; background:#fff; border-radius:3px;} @media all and (max-width:359px){ #findpw_pop .fp_contents .fp_form .findpw_btn{height:40px; line-height:40px; font-size:15px;} } /* me x 리얼로또 콜라보 이벤트 배너 */ .mexrotto_pass_icon{position:fixed; bottom:16%; right:35px; width:120px; height:161px; z-index:999;} .mexrotto_pass_icon a{position:absolute; display:block; background:#fff;} .mexrotto_pass_icon a img{cursor:pointer;} .mexrotto_pass_icon .mexrotto_pass_open{top:0; left:0; width:100%; z-index:1; border:1px solid #ddd;} .mexrotto_pass_icon .mexrotto_pass_open img{width:100%;} .mexrotto_pass_icon .mexrotto_pass_close{top:-25px; right:-25px; width:23px; z-index:2; background:transparent;} .mexrotto_pass_icon .mexrotto_pass_close img{width:100%;} /* me x 리얼로또 콜라보 이벤트 배너 E */ /* 신규회원 50코인 증정 이벤트 페이지 */ .event_me50coin{width:100%; position:relative;} .event_me50coin > img{width:100%; vertical-align:top;} .event_me50coin ul{position:absolute; bottom:3.35%; left:0; width:100%; text-align:center; font-size:0;} .event_me50coin ul li{display:inline-block; width:25.6%; margin-left:3.2%;} .event_me50coin ul li:first-child{margin-left:0;} .event_me50coin ul li a img{width:100%; cursor:pointer;} /* 신규회원 50코인 증정 이벤트 페이지 E */ .coin_del{position:relative; font-weight:bold; color:#b4b4b4;} .coin_del:before{content:""; display:inline-block; position:absolute; top:50%; left:0; width:100%; border-top:1px solid #b4b4b4; /* transform:rotate(20deg); -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); -o-transform:rotate(20deg); -ms-transform:rotate(20deg); */} /* .coin_del:after{content:""; display:inline-block; position:absolute; top:50%; left:0; width:100%; border-top:1px solid rgba(211, 43, 43, 0.7); transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); -o-transform:rotate(-20deg); -ms-transform:rotate(-20deg);} */ @media all and (max-width:359px){ #coin_notice_fill_wrap .coin_notice_fill_box1 .btm_box p.coin_txt10{font-size:10px;} #coin_notice_fill_wrap2 .coin_notice_fill_box2 .btm_box p.coin_txt10{font-size:10px;} } /* 자동충전 on off */ .charge_switch_wrap{width:100%; background:#fff; border:1px solid #eee; border-radius:0 0 3px 3px; padding:20px 10px 20px; margin:0 auto 15px; line-height:25px;} .charge_switch_wrap span{font-size:1.15em; color:#565656; font-weight:600;} .auto_switch{float:right; width:117px; height:25px; line-height:23px;} .charge_switch_wrap .auto_switch a{display:block; float:left; width:50%; height:100%; border:1px solid #cccccc; font-size:12px; font-weight:bold; color:#acacac; box-sizing:border-box; -webkit-box-sizing:border-box; text-align:center;} .charge_switch_wrap .auto_switch a:first-child{border-radius:3px 0 0 3px; border-right:0 none;} .charge_switch_wrap .auto_switch a:last-child{border-radius:0 3px 3px 0; background:#959595; color:var(--main-ft-color); border-color:#959595;} .charge_switch_wrap .auto_switch.on a:first-child{background:#d52b2c; color:var(--main-ft-color); border-color:#d52b2c;} .charge_switch_wrap .auto_switch.on a:last-child{background:#fff; color:#acacac; border-color:#cccccc;} /* 자동충전 on off E */ /* 코인충전소 20190412 */ #coin_fill_form{width:100%; margin:0 auto;} #coin_fill_form .self_clearing{margin:9px auto 7px;} #coin_fill_form .s_promo{margin:14px auto 7px;} #coin_fill_form ul{width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; border:1px solid #ededed; border-radius:3px;} #coin_fill_form ul li a, #coin_fill_form .self_clearing a{display:block; width:100%; position:relative;} #coin_fill_form ul li a input, #coin_fill_form .self_clearing a input, #coin_fill_form .s_promo a input{position:absolute; top:0; left:0; opacity:0; width:0; z-index:-1;} #coin_fill_form a{display:block; width:100%; padding:0 6px; box-sizing:border-box; -webkit-box-sizing:border-box;} #coin_fill_form .self_clearing a, #coin_fill_form .s_promo a{border:1px solid var(--bg-fc-color); border-radius:3px;} #coin_fill_form a label{position:relative; display:table; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; padding:17px 78px 17px 3px; letter-spacing:-0.05em;} #coin_fill_form .s_promo a label{padding-top:24px;} #coin_fill_form ul li a label{border-bottom:1px solid #ededed;} #coin_fill_form ul li:last-child a label{border-bottom:0 none;} #coin_fill_form a label:after{content:""; display:block; clear:both;} #coin_fill_form a label > div{display:table-cell; vertical-align:middle;} #coin_fill_form a label .coin_box{width:79px; padding-left:16px; background:url(https://cdn.metoon.co.kr/img/fill_coin_icon.png) no-repeat 0 center; background-size:13px; font-size:10px; color:#000;} #coin_fill_form a label .coin_box .all_coin{font-size:1.59em; font-weight:800;} #coin_fill_form a label .coin_txt_box .coin_txt{display:inline-block;} #coin_fill_form a label .coin_txt_box .coin_txt p{line-height:1.1; font-size:11px; color:#363636;} #coin_fill_form a label .coin_txt_box .coin_txt p:first-child{margin-bottom:5px;} #coin_fill_form a label .coin_txt_box .coin_txt p .pay_del{text-decoration:line-through;} #coin_fill_form a label .coin_txt_box .coin_txt p .pay_discount{font-weight:bold; color:#d52b2c;} #coin_fill_form a label .coin_txt_box .cash{display:inline-block; vertical-align:top; margin-top:5px; font-size:15px; font-weight:bold; color:#000; float:right;} #coin_fill_form .self_clearing a label .coin_txt_box .cash{margin-top:-3px;} #coin_fill_form .s_promo a label .coin_txt_box .cash{margin-top:0;} #coin_fill_form a label .coin_txt_box .cash .secret_tag{display:inline-block; font-size:0.67em; padding:2px 3px 1px; line-height:1.1; border:1px solid var(--bg-fc-color);} #coin_fill_form a label .coin_txt_box .fill_btn{position:absolute; top:50%; right:3px; display:block; width:64px; text-align:center; padding:9px 0 7px; line-height:1.1; border:1px solid var(--bg-fc-color); border-radius:3px; font-size:11px; font-weight:bold; color:var(--bg-fc-color); transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%);} #coin_fill_form a label:hover .coin_txt_box .fill_btn{background:var(--bg-fc-color); color:var(--main-ft-color);} #coin_fill_form .s_promo a label .promo_logo_box{position:absolute; top:0; left:0; width:63.294%; max-width:242px; border:1px solid var(--bg-fc-color); background-color:#FFFFFF; border-radius:4px; margin:-3% 0 0 3px; display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center;} #coin_fill_form .s_promo a label .promo_logo_box:after{content:""; display:block; clear:both;} #coin_fill_form .s_promo a label .promo_logo_box p{float:left; margin:0;} #coin_fill_form .s_promo a label .promo_logo_box .promo_logo{width:32%; text-align:center;} #coin_fill_form .s_promo a label .promo_logo_box .promo_logo img{width:85%; vertical-align:top;} #coin_fill_form .s_promo a label .promo_logo_box .promo_logo_txt{width:68%; background:#d52b2c;} #coin_fill_form .s_promo a label .promo_logo_box .promo_logo_txt img{width:100%; vertical-align:top;} #charge_pop #payment_type .auto_fill_box{width:100%; text-align:left; border:1px solid var(--bg-fc-color); background-color:var(--bg-fc-color); border-radius:2px; display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center; letter-spacing:-0.05em; margin-bottom:20px;} #charge_pop #payment_type .auto_fill_box:after{content:""; display:block; clear:both;} #charge_pop #payment_type .auto_fill_box .af_chosen{float:left; width:67px; text-align:center; color:var(--main-ft-color); font-size:12px; font-weight:bold; background:var(--bg-fc-color);} #charge_pop #payment_type .auto_fill_box .af_info{display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center; -webkit-box-pack:justify;justify-content:space-around; flex-wrap:wrap; width:calc(100% - 67px); float:right; background:#fff; padding:14px 12px;} #charge_pop #payment_type .auto_fill_box .af_info > div{display:inline-block; vertical-align:middle;} #charge_pop #payment_type .auto_fill_box .af_info .af_coin{padding-left:16px; background:url(https://cdn.metoon.co.kr/img/fill_coin_icon.png) no-repeat 0 center; background-size:13px; font-size:11px; color:#000;} #charge_pop #payment_type .auto_fill_box .af_info .af_coin strong{font-size:1.45em; font-weight:800;} #charge_pop #payment_type .auto_fill_box .af_info .af_coin_txt{font-size:11px; color:#363636;} #charge_pop #payment_type .auto_fill_box .af_info .af_coin_txt .af_del{text-decoration:line-through;} #charge_pop #payment_type .auto_fill_box .af_info .af_coin_txt .af_discount{font-size:12px; color:var(--bg-fc-color); font-weight:bold; margin-left:3px;} #charge_pop #payment_type .auto_fill_box .af_info .af_price{font-size:18px; font-weight:bold; color:var(--bg-fc-color);} #charge_pop #payment_type .auto_fill_box .af_info .af_price span{font-size:11px;} @media all and (min-width:500px){ #coin_fill_form a label .coin_txt_box{text-align:center;} #coin_fill_form a label .coin_txt_box .coin_txt p{font-size:1em;} #coin_fill_form .s_promo a label .promo_logo_box{margin-top:-15px;} #coin_fill_form .s_promo a label .coin_txt_box .cash{margin-top:5px;} } @media all and (max-width:400px){ #coin_fill_form a label .coin_txt_box .coin_txt{display:block;} #coin_fill_form a label .coin_txt_box .coin_txt p{font-size:12px;} #coin_fill_form a label .coin_txt_box .cash{display:block; float:none;} #coin_fill_form .self_clearing a label .coin_txt_box .cash{margin-top:5px;} #coin_fill_form .self_clearing a label .coin_txt_box .cash br{display:none;} #coin_fill_form a label .coin_txt_box .cash .secret_tag{vertical-align:top; margin-right:5px;} #coin_fill_form .s_promo a label .promo_logo_box{width:184px;} #coin_fill_form .s_promo a label .promo_logo_box .promo_logo{width:60px;} #coin_fill_form .s_promo a label .promo_logo_box .promo_logo img{width:80%;} #coin_fill_form .s_promo a label .promo_logo_box .promo_logo_txt{width:122px;} } @media all and (max-width:375px){ #charge_pop #payment_type .auto_fill_box .af_info{padding:14px 5px;} } @media all and (max-width:360px){ #charge_pop #payment_type .auto_fill_box .af_info{padding:14px 0;} } /* 코인충전소 20190412 E */ /* 이벤트마일리지 팝업 20190423 */ .e_mileage_new_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999999;} .e_mileage_new_wrap .e_mileage_new_bg{position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.4); z-index:1;} .e_mileage_new_wrap .e_mileage_new_pop{position:absolute; top:50%; left:0; right:0; margin:auto; width:70%; max-width:300px; min-width:250px; border-radius:10px; letter-spacing:-0.03em; overflow:hidden; transform:translateY(-50%); -webkit-transform:translateY(-50%); z-index:2;} .e_mileage_new_pop .em_body{width:100%; padding-top:21px; padding-bottom:14px; background-color:#FFFFFF; text-align:center;} .e_mileage_new_pop .em_body .em_ic img{width:61px;} .e_mileage_new_pop .em_body .em_txt{font-size:14px; color:#141414; font-weight:normal; margin:12px auto 0;} .e_mileage_new_pop .em_body .em_txt .title{font-size:16px; font-weight:bold; line-height:1; margin-bottom:7px;} .e_mileage_new_pop .em_body .em_txt p:not(.title){line-height:1.4;} .e_mileage_new_pop .em_body .em_txt p .em_red{color:#d52b2c;} .e_mileage_new_pop .em_btn_group{width:100%; overflow:hidden;} .e_mileage_new_pop .em_btn_group a{display:block; float:left; width:50%; padding:13px 0 12px; text-align:center; font-size:15px; color:var(--main-ft-color); background-color:#000; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; cursor:pointer;} .e_mileage_new_pop .em_btn_group a.em_open_btn{border-left:1px solid #4b4b4b;} /* 이벤트마일리지 팝업 20190423 E */ /* 자동충전 구매 알림 팝업 20190508 */ .a_charge_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:100000000;} .a_charge_wrap .a_charge_bg{position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.4); z-index:1;} .a_charge_wrap .a_charge_pop{position:absolute; top:50%; left:0; right:0; margin:auto; width:300px; border-radius:10px; letter-spacing:-0.03em; overflow:hidden; transform:translateY(-50%); -webkit-transform:translateY(-50%); z-index:2;} .a_charge_pop .ac_body{width:100%; padding-top:21px; padding-bottom:17px; background-color:#FFFFFF; text-align:center;} .a_charge_pop .ac_body .ac_ic img{width:59px;} .a_charge_pop .ac_body .ac_txt{font-size:14px; color:#141414; font-weight:normal; margin:12px auto 0;} .a_charge_pop .ac_body .ac_txt .title{font-size:16px; font-weight:bold; line-height:1.4; margin-bottom:8px;} .a_charge_pop .ac_body .ac_txt p:not(.title){font-size:13px; color:#898989; line-height:1;} .a_charge_pop .ac_body .ac_txt p .ac_red{color:#ff201f;} .a_charge_pop .ac_btn_group{width:100%; overflow:hidden;} .a_charge_pop .ac_btn_group a{display:block; float:left; width:50%; padding:13px 0 12px; text-align:center; font-size:15px; color:var(--main-ft-color); background-color:#000; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; cursor:pointer;} .a_charge_pop .ac_btn_group a.ac_open_btn{border-left:1px solid #4b4b4b;} /* 자동충전 구매 알림 팝업 20190508 E */ /* 월 자동충전 팝업 */ #auto_fill_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999999;} #auto_fill_wrap .auto_fill_bg{position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.4); z-index:1;} #auto_fill_wrap .auto_fill_box{position:absolute; top:3%; left:0; right:0; width:95%; max-width:430px; margin:auto; background-color:#f6f6f6; padding:10px 5px; opacity:0; -webkit-transition:opacity 0.4s ease-in-out; -moz-transition:opacity 0.4s ease-in-out; -o-transition:opacity 0.4s ease-in-out; transition:opacity 0.4s ease-in-out; -webkit-animation:slide-down 0.4s forwards; animation:slide-down 0.4s forwards; z-index:2;} @keyframes slide-down{ 0%{ -webkit-transform:translate3d(0, -100%, 0); -moz-transform:translate3d(0, -100%, 0); -o-transform:translate3d(0, -100%, 0); -ms-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0); opacity:0; } 100%{ -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); opacity:1; } } #auto_fill_wrap .auto_fill_box.close{-webkit-animation:slide-up 0.4s forwards; animation:slide-up 0.4s forwards;} @keyframes slide-up{ 0%{ -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); opacity:1; } 100%{ -webkit-transform:translate3d(0, -100%, 0); -moz-transform:translate3d(0, -100%, 0); -o-transform:translate3d(0, -100%, 0); -ms-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0); opacity:0; } } #auto_fill_wrap .auto_fill_box > p{color:var(--bg-fc-color); text-indent:5px; font-size:15px; font-weight:bold; position:relative; margin-bottom:10px; cursor:default;} #auto_fill_wrap .auto_fill_box > p .auto_fill_close{position:absolute; display:inline-block; top:-4px; bottom:0; right:5px; margin:auto; width:17px; height:17px; background:url('https://cdn.metoon.co.kr/img/auto_fill_x.png') no-repeat center; background-size:100% auto;} #auto_fill_wrap .auto_fill_box .auto_fill_contents{padding:25px 0.026em 11px; background-color:#FFFFFF; border:1px solid #ddd;} #auto_fill_wrap .auto_fill_box .s_promo_fill{position:relative; margin-bottom:31px;} #auto_fill_wrap .auto_fill_box .s_promo_fill h2{padding-left:22px; line-height:18px; font-size:18px; font-weight:bold; color:var(--bg-fc-color); background:url('https://cdn.metoon.co.kr/img/auto_fill_gif.gif') no-repeat 0; background-size:18px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; opacity:0; -webkit-animation:font-sliding 0.8s forwards; -moz-animation:font-sliding 0.8s forwards; animation:font-sliding 0.8s forwards; -webkit-animation-delay:0.5s; -moz-animation-delay:0.5s; animation-delay:0.5s;} #auto_fill_wrap .auto_fill_box .s_promo_fill h2 span{font-size:13px;} @keyframes font-sliding{ 0%{ -webkit-transform:translateX(50%) scale(0.4); -moz-transform:translateX(50%) scale(0.4); -o-transform:translateX(50%) scale(0.4); -ms-transform:translateX(50%) scale(0.4); transform:translateX(50%) scale(0.4); opacity:0; } 55%{ -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); } 68%{ -webkit-transform:translateX(3px); -moz-transform:translateX(3px); -o-transform:translateX(3px); -ms-transform:translateX(3px); transform:translateX(3px); } 100%{ -webkit-transform:translateX(0) scale(1); -moz-transform:translateX(0) scale(1); -o-transform:translateX(0) scale(1); -ms-transform:translateX(0) scale(1); transform:translateX(0) scale(1); opacity:1; } } #auto_fill_wrap .auto_fill_box .s_promo_fill .s_promo_info{padding:0.04em 0.027em; border:1px solid #d52b2c; border-radius:3px; margin:7px auto 5px;} #auto_fill_wrap .auto_fill_box .s_promo_fill .s_promo_info input{position:absolute; top:0; left:0; opacity:0; z-index:-1; visibility:hidden;} #auto_fill_wrap .auto_fill_box .s_promo_fill .s_promo_info label{display:block; line-height:25px; font-size:0.03em; text-align:center; color:#363636; letter-spacing:-0.05em; border:1px solid #fff; text-align:center;} #auto_fill_wrap .auto_fill_box .s_promo_fill .s_promo_info label .check{width:13px; float:left; margin-left:5px; margin-top:8px; display:none;} #auto_fill_wrap .auto_fill_box .s_promo_fill .s_promo_info.on label{background:#fff5f8; border:1px solid var(--bg-fc-color);} #auto_fill_wrap .auto_fill_box .s_promo_fill .s_promo_info.on label .check{display:block;} #auto_fill_wrap .auto_fill_box .s_promo_fill .s_promo_info label strong{font-size:1.15em; font-weight:bold; color:#010101;} #auto_fill_wrap .auto_fill_box .s_promo_fill .s_promo_info label span{color:var(--bg-fc-color);} #auto_fill_wrap .auto_fill_box .s_promo_fill .s_promo_info label .price:before{content:""; display:inline-block; width:0.47em; height:0.667em; margin:0 0.333em; background:url('https://cdn.metoon.co.kr/img/ic_arrow_auto_fill.png') no-repeat center;} #auto_fill_wrap .auto_fill_box .s_promo_fill .s_promo_info label .price{font-size:1.25em; color:var(--bg-fc-color);} #auto_fill_wrap .auto_fill_box .s_promo_fill .s_promo_info label .price i{font-size:0.8em;} #auto_fill_wrap .auto_fill_box .s_promo_fill a.s_promo_btn{display:block; width:100%; height:37px; line-height:37px; text-align:center; border-radius:3px; background-color:var(--bg-fc-color); color:var(--main-ft-color); font-size:14px; font-weight:bold;} #auto_fill_wrap .auto_fill_box .s_promo_fill a.s_promo_btn:hover{background-color:#b20f0f;} #auto_fill_wrap .auto_fill_box .s_promo_fill a.s_promo_info_btn{display:inline-block; float:right; font-size:11px; color:#363636; margin-top:5px; line-height:1;} #auto_fill_wrap .auto_fill_box .s_promo_fill .notice_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.2); z-index:1;} #auto_fill_wrap .auto_fill_box .s_promo_fill .notice{position:absolute; top:10%; left:50%; margin-left:-130px; width:260px; background-color:#FFFFFF; color:#010101; border:1px solid #ddd;} #auto_fill_wrap .auto_fill_box .s_promo_fill .notice div{padding:15px 15px 0; font-size:12px;} #auto_fill_wrap .auto_fill_box .s_promo_fill .notice p{position:relative; margin-bottom:7px; line-height:1.4; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding-left:10px; letter-spacing:-0.05em;} #auto_fill_wrap .auto_fill_box .s_promo_fill .notice p:before{content:"-"; display:block; color:#010101; position:absolute; top:0; left:0;} #auto_fill_wrap .auto_fill_box .s_promo_fill .notice p:last-child{margin-bottom:0;} #auto_fill_wrap .auto_fill_box .s_promo_fill .notice .notice_btn{display:block; width:60px; height:35px; line-height:35px; font-size:14px; color:var(--main-ft-color); font-weight:bold; text-align:center; margin:15px auto 7px; background-color:#444;} #auto_fill_wrap .auto_fill_box .btm_box input{position:absolute; opacity:0; width:1px; visibility:hidden; top:0; left:0; z-index:-1;} #auto_fill_wrap .auto_fill_box .btm_box{width:100%; margin-top:10px; border-top:2px solid #cecece;} #auto_fill_wrap .auto_fill_box .btm_box .bottom_wrap{width:100%; overflow:hidden;} #auto_fill_wrap .auto_fill_box .btm_box .bottom_wrap div{width:100%; overflow:hidden; border:1px solid #fff; box-sizing: border-box; border-bottom:1px solid #e1e1e1; } #auto_fill_wrap .auto_fill_box .btm_box .bottom_wrap div p{font-weight:bold;} #auto_fill_wrap .auto_fill_box .btm_box .bottom_wrap div.on{background: #fff5f8; border: 1px solid var(--bg-fc-color);} #auto_fill_wrap .auto_fill_box .btm_box .bottom_wrap div label{display:block; overflow:hidden; padding:7px 0.026em; padding-left:0.053em; letter-spacing:-1px;} #auto_fill_wrap .auto_fill_box .btm_box .bottom_wrap div.on label{padding-left:0.01em;} #auto_fill_wrap .auto_fill_box .btm_box p{margin:0; float:left; color:#676767; font-size:0.0312em; margin-top:2px; cursor:pointer;} #auto_fill_wrap .auto_fill_box .btm_box .bottom_wrap div span{color:var(--bg-fc-color); cursor:pointer;} #auto_fill_wrap .auto_fill_box .btm_box .bottom_wrap div span.coin_del{color:#b4b4b4;} #auto_fill_wrap .auto_fill_box .btm_box .coin_p{text-align:left; color:#2c2c2c; font-size:0.038em; margin-right:0.35em; margin-top:0;} #auto_fill_wrap .auto_fill_box .btm_box .pay_del{float:right; position:relative; color:#777; margin-top:0;} #auto_fill_wrap .auto_fill_box .btm_box .pay_del:before{content:""; position:absolute; top:50%; left:50%; width:102%; height:1px; background:#555; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%);} #auto_fill_wrap .auto_fill_box .btm_box .ic_arrow{float:right; width:7px; height:10px; background:url("https://cdn.metoon.co.kr/mimg/ic_pay_arrow.png") no-repeat center; background-size:100%; margin:2px 5px 0 7px;} #auto_fill_wrap .auto_fill_box .btm_box .cash{float:right; color:#2c2c2c; margin-top:0;} #auto_fill_wrap .auto_fill_box .btm_box .bottom_wrap div label .check{width: 13px; float: left; margin-right: 5px; margin-top: 3px; display: none;} #auto_fill_wrap .auto_fill_box .btm_box .bottom_wrap div.on label .check{display: block;} #auto_fill_wrap .auto_fill_box .phone_fill_btn{ height:40px; border:none; display: block; width:100%; background:var(--bg-fc-color); color:var(--main-ft-color); margin:10px auto 5px; border-radius:5px; font-size:14px; font-weight:bold;} #auto_fill_wrap .auto_fill_box .phone_fill_btn:hover{background:#b20f0f;} #auto_fill_wrap .auto_fill_box .today_close{text-align:right; padding-right:10px; font-size:13px;} #auto_fill_wrap .auto_fill_box .today_close input, #auto_fill_wrap .auto_fill_box .today_close label{vertical-align:middle;} #auto_fill_wrap .auto_fill_box .today_close .auto_fill_close{display:inline-block; width:40px; height:25px; border:0 none; background-color:var(--bg-fc-color); color:var(--main-ft-color); border-radius:3px; font-size:13px; font-weight:bold; letter-spacing:-0.05em; vertical-align:middle;} @media only screen and (min-width:380px){ #auto_fill_wrap .auto_fill_box .btm_box .bottom_wrap div label{padding:7px 10px; padding-left:20px;} #auto_fill_wrap .auto_fill_box .btm_box p{font-size:12px;} #auto_fill_wrap .auto_fill_box .btm_box .coin_p{margin-right:5px; font-size:14px;} } @media only screen and (max-width:339px){ #auto_fill_wrap .auto_fill_box .s_promo_fill h2{font-size:16px;} #auto_fill_wrap .auto_fill_box .s_promo_fill h2 span{font-size:12px;} #auto_fill_wrap .auto_fill_box .s_promo_fill .s_promo_info label .check{width:10px; margin-top:10px; margin-left:3px;} #auto_fill_wrap .auto_fill_box .today_close label{font-size:12px;} #auto_fill_wrap .auto_fill_box .today_close .auto_fill_close{height:20px; font-size:13px;} } /* 월 자동충전 팝업 E */ /* kt 자동충전 팝업 */ #auto_fill_kt_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999999;} #auto_fill_kt_wrap .auto_fill_kt_bg{position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.4); z-index:1;} #auto_fill_kt_wrap .auto_fill_kt_box{position:absolute; top:3%; left:0; right:0; width:95%; max-width:430px; margin:auto; background-color:#f6f6f6; padding:10px 5px; opacity:0; -webkit-transition:opacity 0.4s ease-in-out; -moz-transition:opacity 0.4s ease-in-out; -o-transition:opacity 0.4s ease-in-out; transition:opacity 0.4s ease-in-out; -webkit-animation:slide-down 0.4s forwards; animation:slide-down 0.4s forwards; z-index:2;} @keyframes slide-down{ 0%{ -webkit-transform:translate3d(0, -100%, 0); -moz-transform:translate3d(0, -100%, 0); -o-transform:translate3d(0, -100%, 0); -ms-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0); opacity:0; } 100%{ -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); opacity:1; } } #auto_fill_kt_wrap .auto_fill_kt_box.close{-webkit-animation:slide-up 0.4s forwards; animation:slide-up 0.4s forwards;} @keyframes slide-up{ 0%{ -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); opacity:1; } 100%{ -webkit-transform:translate3d(0, -100%, 0); -moz-transform:translate3d(0, -100%, 0); -o-transform:translate3d(0, -100%, 0); -ms-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0); opacity:0; } } #auto_fill_kt_wrap .auto_fill_kt_box > p{color:var(--bg-fc-color); text-indent:5px; font-size:15px; font-weight:bold; position:relative; margin-bottom:10px; cursor:default;} #auto_fill_kt_wrap .auto_fill_kt_box > p .auto_fill_close{position:absolute; display:inline-block; top:-4px; bottom:0; right:5px; margin:auto; width:17px; height:17px; background:url('https://cdn.metoon.co.kr/img/auto_fill_x.png') no-repeat center; background-size:100% auto;} #auto_fill_kt_wrap .auto_fill_kt_box .auto_fill_kt_contents{padding:25px 0.026em 11px; background-color:#FFFFFF; border:1px solid #ddd;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt{position:relative; margin-bottom:31px;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info{position:relative; padding:30px 12px 10px; border:1px solid #d52b2c; border-radius:3px; margin:7px auto 5px;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info h2{position:absolute; top:0; left:0; width:100%; text-align:center; margin-top:-11px; font-size:0;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info h2 img{max-width:337px; width:85%;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info input{position:absolute; top:0; left:0; opacity:0; z-index:-1; visibility:hidden;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info label{display:block; line-height:25px; font-size:0.03em; text-align:center; color:#363636; letter-spacing:-0.05em; border:1px solid #fff; text-align:center;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info label .check{width:13px; float:left; margin-left:5px; margin-top:8px; display:none;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info.on label{background:#fff5f8; border:1px solid var(--bg-fc-color);} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info.on label .check{display:block;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info label strong{font-size:1.15em; font-weight:bold; color:#010101;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info label span{color:var(--bg-fc-color);} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info label .price:before{content:""; display:inline-block; width:0.47em; height:0.667em; margin:0 0.333em; background:url('https://cdn.metoon.co.kr/img/ic_arrow_auto_fill.png') no-repeat center;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info label .price{font-size:1.25em; color:var(--bg-fc-color);} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info label .price i{font-size:0.8em;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt a.s_promo_btn{display:block; width:100%; height:37px; line-height:37px; text-align:center; border-radius:3px; background-color:var(--bg-fc-color); color:var(--main-ft-color); font-size:14px; font-weight:bold;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt a.s_promo_btn:hover{background-color:#b20f0f;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt a.s_promo_info_kt_btn{display:inline-block; float:right; font-size:11px; color:#363636; margin-top:5px; line-height:1;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .notice_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.2); z-index:1;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .notice{position:absolute; top:10%; left:50%; margin-left:-130px; width:260px; background-color:#FFFFFF; color:#010101; border:1px solid #ddd;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .notice div{padding:15px 15px 0; font-size:12px;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .notice p{position:relative; margin-bottom:7px; line-height:1.4; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding-left:10px; letter-spacing:-0.05em;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .notice p:before{content:"-"; display:block; color:#010101; position:absolute; top:0; left:0;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .notice p:last-child{margin-bottom:0;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .notice .notice_btn{display:block; width:60px; height:35px; line-height:35px; font-size:14px; color:var(--main-ft-color); font-weight:bold; text-align:center; margin:15px auto 7px; background-color:#444;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box input{position:absolute; opacity:0; width:1px; visibility:hidden; top:0; left:0; z-index:-1;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box{width:100%; margin-top:10px; border-top:2px solid #cecece;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .bottom_wrap{width:100%; overflow:hidden;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .bottom_wrap div{width:100%; overflow:hidden; border:1px solid #fff; box-sizing: border-box; border-bottom:1px solid #e1e1e1; } #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .bottom_wrap div p{font-weight:bold;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .bottom_wrap div.on{background: #fff5f8; border: 1px solid var(--bg-fc-color);} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .bottom_wrap div label{display:block; overflow:hidden; padding:7px 0.026em; padding-left:0.053em; letter-spacing:-1px;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .bottom_wrap div.on label{padding-left:0.01em;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box p{margin:0; float:left; color:#676767; font-size:0.0312em; cursor:pointer;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .bottom_wrap div span{color:var(--bg-fc-color); cursor:pointer;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .bottom_wrap div span.coin_del{color:#b4b4b4;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .coin_p{text-align:left; color:#2c2c2c; font-size:0.038em; margin-right:0.35em; margin-top:0;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .pay_del{float:right; position:relative; color:#777; margin-top:0;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .pay_del:before{content:""; position:absolute; top:50%; left:50%; width:102%; height:1px; background:#555; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%);} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .ic_arrow{float:right; width:7px; height:10px; background:url("https://cdn.metoon.co.kr/mimg/ic_pay_arrow.png") no-repeat center; background-size:100%; margin:2px 5px 0 7px;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .cash{float:right; color:#2c2c2c; margin-top:0;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .bottom_wrap div label .check{width: 13px; float: left; margin-right: 5px; margin-top: 3px; display: none;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .bottom_wrap div.on label .check{display: block;} #auto_fill_kt_wrap .auto_fill_kt_box .phone_fill_btn{ height:40px; border:none; display: block; width:100%; background:var(--bg-fc-color); color:var(--main-ft-color); margin:10px auto 5px; border-radius:5px; font-size:14px; font-weight:bold;} #auto_fill_kt_wrap .auto_fill_kt_box .phone_fill_btn:hover{background:#b20f0f;} #auto_fill_kt_wrap .auto_fill_kt_box .today_close{text-align:right; padding-right:10px; font-size:13px;} #auto_fill_kt_wrap .auto_fill_kt_box .today_close input, #auto_fill_kt_wrap .auto_fill_kt_box .today_close label{vertical-align:middle;} #auto_fill_kt_wrap .auto_fill_kt_box .today_close .auto_fill_kt_close{display:inline-block; width:40px; height:25px; border:0 none; background-color:var(--bg-fc-color); color:var(--main-ft-color); border-radius:3px; font-size:13px; font-weight:bold; letter-spacing:-0.05em; vertical-align:middle;} @media only screen and (min-width:380px){ #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .bottom_wrap div label{padding:7px 10px; padding-left:20px;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box p{font-size:12px;} #auto_fill_kt_wrap .auto_fill_kt_box .btm_box .coin_p{margin-right:5px; font-size:14px;} } @media only screen and (max-width:339px){ #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info label{font-size:0.025em;} #auto_fill_kt_wrap .auto_fill_kt_box .s_promo_fill_kt .s_promo_kt_info label .check{width:10px; margin-top:10px; margin-left:3px;} #auto_fill_kt_wrap .auto_fill_kt_box .today_close label{font-size:12px;} #auto_fill_kt_wrap .auto_fill_kt_box .today_close .auto_fill_close{height:20px; font-size:13px;} } /* kt 자동충전 팝업 E */ /* 자동스크롤 */ #view_header .menu_btn_box .scr_btn{/* display:inline-block; width:22px; height:100%; */position:relative;} /* #view_header .menu_btn_box .scr_btn a{display:block; height:100%; text-indent:-9999px; background:url(https://cdn.metoon.co.kr/mimg/ic_view_ac.png) no-repeat center; background-size:22px;} */ #view_header .menu_btn_box .autoScrController{display:none; position:absolute; top:60px; width:50px; padding:13px 0 20px; text-align:center; background:#404040; margin:0;z-index:101;} #view_header .menu_btn_box .autoScrController.asc_default{right:25px;right:32px;} #view_header .menu_btn_box .autoScrController.asc_novel{right:65px;} #view_header .menu_btn_box .autoScrController .autoScrSpeed{color:#FFFFFF;} #view_header .menu_btn_box .autoScrController #autoScrSlider{position:relative; width:6px; height:160px; background:#777; border-radius:8px; margin:14px auto; border:0 none;} #view_header .menu_btn_box .autoScrController #autoScrSlider .auto_scr_bar{position:absolute; bottom:0; left:0; width:100%; height:50%; background:var(--bg-fc-color); border-radius:8px; margin:0; z-index:1;} #view_header .menu_btn_box .autoScrController #autoScrSlider .ui-slider-range{background:var(--bg-fc-color); margin:0;} #view_header .menu_btn_box .autoScrController #autoScrSlider .ui-slider-handle{left:50%; width:20px; height:20px; border-radius:20px; background:#fff; margin-left:-11px; outline:none;} #view_header .menu_btn_box .autoScrController #autoScrSlider .ui-state-hover, #view_header .menu_btn_box .autoScrController #autoScrSlider .ui-state-focus, #view_header .menu_btn_box .autoScrController #autoScrSlider .ui-state-active{border:0 none; background:#fff;} #view_header .menu_btn_box .autoScrController .auto_scr_btn{background:#777; color:#FFFFFF; width:35px; height:26px; line-height:26px; font-size:13px; font-weight:bold; text-align:center; display:block; border-radius:3px; margin:0 auto;} .autoScrPop_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:10000001;} .autoScrPop_back{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.4); z-index:10000000;} .autoScrPop_wrap .autoScrPop{position:absolute; top:50%; left:0; right:0; margin:auto; width:300px; border-radius:10px; letter-spacing:-0.03em; overflow:hidden; box-shadow:0 0 5px rgba(255, 255, 255, .4); -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index:2;} .autoScrPop_wrap .autoScrPop .autoScrPop_txt{padding:35px 20px; background:#fff; text-align:center;} .autoScrPop_wrap .autoScrPop .autoScrPop_txt p{font-size:16px; font-weight:500; color:#141414; line-height:1.4;} .autoScrPop_wrap .autoScrPop .btn_group{overflow:hidden;} .autoScrPop_wrap .autoScrPop .btn_group a{display:block; float:left; width:50%; padding:13px 0 12px; text-align:center; font-size:15px; color:#FFF; background:#2985db; box-sizing:border-box; cursor:pointer;} .autoScrPop_wrap .autoScrPop .btn_group a:first-child{border-right:1px solid #ddd;} .view_guide_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.7); z-index:1000000;} .view_guide_wrap .view_guide{position:absolute; top:0; left:0;right:0; width:100%; height:100%;max-width:1220px;margin:0 auto;} .view_guide_wrap .view_guide .vg_title{position:absolute; top:0; left:0;} .view_guide_wrap .view_guide .vg_title img{width:151px;} .view_guide_wrap .view_guide .vg_menu{position:absolute; top:0; right:0;} .view_guide_wrap .view_guide .vg_close{position:absolute; top:225px; left:0; right:0; width:85px; height:105px; margin:auto;} .view_guide_wrap .view_guide .vg_close a{display:block; width:100%; height:100%; background:url(https://cdn.metoon.co.kr/mimg/guide_close.png) no-repeat center; background-size:100% auto;} .view_guide_wrap .view_guide .vg_cutview_btn{position:absolute;top:50%;right:10px;width:50px;border-radius:6px;margin-top:-30px;background-color:rgba(255, 255, 255, .1);} .view_guide_wrap .view_guide .vg_cutview_btn a{display:block;width:100%;height:40px;line-height:40px;font-size:0;background-color:rgba(0, 0, 0, .7);text-align:center;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);} .view_guide_wrap .view_guide .vg_cutview_btn a:before{content:"";display:block;position:absolute;right:0;width:59px;height:8px;background-position:center;background-repeat:no-repeat;background-size:100%;} .view_guide_wrap .view_guide .vg_cutview_btn a:first-child{border-radius:4px 4px 0 0;} .view_guide_wrap .view_guide .vg_cutview_btn a:last-child{border-radius:0 0 4px 4px;} .view_guide_wrap .view_guide .vg_cutview_btn a:first-child:before{top:-12px;background-image:url(https://cdn.metoon.co.kr/mimg/guide_m_cutview_btn_up.png);} .view_guide_wrap .view_guide .vg_cutview_btn a:last-child:before{bottom:-12px;background-image:url(https://cdn.metoon.co.kr/mimg/guide_m_cutview_btn_down.png);} .view_guide_wrap .view_guide .vg_cutview_btn a i{font-size:16px;font-weight:bold;color:var(--main-ft-color);opacity:.7;} .view_guide_wrap .view_guide .vg_cutview_btn a + a{margin-top:16px;} .view_guide_wrap .view_guide .vg_cutview{position:absolute;bottom:0;right:0;z-index:10;} .view_guide_wrap .view_guide .vg_touchScr{position:absolute;bottom:45px;left:0;width:100%;z-index:9;} .view_guide_wrap .view_guide .vg_touchScr img{display:block;width:100%;max-width:562px;margin:0 auto;} .pop_back{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.4); z-index:99997;} .autoScrC_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99998;} .autoScrC{position:absolute; top:20%; left:0; right:0; margin:auto; width:300px; border-radius:10px; letter-spacing:-0.03em; overflow:hidden; box-shadow:0 0 5px rgba(255, 255, 255, .4);} .autoScrC .autoScrC_txt{padding:45px 30px; background:#fff; text-align:center; font-size:16px; font-weight:bold; color:#141414; line-height:1.4;} .autoScrC .btn_group{overflow:hidden;} .autoScrC .btn_group a{display:block; float:left; width:50%; padding:13px 0 12px; background:#2985db; text-align:center; font-size:15px; color:var(--main-ft-color); box-sizing:border-box; cursor:pointer;} .autoScrC .btn_group .confirm{border-right:1px solid #ddd;} /* 자동스크롤 E */ /* 사이드메뉴 리뉴얼 20190604 */ .smenu_bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.74); z-index:2000;} .side_menu_new{position:fixed; top:0; right:-100%;right:-100vw; width:280px; background:var(--sub-bg-color); height:100%; color:var(--main-ft-color); z-index:2001; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;} .side_menu_new.active{right:0;} .side_menu_new a{color:var(--main-ft-color);color:inherit;} .smenu_close{display:block; position:absolute; top:0; left:-40px; width:40px; height:40px; background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_barr_ic.png) no-repeat center, var(--bg-fc-color); background-size:9px auto; text-indent:-9999px;} .smenu_logout{position:relative; height:80px; padding:16px 0 0; border-bottom:1px solid var(--main-line-color);} .smenu_logout h1{position:absolute; top:50%; left:10px; margin-top:-16px;} .smenu_logout h1 a{display:block; width:70px; height:32px; background:url("https://cdn.metoon.co.kr/mimg/xtagram_logo_5_mini.svg?1") no-repeat center; background-size:contain; font-size:0; text-indent:-9999px;} .smenu_logout .smenu_info{padding-left:95px;} .smenu_logout .smenu_info p{font-size:12px; line-height:1;} .smenu_top .smenu_btn{margin-top:10px;} .smenu_top .smenu_btn:after{content:""; display:block; clear:both;} .smenu_top .smenu_btn a{display:block; float:left; padding:0 7px; font-size:13px; border:1px solid var(--main-ft-fc-color); border-radius:3px; height:25px; line-height:23px;background-color:var(--opt-bg-color);background-repeat:no-repeat;background-size:12px auto;} .smenu_top .smenu_btn a.login_btn{margin-right:10px;} .smenu_top .smenu_btn a span{display:inline-block; line-height:23px; padding-left:16px; vertical-align:baseline;} .smenu_top .smenu_btn .login_btn{/* background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_loginr_ic.png) no-repeat 7px 47%; */background-image:url(https://cdn.metoon.co.kr/mimg/ht_login.svg?2);background-position:7px 47%; background-size:12px auto;} [color-theme="light"] .smenu_top .smenu_btn .login_btn{background-image:url("https://cdn.metoon.co.kr/mimg/ht_login_ctlgt.svg");} .smenu_top .smenu_btn .join_btn{background-image:url(https://cdn.metoon.co.kr/mimg/smenu/sb_join_ic.svg?2); background-position:7px 47%;border-color:var(--bg-fc-color);} [color-theme="light"] .smenu_top .smenu_btn .join_btn{background-image:url("https://cdn.metoon.co.kr/mimg/sb_join_ic_ctlgt.svg");} .smenu_top .smenu_btn .logout_btn{background-image:url(https://cdn.metoon.co.kr/mimg/smenu/sb_loginr_ic.png);background-position:7px 47%;} .smenu_login{/* overflow:hidden; */border-bottom:1px solid var(--main-line-color);letter-spacing:-0.03em;} .smenu_login:not(.flex_) > div{float:left;/* height:110px; */min-height:106px;} .smenu_login .smenu_grade_info{width:70px;padding-top:14px;text-align:center;} .smenu_login .smenu_grade_info img{display:block;width:37px;margin:0 auto;} .smenu_login .smenu_grade_info .smenu_grade_name{display:block;line-height:1;font-size:12px;color:#000;margin:6px auto 8px;} .smenu_login .smenu_grade_info a{position:relative;font-size:10px;color:#272727;line-height:1.2;} .smenu_login .smenu_grade_info a:after{content:"";display:block;position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:#000;} .smenu_login .smenu_my_info{width:100%;color:var(--main-ft-color);} .smenu_login .smenu_my_info .smenu_my_id{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;justify-content:space-between;height:40px;padding:0 14px;font-size:12px;word-break:break-all;gap:5px 8px;} .smenu_login .smenu_my_info .smenu_my_id span{line-height:1.2;} .smenu_login .smenu_my_info .mem_id{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex:1 1 auto;} .smenu_login .smenu_my_info .smenu_my_coin li{display:flex;align-items:center;justify-content:space-between;gap:5px 10px;height:35px;line-height:33px;box-sizing:border-box;padding:0 14px;border-top:1px solid var(--main-line-color);background:var(--opt-bg-color);} .smenu_login .smenu_my_info .smenu_my_coin li span{display:inline-block;} .smenu_login .smenu_my_info .smenu_my_coin li .sm_myc01{font-size:12px;color:#D1D1D1;padding-left:32px;background-size:25px;background-repeat:no-repeat;background-position:0 center;} [color-theme="light"] .smenu_login .smenu_my_info .smenu_my_coin li .sm_myc01{color:#343434;} .smenu_login .smenu_my_info .smenu_my_coin li .sm_myc_coin{background-image:url(https://cdn.metoon.co.kr/mimg/ic_mycoin_new.png);} .smenu_login .smenu_my_info .smenu_my_coin li .sm_myc_coupon{background-image:url(https://cdn.metoon.co.kr/mimg/ic_freecoupon_new.png);} .smenu_login .smenu_my_info .smenu_my_coin li .sm_myc02{font-size:13px;flex-shrink:0;} .smenu_my_coin .sm_myc02 svg.fillCoinIco{width:14px;margin:1px 4px 0 0;flex-shrink:0;} .smenu_login .smenu_my_info .smenu_my_coin li .sm_myc02 b{font-weight:500;flex-shrink:0;} .smenu_login .smenu_my_info .smenu_my_coin li a{float:right;display:block;height:18px;line-height:19px;font-size:11px;font-weight:500;color:#FFFFFF;background:var(--bg-fc-color);border-radius:3px;padding:0 5px;} .smenu_nav{position:relative;overflow:hidden;} .smenu_nav:after{content:""; display:block; clear:both;} .smenu_nav .smenu_cate{position:absolute; top:0; left:0; width:71px; height:100%; background:#383C44;background:var(--opt-bg-color); border-right:1px solid var(--main-line-color);} .smenu_nav .smenu_cate ul li{width:71px; height:70px;} .smenu_nav .smenu_cate ul li a{position:relative; display:flex;flex-direction:column;align-items:center;justify-content:center; width:100%; height:100%; border-bottom:1px solid var(--main-line-color); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; text-align:center;} .smenu_nav .smenu_cate li svg{width:20px;height:22px;fill:var(--main-ft-color);margin-bottom:6px;} /* .smenu_nav .smenu_cate li.smenu_my svg{height:18px;} .smenu_nav .smenu_cate li.smenu_charge svg, .smenu_nav .smenu_cate li.smenu_center svg{height:22px;} */ .smenu_nav .smenu_cate li.smenu_charge svg{margin-left:8px;} .smenu_nav .smenu_cate ul li a span{display:block; font-size:13px; color:var(--main-ft-color); /* padding-top:40px; */} .smenu_nav .smenu_cate ul li.smenu_charge a span{color:var(--main-ft-fc-color);} .smenu_nav .smenu_cate ul li.smenu_charge a sup{position:absolute; top:-1px; left:0; line-height:1; padding:2px 2px 3px 3px; background-color:var(--bg-fc-color); color:#FFF; font-size:11px;} .smenu_nav .smenu_cate ul li.smenu_charge a sup:before{content:""; display:block; position:absolute; top:0; right:-7px; border-top:16px solid var(--bg-fc-color); border-left:1px solid var(--bg-fc-color); border-right:7px solid transparent;} /* .smenu_nav .smenu_cate ul li.smenu_my a{background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_my1_ic.png) no-repeat center 14px; background-size:20px auto;} .smenu_nav .smenu_cate ul li.smenu_mlib a{background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_mlib_ic.png) no-repeat center 14px; background-size:15px auto;} .smenu_nav .smenu_cate ul li.smenu_charge a{background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_bcoin_ic.png) no-repeat center 14px; background-size:29px auto;} .smenu_nav .smenu_cate ul li.smenu_event a{background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_star_ic.png) no-repeat center 14px; background-size:21px auto;} .smenu_nav .smenu_cate ul li.smenu_center a{background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_center_ic.png) no-repeat center 14px; background-size:20px auto;} */ .smenu_nav .smenu_cate ul li.on a{border-bottom:2px solid var(--bg-fc-color);background-color:var(--sub-bg-color);} .smenu_nav .smenu_cate ul li.on a span{/* color:var(--bg-fc-color); */font-weight:500;} /* .smenu_nav .smenu_cate ul li.smenu_my.on a{background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_my1_ic_on.png) no-repeat center 14px, var(--sub-bg-color); background-size:20px auto;} .smenu_nav .smenu_cate ul li.smenu_mlib.on a{background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_mlib_ic_on.png) no-repeat center 14px, var(--sub-bg-color); background-size:15px auto;} .smenu_nav .smenu_cate ul li.smenu_event.on a{background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_star_ic_on.png) no-repeat center 14px, var(--sub-bg-color); background-size:21px auto;} .smenu_nav .smenu_cate ul li.smenu_center.on a{background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_center_ic_on.png) no-repeat center 14px, var(--sub-bg-color); background-size:20px auto;} */ .smenu_nav .nav_list{float:right; width:209px;width:calc(100% - 71px);/* height:740px; */height:100%;padding:14px 15px 0 14px; overflow-y:scroll; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-overflow-scrolling:touch;overscroll-behavior:contain;} .smenu_nav .nav_list ul li{padding:0 10px;} .smenu_nav .nav_list ul li:has(.colorThemeMenu){padding-right:0;} .smenu_nav .nav_list ul li a{display:block; height:36px; line-height:36px; background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_barr_ic.png/me/resize/14x) no-repeat 100% center; background-size:7px auto; font-size:14px;color:#E1E1E1;} .smenu_nav .nav_list ul li a.colorThemeMenu{display:flex;align-items:center;background-image:none;} [color-theme="light"] .smenu_nav .nav_list ul li a:not(.colorThemeMenu){background-image:url("https://cdn.metoon.co.kr/mimg/smenu/sb_barr_ic_ctlgt.png/me/resize/14x");} [color-theme="light"] .smenu_nav .nav_list ul li a{color:#343434;} .smenu_nav .nav_list ul li .menu_coin{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;} .smenu_nav .nav_list ul li a .gift{position:relative;padding-left:18px; /* background:url(https://cdn.metoon.co.kr/mimg/ht_gift.svg?5) no-repeat 0 center; background-size:13px auto; */} .smenu_nav .navmn_gift_svg{position:absolute;top:50%;left:0;width:13px;fill:currentColor;transform:translateY(-50%);} [color-theme="light"] .smenu_nav .navmn_gift_svg{fill:var(--sub2-ft-color);} .smenu_nav .nav_list ul li a .coin_sale{display:inline-block;font-size:10px;padding:2px 4px;background:var(--bg-fc-color);background-color:var(--bg-fc-color);line-height:1;color:#FFF;border-radius:3px;margin-left:5px;} .smenu_nav .nav_list ul li.data_save a{background:none;} .smenu_nav .nav_list ul li.data_save a button{border:0 none; float:right; width:46px; height:21px; background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_data_off.png) no-repeat center; background-size:100% auto; margin-top:8px;} .smenu_nav .nav_list ul li.data_save a button.on{background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_data_on.png) no-repeat center; background-size:100% auto;} .smenu_nav .nav_list ul li.me_app a img{width:26px; vertical-align:middle; margin-right:10px;} .smenu_nav .nav_list ul li.nav_line{padding:0; margin:14px auto; height:1px; background:var(--main-line-color);} .side_menu_new .side_log_bnr_new{position:relative; padding:15px 0 10px; text-align:center; border-bottom:1px solid #ddd;} .side_menu_new .side_log_bnr_new .close{position:absolute; top:10px; right:15px; width:12px; height:12px; background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_close_ic.png) no-repeat center; background-size:100% auto;} .side_menu_new .side_log_bnr_new p{display:inline-block; position:relative; padding-left:29px; font-size:12px; color:#333; text-align:left;} .side_menu_new .side_log_bnr_new p img{position:absolute; top:50%; left:0; width:20px; margin-top:-10px;} .side_menu_new .side_log_bnr_new .coin_btn{display:block; width:114px; padding:8px 0 6px; font-size:12px; color:var(--main-ft-color); background:var(--bg-fc-color); margin:10px auto 0; border-radius:3px;} .side_menu_new .side_bnr_new{position:relative;} .side_menu_new .side_bnr_new .close{position:absolute; top:10px; right:10px; width:12px; height:12px; background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_closeW_ic.png) no-repeat center; background-size:100% auto;} .side_menu_new .side_bnr_new img{width:100%;} .side_menu_new .hbgm_invite_area{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;padding:7px 10px;border-top:1px solid var(--main-line-color);background-color:var(--sub-bg-color);transition:0.25s ease;} .side_menu_new .hdm_invite_btn{font-size:13px;color:var(--main-ft-fc-color);text-align:center;cursor:inherit;} .side_menu_new span.hdm_invite_btn{position:relative;} .side_menu_new span.hdm_invite_btn::before{content:"";display:block;position:absolute;top:100%;left:0;width:100%;height:1px;background-color:var(--main-ft-fc-color);margin-top:1px;} .side_menu_new .hdm_invite_btn_code{background-color:var(--bg-fc-color);border:0 none;border-radius:20px;padding:3px 10px;font-size:12px;color:#FFF;cursor:pointer;} /* 전체 색상 변경 버튼 */ .color_theme_btn{position:relative;width:70px;height:24px;padding:2px;background-color:#454545;border-radius:24px;justify-content:space-between;flex-shrink:0;align-self:center;margin-left:auto;flex-shrink:0;} [color-theme="light"] .color_theme_btn{background-color:#C8C8C8;} .color_theme_btn:before{content:"";display:block;position:absolute;top:2px;left:0;bottom:2px;width:33px;border-radius:20px;background-color:#FFFFFF;margin-top:auto;margin-bottom:auto;transition:transform 0.25s;} .color_theme_btn:before{transform:translateX(calc(100% + 2px));} [color-theme="light"] .color_theme_btn:before{transform:translateX(2px);} .color_theme_ico{position:relative;height:100%;display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;} .color_theme_ico svg{width:12px;height:12px;fill:#878787;} .color_theme_ico.dark svg{height:10px;} html:not([color-theme="light"]) .color_theme_ico.dark svg, [color-theme="light"] .color_theme_ico.light svg{fill:#000000;} @media only screen and (max-width:319px){ .side_menu_new{right:-340px;max-width:280px;width:100%;} .smenu_close{top:auto;bottom:0;left:0;z-index:10;} #header .headTop .ht_menu .ht_menu_adult{display:none;} } /* 사이드메뉴 리뉴얼 20190604 E */ .subm_bnr:not(.not_find){width:100%;/* width:100vw; */padding:15px 0 15px; margin:4px 0 12px; /* background:#fff; */ border-top:1px solid var(--main-line-color); border-bottom:1px solid var(--main-line-color);} .subm_bnr.mainm_bnr{margin:0 auto;} .subm_bnr .swiper-slide{width:75vw; height:19.466vw; margin-right:7.5vw;} .subm_bnr .swiper-slide:last-child{margin-right:0;} .subm_bnr .swiper-slide a{display:block; width:100%;} .subm_bnr .swiper-slide img{width:100%; vertical-align:top;} .subm_bnr .swiper-slide a .esbnr_warp{width:100%; height:100%; overflow:hidden; border-radius:3px;} .subm_bnr .swiper-slide a .esbnr_warp.adult_count_main{border-radius:0;border:1px solid #ddd;min-height:19.466vw;} .subm_bnr .swiper-slide a .esbnr_title{width:15.444vw; height:19.466vw; float:left;border:1px solid var(--main-line-color);border-radius:3px 0 0 3px; background-position:center; background-repeat:no-repeat; background-size:45%; background-color:var(--opt-bg-color);box-sizing:border-box;} .subm_bnr .swiper-slide a .esbnr_warp.recomm .esbnr_title{background-image:url(https://cdn.metoon.co.kr/mimg/ic_et_recomm.png);} .subm_bnr .swiper-slide a .esbnr_warp.recommPhoto .esbnr_title{background-image:url(https://cdn.metoon.co.kr/mimg/ic_et_recommPhoto.png?1);} .subm_bnr .swiper-slide a .esbnr_warp.event .esbnr_title{background-image:url(https://cdn.metoon.co.kr/mimg/ic_et_event.png);} .subm_bnr .swiper-slide a .esbnr_warp.fill .esbnr_title{background-image:url(https://cdn.metoon.co.kr/mimg/ic_et_fill.png);} .subm_bnr .swiper-slide a .esbnr_warp.sz .esbnr_title{background-image:url(https://cdn.metoon.co.kr/mimg/ic_et_sz.png);} .subm_bnr .swiper-slide a .esbnr_warp.woori .esbnr_title{background-image:url(https://cdn.metoon.co.kr/mimg/ic_et_shopping.png);} .subm_bnr .swiper-slide a .esbnr_title p{display:table-cell; vertical-align:middle;} .subm_bnr .swiper-slide a .esbnr_title p span{display:block;} .subm_bnr .swiper-slide a .esbnr_title .esb_ic{width:5.666vw; height:5.666vw; margin:0 auto 2px; background-position:center; background-repeat:no-repeat; background-size:100% auto;} .subm_bnr .swiper-slide a .esbnr_warp.event .esbnr_title .esb_ic{background-image:url(https://cdn.metoon.co.kr/mimg/ic_et_calendar.png);} .subm_bnr .swiper-slide a .esbnr_title .esb_title{font-size:3.3vw; color:var(--main-ft-color); font-weight:700;} .subm_bnr .swiper-slide a .esbnr_content{float:left; display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center; width:calc(100% - 15.444vw); height:19.466vw; background-size:cover; background-repeat:no-repeat; background-position:center; border:1px solid var(--main-line-color); border-left:0 none;background-color:var(--sub-bg-color);} .subm_bnr .swiper-slide a .esbnr_content .esbnr_txt{margin-left:3vw;} .subm_bnr .swiper-slide a .esbnr_content .esbnr_txt p{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-size:3.8vw;} .subm_bnr .swiper-slide a .esbnr_content .esbnr_txt p:first-child{font-weight:500;color:var(--main-ft-color);} .subm_bnr .swiper-slide a .esbnr_content .esbnr_txt p + p{margin-top:4px; font-size:3.3vw; color:var(--sub2-ft-color);} .subm_bnr .slide-more{width:88px; padding-right:0; margin-right:0; height:19.466vw; justify-content:flex-start;} .subm_bnr .slide-more a{display:-webkit-box;display:flex; width:auto; -webkit-box-align:center;align-items:center; height:100%; font-size:14px; font-weight:bold; color:#bbb; padding:0 34px 0 10px; background:url(https://cdn.metoon.co.kr/mimg/btn_add.svg) no-repeat 90% center; background-size:21px; -webkit-box-sizing:border-box; box-sizing:border-box; border:1px solid #ddd;} @media all and (min-width:600px){ .subm_bnr .swiper-slide{width:280px;height:73px;margin-right:28px;} .subm_bnr .swiper-slide a .esbnr_warp.adult_count_main{min-height:73px;} .subm_bnr .swiper-slide a .esbnr_title{width:58px;height:73px;} .subm_bnr .swiper-slide a .esbnr_content{width:calc(100% - 58px);height:73px;} .subm_bnr .swiper-slide a .esbnr_content .esbnr_txt{margin-left:11px;} .subm_bnr .swiper-slide a .esbnr_content .esbnr_txt p{font-size:14px;} .subm_bnr .swiper-slide a .esbnr_content .esbnr_txt p + p{font-size:12px;} } /* 메인 top5 */ .main-content-swiper{position:relative;width:100%; padding:0 0 12px 4px;/* margin-top:6px; background-color:#FFFFFF;border-top:1px solid #ddd;border-bottom:1px solid var(--opt-bg-color); */} .main-content-swiper .mcs1-title{padding:0 4px; height:40px; line-height:40px; overflow:hidden;/* margin-bottom:5px; */} .main-content-swiper .mcs1-title .title{float:left; font-size:15px;} .main-content-swiper .mcs1-title .title .h4_sm{color:#676767; font-weight:normal; font-size:0.8em; letter-spacing:-0.09em;} .main_title_xtg{height:15px;vertical-align:-1px;} .main-content-swiper .mcs1-title .mcs1-pagination, .comp2_new_main-pagination{float:right; display:-webkit-box;display:-webkit-flex;display:flex; -webkit-box-align:center;-webkit-align-items:center;align-items:center; height:100%; margin-right:4px;} .main-content-swiper .mcs1-title .mcs1-pagination li, .comp2_new_main-pagination li{display:block; font-size:12px; color:var(--sub-ft-color);} .comp2_new_main-pagination li a{display:block;} .main-content-swiper .mcs1-title .mcs1-pagination li.swiper-pagination-bullet, .comp2_new_main-pagination li a{width:auto; height:auto; border-radius:0; opacity:1;border:1px solid transparent; background:none; height:22px; line-height:20px; padding:0 5px; outline:none; border-radius:11px;-webkit-box-sizing:border-box;box-sizing:border-box;} .main-content-swiper .mcs1-title .mcs1-pagination li.swiper-pagination-bullet-active, .comp2_new_main-pagination li a.active{border:1px solid var(--bg-fc-color); color:var(--bg-fc-color);} .main-content-swiper .mcs1-title .mcs1-pagination li:first-child.swiper-pagination-bullet-active, .comp2_new_main-pagination li:first-child a.active{margin-right:2px;} .main-content-swiper .swiper-container{padding:0 4px;} .main-content-swiper .swiper-slide{width:80%;width:calc(100% - 54px);max-width:296px;/* padding-right:10px; */justify-content:flex-start;} .main-content-swiper .swiper-slide .mcs1-title{opacity:0;pointer-events:none;} .main-content-swiper .swiper-slide:has(.crown1) .mcs1-title{opacity:1;pointer-events:normal;} .main-content-swiper .mcs1-list{width:100%;overflow:hidden;} .main-content-swiper .mcs1-list li a{position:relative; display:block; padding:5px;padding-right:7px; /* background-color:#FFFFFF; */color:#ABABAB; border-radius:5px; -webkit-box-sizing:border-box; box-sizing:border-box;display:flex;} [color-theme="light"] .main-content-swiper .mcs1-list li a{color:#656565;} /* .main-content-swiper .mcs1-list li a:after{content:""; display:block; clear:both;} */ .main-content-swiper .mcs1-list li a .img_thumb{/* float:left; */width:80px;height:80px; background-position:center;background-repeat:no-repeat; background-size:cover;background-size:50px; border:1px solid var(--main-line-color);position:relative;z-index:2;flex-shrink:0;} /* .main-content-swiper .mcs1-list li a .img_thumb.vd_img{width:141px;} */ .main-content-swiper .mcs1-list .icon_19_patch{position:absolute;top:0;right:0;width:17px;opacity:0.9;z-index:11;margin:3px 3px 0 0;} .main-content-swiper .mcs1-list .cont_title_area .icon_19_patch{position:static;align-self:center;flex-shrink:0;margin:0 4px 0 0;} .main-content-swiper .mcs1-list .cont_title_area .icon_19_patch:last-child{margin:0 0 0 4px;} .main-content-swiper .mcs1-list li a .img_thumb_load{position:absolute;top:50%;left:0;width:100%;height:80px;background-position:center;background-repeat:no-repeat;background-size:50px;z-index:1;margin-top:-40px;} .main-content-swiper .mcs1-list_ebook .mcs1-list li a .img_thumb{background-position:center 0;} .main-content-swiper .mcs1-list .mcs1_img_thumb{position:relative;display:block;width:100%;height:100%;object-fit:cover;object-position:center;z-index:2;} .main-content-swiper .mcs1-list li a .mcs1-contents{position:relative;/* top:0; left:0; width:100%; height:90px; padding:5px 10px 5px 90px; */width:calc(100% - 80px);padding:5px 0 5px 10px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;align-self:center;min-width:0;} .main-content-swiper .mcs1-list li a .mcs1-contents > div{width:100%;} .main-content-swiper .mcs1-list li a .mcs1-contents p{width:100%;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; /* letter-spacing:-0.05em; */} .main-content-swiper .mcs1-list li a .mcs1-contents p.ln_clamp2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;word-break:break-word;} .main-content-swiper .mcs1-list li a .mcs1-contents .mcs1_info{gap:5px 10px;margin-top:7px;} .main-content-swiper .mcs1-list li a .mcs1-contents p br{display:none;} .main-content-swiper .mcs1-list li a .mcs1-contents .summary{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:2.62em;font-size:1.077em;} .main-content-swiper .mcs1-list li a .mcs1-contents .cont_title_area{display:flex;} .main-content-swiper .mcs1-list li a .mcs1-contents .rank{display:inline-block; padding:0 5px; height:15px; line-height:15px; font-size:11px; color:var(--main-ft-color); background:var(--bg-fc-color); border-radius:3px; vertical-align:top;align-self:center;margin-right:6px;flex-shrink:0;} .main-content-swiper .mcs1-list_novel li a .mcs1-contents .rank{background:#2c86dc;} .main-content-swiper .mcs1-list_ebook li a .mcs1-contents .rank{background:#0096a6;} .main-content-swiper .mcs1-list li a .mcs1-contents .top5_title{display:inline-block;font-size:15px;font-weight:500;color:var(--main-ft-color);padding:0;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;vertical-align:top;} .main-content-swiper .mcs1-list li a .mcs1-contents .mcs1_info p{width:auto;} .main-content-swiper .mcs1-list li a .mcs1-contents .author{width:100%;} .main-content-swiper .mcs1-list li a .mcs1-contents .genre{/* margin:5px 0; */color:#8da6c2;} .main-content-swiper .mcs1-list li a .mcs1-contents .total{width:auto;flex-basis:60px;} .main-content-swiper .mcs1-list li a .mcs1-contents .tag{display:flex;/* margin:5px 0; */gap:5px 5px;align-items:center;} .main-content-swiper .mcs1-list li a .mcs1-contents .tag span{display:inline-block;display:inline-flex;/* height:18px; line-height:18px; */vertical-align:top;-webkit-box-sizing:border-box; box-sizing:border-box;} .main-content-swiper .mcs1-list li a .mcs1-contents .tag span + span{margin-left:6px;} .main-content-swiper .mcs1-list li a .mcs1-contents .tag .nLabel{width:30px;background-size:100% auto; background-position:center; background-repeat:no-repeat; vertical-align:top;} .main-content-swiper .mcs1-list li a .mcs1-contents .tag .nLabel_mo{background-image:url("https://cdn.metoon.co.kr/mimg/nlabel_mo01.png");} /* .main-content-swiper .mcs1-list li a .mcs1-contents .tag .hits{font-size:11px; color:var(--sub2-ft-color);} */ .main-content-swiper .mcs1-list li a .mcs1-contents .tag .hits i{display:inline-block; width:10px; height:12px; margin-right:3px; background:url("https://cdn.metoon.co.kr/mimg/thumb_up_red.svg") no-repeat center 53%; background-size:100% auto; vertical-align:top;align-self:center;} .mcs1_rank{position:relative;padding-right:10px;flex-shrink:0;} .mcs1_rank_dep{position:relative;} .mcs1_rank_dep svg{display:block;width:34px;height:34px;fill:#ABABAB;opacity:0;margin-top:-7.5px;} .crown .mcs1_rank_dep svg{opacity:1;} .crown1 .mcs1_rank_dep svg{fill:#FFC900;} .crown3 .mcs1_rank_dep svg{fill:#E76816;} .mcs1_rank_dep .num{position:absolute;top:50%;left:50%;width:100%;font-size:1.32em;font-weight:500;color:var(--main-ft-fc-color);text-align:center;line-height:1;transform:translate(-50%, -50%);} .crown .mcs1_rank_dep .num{font-size:1em;font-weight:700;color:#FFF;text-shadow:0 1px rgba(0, 0, 0, 0.3), 0 -1px rgba(0, 0, 0, 0.3), 1px 0 rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.3);} @media only screen and (min-width:360px){ .main-content-swiper .mcs1-list_vd li a .img_thumb{width:110px;height:80px;} .main-content-swiper .mcs1-list_vd li a .mcs1-contents{padding-left:120px;} } .br_layer_wrap{position:fixed;top:0;left:0;width:100%;height:100%;overflow-y:auto;overflow-y:overlay;z-index:99999999;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;} .br_layer_wrap .brl_back{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.75);z-index:1;} .br_layer_wrap .brl_container{position:relative; margin:auto; width:96%; max-width:400px; background:#fff; z-index:2;} .br_layer_wrap .brl_container .brl_close{position:absolute; top:14px; right:10px; width:20px; height:20px; background-size:100% auto;} .br_layer_wrap .brl_container .brl_close:before, .br_layer_wrap .brl_container .brl_close:after{content:""; display:block; position:absolute; top:50%; left:50%; width:100%; height:2px; background:#fff;} .br_layer_wrap .brl_container .brl_close:before{-webkit-transform:translate(-50%, -50%) rotate(45deg); transform:translate(-50%, -50%) rotate(45deg);} .br_layer_wrap .brl_container .brl_close:after{-webkit-transform:translate(-50%, -50%) rotate(-45deg); transform:translate(-50%, -50%) rotate(-45deg);} .br_layer_wrap .brl_container .title{height:50px; line-height:50px; background:var(--sub-bg-color); text-align:center;} .br_layer_wrap .brl_container .title span{display:inline-block; color:var(--main-ft-color); font-size:16px; padding-left:27px; background:url("https://cdn.metoon.co.kr/mimg/xtagram_logo_5_mini.svg?1") no-repeat 0 53%; background-size:20px;} .br_layer_wrap .brl_container .brl_cont{width:100%; padding:15px 10px 0;} .br_layer_wrap .brl_container .brl_inner{border:1px solid #ddd;margin-bottom:10px;} .br_layer_wrap .brl_container .brl_list{width:100%; -webkit-box-sizing:border-box; box-sizing:border-box; padding:0 10px;} .br_layer_wrap .brl_container .brl_list li{width:100%;} .br_layer_wrap .brl_container .brl_list li a{position:relative; display:-webkit-flex;display:flex; padding:5px 5px 5px 0; background-color:#FFFFFF; border-radius:5px; -webkit-box-sizing:border-box; box-sizing:border-box;} .brl_list .brl_li_imgbox{position:relative;width:70px;height:94px;border:1px solid #efefef;flex-shrink:0;} .br_layer_wrap .brl_container .brl_list li a .img_thumb{display:block;width:100%; height:100%;object-fit:cover; background-position:center; background-size:cover;} .br_layer_wrap .brl_container .brl_list li a .brl_desc{position:relative;width:auto; min-width:0; padding:5px 10px 5px 15px; display:-webkit-;display:flex;align-self:center;flex:1 1 auto;} .br_layer_wrap .brl_container .brl_list li a .brl_desc > div{width:100%;min-width:0;} .br_layer_wrap .brl_container .brl_list li a .brl_desc p{width:100%;color:#141414; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; letter-spacing:-0.025em;} .br_layer_wrap .brl_container .brl_list li a .brl_desc p br{display:none;} .br_layer_wrap .brl_container .brl_list li a .brl_desc .title_area{height:16px; line-height:16px;} #content_wrap .main-content-swiper .cont_title{padding:0;} .br_layer_wrap .brl_container .brl_list li a .brl_desc .rank{display:inline-block; padding:0 5px; height:15px; font-size:11px; color:var(--main-ft-color); background:var(--bg-fc-color); border-radius:3px; vertical-align:top; margin-right:5px;} .br_layer_wrap .brl_container .brl_list_novel li a .brl_desc .rank{background:#2c86dc;} .br_layer_wrap .brl_container .brl_list_ebook li a .brl_desc .rank{background:#0096a6;} .br_layer_wrap .brl_container .brl_list li a .brl_desc .cont_title{font-weight:bold;} .br_layer_wrap .brl_container .brl_list li a .brl_desc .genre{margin:5px 0; color:#8da6c2;} .br_layer_wrap .brl_container .brl_list li a .brl_desc .tag{margin:5px 0;} .br_layer_wrap .brl_container .brl_list li a .brl_desc .tag span{display:inline-block; height:16px; line-height:16px; -webkit-box-sizing:border-box; box-sizing:border-box;} .br_layer_wrap .brl_container .brl_list li a .brl_desc .tag span + span{margin-left:6px;} .br_layer_wrap .brl_container .brl_list li a .brl_desc .tag .nLabel{width:28px;background-size:100% auto; background-position:center; background-repeat:no-repeat; vertical-align:top;} .br_layer_wrap .brl_container .brl_list li a .brl_desc .tag .nLabel_mo{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_mo01.png);} .br_layer_wrap .brl_container .brl_list li a .brl_desc .tag .hits{font-size:11px; color:#777;} .br_layer_wrap .brl_container .brl_list li a .brl_desc .tag .hits i{display:inline-block; width:10px; height:100%; margin-right:2px; background:url("https://cdn.metoon.co.kr/mimg/thumb_up_red.svg") no-repeat center 53%; background-size:100% auto; vertical-align:top;} .br_layer_wrap .brl_container .brl_btn_box{width:100%;text-align:center;padding-bottom:10px;} .br_layer_wrap .brl_container .brl_btn_box a{display:inline-block;padding:0 10px; background:var(--bg-fc-color); border-radius:3px; color:var(--main-ft-color); height:40px; line-height:40px; font-size:14px; font-weight:500;} @media all and (max-width:359px){ .br_layer_wrap .brl_container .brl_inner{max-height:320px;max-height:100vw;} } .fb_container{width:100%; padding:0 8px;} .fill_banner01{position:relative; width:100%; margin-bottom:5px;} .fill_banner01 img{width:100%;vertical-align:top;} .fill_banner01 .cfillBnrDate{position:absolute;bottom:0;right:0;text-shadow:1px 0 rgba(0, 0, 0, 0.65), -1px 0 rgba(0, 0, 0, 0.65), 0 1px rgba(0, 0, 0, 0.65), 0 -1px rgba(0, 0, 0, 0.65);margin:0 1% 1% 0;} .cft_container{padding:0 8px;} .cft_container .coin_fill_t_wrap{border:1px solid var(--main-line-color);overflow:hidden;} .cft_container .coin_fill_t{width:100%;border-collapse:collapse;background:#3E3E3E;border:0 none;} .cft_container .coin_fill_t .cft_cell01{width:70px;} .cft_container .coin_fill_t .cft_cell02{width:110px;} .cft_container .coin_fill_t .cft_cell03{width:auto;} .cft_container .coin_fill_t thead{background-color:#2C2C2C;} .cft_container .coin_fill_t th{height:30px;font-weight:500;font-size:12px;border-bottom:1px solid #505050;} .cft_container .coin_fill_t th + th, .cft_container .coin_fill_t td + td{border-left:1px solid #505050;} .cft_container .coin_fill_t td{border-bottom:1px solid #505050;position:relative;height:48px;font-size:12px;padding-left:5px;} .cft_container .coin_fill_t td:first-child{padding-left:5px;padding-right:10px;} .cft_container .coin_fill_t .cft_memgrade_area{position:relative;} .cft_container .coin_fill_t tr .ic_cft_memgrade{display:none;} .cft_container .coin_fill_t tr[class*=mg-]:not(.mg-silver) .ic_cft_memgrade{display:block;position:absolute;top:0;left:0;width:100%;height:100%;text-indent:-9999px;z-index:10;} .cft_container .coin_fill_t td label{display:block;overflow:hidden;} .cft_container .coin_fill_t td label.flex_{display:flex;} .cft_container .coin_fill_t td input[type="radio"]{position:absolute;top:0;left:0;width:0;clip:rect(0, 0, 0, 0);} .cft_container .coin_fill_t td .pt_label{display:block; text-align:left;/* padding-left:26px; */padding-left:12px;background-size:22px auto; background-position:0 center; background-repeat:no-repeat;} .cft_container .coin_fill_t tbody tr.default td:first-child{padding-left:0;} .cft_container .coin_fill_t tbody tr.default td .pt_label{position:relative; padding-left:27px;} .cft_container .coin_fill_t tbody tr.default td .pt_label:before{content:""; display:block; position:absolute; top:50%; left:4px; width:20px; height:20px; background:url(https://cdn.metoon.co.kr/mimg/ic_ct_recomm.png) no-repeat center; background-size:100% auto; margin-top:-10px;} .cft_container .coin_fill_t tbody tr:last-child td{border-bottom:0 none;} .cft_container .coin_fill_t td .pt_label span{display:block;} .cft_container .coin_fill_t td .pt_label span:only-child{height:32px;line-height:32px;} .cft_container .coin_fill_t td .pt_label .discount{display:inline-block; position:relative;/* font-size:10px; */font-size:11px;color:var(--bg-fc-color);margin-bottom:2px;} .cft_container .coin_fill_t td .pt_label .discount:before, .cft_container .coin_fill_t td .pt_label .discount:after{content:""; display:block; position:absolute; top:50%; left:0; width:100%; margin-top:-1px; border-top:1px solid var(--bg-fc-color); opacity:0.5; /* width:45px; height:11px; background:url(https://cdn.metoon.co.kr/mimg/cft_dis_ic.png) no-repeat center; background-size:100% auto; margin-bottom:-4px; */} .cft_container .coin_fill_t td .pt_label .discount:before{-webkit-transform:rotate(15deg); transform:rotate(15deg);} .cft_container .coin_fill_t td .pt_label .discount:after{-webkit-transform:rotate(-15deg); transform:rotate(-15deg);} .cft_container .coin_fill_t td .pt_label .price{height:15px; line-height:15px; font-size:12px; font-weight:bold;} .cft_container .coin_fill_t td .coin_info{display:inline-block;/* height:18px;line-height:19px; */font-weight:500;padding-left:22px; background:url(https://cdn.metoon.co.kr/mimg/cft_coin_ic.png) no-repeat 0 center; background-size:18px;} .cft_container .coin_fill_t td .flex_ .coin_info{padding-left:0;background:none;} .cft_container .coin_fill_t label.flex_ svg{width:16px;height:16px;fill:#FFBA3C;align-self:center;flex-shrink:0;margin-right:5px;} .cft_container .coin_fill_t td .coin_info em{color:var(--bg-fc-color);} .cft_container .coin_fill_t td .coin_info .ic_dum{display:inline-block; width:18px; height:16px; background:url(https://cdn.metoon.co.kr/mimg/ic_dum.png) no-repeat center; background-size:100% auto; margin-left:3px; vertical-align:top;} .cft_container .coin_fill_t td .pt3{display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center; -webkit-box-pack:justify;justify-content:space-between;} .cft_container .coin_fill_t td .sale_txt{display:inline-block; line-height:1; padding:2px 4px;background:#dbb388;font-size:10px;color:var(--main-ft-color);border:1px solid #cba175; border-radius:3px; letter-spacing:-0.05em; margin-bottom:2px; margin-top:2px;} .cft_container .coin_fill_t td .sale_count{height:34px; line-height:35px;font-size:11px; color:var(--bg-fc-color); letter-spacing:-0.04em; white-space:nowrap;} .cft_container .coin_fill_t td .sale_count.event{height:auto;line-height:1.3;} .cft_container .coin_fill_t td .sale_fcoupon{padding:0 0 0 6px;font-size:10px;letter-spacing:-0.04em;} .cft_container .coin_fill_t td .charge_btn{float:right; margin-right:5px; height:34px; line-height:34px; font-size:12px; font-weight:400; color:#C1C1C1; padding:0 8px; background:#505050; border-radius:3px; white-space:nowrap;} .cft_container .coin_fill_t tbody tr.chk{background:#FFF9A6;background:var(--main-ft-fc-color);color:#141414;} .cft_container .coin_fill_t tbody tr.chk .charge_btn{background:var(--bg-fc-color);font-weight:500;color:var(--main-ft-color);} .cft_container .coin_fill_t tr.chk td + td{border-left-color:#A2A4BB;} .cft_container .coin_fill_t tr.chk label.flex_ svg{-webkit-filter:brightness(0.7);filter:brightness(0.7);} .cft_container .coin_fill_t .coin_v{position:absolute; top:0; left:0; clip:rect(0, 0, 0, 0); opacity:0;} .cft_special{position:relative;width:100%;} .cft_special .promo_logo_box{/* position:absolute; top:0; left:0; */ width:63.294%; width:180px; max-width:242px; border:1px solid var(--bg-fc-color);background:#fff;border-radius:4px 4px 0 0; /* margin:-15px 0 0 10px; */ display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center;} .cft_special .promo_logo_box img{width:100%;vertical-align:top;} .cft_special .promo_logo_box .promo_logo{width:32%;width:60px;text-align:center;} .cft_special .promo_logo_box .promo_logo img{width:80%;} .cft_special .promo_logo_box .promo_txt{width:68%;width:122px;background:#d52b2c;} .cft_special ul{display:table;width:100%;height:48px;border-top:1px solid var(--bg-fc-color); border-bottom:1px solid #ddd;margin:-1px auto 10px;} .cft_special ul:after{content:"";display:block;clear:both;} .cft_special ul li{display:table-cell;vertical-align:middle;padding-left:5px;-webkit-box-sizing:border-box;box-sizing:border-box;} .cft_special ul li + li{border-left:1px solid #ddd;} .cft_special ul li:first-child{width:70px;text-align:center;padding-left:0;} .cft_special ul li:nth-child(2){width:110px;} .cft_special ul li div{display:block;} .cft_special ul li .discount{display:inline-block;} .cft_special ul li .discount{display:inline-block; position:relative;/* font-size:10px; */font-size:11px;color:var(--bg-fc-color);margin-bottom:2px;} .cft_special ul li .discount:before, .cft_special ul li .discount:after{content:""; display:block; position:absolute; top:50%; left:0; width:100%; margin-top:-1px; border-top:1px solid var(--bg-fc-color); opacity:0.5; /* width:45px; height:11px; background:url(https://cdn.metoon.co.kr/mimg/cft_dis_ic.png) no-repeat center; background-size:100% auto; margin-bottom:-4px; */} .cft_special ul li .discount:before{-webkit-transform:rotate(15deg); transform:rotate(15deg);} .cft_special ul li .discount:after{-webkit-transform:rotate(-15deg); transform:rotate(-15deg);} .cft_special ul li .price{display:block; height:15px; line-height:15px; font-size:12px; font-weight:bold;} .cft_special ul li .coin_info{display:inline-block;height:18px;line-height:19px;font-weight:bold;padding-left:22px; background:url(https://cdn.metoon.co.kr/mimg/cft_coin_ic.png) no-repeat 0 center; background-size:18px;} .cft_special ul li .coin_info em{color:var(--bg-fc-color);} .cft_special ul li .coin_info .ic_dum{display:inline-block; width:18px; height:16px; background:url(https://cdn.metoon.co.kr/mimg/ic_dum.png) no-repeat center; background-size:100% auto; margin-left:3px; vertical-align:top;} .cft_special ul li:last-child > div {display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center; -webkit-box-pack:justify;justify-content:space-between;} .cft_special ul li .sale_txt{display:inline-block; line-height:1; padding:2px 4px;background:#dbb388;font-size:10px;color:var(--main-ft-color);border:1px solid #cba175; border-radius:3px; letter-spacing:-0.05em; margin-bottom:2px; margin-top:2px;} .cft_special ul li .sale_count{float:left;height:34px; line-height:35px;font-size:11px; color:var(--bg-fc-color); letter-spacing:-0.04em; white-space:nowrap;} .cft_special ul li .charge_btn{float:right; margin-right:5px; height:34px; line-height:34px; font-size:12px; font-weight:bold; color:var(--main-ft-color); padding:0 8px; background:#404040; border-radius:3px; white-space:nowrap;} .coin_fill_selec{width:100%;margin-top:25px; /* border-top:2px solid #000; */border-top:0 none;border-radius:4px;} .coin_fill_selec .title{padding:0 8px;height:35px;line-height:35px;background:#2C2C2C; border:1px solid var(--main-line-color); border-bottom:0 none; font-size:12px; font-weight:500;} .coin_fill_selec .title .fill_up_btn{display:inline-block;height:26px;line-height:22px; padding:0 8px; background-color:var(--sub-bg-color); border:1px solid var(--main-line-color);border-radius:50px;margin-top:3px; float:right;box-sizing:border-box;} .coin_fill_selec .title .fill_up_btn span{display:inline-block;padding-right:18px;color:var(--main-ft-color);font-size:11px; font-weight:normal;background:url(https://cdn.metoon.co.kr/mimg/ic_cfs_up.png) no-repeat 100% 53%; background-size:13px auto;} .coin_fill_selec .cfs_contents{padding:10px 7px;border:1px solid var(--main-line-color);} .coin_fill_selec .cfs_contents_ca{display:none;} .coin_fill_selec .cfs_contents .cfs_box .menu_title{height:36px;line-height:32px;font-size:14px;/* color:#ABABAB; */letter-spacing:-0.02em;padding:0 8px;} .coin_fill_selec .cfs_contents .cfs_box .menu_title span{display:inline-block;width:22px; height:36px;vertical-align:top; margin-right:2px; background-size:100% auto; background-repeat:no-repeat; background-position:center;filter:invert(1);} .coin_fill_selec .cfs_contents .cfs_box .menu_title.phone span{background-image:url(https://cdn.metoon.co.kr/mimg/ic_cfs_t01.png);background-position:30% center;} .coin_fill_selec .cfs_contents .cfs_box .menu_title.bPay span{background-image:url(https://cdn.metoon.co.kr/mimg/ic_cfs_t02.png?1);background-size:75%;background-position:center 45%;} .coin_fill_selec .cfs_contents .cfs_box .menu_title.card span{background-image:url(https://cdn.metoon.co.kr/mimg/ic_cfs_t03.png);background-size:75%;background-position:center 47%;} .coin_fill_selec .cfs_contents .cfs_box .menu_title.gift span{background-image:url(https://cdn.metoon.co.kr/mimg/ic_cfs_t04.png);background-size:75%;background-position:center 47%;} .coin_fill_selec .cfs_contents .cfs_box .cfs_list{width:100%;} .coin_fill_selec .cfs_contents .cfs_box .cfs_list:after{content:"";display:block;clear:both;} .coin_fill_selec .cfs_contents .cfs_box .cfs_list li{float:left;width:33.333%;padding:0 3px;-webkit-box-sizing:border-box;box-sizing:border-box; margin-bottom:6px; font-size:12px;} .coin_fill_selec .cfs_contents .cfs_box .cfs_list01 li{height:60px;} .coin_fill_selec .cfs_contents .cfs_box .cfs_list02 li{height:34px; line-height:34px;} .coin_fill_selec .cfs_contents .cfs_box .cfs_list li a{display:block;width:100%;height:100%;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #505050;background-color:#3E3E3E;color:#C1C1C1;} .coin_fill_selec .cfs_contents .cfs_box .cfs_list01 li a img{width:55px;height:23px;object-fit:contain;display:block;margin:7px auto 5px;} .cfs_contents img.invert_img{filter:invert(1);} .cfs_info{display:none;position:relative;width:100%;padding:10px 20px;background-color:#5f6677;color:var(--main-ft-color);margin-bottom:5px;border-radius:3px;} .cfs_info dl{line-height:1;font-size:0;} .cfs_info dl:after{content:"";display:block;clear:both;} .cfs_info dl dt{font-size:13px;width:67px;display:inline-block;padding:5px 0;border-radius:3px;background-color:#353740;vertical-align:middle;text-align:center;} .cfs_info dl dd{font-size:14px;display:inline-block;width:calc(100% - 67px);text-align:right;vertical-align:middle;} .cfs_info dl dd .coin_all strong{font-size:16px;font-weight:bold;color:#fbdf0a;} .cfs_info dl dd .coin_details{margin-top:10px;font-size:13px;} .cfs_info dl dd .coin_details i{display:none;} .cfs_info dl[class*=mg-]:not(.mg-silver) dd .coin_details i{display:inline-block;width:20px;height:20px;background-size:100% auto;background-repeat:no-repeat;background-position:center;vertical-align:middle;margin-right:3px;} .cfs_info dl.mg-gold dd .coin_details i{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s2.png);} .cfs_info dl.mg-pleti dd .coin_details i{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s3.png);} .cfs_info dl.mg-dia dd .coin_details i{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s4.png);} .cfs_info dl.mg-vip dd .coin_details i{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s5.png);} .cfs_info dl dd .coin_details .coin_details_result{display:inline-block;vertical-align:middle;} .cfs_info dl dd .coin_details .coin_details_plus{display:none;} .cfs_info dl[class*=mg-]:not(.mg-silver) dd .coin_details .coin_details_plus{display:inline-block;} @media all and (max-width:370px) { .cft_special .promo_logo_box{width:172px;} .cft_special ul li:nth-child(2){width:102px;padding-right:5px;} .cft_special ul li .sale_count{font-size:10px;} .cft_special ul li .coin_info{background-size:15px;padding-left:18px;} .cft_container .coin_fill_t .cft_cell02{width:100px;} .cft_container .coin_fill_t .cft_cell03{width:auto;} .cft_container .coin_fill_t td:nth-child(2){padding-right:5px;} .cft_container .coin_fill_t td .sale_count{font-size:10px;} .cft_container .coin_fill_t td .coin_info{background-size:15px;padding-left:18px;} } @media all and (max-width:359px){ .coin_fill_selec .cfs_contents .cfs_box .cfs_list li{font-size:11px;} .cft_container .coin_fill_t td:first-child{padding:0 4px;} .cft_container .coin_fill_t td:nth-child(2){padding:0;} } .cfp_renew_wrap{position:fixed; top:0; left:0; width:100%; height:100%;display:flex;justify-content:center;overflow-y:auto;overflow-y:overlay;z-index:99999999;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;} .cfp_back{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:1;} .cfp_layer{position:relative; width:100%; max-width:450px; background:#fff; /* border-radius:5px;max-height:84vh;overflow-y:auto; */ z-index:2; padding:10px 10px 0; color:#141414; margin:auto; -ms-overflow-style:none; -webkit-animation:slide-down 0.8s forwards; animation:slide-down 0.8s forwards;margin:auto 0;} .cfp_layer::-webkit-scrollbar{display:none;} /* .cfp_layer .cfp_close{display:block; position:absolute; top:10px; right:10px; width:15px; height:15px; background:url(https://cdn.metoon.co.kr/mimg/smenu/sb_close_ic.png) no-repeat center; background-size:15px auto; z-index:1;} */ .cfp_layer .cfp_close{display:block; position:absolute; top:5px; right:5px; width:24px; height:24px; z-index:11;float:right;position:sticky;border-radius:100%;background-color:#FFFFFF;} .cfp_layer .cfp_close img, .cfp_layer .cfp_close svg{width:100%;vertical-align:top;} .cfp_layer .cfp_title{width:100%; margin-bottom:15px;} .cfp_layer .cfp_title p{line-height:1; text-align:center;} .cfp_layer .cfp_title .cfp_title01{font-size:15px; color:var(--bg-fc-color); font-weight:bold;} .cfp_layer .cfp_title .cfp_title02{font-size:13px; color:#777; font-weight:400; margin-top:6px;} .cfp_layer .cfp_bnr{position:relative; width:100%; min-height:24px; margin-bottom:5px;} .cfp_layer .cfp_bnr img{width:100%; vertical-align:top;} .cfp_layer .cfp_bnr .cfp_h_txt{text-align:center;line-height:1;padding:5px 0;letter-spacing:-0.03em;} .cfp_layer .cfp_bnr .cfp_h_txt strong{display:block;font-size:15px;color:var(--bg-fc-color);} .cfp_layer .cfp_bnr .cfp_h_txt span{display:block;font-size:13px;color:#000;margin-top:5px;} .cfp_t_wrap .cfp_table_wrap{border:1px solid #ddd;border-radius:4px;overflow:hidden;} .cfp_t_wrap .cfp_table{width:100%;border-collapse:collapse;background:#fff;} .cfp_t_wrap .cfp_table .cfpt_cell01{width:70px;} .cfp_t_wrap .cfp_table .cfpt_cell02{width:110px;} .cfp_t_wrap .cfp_table .cfpt_cell03{width:auto;} .cfp_t_wrap .cfp_table thead{background-color:#f2f4fb;} .cfp_t_wrap .cfp_table th{height:30px;font-weight:bold;font-size:12px;border-bottom:1px solid #ddd;} .cfp_t_wrap .cfp_table th + th, .cfp_t_wrap .cfp_table td + td label{border-left:1px solid #ddd;} .cfp_t_wrap .cfp_table td{border-bottom:1px solid #ddd;position:relative;height:48px;font-size:12px;/* padding-left:5px; */box-sizing:border-box;} .cfp_t_wrap .cfp_table td:first-child{width:80px;} .cfp_t_wrap .cfp_table tbody tr:last-child td{border-bottom:0 none;} .cfp_t_wrap .cfp_table td label{display:flex;align-items:center;padding:0 5px;height:100%;overflow:hidden;box-sizing:border-box;} .cfp_t_wrap .cfp_table td:first-child label{padding-left:5px;padding-right:5px;} .cfp_t_wrap .cfp_table td input[type="radio"]{position:absolute;top:0;left:0;width:0;clip:rect(0, 0, 0, 0);} .cfp_t_wrap .cfp_table td .pt_label{display:block; text-align:left; background-size:22px auto; background-position:0 center; background-repeat:no-repeat;} .cfp_t_wrap .cfp_table td .pt_label.flex_{display:flex;justify-content:center;gap:5px 5px;} .pt_label_checkbox{display:inline-block;width:16px;height:16px;background-image:url("https://cdn.metoon.co.kr/mimg/ic_mefill_uncheck.png");background-repeat:no-repeat;background-position:center;background-size:100% auto;flex-shrink:0;align-self:center;} input[type="radio"]:checked + label .pt_label_checkbox{background-image:url("https://cdn.metoon.co.kr/mimg/ic_mefill_checked.png");} .cfp_t_wrap .cfp_table .mg-gold td .pt_label{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s2.png);} .cfp_t_wrap .cfp_table .mg-pleti td .pt_label{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s3.png);} .cfp_t_wrap .cfp_table .mg-dia td .pt_label{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s4.png);} .cfp_t_wrap .cfp_table .mg-vip td .pt_label{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s5.png);} .cfp_t_wrap .cfp_table tbody tr.default td:first-child{padding-left:0;} .cfp_t_wrap .cfp_table tbody tr.default td .pt_label{position:relative; padding-left:27px;} .cfp_t_wrap .cfp_table tbody tr.default td .pt_label:before{content:""; display:block; position:absolute; top:50%; left:4px; width:20px; height:20px; background:url(https://cdn.metoon.co.kr/mimg/ic_ct_recomm.png) no-repeat center; background-size:100% auto; margin-top:-10px;} .cfp_t_wrap .cfp_table td .pt_label span{display:block;} .cfp_t_wrap .cfp_table td .pt_label span:only-child{height:32px;line-height:32px;} .cfp_t_wrap .cfp_table td .pt_label .discount{display:inline-block; position:relative;font-size:10px;font-size:11px;color:var(--bg-fc-color);margin-bottom:2px;} .cfp_t_wrap .cfp_table td .pt_label .discount:before, .cfp_t_wrap .cfp_table td .pt_label .discount:after{content:""; display:block; position:absolute; top:50%; left:0; width:100%; margin-top:-1px; border-top:1px solid var(--bg-fc-color); opacity:0.5;} .cfp_t_wrap .cfp_table td .pt_label .discount:before{-webkit-transform:rotate(15deg); transform:rotate(15deg);} .cfp_t_wrap .cfp_table td .pt_label .discount:after{-webkit-transform:rotate(-15deg); transform:rotate(-15deg);} .cfp_t_wrap .cfp_table td .pt_label .price{height:15px; line-height:15px; font-size:12px; font-weight:500;} .cfp_t_wrap .cfp_table td .coin_info{display:inline-block;/* height:18px; */line-height:19px;font-weight:500;padding-left:22px; background:url("https://cdn.metoon.co.kr/mimg/cft_coin_ic.svg") no-repeat 0 center; background-size:18px;} .cfp_t_wrap .cfp_table td .coin_info em{color:var(--bg-fc-color);} .cfp_t_wrap .cfp_table td .coin_info .ic_dum{display:inline-block; width:18px; height:16px; background:url(https://cdn.metoon.co.kr/mimg/ic_dum.png) no-repeat center; background-size:100% auto; margin-left:3px; vertical-align:top;} .cfp_t_wrap .cfp_table td .pt3{display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center; -webkit-box-pack:justify;justify-content:space-between;flex:1 1 auto;gap:5px 5px;} .cfp_t_wrap .cfp_table td .sale_txt{display:inline-block; line-height:1; padding:2px 4px;background:#dbb388;font-size:10px;color:var(--main-ft-color);border:1px solid #cba175; border-radius:3px; letter-spacing:-0.05em; margin-bottom:2px;margin-top:2px;} .cfp_t_wrap .cfp_table td .sale_count{height:34px; line-height:35px;font-size:11px; color:var(--bg-fc-color); letter-spacing:-0.04em; white-space:nowrap;} .cfp_t_wrap .cfp_table td .sale_count.event{height:auto;line-height:1.3;} .cfp_t_wrap .cfp_table td .sale_fcoupon{font-size:10px;letter-spacing:-0.04em;} .cfp_t_wrap .cfp_table td .charge_btn{float:right; width:auto;margin-right:5px; height:34px; line-height:34px; font-size:12px; font-weight:bold; color:var(--main-ft-color); padding:0 8px; background:#404040; border-radius:3px; white-space:nowrap;} .cfp_t_wrap .cfp_table tbody tr.chk{background:#fffcd5;} .cfp_t_wrap .cfp_table tbody tr.chk .charge_btn{background:var(--bg-fc-color);} .cfp_t_wrap .cfp_btn{width:100%; margin:5px auto; background:var(--bg-fc-color); border:0 none; font-size:15px; font-weight:bold; color:var(--main-ft-color); padding:10px 0 8px; border-radius:4px; border-bottom:3px solid #b52020;} .coin_fill_info ~ .coin_fill_info{margin-top:0;} .cfp_t_wrap .cfp_table .coin_vp{position:absolute; top:0; left:0; clip:rect(0, 0, 0, 0); opacity:0;} .cfp_special{position:relative;width:100%;} .cfp_special .promo_logo_box{/* position:absolute; top:0; left:0; */ width:63.294%; width:180px; max-width:242px; border:1px solid var(--bg-fc-color);background:#fff;border-radius:4px 4px 0 0; /* margin:-15px 0 0 10px; */ display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center;} .cfp_special .promo_logo_box img{width:100%;vertical-align:top;} .cfp_special .promo_logo_box .promo_logo{width:32%;width:60px;text-align:center;} .cfp_special .promo_logo_box .promo_logo img{width:80%;} .cfp_special .promo_logo_box .promo_txt{width:68%;width:122px;background:#d52b2c;} .cfp_special ul{display:table;width:100%;height:48px;border-top:1px solid var(--bg-fc-color); border-bottom:1px solid #ddd;margin:-1px auto 10px;} .cfp_special ul:after{content:"";display:block;clear:both;} .cfp_special ul li{display:table-cell;vertical-align:middle;padding-left:5px;-webkit-box-sizing:border-box;box-sizing:border-box;} .cfp_special ul li + li{border-left:1px solid #ddd;} .cfp_special ul li:first-child{width:70px;text-align:center;padding-left:0;} .cfp_special ul li:nth-child(2){width:110px;} .cfp_special ul li div{display:block;} .cfp_special ul li .discount{display:inline-block;} .cfp_special ul li .discount{display:inline-block; position:relative;/* font-size:10px; */font-size:11px;color:var(--bg-fc-color);margin-bottom:2px;} .cfp_special ul li .discount:before, .cfp_special ul li .discount:after{content:""; display:block; position:absolute; top:50%; left:0; width:100%; margin-top:-1px; border-top:1px solid var(--bg-fc-color); opacity:0.5; /* width:45px; height:11px; background:url(https://cdn.metoon.co.kr/mimg/cft_dis_ic.png) no-repeat center; background-size:100% auto; margin-bottom:-4px; */} .cfp_special ul li .discount:before{-webkit-transform:rotate(15deg); transform:rotate(15deg);} .cfp_special ul li .discount:after{-webkit-transform:rotate(-15deg); transform:rotate(-15deg);} .cfp_special ul li .price{display:block; height:15px; line-height:15px; font-size:12px; font-weight:bold;} .cfp_special ul li .coin_info{display:inline-block;height:18px;line-height:19px;font-weight:bold;padding-left:22px; background:url(https://cdn.metoon.co.kr/mimg/cft_coin_ic.png) no-repeat 0 center; background-size:18px;} .cfp_special ul li .coin_info em{color:var(--bg-fc-color);} .cfp_special ul li .coin_info .ic_dum{display:inline-block; width:18px; height:16px; background:url(https://cdn.metoon.co.kr/mimg/ic_dum.png) no-repeat center; background-size:100% auto; margin-left:3px; vertical-align:top;} .cfp_special ul li:last-child > div {display:-webkit-box;display:flex; -webkit-box-align:center;align-items:center; -webkit-box-pack:justify;justify-content:space-between;} .cfp_special ul li .sale_txt{display:inline-block; line-height:1; padding:2px 4px;background:#dbb388;font-size:10px;color:var(--main-ft-color);border:1px solid #cba175; border-radius:3px; letter-spacing:-0.05em; margin-bottom:2px; margin-top:2px; margin-top:2px;} .cfp_special ul li .sale_count{float:left;height:34px; line-height:35px;font-size:11px; color:var(--bg-fc-color); letter-spacing:-0.04em; white-space:nowrap;} .cfp_special ul li .charge_btn{float:right; margin-right:5px; height:34px; line-height:34px; font-size:12px; font-weight:bold; color:var(--main-ft-color); padding:0 8px; background:#404040; border-radius:3px; white-space:nowrap;} .coin_fill_selec_p{width:100%;margin-top:5px; /* border-top:2px solid #000; */border-top:0 none;} .coin_fill_selec_p .title{padding:0 8px;height:35px;line-height:35px;background:#f2f4fb; border:1px solid #ddd; border-bottom:0 none; font-size:12px; font-weight:bold; border-radius:4px 4px 0 0;} .coin_fill_selec_p .title .fill_up_btn{display:inline-block;height:25px;line-height:25px; padding:0 8px; background-color:#000; border-radius:50px;margin-top:4px; float:right;} .coin_fill_selec_p .title .fill_up_btn span{display:inline-block;padding-right:18px;color:var(--main-ft-color);font-size:11px; font-weight:normal;background:url(https://cdn.metoon.co.kr/mimg/ic_cfs_up.png) no-repeat 100% 53%; background-size:13px auto;cursor:pointer;} .coin_fill_selec_p .cfsp_contents{padding:10px 7px;border:1px solid #ddd;border-radius:0 0 4px 4px;} .coin_fill_selec_p .cfsp_contents_ca{display:none;} .coin_fill_selec_p .cfsp_contents .cfsp_box .menu_title{height:36px;line-height:32px;font-size:14px;color:#000;letter-spacing:-0.02em;padding:0 3px;} .coin_fill_selec_p .cfsp_contents .cfsp_box .menu_title span{display:inline-block;width:22px; height:36px;vertical-align:top; margin-right:2px; background-size:100% auto; background-repeat:no-repeat; background-position:center;} .coin_fill_selec_p .cfsp_contents .cfsp_box .menu_title.phone span{background-image:url(https://cdn.metoon.co.kr/mimg/ic_cfs_t01.png);background-position:30% center;} .coin_fill_selec_p .cfsp_contents .cfsp_box .menu_title.bPay span{background-image:url(https://cdn.metoon.co.kr/mimg/ic_cfs_t02.png?1);background-size:75%;background-position:center 45%;} .coin_fill_selec_p .cfsp_contents .cfsp_box .menu_title.card span{background-image:url(https://cdn.metoon.co.kr/mimg/ic_cfs_t03.png?1);background-size:75%;background-position:center 47%;} .coin_fill_selec_p .cfsp_contents .cfsp_box .menu_title.gift span{background-image:url(https://cdn.metoon.co.kr/mimg/ic_cfs_t04.png);background-size:75%;background-position:center 47%;} .coin_fill_selec_p .cfsp_contents .cfsp_box .cfsp_list{width:100%;} .coin_fill_selec_p .cfsp_contents .cfsp_box .cfsp_list:after{content:"";display:block;clear:both;} .coin_fill_selec_p .cfsp_contents .cfsp_box .cfsp_list li{float:left;width:33.333%;padding:0 3px;-webkit-box-sizing:border-box;box-sizing:border-box; margin-bottom:6px; font-size:12px;} .coin_fill_selec_p .cfsp_contents .cfsp_box .cfsp_list01 li{height:60px;} .coin_fill_selec_p .cfsp_contents .cfsp_box .cfsp_list02 li{height:34px; line-height:34px;} .coin_fill_selec_p .cfsp_contents .cfsp_box .cfsp_list li a{display:block;width:100%;height:100%;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #ddd;color:#000;transition:border-color 0.15s;} .coin_fill_selec_p .cfsp_contents .cfsp_box .cfsp_list li a span{cursor:pointer;} .coin_fill_selec_p .cfsp_contents .cfsp_box .cfsp_list li a .cfsp_name{white-space:nowrap;} .coin_fill_selec_p .cfsp_contents .cfsp_box .cfsp_list01 li a img{width:55px;height:21px;object-fit:contain;display:block;margin:7px auto 5px;cursor:pointer;} .cfsp_info{display:none;position:relative;width:100%;padding:10px 20px;background-color:#5f6677;color:var(--main-ft-color);margin-bottom:5px;border-radius:4px;} .cfsp_info dl{line-height:1;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;} .cfsp_info dl dt{font-size:13px;margin-bottom:10px;float:left;padding:5px 8px;margin-top:8px;border-radius:3px;background-color:#353740;} .cfsp_info dl dd{font-size:14px;float:right;text-align:right;} .cfsp_info dl dd .coin_all strong{font-size:16px;font-weight:bold;color:#fbdf0a;} .cfsp_info dl dd .coin_details{margin-top:10px;font-size:13px;} .coin_fill_info{width:100%;border:1px solid var(--main-line-color);border-radius:5px;background-color:#2E2E2E; margin:25px auto 15px;} .coin_fill_info .title{position:relative; font-size:14px; line-height:1.2; color:#C1C1C1; padding:15px;cursor:pointer;} .coin_fill_info .title .cfi_btn{position:absolute; top:50%; right:15px; width:18px; height:18px; margin-top:-9px; background-image:url(https://cdn.metoon.co.kr/mimg/ic_cfp_up.png); background-position:center; background-repeat:no-repeat; background-size:100% auto;filter:invert(1);} .coin_fill_info.up .title .cfi_btn{background-image:url(https://cdn.metoon.co.kr/mimg/ic_cfp_down.png);} .coin_fill_info ul{padding:0 20px 20px;} .coin_fill_info ul li{list-style-type:disc; margin:0 0 5px 20px; font-size:12px; color:var(--sub-ft-color); line-height:1.5;} .coin_fill_info ul li:last-child{margin-bottom:0;} .cfpd_wrap{width:100%;padding-bottom:5px;margin-bottom:5px;} .cfpd_wrap .cfpd_contents{width:100%;border:2px solid var(--bg-fc-color);border-top:0 none;letter-spacing:-0.03em;} .cfpd_wrap .cfpd_contents .cfpd_title{text-align:center;height:38px;line-height:38px;background-color:var(--bg-fc-color);} .cfpd_wrap .cfpd_contents .cfpd_title span{display:inline-block;padding-left:25px;font-size:12px;color:var(--main-ft-color);background:url(https://cdn.metoon.co.kr/mimg/coin_notice_fill_icon1.png) no-repeat 0 center;background-size:20px;} .cfpd_wrap .cfpd_contents .cfpd_title span em{color:yellow;font-weight:bold;} .cfpd_wrap .cfpd_contents .cfpd_list{width:100%;} .cfpd_wrap .cfpd_contents .cfpd_list li{position:relative;} .cfpd_wrap .cfpd_contents .cfpd_list li + li{border-top:1px solid #ddd;} .cfpd_wrap .cfpd_contents .cfpd_list li:after{content:"";display:block;clear:both;} .cfpd_wrap .cfpd_contents .cfpd_list li input{position:absolute;top:0;left:0;clip:rect(1, 1, 1, 1);opacity:0;z-index:-1;} .cfpd_wrap .cfpd_contents .cfpd_list li input[type="radio"]:checked + label{background-color:#fffcd5;} .cfpd_wrap .cfpd_contents .cfpd_list li label{width:100%;height:35px;line-height:35px;padding:0 6px;display:table;-webkit-box-sizing:border-box;box-sizing:border-box;} .cfpd_wrap .cfpd_contents .cfpd_list li label:after{content:"";display:block;clear:both;} .cfpd_wrap .cfpd_contents .cfpd_list li .recomm{padding-left:30px;background:url(https://cdn.metoon.co.kr/mimg/ic_ct_recomm.png) no-repeat 6px center; background-size:18px;} .cfpd_wrap .cfpd_contents .cfpd_list li .cfpd_c_info{float:left;font-size:13px;color:#000;font-weight:bold;} .cfpd_wrap .cfpd_contents .cfpd_list li .cfpd_c_info span{display:inline-block;padding-left:5px;font-size:12px;} .cfpd_wrap .cfpd_contents .cfpd_list li .cfpd_c_info span em{color:var(--bg-fc-color);} .cfpd_wrap .cfpd_contents .cfpd_list li .cfpd_cost{display:table-cell;text-align:right;vertical-align:middle;font-size:11px;white-space:nowrap;} .cfpd_wrap .cfpd_contents .cfpd_list li .cfpd_cost b{font-size:13px;font-weight:bold;} .cfpd_wrap .cfpd_btn{display:block;width:180px;height:38px;line-height:38px;background-color:var(--bg-fc-color);border:0 none;border-bottom:3px solid #ad2222;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--main-ft-color);font-size:13px;font-weight:bold;text-align:center;border-radius:3px;margin:5px auto 0;} .cfpd_wrap .cfpd_contents .cfpd_list li label .cfpd_ci_wrap{display:table-cell;vertical-align:middle;} .cfpd_wrap .cfpd_contents .cfpd_list li label[class*="mg-"]{padding-left:30px;background-repeat:no-repeat;background-position:6px center;background-size:20px;} .cfpd_wrap .cfpd_contents .cfpd_list li label[class*="mg-"] .cfpd_c_info{line-height:35px;} .cfpd_wrap .cfpd_contents .cfpd_list li .mg-gold{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s2.png);} .cfpd_wrap .cfpd_contents .cfpd_list li .mg-pleti{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s3.png);} .cfpd_wrap .cfpd_contents .cfpd_list li .mg-dia{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s4.png);} .cfpd_wrap .cfpd_contents .cfpd_list li .mg-vip{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s5.png);} .cfpd_wrap .cfpd_contents .cfpd_list li .cfpd_freec{float:left;line-height:34px;margin-left:8px;} .cfpd_wrap .cfpd_contents .cfpd_list li .cfpd_freec span{vertical-align:middle;font-weight:bold;} .cfpd_wrap .cfpd_contents .cfpd_list li label[class*="mg-"] .cfpd_freec i{display:inline-block;width:60px;height:30px;background-repeat:no-repeat;background-position:100% center;background-size:auto 100%;vertical-align:middle;margin-left:8px;} .cfpd_wrap .cfpd_contents .cfpd_list .mg-gold .cfpd_freec i{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memcoupon3_m.jpg);} .cfpd_wrap .cfpd_contents .cfpd_list .mg-pleti .cfpd_freec i{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memcoupon5_m.jpg);} .cfpd_wrap .cfpd_contents .cfpd_list .mg-dia .cfpd_freec i{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memcoupon10_m.jpg);} .cfpd_wrap .cfpd_contents .cfpd_list .mg-vip .cfpd_freec i{background-image:url(https://cdn.metoon.co.kr/mimg/ic_memcoupon30_m.jpg);} @media all and (max-width:370px) { .cfp_t_wrap .cfp_table .cfpt_cell02{width:100px;} .cfp_t_wrap .cfp_table .cfpt_cell03{width:auto;} .cfp_t_wrap .cfp_table td:nth-child(2){padding-right:5px;} .cfp_t_wrap .cfp_table td .sale_count{font-size:10px;} .cfp_t_wrap .cfp_table td .coin_info{background-size:15px;padding-left:18px;} } @media all and (max-width:359px){ .cfpd_wrap .cfpd_contents .cfpd_title span{padding-left:0;background:none;} .cfp_t_wrap .cfp_table td:first-child, .cfp_t_wrap .cfp_table td:nth-child(2){padding:0;} } @media all and (max-width:330px) { .coin_fill_selec_p .cfsp_contents .cfsp_box .cfsp_list li{font-size:10px;} } .coin_fill_info_wrap{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:100000000;} .coin_fill_info_wrap .cfi_back{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.4);z-index:1;} .coin_fill_info_wrap .cfi_layer{position:absolute;top:50%;left:0;right:0;width:96%;max-width:400px;margin:auto;border-radius:3px;z-index:2;-webkit-transform:translateY(-50%);transform:translateY(-50%);} .coin_fill_info_wrap .cfi_layer .cfi_close{position:absolute;top:0;right:0;display:block;width:24px;height:24px;background:url(https://cdn.metoon.co.kr/img/pass_x.png) no-repeat center;background-size:100%;margin-top:-30px;} .coin_fill_info_wrap .cfi_layer .cfi_title{width:100%;padding:14px 0 12px;text-align:center;background:#e6e6e6;font-size:18px;font-weight:bold;color:#141414;border-radius:3px 3px 0 0;} .coin_fill_info_wrap .cfi_layer .cfi_contents{width:100%;overflow:hidden;background:#fff;text-align:center;padding:20px;border-radius:0 0 3px 3px;} .coin_fill_info_wrap .cfi_layer .cfi_t_container{width:100%;overflow:hidden;border:1px solid #ddd;} .coin_fill_info_wrap .cfi_layer .cfi_t_container table{width:100%;border-collapse:collapse;border-spacing:0 none;} .coin_fill_info_wrap .cfi_layer .cfi_t_container table .cfi_cell01{width:50px;} .coin_fill_info_wrap .cfi_layer .cfi_t_container table .cfi_cell02{width:110px;} .coin_fill_info_wrap .cfi_layer .cfi_t_container table .cfi_cell03{width:110px;} .coin_fill_info_wrap .cfi_layer .cfi_t_container table tr th{height:48px;border-bottom:1px solid #ddd;background:#f2f4fb;font-size:14px;font-weight:bold;color:#000;} .coin_fill_info_wrap .cfi_layer .cfi_t_container table tr th + th{border-left:1px solid #ddd;} .coin_fill_info_wrap .cfi_layer .cfi_t_container table tr td{height:48px;border-bottom:1px solid #ddd;font-size:13px;font-weight:bold;color:#333;} .coin_fill_info_wrap .cfi_layer .cfi_t_container table tr td + td{border-left:1px solid #ddd;font-weight:normal;} .coin_fill_info_wrap .cfi_layer .cfi_t_container table tbody tr:last-child td{border-bottom:0 none;} .coin_fill_info_wrap .cfi_layer .cfi_txt01{font-size:12px;color:#000;margin:15px auto;text-align:left;line-height:1.4;} .coin_fill_info_wrap .cfi_layer .cfi_txt01 span{font-size:11px;color:#777;} .coin_fill_info_wrap .cfi_layer .cfi_btn{display:block;width:100%;height:42px;line-height:43px;font-size:15px;color:var(--main-ft-color);text-align:center;background:var(--bg-fc-color);border-bottom:3px solid #961d1d;margin:0 auto;border-radius:3px;} .coin_fill_info_wrap .cfi_layer .cfi_chk_box{margin-top:10px;text-align:right;} .not-scrollable{position:relative !important;} /* up아이콘 추가 */ .icon_up_new{display:inline-block;display:inline-flex;width:22px;height:14px;text-align:center;color:var(--bg-fc-color);letter-spacing:0;/* background:url(https://cdn.metoon.co.kr/mimg/icon_up_new.png?1) no-repeat center;background-size:100%; */border:1px solid var(--bg-fc-color);border-radius:20px;margin-right:5px;box-sizing:border-box;flex-shrink:0;align-self:center;align-items:center;justify-content:center;flex-shrink:0;} i.icon_up_new:before{content:"UP";font-size:10px;font-weight:500;line-height:1;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .title .icon_up_new, .mcs_wrap .webtoon_txt .title .icon_up_new{vertical-align:bottom;margin-right:4px;} .icon_19_new{position:absolute;top:10px;right:10px;width:16px !important;opacity:.9;z-index:10;} /*코인소진안내 팝업*/ .coin_exp_wrap{position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:99999;} .coin_exp_wrap:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-4px;} .coin_exp_wrap .c_exp_back{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:auto;background:rgba(0, 0, 0, .5);z-index:1;} .coin_exp_wrap .cexp_layer{position:relative;display:inline-block;vertical-align:middle;width:96%;max-width:380px;background:#fff;text-align:left;padding:15px 15px 20px;border-radius:4px;color:#141414;z-index:2;} .coin_exp_wrap .cexp_layer .title{/* height:35px;line-height:30px; */padding-bottom:12px;font-size:16px;font-weight:bold;color:#000;text-align:center;} .coin_exp_wrap .cexp_layer .selec_f{position:relative;padding:15px 10px;} .coin_exp_wrap .cexp_layer .selec_f01{border-top:2px solid #333; border-bottom:1px solid #ddd;} .coin_exp_wrap .cexp_layer .selec_f02{border-bottom:1px solid #ddd;background:#fdf4f4;} .coin_exp_wrap .cexp_layer .selec_f input{position:absolute;top:0;left:0;width:1px;height:1px;clip:rect(0,0,0,0);opacity:0;z-index:-1;} .coin_exp_wrap .cexp_layer .selec_f label{position:relative;display:flex;justify-content:space-between;gap:5px 20px;padding-left:22px;height:15px;line-height:15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .coin_exp_wrap .cexp_layer .selec_f input[type="radio"] + label:before{content:"";display:block;position:absolute;top:-2px;left:0;width:15px;height:15px;border-radius:15px;border:1px solid #cacece;background:#fafafa;box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -10px 5px -7px rgba(0,0,0,0.05);} .coin_exp_wrap .cexp_layer .selec_f input[type="radio"]:checked + label:before{background:#e9ecee;border-color:#adb8c0;} .coin_exp_wrap .cexp_layer .selec_f input[type="radio"]:checked + label:after{content:"";position:absolute;top:2px;left:4px;width:9px;height:9px;border-radius:9px;background:#99a1a7;box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);} .coin_exp_wrap .sale_price_cont{align-items:center;} .coin_exp_wrap .sale_price_cont .sale_price{position:relative;padding:0 10px 0 2px;margin-right:6px;} .coin_exp_wrap .sale_price_cont .sale_price:before, .coin_exp_wrap .sale_price_cont .sale_price:after{content:"";display:block;position:absolute;} .coin_exp_wrap .sale_price_cont .sale_price:before{top:0;bottom:0;left:0;width:100%;height:1px;background-color:var(--bg-fc-color);margin:auto;opacity:0.7;} .coin_exp_wrap .sale_price_cont .sale_price:after{top:50%;right:0;border-top-width:5px;border-bottom-width:5px;border-right-width:0;border-style:solid;border-color:transparent;border-left-width:7px;border-left-color:var(--bg-fc-color);margin-top:-5px;} .coin_exp_wrap .cexp_layer .selec_f .buy_info{display:inline-block;float:left;font-size:14px;} .coin_exp_wrap .cexp_layer .selec_f02 .buy_info{color:#1d488a;} .coin_exp_wrap .cexp_layer .selec_f .price{display:inline-block;float:right;font-size:14px;font-weight:bold;} .coin_exp_wrap .cexp_layer .selec_f .bonus_info{position:relative;width:100%;text-align:center;padding:4px 10px;background:#fff;border:1px solid #ddd;margin:15px auto 0;font-size:14px;font-weight:bold;color:var(--bg-fc-color);} .coin_exp_wrap .cexp_layer .selec_f .bonus_info:before{content:"";display:block;position:absolute;top:0;left:0;width:45px;height:18px;background:url(https://cdn.metoon.co.kr/mimg/ic_purchase_e_m.png) no-repeat center;background-size:100% auto;margin:-4px 0 0 4px;} .coin_exp_wrap .cexp_layer .close_chk{text-align:right;font-size:12px;margin-top:10px;} .coin_exp_wrap .cexp_layer .close_chk input{width:12px;height:12px;margin:0;padding:0;vertical-align:top;margin-top:1px;} .coin_exp_wrap .cexp_contents button{display:block;margin:15px auto 0;width:120px;height:38px;border:0 none; border-bottom:2px solid #8a1a1a;background:var(--bg-fc-color);border-radius:4px;font-size:15px;color:var(--main-ft-color);} .coin_exp_wrap .cexp_contents button:hover{background:#8a1a1a;} /* .coin_exp_wrap .cexp_layer .cexp_close{position:absolute;top:100%;right:10px;} .coin_exp_wrap .cexp_layer .cexp_close .close_btn{padding:5px 14px;border-radius:4px;font-size:14px;color:var(--main-ft-color);border:0 none;background:var(--opt-bg-color);border:1px solid var(--sub-ft-color);margin-top:7px;} */ .coin_exp_wrap .cexp_layer .cexp_close{position:absolute;bottom:100%;right:5px;} .coin_exp_wrap .cexp_layer .cexp_close .close_btn{position:relative;width:28px;height:28px;border-radius:28px;font-size:0;color:var(--main-ft-color);background:url("https://cdn.metoon.co.kr/mimg/ico_close.svg") no-repeat center, rgba(0, 0, 0, 0.3);background-size:14px;border:2px solid #FFFFFF;margin-bottom:7px;} .coin_exp_wrap .cexp_layer .selec_f .bonus_info p:first-child{text-align:left;text-indent:41px;line-height:1;} .coin_exp_wrap .cexp_layer .selec_f .bonus_info p:last-child{margin-top:5px;height:16px;line-height:16px;} .coin_exp_wrap .cexp_layer .selec_f .bonus_info del{text-decoration:line-through;font-size:10px;color:#777;} .coin_exp_wrap .cexp_layer .selec_f .bonus_info p:last-child span{position:relative;display:inline-block;width:10px;height:16px;vertical-align:top;margin-right:5px;} .coin_exp_wrap .cexp_layer .selec_f .bonus_info p:last-child span:before, .coin_exp_wrap .cexp_layer .selec_f .bonus_info p:last-child span:after{content:"";display:block;position:absolute;top:50%;right:0;width:5px;height:1px;background:var(--bg-fc-color);-webkit-transform-origin:100% center;-ms-transform-origin:100% center;transform-origin:100% center;} .coin_exp_wrap .cexp_layer .selec_f .bonus_info p:last-child span:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .coin_exp_wrap .cexp_layer .selec_f .bonus_info p:last-child span:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);} .coin_exp_wrap .cexp_layer .selec_f .bonus_info p:last-child span i{position:absolute;top:50%;left:0;display:block;width:100%;height:1px;background:var(--bg-fc-color);} .cexp_vd_notice{display:none;position:relative;width:100%;line-height:1.5;background-color:#efefef;font-size:12px;text-align:center;padding:4px 6px;margin-top:15px;} .cexp_vd_notice p{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-box-lines:multiple;-ms-flex-wrap:wrap;flex-wrap:wrap;} .cexp_vd_notice p i{font-size:14px;color:#fb4242;} .cexp_vd_notice p span{padding:0 4px;color:#040404;} .cexp_vd_notice a{font-size:12px;color:#333;text-decoration:underline;} /* payco 생애첫결제이벤트 */ .event_pfp_cont{position:relative;max-width:1000px;margin:0 auto;} .event_pfp_cont > img{display:block;width:100%;} .event_pfp_cont .e_pfp_btn{position:absolute;left:50%;display:block;width:86.7%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);} .event_pfp_cont .e_pfp_btn01{top:39.1%;} .event_pfp_cont .e_pfp_btn02{bottom:2%;} .event_pfp_cont .e_pfp_btn img{display:block;width:100%;cursor:pointer;} .mehi_info_wrap{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:100000000;} .mehi_info_wrap .mehi_back{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.4);z-index:1;} .mehi_info_wrap .mehi_layer{position:absolute;top:50%;left:0;right:0;width:96%;max-width:400px;margin:auto;border-radius:3px;z-index:2;-webkit-transform:translateY(-50%);transform:translateY(-50%);} .mehi_info_wrap .mehi_layer .mehi_close{position:absolute;top:0;right:0;display:block;width:24px;height:24px;background:url(https://cdn.metoon.co.kr/img/pass_x.png) no-repeat center;background-size:100%;margin-top:-30px;} .mehi_info_wrap .mehi_layer .mehi_title{width:100%;padding:14px 0 12px;text-align:center;background:#e6e6e6;font-size:18px;font-weight:bold;color:#141414;border-radius:3px 3px 0 0;border-bottom:1px solid #e6e6e6;} .mehi_info_wrap .mehi_layer .mehi_contents{width:100%;overflow:hidden;background:#fff;text-align:center;padding:20px 15px 15px;border-radius:0 0 3px 3px;} .mehi_info_wrap .mehi_layer .mehi_t_container{width:100%;overflow:hidden;border:1px solid #ddd;} .mehi_info_wrap .mehi_layer .mehi_t_container table{width:100%;border-collapse:collapse;border-spacing:0 none;} .mehi_info_wrap .mehi_layer .mehi_t_container table .mehi_cell01{width:70px;} .mehi_info_wrap .mehi_layer .mehi_t_container table .mehi_cell02{width:110px;} .mehi_info_wrap .mehi_layer .mehi_t_container table .mehi_cell03{width:110px;} .mehi_info_wrap .mehi_layer .mehi_t_container table tr th{height:48px;border-bottom:1px solid #ddd;background:#f2f4fb;font-size:14px;font-weight:bold;color:#000;} .mehi_info_wrap .mehi_layer .mehi_t_container table tr th + th{border-left:1px solid #ddd;} .mehi_info_wrap .mehi_layer .mehi_t_container table tr td{height:48px;border-bottom:1px solid #ddd;font-size:13px;font-weight:bold;color:#333;} .mehi_info_wrap .mehi_layer .mehi_t_container table tr td + td{border-left:1px solid #ddd;font-weight:normal;} .mehi_info_wrap .mehi_layer .mehi_t_container table tbody tr:last-child td{border-bottom:0 none;} .mehi_info_wrap .mehi_layer .mehi_t_container table tr .mehi_td2{background-color:#b4c7e7;} .mehi_info_wrap .mehi_layer .mehi_t_container table tr .mehi_td2 strong{font-weight:800;color:var(--bg-fc-color);} .mehi_info_wrap .mehi_layer .mehi_txt01{font-size:12px;color:#000;margin:12px auto;text-align:center;line-height:1.4;} .mehi_info_wrap .mehi_layer .mehi_btn{position:relative;display:block;width:100%;max-width:260px;height:42px;line-height:43px;font-size:15px;color:var(--main-ft-color);text-align:center;background:var(--bg-fc-color);border-bottom:3px solid #961d1d;margin:25px auto 0;border-radius:3px;} .mehi_info_wrap .mehi_layer .mehi_btn:before{content:"";display:block;position:absolute;bottom:0;left:0;width:80px;height:50px;background:url(https://cdn.metoon.co.kr/mimg/mehi_balloon_m.png) no-repeat center;background-size:100%;margin:0 0 12px -20px;} .mehi_info_wrap .mehi_layer .mehi_btn:hover{background-color:#961d1d;} .mehi_info_wrap .mehi_layer .mehi_chk_box{margin-top:10px;text-align:right;} .mehi_info_txt{font-size:13px;line-height:1.4;margin-bottom:15px;text-align:left;} .mehi_info_txt span{font-size:11px;color:#777;} @media only screen and (max-width:350px){ .mehi_info_wrap .mehi_layer .mehi_btn:before{width:70px;height:43px;margin:0 0 12px -20px;} } .main_float_bnr{position:fixed;bottom:7px;right:7px;z-index:1010;/* -webkit-transform:translate(140px, 140px) scale(.7);transform:translate(140px, 140px) scale(.7);-webkit-transition:transform .3s ease-in-out;transition:transform .3s ease-in-out; */} .main_float_bnr.show{-webkit-transform:translate(0, 0) scale(1);transform:translate(0, 0) scale(1);} .main_float_bnr a{display:block;text-indent:-9999px;} .main_float_bnr .main_float_close{position:absolute;top:0;right:0;width:24px;height:24px;background:url(https://cdn.metoon.co.kr/mimg/ic_bnr_x.png) no-repeat center;background-size:100% auto;} .main_float_bnr .main_float_box{width:120px;} .main_float_bnr .main_float_box img{display:block;width:100%;cursor:pointer;} #oorioneEvnetForm_bnr{position:absolute;top:0;left:0;opacity:0;clip:rect(1px, 1px, 1px, 1px);} /* 등급제 modal */ .memvip_layer_wrap{display:none;position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:100000000;} .memvip_layer_wrap:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-left:-4px;} .memvip_layer_back{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .4);z-index:1;} .memvip_layer{position:relative;display:inline-block;width:96%;max-width:420px;vertical-align:middle;text-align:left;background:#fff;letter-spacing:-0.03em;box-shadow:0 2px 5px rgba(0, 0, 0, .2);z-index:2;} .memvip_layer .memvl_close{display:block;position:absolute;top:-35px;right:0;width:30px;height:30px;background:url(https://cdn.metoon.co.kr/mimg/ic_bnr_x.png) no-repeat center;background-size:100%;text-indent:-9999px;} .memvip_layer .memvl_top{width:100%;background:#272727;color:var(--main-ft-color);padding:15px;/*display:table;*/} .memvip_layer .memvl_top:after{content:"";display:block;clear:both;} .memvip_layer .memvl_top dl{display:table-cell;width:52px;vertical-align:middle;} .memvip_layer .memvl_top dl img{display:block;width:100%;margin:0 auto 12px;} .memvip_layer .memvl_top dl dt{line-height:1;font-size:13px;font-weight:bold;text-align:center;} .memvip_layer .memvl_info{display:table-cell;vertical-align:middle;line-height:1.4;width:calc(100% - 70px);padding-left:30px;word-break:keep-all;} .memvip_layer .memvl_info1{font-size:15px;word-break:break-all;} .memvip_layer .memvl_info1 b{font-weight:bold;} .memvip_layer .memvl_info1 .line-grade{position:relative;} .memvip_layer .memvl_info1 .line-grade:after{content:"";display:block;position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:#fff;} .memvip_layer .memvl_info2{font-size:11px;margin:6px 0 10px;} .memvip_layer .memvl_info2 span{text-decoration:underline;} .memvip_layer .memvl_info3{font-size:14px;color:#fff799;} .memvip_layer .memvl_table{display:table;width:100%;} .memvip_layer .memvl_table ul{display:table-row;} .memvip_layer .memvl_table ul li{display:table-cell;vertical-align:middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #e6e6e6;border-top:none;text-align:center;font-size:12px;color:#555;font-weight:bold;word-break:keep-all;} .memvip_layer .memvl_table ul li + li{border-left:none;} .memvip_layer .memvl_table ul li:last-child{border-right:none;} .memvip_layer .memvl_table ul:first-child li{border-top:1px solid #e6e6e6;} .memvip_layer .memvl_table ul li img{display:block;margin:0 auto;} .memvip_layer .memvl_table .memvl_th{width:75px;padding:0 5px;background:#f1f1f1;font-size:14px;} .memvip_layer .memvl_table .memvl_td{width:80px;padding:10px 5px;line-height:1.4;} .memvip_layer .memvl_table ul:first-child{font-size:12px;} .memvip_layer .memvl_table .ic_memgrade{width:37px;margin-bottom:8px;} .memvip_layer .memvl_table .ic_freecoupon{width:60px;margin-bottom:6px;} .memvip_layer .memvl_table p b{color:#000;font-weight:800;} .memvip_layer .memvl_table .memvl_td.on{background:rgba(83, 142, 241, .12);} .memvip_layer .memvl_btn{display:block;width:220px;height:36px;line-height:36px;background:#ed1c24;font-size:16px;font-weight:bold;text-align:center;color:var(--main-ft-color);border-bottom:3px solid #a00309;border-radius:3px;margin:15px auto 20px;} .memvip_layer .memvl_btn:hover{background:linear-gradient(to top, rgba(160, 3, 9, .9), #ed1c24 60%);} /* 무료이용권 결제확인 modal */ .memvip_confirm_wrap{display:none;position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:10000;} .memvip_confirm_wrap .memvip_confirm_back{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .4);z-index:1;} .memvip_confirm_wrap:after{content:"";display:inline-block;height:100%;vertical-align:middle;margin-left:-4px;} .memvip_confirm{position:relative;display:inline-block;vertical-align:middle;width:96%;max-width:320px;padding:0 14px;background:#fff;z-index:2;letter-spacing:-0.03em;} .memvip_confirm .memv_c_close{position:absolute;top:-35px;right:0;width:30px;height:30px;text-indent:-9999px;} .memvip_confirm .memv_c_close:before, .memvip_confirm .memv_c_close:after{content:"";display:block;position:absolute;top:50%;left:0;width:100%;height:2px;background:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg);margin-top:-1px;} .memvip_confirm .memv_c_close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} .memvip_confirm .memv_c_title{height:40px;line-height:40px;padding-top:14px;border-bottom:1px solid #b9b9b9;font-size:17px;font-weight:bold;color:var(--bg-fc-color);} .memvip_confirm .memv_c_contents{padding:15px 0 25px;} .memvip_confirm .memv_c_contents p{line-height:1.4;font-size:13px;color:#444;} .memvip_confirm .memv_c_count{display:inline-block;height:30px;line-height:30px;font-size:14px;color:#7d1616;color:var(--bg-fc2-color);padding:0 15px;background:rgba(197, 50, 50, .3);margin:18px auto;} .memvip_confirm .memv_c_count span{font-weight:500;color:#1b1b8e;color:#0071FF;} .memvip_confirm .memv_c_btn{display:inline-block;width:120px;height:36px;line-height:36px;text-align:center;font-size:15px;color:var(--main-ft-color);border-radius:3px;border:none;border-bottom:3px solid #b52323;background-color:var(--bg-fc-color);margin-top:20px;} .memvip_confirm .memv_c_btn:hover{background-color:#b52323;} /* 회차페이지 무료이용권 안내 */ .detail_memvip{width:96%;/* height:37px;line-height:36px;letter-spacing:-0.025em; */margin:0 auto 0;padding:7px 15px;background:var(--opt-bg-color);justify-content:space-between;gap:5px 15px;} [color-theme="light"] .detail_memvip{border-top:1px solid var(--main-line-color);} #sub_detail .detail_nobel_list > .detail_memvip:after{content:none !important;} .detail_memvip.wd100{width:100%;} .detail_memvip.mgs-10{width:auto;margin-left:-10px;margin-right:-10px;} .detail_memvip .detail_memvip_txt{padding-left:26px;background:url("https://cdn.metoon.co.kr/mimg/ic_memd_coupon_mg_xtg.png") no-repeat 0 center;background-size:20px;line-height:20px;} [color-theme="light"] .detail_memvip .detail_memvip_txt{background-image:url("https://cdn.metoon.co.kr/mimg/ic_memd_coupon_mg.png");} .detail_memvip .detail_memvip_txt span{color:var(--bg-fc-color);} .detail_memvip .dmv_ic_area{position:relative;height:100%;float:left;margin-left:5px;} .detail_memvip .dmv_ic_area i{display:block;width:16px;height:100%;background:url(https://cdn.metoon.co.kr/mimg/ic_memd_exc_mg.png) no-repeat center;background-size:100%;cursor:pointer;} .detail_memvip .detail_memv_info{display:none;position:absolute;top:40px;left:50%;width:200px;margin-left:-140px;padding:15px;border-radius:3px;background:#7d7c7c;color:#FFFFFF;line-height:1;z-index:10;} .detail_memvip .detail_memv_info:before{content:"";display:block;position:absolute;top:-10px;left:50%;margin-left:33px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #7d7c7c;} .detail_memvip .detail_memv_info dt{font-size:14px;font-weight:500;} .detail_memvip .detail_memv_info dd{margin-top:10px;font-size:12px;line-height:1.5;} .detail_memvip .detail_memv_info dd + dd{margin-top:0;} .detail_memvip .detail_memv_btn{display:block;float:right;height:24px;line-height:24px;font-size:12px;padding:0 7px;background:var(--bg-fc-color);border-radius:3px;color:#FFFFFF;/* margin-top:6px; */flex-shrink:0;} /* 웹툰 회차 이용권 사용 가능 */ #sub_detail .detail_cont .detail_cont_list .txt_box .dep1-title{display:block;} #sub_detail .detail_cont .detail_cont_list .txt_box .dep2-freec{display:block;position:absolute;bottom:10px;right:10px;font-size:12px;height:18px;line-height:18px;padding:0 5px;background:#f56e74;border-radius:3px;color:var(--main-ft-color);} #sub_detail .detail_cont .detail_cont_list .txt_box .dep2-title{display:block;width:calc(100% - 100px);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} #sub_detail .detail_cont .detail_cont_list .txt_box .dep1-title > span:only-child{width:auto;} /* 홈, 메인 플로팅 메뉴 */ .main_floating_menu{display:none;position:absolute;top:54px;left:0;right:0;width:100%;border-bottom:1px solid #ddd;z-index:10;} .main_floating_menu ul{display:-webkit-box;display:-ms-flexbox;display:flex;} .main_floating_menu ul li{-webkit-box-flex:1;-ms-flex:1;flex-grow:1;height:42px;line-height:42px;text-align:center;} .main_floating_menu ul li a{display:block;color:#2d2d2d;background:#fff;font-size:13px;} .main_floating_menu ul li span{position:relative;} .main_floating_menu ul li a.on span:before{content:"";display:block;position:absolute;top:0;left:0;width:29px;height:18px;background:url(https://cdn.metoon.co.kr/mimg/ic_mm_chk01.png) no-repeat center;background-size:100% auto;margin:-12px 0 0 -11px;} /* 회원등급제 이벤트 */ .e_mem_vip_wrap{width:100%;max-width:750px;margin:0 auto;} .e_memvip_grade{position:relative;width:100%;font-size:0;text-indent:-99999px;} .e_memvip_grade > img{display:block;width:100%;} .e_memvip_grade .ic_e_mv_ticket{position:absolute;bottom:13.666%;right:0;width:24.6%;margin-right:4.8%;} .e_memvip_grade .ic_e_mv_ticket.ic_e_mvt_or{margin-bottom:22.24%;} .e_memvip_grade .e_memvip_btn{position:absolute;top:0;right:0;width:100%;overflow:hidden;margin-top:151.7%;} .e_memvip_grade .e_memvip_btn a{display:block;width:42%;margin:0 auto;} .e_memvip_grade .e_memvip_btn img{display:block;width:100%;} .e_memvip_plus{width:100%;background:#0c1012;padding:35px 38px 30px;padding:30px 30px 30px;text-align:center;} .e_memvip_plus h5{color:var(--main-ft-color);font-weight:normal;font-size:16px;line-height:1;word-break:keep-all;line-height:1.3;} .e_memvip_plus h5 strong{display:block;font-size:22px;font-weight:bold;margin-top:7px;} .e_memvip_plus .e_mvplus_contents{width:100%;background:#fff;padding:0 15px;text-align:left;letter-spacing:-0.03em;margin:24px auto 30px;} .e_memvip_plus .e_mvplus_dep1{width:100%;position:relative;line-height:1;} .e_memvip_plus .e_mvplus_dep1 .emv_dep_center{padding:32px 0;letter-spacing:-0.05em;} .e_memvip_plus .e_mvplus_dep1 dt{font-size:20px;font-weight:800;color:#d42526;text-align:center;} .e_memvip_plus .e_mvplus_dep1 dt span{position:relative;} .e_memvip_plus .e_mvplus_dep1 dt span:after{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:1px;background:#d42526;} .e_memvip_plus .e_mvplus_dep1 dd:not(.emv_dep1_img){font-size:12px;color:#555;line-height:1.3;text-align:center;word-break:keep-all;} .e_memvip_plus .e_mvplus_dep1 dd span{font-size:16px;color:#000;display:block;margin-bottom:10px;font-weight:500;} .e_memvip_plus .e_mvplus_dep1 .emv_dep1_img{margin:10px auto;} .e_memvip_plus .e_mvplus_dep1 .emv_dep1_img img{display:block;width:94%;max-width:200px;margin:0 auto;} .e_memvip_plus .e_mvplus_dep1 .e_mvplus_btn{position:relative;display:block;width:100%;max-width:400px;height:41px;line-height:37px;font-size:16px;color:var(--main-ft-color);text-align:center;background:#343434;margin:28px auto 0;} .e_memvip_plus .e_mvplus_dep1 .e_mvplus_btn:hover{background:#483c3c;} .e_memvip_plus .e_mvplus_dep1 .e_mvplus_btn:after{content:"";display:block;position:absolute;bottom:2px;left:0;width:100%;height:2px;background:#fff;} .e_mvplus_dotted{width:100%;border-top:1px dotted #000;position:relative;} .e_mvplus_dotted span{display:inline-block;position:absolute;top:50%;left:50%;padding:0 10px;background:#fff;font-size:14px;font-weight:500;color:#363636;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);word-break:normal;white-space:nowrap;} .e_memvip_plus .e_mvplus_info{margin-top:30px;margin-top:0;color:var(--main-ft-color);text-align:left;} .e_memvip_plus .e_mvplus_info p{background:url(https://cdn.metoon.co.kr/img/ic_memvip_atten.png) no-repeat 0 center;background-size:30px;height:30px;line-height:30px;padding-left:40px;font-size:20px;font-weight:bold;margin-bottom:20px;} .e_memvip_plus .e_mvplus_info ol li{position:relative;padding-left:10px;font-size:15px;line-height:1.4;letter-spacing:-0.05em;} .e_memvip_plus .e_mvplus_info ol li + li{margin-top:5px;} .e_memvip_plus .e_mvplus_info ol li:before{content:"·";position:absolute;top:0;left:0;} .e_memvip_plus .e_mvplus_info ol li span{display:block;font-size:12px;} @media all and (max-width:500px){ .e_memvip_grade .e_memvip_btn{margin-top:150.2%;} .e_memvip_grade .e_memvip_btn a{width:60%;} .e_memvip_plus{padding:30px 15px 30px;} .e_memvip_plus .e_mvplus_info p{font-size:18px;height:24px;line-height:24px;padding-left:34px;background-size:24px;} .e_memvip_plus .e_mvplus_info ol li{font-size:14px;} } @media all and (min-width:750px){ .e_memvip_plus h5{font-size:22px;} .e_memvip_plus h5 strong{font-size:30px;} .e_memvip_plus .e_mvplus_contents{position:relative;padding:0 30px;} .e_memvip_plus .e_mvplus_dep1 dl{padding-right:210px;-webkit-box-sizing:border-box;box-sizing:border-box;} .e_memvip_plus .e_mvplus_dep1 dt{text-align:left;margin-bottom:25px;} .e_memvip_plus .e_mvplus_dep1 dd:not(.emv_dep1_img){font-size:14px;text-align:left;} .e_memvip_plus .e_mvplus_dep1 dd span{font-size:18px;} .e_memvip_plus .e_mvplus_dep1 .emv_dep1_img{position:absolute;top:0;right:0;bottom:0;margin:auto;padding:38px 0 32px;} .e_memvip_plus .e_mvplus_dep1 .e_mvplus_btn{width:300px;margin:30px 0 0;} .e_mvplus_dotted span{font-weight:bold;} } /* 캘린더 주간 */ #content_wrap.content_wrap_white{background:#fff;} /* #container.contain_calendar{background:var(--sub-bg-color);} */ .me_calen_head{width:100%;max-width:1200px;height:42px;line-height:42px;padding:0 8px;margin:0 auto;} .me_calen_head > div{height:42px;} .me_calen_head .calendar_title{float:left;} .me_calen_head .calendar_switch{float:right;font-size:0;} .me_calen_head .calendar_switch a{display:inline-block;position:relative;max-width:100%;font-size:13px;padding:0 5px;} .me_calen_head .calendar_switch a.on{color:var(--bg-fc-color);font-weight:500;} .me_calen_head .calendar_switch a.on:after{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--bg-fc-color);z-index:10;} .sub_sorting_option .calen_e_list_wrap{max-width:100%;padding:10px 8px 0;font-size:0;opacity:0;visibility:hidden;} .sub_calendar_wrap{/* max-width:750px; */margin:0 auto;} .sub_calendar_wrap .me_loading_logo{display:block;position:absolute;top:0;left:0;right:0;bottom:0;width:50px;margin:auto;z-index:1;} .calen_e_list_wrap .swiper-slide{justify-content:flex-start;box-sizing:border-box;background:#fff;} .calen_e_list_wrap .swiper-slide a{display:inline-block;position:relative;max-width:100%;height:30px;line-height:30px;color:#000;} .calen_e_list_wrap .swiper-slide a:after{content:"";display:block;position:absolute;top:50%;right:4px;margin-top:-3px;width:6px;height:6px;border-top:1px solid #313131;border-right:1px solid #313131;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);background:#fff;} .calen_e_list_wrap .swiper-slide a > div{float:left;letter-spacing:-0.03em;} .calen_e_list_wrap .swiper-slide .cel_etitle{display:-webkit-box;display:-webkit-flex;display:flex;max-width:100%;padding:0 7px 0 0;font-size:11px;} .calen_e_list_wrap .swiper-slide .cel_etag{display:inline-block;font-size:12px;text-align:center;min-width:61px;padding:0 5px;color:var(--main-ft-color);background:#313131;white-space:nowrap;vertical-align:top;box-sizing:border-box;} .calen_e_list_wrap .swiper-slide .cel_etxt{display:inline-block;border:1px solid #313131;border-left:none;box-sizing:border-box;padding:0 5px;height:30px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:top;} .calendar_contents .calendar_week{width:100%;} .calendar_month .calendar_contents{padding:0 8px;} .sub_calendar_wrap .calendar_contents{padding-bottom:40px;} .calendar_week .cw_cont_list{padding-left:8px;width:100%;} .cw_cont_list .cw_row{position:relative;margin-top:15px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-left:1px solid var(--main-line-color);min-height:145px;} .cw_cont_list .cw_row.cw_today:before{content:"";display:block;position:absolute;top:0;left:-1px;width:52px;height:100%;/* background-color:var(--opt-bg-color); */border-left:2px solid var(--main-ft-fc-color);/* border-top:1px solid var(--main-line-color);border-bottom:1px solid var(--main-line-color); */z-index:10;} .cw_cont_list .cwl_container{width:100%;visibility:hidden;padding-left:3px;} .cw_cont_list .cwl_day{position:relative;width:54px;text-align:center;float:left;font-size:14px;color:var(--sub-ft-color);font-weight:500;z-index:11;} .cw_cont_list .cw_row.cw_today .cwl_day{color:var(--main-ft-fc-color);} .cw_cont_list .cwl_container{width:calc(100% - 58px);float:left;} .cw_cont_list .swiper-slide{width:107px;} .cw_cont_list .swiper-slide a{display:block;width:100%;position:relative;} .cw_cont_list .swiper-slide .ic_group{position:absolute;bottom:46px;left:-3px;z-index:10;} .cw_cont_list .swiper-slide .cwl_thumb{position:relative;width:100%;border:1px solid var(--main-line-color);border-radius:4px 4px 0 0;overflow:hidden;} .cw_cont_list .swiper-slide .cwl_thumb_img{position:relative;width:100%;height:0;padding-bottom:140.35%;background-position:center;background-repeat:no-repeat;background-size:cover;z-index:2;} .cw_cont_list .swiper-slide .cwl_thumb_img .icon_19_patch{position:absolute;top:3px;right:3px;width:16px;opacity:.9;} .cw_cont_list .swiper-slide .cwl_dsc > p{margin-top:6px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} .cw_cont_list .swiper-slide .cwl_dsc .cwl_title{font-size:13px;height:16px;line-height:16px;font-weight:500;/* color:#2c2c2c; */} .cw_cont_list .swiper-slide .cwl_dsc .cwl_mine{font-size:11px;height:14px;line-height:14px;color:var(--sub2-ft-color);} .cw_cont_list .swiper-slide .cwl_dsc .cwl_mine span{color:#2692db;} /* 캘린더 월간 */ .calendar_month .calen_m_top{width:100%;border-bottom:2px solid var(--main-line-color);text-align:center;font-size:0;} .calendar_month .cmtop_container{display:-webkit-inline-flex;display:inline-flex;min-height:108px;padding:10px 10px 10px 82px;background:url(https://cdn.metoon.co.kr/mimg/ic_calen_icon.png) no-repeat 10px center;background-size:59px auto;text-align:left;-webkit-align-items:center;align-items:center;} .calendar_month .calen_m_top dl{color:var(--main-ft-color);opacity:0.8;} .calendar_month .calen_m_top dt{width:100%;font-size:13px;font-weight:500;} .calendar_month .calen_m_top dd{width:100%;padding-top:5px;} .calendar_month .calen_m_top dd p{position:relative;padding-left:7px;font-size:11px;letter-spacing:-0.03em;line-height:1.3;margin-top:3px;} .calendar_month .calen_m_top dd p:before{content:"·";position:absolute;top:0;left:0;font-weight:500;} .calendar_month .calen_m_top dd p b{border-bottom:1px solid #444;} .calendar_month .cm_cont_list{width:100%;} .calendar_month .cml_row{width:100%;position:relative;display:flex;padding:7px 0;font-size:13px;} .calendar_month .cml_row.cml_today{background-color:var(--sub-bg-color);} .calendar_month .cml_row + .cml_row{border-top:1px solid var(--main-line-color);} .calendar_month .cml_row.cml_today:before{content:"";display:block;position:absolute;top:0;left:0;width:2px;height:100%;background:var(--bg-fc-color);z-index:10;} .calendar_month .cml_row.cml_today:after{content:"";display:block;position:absolute;top:0;right:0;width:1px;height:100%;background:var(--main-line-color);z-index:10;} .calendar_month .cml_date{width:48px;text-align:center;padding-top:8px;color:var(--main-ft-fc-color);font-weight:500;flex-shrink:0;} .calendar_month .cm_offset_line{position:absolute;top:0;left:0;width:100%;height:1px;visibility:hidden;opacity:0;margin-top:-42px;} .calendar_month .cml_row ul{box-sizing:border-box;flex:1 1 auto;} .calendar_month .cml_row ul li{width:100%;overflow:hidden;padding:7px 0;} .calendar_month .cml_row a{display:flex;align-items:center;justify-content:space-between;} .calendar_month .cml_row .cml_title_area{display:-webkit-flex;display:flex;font-size:14px;vertical-align:top;padding-right:20px;line-height:1.3;-webkit-align-items:center;align-items:flex-end;flex:1 1 auto;} .calendar_month .cml_row .cml_title_area > p{display:inline-block;white-space:nowrap;} .calendar_month .cml_row .cml_title_area .cml_title{display:-webkit-box;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;max-height:2.65em;overflow:hidden;text-overflow:ellipsis;color:var(--main-ft-color);} .calendar_month .cml_row .cml_title_area .cml_title .icon_19_patch{width:15px;height:15px;vertical-align:text-bottom;margin-right:5px;} .calendar_month .cml_row .cml_title_area .cml_series{color:var(--sub-ft-color);margin-left:5px;} .calendar_month .cml_label{display:inline-block;display:inline-flex;overflow:hidden;vertical-align:middle;flex-shrink:0;gap:5px 5px;} .calendar_month .cLabel + .cLabel{margin-left:5px;} /* 라벨 */ .nLabel{display:block;width:30px;height:18px;background-size:100% auto;background-position:center;background-repeat:no-repeat;} .nLabel + .nLabel{margin-top:1px;} .nLabel_new{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_new_re.png);} .nLabel_comp{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_comp_th.png);} .nLabel_sale{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_sale.png);} .nLabel_novel{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_novel.png);} .nLabel_toon{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_toon.png);} .nLabel_comics{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_comics.png);} .nLabel_ebook{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_ebook.png);} .nLabel_photo{background-image:url(https://cdn.metoon.co.kr/mimg/nlabel_photo.png);} .cLabel{display:block;float:left;width:30px;height:17px;background-size:100% auto;background-position:center;background-repeat:no-repeat;} .cLabel_toon{background-image:url(https://cdn.metoon.co.kr/img/ic_calen_toon.png?1);} .cLabel_comics{background-image:url(https://cdn.metoon.co.kr/img/ic_calen_comics.png?1);} .cLabel_novel{background-image:url(https://cdn.metoon.co.kr/img/ic_calen_novel.png?1);} .cLabel_ebook{background-image:url(https://cdn.metoon.co.kr/img/ic_calen_ebook.png?1);} .cLabel_mo{background-image:url(https://cdn.metoon.co.kr/img/ic_calen_mp.png?1);} .cLabel_series{background-image:url(https://cdn.metoon.co.kr/img/ic_calen_seriealize.png);} .cLabel_new{background-image:url(https://cdn.metoon.co.kr/img/ic_calen_new.png?1);} .cLabel_sale{background-image:url(https://cdn.metoon.co.kr/img/ic_calen_sale.png?1);} /* 뷰페이지 한컷보기 */ .scr_control_panel{display:none;position:fixed;top:50%;right:10px;width:50px;border-radius:6px;overflow:hidden;opacity:.4;z-index:98;} .scr_control_panel a{display:block;width:100%;height:40px;line-height:40px;font-size:0;background-color:var(--sub2-ft-color);text-align:center;} .scr_control_panel a i{font-size:16px;font-weight:bold;color:var(--opt-bg-color);} .scr_control_panel a:active{background-color:rgba(2, 127, 255, 1);} .scr_control_panel a + a{margin-top:16px;} #viewScrTabEndLine{display:none;height:1px;} /* 결제창 등급제 추가작업 */ .cfp_t_wrap .cfp_table .cfpt_memgrade_area{position:relative;height:100%;} .cfpd_wrap .cfpd_contents .cfpd_list .ic_cft_memgrade{display:block;position:absolute;top:0;left:0;width:26px;height:100%;text-indent:-9999px;z-index:10;} .cfp_t_wrap .cfp_table tr .ic_cft_memgrade{display:none;} .cfp_t_wrap .cfp_table tr[class^="mg-"]:not(.mg-silver) .ic_cft_memgrade{display:block;position:absolute;top:0;left:0;width:24px;height:100%;text-indent:-9999px;z-index:10;} .cfsp_info dl[class*=mg-]:not(.mg-silver) dd .coin_details i { display: inline-block; width: 20px; height: 20px; background-size: 100% auto; background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-right: 3px; } .cfsp_info dl.mg-gold dd .coin_details i { background-image: url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s2.png); } .cfsp_info dl.mg-pleti dd .coin_details i { background-image: url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s3.png); } .cfsp_info dl.mg-dia dd .coin_details i { background-image: url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s4.png); } .cfsp_info dl.mg-vip dd .coin_details i { background-image: url(https://cdn.metoon.co.kr/mimg/ic_memgrade_s5.png); } /* 100원 알뜰결제 레이어 */ .alddl100w_layer{display:none;position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:99999998;} .alddl100w_layer .alddl100w_l_back{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, .4);z-index:1;} .alddl100w_layer .alddl100_l_contents{position:absolute;top:50%;left:0;right:0;width:88%;max-width:500px;z-index:2;margin:auto;transform:translateY(-50%);} .alddl100_l_contents .alddl100_l_close{display:block;position:absolute;top:10px;right:10px;width:5.333%;min-width:24px;max-width:30px;height:0;padding-bottom:7.5%;background:url(https://cdn.metoon.co.kr/mimg/ic_x_circle_gray.png) no-repeat center;background-size:100% auto;text-indent:-9999px;} .alddl100_l_contents img{display:block;width:100%;} .alddl100_l_contents .alddl100_l_btn{position:absolute;bottom:24.813%;left:0;right:0;width:52%;max-width:260px;margin:0 auto;} .alddl100_l_contents .alddl100_l_btn img{cursor:pointer;} /* 100원 알뜰결제 - 결제내역 */ .charge_switch_wrap .charge_switch_cont + .charge_switch_cont{margin-top:10px;} .charge_switch_wrap .charge_switch_cont .ps_switch_title{position:relative;padding-right:26px;} .charge_switch_wrap .charge_switch_cont .alddl100w_info{display:block;position:absolute;top:50%;right:0;display:block;width:18px;height:18px;background-color:#444;color:#ddd;text-align:center;line-height:18px;border-radius:50%;margin-top:-9px;text-indent:-1px;font-weight:bold;} .charge_switch_wrap .pay_service_switch{float:right;width:117px;height:25px;line-height:23px;} .charge_switch_wrap .pay_service_switch a{display:block;float:left;width:50%;height:100%;border:1px solid #ccc;font-size:12px;font-weight:bold;color:#acacac;box-sizing:border-box;text-align:center;} .charge_switch_wrap .pay_service_switch a:first-child{border-radius:3px 0 0 3px;border-right:0 none;} .charge_switch_wrap .pay_service_switch a:last-child{border-radius:0 3px 3px 0;background:#959595;color:#ffff;border-color:#959595;} .charge_switch_wrap .pay_service_switch.on a:first-child{background:#d52b2c;color:var(--main-ft-color);border-color:#d52b2c;} .charge_switch_wrap .pay_service_switch.on a:last-child{background:#fff;color:#acacac;border-color:#ccc;} .alddl10w_table{margin-top:20px;} .alddl10w_table table{width:100%;border-collapse:collapse;border-top:2px solid #404040;text-align:center;margin:0 auto;} .alddl10w_table table th, .alddl10w_table table td{height:37px;border:1px solid #ddd;} .alddl10w_table table th + th, .alddl10w_table table td + td{border-left:0 none;} .alddl10w_table table th{background:#ebf6ff;} /* 터치스크롤 프레스 버튼 */ .touchScrollerPanel{position:fixed;bottom:0;left:0;width:100%;height:15vh;z-index:4;} .tScrValue{display:none;position:fixed;top:50%;left:50%;padding:15px;border-radius:4px;background-color:rgba(0, 0, 0, .8);font-size:14px;font-weight:bold;color:var(--main-ft-color);z-index:10;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);} .tScrValue > span{display:block;text-align:center;line-height:1;} .tScrValue .autoScrSpeed{margin-top:10px;} .view_own_icon{position:fixed;bottom:55px;right:10px;z-index:10;} .view_own_icon.view_own_ebook{display:none;margin-bottom:30px;} .view_own_icon.view_own_pub{display:none;margin-bottom:6px;} .view_own_icon a{display:block;display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:60px;background:var(--opt-bg-color);border-radius:60px;border:1px solid var(--main-line-color);text-align:center;transition:border-color 0.2s;} .view_own_icon a i{display:block;width:18px;height:18px;background:url("https://cdn.metoon.co.kr/mimg/ic_view_own.svg") no-repeat center;background-size:100% auto;margin:0 auto 4px;} .view_own_icon a span{padding-bottom:4px;font-size:12px;color:var(--main-ft-color);letter-spacing:-0.05em;} /* 홈 추가 레이어 */ .addhome_layer{position:fixed;bottom:0;left:0;right:0;width:100%;margin:0 auto;-webkit-transform:translateY(54px);transform:translateY(54px);-webkit-transition:transform .3s ease-in-out;transition:transform .3s ease-in-out;z-index:1999;will-change:transform;} .addhome_layer.active{-webkit-transform:translateY(0);transform:translateY(0);box-shadow:-2px 0 5px rgba(0, 0, 0, .15);} .addhome_layer .addhome_area{display:block;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;height:52px;line-height:52px;border-top:1px solid #ddd;padding:0 15px;background-color:#FFFFFF;font-size:0;} .addhome_layer .addhome_area img{width:34px;vertical-align:middle;} .addhome_layer .addhome_area span{margin-left:8px;font-size:14px;color:#2ba9e4;line-height:1;vertical-align:middle;} .addhome_layer .addhome_area span em{color:var(--bg-fc-color);} .addhome_layer .addhome_close{display:block;position:absolute;top:0;right:0;width:40px;height:100%;text-indent:-9999px;font-size:0;} .addhome_layer .addhome_close:before, .addhome_layer .addhome_close:after{content:"";display:block;position:absolute;top:50%;left:50%;width:17px;height:1px;background:#000;-webkit-transform:rotate(45deg);transform:rotate(45deg);margin:-1px 0 0 -9px;} .addhome_layer .addhome_close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} /* 성인웹툰기획전 20200414 */ .event_adult_wt{position:relative;padding:88.024% 0 22px;background:url("https://cdn.metoon.co.kr/mimg/event_adult_wt_bg_m.jpg") no-repeat center top, #5bb7e8;background-size:100% auto;} .eawt_img_area img{display:block;max-width:100%;} .event_awt_notice{padding:20px;background:#171414;font-size:12px;color:#5bb7e8;line-height:1.4;margin-top:35px;} .event_awt_notice .title img{display:block;width:95px;} .event_awt_notice ul{margin-top:15px;} .event_awt_notice li{position:relative;padding-left:8px;} .event_awt_notice li:before{content:"-";display:inline-block;position:absolute;top:0;left:0;} .event_awt_notice li + li{margin-top:6px;} /* 작품 view - 성인인증 유도배너 */ .view_adult_floatmd{position:fixed;bottom:55px;right:-200%;width:90%;max-width:320px;background:#fff;border:4px solid #d21a1b;border-radius:16px;text-align:center;z-index:100;transform:translateX(50%);-webkit-transition:right .4s ease-in-out;transition:right .4s ease-in-out;} .view_adult_floatmd.vadf-shadow{box-shadow:0 0 17px rgba(210, 26, 27, .7);} .view_adult_floatmd.active{right:50%;} .view_adult_floatmd .vadfbnr_lk{display:block;position:relative;padding:10px 15px;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:1;} .view_adult_floatmd .vadfbnr_lk > img{display:block;width:100%;max-width:274px;margin:0 auto;} .view_adult_floatmd .vadfbnr_close{position:absolute;top:-12px;right:-12px;display:block;width:27px;height:27px;background:url("https://cdn.metoon.co.kr/img/ic_view_adult_md_x.png") no-repeat center;background-size:100%;text-indent:-9999px;overflow:hidden;z-index:10;} .view_adult_floatmd .vamd_btn_group{display:inline-block;margin-top:16px;} .view_adult_floatmd .vamd_btn_group span, .view_adult_floatmd .vamd_btn_group i{display:inline-block;height:28px;line-height:28px;background:#d21a1b;font-size:13px;font-weight:bold;color:var(--main-ft-color);border-radius:14px;vertical-align:middle;cursor:pointer;} .view_adult_floatmd .vamd_btn_group span{padding:0 14px;} .view_adult_floatmd .vamd_btn_group i{width:28px;font-weight:800;text-indent:2px;margin-left:4px;} /* 뷰페이지 헤더 - 15세 성인 */ .viewhd_no_adult19{position:relative;padding:0 10px;background:var(--sub-bg-color);border-top:1px solid var(--main-line-color);} .viewhd_no_adult19 a{display:block;max-width:1200px;height:50px;line-height:50px;font-size:0;color:var(--sub2-ft-color);margin:0 auto;} .viewhd_no_adult19 a > img{display:inline-block;width:40px;vertical-align:middle;margin-right:6px;} .viewhd_no_adult19 .text, .viewhd_no_adult19 .viewhd_coin_btn{font-size:13px;display:inline-block;vertical-align:middle;} .viewhd_no_adult19 .viewhd_coin_btn{float:right;} .viewhd_no_adult19 .viewhd_coin_btn > b{display:inline-block;height:28px;line-height:28px;border:1px solid var(--main-ft-fc-color);vertical-align:middle;padding:0 8px;margin-top:-3px;} .viewhd_no_adult19 .ft-gr{color:#14e276;} .viewhd_no_adult19 .ft-yellow{color:#e8e817;} @media only screen and (max-width:340px){ .viewhd_no_adult19 .text{font-size:12px;} } /*15세 인증 팝업*/ .view_adult15_md_wrap{display:none;position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:9999;} .view_adult15_md_wrap:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-4px;} .view_adult15_md_wrap .md_back{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:auto;background:rgba(0, 0, 0, .5);z-index:1;} .view_adult15_md_wrap .view_adult15_md{position:relative;display:inline-block;vertical-align:middle;width:96%;max-width:365px;background:#fff;text-align:left;padding:15px 15px 20px;border-radius:4px;z-index:2;} .view_adult15_md_wrap .view_adult15_md .title{height:35px;line-height:30px;font-size:18px;font-weight:bold;color:#000;text-align:center;border-bottom:1px solid #000;} .view_adult15_md_content{padding:20px 10px 0;word-break:keep-all;text-align:center;font-size:15px;line-height:1.4;} .view_adult15_md_wrap .view_adult15_md_btn{display:block;margin:20px auto 0;width:100%;height:38px;line-height:38px;border:0 none; border-bottom:2px solid #7d7d7d;background:#222;border-radius:4px;font-size:15px;color:var(--main-ft-color);text-align:center;} .view_adult15_md .view_adult15_md_close{position:absolute;bottom:-37px;right:10px;} .view_adult15_md .view_adult15_md_close .close_btn{padding:7px 10px;border-radius:4px;font-size:14px;color:var(--main-ft-color);border:0 none;background:#2a94e0;} .no-scrollable{position:relative;overflow:hidden;} /* 동영상 오픈서비스 코인리워드 팝업 */ .modal_type1_wrap{position:fixed;top:0;left:0;width:100%;height:100%;color:#141414;text-align:center;z-index:10000001;} .modal_type1_wrap:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-left:-4px;} .modal_type1_wrap .md_back{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, .7);z-index:1;} .modal_type1_wrap .modal_type1{position:relative;display:inline-block;max-width:390px;width:calc(100% - 10px);background:#fff;border-radius:4px;vertical-align:middle;margin-top:-40px;z-index:10;-webkit-overflow-scrolling:touch;} .modal_type1 p.title{width:210px;height:31px;line-height:30px;font-size:17px;font-weight:700;color:#000;text-align:center;border-bottom:1px solid #000;margin:0 auto;} .modal_type1_wrap .md_type1_contents{font-size:15px;} .md_type1_contents [class^="vd_open_ev"] .md_type1_btn{display:block;width:100%;height:38px;line-height:38px;border:0 none;background-color:var(--bg-fc-color);border-radius:4px;font-size:15px;color:var(--main-ft-color);text-align:center;margin:20px auto 0;} .modal_type1_wrap .vd_open_ev_cong{display:block;border-radius:4px;overflow:hidden;} .modal_type1_wrap .vd_open_ev_cong img{display:block;max-width:100%;cursor:pointer;} .modal_type1_wrap .md_type1_close{position:absolute;top:100%;right:10px;margin-top:7px;} .md_type1_close .close_btn, .vd_open_ev_t2 .close_btn3d a{display:block;padding:5px 10px;border-radius:4px;font-size:14px;color:var(--main-ft-color);border:1px solid var(--sub-ft-color);background:var(--sub-ft-color);} .md_type1_contents .vd_open_ev_t1{line-height:2;} .modal_type1_wrap .vd_open_ev_hide{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip:rect(0, 0, 0, 0);} .md_type1_contents .vd_open_ev_t2{height:100%;} .vd_open_ev_t2 .inner{padding:20px 20px 15px;} .vd_open_ev_t2 .vd_opevt2_txt{margin-top:18px;} .vd_opevt2_txt p{font-size:18px;font-weight:bold;} .vd_opevt2_txt span.red{color:#fb1b1b;} .vd_opevt2_txt .ft-small{font-size:14px;font-weight:400;} .vd_opevt2_txt .ic_plus{position:relative;display:block;width:14px;height:14px;margin:2px auto;} .vd_opevt2_txt .ic_plus:before, .vd_opevt2_txt .ic_plus:after{content:"";display:block;position:absolute;background-color:#ffa3a3;} .vd_opevt2_txt .ic_plus:before{top:0;left:50%;width:3px;height:100%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);} .vd_opevt2_txt .ic_plus:after{top:50%;left:0;width:100%;height:3px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} .vd_open_ev_t2 .vd_opevt2_input{position:relative;display:inline-block;text-align:left;vertical-align:top;margin-top:20px;} .vd_opevt2_input input[type="radio"]{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip:rect(0, 0, 0, 0);} .vd_opevt2_input input[type="radio"] + label{position:relative;display:block;height:18px;line-height:18px;padding-left:20px;font-size:14px;margin-top:10px;} .vd_opevt2_input input[type="radio"] + label:nth-of-type(1){margin-top:0;} .vd_opevt2_input input[type="radio"] + label:before{content:"";display:block;position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:100%;border:1px solid #b52323;-webkit-box-siizing:border-box;box-sizing:border-box;margin-top:-7px;} .vd_opevt2_input input[type="radio"]:checked + label:before{background-color:#b52323;} .vd_open_ev_t2 .notice{width:100%;background:#dfdfdf;padding:15px 20px;border-radius:0 0 4px 4px;font-size:12px;} .vd_open_ev_t2 .noti_inner{text-align:left;} .vd_open_ev_t2 .noti_title{display:block;} .vd_open_ev_t2 .notice li{position:relative;padding-left:8px;margin-top:4px;line-height:1.4;letter-spacing:-0.03em;box-sizing:border-box;} .vd_open_ev_t2 .notice li:before{content:"-";position:absolute;top:0;left:0;} .vd_open_ev_t2 .close_btn3d{position:absolute;top:100%;left:10px;margin-top:7px;} @media only screen and (max-width:350px){ .vd_opevt2_txt p{font-size:15px;} .vd_opevt2_txt .ft-small{font-size:12px;} .vd_open_ev_t2 .vd_opevt2_input{margin-top:15px;} .vd_opevt2_input input[type="radio"] + label{margin-top:5px;} } /* 이벤트 - 0원 패스 */ .event_video_wrap{max-width:810px;margin:0 auto;} .event_video_wrap section{position:relative;} .event_video_wrap .eve_vd_sec1{background:#fff;padding-bottom:30px;} .event_video_wrap .eve_vd_sec2{background:#0d0d0d;padding:40px 20px 40px;} .event_video_wrap section h5:not(.noti_title){position:absolute;top:0;left:0;width:0;height:0;font-size:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip:rect(0, 0, 0, 0);z-index:-1;} .event_video_wrap section img{display:block;max-width:100%;margin:0 auto;} .event_video_wrap .eve_vd_sec1 p{padding:0 10px;font-size:15px;color:#d52a2b;text-align:center;line-height:1.3;letter-spacing:-0.03em;word-break:keep-all;} .event_video_wrap .eve_vd_sec1 .freeview_btn{display:block;width:189px;margin:15px auto 0;} .event_video_wrap .eve_vd_sec2 .freeview_btn{display:block;width:209px;margin:22px auto 0;} .event_video_wrap .notice{text-align:center;background:#1a1a1a;padding:30px 15px 40px;} .event_video_wrap .notice .inner_cont{display:inline-block;text-align:left;color:var(--main-ft-color);vertical-align:top;} .event_video_wrap .noti_title{display:block;padding-left:24px;font-size:20px;font-weight:bold;line-height:1.2;background:url(https://cdn.metoon.co.kr/img/ic_event_video_info.png) no-repeat 0 center;background-size:18px;} .event_video_wrap .notice ul{margin-top:16px;padding-left:5px;} .event_video_wrap .notice li{position:relative;padding-left:11px;font-size:13px;line-height:1.5;} .event_video_wrap .notice li + li{margin-top:5px;} .event_video_wrap .notice li:before{content:"-";display:block;position:absolute;top:0;left:0;} @media only screen and (min-width:650px){ .event_video_wrap .eve_vd_sec1 .freeview_btn{width:46.666%;margin-top:27px;} .event_video_wrap .eve_vd_sec2 .freeview_btn{width:51.605%;margin-top:43px;} } /* 이벤트 - 고화질 영상 즐기는 방법 */ .event_smt_gui{position:relative;width:100%;max-width:1000px;margin:0 auto;} .ev_smtg_main{position:relative;background:#fff;} .ev_smtg_main img{display:block;width:100%;margin:0 auto;} .ev_smtg_btngroup{position:absolute;bottom:23.29%;left:8%;right:8%;overflow:hidden;margin:0 auto;} .ev_smtg_btngroup a{display:block;width:47.62%;overflow:hidden;} .ev_smtg_btngroup a:first-child{float:left;} .ev_smtg_btngroup a:last-child{float:right;} .ev_smtg_contents{background:#fff;} .ev_smtg_contents img{display:block;max-width:100%;margin:0 auto;} .ev_smtg_contents .smt_gui_smtv{display:none;} #poffTop{position:absolute;top:-60px;left:0;width:100%;height:0;opacity:0;} /* 마지막 회차 팝업(버스안에서) */ .last_lalt_pop_wrap{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000000;} .layer_back{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, .7);} .last_lalt_pop{position:absolute;top:50%;left:50%;width:100%;max-width:320px;z-index:10;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);} .last_lalt_pop a{display:block;} .last_lalt_pop .ic_close{display:block;position:absolute;top:10px;right:10px;width:25px;height:25px;background:url("https://cdn.metoon.co.kr/img/ic_pop_x_circle.png") no-repeat center;background-size:100%;font-size:0;text-indent:-9999px;overflow:hidden;z-index:10;} .last_lalt_pop img{display:block;max-width:100%;margin:0 auto;cursor:pointer;} /* 내서재 영상 다운로드 관련 */ .list_data .txt_download{display:inline-block;padding:0 6px;letter-spacing:-0.03em;height:22px;line-height:20px;border:1px solid #b9b9b9;background-color:#FFFFFF;border-radius:3px;font-size:12px;text-align:center;font-style:normal;-webkit-box-sizing:border-box;box-sizing:border-box;margin:2px 5px 4px;} .list_data .txt_download i{display:inline-block;padding-left:15px;background:url("https://cdn.metoon.co.kr/img/ic_download.png") no-repeat 0 center;background-size:12px auto;color:#777;font-style:normal;} .vd_list_down_wrap{display:none;position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:999;} .vd_list_down_wrap:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-left:-4px;} .vd_list_down_wrap .close{position:absolute;top:-35px;right:0;width:28px;height:28px;border:1px solid #222;border-radius:100%;background-color:#FFFFFF;overflow:hidden;font-size:0;text-indent:-999px;} .vd_list_down_wrap .close:before, .vd_list_down_wrap .close:after{content:"";display:block;position:absolute;top:50%;left:50%;width:18px;height:2px;background-color:#222;margin-top:-1px;margin-left:-9px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .vd_list_down_wrap .close:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);} .vd_list_down_layer{position:relative;display:inline-block;width:96%;max-width:340px;max-height:460px;background:#fff;border-radius:6px;padding:7px 20px 20px;box-shadow:0 0 10px rgba(0, 0, 0, .15);text-align:left;vertical-align:middle;} .vd_list_down_layer .title{height:45px;line-height:44px;border-bottom:1px solid #444;font-size:16px;color:#000;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;box-sizing:border-box;} .vd_list_down_layer .vd_down_list{margin-top:15px;} .vd_list_down_layer .vd_down_list ul{max-height:276px;overflow-y:auto;-webkit-overflow-scrolling:touch;} .vd_list_down_layer .vd_down_list ul::-webkit-scrollbar{width:5px;background:#e4e4e4;} .vd_list_down_layer .vd_down_list ul::-webkit-scrollbar-thumb{background:#bfbfbf;} .vd_list_down_layer .vd_down_list li{height:46px;line-height:46px;font-size:13px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;} .vd_list_down_layer .vd_down_list li:after{content:"";display:block;clear:both;} .vd_list_down_layer .vd_down_list li > div{float:left;} .vd_list_down_layer .vd_down_list .vddl_num{width:44px;} .vd_list_down_layer .vd_down_list .vddl_title{width:calc(100% - 124px);padding:0 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .vd_list_down_layer .vd_down_list .vddl_btn{position:relative;} .vd_list_down_layer .vd_down_list .download_btn{display:block;width:80px;height:32px;line-height:30px;border:1px solid #777;text-align:center;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;} .vd_list_down_layer .vd_down_list .download_btn span{display:inline-block;padding-left:16px;background:url("https://cdn.metoon.co.kr/img/ic_download.png") no-repeat 0 center;background-size:12px auto;cursor:pointer;} /* 디테일 - 무료이용권 지급 로딩 레이어팝업 */ .gift_preload_wrap{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, .5);text-align:center;z-index:1001;} .gift_preload_wrap:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-left:-4px;} .gift_preload{position:relative;display:inline-block;margin-top:-70px;vertical-align:middle;} .gift_preload img{display:block;width:112px;margin:auto;} .gift_preload .bar_cont{position:relative;width:200px;height:12px;background-color:#f1f1f1;border-radius:4px;overflow:hidden;box-shadow:5px 5px 5px rgba(0, 0, 0, .12);margin:30px auto 15px;} .gift_preload .bar{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ea4a4a;z-index:5;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:transform 1.9s ease-out;-moz-transition:transform 1.9s ease-out;transition:transform 1.9s ease-out;} .gift_preload.loading .bar{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0);} .gift_preload p{font-size:17px;line-height:30px;padding:0 10px;background-color:rgba(0, 0, 0, .58);color:#FFF;-webkit-box-sizing:border-box;box-sizing:border-box;} /* e북 리스트 페이지 상단 메뉴 */ #container .sub_sorting_option{padding-top:0;} .eb_subgenre_cate{position:relative;width:100%;overflow:hidden;border-bottom:1px solid #ddd;} .eb_subgenre_cate_hd{position:relative;} .eb_subgenre_cate:after, .eb_subgenre_cate_hd:after{content:"";display:block;position:absolute;top:0;right:0;width:30px;height:100%;background:linear-gradient(to left, rgba(255, 255, 255, 1) 31%, rgba(255, 255, 255, .7) 57%, rgba(255, 255, 255, .3) 82%, rgba(255, 255, 255, 0) 100%);z-index:5;} #content_wrap #container .webtoon_cont .eb_subgenre_cate ul, .head_tab_menu2.eb_subgenre_cate_hd ul{width:auto;margin:0 auto;padding:0;overflow:visible;-webkit-box-lines:single;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;} .head_tab_menu2.eb_subgenre_cate_hd ul{overflow:auto;-webkit-overflow-scrolling:touch;} .eb_subgenre_cate li, .head_tab_menu2.eb_subgenre_cate_hd li{width:auto;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1;} .eb_subgenre_cate li a{position:relative;display:block;width:100%;padding:0 12px;height:42px;line-height:40px;border-bottom:2px solid #fff;font-size:13px;font-weight:normal;letter-spacing:-0.03em;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;} .head_tab_menu2.eb_subgenre_cate_hd li a{position:relative;width:100%;padding:0 12px;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;} .head_tab_menu2.eb_subgenre_cate_hd li:last-child a{z-index:10;} .eb_subgenre_cate li a.active{border-color:var(--bg-fc-color);color:var(--bg-fc-color);} .sub_sorting_option .sort_opt_container{padding:0 8px;margin-top:10px;} .sort_opt_container:after{content:"";display:block;clear:both;} .list_contents_sort{float:left;position:relative;font-size:0;} .list_contents_sort label{position:relative;display:inline-block;height:30px;line-height:30px;font-size:13px;color:#999;vertical-align:middle;} .list_contents_sort label.chkselect{color:var(--bg-fc-color);} .list_contents_sort input[type="radio"]{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip:rect(0px, 0px, 0px, 0px);opacity:0;} .list_contents_sort .bar{display:inline-block;width:1px;height:10px;background-color:#c1c1c1;margin:0 7px;vertical-align:middle;} /* 싹쓰리 이벤트 플로팅 배너 */ .text-hidden{position:absolute;top:0;left:0;width:0;height:0;clip:rect(0, 0, 0, 0);clip:rect(0px, 0px, 0px, 0px);overflow:hidden;opacity:0;} .fl_ssac3_bnr, .fl_evtp2_bnr{position:fixed;bottom:20px;right:20px;width:160px;z-index:99;-webkit-transform:translateX(400px);transform:translateX(400px);opacity:0;-webkit-transition:transform .4s ease-in-out, opacity .4s;transition:transform .4s ease-in-out, opacity .4s;} .fl_ssac3_bnr.active, .fl_evtp2_bnr.active{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;} .fl_ssac3_bnr .ssac3_x, .fl_evtp2_bnr .evtp2_x{position:absolute;top:0;right:0;display:block;width:20px;height:20px;background:url("https://cdn.metoon.co.kr/mimg/ic_flssac3_x.png") no-repeat center;background-size:100% auto;border:0 none;z-index:5;} .fl_ssac3_bnr a, .fl_evtp2_bnr a{display:block;} .fl_ssac3_bnr img, .fl_evtp2_bnr img{display:block;max-width:100%;margin:0 auto;cursor:pointer;} /* 무료이용권 본인인증 팝업 */ .free_pass_layer_wrap{position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:10001;} .free_pass_layer_wrap:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-left:-4px;} .free_pass_layer_wrap .free_pass_layer{position:relative;display:inline-block;width:96%;max-width:310px;border-radius:8px;background-color:#FFFFFF;vertical-align:middle;z-index:10;} .free_pass_layer .free_pass_noti{padding:28px 20px 24px;font-size:18px;line-height:1.5;color:#393939;letter-spacing:-0.03em;border-bottom:1px solid #eaeaea;} .free_pass_layer .free_pass_noti p + p{margin-top:12px;} .free_pass_layer .free_pass_noti em{display:block;font-size:.9em;} .free_pass_layer .cert_co5{display:inline-block;font-size:.84em;color:#ef5e82;line-height:32px;padding:0 20px;background-color:#f2f2f2;border-radius:4px;vertical-align:top;} .free_pass_layer .btn_group{padding:18px 20px;} .free_pass_layer .btn_group a{display:block;} .free_pass_layer .free_pass_layer_btn{max-width:180px;height:44px;line-height:44px;border-radius:22px;font-size:16px;font-weight:bold;color:var(--main-ft-color);background-color:#00479d;margin:0 auto;} .free_pass_layer .close_btn{position:absolute;top:100%;right:0;width:30px;height:30px;background:url("https://cdn.metoon.co.kr/mimg/ic_close_white.png") no-repeat center, #1b1b1b;background-size:14px;border-radius:100%;text-indent:-9999px;overflow:hidden;margin-top:8px;} /* 작품수정 공지 레이어팝업 */ .noti_rewk_layer_wrap{position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:1001;} .noti_rewk_layer_wrap:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-left:-4px;} .noti_rewk_layer_wrap .layer_back{background-color:rgba(0, 0, 0, .6);} .noti_rewk_layer{position:relative;display:inline-block;width:310px;border-radius:6px;overflow:hidden;vertical-align:middle;z-index:10;} .noti_rewk_layer .contents_area{padding:30px 20px;background-color:#FFFFFF;} .noti_rewk_layer .contents_area p{line-height:1.5;font-size:15px;color:#222;word-break:keep-all;} .noti_rewk_layer .noti_rewk_btn{display:block;height:42px;line-height:42px;font-size:17px;color:var(--main-ft-color);background-color:#ea5353;} /* 디테일 리스트 지금 오픈 가능 */ .detail_cont_list .cover_open_date{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, .6);z-index:20;} .detail_cont_list .cover_open_date .codate_tb{display:table;table-layout:fixed;width:100%;height:100%;} .detail_cont_list .cover_open_date .codate_tc{display:table-cell;vertical-align:middle;} .detail_cont_list .cover_open_date p{padding:42px 10px 0;background:url("https://cdn.metoon.co.kr/mimg/ic_clocktimer_wh.png") no-repeat center 0;background-size:35px auto;font-size:17px;color:var(--main-ft-color);text-align:center;} .detail_cont_list .cover_open_date .ft-org{color:#fe4b4b;} .detail_cont_list .nobel_title .ic_open_item, .adult_noimg_detail_list .nobel_title .ic_open_item, .ebook_detail_list .m_nobel_title .ic_open_item{display:inline-block;line-height:14px;padding:0 4px;background-color:#fe4b4b;font-size:10px;font-weight:bold;color:var(--main-ft-color);border-radius:3px;margin-right:3px;} .adult_noimg_detail_list .nobel_title .ic_open_item, .ebook_detail_list .m_nobel_title .ic_open_item{margin-right:0;} .adult_noimg_detail_list .nobel_title .open_date, .ebook_detail_list .m_nobel_title .open_date{display:inline-block;padding-left:16px;background:url("https://cdn.metoon.co.kr/mimg/ic_clocktimer.png") no-repeat 0 center;background-size:13px auto;font-size:13px;font-weight:400;color:#fe4b4b;margin-left:4px;} /* 회차 페이지 - 프리미엄무료 */ .premium_free{display:inline-block;font-size:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .ic_prem_free{position:relative;display:inline-block;display:inline-flex;padding:3px 5px;border:1px solid var(--main-line-color);border-radius:3px;background-color:var(--main-bg-color);color:var(--main-ft-color);font-size:11px;font-weight:500;vertical-align:baseline;cursor:inherit;line-height:1.2;} .ic_prem_free img{width:11px;flex-shrink:0;align-items:center;margin-right:4px;} .ic_prem_xtg{position:relative;display:inline-flex;align-items:center;padding:2px 5px;border:1px solid #FB3C00;border-radius:4px;background-color:#F5F5F5;font-size:12px;font-weight:500;color:#000;gap:2px 3px;} .ic_prem_xtg:has(.manintoolt){cursor:pointer;} .ic_prem_xtg img{height:1em;flex-shrink:0;} .img_box .premium_free{position:absolute;top:0;left:0;width:100%;height:100%;} .ic_prem_xtg.pos_abs{position:absolute;top:0;left:0;margin:6px;z-index:4;} .ic_prem_xtg.pos_abs.right{left:auto;right:0;} .img_box .premium_free:before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border:3px solid #1a1a1a;border-radius:6px 6px 0 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:1;} .img_box .ic_prem_free{font-size:12px;height:20px;line-height:20px;padding:0 6px;} .img_box .ic_prem_free i{padding-left:14px;background-image:url("https://cdn.metoon.co.kr/mimg/ic_info_red.png");background-size:11px auto;} .nobel_title .premium_free{height:18px;vertical-align:middle;margin-right:1px;} .nobel_title .ic_prem_free{font-size:10px;line-height:18px;padding:0 5px 0 4px;} .nobel_title .ic_prem_free i{padding-left:11px;background-image:url("https://cdn.metoon.co.kr/mimg/ic_info_red18x.png");background-size:9px auto;} /* 프리미엄 등급 뱃지 툴팁 */ .prembdg_info{position:relative;display:inline-flex;} .prembdg_q{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:16px;background-color:#B4B4B4;font-size:12px;font-weight:700;color:#FFF;line-height:1;text-shadow:0 0 3px rgba(0, 0, 0, 0.5);cursor:pointer;} .prembdg_list{display:none;position:absolute;top:100%;left:50%;width:max-content;padding:10px 12px;border:1px solid #D1D1D1;border-radius:5px;background-color:#FFFCF1;font-size:13px;font-weight:400;color:#000;transform:translateX(-50%);z-index:11;margin-top:6px;} .prembdg_list.right{left:auto;right:0;transform:translateX(0);margin-top:1px;} .prembdg_info.active .prembdg_list{display:block;} .prembdg_list:not(.right):before{content:"";display:block;position:absolute;bottom:100%;left:50%;width:12px;height:12px;border-width:1px;border-style:solid;border-color:transparent;border-left-color:#D1D1D1;border-top-color:#D1D1D1;background-color:#FFFCF1;box-sizing:border-box;transform:translateY(50%) rotate(45deg);margin-left:-6px;} .prembdg_img{min-width:44px;flex-shrink:0;} .prembdg_li_cont{display:block;} .prembdg_li_cont.paym .prembdg_img{min-width:20px;} .prembdg_img img{height:1em;} .prembdg_li_cont.paym .prembdg_img img{width:1.2em;height:1.2em;} .prembdg_li_cont ~ .prembdg_li_cont{margin-top:10px;} .prembdg_term{display:inline-block;padding-left:6px;border-left:1px solid #D1D1D1;} .prembdg_close{position:absolute;top:0;right:0;padding:1px;background-color:#2B2C36;border-radius:100%;cursor:pointer;margin:-5px -5px 0 0;} .prembdg_list.right .prembdg_close{right:auto;left:0;margin-left:-5px;} .prembdg_close img{width:14px;height:14px;cursor:inherit;} .prembdg_title{display:block;font-weight:500;margin-bottom:6px;} .prembdg_btn, .side_menu_new .prembdg_btn{display:block;max-width:90px;padding:4px 8px;border-radius:4px;background-color:var(--bg-fc-color);color:#FFF;line-height:1.2;text-align:center;box-sizing:border-box;margin:7px auto 0;} /* 세일 프로모션 이벤트 - 리스트 */ #ev_tmpsr_wrap{background-color:#FFFFFF;overflow:hidden;} .ev_tmpsr_artc{max-width:1000px;letter-spacing:-0.03em;margin:0 auto;} .ev_tmpsr_artc .inner{display:inline-block;text-align:left;vertical-align:top;} .ev_tmpsr_artc .title_group{position:relative;overflow:hidden;} .ev_tmpsr_artc .title_group img{display:block;max-width:100%;margin:0 auto;} .ev_tmpsr_artc .ev_notice{padding:30px 24px 34px;text-align:center;} .ev_tmpsr_artc .ev_notice .inner{display:inline-block;text-align:left;vertical-align:top;} .ev_tmpsr_artc .ev_notice p{font-size:0;font-weight:700;margin-bottom:12px;} .ev_tmpsr_artc .ev_notice .ic_info{display:inline-block;width:18px;height:18px;line-height:18px;font-size:15px;letter-spacing:0;text-align:center;border:1px solid #fff;border-radius:100%;opacity:.5;vertical-align:middle;margin-right:6px;} .ev_tmpsr_artc .ev_notice .ic_info + span{font-size:15px;vertical-align:middle;} .ev_tmpsr_artc .ev_notice li{position:relative;padding-left:10px;font-size:12px;line-height:1.5;margin-top:4px;} .ev_tmpsr_artc .ev_notice li:before{content:"-";position:absolute;top:0;left:0;} .ev_tmpsr_artc .ev_notice li:first-child{margin-top:0;} .ev_tmpsr_cont{margin:24px auto 0;} .ev_tmpsr_cont .ev_tmpsr_sec{position:relative;padding:0 4px;margin:0 auto 30px;} .ev_tmpsr_sec h5{position:relative;text-align:center;} .ev_tmpsr_sec .sec_title{position:relative;display:inline-block;padding:0 26px;background-color:#FFFFFF;font-size:19px;line-height:1.2;color:#000;text-align:center;vertical-align:top;word-break:keep-all;z-index:2;} .ev_tmpsr_contents{padding-top:10px;} .ev_tmpsr_contents:after{content:"";display:block;clear:both;} .ev_tmpsr_contents .ev_tmpsr_item{float:left;padding:7px 4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .ev_tmpsr_contents .ev_tmpsr_item:first-child{margin-left:0;} .ev_tmpsr_item a p, .ev_tmpsr_item a span{cursor:pointer;} .ev_tmpsr_item .thumb_area{position:relative;background-color:#fbfbfb;} .ev_tmpsr_item .thumb_logo{display:block;position:absolute;top:0;left:0;right:0;bottom:0;width:50px;margin:auto;} .ev_tmpsr_item .thumb_img{position:relative;height:0;padding-bottom:140%;background-repeat:no-repeat;background-position:center;background-size:cover;z-index:2;} .ev_tmpsr_item .lb_area_thumb{position:absolute;bottom:0;right:0;z-index:10;} .ev_tmpsr_item .lb_area_thumb > span{display:block;padding:0 6px;height:19px;line-height:19px;font-size:11px;text-align:center;margin-top:5px;-webkit-box-sizing:border-box;box-sizing:border-box;} .ev_tmpsr_item .lb_area_thumb .lb_thumb1{background-color:rgba(0, 0, 0, .7);color:var(--main-ft-color);} .ev_tmpsr_item .txt_area{padding-top:5px;} .ev_tmpsr_item .lb_area, .ev_tmpsr_item .con_info{font-size:0;} .ev_tmpsr_item .lb_area span{display:inline-block;height:14px;line-height:15px;border-width:1px;border-style:solid;font-size:11px;font-weight:400;padding:0 3px;border-radius:3px;vertical-align:middle;} .ev_tmpsr_item .lb_area span + span{margin-left:4px;} .ev_tmpsr_item .lb_area .lb_sale{color:#e60012;border-color:#e60012;} .ev_tmpsr_item .title{font-size:14px;color:#000;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin-top:4px;} .ev_tmpsr_item .con_info{margin-top:3px;} .ev_tmpsr_item .con_info span{display:inline-block;font-size:12px;color:#777;vertical-align:middle;} .ev_tmpsr_item .con_info span + span{margin-left:4px;} .ev_tmpsr_cont .ev_tmpsr_bnr{margin:0 auto 37px;} .ev_tmpsr_bnr img{display:block;max-width:100%;margin:0 auto;cursor:pointer;} @media only screen and (min-width:750px){ .ev_tmpsr_artc .ev_notice{padding:40px 80px 44px;} .ev_tmpsr_artc .ev_notice p{margin-bottom:24px;} .ev_tmpsr_artc .ev_notice .ic_info{width:26px;height:26px;line-height:26px;font-size:20px;margin-right:12px;} .ev_tmpsr_artc .ev_notice .ic_info + span{font-size:20px;} .ev_tmpsr_artc .ev_notice li{padding-left:12px;font-size:17px;margin-top:8px;} } @media only screen and (min-width:600px){ .ev_tmpsr_cont{margin-top:65px;} .ev_tmpsr_sec h5:before{content:"";display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background-color:#e0e0e0;} .ev_tmpsr_cont .ev_tmpsr_sec{padding:0 8px;margin-bottom:50px;} .ev_tmpsr_contents{padding-top:28px;} .ev_tmpsr_contents .ev_tmpsr_item{width:20%;padding:10px 7px;} .ev_tmpsr_cont .ev_tmpsr_bnr{margin-bottom:57px;} } @media only screen and (max-width:599px) and (min-width:360px){ .ev_tmpsr_contents .ev_tmpsr_item{width:33.333%;width:calc(100% / 3);} } @media only screen and (max-width:359px){ .ev_tmpsr_contents .ev_tmpsr_item{width:50%;} } /* 세일 프로모션 이벤트 - 썸네일 */ #ev_prmtn_wrap{overflow:hidden;} .ev_prmtn_artc{position:relative;max-width:750px;margin:0 auto;} .ev_prmtn_artc .inner{display:inline-block;text-align:left;vertical-align:top;} .ev_prmtn_artc .title_group{position:relative;overflow:hidden;} .ev_prmtn_artc .title_group img{display:block;max-width:100%;margin:0 auto;} .ev_prmtn_cont{padding:0 20px;} .ev_prmtn_item, .ev_prmtn_bnr{margin-bottom:35px;} .ev_prmtn_item a{display:block;padding:20px;background-color:#FFFFFF;border-radius:8px;overflow:hidden;} .ev_prmtn_artc a span, .ev_prmtn_artc a img{cursor:pointer;} .ev_prmtn_item .thumb_area{position:relative;background-color:#f1f1f1;} .ev_prmtn_item .thumb_logo{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:1;} .ev_prmtn_item .thumb_img{position:relative;height:0;padding-bottom:100%;background-repeat:no-repeat;background-position:center;background-size:cover;z-index:2;} .ev_prmtn_item .thumb_img:before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid #e5e5e5;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .ev_prmtn_item .icon_19_patch{position:absolute;top:8px;right:8px;width:16px;opacity:.9;z-index:10;} .ev_prmtn_item .thumb19_logo_new i{height:42%;background-size:20% auto;} .ev_prmtn_item .txt_area{position:relative;padding:15px 6px 0;letter-spacing:-0.02em;z-index:20;} .ev_prmtn_item .lb_area{position:absolute;bottom:100%;right:6px;overflow:hidden;margin-bottom:-13px;z-index:20;} .ev_prmtn_item .lb_area span{float:left;display:block;padding:0 6px;height:22px;line-height:22px;font-size:14px;font-weight:400;border:2px solid #842e15;border-radius:11px;} .ev_prmtn_item .lb_area span + span{margin-left:5px;} .ev_prmtn_item .lb_area .lb_special{background-color:#FFFFFF;color:#842e15;} .ev_prmtn_item .lb_area .lb_sale{background-color:#842e15;color:var(--main-ft-color);} .ev_prmtn_item .strk em{position:relative;font-size:.94em;font-weight:300;padding:0 2px;opacity:.85;margin-right:3px;} .ev_prmtn_item .strk .line_strk{display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background-color:#FFFFFF;} .ev_prmtn_item .title{font-size:22px;color:#1a1a1a;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} .ev_prmtn_item .con_summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.5;max-height:45px;font-size:15px;color:#777;white-space:pre-line;text-overflow:ellipsis;overflow:hidden;margin-top:8px;} .ev_prmtn_bnr img{display:block;max-width:100%;margin:0 auto;} #ev_prmtn_wrap .ev_notice{text-align:center;padding:25px 30px 35px;color:var(--main-ft-color);} #ev_prmtn_wrap .ev_notice .inner{display:inline-block;text-align:left;vertical-align:top;} #ev_prmtn_wrap .ev_notice .ic_info{display:inline-block;position:absolute;top:0;left:0;width:22px;height:22px;border:1px solid #fff;border-radius:100%;font-size:12px;/* color:var(--main-ft-color); */text-align:center;opacity:.5;} #ev_prmtn_wrap .ev_notice p{position:relative;line-height:23px;padding-left:32px;font-size:16px;margin-bottom:12px;} #ev_prmtn_wrap .ev_notice li{position:relative;font-size:13px;line-height:1.5;padding-left:12px;margin-top:4px;} #ev_prmtn_wrap .ev_notice li:first-child{margin-top:0;} #ev_prmtn_wrap .ev_notice li:before{content:"-";position:absolute;top:0;left:0;} @media only screen and (min-width:750px){ .ev_prmtn_cont{padding:0 35px;} .ev_prmtn_item, .ev_prmtn_bnr{margin-bottom:40px;} .ev_prmtn_item a{padding:40px;border-radius:18px;} .ev_prmtn_item .icon_19_patch{width:32px;} .ev_prmtn_item .thumb19_logo_new i{height:260px;background-size:auto;} .ev_prmtn_item .txt_area{padding:30px 20px 0;} .ev_prmtn_item .lb_area{right:20px;margin-bottom:-25px;} .ev_prmtn_item .lb_area span{padding:0 18px;height:42px;line-height:42px;font-size:28px;border-width:4px;border-radius:25px;} .ev_prmtn_item .lb_area span + span{margin-left:10px;} .ev_prmtn_item .strk em{font-size:.9em;padding:0 2px;margin-right:4px;} .ev_prmtn_item .title{font-size:40px;} .ev_prmtn_item .con_summary{/* height:3.1em; */max-height:76px;font-size:26px;letter-spacing:-0.6px;margin-top:17px;} #ev_prmtn_wrap .ev_notice{padding:50px 18px 64px;margin-top:90px;} #ev_prmtn_wrap .ev_notice .inner{max-width:640px;} #ev_prmtn_wrap .ev_notice .ic_info{width:42px;height:42px;font-size:32px;} #ev_prmtn_wrap .ev_notice p{line-height:42px;padding-left:58px;font-size:28px;margin-bottom:22px;} #ev_prmtn_wrap .ev_notice li{font-size:24px;padding-left:22px;margin-top:10px;} } /* 회원가입 - 알림톡 발송 내용 레이어 팝업 */ .layer_vert_center_wrap{position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:999;} .layer_vert_center_wrap:before{content:"";display:inline-block;width:1px;height:100%;vertical-align:middle;margin-left:-5px;} .layer_vert_center{position:relative;display:inline-block;text-align:left;vertical-align:middle;z-index:10;} .layer_tip_alimtok .layer_vert_center{background-color:#FFFFFF;border-radius:6px;overflow:hidden;} .layer_tip_alimtok .ly_alimtok_content{padding:20px 20px;font-size:14px;line-height:1.5;text-align:center;} .layer_tip_alimtok .ly_alimtok_content .alimtok_ttl{font-weight:700;} .layer_tip_alimtok .ly_alimtok_content .alimtok_ttl + p{margin-top:6px;} .layer_tip_alimtok .ly_alimtok_content .alimtok_ttl ~ p{color:#4a4a4a;} .layer_tip_alimtok .btn_tip_alimtok{display:block;height:40px;line-height:40px;font-size:16px;font-weight:700;color:var(--main-ft-color);text-align:center;background-color:#1a1a1a;} .my_lib_thumb19{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:url("https://cdn.metoon.co.kr/img/list19_blind_mark.png") no-repeat center, #fff;background-size:70px;} #sub_mypage .my_nobel_data .nobel_data_list1 .my_lib_thumb19, #sub_mypage .my_like_data .like_data_list1 .my_lib_thumb19{background-size:74%;} @media screen and (min-width:767px){ #container.pdb, #content_wrap.pdb{padding-bottom:30px;} .me_visual_wrap{margin-top:20px;} .me_visual .swiper-slide{width:33.333%;width:-webkit-calc(100% / 3);width:-moz-calc(100% / 3);width:calc(100% / 3);} .me_visual .swiper-slide, .me_visual .swiper-slide img{border-radius:10px;} .main_content_swipe .mcs_wrap li:not(.more){width:190px !important;margin:0 7px !important;} .main_content_swipe .mcs_wrap .more{height:330px;} .mcs_wrap .webtoon_txt{padding:7px 5px;} .mcs_wrap .webtoon_txt .title{font-size:1.154em;} .mcs_wrap .webtoon_txt .info span{font-size:13px;} .main_content_swipe .mcs1-title .title, .main-content-swiper .mcs1-title .title, #content_wrap .cont_title{font-size:18px;} .main_title_xtg{height:18px;} .main_content_swipe .mcs1-title, .main-content-swiper .mcs1-title{height:45px;line-height:45px;} .main-content-swiper .mcs1-title .mcs1-pagination li, .comp2_new_main-pagination li{font-size:13px;} .main_content_swipe .mcs_wrap .nobel_txt{font-size:1.087em;} .main_content_swipe .mcs_wrap .nobel_txt .nobel_title{margin-bottom:7px;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt{padding:7px 5px;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .title{font-size:1.154em;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt .info span{font-size:13px;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt dd.text, .mcs_wrap .webtoon_txt .text{margin-top:7px;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_imgbox .patch_box .icon_19_patch{width:18px;} .mcs_hash_cont a{font-size:15px;} #sub_info .info_cont{padding-top:25px;padding-bottom:25px;font-size:15px;} #sub_info .info_cont .title, #sub_info .info_cont p, .agree_cont_table, #sub_faq .faq_notice_box li h1, #sub_faq .faq_notice_box .notice_txt, #sub_faq .faq_qna_box li h1, #sub_info .info_cont .prev_private_list{padding-left:25px;padding-right:25px;} #sub_faq .faq_qna_box .qna_txt{padding-left:47px;background-position-x:23px;} .agree_cont_table table th, .agree_cont_table table td{padding-top:15px;padding-bottom:15px;font-size:14px;} .agree_cont_table table td{padding-left:25px;padding-right:25px;} .cfp_t_wrap .cfp_table td label{padding-left:10px;padding-right:10px;} #content_wrap #sub_mypage.zzim .cont_title h4, #content_wrap #sub_mypage.buylist .cont_title h4{font-size:17px;} #content_wrap #sub_mypage.buylist .cont_title .btn_close, #content_wrap #sub_mypage.zzim .cont_title .btn_close{width:24px;height:24px;} #content_wrap #sub_mypage.zzim .my_zzim_count, #content_wrap #sub_mypage.buylist .my_zzim_count{font-size:15px;margin-bottom:15px;} #content_wrap #sub_mypage.zzim .my_zzim_delete, #content_wrap #sub_mypage.buylist .my_zzim_delete{height:32px;line-height:30px;border-radius:20px;font-size:13px;} #sub_mypage #payment .con_box_csb, #sub_mypage .mypage_cont .title_box, #sub_mypage .mypage_cont_csb .payment_list_csb, #sub_nickname .nickname_cont_wrap .title_box, #sub_mypage .mycoin_list .list_title{font-size:15px;} #sub_mypage .mypage_cont .title_box, #sub_mypage .mypage_cont_csb .title_box_csb, #sub_nickname .nickname_cont_wrap .title_box{height:42px;line-height:40px;} #sub_mypage .mypage_cont .title_box p, #sub_mypage .mypage_cont_csb .title_box_csb p{display:inline-flex;align-items:center;} #sub_mypage .mypage_cont_csb .title_box_csb, #sub_mypage .mypage_cont.my_nobel_data .title_box p, #sub_mypage .mypage_cont.my_like_data .title_box p{font-size:16px;} #content_wrap #sub_mypage.buylist .nobel_data_list ul, #content_wrap #sub_mypage.zzim .like_data_list ul{gap:10px 0;} #view_content_wrap .view_comm_wrap1 .recomme_cont>ul>li:first-child{margin-top:25px;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .comm_box{padding-top:15px;padding-bottom:15px;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .comm_box .user_id{font-size:16px;} #view_content_wrap .view_comm_wrap1 .view_comm_box1 .comm_area p{font-size:15px;margin-bottom:14px;} #view_content_wrap .view_comm_wrap1 .recomme_cont .recomm_con_line{margin-top:0;margin-bottom:15px;} #view_content_wrap .view_comm_box .reply_btn_func{padding-top:2px;padding-bottom:2px;font-size:13px;} #popular_novel1 #popular_list1 .txt_box{left:7%;} /* 충전소 */ .coin_fill_selec .cfs_contents .cfs_box .menu_title{font-size:16px;margin-bottom:5px;} .coin_fill_selec .cfs_contents .cfs_box ~ .cfs_box .menu_title{margin-top:12px;} .coin_fill_selec .title .fill_up_btn{padding-left:12px;padding-right:12px;height:32px;line-height:28px;} .coin_fill_selec .title .fill_up_btn span{font-size:12px;} .cft_container .coin_fill_t td:first-child{width:30%;} .cft_container .coin_fill_t td, .cft_container .coin_fill_t td .pt_label .price, .cft_container .coin_fill_t td .sale_count, .coin_fill_info ul li{font-size:14px;} .cft_container .coin_fill_t td .sale_txt{font-size:12px;} /* 공개예정 */ .sub_calendar_wrap{margin-top:20px;} .cw_cont_list .cw_row ~ .cw_row{margin-top:25px;} .cw_cont_list .swiper-slide{width:150px;} .cw_cont_list .swiper-slide .cwl_dsc .cwl_title{font-size:15px;} .cw_cont_list .swiper-slide .cwl_dsc .cwl_mine{font-size:13px;} .cw_cont_list .cwl_day{font-size:16px;} .calendar_month .cmtop_container{margin-bottom:25px;} .calendar_month .calen_m_top dt{font-size:16px;} .calendar_month .calen_m_top dd p{padding-left:10px;font-size:14px;margin-top:6px;} .calendar_month .cml_row{padding:15px 15px 15px 5px;font-size:16px;} .calendar_month .cml_date, .calendar_month .cml_row .cml_title_area{font-size:1em;} .de_summ_contents .de_summ_title{font-size:18px;} .de_summ_contents .de_summary, .de_summ_contents .de_summ_btn{font-size:15px;} .de_summ_contents .de_summ_btn{padding-top:12px;padding-bottom:9px;} #sub_faq .faq_qna_box, .faq_notice_box, #sub_search .search_cont .search_cont_list .not_find, .search_result_new .not_find, #view_footer .view_footer_navbar ul{font-size:15px;} #view_footer .view_footer_navbar a{height:52px;} #view_footer .view_footer_navbar .prev_btn a span, #view_footer .view_footer_navbar .next_btn a span{line-height:52px;} #view_content_wrap_btm{padding-bottom:55px;} #popular_novel1 .swiper-container_popularlist{padding-left:45px;padding-right:45px;} #popular_novel1 .swiper-button{width:46px;} /* 회원탈퇴 */ #sub_mypage .away_cont_wrap .con_box p{font-size:1.07em;} .detail_banner_img .icon_19_patch{width:23px;margin:10px 10px 0 0;} .detail_buy_all{padding-left:30px;padding-right:30px;} .detail_buy_all .detail_buy_all2 h4, .detail_buy_all .detail_buy_all1 .de_buyall1_txt1{font-size:1.24em;} .detail_buy_all .detail_buy_all2 p, .detail_buy_all .detail_buy_all1 .de_buyall1_txt2{padding-top:6px;padding-bottom:20px;font-size:1.11em;} .detail_buy_all .detail_buy_all1 a, .detail_buy_all .detail_buy_all2 .buy_all_btn_group{margin-top:20px;} .detail_buy_all .detail_buy_all1 a, .detail_buy_all .detail_buy_all2 .buy_all_btn_group a{height:42px;line-height:41px;font-size:1.2em;} .detail_buy_all .detail_buy_all2 .buy_all_btn_group{gap:10px 20px;} .detail_buy_all .detail_buy_all2 .buy_all_btn_group a.buy_all_btn_cancel{line-height:39px;} } @media screen and (min-width:921px){ /* 뷰어 */ .view_own_icon{right:50%;margin-bottom:10px;margin-right:-442px;} } @media screen and (min-width:1200px){ .me_visual_wrap{margin-top:25px;/* margin-bottom:10px; */} .me_visual{max-width:1540px;} .me_visual .swiper-slide{width:500px;} #view_footer .view_footer_navbar li:first-child a{border-left:1px solid var(--main-line-color);} #view_footer .view_footer_navbar li:last-child a{border-right:1px solid var(--main-line-color);} .view_adult_floatmd{bottom:65px;} } @media screen and (min-width:1580px){ .me_visual_nav.prev{left:50%;margin-left:-790px;} .me_visual_nav.next{right:50%;margin-right:-790px;} } @media screen and (max-width:1199px){ .top5-slider:after{content:"";display:block;position:absolute;top:0;right:0;width:30px;height:100%;background:linear-gradient(to left, var(--main-bg-color) 20%, transparent);z-index:1;} .me_visual_nav, #sub_detail .detail_banner .detail_caption .summary br{display:none;} #sub_detail .detail_cont .detail_cont_list li{width:20%;} #content_wrap #sub_faq{margin-top:15px;} } @media screen and (max-width:1180px){ .detail_banner_img{height:0;padding-bottom:47.206%;} .detail_banner_img .detail_banner_bnr{position:absolute;top:0;left:0;width:100%;height:100%;} } @media screen and (max-width:849px){ #sub_detail .detail_cont .detail_cont_list li{width:25%;} } @media screen and (max-width:766px){ .webtoon_txt .wr_text_tag{font-size:10px;} .calendar_month .cml_row{padding-left:12px;padding-right:12px;flex-direction:column;} .calendar_month .cml_date{width:auto;padding-top:5px;padding-bottom:8px;font-size:1.2em;text-align:left;} .prembdg_list{font-size:12px;} #sub_set .cont_wrap_pd{padding-top:15px;} } @media screen and (max-width:714px){ #sub_detail .detail_cont .detail_cont_list{padding:6px;} #sub_detail .detail_cont .detail_cont_list li{padding:4px;width:33.333%;width:calc(100% / 3);} #sub_detail .detail_cont .detail_cont_list .txt_box, #sub_detail .detail_cont_list .list_btn{font-size:1em;} #sub_detail .detail_cont .detail_list_more, .vd_detail_list_area .detail_list_more{padding-bottom:15px;} #sub_set .myset_cont .btn_close{left:15px;} .fill_banner01 .cfillBnrDate{font-size:11px;font-size:2vw;} .menu_btn_box a{gap:6px 10px;} .vwr_menu_btn_txt{font-size:9px;} #popular_novel1 #popular_list1 .txt_box .txt{font-size:14px;} #content_wrap #container .webtoon_cont ul.webtoon_rect_list li a .webtoon_txt dd.info, .mcs_wrap .webtoon_txt dd.info{gap:0 5px;} } @media screen and (max-width:449px){ #sub_detail .detail_cont .detail_cont_list li{width:50%;} #view_footer .view_footer_navbar .prev_btn a span{padding-left:18px;} #view_footer .view_footer_navbar .next_btn a span{padding-right:18px;} /* #popular_novel1 #popular_list1 .txt_box .title, #popular_novel1 #popular_list1 .txt_box .txt{font-size:3.12vw;} */ #popular_novel1 #popular_list1 .txt_box .txt{font-size:13px;} .rankCrown .atc_logo{width:34px;} .rankCrown .rankCrown_num{font-size:13px;margin-top:4px;} #sub_faq .title_box ul li{width:auto;} #sub_faq .title_box ul li a{font-size:1em;} } @media screen and (max-width:375px){ #rent_tab li{width:70px;} } @media all and (max-width:350px){ #sub_detail .detail_radio{gap:6px 15px;} #sub_detail .detail_radio fieldset .contents_sort label{font-size:11px;} #sub_detail .detail_radio fieldset .contents_sort .bar{margin:0 5px;} } @media screen and (max-width:319px){ #content_wrap .webtoon_list_paging p{width:56px;} #content_wrap .webtoon_list_paging p span{width:28px;height:24px;line-height:22px;font-size:11px;} #content_wrap .webtoon_list_paging ol li{font-size:13px;margin-left:2px;margin-right:2px;} #content_wrap .webtoon_list_paging ol li a{width:24px;height:24px;line-height:22px;} #sub_faq .title_box ul li a{font-size:0.9em;font-size:11px;} }