@charset "utf-8";

#sns a { color: #fff; font-weight: bold; text-decoration: none; }
#sns a:hover { opacity:1; }
#sns.social { position: fixed; top: 20px; z-index:100; }
#sns.social ul {
	padding: 0px;
	-webkit-transform: translate(-260px, 0);
	-moz-transform: translate(-260px, 0);
	-ms-transform: translate(-260px, 0);
	-o-transform: translate(-260px, 0);
	transform: translate(-260px, 0);
}
#sns.social ul li {
	display: block;
	margin: 5px;
	background: rgba(0, 0, 0, 0.36);
	width: 300px;
	text-align: right;
	padding: 10px;
	-webkit-border-radius: 0 30px 30px 0;
	-moz-border-radius: 0 30px 30px 0;
	border-radius: 0 30px 30px 0;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#sns.social ul li a{
	display:inline-flex;
}
#sns.social ul li:hover {
	-webkit-transform: translate(90px, 0);
	-moz-transform: translate(90px, 0);
	-ms-transform: translate(90px, 0);
	-o-transform: translate(90px, 0);
	transform: translate(90px, 0);
	background: rgba(102,51,0,0.6);
}
#sns.social ul li:hover a {
	color: #fff;
}
#sns.social ul li:hover i {
	color: #fff;
	background: red;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#sns.social ul li:hover .twitter { background:#1DA1F2; }
#sns.social ul li:hover .facebook { background:#3C5A99; }
#sns.social ul li:hover .insta { background:linear-gradient(135deg,#427eff 0%,#f13f79 70%) no-repeat; position:relative; overflow:hidden; }
#sns.social ul li:hover .insta:after { z-index:-1; content:""; position:absolute; overflow:hidden; top:18px; left:-9px; width:30px; height:21px; background:radial-gradient(#ffdb2c 5%,rgba(255,105,34,.65) 55%,rgba(255,88,96,0) 70%); }
#sns.social ul li .tube { font-size: 1.8rem; }
#sns.social ul li:hover .tube { background:#DA1725; }

#sns.social ul li i {
	margin-left: 10px;
	color: #fff;
	background: #663300;
	padding: 5px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	font-size: 20px;
	height:30px;
	width:30px;
	text-align: center;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

@media screen and (max-width:768px){
	#sns { display:none; }
}


/*
memo
------sns color ------
FaceBook:#3C5A99
Twitter:#1DA1F2
Instagram:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
Youtube:#DA1725
Google+:#DD5144
LINE:#00B900
tumblr:#39475D
*/