.reviewHome a.new:before{content: "NEW";background-color: #ffa767;display: inline-block;width: 32px;text-align: center;color: #fff;height: 18px;line-height: 18px;border-radius: 3px;font-size: 11px;margin-right: 8px;}
.container{}
.container *{box-sizing: border-box; }
.container > h3{text-align: center; color: #595959; font-size: 14px; margin: 50px auto 25px; }
.container > .sectionBtn{text-align: center; margin: 0 auto 50px; }
.container > .sectionBtn > li{background-color: #eee; cursor: pointer; display: inline-block; height: 38px; line-height: 38px; width: 140px; margin: 0 2px; }
.container > .sectionBtn > li > a{color: #595959; font-size: 14px; width: 100%; height: 100%; display: block; }
.container > .sectionBtn > li.on{background-color: #00AEEF; }
.container > .sectionBtn > li.on > a{color: #fff; font-weight: 500; }
.container > .section{width: 95%; margin: 0 auto; max-width: 1080px; padding-bottom: 50px; }
.container > .section > .camBox{text-align: center; margin: 0 auto 25px; }
.container > .section > .camBox > select{color: #333; font-weight: 500; border: 0; border-bottom: 2px solid #797979; font-size: 16px; padding: 0 5px 7px; margin: 0 20px; text-align: center; }
.container > .section > .camBox > select > option{text-align: left; font-size: 14px; }
.container > .section > .kategorieP{text-align: center; margin: 0 auto 25px; display: none; }
.container > .section > .kategorieP > li{display: inline-block; margin: 0 25px; padding: 0 5px 5px; }
.container > .section > .kategorieP > li > a{color: #acacac; }
.container > .section > .kategorieP > li.on{border-bottom: 1px solid #333; }
.container > .section > .kategorieP > li.on > a{font-weight: bold; color: #333; }
.container > .section1{}
.container > .section1 > a{color: #fff; font-weight: bold; font-size: 14px; background-color: #006CBA; display: block; text-align: center; width: 120px; height: 36px; margin-top: 10px; line-height: 38px; }
.container > .section2{}
.reviewHome{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.reviewHome > li:hover{}
.reviewHome > .th{border-bottom: 1px solid #ccc; padding: 10px 0; text-align: center; }
.reviewHome > .th > p{font-size: 12px; color: #595959; font-weight: 500; text-align: center; }
.reviewHome > .td{font-size: 12px; border-bottom: 1px solid #ccc; padding: 10px 0; text-align: center; }
.reviewHome > .td > .title{text-align: left; }
.reviewHome p{display: none; float: left; font-size: 12px; color: #797979; min-height: 10px; }
.reviewHome .title{float: right; display: block; width: 85%; }
.reviewHome .writer{float: left; display: block; width: 10%; }
.reviewHome a{color: #333; }
.td .title{color: #333; }
.td .writer{color: #797979; }
/*.reviewHrd{border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }*/
.reviewHrd > li{background-color: rgba(0, 0,0, .01); border-bottom: 1px solid #ddd; padding: 20px 0; margin-bottom: 0; }
.reviewHrd > li > div{
	border-bottom: 1px solid #efefef; padding: 20px 12px;
	/* margin-bottom: 15px;  */
	margin-bottom: 0;
}
.reviewHrd > li > div > p{color: #ccc; font-size: 12px; margin-bottom: 5px; }
.reviewHrd > li > div > h5{color: #595959; font-size: 14px; margin-bottom: 5px; }
.reviewHrd > li > div > h6{color: #595959; font-size: 12px; margin-bottom: 10px; }
.reviewHrd > li > div > h4{color: #797979; font-size: 14px; font-weight: bold; line-height: 1.4; margin-bottom: 20px; }
.reviewHrd > li > div > h4 > p{font-weight: normal; display: inline-block; }
.reviewHrd > li > div > div{vertical-align: middle; margin-bottom: 8px; }
.reviewHrd > li > div > div > p{display: inline-block; color: #797979; font-weight: bold; font-size: 12px; }
.reviewHrd > li > div > div > h5{display: inline-block; color: #333; font-weight: bold; font-size: 32px; margin-left: 10px; }
.reviewHrd > li > ul{
	position: relative; 
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.reviewHrd > li > ul:before{content: ''; display: block; width: 1px; height: 100%; position: absolute; left: 0; top: 0; background-color: #ccc; }
.reviewHrd > li > ul > div > li{
	position: relative; padding: 0 20px; 
	/* border: 1px solid #d3d3d3; */
	padding: 15px 15px 8px 15px;
	width: 98%;
	margin: 0 auto;
	border: 1px solid #dedede;
	border-radius: 8px;
	box-shadow: 0px 0px 6px -1px #d0d0d0;
	background-color: #fff;
}
.reviewHrd > li > ul > div > li > pre{font-size: 12px; line-height: 1.4; color: #333; word-break: keep-all; }
/* .reviewHrd > li > ul > div > li:before{
	content: ''; display: block; width: 5px; height: 5px;
	position: absolute; left: -3px; top: 50%;	transform: translateY(-50%);
	background-color: #999; border: 1px solid #ccc; border-radius: 7px;
} */
.starPng{width: 110px; height: 20px; display: block; background-image: url('/assets/_img/sub/starPng.png'); background-repeat: no-repeat; }
.starPng > span{background-image: url('/assets/_img/sub/starPng.png'); background-repeat: no-repeat; width: 0; height: 100%; display: block; background-position: left bottom; overflow: hidden; }
.reviewHrd > li > pre{color: #333; line-height: 1.4; font-size: 14px; padding: 15px 10px; }
.container .pageN{margin-top: 20px; }
.container .pageN > .first, .container .pageN > .end{border: 0; }

/* -------------------------하트 버튼 -----------------------------*/
.likesBox{
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 5px;
	margin-top: 24px;
}
.love-icon {
  --danger-color:#2D8CE6;
  --heart-color: #9ccfff;
  --heart-active-color: var(--danger-color);
  --bg-color: white;
  position: relative;
	width: 24px;
	height: 24px;
	cursor: pointer;
}
.loveInput {
  position: absolute;
	top: 0;
	left:0 ;
	width: 100%; 
	height: 100%;
	margin: 0;
  opacity: 0;
	cursor: pointer;
}
.loveInput ~ .heart{background: var(--heart-color);}
.loveInput.animated ~ .heart {
  animation: scale-out-elastic 1.2s ease-out reverse forwards;
	background-color: var(--heart-active-color);
}
.loveInput.animated ~ .lines .line::before {
  animation: slide-left-right 0.4s ease-in forwards;
	background-color: var(--heart-active-color);
}
.loveInput.animated ~ .ring {
  /* background: var(--heart-color); */
  animation: scale-out-bigger 0.75s cubic-bezier(0, 1, 0.5, 1) forwards;
	background-color: var(--heart-active-color);
}
.loveInput.animated ~ .ring::before {
  animation: scale-out 0.75s cubic-bezier(0, 1, 0.5, 1) forwards;
}
.love-icon .heart {
  position: absolute;
	top: 8.0313px;
  left: 7px;
	transform:rotate(-45deg);
  z-index: 1;
  width: 10px;
  height: 10px;
  background: var(--heart-color);
  cursor: pointer;
}
.love-icon .heart::before, .love-icon .heart::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
}
.love-icon .heart::before {top: -50%;}
.love-icon .heart::after {right: -50%;}

.love-icon .lines {
  position: absolute;
  top: 0;
	left: 0;
  z-index: 1;
	width: 100%;
	height: 100%;
  pointer-events: none;
}
.love-icon .lines .line {
  position: absolute;
  top: 44.1%;
  left: 30.5%;
  width: 10px;
  height: 1px;
  opacity: 0.6;
}
.love-icon .lines .line:nth-child(1) {
  transform: rotate(90deg) translate(26px);
}
.love-icon .lines .line:nth-child(2) {
  transform: rotate(150deg) translate(26px);
}
.love-icon .lines .line:nth-child(3) {
  transform: rotate(210deg) translate(26px);
}
.love-icon .lines .line:nth-child(4) {
  transform: rotate(270deg) translate(26px);
}
.love-icon .lines .line:nth-child(5) {
  transform: rotate(330deg) translate(26px);
}
.love-icon .lines .line:nth-child(6) {
  transform: rotate(390deg) translate(26px);
}
.love-icon .lines .line::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--heart-color);
  transform: scaleX(0);
  transform-origin: left;
}
.love-icon .ring {
  position: relative;
  z-index: 0;
	top: -0.7px;
	left: 0;
	width: 100%;
	height: 100%;
  background: transparent;
  border-radius: 50%;
  opacity: 0.3;
  pointer-events: none;
}
.love-icon .ring::before {
  position: absolute;
  content: "";
  top: 0.3px;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  border-radius: inherit;
  transform: scale(0);
  pointer-events: none;
}

@keyframes scale-out-elastic {
  0% { transform: rotate(-45deg) scale(1); }
  4% { transform: rotate(-45deg) scale(1); }
  8% { transform: rotate(-45deg) scale(1); }
  14% {transform: rotate(-45deg) scale(1); }
  18% {transform: rotate(-45deg) scale(1); }
  26% {transform: rotate(-45deg) scale(1.01);}
  28% {transform: rotate(-45deg) scale(1.01);}
  40% {transform: rotate(-45deg) scale(0.98);}
  42% {transform: rotate(-45deg) scale(0.98);}
  56% {transform: rotate(-45deg) scale(1.05);}
  58% {transform: rotate(-45deg) scale(1.04);}
  72% {transform: rotate(-45deg) scale(0.87);}
  86% {transform: rotate(-45deg) scale(1.37);}
  100% {transform: rotate(-45deg) scale(0);  }
}

@keyframes slide-left-right {
  50% { transform: scaleX(1); transform-origin: left; }
  50.1% { transform-origin: right; }
  100% {  transform-origin: right; }
}

@keyframes scale-out {
  to { transform: scale(1.05); }
}

@keyframes scale-out-bigger {
  to { transform: scale(1.2); }
}

.recom{
	color: #3e3e3e;
	font-size: 12px;
	font-weight: 500;
	padding-bottom: 4px;
	padding-left: 3px;
	cursor: pointer;
}
.countNum{
  font-size: 12px;
  color: #000;
  font-weight: 500;
	padding-bottom: 4px;
}
/* ------------------------------------------------------*/

@media all and (min-width: 480px){
	.container > .sectionBtn > li{width: 150px; }
}
@media all and (min-width: 768px){
	.container > h3{font-size: 16px; margin: 120px auto 25px; }
	.container > .sectionBtn > li{width: 165px; height: 60px; line-height: 60px; font-size: 16px; }
	.container > .section{width: 90%; padding-bottom: 80px; }
	.container > .section > .camBox{margin: 0 auto 40px; }
	.container > .section > .camBox > select{font-size: 18px; }
	.container > .section > .camBox > select > option{font-size: 16px; }
	.reviewHome .title{float: left; }
	.reviewHome p{font-size: 14px; }
	.reviewHome p:nth-of-type(1){width: 5%; }
	.reviewHome p:nth-of-type(2){width: 5%; }
	.reviewHome p:nth-of-type(3){width: 65%; }
	.reviewHome p:nth-of-type(4){width: 13%; }
	.reviewHome p:nth-of-type(5){width: 12%; }
	
	.kategorieP{display: inline-block; }

	
	.reviewHrd > li > div{width: 25%; float: left; border-bottom: 0; }
	.reviewHrd > li > div:after{
		content: '' !important;
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #ccc;
	}
	.reviewHrd > li > div > p{font-size: 14px; }
	.reviewHrd > li > div > h5{font-size: 14px; }
	.reviewHrd > li > div > h6{font-size: 12px; }
	.reviewHrd > li > div > h4{font-size: 14px; }
	.reviewHrd > li > ul{width: 75%; min-height: 219.19px; float: left; font-size: 14px; padding: 15px 0; }
	.reviewHrd > li > ul:before{content: ''; display: block; width: 1px; height: 100%; position: absolute; left: 0; top: 0; background-color: #ccc; }
	.reviewHrd > li > ul > div > li{margin-bottom: 0;  }
	.reviewHrd > li > ul > div > li > pre{font-size: 14px; }
	/* .reviewHrd > li > ul > div > li:before{left: -3px; top: 6px; } */
	.container .pageN{margin-top: 40px; }
}
@media all and (min-width: 1080px){
	.container > .sectionBtn > li{width: 180px; }
	.container > .section{width: 100%; }
	.container > .section > .kategorieP{display: block; }
	.reviewHome p{display: block; float: left; }
	.reviewHome p:nth-of-type(1){width: 70px; }
	.reviewHome p:nth-of-type(2){width: 150px; }
	.reviewHome p:nth-of-type(3){width: 600px; }
	.reviewHome p:nth-of-type(4){width: 120px; }
	.reviewHome p:nth-of-type(5){width: 140px; }
	.reviewHrd > li > div{width: 260px; border-bottom: 0; float: left; }
	.reviewHrd > li > ul{width: 820px; float: right; }
  .kategorieM{display: none; }
}