Server : Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.4.20 System : Linux st2.domain.com 3.10.0-1127.10.1.el7.x86_64 #1 SMP Wed Jun 3 14:28:03 UTC 2020 x86_64 User : apache ( 48) PHP Version : 7.4.20 Disable Function : NONE Directory : /var/www/html/lnovel/layout/novel/css/ |
:root {--primary: #bf2c24;}
@charset "utf-8";
html {
color: #000;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
html * {
outline: 0;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: transparent
}
body, html {
font-family: Helvetica Neue,sans-serif;
font-size: 15px;
}
article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
margin: 0;
padding: 0
}
input, select, textarea {
font-size: 100%;
font-family: inherit;
}
input,button,select{border-radius:0;border:1px solid #ddd;height:34px;line-height:34px;display:inline-block;vertical-align: middle;margin:0;}
fieldset, img {
border: 0
}
abbr, acronym {
border: 0;
font-variant: normal
}
del {
text-decoration: line-through
}
address, caption, cite, code, dfn, th, var {
font-style: normal;
font-weight: 600
}
ol, ul {
list-style: none
}
caption, th {
text-align: left
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: 600
}
q:after, q:before {
content: ''
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
a, ins {
text-decoration: none
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #3f5a93;
}
small {
font-size: 0.8em;
}
img {
max-width: 100%;
vertical-align: middle;
height:auto;
}
body.darkmode{background: #191b1c;}
.container{width:1200px;max-width:100%;margin:auto;}
#main-container{min-height: 500px;position: relative;overflow: hidden;}
.flexbox{display: flex; justify-content: space-between;}
.flex-reverse{flex-direction: row-reverse;}
.flex-1{width:19%;}
.flex-2{width:39%;}
.flex-3{width:59%;}
.flex-4{width:79%;}
.flex-1-3{width:32%;}
.flex-2-3{width:65%;}
.flex-1-4{width:24%;margin-right: 1%;}
.flex-1p7{width:14.2857%;}
.flex-30{width:30%;}
.flex-70{width:68%;margin-right:2%}
.flex-auto{flex-grow: 1;}
.box-header{font-size: 20px;line-height: 25px;font-weight:700;
color: #1a1a1a;margin-bottom: 20px;border-bottom:1px solid #ddd;display:flex;align-items: end;}
.box-header h3,.box-header h1{line-height:40px;display:inline-block;text-transform: uppercase;position: relative;}
.box-header h1{font-size: 1.1em;}
.box-header h3::after,.box-header .box-title:after{content:"";position: absolute;width:100%;height:1px;border-bottom: 1px solid #000;bottom:-1px;left:0;}
.box-header .header-elements{margin-left: auto;font-size: 15px;font-weight: normal;border-bottom: 2px solid;}
.box-header.tab{background:#fbfbfb;margin-bottom:5px;border-bottom:none;}
.box-header.tab a{display:inline-block;color: #aaa;font-weight: normal;
font-size: 18px;
text-transform: uppercase;padding: 0 10px;line-height:45px;border-bottom: 3px solid transparent;border-top: 3px solid transparent;}
.box-header.tab a.current{color: #bf2c24;color:var(--primary);font-weight: bold;border-bottom-color: #bf2c24;color:var(--primary);}
.center-box .box-header{text-align: center;border-bottom:none;padding: 15px 0;font-weight: 700;background: rgba(0,0,0,0.1);margin-bottom: 15px;}
.box-header.lg{padding: 15px 0;}
.no-border{border-bottom:none;}
.text-center{text-align: center;}
.box-header .more{float:right;font-size: 12px;}
.section-title{font-size: 1.4em;}
.ads{text-align: center;margin: 15px auto;}
.bg-grey{background:#f7f5f0;}
.list-tab .tab-content{display:none;}
.list-tab .tab-content.current{display:flex;}
#breadcrumb{display: inline-block;margin: 15px 0;color: #000;border-radius: 5px;font-size: 14px;padding: 0 10px;text-transform: capitalize;
white-space: nowrap;}
.darkmode #breadcrumb{color: #fff;}
#breadcrumb>span{padding: 5px;display:inline-block;}
#breadcrumb .fa-angle-right{margin-left: 10px;}
#breadcrumb a{color: #000;}
.darkmode #breadcrumb a{color: #fff;}
.button{height:34px;line-height:32px;padding: 0 12px;display:inline-block;vertical-align: middle;border-width: 1px;border-style: solid;color: #bf2c24;color:var(--primary);text-decoration: none;}
.button:hover{text-decoration: none;}
.button.sm{height:28px;line-height:26px;}
.button.lg{height: 40px;line-height: 40px;font-size: 1.1em;padding: 0 20px;}
.button-rounded{border-radius: 20px;padding: 0 20px;}
.button-primary{color:#fff;background: #bf2c24;background:var(--primary);border-color: #bf2c24;border-color:var(--primary);position: relative;cursor: pointer;z-index:0;}
.button-primary::before{position: absolute;left:0;top:0;height:100%;width:0;transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;background:rgba(0,0,0,0.1);content:"";z-index:-1;}
.button-primary:hover::before{width:100%;}
.button-green{}
.button-secondary{color: #bf2c24;color:var(--primary);border-color: #bf2c24;border-color:var(--primary);}
.button-blue{color: #3f5a93;border-color:#3f5a93;}
.button-blue-free{color: #3f5a93;border-color: transparent;}
.button-second{background: #176c74;color: #fff;}
.button-green{background: #009900;color: #fff;}
.button.disabled{opacity:0.7;font-style:italic;}
.button-danger{background: #ed2024;color: #fff;border-color: #ed2024;}
.text-primary{color: #bf2c24;color:var(--primary);}
.text-secondary{color: #bf2c24;color:var(--primary);}
.m-l-10{margin-left: 10px;}
.sponsor-box{position: relative;padding-top: 18px;}
a.sponsor{position: absolute;top:0;right:0;text-align: right;color: #00aecd;font-size: 12px;padding: 0 5px;}
a.sponsor:hover{background: rgba(0,0,0,0.1);color: #bf2c24;color:var(--primary);}
.free-0::before{content:"VIP";}
.free-1::before{content:"FREE";}
.ads{margin: 15px auto;text-align:center;}
.ads>*{margin: auto;}
.ads::before{content:"Advertisment";display:block;padding: 5px;background: #eee;}
.avatar-border{position: relative;}
.avatar-border img{border-radius: 50%;}
.avatar-border::before{content:"";position: absolute;width:192.5%;height:172.5%;left:-47%;bottom:-25%;z-index:1;background-size: contain;background-repeat: no-repeat;}
.avatar-border.lvl0::before{background-image: url(https://cdn.enovel.mobi/avatars/lvl0.webp);}
.avatar-border.lvl1::before{background-image: url(https://cdn.enovel.mobi/avatars/lvl1.webp);}
.avatar-border.lvl2::before{background-image: url(https://cdn.enovel.mobi/avatars/lvl2.webp);}
.avatar-border.lvl3::before{background-image: url(https://cdn.enovel.mobi/avatars/lvl3.webp);}
.avatar-border.lvl4::before{background-image: url(https://cdn.enovel.mobi/avatars/lvl4.webp);}
.avatar-border.g_male::before{background-image: url(https://cdn.enovel.mobi/avatars/g_male.webp);}
.avatar-border.g_female::before{background-image: url(https://cdn.enovel.mobi/avatars/g_female.webp);}
.avatar-border.g_lgbt::before{background-image: url(https://cdn.enovel.mobi/avatars/g_lgbt.webp);}
.avatar-border.mod::before{background-image: url(https://cdn.enovel.mobi/avatars/mod.webp);}
.avatar-border.smod::before{background-image: url(https://cdn.enovel.mobi/avatars/smod.webp);}
.avatar-border.contract_1::before{background-image: url(https://cdn.enovel.mobi/avatars/contract_1.webp);}
.avatar-border.contract_2::before{background-image: url(https://cdn.enovel.mobi/avatars/contract_2.webp);}
.avatar-border.c_joined::before{background-image: url(https://cdn.enovel.mobi/avatars/c_joined.webp);}
.avatar-border.c_month_1::before{background-image: url(https://cdn.enovel.mobi/avatars/c_month_1.webp);}
.avatar-border.c_month_2::before{background-image: url(https://cdn.enovel.mobi/avatars/c_month_2.webp);}
.avatar-border.c_month_3::before{background-image: url(https://cdn.enovel.mobi/avatars/c_month_3.webp);}
.avatar-border.c_quarter_1::before{background-image: url(https://cdn.enovel.mobi/avatars/c_quarter_1.webp);}
.avatar-border.c_quarter_2::before{background-image: url(https://cdn.enovel.mobi/avatars/c_quarter_2.webp);}
.avatar-border.c_quarter_3::before{background-image: url(https://cdn.enovel.mobi/avatars/c_quarter_3.webp);}
.avatar-border.o_29::before{background-image: url(https://cdn.enovel.mobi/avatars/o_29.webp);}
.avatar-border.o_friendly::before,.avatar-border.o_3day::before{background-image: url(https://cdn.enovel.mobi/avatars/o_3day.webp);}
.avatar-border.o_moon::before{background-image: url(https://cdn.enovel.mobi/avatars/o_moon.webp);}
.avatar-border.o_noel::before{background-image: url(https://cdn.enovel.mobi/avatars/o_noel.webp);}
.avatar-border.o_school::before{background-image: url(https://cdn.enovel.mobi/avatars/o_school.webp);}
.avatar-border.o_sweet::before{background-image: url(https://cdn.enovel.mobi/avatars/o_sweet.webp);}
.avatar-border.o_vlt1::before{background-image: url(https://cdn.enovel.mobi/avatars/o_vlt1.webp);}
.avatar-border.o_vlt2::before{background-image: url(https://cdn.enovel.mobi/avatars/o_vlt2.webp);}
.avatar-border.o_hlw::before{background-image: url(https://cdn.enovel.mobi/avatars/o_hlw.webp);}
.avatar-border.g_boy::before{background-image: url(https://cdn.enovel.mobi/avatars/g_boy.webp);}
.avatar-border.g_girl::before{background-image: url(https://cdn.enovel.mobi/avatars/g_girl.webp);}
.avatar-border.o_0803::before{background-image: url(https://cdn.enovel.mobi/avatars/o_0803.webp);}
.avatar-border.o_2011::before{background-image: url(https://cdn.enovel.mobi/avatars/o_2011.webp);}
.avatar-border.o_3004::before{background-image: url(https://cdn.enovel.mobi/avatars/o_3004.webp);}
.avatar-border.o_blackcat::before{background-image: url(https://cdn.enovel.mobi/avatars/o_blackcat.webp);}
.avatar-border.o_love::before{background-image: url(https://cdn.enovel.mobi/avatars/o_love.webp);}
.avatar-border.o_summer::before{background-image: url(https://cdn.enovel.mobi/avatars/o_summer.webp);}
.avatar-border.o_whitecat::before{background-image: url(https://cdn.enovel.mobi/avatars/o_whitecat.webp);}
.avatar-border.a_dream::before{background-image: url(https://cdn.enovel.mobi/avatars/a_dream.webp);}
.avatar-border.a_diligent::before{background-image: url(https://cdn.enovel.mobi/avatars/a_diligent.webp);}
.avatar-border.o_112022::before{background-image: url(https://cdn.enovel.mobi/avatars/o_112022.webp);}
.avatar-border.o_122022::before{background-image: url(https://cdn.enovel.mobi/avatars/o_122022.webp);}
.avatar-border.o_birthday_1::before{background-image: url(https://cdn.enovel.mobi/avatars/o_birthday_1.webp);}
.avatar-border.o_birthday_2::before{background-image: url(https://cdn.enovel.mobi/avatars/o_birthday_2.webp);}
.avatar-border.o_010123::before{background-image: url(https://cdn.enovel.mobi/avatars/o_010123.webp);}
.avatar-border.o_220123::before{background-image: url(https://cdn.enovel.mobi/avatars/o_220123.webp);}
.avatar-border.o_vip_1::before{background-image: url(https://cdn.enovel.mobi/avatars/o_vip_1.webp);}
.avatar-border.o_vip_2::before{background-image: url(https://cdn.enovel.mobi/avatars/o_vip_2.webp);}
.avatar-border.o_vip_3::before{background-image: url(https://cdn.enovel.mobi/avatars/o_vip_3.webp);}
.avatar-border.o_vip_4::before{background-image: url(https://cdn.enovel.mobi/avatars/o_vip_4.webp);}
.avatar-border.o_vip_5::before{background-image: url(https://cdn.enovel.mobi/avatars/o_vip_5.webp);}
.avatar-border.o_vip_6::before{background-image: url(https://cdn.enovel.mobi/avatars/o_vip_6.webp);}
.avatar-border.o_vip_7::before{background-image: url(https://cdn.enovel.mobi/avatars/o_vip_7.webp);}
.avatar-border.o_vip_8::before{background-image: url(https://cdn.enovel.mobi/avatars/o_vip_8.webp);}
.avatar-border.o_vip_9::before{background-image: url(https://cdn.enovel.mobi/avatars/o_vip_9.webp);}
.avatar-border.o_vip_10::before{background-image: url(https://cdn.enovel.mobi/avatars/o_vip_10.webp);}
.avatar-border.c_5_1::before{background-image: url(https://cdn.enovel.mobi/avatars/c_5_1.webp);}
.avatar-border.c_5_2::before{background-image: url(https://cdn.enovel.mobi/avatars/c_5_2.webp);}
.avatar-border.c_5_3::before{background-image: url(https://cdn.enovel.mobi/avatars/c_5_3.webp);}
.avatar-border.c_5_4::before{background-image: url(https://cdn.enovel.mobi/avatars/c_5_4.webp);}
.avatar-border.c_6_1::before{background-image: url(https://cdn.enovel.mobi/avatars/c_6_1.webp);}
.avatar-border.c_6_2::before{background-image: url(https://cdn.enovel.mobi/avatars/c_6_2.webp);}
.avatar-border.c_6_3::before{background-image: url(https://cdn.enovel.mobi/avatars/c_6_3.webp);}
.avatar-border.c_6_4::before{background-image: url(https://cdn.enovel.mobi/avatars/c_6_4.webp);}
.avatar-border.o_ex_premium::before{background-image: url(https://cdn.enovel.mobi/avatars/o_ex_premium.webp);}
.avatar-border.o_premium::before{background-image: url(https://cdn.enovel.mobi/avatars/o_premium.webp);}
.avatar-border.o_premium_p::before{background-image: url(https://cdn.enovel.mobi/avatars/o_premium_p.webp);}
.avatar-border.r_top_1::before{background-image: url(https://cdn.enovel.mobi/avatars/r_top_1.webp);}
.avatar-border.r_top_2::before{background-image: url(https://cdn.enovel.mobi/avatars/r_top_2.webp);}
.avatar-border.r_top_3::before{background-image: url(https://cdn.enovel.mobi/avatars/r_top_3.webp);}
.avatar-border.r_top_4::before{background-image: url(https://cdn.enovel.mobi/avatars/r_top_4.webp);}
.avatar-border.o_010124_1::before{background-image: url(https://cdn.enovel.mobi/avatars/o_010124_1.webp);}
.avatar-border.o_010124_2::before{background-image: url(https://cdn.enovel.mobi/avatars/o_010124_2.webp);}
.avatar-border.o_100224::before{background-image: url(https://cdn.enovel.mobi/avatars/o_100224.webp);}
.avatar-border.o_110224::before{background-image: url(https://cdn.enovel.mobi/avatars/o_110224.webp);}
.avatar-border.o_120224::before{background-image: url(https://cdn.enovel.mobi/avatars/o_120224.webp);}
.uicon{position: relative;}
.uicon::after{position: absolute; bottom: 120%;visibility: hidden;
background-color: rgba(0,0,0,0.8);
color: #fff;font-size: 11px;
border-radius: 6px;
padding: 3px 5px;
z-index: 1;white-space: nowrap;
left: 50%;
transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);}
.uicon:hover::after{visibility: visible;}
.uicon::before{content:" ";display:inline-block;height: 2em;width: 2.667em;margin: -0.5em 0.1em auto 0.1em;background-size: contain;background-repeat: no-repeat;}
.uicon.r_old::before{background-image: url(https://cdn.enovel.mobi/icons/r_old.webp);}
.uicon.r_top::before{background-image: url(https://cdn.enovel.mobi/icons/r_top.webp);}
.uicon.r_vip::before{background-image: url(https://cdn.enovel.mobi/icons/r_vip.webp);}
.uicon.a_c5::before{background-image: url(https://cdn.enovel.mobi/icons/a_c5.webp);}
.uicon.a_c6::before{background-image: url(https://cdn.enovel.mobi/icons/a_c6.webp);}
.nut{width:1em;height:1em;display:inline-block;background: url(https://cdn.enovel.mobi/assets/dpub/imgs/nut.png) center no-repeat;background-size: contain;}
.pineal{width:1em;height:1em;display:inline-block;background: url(https://cdn.enovel.mobi/assets/dpub/imgs/pineal.png) center no-repeat;background-size: contain;}
.book-cover{
-webkit-transform: perspective(60px) rotateY(-5deg);
-moz-transform: perspective(60px) rotateY(-5deg);
transform: perspective(60px) rotateY(-5deg);
position: relative;
z-index: 4;
float: right;
width: 65px;
flex-shrink: 0;
height: 114px;
margin-top: -3px;
margin-right: 8px;
text-align: center;
font-size:2px;
}
.sm .book-cover{width:52px;height:91px;}
.book-cover:after {
position: absolute;
z-index: 2;
top: 2%;
left: 100%;
width: 10%;
height: 92%;
content: ' ';
-webkit-transform: perspective(60px) rotateY(30deg);
-moz-transform: perspective(60px) rotateY(30deg);
transform: perspective(60px) rotateY(30deg);
background-color: #efefef;
box-shadow: inset 0 0 5px #333;
}
.book-cover:before {
position: absolute;
z-index: 1;
top: 84.1%;
left: 7px;
width: 20px;
height: 10px;
content: '';
-webkit-transform: perspective(74px) rotateX(-70deg) rotateY(-5deg);
-moz-transform: perspective(74px) rotateX(-70deg) rotateY(-5deg);
-ms-transform: scale(0);
transform: perspective(74px) rotateX(-70deg) rotateY(-5deg);
box-shadow: 25px 0 5px 5px #adadad;
}
.book-cover a{
position: relative;
z-index: 10;
display: inline-block;
transform: translateZ(50px);
}
.book-cover img {
width: 65px;
height: 108px;
}
.sm .book-cover img{
width:52px;height:86px;
}
@media only screen and (max-width: 800px){
.container{width:auto;margin-left: 5px;margin-right: 5px;}
.flexbox{flex-wrap: wrap;}
.flexbox>*{margin-bottom: 15px;}
.m-hide{display:none}
.flex-m-4{width: 79%}
.flex-m-100{width:100%;margin-right:0;}
.flex-m-25{width:25%;}
.flex-m-75{width:75%;}
}
@media only screen and (max-width: 500px){
.box-header{flex-wrap: wrap;}
.box-header h1{display:block;}
.box-header.tab{margin-bottom:0;}
.box-header.tab a{font-size: 15px;}
.flexbox{display: block;}
.flex-1,.flex-2,.flex-3,.flex-4,.flex-1-3,.flex-2-3,.flex-1-4,.flex-1p7,.flex-m-4,
.flex-m-100,.flex-m-25,.flex-m-75{width:auto;}
}
@media only screen and (max-width: 320px){
.box-header.tab a{font-size: 13px;padding: 0 5px;}
}.uicon.r_old::after{content:"Kỳ cựu";}
.uicon.r_top::after{content:"Top mở khóa";}
.uicon.r_vip::after{content:"Premium";}
.uicon.a_c5::after{content:"Top doanh thu hè";}
.uicon.a_c6::after{content:"Tác giả sáng giá";}@font-face {
font-family: 'Piazzolla';
src: url('https://cdn.enovel.mobi/assets/v1/font/subset-Piazzolla-Regular.woff2') format('woff2'),
url('https://cdn.enovel.mobi/assets/v1/font/subset-Piazzolla-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Piazzolla';
src: url('https://cdn.enovel.mobi/assets/v1/font/subset-Piazzolla-SemiBold.woff2') format('woff2'),
url('https://cdn.enovel.mobi/assets/v1/font/subset-Piazzolla-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Piazzolla';
src: url('https://cdn.enovel.mobi/assets/v1/font/subset-Piazzolla-Italic.woff2') format('woff2'),
url('https://cdn.enovel.mobi/assets/v1/font/subset-Piazzolla-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Piazzolla';
src: url('https://cdn.enovel.mobi/assets/v1/font/subset-Piazzolla-Bold.woff2') format('woff2'),
url('https://cdn.enovel.mobi/assets/v1/font/subset-Piazzolla-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}#header{padding: 14px 0;}
.darkmode #header{background: #000;}
#header .container{display: flex;justify-content: space-between;align-items: center;}
#header .logo{font-size: 2em;font-weight: 700;line-height:55px;position: relative;z-index:0;width:auto;}
#header .logo::before{position: absolute;content:"";top:0;bottom:0;right:0;left:0;background: rgba(255,255,255,0.7);
filter: blur(8px);
-webkit-filter: blur(8px);z-index:-1;}
#header .logo img{float:left;margin-right: 10px;}
#header .logo a{color: #000;text-decoration: none;display:block;}
#search-form{position: relative;z-index:99;}
#search-form input{width:500px;height:48px;border:1px solid #ddd;padding:0 11px;float:left;-webkit-appearance: none;}
#search-form .search-fields button{padding:0 20px;height:48px;line-height:48px;text-align:center;border:none;background: #bf2c24;background:var(--primary);color:#fff;font-size: 21px;}
#search-results{position: absolute;top:48px;width:100%;left:0;background: #fff;border: 1px solid #ddd;box-shadow: 1px 1px 2px rgba(0,0,0,0.5);display:none;}
#user-panel{height:38px;line-height:36px;position: relative;}
.darkmode #user-panel{border: 1px solid #eee;}
#user-panel>a{font-size: 13px;color: #fff;padding: 0 12px;display:inline-block;border-radius: 20px;}
#user-panel .toggleLogin{background: #bf2c24;background:var(--primary);}
#user-panel .toggleRegister{background: #000;}
#user-panel .togglePanel{background: #bf2c24;background:var(--primary);padding: 0;}
.darkmode #user-panel>a{color: #fff;}
#user-panel .togglePanel{padding-right:25px;height:38px;}
#user-panel .togglePanel::before{position: absolute;width:0;height:0;border: 5px solid transparent;border-top: 5px solid #fff;content:"";right:5px;top:50%;margin-top: -3px;}
#user-panel .togglePanel img{width:34px;height:34px;float:left;border-radius: 20px;margin:2px 3px 2px 2px;}
#user-panel .togglePanel label{display:inline-block;max-width:80px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
#user-panel .togglePanel span{position: absolute;padding: .3125rem .375rem;top:-5px;left:-5px;
border-radius: 10rem;color: #fff;
background-color: #2196f3;
font-size: 75%;
font-weight: 500;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;}
#main-nav{background:#3e3d43;}
#main-nav .container{display:flex;}
#main-nav .genres{width:20%;height:40px;margin-right: 30px;position: relative;}
#main-nav .genres .toggle-genres{display:block;background:#313035;color:#fff;text-transform: uppercase;line-height:40px;font-size:16px;}
#main-nav .genres .toggle-genres i{margin: 0 10px;}
#main-nav .genres .contain{position: absolute;width:300px;left:0;top:40px;display: none;border: 1px solid #ddd;z-index:100;box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
height:364px;overflow-y: auto;}
#main-nav .genres ul{display:flex;flex-wrap: wrap;width:100%;}
#main-nav .genres ul li{width:50%;background:#fcfcfa;}
#main-nav .genres ul li a{display:flex;padding:14px 0 14px 10px;color: #333;align-items: center;}
#main-nav .genres ul li a:hover{background:rgba(0,0,0,0.1);}
#main-nav .genres ul li:nth-of-type(4n+1),#main-nav .genres ul li:nth-of-type(4n+2){background:#f7f6f2;}
#main-nav .genres ul li a i{margin-right:5px;font-size: 18px;}
#main-nav .genres ul li a img{margin-right:5px;font-size: 18px;filter: grayscale(100%);}
#main-nav .genres ul li a:hover img{filter: grayscale(0);}
#main-nav .genres ul li a:hover{color: #bf2c24;color:var(--primary);}
#main-nav .genres ul li cite{font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height: 24px;}
#main-nav .genres ul li a small{color: #888;display:none;}
.sort-dropdown input,.sort-dropdown label{display:none;}
#main-nav .sorts{display: flex;}
#main-nav .sorts li a{display:block;line-height:38px;border-top: 2px solid transparent;color:#fff;padding:0 20px;text-decoration: none;font-size: 1.1em;}
#main-nav .sorts li a:hover{background:#000;border-top: 2px solid #bf2c24;}
#main-nav .sorts li.highlight a{background: #bf2c24;background:var(--primary);}
@media only screen and (max-width: 800px){
#search-form input{width:300px;}
#main-nav .genres{width:150px;height:50px;}
#main-nav .genres .toggle-genres{line-height:50px;}
#main-nav .genres ul{top:50px;width:300px;}
#main-nav .sorts li a{line-height:28px;padding: 10px;}
#main-nav .sorts{height:50px;overflow: hidden;}
.sort-dropdown{margin-left:auto;}
}
@media only screen and (max-width: 600px){
#header{padding: 5px 0;position: relative;}
#header .container{display: block;}
#header .container::after{content:"";display: table;clear:both;}
#header .logo{float: left;margin-top:10px;}
#user-panel{position:absolute;top:10px;right:10px;z-index: 99;}
#search-form{width:100%;clear:both;padding-top:10px;}
.search-fields{display: flex;}
#search-form input{flex-grow: 1;}
#search-form button{width:100px;margin-left: 5px;}
#search-form input,#search-form .search-fields button{height:42px;line-height:42px;}
#main-nav .container{margin:0;}
#main-nav .genres ul{width:300px;top:40px;border:none;}
#main-nav .sorts{height: 40px;}
#main-nav .genres{width:50%;flex-shrink: 0;height:40px;margin-right:0;border-right:1px solid #fff;}
#main-nav .genres .toggle-genres{line-height:40px;font-size: 1.1em;}
.sort-dropdown{position:relative;width:50%;}
.sort-dropdown > input[type="checkbox"] {position: absolute;left: -100vw;}
.sort-dropdown > label{
display: block;
background: #313035;
color: #fff;
text-transform: uppercase;
line-height: 40px;
font-size: 1.1em;
padding: 0 10px;
text-align:right;
}
.sort-dropdown > label i{margin-left:10px;}
#main-nav .sort-dropdown > ul.sorts {
position: absolute;
z-index: 999;
display: block;
right: 100vw;
top: 40px;
background: #fff;
list-style: none;
width: 100vw;
height:auto;
-webkit-box-shadow: 0 3px 8px rgba(0,0,0,.15);
-moz-box-shadow: 0 3px 8px rgba(0,0,0,.15);
box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
#main-nav .sort-dropdown > input[type="checkbox"]:checked ~ ul.sorts{
right: -5px;
}
#main-nav .sorts li{border-bottom:1px solid #ddd;}
#main-nav .sorts li:last-child{border-bottom:none;}
#main-nav .sorts li a{color:#333;}
}
@media only screen and (max-width: 320px){
#header .logo img{width:100px;margin: 10px 10px 10px 0;}
}
#slider-banner{
text-align: center;
padding: 20px 0;
background: #eee;
position: relative;
}
.slider__radio {
display: none;
}
.slider__holder {
position: relative;
width: 100%;
max-width: 700px;
margin: 0 auto;
text-align: left;
}
.slider__holder nav{position: absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:99;}
.slider__holder nav a{display:inline-block;width: 16px;height:4px;background:#fff;margin: 6px 6px;opacity:0.5;}
.slider__holder nav a:hover{opacity:1;}
.slider__holder nav a.current{height:16px;border-radius: 10px;opacity:1;margin: 0 6px;}
.slider__item {
position: absolute;
top: 0;
left: 0;
display: block;
overflow: hidden;
width: 100%;
opacity: 1;
cursor: pointer;
border-radius: 8px;
background: #FFF;
box-shadow: 0 5px 20px 0 rgba(0,0,0,0.05), 0 2px 4px 0 rgba(0,0,0,0.05);
transition: all 0.2s ease;
}
.slider__item .slider__item-content{position: relative;}
.slider__item .slider__item-content::before{content:"";position: absolute;top:0;left:0;width:100%;height:100%;z-index:1;background: rgba(255,255,255,0.7)}
.slider__item.slider__item--3 .slider__item-content::before{display:none;}
.slider__item.slider__item--4 .slider__item-content::before{opacity:0;}
.slider__item.slider__item--1{z-index: 0;
transform: translateX(-410px) scale(0.65);}
.slider__item.slider__item--2{z-index: 1;
transform: translateX(-300px) scale(0.85);}
.slider__item.slider__item--3{position: relative;
z-index: 2;
transform: translate(0) scale(1);}
.slider__item.slider__item--4{z-index: 1;
transform: translateX(300px) scale(0.85);}
.slider__item.slider__item--5{z-index: 0;
transform: translateX(410px) scale(0.65);}
.story-banner{width:100%;position: relative;padding-bottom: 52.333334%;color: #fff;}
.story-banner::before{content:"";position: absolute;width:100%;height:100%;top:0;left:0;z-index:3;}
.slider__item--3 .story-banner::before{display:none;}
.story-banner-container{display:flex;position: absolute;overflow: hidden;z-index: 1;width:100%;height:100%;top:0;left:0;align-items: center;color:#fff;}
.story-banner .bg{background-size: cover;filter:blur(10px);position: absolute;width:100%;height:100%;top:0;left:0;background-position: center;z-index:-2;}
.story-book-cover{width: 45%;height:65%;position: relative;padding: 0 24px;}
.book-ct{width:180px;position: relative;z-index:1;}
.story-book-cover .book-ct2{position: absolute;bottom:-20px;transform: translateX(55%);z-index:0;}
.story-book{
width: 100%;
height: 0;
padding-bottom: 128.6%;
position: relative;
transform: perspective(60em);
box-shadow: -1.4em 1.7em .3em -.3em rgba(0,0,0,0.5), -1.6em 1.8em .9em -.2em rgba(0,0,0,0.3), .3em 1.9em 1.3em rgba(0,0,0,0.1);
border-top-right-radius: .4em;
}
.story-book.skew{
transform: perspective(60em) rotateX(58deg) rotateZ(-34deg) skewY(-7deg);
}
.story-book img{border-top-right-radius: .4em;
box-sizing: border-box;
width: 100%;height:100%;
clip: rect(0em,280px,360px,0em);
display: block;
position: absolute;
filter: saturate(90%);}
.story-book::before, .story-book::after{content: "";position: absolute;top: 0;}
.story-book::before{
width: 105%;
height: 105%;
left: -5%;
z-index: -1;
background-repeat: no-repeat;
background-image: linear-gradient(115deg, transparent 2.8%,
#3f3f3f 3%, #3f3f3f 16%,
transparent 16%),
linear-gradient(125deg, transparent 10%, #3f3f3f 10%,
#3f3f3f 17%, #222 46.8%,
transparent 47%),
linear-gradient(125deg, transparent 46%,
rgba(0,0,0,0.5) 46.5%,
rgba(0,0,0,0.25) 49%,
transparent 53%),
linear-gradient(to right, #444, #666),
linear-gradient(#444, #444),
linear-gradient(140deg, transparent 45%,
#eee 45%, #ccc 96.8%,
rgba(170,170,170,0) 97%);
background-size: 100% 100%,
100% 100%,
100% 100%,
100% .4em,
94% .2em,
100% 100%;
background-position: 0 0,
0 0,
0 0,
0 95.8%,
0 100%,
0 0;
}
.story-book::after{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(to right, transparent 2%,
rgba(0,0,0,0.1) 3%,
rgba(0,0,0,0.1) 4%,
transparent 5%),
linear-gradient(-50deg, rgba(0,0,0,0.1) 20%, transparent 100%),
linear-gradient(-50deg, rgba(0,0,0,0.2) 20%, transparent 100%),
linear-gradient(to bottom, rgba(0,0,0,0.1) 20%, transparent 100%),
linear-gradient(to bottom, rgba(0,0,0,0.1) 20%, transparent 100%);
background-size: 100% 100%,
2% 20%,
1% 20%,
2% 20%,
1% 20%;
background-position: 0 0,
2.2% 100%,
3% 100%,
2.2% 0,
3% 0;
}
.story-banner-container::before{position: absolute;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.3);z-index:-1;content:" ";}
.story-banner .book-info{width:47%;margin-left: auto;}
.story-banner .book-info .title{font-size: 1.6em;font-weight:bold;margin-bottom: 15px;}
.story-banner .book-info p{margin-bottom: 12px;}
.suggest-stories{display: flex;flex-wrap: wrap;justify-content: space-between;}
.suggest-story_item{width:170px;margin: 0 12px 35px 12px;}
.suggest-story_item .cover{margin: 0;
width: 100%;
overflow: hidden;
position: relative;
padding: 9px 13px 9px 0;}
.suggest-story_item .cover a{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: perspective(1000px) rotateY(
-30deg
) rotateZ(
0deg
);
-moz-transform: perspective(1000px) rotateY(-30deg) rotateZ(0deg);
-ms-transform: perspective(1000px) rotateY(-30deg) rotateZ(0deg);
-o-transform: perspective(1000px) rotateY(-30deg) rotateZ(0deg);
transform: perspective(1000px) rotateY(-30deg) rotateZ(0deg);
width: 100%;
float: left;
position: relative;
}
.suggest-story_item .cover a img{width: 92%;position: relative;z-index:2;border: 1px solid #eee;}
.suggest-story_item .cover a::before{
top: 0;
left: 0;
z-index: 3;
content: '';
width: 92%;
height: 100%;
position: absolute;
background: -moz-linear-gradient(left, rgba(0,0,0,0) 8%, rgba(0,0,0,0.1) 5%, rgba(0,0,0,0) 13%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 8%, rgba(0,0,0,0.1) 5%, rgba(0,0,0,0) 13%);
background: linear-gradient(to right, rgba(0,0,0,0) 8%, rgba(0,0,0,0.1) 5%, rgba(0,0,0,0) 13%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );
}
.suggest-story_item .cover a .back{
top: 2%;
left: 0;
z-index: 1;
width: 100%;
height: 96%;
overflow: hidden;
background: #888;
position: absolute;
content:"";
}
.suggest-story_item .cover .back::after{
top: 3%;
right: 3px;
z-index: 2;
width: 15px;
height: 94%;
content: '';
position: absolute;
background: url(https://cdn.enovel.mobi/images/bookpattren.png) no-repeat;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
.suggest-story_item .genres{font-size: 12px;color: #bf2c24;color:var(--primary);height:28px;line-height:14px;border-bottom: 1px solid #ddd;margin-bottom: 10px;}
.suggest-story_item .story-title{font-size: 16px;font-weight: bold;margin-bottom: 5px;}
.suggest-story_item .story-title a{color: #555;line-height:19px;}
.suggest-story_item .author{display:block;font-size: 12px;color: #666;}
.leader-boards{display:flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;margin-bottom: 20px;}
.leader-board{width:30%;box-shadow: 0 10px 25px 0 #d4e0e0;border-radius: 10px;background:#fff;padding: 15px;}
.leader-board h2{font-size: 1.1em;display:flex;margin-bottom:10px;align-items: flex-end;height: 30px;vertical-align: baseline;}
.leader-board h2 .last_ranked,.leader-board .leader-board-tabs .last_ranked{font-size: 0.6em;color: #888;font-weight: normal;margin-left:auto;}
.leader-board h2 small,.leader-board .leader-board-tabs a small{font-size: 0.6em;color: #888;font-weight: normal;}
.leader-board h2 .btn-group{margin-left:auto;}
.leader-board h2 .btn-group button{background: none;padding: 0 10px;height:36px;line-height:29px;text-transform: uppercase;position:relative;z-index:1;font-size:12px;}
.leader-board h2 .btn-group button:first-child{margin-right: -1px}
.leader-board h2 .btn-group button.active{background: var(--primary);z-index:2;border-color: var(--primary);color:#fff;}
.leader-board .leader-board-tabs{display:flex;border-bottom: 1px solid #ddd;}
.leader-board .leader-board-tabs a{font-size: 1.1em;height: 46px;display:block;padding: 5px 10px 10px 10px;position: relative;bottom:-1px;color:#000;border: 1px solid transparent;}
.leader-board .leader-board-tabs a.active{border: 1px solid #ddd;border-bottom: 1px solid #fff;}
.leader-board .leader-board-tabs a small{display:block}
#month-top-unlock,#top-voted,#top-pineal{display:none;}
.ranked-readers li{display:flex;width:100%;padding: 8.5px 0;border-bottom: 2px solid #ddd;position: relative;}
.ranked-readers li:last-child{border-bottom: none;}
.ranked-readers li>div{display:flex;}
.ranked-readers li .avatar{width:36px;height:36px;margin-right:15px;}
.ranked-readers li::after{content:"";position: absolute;width:51px;height:4px;left:0;bottom:-2px;background: #fff;}
.ranked-readers li h5 .uicon{top:5px;}
.ranked-readers li h5 small{display:block;font-weight: normal;margin-top: 4px;color: #888;}
.ranked-readers li label{margin-left: auto;}
@media (max-width: 900px) {
.slider__item--1{transform: translateX(-170px) scale(0.65); }
.slider__item--2{z-index: 1;transform: translateX(-100px) scale(0.85); }
.slider__item--5{transform: translateX(170px) scale(0.65); }
.slider__item--4{z-index: 1;transform: translateX(100px) scale(0.85); }
}
@media (max-width: 768px) {
.slider__item--1,.slider__item--5{opacity: 0; }
.slider__item--2,.slider__item--4{opacity: 0.6; }
}
@media only screen and (max-width: 600px){.suggest-story_item{width:30%;margin: 0 0 35px 0;}}
@media only screen and (max-width: 320px){.suggest-story_item{width: 46%;margin: 0 0 35px 0;}}
.buttons{margin-top: 20px;}
.buttons>a{margin-bottom:5px;}
.banners{display:flex;width:100%;justify-content: space-between;}
.banners a{width:33.3334%;}
.banners img{margin: 20px auto 0;display:block;}
.banners a:nth-of-type(2n){background:#f7f6f2;}
section{margin-bottom:25px;}
.promos{margin-top:25px;}
.slide-detail{margin-bottom: 20px;}
.last-update-list li .author{display:none;}
@media only screen and (max-width: 800px){
.promos .flex-1:first-of-type{display:none;}
.promos .flex-3{width:79%;}
.sponsor-box{display: flex;}
.sponsor-box .story-item-1{width:33.33334%;}
.leader-board{width:100%;}
}
@media only screen and (max-width: 500px){
#banner img{width: 300px;height:auto;}
.promos{margin-top:0;}
#main-nav{margin-bottom:0;}
.promos .flex-3{width:100%;}
.promos .flex-1{display:none;}
.follow-stories .follow-story{width:100%;padding: 5px 10px;}
.slide-detail{flex-direction: column;}
.slide-detail .descriptions{margin-left:0;margin-top: 15px;text-align:center;}
.sponsor-box{display: block;}
.sponsor-box .story-item-1{width:100%;}
#section1{display:flex;flex-direction: column-reverse;}
.last-update-list li .cate{display:none;}
.collapse-mb .ranked-stories{display:none;}
.collapse-mb .open .ranked-stories{display:block;}
.collapse-mb .box-header{border-bottom:none;background: #f37321;color:#fff;line-height:35px;}
.collapse-mb .flex-1-3:nth-of-type(2) .box-header{background-color:#0a9da4;}
.collapse-mb .flex-1-3:nth-of-type(3) .box-header{background-color:#bf2c24;}
.book-ct{width: 80px;}
.story-book-cover{height: 53%;width:180px;padding: 0 10px;}
.story-banner .book-info{flex-grow: 1; margin-left: 15px;}
.story-banner .book-info .title{font-size: 1.2em;}
.story-banner .book-info p{font-size: 0.8em;}
}.story-grid{display:flex;flex-wrap: wrap;justify-content: space-between;margin-left:-12px;margin-right:-12px;}
.small-story_item{position: relative;
width: 170px;
margin: 0 12px 35px 12px;
}
.small-story_item .story-title{
font-size: 14px;
line-height: 17px;
font-weight: 500;
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.small-story_item .story-title a{color: #333;}
.small-story_item .labels{
font-size: 12px;
font-weight: 400;
line-height: 12px;
color: #999;
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
@media only screen and (max-width: 600px){
.small-story_item{width:30%;
margin: 0 0 35px 0;}
.story-grid{margin: 0;}
}
@media only screen and (max-width: 320px){
.small-story_item{width:46%;
margin: 0 0 35px 0;}
}.ranked-stories>li{border-top:1px solid #f5f5f5; padding: 5px 0;display:flex;align-items: center;}
.ranked-stories.lg>li:first-child{
border-top: none;
padding: 10px 0;
}
.ranked-stories.sm>li:first-child{display: block;}
.ranked-stories.lg>li:first-child .info:before{
width: 42px;
height: 18px;
margin-bottom: 3px;
text-align: center;
color: #fff;
background: #bf2c24;background:var(--primary);
content:"No.1";
display:block;
line-height:18px;
}
.ranked-stories>li .book-cover{margin-left:auto;}
.ranked-stories>li:first-child{border-top: none;}
.ranked-stories>li:first-child .info{margin-left:10px;}
.ranked-stories>li:first-child .info h4{font-weight: 600;margin-bottom: 8px;}
.ranked-stories>li:first-child .info h4 a{color: #333;}
.ranked-stories>li:first-child .info span{color: #bf2c24;color:var(--primary);font-size: 16px;display: block;margin-bottom: 10px;}
.ranked-stories>li:first-child .info .author{color: #888;font-size: 0.9em;}
.ranked-stories>li:first-child a.genre,.ranked-stories>li:first-child a.author{color: #888;font-size: 0.9em;}
.ranked-stories>li:first-child a.genre{margin-right: 30px;}
.ranked-stories>li>h4{white-space: nowrap;overflow:hidden;text-overflow: ellipsis;font-weight: 400;flex-grow: 1;margin-left: 10px;padding: 10px 0;}
.ranked-stories>li>h4 a{color: #000;}
.ranked-stories>li>span{white-space: nowrap;width: 68px;flex-shrink: 0;text-align: right;color: #888;font-size: 0.9em;}
.ranked-stories>li label,.ranked-readers li label{position: relative;flex-shrink: 0;z-index:1;width:30px;text-align:center;}
.ranked-stories>li small,.ranked-readers>li label small{font-size: 18px;}
.ranked-stories>li .rk-2,.ranked-stories>li .rk-3{margin-top: -10px}
.ranked-stories>li .rk-1 small,
.ranked-stories>li .rk-2 small,
.ranked-stories>li .rk-3 small,
.ranked-readers li .rk-1 small,
.ranked-readers li .rk-2 small,
.ranked-readers li .rk-3 small{display:block;
font-size: 18px;
font-weight: 500;
width: 30px;
height: 30px;
border-radius: 100%;
color: white;
line-height: 28px;
vertical-align: middle;
position: relative;
border-width: 0.2em;
border-style: solid;
z-index: 1;
box-shadow: inset 0 0 0 #a7b2b8, 1px 1px 0 rgba(0, 0, 0, 0.08);
border-color: #edeff1;
text-shadow: 1px 1px 0 #98a6ad;
background: linear-gradient(to bottom right, #d1d7da 50%, #c3cbcf 50%);}
.ranked-stories>li .rk-1 small,.ranked-readers li .rk-1 small{
box-shadow: inset 0 0 0 #b67d05, 2px 2px 0 rgb(0 0 0 / 8%);
border-color: #fadd40;
text-shadow: 0 0 4px #9d6c04;
background: linear-gradient(to bottom right, #f9ad0e 50%, #e89f06 50%);
}
.ranked-stories>li .rk-2 small,.ranked-readers li .rk-2 small{box-shadow: inset 0 0 0 #a7b2b8, 2px 2px 0 rgb(0 0 0 / 8%);
border-color: #edeff1;
text-shadow: 0 0 4px #98a6ad;
background: linear-gradient(to bottom right, #d1d7da 50%, #c3cbcf 50%);
}
.ranked-stories>li .rk-3 small,.ranked-readers li .rk-3 small{box-shadow: inset 0 0 0 #955405, 2px 2px 0 rgb(0 0 0 / 8%);
border-color: #f7bb23;
text-shadow: 0 0 4px #7d4604;
background: linear-gradient(to bottom right, #df7e08 50%, #c67007 50%);
}
.ranked-stories>li label.rk-1::before,.ranked-stories>li label.rk-1::after,
.ranked-stories>li label.rk-2::before,.ranked-stories>li label.rk-2::after,
.ranked-stories>li label.rk-3::before,.ranked-stories>li label.rk-3::after,
.ranked-readers li label.rk-1::before,.ranked-readers li label.rk-1::after,
.ranked-readers li label.rk-2::before,.ranked-readers li label.rk-2::after,
.ranked-readers li label.rk-3::before,.ranked-readers li label.rk-3::after{
content: "";
display: block;
position: absolute;
border-style: solid;
border-width: 3px 6px;
width: 0;
height: 11px;
top: 22px;
z-index:-1;
}
.ranked-stories>li label.rk-1::before,
.ranked-stories>li label.rk-2::before,
.ranked-stories>li label.rk-3::before,
.ranked-readers li label.rk-1::before,
.ranked-readers li label.rk-2::before,
.ranked-readers li label.rk-3::before{
border-color: #FC402D #FC402D transparent #FC402D;
left: 4px;
transform: rotate(20deg) translateZ(-32px);
}
.ranked-stories>li label.rk-1::after,
.ranked-stories>li label.rk-2::after,
.ranked-stories>li label.rk-3::after,
.ranked-readers li label.rk-1::after,
.ranked-readers li label.rk-2::after,
.ranked-readers li label.rk-3::after{
left: 15px;
border-color: #f31903 #f31903 transparent #f31903;
transform: rotate(-20deg) translateZ(-48px);
}