.gallery-list-1 {
	display: flex; flex-wrap: wrap; gap: 40px 30px; margin-bottom: 100px;

	> li {width: calc((100% - 60px) / 3);}
	.img {display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; position: relative; border: 1px solid #ddd; margin-bottom: 20px; overflow: hidden;}
	.img::after {content: ''; position: absolute; inset: 0; background: rgb(49 39 131 / 20%) url(/images/contents/gallery-hover-ico.svg) no-repeat center / 80px; transform: scale(1.2); transition: 0.6s ease; opacity: 0;}
	img {max-width: 100%; max-height: 100%;}
	.category {font-size: 16px; color: #888; font-weight: 600; font-family: 'Exo 2', sans-serif; margin-bottom: 5px; transition: 0.3s ease;}
	.title {font-size: 20px; line-height: 1.5; color: #222; font-weight: 500; font-family: 'Exo 2', sans-serif; transition: 0.3s ease;}

	@media (hover: hover) and (pointer: fine) {
		a:hover {
			.img::after {opacity: 1; transform: scale(1);}
			.category {color: #222;}
			.title {color: #312783;}
		}
	}
}

.detail-page-1 {
	padding-top: 86px;

	.top {
		display: flex; gap: 80px;
	}
	.left {
		width: 45.7%;
		flex-shrink: 0;
	}
	.prod-image {
		aspect-ratio: 1 / 1;
		border: 1px solid #ddd;
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			max-width: 100%;
			max-height: 100%;
		}
	}
	.right {
		flex-grow: 1;
	}
	.head {
		margin-bottom: 30px;
	}
	.category {
		font-size: 20px;
		color: #312783;
		font-weight: 600;
		line-height: 1.5;
		margin-bottom: 5px;
	}
	.head .title {
		font-size: 30px;
		line-height: 1.5;
		font-weight: 500;
	}
	.prod-summary {
		border-top: 1px solid;

		> li {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ddd;
			min-height: 54px;
		}
		.title {
			width: 150px;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 10px;
			font-size: 17px;
			font-weight: 500;
			line-height: 1.5;
		}
		.info {
			padding: 10px;
			font-size: 16px;
			color: #222;
			line-height: 1.5;
			font-weight: 300;
		}
	}
	.btn-group {
		display: flex;
		gap: 10px;
		margin-top: 40px;

		a {
			width: calc((100% - 10px) / 2);
			display: flex;
			align-items: center;
			justify-content: center;
			height: 60px;
			border-radius: 30px;
			gap: 10px;

			&.white {
				border: 1px solid;
				cursor: initial;

				.title {
					margin-left: -5px;
				}
			}
			&.purple {
				background-color: #312783;

				.title {
					color: #fff;
				}
			}
		}
		.title {
			font-size: 18px;
			font-weight: 600;
		}
		.txt {
			font-size: 16px;
			font-weight: 300;
		}
	}
	.bottom {
		margin-top: 173px;
		border-top: 1px solid #ddd;
		padding-top: 100px;

		.title {
			text-align: center;
			margin-bottom: 60px;
			font-size: 30px;
			font-weight: 600;
			line-height: 1.5;
		}
	}
}


/********************
board_detail_sty01
*********************/

.board_detail_sty01 {width:100%; overflow:hidden;}
.board_detail_sty01 > .tit {width:100%; border-bottom:1px solid #ddd; padding-bottom:10px;}
.board_detail_sty01 > .tit ul {width:100%; overflow:hidden;}
.board_detail_sty01 > .tit ul li {float:left; padding:0 10px; box-sizing:border-box; position:relative; color:#555;}
.board_detail_sty01 > .tit ul li:first-child {padding-left:0; color:#222;}
.board_detail_sty01 > .tit ul li:not(:last-child)::before {position:Absolute; content:''; right:0; top:53%; transform:translateY(-50%); width:1px; height:10px; background:#dddddd;}

.board_detail_sty01 > .tit > h2 {display:block; width:100%; font-size:30px; color:#222; padding:10px 0;}

.board_detail_sty01 > .wrap_con {width:100%; overflow:hidden; border-bottom:1px solid #ddd;}
.board_detail_sty01 > .wrap_con > .con {padding:30px 0 90px 0; font-size:16px; color:#333;}

.board_detail_sty01 > .wrap_con > .con_file {position:relative; width:100%; overflow:hidden; border-top:1px solid #ddd; padding:18px 0;}
.board_detail_sty01 > .wrap_con > .con_file > h3 {position:absolute; left:0; width:80px; text-align:center; top:50%; transform:translateY(-50%); color:#444; font-weight:500;}
.board_detail_sty01 > .wrap_con > .con_file > ul {float:right; width:calc(100% - 100px);}
.board_detail_sty01 > .wrap_con > .con_file > ul li {float:left; width:100%; margin:2px 0;}
.board_detail_sty01 > .wrap_con > .con_file > ul li a {background:url(/images/board_ico/ico_file.png) no-repeat 0 center; color:#555; padding-left:30px; box-sizing:border-box;}
.board_detail_sty01 > .wrap_con > .con_file > ul li a:hover {border-bottom:1px solid #555;}


.prve_next_list {float:left; position:relative; margin-top:60px;}
.prve_next_list::after {position:absolute; content:''; width:1px; height:13px; background:#bbb; left:50%; top:50%; transform:translateY(-50%);}
.prve_next_list ul li {float:left; padding:0 22px; position:relative; font-size:17px; color:#555555; cursor:pointer; font-weight:500;}
.prve_next_list ul li.none_con {color:#888888; font-weight:300;}
.prve_next_list ul li:first-child {padding-left:30px;}
.prve_next_list ul li:last-child {padding-right:30px;}
.prve_next_list ul li:first-child::before {position:absolute; content:''; left:0; top:52%; transform:translateY(-50%) rotate(-135deg); width:8px; height:8px; border:0; border-top:1px solid #2d2d2d; border-right:1px solid #2d2d2d;}
.prve_next_list ul li:first-child::after {position:absolute; content:''; left:0; width:17px; height:1px; top:50%; background:#2d2d2d;}

.prve_next_list ul li:last-child::before {position:absolute; content:''; right:0; top:52%; transform:translateY(-50%) rotate(45deg); width:8px; height:8px; border:0; border-top:1px solid #2d2d2d; border-right:1px solid #2d2d2d;}
.prve_next_list ul li:last-child::after {position:absolute; content:''; right:0; width:17px; height:1px; top:50%; background:#2d2d2d;}


.prve_next_list ul li.none_con:first-child::before {position:absolute; content:''; left:0; top:52%; transform:translateY(-50%) rotate(-135deg); width:8px; height:8px; border:0; border-top:1px solid #949494; border-right:1px solid #949494;}
.prve_next_list ul li.none_con:first-child::after {position:absolute; content:''; left:0; width:17px; height:1px; top:50%; background:#949494;}

.prve_next_list ul li.none_con:last-child::before {position:absolute; content:''; right:0; top:52%; transform:translateY(-50%) rotate(45deg); width:8px; height:8px; border:0; border-top:1px solid #949494; border-right:1px solid #949494;}
.prve_next_list ul li.none_con:last-child::after {position:absolute; content:''; right:0; width:17px; height:1px; top:50%; background:#949494;}

/********************
//board_detail_sty01
*********************/



/********************
board_gallery_img_type01
*********************/
.board_gallery_img_type01 {margin-bottom:40px; overflow:hidden;}
.board_gallery_img_type01 > ul {margin:0 -20px;}
.board_gallery_img_type01 > ul > li {float:left; width:33.3%; padding:0 20px; box-sizing:Border-box; margin-bottom:50px;}
.board_gallery_img_type01 > ul > li.data_none {width:100%; text-align:center;}
.board_gallery_img_type01 > ul > li > a {width:100%; cursor:pointer; position:relative; display:block;}


.board_gallery_img_type01 > ul > li > a div.img { position:relative; width:100%; padding-bottom:70.376%; overflow:hidden; background:#e1e1e1;}
.board_gallery_img_type01 > ul > li > a div.img img {position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); transition:all ease 0.3s; opacity:1;}
.board_gallery_img_type01 > ul > li > a div.img::before {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3) url(../images/board_gallery_img_type01_on.png) no-repeat center center; content:''; z-index:99; height:0; transition:height ease 0.3s;}
.board_gallery_img_type01 > ul > li > a:hover div.img::before {height:100%;}

.board_gallery_img_type01 > ul > li > a > h3 {font-size:20px; color:#444; font-weight:500; margin-top:20px;  text-overflow: ellipsis; white-space: nowrap; overflow:hidden;}
.board_gallery_img_type01 > ul > li:hover > a > h3 {color:#111;}
.board_gallery_img_type01 > ul > li > a > span {display:block; margin-top:24px; color:#888;}
/********************
//board_gallery_img_type01
*********************/







@media screen and (max-width: 1023px){
	.detail-page-1 {
		.top {
			flex-direction: column;
			gap: 60px;
		}
		.left {
			width: 100%;
		}
	}
}

@media screen and (max-width:767px){
.gallery-list-1 {
	gap: 8vw 6vw;

	> li {
		width: calc((100% - 6vw) / 2);
	}
	.img {
		margin-bottom: 4vw;
	}
	.category {
		font-size: 3.2vw;
		margin-bottom: 1vw;
	}
	.title {
		font-size: 4vw;
	}
}
.detail-page-1 {
	padding-top: 17vw;

	.top {
		gap: 6vw;
	}
	.head {
		margin-bottom: 4vw;
	}
	.category {
		font-size: 3.6vw;
		margin-bottom: 1vw;
	}
	.head .title {
        font-size: 6vw;
    }
	.prod-summary {
		> li {
			flex-direction: column;
			align-items: flex-start;
			padding-block: 2vw;
			justify-content: center;
		}
		.title {
			width: auto;
			text-align: left;
			padding: 0;
			font-size: 4vw;
			margin-bottom: 1vw;
		}
		.info {
			padding: 0;
			font-size: 3.6vw;
		}
	}
	.btn-group {
		gap: 3vw;
		flex-direction: column;

        a {
            width: 100%;
            height: 14vw;
            border-radius: 30px;
			gap: 1.4vw;

			&.white {
				.title {
					margin-left: 0;
				}
			}
        }
		.title {
            font-size: 4vw;
        }
		.txt {
            font-size: 3.8vw;
        }
		img {
			width: 5.8vw;
		}
    }
	.bottom {
        margin-top: 20vw;
        padding-top: 12vw;

		.title {
			font-size: 6vw;
			margin-bottom: 6vw;
		}
    }
}


/********************
board_detail_sty01
*********************/
.board_detail_sty01 > .tit > h2 {font-size:6vw; padding:2vw 0;}
.board_detail_sty01 > .wrap_con > .con {padding:6vw 0 18vw 0; font-size:3.2vw;}

.board_detail_sty01 > .wrap_con > .con_file > h3 {width:16vw;}
.board_detail_sty01 > .wrap_con > .con_file > ul {width:calc(100% - 20vw);}
.board_detail_sty01 > .wrap_con > .con_file > ul li a {background-size:3.6vw auto; padding-left:6vw;}
.board_detail_sty01 > .wrap_con > .con_file {padding:3.6vw 0;}

.prve_next_list ul li {padding:0 4.4vw; font-size:3.8vw;}
.prve_next_list ul li:first-child {padding-left:6vw;}
.prve_next_list ul li:last-child {padding-right:6vw;}

.prve_next_list ul li:first-child::before,.prve_next_list ul li:last-child::before,.prve_next_list ul li.none_con:first-child::before {width:1.6vw; height:1.6vw; top:50%;}
.prve_next_list ul li:last-child::after,.prve_next_list ul li.none_con:first-child::after {width:3.4vw;}

.prve_next_list {margin-top:12vw;}

.prve_next_list::after {height:2.6vw;}

.board_bt_set01 {margin-top:10vw;}
.board_bt_set01 a {height:9.2vw; line-height:8.8vw; padding:0 7vw;}
.board_bt_set01 a span {padding-left:6.6vw; background-size:3.4vw auto!important;}

.board_detail_sty01 > .tit {padding-bottom:2vw;}
/********************
//board_detail_sty01
*********************/




/********************
board_gallery_img_type01
*********************/
.board_gallery_img_type01 {margin-bottom:8vw;}
.board_gallery_img_type01 > ul {margin:0 -3vw;}
.board_gallery_img_type01 > ul > li {width:50%; padding:0 3vw; margin-bottom:8vw;}
.board_gallery_img_type01 > ul > li > div,.board_gallery_img_type01 > ul > li > a {padding-bottom:0; border-bottom:0;}
.board_gallery_img_type01 > ul > li:hover > div:before,.board_gallery_img_type01 > ul > li:hover > a:before {display:none;}
.board_gallery_img_type01 > ul > li > div > h3,.board_gallery_img_type01 > ul > li > a > h3  {font-size:4vw; margin-top:4vw;}
.board_gallery_img_type01 > ul > li > div > span,.board_gallery_img_type01 > ul > li > a > span {margin-top:4.8vw;}
.board_gallery_img_type01 > ul > li > a div.img::before {background-size:20% auto!important;}
/********************
//board_gallery_img_type01
*********************/

}