/*서브-상단비주얼 */
#svisual{ width:100%; min-width:1280px; background:url("../img/sub/svisual_bg.jpg") no-repeat center/cover; margin:0px auto; padding: 60px 0 40px 0; text-align:left; position:relative; transition:all 0.3s ease;}
#svisual .inr{position: initial}
#svisual .slogan{color: #fff;}
#svisual .slogan h3{font-size: 2.2em; line-height: 1.4em; margin-bottom: 40px;}
#svisual .slogan h3 strong{display: block; color: #00A69B;}

.sub_nav{padding: 20px 0; display: flex; align-items: flex-end; justify-content: space-between;}

#container{z-index:0; line-height: 1.8em;}
@media (max-width:1600px) {
}
@media (max-width:1500px) {
}
@media (max-width:1400px) {
}

@media (max-width:1279px) {
	#svisual {height:auto; padding: 40px 0; min-width:100%; background-position:center top; background-size:cover; ; transition:all 0.3s ease;}

}
@media (max-width:850px) {
	#svisual{ transition:all 0.3s ease;}
	#svisual .slogan{display: none;}
}
@media (max-width:768px) {
}
@media (max-width:550px) {
	#svisual .s_text h3{font-size:1.35em;}
}

/*내용작업*/
/*공통*/
#ctt h4{font-size: 1.8em; margin: 60px 0 30px 0; font-weight: 600}
#ctt h4:before{content: ""; display: inline-block; width: 4px; height: 20px; background: #00A69B; border-radius: 4px; margin-right: 8px; vertical-align: middle; margin-top: -4px;}
#ctt h4:first-of-type{margin-top: 0;}

.ctt_company #ctt_con:after {width:40%; height:100%; position: absolute; right: 0; bottom: 0;
	background: url("../img/main/company_bg.png") no-repeat top center/cover; display: block; content: "";}
.ctt_company #ctt_con{position: relative;}
.ctt_company #ctt_con > div{width: 60%;}
.ctt_company h3{font-size: 2em; line-height: 1.4em; font-weight: 600; margin-bottom: 40px;}

/*사훈 및 경영이념*/
.ctt_motto .diagram ul{display: flex;align-items: ;justify-content: space-between;border: 1px solid #eee;padding: 5em;}
.ctt_motto .diagram ul li{display: block;text-align: center;width: 200px;aspect-ratio:1/1;background: #dddddd56;border-radius: 50%; padding: 2.5em;}
.ctt_motto .diagram ul li img{height: 90px;}
.ctt_motto .diagram ul li p{font-size: 1.2em; margin-top: 10px; font-weight: 600;}
.ctt_motto .dl_wrap{display: flex; align-items: ; justify-content: center; }
.ctt_motto .dl_wrap > dl{width: 100%; padding: 0 40px;}
.ctt_motto .dl_wrap > dl:not(:last-child){border-right: 1px solid #00000012;}
.ctt_motto .icon{
	width: 120px;
	height: 120px;
	margin: 0 auto 14px;
	box-sizing: border-box;
	text-align: center;
	border-radius: 50%;
	padding: 20px 0;}
.ctt_motto .icon img{width: 100%; height: 100%;}

.ctt_motto dt{text-align: center; font-size: 1.7em; margin: 10px 0 10px;}
.ctt_motto dd{text-align: center; font-size: 1.2em; opacity: 0.8;}


/*연혁*/
.ctt_history ul {margin: 20px;}
.ctt_history li:first-of-type{border-top: 1px solid #eee;}
.ctt_history li{border-bottom: 1px solid #eee; padding:0.5em 2em;}
.ctt_history li.bg{background:#01206006; font-weight: 600;}
.ctt_history h5 {font-size: 20px;color: #000;margin-top: 10px;float: left;margin-right: 20px;width: 70px;font-weight: 800;font-size: 1.6em;}
.ctt_history dl {margin-left: 20px;display: grid;grid-template-columns: 70px auto;align-items: baseline;}
.ctt_history dt {font-weight: bold;margin-top: 10px; font-size: 1.1em;}
.ctt_history dd {margin-bottom: 10px;margin-left: 20px;}

/*조직도*/
.ctt_orgchart #ctt_con{display: flex;}
.ctt_orgchart #ctt_con .table{margin-top: 0;}
.org-chart {border: 1px solid #eee; width: 100%; margin-right: 40px; min-width: 1000px;}
.org-chart div{text-align: center;}
.org-chart .flex{align-items: flex-start; justify-content: center;}
.node {
	text-align: center;
	margin: 10px;
}

.node-content {
	padding: 10px;
	background-color: #3498db;
	color: #fff;
	border-radius: 5px;
	display: inline-block;
	margin:10px;
	min-width: 150px;
	position: relative;
}
.node .blank{height: 47px; margin: 10px;}
.node > .node-content {color: #00A69B; background:#252E3B; margin-left: 178px;}
.node2 > .flex > .node-content {background: #00A69B; color:#252E3B;font-weight: 600;}
.node2 > .flex:first-of-type > .node-content:before{content: "";display: block;width: 435px;height: 1px;background: #ccc;position: absolute;top: 20px;left: -435px;}

.node2.vline{padding-top: 130px;}
.node2.vline .node3 > .node-content:before{content: "";display: block;width:1px;height: 119px;background: #ccc;position: absolute;bottom: 46px;left: 50%;}
.node3 > .node-content {border:1px solid #00A69B; background: #fff; color:#252E3B;font-weight: 600;}
.node4 > .node-content{border:1px solid #252E3B56; background: #fff; color:#252E3B;font-weight: 600;}
.node4 > .node-content dt{font-weight: 600;}
.node4 > .node-content dd{opacity: 0.8; font-size: 0.9em;}
.node4 > .node-content dd:first-of-type{margin-top: 6px;}

.node > .node-content:after{content: "";display: block;width:1px;height: 238px;background: #ccc;position: absolute;top: 46px;left: 50%;}

.hline .node-content:before,
.hline .node-content:after{content: ""; display: block; width:15px; height: 1px; background: #ccc; position: absolute; top: 20px;}
.hline .node-content:before{left: -15px;}
.hline .node-content:after{right: -15px;}
.hline .node3 > .node-content:before{content: "";display: block;width: 267px;height: 1px;background: #ccc;position: absolute;top: 20px;left: -267px;}
.node-content:first-of-type:before,
.node-content:last-of-type:after{display: none;}

.node3 > .node-content:after{content: "";display: block;width:1px;height: 50px;background: #ccc;position: absolute;top: 46px;left: 50%;}

.node2.vline > .flex > .node-content:after{content: "";display: block;width:1px;height: 50px;background: #ccc;position: absolute;top: 46px;left: 50%;}

.sub-nodes {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}


/*찾아오시는 길*/
#sub_map{}
#sub_map .contact{
	margin: 0 0 50px;
	display: flex;
}
#sub_map .con_box{
	width: calc((100%/3) - 5px);
	border: 1px solid #eee;
	padding: 10px 15px;
	margin: 0 10px 0 0;
	text-align: center;
	color: #666;
	font-size: 1.0em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	text-align: left;
	line-height: 1.2em;
}
#sub_map .con_box:last-child{
	margin-right: 0;
}
#sub_map .con_box > span{
	font-size: 1.1em;
	color: #222;
	margin-right: 15px;
}

/*제조공정*/
.ctt_process .grid{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px;}
.ctt_process .grid dl{padding: 1em; background: #eeeeee52;}
.ctt_process .grid dl dt{font-size: 1.2em; padding-top: 15px; text-align: center;}
.ctt_process .grid img{width: 100%;}

.ctt_facility .flex{align-items: flex-start; gap: 20px;}
.ctt_facility .flex > div{width: 100%;}
.ctt_facility .table,
.ctt_facility .table table{width: 100%;}
.ctt_facility .table img{margin-right: 10px;}

.new_facility .grid{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px;}

.new_facility dl{background: #fff; border: 1px solid #eee; padding: 1.5em;}
.new_facility dl img{margin: 1em; max-height:160px; width: auto;}
.new_facility dt{font-size: 1.5em; margin: 20px 0 10px 0; line-height: 1.6em;}


#ctt_con h6{margin-bottom: 20px; font-size: 1.2em; background-color: #eee; padding: 1em;}
#ctt_con h6:before{content: "";}
#ctt_con .txt{background-color: #eeeeee56; padding: 15px 30px; margin-bottom: 40px;}
#ctt_con .txt h7{font-weight: 600; font-size: 1.3em;}
#ctt_con .box{padding: 15px 30px; border: 1px solid #eee;}
#ctt_con .grid{display: grid; gap: 20px; margin-bottom: 20px;}
#ctt_con .grid li{border: 1px solid #eee; text-align: center; padding: 1em;}
#ctt_con .grid2{grid-template-columns: 1fr 1fr}
#ctt_con .grid4{grid-template-columns: 1fr 1fr 1fr 1fr}

.ctt_product02 img {max-width: 100%;}

.ctt_product03 img{max-width: 100%; width: auto; margin-bottom: 10px;}
.ctt_product03 .grid2 img{height: 250px;}
.ctt_product03 .grid4 img{height: 150px;}

.ctt_overview{text-align: center;}

/*채용안내*/
.recruit section{margin-bottom: 50px;}
.recruit h5{color: #496828; font-size: 1.4em; font-weight: 800; margin: 20px 0 10px 0}
.recruit .step .grid{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px!important; align-items: center;}
.recruit .step dl{border-radius: 50%; border: 1px solid #00A69B; aspect-ratio:1/1; text-align: center; padding: 3.5em; position: relative; background-color: #00A69B20}
.recruit .step dl:not(:last-child):after{content: "\f356";font-family: "Font Awesome 6 Pro";font-weight: 600;position: absolute;right: -40px;top: 50%;transform: translateY(-50%);font-size: 3em;opacity: 0.5;color: #00A69B;}
.recruit .step dl dt{font-size: 1.2em; margin-bottom: 10px;}
.recruit .step dl dt p{font-size: 1.4em; font-weight: 800; margin-top: 5px;}
.recruit .step dl dt span{display: inline-block;background: #8FBC94; color: #fff; padding: 0 1em; border-radius: 4px;}
.recruit .diagram{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; text-align: center;}
.recruit .diagram dl{color: #fff; padding: 1.5em; border-radius: 20px;}
.recruit .diagram dl:nth-child(1){background-color: #8FBC94;}
.recruit .diagram dl:nth-child(2){background: #56445D;}
.recruit .diagram dl:nth-child(3){background-color: #548687;}
.recruit .diagram dt{font-size: 3em; margin-bottom: 5px; opacity: 0.9;}
.recruit .diagram dd{font-size: 1.2em;}
.recruit .box li:before{content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #00A69B; margin-right: 4px;}


@media screen and (max-width: 1400px) {
	.recruit .step .grid{grid-template-columns: 1fr 1fr;}
	.recruit .step dl{aspect-ratio:unset; border-radius: 30px;}
}
@media screen and (max-width: 1200px) {
	.ctt_company #ctt_con > div{width: 100%}
	.ctt_company #ctt_con:after{display: block; position: relative; width: 100%; height: 500px; margin-top: 50px;}

	.ctt_vision img{width: 100%;}

	.ctt_motto .dl_wrap{display: block;}
	.ctt_motto .dl_wrap dl{position: relative; text-align: left; padding: 20px 0 20px 130px; min-height: 140px;}
	.ctt_motto .dl_wrap > dl:not(:last-child){border-right:0; border-bottom: 1px solid #ffffff56;}
	.ctt_motto .dl_wrap dl .icon{position: absolute; left: 0; top: 0;}

	.ctt_motto dt{text-align: left;}
	.ctt_motto dd{text-align: left;}

	.ctt_orgchart #ctt_con{display: block;}
	.org-chart{overflow-x: auto; margin-right: 0; margin-bottom: 40px; min-width: 100%;}
	.org-chart .node{min-width: 1000px;}
	.ctt_orgchart #ctt_con .table,
	.ctt_orgchart #ctt_con .table table{width: 100%;}

	.ctt_overview img,
	.ctt_product01 img,
	.ctt_product02 img,
	.ctt_product04 img{width: 100%;}

	.ctt_process .grid{grid-template-columns: 1fr 1fr;}

	.ctt_facility .flex{display: block;}
	.new_facility .grid{grid-template-columns: 1fr 1fr;}

	.ctt_product03 img{height: auto!important;}
	.ctt_product03 .grid4{grid-template-columns: 1fr 1fr;}

	.ctt_product02 #ctt_con .grid2 {grid-template-columns: 1fr;}
	.ctt_product03 #ctt_con .grid2 {grid-template-columns: 1fr;}



}
@media screen and (max-width: 992px) {
	.ctt_motto .diagram ul{padding: 1em;}

	#sub_map .contact{display: block;}
	#sub_map .con_box{width: 100%; margin-bottom: 1px;}

	.recruit .step .grid{grid-template-columns: 1fr;}
	.recruit .step .grid dl{border-radius: 20px; padding: 1.5em;}
	.recruit .step dl dt{display: flex; align-items: center; justify-content: center;}
	.recruit .step dl dt p{margin: 0 4px;}
	.recruit .step dl:not(:last-child):after{top: auto; bottom: -25px; transform: translateX(-50%); left: 50%; content: "\f354";}
	.recruit .diagram{grid-template-columns: 1fr;}

}
@media screen and (max-width: 768px) {
	.ctt_motto .diagram ul{display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
	.ctt_motto .diagram ul li{width: 100%; aspect-ratio:1/1;}
	.ctt_motto .diagram ul li img{height: 60%;}

	.new_facility .grid{grid-template-columns: 1fr;}
}


.ctt_product02 #ctt_con .grid li:nth-child(even),
.ctt_product03 #ctt_con .grid li:nth-child(even){border: 0; text-align: left;}{border: 0; text-align: left;}