@charset "utf-8";

#content.recommand{padding-bottom: 40px; background-color: var(--bright-08);}
/* Text , Font, Title, Color */
.title-box{margin: 40px 0 16px; padding: 0 16px;line-height:1.2; font-size:18px; color:var(--mono-01);font-weight:600;}
.title-under{padding: 12px 10px 11px; border-bottom: 1px solid var(--bright-01); line-height: 17px; font-size: 14px;color: var(--mono-02);}
.title-contents {position:relative; background-color:var(--blue-01)}
.title-contents h1 {height:52px; padding:16px; font-size:18px; line-height:1.1; font-weight: bold; color:#fff;}
.title-contents h1.onlytext {text-align:center;}
.title-contents h1.no-arrow {padding-left:15px;}
.title-contents h1 span {vertical-align:middle;}
.title-contents .action-back {display:inline-block; position: absolute; top: 14px; left: 16px; vertical-align:middle;}
.title-contents .action-back span {color:#fff;}
.title-contents .quick {display: flex !important; align-items: center; position:absolute; top: 8px; right:16px; padding:8px 20px; border-radius:17px; font-size:14px; font-weight: 600; color:#fff; background-color:rgba(0,0,0,0.2); z-index: 10; -webkit-border-radius:17px; -moz-border-radius:17px; -ms-border-radius:17px; -o-border-radius:17px;}
.title-contents .ico-breadcrumb {font-size:12px;}
.title-contents .ico-breadcrumb:before {margin:0 4px;}
.title-contents .ico-only {position:absolute; top:12px; left:15px;}
.subtitle-theme{margin-top: -16px; margin-bottom: 16px; padding: 0 8px; font-size: 14px !important; line-height: 1.429 !important; color: var(--grey-06) !important;}
.text-subject-block,
.text-subject{display: block; padding-right: 8px; font-size:14px; color:var(--mono-01); line-height: 1.429}
.text-subject-block.noactive,
.text-subject.noactive{display: none;}
.text-author {display: block; padding-right: 8px; font-size:12px; color:var(--grey-05); line-height:1.667}
.text-date {font-size:12px; color:#999; line-height:1.667}
.text-description {display: block; font-size:12px; color:var(--grey-03);}
.text-updateday {font-size:12px; color:#999;}
.text-volumes {font-size:12px; color:#111;}
.text-exam {font-size:12px; color:inherit;}
.text-wait-time {font-size:12px; color:var(--sub-green-01); line-height:16px;}
.colr-blue {color:var(--blue-01);}
.colr-red {color:var(--sub-red-01);}
.colr-gray {color:#999;}
.colr-black {color:var(--mono-02);}
.colr-white-blue{color:#2dB8D7;}
.colr-event{color:var(--sub-red-01)}

/* Box Model */
.grid-a .block {float:left; width:50%;}
.grid-b .block {float:left; width:33.3333%;}
.grid-c .block {float:left; width:25%;}
.grid-d .block {float:left; width:20%;}
.wrap-list {padding:15px 10px 0; background-color:var(--bright-04);}
.wrap-list.space-remove{padding:0 10px 0;}
.wrap-list .box-basic-list {margin:0 -10px;}
.wrap-list > .box-basic-list:only-child {margin-top:-10px;}
.wrap-list .title-contents {margin:-15px -10px 10px;}
.box-filter {min-height:47px; padding:7px 10px; border-bottom:1px solid #ddd; background-color:#f7f7f7;}
.region-adult {position:relative;height:84px;padding:16px 10px; background-color:var(--bright-08);}
.region-adult div {display:block;height:54px;font-size:12px;line-height:15px;border: solid 1px var(--bright-01);border-radius:6px;color: var(--grey-02);}
.region-adult div p {display:flex;align-items:center;width:calc(100% - 104px);height:54px;float:right;}
.region-adult div p.without-login {width:calc(100% - 42px);}
.region-adult div p span {display:inline-block;line-height:1.38;font-size:13px;}
.region-adult i.ico-19:before {display:inline-block;height:54px;line-height:54px;margin:0 10px;background-position:center;}
.region-adult div a.btn-login {display:inline-block;width:40px;height:54px;line-height:54px;margin:0 10px;font-size:13px;padding:0;color: var(--blue-01);border:none;background-color:transparent;float:right;}
.region-adult .ico-19:only-child:before {top:50%; margin-left: 16px; margin-top:-1px;}
.region-adult-gray {position:relative;padding:15px 10px; background-color:var(--bright-04);}
.region-adult-gray div {display:block;height:54px;font-size:12px;line-height:15px;border: solid 1px var(--bright-01);border-radius:6px;color: var(--grey-02);background-color: var(--bright-08);}
.region-adult-gray div p {display:flex;align-items:center;width:calc(100% - 104px);height:54px;float:right;padding-right: 10px;}
.region-adult-gray div p.without-login {width:calc(100% - 42px);}
.region-adult-gray div p span {display:inline-block;line-height:1.38;font-size:13px;}
.region-adult-gray i.ico-19:before {display:inline-block;height:54px;line-height:54px;margin:0 10px;background-position:center;}
.region-adult-gray div a.btn-login {display:inline-block;width:40px;height:54px;line-height:54px;margin:0 10px;font-size:13px;padding:0;color: var(--blue-01);border:none;background-color:transparent;float:right;}
.region-adult-gray .ico-19:only-child:before {top:50%; margin-left: 16px; margin-top:-1px;}
.region_result {position:relative; padding-top:165px; padding-bottom:20px; text-align:center; background-repeat:no-repeat; background-position:50% 7px; background-size:185px auto;}
.region_result:before {content:''; position:absolute; left:50%; display:block; background:url('/images/common/result-icon-v4.png') no-repeat 0 0; background-size:90px auto;}
.region_result.success {background-image:url('/images/common/img-success-v4.5.gif');}
.region_result.fail {background-image:url('/images/common/img-fail-v4.5.gif'); background-color: var(--bright-08);}
.region_result.payment:before {top:58px; width:27px; height:27px; margin-left:-51px; background-position:0 0;}
.region_result.review:before {top:58px; width:27px; height:27px; margin-left:-51px; background-position:-30px 0;}
.region_result.search:before {top:58px; width:27px; height:27px; margin-left:-51px; background-position:0 -30px;}
.region_result.no-intro:before {top:58px; width:27px; height:27px; margin-left:-51px; background-position:-30px -30px;}
.region_result.no-other:before {top:47px; width:30px; height:43px; margin-left:-50px; background-position:-60px 0;}
.region_result .head {margin-bottom:10px; padding:0 20px; color:var(--blue-01);}
.region_result .txt {padding:0 20px; font-size:12px; color:var(--grey-03);}

/* Thumbnail */
.thumbnail {position:relative; width:80px; height:120px;}
.thumbnail img {width:100%; vertical-align:middle;}
.thumbnail img.fit {height:100%; object-fit: cover;}
.thumbnail .ico-adult-a {position:absolute; top:3px; left:3px;}
.thumbnail.small {width:67px; height:100px;}
.thumbnail.small:after {left:-1px; width:68px; height:102px; background-position:-6px -167px;}
.thumbnail.small-webtoon {width:67px; height:100px;}
.thumbnail.small-webtoon:after {width:67px; height:100px; border:1px solid rgba(0,0,0,0.15); box-sizing:border-box; -webkit-box-sizing:border-box; background:none;}
.thumbnail.recommend {width:77px; height:112px;}
.thumbnail.recommend img {height:112px;}
.thumbnail.recommend:after {top:-3px; left:-1px; width:79px; height:117px; background-position:-128px -9px;}
.thumbnail.webtoon {width:110px; height:85px;}
.thumbnail.webtoon:after {width:110px; height:85px; border:1px solid rgba(0,0,0,0.15); box-sizing:border-box; -webkit-box-sizing:border-box; background:none;}
.thumbnail.webtoon-mini {width:80px; height:62px;}
.thumbnail.webtoon-mini:after {width:80px; height:62px; border:1px solid rgba(0,0,0,0.15); box-sizing:border-box; -webkit-box-sizing:border-box; background:none;}
.thumbnail.hot {overflow:hidden; width:115px; height:140px;}
.thumbnail.hot img {margin-top:-17px;}
.thumbnail.hot:after {width:115px; height:140px; border:1px solid rgba(0,0,0,0.15); box-sizing:border-box; -webkit-box-sizing:border-box; background:none;}
.thumbnail.rank {overflow:hidden; width:50px; height:50px;}
.thumbnail.rank img {width:auto; height:100%;}
.thumbnail.rank:after {width:50px; height:50px; border:1px solid rgba(0,0,0,0.15); box-sizing:border-box; -webkit-box-sizing:border-box; background:none;}
.thumbnail.detail-webtoon {width:94px; height:140px;}
.thumbnail.detail-webtoon img {height:100%;}
.thumbnail.detail-webtoon:after {width:96px; height:143px; background-position:-7px -286px;}
.thumbnail.detail-comic {width:92px; height:140px;}
.thumbnail.detail-comic img {height:100%;}
.thumbnail.detail-comic:after {top:-3px; left:-2px; width:95px; height:145px; background-position:-6px -9px;}
.thumbnail.wait-coupon {width:100%; height:100%; margin-bottom: 6px;aspect-ratio: 124/75;background: #ddd;}
.thumbnail.wait-coupon:after {width:100%; height:100%; border:1px solid rgba(0,0,0,0.15); box-sizing:border-box; -webkit-box-sizing:border-box; background:none;}
.thumbnail.wait-coupon.fix {padding:0;margin:0;border:unset;}
.thumbnail.wait-coupon.fix .ico-adult-label {top:4px; right:4px}
/* Listview */
.listview.sorter {border-bottom:1px solid #ddd; background-color:#f7f7f7;}
.listview.sorter ul {padding:0 10px;}
.listview.sorter ul li {float:left; width:16.6666%;}
.listview.sorter ul li a {display:block; padding:11px 0 12px; text-align:center; line-height:normal; font-size:12px; letter-spacing:-0.5px;}
.listview.sorter ul li a:before {content:''; display:none; width:10px; height:10px; margin-right:2px; background:url('/images/common/ui-v4.5.png?date=202005270000') no-repeat -330px -20px; background-size:400px auto; vertical-align:middle;}
.listview.sorter ul li a.active:before {display:inline-block;}
.listview.sorter ul li a span {vertical-align:middle;}

/* 회전목마형 썸네일 리스트 (각 메인류..) */
.listview.type-carousel li {position:relative; float:left; width:33.3333%; text-align:center;}
.listview.type-carousel li a {display:inline-block; width:80px; text-align:left;}
.listview.type-carousel li a .thumbnail {margin-bottom:5px;}
.listview.type-carousel li a .text-subject {display:block; line-height:20px;}
.listview.type-carousel li a .text-author {display:block; line-height:17px;}

@media (min-width: 640px) {
.listview.type-carousel li {width:16.6666%;}
}

/* 회전목마형 썸네일 리스트 (오늘의 추천 만화) */
.listview.type-recommend {position:relative;}
.listview.type-recommend li {position:relative; float:left; width:93px; text-align:center;}
.listview.type-recommend li a {display:block; text-align:left; padding-bottom:8px;}
.listview.type-recommend li a .cover {padding:18px 0 8px; margin-bottom:5px; background-color:#f7f7f7;}
.listview.type-recommend li a .thumbnail {margin:0 auto 5px;}
.listview.type-recommend li a .text-subject {display:block; width:77px; margin:0 auto; line-height:20px;}
.listview.type-recommend li a .text-author {display:block; width:77px; margin:0 auto; line-height:17px;}

/* 웹툰 리스트 기본형 */
.listview.type-webtoon-list {padding:0 10px;}
.listview.type-webtoon-list li {padding:15px 0; border-bottom:1px solid #eee;}
.listview.type-webtoon-list li:last-child {border-bottom:0 none;}
.listview.type-webtoon-list.bl li:last-child { border-bottom:1px solid #eee;}
.listview.type-webtoon-list li a {position:relative; display:block; overflow:hidden; min-height:85px; padding:0 5px;}
.listview.type-webtoon-list li a figure {float:left;}
.listview.type-webtoon-list li a .summary {margin-left:120px;}
.listview.type-webtoon-list li a .summary .text-subject {margin-bottom:5px;}
.listview.type-webtoon-list li a .summary .text-subject span {vertical-align:middle;}
.listview.type-webtoon-list li a .summary .text-author {margin-bottom:3px;}
.listview.type-webtoon-list li a .summary .ico-detail-19 {position:absolute; top:2px; left:94px;}
.listview.type-webtoon-list li a .summary .volume {margin-bottom:7px; font-size:12px; color:#111;}
.listview.type-webtoon-list li a .summary .volume span {vertical-align:middle;}
.listview.type-webtoon-list li a .summary .text-exam {line-height:15px;}
.listview.type-webtoon-list li a .summary .box-info-inner {position:absolute;bottom:0;}
.listview.type-webtoon-list li a .summary .status {margin-bottom:2px; font-size:11px; color:#777;}
.listview.type-webtoon-list li a .summary .rating {margin-bottom:4px; font-size:11px; color:#777;}
.listview.type-webtoon-list li a .summary span {line-height:inherit;}
.listview.type-webtoon-list li a .summary .star-base{margin-right: 2px;}
.listview.type-webtoon-list li a .summary .volumeprice {font-size:12px;}

@media (min-width: 640px) {
.listview.type-webtoon-list li {float:left; width:50%;}
.listview.type-webtoon-list li:nth-child(odd):nth-last-child(2) {border-bottom:0 none;}
.listview.type-webtoon-list li:nth-child(odd):last-child {width:100%; padding-right:50%;}
}

/* 작품 리스트 기본형 */
.listview.type-basic-list {padding:0 10px; background-color:var(--bright-08);}
.listview.type-basic-list li {position:relative; padding:15px 5px 12px; border-bottom:1px solid var(--bright-03);}
.listview.type-basic-list li .thumbnail {position:absolute; top:15px; left:5px;}
.listview.type-basic-list li .thumbnail .bedge {position:absolute; top:-9px; left:-9px; z-index:2;}
.listview.type-basic-list li .ico-popview {position:absolute; top:15px; right:5px; z-index:2;}
.listview.type-basic-list li .ico-popview + .summary .text-subject,
.listview.type-basic-list li .ico-popview + .summary .text-subject + .text-author {margin-right:40px;}
.listview.type-basic-list li .summary {position:relative; display:block; min-height:105px; padding-left:80px; z-index:1;}
.listview.type-basic-list li .summary .text-subject {margin-bottom:2px; line-height:18px;}
.listview.type-basic-list li .summary .text-author {margin-bottom:7px; line-height:15px;}
.listview.type-basic-list li .summary .box-info-inner {position:absolute;bottom:3px;}
.listview.type-basic-list li .summary .status {margin-bottom:2px; line-height:15px; font-size:11px; color:var(--grey-05);}
.listview.type-basic-list li .summary .rating {margin-bottom:4px; line-height:15px; font-size:11px; color:var(--grey-05);}
.listview.type-basic-list li .summary span {line-height:inherit; vertical-align:middle;}
.listview.type-basic-list li .summary .volumeprice {font-size:12px;}
.listview.type-basic-list li .this-rank {position:absolute; top:50%; left:-5px; width:30px; height:16px; margin-top:-8px; line-height:16px; text-align:center; color: var(--grey-06);}
.listview.type-basic-list li .this-rank.podium {color:var(--blue-01);}
.listview.type-basic-list li .this-rank + .thumbnail {left:25px;}
.listview.type-basic-list li .this-rank + .thumbnail + .summary,
.listview.type-basic-list li .this-rank + .thumbnail + .ico-popview + .summary {padding-left:100px;}
.listview.type-basic-list li .this-rank + .thumbnail .ico-adult-label {top:4px; right:4px}
.listview.type-basic-list li .this-checkbox {position:absolute; top:50%; left:0; width:30px; height:20px; margin-top:-10px;}
.listview.type-basic-list li .this-checkbox + .thumbnail {left:30px;}
.listview.type-basic-list li .this-checkbox + .thumbnail + .summary,
.listview.type-basic-list li .this-checkbox + .thumbnail + .ico-popview + .summary {margin-left:25px; padding-left:80px;}

@media (min-width: 640px) {
.listview.type-basic-list li {float:left; width:50%; min-height:137px;}
.listview.type-basic-list li:nth-child(odd):nth-last-child(2) {border-bottom:0 none;}
.listview.type-basic-list li:nth-child(odd):last-child {margin-right:50%;}
}

/* Paginate */
.paginate {padding-bottom:10px; text-align:center; background-color:var(--bright-08);}
.paginate .controller {padding-top:15px; margin-bottom:-10px;}
.paginate .controller a {font-size:12px; margin:0 15px;}
.paginate .navigator {padding:30px 0 10px 0;}
.paginate .navigator a {display:inline-block; width:30px; height:30px; line-height: 30px; font-size:14px; color:var(--grey-07); vertical-align:middle;}
.paginate .navigator a.ico-base::before, .paginate .navigator a.ico-base::after {vertical-align: unset;}
.paginate .navigator a.active {color:var(--mono-01);font-weight:600;}
.paginate .navigator .elision {display:inline-block; vertical-align:middle;}
.paginate .text {padding-bottom:15px; font-size:12px; color:var(--grey-05);}
.paginate.simple {padding:18px 0;}
.paginate.simple span {vertical-align:middle;}
.paginate.simple a { width: 40px;height: auto;display: inline-block;}
.paginate.simple a.left { text-align: right;}
.paginate.simple a.right { text-align: left;}

/* Tab */
/* 리스트 탭 */
.tab-base li {position:relative; float:left;}
.tab-base li a {display:block;}
.tab-base li a span {vertical-align:middle;}
.tab-panel {display:none;}

/* 리스트 탭 (무협작가, 할리퀸 등) */
.tab-base.type-author {position:relative; margin-bottom:15px;}
.tab-base.type-author ul {border-radius:3px; background-color:#fff;}
.tab-base.type-author li a {height:36px; padding:11px 0 9px; border-right:1px solid var(--bright-03); text-align:center; line-height:15px; font-size:12px; color:#8b8d90;}
.tab-base.type-author li:last-child a {border-right:0 none;}
.tab-base.type-author li a.spine:after {bottom:-10px; display:none; margin-left:-5px; border-width:5px; border-color:#6f7580 transparent transparent;}
.tab-base.type-author li a.more {text-indent:-99999px;}
.tab-base.type-author li a.more:before {content:''; position:absolute; top:3px; left:50%; width:10px; height:30px; margin-left:-5px; background:url('/images/common/ui-v4.5.png?date=202005270000') no-repeat -150px 0; background-size:400px auto;}
.tab-base.type-author li.active a {color:#fff; background-color:#6f7580;}
.tab-base.type-author li.active:first-child a {border-radius:3px 0 0 3px;}
.tab-base.type-author li.active:last-child a {border-radius:0 3px 3px 0;}
.tab-base.type-author li.active a.more:before {background-position:-160px 0;}
.tab-base.type-author ul.list-more {position:absolute; top:36px; right:0; display:none; width:85px; z-index:5; box-shadow:0 1px 3px 1px rgba(0,0,0,.15);}
.tab-base.type-author ul.list-more.active {display:block;}
.tab-base.type-author ul.list-more li {float:none; width:100%;}
.tab-base.type-author ul.list-more li a {padding:0; border-right:0 none; background-color:#f7f7f7;}
.tab-base.type-author ul.list-more li a span {display:block; padding:11px 0 9px; margin:0 5px; border-bottom:1px solid #ddd; font-size:11px;}
.tab-base.type-author ul.list-more li:last-child a span {border-bottom:0 none;}
.tab-base.type-author ul.list-more li.active a {background-color:#fff;}
.tab-base.type-author ul.list-more li.active a span {color:var(--blue-01);}

/* 필터링 관련 탭 (작가방, 웹툰장르별) */
.tab-base.type-filter {margin-bottom:15px;}
.tab-base.type-filter ul {overflow:hidden; border:1px solid #c6c6c8; border-radius:3px; background-color:#fff;}
.tab-base.type-filter ul li {margin-bottom:-1px;}
.tab-base.type-filter ul li a {padding:11px 0 9px; border-right:1px solid #eee; border-bottom:1px solid #eee; text-align:center; line-height:15px; font-size:12px; color:#8b8d90;}
.tab-base.type-filter li.active a {color:#fff; background-color:#6f7580;}

/* 심플 탭 (모달 및 앱설치 안내) */
.tab-base.tab-simple {}
.tab-base.tab-simple ul {border-bottom:1px solid #ddd;}
.tab-base.tab-simple li {padding:0 2px; margin-bottom:-1px;}
.tab-base.tab-simple li:first-child {padding-left:10px;}
.tab-base.tab-simple li:last-child {padding-right:10px;}
.tab-base.tab-simple li a {height:39px; padding-top:11px; border:1px solid #ddd; text-align:center; color:#999;}
.tab-base.tab-simple li.active a {background-color:#fff; border-bottom:1px solid #fff; color:var(--blue-01);}

/* Collapse */
.collapse .toggler {position:relative; display:block;}
.collapse .toggler:after {content:''; position:absolute; top:50%; right:0; display:block; width:10px; height:10px; margin-top:-5px; background:url('/images/common/ui-v4.5.png?date=202005270000') no-repeat -330px -40px; background-size:400px auto;}
.collapse .unfold .toggler:after {background-position:-320px -40px;}
.collapse *:not(.unfold) .panels {overflow:hidden; height:0;}
.collapse .panels {overflow:hidden; -webkit-transition:height 350ms ease; -moz-transition:height 350ms ease; -ms-transition:height 350ms ease; -o-transition:height 350ms ease; transition:height 350ms ease;}
.collapse .panels .inner {padding:10px;}

/* Collapse Theme - reviews */
.review-list {border-bottom:2px solid #f2f3f4;}
.review-list .info-top{position: relative; margin-bottom: 5px;}
.review-list .info-top .star-base{position: relative; top:0; margin-bottom: 0;}
.review-list .text-date {position: relative; top: 1px; margin-left: 10px;}
.review-list ul {padding:0 10px; border-bottom:1px solid #bbb;}
.review-list li {position:relative; padding:15px 0; border-bottom:1px solid #eee;}
.review-list li:last-child {border-bottom:0 none;}
.review-list li .star-base {margin-bottom:5px;}
.review-list li .toggler {padding-right:60px;}
.review-list li .toggler .text-subject {vertical-align:middle;}
.review-list li .ico-review-del {position:absolute; top:39px; right:19px;}
.review-list li .panels .inner .review-cont-block,
.review-list li .panels .inner .review-cont {font-size:12px; word-break:break-all; white-space:pre-wrap;}
.review-list li .panels .inner .review-cont.noactive,
.review-list li .panels .inner .review-cont-block.noactive{display: none;}
.review-list li .panels .inner .text-userid {display: inline-block;margin-top:6px;font-size: 12px;color: #999;line-height: 1.667;}

/* Hero */
.banner-hero {position:relative;}
.banner-hero .swiper-wrapper {height:190px;}
.banner-hero .swiper-wrapper li {float:left; min-height:180px; text-align:center; background-size:9999px auto;}
.banner-hero .swiper-wrapper li a {display:block; overflow:hidden; -webkit-tap-highlight-color:transparent;}
.banner-hero .swiper-wrapper li a img {display:inline; width:auto; max-width:640px; margin-top:-10px; vertical-align:top; visibility:hidden;}
.banner-hero .swiper-wrapper li a img.banner {margin-top:0px;}
.banner-hero .morewrapper {position:absolute; bottom:12px; left:50%; width:290px; margin-left:-145px; z-index:10;}
.banner-hero .morewrapper.banner {text-align:center;}
.banner-hero .swiper-pagination {position:static; display:inline-block; vertical-align:middle;}
.banner-hero .swiper-pagination span.swiper-pagination-bullet {float:left; margin-right:5px; overflow:hidden; display:block; width:5px; height:0; padding-top:5px; margin:0 2px; border-radius:5px; background-color:#fff; opacity:0.5;}
.banner-hero .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {width:7px; padding-top:7px; opacity:1; margin-top:-1px;}
.banner-hero .more {display:inline-block; vertical-align:middle;}
.banner-hero .more a {overflow:hidden; float:left; width:54px; height:21px; padding-top:19px; background:url('/images/common/ui-v4.5.png?date=202005270000') no-repeat -89px -59px; background-size:400px auto;}
.banner-hero .swiper-button-prev,
.banner-hero .swiper-button-next {position:absolute; top:50%; overflow:hidden; width:20px; height:0; padding-top:30px; margin-top:-15px; background:url('/images/common/ui-v4.5.png?date=202005270000') no-repeat 0 0; background-size:400px auto; z-index:10; transition:opacity 300ms linear; -webkit-transition:opacity 300ms linear; -moz-transition:opacity 300ms linear; -o-transition:opacity 300ms linear;}
.banner-hero .swiper-button-prev {left:5px; background-position:-240px 0;}
.banner-hero .swiper-button-next {right:5px; background-position:-260px 0;}
.ribbon-hero {padding:12px 10px 8px; background-color:#e4e5e7;}
.ribbon-hero .swiper-wrapper li {display:inline-block; width:146px; margin:0 3px;}
.ribbon-hero .swiper-wrapper li a {display:block;}
.ribbon-hero .swiper-wrapper li a img {width:100%;}
.ribbon-hero.lock .swiper-wrapper {display:inherit; text-align:center;}

.banner-hero .swiper-wrapper.banner {height:307px;}
.banner-hero .swiper-wrapper li a img.banner {max-width:640px;}

@media (min-width: 360px) {
.banner-hero .swiper-wrapper.banner {height:333px;}
.banner-hero .swiper-wrapper li a img.banner {max-width:694px;}
}

@media (min-width: 321px) {
.banner-hero .morewrapper {width:314px; margin-left:-157px;}
}

/* Table */
.tbl-base caption {padding:0 0 10px 8px; font-size:14px; color:var(--blue-01);}
.tbl-base th {height:34px; padding:0 12px; border-bottom:1px solid var(--bright-01); color:var(--grey-05); background-color:var(--bright-06);}
.tbl-base td {height:34px; padding:0 12px; border-bottom:1px solid var(--bright-01);}
.tbl-base tr:first-child th,
.tbl-base tr:first-child td {border-top:1px solid var(--bright-01);}
.table-base{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; grid-gap: 3px 0; gap: 3px 0; width:100%;}
.table-cell{display: flex; /*flex-grow: 9;*/}
.table-cell.txt-blue-main{margin-right: 10px; line-height: 1.7em;}
.table-cell.float-right{display: flex; justify-content: flex-end; flex-grow: 1; flex-basis: 0px;}
.table-base .subtxt-won{position: relative; margin-left: 3px; margin-top: 1px;}
.table-cell-reset-flex-grow{flex-grow: unset;}

/* Form */
/* text type */
.input-wrap {position:relative; display:block;}
.input-wrap .input-text[disabled] {border-color:#e2e3e8; background-color:#f2f3f8;}
.input-wrap .reset {position:absolute; top:50%; right:7px; margin-top:-10px;}
.input-wrap.with-btn {float:left;}
.input-wrap.with-btn .input-text {width:100%; border-right:0 none; border-radius:3px 0 0 3px;}
.input-wrap.with-btn ~ .btn-base {float:left;}
.with-lbl {float:left; height:34px; padding-top:11px; margin-right:10px; line-height:15px;}
.with-lbl + .input-wrap {float:left;}
.input-wrap ~ .with-lbl {margin-left:10px; margin-right:0;}

/* textarea */
.textarea-wrap textarea {width:100%; padding:10px; border:1px solid var(--bright-01); border-radius:2px; background-color:var(--custom-02); resize:none;color: var(--mono-03);}

/* Checkbox Radio */
.input-check,
.input-radio {position:relative; display:inline-block; vertical-align:middle; background:url('/images/common/ui-v4.5.png?date=202005270000') no-repeat 0 0; background-size:400px auto;}
.input-check {width:20px; height:20px; background-position:0 -170px;}
.input-check.active {background-position:-20px -170px;}
.input-check.disable {background-position:-40px -170px;}
.input-check.active.disable {background-position:-60px -170px;}
span.type-align {background-position:-80px -170px;}
span.type-align.active {background-position:-100px -170px;}
.input-radio {width:20px; height:21px; background:var(--ico-radio-normal) no-repeat; background-size:20px 21px;}
.input-radio.active {width:20px; height:21px; background:var(--ico-radio-active) no-repeat; background-size:20px 21px;}
.input-radio.disable {background-position:-160px -170px;}
.input-check input[type=checkbox],
.input-radio input[type=radio] {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0;}

/* select */
.input-select {position:relative; display:inline-block;}
.input-select select {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:1;}
.input-select .opt {display:inline-block; vertical-align:middle;}
.input-select.type-a {padding:6px 35px 6px 15px; border:1px solid #e4e5e6; border-radius:3px;}
.input-select.type-a:after {content:''; position:absolute; top:10px; right:10px; width:10px; height:10px; background:url('/images/common/ui-v4.5.png?date=202005270000') no-repeat -320px -20px; background-size:400px auto;}
.input-select.type-a .opt {height:17px; line-height:17px;}
.input-select.type-b {width:100%; height:34px; padding:7px 10px 0; border:1px solid #ddd; border-radius:2px; box-shadow:inset -34px 0 0 0 #f7f7f7;}
.input-select.type-b:after {content:''; position:absolute; bottom:-6px; right:-6px; width:0; height:0; border-style:solid; border-width:10px; border-color:#9599a1 transparent transparent; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg);}
.input-select.type-b .opt {font-size:15px; color:var(--blue-01);}
.input-select.type-c {padding:7px 35px 7px 15px; border:1px solid #d9dadb; border-radius:2px; background-color:#fff;}
.input-select.type-c:after {content:''; position:absolute; top:10px; right:10px; width:10px; height:10px; background:url('/images/common/ui-v4.5.png?date=202005270000') no-repeat -320px -20px; background-size:400px auto;}
.input-select.type-c .opt {height:17px; line-height:17px;}

/* Starpoint */
.star-base {position:relative; display:inline-block; vertical-align:middle;}
.star-base.type-view {width:65px; height:13px; text-indent:-9999px; background:var(--ico-prod-list-raiting-off) repeat; background-size:13px 13px;}
.star-base.type-view:after {content:''; position:absolute; left:0; width:0; height:100%; background:var(--ico-prod-list-raiting-on) repeat; background-size:13px 13px;}
.star-base.type-detail {width:70px; height:14px; text-indent:-9999px; background:url('/images/common/ui-v4.5.png?date=202005270000') no-repeat -120px -191px; background-size:400px auto;}
.star-base.type-detail:after {content:''; position:absolute; margin-top: -2px; top:0; left:0; width:0; height:100%; background:url('/images/common/ui-v4.5.png?date=202005270000') no-repeat -120px -204px; background-size:400px auto;}
.star-base.value1:after {width:20%;}
.star-base.value2:after {width:40%;}
.star-base.value3:after {width:60%;}
.star-base.value4:after {width:80%;}
.star-base.value5:after {width:100%;}
.star-base.type-write button {width:30px; height:30px; margin:0 3px; background:url('/images/common/ui-v4.5.png?date=202005270000') no-repeat -90px -190px; background-size:400px auto; vertical-align:middle;}
.star-base.type-write button.active {background-position:-60px -190px;}

.star-point{position:relative; display:inline-block; vertical-align:middle;}
.star-point.type-detail {width:100px; height:16px; text-indent:-9999px; background:url('/images/common/ico-prod-list-raiting-with-space-off.svg') repeat; background-size:20px 16px;}
.star-point.type-detail:after {content:''; position:absolute; top:0; left:0; width:0; height:100%; background:url('/images/common/ico-prod-list-raiting-with-space-on.svg') repeat; background-size:20px 16px;}
.star-point.value1:after {width:20%;}
.star-point.value2:after {width:40%;}
.star-point.value3:after {width:60%;}
.star-point.value4:after {width:80%;}
.star-point.value5:after {width:100%;}

.star-point.type-detail.review {width:110px; height:20px; text-indent:-9999px; background:var(--ico-review-list-raiting-with-space-off); background-size:22px 20px;}
.star-point.type-detail.review:after {content:''; position:absolute; top:0; left:0; width:110px; height:100%; background:var(--ico-review-list-raiting-with-space-on); background-size:22px 20px;}
.star-point.type-detail.review.value1:after {width:20%;}
.star-point.type-detail.review.value2:after {width:40%;}
.star-point.type-detail.review.value3:after {width:60%;}
.star-point.type-detail.review.value4:after {width:80%;}
.star-point.type-detail.review.value5:after {width:100%;}

/* Button */
.btn-base {display:inline-block; height:32px; padding:8px 12px; border:1px solid transparent; border-radius:6px; line-height:15px; text-align:center; vertical-align:middle;}
.btn-base.btn-disabled {opacity:.4;}
.btn-base.btn-blue {border-color:var(--blue-01); color:#fff; background-color:var(--blue-01);}
.btn-base.btn-gray-dark {color:var(--bright-08); background-color:var(--bright-01); opacity: 1; border: none;}
.btn-base.btn-green {border-color:var(--sub-green-01); color:#fff; background-color:var(--sub-green-01);}
.btn-base.btn-gray-light {border-color:var(--grey-08); color:var(--grey-01); background-color:var(--bright-06);}
.btn-base.btn-gray-black {border-color:#8e8e8e; color:#333; background-color:#b2b2b2;}
.btn-base.btn-white {border-color:var(--grey-08); color:var(--grey-01); background-color:var(--bright-08);}
.btn-base.btn-blue-white {border-color:var(--blue-01); color:var(--blue-01); background-color:var(--custom-02);}
.btn-base.btn-gray-white {border-color:var(--bright-01); color:var(--mono-03); background-color:var(--mono-04);}
.btn-base.btn-gray-c-white {border-color:var(--bright-01); color:var(--mono-03); background-color:var(--bright-08);}
.btn-base.btn-red-white {border-color:var(--sub-red-01); color:var(--sub-red-01); background-color:#fff;}
.btn-base.btn-gray-sky {border-color:#9ea4ae; color:#fff; background-color:#a7adb8;}
.btn-base.btn-huge {height:48px; padding:15px 16px; font-size:14px;}
.btn-base.btn-large2 {height:40px; padding:10px 13px; font-size:13px;}
.btn-base.btn-large {height:39px; padding:10px 16px; font-size:14px;}
.btn-base.btn-medium {height:28px; padding:5px 6px; font-size:12px;}
.btn-base.btn-small {height:26px; padding:4px 5px; font-size:11px;}
.btn-base.btn-expand {width:100%;}
.btn-base.btn-recent {display : flex; align-items: center; justify-items: center; justify-content: center; height:50px; padding:15px 40px;}
.btn-base.btn-recent > span{display: inline-block; line-height: 17px; font-size:17px; font-weight:bold;}
.btn-base.btn-recent .view-vol{margin-left: 7px;}
.btn-base.ico-base {height:auto;}
.btn-base.ico-base:before,
.btn-base.ico-base:after {margin-top:-1px;}
.ladda-button {position:relative;}
.ladda-button.btn-disabled {opacity:1;}
.ladda-button .ladda-spinner {position:absolute; top:50%; left:50%;}
.ladda-button[data-loading] .ladda-label {visibility:hidden;}
.ladda-button.btn-red-white[data-loading] {background-color:var(--sub-red-01);}
.ladda-button.btn-gray-light[data-loading] {background-color:#ccc;}
.ladda-button.btn-blue-white[data-loading] {background-color:var(--blue-01);}
.ladda-button.btn-gray-white[data-loading] {background-color:#aaa;}
.ladda-button.btn-white[data-loading] {border-color:#ccc; background-color:#ccc;}
.ladda-button[data-loading]:before,
.ladda-button[data-loading]:after {visibility:hidden;}

.btn-round{ display:inline-block; padding:5px 12px; font-size:12px; text-align: center; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; -ms-border-radius:50px; -o-border-radius:50px; }
.btn-round.blue{color:#fff; background:var(--blue-01);}

@media (max-width:359px) {
  .btn-base.btn-recent .recent-vol{max-width:138px;}
}
@media (min-width: 360px) and  (max-width: 410px){
  .btn-base.btn-recent .recent-vol{max-width:178px;}
}
@media (min-width: 411px) {
  .btn-base.btn-recent .recent-vol{max-width:228px;}
}
@media (min-width:640px) {
  .btn-base.btn-recent .recent-vol{max-width: unset;}
  .btn-base.btn-recent .view-vol{margin-left: 10px;}
}

/* Font Size */
.font-20{font-size:20px !important;}
.font-15{font-size:15px}

/* Color */
.txt-blue-main{color:var(--blue-01);}
.txt-red-main{color:var(--sub-red-01);}

/* Position */
.float-left{float: left;}
.float-right{float: right;}

/* Bullets */
.bullets-a,
.bullets-b {position:relative; padding-left:13px;}
.bullets-c,
.bullets-d {position:relative; padding-left:10px; line-height:inherit;}
.bullets-a:before {content:''; position:absolute; top:8px; left:5px; display:block; width:2px; height:2px; border-radius:2px; background-color:#bbb;}
.bullets-b:after {content:''; position:absolute; top:8px; left:5px; display:block; width:2px; height:2px; border-radius:2px; background-color:var(--blue-01);}
.bullets-c:before {content:''; float:left; margin-left:-10px;}
.bullets-d:before {content:''; position:absolute; top:8px; left:1px; display:block; width:3px; height:1px; background-color:#555;}
.spine:after {content:''; position:absolute; left:50%; width:0; height:0; border-style:solid;}

/* Alert */
.alert {position:fixed; top:0; left:0; display:none; width:100%; min-width:320px; height:100%; overflow-x:hidden; overflow-y:auto; background-color:rgba(0,0,0,.5); z-index:1200;}
.alert .alert-wrap {position:absolute; top:50%; left:50%; overflow:hidden; width:250px; margin-left:-125px; border-radius:4px; background-color:#fff; box-shadow:0 0 3px 3px rgba(0,0,0,.1); z-index:1210;}
.alert .alert-wrap .alert-body {min-height:115px; text-align:center;}

/* Modal */
.modal {position:fixed; top:0; left:0; display:none; width:100%; /*min-width: 320px;*/ height:100%; overflow-x:hidden; overflow-y:auto; z-index:1200;}
.modal .overlay {position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); z-index:210; transition:opacity 150ms linear; opacity:0;}
.modal .modal-wrap {position:absolute; top:50%; left:50%; overflow:hidden; border-radius:4px; background-color:var(--bright-09); box-shadow:0 0 3px 3px rgba(0,0,0,.1); z-index:1210;}
.modal .modal-wrap .modal-title {position:relative; padding:13px 15px 11px;}
.modal .modal-wrap .modal-title .ico-close-x {position:absolute; top:50%; right:10px; margin-top:-10px;}
.alert .alert-wrap .alert-tail,
.modal .modal-wrap .modal-tail {border-top:1px solid var(--bright-01);}
.alert .alert-wrap .alert-tail [class*=grid-] .block:first-child,
.modal .modal-wrap .modal-tail [class*=grid-] .block:first-child {border-right:1px solid #ddd;}
.alert .alert-wrap .alert-tail [class*=grid-] .block:last-child button ,
.modal .modal-wrap .modal-tail [class*=grid-] .block:last-child button {color:var(--blue-01);}

 /* modal-favorite */
.modal.favorite .modal-wrap {width:290px; margin-left:-145px;}
.modal.favorite .modal-wrap{ position:absolute; top:50%; left:50%; overflow:hidden; border-radius:6px; background-color:#fff; box-shadow:0 0 3px 3px rgba(0,0,0,.1); z-index:1210; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; }
.modal.favorite .modal-wrap .modal-title{position: relative; height: 45px; padding: 10px; font-size:14px; line-height: 25px; color:#fff;  text-align: center; background: var(--blue-01);}
.modal.favorite .modal-wrap .favorite-list {padding: 0;}
.modal.favorite .modal-wrap .favorite-list > li {overflow:hidden; height: 54px; position: relative; padding:7px 15px 12px 15px; border-bottom: 1px solid #ddd;}
.modal.favorite .modal-wrap .favorite-list > li > span{font-size:11px;line-height: 12px; color: #999;}
.modal.favorite .modal-wrap .favorite-list > li > p{ width:190px; margin-top:2px; font-size: 12px; letter-spacing: -1px; color: #333;}
.modal.favorite .modal-wrap .favorite-list > li > div{position: absolute; top:15px; right: 10px;}
.modal.favorite .modal-wrap .favorite-list > li > div > a {margin-right: 7px;}
.modal.favorite .modal-wrap .modal-footer{position:relative; width:100%;}
.modal.favorite .modal-wrap .modal-footer .btn-close-favorite{display: block; width:100%; height:50px; padding:12px; font-size:14px; line-height: 20px; text-align: center; color:#000;}

/* Review-form */
.modal.review-form .modal-wrap {position:relative; left:0; margin:0 30px; border-radius: 10px;}
.modal.review-form .review-rating {padding:25px 0 20px; text-align:center; background-color:#f7f7f7;}
.modal.review-form .review-rating .text-author {margin-top:14px;}
.modal.review-form .review-title {padding:20px 25px 0;}
.modal.review-form .review-title .input-wrap,
.modal.review-form .review-cont .textarea-wrap {display:block; border-bottom:2px solid var(--blue-01);}
.modal.review-form .review-title .input-wrap .input-text {border:0 none;}
.modal.review-form .review-cont {padding:25px 25px;}
.modal.review-form .review-cont .textarea-wrap textarea {display:block; height:120px; border:0 none;}
.modal.review-form .review-cont p {padding-top:3px; text-align:right;}

#event-review-write.modal.review-form .modal-wrap { position:fixed; left:50%; top:50%; width:84%;}
@media (min-width:640px) {
  .modal.review-form .modal-wrap {position:absolute; left:50%; width:580px; margin-left:-290px;}
}

/* 작가의 다른작품 멀티 보기 */
.modal.author .modal-wrap {width:280px; margin-left:-140px;}
.modal.author .share-list {padding:15px 15px 5px;}
.modal.author .share-list li {margin-bottom:10px;}

/* sns share */
.modal.sns .modal-wrap {width:250px; margin-left:-125px;}
.modal.sns .share-list {padding:15px 5px 25px;}
.modal.sns .share-list li {float:left; width:25%;}
.modal.sns .share-list li a {position:relative; display:block; padding-top:55px; text-align:center; font-size:9px; color:#a6acb7;}
.modal.sns .share-list li a:before {position:absolute; top:0; left:50%; margin-left:-25px;}

/* 얼럿 */
.modal.type-alert .modal-wrap {width:230px; margin-left:-115px;}
.modal.type-alert .modal-body {padding:25px 15px 0; text-align:center;}
.modal.type-alert .modal-body p {font-size:12px; color:#555;}
.modal.type-alert .btnset {margin:25px -15px 0; padding:12px 0; border-top:1px solid #d5d5d5;}
.modal.type-alert .btnset .btn-base {margin:0 2px;}

/* 페이지형 레이어 */
#page-modal {overflow-x:auto;}
#layerstyle-page {position:relative; padding-top:52px; background-color:var(--bright-08);}
#layerstyle-page .layer-header {position:fixed; top:0; width:100%; z-index:12;}
#layerstyle-page .layer-header .title {height: 52px; padding:17px 16px; font-size:18px; line-height: 1; font-weight: 600; color:#fff; background-color:var(--blue-01);}
#layerstyle-page .layer-header .title.center {text-align: center;}
#layerstyle-page .layer-header .action-back {position: absolute; top: 14px; left: 16px;}
#layerstyle-page .layer-header .action-back.zzim {position: absolute; top: 14px; left: 16px;}
#layerstyle-page .layer-header .ico-close-w {position:absolute; top:14px; right:16px; left: unset;}
#layerstyle-page .layer-body .inner {padding:10px;}
#layerstyle-page.bg-gray { background-color: var(--bright-08) !important; }

/* context-menu */
.review-list .img-report{background-image: url(/images/common/icon-list-siren.svg);width: 18px;height: 18px;background-size: 18px;display: inline-block; }
.review-list .btn-report{display: inline-block;vertical-align: middle; width: 20px; height: 20px; text-align: center;}