/*----------------------------------------
-- Honeycomb 1.3.1는 CSS3가 필수로 요구되며
-- 다음과 같은 목록이 사용되었습니다.
-- CSS3: Transform, Radius, Shadow,
--       Sound, Animation
----------------------------------------*/

/*------------------------------
-- 주요 배경이미지 부분 모음
------------------------------*/
#TitleLayer {}
#ContentSheet { background-image: url(images/bg_honeycomb.png); }
.writeArea textarea { /*background-image: url(images/bg_comment.png);*/ }
#BottomMenuLayer { background-image: url(images/bg_content.png); }

/*------------------------------
-- Global style
------------------------------*/
@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/* 티스토리 툴바 출력여부 */
#tistorytoolbarid { display: none !important; }

body, div, p,
dl, dt, dd,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, code, form,
fieldset, legend, textarea,
blockquote, th, td,
input, select, button {
	margin: 0;
	padding: 0;
	
	/* 첫줄: 주사용, 둘째줄: 누락시 보조사용 */
	font-family: 'Nanum Gothic', 'Consolas', 'Segoe Print',
				'AppleGothic', 'Sans-serif';
}

ul, ol, li { list-style: none; }
header, footer, section, 
article, aside, nav {
	display: block;
	padding: 0;
	margin: 0;
}

a {
	color: #19d8e9;
	text-decoration: none;
}

a:hover { text-decoration: underline; }
a img { border:none; }

strong {
	font-family: 'Consolas';
	font-weight: 700;
}

html { font-size: 62.5%; } 
body {
	position: relative;
	display: block;
	padding-bottom: 80px;
	
	color: #FFFFFF;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.6;
	overflow: auto;

	background-image: url(images/bg_whiteLine.png);
	background-size: 256px 192px, cover;
	background-color: #000000;
	background-position: 5px 6px, center center;
	background-repeat: repeat, no-repeat;
	background-attachment: fixed;
}

/* 크롬 / 사파리 스크롤바 */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	border: 3px solid #FFFFFF;
	border-radius: 4px;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
	display: block;
	height: 10px;
	background-color: rgba(255, 255, 255, 0.5);
}

::-webkit-scrollbar-track {
	background: #efefef;
	border-radius: 10px;
	border-radius: 10px;
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
	height: 50px;
	width: 50px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	border-radius: 8px;
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}

/* 주요 style 등록 */
.css_span { display: inline; }
.css_div { display: block; }

.margin5px { margin: 5px; }
.marginBottom5px { margin-bottom: 5px; }
.marginBottom-5px { margin-bottom: -5px; }
.marginRight5px { margin-right: 5px; }

.borderCCCCCC {
	padding: 5px;
	border: 1px solid rgba(204, 204, 204, 0.6);
	border-radius: 5px;
}

.borderCCCCCC:hover { border-color: rgba(254, 180, 51, 0.9); }

.fontBold { font-weight: bold; }
.fontWhite { color: #FFFFFF; }
.fontWhite a { color: #FFFFFF; }

.Display_block { display: block; }
.float_left { float: left; }
.float_right { float: right; }
.clear { clear: both; }

/* ToolTips 레이어 */
.ToolTips, .ArrowLayer:after {
	background-color: #1dc1c7;
	border: 2px solid rgba(255, 255, 255, 0.8);
}

.ToolTips {
	margin-top: 9px;
	padding: 2px;
	border-radius: 5px;
}

.ArrowLayer {
	position: absolute;
	overflow: hidden;
	
	margin-top: -12px;
	width: 30px;
	height: 10px;
}

.ArrowLayer:after {
	content: "";
	position: absolute;

	margin-top: 3px;
	margin-left: 5px;
	width: 10px;
	height: 10px;

	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

/* Submit 버튼 */
.submit {
	width: 160px;
	height: 20px;
	
	color: #FFFFFF;
	font-weight: bold;
	border-width: 1px;
	border-top-color: rgba(255, 255, 255, 0.8);
	border-left-color: rgba(255, 255, 255, 0.8);
	border-bottom-color: rgba(105, 105, 105, 0.8);
	border-right-color: rgba(105, 105, 105, 0.8);
	
	border-radius: 80px 10px;
	background: radial-gradient(ellipse at center, rgba(102, 102, 102, 0.8), rgba(0, 0, 0, 0)); 
	background-color: RGBA(0, 0, 0, 0);
	cursor: pointer;
}

.submit:hover {
	color: #feb433;
	background: radial-gradient(ellipse at center, rgba(200, 200, 200, 0.4), rgba(20, 20, 20, 0.2)); 
}

.submit:active { border-color: rgba(255, 255, 255, 0.8); }

/* Admin, Exit 버튼 */
.ExitBtn {
	position: fixed;
	background-image: url(images/subIcon_exitBtn.png);
}

.AdminBtn, .ExitBtn {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	
	background-color: rgba(202, 202, 202, 0.8);
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.AdminBtn:hover,
.ExitBtn:hover {
	background-color: rgba(254, 180, 51, 0.9);
}

.AdminBtn:active,
.ExitBtn:active {
	margin: 1px;
	width: 18px;
	height: 18px;
	background-color: rgba(102, 102, 102, 0.8);
	background-size: 18px;
}

.SetRight {
	position: absolute;
	right: 0;
	width: 20px;
	height: 20px;
}

/* Icon */
.Icon, .NIcon {
	display: block;
	text-align: center;
	cursor: pointer;
}

.Icon_1280, .NIcon_1280 {
	width: 38px;
	height: 38px;
}

.Icon_1280:active {
	width: 36px;
	height: 36px;
	background-size: 36px;
}

.Icon_small, .NIcon_small {
	width: 28px;
	height: 28px;
	background-size: 28px;
}

.Icon_small:active {
	width: 26px;
	height: 26px;
	background-size: 26px;
}

.IconEffect {
	float: left;
	margin-right: 5px;
}

.QIconEffect {
	margin-top: 5px;
}

.IconEffect,
.QIconEffect {
	padding: 5px;
	border-radius: 5px;
	background-color: rgba(25, 216, 233, 0.8);
	background-repeat: no-repeat;
	background-position: 5px;
}

.IconEffect:hover,
.QIconEffect:hover {
	background-color: rgba(254, 180, 51, 0.9);
}

.IconEffect:active,
.QIconEffect:active {
	margin: 1px;
	background-color: rgba(202, 202, 202, 0.8);
}

.IconEffect:active { margin-right: 6px; }
.QIconEffect:active { margin: 6px 1px; }

/* ol li의 hover, active 공통효과 */
.liSelectBorder a:hover,
.SelectBorder ol li:hover {
	color: #FFFFFF;
	background-color: rgba(102, 102, 102, 0.8);
}

.liSelectBorder,
.SelectBorder ol li {
	border-radius: 3px;
}

/* 본문꾸미기 */
.bottomDashedLine {
	margin-bottom: 10px;
	padding-bottom: 2px;
	border-bottom: 1px dashed #FFFFFF;
}

.contentRightShift {
	margin-right: 10px;
}

/* 서식 Option레이어 끄기 */
.codeOption,
.developmentOption {
	display: none;
}

/* developmentTitle크기 지정 */
.developmentTitle {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
}

/*------------------------------
-- Title
------------------------------*/
#TitleLayer {
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 0;
	height: 120px;
}

.TitleLayer_1280 { width: 800px !important; }
.TitleLayer_800 { width: 100%; }

#TitleLayer a {
	display: inline-block;
	margin-top: 60px;
	margin-left: 40px;
	color: #FFFFFF;
	text-shadow: 0 0 8px rgba(32, 32, 32, 0.8);
}

/*------------------------------
-- Content
------------------------------*/
#ContentLayer {
	position: relative;
	display: block;
	margin: 0 auto;
}

.ContentLayer_1280 {
	width: 740px !important;

	border-left: 20px solid RGBA(58, 58, 58, 0.8);
	border-right: 20px solid RGBA(58, 58, 58, 0.8);
	border-radius: 10px;
	box-shadow: 0 0 16px 8px rgba(32, 32, 32, 0.5);
}

.ContentLayer_800 { width: 100%; }

#ContentSheet {
	background-image: url(images/bg_honeycomb.png);
	background-position: left top;
	background-repeat: repeat;
}

.ContentSheet_1280 { padding: 10px 20px; }
.ContentSheet_650 { padding: 10px 10px; }

/*------------------------------
-- Content - Media
------------------------------*/
#mediaLogNest {
	display: inline-block;
	color: #FFFFFF;
}

/*------------------------------
-- Content - SearchContent
------------------------------*/
.SectionName, .SearchContent { margin-bottom: 10px !important; }
.SearchContent ol li { clear: both; }

.SearchContent ol li a {
	display: inline-block;
	margin: 3px 0 1px 0;
	width: 100%;
	line-height: 18px;
	color: #FFFFFF;
	border-bottom: 1px dashed #666666; 
	word-break: break-all;
}

.SearchContent ol li a span { }
.SearchContent ol li a .date { position: absolute; }
.SearchContent ol li a .title {
	float:left;
	margin-left: 90px;
}
.SearchContent ol li a .cnt { color: #FEB433; }

/*------------------------------
-- Content - TagLog
------------------------------*/
.tagContent ul li { display: inline; }

/*------------------------------
-- Content - TitleWrap
------------------------------*/
.TitleWrap {
	padding-top: 5px;
	padding-bottom: 15px;
	margin-bottom: 10px;
	border-radius: 5px;

	background: -moz-linear-gradient(top,  rgba(100,172,175,0.7) 0%, rgba(100,172,175,0.77) 7%, rgba(112,183,189,0.9) 20%, rgba(173,235,255,0.81) 83%, rgba(173,235,255,0.8) 89%, rgba(173,235,255,0.7) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,172,175,0.7)), color-stop(7%,rgba(100,172,175,0.77)), color-stop(20%,rgba(112,183,189,0.9)), color-stop(83%,rgba(173,235,255,0.81)), color-stop(89%,rgba(173,235,255,0.8)), color-stop(100%,rgba(173,235,255,0.7)));
	background: -webkit-linear-gradient(top,  rgba(100,172,175,0.7) 0%,rgba(100,172,175,0.77) 7%,rgba(112,183,189,0.9) 20%,rgba(173,235,255,0.81) 83%,rgba(173,235,255,0.8) 89%,rgba(173,235,255,0.7) 100%);
	background: -o-linear-gradient(top,  rgba(100,172,175,0.7) 0%,rgba(100,172,175,0.77) 7%,rgba(112,183,189,0.9) 20%,rgba(173,235,255,0.81) 83%,rgba(173,235,255,0.8) 89%,rgba(173,235,255,0.7) 100%);
	background: -ms-linear-gradient(top,  rgba(100,172,175,0.7) 0%,rgba(100,172,175,0.77) 7%,rgba(112,183,189,0.9) 20%,rgba(173,235,255,0.81) 83%,rgba(173,235,255,0.8) 89%,rgba(173,235,255,0.7) 100%);
	background: linear-gradient(to bottom,  rgba(100,172,175,0.7) 0%,rgba(100,172,175,0.77) 7%,rgba(112,183,189,0.9) 20%,rgba(173,235,255,0.81) 83%,rgba(173,235,255,0.8) 89%,rgba(173,235,255,0.7) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b364acaf', endColorstr='#b3adebff',GradientType=0 );
}

.WrapBox {
	margin: 0 20px;
	margin-top: 5px;
}

.AdminEditBox, .AdminEditBox a,
.contentDate, .contentArticler { display: inline-block; }
.contentDate {  margin-top: 2px; }
.contentArticler {
	padding: 3px;
	margin-top: 5px;
	background-color: #1dc1c7;
	box-shadow: -1px -1px rgba(25, 100, 100, 0.6);
}

.contentTitle, .contentCategory { display: block; }
.contentCategory { margin-top: 3px; }
.contentTitle {
	margin-top: 5px;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: 700;
	line-height: 22px;
	word-break: break-all;
}

/*------------------------------
-- Content - lockedContent
------------------------------*/
.lockedContent {
	height: 200px;
	padding-top: 60px;
	vertical-align: middle;
}

.lockedContent p {
	text-align: center;
}

.lockedContent .password {
	border: none;
	background-color: rgba(0, 0, 0, 0);
}

.lockedContent .submit {
	margin-top: 10px;
}

/*------------------------------
-- Content - ContentContain
------------------------------*/
#ContentContain { word-break: break-all; }
#ContentContain img { border-radius: 10px; }
.locationSeperator { margin-right: 3px; }

#TagIcon {
	float: left;
	display: block;
	
	margin-top: 3px;
	margin-right: 3px;
	width: 15px;
	height: 13px;
	
	background-image: url(images/subIcon_tag.png);
	background-position: center center;
	background-repeat: no-repeat;
}

/*------------------------------
-- Content - articleOthers
------------------------------*/
.articleOthers h4 {
	border-right: 3px; 
	margin-bottom: 5px;
}

.articleDate {
	float: right;
}

.articleList li {
	border-radius: 3px;
	border-bottom: 1px dashed #666666; 
}

/*------------------------------
-- Content - Comment
------------------------------*/
.commentReply {
	margin-top: 10px;
	margin-left: 68px;
}

.commentInfo {
	position: relative;
}

.commentInfo .name img {
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 48px;
	padding: 6px;
	box-shadow: -2px -2px rgba(128, 128, 128, 0.6);
	background: #FFFFFF;
}

.commentInfo .name img:hover {
	width: 64px;
	height: 64px;
	padding: 8px;
	box-shadow: -3px -3px rgba(128, 128, 128, 0.6);
}

.commentInfo .replyIcon {
	position: absolute;
	top: 10px;
	left: -68px;
	width: 55px;
	height: 20px;
	
	background: url(images/subIcon_reply.png);
	background-position: center center;
	background-repeat: no-repeat;
}

.guest_general, .guest_secret, .guest_admin,
.rp_general, .rp_secret, .rp_admin {
	margin: 5px;
	min-height: 60px;
}

.UserInfo, .commentDesc {
	margin-left: 68px;
	word-break: break-all;
}

.UserInfo {
	margin-bottom: 5px;
	line-height: 18px;
}

.UserInfo a { color: #feb433; }
.UserInfo .nav a { margin-left: 5px; }

/*------------------------------
-- Content - Comment form
------------------------------*/
.commentWrite {
	padding: 5px;
}

.writeArea {
	clear: both;
	width: 100%;
}

.commentSettings, .visitorInfo,
.visitorInfo input {
	float: left;
	display: inline-block;
}

.commentSettings {
	width: 100%;
}

.visitorInfo input {
	margin-right: 10px;
	width: 100px;
	color: #FFFFFF;
	border: none;
	background-color: rgba(0, 0, 0, 0);
}

.commentSecret,
.commentSettings .submit {
	float: right;
	display: inline-block;
}

.commentSecret input {
	margin-left: 5px;
	vertical-align: middle;
}

.writeArea textarea {
	width: 100%;
	height: 150px;
	color: #FFFFFF;
	border: none;
	
	background-color: RGBA(0, 0, 0, 0);
	background-repeat: no-repeat;
	background-position: right bottom;
	overflow: auto;
}

/* BBCode 도우미 버튼들 */
.EmoticonBtn {
	display: inline-block;
	width: 25px;
}

.EmoticonBtnText {
	margin-left: 3px;
}

.EmoticonLayer {
	position: absolute;
	display: inline-block;
	width: 28px;
	height: 18px;
	overflow: hidden;
	word-break: break-all;
}

.EmoticonLayer:hover {
	width: 200px;
	height: auto;
	color: #feb433;
}

.EmoticonLayer a {
	display: inline-block;
	color: #FFFFFF !important;
}

.emoticonborder {}

.emoticons {
	float: left;
	cursor: pointer;
}

.emoticons strong, .emoticons em,
.emoticons u, .emoticons a  {
	color: #FFFFFF;
}

.emoticonspace {
	float: left;
}

.emoticonusage {
	float: right;
	color: #feb433;
	cursor: pointer;
}

.emoticonusage a {
	color: #feb433;
}

a.rollover img {
	display:block;
	vertical-align: middle;
}

a.rollover img.rollover {
	display:none;
}

a.rollover:hover {
	position:relative;
	background-color:transparent !important;
}

a.rollover:hover img { display:none; }
a.rollover:hover img.rollover { display:block; } 

/*------------------------------
-- Content - paging
------------------------------*/
.paging {
	padding: 5px 0;
	width: 100%;
	text-align: center;
}

.paging a{
	display: inline-block;
	height: 20px;

	color: #FFFFFF;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: bold;
}

.prev, .next, .paging a span { padding: 0 5px; }
.paging a .selected { color: #feb433; }

/*------------------------------
-- Bottom menu
------------------------------*/
#BottomMenuLayer {
	position: fixed;
	display: block;
	bottom: 0px;
	
	padding-top: 15px;
	padding-bottom: 5px;
	width: 100%;
	
	background-image: url(images/bg_content.png);
	background-position: left top;
	background-repeat: repeat;
}

#BottomMenu {
	position: relative;
	margin: 1px auto;
	line-height: 20px;
}

.BottomMenu_1280 {
	width: 700px !important;
	padding: 0 20px;
}

.BottomMenu_800 {
	padding: 0 5px;
}

/*------------------------------
-- Bottom menu - Icon
------------------------------*/
#MenuIcon { background-image: url('./images/icon_category.png'); }
#NewestIcon { background-image: url('./images/icon_newest.png'); }
#AppIcon { background-image: url('./images/icon_app.png'); }
#DictionaryIcon { background-image: url('./images/icon_dictionary.png'); }
#GuestIcon { background-image: url('./images/icon_guestBook.png'); }
#ProfileIcon { background-image: url('./images/icon_profile.png'); }

/*------------------------------
-- Bottom menu - SearchBox
------------------------------*/
/* 검색상자 */
#searchBox, .searchBorder { display: inline-block; }

.searchBorder {
	float: left;
	margin: 4px 0;
	height: 20px;
	
	overflow: hidden;
	border: 1px solid rgba(204, 204, 204, 0.6);
	border-radius: 5px;
}

.searchBorder:hover {
	border-color: rgba(254, 180, 51, 0.9);
}

.searchBox_1280 { padding: 9px; }
.searchBox_small { padding: 4px; }

.searchTextBox {
	float: left;
	width: 140px;
	height: 20px;
	
	color: #FFFFFF;
	border: none;
	background-color: rgba(0, 0, 0, 0);
}

.searchBtn { border: none; }
.searchBoxBtn {
	float: left;
	width: 20px;
	height: 20px;
	background-color: rgba(0, 0, 0, 0) !important;
	cursor: pointer;
}

.searchBoxBtn:active {
	margin: 1px;
	width: 18px;
	height: 18px;
	background-size: 18px;
}

#searchBox .searchBtn { background-image: url(images/subIcon_searchIcon.png); }
#searchBox .archiveBtn { background-image: url(images/subIcon_archiveIcon.png); }
#searchBox .calendarBtn { background-image: url(images/subIcon_calendarIcon.png); }

.SubLayer {
	position: fixed;
	bottom: 60px;
	padding: 5px;

	color: #333333;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.8);

	overflow-x: hidden;
	overflow-y: auto;
	word-break: break-all;
	z-index: 10 !important;
}

.SubLayer a {
	color: #19a0a0;
}

.SubLayer h3 {
	float: left;
	display: inline-block;
	vertical-align: middle;
}

.SubLayer ul {
	clear: both;
	display: block;
}

.archiveLayer,
.calendarLayer {
	display: none;
	position: absolute;
	bottom: 6px !important;
	right: 0;
	width: 180px;
}

/*------------------------------
-- Side menu - 메뉴 Layer
------------------------------*/
#MenuLayer {
	word-break: break-all;
	width: 200px;
}

.MenuLayer_1280 {
	left: 50%;
	margin-left: -600px;
}

.MenuLayer_720 {
	left: 0px;
	margin-left: 0px;
}

#AdminBox { font-size: 0px; }
#AdminBox a { display: inline-block; }
#AdminBox .PostWrite { background-image: url(images/subIcon_write.png); }
#AdminBox .BlogAdmin { background-image: url(images/subIcon_admin.png); }

#category .active {
	width: 180px;
	border-radius: 5px;
	background-color: rgba(25, 216, 233, 0.8);
}

#category .hasChildren .categoryNode1 {
	width: 150px !important;
	background: none !important;
}

#category .lastNode {
	display: inline-block;
	width: 15px; height: 22px;
	background: transparent url(images/subIcon_categorySection.png) no-repeat 0 5px;
}

#category a {
	display: inline-block;
	width: 170px;
	height: 22px;
	line-height: 2;
	padding: 0 5px;
	color: #000000;
	border-radius: 5px;
	letter-spacing: -0.1rem;
	word-spacing: -0.3rem;
}

#category a:hover {
	background-color: rgba(25, 216, 233, 0.8);
	text-decoration: none;
}

#category .openBtn {
	display: inline-block;
	width: 20px;
	height: 22px;
	line-height: 2;
	background: transparent url(images/subIcon_categoryOpen.png) no-repeat 3px 6px;
	cursor: pointer;
}

#category .c_cnt {
	line-height: 2;
	font-family: arial;
	font-size: 9px;
	font-size: 0.9rem;
	color: #f45600;
}

/*------------------------------
-- Side menu - Web앱 Layer
------------------------------*/
#WebappLayer {
	text-align: center;
	width: 200px;
}

.WebappLayer_1280 {
	right: 50%;
	margin-right: -600px;	
}

.WebappLayer_720 {
	right: 0px;
	margin-right: 0px;	
}

.SealCase {
	margin: 0 auto;
	margin-bottom: 10px;
	width: 160px;

	text-align: left;
}

#BlogSeal {
	display: block;
	padding: 20px;
	width: 120px;
	height: 120px;

	background-image: url('images/bg_sealCase.png');
	background-repeat: no-repeat;
}

.BlogDesc {
	display: block;
}

.TistoryLink {
	margin-bottom: 5px;
	width: 170px;
}

.StatisticsGraph img {
	width: 170px;
	border-radius: 5px;
}

/*------------------------------
-- Side menu - 최신목록 Layer
------------------------------*/
#NewestLayer {
	display: none;
	letter-spacing: -0.1px;
	word-spacing: -0.1px;
}

.NewestLayer_1280 {
	left: 50%;
	margin-left: -325px;
	width: 640px !important;
}

.NewestLayer_650 {
	left: 0px;
	margin-left: 0px;
}

.NewestSection {
	float: left;
	margin-left: 5px;
	margin-bottom: 10px;
	width: 200px;
	border-radius: 3px;
}

.NewestSection li {
	border-radius: 3px;
}

.info_wrap {
	margin-left: 5px;
	border-bottom: 1px dashed #FFFFFF;
}

.TagSection {
	float: left;
	margin-left: 5px;
	margin-bottom: 10px;
	width: 405px;
}

.TagSection li {
	display: inline-block;
	margin-left: 3px;
	border-radius: 3px;
}

.NewestSection li:hover,
.TagSection li:hover {
	color: #FFFFFF;
	background-color: rgba(102, 102, 102, 0.8);
}

/*------------------------------
-- Side menu - 블로그 소개 Layer
------------------------------*/
#BlogInfoLayer {
	position: fixed;
	display: none;
	
	top: 50%;
	left: 50%;
	margin-top: -120px;
	margin-left: -200px;
	padding: 20px;
	width: 360px;
	height: 130px;
	
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 16px 8px rgba(32, 32, 32, 0.5);
	z-index: 1 !important;
}

#BlogInfoLayer a {
	color: #69a9f3;
	font-weight: bold;
}

#InfoTitleBar {
	float: left;
	position: relative;
	display: block;
	padding-bottom: 2px;
	width: 100%;
	height: 20px;
	border-bottom: 1px solid #CCCCCC;
}

#InfoTitle {
	float: left;
	width: 320px;
	line-height: 20px;
	vertical-align: middle;
	color: #69a9f3;
	font-weight: bold;
	overflow: hidden;
}

#BolgInfo {
	float: left;
	display: block;
	margin-top: 3px;
	padding-top: 7px;
	width: 360px;
	height: 100px;
}

#Profile {
	float: left;
	margin-right: 10px;
	width: 100px;
	height: 100px;
	border-bottom-left-radius: 5px;
}

#Introduce {
	float: left;
	width: 250px;
	height: 100px;
	line-height: 16px;
	color: #333333;
	vertical-align: bottom;
	letter-spacing: -0.1rem;
	word-spacing: -0.1rem;
	overflow: hidden;
}

#Introduce #firstLine {
	margin: 5px 0;
	height: 55px;
}

/*------------------------------
-- Side menu - 네이버 사전 Layer
------------------------------*/
#DictionaryLayer {
	display: none;
	left: 0;
	height: 100%;
	overflow-y: hidden !important;
}

.DictionaryLayer_1280 { width: 350px !important; }
.DictionaryLayer_650 { }

/*------------------------------
-- Quick menu Layer
------------------------------*/
#QuickMenuLayer {
	position: fixed;
	top: 75px;
	right: 0px;
}

#StarIconBtn {
	margin-top: 5px;
	padding: 5px;
	border-radius: 5px;
	background-color: rgba(243, 243, 243, 0.8);
}

/*------------------------------
-- Quick menu Layer - Icon
------------------------------*/
#ScrollTop { background-image: url('./images/icon_top.png'); }
#MainIcon { background-image: url('./images/icon_main.png'); }
#RssIcon { background-image: url('./images/icon_rss.png'); }
#RegBlog { background-image: url('./images/icon_reg.png'); }
#ScrollBottom { background-image: url('./images/icon_bottom.png'); }

/*------------------------------
-- Quick menu - Star Icon
------------------------------*/
nav.Panel_3D #StarIcon {
	background-image: url('./images/icon_nap.png');
	background-repeat: no-repeat;
	text-align: center;
	
	animation-name: spin;
	animation-duration: 3s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-name: spin;
	-webkit-animation-duration: 3s;
	-webkit-animation-direction: normal;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: spin;
	-moz-animation-duration: 3s;
	-moz-animation-direction: normal;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-o-animation-name: spin;
	-o-animation-duration: 3s;
	-o-animation-direction: normal;
	-o-animation-iteration-count: infinite;
	-o-animation-timing-function: linear;
}

.StarIcon_1280 {
	width: 38px;
	height: 38px;
}

.StarIcon_1280:active {
	width: 36px;
	height: 36px;
	background-size: 36px;
}

.StarIcon_small {
	width: 28px;
	height: 28px;
	background-size: 28px;
}

.StarIcon_small:active {
	width: 26px;
	height: 26px;
	background-size: 26px;
}

nav.Panel_3D #StarIcon:hover {
	animation-name: none;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
}

nav.Panel_3D #StarIcon:active {
	margin: 1px;
}

@keyframes spin {
	from { transform: rotateY(0deg); }
	50% { transform: rotateY(180deg); }
	to { transform: rotateY(360deg); }
}

@-webkit-keyframes spin {
	from {-webkit-transform: rotateY(0deg); }
	50% { -webkit-transform: rotateY(180deg); }
	to { -webkit-transform: rotateY(360deg); }
}

@-moz-keyframes spin {
	from { -moz-transform: rotateY(0deg); }
	50% { -moz-transform: rotateY(180deg); }
	to { -moz-transform: rotateY(360deg); }
}

@-o-keyframes spin {
	from { -o-transform: rotateY(0deg); }
	50% { -o-transform: rotateY(180deg); }
	to { -o-transform: rotateY(360deg); }
}

/*------------------------------
-- Sopt IM
------------------------------*/
#spot-im-root {	bottom: 80px !important; }