@charset "utf-8";
/* =============================
  Copryright 2018  
 
 
============================= */


/* 2018-11-19 header - css */

header{width:100%; background:#fff !important; position:fixed; left:0; z-index:99;top:0 }
header.on{background:rgba(0,0,0,.97);}
header .header_top{width:100%; height:45px; position:relative;}
header .header_top a{display:inline-block;}
header .header_top .lgtmenu{float:left;}
header .header_top .rgtmenu{float:right; position:relative;}
header .header_top .rgtmenu a{display:inline-block; text-align:right; margin-left:6px; vertical-align:middle;}
header .header_top .rgtmenu a.recent_view_btn{display:none; width:18px; height:18px; background:url(../images/headicon_recent.png); background-size:100%; }
header .header_top .rgtmenu a span.message{width:16px; height:16px; background:url(/assets/img/mobile/common/icon_gifnote.gif); background-size:100%; position:relative; display:block;}
header .header_top .rgtmenu a span.message_menu{width:16px; height:16px; background:url(/assets/img/mobile/common/icon_gifnote.gif); background-size:100%; position:relative; display:block; }
header .header_top .rgtmenu a.btn_search{width:22px; height:22px; background:url(../images/headicon_search_n.png); background-size:100%; margin-top:13px; margin-right:5px;}
header .header_top .rgtmenu a.service_menu{width:22px; height:22px; background:url(../images/headicon_menu_n.png); background-size:100%; margin-top:13px; margin-right:20px;}
header .header_top .rgtmenu .message_ea{font-size: 10px; color: #fff; background: #ff3838; height: 17px; line-height: 19px;  border-radius: 20px; display: inline-block; text-align: center; padding: 0px 5px; min-width: 17px; position: absolute; top:-4px; right: -11px;}

header .header_top a.logo{display:block; width:168px; height:45px; float:left;  background-size:100%; margin-left:15px;}

header .mode_group{position:absolute; width:144px; height:24px; top:12px; left:50%; margin-left:-72px;}
header .mode_group li{float:left; margin-left:5px; width:43px; height:24px; line-height:26px; text-align:center; background:rgba(0,0,0,0.6); border-radius:15px; letter-spacing:0px;}
header .mode_group li a{display:block; color:#fff; font-size:11px;}
header .mode_group li.active{background:rgba(253,66,67,0.8);}

header .searchbox{position:absolute; top:6px; right:15px; background:#fff;height:32px; z-index:2; border-radius:20px; overflow:hidden; width:0; transition:all.2s; opacity:0;}
header .searchbox.open{width:70%; width:calc(100% - 100px); transition:all.2s; position:absolute; top:6px; right:13px; opacity:1;}
header span.layout_search_icon{float:left; margin:6px 5px 0 8px;}
header a.search_close{display:block; position:absolute; top:6px; right:8px; z-index:3;}
header .searchbox input{border:0; height:32px; line-height:32px; width:75%; width:calc(100% - 70px);}

header nav{width:100%;}
header nav li{display:block; float:left;}
header nav ul:after{content:""; visibility:hidden; display:block; height:0; clear:both;}
header nav .main_menu{width:100%; height:35px; border-bottom:1px solid #ddd;position: relative;box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);}
header nav .main_menu li{display:block; width:16.6%; height:35px; line-height:35px; background-color:#fff;  }
header nav .main_menu li:last-child{border:0;}
header nav .main_menu li.active{background:#fff;}
header nav .main_menu li.active a{color:#e63740; border-bottom:2px solid #e63740;}
header nav .main_menu li a{display:block; color:#000; line-height:34px; text-align:center; font-size:14px; font-weight:bold;}
header nav .main_menu li a span.icon_new{background:url(/assets/img/common/icon_new.png) no-repeat; display:inline-block; width:15px; height:15px; background-size:100%; vertical-align:middle; margin:-3px 0 0 3px;}
header nav .sub_menu_wrapper{background:rgba(255,255,255,0.8);}
header nav .sub_menu{width:100%;}
header nav .sub_menu li.no6{width:16.6%; float:left; text-align:center; font-weight:bold; height:35px; line-height:35px;}

header nav .sub_menu li.no7{width:13.5%; float:left; text-align:center; font-weight:bold; height:35px; line-height:35px;}
header nav .sub_menu li.no7:first_child{width:12%;}
header nav .sub_menu li{width:20%; float:left; text-align:center; font-weight:bold; height:35px; line-height:35px;}
header nav .sub_menu li a{opacity:0.9; color:#000;}
header nav .sub_menu li.active a{color:#e63740; opacity:1;}
header nav .sub_menu li.n4{width:25%;}
header nav .sub_menu li.no7 a.icon_new{background:url(/assets/img/common/icon_new_opacity.png) no-repeat; display:inline-block; background-size:15px; background-position-y:0;}
 
header .mid_menu {visibility: hidden;opacity: 0;height:0;background: #fff;border-bottom: 1px solid #eee;}
header .mid_menu.on {visibility: visible; opacity: 1; background: #fff;}
 
#sb-search-result {display: none;position: absolute;background: #010101;width: 100%;top: 0px;z-index: 1;}

.today_webtoon {background:#fff;}
.today_webtoon .search_bg{background:#fd4243; height:43px; position:absolute; top:0; z-index:0; width:100%;}
.today_webtoon .webtoon_list {background:#fff; width:100%; position: absolute; top: 108%; left: 0px; z-index: 100; }
.today_webtoon .webtoon_list .list_group_lft { border-top: 1px solid #CECECE; width: 100%;}
.list_group_lft h1.week {border-bottom: 1px solid #EFEFEF; height: 35px; line-height: 35px;  background:#F9F9F9;}
.list_group_lft h1.week a{color: #fd4243; padding-left: 12px;}
.webtoon_list .list_group_lft li:first-child {border-top:1px solid #ddd;}
.webtoon_list .list_group_lft li:last-child {border-bottom:none;}
.webtoon_list .webtoon_cover {width: 87px;}
.none_title {font-size: 12px; color: #333; font-weight: bold; margin-bottom: 2px; padding: 12px;}
.overlay {background: rgba(0,0,0,0.6); display: block; height: 100%; left: 0;  position: fixed; top: 43px; width: 100%; z-index: 8;}
.new_toon {font-weight: 600; color:#FDBABB; font-size:11px; display:inline-block; position:absolute; top: 3px; z-index: 99; left: 20px;  padding-right: 5px;  border-right: 2px solid #FDBABB; line-height:11px;}
.recom {border-top:none; left:30px; padding: 53px 15px 3px; background: #FD4243; width:100%;}
.recom li.recom_list {border:none; left:78px; top:0px; font-size:14px; color:#fff;}
.recom li a { font-size:11px; border:none; display:block;}


.slide_overlay a.layer_close {display: block;width: 40px;height: 40px; background: rgba(253,66,67,1);position: absolute;top: 15px;right: 256px;z-index: 10;padding: 11px;opacity: 0.0;}
.slide_menu .sns {width: 16px;margin-top: 12px;margin-right: 2px;border-radius: 12px;float: left;}
.tinyscroll_1{ width: 320px; height: 627px; overflow-y: auto; }
.tinyscroll_wth1{ width:280px; }

.coin_info{ position:relative;height:40px; }

.modal {position:fixed; top:0px; left:0px; width:100%; height:100%; display: none; background-color: #000; filter:alpha(opacity=60); opacity:0.6; background-position: initial initial; background-repeat: initial initial; z-index:999;}
.alert_layer{position:absolute; top:0px; left:0px; width:100%; z-index:99999999;}
header .searchbox.open { width:93% !important; }


.slide_overlay{width:100%; height:100%; background:#000; position:fixed; top:0; left:0; z-index:9; opacity:0.7; display:none;}
.slide_menu{width:280px; height:auto;  background:#f6f6f6; position:fixed; top:0; right:-100%; box-shadow:-2px 0px 5px 0px rgba(0,0,0,0.2); z-index:10; transition:all.3s; padding-bottom:50px;}
.slide_menu.open{right:0; }
.slide_menu a.layer_close{display:block; width:40px; height:40px; background:rgba(253,66,67,1); position:absolute; top:0px; right:100%;}
.slide_menu a.layer_close span{margin-top:11px;}
.slide_menu a{display:block;}
.slide_menu .user_info{width:100%; height:40px; line-height:40px; background:#3e3e3e; padding:0 10px;}
.slide_menu .user_info a.user_id{display:block; width:69%; width:calc(95% - 80px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#fff; float:left; text-decoration:underline;}
.slide_menu .user_info a.mypage_id{display:block; margin-left:25px; width:69%; width:calc(100% - 80px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#fff; float:left; text-decoration:underline;}
.slide_menu .user_info a.logout{float:right; font-size:11px; color:#fff; border-radius:5px; background:#e63740; line-height:24px; padding:0px 10px; margin-top:7px; margin-left: 5px;}

.slide_menu .coin_info{width:100%; height:40px; background:#3e3e3e;}
.slide_menu .coin_info p{width:50%; height:40px; line-height:40px; border-top:1px solid #323232; border-right:1px solid #323232; padding:0 10px; float:left;}
.slide_menu .coin_info p:nth-child(2n){border-right:0; float:right;}
.slide_menu .coin_info span.coin_num{line-height:40px; color:#fff;}
.slide_menu .coin_info span.dday2{border-radius:15px; float:right; display:block; padding:1px 3px; color:#fff; text-align:center; background:#e63740; font-size:10px; height:15px; line-height:15px; margin-top:11px;}
.slide_menu .coin_info a.btn_mile_exchange{border-radius:3px; float:right; display:block; padding:1px 5px; color:#fff; text-align:center; background:#222; font-size:11px; height:17px; line-height:17px; margin-top:10px;}
.slide_menu .coin_info a.help{float:right; display:block;}
.slide_menu .coin_info p.user_bonuscoin{position:relative;}
.slide_menu .coin_info span.bonuscoin_info_alert{width:180px; display:block; border:2px solid #e63740; background:#fff; color:#333; font-size:11px; position:absolute; top:39px; left:-40px; z-index:2; line-height:14px; padding:5px 10px 10px 10px; display:none;}
.slide_menu .coin_info span.triangle{width:20px; height:10px; background:url(/assets/img/mobile/mobile_alert_arrow.png)no-repeat; position:absolute; top:-10px; left:80%; margin-left:-10px; background-size:100%;}
.slide_menu .coin_info a.help_close{display:block; width:25px; height:25px; position:absolute; top:0px; right:0px;}
.slide_menu .coin_info a.help_close span.close_line1{transform:rotate(45deg); width:18px; height:1px; display:block; background:#e63740; position:absolute; top:11px; left:2px;}
.slide_menu .coin_info a.help_close span.close_line2{transform:rotate(135deg); width:18px; height:1px; display:block; background:#e63740; position:absolute; top:11px; left:2px;}
.slide_menu .coin_info span.bonuscoin_info_alert strong{font-size:12px; line-height:30px;}

.slide_menu a.btn_appview{background:#e63740; color:#fff; width:90%; margin:5px auto; font-weight:bold; text-align:center; border-radius:5px; padding:10px 0;}
.slide_menu ul.service_menu{background:#fff; font-size:14px;}
.slide_menu ul.service_menu li{padding:0 10px; width:100%; height:40px; line-height:40px; border-bottom:1px solid #ddd; position:relative;}
.slide_menu ul.service_menu li a{color:#333;}
.slide_menu .slide_toggle_menu a.tgmenu_open{display:block; background:#fff; height:45px; line-height:45px; color:#333; padding:0 10px; border-bottom:1px solid #ddd;}
.slide_menu .slide_toggle_menu a.slide_open_color{background:#f6f6f6; border-bottom:0;}
.slide_menu .slide_toggle_menu ul.depth2_menu{background:#f6f6f6; font-size:12px; display:none; width:100%; margin:auto; border-bottom:1px solid #ddd;}
.slide_menu .slide_toggle_menu ul.depth2_menu li{padding:0 10px; width:100%; float:left; height:38px; line-height:38px; border-bottom:1px solid #ddd; position:relative; background:#eee; font-size:12px; position:relative; border-top:0;}
.slide_menu .slide_toggle_menu ul.depth2_menu li:last-child{border-bottom:0;}
.slide_menu .slide_toggle_menu ul.depth2_menu li a{color:#333;}
.slide_menu .slide_toggle_menu ul.depth2_menu li a span.headimg{display:block; position:absolute; top:-3px; right:10px;}

.slide_menu .cs_menu a.csmenu_open{display:block; background:#fff; height:40px; line-height:40px; color:#333; padding:0 10px; border-bottom:1px solid #ddd;}
.slide_menu .cs_menu ul.depth2_menu{background:#fff; font-size:14px; display:none;}
.slide_menu .cs_menu ul.depth2_menu li{padding:0 10px; width:100%; height:32px; line-height:32px; border-bottom:1px solid #ddd; position:relative; background:#eee; font-size:12px; text-indent:25px; position:relative;}
.slide_menu .cs_menu ul.depth2_menu li a{color:#333;}
.slide_menu .cs_menu ul.depth2_menu li a span.headimg{display:block; position:absolute; top:-3px; right:10px;}
.slide_menu span.btn_call{font-size:11px; font-weight:bold; color:#fff; background:#e63740; height:22px; line-height:22px; border-radius:3px; position:absolute; display:block; width:60px; top:5px; right:10px; text-indent:0; text-align:center;}