@charset "UTF-8";

.comn-banner__wrap{
	margin:20px auto 80px;
}

.comn-banner{
	position: relative;
	user-select: none;
}

.comn-banner__bg{
	position: relative;
	width: 100%;
	height: 320px;
	overflow: hidden;
	border-radius: 20px;
}

.comn-banner__bg>img{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width:100%;
	height: 100%;
	object-fit: cover;
}

.comn-banner__textbox{
	position: absolute;
	top:80px;
	left: 80px;
	color: var(--color-gray-00);
}

.comn-banner__breadcrumb{
	position: absolute;
	bottom:0;
	right:0;
	padding:20px;
	height: 64px;
	box-sizing: border-box;
	border-radius: 20px 0 0 ;
	background-color: var(--color-gray-00);
}

.comn-banner__breadcrumb:before{
	content:'';
	position: absolute;
	bottom:64px;
	right:0;
	border-radius: 0 0 20px ;
	width:20px;
	height:20px;
	box-shadow: 20px 20px 0 20px var(--color-gray-00);
}

.comn-banner__breadcrumb:after{
	content:'';
	position: absolute;
	bottom:0;
	left:-20px;
	border-radius: 0 0 20px ;
	width:20px;
	height:20px;
	box-shadow: 20px 20px 0 20px var(--color-gray-00);
}

.breadcrumb__grid{
	display: flex;
	align-items: center;
	gap:8px;
}

.breadcrumb__ico{
	width:24px;
	height: 24px;
}

.board-comn__top{
	margin-bottom: 80px;
	text-align: center;
}

.board-comn__top-tit{
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
}

.board-comn__top-tit::before{
	content: '';
	position: absolute;
	top:0;
	right: -16px;
	width: 8px;
	height: 8px;
	background-color: var(--color-primary-50);
	border-radius: 10px;
}

.board-comn__top-txt{
	word-break: keep-all;
}

.bo-01__grid{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap:20px;
	margin-bottom: 80px;
}

.bo-01__item{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding:40px 20px;
	box-sizing: border-box;
	box-shadow: inset 0 0 0 1px var(--color-gray-20);
	border-radius: 16px;
}

.bo-01__item-img{
	margin-bottom: 20px;
}

.bo-01__item-txt{
	margin-bottom: 4px;
	color: var(--color-gray-70);
}

.bo-01__ul{
	margin-bottom: 80px;
	padding-bottom: 80px;
	box-shadow: inset 0 -1px 0 0 var(--color-gray-20);
}

.bo-01__li + .bo-01__li{
	margin-top:40px;
}

.bo-01__li-num{
	margin-bottom: 4px;
	color: var(--color-primary-50);
}

.bo-01__li-tit-wrap{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.bo-01__li-subtit{
	color: var(--color-gray-70);
}

.bo-01__portfolio{
	margin-bottom: 120px;
}

.bo-01__portfolio-top{
	margin-bottom: 40px;
	text-align: center;
}

.bo-01__portfolio-tit{
	position: relative;
	display: inline-block;
	margin:0 auto;
}

.bo-01__portfolio-tit::before{
	content: '';
	position: absolute;
	top:0;
	right: -16px;
	width: 8px;
	height: 8px;
	background-color: var(--color-primary-50);
	border-radius: 10px;
}

.bo-02__grid{
	display: flex;
	flex-direction: column;
	gap:64px;
	margin-bottom: 120px;
}

.bo-02__item{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:20px;
}

.bo-02__item-r>div:nth-child(1){
	order: 2;
}

.bo-02__item-r>div:nth-child(2){
	order: 1;
}

.bo-02__item-img{
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: 16px;
	overflow: hidden;
}

.bo-02__item-img>img{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width:100%;
	height: 100%;
	object-fit: cover;
}

.bo-02__item-tit{
	margin-bottom: 20px;
}

.bo-02__item-txt{
	margin-bottom: 40px;
}

.bo-02__item-btn{
	text-align: right;
}

.bo-02__item-btn>a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding:0 16px 0 24px;
	background-color: var(--color-primary-50);
	color: var(--color-gray-00);
	border-radius: 8px;
	transition: 0.3s;
}

.bo-02__item-btn>a:hover{
	background-color: var(--color-primary-60);
}

.bo-02__item-btn-ico{
	display: flex;
	align-items: center;
	justify-content: center;
}

.bo-03__grid{
	display: flex;
	flex-direction: column;
	gap:64px;
	margin-bottom: 120px;
}

.bo-03__item{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:20px;
}

.bo-03__item-r>div:nth-child(1){
	order: 2;
}

.bo-03__item-r>div:nth-child(2){
	order: 1;
}

.bo-03__item-img{
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: 16px;
	overflow: hidden;
}

.bo-03__item-img>img{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width:100%;
	height: 100%;
	object-fit: cover;
}

.bo-03__item-tit{
	margin-bottom: 20px;
}

.bo-03__item-txt{
	margin-bottom: 40px;
}

.bo-03__item-btn{
	text-align: right;
}

.bo-03__item-btn>a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding:0 16px 0 24px;
	background-color: var(--color-primary-50);
	color: var(--color-gray-00);
	border-radius: 8px;
	transition: 0.3s;
}

.bo-03__item-btn>a:hover{
	background-color: var(--color-primary-60);
}

.bo-03__item-btn-ico{
	display: flex;
	align-items: center;
	justify-content: center;
}

.bo-04__grid{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap:20px;
	margin-bottom: 120px;
}

.bo-04__item{
	padding:32px 32px 40px;
	box-sizing: border-box;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px var(--color-gray-20);
	word-break: keep-all;
}

.bo-04__item-img{
	margin-bottom: 20px;
}

.bo-04__item-tit{
	margin-bottom: 12px;
}

@media all and (max-width:1024px) {
	.board-comn__top{
		margin-bottom: 40px;
	}

	.bo-01__grid{
		margin-bottom: 40px;
	}

	.bo-04__grid{
		display: flex;
		flex-direction: column;
	}

	.bo-04__item{
		padding:20px 20px 40px;
	}

	.bo-04__item-img>img{
		width: 40px;
		height: 40px;
	}
}

@media all and (max-width:840px) {
	.comn-banner__wrap{
		margin: 0 auto 40px;
	}

	.comn-banner.layout{
		width:100%;
	}

	.comn-banner__bg{
		border-radius: 0;
	}

	.comn-banner__area{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: calc(100% - 32px);
	}

	.comn-banner__textbox{
		position: static;
		text-align: center;
	}

	.comn-banner__breadcrumb{
		position: static;
		background-color: transparent;
		border-radius: 0;
	}

	.comn-banner__breadcrumb::before{
		display: none;
	}

	.comn-banner__breadcrumb::after{
		display: none;
	}

	.breadcrumb__grid{
		justify-content: center;
		color: var(--color-gray-00);
	}

	.board-comn__top{
		margin-bottom: 20px;
	}

	.bo-01__grid{
		display: flex;
		flex-direction: column;
		gap:12px;
	}

	.bo-01__portfolio{
		margin-bottom: 80px;
	}

	.bo-01__portfolio-top{
		margin-bottom: 20px;
	}

	.bo-02__item{
		display: flex;
		flex-direction: column;
	}

	.bo-02__item-r>div:nth-child(1){
		order: 1;
	}

	.bo-02__item-r>div:nth-child(2){
		order: 2;
	}

	.bo-02__grid{
		margin-bottom: 80px;
	}

	.bo-03__item{
		display: flex;
		flex-direction: column;
	}

	.bo-03__item-r>div:nth-child(1){
		order: 1;
	}

	.bo-03__item-r>div:nth-child(2){
		order: 2;
	}

	.bo-03__grid{
		margin-bottom: 80px;
	}

	.bo-04__grid{
		margin-bottom: 80px;
	}
}