@charset "utf-8";

/* 내용관리 */
#ctt {margin:10px 0;padding:20px;background:#fff}
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}

.rv-main-wrap{
	width:100%;
	max-width:1280px;
	height:auto;
	overflow:hidden;
	box-sizing:border-box;
	font-family: 'hd_harmony';
	margin:0 auto;
	display:flex;
	flex-direction:column;
	gap:60px;
	padding-bottom:30px;
}

.rv-main-top{
	width:100%;
	height:auto;
	overflow:hidden;
	box-sizing:border-box;
	padding:30px;
	background-color:#CDE4FF;
	background-image:url(./img/review_bg.png);
	background-repeat:no-repeat;
	background-size:auto 100%;
	background-position:right bottom;
	display:flex;
	flex-direction:column;
	gap:50px;
}

.rv-main-title{
	display:flex;
	flex-direction:column;
	gap:10px;
	padding:30px 30px;
	box-sizing:border-box;
	max-width:570px;
	justify-content:center;
	align-items:center;
}

@media (max-width: 910px){ 
	.rv-main-top{
		justify-content:center;
		align-items:center;
		background-size:cover;
		background-position:center bottom;
	}
	.rv-main-title{
		background-color:rgba(255,255,255,0.8);
	}
}

.rv-main-title h2{
	font-size:61px;
	text-align:center;
	font-family: 'hd_harmony';
}

.rv-main-title h2 p{
	font-size:28px;
	text-align:center;
}

.rv-main-title p{
	font-size:20px;
	line-height:1.5;
	text-align:center;
}

.rv-main-top-btn{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	gap:20px;
	margin-top:50px;
}

.rv-main-top-btn a.rv-main-btn{
	display: flex;
	padding: 20px;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	border-radius: 20px;
	border: 3px solid #222;
	background: #FFF;
	color:#222;
	box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.22);
}

.rv-main-top-btn a.rv-main-btn br{
	display: none;
}

@media (max-width: 620px){ 
	.rv-main-top{
		padding:0;
	}
	.rv-main-title{
		width:100%;
		max-width:100%;
		padding:30px 20px;
	}

	.rv-main-top-btn{
		gap:10px;
		margin-top:30px;
	}

	.rv-main-top-btn a.rv-main-btn{
		padding: 10px 15px;
		border-radius: 10px;
		text-align:center;
	}

	.rv-main-top-btn a.rv-main-btn br{
		display: block;
	}
}

.rv-main-top-btn a.rv-main-btn.scho{
	border-color:#2B82E5;
	color:#2B82E5;
}

.rv-main-top-btn a.rv-main-btn.life{
	border-color:#FF7EC8;
	color:#FF7EC8;
}

.rv-main-top-btn a.rv-main-btn.comu{
	border-color:#9075FC;
	color:#9075FC;
}

.rv-main-content{
	width:100%;
	height:auto;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	gap:35px;	
}

.rv-main-content .rv-main-sub-title{

}

.rv-main-content .rv-main-sub-title h3{
	font-size: 28px;
	font-family: 'hd_harmony';
	text-align:center;
}

.rv-main-content .rv-main-sub-wrap{
	
}

.rv-main-point-tbl{
	width:100%;
	height:auto;
	overflow:hidden;
}

.rv-main-point-tbl thead{

}

.rv-main-point-tbl thead tr{

}

.rv-main-point-tbl thead tr th{
	background-color:#f8f8f8;
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
}

.rv-main-point-tbl thead tr th,
.rv-main-point-tbl tbody tr td{
	text-align:center;
	font-family: 'hd_harmony';
	font-size:18px;
	padding:20px;
	box-sizing:border-box;

}

.rv-main-point-tbl tbody tr td{
	border-bottom:1px solid #CCCCCC;	
    white-space: nowrap;
}
span.point{
    white-space: nowrap;
}

span.point.top{
	font-size:26px;
	color:#2B82E5;
}

span.point.mid{
	font-size:22px;
	color:#FF7EC8;
}

span.point.btm{
	font-size:20px;
	color:#9075FC;
}

.rv-main-point-tbl tbody tr td a{
	display:inline-block;
	padding: 10px 20px;
	border-radius: 10px;
	border: 2px solid #484C51;
}

@media (max-width: 540px){ 
	.write-btn{
		display:none;
	}
	.rv-main-point-tbl tbody tr td:first-child{
		white-space: break-spaces;
	}
}

.rv-main-point-usecase{
	width:100%;
	height:310px;
	position:relative;
	background-image:url(./img/school_info.png);
	background-repeat:no-repeat;
	background-size:auto 100%;
	background-position:center bottom;	
	margin-top:30px;
}

.rv-main-point-usecase .rv-main-point-use{
	width:200px;
	height:200px;
	position:absolute;
	top:-30px;
	left:50%;
	margin-left:190px;
	background-image:url(./img/school_point.png);
	background-repeat:no-repeat;
	background-size:auto 100%;
}

@media (max-width: 824px){ 
	.rv-main-point-usecase .rv-main-point-use{
		width:180px;
		height:180px;
		top:initial;
		left:initial;
		right:10px;
		bottom:20px;
		margin-left:0;
	}	
}

.rv-main-check-list{
	display:flex;
	justify-content:center;
	align-items:center;
}

.rv-main-check-list ul{
	max-width:780px;
	height:auto;
	overflow:hidden;
	box-sizing:border-box;
	padding:30px 20px;
	border-radius:20px;
	background-color:#f8f8f8;
	display:flex;
	flex-direction:column;
	gap:20px;
}

.rv-main-check-list ul li{
	font-size:20px;	
	box-sizing:border-box;
	padding-left:40px;
	align-items:center;
	position:relative;
}

.rv-main-check-list ul li:not(.noti):before{
	content:"";
	width:24px;
	height:24px;
	background-image:url(./img/icon_check.png);
	background-repeat:no-repeat;
	background-size:24px auto;
	position:absolute;
	left:8px;
	top:2px;
}

.rv-main-check-list ul li.noti{
	background-color:#FAD2D2;
	padding:20px 30px;
	border-radius:20px;
}

.rv-main-check-list ul li.noti p{
	font-size:15px;
	padding-left:30px;
	position:relative;
}

.rv-main-check-list ul li.noti p:before{
	content:"";
	width:24px;
	height:24px;
	background-image:url(./img/icon_info.png);
	background-repeat:no-repeat;
	background-size:24px auto;
	position:absolute;
	left: -3px;
    top: -2px;
}

.rv-main-check-list ul li.noti p b{
	color:#E42424;
}

.rv-main-btm{
	display:flex;
	justify-content:center;
	align-items:center;
}


@media (max-width: 1600px){

  /* h2: 768px에서 ~40px, 1600px에서 61px */
  .rv-main-title h2{
    font-size: clamp(40px, calc(40px + (61 - 40) * ((100vw - 768px) / (1600 - 768))), 61px);
  }

  /* h2 안의 p: 768px에서 ~18px, 1600px에서 28px */
  .rv-main-title h2 p{
    font-size: clamp(18px, calc(18px + (28 - 18) * ((100vw - 768px) / (1600 - 768))), 28px);
  }

  /* 본문 p: 768px에서 ~16px, 1600px에서 20px */
  .rv-main-title p{
    font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 768px) / (1600 - 768))), 20px);
    line-height: 1.5;
  }

  /* 버튼: 768px에서 ~16px, 1600px에서 20px */
  .rv-main-top-btn a.rv-main-btn{
    font-size: clamp(14px, calc(14px + (20 - 16) * ((100vw - 768px) / (1600 - 768))), 20px);
  }

  /* 서브타이틀 h3: 768px에서 ~20px, 1600px에서 28px */
  .rv-main-content .rv-main-sub-title h3{
    font-size: clamp(20px, calc(20px + (28 - 20) * ((100vw - 768px) / (1600 - 768))), 28px);
  }

  /* 테이블 텍스트: 768px에서 ~14px, 1600px에서 18px */
  .rv-main-point-tbl thead tr th,
  .rv-main-point-tbl tbody tr td{
    font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 768px) / (1600 - 768))), 18px);
  }

  /* point top: 768px에서 ~18px, 1600px에서 26px */
  span.point.top{
    font-size: clamp(18px, calc(18px + (26 - 18) * ((100vw - 768px) / (1600 - 768))), 26px);
  }

  /* point mid: 768px에서 ~16px, 1600px에서 22px */
  span.point.mid{
    font-size: clamp(16px, calc(16px + (22 - 16) * ((100vw - 768px) / (1600 - 768))), 22px);
  }

  /* point btm: 768px에서 ~15px, 1600px에서 20px */
  span.point.btm{
    font-size: clamp(15px, calc(15px + (20 - 15) * ((100vw - 768px) / (1600 - 768))), 20px);
  }

  /* 체크리스트: 768px에서 ~16px, 1600px에서 20px */
  .rv-main-check-list ul li{
    font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 768px) / (1600 - 768))), 20px);
  }

  /* noti p: 768px에서 ~12px, 1600px에서 15px */
  .rv-main-check-list ul li.noti p{
    font-size: clamp(12px, calc(12px + (15 - 12) * ((100vw - 768px) / (1600 - 768))), 15px);
  }
}
   
.comu-info {
    position: relative;
    display: inline-block;
    cursor: help;
}


.tooltip-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #e2e8f0;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--silver);
    cursor: help;
    transition: all 0.3s;
}

.comu-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: #333;
    padding: 0.75rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    width: 250px;
    font-size: 0.8rem;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    margin-bottom: 0.5rem;
}

.comu-info:hover .comu-tooltip {
	opacity: 1;
	visibility: visible;
}