/* common */
.squre-title p{ font-size: 2rem; font-weight: 400; color: #000; letter-spacing: -0.02em; margin-top: 5px; }

.sec-title h4{ font-size: 3rem; font-weight: 700; color: #000; letter-spacing: 0; text-align: center; }

.smallTxt{ font-size: 1.6rem; font-weight: 400; color: #666; padding-top: 20px; padding-left: 20px; }

.blue-figure .figcaption{ background: #002E50; text-align: center; padding: 15px; margin-bottom: 20px; }
.blue-figure .figcaption h6{ font-size: 2.4rem; font-weight: 700; color: #fff; }
.blue-figure .figcaption h6 span{ font-size: 2rem; }

.target-figure{ position: relative; }

.pattern-box{ background: url("/img/sub/company/business_pattern.png"); }
.pattern-box h6{ display: inline-block; font-size: 2rem; font-weight: 700; color: #002E50; border-bottom: 2px solid #002E50; margin-bottom: 15px; }

.line-title{ margin-bottom: 40px; position: relative; padding: 0 20px; }
.line-title::before{ content: ""; width: 100%; height: 1px; background: var(--mainColor); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; }
.line-title h6{ max-width: 900px; width: 100%; margin: 0 auto; text-align: center; font-size: 3rem; font-weight: 200; color: #fff; background: var(--mainColor); padding: 18px; }


/* 간격 */
.pt150{ padding-top: 150px; }
.pb150{ padding-bottom: 150px; }
.pt180{ padding-top: 180px; }
.pb180{ padding-bottom: 180px; }
.pt230{ padding-top: 230px; }
.pb230{ padding-bottom: 230px; }

@media screen and (max-width: 1500px){
	/* common */
	.squre-title p{ font-size: 1.9rem; }

	.sec-title h4{ font-size: 2.6rem; }

	.blue-figure .figcaption h6{ font-size: 2.2rem; }
	.blue-figure .figcaption h6 span{ font-size: 1.9rem; }

	.pattern-box h6{ display: inline-block; font-size: 1.9rem; }

	.line-title{ margin-bottom: 30px; }
	.line-title h6{ font-size: 2.5rem; }

	/* 간격 */
	.pt150{ padding-top: 100px; }
	.pb150{ padding-bottom: 100px; }
	.pt180{ padding-top: 120px; }
	.pb180{ padding-bottom: 120px; }
	.pt230{ padding-top: 180px; }
	.pb230{ padding-bottom: 180px; }
}

@media screen and (max-width: 1250px){
	/* common */
	.squre-title p{ font-size: 1.8rem; }

	.sec-title h4{ font-size: 2.4rem; }

	.smallTxt{ font-size: 1.5rem; padding-top: 10px; padding-left: 10px; }

	.blue-figure .figcaption{ padding: 10px 0; }
	.blue-figure .figcaption h6{ font-size: 2rem; }
	.blue-figure .figcaption h6 span{ font-size: 1.8rem; }

	.pattern-box h6{ display: inline-block; font-size: 1.8rem; }

	.line-title{ margin-bottom: 20px; }
	.line-title h6{ font-size: 2rem; padding: 10px 15px; }

	/* 간격 */
	.pt150{ padding-top: 80px; }
	.pb150{ padding-bottom: 80px; }
	.pt180{ padding-top: 100px; }
	.pb180{ padding-bottom: 100px; }
	.pt230{ padding-top: 140px; }
	.pb230{ padding-bottom: 140px; }
}

@media screen and (max-width: 900px){
	/* common */
	.squre-title p{ font-size: 1.7rem; }

	.sec-title h4{ font-size: 2.2rem; }

	.blue-figure .figcaption h6{ font-size: 1.9rem; }
	.blue-figure .figcaption h6 span{ font-size: 1.7rem; }

	.pattern-box h6{ display: inline-block; font-size: 1.7rem; }

	.line-title h6{ font-size: 1.8rem; }

	/* 간격 */
	.pt180{ padding-top: 80px; }
	.pb180{ padding-bottom: 80px; }
	.pt230{ padding-top: 100px; }
	.pb230{ padding-bottom: 100px; }
}

@media screen and (max-width: 600px){
	/* 모바일에서 클릭하면 이미지 새창으로 */
	.target-figure a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
}



/* 회사소개 - 기업정보 - 회사개요 */
#introduce2 .area ul{ display: flex; flex-wrap: wrap; gap: 25px; margin-top: 50px; }
#introduce2 .area ul li{ width: calc((100% - 75px) / 4); }
#introduce2 .area dl{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; text-align: center; }
#introduce2 .area dl dt{ background: #002E50; font-size: 2.4rem; font-weight: 600; color: #fff; letter-spacing: 0; padding: 14px; }
#introduce2 .area dl dd{  min-height: calc(100% - 60px); display: flex; flex-direction: column; justify-content: space-between; }
#introduce2 .area dl dd figure{ padding: 10px 0; }
#introduce2 .area dl dd p{ background: #50698E; border-radius: 50px; font-size: 1.8rem; font-weight: 600; color: #fff; padding: 10px; }

#introduce2 .solution .hexagon-box{ background: url("/img/sub/company/solution_bg.png") no-repeat top center / cover; margin-top: 75px; display: flex; flex-direction: column; align-items: center; }
#introduce2 .solution .flex-box{ display: flex; justify-content: center; gap: 35px 90px; padding: 11px 13px; background: url("/img/sub/company/hexagon_wrap.png") no-repeat center center / contain; margin-top: 35px; }
#introduce2 .solution .hexagon{ display: inline-block; position: relative; }
#introduce2 .solution .hexagon .box{ display: flex; justify-content: center; align-items: center; width: 305px; height: 85px; background: url("/img/sub/company/hexagon_blue.png") no-repeat center center / contain; position: relative; }
#introduce2 .solution .hexagon.gray .box{ background: url("/img/sub/company/hexagon_gray.png") no-repeat center center / contain; }
#introduce2 .solution .hexagon .box::after{ content: url("/img/sub/company/solution_arrow.svg"); position: absolute; }
#introduce2 .solution .hexagon .box1::after{ right: 73%; bottom: -25px; transform: translate(100%, 100%)  rotate(-60deg); }
#introduce2 .solution .hexagon .box2::after{ top: 53%; right: -45px; transform: translate(50%, -50%); }
#introduce2 .solution .hexagon .box3::after{ right: 98%; top: -40px; transform: translate(50%, 100%)  rotate(-120deg); }
#introduce2 .solution .hexagon .box p{ font-size: 2rem; font-weight: 700; color: #fff; text-align: center; }
#introduce2 .solution .hexagon .arrow{ width: max-content; font-size: 1.8rem; font-weight: 400; color: #000; position: absolute; top: 50%; left: calc(100% + 25px); transform: translate(0%, -50%); }
#introduce2 .solution .hexagon.left .arrow{ left: -25px; transform: translate(-100%, -50%); text-align: right; }

#introduce2 .partner .sec-title{ margin-bottom: 85px; }

#introduce2 .business ul{ display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; }
#introduce2 .business ul li{ width: calc((100% - 20px) / 2); display: flex; }
#introduce2 .business figure{ width: 210px; min-height: 160px; position: relative; }
#introduce2 .business figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#introduce2 .business figure figcaption{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-size: 2rem; font-weight: 700; color: #fff; padding: 0 20px; }
#introduce2 .business .text{ width: calc(100% - 210px); background: #fff; border: 1px solid #DBDBDB; border-left: none; display: flex; justify-content: center; align-items: center; padding: 20px; }
#introduce2 .business .text p{ font-size: 1.8rem; font-weight: 400; color: #000; text-align: center; }

@media screen and (max-width: 1500px){
	#introduce2 .area dl dt{ font-size: 2.2rem; }
	#introduce2 .area dl dd p{ font-size: 1.7rem; }

	#introduce2 .solution .hexagon-box{ margin-top: 50px; }
	#introduce2 .solution .hexagon .box p{ font-size: 1.9rem; }

	#introduce2 .business figure figcaption{ font-size: 1.9rem; }
	#introduce2 .business .text p{ font-size: 1.7rem; }

	#introduce2 .partner .sec-title{ margin-bottom: 60px; }
}

@media screen and (max-width: 1300px){
	#introduce2 .solution .flex-box .hexagon .arrow{ top: calc(100% + 25px); left: 50%; transform: translateX(-50%); text-align: center; }
}

@media screen and (max-width: 1250px){
	#introduce2 .area ul{ margin-top: 20px; }
	#introduce2 .area dl dt{ font-size: 2rem; padding: 10px; }
	#introduce2 .area dl dd p{ font-size: 1.6rem; padding: 7px 10px; }

	#introduce2 .solution .hexagon-box{ margin-top: 30px; }
	#introduce2 .solution .hexagon .box p{ font-size: 1.8rem; }
	#introduce2 .solution .hexagon .arrow{ font-size: 1.7rem; }

	#introduce2 .partner .sec-title{ margin-bottom: 30px; }
	
	#introduce2 .business ul{ margin-top: 20px; }
	#introduce2 .business figure figcaption{ font-size: 1.8rem; }
	#introduce2 .business .text p{ font-size: 1.6rem; }

}

@media screen and (max-width: 1200px){
	#introduce2 .area ul li{ width: calc((100% - 25px) / 2); }

	#introduce2 .business figure{ width: 160px; }
	#introduce2 .business .text{ width: calc(100% - 160px); padding: 15px; }
}

@media screen and (max-width: 1000px){
	#introduce2 .business ul li{ width: 100%; }
}

@media screen and (max-width: 900px){
	#introduce2 .area ul{ gap: 20px; }
	#introduce2 .area ul li{ width: calc((100% - 20px) / 2); }
	#introduce2 .area dl dt{ font-size: 1.8rem; }

	#introduce2 .solution .hexagon .box p{ font-size: 1.7rem; }
	#introduce2 .solution .hexagon .arrow{ font-size: 1.6rem; }

	#introduce2 .business figure figcaption{ font-size: 1.7rem; }
}

@media screen and (max-width: 800px){
	#introduce2 .solution .hexagon .box{ width: 260px; height: 75px; }
	#introduce2 .solution .hexagon .box1::after{ right: 77%; }
}

@media screen and (max-width: 700px){
	#introduce2 .hexagon-box{ padding-right: 60px; }
	#introduce2 .solution .flex-box{ flex-direction: column; gap: 80px; background: none; padding: 0; margin-top: 80px; }
	#introduce2 .solution .hexagon .box::before{ content: ""; width: 50px; height: 2px; background: #666; position: absolute; top: 50%; right: -40px; transform: translate(50%, -50%); }
	#introduce2 .solution .hexagon.gray .box::before{ height: 12px; background: url("/img/sub/company/solution_arrow.svg") no-repeat center right / auto; transform: translate(50%, -50%) rotate(180deg); }
	#introduce2 .solution .flex-box .hexagon:first-of-type .box::before{ display: none; }

	#introduce2 .solution .hexagon .box::after{ display: none; }

	#introduce2 .solution .hexagon .arrow{ position: static; transform: translate(0, 0) !important; width: 100%; text-align: center; margin-top: 15px; }

	#introduce2 .solution .hexagon::before{ content: ""; width: 2px; height: calc(100% + 100px); background: #666; position: absolute; top: 0; right: -65px; }
	#introduce2 .solution .hexagon.gray::before{ height: calc(100% + 100px - (75px / 2)); top: calc(75px / 2); }
	#introduce2 .solution .flex-box .hexagon:last-of-type::before{ height: calc(75px / 2); }

	#introduce2 .solution .hexagon::after{ content: url("/img/sub/company/solution_arrow.svg"); position: absolute; top: calc(100% + 40px); left: 50%; transform: translate(-55%, -50%) rotate(90deg); }
	#introduce2 .solution .hexagon.gray::after{ transform: translate(-50%, -50%) rotate(-90deg); }
	#introduce2 .solution .flex-box .hexagon:last-of-type::after{ display: none; }
}

@media screen and (max-width: 550px){
	#introduce2 .business br{ display: none; }
}


/* 회사소개 - 기업이념 - Vision & Values */
#vision2 .sec-title{ margin-bottom: 60px; }

#vision2 .history .flex-box{ display: flex; flex-wrap: wrap; align-items: stretch; padding-right: 45px; }
#vision2 .history .year{ width: calc((100% + 30px) / 3 ); position: relative; margin-top: 30px; }
#vision2 .history .year:nth-of-type(2n){ margin-top: 15px; z-index: 5; }
#vision2 .history .year:nth-of-type(3n){ margin-top: 0; z-index: 10; }
#vision2 .history .year:not(:last-of-type){ margin-right: -15px; }
#vision2 .history .year::before{ content: ""; width: calc(100% - 30px); height: 100%; background: #fff; position: absolute; bottom: 0; left: 50%; z-index: -1; transform: translateX(-50%); }
#vision2 .history .year::after{ content: ""; width: 5px; height: calc(100% - 30px); position: absolute; bottom: 20px; left: 15px; z-index: -5; box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.8); border-radius: 50%; }

#vision2 .history .title{ margin-bottom: 15px; position: relative; }
#vision2 .history .title::after{ content: ""; width: 15px; height: 15px; background: #000; position: absolute; bottom: 0; left: 0; transform: translateY(100%); clip-path: polygon(100% 0, 0 0, 100% 100%); }
#vision2 .history .border{ position: relative; margin-bottom: 5px; }
#vision2 .history .border::after{ content: ""; width: calc(100% - 30px); height: 1px; background: #666; position: absolute; bottom: 5px; left: 0; z-index: -1; }
#vision2 .history .title h6{ display: inline-block; font-size: 2.4rem; font-weight: 700; color: var(--color); background: #fff; padding-right: 15px; }
#vision2 .history .title h6 span{ display: inline-block; font-size: 1.6rem; font-weight: 700; color: #666; margin-left: 5px; }
#vision2 .history .title .arrow{ width: 100%; height: 70px; display: flex; justify-content: center; align-items: center; background: var(--color); padding: 0 30px; position: relative; }
#vision2 .history .year .arrow::after{ content: ""; width: 45px; height: 100px; background: var(--color); clip-path: polygon(100% 50%, 0 0, 0 100%); position: absolute; top: 50%; right: 1px; transform: translate(100%, -50%); }
#vision2 .history .year:not(:last-of-type) .arrow::after{ display: none; }
#vision2 .history .title .arrow p{ font-size: 1.8rem; font-weight: 400; color: #fff; text-align: center; }
#vision2 .history .dl{ padding: 0 15px 15px; position: relative; z-index: 5; }
#vision2 .history .dl dl{ display: flex; align-items: baseline; padding-left: 15px; }
#vision2 .history .dl dl *{ font-size: 1.6rem; line-height: 1.7; }
#vision2 .history .dl dl dt{ width: 55px; font-weight: 700; color: var(--color); }
#vision2 .history .dl dl dd{ width: calc(100% - 55px); font-weight: 400; color: #000; }
#vision2 .history .dl dl dd strong{ font-weight: 700; }
#vision2 .history .dl dl dd p{ padding-left: 15px; position: relative; }
#vision2 .history .dl dl dd p::before{ content: ""; width: 3px; height: 3px; background: #000; border-radius: 50%; position: absolute; top: calc(1.7em / 2); left: 0; transform: translateY(-50%); }

@media screen and (max-width: 1500px){
	#vision2 .sec-title{ margin-bottom: 40px; }

	#vision2 .history .title h6{ font-size: 2.2rem; }
	#vision2 .history .title .arrow p{ font-size: 1.7rem; }
}

@media screen and (max-width: 1250px){
	#vision2 .sec-title{ margin-bottom: 20px; }

	#vision2 .history .title h6{ font-size: 2rem; }
	#vision2 .history .title h6 span{ font-size: 1.5rem; }
	#vision2 .history .title .arrow p{ font-size: 1.6rem; }
}

@media screen and (max-width: 1200px){
	#vision2 .history .flex-box{ justify-content: center; gap: 45px 0; }
	#vision2 .history .year{ width: calc((100% + 15px) / 2); }
	#vision2 .history .year:nth-of-type(3n){ margin-top: 0; }
	#vision2 .history .year{ margin-top: 15px; }
	#vision2 .history .year:nth-of-type(2n){ margin-top: 0; z-index: 5; margin-right: 0; }
	#vision2 .history .year:nth-of-type(2n) .arrow::after{ display: block; }

}

@media screen and (max-width: 900px){
	#vision2 .history .year{ width: 100%; margin-top: 0; }
	#vision2 .history .year:not(:last-of-type){ margin-right: 0; }
	#vision2 .history .title h6{ font-size: 1.9rem; }
	#vision2 .history .year .arrow::after{ display: block !important; }
}


/* 회사소개 - 사업소개 - 로봇 구동모듈 */
#business.robot .grid-box{ display: grid; grid-template-columns: 540px auto; gap: 15px 20px; }
#business.robot .grid-box .pattern-box{ height: 100%; padding: 25px; }
#business.robot .grid-box .pattern-box figure figcaption{ font-size: 1.8rem; font-weight: 400; color: #000; margin-top: 7px; text-align: center; }

#business.robot .grid1 ul{ display: flex; justify-content: center; gap: 7px; }
#business.robot .grid1 ul li{ width: calc((100% - 14px) / 3); }

#business.robot .grid2 .pattern-box{ padding: 0; padding-left: 25px; display: flex; justify-content: flex-end; align-items: center; position: relative; }
#business.robot .grid2 .pattern-box h6{ position: absolute; top: 25px; left: 25px; }

#business.robot .grid3 ul{ display: flex; justif-content: center; }
#business.robot .grid3 ul li{ max-width: 50%; text-align: center; }

#business.robot .grid4 ul{ display: flex; flex-wrap: wrap; gap: 12px; text-align: center; }
#business.robot .grid4 ul li{ width: calc((100% - 36px) / 4); }
#business.robot .grid4 dl dt{ height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #50698E; font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1; }
#business.robot .grid4 dl dt span{ display: block; font-weight: 400; line-height: 1; }
#business.robot .grid4 dl dd{ font-size: 1.6rem; font-weight: 400; color: #000; }
#business.robot .grid4 dl dd img{ margin: 20px 0; }

@media screen and (max-width: 1500px){
	#business.robot .grid-box .pattern-box figure figcaption{ font-size: 1.7rem; }

	#business.robot .grid4 dl dt{ font-size: 1.7rem; }
}

@media screen and (max-width: 1450px){
	#business.robot .grid-box br{ display: none; }
}

@media screen and (max-width: 1400px){
	#business.robot .grid-box{ grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 1250px){
	#business.robot .grid-box .pattern-box{ padding: 15px; }
	#business.robot .grid-box .pattern-box figure figcaption{ font-size: 1.6rem; }

	#business.robot .grid2 .pattern-box h6{ top: 15px; left: 15px; }

	#business.robot .grid4 dl dt{ font-size: 1.6rem; }
	#business.robot .grid4 dl dd{ font-size: 1.5rem; }
}

@media screen and (max-width: 1200px){
	#business.robot .grid-box{ grid-template-columns: repeat(1, 1fr); }
	#business.robot .grid ul{ justify-content: center; text-align: center; }

	#business.robot .grid2 .pattern-box{ justify-content: center; }

	#business.robot .grid3 ul li{ width: 50%; }
}

@media screen and (max-width: 800px){
	#business.robot .grid4 ul li{ width: calc((100% - 12px) / 2); }
	#business.robot .grid4 dl dt{ height: 45px; }
}


/* 20250318 */

#quality .certificate.type2{ margin-top: 90px;}
#quality .certificate.type2 .btnBox{ background: transparent; display:flex; padding: 0;}
#quality .certificate.type2 .btnBox a{ background: #00387F; border:1px solid #00387F;  padding: 10px 20px; border-radius:10px; }
#quality .certificate.type2 .btnBox a:not(:last-child){ margin-right: 10px;}
#quality .certificate.type2 .btnBox a:not(.popView){ background: transparent; border:1px solid #999; color:#666; font-weight: 500; }