@charset "utf-8";

/* 메인 */
#m_vis {
		position:relative;
		width:100%;height:calc(95vh - 100px);
		margin-top:100px;
		background:#22223b;
		overflow:hidden;
	}
#m_vis > video {
		display:block;position:absolute;left:50%;top:50%;
		transform:translate(-50%, -50%);z-index:1;
	}
#wrap_m, #wrap_m > #container {position:relative;}
#m_prod {
		position:relative;
		text-align:center;
		background-color:#fff;
	}
.m_prod_wrap {margin:70px 0 100px;}
.m_prod_wrap > h3.tit {
		margin-bottom:60px;
		font-family:var(--ff-GML);font-size:2.5em;font-weight:normal;color:#4c4c4c;
		text-align:center;
	}
.m_prod_wrap > h3.tit:before {
		content:'';display:inline-block;
		width:7px;height:18px;
		margin:-10px 10px 0 0;
		transform:skew(15deg);
		vertical-align:top;
		background:#de620f;
	}
.m_prod_wrap > h3.tit .em {font-family:var(--ff-GMB);}
.m_prod_wrap > ul {
		display:flex;gap:50px;
		max-width:1480px;
		margin:auto;
	}
.m_prod_wrap > ul > li {
		flex:1;
		border:1px solid #d5d5d5;border-radius:7px;
		background:#fff;box-shadow:3px 3px 7px rgba(0,0,0,.07);
	}
.m_prod_wrap > ul > li, .m_prod_wrap > ul > li * {transition:all .2s;}
.m_prod_wrap > ul > li:hover {border-color:#de620f;}
.m_prod_wrap > ul > li > a {
		display:block;
		padding:15px;
	}
.m_prod_wrap > ul > li > a figure figcaption {
		margin:20px 0 0;
		text-align:center;
	}
.m_prod_wrap > ul > li > a figure figcaption .tit {
		margin:25px 0 15px;padding-bottom:15px;
		border-bottom:1px dashed #ccc;
		font-size:1.8em;font-weight:600;color:#2a362a;line-height:1.3em;
	}
.m_prod_wrap > ul > li > a figure figcaption .tit .type {
		font-size:.88em;color:#2a362a;
	}
.m_prod_wrap > ul > li > a figure figcaption ul {
		display:grid;grid-template-columns:repeat(2,1fr);gap:5px;
	}
.m_prod_wrap > ul > li > a figure figcaption ul li {
		padding:7px;
		font-size:1em;color:#2a362a;line-height:1.5em;
		text-align:left;
		background-color:#f3f3f3;
	}
.m_prod_wrap > ul > li > a figure figcaption ul li:before {
		content:'';display:inline-block;
		width:3px;height:3px;
		margin-top:-4px;margin-right:10px;
		vertical-align:middle;
		background:#de6206;
	}
#m_call {
		position:relative;
		padding:100px 0;
		text-align:center;
		background:#006ab4 url('../img/main/m_call_bg.jpg') no-repeat center;background-size:cover;
	}
#m_call address ul {
		display:inline-block;
		position:relative;
		margin:auto;
	}
#m_call address ul:after {
	content:"";display:block;
	clear:both;visibility:hidden;
}
#m_call address li {float:left;}
#m_call address li+li {margin-left:50px;}
#m_call address li a {
		font-family:var(--ff-GMB);font-size:2.2em;font-style:normal;color:#fff;
	}
#m_call address li a:before {
		display:inline-block;
		width:60px;
		margin-right:15px;
		border-radius:50%;
		font-family:var(--ff-FA);font-size:.72em;line-height:60px;
		text-align:center;
		-webkit-backdrop-filter:brightness(1.5);backdrop-filter:brightness(1.5);
	}
#m_call address li.tel a:before {content:'\f095';}
#m_call address li.email a:before {content:'\f0e0';}

/* 서브 */
#wrap_s, #wrap_s > #container {position:relative;}
#wrap_s > #container {margin:80px 0;}
#pg_tit {
		position:relative;
		margin-bottom:80px;
		font-size:2.8em;
		text-align:center;
	}
#pg_tit > .ca {
		display:block;
		margin-bottom:12px;
		font-size:.52em;font-weight:normal;color:#de620f;
	}
#pg_tit > .ca:after {
		content:'\f105';display:inline-block;
		margin-left:7px;
		font-family:var(--ff-FA);
	}
#pg_tit > strong {font-weight:600;line-height:1.3em;}
#pg_tit > strong:before {
		content:'';display:inline-block;
		width:10px;height:20px;
		margin:-15px 15px 0 0;
		transform:skew(15deg);
		vertical-align:top;
		background:#de620f;
	}
#pg_tit > strong > .inner {
		display:inline-block;
		font-size:.84em;color:#4c4c4c;
	}
#pg_tit > strong > .inner:before {
		content:'';display:inline-block;
		width:1px;height:40px;
		margin:0 22px -7px 20px;
		background:#de620f;
	}

@media screen and (max-aspect-ratio: 1920/1080) {
	#m_vis > video {height:100%;}
}
@media screen and (min-aspect-ratio: 1920/1080) {
	#m_vis > video {width:100%;}
}
@media (max-width:1480px) {
	.m_prod_wrap > ul {gap:30px;padding:0 30px;}
	.m_prod_wrap > ul > li > a figure figcaption .tit {font-size:1.5em;}
	.m_prod_wrap > ul > li > a figure figcaption ul {display:flex;flex-direction:column;}
}
@media (max-width:1180px) {
	#m_vis {height:70vh;}
	.m_prod_wrap {margin:80px 0;}
	.m_prod_wrap > h3.tit {
		margin-bottom:40px;
		font-size:2.05em;
	}
	.m_prod_wrap > ul {gap:20px;padding:0 20px;}
	.m_prod_wrap > ul > li > a figure figcaption .tit {font-size:1.35em;}
	#m_call address li a {font-size:1.8em;}
	#pg_tit {font-size:2.4em;}
	#pg_tit > strong:before {
		width:8px;height:16px;
		margin:-15px 10px 0 0;
	}
	#pg_tit > strong > .inner:before {
			height:30px;
			margin:0 22px -5px 20px;
		}
}
@media (max-width:1024px) {
	#m_vis {height:50vh;margin-top:80px;}
	.m_prod_wrap {margin:50px 0;}
	.m_prod_wrap > h3.tit {margin-bottom:20px;font-size:1.8em;}
	.m_prod_wrap > ul {gap:10px;padding:0 10px;}
	.m_prod_wrap > ul > li > a figure figcaption .tit {font-size:1.15em;}
	.m_prod_wrap > ul > li > a figure figcaption ul li {font-size:.92em;}
	#m_call address li a {font-size:1.6em;}
	#m_call address li+li {margin-left:30px;}
}
@media (max-width:768px) {
	#m_vis {margin-top:60px;}
	.m_prod_wrap > ul {flex-direction:column;}
	#m_call {padding:50px 0;}
	#m_call address li {float:none;text-align:left;}
	#m_call address li+li {margin-left:0;margin-top:15px;}
	#m_call address li a {font-size:1.35em;}
	#m_call address li a:before {
		width:40px;
		margin-right:15px;
		font-size:.88em;line-height:40px;
	}
	#wrap_s > #container {margin:50px 0;}
	#pg_tit {
		margin-bottom:50px;
		font-size:1.5em;
	}
	#pg_tit > .ca {
		margin-bottom:12px;
		font-size:.64em;
	}
	#pg_tit > strong:before {
		width:7px;height:14px;
		margin:-12px 10px 0 0;
	}
	#pg_tit > strong > .inner:before {
			height:20px;
			margin:0 12px -5px 10px;
		}
}