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

#category_list_ajax {
    width: 100%;
    padding-bottom: 15rem;
    box-sizing: border-box;
}

#category_list_ajax .list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#category_list_ajax .list li {
    width: 23.5%;
    margin-left: 2%;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

#category_list_ajax .list li:nth-child(4n+1) {
    margin-left: 0rem;
}

#category_list_ajax .list li a {
    display: block;
    padding: 15rem;
    background-color: #fff;
    text-align: center;
    font-size: 16px;
    color: #333;
    border: 1px solid #eaecf1;
    border-radius: 5px;
    transition: all 0.3s ease;
}

#category_list_ajax .list li a:hover {
    background-color: #f0f6f8;
    color: #000;
}

#category_list_ajax .list li .img {
    overflow: hidden;
    width: 100%;
    height: 260rem;
    background: #fff url(../../images/board/no_image.gif) no-repeat 50% 50%;
    text-align: center;
    transition: opacity 0.5s ease-out;
}

#category_list_ajax .list li .img img {
    height: 100%;
    margin-left: -100%;
    margin-right: -100%;
    transform: scale(1, 1);
    transition: all 0.5s ease-out;
}

#category_list_ajax .list li div:hover .img {
    opacity: 0.7;
}

#category_list_ajax .list li div:hover img {
    opacity: 0.7;
    transform: scale(1.1, 1.1);
}

#category_list_ajax .list li div:hover .img i {
    transform: scale(1.1, 1.1);
}

#category_list_ajax .list li em {
    opacity: 1;
    font-size: 18rem;
    letter-spacing: -1rem;
    min-height: 50rem;
    margin-top: 15rem;
    padding-top: 20rem;
    padding-bottom: 10rem;
    text-align: center;
}

#category_list_ajax .list li .img+em {
    min-height: 27rem;
    line-height: 27rem;
    padding-top: 0rem;
    font-size: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

#category_list_ajax .list li a i {
    display: inline-block;
    position: absolute;
    top: 227rem;
    left: -1rem;
    height: 33rem;
    line-height: 33rem;
    font-size: 13rem;
    color: #fff;
    font-weight: 300;
}

#category_list_ajax .list li a i.type01 {
    background: #4764d7;
}

#category_list_ajax .list li a i.type02 {
    background: #42454e;
}

#category_list_ajax .list li a i.type03 {
    background: #70b439;
}

#category_list_ajax .list li a i.type04 {
    background: #dc3159;
}

#category_list_ajax .list li a.active{
    background-color: #0054a6;
    color: white;
}
@media(max-width:767px){
	#category_list_ajax .list{ flex-direction: column; }
	#category_list_ajax .list li{ margin: 0; width: 100%; }
}

/* product - 제품, 이미지 썸네일이 나오는 관리자 게시판 목록에도 일부 사용 */
.productList{padding-bottom:15rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 30rem 20rem;}
.productList:after{content:''; display:block; clear:both;}
.productList > li div{display:block; position:relative; background:#fff; border:1rem solid #eaecf1; transition:all 0.3s ease 0s;}
.productList > li div > *{display:block;}
.productList > li div > *:not(.img){padding-left:15rem; padding-right:15rem;}
.productList > li .img{overflow:hidden; width:100%; background:#fff url(../../images/board/no_image.gif) no-repeat 50% 50%; text-align:center; transition:opacity 0.5s ease-out 0s;}
.productList > li .img img{ width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; transform:scale(1,1); transition:all 0.5s ease-out 0s;}
.productList > li .img i{display:block; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; transform:scale(1,1); transition:all 0.5s ease-out 0s;}
.productList > li div > em{opacity:1; min-height:50rem; margin-top:15rem; padding-top:20rem; margin-bottom:10rem; font-size:18rem; letter-spacing:-1rem;}
.productList > li .img + em{ min-height:30rem; line-height:30rem; padding-top:0rem; font-size:17rem !important; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: break-all; }
.productList > li div:hover,
.productList > li div:focus{background:#f0f6f8;}
.productList > li div:hover img,
.productList > li div:focus img{opacity:0.7; transform:scale(1.1,1.1);}
.productList > li div:hover .img i,
.productList > li div:focus .img i{transform:scale(1.1,1.1);}
.productList > li div:hover .img,
.productList > li div:focus .img{opacity:0.7;}
.productList > li i[class^="type"]{display:inline-block; position:absolute; top:227rem; left:-1rem; height:33rem; line-height:33rem; font-size:13rem; color:#fff; font-weight:300;}
.productList > li i.type01{background:#4764d7;}
.productList > li i.type02{background:#42454e;}
.productList > li i.type03{background:#70b439;}
.productList > li i.type04{background:#dc3159;}
.productList > li .btn{display:block; padding:0 !important; border-top:1rem dashed #eaecf1; font-size:0rem;}
.productList > li .btn a{display:inline-block; width:50%; box-sizing:border-box; padding:10rem; background:#fff; font-size:14rem; font-weight:300; text-align:center; transition:all 0.3s ease 0s;}
.productList > li .btn a:nth-of-type(1){border-right:1rem solid #eaecf1;}
.productList > li .btn a:hover{background:#f0f6f8; color:#000;}
.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;}

	.reserve_list > li > a{height:250rem; padding-left:20rem; padding-right:20rem;}
	.reserve_list > li > a > span i{display:block;}
}

@media(max-width:850px){
	.reserve_list > li{width:calc(100% / 3 - 20rem);}
}
@media(max-width:767px){
	.productList{ grid-template-columns: repeat(2, 1fr); gap: 10rem; }
}

@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){
	.productList > li i[class^="type"]{top:177rem;}
	.productView .img ul li > a{width:60rem;}
}
	
@media(max-width:360px){	
	.productList > li i[class^="type"]{top:147rem;}
}

/* 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; }