html {
background-color: #999;
max-width: 400px;
margin: 0px auto;
position: relative;
height: 100%;
font-family: sans-serif;
}
body {
background-color: white;
margin: 0px;
position: relative;
overflow-y: scroll;
}
body.debug:before{
content:'';
position: absolute;
top:0px;
width:2px;
bottom:0px;
background-color: red;
z-index:99;
}
body.touch{
padding-top: 92px;
min-height: calc(100% - 92px);
}
body.cast{
padding-top: 52px;
min-height: calc(100% - 52px);
}
body.lock {
overflow: hidden;
}
img{
vertical-align: middle;
}
.loading {
background-repeat: no-repeat;
background-position: center;
background-size: 100px;
background-image: url('/icon/loading.gif');
}
a {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
nav.header {
background-color: #004d80;
position: relative;
height: 52px;
}
a.icon {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
a.header.menu {
background-color: inherit;
background-image: url('/icon/menu2.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 26px;
border: 0px;
position: absolute;
top: 8px;
bottom: 8px;
left: 8px;
}
a.header.logo {
display: inline-block;
background-color: inherit;
background-image: url('/icon/logo_text2.png');
background-size: 80px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 8px;
bottom: 8px;
left: 42px;
width: 100px;
}
a.header.search {
background-color: inherit;
background-image: url('/icon/search.png');
background-size: 20px;
background-repeat: no-repeat;
background-position-y: center;
background-position-x: calc(100% - 10px);
padding-right: 2px;
border: 0px;
position: absolute;
top: 8px;
bottom: 8px;
right: 8px;
width: 200px;
border: 1px solid white;
}
header.top {
z-index: 10;
position: fixed;
width: 100%;
top: 0px;
max-width: 400px;
margin: 0px auto;
}
p {
margin: 0px;
}
nav.sub {
background-color: white;
font-size: 0px;
overflow-x:scroll;
-ms-overflow-style: none;
white-space: nowrap;
}
nav.sub::-webkit-scrollbar {
display: none;
}
input[type='radio'][name='navi']{
display: none;
}
nav.sub label {
display: inline-block;
width: 20%;
font-size: 15px;
text-align: center;
position: relative;
line-height: 40px;
}
input[type='radio'][name='navi']:checked + label {
color: rgb(0, 153, 255);
}
nav.sub label:before {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 2px;
background-color: #d3d3d3;
content: '';
}
input[type='radio'][name='navi']:checked + label:after {
position: absolute;
bottom: 0px;
left: 10px;
right: 10px;
height: 4px;
background-color: rgb(0, 153, 255);
content: '';
}
aside.layer {
position: fixed;
width: 100%;
top: 0px;
max-width: 400px;
margin: 0px auto;
bottom: 0px;
visibility: hidden;
z-index: 99;
}
aside.layer.active {
visibility: visible;
}
aside.layer.menu {
background-color: rgba(0, 0, 0, 0.6);
}
aside.layer>section.side {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 40%;
background-color: white;
}
aside header.side.menu {
height: 80px;
line-height: 80px;
background-color: #004d80;
text-align: center;
}
a.login {
display: inline-block;
line-height: 20px;
background-color: white;
color: #004d80;
padding: 0px 10px;
font-size: 12px;
}
h1.side.menu {
height: 40px;
font-size: 16px;
font-weight: 700;
padding-left: 10px;
line-height: 40px;
border-bottom: 1px solid #d3d3d3;
margin: 0px;
}
ol.side.menu {
margin: 0px;
list-style: none;
padding: 0px;
}
ol.side.menu a {
text-indent: 10px;
display: block;
line-height: 40px;
color: #999;
font-weight: 700;
font-size: 12px;
border-bottom: 1px solid #d3d3d3;
}
a.side.menu.back {
position: absolute;
bottom: 20px;
top: initial;
left: 20px;
width: 30px;
height: 30px;
background-color: white;
background-image: url('/icon/goback.svg');
}
a.side.menu.close {
position: absolute;
top: 20px;
left: calc(40% + 10px);
width: 30px;
height: 30px;
background-color: transparent;
background-image: url('/icon/close.png');
}
header.feed {
padding: 0px 10px;
height: 60px;
line-height: 60px;
}
img.profile {
vertical-align: middle;
width: 40px;
height: 40px;
background-color: #eee;
border-radius: 4px;
border: 1px solid #d3d3d3;
background-size: contain;
}
img.network {
vertical-align: middle;
width: 30px;
height: 30px;
background-color: #eee;
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center;
}
span.feed.left {
display: inline-block;
}
span.feed.right {
float: right;
}
a.screen_name {
font-weight: 800;
color: #004C7E;
}
time.feed {
font-size: 10px;
color: #999999;
font-weight: 800;
}
figure.feed {
position: relative;
padding: 0px;
margin: 0px;
}
figure.feed img {
width: 100%;
}
figcaption.feed {
padding: 10px;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
}
nav.sns {
font-size: 0px;
}
a.sns {
display: inline-block;
line-height: 18px;
width: 20%;
background-size: 18px 18px;
background-repeat: no-repeat;
background-position: center;
height: 30px;
}
a.sns.like {
position: relative;
background-image: url('/icon/icon_like3.png');
}
a.sns.like:before{
position: absolute;
content:attr(data-like_count);
font-size:12px;
color:red;
left:calc(50% + 20px);
vertical-align: middle;
line-height: 30px;
}
a.sns.like.active {
background-image: url('/icon/icon_like2.png');
}
a.sns.facebook {
background-image: url('/icon/sicon_facebook.png');
}
a.sns.twitter {
background-image: url('/icon/sicon_twitter.png');
}
a.sns.kakaotalk {
background-image: url('/icon/sicon_kakaotalk.png');
}
a.sns.line {
background-image: url('/icon/sicon_line.png');
}
.network.youtube {
background-image: url('/icon/sicon_youtube.png');
}
form.comment {
position: relative;
background-color: #F3F3F3;
padding: 10px;
}
input.comment {
border: 1px solid #d7d7d7;
font-size: 12px;
outline: none;
color: #999999;
background-color: white;
height: 30px;
width: calc(100%);
text-indent: 10px;
}
img.network.facebook {
background-image: url('/icon/sicon_facebook.png');
}
img.network.twitter {
background-image: url('/icon/sicon_twitter.png');
}
img.network.instagram {
background-image: url('/icon/icon_instagram.png');
}
aside.layer.search {
background-color: white;
}
aside header.layer {
background-color: #004d80;
font-size: 0px;
padding: 0px;
height: 52px;
position: relative;
}
a.go.back {
display: inline-block;
width: 28px;
height: 28px;
background-size: auto;
vertical-align: middle;
background-image: url('/icon/goback.svg');
}
input.search {
border: 0px;
height: 28px;
padding: 2px;
font-size: 16px;
vertical-align: middle;
margin: 0px;
width: calc(100% - 4px);
text-indent: 10px;
}
a.icon.logo {
display: inline-block;
width: calc(100% - 28px - 28px - 4px - 20px);
height: 20px;
}
button.icon.search {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url('/icon/search.png');
}
a.search.tag {
width: 50%;
}
a.nav.menu,
button.nav.menu {
position: absolute;
height: 28px;
width: 28px;
display: inline-block;
top: 10px;
background-color: transparent;
border: 0px;
margin: 0px;
padding: 0px;
}
a.nav.menu.left {
left: 10px;
}
a.nav.menu.right,
button.nav.menu.right {
right: 10px;
}
a.nav.menu.center {
top: 10px;
bottom: 10px;
left: 55px;
right: 55px;
height: auto;
width: auto;
}
a.icon.back {
background-image: url('/icon/back.png');
}
a.icon.close {
background-image: url('/icon/close.png');
}
a.icon.logo {
background-size: 100px;
background-image: url('/icon/logo_text2.png');
}
aside.layer.feed section {
position: absolute;
top: 52px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: white;
overflow-y: scroll;
}
h1.feed.title {
font-size: 26px;
font-weight: 700;
color: #0099FF;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-align: center;
margin: 0px;
padding: 0px;
height: 42px;
line-height: 42px;
}
hr.feed {
margin: 0px;
border: 0px;
height: 2px;
background-color: #d3d3d3;
}
ol.cast.list {
margin: 0px;
padding: 0px;
background-color: white;
}
header.keyword {
text-align: center;
}
select.keyword {
border: 0px;
background-color: white;
font-size: 17px;
text-align: center;
height: 40px;
}
label.keyword {
position: relative;
display: inline-block;
}
label.keyword:before {
position: absolute;
right: -35px;
width: 40px;
top: 0px;
bottom: 0px;
background-image: url('/icon/select.svg');
background-size: 18px;
background-repeat: no-repeat;
background-position: center;
content: '';
}
select.keyword {
border: 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select.keyword::-ms-expand {
display: none;
}
ol.keyword {
margin: 0px;
padding: 0px;
list-style: none;
}
ol.keyword>li {
line-height: 120px;
text-align: center;
float: left;
width: calc(50% - 10px);
height: 120px;
margin: 5px;
position: relative;
}
ol.keyword a {
position: relative;
border-radius: 5px;
height: 100%;
display: block;
background-color: #eee;
color: white;
}
ol.keyword a:after {
position: absolute;
top: 0px;
width: 30px;
height: 30px;
content: attr(alt);
background-color: #ddd;
line-height: 30px;
color: #999;
}
ol.keyword>li:nth-child(odd) a:after {
border-top-left-radius: 5px;
left: 0px;
}
ol.keyword>li:nth-child(even) a:after {
border-top-right-radius: 5px;
right: 0px;
}
.bg1 {
background-image: url('/bgblur/1.jpg');
}
.bg2 {
background-image: url('/bgblur/1.jpg');
}
.bg3 {
background-image: url('/bgblur/3.jpg');
}
.bg4 {
background-image: url('/bgblur/4.jpg');
}
.bg5 {
background-image: url('/bgblur/5.jpg');
}
.bg6 {
background-image: url('/bgblur/6.jpg');
}
.bg7 {
background-image: url('/bgblur/7.jpg');
}
body{
overscroll-behavior-y: contain;
}
article.main.touch:after{
position:absolute;
display:none;
top:10px;
width:50px;
left:calc(50% - 25px);
height:50px;
content:'';
background-image:url('/icon/reload.svg');
background-size:contain;
background-position:center;
}
article.main.touch.refresh:after{
display:block;
}
/*
ol.keyword > li:nth-child(odd) a{
background-image:url('/bgblur/15.jpg');
}
ol.keyword > li:nth-child(even) a{
background-image:url('/bgblur/13.jpg');
}
ol.keyword > li:nth-child(1) a{
background-image:url('/bgblur/1.jpg');
}
ol.keyword > li:nth-child(2) a{
background-image:url('/bgblur/2.jpg');
}
ol.keyword > li:nth-child(3) a{
background-image:url('/bgblur/3.jpg');
}
ol.keyword > li:nth-child(4) a{
background-image:url('/bgblur/4.jpg');
}
ol.keyword > li:nth-child(5) a{
background-image:url('/bgblur/5.jpg');
}
ol.keyword > li:nth-child(6) a{
background-image:url('/bgblur/6.jpg');
}
ol.keyword > li:nth-child(7) a{
background-image:url('/bgblur/7.jpg');
}
ol.keyword > li:nth-child(8) a{
background-image:url('/bgblur/8.jpg');
}
ol.keyword > li:nth-child(9) a{
background-image:url('/bgblur/9.jpg');
}
ol.keyword > li:nth-child(10) a{
background-image:url('/bgblur/10.jpg');
}
ol.keyword > li:nth-child(11) a{
background-image:url('/bgblur/11.jpg');
}
ol.keyword > li:nth-child(12) a{
background-image:url('/bgblur/12.jpg');
}
ol.keyword > li:nth-child(13) a{
background-image:url('/bgblur/13.jpg');
}
ol.keyword > li:nth-child(14) a{
background-image:url('/bgblur/14.jpg');
}
ol.keyword > li:nth-child(15) a{
background-image:url('/bgblur/15.jpg');
}
ol.keyword > li:nth-child(16) a{
background-image:url('/bgblur/16.jpg');
}
ol.keyword > li:nth-child(17) a{
background-image:url('/bgblur/17.jpg');
}
ol.keyword > li:nth-child(18) a{
background-image:url('/bgblur/18.jpg');
}
ol.keyword > li:nth-child(19) a{
background-image:url('/bgblur/19.jpg');
}
ol.keyword > li:nth-child(20) a{
background-image:url('/bgblur/20.jpg');
}
*/
figure.interest {
float: left;
margin: 0px;
padding: 0px;
height: 140px;
width: calc(50% - 10px);
margin: 5px;
}
img.interest {
width: 100%;
height: 120px;
background-color: #eee;
border-radius: 5px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
figure.interest figcaption {
text-align: center;
font-size: 11px;
font-weight: 700;
}
figure.hotpeople {
float: left;
margin: 0px;
padding: 0px;
height: 120px;
width: calc(33% - 10px);
margin: 5px;
}
img.hotpeople {
width: 100%;
height: 100px;
background-color: #eee;
border-radius: 5px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
figure.hotpeople figcaption {
text-align: center;
font-size: 11px;
font-weight: 700;
}
figure.theme {
float: left;
margin: 0px;
padding: 0px;
height: 140px;
width: calc(33% - 10px);
margin: 5px;
text-align: center;
}
img.theme {
width: 100px;
height: 100px;
background-color: #eee;
border-radius: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
figure.theme p {
font-size: 11px;
font-weight: 700;
}
figure.theme figcaption {
text-align: center;
font-size: 11px;
font-weight: 700;
color: #999;
}
section.container {
width:100%;
max-width:400px;
background-color: white;
min-height: calc(100vh - 92px);
display:none;
top:0px;
}
section.container.active ,section.container.cast{
position:relative;
display:block;
}
section.container.fixed{
position:fixed;
top:92px;
}
section.container.right{
display:block;
left:100%;
}
section.container.left{
display:block;
left:-100%;
}
a.feed.hash {
color: #0099ff;
}
figcaption>p.feed {
font-size: 15px;
line-height: 20px;
}
p.feed.none {
color: #666;
text-align: center;
line-height: 120px;
}
ol.list {
margin: 0px;
list-style: none;
padding: 0px;
}
p.logout {
color: white;
font-size: 12px;
}
a.logout {
color: white;
font-size: 10px;
}
section.side.menu.login,
section.side.menu.logout {
display: none;
}
section.side.menu.login.active,
section.side.menu.logout.active {
display: block;
}
a.block.active {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
form.comment {
position: relative;
}
ol.comment {
background-color: #F3F3F3;
list-style: none;
margin: 0px;
padding: 0px;
text-align: left;
}
ol.comment li {
padding: 10px;
padding-left: 52px;
position: relative;
line-height: 32px;
}
ol.comment li span.comment {
display: inline-block;
line-height: 20px;
font-size: 12px;
font-weight: normal;
color: #666666
}
ol.comment img.profile {
position: absolute;
display: inline-block;
border-radius: 50%;
top: 10px;
left: 10px;
width: 32px;
height: 32px;
}
ol.comment span.nick {
font-size: 13px;
font-weight: 800;
color: #004c7e;
margin: 0px 5px;
}
ol.comment li span img.delete {
width: 20px;
height: 20px;
background-color: #ccc;
vertical-align: middle;
}
ol.search.list {
list-style: none;
margin: 0px;
padding: 0px;
min-height: calc(100% - 40px);
}
ol.search.list li {
font-size: 0px;
text-align: center;
color: #666666;
padding: 0px;
margin: 0px;
line-height: 40px
}
ol.search.list li a {
font-size: 14px;
vertical-align: middle;
margin: 0px 10px;
}
ol.search.list li button {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: white;
border: 0px;
margin: 0px 10px;
padding: 2px;
height: 14px;
width: 14px;
vertical-align: middle;
}
ol.search.list li button.delete {
opacity: 0.7;
background-image: url('/icon/delete.png');
}
ol.search.list li button.save {
opacity: 0.7;
background-image: url('/icon/save.png');
}
section.scroll {
overflow-y: scroll;
}
section.layer {
height: 100%;
}
section.list.search {
display: none;
height: calc(100% - 52px - 40px);
}
section.list.search.active {
display: block;
}
p.search.hash.list.none {
display: none;
text-align: center;
font-size: 14px;
color: #666;
line-height: 40px;
}
p.search.hash.list.none.active {
display: block;
}
footer.search.list {
display: none;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 0px;
}
footer.search.list.active {
display: block;
}
footer.search.list button {
line-height: 30px;
height: 30px;
font-size: 14px;
color: white;
border-radius: 30px;
border: 0px;
background-color: #c3c3c3;
display: inline-block;
min-width: 100px;
padding: 0px;
margin: 0px 10px;
vertical-align: middle;
}
aside.layer.iframe,
aside.layer.sign {
background-color: white;
}
aside.layer.iframe>header,
aside.layer.sign>header {
text-align: center;
line-height: 52px;
}
span.iframe.title,
span.sign.title {
color: white;
font-size: 14px;
font-weight: 700;
}
aside iframe.aside,
aside iframe.sign {
border: 0px;
width: 100%;
height: calc(100% - 52px);
}
aside.layer.iframe{
background-color: white;
}
article.side.menu{
position: absolute;
top:80px;
bottom: 0px;
left:0px;
right: 0px;
overflow-y: auto;
}
nav.feed.admin{
display: none;
position: relative;
height: 40px;
font-size:0px;
padding:0px;
margin:0px;
clear: both;
background-color: #F3F3F3;
}
nav.feed.admin a{
line-height: 0px;
display: inline-block;
width: 40px;
height: 40px;
background-position: center;
background-repeat: no-repeat;
}
nav.feed.admin > span.right{
float: right;
}
nav.feed.admin a.bookmark{
background-image: url('/icon/outline-bookmark_border-24px.svg');
}
nav.feed.admin a.edit{
background-image: url('/icon/baseline-edit-24px.svg');
}
nav.feed.admin a.bookmark.active{
background-image: url('/icon/outline-bookmark-24px.svg');
}
nav.feed.admin a.delete{
background-image: url('/icon/outline-delete-24px.svg');
}
nav.feed.admin a.wallpaper{
background-image: url('/icon/outline-wallpaper-24px.svg');
}
nav.feed.admin progress{
position: absolute;
top:0px;
width: 100%;
height: 4px;
display: none;
}
nav.feed.admin progress.active{
display: block;
}
h1.pick{
font-size:0px;
text-align: left;
padding:10px 10px;
}
h1.pick > span{
display:inline-block;
line-height: 30px;
font-size: 22px;
font-weight: blod;
padding: 0px 10px;
color: #004d80;
margin:0px;
padding:0px;
vertical-align: middle;
}
footer.pick{
height:10px;
margin-bottom: 20px;
}
figure.feed.pick:before{
position: absolute;
top:0px;
left: 0px;
height: 24px;
width: 24px;
background-image: url('/icon/outline-bookmark_border-24px.svg');
}
div.notice{
display:none;
line-height: 60px;
font-size: 16px;
font-weight: bold;
text-align: center;
}
div.notice.active ,div.progress.active{
display:block;
}
.progress:before{
position:absolute;
top:calc(50% - 30px);
left:calc(50% - 30px);
height:60px;
width:60px;
background-image: url("/icon/loading.gif");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content:'';
}
img.comment.delete{
display:none;
}
video.feed{
top:0px;
width:100%;
bottom: 0px;
display: none;
height:100%;
}
video.feed.active{
display: block;
}
footer.feed ,footer.container.feed{
position: relative;
text-align: center;
}
footer.container.feed{
min-height:60px;
line-height: 60px;
}
footer.feed.container p.notice{
}
footer.feed progress{
display:none;
width:100%;
height:8px;
position: absolute;
top:-8px;
left:0px;
right:0px;
}
footer.feed progress.active{
display:block;
}
article.feed footer{
background-color: #eee;
}
article.main{
position:relative;
top:0px;
width:100%;
overflow-x:hidden;
display:none;
}
article.main.touch{
min-height:calc(100vh - 92px);
}
article.main.cast{
min-height:calc(100vh - 52px);
}
article.main.active{
display: block;
}
article.cast{
z-index:10;
}
header.cast.top{
background-color: #004d80;
font-size: 0px;
padding: 0px;
height: 52px;
position: fixed;
}
progress.footer{
visibility: hidden;
height:4px;
width:100%;
position: absolute;
top:0px;
left:0px;
right: 0px;
margin:0px;
padding: 0px;
}
progress.footer.active{
display:block;
}
img.pick.livecast{
height:200px;
background-color: #004d80;
background-image: url('/icon/logo_text2.png');
background-position: center;
background-repeat: no-repeat;
background-size: auto 20px
}
video{
position: relative;
}
div.media.controls{
position:relative;
}
div.media.controls::after{
position: absolute;
content:'';
top:0px;
left:0px;
right:0px;
bottom: 0px;
background-image: url('/icon/btn_play.png');
background-position: center;
background-size: 80px;
background-repeat: no-repeat;
z-index:1;
}
button.pop-video-close{
position:absolute; top:0px; right:0px; width:30px; height:30px; z-index:999;
margin:5px;
border:0px;
background-image: url('/icon/close.png');
background-position: center;
background-size: 80px;
background-repeat: no-repeat;
background-color: transparent;
}
section.pop-video{
position: fixed;
top: 0px;
bottom:0px;
max-width:400px;
margin:0px auto;
width:100%;
border:0px;
overflow-x: hidden; z-index:9999;
background-color:rgba(0,0,0,0.7);
}
iframe.pop-video{
position:absolute; top:0px; width:100%; border:0px; height:100%;
}
.blur {
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
-webkit-filter: blur(3px);
filter: blur(3px);
}