html,body,div { margin:0px; padding:0px; font-family: '맑은 고딕';}
html,body { overflow-x:hidden;}
body { 
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
 }
ul,li { margin:0px; padding:0px; float:left; list-style:none; }
input { vertical-align:middle; -webkit-appearance: none;}
input[type="radio"] {-webkit-appearance:radio; -moz-appearance:radio; appearance:adio;}
::-webkit-scrollbar { display:none; }
a { color:#000; text-decoration:none; cursor:pointer; }
a:link { color:#000; text-decoration:none; }
a:visited { color:#000;text-decoration:none; }
a:hover { text-decoration:underline; }
input[type="button"]{cursor:pointer;}

@media screen and (min-width:100px) and (max-width:600px){
	.grid { padding:0px 2%; }
	.grid-item {float: left;width:48%;display:inline-block;  box-sizing:border-box;}
}
@media screen and (min-width:600px) and (max-width:900px){
	.grid { padding:0px 2%; }
	.grid-item {float: left;width:32%;display:inline-block; box-sizing:border-box;}
}
@media screen and (min-width:900px) and (max-width:1200px){
	.grid { padding:0px 2%; }
	.grid-item {float: left;width:25%;display:inline-block; box-sizing:border-box;}
}
@media screen and (min-width:1200px) and (max-width:1500px){
	.grid { padding:0px 2.5%; }
	.grid-item {float: left;width:19%;display:inline-block; box-sizing:border-box;}
}
@media screen and (min-width:1500px){
	.grid { padding:0px 2%; }
	.grid-item {float: left;width:16%;display:inline-block; box-sizing:border-box;}
}

.grid img{
	float:left;
	width:100%;
	min-height:130px;
}

/* list 공통 css */
.grid-item {
	position: relative;
	overflow: hidden;	
	color: #ffffff;
	text-align: center;
	font-size: 16px;
	
	border-radius:15px;
	padding:5px;
	box-sizing:border-box;
}
.grid-item * {
	border-radius:15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
}
.grid-item > p {
	height:0px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	position: absolute;
	width: 100%;
	margin: 0;
	opacity: 0;
	line-height: 1.6em;
	font-size: 0.9em;
}
div.grid-item:hover { background:#000000;}
div.grid-item:hover img {
	opacity: 0.25;	
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	overflow:hidden;
}
div.grid-item:hover p {	
	border-radius:15px;
	overflow:hidden;
	height:100%;
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}


span.save_icon {display:inline-block; position:absolute; top:10; right:10; background-color:#e60023; border-radius:20px; padding:3px 15px; color:#FFF; cursor:pointer; }
span.save_icon:hover { background-color:#a2061e; transition:0.3s;}
span.source_url{ display:inline-block;position:absolute; left:10; bottom:10; }
span.share_icon { display:inline-block;position:absolute; left:10; top:10; }
span.img_title { display:inline-block; position:absolute; top:50; left:0;padding:0px 15px 0px 10px; font-size:15px; font-weight:bold; box-sizing:border-box; width:100%; }
span.view_icon { display:inline-block; position:absolute; right:10; bottom:10; opacity:1;width:30px; height:30px; background-image:url('/images/icon/icon_view2.png'); background-size:cover; border-radius:0px; cursor:pointer; }

/* 팔로우, 팔로윙 유저 정보 */
span.img_title2 { display:inline-block; position:absolute; top:50; left:0;padding:0px 15px; font-size:14px; line-height:50px; font-weight:bold; line-height:30px; box-sizing:border-box; width:100%; }
span.img_title2 > b { font-size:25px; line-height:40px; }
span.img_title2 > input { border:0px; background-color:#FFFFFF; padding:5px 20px; border-radius:5px; }


/* index.php 의 layer_box */ 
.layer_box {background-color:#FFF; display:none; width:90%;}
.layer_box > ul {width:100%; display:inline-block; padding:10px 10px 5px 10px; box-sizing:border-box;}
.layer_box > ul > li.li_1 {width:20%; padding:10px 10px; box-sizing:border-box;}
.layer_box > ul > li.li_1 > span {padding:5px 7px; cursor:pointer;}
.layer_box > ul > li.li_1 > span:hover { background-color:#e8e8e8; border-radius:5px;}
.layer_box > ul > li.li_1 > span > img {width:20px;}

.layer_box > ul > li.li_2 {width:80%; text-align:right; padding:10px 10px 5px 10px; box-sizing:border-box; font-size:13px;}
.layer_box > ul > li.li_2 > span {  border-radius:6px; padding:8px 7px; cursor:pointer; }
.layer_box > ul > li.li_2 > span.send {background-color:#e8e8e8; } 
.layer_box > ul > li.li_2 > span.save { background-color:#bd0102; color:#FFFFFF;}

.layer_box > ul > li.li_2 > span.send:hover { background-color:#cacaca; }
.layer_box > ul > li.li_2 > span.save:hover { background-color:#940001; }

.layer_box > ul > li.li_2 > span > img {width:20px; margin-bottom:3px;}

.layer_box > iframe {width:100%; height:80%;}


/* send_layer */
.send_layer { background-color:#FFF; display:none; width:90%; max-width:500px; height:250px;}
.send_layer > ul {width:100%; display:inline-block; padding:10px 10px 5px 10px; box-sizing:border-box;}
.send_layer > ul > li.li_1 {width:20%; padding:10px 10px; box-sizing:border-box;}
.send_layer > ul > li.li_1 > span {padding:5px 7px; cursor:pointer;}
.send_layer > ul > li.li_1 > span:hover { background-color:#e8e8e8; border-radius:5px;}
.send_layer > ul > li.li_1 > span > img {width:20px;}
.send_layer > ul > li.li_2 { width:80%; text-align:right; line-height:40px; font-size:13px; color:red;}
.send_layer > iframe {width:100%; height:200px;}



/* page/   mypage, pin, follow, following, log 의 메뉴들 */
div.mypage { width:100%; text-align:center; }
div.mypage > div.user_box { width:100%; max-width:1200px; display:inline-block; border-bottom:1px dotted #000000; padding:10px 0px;}
div.mypage > div.user_box > ul { width:100%; display:inline-block; }
div.mypage > div.user_box > ul > li.li_1 { width:40%; text-align:left; padding-left:2%; box-sizing:border-box; }
div.mypage > div.user_box > ul > li.li_1 > img { width:120px;border-radius:60px; cursor:pointer; }
div.mypage > div.user_box > ul > li.li_2 { width:60%; text-align:right; padding-right:2%; box-sizing:border-box; }
div.mypage > div.user_box > ul > li.li_2 > span.userid { width:100%; display:inline-block; font-size:45px; padding-top:20px; font-weight:bold; font-family:'맑은 고딕'; cursor:pointer; }
div.mypage > div.user_box > ul > li.li_2 > span.follow { width:100%; display:inline-block;font-size:13px; padding-top:4px; }

div.mypage > div.mypage_menu { padding:20px 0px;}
div.mypage > div.mypage_menu > span {  border-radius:20px; font-weight:bold; padding:0px 15px; height:40px; line-height:40px; display:inline-block; cursor:pointer; }
div.mypage > div.mypage_menu > span:hover { background-color:#d8d8d8; }
div.mypage > div.mypage_menu > span.on { background-color:#000000; color:#FFFFFF; }