@charset "utf-8";
@import url('board-common.css');
@import url('board-search.css');
@import url('board-comment.css');
@import url('common-pagination.css');

/* list */
.product-list{ display: grid;
	a{ position:relative; display:block; background:#fff; border:1px solid #eaecf1; }
	.img-group{ overflow: hidden; display: block; width:100%; aspect-ratio: 4/3; background:#fff url('/images/board/no_image.gif') no-repeat 50%; }
	img{ display: block; width: 100%; height: 100%; object-fit: cover; }
	.title{ margin: 15rem; font-size: 15rem; }
	@media(prefers-reduced-motion:no-preference){
		a, .img-group, img{ transition: .3s; }
	}
	@media(hover){
		a:hover{background:#f0f6f8;}
		a:hover .img-group{ opacity: .7; }
		a:hover img{transform:scale(1.1);}
	}
	@media(min-width:768px){
		&{ grid-template-columns: repeat(3, 1fr); gap: 20rem; }
	}
	@media(min-width:1280px){
		&{ grid-template-columns: repeat(4, 1fr); gap: 30rem; }
	}
	@media(max-width:767px){
		&{ grid-template-columns: repeat(2, 1fr); gap: 10rem; }
	}
}

/* view */
.productView .img{float:left; position:relative; width:50%;}
.productView .img span{display:block; position:relative; overflow:hidden; width:100%; padding-top:70%; background:#fbfbfb;}
.productView .img span img{position:absolute; top:50%; left:50%; height:100%; transform:translate(-50%, -50%);}
.productView .img ul{position:absolute; bottom:30rem; left:20rem;}
.productView .img ul li{display:inline-block;}
.productView .img ul li > a{display:inline-block; overflow:hidden; width:100rem; height:70rem; box-sizing:border-box; margin:0 5rem; border:1rem solid #fff; text-align:center;}
.productView .img ul li > a img{height:100%; margin-left:-100%; margin-right:-100%;}
.productView .img ul li > a.active{border-color:#333;}
.productView .title{float:right; width:45%;}
.productView .title .btn{margin-top:50rem;}
.productView .title .btn a{height:45rem; margin-right:5rem; line-height:43rem;}
.productView .title h3{padding:0 0 20rem; margin-top:0rem; border-bottom:1rem solid #e8e8e8; font-size:30rem; letter-spacing:-1rem;}
.productView .title h3:before{display:none;}
.productView .option{display:table; margin-top:20rem;}
.productView .option li{display:table-row; font-weight:300; color:#666;}
.productView .option li em{display:table-cell; min-width:100rem; padding:7rem 0rem; color:#222;}
.productView .info{clear:both; padding-top:80rem;}
.productView .info h4{margin-top:0rem; padding:0 0 15rem; border-bottom:1rem solid #e8e8e8; font-size:25rem;}
.productView .info .conts{padding:30rem 0;}
.productView .info .conts img{max-width:100%;}
.productWrite:after{content:''; display:block; clear:both;}
.productWrite.area_calendar.type02 .calendar{float:left; width:40%;}
.productWrite.area_calendar.type02 .calendar table td{height:70rem;}
.productWrite .bbsView{float:right; width:58%;}
.productWrite.area_calendar .control .btn_today{background:#fff; border-color:#dedfe0; color:#999; transition:all 0.3s ease 0s;}
.productWrite.area_calendar .control .btn_today:hover{color:#111;}
.productWrite .tip{position:relative; padding-left:15rem; margin-top:10rem; font-weight:300;}
.productWrite .tip:before,
.productWrite .tip:after{content:''; display:inline-block; position:absolute; top:8rem; width:3rem; height:3rem;}
.productWrite .tip:before{left:0rem; background:#eee;}
.productWrite .tip:after{left:5rem; background:#365ec3;}
.productWrite .tip span{font-weight:500; color:#222;}
@media(max-width:1240px){
	.productView .img ul li > a{width:90rem; height:65rem; margin:0rem;}
}
@media(max-width:1024px){
	.productWrite.area_calendar.type02 .calendar{float:none; width:100%;}
	.productWrite .bbsView{float:none; width:100%; margin-top:30rem;}

	.productView .img,
	.productView .title{float:none; width:100%;}
	.productView .title{margin-top:30rem;}
	.productView .title .btn{text-align:center;}
}

@media(max-width:850px){
	.reserve_list > li{width:calc(100% / 3 - 20rem);}
}

@media(max-width:640px){	
	.productView .img ul{position:static; margin-top:10rem; padding-bottom:10rem; border-bottom:1rem solid #e8e8e8; text-align:center;}
	.productView .img ul li > a{width:70rem; height:50rem;}
}

@media(max-width:460px){
	.productView .img ul li > a{width:60rem;}
}

/* 230814 프로그램에 등록된 이미지가 없을 경우 */
.productView .img ul li > a{ background: url('/images/board/no_image.gif') no-repeat 50% / cover; }
.productView .img span{ background: url('/images/board/no_image.gif') no-repeat 50%; }
.productView .img span img{ text-indent: -200vw; }