@charset "utf-8";

/* 모달 - 공통 */
.modal_bg						{ position:fixed; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.6); z-index:999;	}
.modal							{ display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);  width:92%; overflow:hidden; background:#fff; border-radius:1rem; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); z-index:1000;}
.modal .pop_tit					{ display:block; padding:.9em 1.8rem .8em; font-size:1.33em; font-weight:500; color:#000; letter-spacing:-.05em; border-bottom:1px solid #ccc;}

.modal>.close_btn				{ position:absolute; top:.8rem; right:1rem; width:2.5rem; height:2.5rem; padding:1rem; background:#000; border-radius:100%; z-index:20;  }
.modal>.close_btn:before,
.modal>.close_btn:after			{ position:absolute; width:60%; height:1px; left:20%; top:50%; background:#fff; content:"" }
.modal>.close_btn:before		{ transform:translateY(-50%) rotate(45deg); }
.modal>.close_btn:after			{ transform:translateY(-50%) rotate(-45deg);}

.modal .btn_area				{ margin:1.5rem auto 0; }
.modal .btn_area>li				{ flex:1; }
.modal .btn_area button			{ width:100%; }
.modal .btn_area .btn			{ height:45px; text-align:center; border-radius:0}

.modal .btn_area .btn.btn_dark	{ color:#fff; background:#111}
.modal .btn_area .btn.btn_grey	{ color:#181818; background:#e9e9e9}

.modal .text_write				{ position:relative; margin:.5em 0; padding:1em; border:1px solid #e1e1e1; background-color:#f7f7f7; }
.modal .textarea				{ width:100%; color:#555; vertical-align:top; background-color:transparent; border:none; resize:none; overflow-x:hidden; overflow-y:auto; }
.modal .limit					{ position:relative; margin:0px 5px 0 0; font-size:1em; color:#959595; text-align:right; }

/* 모달 - 관광지 후기보기 */
.review_layer															{ padding:3rem 4rem }
.review_layer .reviewText												{ justify-content:space-between;}
.review_layer .reviewText .img											{ width:60%; padding-top:50%; }	
.review_layer .reviewText .review_info									{ width:37%; margin-top:.5em }
.review_layer .reviewText .review_info .pd_name							{ display:block; font-size:1.5rem; font-weight:700; color:#000; letter-spacing:-.06em; border-bottom:1px solid rgba(0,0,0,.8); padding-bottom:.5em; margin-bottom:.5em }
.review_layer .reviewText .review_info div.flex							{ position:relative; align-items:center; gap:.7em}
.review_layer .reviewText .review_info div.flex .star					{ color:var(--blue);  }
.review_layer .reviewText .review_info div.flex .date					{ color:rgba(0,0,0,.4); }
.review_layer .reviewText .review_info .review_txt						{ margin-top:1em; font-size:1.033em; letter-spacing:-.05em; line-height:1.4; color:rgba(0,0,0,.8); }
.review_layer .reviewText .review_info .review_small_img				{ gap:5px; margin-top:2em;  }
.review_layer .reviewText .review_info .review_small_img .rsp_img		{ width:19.2%; padding-top:19.2%; }
.review_layer .reviewText .review_info .review_link						{ display:block; margin-top:2em; padding:.8em; font-size:.95em; font-weight:300; color:#999; text-align:center; letter-spacing:-.065em; border:1px solid rgba(0,0,0,.1); border-radius:8px }
.review_layer .icon_arrow												{ position:absolute; top:50%; width:20px; height:53px; transform:translateY(-50%); background:no-repeat 50% 50% / contain }
.review_layer .icon-page_prev											{ left:1.5rem; background-image:url(/resources/jns-img/sub/btn_photoshot_pre.png); }
.review_layer .icon-page_next											{ right:1.5rem; background-image:url(/resources/jns-img/sub/btn_photoshot_next.png);}

/* 모달 - 관광지 후기작성 */
.review_write_layer												{ max-width:700px; }
.review_write_layer input										{ height:100%; border:1px solid #e1e1e1}
.review_write_layer .review_write								{ padding:1rem 1.8rem 0; border-top:8px solid #f7f7f7}
.review_write_layer .textarea				                    { height:100px; }
.review_write_layer .star_input									{ align-items:center; justify-content:center; gap:2px; touch-action:none; user-select:none;}
.review_write_layer .star_input .scope							{ font-size:1.5em; color:#ddd; }
.review_write_layer .star_input .scope.on						{ color:var(--blue); }
.review_write_layer .file_upload 						{ position:relative; height:45px; }
.review_write_layer .file_upload label					{ position:absolute; right:0; height:100%; padding:0 1em; color:#000; vertical-align:middle; background:#fff; line-height:45px; cursor:pointer; border:1px solid;}
.review_write_layer .file_upload+.file_upload			{ margin-top:.2em }
.review_write_layer .file_upload .upload_name			{ width:100%; padding:0 6em 0 .75em; vertical-align:middle; background:#f5f5f5; font-size:1em; color:rgba(0,0,0,.8);}


@media all and (max-width:1068px){
	/* 모달 - 후기보기 */
	.review_layer .reviewText .img											{ width:50%; }
	.review_layer .reviewText .review_info									{ width:47%; }
}
@media all and (max-width:968px){
	/* 모달 - 후기보기 */
	.review_layer .reviewText .review_info .review_small_img			{ margin-top:1em }
	.review_layer .reviewText .review_info .review_small_img a			{ width:3em; padding-top:3em }
}
@media all and (max-width:868px){
	/* 모달 - 후기보기 */
	.review_layer												{ padding:2rem 3rem }
	.review_layer .reviewText .img								{ width:70%; margin:0 auto; }
	.review_layer .reviewText .review_info						{ width:100%; margin-top:1em}
	.review_layer .reviewText .review_info .review_txt			{ overflow-y:scroll; max-height:4em; padding-right:1em }
	.review_layer .reviewText .review_info .review_link			{ margin-top:1em; padding:.6em; font-size:.9em; }
}
@media screen and (max-width:668px){
	/* 모달 - 후기작성 */
	.review_write_layer .file_upload label			{ line-height:40px; font-size:.95rem }
}
@media screen and (max-width:568px){
    /* 모달 - 공통 */
	.modal .pop_tit										{ padding:.7em 1.5rem; font-size:1.25em; }
	.modal .btn_area									{ margin-top:1rem; }
	.modal .btn_area .btn								{ height:40px; }
	.modal .text_write									{ padding:.7em;  }

	/* 모달 - 후기보기 */
	.modal>.close_btn									{ top:.5em; width:2.3em; height:2.3em}
	.review_layer .reviewText .img						{ width:100%; padding-top:69.8% }

	/* 모달 - 후기작성 */
	.review_write_layer .file_upload 					{ height:40px; }
	.review_write_layer .file_upload .upload_name		{ padding:0 5em 0 .7em;}
    .review_write_layer .textarea				        { height:15vh; }    
}
@media all and (max-width:468px){
	/* 모달 - 후기보기 */
	.review_layer									{ padding:1.5rem 2rem }
	.review_layer .icon_arrow						{ width:13px; }
	.review_layer .icon-page_prev					{ left:2%; }
	.review_layer .icon-page_next					{ right:2%; }
	.review_layer .reviewText .review_info .pd_name					{ font-size:1.25rem; padding-bottom:.3em; margin-bottom:.3em }
	.review_layer .reviewText .review_info div.flex					{ gap:.5em; font-size:.95rem}
	.review_layer .reviewText .review_info .review_txt				{ margin-top:.7em;}
	.review_layer .reviewText .review_info .review_link				{ margin-top:1em; padding:.5em; font-size:.88em; }

	/* 모달 - 후기작성 */
	.review_write_layer .review_write									{ padding:.7em 1rem }
}