@charset "utf-8";
/*공통*/
html {overflow-y:scroll; font-size:10px; scroll-behavior: smooth;}
@media screen and (max-width:1024px) {
  html{font-size:9.5px;}
}
.popup-container{padding-bottom:50px;}
.popupTitle{font-size:6rem;line-height:1em;display:block;font-weight:700;text-align: center; margin-top:1em; margin-bottom:0.5em;}
@media screen and (max-width:1024px){
  .popupTitle {font-size:4.5rem;}
}
@media screen and (max-width:768px){
  .popupTitle {font-size:3.4rem;}
}


/* write popup area */
.write_div.rel_prd .rel_btnArea{ margin: 15px 0;}
.relative_list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.relative_item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 5px 7px; border: 1px solid #ddd; border-radius: 6px; background: #fafafa; box-sizing: border-box; }
.relative_text { flex: 1; min-width: 0; font-size: 1.6rem; font-weight:700; color: #333; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.relative_remove { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 4px; background: #eee; color: #666; font-size: 18px; line-height: 30px; text-align: center; cursor: pointer; }
.relative_remove:hover { background: #ddd; color: #111; }

@media (max-width: 768px) {
  .relative_item { padding: 3px 8px; gap: 8px; }
  .relative_text { font-size: 13px; }
  .relative_remove { width: 32px; height: 32px; line-height: 32px; }
}

@media (max-width: 480px) {
  .relative_item { align-items: flex-start; }
  .relative_text { white-space: normal; word-break: break-word; overflow: visible; text-overflow: initial; }
  .relative_remove { width: 34px; height: 34px; line-height: 34px; }
}

/* 팝업페이지 */
.popup_item { position: relative; display: flex; gap: 30px; width: 100%; padding: 25px 0; border-bottom: 1px solid #ddd; box-sizing: border-box; }
.popup_thumb { flex: 0 0 30%; min-width: 0; }
.popup_thumb .thumbImg { display: block; width: 100%; height: auto; object-fit: cover; }
.popup_info { position: relative; flex: 1; min-width: 0; padding: 5px 0; }
.popup_check { position: absolute; top: 0; right: 0; }
.popup_subject { margin: 0 0 20px 0; font-size: 2.0rem; font-weight: 600; line-height: 1.4; color: #111; }
.popup_subject label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.popup_subject input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; cursor: pointer; vertical-align: middle;}
.wr_check {  }
.popup_line { width: 100%; height: 1px; margin-bottom: 22px; background: #ddd; }
.popup_content { font-size: 17px; line-height: 1.9; color: #777; }

.popup_item .option_list{ font-size:1.6rem; padding-bottom:10px;}
.popup_item .option_list .option{ display:flex; margin-bottom:6px;  line-height:1.6em; }
.popup_item .option_list .option_tit,
.popup_item .option_list .option_cont{display:inline-block; vertical-align: middle;}
.popup_item .option_list .option_tit{width:80px; padding-right:10px; font-weight: 700; }
.popup_item .option_list .option_cont{width:calc(100% - 80px); color:#555}
.popup_item .option_list .option_cont .line{display:-webkit-box;  -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; word-wrap: break-word;}


@media (max-width: 768px) {
  .popup_item { gap: 20px; padding: 20px 0; }
  .popup_thumb { flex-basis: 40%; }
  .popup_subject { font-size: 1.8rem; }
  .popup_content { font-size: 15px; line-height: 1.7; }
}

@media (max-width: 560px) {
  .popup_item { flex-direction: column; gap: 15px; }
  .popup_thumb { flex: none; width: 100%; }
  .popup_info { width: 100%; }
  .popup_subject { margin-right: 70px; font-size: 20px; }
  .popup_content { font-size: 14px; }
}

/* 페이지 번호 */
.popup_pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin: 30px 0; }
.popup_page_num { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #ddd; border-radius: 5px; background: #fff; color: #555; font-size: 14px; font-weight: 400; text-decoration: none; box-sizing: border-box; }
.popup_page_num:hover { background: #f5f5f5; color: #111; }
.popup_page_current { background: #ff5a36; border-color: #ff5a36; color: #fff; font-size: 15px; font-weight: 800; }
@media (max-width: 560px) {
  .popup_pagination { gap: 4px; margin: 20px 0; }
  .popup_page_num { min-width: 32px; height: 32px; padding: 0 8px; font-size: 13px; }
  .popup_page_current { font-size: 14px; font-weight: 800; }
}

/* 선택 값 보내기 버튼 */
.popup_submit_area { display: flex; justify-content: center; margin: 24px 0 10px; }
.popup_submit_btn { min-width: 50%; height: 42px; padding: 0 18px; border: 0; border-radius: 6px; background: #333; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.popup_submit_btn:hover { background: #111; }
@media (max-width: 560px) {
  .popup_submit_area { margin-top: 18px; }
  .popup_submit_btn { width: 100%; }
}







/*list content*/
.contBoxWrap{}
.contBoxWrap .tagWrap .tag { display: inline-block; background-color: rgb(240, 246, 255); font-size: 1.6rem;   line-height: 1em; padding: 5px 10px; border-width: 1px; border-style: solid; border-color: rgb(240, 246, 255);  border-radius: 10px;  margin: 0px 5px 5px 0px;
}
.contBoxWrap .contBox {}

.contBoxWrap .check_box { padding: 55px; border-radius: 25px; background: #fff; box-shadow: 0 20px 60px rgba(28, 75, 120, 0.08);}
.contBoxWrap .check_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; border: 1px solid #e2edf7; padding:30px 15px; border-radius:20px; box-shadow: 0 10px 25px rgba(20, 126, 232, .07);}

.contBoxWrap .check_icon { flex: 0 0 auto; display: flex; align-items: center;justify-content: center;width: 58px; height: 58px; margin-right: 18px; border-radius: 50%; background: #eaf4ff; color: #147ee8; font-size: 23px; }
.contBoxWrap .check_item { position: relative; padding: 5px 5px 1px 55px; transition: all .3s ease;}

.contBoxWrap .check_text strong {color: #14243d; line-height: 1.3;}
.contBoxWrap .check_mark {position: absolute; left: 20px; top: 9px; color: #147ee8; font-size: 18px;}

@media screen and (max-width:768px){ 
  .contBoxWrap .check_grid { grid-template-columns: repeat(1, 1fr); gap: 14px;}
}
@media screen and (max-width:560px){ 
  .contBoxWrap .check_grid { gap: 4px;}
  .contBoxWrap .check_item { padding: 5px 5px 1px 30px;}
  .contBoxWrap .check_mark { top:7px; left:6px; font-size:17px;}
}