﻿@import url(https://fonts.googleapis.com/earlyaccess/jejugothic.css);
@import 'https://fonts.googleapis.com/css?family=Roboto';

@media screen and (max-width:1280px) {
	
/***************
    Content
****************/

#content { 
    width:100%; 
    margin:0 auto;
}

/***************
    Thumbnail
****************/

.thumbnail {
     width:50%;
}
.thumbnail .article .detail > .read_more > .txt_read_more > .line { 
    display:none; 
}

/***************
    Main Article
****************/

#main .inner-main { 
    width:100%; 
}
#main .main-article { 
    font-size:12pt; 
}

/***************
    Sidebar
****************/

.aside { display:none; }

/***************
    Comment List
****************/

.commentList .image > img { 
    display:none; 
}

}
@media screen and (min-width:1280px) {

/***************
    Content
****************/

#content { 
    width:1280px; 
    margin:0 auto;
    margin-top:75px;
    overflow:hidden;
}

/***************
    Masonry
****************/

.clear-masonry {
    clear:both;
}
#masonry_container { 
    width:1280px; 
    margin:0 auto; 
}

/***************
    Thumbnail
****************/

.thumbnail { 
    width:315px; 
    margin:1px; 
}

/***************
    Sidebar
****************/

.grid {
  width: 1280px;
  margin: 0 auto;
}
.row {
  overflow: hidden;
}

.span_4 {
  float: left;
  width: 426.66px;
}
.aside-wrapper {
    width:100%;
    background-color:white;
    border-top:1px solid #e3e3e3;
    margin-top:50px;
}
.aside .side-item a:visited,
.aside .side-item a:link { 
    color:#585858; 
}
.aside .side-item a:hover { 
    color:#ffaea1; 
}
.aside { 
    width:1280px; 
    margin:0 auto;
	border-top:1px solid #f1f1f1;
	box-sizing:border-box;
	overflow:hidden;
    padding:25px 0;
}
.aside .side-item .article { font-size:10pt; width:60%; margin:0 auto; line-height:23px; }
.aside .side-item .article .name { color: #585858; }
.aside .side-item ul.date-posts  { text-align:center; }
.aside .side-item ul { text-align:left; padding:0; margin:0;  }
.aside .side-item .counter { width:70%; margin:0 auto; line-height:23px; font-size:10pt;}
.aside .side-item .counter > div, 
.aside .side-item .counter > span { color:#585858; font-size:10pt; }
.aside .side-item .counter .counter_title { float:left; }
.aside .side-item .counter .counter_no { float:right; }
.aside .side-item .counter .total { overflow:hidden; font-size:10pt; color:#585858; }
.aside .side-item .counter .today { overflow:hidden; font-size:10pt;}
.aside .side-item .counter .yesterday { overflow:hidden; font-size:10pt;}
.aside .side-item { 
    text-align:center;
    box-sizing:border-box;
    padding:10px;
}
.aside .side-item .title {
    text-align:center;
    font-weight:bold;
    font-size:10pt; 
    margin-bottom:25px;
}

/***************
    Main Article
****************/

#main .main-article { font-size:12pt; }
#main .inner-main { width:1280px; margin:1px; }

/***************
    Comment List
****************/

.commentList .image > img { 
    width:85px; 
    height:85px; 
    margin-right:25px;
    border-radius:50px;
}
.commentList .comments { overflow:hidden; }
.commentList .image {
    float:left;
	margin-bottom:35px;
}
.commentList .articles {
	padding-left:125px;
}

}

/***************
    ini
****************/

* { 
    margin:0px;
    padding:0px;
}
 html, body { 
    background-color:#f1f1f1;
    font-family: 'Jeju Gothic', serif; 
    margin:0px; padding:0px; 
    font-size:12pt; 
}
a { text-decoration:none; transition-duration:0.5s; }
li { list-style:none; }

/***************
    Tistory Tool Bar
****************/

#tistorytoolbarid { display : none; }


/***************
    Thumbnail
****************/

.thumbnail .article .detail > a {
    transition-duration:0.5s;
}
.thumbnail .article .detail > a:hover { color:skyblue; }
.thumbnail .article .detail > a:visited { color:skyblue; }
.thumbnail .article .detail > a:link { color:skyblue; }
.thumbnail .article .title > a:hover { color:black; }
.thumbnail .article .title > a:visited { color:black; }
.thumbnail .article .title > a:link { color:black; }
.thumbnail .article .detail > .read_more > .txt_read_more > a:link { color:black; }
.thumbnail .article .detail > .read_more > .txt_read_more > a:visited { color:black; }
.thumbnail .article .detail > .read_more > .txt_read_more > a:hover { color:red; }
.thumbnail .article .detail > .read_more > .txt_read_more > a:hover + div.line { width:100%; }

.thumbnail {
    padding-bottom:10px;
    background-color:white;
    box-sizing:border-box;
	border:1px solid #e3e3e3;
}

.thumbnail .image {
    overflow:hidden;
    text-align:center;
}

.thumbnail .image img {
    width:100%;
    height:100%;
}
.thumbnail .image img:hover {
    transform : scale(1.2);
    transition-duration : 0.2s;
}
.thumbnail .article {
    padding:15px;
}
.thumbnail .article .summary {
   overflow:hidden;
   max-height:80px;
   margin:5px 0;
   font-size:10pt;
   line-height:28px;
   color:#666;
   vertical-align:top;
   word-break:break-all;
   -webkit-box-orient:vertical;
   -webkit-line-clamp:3;
   display:-webkit-box;
   display:-ms-flexbox;
   display:box;
}
.thumbnail .article .detail {
    width: 100%;
    font-size:10pt;
    margin-top:10px;
}
.thumbnail .article .title { margin-top:15px; }
.thumbnail .article .detail > .category {
    float:left;
    width:70%;
    font-size:10pt;
} 
.thumbnail .article .detail > .read_more {
    font-size:10pt;
    float:right;
	text-align:right;
}
.thumbnail .article .detail > .read_more > .txt_read_more > a { text-align : center; }
.thumbnail .article .detail > .read_more > .txt_read_more > .line {
    margin-top:3px;
    width:0px; height:2px;
    background-color:red;
    transition-duration:0.3s;
}

/***************
    Guest
****************/

#guest {
    padding:55px;
    background-color:white;
    box-sizing:border-box;
    border:1px solid #f1f1f1;
    font-size:10pt;
    word-break:break-all;
}
#guest .title { 
    text-align:center; 
    font-size:20pt; 
    margin-bottom:50px;
}
#guest .guestWrite input:first-of-type {
    margin-left:0;
}
#guest .guestWrite input {
    width:25%;
    height:15px;
    padding:15px;
    margin:0px 10px;
    border:1px solid #dfdfdf;
    box-sizing:border-box;
}
#guest .guestWrite a.g_comment:hover { 
    background-color:gray; 
}
#guest .guestWrite a.g_comment {
    padding: 10px;
    padding-left:15px;
    padding-right:15px;
    background-color:#ffaea1;
    color:white;
    transition-duration:0.5s;
    font-size:10pt;
}
#guest .guestWrite textarea {
    width:100%;
    margin:25px 0;
    border:1px solid #dfdfdf;
    box-sizing:border-box;
}

#guest .guestList { 
    margin-top:50px; 
}
#guest .guestList .guest_info,
#guest .guestList .guest_comments { 
    border-bottom:1px solid #dfdfdf; 
    padding:20px;
    margin:auto 25px;
}
#guest .guestList a:visited,
#guest .guestList a:link { 
    color:black; 
}
#guest .guestList a:hover { 
    color:#ffaea1; 
}
#guest .guestList { 
    margin:25px 0; 
}
#guest .guestList .reply {
    margin:20px 0;
    margin-bottom:30px;
}
#guest .guestList .g_article { 
    padding:20px;
    padding-bottom:0px;
    margin-left:25px;
    line-height:30px; 
    font-size:12pt;
}
#guest .guestList .control > a { 
    font-size:10pt; 
    transition-duration:0.5s;
}
#guest .guestList .date { 
    font-size:10pt; 
}
#guest .guestList .name { 
    font-size:12pt; 
}
#guest .guestList .reply { 
    margin-left:45px; 
}
#guest .guestList .reply > a {
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    background-color:#ffaea1;
    color:white;
    transition-duration:0.2s;
    font-size:10pt;
    transition-duration:0.5s;
}
#guest .guestList .reply > a:hover { 
    background-color:gray; 
}

/***************
    Main Article
****************/

#main {
    width:100%;
    overflow:hidden;
    background-color:white;
    border:1px solid #f1f1f1;
    box-sizing:border-box;
}
#main .inner-main { 
    padding:20px;
    background-color:white;
    box-sizing:border-box;
    font-size:10pt;
}
#main .main-article-info  a:hover { color:#585858; }
#main .main-article-info  a:visited { color:#585858; }
#main .main-article-info  a:link { color:#ffaea1; }
#main .main-article-info {
    width:100%;
    display:block; 
    font-size:10pt;
    padding-bottom:15px;
		text-align:center;
}
#main .main-article-info  .date {
    margin-right:10px;
    color:#bababa;
}
#main .main-article-info  .title {
    display:block;
    font-size:25pt;
    margin-bottom:20px;
}
#main .main-article-info  .category > a:hover { color:skyblue; }
#main .main-article-info  .category > a:visited { color:skyblue; }
#main .main-article-info  .category > a:link { color:skyblue; }
#main .main-article-info  .category {
    margin-bottom:20px;
}
#main .main-article-info  .title ~ div {
    display:block;
    float:left;
    margin-right:1px;
}
#main .main-article {
    display:block;
    float:none;
    margin:35px 0;
	line-height:30px;
}
#main .inner-main .admin  a:visited { color:#585858; }
#main .inner-main .admin  a:link { color:#585858; }
#main .inner-main .admin  a:hover { color:#ffaea1; }
#main .inner-main .admin {
		 text-align:center;
     font-size:11pt;
     border-bottom:thin solid #f1f1f1; 
     padding-bottom:25px;
}
.tagText a {
    transition-duration:0.5s;
}
.tagText a:link { color:#585858; }
.tagText a:visited { color:#585858; }
.tagText a:hover { color:#ffaea1;}
.tagText { 
    color:#ffaea1; 
    margin-bottom:15px; 
    font-size:10pt;
    transition-duration:0.2s;
}

/***************
    Comment Counter
****************/
.comments_counter  a {
    transition-duration:0.5s;
}
.comments_counter  a:visited { color:black; }
.comments_counter  a:link { color:black; }
.comments_counter  a:hover { color:#ffaea1; }
.comments_counter { 
    border-top:thin solid #f1f1f1; 
    border-bottom:thin solid #f1f1f1; 
    padding:30px 0;
    font-size:11pt;
    color:#bababa; 
}

/***************
    Comment List
****************/

.commentList  a {
    transition-duration:0.5s;
}
.commentList  a:visited,
.commentList  a:link { 
    color:black; 
}
.commentList  a:hover { 
    color:#ffaea1; 
}
.commentList { 
    margin:25px 0;
    word-break:break-all;
}
.commentList .reply {
    margin:20px 0;
    margin-bottom:25px;
}
.commentList .articles { 
    margin-top:25px; 
    font-size:12pt; 
}
.commentList .comment_article { 
    line-height:30px; 
}
.commentList .comment_info {
    margin:10px 0;
}
.commentList .control,
.commentList .date { 
    font-size:10pt; 
}
.commentList .name { 
    font-size:12pt; 
}
.commentList .reply > a {
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    background-color:#ffaea1;
    color:white;
    transition-duration:0.5s;
    font-size:10pt;
}
.commentList .reply > a:hover { 
    background-color:gray; 
}
.commentList .comments { 
    overflow:hidden; 
}
.commentList .s-rp2 { 
    margin-left:50px; 
}


/***************
    Comment Writer
****************/

.commentWrite {
    margin-top:25px;
    color:#bababa; 
}
.commentWrite .info_wirter {
    display:block;
    width:85%;
    float:left;
    text-align:left;
}
.commentWrite .check_secret {
    display:block;
    width:15%;
    float:left;
    text-align:right;
    margin-top:5px;
}
.commentWrite .check_secret > .checkbox { display:none; }
.commentWrite .check_secret > .checkbox:checked + label { background-color:gray; }
.commentWrite .check_secret > .checkbox + label {
    padding: 5px;
    padding-left:10px;
    padding-right:10px;
    background-color:#ffaea1;
    color:white;
    transition-duration:0.5s;
    font-size:10pt;
    cursor:pointer;
}
.commentWrite s_rp_guest > input:first-of-type {
    margin-left:0;
}
.commentWrite s_rp_guest > input {
    width:25%;
    height:15px;
    padding:15px;
    margin:0 10px;
    border:1px solid #dfdfdf;
    box-sizing:border-box;
}
.commentWrite label { font-size:9pt; }
.commentWrite a.comment:hover { background-color:gray; }
.commentWrite a.comment {
    padding: 10px;
    padding-left:15px;
    padding-right:15px;
    background-color:#ffaea1;
    color:white;
    transition-duration:0.5s;
    font-size:10pt;
}
.commentWrite textarea {
    width:100%;
    margin:25px 0;
    padding:15px;
    border:1px solid #dfdfdf;
    box-sizing:border-box;
}


/***************
    Paging
****************/

.paging  a:visited { color:white; }
.paging  a:link { color:white; }
.paging  a:hover { color:white; }
.paging {
    text-align:center;
	margin:75px auto;
}
.paging > .numbox > a {
    padding: 10px;
    padding-left:15px;
    padding-right:15px;
    background-color:#ffaea1;
    color:white;
    margin-right:10px;
    transition-duration:0.5s;
    font-size:10pt;
}
.paging > .numbox  > a.num:hover { background-color:gray; }


.coryright {
    text-align:center;
    padding:25px 0;
    padding-top:45px;
    padding-bottom:50px;
    background-color:white;
    font-size:9pt;
}
iframe, embed, video { max-width: 100%; }
.tt_article_useless_p_margin div > div > a[href^='/toolbar'] { display: none; }


