﻿@charset "utf-8";

/* fonts */
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);/*font-family: 'Nanum Gothic';*/
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);/*font-family: 'Nanum Myeongjo', serif;*/

* {
	margin: 0;
	padding: 0;
	border: 0 none;
	outline : 0;
	font-size: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%; 
	font: inherit;
	font-family: '나눔고딕', 'NanumGothic', 'NG', '맑은 고딕', 'MalgunGothic', 'MG', 'Dotum', 'Arial', 'sans-serif';
	vertical-align: baseline;
	text-decoration:none;
	color:#555;
}

/* html,body{width:100%;height:100%; padding:0; margin:0;} */
html,body{width:100%; padding:0; margin:0;}
body {
	line-height: 1; font-size:12px; color:#555; background-color:#ffffff; text-align:left;*word-break:break-all;-ms-word-break:break-all;
	overflow-x: hidden;
}

ul,li {list-style:none;}

.cf:after {content:''; display:block; clear:both;}
.fl{float:left;}
.fr{float:right;}


/* ======================== LAYOUT ======================= */
#wrap {width: 100%; min-width:1200px; max-width:1200px;  position: relative;  margin:0 auto;}

#top{width: 100%; min-width:600px; max-width:1200px; margin:0 auto; margin-top:2px 0 0 0 ; text-align:left;}
.nav {height:56px; width:100%; line-height:56px;}
.nav ul {min-width:600px; max-width:1200px; margin:0 auto;  line-height:56px;}

.nav_box > a {
	font:16px "맑은고딕","나눔고딕",'Nanum Gothic';
	color:#333;
	text-decoration:none;
	padding:5px 25px 5px 25px; 
	background-color:#fff;	
	text-align: center;
}
.nav_box > a:hover {
	font:16px "맑은고딕","나눔고딕",'Nanum Gothic';
	color:#fff;
	border-radius: 4px ;		
	padding:5px 25px 5px 25px; 
	background-color:#f5116a;
	text-align: center;
}
/*
.nav_box > a:hover {
	font:16px "맑은고딕","나눔고딕",'Nanum Gothic';
	color:#fff;
	border-radius: 4px ;		
	padding:5px 25px 5px 25px; 
	background-color:#333333;
	text-align: center;
}
.nav_boxn > a {
	font:16px "맑은고딕","나눔고딕",'Nanum Gothic';
	color:#fff;
	border-radius: 4px ;		
	padding:5px 25px 5px 25px; 
	background-color:#333333;
	text-align: center;
}
*/
.nav_boxn > a {
	font:16px "맑은고딕","나눔고딕",'Nanum Gothic';
	color:#f5116a;	
	padding:5px 25px 5px 25px; 
	background-color:#fff;
	text-align: center;
	font-weight:bold;
}


/* 검색 */		
.search_txt {width:164px; height:26px; line-height:26px; background:#e9e9e9; border-radius:2px; position: relative; top:14px; right:0px;}
.search_txt input {
	font:12px "맑은고딕","나눔고딕",'Nanum Gothic';
	width:140px; 
	height:26px;
	line-height:26px; 
	background:none; 
	border:none; 
	color:#333; 
	text-indent:6px; 
	position: absolute; top:0px; right:24px;
}	
.search_txt a { margin-top:4px; float:right; position: absolute; top:0px; right:4px;}


/* ======================== 메인배너 ======================= */
#banner_wrap {width: 100%; min-width:600x;  max-width:1200px;  margin:0 auto; position:relative; }
#banner_wrap ul.mainbnleft{width: 40%;height:250px!important;position:relative; display:inline;overflow: hidden;}	
#banner_wrap ul.mainbnright{width: 60%;height:250px!important;position:relative;display:inline;overflow: hidden; }	

.s-banner	{display:inline;width: 100%;  min-width:200x;  max-width:400px; background-color: #e9e9e9; overflow: hidden; }
.s-banner img{width:100%; height:250px!important; overflow: hidden;}


.main_banner {display:inline;width:100%; min-width:600px;  max-width:600px;  height:250px!important;float:right;position:absolute;top:0px;right:0px;overflow: hidden;}
	.main_banner .cntBox {position:relative;}
	.main_banner .slideContainer {width:100%;height:250px; overflow: hidden;}
	.main_banner .slideContainer .slideCnt{position:relative;}

	.btnCnt {position:relative; margin-top:-150px;}
	.btnCnt > div {position:absolute;top:0;}
	.btnCnt > div.btnPrev {left:20px;}
	.btnCnt > div.btnNext {position:absolute;top:0;right:20px;}
	.btnCnt a {
		display:block;width:35px;height:63px;overflow:hidden;
	}
	.btnCnt > div.btnNext a {}
	

	
/* ======================== 메인NEW 타이틀 공통======================= */	
.new_webtoon {width: 100%; min-width:600x;  max-width:1200px;  margin:0 auto; margin-top:20px;}
.new_webtoon h1 {position:relative; font-size:18px; padding-bottom:7px;border-bottom:1px solid #dadada; color:#848484;}
.new_webtoon h1 span {display:inline-block; font-size:25px; padding-right:7px; margin-right:5px; border-bottom:4px solid #ccc; padding-bottom:7px; margin-bottom:-8px; color:#333; font-weight:600;}
.new_webtoon h1 div {float:right;font-size:17px; color:#909090;}
.new_webtoon h1 div a {display:inline-block; font-weight:normal; color:#000; padding:0 10px;}
.new_webtoon h1 div a.on {color:#333;}
.new_webtoon h1 div a:first-child {font-weight:600;}
.new_webtoon h1 b {font-weight:700;}	
.more {position:absolute; right:0; top:-2px; width:60px; height:24px; line-height:24px; text-align:center; display:block; border:1px solid #dedede; font-size:12px; font-weight:900; border-radius:2px;}
.more:hover {color:#666666; background-color:#e9e9e9;  border-radius:2px;}

/* ======================== 메인NEW 썸네일이미지======================= */		
.toon_num {position:absolute; top:5px; left:5px; width:30px; padding-bottom:3px; text-align:center; display:inline-block;  font-size:1em; font-weight:900; border-radius:2px;color:#fff; background-color:#323232; line-height:16px; border:thin solid #323232; }/*  요일별과 공통 */
.toon_num2 {position:absolute; top:5px; left:38px; width:30px; padding-bottom:3px; text-align:center; display:inline-block;  font-size:1em; font-weight:900; border-radius:2px;color:#fff; background-color:#FF0000; line-height:16px; border:thin solid #323232; }/*  요일별과 공통 */
.toon_num3 {position:absolute; top:5px; left:5px; width:30px; padding-bottom:3px; text-align:center; display:inline-block;  font-size:1em; font-weight:900; border-radius:2px;color:#fff; background-color:#FF0000; line-height:16px; border:thin solid #323232; }/*  요일별과 공통 */
.toon_num4 {position:absolute; top:5px; left:5px; width:30px; padding-bottom:3px; text-align:center; display:inline-block;  font-size:1em; font-weight:900; border-radius:2px;color:#676767; background-color:#EFEFEF; line-height:16px; border:thin solid #323232; }/*  요일별과 공통 */
.webtoon_box {width: 100%; min-width:600x;  max-width:1200px;  margin:0 auto;  margin-top:22px;}
.webtoon_box div {margin-left:0px; margin-right:-13px;}
.webtoon_box div ul {margin-bottom:9px;float:left; position:relative;}
.webtoon_box div ul.w-box{width:24%; margin:3px;}
.new-img img{width:100%;   margin-left:0px;}
.webtoon_box div ul:hover .toon_num {background-position:left -65px;}

.new_box_border {position:absolute; top:0; left:0; width:100%;  min-width:148x;  max-width:248px; height:100%; border:1px solid #dedede; box-sizing:border-box;}
/* .box_border:hover {border:3px solid #75ce5a; background:rgb(0,0,0); background: transparent; background:rgba(0,0,0,0.65)} */
.new_box_border:hover {background:rgb(0,0,0); background: transparent; background:rgba(0,0,0,0.40)}

.webtoon_box div ul li {}
.webtoon_box div ul li:first-child {text-align:center;}
.webtoon_box div ul li:first-child img {}
.toon_txt {margin:0 auto; }
.toon_txt h1 {padding-left:7px; font-size:15px; color:#333; font-weight:700; margin-top:7px;margin-bottom:14px;}
.toon_txt h2 {padding-left:7px; font-size:13px; color:#333; }
.toon_txt span {padding:0 7px 0 7px; font-size:13px; color:#333;margin-bottom:16px; }
.webtoon_box div:after {clear:both; content:""; padding:0; margin:0; display:block;}
	
/* ======================== 요일별 업로드웹툰타이틀======================= */	
#day-warp {width:100%;min-width:600x;  max-width:1200px; margin:0 auto;text-align:center;}	
.day_select {width:100%;min-width:600x;  max-width:1200px; margin:0 auto; height:66px;text-align:center; }
.day_select ul {width:16%;display:inline-block;float:left;margin:0 auto;text-align:center;margin:0px 4px 10px 0px;  line-height:58px; }
/* .day_select ul {width:13.7%;display:inline-block;float:left;margin:0 auto;text-align:center;margin:0px 4px 10px 0px;  line-height:58px; } */
.day_select ul:last-child{margin:0px 0px 10px 0px;} 
.day_select a { width:100%;display:inline-block;font-size:17px; color:#424242; border-bottom:4px solid #e9e9e9;}
.day_select a:hover {color:#fff; border-bottom:4px solid #323232;  background-color:#323232;}
.day_select a.on {color:#323232;	border-bottom:4px solid #323232;}
.day_select a:hover.on {color:#fff;	border-bottom:4px solid #ccc;}

/* ======================== 요일별 업로드웹툰 리스트이미지======================= */

.day_box {width: 100%; min-width:600x;  max-width:1200px;  margin:0 auto;  margin-top:22px;text-align:center;}
.day_box div {width: 100%;min-width:600x;  max-width:1200px;text-align:center;margin:0 auto;}
.day_box div ul {margin-bottom:9px;float:left; position:relative;left:0; margin:0 auto;text-align:center;  }
.day_box div ul.d-box{display:inline-block; width:13.7%;  margin:0px 4px 10px 0px;text-align:center;}
.day_box div ul.d-box:last-child {width:13.7%;  margin:0px 0px 10px 0px;text-align:center;}
.day_box div ul.d-box a:hover {background:rgb(0,0,0); background: transparent; background:rgba(0,0,0,0.40);}
.day-img img{width:100%; }
.day_box div ul:hover .toon_num {background-position:left -65px;}	
.day_box div ul li {}
.day_box div ul li:first-child {text-align:center;}
.day_box div ul li:first-child img {}
.day_txt { margin:0 auto; }
.day_txt h1 {padding:4px; font-size:0.9em; color:#000; font-weight:700; margin-bottom:10px;line-height:16px;}
.day_txt span {padding:0 7px 0 7px; font-size:13px; color:#666;}
.day_box_border {position:absolute; top:0; left:0; width:100%;  height:100%; border:1px solid #dedede; box-sizing:border-box;}
/* .day_box_border:hover {background:rgb(0,0,0); background: transparent; background:rgba(0,0,0,0.40)} */
.day_box_border:hover {border:1px solid #323232;}

/* ======================== 페이지 넘버======================= */	
.paging {width: 100%; min-width:600x;  max-width:1200px; margin:0 auto;  text-align:center; margin-top:60px ; margin-bottom:30px ; clear:both !important;}
.paging a {display:inline-block; border:1px solid #cccccc; width:23px; height:23px; vertical-align:top;}
.paging span. .paging strong {display:inline-block; vertical-align:top;}
.paging span a {border:0; color:#4b4b4b; font-weight:700; line-height:25px; width:25px; height:25px; margin-right:6px;}
.paging span a:first-child {margin-left:6px;}
.paging span a.on, .paging span a:hover {background:#666; color:#fff;}
.paging strong a {border-left:0;}
.paging strong a:first-child {border-left:1px solid #cccccc;}


/* ======================== sub1-상단배너 ======================= */
.toon_list_box {width: 100%; min-width:600x;  max-width:1200px;   margin:0 auto; background:#f3f3f3; border:1px solid #DDDDDD !important;}
.sub1bnleft{width: 52%;height: 250px !important;position:relative; display:inline;float:left;overflow: hidden;}	
.sub1bnright{width: 48%;height: 250px !important;position:relative;right:5px; display:inline;float:left; overflow: hidden;}	

.sub1-ltbanner{width: 100%;  min-width:200px; max-width:600px; height: 250px !important; background-color: #e9e9e9;overflow: hidden;}
.sub1-ltbanner img{width:100%; min-width:200px; max-width:600px;height: 250px !important;overflow: hidden; }

.sub1-rtbanner{width: 100%;  height: 100%; min-width:450x; max-width:450px; position:relative; top:20px; left:0px;padding-left:10px;}
.sub1-rtbanner p{margin-left:10px;}
.sub1-rtbanner li h1 {  margin-left:10px; color:#666; font-size:1.2em; height:63px; border-bottom:1px solid #dedede; margin-bottom:15px;}
.sub1-rtbanner li h1 b {display:block; font-size:1.4em; margin-bottom:14px;color:#000; font-weight:bold;}
.sub1-rtbanner li h2 {margin-bottom:40px;}
.sub1-rtbanner li h2 img {margin-right:4px;}
.sub1-rtbanner li h3 {margin-left:10px; line-height:23px; color:#333; height:90px;}

.btn1 {}
.btn1 span {display:inline-block; margin-right:7px; vertical-align:top;}
.btn1 span a {display:inline-block; margin-right:4px; vertical-align:top;border-radius:4px;}
.btn1 span:first-child {}
.btn1 span:first-child a:first-child {background:#ff0000; color:#fff; font-size:15px;width:85px; line-height:33px; text-align:center;}
.btn1 span:first-child a:last-child {background:#323232; color:#fff; font-size:15px;width:85px; line-height:33px; text-align:center;}
.btn1 span:last-child a:hover{background:#999;}
.toon_list_box:after {clear:both; content:""; padding:0; margin:0; display:block;}



/* ======================== 서브sub1-페이지 리스트======================= */	
.toon_sub1box {width: 100%; min-width:600x;  max-width:1200px;   margin:0 auto; position:relative; top:20px;}
.toon_sub1box ul {width: 100%; min-width:600x;  max-width:1200px;   border-top:1px solid #dadada;}
.toon_sub1box ul li:first-child {min-width:400x;  max-width:1200px; height:80px; padding:0; border-top:1px solid #dadada;}
.toon_sub1box ul li {min-width:400x;  max-width:1200px; height:80px; padding:0; border-bottom:1px solid #dadada;}
.toon_sub1box ul li:last-child {min-width:400x;  max-width:1200px;height:80px; padding:0; border-bottom:2px solid #dadada;}
/* .toon_sub1box ul li:hover {background:#f2f2f2;} */
.toon_sub1box ul li span {position:relative; display:inline-block; vertical-align:top; min-width:150x;  max-width:150px;}
.toon_sub1box ul li span:first-child {position:relative; margin-right:30px;}
/* .toon_sub1box ul li span img{margin-top:8px; width: 100%; min-width:85px; max-width:85px;  min-height:65px; max-height:65px;} */
.toon_sub1box ul li span img{
margin-top:0px; 
width: 100%; 
height:100%;
min-width:120px; 
max-width:120px;  
min-height:80px; 
max-height:80px;
}

.ico_lock {position:absolute; top:0; left:0;}
.toon_sub1box_1 {width: 100%; min-width:350x; max-width:500px;}
.toon_sub1box_1 a {font-size:13px; color:#717171;}
.toon_sub1box_1 b {display:block; padding-top:17px; padding-bottom:19px; font-size:15px; color:#010101;}
/*무료버튼*/
.toon_sub1box_2  {float:right; position:absolute; padding:0 50px 0 50px; min-width:140px;  max-width:140px; line-height:42px; border:1px solid #c3c3c3; text-align:center; background:#e9e9e9; margin-top:18px; border-radius:4px;}
.toon_sub1box_2 {color:#323232; background:#e9e9e9; } /* z-index:999; */
.toon_sub1box_2:hover{color:#fff; background-color:#33d2ea; } /* z-index:999; */


/* ======================== sub2-배너목록버튼======================= */
.baner-listbt2 {width: 100%; min-width:600x;  max-width:1200px;  margin:0 auto;}
.sub2_listbt2 {width: 100%; height:60px; margin:0 auto;}
.sub2_listbt2 li a{float:left; width: 12.5%; height:60px; line-height:60px; background-color:#323232;text-align:center; color:#fff; }
.sub2_listbt2 li a:hover {color:#fff; background-color:#595959;}
/* ======================== sub2-배너목록버튼======================= */
.baner-listbt {width: 100%; min-width:600x;  max-width:1200px;  margin:0 auto;}
.sub2_listbt {width: 100%; height:60px; margin:0 auto;}
/* .sub2_listbt li a{float:left; width: 16.66%; height:60px; line-height:60px; background-color:#323232;text-align:center; color:#fff; } */
.sub2_listbt li a{float:left; width: 20%; height:60px; line-height:60px; background-color:#323232;text-align:center; color:#fff; }
.sub2_listbt li a:hover {color:#fff; background-color:#595959;}

.sub2_listbt3 {width: 100%; height:60px; margin:0 auto;}
/* .sub2_listbt li a{float:left; width: 16.66%; height:60px; line-height:60px; background-color:#323232;text-align:center; color:#fff; } */
.sub2_listbt3 li a{float:left; width: 16.666%; height:60px; line-height:60px; background-color:#323232;text-align:center; color:#fff; }
.sub2_listbt3 li a:hover {color:#fff; background-color:#595959;}

/* ======================== sub2-썸네일 리스트 / 공통======================= 

*/

/* ======================== sub3- 작품보기 top======================= */
#warp_view{width: 100%; min-width:600x;  max-width:1200px;  margin:0 auto;   position:relative;border:1px solid #dadada;}
.view_warp {width: 100%; min-width:600x;  max-width:1200px;  margin:0 auto; line-height:82px; height:82px;}
.view_top {background:#fff;  width:100%;border-bottom:1px solid #dadada; }
.view_top span {display:inline-block; font-size:1.3em; color:#323232; vertical-align:top;padding-left:10px}
.view_top span b {display:inline-block; font-size:1.6em;color:#323232;font-weight:400;}

/*이전다음버튼*/
.view_top li { display:inline-block;vertical-align:top; border-left:1px solid #dadada;width:50px;line-height:84px; height:84px; }
.view_top li.bt_next {position:absolute; right:50px; border-right:1px solid #dadada;}
.view_top li.bt_pre1 {position:absolute; right:100px; padding-top: 0px;  }

.view_top li a{color:#323232; font-size:3.5em; font-weight:800;  margin:0 10px; }
.view_top li a:hover {color:#75ce5a; }
.view_top li a img{ 
width:32px;
height:32px;
position:absolute; top: 32px; right:8px;

}






/* ======================== 썸네일 리스트 이미지 공통======================= */
.webtoon_viewpagebox {width: 100%; min-width:600x;  max-width:1200px;  margin:0 auto;   margin-top:22px; text-align:center;}
.webtoon_viewpagebox span {margin-left:0px;  text-align:center; margin-right:-13px;}
.webtoon_viewpagebox span div {margin-bottom:9px;float:left; position:relative;}
.webtoon_viewpagebox span div.viewpage-box{ width:19%;  margin:5px;}
/* .webtoon_viewpagebox span div.viewpage-box:last-child{ width:24%;  margin-right:0px;} */

.webtoon_viewpagebox span div.viewpage-box a{width: 100%;  margin-left:0px;}

.viewpage-box .viewpage_img_large
{
width:100%; 

min-height:134px; max-height:134px; 

}

.viewpage-box .viewpage_img_large div
{width:100%; min-height:134px; max-height:134px; }


.viewpage_toon_txt { }
.viewpage_toon_txt h1 {padding-left:5px; font-size:15px; color:#333; font-weight:700; margin-top:7px;margin-bottom:14px;}
.viewpage_toon_txt span {padding:0 24px 0 7px; font-size:13px; color:#333;margin-bottom:16px; }
.webtoon_viewpagebox span:after {clear:both; content:""; padding:0; margin:0; display:block;}


/* ======================== sub4-안내페이지 ======================= */

#pt_bg {width: 100%; min-width:600x;  max-width:1200px;  margin:0 auto;  }
#pt_bg div{}



/* 웹툰출력 */
.webtoonimg {
    position:relative;
}
.webtoonimg .clear {
    position:absolute;
    left:0;
    top:0;
	right: 0; 
	bottom: 0;
	margin: auto;
}
	
	
.ico_adult {position:absolute; right:4px; bottom:5px;}
.txt_adult {position:absolute; top:3px; right:3px; width:30px; padding-bottom:3px; text-align:center; display:inline-block;  font-size:1em; font-weight:900; color:#fff; background-color:#FF0000; line-height:26px; border:thin solid #323232;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;}
.ico_dday {position:absolute; top:0; left:0; background:#FFFF66; font-weight:bold; font-size:12px; color:#555555; margin:2px; padding:5px; -moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
	

.layerblack {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:999;}
.layerblack .blackbg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.layerblack .layerpopup {display:block;}

.layerpopup {display:none; position: absolute; top: 50%; left: 50%; width: 400px; height: 250px; border: 1px solid #dedede; border-top: 5px solid #FF3300; border-bottom: 5px solid #FF3300;  background: #fff; z-index: 999; }	
.bodycontent {text-align:center;}
.Layer_icon {width:78px;height:78px;margin-top:30px;}
.bodycontent p {line-height: 30px;}
.bodycontent h3 {line-height: 30px;font-size:18px;font-weight:bold;}

.navibackbg {background:#F6F6F6;}

.login_btn4 {width:300px; margin:0 auto; margin-bottom:70px;}
.login_btn4 a {display:inline-block; width:120px; line-height:30px;text-align:center; background:#e1e1e1; border:1px solid #c0c0c0; margin-left:9px; color:#4d4d4d; font-size:17px;}
.login_btn4 a:first-child {width:140px;margin-left:0;}
.login_btn4 a:hover {background:#f2f0f0;}
.login_btn4 span a {width:140px !important;margin-left:9px !important; background:#666; color:#fff;}
.login_btn4 span a:hover {background:#919191; color:#fff;}

/*
.quick {position:absolute; width:100px; right:5px; top:500px; width:72px;}
.quick li {text-align:center; line-height:23px; height:23px; border:1px solid #e0e0e0; background:#efefef; border-top:0;}
.quick li:first-child {border-top:1px solid #e0e0e0;}
.quick li span {display:inline-block; width:34px; height:23px; line-height:23px;vertical-align:top;}
.quick li span:first-child {border-right:1px solid #e0e0e0;}
.quick a {width:100%; height:12px; display:inline-block; overflow:hidden; margin:0 auto; text-align:center;margin-top:6px;}
.quick a:hover img {margin-top:-12px;}
*/
.quick {position:absolute; z-index:9999; width:100px; right:10px; bottom:100px; width:72px;}
.quick li {text-align:center; line-height:23px; height:23px; border:1px solid #e0e0e0; background:#efefef; border-top:0;}
.quick li:first-child {border-top:1px solid #e0e0e0;}
.quick li span {display:inline-block; width:34px; height:23px; line-height:23px;vertical-align:top;}
.quick li span:first-child {border-right:1px solid #e0e0e0;}
.quick a {width:100%; height:12px; display:inline-block; overflow:hidden; margin:0 auto; text-align:center;margin-top:6px;}
.quick a:hover img {margin-top:-12px;}

.ico_bookmark {position:absolute; top:0; right:0;}


