/** header_view.php 에 공통적으로 삽입되는 아래 목록의 css 를 합침 - common.css - menu.css - footer.css - badge.css - slidemenu.css */ /* * File : common.css * SUMMARY: * 01) GLOBAL * 02) OVERLAY * 03) CONTAINER */ /* ************************************** * * PC VER * ************************************** */ /* GLOBAL */ *{padding:0; margin:0; text-decoration:none} *, *:before, *:after{box-sizing:border-box} html { font-size: 20px !important; -webkit-font-smoothing: subpixel-antialiased; -ms-font-smoothing: subpixel-antialiased } body { font-size: 1rem !important; font-family: 'Noto Sans KR' !important; margin: 0; padding: 0; -webkit-touch-callout: none; -webkit-touch-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -o-user-select: none; user-select: none; line-height: 1.05rem !important; } body { -webkit-touch-callout: none; -webkit-touch-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -o-user-select: none; user-select: none; } html, body, iframe, h1, h2, h3, h4, h5, h6 { margin: 0px; padding: 0px; border: 0px; font: inherit; vertical-align: baseline; font-weight: normal; -webkit-font-smoothing: subpixel-antialiased; font-smoothing: antialiased; font-smooth: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: subpixel-antialiased !important; font-smoothing: subpixel-antialiased !important; font-smooth: subpixel-antialiased; color: #666; line-height: 1.3em; } ul{margin:0px; padding:0px; list-style:none;} li, p{margin:0px; padding:0px; list-style:none;} p{color:#666} a{text-decoration:none; color:#666; cursor: pointer;} img { max-width: 100%; display: block; -ms-interpolation-mode: bicubic; } input, button, textarea, select{font-family:'Noto Sans KR' !important; outline:none !important; border:none; -webkit-appearance:none; border-radius:0} input[type="radio"]{appearance:none; -webkit-appearance:none; -ms-appearance:none; display:none;} button{outline:none !important; border:none; padding:0; margin:0; cursor: pointer;} picture, source{line-height:0; display:block} .picture_image{ height: 250px; } .picture_image img{ height: 100%; width: 100%; object-fit: cover; } @media (max-width:980px){ .picture_image{ height: 150px; } } table{width:100%; border-collapse:collapse; border-spacing:0; padding:0} table th{color:#333} table th, td{border-bottom: 1px solid #ddd} caption{visibility:hidden; overflow:hidden; width:1px; height:1px; font-size:0; line-height:0} article, aside, figure, footer, header, hgroup, menu, nav, section{display:block;} fieldset{border:0; padding:0; margin:0; outline:none;} content h1, h2, h3, h4, h5, h6{font-weight:600; padding-bottom:12px;} .clearfix:before, .clearfix:after{content:""; visibility:hidden; display:block; height:0; clear:both;} .clearfix{zoom:1;} /*배너영역*/ .banner {max-width:1024px; margin:20px auto 0; overflow:hidden; border-bottom:1px solid #ddd} .banner ul { display:-ms-grid; display: grid; -ms-grid-columns: (1fr)[4]; grid-template-columns:repeat(4, 1fr); grid-gap: 5px; margin-bottom: 5px; } .banner ul li:first-child {margin-left:0px;} .banner ul li {margin-bottom: 22px; float:left; margin-left:1.4%; display:flex; align-items:center; } .banner > ul > li > img { width: 245px; border-radius: 5px; border: 1px solid rgb(219 219 219); } @media (max-width:450px){ .banner {margin:5px auto 0; overflow:hidden; border-bottom:1px solid #ddd} .banner ul { display:-ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns:repeat(2, 1fr); grid-gap: 5px; margin-bottom: 5px; } .banner ul li {width:100%; margin-left:0px; float: none; margin-bottom:0px;} .banner > ul > li > img { width: 245px; border-radius: 5px; border: 1px solid rgb(219 219 219); } } /*19금뱃지*/ span.icon_19_red{display:inline-block; vertical-align:middle; width:15px; height:15px; background: url(../image/icon_weeklist_19_red.png); position:absolute; top:5px; right:5px; background-size: 15px; z-index: 1;} /* OVERLAY */ .dim{display:none; position: fixed; left:0; top:0; z-index:100; width:100%; height:100%; background:rgba(0,0,0,0.5);} .dim.white {background-color: rgb(255, 255, 255); filter:alpha(opacity=100); opacity:1;} /* CONTAINER */ #subContainer{width:100%; margin:0; padding:0; box-sizing:border-box;} #subContent{max-width:1024px; margin:30px auto 0; box-sizing:border-box; padding:0 10px} #subContent.no-margin-top{margin-top: 0 !important;} /* 완결 */ #subContent.mt01{margin-top:2px} /* ************************************** * * TABLET PC VER * ************************************** */ @media (min-width:768px) and (max-width:1023px){ html{font-size:18px !important} body{font-size:1rem !important; margin:0; padding:0} /* CONTAINER */ #subContent{width:100%; margin:0 auto; padding:0} /* 완결 */ #subContent.mt01{margin-top:-22px} } /* ************************************** * * MOBILE VER * ************************************** */ @media (min-width:0) and (max-width:767px){ html{font-size:16px !important; background:#e8ecf0} body{font-size:1rem !important; margin:0; padding:0} /* CONTAINER */ #subContent{width:100%; margin:0 auto; padding:0} /* 완결 */ #subContent.mt01{margin-top:-5px} } /* 로딩바 */ .loadingArea { width: 100%; position: relative; } .loadingArea > img{ margin: 0 auto; height:60px; } .loadingArea.h1 {padding: 5vh 0;} .loadingArea.h2 {padding: 10vh 0;} .loadingArea.h3 {padding: 15vh 0;} .loadingArea.h4 {padding: 20vh 0;} .loadingArea.h5 {padding: 25vh 0;} .loadingArea.h6 {padding: 30vh 0;} .loadingArea.h7 {padding: 35vh 0;} .loadingArea.h8 {padding: 40vh 0;} .loadingArea.h9 {padding: 45vh 0;} .loadingArea.h10 {padding: 50vh 0;} .alert_layer, .alert_layer2{position:fixed; display:none; z-index:1000; overflow-y:auto; max-height:80vh; max-width:100vw;} .alert_layer2::-webkit-scrollbar, .alert_layer::-webkit-scrollbar {display:none!important;} .alert_layer2::-moz-scrollbar, .alert_layer::-moz-scrollbar {display:none!important;} .alert_layer2::-o-scrollbar, .alert_layer::-o-scrollbar {display:none!important;} .alert_layer2:-ms-scrollbar, .alert_layer:-ms-scrollbar{display:none!important;} #toast { background: rgba(0, 0, 0, 0.8); color: #fff; font-weight: 500; font-size: 15px; letter-spacing: -0.2px; border-radius: 7px; position: fixed; padding: 0 10px; left: 50%; top: 70%; min-width: 200px; max-width: 90vw; height: 60px; line-height: 60px; text-align: center; z-index: 201; transform: translate(-50%, -50%); box-sizing: border-box; white-space: nowrap; display: none; } .frontAboveAll {z-index: 99999999 !important;} /* 페이징 */ .paging{width:100%; margin:20px auto; text-align:center;} .paging a.page_num{width:30px; height:30px; display:inline-flex; justify-content:center; align-items:center; vertical-align:top; color:#666; font-size:14px; text-align:center; -webkit-box-sizing:border-box; box-sizing:border-box; margin:0 2px; cursor:pointer; padding-bottom:2px;} .paging a.page_num.on{background:#fff; color:#e63740; border:1px solid #ddd} .paging a.page_num > span{border-style:solid; border-color:#ddd; width:10px; height:10px; border-radius:0; background:none; display:inline-block; margin:0 auto; margin-top:1px} .paging a.page_num > span.arrow_left{transform:rotate(45deg); border-width:0 0 2px 2px;} .paging a.page_num > span.arrow_right{transform:rotate(-45deg); border-width:0 2px 2px 0;} /* * File : menu.css * SUMMARY: * 01) HEADER * 02) SLIDMENU */ /* ************************************** * * PC VER * ************************************** */ /* HEADER */ html{font-size:20px !important} body{font-size:1rem !important; margin:0; padding:0} #header{overflow:hidden; width:100%; background:#fff} #header .gnb{height:3rem; padding:0 0 0 10px; box-sizing:border-box; width:1024px; margin:0 auto; position:relative;} #header .gnb a,#header .lnb a{color:#000} #header .gnb h1{float:left; padding:0 0 0 0;} #header .gnb h1 a{display:block; width:106px; height:3rem; background: url(../image/renewal_logo.png) no-repeat left center; background-size:100%; color:transparent} #header .gnb .btn_select_mode{display:inline-block; margin-left:.75rem; position:absolute; top:.95rem; left:5.45rem} #header .gnb .btn_select_mode a.switch_19mode{display:block; width:51px; height:22px; background: url(../image/switch_19off.png) no-repeat center; background-size:100%} #header .gnb .btn_select_mode a.switch_19modeOff{display:block; width:51px; height:22px; background: url(../image/switch_nonadult_off.png) no-repeat center; background-size:100%} #header .gnb .btn_select_mode a.switch_19mode.active{display:block; width:51px; height:22px; background: url(../image/switch_19on.png) no-repeat center; background-size:100%} #header .gnb > ul{float:right} #header .gnb > ul{display:block; position:relative; top:56%; transform:translateY(-50%)} #header .gnb > ul li,#header .lnb ul li{float:left;} #header .gnb > ul li a{ display:block; padding:0 10px; text-align:center; font-size:13px} #header .gnb > ul li a .icon_charge,#header .gnb > ul li a .icon_dessert,#header .gnb > ul li a .icon_library,#header .gnb > ul li a .icon_gift,#header .gnb > ul li a .icon_search,#header .gnb > ul li a .icon_service_menu{height:20px; display:block; position:relative; box-sizing:border-box} #header .gnb > ul li a .icon_charge > img{width:18px; margin:0 auto} #header .gnb > ul li a .icon_dessert > img{width:19px; margin:0 auto} #header .gnb > ul li a .icon_library > img{width:17px; margin:0 auto} #header .gnb > ul li a .icon_gift > img{width:19px; margin:0 auto} #header .gnb > ul li a .icon_search > img{width:19px; margin:0 auto} #header .gnb > ul li a .icon_service_menu > img{width:19px; margin:0 auto} #header .gnb > ul li a .icon_gift .num_gift{position:absolute; top:-3px; right:-2px;} #header .gnb > ul li a img{image-rendering:-webkit-optimize-contrast;} #header .gnb .nav_gnb_name{vertical-align:top} .num_gift{font-size:10px; color:#fff; background:#e63740; height:15px; line-height:15px; border-radius:50px; display:inline-block; text-align:center; padding:0px 3px; min-width:15px; box-sizing:border-box} #header .lnb{text-align:center; width:100%; margin:0 auto; position:relative; background:url(../image/nav_line.gif) left top repeat-x;} #header .lnb h2{display:none} #header .lnb nav ul{overflow:hidden; display:flex; width:100%; justify-content:space-between; flex-wrap:wrap;} #header .lnb nav ul li{flex-grow:1; position:relative} #header .lnb nav ul li > a{font-size:.85rem; display:block; height:2.4rem;} #header .lnb nav.m_nav{background:url(../image/nav_line.gif) left bottom repeat-x;} #header .lnb nav.m_nav > ul{width:1024px; height:2.4rem; line-height:2.3rem; margin:0 auto} #header .lnb nav.m_nav > ul li.active > a{color:#e63740} #header .lnb nav.s_nav{background:url(../image/nav_line.gif) left bottom repeat-x #f6f6f6; display: none;} #header .lnb nav.s_nav > ul{width:1004px; height:2.4rem; line-height:2.3rem; margin:0 auto} #header .lnb nav.s_nav > ul li{position:relative}/*200525추가*/ #header .lnb nav.s_nav > ul li.active > a{color:#e63740; border-bottom:2px solid #e63740} #header .lnb nav.s_nav > ul li.today:after{content:''; display:block; position:absolute; top:0.4rem; right:50%; transform:translateX(-50%); width:5px; height:5px; background:#e63740; border-radius:50%; margin-right:-13px;}/*200525추가*/ /*200525 완결_연도별*/ #header .lnb nav.d_nav{background:#fff; display:none; overflow:hidden; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:center; min-width:100%; max-width:100%;} #header .lnb nav.d_nav > ul{max-width:1004px; width:100%; margin: 0 auto;} #header .lnb nav.d_nav > ul li{font-size:.8rem; display:flex; align-items:center; height:2.5rem; color:#000; flex-grow:1; justify-content:center; box-sizing:border-box; padding-top:0;} #header .lnb nav.d_nav > ul li input{width:16px; height:16px; display:none; margin:0 5px 0 0; padding:0;} #header .lnb nav.d_nav > ul li input + label { display: inline-block; background-image: url(../image/img_select_new.png); background-repeat: no-repeat; background-size: 200px; background-position: -5px -64px; text-indent: 19px; color: #000; height: 20px; line-height: 19px; text-indent: 22px; cursor: pointer; } #header .lnb nav.d_nav > ul li input:checked + label{background-repeat:no-repeat; background-image: url(../image/img_select_new.png); background-size:200px; background-position:-5px -86px;} @media (max-width:320px){ #header .lnb nav.d_nav > ul li{font-size:11px;} } #header .sub_topmenu{display:none} #header .sub_topmenu > a.nav_sub_link.pay_wh{width:50px;} /* ************************************** * * TABLET PC VER * ************************************** */ @media (min-width:768px) and (max-width:1023px){ html{font-size:18px !important} body{font-size:1rem !important; margin:0; padding:0} #header .gnb,#header .lnb{width:100%; display:block} #header .gnb .btn_select_mode{left:6rem} #header .lnb nav.m_nav > ul{width:100%} #header .lnb nav.s_nav > ul{width:100%} #header .sub_topmenu{height:45px; line-height:45px; width:100%; margin:0 auto; padding:0 10px; position:relative; overflow:hidden; border-bottom:1px solid #ddd; display:block} #header .sub_topmenu .fixed {position: fixed;top: 0;left: 0;height: 45px;line-height: 45px;width: 100%;padding: 0 10px;overflow: hidden;border-bottom: 1px #ddd solid;background-color: #fff;z-index: 3;} #header .sub_topmenu a.nav_sub_link {display: inline-block;height: 100%;width: calc(100% - 165px);} #header .sub_topmenu a.nav_sub_link .nav_sub_tit{display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:500; color:#e63740; width: calc(100% - 30px);} #header .sub_topmenu a.nav_sub_link > img{height:20px; display:inline-block; vertical-align:top; margin-right:2px; transform:translateY(60%)} #header .sub_topmenu ul{float:right} #header .sub_topmenu ul > li{display:inline-block; vertical-align:top; position:relative; float:left;} #header .sub_topmenu ul > li > a{display:block; padding:11px} #header .sub_topmenu ul > li > a .icon_gift .num_gift{font-size:10px; color:#fff; background:#e63740; height:14px; line-height:14px; border-radius:20px; display:inline-block; text-align:center; padding:0px 3px; min-width:16px; position:absolute; top:7px; right:1px; box-sizing:border-box;} #header .sub_topmenu ul > li img{height:20px} } /* ************************************** * * MOBILE VER * ************************************** */ @media (min-width:0) and (max-width:767px){ html{font-size:16px !important; background:#e8ecf0} body{font-size:1rem !important; margin:0; padding:0} #header .gnb{height:3rem; padding:0 10px; width:100%; margin:0 auto; overflow:hidden; position:relative; box-sizing:border-box} #header .gnb h1{float:left; padding:0 0 0 0;} #header .gnb h1 a{width:80px; height:15px; margin-top:18px} #header .gnb > ul{top:55%} #header .gnb > ul li + li{margin-left:8px} #header .gnb > ul li a{ display:block; padding:0; text-align:center; font-size:14px} #header .gnb > ul li a .icon_charge > img{width:16px; padding-top:2px} #header .gnb > ul li a .icon_dessert > img{width:18px} #header .gnb > ul li a .icon_library > img{width:14px; padding-top:2px} #header .gnb > ul li a .icon_gift > img{width:15px; padding-top:2px} #header .gnb > ul li a .icon_search > img{width:18px} #header .gnb > ul li a .icon_menu_service > img{width:18px} #header .gnb > ul li a img{image-rendering:auto} #header .gnb .nav_gnb_name{font-size:11px} #header .gnb .btn_select_mode{float:left; display:inline-block; margin-left:.75rem} @media (max-width:320px){ #header .gnb > ul li:first-child{display:none} } #header .lnb{width:100%; height:auto; margin:0 auto; overflow:hidden; position:relative; box-sizing:border-box} #header .lnb nav.m_nav{background:url(../image/nav_line.gif) left bottom repeat-x; padding:2px 4px 2px} #header .lnb nav.m_nav > ul{width:100%; height:100%; line-height:normal; margin:0 auto} #header .lnb nav.m_nav > ul > li{flex-grow:1; width:20%; height:1.9375rem; line-height:1.75rem; margin:2px 2px} #header .lnb nav.m_nav > ul > li > a{font-size:.8125rem; letter-spacing:-0.4px; display:block; border:1px solid #ddd; border-radius:3px; height: 100%;} #header .lnb nav.m_nav > ul > li.active > a{color:#e63740; border:1px solid #e63740;} #header .lnb nav.m_nav.adult_ver > ul > li{width:17%} #header .lnb nav.s_nav > ul{width:100%; height:100%; line-height:normal; margin:0 auto; height:2.4rem; line-height:2.3rem;} #header .lnb nav.s_nav > ul > li{flex-grow:1;} #header .lnb nav.d_nav>ul li{align-items: flex-end; margin-top: -8px;} #header .sub_topmenu{height:45px; line-height:43px; width:100%; margin:0 auto; padding:0 10px; position:relative; overflow:hidden; border-bottom:1px solid #ddd; display:block} #header .sub_topmenu .fixed {position: fixed;top: 0;left: 0;height: 45px;line-height: 43px;width: 100%;padding: 0 10px;overflow: hidden;border-bottom: 1px #ddd solid;background-color: #fff;z-index: 3;} #header .sub_topmenu a.nav_sub_link{display:inline-block; height:100%; width:calc(100% - 123px)}/*201022*/ #header .sub_topmenu a.nav_sub_link .nav_sub_tit{display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:500; color:#e63740; width: calc(100% - 30px);} #header .sub_topmenu a.nav_sub_link > img{height:20px; display:inline-block; vertical-align:top; margin-right:2px; transform:translateY(60%)} #header .sub_topmenu ul{float:right} #header .sub_topmenu ul > li{display:inline-block; vertical-align:top; position:relative; float:left;} #header .sub_topmenu ul > li > a{display:block; padding:11px 6px} #header .sub_topmenu ul > li > a .icon_gift .num_gift{font-size:10px; color:#fff; background:#e63740; height:14px; line-height:14px; border-radius:20px; display:inline-block; text-align:center; padding:0px 3px; min-width:16px; position:absolute; top:6px; right:1px; box-sizing:border-box;} #header .sub_topmenu ul > li img{height:20px} } /* * File : footer.css * SUMMARY: * 01) FOOTER */ /* ************************************** * * PC VER * ************************************** */ /* FOOTER */ html{font-size:20px !important} body{font-size:1rem !important; margin:0; padding:0} #footer .footer_wp{width:100%; margin:0 auto; bottom:0; background:#eaecee; overflow:hidden; background:#eaecee url(../image/footer_line.gif) left 2.5rem repeat-x} #footer .footer_wp .footer_inner{max-width:1024px; margin:0 auto; font-size:.625rem; line-height:.95rem; position:relative; overflow:hidden; color:#7c8084; padding:0 15px; box-sizing:border-box} #footer .footer_wp .footer_inner .footer_menu ul{display:inline-block; height:2.5rem; line-height:2.5rem} #footer .footer_wp .footer_inner .footer_menu ul > li{display:inline-block} #footer .footer_wp .footer_inner .footer_menu ul > li:after{content:''; width:3px; height:3px; display:inline-block; border-radius:50%; background:#959fb2; margin:0 5px 0 8px; margin-bottom:2px;} #footer .footer_wp .footer_inner .footer_menu ul > li:last-child:after{content:''; display:none; margin:0;} #footer .footer_wp .footer_inner .footer_menu ul > li > a{color:#000; font-weight:500; display:inline-block} #footer .footer_wp .footer_inner .copyright{padding:30px 0; float:right; width:80%} #footer .footer_wp .footer_inner .copyright > br:first-child{display:none} #footer .footer_wp .footer_inner .copyright .e_mail{margin-left:8px; color:#000} #footer .footer_wp .footer_inner .logo_topco{position:absolute; left:15px; top:4.25rem} #footer .footer_wp .footer_inner .site_wp{margin:18px auto 0} #footer .footer_wp .footer_inner .site_wp ul{overflow: hidden; display: inline-block;} #footer .footer_wp .footer_inner .site_wp ul > li{display:inline-block; border-radius:3px; text-indent:22px; padding:4px 10px; border:1px solid #bcc0c6; margin-top:4px; image-rendering:-webkit-optimize-contrast;}/*수정*/ #footer .footer_wp .footer_inner .site_wp ul > li > a,.footer_wp .footer_inner .site_wp ul > li > span{color:#6d7681; display:block;} #footer .footer_wp .footer_inner .site_wp ul > li.site_01{background:url(../image/logo_kisa.png) no-repeat 6px center; background-size:22px; text-indent:22px;} #footer .footer_wp .footer_inner .site_wp ul > li.site_02{background:url(../image/logo_ok_copyright_new.png) no-repeat 5px 5px; background-size:28px; text-indent:27px;}/*수정*/ #footer .footer_wp .footer_inner .site_wp ul > li.site_03{background:url(../image/logo_clean.png) no-repeat 6px center; background-size:22px} #footer .footer_wp .footer_inner .site_wp ul > li.site_04{background:url(../image/logo_innobiz.png) no-repeat 6px center; background-size:44px; text-indent:42px} #footer .footer_wp .footer_inner .site_wp ul > li.site_05{background:url(../image/logo_happy.png) no-repeat 8px center; background-size:21px} #footer .footer_wp .footer_inner .site_wp ul > li.site_06{background:url(../image/logo_news.png) no-repeat 12px center; background-size:15px; position:absolute; right:16px; top:5px; border:none; padding-right:0} #footer .footer_wp .footer_inner .site_wp ul > li.site_07{background:url(../image/logo_ok_copyright_new.png) no-repeat 4px 5px; background-size: 29px; text-indent: 26px;} #footer .footer_wp .footer_inner .copyright .btn_sns{margin:0 auto; position:absolute; top:75px; right:12px} #footer .footer_wp .footer_inner .copyright .btn_sns > a{line-height:35px; padding:3px; letter-spacing:-0.2px; color:#6d7681; display: inline-block; font-size:0} #footer .footer_wp .footer_inner .copyright .btn_sns .icon_sns{width:44px; height:44px; display:inline-block; vertical-align:middle} #footer .footer_wp .footer_inner .copyright .btn_sns .icon_sns.youtube{background:url(../image/icon_sns_youtube.png) center no-repeat; background-size:100%} #footer .footer_wp .footer_inner .copyright .btn_sns .icon_sns.facebook{background:url(../image/icon_sns_facebook.png) center no-repeat; background-size:100%} #footer .footer_wp .footer_inner .copyright .btn_sns .icon_sns.naverblog{background:url(../image/icon_sns_blog.png) center no-repeat; background-size:100%} /* APP */ .index_plusapp_inner{width:100%; background:#fff;} .index_plusapp_inner img{display:block; width:100%; margin:0 auto;} .index_plusapp_inner .plusapp_link{display:block; max-width:1004px; margin:0 auto; position:relative; width:100%} .index_plusapp_inner .plusapp_link .plusapp_mo{display:none} .index_plusapp_inner .plusapp_link .plusapp_pc{max-width:1004px; display:block; width:100%} .index_plusapp_inner .plusapp_link .plusapp_pc .link_area{position:absolute; left:24px; top:59%; width:60%; max-width:620px} .index_plusapp_inner .plusapp_link .plusapp_pc .link_area > a{display:inline-block; position:relative; top:0%; overflow:hidden; cursor:pointer} .index_plusapp_inner .plusapp_link .plusapp_pc .link_area .onestore{width:38.5%; padding-bottom:13%; float:left} .index_plusapp_inner .plusapp_link .plusapp_pc .link_area .appstore{width:38.5%; padding-bottom:13%; float:left; margin-left:5px} /* ************************************** * * TABLET PC VER * ************************************** */ @media (min-width:768px) and (max-width:1023px){ html{font-size:18px !important} body{font-size:1rem !important; margin:0; padding:0} /* FOOTER */ #footer .footer_wp{width:100%; box-sizing:border-box} #footer .footer_wp .footer_inner{width:100%;} #footer .footer_wp .footer_inner .copyright{width:75%} #footer .footer_wp .footer_inner .copyright .btn_sns{margin:8px auto 0; position:static} #footer .footer_wp .footer_inner .copyright .btn_sns .icon_sns{width:35px; height:35px} /* APP */ .index_plusapp_inner img{display:block; width:100%; margin:0 auto; padding:0 10px} .index_plusapp_inner .plusapp_link{width:100%; max-width:100%} } /* ************************************** * * MOBILE VER * ************************************** */ @media (min-width:0) and (max-width:767px){ html{font-size:16px !important; background:#e8ecf0} body{font-size:1rem !important; margin:0; padding:0} /* FOOTER */ #footer .footer_wp{width:100%; margin:0} #footer .footer_wp .footer_inner{width:100%; letter-spacing:-0.3px; font-size:11px; line-height:16px} #footer .footer_wp .footer_inner .footer_menu{text-align:center; font-size:11px} @media (max-width:320px){ #footer .footer_wp .footer_inner .footer_menu ul{display:inline-block; height:2.5rem; line-height:1.1rem; padding-top:3px; box-sizing:border-box} } #footer .footer_wp .footer_inner .copyright{padding:15px 0 20px; float:none; width:100%; text-align:center} #footer .footer_wp .footer_inner .copyright > br:first-child{display:block} #footer .footer_wp .footer_inner .copyright .copy_txt{display:none} #footer .footer_wp .footer_inner .copyright .btn_sns{margin:0 auto; position:static} #footer .footer_wp .footer_inner .copyright .btn_sns > a{font-size:11px} #footer .footer_wp .footer_inner .copyright .btn_sns .icon_sns{width:19px; height:19px; display:inline-block; vertical-align:middle; margin-right:4px} #footer .footer_wp .footer_inner .copyright .btn_sns .icon_sns.youtube{background:url(../image/icon_sns.png) 0 0 no-repeat; background-size:56px 19px} #footer .footer_wp .footer_inner .copyright .btn_sns .icon_sns.facebook{background:url(../image/icon_sns.png) -18px 0 no-repeat; background-size:56px 19px} #footer .footer_wp .footer_inner .copyright .btn_sns .icon_sns.naverblog{background:url(../image/icon_sns.png) -37px 0 no-repeat; background-size:56px 19px} #footer .footer_wp .footer_inner .site_wp{margin:3px auto 0} #footer .footer_wp .footer_inner .site_wp ul > li{display:inline-block; border-radius:3px; text-indent:22px; padding:3px 6px !important; border:1px solid #bcc0c6; margin-top:4px; image-rendering:auto;}/*수정*/ #footer .footer_wp .footer_inner .site_wp ul > li > a,.footer_wp .footer_inner .site_wp ul > li > span{color:#6d7681; display:block;} #footer .footer_wp .footer_inner .site_wp ul > li.site_01{background:url(../image/logo_kisa.png) no-repeat 5px center; background-size:18px; text-indent:20px;} #footer .footer_wp .footer_inner .site_wp ul > li.site_02{background:url(../image/logo_ok_copyright_new.png) no-repeat 5px 4px; background-size:24px; text-indent:26px;}/*수정*/ #footer .footer_wp .footer_inner .site_wp ul > li.site_03{background:url(../image/logo_clean.png) no-repeat 5px center; background-size:17px; text-indent:19px;} #footer .footer_wp .footer_inner .site_wp ul > li.site_04{background:url(../image/logo_innobiz.png) no-repeat 6px center; background-size:34px; text-indent:36px} #footer .footer_wp .footer_inner .site_wp ul > li.site_05{background:url(../image/logo_happy.png) no-repeat 5px center; background-size:17px; text-indent:20px} #footer .footer_wp .footer_inner .site_wp ul > li.site_06{background:url(../image/logo_news.png) no-repeat 6px center; background-size: 15px; position:static; border: 1px solid #bcc0c6; text-indent:18px;} #footer .footer_wp .footer_inner .site_wp ul > li.site_07{background: url(../image/logo_ok_copyright_new.png) no-repeat 4px 3px; background-size: 27px; padding: 3px 6px; border: 1px solid #bcc0c6;text-indent: 28px;} #footer .footer_wp .footer_inner .logo_topco{position:static;} #footer .footer_wp .footer_inner .logo_topco > img{margin:0 auto; width:69px} /* APP */ .index_plusapp_inner img{display:block; width:100%; margin:0 auto; background:#324357} .index_plusapp_inner .plusapp_link{width:100%;} .index_plusapp_inner .plusapp_link .plusapp_mo{display:block; cursor:pointer} .index_plusapp_inner .plusapp_link .plusapp_pc{display:none} } .jsRibbonWrap{position:absolute; bottom:8px; left:-3px; display:flex; flex-direction:column-reverse; flex-wrap:wrap-reverse; align-items:start; justify-content:left; align-items:flex-start; align-content:flex-start} .jsRibbonWrap span + span{margin-bottom:3px} /*아이콘 및 뱃지*/ span.iconbadge_new{display:inline-block; background-repeat:no-repeat; vertical-align:middle;} span.iconbadge_new.ico_up{width:20px; min-width:20px; height:13px; background-image:url(../image/newbadge_up.png); background-size:20px; margin-left:2px; margin-top:0;} span.iconbadge_new.ico_myeye{width:44px; height:16px; background-image:url(../image/new20_badge_myeye.png); background-size:44px;}/*내가보던*/ span.iconbadge_new.ico_ticket{width:52px; height:16px; background-image:url(../image/new20_badge_freeticket.png); background-size:52px;}/*무료이용권*/ span.iconbadge_new.ico_ticket2{width:36px; height:16px; background-image:url(../image/new20_badge_freeticket2.png); background-size:36px;}/*이용권*/ span.iconbadge_new.ico_ticket3{width:70px; height:16px; background-image:url(../image/new20_badge_freeticket3.png); background-size:70px;}/*이용권사용가능*/ span.iconbadge_new.ico_discount{width:25px; height:16px; background-image:url(../image/new20_badge_discount.png); background-size:25px;}/*할인*/ span.iconbadge_new.ico_new{width:25px; height:16px; background-image:url(../image/new20_badge_new.png); background-size:25px;}/*신작*/ span.iconbadge_new.ico_new2{width:24px; height:14px; background-image:url(../image/new20_badge_new2.png);background-size:24px;margin-left:2px; margin-top:0;}/*신작(라운드)*/ span.iconbadge_new.ico_reco{width:25px; height:16px; background-image:url(../image/new20_badge_bigzzam.png); background-size:25px;}/*꿀잼*/ span.iconbadge_new.ico_top10new{width:37px; height:16px; background-image:url(../image/new20_badge_top10.png); background-size:37px;} /*TOP10*/ span.iconbadge_new.ico_end{width:25px; height:16px; background-image:url(../image/new20_badge_end.png); background-size:25px;}/*완결*/ span.iconbadge_new.ico_latestend{width:42px; height:16px; background-image:url(../image/new20_badge_latestend.png); background-size:42px;} /*최신완결*/ span.iconbadge_new.ico_zzz{width:20px; min-width:20px; height:13px; background-image: url(../image/new20_badge_zzz.png); background-size:20px; margin-left:2px; margin-top:0;}/*쉼*/ span.iconbadge_new.ico_delay{width:22px; height:14px; background-image: url(../image/new20_badge_delay.png); background-size:20px; margin-bottom:1px;}/*지연*/ span.iconbadge_new.ico_free{width:25px; height:16px; background-image:url(../image/new20_badge_free.png); background-size:25px;}/*무료*/ /* 리본 개선 시작 */ span.iconbadge_new.ico_waitfree{width:50px; height:19px; background-image:url(../image/new20_rbn_badge_waitfree.png); background-size:42px;}/*기다빵*/ span.iconbadge_new.ico_new3{width:50px; height:19px; background-image:url(../image/new20_rbn_badge_new.png); background-size:29px;}/*신작*/ span.iconbadge_new.ico_free2{width:50px; height:19px; background-image:url(../image/new20_rbn_badge_free.png); background-size:29px}/*무료*/ span.iconbadge_new.ico_discount2{width:50px; height:19px; background-image:url(../image/new20_rbn_badge_discount.png); background-size:29px}/*할인*/ span.iconbadge_new.sectionfree{width:50px; height:30px; background-image:url(../image/new20_rbn_badge_section.png); background-size:29px}/*구간무료*/ span.iconbadge_new.ico_exclusive{width:50px; height:19px; background-image:url(../image/new20_rbn_badge_exclusive.png); background-size:29px}/*독점*/ span.iconbadge_new.plusone1{width:50px; height:30px; background-image:url(../image/new20_rbn_badge_oneplus.png); background-size:29px}/*1+1무료*/ span.iconbadge_new.weektop10{width:50px; height:30px; background-image:url(../image/new20_rbn_badge_weektop10.png); background-size:29px}/*주간TOP*/ /*내가보던::단독일때*/ span.iconbadge_new.ico_isaw30{width:44px; height:16px; background-image:url(../image/new20_badge_myeye.png); background-size:44px}/*내가보던 30%소장*/ span.iconbadge_new.ico_isaw35{width:44px; height:16px; background-image:url(../image/new20_badge_myeye.png); background-size:44px}/*내가보던 35%소장*/ span.iconbadge_new.ico_isaw40{width:44px; height:16px; background-image:url(../image/new20_badge_myeye.png); background-size:44px}/*내가보던 40%소장*/ span.iconbadge_new.ico_isaw45{width:44px; height:16px; background-image:url(../image/new20_badge_myeye.png); background-size:44px}/*내가보던 45%소장*/ span.iconbadge_new.ico_isaw50{width:95px; height:16px; background-image:url(../image/new20_badge_saw50.png); background-size:95px}/*내가보던 50%소장*/ span.iconbadge_new.ico_isaw55{width:95px; height:16px; background-image:url(../image/new20_badge_saw55.png); background-size:95px}/*내가보던 55%소장*/ span.iconbadge_new.ico_isaw60{width:95px; height:16px; background-image:url(../image/new20_badge_saw60.png); background-size:95px}/*내가보던 60%소장*/ span.iconbadge_new.ico_isaw65{width:95px; height:16px; background-image:url(../image/new20_badge_saw65.png); background-size:95px}/*내가보던 65%소장*/ span.iconbadge_new.ico_isaw70{width:95px; height:16px; background-image:url(../image/new20_badge_saw70.png); background-size:95px}/*내가보던 70%소장*/ span.iconbadge_new.ico_isaw75{width:95px; height:16px; background-image:url(../image/new20_badge_saw75.png); background-size:95px}/*내가보던 75%소장*/ span.iconbadge_new.ico_isaw80{width:95px; height:16px; background-image:url(../image/new20_badge_saw80.png); background-size:95px}/*내가보던 80%소장*/ span.iconbadge_new.ico_isaw85{width:95px; height:16px; background-image:url(../image/new20_badge_saw85.png); background-size:95px}/*내가보던 85%소장*/ span.iconbadge_new.ico_isaw90{width:95px; height:16px; background-image:url(../image/new20_badge_saw90.png); background-size:95px}/*내가보던 90%소장*/ span.iconbadge_new.ico_isaw95{width:95px; height:16px; background-image:url(../image/new20_badge_saw95.png); background-size:95px}/*내가보던 95%소장*/ span.iconbadge_new.ico_isaw100{width:99px; height:16px; background-image:url(../image/new20_badge_saw100.png); background-size:99px}/*내가보던 100%소장*/ /*내가보던::이용권+내가보던*/ span.iconbadge_new.ico_isaw30_v2{width:44px; height:16px; background-image:url(../image/new20_badge_myeye.png); background-size:44px}/*내가보던 30%소장*/ span.iconbadge_new.ico_isaw35_v2{width:44px; height:16px; background-image:url(../image/new20_badge_myeye.png); background-size:44px}/*내가보던 35%소장*/ span.iconbadge_new.ico_isaw40_v2{width:44px; height:16px; background-image:url(../image/new20_badge_myeye.png); background-size:44px}/*내가보던 40%소장*/ span.iconbadge_new.ico_isaw45_v2{width:44px; height:16px; background-image:url(../image/new20_badge_myeye.png); background-size:44px}/*내가보던 45%소장*/ span.iconbadge_new.ico_isaw50_v2{width:47px; height:16px; background-image:url(../image/new20_badge_saw50_v2.png); background-size:47px}/*50%소장*/ span.iconbadge_new.ico_isaw55_v2{width:47px; height:16px; background-image:url(../image/new20_badge_saw55_v2.png); background-size:47px}/*55%소장*/ span.iconbadge_new.ico_isaw60_v2{width:47px; height:16px; background-image:url(../image/new20_badge_saw60_v2.png); background-size:47px}/*60%소장*/ span.iconbadge_new.ico_isaw65_v2{width:47px; height:16px; background-image:url(../image/new20_badge_saw65_v2.png); background-size:47px}/*65%소장*/ span.iconbadge_new.ico_isaw70_v2{width:47px; height:16px; background-image:url(../image/new20_badge_saw70_v2.png); background-size:47px}/*70%소장*/ span.iconbadge_new.ico_isaw75_v2{width:47px; height:16px; background-image:url(../image/new20_badge_saw75_v2.png); background-size:47px}/*75%소장*/ span.iconbadge_new.ico_isaw80_v2{width:47px; height:16px; background-image:url(../image/new20_badge_saw80_v2.png); background-size:47px}/*80%소장*/ span.iconbadge_new.ico_isaw85_v2{width:47px; height:16px; background-image:url(../image/new20_badge_saw85_v2.png); background-size:47px}/*85%소장*/ span.iconbadge_new.ico_isaw90_v2{width:47px; height:16px; background-image:url(../image/new20_badge_saw90_v2.png); background-size:47px}/*90%소장*/ span.iconbadge_new.ico_isaw95_v2{width:47px; height:16px; background-image:url(../image/new20_badge_saw95_v2.png); background-size:47px}/*95%소장*/ span.iconbadge_new.ico_isaw100_v2{width:52px; height:16px; background-image:url(../image/new20_badge_saw100_v2.png); background-size:52px}/*100%소장*/ /* 내서재::소장률 */ span.iconbadge_new.ico_myrecent5{width:50px; height:16px; background-image:url(../image/new20_badge_myrecent05.png); background-size:50px;}/*소장률 5%*/ span.iconbadge_new.ico_myrecent10{width:54px; height:16px; background-image:url(../image/new20_badge_myrecent10.png); background-size:54px;}/*소장률 10%*/ span.iconbadge_new.ico_myrecent15{width:54px; height:16px; background-image:url(../image/new20_badge_myrecent15.png); background-size:54px;}/*소장률 15%*/ span.iconbadge_new.ico_myrecent20{width:56px; height:16px; background-image:url(../image/new20_badge_myrecent20.png); background-size:56px;}/*소장률 20%*/ span.iconbadge_new.ico_myrecent25{width:55px; height:16px; background-image:url(../image/new20_badge_myrecent25.png); background-size:55px;}/*소장률 25%*/ span.iconbadge_new.ico_myrecent30{width:56px; height:16px; background-image:url(../image/new20_badge_myrecent30.png); background-size:56px;}/*소장률 30%*/ span.iconbadge_new.ico_myrecent35{width:55px; height:16px; background-image:url(../image/new20_badge_myrecent35.png); background-size:55px;}/*소장률 35%*/ span.iconbadge_new.ico_myrecent40{width:55px; height:16px; background-image:url(../image/new20_badge_myrecent40.png); background-size:55px;}/*소장률 40%*/ span.iconbadge_new.ico_myrecent45{width:56px; height:16px; background-image:url(../image/new20_badge_myrecent45.png); background-size:56px;}/*소장률 45%*/ span.iconbadge_new.ico_myrecent50{width:56px; height:16px; background-image:url(../image/new20_badge_myrecent50.png); background-size:56px;}/*소장률 50%*/ span.iconbadge_new.ico_myrecent55{width:55px; height:16px; background-image:url(../image/new20_badge_myrecent55.png); background-size:55px;}/*소장률 55%*/ span.iconbadge_new.ico_myrecent60{width:56px; height:16px; background-image:url(../image/new20_badge_myrecent60.png); background-size:56px;}/*소장률 60%*/ span.iconbadge_new.ico_myrecent65{width:55px; height:16px; background-image:url(../image/new20_badge_myrecent65.png); background-size:55px;}/*소장률 65%*/ span.iconbadge_new.ico_myrecent70{width:55px; height:16px; background-image:url(../image/new20_badge_myrecent70.png); background-size:55px;}/*소장률 70%*/ span.iconbadge_new.ico_myrecent75{width:55px; height:16px; background-image:url(../image/new20_badge_myrecent75.png); background-size:55px;}/*소장률 75%*/ span.iconbadge_new.ico_myrecent80{width:57px; height:16px; background-image:url(../image/new20_badge_myrecent80.png); background-size:57px;}/*소장률 80%*/ span.iconbadge_new.ico_myrecent85{width:56px; height:16px; background-image:url(../image/new20_badge_myrecent85.png); background-size:56px;}/*소장률 85%*/ span.iconbadge_new.ico_myrecent90{width:56px; height:16px; background-image:url(../image/new20_badge_myrecent90.png); background-size:56px;}/*소장률 90%*/ span.iconbadge_new.ico_myrecent95{width:56px; height:16px; background-image:url(../image/new20_badge_myrecent95.png); background-size:56px;}/*소장률 95%*/ span.iconbadge_new.ico_myrecent100{width:61px; height:16px; background-image:url(../image/new20_badge_myrecent100.png); background-size:61px;}/*소장률 100%*/ /* 시즌패쓰 아이콘 */ .new_payment1709 .new_paylist .coin_ea p.icon_seasonpass{width:21px; height:14px; background:url(../image/icon_seasonpass.png) no-repeat center; background-size:100%; float: left; margin-right:3px;} /* * File : slidemenu.css * SUMMARY: * 01) FOOTER */ /* :::PC버전::: */ html{font-size:20px; font-family:'Noto Sans KR', sans-serif; -webkit-font-smoothing: subpixel-antialiased; -ms-font-smoothing: subpixel-antialiased; font-smoothing: antialiased} body{font-size:1rem;} #header .menu_slider{position:fixed; right:-120%; top:0; z-index: 101; transition:right 0.2s; padding:0; margin:0; width:300px; height:100%; background:#fff; box-sizing:border-box} #header .menu_slider.on {right:0;} #header .menu_slider.on .close{padding: 0; position: absolute; top:10px; right:310px; width: 35px; height: 35px; border-radius: 50%; background-color: rgba(0,0,0,0.7);} #header .menu_slider.on .close:after{top:22%; left:47.2%; background: #fff; width: 2px; height: 20px; content:""; position: absolute; transform:rotate(-45deg);} #header .menu_slider.on .close:before{top:22%; left:47.2%; background: #fff; width: 2px; height: 20px; content:""; position: absolute; transform:rotate(45deg);} #header .menu_slider ul li{height:auto; line-height:normal; border:none;} #header .menu_slider ul li > a{font-size:.8rem; display:block} /*사용자정보*/ #header .menu_slider .user-id{width:100%; height:40px; background:#272d33; padding:8px; position:relative;} .menu_slider .user-id .id{display:inline-block; font-size:0.7rem; font-weight: 400; color:#fff; letter-spacing: -0.3px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width:80%; margin-top: 1px;} #header .menu_slider .user-id .id.none::before{content: "";width: 18px;height: 18px;display: inline-block;background: url(../image/toptoon.png) center / cover no-repeat;vertical-align: middle;margin: 0 4px 2px 0;} #header .menu_slider .user-id .id.kk::before{content: "";width: 18px;height: 18px;display: inline-block;background: url(../image/kakao.png) center / cover no-repeat;vertical-align: middle;margin: 0 4px 2px 0;} #header .menu_slider .user-id .id.nv::before{content: "";width: 18px;height: 18px;display: inline-block;background: url(../image/naver.png) center / cover no-repeat;vertical-align: middle;margin: 0 4px 2px 0;} #header .menu_slider .user-id .id.gg::before{content: "";width: 18px;height: 18px;display: inline-block;background: url(../image/google.png) center / cover no-repeat;vertical-align: middle;margin: 0 4px 2px 0;} #header .menu_slider .user-id .id.fb::before{content: "";width: 18px;height: 18px;display: inline-block;background: url(../image/facebook.png) center / cover no-repeat;vertical-align: middle;margin: 0 4px 2px 0;} .menu_slider .user-id .logot{font-size:0.6rem; display:block; color:#fff; float:right; font-weight:400; line-height:27px; background:#272d33;} #header .menu_slider .user-id .menu-login{ font-size:0.75rem; font-weight: 400; color:rgba(255,255,255,0.85); letter-spacing: -0.3px; position: relative; top:-1px; background:#272d33;} #header .menu_slider .user-id .menu-join{font-weight:400; color:rgba(255,255,255,0.85); letter-spacing: -0.3px; float:right; border: 1px solid rgba(255,255,255,.3); padding: 0 8px; border-radius:100px; font-weight: 400; font-size: 0.65rem; line-height: 20px; margin-top: 1px; background:#272d33;} #header .menu_slider .user-id .menu-login::before{ content:""; width:18px; height:18px; display:inline-block; background: url(../image/toptoon.png) center / cover no-repeat; vertical-align: middle; margin: 0 6px 3.5px 0; } #header .menu_slider .user-id .menu-login::after{content:''; display:inline-block; width:6px; height:13px; background:url(../image/login_arrow.png) left top no-repeat; margin-left:4px; margin-top:-1px; background-size:7px; vertical-align: middle;} /*사용자정보*/ /*내코인정보*/ #header .menu_slider .user-coinlist ul{display: flex; margin:12px 0 0;} #header .menu_slider .user-coinlist ul li{float: left; flex: 1; width: 75px;} #header .menu_slider .user-coinlist ul li a{position: relative;} #header .menu_slider .user-coinlist ul li a img{width: 36px; height: 36px; margin:0 auto;} #header .menu_slider .user-coinlist ul li a p{font-size: 0.65rem; text-align: center; margin-top: 3px; color:#000; letter-spacing:-0.3px} #header .menu_slider .user-coinlist ul li a strong{font-size: 1em; display: block; margin: -3px auto; text-align: center; font-weight: 500;} #header .menu_slider .user-coinlist ul li:nth-of-type(1) a strong{color:#ff9f21} #header .menu_slider .user-coinlist ul li:nth-of-type(2) a strong{color:#3fb3d8} #header .menu_slider .user-coinlist ul li.extra-coin a strong{color:#777eef} #header .menu_slider .user-coinlist ul li:last-of-type a strong{color:#e63740} #header .menu_slider .user-coinlist ul li a span {padding: 0 4px;position: absolute;top: -6px;left: 50%;background: #3fb3d8;border-radius: 20px;color: #fff;text-align: center;font-size: 0.4rem;max-height: 12px;line-height: 12px;} #header .menu_slider ul li.appcoin a span{background:#707070;} /*내코인정보*/ /*코인충전*/ #header .menu_slider .coin-charge{width:278px; height:34px; background-color: #e63740; display: block; line-height:33px; margin:10px auto 0; color:#fff; text-align: center; font-size: 0.72rem;} #header .menu_slider .coin-charge img{display:inline-block; width: 15px; height: 15px; margin-right: 4px; vertical-align: middle; margin-top: -3px;} /*코인충전*/ /*쿠폰등록이동*/ #header .menu_slider .coupon-pge{width:278px; height:34px; display: block; border: 2px solid #e63740; margin: 5px auto 10px; line-height:30px; font-size:0.72rem; padding: 0 12px; color:#333;} #header .menu_slider .coupon-pge span{float:right; color:#e63740; font-weight: 500; font-size: 0.72rem;} /*쿠폰등록이동*/ /*메뉴리스트*/ #header .menu_slider .menu-wp{border-top: 1px solid #ddd; width:100%; overflow-y:scroll; height: 100%; overflow: -moz-scrollbars-none; -ms-overflow-style:none; scrollbar-width:none;} #header .menu_slider .menu-wp::-webkit-scrollbar {display: none;} #header .menu_slider .menu-wp .menu-list{width: 100%;} #header .menu-wp .menu-list .menu-list-style{ border-bottom: 1px solid #ddd; overflow:auto; height: 100%; position: relative;} #header .menu-wp .menu-list .menu-list-style:last-of-type{border: none; height: 80vh;} #header .menu-wp .menu-list .menu-list-style ul{width: 75%; float: right; background: white; } #header .menu-wp .menu-list .menu-list-style ul li{padding:10px; margin:0 27px; position: relative; } #header .menu-wp .menu-list .menu-list-style .side-category{width: 25%; margin: 0; float: left; background: #F6F6F6; display: inline-block; height: 100%; position:absolute;} #header .menu-wp .menu-list .menu-list-style .side-category a { display: block; font-size: 0.75rem; height: 40px; line-height: 40px; text-indent: 12px; color: #000; font-weight: 500; position: relative; margin: 0; padding: 0; letter-spacing: -0.3px } #header .menu-wp .menu-list .menu-list-style .side-category button { display: block; font-size: 0.75rem; height: 40px; line-height: 40px; text-indent: 12px; color: #000; font-weight: 500; position: relative; margin: 0; padding: 0; letter-spacing: -0.3px; width: 100%; text-align: left; background-color: transparent; } #header .menu-wp .menu-list .menu-list-style .side-category .sm-on{background: #fff; color:#e63740; font-weight:500;} #header .menu-wp .menu-list .menu-list-style .side-category .sm-on:after{display: block; content: ''; width: 3px; height: 40px; background: #e63740; position: absolute; top:0; left:0;} #header .menu-wp .menu-list .menu-list-style ul li a{display: block; font-size: 0.75rem; color:#333;} #header .menu-wp .menu-list .menu-list-style ul li a span{width: 5px; height: 9px; display: block; position: absolute; top:50%; right:0; margin-top: -5px; background: url(../image/menu_arrow.png) center / cover no-repeat border-box;} #header .menu-wp .menu-list .sm-library ul li a .sm-gift{display: inline-block; padding:0 4px; border-radius: 20px; background: #e63740; margin-left: 4px; font-size: 0.4rem; font-style: normal; line-height: 12px; max-height: 12px; text-align: center; color:#fff; vertical-align: middle; margin-bottom:3px; font-weight:500} /*성별선택 및 데이터 절약모드*/ #header .menu-wp .menu-list .sm-mypage ul li:not(:nth-of-type(1)){padding:5px 10px; height: 55px;} #header .menu_slider .menu-list .sm-mypage{overflow: hidden; /* padding-bottom: 5px */} #header .menu_slider .menu-list .sm-mypage ul li .select{height: 40px; margin: 0;} #header .menu_slider .menu-list .sm-mypage ul li .select strong{font-size: 0.75rem; color:#333; font-weight: 400; position: relative; top:-10px; } #header .menu_slider .menu-list .sm-mypage ul li .select input{display: none;} #header .menu_slider .menu-list .sm-mypage ul li .select input[type="radio"] + label{font-size: 0.75rem; position: relative; top:-16px; margin-right:5px; cursor: pointer;} #header .menu_slider .menu-list .sm-mypage ul li .menu-data input[type="radio"] + label:first-of-type{margin-right: 8px} #header .menu_slider .menu-list .sm-mypage ul li .select input[type="radio"] + label em { display:inline-block; width:15px; height:15px; background-color:#fff; border: 1px solid #ddd; vertical-align: middle; position: relative; bottom:1px; margin-right: 6px; } #header .menu_slider .menu-list .sm-mypage ul li .select input[type="radio"]:checked + label{color:#e63740; font-weight: 500;} #header .menu_slider .menu-list .sm-mypage ul li .select input[type="radio"]:checked + label em{background:url(../image/check.png) center center / 11px 8px no-repeat; border: 1px solid #e63740;} /*성별선택 및 데이터 절약모드*/ @media (min-width:0) and (max-width:767px) { #header .menu-wp .menu-list .menu-list-style .side-category a, #header .menu-wp .menu-list .menu-list-style .side-category button { font-size: .875rem; } } /*우측소메뉴*/ /*메뉴리스트*/ /* :::테블릿 버전::: */ @media (min-width:768px) and (max-width:1023px){ html{font-size:18px;} body{font-size:1rem; margin:0; padding:0} #header .menu_slider .user-id{padding:10px 8px;} .menu_slider .user-id .logot{line-height: 20px;} #header .menu_slider .user-id .menu-join{margin-top: -1px;} #header .menu_slider .user-id .menu-login{top:0px} } /* :::모바일 버전::: */ @media (min-width:360px) and (max-width:767px) { html {font-size: 16px;} body {font-size: 1rem; margin: 0; padding: 0} /*사용자정보*/ #header .menu_slider .user-id{height: 40px; padding:10px} .menu_slider .user-id .id{font-size:0.875rem;} .menu_slider .user-id .logot{font-size: 0.7rem; margin-top: -3px;} #header .menu_slider .user-id a.menu-login{top:0px} #header .menu_slider .user-id .menu-login{font-size:0.8rem} #header .menu_slider .user-id .menu-login::after{margin-bottom: -1px; margin-top:-2px} #header .menu_slider .user-id .menu-join{margin-top:-1px; font-size:0.75rem} /*사용자정보*/ /*내코인정보*/ #header .menu_slider .user-coinlist ul{margin:12px 0 0;} #header .menu_slider .user-coinlist ul li a p{font-size: 0.7rem;} #header .menu_slider .user-coinlist ul li a strong{font-size: 1.125em; margin: -2px auto;} #header .menu_slider .user-coinlist ul li a span{font-size: 0.6rem;} /*내코인정보*/ /*코인충전*/ #header .menu_slider .coin-charge{font-size:0.8125rem; font-weight:500; letter-spacing:-0.4px} #header .menu_slider .coin-charge img{margin-top:-2px;} /*코인충전*/ /*쿠폰등록이동*/ #header .menu_slider .coupon-pge{font-size:0.8125rem; letter-spacing:-0.4px} #header .menu_slider .coupon-pge span{font-size: 0.8125rem;} /*쿠폰등록이동*/ /*메뉴리스트*/ #header .menu_slider .menu-wp{overflow-y:scroll; -webkit-overflow-scrolling: touch; height: 100%; scrollbar-width: none;} #header .menu-wp .menu-list .menu-list-style ul li a{font-size: 0.875rem; letter-spacing: -0.4px;} #header .menu-wp .menu-list .menu-list-style ul li a span{margin-top: -4px;} #header .menu-wp .menu-list .menu-list-style .side-category a{font-size:0.9375rem} #header .menu-wp .menu-list .sm-library ul li a .sm-gift{font-size: 0.6rem;} /*성별선택 및 데이터 절약모드*/ #header .menu_slider .menu-list .sm-mypage ul li .select strong{font-size: 0.875rem; color:#333; font-weight: 400; position: relative; top:-3px;} #header .menu_slider .menu-list .sm-mypage ul li .select input[type="radio"] + label{font-size: 0.8125rem; position: relative; top:-7px;} /*성별선택 및 데이터 절약모드*/ /*메뉴리스트*/ } @media (min-width:0) and (max-width:359px){ html {font-size:16px;} body {font-size:1rem; margin:0; padding:0} #header .menu_slider{width:280px;} #header .menu_slider.on button.close{right:282.5px} #header .menu_slider .user-id{height:36px; padding:8px} .menu_slider .user-id .logot{margin-top:-4px;} #header .menu_slider .user-id .menu-login{font-size:0.8rem} #header .menu_slider .user-id .menu-login::after{margin-bottom:-1px;} #header .menu_slider .user-id .menu-join{margin-top:-1px; font-size:0.75rem} #header .menu_slider .user-coinlist ul{margin:12px 0 0;} #header .menu_slider .coin-charge, #header .menu_slider .coupon-pge{width:260px;} #header .menu_slider .coupon-pge{margin-bottom: 10px;} #header .menu-wp .side-category{height:166.5%;} #header .menu-wp .menu-list .menu-list-style ul li{margin: 0 16px;} #header .menu_slider .menu-list .sm-mypage ul li .select{height: 30px} /* #header .menu_slider .menu-list .sm-mypage ul li .select input[type="radio"] + label{left:-4px}*/ /* #header .menu_slider.on .close{padding: 0; position: absolute; top:0; right:15px; width: 25px; height: 25px; background: none; margin: 0;}*/ } .seasonpass-timer-modal {display: none;}