/* 메인 비주얼 이미지 */
/* 사업분야 */
#visual .bg1{ background: url("/img/sub/business_bg01.jpg") no-repeat center right / cover; }

/* 회사소개 */
#visual .bg2{ background: url("/img/sub/company_bg.jpg") no-repeat center right / cover; }
#visual .bg2[data-index="1"]{ background: url("/img/sub/company_bg_01.jpg") no-repeat center right / cover; }
#visual .bg2[data-index="3"]{ background: url("/img/sub/company_bg_03.jpg") no-repeat center right / cover; }
#visual .bg2[data-index="4"]{ background: url("/img/sub/company_bg_04.jpg") no-repeat center right / cover; }
#visual .bg2[data-index="5"]{ background: url("/img/sub/company_bg_05.jpg") no-repeat center right / cover; }
#visual .bg2[data-index="6"]{ background: url("/img/sub/company_bg_06.jpg") no-repeat center right / cover; }
#visual .bg2[data-index="7"]{ background: url("/img/sub/company_bg_07.jpg") no-repeat center right / cover; }

/* 제품소개 */
#visual .bg3{ background: url("/img/sub/product_bg.jpg") no-repeat center right / cover; }
#visual .bg3[data-index="1"]{ background: url("/img/sub/product_bg01_01.jpg") no-repeat center right / cover; }
#visual .bg3[data-index="2"]{ background: url("/img/sub/product_bg03.jpg") no-repeat center right / cover; }
#visual .bg3[data-index="3"]{ background: url("/img/sub/product_bg02_02.jpg") no-repeat center right / cover; }
/* #visual .bg3[data-index="4"]{ background: url("/img/sub/product_bg04_01.jpg") no-repeat center right / cover; } */
#visual .bg3[data-index="4"]{ background: url("/img/sub/product_bg05_01.jpg") no-repeat center right / cover; }
#visual .bg3[data-index="5"]{ background: url("/img/sub/product_bg_06.jpg") no-repeat center center / cover; }

/* 투자정보 */
/* #visual .bg4{ background: url("/img/sub/reference_bg01.jpg") no-repeat center right / cover; }
#visual .bg4[data-index="2"]{ background: url("/img/sub/reference_bg_01.jpg") no-repeat center center / cover; }
#visual .bg4[data-index="3"]{ background: url("/img/sub/reference_bg_03.jpg") no-repeat center center / cover; }
#visual .bg4[data-index="4"]{ background: url("/img/sub/reference_bg_04.jpg") no-repeat center right / cover; } */

#visual .bg4{ background: url("/img/sub/reference_bg_05.jpg") no-repeat center right / cover; }
#visual .bg4[data-index="2"]{ background: url("/img/sub/reference_bg_03.jpg") no-repeat center center / cover; }
#visual .bg4[data-index="3"]{ background: url("/img/sub/reference_bg_02.jpg") no-repeat center center / cover; }
#visual .bg4[data-index="4"]{ background: url("/img/sub/reference_bg_01.jpg") no-repeat center right / cover; }
#visual .bg4[data-index="6"]{ background: url("/img/sub/reference_bg_04.jpg") no-repeat center center / cover; }

/* 인재경영 */
#visual .bg5{ background: url("/img/sub/career_bg.jpg") no-repeat center right / cover; }
#visual .bg5[data-index="1"]{ background: url("/img/sub/career_bg_01.jpg") no-repeat center center / cover; }
#visual .bg5[data-index="2"]{ background: url("/img/sub/career_bg_02.jpg") no-repeat center center / cover; }
#visual .bg5[data-index="3"]{ background: url("/img/sub/career_bg_03.jpg") no-repeat center left / cover; }
#visual .bg5[data-index="4"]{ background: url("/img/sub/career_bg_04.jpg") no-repeat center center / cover; }

/* 개인정보처리방침 */
#visual.visual6{ padding-top: var(--headerH); }
#visual.visual6 .visual-wrap{ display: none; }

/* scrolldown */
#sub-wrap{ position: relative; }
#scrolldown{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 500; text-align: right; pointer-events: none; opacity: 1; transition: opacity 0.5s; }
#scrolldown .sticky{ position: sticky; top: calc(var(--headerH) + 50px); right: 0; margin-top: 205px; padding-bottom: 100px; }
#scrolldown .flex{ display: flex; flex-direction: column; align-items: flex-end; transform: translateX(40px); }
#scrolldown span{ display: inline-block; }
#scrolldown .txt{ font-size: 1.5rem; font-weight: 600; color: #333; writing-mode: tb; transform: scale(-1); margin-bottom: 15px; transition: color 0.5s; }
#scrolldown .icon{ width: 20px; height: 35px; border: 2px solid #000; border-radius: 10px; padding: 8px 6px; transition: border 0.5s; }
#scrolldown .icon span{ width: 4px; height: 4px; background: #000; border-radius: 50%; vertical-align: top;  will-change: transform; animation: scrollMouse 1.5s infinite; transition: background 0.5s; }

#scrolldown.opacity{ opacity: 0; }

#scrolldown.white .txt{ color: #fff; }
#scrolldown.white .icon{ border: 2px solid #fff; }
#scrolldown.white .icon span{ background: #fff; }

@keyframes scrollMouse{
	 0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        transform: translate(0, 10px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* visual */
#visual{ position: relative; z-index: 500; }
#visual .visual-wrap{ position: relative; z-index: 100; }
#visual *{ color: #fff; }
#visual .bg-wrap{ position: relative; overflow: hidden; }
#visual .bg-wrap .bg{ padding-bottom: 24.1725%; animation: bgScale 1s 0.3s both; }

#visual .text-box{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; }
#visual .text-box *{ color: #fff; }
#visual .text-box h2{ font-size: 7rem; font-weight: 700; letter-spacing: -0.02em; text-align: center; --spacing: 15px; animation: textSpacing 1s 0.3s both; }
#visual .text-box .scrolldown{ display: flex; justify-content: center; width: fit-content; position: relative; bottom: 0; left: 0; transform: translate(0, 0); margin: 0 auto; } 

@keyframes bgScale{
	0%{ transform: scale(1.1); }
	100%{ transform: scale(1); }
}

@keyframes textSpacing{
	0%{ opacity: 0; letter-spacing: var(--spacing); }
	100%{ opacity: 1; letter-spacing: -0.02em; }
}

/* lnb */
#lnb{ position: absolute; bottom: 0; left: 0; right: 0; padding-bottom: 75px; }
#lnb .inner > ul{ display: flex; justify-content: flex-end; align-items: center; gap: 15px; animation: textUp 1s 0.3s both; }
#lnb .inner > ul > li{ position: relative; }
#lnb .inner > ul > li::after{ content: ""; width: 4px; height: 4px; background: #D9D9D9; position: absolute; top: 50%; right: -14px; transform: translate(-100%, -50%); }
#lnb .inner > ul > li:last-of-type::after{ display: none; }
#lnb .home a{ display: inline-block; padding: 15px; }
#lnb button{ width: 160px; background: none; border: none; outline: none; padding: 0; font-family: var(--baseFont); font-size: 1.8rem; font-weight: 600; letter-spacing: -0.02em; text-align: left; padding: 15px; padding-right: 40px !important; position: relative; }
#lnb button::after{ content: url("/img/sub/lnb_arrow.svg"); position: absolute; top: 45%; right: 15px; transform: translateY(-50%) rotate(0); transition: top 0.5s, transform 0.5s; }
#lnb .local ul{ width: 100%; position: absolute; background: var(--mainColor); padding: 15px 0; border-radius: 10px; display: none; }
#lnb .local ul li{ overflow: hidden; }
#lnb .local ul li a{ display: block; font-size: 1.6rem; font-weight: 500; line-height: 1.3; opacity: 0.5; padding: 5px 20px; transition: opacity 0.5s; }

#lnb .local.on button::after{ top: 50%; transform: translateY(-50%) rotate(-180deg); }

.scrolldown{ bottom: 60px; }

@media screen and (hover: hover){
	#lnb .local ul li:hover a{ opacity: 1; text-decoration-line: underline; text-underline-position : under; }
}

@keyframes textUp{
	0%{ opacity: 0; transform: translateY(100px); }
	100%{ opacity: 1; transform: translateY(0); }
}

@media screen and (max-width: 1880px){
	/* scrolldown */
	#scrolldown .flex{ transform: translateX(10px); }

	/* common */
	.sub-content .w1740:not(.common){ padding-right: 30px; }
}

@media screen and (max-width: 1780px){
	/* common */
	.sub-content .w1740:not(.common){ padding-right: 40px; }
}

@media screen and (max-width: 1700px){
	/* visual */
	#visual .text-box h2{ font-size: 6rem; }

	/* lnb */
	#lnb{ padding-bottom: 50px; }
}

@media screen and (max-width: 1400px){
	/* visual */
	#visual .text-box{ top: 55%; }
}

@media screen and (max-width: 1280px){
	/* visual */
	#visual .bg-wrap .bg{ padding-bottom: 300px; }
	#visual .text-box{ top: 45%; }
	#visual .text-box h2{ font-size: 5rem; }

	/* lnb */
	#lnb{ padding-bottom: 10px; }
	#lnb .local ul{ padding: 10px 0; }
	#lnb button{ font-size: 1.7rem; }
	
	.scrolldown{ bottom: 130px; }
}

@media screen and (max-width: 900px){
	/* visual */
	#visual .text-box h2{ font-size: 4rem; --spacing: 10px; }
}


@media screen and (max-width: 700px){
	/* visual */
	#visual .text-box{ top: 50%; }

	/* lnb */
	#lnb{ display: none; }
}


/* common */
#header.scroll::after{ transform: translateX(-50%) scaleX(1); }
body.open #header::after{ opacity: 0; transition-delay: unset; }

#sub{ position: relative; }
.sub-content{ padding: 100px 0 150px; position: relative; }
h6.tit22{ font-size: 2.2rem; font-weight: 600; color: #222; margin-bottom: 20px; }

/* 간격 */
.pt150{ padding-top: 150px; }
.pb150{ padding-bottom: 150px; }
.pt100{ padding-top: 100px; }
.pb100{ padding-bottom: 100px; }
.pt80{ padding-top: 80px; }
.pb80{ padding-bottom: 80px; }

/* sec-title */
.sec-title.center{ text-align: center; }
.sec-title.mb60{ margin-bottom: 60px; }
.sec-title span{ display: block; font-family: var(--engFont); font-size: 1.8rem; font-weight: 600; color: var(--mainColor); /* text-transform: capitalize; */ margin-bottom: 10px; }	
.sec-title h3{ font-size: 6rem; font-weight: 700; color: #111; }
.sec-title h4{ font-size: 5rem; font-weight: 700; color: #111; }
.sec-title h5{ font-size: 4rem; font-weight: 700; color: #111; }
.sec-title .deco::after{ content: ""; display: inline-block; width: 10px; height: 10px; background: var(--mainColor); transform: scaleX(-1) skewX(22deg); margin-left: 5px; }
.sec-title p{ font-size: 2rem; font-weight: 400; color: #333; line-height: 1.7; }
.sec-title p:not(:only-child){ margin-top: 20px; }

/* sticky-tab */
.sticky-tab{ width: 100%; position: sticky; top: var(--headerH); left: 0; z-index: 100; background: #fff; border-bottom: 1px solid #EEE; }
.sticky-tab ul{ display: flex; flex-wrap: wrap; position: relative; }
.sticky-tab ul li{ display: flex; justify-content: center; align-items: center; height: 70px; font-family: var(--engFont); font-size: 1.8rem; font-weight: 400; color: #333 !important; text-align: center; position: relative; padding: 0 10px; transition: color 0.5s; cursor: pointer; }
.sticky-tab ul li::before{ content: ""; width: 1px; height: 10px; background: #DDD; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
.sticky-tab ul li:last-of-type::before{ display: none; } 
.sticky-tab ul li::after{ content: ""; width: 100%; height: 2px; background: var(--mainColor); position: absolute; bottom: -1px; left: 0; transform: scaleX(0); transition: transform 0.5s; }

.sticky-tab ul li.on{ font-weight: 600; color: var(--mainColor) !important; }
.sticky-tab ul li.on::after{ transform: scaleX(1); }

/* dot-tab */
.dot-tab{ overflow: hidden; margin-bottom: 40px; }
.dot-tab ul{ display: flex; flex-wrap: wrap; gap: 0 45px; margin-left: -20px; }
.dot-tab ul li{ font-size: 2.4rem; font-weight: 700; color: #CCC; padding: 20px; position: relative; }
.dot-tab ul li::after{ content: ""; width: 4px; height: 4px; background: var(--mainColor); position: absolute; top: 50%; right: calc(45px / -2); transform: translate(50%, -50%); }
.dot-tab ul li:last-of-type::after{ display: none; }
.dot-tab ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

.dot-tab ul li.on{ color: #333; }

/* round-btn */
.round-btn{ width: max-content; height: 70px; display: flex; justify-content: center; align-items: center; background: none; border: none; border-radius: 70px; font-family: var(--engFont); font-size: 1.8rem; font-weight: 600; color: #333 !important; padding: 0 70px; position: relative; overflow: hidden; transition: color 0.5s; --left: -40px; --right: calc(var(--left) * -2); }
.round-btn::before, .round-btn::after{ content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.round-btn::before{ width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #D9D9D9; border-radius: inherit; box-sizing: border-box; }
.round-btn::after{ width: 4px; padding-bottom: 4px; background: var(--mainColor); border-radius: 50%; opacity: 0; transition: all 0.5s; }
.round-btn span{ display: inline-block; position: relative; z-index: 10; transform: translateX(0); transition: transform 0.5s; }
.round-btn span::after{ content: url("/img/sub/round_btn.svg"); position: absolute; top: 50%; right: 0; z-index: -1; transform: translateY(-50%); opacity: 0; transition: transform 0.5s, opacity 0.5s; }

.round-btn.white{ color: #fff !important; }


/* 스크롤바 커스텀 */
.scroll-x{ overflow-x: auto; }
.scroll-y{ overflow-y: auto; }
.scroll-y::-webkit-scrollbar, .scroll-x::-webkit-scrollbar{ width: 41px; height: 41px; }
.scroll-y::-webkit-scrollbar-thumb, .scroll-x::-webkit-scrollbar-thumb{ width: 41px; height: 41px; background: #AAA; border-radius: 60px; background-clip: padding-box; border: 18px solid transparent; }
.scroll-y::-webkit-scrollbar-track, .scroll-x::-webkit-scrollbar-track{  width: 41px; height: 41px; background: #f1f1f1; background-clip: padding-box; border: 10px; border: 20px solid transparent; }


/* dot-list */
.dot-list > *:not(dt){ font-size: 1.8rem; font-weight: 400; color: #666; padding-left: 15px; position: relative; }
.dot-list > *:not(:last-of-type){ margin-bottom: 20px; } 
.dot-list > *::before{ content: ""; width: 4px; height: 4px; background: #000; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

.dot-list > dt::before{ display: none; }
.dot-list > *.none{ padding-left: 0; }
.dot-list > *.none::before{ display: none; }

@media screen and (hover: hover){
	.round-btn:hover{ color: #fff !important; }
	.round-btn:hover::after{ width: 100%; padding-bottom: 100%; opacity: 1; }
	.round-btn:hover span{ transform: translateX(var(--left)); }
	.round-btn:hover span::after{ transform: translate(calc(var(--right)), -50%); opacity: 1; }
}


@media screen and (max-width: 1700px){
	/* common */
	.sub-content{ padding: 100px 0 120px; }
	h6.tit22{ font-size: 2rem; }

	/* 간격 */
	.pt150{ padding-top: 120px; }
	.pb150{ padding-bottom: 120px; }
	.pt100{ padding-top: 80px; }
	.pb100{ padding-bottom: 80px; }
	.pt80{ padding-top: 60px; }
	.pb80{ padding-bottom: 60px; }

	/* sec-title */
	.sec-title span{ font-size: 1.7rem; }	
	.sec-title h3{ font-size: 5rem; }
	.sec-title h4{ font-size: 4rem; }
	.sec-title h5{ font-size: 3.5rem; }
	.sec-title p{ font-size: 1.8rem; }

	/* sticky-tab */
	.sticky-tab ul li{ font-size: 1.7rem; height: 60px; }

	/* dot-tab */
	.dot-tab ul li{ font-size: 2.2rem; }

	/* round-btn */
	.round-btn{ height: 65px; padding: 0 50px; }
}

@media screen and (max-width: 1280px){
	/* common */
	.sub-content{ padding: 60px 0 100px; }
	h6.tit22{ font-size: 1.9rem; }

	/* 간격 */
	.pt150{ padding-top: 100px; }
	.pb150{ padding-bottom: 100px; }
	.pt100{ padding-top: 60px; }
	.pb100{ padding-bottom: 60px; }
	.pt80{ padding-top: 50px; }
	.pb80{ padding-bottom: 50px; }

	/* sec-title */
	.sec-title.mb60{ margin-bottom: 30px; }
	.sec-title span{ font-size: 1.6rem; margin-bottom: 5px; }	
	.sec-title h3{ font-size: 4rem; }
	.sec-title h4{ font-size: 3.5rem; }
	.sec-title h5{ font-size: 3rem; }
	.sec-title p{ font-size: 1.7rem; }
	.sec-title p:not(:only-child){ margin-top: 10px; }

	/* sticky-tab */
	.sticky-tab ul li{ font-size: 1.6rem; height: 50px; }

	/* dot-tab */
	.dot-tab{ margin-bottom: 20px; }
	.dot-tab ul{ gap: 0 20px; }
	.dot-tab ul li{ font-size: 2rem; }
	.dot-tab ul li::after{ right: -10px; }

	/* round-btn */
	.round-btn{ height: 60px; font-size: 1.7rem; padding: 0 40px; }

	/* dot-list */
	.dot-list > *:not(dt){ font-size: 1.7rem; }
	.dot-list > *:not(:last-of-type){ margin-bottom: 10px; } 
}

@media screen and (max-width: 900px){
	/* sec-title */	
	.sec-title span{ font-size: 1.5rem; }	
	.sec-title h3{ font-size: 3.5rem; }
	.sec-title h4{ font-size: 3rem; }
	.sec-title h5{ font-size: 2.5rem; }

	/* sticky-tab */
	.sticky-tab ul li{ font-size: 1.5rem; padding: 0 5px; }

	/* dot-tab */
	.dot-tab ul li{ font-size: 1.8rem; }
}

/* imgBg-list */
.imgBg-list{ background: #222; }
.imgBg-list .bg{ padding-bottom: 21.05%; }
.imgBg-list .sec-title{ margin-bottom: 30px; }
.imgBg-list .sec-title *{ color: #fff !important; }
.imgBg-list ul{ display: flex; flex-wrap: wrap; gap: 30px; }
.imgBg-list ul li{ width: calc((100% - 60px) / 3); background: #fff; padding: 50px 40px; border-radius: 20px; }
.imgBg-list dl{ margin-top: 40px; }
.imgBg-list dl dt{ font-size: 2.2rem; font-weight: 600; color: #333; }
.imgBg-list dl dd{ font-size: 1.8rem; font-weight: 400; color: #666; line-height: 1.6666; margin-top: 15px; }

@media screen and (max-width: 1700px){
	.imgBg-list ul li{ padding: 40px 30px; }
	.imgBg-list dl dt{ font-size: 2rem; }
	.imgBg-list dl dd{ font-size: 1.7rem; }
}

@media screen and (max-width: 1280px){
	.imgBg-list dl{ margin-top: 20px; }
	.imgBg-list dl dt{ font-size: 1.8rem; }
	.imgBg-list dl dd{ font-size: 1.6rem; margin-top: 10px; }
}

@media screen and (max-width: 1000px){
	.imgBg-list ul li{ width: calc((100% - 30px) / 2); }
}

@media screen and (max-width: 600px){
	.imgBg-list ul{ gap: 20px; }
	.imgBg-list ul li{ width: 100%; padding: 30px 20px; }
}


/* 사업분야 */
#lnb.lnb1 .local01::after{ display: none; }
#lnb.lnb1 .local02{ display: none; }

/* 나머지 css는 business.css에 */



/* 회사소개 - CEO 메시지 */
#ceo{ padding-bottom: 0; overflow: hidden; }
#ceo .intro{ position: relative; /* margin-top: 35px; */ }
#ceo .intro .circle{ position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); mix-blend-mode: exclusion; }
#ceo .intro .circle img{ animation: rotate360 10s linear infinite; }
#ceo .intro .bg-img{ background: url("/img/sub/company/ceo_bg.jpg") no-repeat center center / cover; /* color: #fff; */ color: #222; text-align: center; padding: 10.35% 30px; position: relative; overflow: hidden; border-radius: 20px; }
#ceo .intro .bg-img h4{ font-size: 5rem; font-weight: 600; line-height: 1.4; }

@keyframes rotate360{
	0%{ transform: rotate(0); }
	100%{ transform: rotate(360deg); }
}

#ceo .message .flex-box{ display: flex; }
#ceo .message .tit{ width: 600px; }
#ceo .message .tit h5{ font-size: 4rem; font-weight: 600; color: #111; line-height: 1.5; }
#ceo .message .content{ width: calc(100% - 600px); }
#ceo .message .content p{ font-size: 1.8rem; font-weight: 400; color: #333; line-height: 1.6666; }
#ceo .message .content p:not(:last-of-type){ margin-bottom: 25px; }
#ceo .message .content strong{ display: block; font-size: 2rem; font-weight: 600; color: #222; margin-top: 60px; }

#ceo .underlogo{ text-align: right; overflow: hidden; }
#ceo .underlogo .inner{ max-width: 1740px; width: 100%; margin: 0 auto; }

@media screen and (max-width: 1760px){
	#ceo .message .content br{ display: none; }
	#ceo .underlogo .inner{ padding-left: 20px; }
}

@media screen and (max-width: 1700px){
	#ceo .intro .bg-img h4{ font-size: 4rem; }

	#ceo .message .tit{ width: 500px; }
	#ceo .message .tit h5{ font-size: 3.5rem; }
	#ceo .message .content{ width: calc(100% - 500px); }
	#ceo .message .content strong{ font-size: 1.9rem; }
}

@media screen and (max-width: 1400px){
	#ceo .intro .circle{ width: 100px; }
}

@media screen and (max-width: 1280px){
	#ceo .intro .bg-img h4{ font-size: 3.5rem; }

	#ceo .message .tit{ width: 400px; }
	#ceo .message .tit h5{ font-size: 3rem; }
	#ceo .message .content{ width: calc(100% - 400px); }
	#ceo .message .content p{ font-size: 1.7rem; }
	#ceo .message .content p:not(:last-of-type){ margin-bottom: 15px; }
	#ceo .message .content strong{ font-size: 1.8rem; margin-top: 40px; }
}

@media screen and (max-width: 1000px){
	#ceo .message .flex-box{ flex-direction: column; }
	#ceo .message .tit{ width: 100%; }
	#ceo .message .tit br{ display: none; }
	#ceo .message .content{ width: 100%; margin-top: 20px; }
}

@media screen and (max-width: 900px){
	#ceo .intro .bg-img h4{ font-size: 3rem; }

	#ceo .message .tit h5{ font-size: 2.5rem; }
}

@media screen and (max-width: 850px){
	#ceo .intro .bg-img{ padding: 17% 30px; }
}

@media screen and (max-width: 650px){
	#ceo .intro .bg-img br{ display: none; }
}


/* 회사소개 - 경영이념 */
#idea{ padding-bottom: 0; }
#idea .sec-title{ text-align: center; }

#videoBg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;; margin-top: -460px; }
#videoBg .sticky{ width: 100%; height: 100vh; position: sticky; top: 0; left: 0; }
#videoBg video{ width: 100%; height: 100vh; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }

#idea .core, #idea .share, #idea .share{ background: #fff; }

#idea .motion{ position: relative; z-index: 10; padding-bottom: 30vh; }
#idea .motion .sec{ display: flex; justify-content: center; align-items: center; /* min-height: 100vh; padding: 50px 0; */ padding: 80px 0; opacity: 1 !important; }
#idea .motion .sec:first-of-type{ min-height: auto; padding-top: 0; }
#idea .motion .center{ width: 100%; }
#idea .motion .center *{ color: #fff !important; }
#idea .motion .center span{ opacity: 0; letter-spacing: 15px; transition: opacity 1s, letter-spacing 1s; }
#idea .motion .center h4{ line-height: 1.4333; margin-top: 25px; opacity: 0; transform: translateY(100px); transition: opacity 1s, transform 1s; transition-delay: 0.2s; }
#idea .motion .center p{ font-size: 2rem; font-weight: 400; line-height: 1.7; margin-top: 25px; opacity: 0; transform: translateY(100px); transition: opacity 1s, transform 1s; transition-delay: 0.4s; }
#idea .motion .dl{ max-width: 1200px; margin: 0 auto; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 20px; padding: 50px; opacity: 0; transform: translateY(100px); transition: opacity 1s, transform 1s; transition-delay: 0.6s;  }
#idea .motion .dl .sec-title{ margin-bottom: 40px; }
#idea .motion .dl .sec-title h4{ margin-top: 0; }
#idea .motion .dl dl{ color: #fff; }
#idea .motion .dl dl:not(:last-of-type){ margin-bottom: 50px; }
#idea .motion .dl dl dt{ font-size: 3rem; font-weight: 600; margin-bottom: 20px; }
#idea .motion .dl dl dd{ font-size: 1.8rem; font-weight: 400; line-height: 1.5; position: relative; padding-left: 10px; }
#idea .motion .dl dl dd::before{ content: ""; width: 3px; height: 3px; background: #fff; border-radius: 50%; position: absolute; top: calc(1.5em / 2); left: 0; transform: translateY(-50%); }
#idea .motion .dl dl dd:not(:last-of-type){ margin-bottom: 10px; }

#idea .motion .center .logos{ display: flex; justify-content: center; }
#idea .motion .center .logos img{ width: auto; height: 70px; transition: margin 1s; }
#idea .motion .center .logos img:not(:last-of-type){ margin-right: 50px; }

#idea .motion .aos-animate .center span{ opacity: 1; letter-spacing: -0.02em; }
#idea .motion .aos-animate .center h4, #idea .motion .aos-animate .center p, #idea .motion .aos-animate .dl{ opacity: 1; transform: translateY(0); }
#idea .motion .aos-animate .center .logos img:not(:last-of-type){ margin-right: -20px; }

#idea .core ul{ display: flex; flex-wrap: wrap; gap: 60px; }
#idea .core ul li{ width: calc((100% - 120px) / 3); position: relative; }
#idea .core ul li figure{ width: 100%; position: relative; overflow: hidden; /* padding-bottom: 111%; */ padding-bottom: 85%; border-radius: 20px; }
#idea .core ul li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#idea .core ul li .text-box{ position: absolute; left: 0; right: 0; bottom: 0; padding: 60px; color: #fff; }
#idea .core ul li .text-box h5{ font-size: 4rem; font-weight: 700; }
#idea .core ul li .text-box span{ display: block; font-family: var(--engFont); font-size: 2rem; font-weight: 600; color: var(--mainColor); letter-spacing: 0; text-transform: uppercase; margin: 5px 0 25px; }
#idea .core ul li .text-box p{ font-size: 1.8rem; font-weight: 400; line-height: 1.5; }

#idea .share{ overflow: hidden; }
#idea .share ul{ max-width: 1310px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; }
#idea .share ul li{ width: calc((100% - 110px) / 4); margin-right: -20px; position: relative; color: #333; }
#idea .share ul li:first-of-type{ margin-right: 150px; }
#idea .share ul li:last-of-type{ margin-right: 0; }
#idea .share ul li::after{ content: ""; width: 150px; height: 2px; background: var(--mainColor); position: absolute; top: 50%; right: 0; transform: translate(100%, -50%) scaleX(0); transform-origin: left; transition: transform 1s; }
#idea .share ul li.aos-animate::after{ transform: translate(100%, -50%) scaleX(1); }
#idea .share ul li:not(:first-of-type)::after{ display: none; }
#idea .share ul li .circle{ width: 100%; padding-bottom: calc(100% - 4px); border: 2px solid var(--mainColor); border-radius: 50%; }

#idea .share ul li.bg{ color: #fff; }
#idea .share ul li.bg .circle{ background: var(--mainColor); }
#idea .share ul li.dashed .circle{ border: 2px dashed var(--mainColor); }

#idea .share ul li .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); padding: 0 20px; }
#idea .share ul li .text dl dt{ font-size: 3rem; font-weight: 700; margin-bottom: 15px; }
#idea .share ul li .text dl dd{ font-size: 1.8rem; font-weight: 300; line-height: 1.5555; }
#idea .share ul li .text p{ font-size: 2rem; font-weight: 500; margin-top: 30px; }

@media screen and (max-width: 1700px){
	#idea .motion .center p{ font-size: 1.8rem; }
	#idea .motion dl dt{ font-size: 2.6rem; }
	#idea .motion dl dd{ font-size: 1.7rem; }
	#idea .motion .center .logos img{ height: 60px; }

	#idea .core ul li .text-box{ padding: 40px; }
	#idea .core ul li .text-box h5{ font-size: 3.5rem; }
	#idea .core ul li .text-box span{ font-size: 1.8rem; }
	#idea .core ul li .text-box p{ font-size: 1.7rem; }

	#idea .share ul li .text dl dt{ font-size: 2.4rem; }
	#idea .share ul li .text p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1350px){
	#idea .core ul li br{ display: none; }
}

@media screen and (max-width: 1280px){
	#idea .motion{ padding: 0; }
	#idea .motion .center h3{ margin-top: 15px; }
	#idea .motion .center p{ font-size: 1.7rem; margin-top: 15px; }
	#idea .motion .dl{ padding: 30px; }
	#idea .motion .dl .sec-title{ margin-bottom: 30px; }
	#idea .motion .dl dl dt{ font-size: 2rem; margin-bottom: 10px; }
	#idea .motion .dl dl dd{ font-size: 1.6rem; }
	#idea .motion .center .logos img{ height: 50px; }
	#idea .motion .center .logos img:not(:last-of-type){ margin-right: 30px; }
	#idea .motion .aos-animate .center .logos img:not(:last-of-type){ margin-right: -15px; }

	#idea .core ul{ gap: 30px; }
	#idea .core ul li{ width: calc((100% - 60px) / 3); }
	#idea .core ul li .text-box{ padding: 30px; }
	#idea .core ul li .text-box h5{ font-size: 3rem; }
	#idea .core ul li .text-box span{ font-size: 1.7rem; margin: 5px 0 10px; }
	#idea .core ul li .text-box p{ font-size: 1.6rem; }

	#idea .share ul li .text dl dt{ font-size: 2.2rem; margin-bottom: 10px; }
	#idea .share ul li .text dl dd{ font-size: 1.7rem; }
	#idea .share ul li .text p{ font-size: 1.7rem; margin-top: 15px; }
}

@media screen and (max-width: 1200px){
	#idea .share{ overflow: visible; }
	#idea .share ul{ max-width: 800px; }
	#idea .share ul li{ width: calc((100% + 40px) / 3); transform: translateY(var(--aosPlus)) !important; }
	#idea .share ul li:first-of-type{ margin: 0 calc((100% - ((100% + 40px) / 3)) / 2) 80px; }
	#idea .share ul li::after{ width: 2px; height: 80px; top: 100%; right: 50%; transform: translate(50%, 0) scaleY(0); transform-origin: top; }

	#idea .share ul li.aos-animate{ transform: translateY(0) !important; }
	#idea .share ul li.aos-animate::after{ transform: translate(50%, 0) scaleY(1); }
}

@media screen and (max-width: 1100px){
	#idea .core ul{ gap: 20px; }
	#idea .core ul li{ width: calc((100% - 20px) / 2); }
	#idea .core ul li .text-box{ padding: 25px; }
	#idea .core ul li .text-box h5{ font-size: 2.5rem; }
}

@media screen and (max-width: 900px){
	#idea .motion dl br{ display: none; }
	#idea .motion .center .logos img{ height: 30px; }
	#idea .motion .aos-animate .center .logos img:not(:last-of-type){ margin-right: -5px; }
}

@media screen and (max-width: 650px){
	#idea .motion .center br{ display: none; }

	#idea .core ul li{ width: 100%; }
	#idea .core ul li br{ display: block; }
	#idea .core ul li figure{ position: absolute; height: 100%; padding-bottom: 0; top: 0; left: 0; z-index: -1; }
	#idea .core ul li figure::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: 0; }
	#idea .core ul li .text-box{ position: static; padding-top: 50px; }

	#idea .share ul{ max-width: 250px; }
	#idea .share ul li{ width: 100%; margin-right: 0; margin-bottom: -20px; }
	#idea .share ul li:first-of-type{ margin: 0 0 40px; }
	#idea .share ul li:last-of-type{ margin-bottom: 0; }
	#idea .share ul li::after{ height: 40px; }
}


/* 회사소개 - 연혁 */
#history{ padding-top: 0; }
#history .sticky-tab{ top: 0; }
#history .sticky-tab ul li{ width: calc(100% / 3); }
#history .sec-title{ margin-bottom: 70px; overflow: hidden; }
#history .sec-title span{ font-size: 2rem; margin-bottom: 0; margin-top: 20px; }

#history .flex-box{ display: flex; position: relative; }
#history .flex-box > div{ width: 50%; }

#history .img{ padding-right: 100px; opacity: 1 !important; }
#history .sticky{ position: sticky; top: calc(var(--headerH) + 50px); left: 0; }
#history .figure{ position: relative; }
#history .figure::after{ content: ""; width: calc(100% + 20px); height: calc(100% + 20px); background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scaleX(1); transform-origin: left; transition: transform 1.5s; }
#history .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 64.9%; border-radius: 20px; }
#history .figure figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#history .img.aos-animate .figure::after{ transform: translate(-50%, -50%) scaleX(0); }

#history .content{ margin-top: 181px; padding-left: 100px; position: relative; }
#history .content dl{ display: flex; flex-wrap: wrap; justify-content: flex-end; }
#history .content dl:not(:last-of-type){ margin-bottom: 60px; }
#history .content dl dt, #history .content dl dd::before{ font-family: var(--engFont); font-size: 2rem; font-weight: 600; color: #111; letter-spacing: 0; }
#history .content dl dt{ width: 100px; }
#history .content dl dd{ width: calc(100% - 100px); position: relative; padding-left: 45px; }
#history .content dl dd:not(:last-of-type){ margin-bottom: 30px; }
#history .content dl dd::before{ content: attr(data-moth); position: absolute; top: 0; left: 0; }
#history .content dl dd p{ font-size: 1.8rem; font-weight: 400; color: #333; padding-top: 2px; }
#history .content dl dd p:not(:last-of-type){ margin-bottom: 15px; }

#history .bar{ width: 3px !important; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; }
#history .bar::before{ content: ""; width: 1px; height: 100%; background: #DDD; position: absolute; top: 0; left: 50%; z-index: -1; transform: translateX(-50%); }
#history .bar .dot{ width: 14px; height: 14px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 0; left: 50%; z-index: 10; transform: translate(-50%, -50%); }
#history .bar .dot::before{ content: ""; width: 30px; height: 30px; background: inherit; border-radius: 50%; opacity: 0.1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#history .bar > div{ width: 100%; height: 0; max-height: 100% !important; background: var(--mainColor); border-radius: 50px; }

@media screen and (max-width: 1700px){
	#history .sec-title{ margin-bottom: 40px; }
	#history .sec-title span{ font-size: 1.8rem; }

	#history .content{ margin-top: 135px; }
	#history .content dl dt, #history .content dl dd::before{ font-size: 1.8rem; }
	#history .content dl dd p{ font-size: 1.7rem; padding-top: 0; }
}

@media screen and (max-width: 1500px){
	#history .img{ padding-right: 60px; }
	#history .content{ padding-left: 60px; } 
}

@media screen and (max-width: 1280px){
	#history .sec-title{ margin-bottom: 20px; }
	#history .sec-title span{ font-size: 1.7rem; margin-top: 10px; }

	#history .content{ margin-top: 87px; }
	#history .content dl:not(:last-of-type){ margin-bottom: 40px; }
	#history .content dl dt, #history .content dl dd::before{ font-size: 1.7rem; }
	#history .content dl dt{ width: 70px; }
	#history .content dl dd{ width: calc(100% - 70px); }
	#history .content dl dd:not(:last-of-type){ margin-bottom: 20px; }
	#history .content dl dd p{ font-size: 1.6rem; padding-top: 2px; }
	#history .content dl dd p:not(:last-of-type){ margin-bottom: 10px; }

	#history .bar .dot{ width: 10px; height: 10px; }
	#history .bar .dot::before{ width: 20px; height: 20px; }
}

@media screen and (max-width: 1200px){
	#history .flex-box > div.img{ width: 40%; }
	#history .flex-box > div.content{ width: 60%; } 
}

@media screen and (max-width: 1000px){
	#history .flex-box{ flex-direction: column; }
	#history .flex-box > div.img{ width: 100%; padding-right: 0; margin-bottom: 30px; }
	#history .flex-box > div.content{ width: 100%; padding-left: 30px; } 
	
	#history .figure figure{ padding-bottom: 45%; }

	#history .content{ margin-top: 0; }
	#history .content dl dt{ width: 60px; }
	#history .content dl dd{ width: calc(100% - 60px); padding-left: 35px; }
}


/* 회사소개 - 사업장 안내 */
#location{ background: url("/img/sub/company/location_bg.svg") no-repeat top center / contain; overflow: hidden; }
#location .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#location .flex-box > div{ width: calc((100% - 100px) / 2); }
#location .flex{ display: flex; justify-content: space-between; align-items: center; gap: 0 50px; }
#location .sec-title{ width: calc(100% - 450px); }
#location .sec-title h4{ font-weight: 600; }
#location .flex .img{ width: 400px; }
#location .flex .img figure{ width: 100%; padding-bottom: 53.3%; position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.20); }
#location .flex .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#location .content ul{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin-top: 60px; }
#location .content ul li{ width: calc((100% - 30px) / 2); background: #fff; border: 1px solid #EEE; border-radius: 20px; padding: 40px; }
#location .content dl{ margin-top: 40px; }
#location .content dl dt{ font-size: 2.2rem; font-weight: 600; color: #333; margin-bottom: 10px; }
#location .content dl dt span{ display: block; font-family: var(--engFont); font-size: 1.5rem; font-weight: 600; color: #D6D6D6; margin-bottom: 10px; }
#location .content dl dd{ font-size: 1.8rem; font-weight: 400; color: #666; }

#location .map .local{ position: relative; }
#location .map .iframe{ position: relative; overflow: hidden; padding-bottom: 73.2%; border-radius: 20px; }
#location .map .iframe iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1700px){
	#location .content ul{ margin-top: 40px; }
	#location .content ul li{ padding: 30px; }
	#location .content dl{ margin-top: 30px; }
	#location .content dl dt{ font-size: 2rem; }
	#location .content dl dd{ font-size: 1.7rem; }
}

@media screen and (max-width: 1500px){
	#location .sec-title{ width: calc(100% - 350px); }
	#location .flex .img{ width: 300px; }
}

@media screen and (max-width: 1400px){
	#location .flex-box > div{ width: calc((100% - 50px) / 2); }
}

@media screen and (max-width: 1280px){
	#location .content ul{ margin-top: 30px; }
	#location .content dl{ margin-top: 20px; }
	#location .content dl dt{ font-size: 1.8rem; }
	#location .content dl dt span{ margin-bottom: 5px; }
	#location .content dl dd{ font-size: 1.6rem; }
}

@media screen and (max-width: 1200px){
	#location .flex-box{ flex-direction: column-reverse; }
	#location .flex-box > div{ width: 100%; }

	#location .content{ margin-top: 30px; }
	#location .content ul li{ padding: 25px; }

	#location .map .iframe{ padding-bottom: 350px; }
}

@media screen and (max-width: 750px){
	#location .content ul li{ width: calc((100% - 20px) / 2); }	
}

@media screen and (max-width: 700px){
	#location .flex{ gap: 0 30px; }
	#location .sec-title{ width: calc(100% - 300px); }
	#location .flex .img{ width: 250px; }
}

@media screen and (max-width: 550px){
	#location .flex{ flex-direction: column; }
	#location .sec-title{ width: 100%; }
	#location .flex .img{ width: 100%; margin-top: 30px; }

	#location .content ul{ margin-top: 20px; }
}



/* 회사소개 - 품질경영 */
@media screen and (max-width: 850px){
	#quality br{ display: none; }
}


/* 회사소개 - EHS경영 */
#ehs{ overflow: hidden; }
#ehs .imgBg-list .bg{ background: url("/img/sub/company/ehs_bg.jpg") no-repeat center bottom / cover; padding-bottom: 21.05%; }

@media screen and (max-width: 1500px){
	#ehs .imgBg-list br{ display: none; }
}

@media screen and (max-width: 1150px){
	#ehs br{ display: none; }
}


/* 회사소개 - CI */
#ci{ overflow: hidden; }
#ci .download .flex-box{ display: flex; flex-wrap: wrap; justify-content: space-between; }
#ci .download .half{ width: calc((100% - 60px) / 2); }
#ci .download .half .tit22{ color: #333; }
#ci .download .half figure{ width: 100%; height: 320px; display: flex; justify-content: center; align-items: center; background: #fff url("/img/sub/company/ci_pattern.png") repeat center center / auto; padding: 30px 50px; border: 1px solid #DDD; border-radius: 20px; }
#ci .download .half figure img{ width: auto; height: auto;  }
#ci .download .right{ margin-top: 30px; }
#ci .download .round-btn{ padding: 0 50px; --left: -20px; margin-left: auto; }

#ci .color .line:not(:last-of-type){ margin-bottom: 60px; }
#ci .color .flex-box{ display: flex; flex-wrap: wrap; gap: 30px; }
#ci .color .box{ width: calc((100% - 120px) / 5); padding: 30px; border-radius: 20px; background: #193296; }
#ci .color dl *{ font-family: var(--engFont); color: #fff; letter-spacing: 0; }
#ci .color dl dt{ font-size: 1.8rem; font-weight: 600; margin-bottom: 30px; }
#ci .color dl dd p{ display: flex; gap: 6px; }
#ci .color dl dd p:not(:last-of-type){ margin-bottom: 10px; }
#ci .color dl dd span{ display: inline-block; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 30px; font-size: 1.5rem; font-weight: 300; padding: 5px 15px; }

#ci .color .box.tGray dl *{ color: #666; }
#ci .color .box.tGray dl dd span{ border: 1px solid #DDD; }

@media screen and (max-width: 1740px){
	#ci .color .box{ padding: 30px 20px; }
	#ci .color dl dt{ font-size: 1.7rem; margin-bottom: 20px; }
}

@media screen and (max-width: 1700px){
	#ci .download .half figure{ height: 280px; }
	#ci .download .half figure img{ max-height: 100px; }
}

@media screen and (max-width: 1650px){
	#ci .color .box{ width: calc((100% - 60px) / 3); }
}

@media screen and (max-width: 1400px){
	#ci .download .half{ width: calc((100% - 30px) / 2); }

	#ci .color .box{ padding: 20px; }
}

@media screen and (max-width: 1280px){
	#ci br{ display: none; }
	#ci .download .half figure{ height: 230px; }
	#ci .download .half figure img{ max-height: 80px; }

	#ci .color .line:not(:last-of-type){ margin-bottom: 40px; }
	#ci .color .flex-box{ gap: 20px; }
	#ci .color .box{ width: calc((100% - 40px) / 3); }
	#ci .color dl dt{ font-size: 1.6rem; margin-bottom: 10px; } 
	#ci .color dl dd span{ font-size: 1.4rem; padding: 5px 10px; }
}

@media screen and (max-width: 900px){
	#ci .download .half{ width: 100%; }
	#ci .download .half .tit22{ margin-bottom: 10px; }
	#ci .download .half:not(:last-of-type){ margin-bottom: 40px; }
	#ci .download .half figure{ height: 150px; padding: 30px; }
	#ci .download .half figure img{ max-height: 60px; }

	#ci .color .box{ width: calc((100% - 20px) / 2); }
}

@media screen and (max-width: 600px){
	#ci .color .box{ width: 100%; }
}


/* 제품소개 - 리스트 (공통) */
#product{ overflow: hidden; }
#product .sec-title{ margin-bottom: 20px; }
#product .sec-title h5{ font-size: 3.6rem; font-weight: 600; color: #222; }

#product .gray-box{ background: #F9F9F9; border-radius: 20px; padding: 60px; }
#product .flex-box{ display: flex; justify-content: space-between; }
#product .flex-box > div{ width: calc((100% - 60px) / 2); }
#product .half dl:not(:last-of-type){ margin-bottom: 30px; }
#product dl *{ font-family: var(--engFont); }
#product dl dt{ font-size: 2rem; font-weight: 600; color: #333; margin-bottom: 20px; }
#product dl dd, #product dl dd *{ font-size: 1.6rem; font-weight: 400; color: #666; }
#product dl dd{ position: relative; padding-left: 15px; }
#product dl dd:not(:last-of-type){ margin-bottom: 15px; }
#product dl dd::before{ content: ""; width: 4px; height: 4px; background: #000; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#product dl dd p{ color: #666; padding-left: 10px; position: relative; margin-top: 10px; }
#product dl dd p::before{ content: "-"; position: absolute; top: 0; left: 0; }

#product .gray-box > dl dd{ font-size: 1.8rem; color: #333; }

#product dl dd.none{ padding-left: 0; }
#product dl dd.none::before{ display: none; }

#product .table::-webkit-scrollbar{ width: 21px; height: 21px; }
#product .table::-webkit-scrollbar-thumb{ background: #777; border-radius: 60px; background-clip: padding-box; border: 8px solid transparent; }
#product .table::-webkit-scrollbar-track{ background: #f1f1f1; background-clip: padding-box; border: 10px; border: 10px solid transparent; }
#product .table table{ border-top: 2px solid #000; }
#product .table table tr{ border-bottom: 1px solid #DDD; }
#product .table table th{ font-weight: 600; color: #333; padding: 20px 5px; position: relative; }
#product .table table thead th::after{ content: ""; width: 1px; height: 12px; background: #DDD; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
#product .table table thead tr th:last-of-type::after{ display: none; }
#product .table table td{ padding: 30px 10px; text-align: center; }

#product .product-list ul{ display: flex; flex-wrap: wrap; gap: 60px 40px; }
#product .product-list ul li{ width: calc((100% - 120px) / 4); position: relative; }
#product .product-list ul li .border{ border: 1px solid #DDD; border-radius: 20px; position: relative; }
#product .product-list ul li .border::after{ content: ""; width: calc(100% + 2px); height:  calc(100% + 2px); border: 2px solid var(--mainColor); border-radius: inherit; box-sizing: border-box; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s; }
#product .product-list ul li figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 100%; border-radius: inherit; }
#product .product-list ul li figure img{ max-width: calc(100% - 60px); max-height: calc(100% - 60px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#product .product-list ul li .text{ margin-top: 25px; }
#product .product-list ul li .text span{ display: inline-block; border: 1px solid #000; border-radius: 358px; font-size: 1.4rem; font-weight: 500; color: #333; padding: 6px 15px; }
#product .product-list ul li .text h6{ font-size: 2.2rem; font-weight: 600; color: #222; margin: 15px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#product .product-list ul li .text p{ display: -webkit-box; height: 3.5em; font-size: 1.6rem; font-weight: 400; color: #666; letter-spacing: -0.02em; line-height: 1.75; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }

#product .product-list ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

@media screen and (hover: hover){
	#product .product-list ul li:hover .border::after{ opacity: 1; }
}

@media screen and (max-width: 1700px){
	#product .sec-title h5{ font-size: 3.2rem; }

	#product dl dt{ font-size: 1.8rem; }

	#product .product-list ul li .text{ margin-top: 15px; }
	#product .product-list ul li .text h6{ font-size: 2rem; margin: 10px 0 5px; }
}

@media screen and (max-width: 1500px){
	#product  .sec-title br{ display: none; }

	#product .gray-box{ padding: 30px; }
	#product .table *{ font-size: 1.5rem; }
	#product .table table th{ padding: 10px 5px; }
	#product .table table td{ padding: 20px 10px; }

	#product .product-list ul{ display: flex; flex-wrap: wrap; gap: 60px 25px; }
	#product .product-list ul li{ width: calc((100% - 75px) / 4); }
}

@media screen and (max-width: 1300px){
	#product .flex-box{ flex-direction: column; }
	#product .flex-box > div{ width: 100%; }
	#product .flex-box > div:not(:last-of-type){ margin-bottom: 30px; }
}

@media screen and (max-width: 1280px){
	#product .sec-title h5{ font-size: 3rem; }

	#product dl dt{ font-size: 1.7rem; margin-bottom: 10px; }
	#product dl dd:not(:last-of-type){ margin-bottom: 10px; }
	#product dl dd p{ margin-top: 7px; }

	#product .gray-box > dl dd{ font-size: 1.7rem; }

	#product .product-list ul li .text span{ padding: 4px 10px; }
	#product .product-list ul li .text h6{ font-size: 1.8rem; }
}

@media screen and (max-width: 1250px){
	#product .product-list ul li{ width: calc((100% - 50px) / 3); }
}

@media screen and (max-width: 900px){
	#product .sec-title h5{ font-size: 2.5rem; }

	#product .table{ overflow-x: auto; }
	#product .table table{ width: 800px; margin-bottom: 1px; }
}

@media screen and (max-width: 850px){
	#product .product-list ul{ gap: 40px 20px; }
	#product .product-list ul li{ width: calc((100% - 20px) / 2); }
	#product .product-list ul li figure img{ max-width: calc(100% - 20px); max-height: calc(100% - 20px); }
}


/* 제품소개 - 상세 */
#detail{ overflow: hidden; }
#detail .detail-top .flex-box{ display: flex; justify-content: space-between; }
#detail .detail-top .flex-box > div{ width: calc((100% - 100px) / 2); position: relative; }
#detail .detail-top .slick-slide{ outline: none; }

#detail .detail-top .half:last-of-type{ display: flex; flex-direction: column-reverse; }
#detail .detail-top figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 100%; }
#detail .detail-top figure img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#detail .detail-top .info{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 auto; padding-bottom: 20px; }
#detail .detail-top .info span{ display: inline-block; font-size: 1.6rem; font-weight: 500; color: #333; line-height: 1; padding: 12px 15px; border: 1px solid #000; border-radius: 358px; }
#detail .detail-top .info h3{ font-size: 6rem; font-weight: 700; color: #000; margin: 20px 0 40px; }
#detail .detail-top .info p{ font-size: 1.8rem; font-weight: 400; color: #333; line-height: 1.6666; }

#detail .detail-top .tit{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
#detail .detail-top .tit h6{ font-size: 2.2rem; font-weight: 600; color: #333; }
#detail .detail-top .btns{ margin-right: -10px; }
#detail .detail-top .btns button{ width: 30px; height: 30px; background: none; border: none; cursor: pointer; }

#detail .detail-top .big-wrap{ border: 1px solid #DDD; border-radius: 20px; }
#detail .detail-top .big figure{ padding-bottom: 80%; }
#detail .detail-top .big figure img{ max-width: calc(100% - 60px); max-height: calc(100% - 60px); }

#detail .detail-top .detail-img{ /* position: absolute; bottom: 0; left: 0; right: 0; */ overflow: hidden; }
#detail .detail-top .small-wrap .slick-list{ margin-right: -12px; }
#detail .detail-top .small-wrap .slick-track{ margin: 0; }
#detail .detail-top .small{ /* width: 196px; */ margin: 1px 0; margin-right: 12px; border-radius: 10px; position: relative; cursor: pointer; }
#detail .detail-top .small::before, #detail .detail-top .small::after{ content: ""; width: 100%; height: 100%; border-radius: inherit; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; }
#detail .detail-top .small::before{ border: 1px solid #DDD; }
#detail .detail-top .small::after{ border: 2px solid var(--mainColor); opacity: 0; transition: opacity 0.5s; }
#detail .detail-top .small.slick-current::after{ opacity: 1; }
#detail .detail-top .small figure img{ max-width: calc(100% - 50px); max-height: calc(100% - 50px); }

#detail .sec-title{ border-bottom: 2px solid #000; padding-bottom: 20px; margin-bottom: 30px; }
#detail .sec-title h5{ font-weight: 600; color: #222; }


#detail .center a{ margin: 0 auto; }

/* 제품 상세 - 다운로드 리스트 */
#detail .download-list{ background: #F9F9F9; border-radius: 20px; padding: 22px 60px; }
#detail .download-list dl{ display: flex; flex-wrap: wrap; justify-content: flex-end; }
#detail .download-list dl *{ font-size: 1.8rem; }
#detail .download-list dl dt{ width: 190px; font-weight: 600; color: #333; letter-spacing: -0.02em; position: relative; padding: 7px 0; }
#detail .download-list dl dt::after{ content: ""; width: 1px; height: 18px; background: #AAA; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#detail .download-list dl dd{ width: calc(100% - 190px); }
#detail .download-list dl dd a{ display: inline-block; font-weight: 400; color: #333 ; letter-spacing: -0.02em; padding: 7px 30px; }

@media screen and (max-width: 1780px){
	/* #detail .detail-top .small{ width: calc((((100vw - 140px) / 2) - 46px) / 4); } */
}

@media screen and (max-width: 1700px){
	#detail .detail-top .info h3{ font-size: 5rem; }
	#detail .detail-top .tit h6{ font-size: 2rem; }
}

@media screen and (max-width: 1500px){
	#detail .detail-top .flex-box > div{ width: calc((100% - 50px) / 2); }
	#detail .detail-top .info h3{ margin: 10px 0 20px; }

	/* #detail .detail-top .small{ width: calc((((100vw - 90px) / 2) - 46px) / 4); } */
}

@media screen and (max-width: 1280px){
	#detail .detail-top .info span{ font-size: 1.5rem; padding: 9px 10px; }
	#detail .detail-top .info h3{ font-size: 4rem; }
	#detail .detail-top .info p{ font-size: 1.7rem; }

	#detail .detail-top .tit{ margin-bottom: 10px; }
	#detail .detail-top .tit h6{ font-size: 1.8rem; }
	#detail .detail-top .small figure img{ max-width: calc(100% - 20px); max-height: calc(100% - 20px); }

	#detail .sec-title{ padding-bottom: 10px; margin-bottom: 20px; }

	#detail .center .round-btn{ --left: -20px; }

	/* 제품 상세 - 다운로드 리스트 */
	#detail .download-list{ padding: 15px 30px; }
	#detail .download-list dl *{ font-size: 1.7rem; }
}

@media screen and (max-width: 1000px){
	#detail .detail-top .flex-box{ flex-direction: column; }
	#detail .detail-top .flex-box > div{ width: 100%; }
	#detail .detail-top .half:last-of-type{ flex-direction: column; margin-top: 20px; padding-bottom: 0; }

	#detail .detail-top .info{ padding: 30px 0 0; }
	#detail .detail-top .detail-img{ position: static; }
	#detail .detail-top .tit{ display: none; }
	/* #detail .detail-top .small{ width: calc((100vw - 96px) / 4); } */

	/* 제품 상세 - 다운로드 리스트 */
	#detail .download-list{ padding: 20px 30px; }
	#detail .download-list dl{ flex-direction: column; }
	#detail .download-list dl dt{ width: 100%; border-bottom: 1px solid #AAA; padding: 0 0 15px; margin-bottom: 8px; }
	#detail .download-list dl dt::after{ display: none; }
	#detail .download-list dl dd{ width: 100%; }
	#detail .download-list dl dd a{ padding: 7px 0; }
}

@media screen and (max-width: 900px){
	#detail .detail-top .info h3{ font-size: 3.5rem; }
}

@media screen and (max-width: 600px){
	#detail .detail-top .big figure img{ max-width: calc(100% - 40px); max-height: calc(100% - 40px); }
}


/* 문의폼 (공통) */
#inquiry{ --height: 60px; }
#inquiry .form-box *{ font-family: var(--engFont); font-size: 1.6rem; }
#inquiry .form-box p.right{ font-size: 1.8rem; font-weight: 400; color: #111; text-align: right; margin-bottom: 15px; }
#inquiry .form-box p.right span{ font-weight: 600; color: var(--mainColor); }
#inquiry table{ border-top: 2px solid #000; }
#inquiry table tr{ border-bottom: 1px solid #EEE; }
#inquiry .form-box table th{ width: 250px; font-size: 1.8rem; font-weight: 600; color: #111; }
#inquiry .form-box table th span{ color: var(--mainColor); }
#inquiry table td{ padding: 20px 30px; }

#inquiry .flex{ display: flex; align-items: center; gap: 10px; }
#inquiry .flex span{ display: inline-block; font-family: var(--engFont); color: #333; letter-spacing: 0; }
#inquiry .flex span.hyphen{ width: 10px; height: 1px; background: #333; }
#inquiry .flex > div{ position: relative; }
#inquiry .max500{ max-width: 500px; width: 100%; }
#inquiry .max400{ max-width: 400px; width: 100%; }
#inquiry .max300{ max-width: 300px; width: 100%; }
#inquiry .max200{ max-width: 200px; width: 100%; }

#inquiry input, #inquiry .selectric, #inquiry .form-box button{ height: var(--height); }
#inquiry input, #inquiry .selectric{ width: 100%; border: 1px solid #DDD; border-radius: 60px; -webkit-border-radius: 60px; color: #333; }

#inquiry input{ padding: 0 20px; }
#inquiry textarea, #inquiry .policy-box{ resize: none; width: 100%; height: 210px; border: 1px solid #DDD; border-radius: 20px; -webkit-border-radius: 20px; padding: 20px; outline: none; }
#inquiry input::placeholder, #inquiry textarea::placeholder{ color: #AAA; }

#inquiry .selectric-box *{ font-family: var(--engFont); font-size: 1.6rem; }
#inquiry .selectric-box .selectric{ height: var(--height); background: none; }
#inquiry .selectric-box .selectric .label{ width: 100%; height: 100%; background: url("/img/sub/select_arrow.svg") no-repeat center right 20px / auto; display: flex; align-items: center; font-weight: 400; color: #666; margin: 0; padding: 0 20px; padding-right: 50px !important; }
#inquiry .selectric-box .selectric .button{ display: none; }
#inquiry .selectric-box .selectric-items{ border-radius: 0 0 30px 30px; background: #fff; border: 1px solid #DDD; border-top: none; overflow: hidden; }
#inquiry .selectric-items .selectric-scroll::-webkit-scrollbar{ width: 10px; height: 10px; }
#inquiry .selectric-items .selectric-scroll::-webkit-scrollbar-thumb{ background: var(--mainColor); border-radius: 60px; background-clip: padding-box; border: 2px solid transparent; }
#inquiry .selectric-items .selectric-scroll::-webkit-scrollbar-track{ background: #fff; }
#inquiry .selectric-box .selectric-items li{ padding: 15px 20px; border: none; }
#inquiry .selectric-box .selectric-items li:not(:last-of-type){ border-bottom: 1px solid #DDD; }

#inquiry .selectric-box .selectric-open .selectric{ border-radius: 30px 30px 0 0; }
#inquiry .selectric-box .selectric-open.selectric-above .selectric{ border-radius: 0 0 30px 30px; }
#inquiry .selectric-box .selectric-above .selectric-items{ bottom: calc(100% - 1px); border-radius: 30px 30px 0 0; }
#inquiry .selectric-box .selectric-items li.highlighted, #inquiry .selectric-box .selectric-items li.selected{ background: var(--mainColor); color: #fff; }
#inquiry .selectric-box .selectric-items li:hover{ background: var(--mainColor); color: #fff; }

#inquiry .fileBtn input{ display: none; }
#inquiry .fileBtn .round-btn{ width: 155px; height: var(--height); border: none; --left: -20px; }
#inquiry .fileBtn .round-btn span{ color: #fff !important; }
#inquiry .fileBtn .round-btn::before{ border: none; background: #333; }

#inquiry .auto .flex > div img{ border-radius: 60px; width: 100%; height: var(--height); object-filt: cover; }
#inquiry .reset{ width: var(--height); background: #333; border: none; border-radius: 50%; transition: background 0.5s; }

/* #inquiry .policy-box dl{ display: flex; flex-direction: column; gap: 30px 0; }
#inquiry .policy-box dl:not(:last-of-type){ margin-bottom: 30px; } */
#inquiry .policy-box *{ color: #666; line-height: 1.625; }
#inquiry .policy-box .privacy .pBox:first-of-type{ margin-top: 0; }

#inquiry .agree{ margin-top: 15px; }
#inquiry .agree input{ display: none; }
#inquiry .agree label{ display: block; font-weight: 400; color: #333; position: relative; padding: calc((25px - 1.3em) / 2) 0; padding-left: 35px; cursor: pointer; }
#inquiry .agree label::before{ content: ""; width: 25px; height: 25px; border: 1px solid #DDD; border-radius: 50%; box-sizing: border-box; position: absolute; top: 0; left: 0; }
#inquiry .agree input:checked + label::before{ border: 1px solid var(--mainColor); background: var(--mainColor); }
#inquiry .agree input:checked + label::after{ content: url("/img/sub/agree_check.svg"); position: absolute; top: calc(26px / 2); left:  calc(25px / 2); transform: translate(-50%, -50%); }

#inquiry .center button{ margin: 0 auto; }

@media screen and (hover: hover){
	#inquiry .fileBtn .round-btn:hover{ background: transparent; }
	#inquiry .reset:hover{ background: var(--mainColor); }
}

@media screen and (max-width: 1700px){
	#inquiry{ --height: 55px; }
	#inquiry .form-box p.right{ font-size: 1.7rem; }
	#inquiry .form-box table th{ width: 200px; }

	#inquiry .selectric-box .selectric-open .selectric{ border-radius: 27px 27px 0 0; }
	#inquiry .selectric-box .selectric-open.selectric-above .selectric{ border-radius: 0 0 27px 27px; }
	#inquiry .selectric-box .selectric-above .selectric-items{ border-radius: 27px 27px 0 0; }
}

@media screen and (max-width: 1280px){
	#inquiry{ --height: 50px; }
	#inquiry .form-box p.right{ font-size: 1.6rem; margin-bottom: 10px; }
	#inquiry .form-box table th{ width: 150px; font-size: 1.7rem; }
	#inquiry table td{ padding: 10px 20px; } 
	#inquiry .round-btn{ --left: -20px; }

	#inquiry .selectric-box .selectric-open .selectric{ border-radius: 25px 25px 0 0; }
	#inquiry .selectric-box .selectric-open.selectric-above .selectric{ border-radius: 0 0 25px 25px; }
	#inquiry .selectric-box .selectric-above .selectric-items{ border-radius: 25px 25px 0 0; }

	#inquiry .fileBtn .round-btn{ width: 120px; --left: -15px; }

	#inquiry .policy-box dl{ gap: 20px 0; }
	#inquiry .policy-box dl:not(:last-of-type){ margin-bottom: 20px; }
}

@media screen and (max-width: 1000px){
	#inquiry table tr{ display: flex; flex-direction: column; }
	#inquiry table tr > *{ width: 100% !important; }
	#inquiry .form-box table th{ padding: 15px 10px 0; text-align: left; }
	#inquiry .form-box table td{ padding: 10px 10px 15px; }

	#inquiry .max500, #inquiry .max400, #inquiry .max300, #inquiry .max200{ max-width: 100%; }

	#inquiry .flex.number > div{ width: calc((100% - 50px) / 3); }
	#inquiry .flex.email{ flex-wrap: wrap; }
	#inquiry .flex.email > div{ width: calc((100% - 37px) / 2); }
	#inquiry .flex.email > div:last-of-type{ width: 100%; }
	#inquiry .file .max500{ width: calc(100% - 130px); }
	#inquiry .auto .flex > div{ width: calc((100% - var(--height) - 20px) / 2); }
}


/* 투자정보 - 재무정보 */
#finance .sec-title{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
#finance .sec-title em{ font-size: 18px; font-weight: 400; color: #999; letter-spacing: -0.02em; }

#finance colgroup col.s{ width: 200px; }
#finance table{ min-width: 800px; text-align: center; }
#finance table tr{ border-bottom: 1px solid #EEE; }
#finance table tr.gray{ background: #F9F9F9; }
#finance table th,
#finance table td{ padding: 19px 10px; }
#finance table th div{ width: 250px; }
#finance table thead{ border-top: 1px solid #111; font-size: 18px; font-weight: 600; color: #111; letter-spacing: -0.02em; }
#finance table tbody{ font-size: 16px; font-weight: 400; color: #333; letter-spacing: -0.02em; }
#finance table tbody th{ font-weight: 500; color: #111; }
#finance table tbody td{ font-family: var(--engFont); }

@media screen and (max-width: 1280px){
	#finance .sec-title em{ font-size: 16px; }

	#finance colgroup col.s{ width: 150px; }
	#finance table th,
	#finance table td{ padding: 15px 10px; }
	#finance table th div{ width: 200px; }
	#finance table thead{ font-size: 17px; }
}


/* 투자정보 - 재무정보 */
#ir .dot-tab ul{ justify-content: center; }


/* 인재경영 - 산일인재상 */
#people .dl ul{ display: flex; flex-wrap: wrap; gap: 30px; }
#people .dl ul li{ width: calc((100% - 30px) / 2); position: relative; }
#people .dl ul li figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 42.107%; border-radius: 20px; }
#people .dl ul li figure::after{ content: ""; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent); position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 0.5s; }
#people .dl ul li figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.5s; }
#people .dl .text{ position: absolute; bottom: 0; left: 0; right: 0; padding: 50px 60px; }
#people .dl .text *{ color: #fff; }
#people .dl .text dl dt{ font-size: 3rem; font-weight: 700; margin-bottom: 15px; }
#people .dl .text dl dd{ font-size: 1.8rem; font-weight: 400; line-height: 1.6666; }

@media screen and (hover: hover){
	#people .dl ul li:hover figure::after{ opacity: 1; }
	#people .dl ul li:hover figure img{ transform: translate(-50%, -50%) scale(1.05); }
}

@media screen and (max-width: 1700px){
	#people .dl .text{ padding: 40px; }
	#people .dl .text dl dt{ font-size: 2.6rem; }
}

@media screen and (max-width: 1280px){
	#people .dl .text{ padding: 30px; }
	#people .dl .text dl dt{ font-size: 2.2rem; margin-bottom: 10px; }
	#people .dl .text dl dd{ font-size: 1.7rem; }
}

@media screen and (max-width: 1100px){
	#people .dl ul{ gap: 20px; }
	#people .dl ul li{ width: calc((100% - 20px) / 2); }
	#people .dl .text{ padding: 20px; }
}

@media screen and (max-width: 960px){
	#people .dl ul{ gap: 20px; }
	#people .dl ul li{ width: 100%; }
	#people .dl ul li figure{ min-height: 200px; padding-bottom: 30%; }
}

@media screen and (max-width: 600px){
	#people .sec-title br{ display: none; }
}


/* 인재경영 - 복리후생 */
#welfare{ overflow: hidden; }
#welfare .flex-box{ display: flex; }
#welfare .flex-box .title{ width: 355px; }
#welfare .flex-box .content{ width: calc(100% - 355px); }

#welfare .content .cover{ position: relative; opacity: 1 !important; }
#welfare .content .cover::after{ content: ""; width: calc(100% + 10px); height: calc(100% + 10px); background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scaleX(1); transform-origin: left; transition: transform 1.5s; }
#welfare .content .cover.aos-animate::after{ transform: translate(-50%, -50%) scaleX(0); }
#welfare .content figure{ width: 100%; position: relative; overflow: hidden; border-radius: 20px; padding-bottom: 21.661%; }
#welfare .content figure img{ position: absolute; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#welfare .content ul{ display: flex; flex-wrap: wrap; gap: 30px; margin-top: 30px; }
#welfare .content ul li{ width: calc((100% - 90px) / 4); border: 1px solid #EEE; border-radius: 20px; padding: 45px 30px; }
#welfare .content ul li p{ font-size: 1.8rem; font-weight: 500; color: #333; margin-top: 30px; }
#welfare .content ul li p span{ font-size: 1.5rem; font-weight: 400; color: #666; }

@media screen and (max-width: 1600px){
	#welfare .content ul{ gap: 20px; }
	#welfare .content ul li{ width: calc((100% - 60px) / 4); padding: 35px 30px; }
}

@media screen and (max-width: 1280px){
	#welfare .flex-box .title{ width: 255px; }
	#welfare .flex-box .content{ width: calc(100% - 255px); }

	#welfare .content ul li{ padding: 25px; }
	#welfare .content ul li p{ font-size: 1.7rem; margin-top: 15px; }
}

@media screen and (max-width: 1200px){
	#welfare .flex-box{ flex-direction: column; }
	#welfare .flex-box .title{ width: 100%; }
	#welfare .flex-box .content{ width: 100%; margin-top: 20px; }
}

@media screen and (max-width: 1000px){
	#welfare .content ul li{ width: calc((100% - 20px) / 2); }
}

@media screen and (max-width: 700px){
	#welfare .content figure{ min-height: 150px; }
}

/* 인재경영 - 채용안내 */
#recruit{ padding-top: 0; overflow: hidden; }
#recruit .system{ background: #F9F9F9; }
#recruit .system ul{ display: flex; flex-wrap: wrap; gap: 30px; }
#recruit .system ul li{ width: calc((100% - 150px) / 6); background: #fff; border: 1px solid #EEE; border-radius: 20px; padding: 50px 40px; }
#recruit .system ul li p{ font-size: 2.2rem; font-weight: 600; color: #333; margin-top: 30px; }
#recruit .system ul li p span{ display: block; font-family: var(--engFont); font-size: 1.5rem; font-weight: 600; color: #D6D6D6; margin-bottom: 10px; }

#recruit .step .sec-title{ position: relative; }
#recruit .step .sec-title .logo-bg{ position: absolute; bottom: 0; left: 0; right: 0; transform: translateY(50%); text-align: right; padding-left: 20px; }
#recruit .step .flex-box{ display: flex; flex-wrap: wrap; gap: 40px; padding-top: 60px; margin-top: 30px; position: relative; z-index: 10; }
#recruit .step .flex-box::after{ content: ""; width: calc(100% - ((100% - 120px) / 4)); height: 1px; border-bottom: 3px dotted #DDD; position: absolute; top: calc(((100% - 120px) / 4) + 20px); left: 50%; transform: translate(-50%, -50%) rotate(-4deg); }
#recruit .step .box{ display: flex; flex-direction: column; width: calc((100% - 120px) / 4); position: relative; z-index: 10; }
#recruit .step .box:nth-of-type(2){ top: -20px; }
#recruit .step .box:nth-of-type(3){ top: -40px; }
#recruit .step .box:nth-of-type(4){ top: -60px; }
#recruit .step .box .circle{ padding: 0 60px; position: relative; text-align: center; }
#recruit .step .box .circle .inner{ position: relative; z-index: 5; }
#recruit .step .box .cir{ width: 100%; padding-bottom: 100%; background: var(--color); border-radius: 50%; position: relative; }
#recruit .step .box .cir::after{ content: ""; width: calc(100% - 20px); padding-bottom: calc(100% - 20px); background: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#recruit .step .box .circle .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); padding: 0 30px; }
#recruit .step .box .circle .text span{ display: block; font-family: var(--engFont); font-size: 1.5rem; font-weight: 600; color: #AAA; margin-bottom: 30px; }
#recruit .step .box .tit{ padding: 40px 0 20px; text-align: center; }
#recruit .step .box .tit p{ background: var(--color); border-radius: 70px; font-size: 2rem; font-weight: 600; color: #fff; padding: 20px; }
#recruit .step .box .tit.black p{ color: #333; }
#recruit .step .box .list{ padding: 40px; border-radius: 20px; border: 1px solid #DDD; position: relative; flex: 1 0 auto; }
#recruit .step .box .list .dot-list *{ line-height: 1.6666; }
#recruit .step .box .list .dot-list > *::before{ top: calc(1.6666em / 2); }
#recruit .step .box .list dl dt{ font-weight: 600; color: #666; }
#recruit .step .box .list dl.dot-list dd{ font-family: var(--engFont); margin-bottom: 0; margin-top: 5px; }

#recruit .list a{ margin: 0 auto; }

@media screen and (max-width: 1780px){
	#recruit .system ul li{ padding: 40px 30px; }

	#recruit .step .box .tit p{ font-size: 1.8rem; padding: 15px 20px; }
	#recruit .step .box .list{ padding: 30px; }
}

@media screen and (max-width: 1700px){
	#recruit .system ul li p{ font-size: 2rem; }
}

@media screen and (max-width: 1570px){
	#recruit .system ul li{ width: calc((100% - 60px) / 3); }
}

@media screen and (max-width: 1500px){
	#recruit .step .box .circle{ padding: 0 30px; }
	#recruit .step .box .circle .text span{ margin-bottom: 20px; }
	#recruit .step .box .cir::before{ content: ""; width: 200px; height: 1px; border-bottom: 3px dotted #DDD; position: absolute; top: 50%; right: 0; transform: translate(100%, -50%) rotate(-5deg); }
	#recruit .step .box:nth-of-type(even) .cir::before{ display: none; }
}

@media screen and (max-width: 1400px){
	#recruit .step .flex-box{ max-width: 1000px; margin: 0 auto; gap: 60px 40px; }
	#recruit .step .flex-box::after{ display: none; }
	#recruit .step .box{ width: calc((100% - 40px) / 2); top: 0 !important; }
	#recruit .step .box:nth-of-type(even){ top: -20px !important; }
	#recruit .step .box .circle{ padding: 0 80px; }
}

@media screen and (max-width: 1280px){
	#recruit .system ul li p{ font-size: 1.8rem; margin-top: 20px; }

	#recruit .step .box .tit p{ font-size: 1.7rem; }
	#recruit .step .box .list{ padding: 25px; }
	#recruit .step .box .list > ul.dot-list > li:not(:last-of-type){ margin-bottom: 10px; }
	#recruit .step .box .list dl.dot-list dd{ margin-top: 0; }
}

@media screen and (max-width: 800px){
	#recruit .system ul{ gap: 20px; }
	#recruit .system ul li{ width: calc((100% - 20px) / 2); padding: 30px 20px; }

	#recruit .step .box .circle{ padding: 0 50px; }
	#recruit .step .box .tit{ padding: 20px 0 10px; }
	#recruit .step .box .tit p{ padding: 12px 20px; }
}

@media screen and (max-width: 650px){
	#recruit .sec-title br{ display: none; }

	#recruit .step .flex-box{ max-width: 400px; }
	#recruit .step .box{ width: 100%; }
	#recruit .step .box .circle{ padding: 0 80px; }
	#recruit .step .box .cir::before{ display: none; }
	#recruit .step .box:nth-of-type(even){ top: 0 !important; }
}


/* 인재경영 - 사이버신문고 */
#report{ overflow: hidden; }
#report .imgBg-list .bg{ background: url("/img/sub/career/report_bg.jpg") no-repeat center bottom / cover; }

#report .way .sec:not(:last-of-type){ margin-bottom: 60px; }
#report .way h6{ margin-bottom: 20px; }
#report .way .flex-box{ display: flex; padding: 40px 0; border: 1px solid #EEE; border-radius: 20px; }
#report .way .flex-box .box{ width: calc(100% / 3); padding: 40px; text-align: center; }
#report .way .flex-box .box:not(:last-of-type){ border-right: 1px dashed rgba(170, 170, 170, 0.5); }
#report .way .box dl{ margin-top: 30px; }
#report .way .box dl dt{ font-size: 2rem; font-weight: 600; color: #333; margin-bottom: 15px; }
#report .way .box dl dd{ font-family: var(--engFont); font-size: 1.8rem; font-weight: 400; color: #666; }

#report .rule .flex-box{ display: flex; gap: 30px; }
#report .rule .flex-box > div{ width: calc((100% - 30px) / 2); border-radius: 20px; }
#report .rule .img{ background: url("/img/sub/career/report_img.jpg") no-repeat center center / cover; }
#report .rule .border{ display: flex; justify-content: center; align-items: center; border: 1px solid #EEE; padding: 60px; }
#report .rule .border ul li{ font-size: 1.8rem; font-weight: 400; color: #333; line-height: 1.6666; position: relative; padding: calc((30px - 1.6666em) / 2) 0; padding-left: 45px; }
#report .rule .border ul li::before{ content: ""; width: 30px; height: 30px; background: var(--mainColor) url("/img/sub/career/check_icon.svg") no-repeat center center / auto; border-radius: 50%; position: absolute; top: 0; left: 0; }
#report .rule .border ul li:not(:last-of-type){ margin-bottom: 30px; }

@media screen and (max-width: 1700px){
	#report .way .flex-box{ padding: 20px 0; }
	#report .way .box dl dt{ font-size: 1.9rem; }
	#report .way .box dl dd{ font-size: 1.7rem; }

	#report .rule .border{ padding: 40px; }
}

@media screen and (max-width: 1600px){
	#report .imgBg-list ul br{ display: none; }
}

@media screen and (max-width: 1280px){
	#report .way h6{ margin-bottom: 10px; }
	#report .way .box dl{ margin-top: 20px; }
	#report .way .box dl dt{ font-size: 1.8rem; margin-bottom: 10px; }
	#report .way .box dl dd{ font-size: 1.6rem; }

	#report .rule .border ul li:not(:last-of-type){ margin-bottom: 20px; }
	#report .rule .border ul li{ font-size: 1.7rem; padding: calc((25px - 1.6666em) / 2) 0; padding-left: 35px; }
	#report .rule .border ul li::before{ width: 25px; height: 25px; }
}

@media screen and (max-width: 1100px){
	#report br{ display: none; }
}

@media screen and (max-width: 1000px){
	#report .rule .flex-box{ flex-direction: column; }
	#report .rule .flex-box > div{ width: 100%; }
	#report .rule .img{ padding-bottom: 40%; }
	#report .rule .border{ padding: 25px; }
}

@media screen and (max-width: 900px){
	#report .way .flex-box{ flex-wrap: wrap; padding: 10px 30px; }
	#report .way .flex-box .box{ width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 40px 20px; }
	#report .way .flex-box .box:not(:last-of-type){ border-bottom: 1px dashed rgba(170, 170, 170, 0.5); border-right: none; }
	#report .way .box dl{ width: calc(100% - 100px); margin-top: 0; }
}


/* 개인정보처리방침 */
@media screen and (max-width: 900px){
	#policy br{ display: none; }
}