@charset "UTF-8";

/*웹 폰트 입니다 사용하기 싫다면 지우세요*/
@import url(//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);

/* 블로그 전체 배경화면  파일명 주의 하세요 사용하기 싫다면 지우세요*/
body{
  font-family: nanumbarungothic;
  background-image: url("./images/cover.jpg");
  background-size: cover;
}


/* 티스토리 기본 메뉴바 */
#tistorytoolbarid {
  display: none !important;
}

/* 반응형으로 만들어주는 컨텐츠 컨테이너 */
/* width나 height를 수정하려면  left도 수정해주어야 합니다*/
.ria-responsive-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.ria-responsive-container > iframe, .ria-responsive-container > object, .ria-responsive-container > embed {
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 80%;
}

/* 더보기 열기버튼  */
.moreless_fold:before {
  content: "\f13a";
  font-family: nanumbarungothic;
  vertical-align: middle;
  margin-right: 5px;
  font-size: 22px;
  color: #3dbb50;
}

/* 더보기 닫기 버튼  */
.moreless_top:before {
  content: "\f138";
  font-family: nanumbarungothic;
  vertical-align: middle;
  margin-right: 5px;
  font-size: 22px;
  color: #3dbb50;
}

/* 더보기 안에 컨텐츠 */
.moreless_content {
  background-color: #ebebeb;
  padding: 10px;
  margin: 10px;
}

/* 더보기 아래 버튼 숨기기 */
.moreless_bottom {
  display: none;
}

/* RIA 다운로드 버튼  */
.ria-download-button {
  background-color: #1daa1f;
  padding: 5px 10px;
  border-radius: 5px;
  display: inline-block;
  font-size: 12px;
  color: white !important;
}
.ria-download-button:hover {
  background-color: #5C77FF;
  text-decoration: none !important;
}
.ria-download-button > i {
  vertical-align: middle;
  margin-right: 5px;
  font-size: 16px;
}

/* 관리자 댓글 필명 수식어같은 위치 조정하고싶으면 left를 조정해야합니다
.rp_admin:after, .guest_admin :after{
	content: "admin";
	padding: 1px 4px 1px 4px;
	font-size: 12px;
	background-color: #f64f4f;
	color: white;
	border-radius: 5px;
	margin-left: 10px;
	position: absolute;
	top: 7px;
	left: 150px;
  @media screen and (max-width: 640px){
    left: 120px;
  }
} */
/* 디스커스 배경 */
.ria-disqus {
  background: #e3e4e3;
  padding: 20px;
  border-radius: 8px;
}

/* 본문 내 링크 색상 조정  수정하려면 !imprtant를 사용하세요*/
.article a {
  color: #5C77FF;
}
.article a:hover {
  color: blue;
  text-decoration: underline;
}

/* 구글 번역기 상단 위치 조정  */
.goog-te-banner-frame {
  box-shadow: 0 0 1px 1px #999999 !important;
  top: 60px !important;
  z-index: 10000 !important;
}

/* 메뉴 구글 번역기 바탕 조정  */
.ria-translate {
  padding: 10px 0 10px 15px;
  background-color: #ebebeb;
}

/* SyntaxHighlighter 소스코드 디바이스별 글자크기 및 레이아웃 조절  */
.syntaxhighlighter {
  max-height: 500px !important;
  overflow: auto !important;
  font-size: 16px !important;
}
@media screen and (max-width: 640px) {
  .syntaxhighlighter {
    font-size: 12px !important;
  }
}

/* 티스토리 태그 디자인 */
.ria-tag-cloud, .cloud1, .cloud2, .cloud3, .cloud4, .cloud5 {
  color: #000000;
  font-size: 13px;
  padding: 3px 5px;
  border-radius: 5px;
}
.ria-tag-cloud:hover, .cloud1:hover, .cloud2:hover, .cloud3:hover, .cloud4:hover, .cloud5:hover {
  color: #5C77FF;
}

/* 가장 많이 태깅된 것  */
.cloud1 {
  font-size: 18px;
  font-weight: bold;
  background-color: #ffbcbc;
}

/* 1부터 순서대로 태깅된 만큼 클래스가 지정됩니다 */
.cloud2 {
  font-size: 18px;
  background-color: #dffdc3;
}

.cloud3 {
  font-size: 16px;
  background-color: beige;
}

.cloud4 {
  font-weight: bold;
  background-color: #d2d2d2;
}

.cloud5 {
  color: #0CDFDB;
}

/* 여기서 부터 아래에있는건 수정하려면 !important 를 사용해야합니다 */
/* 제일위에 네비게이션 배경색 */
#nav {
  background-color: white;
}

/* 블로그 실제 컨텐츠 영역 배경색 */
#ria-wrap {
  background-color: #FcFcFc;
}

/* ria 메뉴 안의 리스트 배경색 */
#ria-nav-lists {
  background-color: #F00;
}

/* ria 메뉴 안의 리스트 글자색 */
.uk-nav-offcanvas > li > a {
  color: #ccc;
}

/* ria 메뉴  커서올릴때 배경색 */
.uk-nav-offcanvas > li > a:hover {
  background: #404040;
}

/* 글쓴이 메뉴 색깔  */
.ria-writer-menu > li > a {
  color: #5C77FF;
}
.ria-writer-menu > li > a:hover {
  /* 커서 올리면 바뀌는 색깔  */
  color: #0CDFDB;
}

/* 댓글 이나 방명록 등록 버튼  */
.ria-bt-sub {
  background-color: #7C7C6D;
  color: white;
}

/* 댓글 방명록 배경색 */
.ria-guest-write {
  background: #e0e0e0;
}