@charset "utf-8";/* ===================================================== */
/* 콘텐츠 공통 */

@media (hover: hover) and (pointer: fine) { } 
@media (max-width: 1280px) { } 
@media (max-width: 1024px) { } 
@media (max-width: 768px) { } 
@media (max-width: 576px) { } 
@media (max-width: 480px) { } 
/* 콘텐츠 공통 */
/* ===================================================== */


/* ===================================================== */
/* */

@media (hover: hover) and (pointer: fine) { } 
@media (max-width: 1280px) { } 
@media (max-width: 1024px) { } 
@media (max-width: 768px) { } 
@media (max-width: 576px) { } 
@media (max-width: 480px) { } 
/* */
/* ===================================================== */

/* 0101_회사개요 */
.overview {padding-bottom:12rem;}
.overview-top { display: flex; justify-content: center; } 
.overview-top h3 { font-size: 5rem; font-weight: 100; color: #222; letter-spacing: 2rem; } 
.overview-top h3 b { font-weight: 700; } 
.overview-visual { margin: 10rem 0; background: url(../images/sub/0101_img01.png) no-repeat 50% 50%; min-height: 50rem; display: flex; justify-content: center; align-items: center; } 
.overview-txt { text-align: center; letter-spacing: -0.02rem; } 
.overview-txt .top { margin-bottom: 4rem; } 
.overview-txt .top h4 { font-size: 3.4rem; font-weight: 500; color: #222; position: relative; display: inline-block; padding: 1rem 7rem; } 
.overview-txt .top h4:before { position: absolute; left: 0; top: 0; width: 45px; height: 38px; content: ""; background: url(../images/sub/0101_quotes01.png)no-repeat center; } 
.overview-txt .top h4:after { position: absolute; right: 0; bottom: 0; width: 45px; height: 38px; content: ""; background: url(../images/sub/0101_quotes02.png)no-repeat center; } 
.overview-txt .top h4 strong { color: var(--color-main); font-weight: 800; } 
.overview-txt .bottom { color: #444; font-size: 2rem; } 
.overview-txt .bottom p { margin-top: 5rem; line-height: 1.6; } 

@media (max-width: 1280px) { } 
@media (max-width: 1024px){
 .overview .logo { width: 50%; } 
 .overview-visual { margin: 5rem 0; } 
 }
@media (max-width: 768px){
 .overview-visual { min-height: 40rem; margin: 5rem 0; } 
 .overview .logo { width: 40%; } 
 }
@media (max-width: 576px){
 .overview-txt .top h4:before,
 .overview-txt .top h4:after { width: 35px; height: 26px; background-size: contain; } 
.overview-top h3 { font-size: 3.5rem; } 
 }
@media (max-width: 480px){
 .overview-top h3 { text-align: center; } 
 .overview-txt .top h4 {padding: 1rem 0;}
 .overview-txt .top h4:before,
 .overview-txt .top h4:after {
	display: none;
 }
.overview-visual { background-size: contain; min-height: 30rem; margin: 0; } 
 }
/* 0101_회사개요 */

/* 0102_연혁 */
.history {padding-bottom:8rem;}
.history .top h3 { color: var(--color-main); font-size: 5rem; font-weight: 700; margin-bottom: 10rem; } 
.history .item > li { display: flex; column-gap: 8rem; padding-bottom: 10rem; } 
.history .item li .year { font-size: 3.2rem; color: #222; font-weight: 700; position: relative; } 
.history .item li .year:after { position: absolute; content: ""; width: 1px; height: 100%; background-color: #ccc; left: 50%; top: 70px; } 
.history .item li .desc li { font-size: 2rem; color: #666; margin-top: 1.5rem; } 
.history .item li .desc li:first-child { margin-top: 0.5rem; } 
.history .item li:last-child .year:after { display: none; } 
.history-cont { display: flex; align-items: flex-start; column-gap: 20rem; } 
.history .cover-wrap { position:relative; width: 400px; height: 440px; aspect-ratio: 4/5; } 
.history .cover-wrap > .back { position:absolute; inset:0; transform: translate(15px, 14px); background: var(--color-main); border-radius: 0 0 20px 0; box-shadow: 0 10px 22px rgba(0,0,0,.22); z-index: 0; } 
.history .front { position:absolute; inset:0; border-radius: 0 0 10px 0; overflow:hidden; z-index: 2; background: url(../images/sub/0102_img01.png) no-repeat; background-size: cover; background-position: center; box-shadow: 0 12px 26px rgba(0,0,0,.2); } 
.history .corner { position:absolute; left:-30px; bottom:-14px; width:120px; height:92px; background: var(--color-main); clip-path: polygon(56% 0, 0 100%, 100% 100%); z-index: 1; } 
.history .title { color: #fff; margin:0; line-height:1.06; text-shadow: 0 1px 2px rgba(0,0,0,.25); margin: 3rem 0 0 3rem; } 
.history .title .uni { font-weight:800; font-size: 4.2rem; } 
.history .title .industry { font-size: 2.4rem; } 
.history .title .history { display:block; font-weight:800; font-size: 3.6rem; padding-left: 14rem; } 

@media (max-width: 1024px) {
	.history-cont {
		column-gap: 10rem;
}
.history .item > li {
		column-gap: 4rem;
}
} 
@media (max-width: 768px) {
	 .history-cont {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
}
.history .item li .year:after {
		top: 60px;
}
.history-cont .item {
	margin-top: 10rem;
}
} 
@media (max-width: 576px) { } 
@media (max-width: 480px) {
	.history .cover-wrap {
		width: 250px;
		height: 290px;
}
} 
/* 0102_연혁 */

/* 0103_오시는길 */
.directions { position: relative; padding-bottom:16rem; } 
.directions .top { margin-bottom: 5rem; text-align: right; } 
.directions .top h3 { font-size: 5rem; color: #222; letter-spacing: 2rem; } 
.directions-map { height: 50rem; } 
.directions-map .item { height: 100%; position: relative; } 
.directions-map .item iframe { width: 100%; height: 100%; border: 0; aspect-ratio: 16 / 5; position: relative; z-index: 1; } 
.directions .map-info { position:absolute; left:0; bottom:-30px; color:#fff; background-color: var(--color-main); padding: 40px; width:640px; clip-path: polygon(
 0 0, /* 좌상 */
 78% 0, /* 우상(사선 시작점) */
 90% 55%, /* 사선 중간 */
 100% 100%, /* 우하 */
 0 100% /* 좌하 */
 ); z-index: 2; } 
.directions .map-info:after { position: absolute; content: ""; width: 114px; height: 113px; background: url(../images/sub/0103_img01.png) no-repeat; right: 80px; top: 50%; transform: translate(-50%, -50%); } 
.directions .map-info .addr { font-size: 1.8rem; font-weight: 600; color: #fff; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgb(255, 255, 255, .3); display: inline-block; } 
.directions .map-info .num { font-size: 1.8rem; font-weight: 500; display: flex; column-gap: 1rem; } 
.directions .map-tail { position:absolute; left: 40px; bottom:-30px; width:640px; height: 192px; background-color: #7bbbd7; clip-path: polygon(
 0 0, /* 좌상 */
 78% 0, /* 우상(사선 시작점) */
 90% 55%, /* 사선 중간 */
 100% 100%, /* 우하 */
 0 100% /* 좌하 */
 ); z-index:0; } 

 @media (max-width: 1280px) { } 
@media (max-width: 1024px) { } 
@media (max-width: 768px) {
	.directions .top {text-align: center; } 
	.directions .top h3 {letter-spacing: 1rem; white-space: nowrap;}
	.directions-map { height: auto; } 
	.directions-map .item { height: auto;} 
	.directions-map .item iframe { height: 50rem;} 
	.directions .map-info { position: static;
	width: 100%;
	clip-path: none;
	bottom: unset;
}
.directions .map-tail {
	display: none;
}
.directions .map-info:after {
		right: 0;
}
}
@media (max-width: 576px) {
 .directions .map-info:after {
		background-size: contain;
		width: 80px;
		height: 80px;
}
} 
@media (max-width: 480px) {
	.directions .map-info:after {
		display: none;
	}
} 
 /* 0103_오시는길 */



/* 0200 리스트페이지 */
.pro-list {padding-bottom:20rem;}
.pro-list .list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5rem; margin:0 var(--inner-padding);} 
.pro-list .list img {max-height: 320px;}
.pro-list .box { border: 1px solid #ddd; position: relative; transition: .2s; display: flex; flex-direction: column; justify-content: space-between; } 
.pro-list .link { display: block; padding: 2rem 3rem 3rem 3rem; width: 100%; height: 100%; } 
.pro-list .thumb { display: flex; justify-content: center; } 
.pro-list .tit { font-size: 2.4rem; font-weight: 700; color: #222; margin-bottom: 4rem; line-height: 1.2; } 
.pro-list .estimate { display: block; text-align: right; padding: 2rem 6rem; font-size: 1.8rem; font-weight: 700; color: #222; transition: .3s; position: relative; line-height: 1.2; } 
.pro-list .estimate:before { content:""; position:absolute; left:3rem; right:3rem; top:0; height:1px; background: rgb(204, 204, 204, .5); } 
.pro-list .estimate:after { content: ""; width: 18px; height: 24px; background: url(../images/sub/list_ico_black.png) no-repeat; transition: .3s; position: absolute; right: 3rem; top: 50%; transform: translateY(-50%); } 
.pro-list .box:hover { background-color: #fff; border-color: transparent; box-shadow: 0 4px 30px rgba(0,0,0,.15); } 
.pro-list .box:hover .tit { color: var(--color-main); } 
.pro-list .box:hover .estimate { background-color: var(--color-main); color: #fff; } 
.pro-list .estimate:hover { background-color: var(--color-main); color: #fff; } 
.pro-list .box:hover .estimate:before { display: none; } 
.pro-list .box:hover .estimate:after { background: url(../images/sub/list_ico_white.png) no-repeat; } 
@media (max-width:768px){
 .pro-list .list { grid-template-columns: repeat(2, 1fr); } 
.pro-list .estimate { padding: 3rem 5.5rem; line-height: 0; } 
.pro-list .estimate:after,
.pro-list .box:hover .estimate:after { background-size: contain; width: 14px; height: 20px; } 
 }

@media (max-width: 576px){
 .pro-list .list { grid-template-columns: repeat(1, 1fr); } 
 }
/* 0200 리스트페이지 */

/* 0200 뷰페이지 */
.pro-view { padding-bottom: 20rem; } 
.pro-view .wrap { position: relative; } 
.pro-view .wrap:before { content: ""; width: 100%; height: 330px; position: absolute; background-color: #f3f6f9; bottom: -40px; } 
.pro-view .wrap .top .inner { display: flex; position: relative;} 
.pro-view .wrap .top .inner .img-area { width: 40%; display: flex; justify-content: center; padding-top: 2rem; position: relative;} 
.pro-view .desc-area { width: 60%; position: relative; right: 0; top: 30px;} 
.pro-view .desc-area header { font-size: 5.6rem; font-weight: 700; color: var(--color-main); margin-bottom: 2.5rem; } 
.pro-view .desc-area header span { font-size: 2.8rem; color: #222; display: block; margin-top: 1rem; font-weight: 500;} 
.pro-view .desc-area h3 { font-size: 2.8rem; color: #222; position: relative; font-weight: 700; padding-left: 4rem; display: inline-block;} 
.pro-view .desc-area h3:before { content: ""; position: absolute; width: 28px; height: 28px; background: url(../images/sub/view_ico-check.png) no-repeat; left: 0; top: 5px;  } 
.pro-view .desc-area ul { margin: 7rem 0 3rem 0; } 
.pro-view .desc-area ul li { font-size: 2rem; color: #222; font-weight: 500; position: relative; margin-top: 1rem;} 
.pro-view .desc-area p { padding-top: 3rem; border-top: 1px solid #e0e2e3; color: #666; font-size: 1.8rem; } 
.pro-view .tab-nav { margin-top: 9rem; display: flex; justify-content: center; } 
.pro-view .tab-nav li { width: 140px; } 
.pro-view .tab-nav li a { font-size: 2rem; font-weight: 600; color: #666666; display: block; width: 100%; height: 100%; padding: 1.5rem 0; display: flex; justify-content: center; border-top: 3px solid #ccc; border-bottom: 3px solid #ccc; transition: .3s; } 
.pro-view .tab-nav li:hover a { border-top: 3px solid var(--color-main); border-bottom: 3px solid var(--color-main); color: var(--color-main); } 
.pro-view .tab-nav li a.active { border-top: 3px solid var(--color-main) !important; border-bottom: 3px solid var(--color-main) !important; color: var(--color-main) !important; } 
.pro-view .tab-cont { margin-top: 4rem; } 
.pro-view .tab-cont #tab01 .box { border: 1px solid #ccc; background-color: #fafafa; padding: 5rem 12rem; display: flex; align-items: center; } 
.pro-view .tab-cont #tab01 .box header { font-size: 2.6rem; font-weight: 600; color: #222; margin-right: 12rem; } 
.pro-view .tab-cont #tab01 .box ul li { font-size: 1.8rem; color: #666; position: relative; margin-top: 1.5rem; padding-left: 2.5rem; } 
.pro-view .tab-cont #tab01 .box ul li:before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 12px; background: url(../images/sub/ico-check.png) no-repeat; } 
.pro-view .tab-cont #tab01 .box ul li:first-child { margin-top: 0; } 
.pro-view .tab-cont #tab01 .box .img-area { display: flex; justify-content: flex-end; padding-top: 0; width: 40%;} 
.pro-view .tab-cont #tab02 .box { border: 1px solid #ccc; background-color: #fafafa; padding: 6rem; } 
.pro-view .tab-cont #tab02 .box ol li { margin-top: 2rem; font-size: 1.8rem; position: relative; padding-left: 3.5rem; line-height: 1.5;} 
.pro-view .tab-cont #tab02 .box ol li:before { content: ""; width: 23px; height: 23px; position: absolute; left: 0; top: 3px; background: url(../images/sub/num01.png) no-repeat; } 
.pro-view .tab-cont #tab02 .box ol li:nth-child(2):before { background: url(../images/sub/num02.png) no-repeat; } 
.pro-view .tab-cont #tab02 .box ol li:nth-child(3):before { background: url(../images/sub/num03.png) no-repeat; } 
.pro-view .tab-cont #tab02 .box ol li:nth-child(4):before { background: url(../images/sub/num04.png) no-repeat; } 
.pro-view .tab-cont #tab02 .box ol li:nth-child(5):before { background: url(../images/sub/num05.png) no-repeat; } 
.pro-view .tab-cont #tab02 .box ol li:nth-child(6):before { background: url(../images/sub/num06.png) no-repeat; } 
.pro-view .tab-cont #tab02 .box ol li b { color: #222; font-weight: 700; } 
.pro-view .tab-cont #tab02 .box ol li:first-child { margin-top: 0; } 
.pro-view .box-table p { font-size: 1.6rem; color: #222; font-weight: 600; text-align: right; margin-bottom: 2rem; } 
.pro-view .spec-table { width: 100%; border-collapse: collapse; font-size: 1.6rem; color: #333; text-align: center; } 
.pro-view .spec-table td { border: 1px solid #ddd; padding: 2rem 0.8rem; } 
.pro-view .spec-table tr td:first-child { background-color: var(--color-main); color: #fff; font-weight: 600; width: 200px; } 
.pro-view .spec-table tr td:nth-child(even) { font-weight: 500; } 
.pro-view .spec-table tr td:nth-child(3) { background-color: var(--color-main); color: #fff; font-weight: 600; width: 200px; } 
.pro-view .link-area { margin-top: 14rem; display: flex; justify-content: center; font-size: 2rem; column-gap: 1.5rem; } 
.pro-view .link-area a { padding: 2rem 3rem; font-weight: 500; } 
.pro-view .link-area a:first-child { color: #444; border: 1px solid #ccc; } 
.pro-view .link-area a:last-child { color: #fff; background-color: #222; position: relative; padding: 2rem 6rem 2rem 3rem; } 
.pro-view .link-area a:last-child:after { position: absolute; content: ""; right: 3rem; top: 50%; transform: translateY(-50%); background: url(../images/sub/ico-link.svg) no-repeat; background-size: contain; width: 20px; height: 20px; } 

@media (max-width: 1280px) {
	.pro-view .desc-area header {
		font-size: 5rem;
	}
	.pro-view .desc-area header span {
		font-size: 2.4rem;
	}
}
@media (max-width: 1024px){
	.pro-view .wrap .top .inner {
		flex-direction: column;
}
.pro-view .wrap:before {
		height: 600px;
		bottom: -40px;
}
.pro-view .wrap .top .inner .img-area {
	width: 100%;
}
.pro-view .desc-area {
		width: 100%;
		text-align: center;
		position: relative;
		right: auto;
		padding-bottom: 50px;
}
.pro-view .desc-area ul { display: flex; flex-direction: column; margin: 5rem 0 3rem 0;} 
.pro-view .desc-area ul li { font-size: 2rem; color: #222; font-weight: 500; position: relative; display: inline-block;} 
 .pro-view .tab-cont #tab01 .box { padding: 5rem 7rem; } 
.pro-view .tab-cont #tab01 .box .img-area { margin-left: 3rem; } 
.pro-view .tab-cont #tab01 .box ul li:before { top: 8px; width: 12px; height: 8px; background-size: contain; } 
 .pro-view .tab-cont #tab01 .box header { margin-right: 7rem; } 
.pro-view .tab-cont #tab02 .box ol li:nth-child(1):before,
.pro-view .tab-cont #tab02 .box ol li:nth-child(2):before,
.pro-view .tab-cont #tab02 .box ol li:nth-child(3):before,
.pro-view .tab-cont #tab02 .box ol li:nth-child(4):before { width: 20px; height: 20px; background-size: contain; } 
.pro-view .spec-table { display: block; overflow-x: auto; white-space: nowrap; } 
 }
@media (max-width: 768px) { } 
@media (max-width: 680px){
 .pro-view .tab-cont #tab01 .box { flex-direction: column; row-gap: 4rem; align-items: center; } 
 .pro-view .tab-cont #tab01 .box header { margin-right: 0; } 
 .pro-view .tab-cont #tab01 .box .img-area { margin-left: 0; } 
 }
@media (max-width: 480px){
 .pro-view .tab-cont #tab02 .box ol li:nth-child(1):before { width: 15px; height: 15px; } 
 .pro-view .tab-cont #tab02 .box ol li:nth-child(2):before { width: 15px; height: 15px; } 
 .pro-view .tab-cont #tab02 .box ol li:nth-child(3):before { width: 15px; height: 15px; } 
 .pro-view .tab-cont #tab02 .box ol li:nth-child(1):before,
 .pro-view .tab-cont #tab02 .box ol li:nth-child(2):before,
 .pro-view .tab-cont #tab02 .box ol li:nth-child(3):before,
 .pro-view .tab-cont #tab02 .box ol li:nth-child(4):before { width: 15px; height: 15px; } 
 .pro-view .desc-area h3:before {
		width: 24px;
		height: 24px;
		background-size: contain;
}
.pro-view .desc-area header span {
	display: block;
}
.pro-view .desc-area h3 {
	display: inline;
}
 }
/* 0200 뷰페이지 */