@charset "utf-8";
/* css 정리 */
/* disply  
display:inline : 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치
display:block  : 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지
display:inline-block : inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해짐

position
position: static; 속성이 아무런 영향도 주지 않음. 기본값
position: relative; top: 50px; left: 50px;  : 혼자 움직임. 나머지는 그대로 위치 사수
position: absolute; top: 50px; left: 50px;  : 혼자 움직임. 나머지는 좌우로 정렬
position: fixed; top: 50px; left: 50px;     : 혼자서 안움직임 
position: sticky; top: 20px;  : 요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
참고 : https://www.daleseo.com/css-position

float:left; 해당 요소를 어떻게 정렬할지를 정의
*/
/* otehr */
h1 { font-size:1.70em; letter-spacing:-0.05em; /* 글자 간격 */}
h2 { font-size:1.50em; letter-spacing:-0.05em; }
h3 { font-size:1.30em; letter-spacing:-0.05em; }
h4 { font-size:1.10em; letter-spacing:-0.05em; }

strong {
	color:#000000;
	font-style:normal; 
	font-weight:bolder;
}

strong2 {
	color:#ff7800;
	font-style:normal; 
	font-weight:bolder;
}

strong2:hover { color:#F06; }

a { color: #08c; }
a:hover { color: #ff7800; }

/* 이미지 확대 */
.img_scale {overflow:hidden; margin:0 auto}
/*overflow:hidden 확대 시 이미지가 밖으로X */
.img_scale img { transform:scale(1); transition:transform 0.5s linear;}
.img_scale:hover img { 
  transform:scale(1.1);            /*  default */
  -webkit-transform:scale(1.1);    /*  크롬 */
  -moz-transform:scale(1.1);       /* FireFox */
  -o-transform:scale(1.1);         /* Opera */
}

/* 풍선도움말 */
.sanghoon_hover{display:inline-block;position:relative;line-height:23px;}
.sanghoon_hover p{position:absolute;right:-20px;top:-12px;width:18px;height:18px;background:url(../img/hover.png) no-repeat}
.sanghoon_hover p > span{position:absolute;left:-50%;bottom:23px;white-space:nowrap;background:#FFF;padding:7px 15px 6px 15px;color:#333;font-size:11px;line-height:13px;border-radius:5px;font-weight:normal;display:none;border:1px solid #d3d3d3;}
.sanghoon_hover p > span span{width:10px;height:6px;position:absolute;left:15px;bottom:-6px;background:url(../img/hover_bg.png) no-repeat;margin-left:-4px}
.sanghoon_hover p:hover > span,.sanghoon_hover p:focus > span{display:block;}
/* 풍선도움말 끝*/

/* 글자수 제한 */
.text_80px {
  width        : 80px;     /* 너비는 변경될수 있습니다. */
  text-overflow: ellipsis;  /* 위에 설정한 100px 보다 길면 말줄임표처럼 표시합니다. */
  white-space  : nowrap;    /* 줄바꿈을 하지 않습니다. */
  overflow     : hidden;    /* 내용이 길면 감춤니다 */
  display      : block;     /* ie6이상 현재요소를 블럭처리합니다. */
}

.text_100px {
  width        : 100px;
  text-overflow: ellipsis;
  white-space  : nowrap;
  overflow     : hidden;
  display      : block;
}

.text_120px {
  width        : 120px;
  text-overflow: ellipsis;
  white-space  : nowrap;
  overflow     : hidden;
  display      : block;
}

.text_130px {
  width        : 130px;
  text-overflow: ellipsis;
  white-space  : nowrap;
  overflow     : hidden;
  display      : block;
}

.text_150px {
  width        : 150px;
  text-overflow: ellipsis;
  white-space  : nowrap;
  overflow     : hidden;
  display      : block;
}

.text_200px {
  width        : 200px;
  text-overflow: ellipsis;
  white-space  : nowrap;
  overflow     : hidden;
  display      : block;
}

.text_other {
  text-overflow: ellipsis;
  white-space  : nowrap;
  overflow     : hidden;
  display      : block;
}

/* 검색추천 */
.menu_search_display_box {
width        : 270px;
text-overflow: ellipsis;
white-space  : nowrap;
overflow     : hidden;
display      : block;
}

.menu_search_display_box:hover { background-color:#F6F6F6; }

.menu_search_display_box li {
display:inline-block;
margin-bottom:5px;
}

.menu_search_display_box .img {
display:inline-block;
border:1px solid #d3d3d3;
padding:1px 1px 1px 1px;
vertical-align:middle;
}

.menu_search_display_box .name {
display:inline-block;
font-size:15px;
font-weight:bolder;
vertical-align:middle;
}

.menu_search_display_box .job { 
vertical-align:middle; 
font-size:15px;
}
/* 검색추천 끝 */

/* 비로그인 팝업 */
.sns_login_popup {
position:fixed;
right:0px;
bottom:20px;
display:inline-block;
height:100px;
margin-top:100px;
font-weight:bolder;
z-index:9;
}

/* 비로그인 팝업 SNS 이미지 */
.sns_google_img, .sns_facebook_img, .sns_twitter_img, .sns_naver_img, .sns_kakao_img{
max-width: 50px;
max-height: 50px;
}

/* 더보기 */
.append_loading {
margin-top:20px;
height:50px;
font-size:15px;
}

/* 별점 */
.sh_star {
width:75px;
height:15px;
background:url(../img/stars.png) no-repeat -75px 0;
}

.sh_star span {
display:block;
height:15px;
background:url(../img/stars.png) no-repeat left top;
text-indent:-9999em;
}

/* youtube 부분 */
#youtube { }
#youtube h1 { }

#youtube li {
display:inline-block;
border:1px solid #d3d3d3;
border-radius: 3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
padding:2px 2px 2px 2px;
text-align:center;
margin-bottom:10px;
margin-right:2px;
}

/* 하트 애니메이션 부분 (프로필 스크랩 사용) */
@keyframes floatUpRotateOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    top: -100px; /* 화면 위로 완전히 빠져나감 */
    transform: translate(-60%, -100%) scale(1.2) rotate(-20deg);
  }
}
/* 하트 애니메이션 부분 끝 */