/* header */
#header .inner{ box-shadow: 0px 0px 10px 10px rgba(125, 125, 125, 0.08); }
#header nav .depth02::after{ background: #fff; box-shadow: 0px 0px 10px 10px rgba(125, 125, 125, 0.08); transition: all 0.5s; }

#header.scroll .inner{ box-shadow: none; }

/* 서브 비주얼 */
#sub .visual{ position: relative; overflow: hidden; }
#sub .visual .bg{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#sub .visual .text{ text-align: center; padding: 10% 0 3.5%; position: relative; z-index: 10; }
#sub .visual .text h2{ font-size: 8rem; font-weight: 700; color: #fff; }

/* 서브 비주얼 배경 이미지 */
#sub .visual .bg1{ background: url("/img/sub/company_bg.jpg") no-repeat center center / cover; }
#sub .visual .bg2{ background: url("/img/sub/business_bg.jpg") no-repeat center center / cover; }
#sub .visual .bg3{ background: url("/img/sub/recruitment_bg.jpg") no-repeat center center / cover; }
#sub .visual .bg4{ background: url("/img/sub/info_bg.jpg") no-repeat center center / cover; }
#sub .visual .bg5{ background: url("/img/sub/contact_bg.jpg") no-repeat center center / cover; }
#sub .visual .bg10{ background: url("/img/sub/policy_bg.jpg") no-repeat center center / cover; }

/* lnb */
#lnb{ border-bottom: 1px solid #DDD; }
#lnb .mobile{ display: none; }
#lnb *{ font-size: 2rem; font-weight: 500; color: #aaa; }
#lnb ul{ display: flex; justify-content: center; align-items: center; }
#lnb ul li a{ display: inline-block; padding: 20px 50px; }
#lnb ul li a:visited{ color: #aaa; }
#lnb button{ width: 100%; font-family: var(--baseFont); background: none; border: none; padding: 20px; text-align: left; position: relative; transition: all 0.5s; outline: none; }
#lnb button::after{ content: url("/img/sub/mobile_lnb.svg"); position: absolute; top: 50%; right: 20px; transform: translateY(-50%); transition: all 0.5s; will-change: transform; }

#lnb ul li.on a{ font-weight: 600; color: var(--mainColor); }
#lnb ul li.on a:visited{ color: var(--mainColor); }
#lnb button.active{ padding: 20px 40px; }
#lnb button.active::after{ right: 40px; transform: translateY(-50%) rotate(-180deg); }

@media screen and (max-width: 1500px){
	/* 서브 비주얼 */
	#sub .visual .text{ padding: 13% 0 4.5%; }
	#sub .visual .text h2{ font-size: 6rem; }

	/* lnb */
	#lnb *{ font-size: 1.8rem; }
}

@media screen and (max-width: 1200px){
	/* 서브 비주얼 */
	#sub .visual .text{ padding: 15% 0 5.5%; }
	#sub .visual .text h2{ font-size: 4.5rem; }

	/* lnb */
	#lnb *{ font-size: 1.7rem; }
	#lnb ul li a{ padding: 20px 30px; }
}

@media screen and (max-width: 1000px){
	/* 서브 비주얼 */
	#sub .visual .text{ padding: 140px 0 50px; }
	#sub .visual .text h2{ font-size: 3.5rem; }
}

@media screen and (max-width: 900px){
	/* lnb */
	#lnb{ position: relative; }
	#lnb *{ font-size: 1.6rem; }
	#lnb .pc{ display: none; }
	#lnb .mobile{ display: block; }
	#lnb ul{ width: calc(100% - 40px); display: none; position: absolute; top: calc(100% + 15px); left: 20px; z-index: 50; background: #fff; border-radius: 10px; box-shadow: 0px 0px 10px 10px rgba(125, 125, 125, 0.08); padding: 10px 0; }
	#lnb ul li a{ width: 100%; padding: 10px 20px; }
}


/* common */
.sub-content{ padding: 80px 0 180px; }
.sub-content section:not(:last-of-type){ padding-bottom: 180px; }

.page-title{ text-align: center; margin-bottom: 80px; text-transform: uppercase; }
.page-title h3{ font-size: 6rem; font-weight: 700; }

.sec-title{ margin-bottom: 40px; text-transform: uppercase; }
.sec-title h4{ font-size: 5rem; font-weight: 700; }

.red{ color: var(--mainColor); }
.red-btn{ display: flex; justify-content: center; align-items: center; width: 120px; height: 45px; font-size: 1.8rem; font-weight: 500; color: #fff; background: var(--mainColor); border-radius: 100px; }
a.red-btn:active , a.red-btn:visited{ color: #fff; }

.break{ word-break: break-all; }

@media screen and (max-width: 1500px){
	.sub-content{ padding: 50px 0 130px; }
	.sub-content section:not(:last-of-type){ padding-bottom: 120px; }

	.page-title{ margin-bottom: 60px; }
	.page-title h3{ font-size: 4.5rem; }

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

	.red-btn{ width: 110px; height: 42px; font-size: 1.7rem; }
}

@media screen and (max-width: 1200px){
	.sub-content{ padding: 50px 0 100px; }
	.sub-content section:not(:last-of-type){ padding-bottom: 80px; }

	.page-title{ margin-bottom: 40px; }
	.page-title h3{ font-size: 3.5rem; }

	.sec-title{ margin-bottom: 25px; }
	.sec-title h4{ font-size: 3rem; }

	.red-btn{ width: 90px; height: 40px; font-size: 1.6rem; }
}

@media screen and (max-width: 900px){
	.page-title{ margin-bottom: 25px; }
	.page-title h3{ font-size: 3rem; }

	.sec-title{ margin-bottom: 15px; }
	.sec-title h4{ font-size: 2.5rem; }
}


/* search-box */
.search-box{ margin-bottom: 50px; }
.search-box .flex-box{ display: flex; flex-wrap: wrap; }
.search-box .flex-box *{ height: 47px; border-radius: 100px; outline: none; font-family: var(--baseFont); font-size: 1.8rem; }
.search-box .flex-box *:not(:last-child){ margin-right: 10px; }
.search-box select, .search-box input{ padding: 0 20px; font-weight: 400; color: #222; appearance: none; }
.search-box select{ width: 200px; border: none; background: #F6F6F6 url("/img/sub/select_arrow.svg") no-repeat center right 20px / auto; padding-right: 45px; }
.search-box input{ width: 450px; border: 1px solid #EEE; }
.search-box input::placeholder{ color: #222; }
.search-box button{ width: 100px; border: none; background: var(--mainColor); font-weight: 500; color: #fff; line-height: 1; }


/* table-list (공통) */
.table-list table *{ font-size: 1.8rem; text-align: center; }
.table-list table th, .table-list table td{ border: 1px solid #DDD; padding: 20px; }
.table-list table tr th:first-of-type, .table-list table tr td:first-of-type{ border-left: none; }
.table-list table tr th:last-of-type, .table-list table tr td:last-of-type{ border-right: none; }
.table-list table th{ font-weight: 600; background: #F8F8F8; }
.table-list table td{ font-weight: 400; }
.table-list table td a{ line-height: 1; }

/* #board .table-list (기본 게시판) */
#board .table-list th:nth-of-type(1){ width: 135px; }
#board .table-list th:nth-of-type(3){ width: 240px; }
#board .table-list th:nth-of-type(4){ width: 220px; }
#board .table-list td{ position: relative; }
#board .table-list td p{ width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: left; }
#board .table-list td a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

/* 상세 페이지 */
#view .title-box{ background: #F8F8F8; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; text-align: center; padding: 30px; }
#view .title-box h5{ font-size: 2.2rem; font-weight: 700; }
#view .title-box ul{ display: flex; justify-content: center; margin-top: 15px; }
#view .title-box ul li{ font-size: 1.5rem; font-weight: 400; color: #555; padding: 0 10px; position: relative; }
#view .title-box ul li::after{ content: ""; width: 1px; height: 10px; background: #AAA; position: absolute; top: 47%; right: 0; transform: translateY(-50%); }
#view .title-box ul li:last-of-type::after{ display: none; }

#view .content-box{ padding: 30px; }

#view .link-box table *{ font-size: 1.8rem; }
#view .link-box table tr{ border-bottom: 1px solid #DDD; }
#view .link-box table tr:first-of-type{ border-top: 1px solid #DDD; }
#view .link-box table th, #view .link-box table td a{ padding: 20px; }
#view .link-box table th{ width: 220px; background: #F8F8F8; font-weight: 600; }
#view .link-box table td{ font-weight: 400; }
#view .link-box table td a{ width: 100%; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#view .center{ margin-top: 30px; display: flex; justify-content: center; }

/* paging */
.paging{ display: flex; justify-content: center; align-items: center; margin-top: 40px; }
.paging a{ display: flex; justify-content: center; align-items: center; background: none !important; border: none !important; font-size: 1.6rem; font-weight: 400; padding: 7.5px; }

.paging .arr{ display: flex; }
.paging .arr a{ width: 25px; height: 25px; font-size: 2rem; color: #111; padding: 0; }
.paging .arr .first i:last-of-type{ margin-left: -25px; overflow: hidden: }
.paging .arr .last i:first-of-type{ margin-right: -25px; }

.paging ul{ display: flex; margin: 0 5px; }
.paging ul li a{ color: #666; }
.paging ul li.on a{ font-weight: 600; color: #222; }


/* tab-menu */
.tab-menu ul{ display: flex; flex-wrap: wrap; gap: 10px; }
.tab-menu ul li{ font-size: 1.6rem; font-weight: 500; color: #aaa; background: #F8F8F8; padding: 12px 20px 11px; border-radius: 100px; cursor: pointer; }
.tab-menu ul li.on{ background: var(--mainColor); font-weight: 700; color: #fff; }

@media screen and (max-width: 1500px){
	/* search-box */
	.search-box .flex-box *{ font-size: 1.7rem; }

	/* table-list (공통) */
	.table-list table *{ font-size: 1.7rem; }

	/* 상세 페이지 */
	#view .title-box{ padding: 25px; }
	#view .link-box table *{ font-size: 1.7rem; }
}

@media screen and (max-width: 1200px){
	/* search-box */
	.search-box{ margin-bottom: 25px; }
	.search-box .flex-box *{ height: 43px; font-size: 1.5rem; }
	.search-box select{ width: 160px; }
	.search-box input{ width: 350px; }
	.search-box button{ width: 85px; }

	/* table-list (공통) */
	.table-list table *{ font-size: 1.6rem; }
	.table-list table th, .table-list table td{ padding: 10px; }

	/* #board .table-list (기본 게시판) */
	#board .table-list th:nth-of-type(1){ width: 100px; }
	#board .table-list th:nth-of-type(3){ width: 150px; }
	#board .table-list th:nth-of-type(4){ width: 130px; }

	/* 상세 페이지 */
	#view .title-box{ padding: 20px; }
	#view .title-box h5{ font-size: 2rem; }
	#view .title-box ul{ margin-top: 10px; }
	#view .content-box{ padding: 30px 20px; }
	#view .link-box table *{ font-size: 1.6rem; }
	#view .link-box table th, #view .link-box table td a{ padding: 15px; }
	#view .link-box table th{ width: 160px; }

	/* tab-menu */
	.tab-menu ul li{ font-size: 1.5rem; padding: 10px 17px; }
}

@media screen and (max-width: 900px){
	/* table-list (공통) */
	.table-list table *{ font-size: 1.5rem; }

	/* #board .table-list (기본 게시판) */
	#board thead{ display: none; }
	#board .table-list tr{ display: flex; flex-wrap: wrap; border-bottom: 1px solid #DDD; position: relative; }
	#board .table-list tr:first-of-type{ border-top: 1px solid #DDD; }
	#board .table-list tr td{ border: none; position: static; }
	#board .table-list tr td:nth-of-type(1){ display: none; }
	#board .table-list tr td:nth-of-type(2){ width: 100%; padding-bottom: 0; }
	#board .table-list tr td:nth-of-type(3),#employment #board .table-list tr td:nth-of-type(4){ width: auto; }
	#board .table-list tr td:nth-of-type(3){ position: relative; }
	#board .table-list tr td:nth-of-type(3)::after{ content: ""; width: 1px; height: 10px; background: #DDD; position: absolute; top: 49%; right: 0; transform: translateY(-50%); }

	/* 상세 페이지 */
	#view .title-box h5{ font-size: 1.9rem; }
	#view .link-box table *{ font-size: 1.5rem; }
	#view .link-box table th{ width: 135px; }

	/* paging */
	.paging{ margin-top: 25px; }
}

@media screen and (max-width: 700px){
	/* search-box */
	.search-box select{ width: 100%; margin-right: 0 !important; margin-bottom: 10px; }
	.search-box input{ width: calc(100% - 95px); }
}


/* .intro */
.intro .flex-box{ display: flex; justify-content: space-between; align-items: center; }
.intro .img-box{ width: 47%; }
.intro .img-box img{ border-radius: 20px; }
.intro .text-box{ width: calc(53% - 60px); }
.intro .text-box h5{ font-size: 4rem; font-weight: 700; text-transform: uppercase; }
.intro .text-box p{ font-size: 1.8rem; font-weight: 400; margin: 10px 0 40px; }
	
.intro .text-box dl:not(:last-of-type){ margin-bottom: 40px; }
.intro .text-box dl *{ font-size: 1.6rem; line-height: 1.925; }
.intro .text-box dl dt{ font-weight: 500; color: #555; }
.intro .text-box dl dd{ font-weight: 400; padding-left: 10px; position: relative; }
.intro .text-box dl dd::before{ content: ""; width: 2px; height: 2px; background: #555; border-radius: 50%; position: absolute; top: 14px; left: 0; }

@media screen and (max-width: 1500px){
	.intro .text-box h5{ font-size: 3rem; }
	.intro .text-box p{ margin-bottom: 20px; }
	.intro .text-box dl:not(:last-of-type){ margin-bottom: 30px; }
}

@media screen and (max-width: 1200px){
	.intro .text-box{ width: calc(53% - 30px); }
	.intro .text-box h5{ font-size: 2.5rem; }
	.intro .text-box p{ font-size: 1.7rem; margin-top: 5px; }
	.intro .text-box dl:not(:last-of-type){ margin-bottom: 20px; }
	.intro .text-box dl *{ font-size: 1.5rem; }
}

@media screen and (max-width: 1000px){
	.intro .flex-box{ flex-direction: column; }
	.intro .img-box{ width: 100%; text-align: center; }
	.intro .text-box{ width: 100%; margin-top: 30px; }
}

@media screen and (max-width: 800px){
	.intro .text-box h5{ font-size: 2.2rem; }
}


/* Company - CEO Message */
#ceo .flex-box{ display: flex; justify-content: space-between; }
#ceo .flex-box .img-box{ width: 43.5%; }
#ceo .flex-box .img-box figure{ position: sticky; top: calc(50% - 170px); left: 0; border-radius: 20px; overflow: hidden; }

#ceo .flex-box .text-box{ width: 52.8%; padding-top: 40px; }
#ceo .flex-box .text-box p{ font-size: 1.8rem; font-weight: 400; line-height: 156%; }
#ceo .flex-box .text-box p:not(:last-of-type){ margin-bottom: 15px; }
#ceo .flex-box .text-box p.right{ text-align: right; margin-top: 55px; line-height: 1.3; }
#ceo .flex-box .text-box p.right em{ font-size: 2.2rem; font-weight: 700; margin-left: 20px; }

@media screen and (max-width: 1200px){
	#ceo .flex-box .text-box{ padding-top: 20px; }
}

@media screen and (max-width: 1000px){
	#ceo .flex-box{ flex-direction: column; }
	#ceo .flex-box .img-box{ width: 100%; text-align: center; }
	#ceo .flex-box .text-box{ width: 100%; padding-top: 30px; }
}

@media screen and (max-width: 900px){
	#ceo .flex-box .text-box p{ font-size: 1.7rem; }
	#ceo .flex-box .text-box p.right em{ font-size: 2rem; margin-left: 10px; }
}


/* Company - History */
#history .history-box:not(:last-of-type){ padding-bottom: 160px; }
#history .history-box .flex-box{ display: flex; }
#history .history-box .title-box{ width: calc(50% - 20px); }
#history .history-box .title-box .sticky{ position: sticky; top: 200px; left: 0; }
#history .history-box .title-box figure{ width: 100%; padding-bottom: 37%; position: relative; overflow: hidden; border-radius: 0 20px 20px 0; }
#history .history-box .title-box figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#history .history-box .title-box p{ font-size: 16rem; font-weight: 700; color: #F8F8F8; margin-top: 20px; }
#history .history-box:nth-of-type(odd) .title-box p{ text-align: right; }

#history .history-box .list-box{ max-width: 870px; width: 100%; padding-left: 60px; padding-top: 60px; }
#history .history-box .list-box dl:not(:last-of-type){ margin-bottom: 70px; }
#history .history-box .list-box dl dt{ font-size: 3rem; font-weight: 700; }
#history .history-box .list-box dl dd{ margin-top: 10px; }
#history .history-box .list-box dl dd ul li{ display: inline-block; max-width: fit-content; font-size: 2rem; font-weight: 400; padding-left: 12px; text-indent: -12px; }
#history .history-box .list-box dl dd ul li:not(:last-of-type){ margin-bottom: 12px; }
#history .history-box .list-box dl dd ul li::before{ content: ""; display: inline-block; width: 2px; height: 2px; background: #222; border-radius: 50%; margin-right: 10px; position: relative; top: -5px; }

#history .history-box:nth-of-type(even) .flex-box{ flex-direction: row-reverse; }
#history .history-box:nth-of-type(even) .title-box figure{ border-radius: 20px 0 0 20px; }
#history .history-box:nth-of-type(even) .list-box{ padding-left: 0; padding-right: 60px; text-align: right; }

@media screen and (min-width: 1921px){
	#history section{ max-width: 1920px; width: 100%; margin: 0 auto; }
	#history .history-box .title-box figure{ border-radius: 20px; }
	#history .history-box:nth-of-type(even) .title-box figure{ border-radius: 20px; }
}

@media screen and (max-width: 1710px){
	#history .history-box .list-box{ width: calc(50% + 20px); padding-right: 20px; }
	#history .history-box:nth-of-type(even) .list-box{ padding-left: 20px; }
}

@media screen and (max-width: 1500px){
	#history .history-box .title-box .sticky{ top: 150px; }
	#history .history-box .title-box p{ font-size: 12rem; }

	#history .history-box .list-box{ padding-top: 30px; }
	#history .history-box .list-box dl dt{ font-size: 2.5rem; }
	#history .history-box .list-box dl dd ul li{ font-size: 1.8rem; }
}

@media screen and (max-width: 1200px){
	#history .history-box:not(:last-of-type){ padding-bottom: 100px; }
	#history .history-box .title-box p{ font-size: 8rem; }

	#history .history-box .list-box{ padding-left: 30px; }
	#history .history-box:nth-of-type(even) .list-box{ padding-right: 30px; }

	#history .history-box .list-box dl:not(:last-of-type){ margin-bottom: 40px; }
	#history .history-box .list-box dl dd ul li:not(:last-of-type){ margin-bottom: 6px; }
}

@media screen and (max-width: 1000px){
	#history .history-box .flex-box{ flex-direction: column; }
	#history .history-box:nth-of-type(even) .flex-box{ flex-direction: column; }
	#history .history-box .title-box{ width: 100%; }
	#history .history-box .title-box p{ margin: 0; padding: 0 20px; }
	#history .history-box:nth-of-type(even) .title-box p{ text-align: right; }

	#history .history-box .list-box{ max-width: 100%; width: 100%; }
	#history .history-box .list-box{ padding-left: 20px; }
	#history .history-box:nth-of-type(even) .list-box{ text-align: left; padding-right: 20px; }

	#history .history-box .title-box figure{ border-radius: 0; }
	#history .history-box:nth-of-type(even) .title-box figure{ border-radius: 0; }
}

@media screen and (max-width: 800px){
	#history .history-box .title-box p{ font-size: 6rem; }
	#history .history-box .list-box dl dt{ font-size: 2.2rem; }
	#history .history-box .list-box dl dd ul li{ font-size: 1.6rem; }
}


/* Company - Vision */
#vision .flex-box{ display: flex; justify-content: space-between; align-items: center; }

#vision .img-box{ width: 47%; }
#vision .img-box img{ border-radius: 20px; }

#vision .text-box{ width: calc(53% - 60px); }
#vision .text-box .title > span{ font-size: 1.8rem; font-weight: 400; }
#vision .text-box .title h4{ font-size: 4rem; font-weight: 700; margin: 10px 0 30px; }
#vision .text-box .content > p{ font-size: 1.8rem; font-weight: 400; line-height: 1.56; }

#vision .text-box ul{ display: flex; text-align: center; margin-top: 80px; }
#vision .text-box ul li{ position: relative; }
#vision .text-box ul li:not(:last-of-type){ padding-right: 100px; }
#vision .text-box ul li::after{ content: ""; width: 1px; height: 40px; background: #ddd; position: absolute; top: 50%; right: 50px; transform: translateY(-50%); }
#vision .text-box ul li:last-of-type::after{ display: none; }
#vision .text-box ul li span{ display: inline-block; font-size: 1.8rem; font-weight: 500; margin-top: 20px; }

@media screen and (max-width: 1500px){
	#vision .text-box{ width: calc(53% - 30px); }
	#vision .text-box .content > p{ font-size: 1.7rem; }

	#vision .text-box .title > span{ font-size: 1.7rem; }
	#vision .text-box .title h4{ font-size: 3.5rem; margin: 10px 0 20px; }

	#vision .text-box ul{ margin-top: 40px; }
	#vision .text-box ul li:not(:last-of-type){ padding-right: 60px; }
	#vision .text-box ul li::after{ right: 30px; }
	#vision .text-box ul li span{ font-size: 1.7rem; }
}

@media screen and (max-width: 1200px){
	#vision .flex-box{ flex-direction: column; }
	#vision .img-box{ width: 100%; text-align: center; }
	#vision .text-box{ width: auto; margin-top: 40px; }
	#vision .text-box .title h4{ font-size: 3rem; }
}

@media screen and (max-width: 800px){
	#vision .text-box .content > p{ font-size: 1.6rem; }
	#vision .text-box .title > span{ font-size: 1.6rem; }
	#vision .text-box ul li span{ font-size: 1.6rem; }
}

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


/* Business - 공통 */
/* #business .intro .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#business .intro .img-box{ width: 47%; }
#business .intro .img-box img{ border-radius: 20px; }
#business .intro .text-box{ width: calc(53% - 60px); }
#business .intro .text-box h5{ font-size: 4rem; font-weight: 700; text-transform: uppercase; }
#business .intro .text-box p{ font-size: 1.8rem; font-weight: 400; margin: 10px 0 40px; }
	
#business .intro .text-box dl:not(:last-of-type){ margin-bottom: 40px; }
#business .intro .text-box dl *{ font-size: 1.6rem; }
#business .intro .text-box dl dt{ font-weight: 500; color: #555; }
#business .intro .text-box dl dd{ font-weight: 400; padding-left: 10px; position: relative; line-height: 1.925; }
#business .intro .text-box dl dd::before{ content: ""; width: 2px; height: 2px; background: #555; border-radius: 50%; position: absolute; top: 14px; left: 0; } */

#business .flow .arrow, #business .flow .arrow ul{ display: flex; flex-wrap: wrap; gap: 95px 140px; }
/* #business .flow .arrow{ max-width: 1625px; } */
#business .flow .arrow:not(:last-of-type){ margin-bottom: 95px; }
#business .flow .arrow ul, #business .flow .arrow ul li, #business .flow .arrow .half{ width: calc((100% - 140px) / 2); }
#business .flow .arrow ul li, #business .flow .arrow .half{ padding: 25px; text-align: center; background: #F1F1F1; }
#business .flow .arrow ul li{  border-radius: 10px; position: relative; }
#business .flow .arrow ul li:nth-of-type(even){ background: rgba(227, 28, 45, 0.1); }
#business .flow .arrow ul li:nth-of-type(4n){ margin-right: 0; }
#business .flow .arrow ul li::before, #business .flow .arrow ul li::after{ content: ""; width: 70px; height: 110px; background: inherit; position: absolute; top: 50%; top: 50%; }
#business .flow .arrow ul li::before{ left: 0; transform: translate(-100%, -50%); clip-path: polygon(100% 10%, 100% 90%, 0 90%, 40% 50%, 0 10%); }
#business .flow .arrow ul li::after{ right: 0px; transform: translate(100%, -50%); clip-path: polygon(0 10%, 55% 10%, 55% 0, 100% 50%, 55% 100%, 55% 90%, 0 90%); }
#business .flow .arrow ul.odd li:first-of-type::before, #business .flow .arrow ul.even li:last-of-type::after{ display: none; }
#business .flow .arrow ul li figure img{ border-radius: 10px; }
#business .flow .arrow ul li p, #business .flow .arrow .half p{ font-size: 1.8rem; font-weight: 500; margin-top: 25px; }

#business .flow .reverse ul li:nth-of-type(odd){ background: rgba(227, 28, 45, 0.1); }
#business .flow .reverse ul li:nth-of-type(even){ background: #F1F1F1; }
#business .flow .reverse ul li::before{ clip-path: polygon(55% 0, 55% 10%, 100% 10%, 100% 90%, 55% 90%, 55% 99%, 0 50%); }
#business .flow .reverse ul li::after{ clip-path: polygon(100% 10%, 60% 50%, 100% 90%, 0 90%, 0 10%); }

#business .flow .half{ border-radius: 20px; }
#business .flow .half .figure{ display: flex; gap: 20px; }
#business .flow .half .figure figure{ width: calc((100% - 20px) / 2); }
#business .flow .half .figure figure img{ border-radius: 10px; }

#business .table-list thead th:nth-of-type(1){ width: 32%; }
#business .table-list thead th:nth-of-type(2){ width: 16.5%; }
#business .table-list thead th:nth-of-type(3){ width: 16.5%; }
#business .table-list thead th:nth-of-type(4){ width: 13%; }

@media screen and (max-width: 1500px){
	/* #business .intro .text-box h5{ font-size: 3rem; }
	#business .intro .text-box p{ margin-bottom: 20px; }
	#business .intro .text-box dl:not(:last-of-type){ margin-bottom: 30px; } */

	#business .flow .arrow:not(:last-of-type){ margin-bottom: 70px; }
	#business .flow .arrow, #business .flow .arrow ul{ gap: 70px 100px; }
	#business .flow .arrow ul, #business .flow .arrow ul li, #business .flow .arrow .half{ width: calc((100% - 100px) / 2); }
	#business .flow .arrow ul li::before, #business .flow .arrow ul li::after{ width: 50px; }
}

@media screen and (max-width: 1300px){
	#business .flow .arrow ul li, #business .flow .arrow .half{ padding: 20px; }
	#business .flow .arrow ul li p, #business .flow .arrow .half p{ margin-top: 20px; }
}

@media screen and (max-width: 1200px){
	/* #business .intro .text-box{ width: calc(53% - 30px); }
	#business .intro .text-box h5{ font-size: 2.5rem; }
	#business .intro .text-box p{ font-size: 1.7rem; margin-top: 5px; }
	#business .intro .text-box dl:not(:last-of-type){ margin-bottom: 20px; }
	#business .intro .text-box dl *{ font-size: 1.5rem; } */

	#business .flow .arrow:not(:last-of-type){ margin-bottom: 50px; }
	#business .flow .arrow, #business .flow .arrow ul{ gap: 50px 70px; }
	#business .flow .arrow ul, #business .flow .arrow ul li{ width: calc((100% - 70px) / 2); }
	#business .flow .arrow ul li::before, #business .flow .arrow ul li::after{ width: 35px; height: 80px; }

	#business .flow .arrow ul li p, #business .flow .arrow .half p{ font-size: 1.6rem; }
}

@media screen and (max-width: 1100px){
	#business .flow .arrow{ flex-direction: column; align-items: center; }
	#business .flow .arrow.reverse{ flex-direction: column-reverse; }

	#business .flow .arrow ul{ width: 100%; justify-content: center; }
	#business .flow .arrow ul li{ width: calc((100% - 70px) / 2); max-width: 300px; }
	
	#business .flow .origin ul.even{ flex-direction: row-reverse; }
	#business .flow .reverse ul.even{ flex-direction: row-reverse; }

	#business .flow .origin ul.odd li:nth-of-type(even)::after{ top: calc(100% - 23px); right: 50%; transform: translateX(50%) rotate(90deg); }
	#business .flow .origin ul.even li:nth-of-type(odd)::before{ clip-path: polygon(55% 0, 55% 10%, 100% 10%, 100% 90%, 55% 90%, 55% 99%, 0 50%); }
	#business .flow .origin ul.even li:nth-of-type(odd)::after{ display: none; }
	#business .flow .origin ul.even li:nth-of-type(even)::before{ left: calc(100% - 18px); transform: translate(50%, -50%); clip-path: polygon(100% 10%, 60% 50%, 100% 90%, 0 90%, 0 10%); }

	#business .flow .reverse ul.odd li:nth-of-type(even)::after{ display: none; }
	#business .flow .reverse ul.even li:nth-of-type(odd)::before{ clip-path: polygon(100% 10%, 100% 90%, 0 90%, 40% 50%, 0 10%); }
	#business .flow .reverse ul.even li:nth-of-type(odd)::after{ top: calc(100% - 23px); right: 50%; transform: translateX(50%) rotate(90deg); clip-path: polygon(0 10%, 55% 10%, 55% 0, 100% 50%, 55% 100%, 55% 90%, 0 90%); }
	#business .flow .reverse ul.even li:nth-of-type(even)::before{ display: none; }
	#business .flow .reverse ul.even li:nth-of-type(even)::after{ display: block; clip-path: polygon(0 10%, 55% 10%, 55% 0, 100% 50%, 55% 100%, 55% 90%, 0 90%); }

	#business .flow .arrow.half-wrap{ gap: 20px; }
	#business .flow .arrow .half{ max-width: 670px; width: 100%; }
}

@media screen and (max-width: 1000px){
	/* #business .intro .flex-box{ flex-direction: column; }
	#business .intro .img-box{ width: 100%; text-align: center; }
	#business .intro .text-box{ width: 100%; margin-top: 30px; } */

	#business .table-list thead{ display: none; }
	#business .table-list table tr{ display: flex; flex-direction: column; }
	#business .table-list table tr:not(:last-of-type){ margin-bottom: 20px; }
	#business .table-list td{ border-left: none; border-right: none; padding-left: calc(50% + 10px); position: relative; }
	#business .table-list td:not(:first-of-type){ border-top: none; }
	#business .table-list td::before{ content: ""; width: 50%; height: 100%; background: #F8F8F8; position: absolute; top: 0; left: 0; padding: 10px; box-sizing: border-box; }
	#business .table-list td::after{ position: absolute; top: 50%; width: 50%; left: 0; transform: translateY(-50%); font-weight: 500; }
	#business .table-list td:nth-of-type(1)::after{ content: "PROJECT NAME"; }
	#business .table-list td:nth-of-type(2)::after{ content: "COUNTRY CLIENT"; }
	#business .table-list td:nth-of-type(3)::after{ content: "ANNUAL PRODUCTION"; }
	#business .table-list td:nth-of-type(4)::after{ content: "MATERIAL"; }
	#business .table-list td:nth-of-type(5)::after{ content: "SUPPLY"; }
	#business .table-list td:nth-of-type(6)::after{ content: "COMPLETED"; }
}

@media screen and (max-width: 800px){
	/* #business .intro .text-box h5{ font-size: 2.2rem; } */
}

@media screen and (max-width: 570px){
	#business .flow .arrow ul li, #business .flow .arrow .half{ padding: 15px; }
	#business .flow .arrow ul li p, #business .flow .arrow .half p{ font-size: 1.5rem; margin-top: 15px; }
}


/* Business - Lithium Pulverization System */
#business.pulverization .flow .origin ul.even li:last-of-type::after{ display: block; right: 50%; top: calc(100% - 20px); transform: translateX(50%) rotate(90deg); }

@media screen and (max-width: 1500px){
	#business.pulverization .flow .origin ul.even li:last-of-type::after{ top: calc(100% - 30px); }
}

@media screen and (max-width: 1200px){
	#business.pulverization .flow .origin ul.even li:last-of-type::after{ top: calc(100% - 23px); }
}

/* Business - Ceramic Lining Inside Pipe */
#business.ceramic .flow .arrow:not(:last-of-type){ margin-bottom: 40px; }

/* Business - Lithium Drying System */
#business.drying .flow .origin ul.even li:last-of-type::after{ display: block; right: 50%; top: calc(100% - 20px); transform: translateX(50%) rotate(90deg); }
#business.drying .flow .reverse ul.odd{ justify-content: flex-end; }
#business.drying .flow .reverse ul.odd li:nth-of-type(odd){ background: #F8F8F8; }

@media screen and (max-width: 1500px){
	#business.drying .flow .origin ul.even li:last-of-type::after{ top: calc(100% - 30px); }
}

@media screen and (max-width: 1200px){
	#business.drying .flow .origin ul.even li:last-of-type::after{ top: calc(100% - 23px); }
}

@media screen and (max-width: 1100px){
	#business.drying .flow .reverse ul.odd{ max-width: 670px; }
	#business.drying .flow .reverse ul.odd li:nth-of-type(odd)::after{ display: none; }
}


/* Recruitment - Our Values */
#values ul{ display: flex; flex-wrap: wrap; margin-bottom: -30px; }
#values ul li{ width: calc((100% - 60px) / 3); margin-right: 30px; margin-bottom: 30px; overflow: hidden; border-radius: 20px; position: relative; }
#values ul li:nth-of-type(3n){ margin-right: 0; }
#values ul li img{ width: 100%; }
#values ul li .text{ position: absolute; bottom: 0; left: 0; right: 0; padding: 50px; color: #fff; }
#values ul li .text dl dt{ font-size: 4rem; font-weight: 700; margin-bottom: 10px; }
#values ul li .text dl dd{ font-size: 2rem; font-weight: 400; }

@media screen and (max-width: 1600px){
	#values ul li .text{ padding: 40px; }
}

@media screen and (max-width: 1500px){
	#values ul li .text{ padding: 30px; }
	#values ul li .text dl dt{ font-size: 3rem; margin-bottom: 5px; }
	#values ul li .text dl dd{ font-size: 1.8rem; }
}

@media screen and (max-width: 1200px){
	#values ul li .text{ padding: 20px; }
	#values ul li .text dl dt{ font-size: 2.5rem; }
	#values ul li .text dl dd{ font-size: 1.6rem; }
}

@media screen and (max-width: 1000px){
	#values ul li{ width: calc((100% - 30px) / 2); }
	#values ul li:nth-of-type(3n){ margin-right: 30px; }
	#values ul li:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 900px){
	#values ul li .text dl dt{ font-size: 2.3rem; }
}

@media screen and (max-width: 700px){
	#values ul{ justify-content: center; }
	#values ul li{ max-width: 546px; width: 100%; margin-right: 0; }
	#values ul li:nth-of-type(3n){ margin-right: 0; }
}


/* Recruitment - Employment */
#employment .banner{ background: url("/img/sub/recruitment/employment_bg01.jpg") no-repeat center center / cover; color: #fff; padding: 100px 80px; border-radius: 20px; margin-bottom: 180px; }
#employment .banner span{ font-size: 1.8rem; font-weight: 400; }
#employment .banner .sec-title{ margin-bottom: 0; }
#employment .banner h4{ margin-top: 10px; }

#employment #board h5{ font-size: 4rem; font-weight: 700; text-align: center;     text-transform: capitalize; margin-bottom: 100px; }  

@media screen and (max-width: 1500px){
	#employment .banner{ margin-bottom: 120px; }

	#employment #board h5{ font-size: 3.3rem; margin-bottom: 60px; }
}

@media screen and (max-width: 1200px){
	#employment .banner{ padding: 70px 50px; margin-bottom: 80px; }
	#employment .banner span{ font-size: 1.6rem; }	

	#employment #board h5{ font-size: 2.8rem; margin-bottom: 30px; }
}

@media screen and (max-width: 900px){
	#employment .banner{ padding: 45px 30px; }
	#employment #board h5{ font-size: 2.2rem; }
}

@media screen and (max-width: 700px){
	#employment #board br{ display: none; }
}

@media screen and (max-width: 500px){
	#employment .banner br{ display: none; }
}


/* Info Center - Info Center */
#info .intro .img-box{ width: 50%; }
#info .intro .text-box{ width: calc(50% - 60px); }

#info .certificate .title-box{ display: flex; justify-content: space-between; align-items: center; }
#info .certificate .sec-title{ margin-bottom: 0; }

#info .certificate .tab-content{ margin-top: 40px; }
#info .certificate .tab-content .tab:not(:first-of-type){ display: none; }
#info .certificate .certificate-list{ display: flex; flex-wrap: wrap; margin-bottom: -62px; }
#info .certificate .certificate-list li{ width: calc((100% - 248px) / 5); margin-right: 62px; margin-bottom: 62px; }
#info .certificate .certificate-list li:nth-of-type(5n){ margin-right: 0; }
#info .certificate .certificate-list li figure{ width: 100%; position: relative; overflow: hidden; border: 1px solid #DDD; padding-bottom: 139%; }
#info .certificate .certificate-list li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media screen and (max-width: 1500px){
	#info .certificate .certificate-list{ margin-bottom: -35px; }
	#info .certificate .certificate-list li{ width: calc((100% - 140px) / 5); margin-right: 35px; margin-bottom: 35px; }
}

@media screen and (max-width: 1280px){
	#info .certificate .certificate-list li{ width: calc((100% - 105px) / 4); }
	#info .certificate .certificate-list li:nth-of-type(5n){ margin-right: 35px; }
	#info .certificate .certificate-list li:nth-of-type(4n){ margin-right: 0; }
}

@media screen and (max-width: 1200px){
	#info .intro .text-box{ width: calc(50% - 30px); }
}

@media screen and (max-width: 1000px){
	#info .intro .img-box{ width: 100%; }
	#info .intro .text-box{ width: 100%; }

	#info .certificate .tab-content{ margin-top: 20px; }
	#info .certificate .certificate-list li{ width: calc((100% - 70px) / 3); }
	#info .certificate .certificate-list li:nth-of-type(4n){ margin-right: 35px; }
	#info .certificate .certificate-list li:nth-of-type(3n){ margin-right: 0; }
}

@media screen and (max-width: 900px){
	#info .certificate .tab-content{ margin-top: 10px; }
	#info .certificate .title-box{ flex-direction: column; align-items: flex-start; }
	#info .certificate .title-box .tab-menu{ width: 100%; margin-top: 20px; }
	#info .certificate .title-box .tab-menu ul{ justify-content: flex-end; }
}

@media screen and (max-width: 800px){
	#info .certificate .certificate-list li{ width: calc((100% - 35px) / 2); }
	#info .certificate .certificate-list li:nth-of-type(3n){ margin-right: 35px; }
	#info .certificate .certificate-list li:nth-of-type(2n){ margin-right: 0; }
}


/* Contact Us - Contact Us */
#contact .tab-menu ul{ justify-content: center; }

#contact .tab-content{ margin-top: 30px; }
#contact .tab-content .tab:not(:first-of-type){ display: none; }
#contact .iframe{ height: 500px; overflow: hidden; border-radius: 20px; }

#contact .text { margin-top: 40px; }
#contact .text .title{ margin-bottom: 30px; }
#contact .text .title p{ font-size: 1.8rem; font-weight: 400; line-height: 1.5; } 
#contact .text .title h4{ font-size: 3rem; font-weight: 700; margin-top: 10px; }

#contact .text ul{ display: flex; flex-wrap: wrap; margin-bottom: -60px; }
#contact .text ul li{ width: calc(100% / 3); padding-right: 16px; margin-bottom: 60px; position: relative; }
#contact .text ul li:nth-of-type(3n){ padding-right: 0; }
#contact .text ul li::before{ content: ""; width: 100%; height: 1px; background: #EEE; position: absolute; bottom: -30px; left: 0; }
#contact .text ul li .box{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 50px; border-radius: 20px; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.16); }
#contact .text dl *{ font-size: 1.8rem; font-weight: 400; line-height: 1.5; }
#contact .text dl dt{ font-weight: 700; margin-bottom: 10px; }
#contact .text ul li .icon{ margin-top: 30px; text-align: right; }

#contact .text ul li:nth-of-type(4)::before, #contact .text ul li:nth-of-type(5)::before, #contact .text ul li:nth-of-type(6)::before{ display: none; }

@media screen and (max-width: 1500px){
	#contact .text .title p{ font-size: 1.7rem; }
	#contact .text .title h4{ font-size: 2.5rem; } 

	#contact .text ul li .box{ padding: 40px; }
	#contact .text dl *{ font-size: 1.7rem; }
	#contact .text ul li .icon{ margin-top: 20px; }
}

@media screen and (max-width: 1200px){
	#contact .text .title p{ font-size: 1.6rem; }
	#contact .text .title h4{ font-size: 2.2rem; margin-top: 5px; } 

	#contact .text ul{ margin-bottom: -20px; }
	#contact .text ul li{ width: calc(100% / 2); margin-bottom: 40px; }
	#contact .text ul li::before{ bottom: -20px; }
	#contact .text ul li:nth-of-type(4)::before{ display: block; }
	#contact .text ul li:nth-of-type(3n){ padding-right: 16px; }
	#contact .text ul li:nth-of-type(2n){ padding-right: 0; }
	#contact .text ul li .box{ padding: 30px; }
	#contact .text dl *{ font-size: 1.6rem; }
	#contact .text dl dt{ margin-bottom: 5px; }
	#contact .text ul li .icon{ margin-top: 10px; }
}

@media screen and (max-width: 800px){
	#contact .text .title p{ font-size: 1.5rem; }
	#contact .text .title h4{ font-size: 2rem; }
}

@media screen and (max-width: 700px){
	#contact .iframe{ height: 300px; }
	#contact .text ul li .box{ padding: 25px; }
}