@charset"utf-8";

body {background: #4a4c57;}
header{box-shadow:0 0.1em 0.1em;left: 0;right: 0;z-index: 10;background: #fff;color: #000;}
header h2 {margin-left: 0.625rem;width: 7.75rem;height: 3rem;background: url(img/web_logo.png) no-repeat left;background-size: 6.5rem 2.25rem;}
a {transition: all 0.3s;}
footer, .top-side, .left-area, .header-content {display: block;}
section:after, ul:after, div:after, header:after, footer:after,nav:after {content: "";display: block;clear: both;}
.btn {display: inline-block;border-radius: 2px text-align:center;padding: 8px 15px;font-size: 13px;}
#navbar { position:fixed; top:0; left:0; right:0; z-index:10; height:3rem; background:#fff; color:#000;}
#toggle-sidebar {position: absolute;top: 0rem;right: 0rem;color: #000;font-size: 1rem;cursor: pointer;width: 3rem;height: 3rem;text-align: center;line-height: 3rem;}
#navbar {position: fixed;top: 0;bottom: 0;height: 5.625rem;}
.navbar-content, .pn-ProductNav_Wrapper, #toggle-sidebar, #sidebar {display: none;}	
.top-side {width: 100%;height: 1.875rem;background: #6f7384;}	
.group {max-width: 80rem;margin: 0 auto;min-width: 80rem;position: relative;} 
.top-btn {position: fixed;bottom: 70px;right: 10px;}
.top-btn a, .viewtop-btn a {display: block;width: 50px;height: 50px;border-radius: 100px;background: url(img/top_btn.png) no-repeat center #5974ff;}
.div-flex{display: flex !important;flex-wrap: nowrap;}
.current {display: block;}
.webtoon-view{background-color: #ffffff;overflow-X: hidden;}
.top-side:after {content: "";display: block;clear: both;}
.top-side div.left {float: left;width: 12.5rem;}   
.top-side div.left a {display: inline-block;padding: 0px 0.625rem;height: 1.875rem;font-size: 0.75rem;color: #cdcfdd;line-height: 1.875rem;}  
.top-side div.right {float: right;width: 120px;}
.top-side div.right a {width: 20px;padding: 7px;line-height: 28px;color: #cdcfdd;}
.top-side div.left a:hover, .top-side div.right a:hover {color: #fff;}
.header-content h2 {float: left;width: 14%;height: 60px;background: url(img/web_logo.png) no-repeat center;background-size: 124px 43px;}
.header-content nav {float: left;width: 55%;line-height: 49px;}
.header-content nav ul{display: flex;}
.header-content nav li {display: inline-block;padding: 0px 10px;text-align: center;}
.header-content nav a {display: inline-block;font-size: 15px;font-weight: bold;color: #333;padding: 4px 1px;}
.header-content nav a.active {color: #000;font-weight: bold;border-bottom: 3px solid #5974ff;}
.searchArea{float: right;width: 220px;right: 0;display: block;position: absolute;top: 0.8em;}
.searchArea .box{padding: 3px;width: 218px;border: 1px solid #ddd;border-radius: 50px;} 
.searchArea .box input{float:left; margin: 2px 8px; padding:5px; width:155px;}
.searchArea .box .btn-search-pc{float:right; margin: 2px; padding:3px 3px; color:#5974ff; background-color:#fff; border-radius: 100px;}
.searchArea .box .fa-2 {font-size: 20px;}
.searchResult{display: none;overflow-y: auto;padding: 0.4em;color: #fff;background-color: #2c2c2c;box-shadow: 0 0.1em 0.1em #000;}
.searchItem {padding: 0.8em;background-color: #292929;}
.searchLink {display: block;text-decoration: none;}
.searchHead {float: left;width: 20%;}
.searchPng {padding: 100% 100% 100% 100%;background-image: url(img/sprite.png);background-size: auto 100%;}
.searchDetail {float: left;padding: 0 0.4em;width: 90%;}
.searchDetailTitle {font-size: 1.2em;color: #fff;}
.navbar-margin {display: block;height: 45px;}
.bg_mask {display: none;position: fixed;width: 100vw;height: 100vh;background-color: #000000;opacity: 0.5;z-index: 9998;top: 0px;left: 0px;}

/*회원로그인*/
.login_box.layer_box {display: none;position: fixed;top: 20%;left: 50%;z-index: 9999;background-color: #ffffff;width: 100%;max-width: 400px;min-height: 310px;margin-left: -200px;border-radius: 10px;border: 2px solid #5974ff;text-align: center;box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);padding-bottom: 20px;}
.login_box h3 {color: #5974ff;width: 100%;height: 70px;line-height: 70px;font-size: 30px;text-align: center;;position: relative;}
.btn_layer_close {top: 10px;right: 10px;position: absolute;width: 30px;height: 30px;display: block;cursor: pointer;}
.login_box ul .message {clear: both;width: 100%;box-sizing: border-box;padding: 20px 10px 10px;text-align: center;font-size: 16px;color: #333;font-weight: bold;line-height: 1.5em;}
.login_box ul .message i {font-size: 50px;color: #5974ff;}
.login_box ul .input {box-sizing: border-box;padding: 10px 30px;}
.login_box ul .input input {padding: 10px;width: 100%;border: 1px solid #ced4f5;box-sizing: border-box;height: 40px;margin: 5px 0;border-radius: 5px;}
.login_box ul .button {box-sizing: border-box;padding: 0px 30px 10px;}
.login_box ul .button button {width: 100%;height: 60px;font-weight: bold;border: 2px solid #5974ff;background-color: #5974ff;color: #ffffff;border-radius: 5px;cursor: pointer;}
.login_box ul .bottom {clear: both;width: 100%;font-size: 13px;box-sizing: border-box;padding: 10px 30px;text-align: center;}
.login_box ul .bottom span {float: left;text-align: left;padding-top: 10px;}
.login_box ul .bottom button {float: right;width: 130px;height: 40px;font-weight: bold;border: 2px solid #5974ff;background-color: #ffffff;color: #5974ff;border-radius: 5px;cursor: pointer;}

/*회원가입*/
.signup_box.layer_box {display: none;position: fixed;top: 20%;left: 50%;z-index: 9999;background-color: #ffffff;width: 100%;max-width: 400px;min-height: 340px;margin-left: -200px;border-radius: 10px;border: 2px solid #5974ff;text-align: center;box-shadow: 3px 3px 10px 0px #000;padding-bottom: 20px;}
.signup_box h3 {padding: 30px 0px 10px 0px;color: #5974ff;width: 100%;font-size: 30px;text-align: center;}
.signup_box h3 i {color: #5974ff;font-size: 50px;}
.fa-edit:before, .fa-pencil-square-o:before {content: "\f044";}
.signup_box ul {padding-top: 10px;}
.signup_box ul li {float: left;}
.signup_box ul .input {width: 100%;box-sizing: border-box;padding: 0px 30px;}
.signup_box ul .input input {width: 100%;border: 1px solid #ced4f5;box-sizing: border-box;height: 40px;margin: 5px 0;padding-left: 10px;border-radius: 5px;}
.signup_box ul .button {clear: both;width: 100%;box-sizing: border-box;padding: 10px 30px;}
.signup_box ul .button button {width: 100%;height: 50px;font-weight: bold;border: 2px solid #5974ff;background-color: #5974ff;color: #ffffff;border-radius: 5px;cursor: pointer;}

/*작은배너(3줄)*/
.top-banner {padding: 0.3125rem 0rem;background-color: #c9ccd5;}
.top-banner ul {display: flex;list-style-type: none;flex-wrap: wrap;margin: 0 -0.5rem;}
.top-banner ul li{width: calc(100% / 3);}
.top-banner ul li a{padding: 0.25rem;display: block;}
.top-banner ul .w100{width: 100% !important;}

/*웹툰 index.html 리스트내용*/
.side-bnr {display: block;position: relative;z-index: 9;}
#content {margin-top: 48px;padding-bottom: 20px;background-color: #eff1f4;}
#content .group h1 {font-weight: normal;font-size: 25px;margin: 20px 0 20px;}
#content .group .right {position: relative;float: right;margin-top: -37px;}
#content .group .right a {display: inline-block;overflow: hidden;height: 33px;line-height: 33px;}
#content .group .right a:before {content: "";background: url(img/radio_off.png) no-repeat center;background-size: 18px 18px;width: 18px;height: 33px;display: block;float: left;margin-left: 5px;}
#content .group .right a.active:before {background: url(img/radio_on.png) no-repeat center;background-size: 18px 18px;margin-left: 20px;}
#content .group .right a span {color: #555;float: left;margin-left: 5px;font-weight: bold;}
#content .group .right a.active span {color: #5974ff;}

#content .group .sub-tab, #content .group .tab {clear: both;display: block;overflow: hidden;width: 100%;height: 35px;margin: 0 auto;margin-bottom: 10px;border: 1px solid #ddd;border-right: none;margin-bottom: 5px;}
#content .group .mg {margin-bottom: -1px;}
#content .group .sub-tab a, #content .group .tab a {height: 35px;line-height: 35px;text-align: center;background-color: #ffffff;border: 1px solid #ddd;margin-left: -2px;margin-top: -1px;font-size: 14px;}
#content .group .tab8 a {width: calc(100% / 8);}
#content .group .tab a.active, #content .group .sub-tab a.active {background-color: #5974ff;color: #ffffff;}

.webtoon-list {}
.webtoon-list ul{display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: center;margin: 0 -0.2rem;}
.webtoon-list ul li{width:  calc(100% / 7);}
.webtoon-list ul li a {position: relative;display: block;overflow: hidden;background-color: #ffffff;margin: 0 0.15rem;border: 1px solid #ccc;margin-bottom: 0.25rem;}
.webtoon-list .list-box .img{height: 130px;display: block;}
.webtoon-list .list-box .img img{width: 100%;height: 100%;}
.webtoon-list .list-box .txt {padding: 10px;overflow: hidden;}
.webtoon-list .list-box .txt .subject {font-size: 13px;font-weight: bold;color: #000;overflow: hidden;white-space: nowrap;word-wrap: normal !important;text-overflow: ellipsis;}
.webtoon-list .list-box .txt .tags {font-size: 12px;font-weight: bold;color: #8fa4c3;}
.webtoon-list .list-box .txt .rd {font-size: 12px;font-weight: bold;color: #777;padding-top: 10px;}
.toon-adult-view {position: absolute;top: 2px;right: 2px;z-index: 1;background-color: #e50020;padding: 5px;color: #fff;border-radius: 20px;font: 11px Arial;width: 14px;height: 14px;opacity: 0.6;}

/*page-list스킨*/
.img-box{width: 60%;height: 300px;position: relative;float: left;display: block;overflow: hidden;}
.img-box img {min-height: 300px;width: 100%;display: block;overflow: hidden;}
.text-box {position: relative;float: left;width: 40%;height: 300px;display: block;overflow: hidden;background-color: #fff;margin-top: 0px;}
#content .group .text-box h1 {font-weight: bold;font-size: 20px;margin: 15px 30px;}
.text-box .sub {font-size: 13px;font-weight: bold;padding-bottom: 10px;margin: 0 30px 15px;border-bottom: 1px solid #ddd;color: #5974ff;}
.text-box .sub strong {font-weight: bold;color: #333;}
.text-box .txt {font-size: 13px;margin: 5px 0 5px 30px;color: #aaa;}
.text-box .btn {position: absolute;display: block;width: 100%;margin: 0px auto;padding: 0px;bottom: 20px;text-align: center;}
.text-box .btn button {opacity: 0.7;}
.text-box .btn button {width: 130px;height: 40px;font-weight: bold;border: 2px solid #5974ff;background-color: #fff;color: #5974ff;}
.text-box .btn button:last-child {background-color: #5974ff;color: #fff;}

#content .box {position: relative;display: flex;overflow: hidden;max-width: 80rem;min-width: 80rem;margin: 0 auto;}
#content .box .left-box {display: block;width: 70%;margin: 10px 0 20px;position: relative;padding-right: 0.75rem;}
#content .box .left-box h1 {font-weight: normal;font-size: 25px;margin: 20px 0 20px;}

.bbs-list ul {display: block;width: 100%;border-bottom: 1px solid #ddd;}
.bbs-list ul li {display: block;width: 100%;height: 65px;border-top: 1px solid #ddd;position: relative;}
.bbs-list ul li a {position: relative;display: block;overflow: hidden;width: 100%;}
.bbs-list .list-box .subject {float: left;display: inline-block;color: #555555;font-size: 16px;line-height: 65px;overflow: hidden;white-space: nowrap;word-wrap: normal !important;width: 65%;}
.bbs-list .list-box .date {float: right;color: #aaaaaa;font-size: 14px;font-weight: normal;width: 90px;line-height: 65px;}
#content .box .right-box {display: block;width: 30%;margin: 10px 0 20px;}

.side_tab {margin-top: 10px;background-color: #fff;border: 1px solid #ddd;border-bottom: 0px;display: flex;justify-content: flex-start;}
.side_tab li {width: calc(100%/3);border-left: 1px solid #ddd;padding: 10px 0px;text-align: center;text-align: center;cursor: pointer;}
.side_tab li:nth-child(1) {border-left: 0px;}
.side_tab .current {font-weight: bold;color: #5974ff;}
.tabcontent {display: none;}
.side-list {border: 1px solid #ddd;border-top: 0px;}
.side-list li {position: relative;display: block;width: 100%;height: 60px;border-top: 1px solid #ddd;background-color: #fff;}
.side-list li a {position: relative;display: block;width: 100%;height: 60px;}
.side-list li .img {width: 60px;height: 60px;display: block;overflow: hidden;float: left;}
.side-list li .img img {min-height: 60px;}
.side-list li .txt {height: 60px;overflow: hidden;float: left;white-space: nowrap;}
.side-list li .txt p:nth-child(1) {font-size: 12px;font-weight: bold;color: #000;margin: 12px 0 0 12px;}
.side-list li .txt p:nth-child(2) {font-size: 12px;font-weight: normal;color: #aaa;margin: 2px 0 0 12px;}
.right-box .current{display: block;}

/*view.html css*/
.webtoon-body {position: relative;margin: 0 auto;background-color: #ffffff;margin-top: 0px;margin-bottom: 90px;text-align: center;}
.webtoon-body .nextpage {position: fixed;top: 50%;right: 0px;margin-top: -16px;padding: 20px 10px;border-radius: 50px 0px 0px 50px;background: rgba(0, 0, 0, 0.2);z-index: 9999;}
.webtoon-body .nextpage:hover, .webtoon-body .prepage:hover {background-color: #5974ff;}
.webtoon-body .nextpage a, .webtoon-body .prepage a {display: block;font-size: 25px;color: #fff;}
.webtoon-body .prepage {position: fixed;top: 50%;left: 0px;margin-top: -16px;padding: 20px 10px;border-radius: 0 50px 50px 0;background: rgba(0, 0, 0, 0.2);z-index: 9999;}
.image-view h2{position: relative;margin:0 -0.25rem 0.5rem -0.25rem;padding:2em 0;background-color: #2c2c2c;font-size: 14px;font-weight: 300;}
.image-view h2 span {display: block;font-weight: bold;font-size: 1.25rem;margin: 0;padding: 0;box-sizing: border-box;text-align: center;color: white;}
.image-view h2 .bookmark{position: absolute;top: 0px;right: 0px;width: 60px;height: 100%;font-weight: bold;background-color: #5974ff;color: #fff;cursor: pointer;font-size: 14px;}
.image-view h2 .bookmark span{display: block;font-weight: bolder;font-size: 0.825rem;margin: 0;padding: 0;box-sizing: border-box;text-align: center;color: white;}
.image-view p img{max-width: 100%;width: unset;}

.webtoon-bottom {position: fixed;bottom: 0px;left: 0px;width: 100%;height: 70px;z-index: 9999;background-color: #26242500;}
.webtoon-bottom .prev {position: absolute;top: 0px;left: 0px;float: left;width: 70px;height: 70px;z-index: 2;}
.webtoon-bottom .prev a:before {content: "";float: left;overflow: hidden;display: inline-block;background: url(img/arrow_prev.png) no-repeat center;background-size: 16px 34px;width: 25px;height: 70px;}
.webtoon-bottom .prev a, .webtoon-bottom .next a {width: 70px;height: 70px;line-height: 70px;color: #aaa;}
.webtoon-bottom .prev a:hover, .webtoon-bottom .next a:hover {color: orangered;}
.webtoon-bottom .center {position: relative;top: 0px;text-align: center;width: 100%;height: 70px;line-height: 70px;margin: 0 auto;}
.webtoon-bottom .zoomout {overflow: hidden;display: inline-block;width: 50px;height: 70px;}
.webtoon-bottom .zoomout.plus {background: url(img/icon_plus.png) no-repeat center;background-size: 36px 29px;}
.webtoon-bottom .zoomout.plus:hover {background: url(img/icon_plus_over.png) no-repeat center;background-size: 36px 29px;}
.webtoon-bottom .home {overflow: hidden;display: inline-block;background: url(img/icon_home.png) no-repeat center;background-size: 36px 29px;width: 50px;height: 70px;}
.webtoon-bottom .home:hover {background: url(img/icon_home_over.png) no-repeat center;background-size: 36px 29px;}
.webtoon-bottom .list {overflow: hidden;display: inline-block;background: url(img/icon_list.png) no-repeat center;background-size: 36px 29px;width: 50px;height: 70px;}
.webtoon-bottom .list:hover {background: url(img/icon_list_over.png) no-repeat center;background-size: 36px 29px;}
.webtoon-bottom .next {position: absolute;top: 0px;right: 0px;float: right;width: 70px;height: 70px;z-index: 2;}
.webtoon-bottom .next a:after {content: "";float: right;overflow: hidden;display: inline-block;background: url(img/arrow_next.png) no-repeat center;background-size: 16px 34px;width: 25px;height: 70px;}
#loading-wrap {position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 9999;}
#loading {position: absolute;margin: -25px 0 0 -25px;top: 50%;left: 50%;display: inline-block;width: 50px;height: 50px;border: 3px solid #ccc;border-radius: 50%;border-top-color: #ff6533;animation: spin 1s ease-in-out infinite;-webkit-animation: spin 1s ease-in-out infinite;}

#paging{display: block;width: 100%;border: none;margin: 20px 0;border-left: 1px solid #ddd;}
#paging li {float: left;display: inline-block;border: none;width: auto;height: 40px;margin-left: -1px;border: 1px solid #ddd;}
#paging li a {display: block;padding: 0 15px;width: auto;height: 40px;line-height: 40px;text-align: center;}
#paging li a.active {background-color: #5974ff;color: #fff;font-weight: bold;}

footer h2 {margin-right: 10px;float: left;width: 140px;height: 60px;background: url(img/web_logo.png) no-repeat left;background-size: 140px 60px;}
footer h2 a {display: block;width: 124px;height: 60px;}
footer nav {float: left;margin-top: 10px}
footer nav a {display: inline-block;color: #8b8d9b;font-size: 14px;padding: 12px;text-align: center;}
footer ul {float: right;padding: 12px;margin-top: 10px}
footer ul li {display: inline;padding: 0px 10px;}