/* 서브 비주얼 이미지 */
#visual .bg1{ background: url("/img/sub/product_bg.jpg") no-repeat center center / cover; }
#visual .bg2{ background: url("/img/sub/rnd_bg.jpg") no-repeat center center / cover; }
#visual .bg3{ background: url("/img/sub/esg_bg.jpg") no-repeat center center / cover; }
#visual .bg4{ background: url("/img/sub/ir_bg.jpg") no-repeat center center / cover; }
#visual .bg5{ background: url("/img/sub/notice_bg.jpg") no-repeat center center / cover; }
#visual .bg6{ background: url("/img/sub/about_bg.jpg") no-repeat center center / cover; }


/* visual */
#visual{
	--before: scale(1.05);
}
#visual{ position: relative; text-align: center; }
#visual *{ color: #FFF; }
#visual .overflow{ overflow: hidden; }
#visual .bg{ min-height: 330px; max-height: 100vh; padding-bottom: 48.2925%; animation: bgScale 2s 0.3s linear both; }
#visual .text-box{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#visual .text-box h2{ --before: 30px; --after: -0.02em; font-family: var(--engFont); font-size: 12rem; font-weight: 400; letter-spacing: -0.02em; text-transform: uppercase; margin: 10px 0 30px; animation: letterSpacing 1s 0.5s both; }
#visual .block{ animation: fadeIn 1s 0.5s both; }
#visual .scrollDown{ margin: 0 auto; }

#visual.none{ padding-top: var(--headerH); }


/* lnb */
#lnb{ animation: textClip 1s 0.5s both; }
#lnb svg{ width: auto; height: auto; }
#lnb a{ font-family: var(--engFont); display: inline-block; font-size: 21px; font-weight: 400; color: #FFF; letter-spacing: -0.02em; padding: 20px 22px; position: relative; }

#lnb ul{ display: flex; justify-content: center; align-items: center; }
#lnb ul li{ margin: -20px 0; position: relative; }
#lnb ul li::before{ content: ""; width: 3px; height: 3px; background: #FFF; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
#lnb ul li:first-of-type::before{ display: none; }

#lnb ul li:last-of-type a::before{ content: ""; width: 3px; height: 3px; background: #FFF; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
#lnb ul li:last-of-type a:first-of-type::before{ display: none; }

#lnb .home a{ display: flex; }


/* lnb2 */
#lnb2{ background: #F4F4F4; position: absolute; bottom: 0; left: 0; right: 0; animation: textClip 1s 0.5s both; }
#lnb2 ul{ display: flex; }
#lnb2 ul li{ flex: 1 0 auto; }
#lnb2 ul li.all{ display: none; }
#lnb2 ul li a{ width: 100%; height: 80px; display: flex; justify-content: center; align-items: center; font-family: var(--engFont); font-size: 20px; font-weight: 500; color: #555; letter-spacing: -0.02em; padding: 0 5px; }

#lnb2 ul li.on{ background: #FFF; }
#lnb2 ul li.on a{ font-weight: 600; color: #111; }


/* common */
#sub{
	--subPt: 150px;
	--subPb: 200px;
	--green: #7DBB26;
	--orange: #F39A00;
}
#wrap article{ border-radius: 0 0 var(--secR) var(--secR); }
.sub-content{ padding: var(--subPt) 0 var(--subPb); }
.grayBg{ background: var(--grayBg); }
.eng{ font-family: var(--engFont) !important; }
.base{ font-size: 21px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.6; }


/* 간격 */
.pt120{ padding-top: 120px; }
.pb120{ padding-bottom: 120px; }


/* page-title */
.page-title{ letter-spacing: -0.02em; text-align: center; margin-bottom: 120px; }
.page-title span{ --before: 5px; --after: -0.02em; display: block; font-family: var(--engFont); font-size: 19px; font-weight: 500; color: var(--mainColor); margin-bottom: 15px; }
.page-title h3{ font-size: 6.4rem; font-weight: 600; color: #111; }

.page-title.aos-animate span{ animation: letterSpacing 0.8s both; }
.page-title.aos-animate h3{ animation: textClip 0.8s both; }


/* asterisk */
.asterisk-box{ margin-bottom: 80px; }
.asterisk-box > *:only-child{ margin-bottom: 0 !important; }
.asterisk{ font-family: var(--engFont); font-size: 32px; font-weight: 500; color: #111; letter-spacing: -0.02em; position: relative; padding-left: 50px; margin-bottom: 40px; }
.asterisk::before{ content: ""; width: 32px; height: 32px; background: url("/img/sub/asterisk.svg") no-repeat center center / contain; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

.asterisk.white{ font-weight: 400; color: #FFF; }
.asterisk.white::before{ filter: invert(1); -webkit-filter: invert(1); }


/* clipL, clipR */
.clipL,
.clipR{
	--round: 20px;
	--transition: 1s;
}
.clipL, 
.clipR{ opacity: 1 !important; transition-duration: var(--transition) !important; transition-property: clip-path !important; }
.clipL{ clip-path: inset(0 100% 0 0 round var(--round)); -webkit-clip-path: inset(0 100% 0 0 round var(--round)); }
.clipR{ clip-path: inset(0 0 0 100% round var(--round)); -webkit-clip-path: inset(0 0 0 100% round var(--round)); }

.clipL.aos-animate,
.clipR.aos-animate{ clip-path: inset(0 0 0 0 round var(--round)); -webkit-clip-path: inset(0 0 0 0 round var(--round)); }


/* tab-menu */
.tab-menu{ max-width: 1280px; margin: 0 auto; margin-bottom: 120px; }
.tab-menu ul{ display: flex; margin-bottom: -10px; }
.tab-menu ul li{ flex-grow: 1; margin-bottom: 10px; }
.tab-menu ul li:not(:last-of-type){ margin-right: 10px; }
.tab-menu ul li a{ min-height: 85px; display: flex; justify-content: center; align-items: center; background: var(--grayBg); border-radius: 10px; font-size: 21px; font-weight: 600; color: #CCC; letter-spacing: -0.02em; text-align: center; padding: 10px; }

.tab-menu ul li.on a{ background: var(--mainColor); color: #FFF; }


/* sticky-tab */
.sticky-tab{ position: sticky; position: -webkit-sticky; top: calc(var(--headerH) + 20px); left: 0; z-index: 100; margin-bottom: 40px; }
.sticky-tab ul{ max-width: max-content; display: flex; justify-content: center; background: #000; border-radius: 100px; margin: 0 auto; }
.sticky-tab ul li{ flex-grow: 1; width: 155px; height: 60px; display: flex; justify-content: center; align-items: center; font-size: 17px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; text-align: center; padding: 10px; opacity: 0.4; transition: opacity 0.3s; cursor: pointer; }
.sticky-tab ul li.on{ opacity: 1; }


/* scroll */
.scroll-x{ overflow-x: auto; overflow-y: clip; }
.scroll-y{ overflow-x: clip; overflow-y: auto; }
.scroll-x::-webkit-scrollbar, 
.scroll-y::-webkit-scrollbar{ width: 22px; height: 22px; }
.scroll-x::-webkit-scrollbar-thumb, 
.scroll-y::-webkit-scrollbar-thumb{ background: #000; background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }
.scroll-x::-webkit-scrollbar-track, 
.scroll-y::-webkit-scrollbar-track{ background: #EEE; background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }


/* table-box */
.table-box{
	--lrP: 10px;

	--thBg: #222;
	--thBorder: 2px solid #383838;
	--thSize: 19px;
	--thPtb: 20px;

	--tdSize: 17px;
	--tdPtb: 15px;
}
.table-box{ text-align: center; }
.table-box table{ clip-path: inset(0 0 0 0 round 20px); -webkit-clip-path: inset(0 0 0 0 round 20px); }
.table-box table th, 
.table-box table td{ font-family: var(--engFont); letter-spacing: -0.02em; }
.table-box table th{ font-size: var(--thSize); font-weight: 400; color: #FFF; padding: var(--thPtb) var(--lrP); border: var(--thBorder); border-left: none; }
.table-box table td{ font-size: var(--tdSize); font-weight: 300; color: #333; padding: var(--tdPtb) var(--lrP); }

.table-box table thead{ position: relative; }
.table-box table thead::after{ content: ""; width: 100%; height: 2px; background: #FFF; position: absolute; bottom: 0; left: 0; z-index: 100; }
.safari .table-box table thead::after{ display: none; }
.table-box table thead tr{ background: var(--thBg); }
.table-box table thead tr > *:last-child{ border-right: none; }

.table-box table tbody{ position: relative; z-index: 10; }
.table-box table tbody tr:not(:first-of-type){ border-top: 2px solid #FFF; }


/* gray-table */
.rightTxt{ font-size: 17px; font-weight: 300; color: #888; letter-spacing: -0.02em; text-align: right; margin-bottom: 20px; }

.gray-table{
	--padding: 25px;
	--border: 1px solid #E5E5E5;
	--thSize: 19px;
	--tdSize: 17px;
}
.gray-table{ letter-spacing: -0.02em; text-align: center; }
.gray-table table{ border-top: 1px solid #000; }
.gray-table table tr{ border-bottom: var(--border); }
.gray-table table th,
.gray-table table td{ font-size: var(--tdSize); font-weight: 300; color: #555; padding: var(--padding); }
.gray-table table thead th{ background: var(--grayBg); font-size: var(--thSize); font-weight: 500; color: #111; }

.gray-table .bT{ border-top: var(--border) !important; }
.gray-table .bR{ border-right: var(--border) !important; }
.gray-table .bB{ border-bottom: var(--border) !important; }
.gray-table .bL{ border-left: var(--border) !important; }



/* radius-table */
.radius-table{
	--pathClip: inset(0 0 0 0 round 20px);
	--tdMin: 75px;
	--thSize: 19px;
	--tdSize: 17px;
}
.radius-table{ text-align: center; overflow-x: auto; overflow-y: clip; }
.radius-table::-webkit-scrollbar{ width: 22px; height: 22px; }
.radius-table::-webkit-scrollbar-thumb{ background: #000; background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }
.radius-table::-webkit-scrollbar-track{ background: #EEE; background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }
.radius-table *{ font-family: var(--engFont); letter-spacing: -0.02em; }
.radius-table table{ clip-path: var(--pathClip); -webkit-clip-path: var(--pathClip); }
.radius-table tr:not(:last-child){ border-bottom: 2px solid #FFF; }
.radius-table th{ font-size: var(--thSize); font-weight: 400; color: #FFF; padding: 35px 10px; }
.radius-table td{ font-size: var(--tdSize); font-weight: 300; color: #555; }
.radius-table tbody tr{ background: var(--grayBg); }
.radius-table tbody tr:nth-of-type(even){ background: #EEE; }

.radius-table .min{ min-height: var(--tdMin); display: flex; flex-direction: column; justify-content: center; padding: 10px; }
.radius-table .blue{ background: var(--mainColor); }

.radius-table td sup {display:inline;}


.radius-table p.tb_text {text-align:left; font-size: var(--tdSize); margin-top:20px;}
.radius-table p.tb_text span.fc_red, .radius-table td span.fc_red {color:#ba0922;}


/* gradi-box */
.gradi-box{ display: grid; grid-template-columns: repeat(3, 1fr); margin: -25px; }
.gradi-box > div{ color: #FFF; margin: 25px; position: relative; }
.gradi-box > div::before{ content: ""; display: block; background: url("/img/sub/gradi_bg01.jpg") no-repeat center center / cover; border-radius: 20px; padding-bottom: 89%; }
.gradi-box > div:nth-of-type(2)::before{ background-image: url("/img/sub/gradi_bg02.jpg"); }
.gradi-box > div:nth-of-type(3)::before{ background-image: url("/img/sub/gradi_bg03.jpg"); }
.gradi-box dl{ display: flex; flex-direction: column; padding: 60px; letter-spacing: -0.02em; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.gradi-box dl dt{ flex: 1 0 auto; font-size: 32px; font-weight: 500; margin-bottom: 20px; }
.gradi-box dl dt span{ display: block; font-family: var(--engFont); font-size: 17px; font-weight: 400; margin-bottom: 15px; }
.gradi-box dl dt em{ display: block; font-family: var(--engFont); font-size: 17px; margin-top: 15px; }
.gradi-box dl dd{ font-size: 21px; font-weight: 400; line-height: 1.5; }


/* graySec */
.graySec{ background: var(--grayBg); border-radius: 20px; padding: 60px; }


/* check-list */
.check-list li{ font-size: 19px; font-weight: 300; color: #333; letter-spacing: -0.02em; padding-left: 35px; position: relative; }
.check-list li:not(:last-of-type){ margin-bottom: 15px; }
.check-list li::before{ content: ""; width: 20px; height: 20px; background: url("/img/sub/check_black.svg") no-repeat center center / contain; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

.check-list.blue li::before{ background: url("/img/sub/check_blue.svg") no-repeat center center / contain; }

.check-list.small li{ font-size: 17px; }


/* blue-list */
.blue-list ul{ display: grid; grid-template-columns: repeat(4, 1fr); margin: -10px; }
.blue-list ul li{ /* display: flex; flex-direction: column; */ background: #F4F5F9; border-radius: 20px; font-size: 19px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.5; padding: 40px; margin: 10px; }
.blue-list ul li *{ line-height: inherit; }
.blue-list ul li::before{ content: attr(data-num); flex: 1 0 auto; display: block; font-family: var(--engFont); font-weight: 500; color: var(--mainColor); line-height: 1.3; margin-bottom: 35px; }


/* color-diagram */
.color-diagram{ 
	--min: 100px;
	--left: 320px;
	--gapR: 120px;
	--gapT: 90px;
}
.color-diagram{ text-align: center; letter-spacing: -0.02em; }
.color-diagram .grid{ display: grid; grid-template-columns: var(--left) calc(100% - var(--left)); }
.color-diagram .grid:not(:last-of-type){ margin-bottom: 20px; }
.color-diagram .left{ min-height: var(--min); display: flex; flex-direction: column; justify-content: center; background: #222; border-radius: 100px; font-size: 23px; font-weight: 500; color: #FFF; padding: 10px; }
.color-diagram .grid:last-of-type .left{ border-radius: 20px; }
.color-diagram .right{ font-size: 19px; font-weight: 300; color: #333; padding-left: var(--gapR); position: relative; }
.color-diagram .right::before{ content: ""; width: 22px; height: 22px; background: url("/img/sub/esg/arrow_gray.svg") no-repeat center center / contain; position: absolute; top: 50%; left: calc(var(--gapR) / 2); transform: translate(-50%, -50%); }

.color-diagram .box{ min-height: var(--min); display: flex; flex-direction: column; justify-content: center; background: #FFF; border: 2px solid #E5E5E5; border-radius: 100px; padding: 10px; }
.grayBg .color-diagram .box{ border: none; }

.color-diagram .green{ background: var(--green) !important; border: none; color: #FFF !important; }
.color-diagram .orange{ background: var(--orange) !important; border: none; color: #FFF !important; }
.color-diagram .blue{ background: var(--mainColor) !important; border: none; color: #FFF !important; }
.color-diagram .gray{ background: var(--grayBg); border-radius: 20px; padding: 40px; }

.color-diagram .dl{ display: grid; grid-template-columns: repeat(3, 1fr); margin: -10px; }
.color-diagram .dl > *{ display: flex; flex-direction: column; margin: 10px; }
.color-diagram .dl > div{ justify-content: center; }
.color-diagram .dl dl dt{ min-height: var(--min); display: flex; flex-direction: column; justify-content: center; background: #222; border-radius: 100px; font-weight: 400; color: #FFF; padding: 10px; margin-bottom: 20px; }
.color-diagram .dl dl dd{ flex: 1 0 auto; }
.color-diagram .dl ul{ height: 100%; background: #FFF; border-radius: 20px; text-align: left; padding: 40px; }

.color-diagram .arrow{ margin-top: var(--gapT); }
.color-diagram .arrow .right::after{ content: ""; width: 30px; height: 30px; background: url("/img/sub/esg/arrow_blue.svg") no-repeat center center / contain; position: absolute; top: calc((var(--gapT) / 2) * -1); left: calc(50% + (var(--gapR) / 2)); transform: translate(-50%, -50%) rotate(180deg); }


/* certify-box */
.certify-box{ overflow: hidden; }
.certify-box .grid-box{ display: grid; grid-template-columns: calc(100% - 700px) 700px; }
.certify-box .text{ padding-right: 80px; }
.certify-box .text p:not(:last-of-type){ margin-bottom: 35px; }

.certify-box .img{ display: flex; flex-direction: column; justify-content: center; background: var(--grayBg); border-radius: 20px; text-align: center; padding: 50px; }
.certify-box .img ul{ display: flex; justify-content: center; }
.certify-box .img ul li{ max-width: calc((100% - 60px) / 2); margin-right: 60px; }
.certify-box .img ul li:last-of-type,
.certify-box .img ul li:nth-of-type(2n){ margin-right: 0; }
.certify-box .img p{ font-size: 17px; font-weight: 500; color: #333; letter-spacing: -0.02em; margin-top: 20px; }


/* target-list */
.target-list ul{ display: grid; grid-template-columns: repeat(6, calc(100% / 6)); margin: -10px; }
.target-list ul li{ margin: 10px; }
.target-list ul li a{ display: block; background: #F4F5F9; border-radius: 10px; font-size: 17px; font-weight: 500; color: #777; letter-spacing: -0.02em; text-align: center; padding: 20px; transition: color 0.3s; }
.target-list ul li a::after{ content: ""; display: inline-block; width: 10px; height: 10px; background: url("/img/sub/esg/target_blank.svg") no-repeat center center / contain; vertical-align: middle; margin-left: 10px; transform: translateY(-2px); filter: brightness(3.5); -webkit-filter: brightness(3.5); transition: filter 0.3s; }


/* circle-diagram */
.circle-diagram{ max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; text-align: center; }
.circle-diagram .item{ width: calc((100% - 140px) / 3); display: flex; flex-direction: column; align-items: center; margin-right: 70px; }
.circle-diagram .item:last-of-type{ margin-right: 0 !important; }
.circle-diagram .circle{ width: 100%; position: relative; margin-bottom: 40px; }
.circle-diagram .circle::before{ content: ""; display: block; padding-bottom: 100%; background: var(--color); opacity: 0.08; border-radius: 50%; }
.circle-diagram .item:nth-of-type(3) .circle::before{ opacity: 0.05; }
.circle-diagram .circle .text{ letter-spacing: -0.02em; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
.circle-diagram .circle .text h6{ font-size: 32px; font-weight: 700; color: var(--color); }
.circle-diagram .circle .text p{ font-family: var(--engFont); font-size: 20px; font-weight: 500; color: #CCC; letter-spacing: -0.02em; margin-top: 10px; }
.circle-diagram ul{ display: inline-block; text-align: left; }
.circle-diagram p{ font-size: 19px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.5; }


/* popup */
#popup{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 1000; display: none; }
#popup .blank{ width: 100%; height: 100%; }
#popup .inner{ width: 90%; background: #FFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media screen and (hover: hover){
	.target-list ul li:hover a{ color: #333; }
	.target-list ul li:hover a::after{ filter: unset; -webkit-filter: unset; }
}

@media screen and (max-width: 1700px){
	/* visual */
	#visual .text-box h2{ --before: 20px; }

	/* lnb */
	#lnb a{ font-size: 19px; }

	/* lnb2 */
	#lnb2 ul li a{ height: 65px; font-size: 18px; }

	/* common */
	#sub{
		--subPt: 100px;
		--subPb: 150px;
	}
	.base{ font-size: 19px; }

	/* 간격 */
	.pt120{ padding-top: 80px; }
	.pb120{ padding-bottom: 80px; }

	/* page-title */
	.page-title{ margin-bottom: 80px; }
	.page-title span{ font-size: 17px; }

	/* asterisk */
	.asterisk-box{ margin-bottom: 60px; }
	.asterisk{ font-size: 26px; padding-left: 40px; margin-bottom: 30px; }
	.asterisk::before{ width: 26px; height: 26px; }

	/* tab-menu */
	.tab-menu{ margin-bottom: 80px; }
	.tab-menu ul li a{ min-height: 70px; font-size: 19px; }

	/* sticky-tab */
	.sticky-tab{ margin-bottom: 40px; }
	.sticky-tab ul li{ width: 135px; height: 55px;}

	/* table-box */
	.table-box{
		--lrP: 10px;

		--thSize: 18px;
		--thPtb: 15px;

		--tdSize: 17px;
		--tdPtb: 10px;
	}

	/* gray-table */
	.rightTxt{ font-size: 16px; margin-bottom: 20px; }

	.gray-table{
		--padding: 20px;
		--thSize: 18px;
		--tdSize: 17px;
	}

	/* radius-table */
	.radius-table{
		--tdMin: 65px;
	}
	.radius-table th{ padding: 25px 10px; }

	/* gradi-box */
	.gradi-box dl{ padding: 40px; }
	.gradi-box dl dt{ font-size: 26px; }
	.gradi-box dl dt span{ font-size: 16px; }
	.gradi-box dl dt em{ font-size: 16px; }
	.gradi-box dl dd{ font-size: 19px; }

	/* graySec */
	.graySec{ padding: 40px; }

	/* check-list */
	.check-list li{ font-size: 18px; }

	/* blue-list */
	.blue-list ul li{ font-size: 18px; padding: 30px; }
	.blue-list ul li::before{ margin-bottom: 25px; }

	/* color-diagram */
	.color-diagram{ 
		--min: 85px;
		--left: 280px;
		--gapR: 80px;
		--gapT: 70px;
	}
	.color-diagram .left{ font-size: 21px; }
	.color-diagram .right{ font-size: 18px; }
	.color-diagram .dl ul{ padding: 30px; }
	.color-diagram .gray{ padding: 30px; }

	/* certify-box */
	.certify-box .grid-box{ grid-template-columns: calc(100% - 600px) 600px; }
	.certify-box .text{ padding-right: 60px; }
	.certify-box .text p:not(:last-of-type){ margin-bottom: 25px; }

	.certify-box .img{ padding: 35px; }
	.certify-box .img ul li{ max-width: calc((100% - 40px) / 2); margin-right: 40px; }

	/* target-list */
	.target-list ul li a{ padding: 17px; }

	/* circle-diagram */
	.circle-diagram .circle{ margin-bottom: 30px; }
	.circle-diagram .circle .text h6{ font-size: 28px; }
	.circle-diagram .circle .text p{ font-size: 19px; }
	.circle-diagram p{ font-size: 18px; }
}

@media screen and (max-width: 1400px){
	/* gradi-box */
	.gradi-box{ margin: -15px; }
	.gradi-box > div{ margin: 15px; }

	/* blue-list */
	.blue-list ul{ display: grid; grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 1280px){
	/* visual */
	#visual .text-box h2{ --before: 10px; font-size: 10rem; margin: 10px 0 20px; }
	
	/* lnb */
	#lnb svg{ height: 15px; }
	#lnb ul li{ margin: -15px 0; }
	#lnb a{ font-size: 17px; padding: 15px; }

	/* lnb2 */
	#lnb2 ul li a{ height: 55px; font-size: 16px; }

	/* common */
	#sub{
		--subPt: 50px;
		--subPb: 100px;
	}
	.base{ font-size: 17px; }

	/* 간격 */
	.pt120{ padding-top: 60px; }
	.pb120{ padding-bottom: 60px; }

	/* page-title */
	.page-title{ margin-bottom: 40px; }
	.page-title span{ font-size: 15px; margin-bottom: 10px; }

	/* asterisk */
	.asterisk-box{ margin-bottom: 30px; }
	.asterisk{ font-size: 23px; padding-left: 33px; margin-bottom: 25px; }
	.asterisk::before{ width: 23px; height: 23px; }

	/* tab-menu */
	.tab-menu{ margin-bottom: 40px; }
	.tab-menu ul li a{ min-height: 60px; font-size: 17px; }

	/* sticky-tab */
	.sticky-tab{ margin-bottom: 20px; }
	.sticky-tab ul li{ width: 110px; height: 50px; font-size: 16px; }

	/* table-box */
	.table-box{
		--thSize: 17px;
		--tdSize: 16px;
	}

	/* gray-table */
	.rightTxt{ font-size: 15px; margin-bottom: 10px; }

	.gray-table{
		--padding: 12px;
		--thSize: 17px;
		--tdSize: 16px;
	}
	.gray-table table th,
	.gray-table table td{ padding: var(--padding) 10px; }

	/* radius-table */
	.radius-table{
		--tdMin: 55px;
		--thSize: 18px;
		--tdSize: 16px;
	}
	.radius-table th{ padding: 15px 10px; }

	/* gradi-box */
	.gradi-box{ margin: -15px; }
	.gradi-box > div{ margin: 15px; }
	.gradi-box dl{ padding: 30px; }
	.gradi-box dl dt{ font-size: 22px; }
	.gradi-box dl dt span{ font-size: 15px; margin-bottom: 10px; }
	.gradi-box dl dt em{ font-size: 15px; margin-top: 5px; }
	.gradi-box dl dd{ font-size: 17px; }

	/* graySec */
	.graySec{ padding: 25px; }

	/* check-list */
	.check-list li{ font-size: 17px; padding-left: 25px; }
	.check-list li:not(:last-of-type){ margin-bottom: 10px; }
	.check-list li::before{ width: 17px; height: 17px; }

	.check-list.small li{ font-size: 16px; }

	/* blue-list */
	.blue-list ul li{ font-size: 17px; padding: 20px; }
	.blue-list ul li::before{ margin-bottom: 15px; }

	/* color-diagram */
	.color-diagram{ 
		--min: 65px;
		--left: 200px;
		--gapR: 60px;
		--gapT: 50px;
	}
	.color-diagram .left{ font-size: 19px; }
	.color-diagram .right{ font-size: 17px; }
	.color-diagram .right::before{ width: 20px; height: 20px; }
	.color-diagram .gray{ padding: 20px; }

	.color-diagram .dl dl dt{ margin-bottom: 10px; }
	.color-diagram .dl ul{ padding: 20px; }

	.color-diagram .arrow .right::after{ width: 25px; height: 25px; }

	/* certify-box */
	.certify-box .grid-box{ grid-template-columns: calc(100% - 500px) 500px; }
	.certify-box .text{ padding-right: 40px; }
	.certify-box .text p:not(:last-of-type){ margin-bottom: 15px; }

	.certify-box .img{ padding: 25px; }
	.certify-box .img ul li{ max-width: calc((100% - 30px) / 2); margin-right: 30px; }
	.certify-box .img p{ font-size: 16px; margin-top: 10px; }

	/* target-list */
	.target-list ul{ grid-template-columns: repeat(6, calc(100% / 6)); margin: -5px; }
	.target-list ul li{ margin: 5px; }
	.target-list ul li a{ font-size: 16px; padding: 15px; }
	.target-list ul li a::after{ margin-left: 7px; }

	/* circle-diagram */
	.circle-diagram .circle{ margin-bottom: 20px; }
	.circle-diagram .circle .text h6{ font-size: 24px; }
	.circle-diagram .circle .text p{ font-size: 17px; }
	.circle-diagram p{ font-size: 17px; }
}

@media screen and (max-width: 1200px){
	/* target-list */
	.target-list ul{ grid-template-columns: repeat(3, calc(100% / 3)); }
}

@media screen and (max-width: 1100px){
	/* color-diagram */
	.color-diagram{
		--min: auto;
	}
	.color-diagram .grid{ grid-template-columns: repeat(1, 1fr); }
	.color-diagram .grid:not(:last-of-type){ margin-bottom: 30px; }
	.color-diagram .left{ border-radius: 100px !important; padding: 15px; }
	.color-diagram .right{ padding-left: 0; padding-top: 10px; }
	.color-diagram .right::before{ display: none; }
	.color-diagram .box{ padding: 20px; }

	.color-diagram .dl dl dt{ padding: 15px; }

	.color-diagram .arrow{ position: relative; }
	.color-diagram .arrow::after{ content: ""; width: 25px; height: 25px; background: url("/img/sub/esg/arrow_blue.svg") no-repeat center center / contain; position: absolute; top: calc((var(--gapT) / 2) * -1); left: 50%; transform: translate(-50%, -50%) rotate(180deg); }
	.color-diagram .arrow .right::after{ display: none; }

	/* certify-box */
	.certify-box .grid-box{ grid-template-columns: repeat(1, 1fr); }
	.certify-box .text{ padding-right: 0; padding-bottom: 30px; }
}

@media screen and (max-width: 1000px){
	/* gradi-box */
	.gradi-box{ grid-template-columns: repeat(1, 1fr); margin: -10px; }
	.gradi-box > div{ margin: 10px; position: relative; z-index: 10; transition-delay: unset !important; }
	.gradi-box > div::before{ width: 100%; height: 100%; padding-bottom: 0; position: absolute; top: 0; left: 0; }
	.gradi-box dl{ position: relative; }
	.gradi-box dl dt{ font-size: 21px; margin-bottom: 30px; }

	/* blue-list */
	.blue-list ul{ display: grid; grid-template-columns: repeat(2, 1fr); }

	/* circle-diagram */
	.circle-diagram .item{ width: calc((100% - 80px) / 3); margin-right: 40px; }
}

@media screen and (max-width: 900px){
	/* visual */
	#visual .text-box{ padding-top: calc(var(--headerH) - 20px); }

	/* lnb */
	#lnb a{ font-size: 15px; }

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

	/* tab-menu */
	.tab-menu ul li a{ min-height: 50px; }

	/* color-diagram */
	.color-diagram .right{ font-size: 16px; }
	.color-diagram .dl{ grid-template-columns: repeat(1, 1fr); margin: -5px; }
	.color-diagram .dl > *{ margin: 5px; }
	.color-diagram .dl dl{ flex-direction: row; justify-content: space-between; }
	.color-diagram .dl dl dt{ width: 130px; margin-bottom: 0; margin-right: 10px; border-radius: 20px; padding: 10px; }
	.color-diagram .dl dl dd{ width: calc(100% - 140px); }
	.color-diagram .dl ul{ padding: 15px 20px; }  
	.color-diagram .dl ul li{ font-size: 16px; }

	/* circle-diagram */
	.circle-diagram .item{ width: calc((100% - 40px) / 3); margin-right: 20px; }
	.circle-diagram .circle .text h6{ font-size: 20px; }
	.circle-diagram .circle .text p{ margin-top: 5px; }
}

@media screen and (max-width: 750px){
	/* circle-diagram */
	.circle-diagram{ max-width: 90%; }
	.circle-diagram .item{ width: 100%; margin-right: 0; }
	.circle-diagram .item:not(:last-of-type){ margin-bottom: 40px; }
	.circle-diagram .circle::before{ width: 100%; height: 100%; padding-bottom: 0; position: absolute; top: 0; left: 0; border-radius: 100px; }
	.circle-diagram .circle .text{ padding: 15px 20px; position: static; transform: unset; }
}

@media screen and (max-width: 650px){
	/* blue-list */
	.blue-list ul{ display: grid; grid-template-columns: repeat(1, 1fr); }

	/* target-list */
	.target-list ul{ grid-template-columns: repeat(2, calc(100% / 2)); }
}

@media screen and (max-width: 600px){
	/* sticky-tab */
	.sticky-tab ul{ padding: 0 10px; }
}


/* About Us - 인사말 */
#greeting{  }
#greeting .top{ min-height: 450px; display: flex; flex-direction: column; justify-content: center; background: url("/img/sub/about/greeting_bg.jpg") no-repeat center center / cover; text-align: center; padding: 30px; }
#greeting .top > div{ opacity: 0; transform: translateY(var(--aosPlus)); transition: opacity 0.6s 0.5s, transform 0.6s 0.5s; }
#greeting .top h4{ font-size: 5rem; font-weight: 600; color: #FFF; letter-spacing: -0.02em; line-height: 1.5; }
#greeting .top.aos-animate > div{ opacity: 1; transform: translateY(0); }

#greeting .bottom p{ font-size: 23px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.6; }
#greeting .bottom p:not(:last-of-type){ margin-bottom: 60px; }
#greeting .bottom p strong{ font-weight: 600; color: #111; }

@media screen and (max-width: 1700px){
	#greeting .top{ min-height: 350px; }
	#greeting .bottom p{ font-size: 21px; }
	#greeting .bottom p:not(:last-of-type){ margin-bottom: 40px; }
}

@media screen and (max-width: 1400px){
	#greeting .bottom br{ display: none; }
}

@media screen and (max-width: 1280px){
	#greeting .top{ min-height: 250px; }
	#greeting .bottom p{ font-size: 19px; }
	#greeting .bottom p:not(:last-of-type){ margin-bottom: 20px; }
}

@media screen and (max-width: 900px){
	#greeting .top{ min-height: 200px; }
	#greeting .pt120{ padding-top: 30px; }
	#greeting .bottom p{ font-size: 17px; }
}


/* About Us - 연혁 */
#history{
	--width: 740px;
	--ptb: 120px;
	--plr: 40px;
}
#history .clipL{ --radius: 15px; }

#history .history{ position: relative; }
#history .history section:not(:last-child){ padding-bottom: 240px; }
#history .grid{ display: grid; grid-template-columns: calc(100% - var(--width)) var(--width); }
#history .left{ padding-right: calc(var(--plr) * 2); }

#history .bar{ width: 2px; height: 100%; background: #E5E5E5; position: absolute; top: 0; right: var(--width); }
#history .bar div{ height: 0; background: var(--mainColor); }

#history .sticky{ max-width: 700px; width: 100%; position: sticky; position: -webkit-sticky; top: calc(50% - (var(--stickyH) / 2)); left: 0; }
#history .sticky h4{ font-family: var(--engFont); font-size: 5.4rem; font-weight: 500; color: var(--mainColor); margin-bottom: 40px; }
#history .sticky figure,
#history .sticky img{ width: 100%; }
#history .sticky figure{ border-radius: 15px; overflow: hidden; }

#history .right{ padding-top: var(--ptb); }
#history .right dl{ padding-left: var(--plr); position: relative; opacity: 1; }
#history .right dl:not(:last-of-type){ padding-bottom: var(--ptb); }
#history .right dl > *{ opacity: 0; transform: translateY(var(--aosPlus)); transition: opacity 1s, transform 1s; }
#history .right dl dt{ font-family: var(--engFont); font-size: 28px; font-weight: 400; color: #111; margin-bottom: 20px; position: relative; }
#history .right dl dt i{ width: 20px; height: 20px; background: #FFF; border: 2px solid #E5E5E5; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: calc((var(--plr) * -1) - 1px); transform: translate(-50%, -50%); transition: border-color 0.4s; }
#history .right dl dt i::before{ content: ""; width: 6px; height: 6px; background: #E5E5E5; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: background 0.4s; }
#history .right dl dd{ font-size: 21px; font-weight: 300; color: #333; }
#history .right dl dd:not(:last-of-type){ margin-bottom: 10px; }

#history .right dl.aos-animate > *{ opacity: 1; transform: translateY(0); }
#history .right dl.on dt i{ border-color: var(--mainColor); }
#history .right dl.on dt i::before{ background: var(--mainColor); }

@media screen and (max-width: 1700px){
	#history{
		--width: 600px;
		--ptb: 100px;
	}
	#history .history section:not(:last-child){ padding-bottom: 180px; }

	#history .sticky h4{ margin-bottom: 30px; }

	#history .right dl dt{ font-size: 24px; }
	#history .right dl dd{ font-size: 19px; }
}

@media screen and (max-width: 1280px){
	#history{
		--width: 45%;
		--ptb: 70px;
		--plr: 25px;
	}

	#history .history section:not(:last-child){ padding-bottom: 120px; }

	#history .sticky h4{ margin-bottom: 20px; }

	#history .right dl dt{ font-size: 22px; margin-bottom: 10px; }
	#history .right dl dt i{ width: 16px; height: 16px; }
	#history .right dl dt i::before{ width: 4px; height: 4px; }
	#history .right dl dd{ font-size: 18px; }
}

@media screen and (max-width: 1000px){
	#history{
		--ptb: 40px;
		--plr: 20px;
	}
	#history .history section:not(:last-child){ padding-bottom: 80px; }
	#history .bar{ right: calc(100% - 8px); }

	#history .sticky h4{ margin-bottom: 15px; }

	#history .grid{ grid-template-columns: repeat(1, 100%); padding-left: 8px; }
	#history .grid .left{ padding: 0; padding-left: var(--plr); }

	#history .right dl dt{ font-size: 20px; }
	#history .right dl dd{ font-size: 17px; }
}


/* About Us - CI */
#ci .ci .flex-box{ display: flex; justify-content: space-between; }
#ci .ci .flex-box > div{ width: calc((100% - 120px) / 2); }
#ci .ci .img{ display: flex; justify-content: center; align-items: center; background: var(--grayBg); padding: 70px; }

#ci .ci .text{ padding: 50px 0; }
#ci .ci .text .page-title{ text-align: left; margin-bottom: 60px; }
#ci .ci .text h4{ font-size: 36px; font-weight: 500; color: #111; letter-spacing: -0.02em; }
#ci .ci .text .p-box p{ font-size: 21px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.6; }
#ci .ci .text .p-box p:not(:last-of-type){ margin-bottom: 30px; }


#ci .color .grid-box{ display: grid; grid-template-columns: repeat(4, 1fr); margin: -20px; }
#ci .color .item{ text-align: center; margin: 20px; }
#ci .color .item .bg{ height: 120px; border-radius: 20px; }
#ci .color .item dl dt{ font-size: 23px; font-weight: 500; color: #111; letter-spacing: -0.02em; margin: 40px 0; }
#ci .color .item ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: -3px; }
#ci .color .item ul li{ border: 2px solid #E5E5E5; border-radius: 100px; font-size: 18px; font-weight: 600; color: #CCC; letter-spacing: -0.02em; line-height: 1; padding: 7px 15px; margin: 3px; }

@media screen and (max-width: 1700px){
	#ci .ci .text .page-title{ margin-bottom: 40px; }
	#ci .ci .text h4{ font-size: 30px; }
	#ci .ci .text .p-box p{ font-size: 19px; }

	#ci .color .item .bg{ height: 100px; }
	#ci .color .item dl dt{ font-size: 21px; margin: 30px 0; }
	#ci .color .item ul li{ font-size: 17px; padding: 4px 12px; }
}

@media screen and (max-width: 1400px){
	#ci .ci br{ display: none; }
	#ci .ci .flex-box > div{ width: calc((100% - 70px) / 2); }

	#ci .color .grid-box{ margin: -20px -15px; }
	#ci .color .item{ margin: 20px 15px; }
}

@media screen and (max-width: 1280px){
	#ci .ci .text{ padding: 30px 0; }
	#ci .ci .text .page-title{ margin-bottom: 20px; }
	#ci .ci .text h4{ font-size: 26px; }
	#ci .ci .text .p-box p{ font-size: 17px; }
	#ci .ci .text .p-box p:not(:last-of-type){ margin-bottom: 15px; }

	#ci .color .item dl dt{ font-size: 19px; margin: 20px 0 15px; }
	#ci .color .item ul li{ font-size: 16px; padding: 4px 10px; }
}

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

@media screen and (max-width: 1000px){
	#ci .ci .flex-box{ flex-direction: column; }
	#ci .ci .flex-box > div{ width: 100%; }
	#ci .ci .img{ padding: 50px 100px; }
	#ci .ci .text{ padding-bottom: 0; }
}

@media screen and (max-width: 900px){
	#ci .ci .text h4{ font-size: 24px; }

	#ci .color .item dl dt{ margin: 15px 0 10px; }
	#ci .color .item ul{ margin: -3px -2px; }
	#ci .color .item ul li{ font-size: 15px; padding: 4px 7px; margin: 3px 2px; }
}

@media screen and (max-width: 600px){
	#ci .color .grid-box{ margin: -20px -10px; }
	#ci .color .item{ margin: 20px 10px; }
}


/* About Us - 비전 */
#vision{ overflow: hidden; }
#vision .vision .diagram{ max-width: 1280px; margin: 0 auto; text-align: center; }
#vision .vision .diagram h5{ font-size: 5rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 80px; }
#vision .vision .diagram ul{ position: relative; z-index: 10; padding-top: 120px; } 
#vision .vision .diagram ul::before,
#vision .vision .diagram ul::after{ content: ""; width: 84.4%; position: absolute; left: 50%; z-index: -1; transform: translateX(-50%); }
#vision .vision .diagram ul::before{ height: calc(100% - 3px); background: rgba(var(--mainRGB), 0.05); clip-path: polygon(50% 100%, 0 0, 100% 0); -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); top: 3px; }
#vision .vision .diagram ul::after{ height: 3px; background: var(--mainColor); top: 0; }  
#vision .vision .diagram ul li{ min-height: 100px; display: flex; justify-content: center; align-items: center; background: #324566; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25); border-radius: 10px; font-size: 21px; font-weight: 300; color: #FFF; letter-spacing: -0.02em; line-height: 1.5; padding: 10px 15px; }
#vision .vision .diagram ul li:not(:last-of-type){ margin-bottom: 20px; }

#vision .mission .gradi-box > div:nth-of-type(1)::before{ background-image: url("/img/sub/about/mission_img01.jpg"); }
#vision .mission .gradi-box > div:nth-of-type(2)::before{ background-image: url("/img/sub/about/mission_img02.jpg"); }
#vision .mission .gradi-box > div:nth-of-type(3)::before{ background-image: url("/img/sub/about/mission_img03.jpg"); }

@media screen and (max-width: 1700px){
	#vision .vision .diagram h5{ margin-bottom: 60px; }
	#vision .vision .diagram ul{ padding-top: 90px; }
	#vision .vision .diagram ul li{ min-height: 90px; font-size: 19px; }
}

@media screen and (max-width: 1280px){
	#vision .vision .diagram h5{ margin-bottom: 30px; }
	#vision .vision .diagram ul{ padding-top: 60px; }
	#vision .vision .diagram ul li{ min-height: 80px; font-size: 17px; }
	#vision .vision .diagram ul li:not(:last-of-type){ margin-bottom: 10px; }
}

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

@media screen and (max-width: 900px){
	#vision .vision .diagram h5{ font-size: 4.5rem; margin-bottom: 20px; }
	#vision .vision .diagram ul{ padding-top: 40px; }
}

@media screen and (max-width: 750px){
	#vision .value br{ display: block; }
}


/* About Us - 찾아오시는 길 */
#location .section-box section:not(:last-of-type){ border-bottom: 1px solid #E5E5E5; }
#location .flex-box{ display: flex; }
#location .map{ width: calc(100% - 640px); }
#location .map .iframe{ position: relative; padding-bottom: 53.705%; }
#location .map iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

#location .text{ width: 640px; padding-right: 80px; }
#location .text h4{ font-size: 36px; font-weight: 500; color: #111; letter-spacing: -0.02em; padding-left: 50px; margin-bottom: 30px; position: relative; }
#location .text h4::before{ content: ""; width: 31px; height: 35px; background: url("/img/sub/about/marker_icon.svg") no-repeat center center / contain; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#location .text p{ font-size: 23px; font-weight: 300; color: #111; letter-spacing: -0.02em; line-height: 1.5; }
#location .text address{ margin-top: 60px; }
#location .text address dl:not(:last-of-type){ margin-bottom: 15px; }
#location .text dl{ display: flex; align-items: baseline; font-family: var(--engFont); font-size: 19px; letter-spacing: -0.02em; padding-left: 13px; position: relative; }
#location .text dl::before{ content: ""; width: 3px; height: 3px; background: var(--mainColor); border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#location .text dl dt{ width: 100px; font-weight: 500; color: #111; }
#location .text dl dd{ width: calc(100% - 100px); font-weight: 300; color: #555; }

@media screen and (max-width: 1700px){
	#location .map{ width: calc(100% - 550px); }

	#location .text{ width: 550px; }
	#location .text h4{ font-size: 30px; margin-bottom: 20px; padding-left: 40px; }
	#location .text h4::before{ width: 26px; height: 29px; }
	#location .text p{ font-size: 21px; }
	#location .text address{ margin-top: 40px; }
}

@media screen and (max-width: 1280px){
	#location .map{ width: calc(100% - 470px); }

	#location .text{ width: 470px; padding-right: 40px; }
	#location .text h4{ font-size: 26px; margin-bottom: 10px; padding-left: 30px; }
	#location .text h4::before{ width: 21px; height: 23px; }
	#location .text p{ font-size: 19px; }
	#location .text address{ margin-top: 20px; }
	#location .text address dl:not(:last-of-type){ margin-bottom: 10px; }
	#location .text dl{ font-size: 17px; }
	#location .text dl dt{ width: 80px; }
	#location .text dl dd{ width: calc(100% - 80px); }
}

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

	#location .text{ width: 100%; padding-right: 0; padding-top: 20px; }
}

@media screen and (max-width: 900px){
	#location .text h4{ font-size: 23px; padding-left: 25px; }
	#location .text h4::before{ width: 18px; height: 21px; top: calc(1.2em / 2); }
	#location .text p{ font-size: 18px; }
	#location .text dl dt{ width: 65px; }
	#location .text dl dd{ width: calc(100% - 65px); }
}


/* products - product-list (공통) */
.product-list{ display: flex; flex-wrap: wrap; }
.product-list .item{ border-radius: 20px; overflow: hidden; }
.product-list .item dl{ padding: 60px; }

/* products - type01 */
.product-list.type01{ justify-content: space-between; margin-bottom: -80px; }
.product-list.type01 .item{ align-content: flex-end; width: calc((100% - 80px) / 2); margin-bottom: 80px; position: relative; clip-path: inset(0 100% 0 0 round 20px); -webkit-clip-path: inset(0 100% 0 0 round 20px); transition: clip-path 1s; }
.product-list.type01 .item *{ color: #FFF;  letter-spacing: -0.02em; }
.product-list.type01 .item a{ display: flex; flex-direction: column; justify-content: flex-end; height: 100%; background: transparent; position: relative; transition: background 0.5s; }
.product-list.type01 .item figure{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.product-list.type01 .item figure img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 0.5s; }
.product-list.type01 .item i{ width: 80px; height: 80px; background: #FFF; border-radius: 50%; padding: 30px; position: absolute; top: 40px; right: 40px; }
.product-list.type01 .item i::before{ content: ""; display: inline-block; width: 100%; height: 100%; background: url("/img/sub/product/type01_arrow.svg") no-repeat center center / contain; filter: brightness(100) invert(1); -webkit-filter: brightness(100) invert(1); transform: rotate(0); transition: fill 0.5s, transform 0.5s; }
.product-list.type01 .item dl{ position: relative; }
.product-list.type01 .item dl dt{ font-family: var(--engFont); font-size: 4.8rem; font-weight: 500; margin-top: 190px; }
.product-list.type01 .item dl dt em{ background: linear-gradient(to top, #FFF 0 3px, transparent 3px 100%) no-repeat bottom left; background-size: 0 auto !important; transition: background-size 0.5s; }
.product-list.type01 .item dl dd{ font-size: 19px; font-weight: 500; line-height: 1.5; margin-top: 30px; opacity: 0.8; transition: opacity 0.5s; }
.product-list.type01 .item dl dd p{ line-height: inherit; }

.product-list.type01 .item.aos-animate{ clip-path: inset(0 0 0 0 round 20px); -webkit-clip-path: inset(0 0 0 0 round 20px); }


/* products - type02 */
.product-list.type02{ font-family: var(--engFont); margin-bottom: -40px; }
.product-list.type02 .item{ width: calc((100% - 80px) / 3); background: var(--grayBg); margin-right: 40px; margin-bottom: 40px; transition: background 0.5s, transform 1s, opacity 1s; }
.product-list.type02 .item:nth-of-type(3n){ margin-right: 0; }
.product-list.type02 .item dl{ height: 100%; display: flex; flex-direction: column; }
.product-list.type02 .item dl dt{ flex: 1 0 auto; font-size: 34px; font-weight: 500; color: #111; letter-spacing: -0.02em; margin-bottom: 55px; transition: color 0.5s; }
.product-list.type02 .item dl dt::before{ content: attr(data-index); display: block; font-size: 19px; margin-bottom: 10px; }
.product-list.type02 .item ul{ margin: -5px 0; }
.product-list.type02 .item ul li{ opacity: 1; transition: opacity 0.5s; }
.product-list.type02 .item ul li a{ display: block; font-size: 19px; font-weight: 300; color: #CCC; letter-spacing: -0.02em; padding: 5px 0; padding-left: 15px; position: relative; transition: color 0.5s; }
.product-list.type02 .item ul li a::before{ content: ""; width: 4px; height: 4px; background: #CCC; border-radius: 50%; position: absolute; top: calc((1.3em / 2) + 5px); left: 0; transform: translateY(-50%); transition: background 0.5s; }
.product-list.type02 .item ul li span{ display: inline-block; width: max-content; }
.product-list.type02 .item ul li span::after{ content: ""; display: inline-block; width: 9px; height: 9px; background: url("/img/sub/product/type02_arrow.svg") no-repeat center center / contain; vertical-align: middle; margin-top: -3px; margin-left: 3px; filter: unset; -webkit-filter: unset; transform: rotate(0); transition: filter 0.5s, transform 0.5s; }
.product-list.type02 .item ul li span:not(:last-of-type)::after{ display: none; }


@media screen and (hover: hover){
	/* products - type01 */
	.product-list.type01 .item:hover a{ background: var(--mainColor); }
	.product-list.type01 .item:hover figure img{ transform: scale(1.1); }
	.product-list.type01 .item:hover i::before{ filter: unset; -webkit-filter: unset; transform: rotate(45deg); }
	.product-list.type01 .item:hover dl dt em{ background-size: 100% auto !important; }
	.product-list.type01 .item:hover dl dd{ opacity: 1; }

	/* products - type02 */
	.product-list.type02 .item:hover{ background: var(--mainColor); }
	.product-list.type02 .item:hover dt, 
	.product-list.type02 .item:hover ul li a{ color: #FFF; }
	.product-list.type02 .item:hover ul li{ opacity: 0.3; }
	.product-list.type02 .item:hover ul li a::before{ background: #FFF; }
	.product-list.type02 .item:hover ul li span::after{ filter: brightness(2); -webkit-filter: brightness(2); }

	.product-list.type02 .item ul li:hover{ opacity: 1; }
	.product-list.type02 .item ul li:hover span::after{ transform: rotate(45deg); }
}

@media screen and (max-width: 1700px){
	/* products - product-list (공통) */
	.product-list .item dl{ padding: 40px; }

	/* products - type01 */
	.product-list.type01{ margin-bottom: -40px; }
	.product-list.type01 .item{ width: calc((100% - 40px) / 2); margin-bottom: 40px; }
	.product-list.type01 .item i{ width: 60px; height: 60px; padding: 22px; top: 30px; right: 30px; }
	.product-list.type01 .item dl dt{ margin-top: 150px; }

	/* products - type02 */
	.product-list.type02 .item dl dt{ font-size: 30px; margin-bottom: 40px; }
	.product-list.type02 .item dl dt::before{ font-size: 17px; }
}

@media screen and (max-width: 1280px){
	/* products - product-list (공통) */
	.product-list.type01 .item dl{ padding: 25px; }

	/* products - type01 */
	.product-list.type01 .item i{ width: 45px; height: 45px; padding: 15px; top: 20px; right: 20px; }
	.product-list.type01 .item dl dt{ margin-top: 80px; }
	.product-list.type01 .item dl dt em{ background: linear-gradient(to top, #FFF 0 2px, transparent 2px 100%) no-repeat bottom left; }
	.product-list.type01 .item dl dd{ font-size: 17px; margin-top: 20px; }

	/* products - type02 */
	.product-list.type02{ margin-bottom: -20px; }
	.product-list.type02 .item{ width: calc((100% - 40px) / 3); margin-right: 20px; margin-bottom: 20px; }
	.product-list.type02 .item dl{ padding: 30px; }
	.product-list.type02 .item dl dt{ font-size: 26px; margin-bottom: 20px; }
	.product-list.type02 .item dl dt::before{ font-size: 15px; }
	.product-list.type02 .item ul li a{ font-size: 18px; padding-left: 10px; }
	.product-list.type02 .item ul li span::after{ width: 8px; height: 8px; }
}

@media screen and (max-width: 1000px){
	/* products - type01 */
	.product-list.type01{ margin-bottom: -20px; }
	.product-list.type01 .item{ width: calc((100% - 20px) / 2); margin-bottom: 20px; }

	/* products - type02 */
	.product-list.type02 .item{ width: calc((100% - 20px) / 2); }
	.product-list.type02 .item:nth-of-type(3n){ margin-right: 20px; }
	.product-list.type02 .item:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 900px){
	/* products - type01 */
	.product-list.type01 .item dl dt{ font-size: 5.5rem; margin-top: 30px; }
}

@media screen and (max-width: 750px){
	/* products - type01 */
	.product-list.type01 .item{ width: 100%; }
	.product-list.type01 .item dl dd{ height: auto !important; }

	/* products - type02 */
	.product-list.type02 .item{ width: 100%; margin-right: 0 !important; }
}


/* products - detail (상세) */
#detail{ font-family: var(--engFont); }
#detail .detail-top h3{ font-size: 6.4rem; font-weight: 500; color: #111; letter-spacing: -0.02em; margin-bottom: 40px; }
#detail .detail-top .grayBg{ background: var(--grayBg); border-radius: var(--secR); padding: 60px; }
#detail .detail-top .flex-box{ display: flex; }

#detail .detail-top .img{ width: 680px; text-align: center; }
#detail .detail-top .imgBox{ display: flex; }
#detail .detail-top figure{ display: block; position: relative; padding-bottom: 100%; overflow: hidden; border-radius: 20px; }
#detail .detail-top figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#detail .detail-top figure figcaption{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#detail .detail-top button{ background: none; border: none; padding: 15px; opacity: 1; transition: opacity 0.3s; }
#detail .detail-top button.none{ opacity: 0.2; }
#detail .detail-top button svg{ width: auto; height: auto; }

#detail .detail-top .img .bigBox{ width: 80%; }
#detail .detail-top .img .smallBox{ width: 20%; display: flex; flex-direction: column; padding-left: 40px; }
#detail .detail-top .img .small-wrap{ flex: 1 0 auto; margin: 5px 0; }
#detail .detail-top .img .small-wrap .slick-list{ margin-bottom: -10px; }
#detail .detail-top .img .small{ position: relative; margin-bottom: 10px; cursor: pointer; }
#detail .detail-top .img .small::before{ content: ""; width: 100%; height: 100%; border: 2px solid transparent; border-radius: 20px; position: absolute; top: 0; left: 0; z-index: 10; transition: border-color 0.3s; box-sizing: border-box; }
#detail .detail-top .img .small.slick-current::before{ border-color: var(--mainColor); }

#detail .detail-top .text{ width: calc(100% - 680px); display: flex; flex-direction: column; justify-content: center; font-size: 19px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.5; padding-left: 80px; position: relative; }
#detail .detail-top .text *{ line-height: inherit; }
#detail .detail-top .text .btns{ position: absolute; top: 0; right: 0; }
#detail .detail-top .text .btns a{ display: flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 10px; font-size: 19px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; padding: 18px 31px; }
#detail .detail-top .text .btns a i{ display: inline-block; width: 24px; height: 24px; background: url("/img/sub/product/catalog_icon.svg") no-repeat center center / contain; margin-right: 20px; }
#detail .detail-top .text .edit{ padding: 100px 0; }


#detail .detail-bottom h4{ font-size: 32px; font-weight: 500; color: #111; letter-spacing: -0.02em; padding-left: 52px; position: relative; margin-bottom: 40px; }
#detail .detail-bottom h4::before{ content: ""; width: 32px; height: 32px; background: url("/img/sub/product/tit_icon.svg") no-repeat center center / contain; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

#detail .detail-bottom .radius-table h4 {text-align:left; margin-top:80px;}


#detail .detail-bottom .grid-list ul{ display: grid; grid-template-columns: repeat(4, 1fr); margin: -10px; }
#detail .detail-bottom .grid-list ul li{ min-height: 120px; display: flex; justify-content: space-between; align-items: center; background: var(--grayBg); border-radius: 20px; font-size: 18px; font-weight: 300; color: #555; letter-spacing: -0.02em; margin: 10px; padding: 15px 30px; }
#detail .detail-bottom .grid-list ul li::before{ content: attr(data-index); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background: #FFF; border-radius: 50%; font-size: 17px; font-weight: 600; color: var(--mainColor); line-height: 1; }
#detail .detail-bottom .grid-list ul li p{ width: calc(100% - 80px); }

#detail .detail-bottom .check-list li{ font-size: 19px; font-weight: 300; color: #555; letter-spacing: -0.02em; padding-left: 40px; position: relative; }
#detail .detail-bottom .check-list li:not(:last-of-type){ margin-bottom: 15px; }
#detail .detail-bottom .check-list li::before{ content: ""; width: 20px; height: 20px; background: url("/img/sub/product/check_icon.svg") no-repeat center center / contain; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

#detail .list-btn a{ width: 360px; height: 85px; display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #222; border-radius: 10px; font-size: 21px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; }

@media screen and (max-width: 1700px){
	#detail .detail-top h3{ margin-bottom: 25px; }
	#detail .detail-top .grayBg{ padding: 40px; }

	#detail .detail-bottom h4{ font-size: 28px; }

	#detail .detail-bottom .grid-list ul li{ min-height: 100px; padding: 15px 25px; }
	#detail .detail-bottom .grid-list ul li::before{ font-size: 16px; }

	#detail .detail-bottom .check-list li{ padding-left: 35px; }

	#detail .list-btn a{ width: 300px; height: 75px; font-size: 20px; }

	#detail .detail-top .text .btns a{ font-size: 18px; padding: 15px 25px; }
	#detail .detail-top .text .btns a i{ margin-right: 15px; }
	#detail .detail-top .text .edit{ padding: 70px 0; }
}

@media screen and (max-width: 1500px){
	#detail .detail-top .img{ width: 50%; }
	#detail .detail-top .text{ width: 50%; padding-left: 40px; }
}

@media screen and (max-width: 1280px){
	#detail .detail-top h3{ margin-bottom: 15px; }
	#detail .detail-top .grayBg{ padding: 25px; }
	#detail .detail-top .text{ font-size: 18px; }

	#detail .detail-bottom h4{ font-size: 24px; padding-left: 40px; margin-bottom: 20px; }
	#detail .detail-bottom h4::before{ width: 28px; height: 28px; }

	#detail .detail-bottom .grid-list ul{ grid-template-columns: repeat(3, 1fr); margin: -5px; }
	#detail .detail-bottom .grid-list ul li{ min-height: 90px; font-size: 17px; padding: 10px 20px; margin: 5px; }
	#detail .detail-bottom .grid-list ul li::before{ width: 45px; height: 45px; font-size: 15px; }
	#detail .detail-bottom .grid-list ul li p{ width: calc(100% - 60px); }

	#detail .detail-bottom .check-list li{ font-size: 17px; padding-left: 30px; }
	#detail .detail-bottom .check-list li:not(:last-of-type){ margin-bottom: 10px; }
	#detail .detail-bottom .check-list li::before{ width: 18px; height: 18px; }

	#detail .list-btn a{ width: 220px; height: 65px; font-size: 18px; }

	#detail .detail-top .text .btns a{ font-size: 17px; padding: 12px 20px; }
	#detail .detail-top .text .btns a i{ width: 20px; height: 20px; margin-right: 10px; }
}

@media screen and (max-width: 1200px){ 
	#detail .detail-top .img .smallBox{ padding-left: 25px; margin: -15px 0; }
	#detail .detail-top .img .small-wrap{ margin: 0; }
	#detail .detail-top .img .small-wrap .slick-list{ margin-bottom: -5px; }
	#detail .detail-top .img .small{ margin-bottom: 5px; }
}

@media screen and (max-width: 1000px){ 
	#detail .detail-top .grayBg{ padding: 30px; }
	#detail .detail-top .flex-box{ flex-direction: column; }

	#detail .detail-top .img{ width: 100%; }
	#detail .detail-top .img .smallBox{ margin: -10px 0; padding-left: 20px; }
	#detail .detail-top .img .small figure, 
	#detail .detail-top .img .small::before{ border-radius: 15px; }
	#detail .detail-top button{ padding: 10px; }
	#detail .detail-top button svg{ width: 17px; }

	#detail .detail-top .text{ width: 100%; padding-left: 0; padding-top: 30px; }
	#detail .detail-top .text .btns{ position: relative; margin-top: 25px; }
	#detail .detail-top .text .btns a{ max-width: max-content; margin-left: auto; }
	#detail .detail-top .text .edit{ padding: 0; }

	#detail .detail-bottom .grid-list ul{ grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 900px){
	#detail .detail-bottom h4{ padding-left: 35px; }
	#detail .detail-bottom h4::before{ width: 22px; height: 22px; }

	#detail .detail-bottom .grid-list ul li{ min-height: 80px; padding: 10px 15px; }

	#detail .list-btn a{ width: 180px; height: 55px; font-size: 17px; }
}

@media screen and (max-width: 700px){
	#detail .detail-bottom .grid-list ul{ grid-template-columns: repeat(1, 1fr); }
}


/* R&D - 연구개발 분야 */
#rnd .sticky-tab li{ max-width: calc(100% / 4); }

#rnd .text{ background: var(--grayBg); border-radius: 20px; padding: 60px; margin-top: 20px; }
#rnd .text h5{ font-size: 38px; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 20px; }
#rnd .text dl{ background: #FFF; border-radius: 20px; padding: 40px; margin-top: 40px; }
#rnd .text dl dt{ font-size: 19px; font-weight: 500; color: #111; letter-spacing: -0.02em; margin-bottom: 20px; }
#rnd .text ul{ font-family: var(--engFont); }

@media screen and (max-width: 1700px){
	#rnd .text{ padding: 40px; }
	#rnd .text h5{ font-size: 30px; }
	#rnd .text dl{ padding: 30px; margin-top: 30px; }
}

@media screen and (max-width: 1280px){
	#rnd .text{ padding: 25px; }
	#rnd .text h5{ font-size: 26px; margin-bottom: 10px; }
	#rnd .text dl{ padding: 20px; margin-top: 20px; }
	#rnd .text dl dt{ font-size: 18px; margin-bottom: 10px; }
}

@media screen and (max-width: 900px){
	#rnd .text h5{ font-size: 22px; }
}

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


/* R&D - 솔루션 */
#solution .intro{ background: url("/img/sub/rnd/solution_bg.jpg") no-repeat center center / cover; color: #FFF; text-align: center; padding: 120px 0; }
#solution .intro .inner{ padding: 0 30px; transform: translateY(var(--aosPlus)); opacity: 0; transition: transform 1s 0.5s, opacity 1s 0.5s; }
#solution .intro.aos-animate .inner{ transform: translateY(0); opacity: 1; }
#solution .intro h4{ font-size: 4.8rem; font-weight: 100; letter-spacing: -0.02em; margin-bottom: 40px; }
#solution .intro h4 strong{ font-weight: 600; }
#solution .intro p{ font-size: 21px; font-weight: 200; letter-spacing: -0.02em; line-height: 1.6; }


#solution .sec-box{
	--img: 47.675%;
}
#solution .sec-box section{ display: flex; }
#solution .sec-box figure{ width: var(--img); height: 100%; }
#solution .sec-box figure img{ width: 100%; height: 100%; object-fit: cover; }
#solution .sec-box .text{ width: calc(100% - var(--img)); display: flex; flex-direction: column; justify-content: center; padding: 0 120px; }
#solution .sec-box .text span{ font-family: var(--engFont); font-size: 21px; font-weight: 500; color: var(--mainColor); letter-spacing: -0.02em; }
#solution .sec-box .text h5{ font-size: 4.8rem; font-weight: 600; color: #111; letter-spacing: -0.02em; line-height: 1.4; margin: 60px 0; }
#solution .sec-box .text p{ font-size: 19px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.6; }

#solution .sec-box section:nth-of-type(even){ flex-direction: row-reverse; }
#solution .sec-box section:nth-of-type(even) .text{ text-align: right; }

@media screen and (max-width: 1800px){
	#solution .sec-box .text p br{ display: none; }
}

@media screen and (max-width: 1700px){
	#solution .intro{ padding: 100px 0; }
	#solution .intro h4{ margin-bottom: 30px; }
	#solution .intro p{ font-size: 19px; }

	#solution .sec-box .text{ padding: 0 80px; }
	#solution .sec-box .text span{ font-size: 19px; }
	#solution .sec-box .text h5{ margin: 40px 0; }
	#solution .sec-box .text p{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#solution .intro{ padding: 60px 0; }
	#solution .intro h4{ margin-bottom: 20px; }
	#solution .intro p{ font-size: 17px; }

	#solution .sec-box .text{ padding: 0 50px; padding-right: 0; }
	#solution .sec-box .text span{ font-size: 17px; }
	#solution .sec-box .text h5{ margin: 20px 0; }
	#solution .sec-box .text p{ font-size: 17px; }

	#solution .sec-box section:nth-of-type(even) .text{ padding: 0 50px; padding-left: 0; }
}

@media screen and (max-width: 1000px){
	#solution .sec-box section{ flex-direction: column !important; }
	#solution .sec-box section > *{ width: 100% !important; }
	#solution .sec-box .text{ padding: 20px 0 0 !important; text-align: left !important; }
	#solution .sec-box .text h5{ margin: 10px 0; }
	#solution .sec-box .text h5 br{ display: none; }
}

@media screen and (max-width: 900px){
	#solution .intro{ padding: 40px 0; }
	#solution .intro br{ display: none; }
	#solution .intro h4{ font-size: 5rem; }

	#solution .sec-box .text h5{ font-size: 5rem; }
}


/* R&D - 특허 및 논문 */
#publish2{ padding-bottom: 0; }
#publish2 .patent .scroll-x{ margin: 40px 0; }
#publish2 .patent .table-box table{ min-width: 1000px; }
#publish2 .patent .table-box colgroup col.s{ width: 170px; }
#publish2 .patent .table-box tbody tr{ background: var(--grayBg); }
#publish2 .patent .table-box td div{ display: flex; flex-wrap: wrap; justify-content: center; margin: -5px; }
#publish2 .patent .table-box td i{ width: 20px; height: 20px; display: inline-block; background: var(--bg) url("/img/sub/rnd/check_icon.svg") no-repeat center center / contain; border-radius: 50%; margin: 5px; }

#publish2 .patent .table-box td{ border: 2px solid var(--grayBg); border-bottom-color: #FFF !important; }
#publish2 .patent .table-box tbody tr:nth-of-type(even){ background: #EEE; }
#publish2 .patent .table-box tbody tr:nth-of-type(even) td{ border-color: #EEE; }
#publish2 .patent .table-box tbody tr td:nth-of-type(2),
#publish2 .patent .table-box tbody tr td:nth-of-type(3){ --bg: var(--mainColor); }
#publish2 .patent .table-box tbody tr td:nth-of-type(4), 
#publish2 .patent .table-box tbody tr td:nth-of-type(5){ --bg: var(--orange); }
#publish2 .patent .table-box tbody tr td:nth-of-type(6){ --bg: var(--green); }

#publish2 .patent .table-box tbody .total{ --tdPtb: 25px; background: var(--mainColor) !important; }
#publish2 .patent .table-box tbody .total > *{ font-size: var(--thSize); font-weight: 400; color: #FFF; border-color: var(--mainColor) !important; }

#publish2 .patent .counter{ display: grid; grid-template-columns: repeat(3, 1fr); background: var(--grayBg); border-radius: 20px; font-family: var(--engFont); letter-spacing: -0.02em; text-align: center; padding: 50px 0; }
#publish2 .patent .counter dl{ padding: 10px 30px; position: relative; }
#publish2 .patent .counter dl::after{ content: ""; width: 1px; height: 100%; background: #E5E5E5; position: absolute; top: 0; right: 0; }
#publish2 .patent .counter dl:last-of-type::after{ display: none !important; }
#publish2 .patent .counter dl dd{ font-size: 7.4rem; font-weight: 400; color: #111; margin-bottom: 25px; }
#publish2 .patent .counter dl dt{ max-width: 400px; margin: 0 auto; background: #FFF; border-radius: 100px; font-size: 19px; font-weight: 300; color: #333; letter-spacing: -0.02em; padding: 15px; }


#publish2 .thesis{
	--num: 50px;
	--icon: 30px;
}
#publish2 .thesis{ padding-bottom: var(--subPb); }
#publish2 .thesis ul li:not(:last-of-type){ margin-bottom: 10px; }
#publish2 .thesis ul li a{ display: flex; justify-content: space-between; align-items: center; background: #FFF; border: 2px solid #FFF; border-radius: 20px; font-family: var(--engFont); letter-spacing: -0.02em; padding: 30px 50px; position: relative; transition: border-color 0.3s, box-shadow 0.3s; }
#publish2 .thesis ul li span{ display: inline-block; width: var(--num); height: var(--num); background: var(--mainColor); border-radius: 50%; font-size: 17px; font-weight: 600; color: #FFF; line-height: var(--num); text-align: center; }
#publish2 .thesis ul li p{ width: calc(100% - var(--num) - var(--icon)); font-size: 18px; font-weight: 300; color: #555; letter-spacing: -0.02em; padding: 0 30px; }
#publish2 .thesis ul li i{ width: var(--icon); height: var(--icon); display: inline-block; background: url("/img/sub/rnd/pdf_icon.svg") no-repeat center center / contain; }

@media screen and (hover: hover){
	#publish2 .thesis ul li a:hover{ border-color: var(--mainColor); box-shadow: 0 0 50px rgba(var(--mainRGB), 0.1); }
}

@media screen and (max-width: 1700px){
	#publish2 .patent .scroll-x{ margin: 30px 0; }
	#publish2 .patent .table-box colgroup col.s{ width: 140px; }
	#publish2 .patent .table-box tbody .total{ --tdPtb: 20px; }

	#publish2 .patent .counter{ padding: 40px 0; }
	#publish2 .patent .counter dl dt{ font-size: 17px; padding: 12px; }

	#publish2 .thesis{
		--num: 40px;
		--icon: 30px;
	}
	#publish2 .thesis ul li a{ padding: 25px 40px; }
	#publish2 .thesis ul li span{ font-size: 16px; }
	#publish2 .thesis ul li p{ font-size: 17px; }
}

@media screen and (max-width: 1280px){
	#publish2 .patent .scroll-x{ margin: 20px 0; }
	#publish2 .patent .table-box colgroup col.s{ width: 120px; }
	#publish2 .patent .table-box td div{ margin: -3px; }
	#publish2 .patent .table-box td i{ width: 17px; height: 17px; margin: 3px; }
	#publish2 .patent .table-box tbody .total{ --tdPtb: 15px; }

	#publish2 .patent .counter{ padding: 30px 0; }
	#publish2 .patent .counter dl{ padding: 0 20px; }
	#publish2 .patent .counter dl dd{ margin-bottom: 15px; }
	#publish2 .patent .counter dl dt{ font-size: 16px; padding: 9px; }

	#publish2 .thesis{
		--num: 35px;
		--icon: 25px;
	}
	#publish2 .thesis ul li a{ padding: 15px 25px; }
	#publish2 .thesis ul li span{ font-size: 15px; }
	#publish2 .thesis ul li p{ padding: 0 20px; }
}

@media screen and (max-width: 900px){
	#publish2 .patent .counter dl dd{ font-size: 8rem; }
}

@media screen and (max-width: 700px){
	#publish2 .patent .counter{ grid-template-columns: repeat(1, 1fr); padding: 0 30px; }
	#publish2 .patent .counter dl{ padding: 30px 0; }
	#publish2 .patent .counter dl::after{ max-width: 400px; width: 100%; height: 1px; top: 100%; left: 50%; transform: translateX(-50%); }
	#publish2 .patent .counter dl dd{ font-size: 10rem; }

	#publish2 .thesis ul li a{ padding: 15px 20px; }
}


/* R&D - 품질경영 */
#quality .certify{ overflow: hidden; }
#quality .certify .grid-box{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -25px; }
#quality .certify .grid-box > div{ margin: 25px; padding: 60px; }

#quality .certify .img{ background: var(--grayBg); font-family: var(--engFont); text-align: center; }
#quality .certify .img ul{ display: flex; justify-content: center; }
#quality .certify .img ul li{ max-width: calc((100% - 80px) / 2); width: 185px; margin-right: 80px; }
#quality .certify .img ul li:last-of-type{ margin-right: 0 !important; }
#quality .certify .img figure{ display: block; padding-bottom: 140%; position: relative; overflow: hidden; }
#quality .certify .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#quality .certify .img p{ font-size: 19px; font-weight: 300; color: #111; letter-spacing: -0.02em; margin-top: 15px; }
#quality .certify .img p span{ display: block; font-size: 15px; color: #888; margin-top: 5px; }

#quality .certify .text{ display: flex; flex-direction: column; justify-content: flex-end; background: url("/img/sub/rnd/certify_bg.jpg") no-repeat center center / cover; position: relative; }
#quality .certify .text::before{ content: ""; width: 23px; height: 23px; background: #FFF; border-radius: 50%; position: absolute; top: 30px; right: 30px; }
#quality .certify .text p{ font-size: 21px; font-weight: 400; color: #FFF; letter-spacing: -0.02em; line-height: 1.6; padding-top: 30px; }

#quality .table-box tbody tr{ width: 200%; display: flex; }
#quality .table-box td{ width: 50%; padding: 0; border-right: 2px solid #FFF; }
#quality .table-box tbody tr td:last-of-type{ border-right: none; }
#quality .table-box div{ height: 100%; border: 2px solid #E5E5E5; overflow: hidden; }
#quality .table-box tbody tr td:first-of-type div{ border-radius: 0 0 0 20px; }
#quality .table-box tbody tr td:last-of-type div{ border-radius: 0 0 20px 0; }
#quality .table-box ul{ height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); text-align: left; padding: 40px 60px; margin: -10px; }
#quality .table-box ul li{ margin: 10px; font-size: var(--tdSize); }

@media screen and (max-width: 1700px){
	#quality .certify .grid-box > div{ padding: 40px; }
	#quality .certify .img ul li{ max-width: calc((100% - 60px) / 2); margin-right: 60px; }
	#quality .certify .img p{ font-size: 18px; }
	#quality .certify .text p{ font-size: 19px; }

	#quality .table-box ul{ padding: 30px 40px; }
}

@media screen and (max-width: 1280px){
	#quality .certify .grid-box{ margin: -15px; }
	#quality .certify .grid-box > div{ padding: 30px; margin: 15px; }
	#quality .certify .img ul li{ max-width: calc((100% - 40px) / 2); margin-right: 40px; }
	#quality .certify .img p{ font-size: 16px; }

	#quality .certify .text::before{ width: 18px; height: 18px; }
	#quality .certify .text p{ font-size: 17px; }

	#quality .table-box ul{ padding: 27px; margin: -5px; }
	#quality .table-box ul li{ margin: 5px; }
}

@media screen and (max-width: 1000px){
	#quality .certify .grid-box{ grid-template-columns: repeat(1, 1fr); margin: -10px; }
	#quality .certify .grid-box > div{ margin: 10px; }
	#quality .certify .text p{ padding-top: 100px; }

	#quality .table-box ul{ grid-template-columns: repeat(1, 1fr); }
}

@media screen and (max-width: 700px){
	#quality .table-box thead{ display: none; }
	#quality .table-box tbody tr{ width: 100%; flex-direction: column; }
	#quality .table-box td{ width: 100%; border-right: none; position: relative; margin-bottom: 30px; }
	#quality .table-box td::before{ content: attr(data-th); width: 100%; display: flex; justify-content: center; align-items: center; background: var(--thBg); border-radius: 20px 20px 0 0; font-size: var(--thSize); font-weight: 400; color: #FFF; padding: var(--thPtb) var(--lrP); box-sizing: border-box; margin-bottom: 2px; }
	#quality .table-box td div{ border-radius: 0 0 20px 20px !important; }
	#quality .table-box tbody tr td:last-of-type{ margin-bottom: 0; }
}

@media screen and (max-width: 600px){
	#quality .certify .img ul li{ width: calc((100% - 40px) / 2); }
	#quality .certify .text p{ padding-top: 70px; }
}


/* ESG - ESG 경영 - ESG 경영전략 */
#strategy{ overflow: hidden; }
#strategy .strategy .color-diagram{ position: relative; }
#strategy .strategy .color-diagram::before{ content: ""; width: calc(100% - var(--left) - var(--gapR)); height: 100%; background: linear-gradient(to bottom, rgba(var(--mainRGB), 0.05), transparent); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); position: absolute; top: 0; right: 0; }
#strategy .strategy .color-diagram .arrow::after{ transform: translate(-50%, -50%); }
#strategy .strategy .color-diagram .arrow .right::after{ transform: translate(-50%, -50%); }


#strategy .framework{
	--gap: 70px;
	--length: 5;
	--tit: 8px;
}
#strategy .framework .diagram{ display: flex; align-items: center; text-align: center; letter-spacing: -0.02em; margin-bottom: calc(var(--gap) * -1); }
#strategy .framework .diagram > div{ width: calc(((100% - (var(--gap) * (var(--length) - 1))) / var(--length)) - var(--tit)); position: relative; margin-right: var(--gap); margin-bottom: var(--gap) !important; }
#strategy .framework .diagram > div:last-of-type{ margin-right: 0 !important; }
#strategy .framework .diagram > div::before{ content: ""; width: calc(100% + var(--gap)); height: 1px; background: #E5E5E5; position: absolute; top: 50%; left: 0; }
#strategy .framework .diagram > div:last-of-type::before{ display: none; }
#strategy .framework .diagram .circle{ position: relative; }
#strategy .framework .diagram .circle::before{ content: ""; display: block; padding-bottom: 100%; background: var(--mainColor); border-radius: 50%; }
#strategy .framework .diagram .inner{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); padding: 0 30px; }
#strategy .framework .diagram h5{ font-size: 28px; font-weight: 700; color: var(--mainColor); }
#strategy .framework .diagram dl{ color: #FFF; }
#strategy .framework .diagram dl dt{ font-family: var(--engFont); font-size: 23px; font-weight: 400; margin-bottom: 15px; }
#strategy .framework .diagram dl dd{ font-size: 19px; font-weight: 400; color: rgba(255, 255, 255, 0.8); }

#strategy .framework .diagram > div.tit{ width: calc(((100% - (var(--gap) * (var(--length) - 1))) / var(--length)) + (var(--tit) * (var(--length) - 1))); }
#strategy .framework .diagram > div.tit .circle{ background: #E6EFFF; border-radius: 50%; padding: 25px; }
#strategy .framework .diagram > div.tit::before{ z-index: -1; }
#strategy .framework .diagram .tit .circle::before{ background: #FFF; }

@media screen and (max-width: 1700px){
	#strategy .framework{
		--gap: 50px;
	}
	#strategy .framework .diagram h5{ font-size: 24px; }
	#strategy .framework .diagram dl dt{ font-size: 21px; }
	#strategy .framework .diagram dl dd{ font-size: 17px; }
}

@media screen and (max-width: 1280px){

	#strategy .framework{
		--gap: 30px;
	}
	#strategy .framework .diagram h5{ font-size: 22px; }
	#strategy .framework .diagram dl dt{ font-size: 19px; margin-bottom: 10px; }
	#strategy .framework .diagram dl dd{ font-size: 16px; }

	#strategy .framework .diagram > div.tit .circle{ padding: 20px; }
}

@media screen and (max-width: 1200px){
	#strategy .framework{
		--length: 4;
	}
	#strategy .framework .diagram{ flex-wrap: wrap; }
	#strategy .framework .diagram > div{ width: calc((100% - (var(--gap) * (var(--length) - 1))) / var(--length)); order: 2; }
	#strategy .framework .diagram > div.tit{ order: 1; width: 100%; margin-right: 0; }
	#strategy .framework .diagram > div.tit::before{ display: none; }
	#strategy .framework .diagram > div.tit .circle{ margin: 0 auto; border-radius: 20px; padding: 15px; position: relative; transform: translateY(var(--aosMinus)); }
	#strategy .framework .diagram > div.tit .circle.aos-animate{ transform: translateY(0); }
	#strategy .framework .diagram > div.tit .circle::before{ width: calc(100% - 30px); height: calc(100% - 30px); border-radius: 15px; padding: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
	#strategy .framework .diagram > div.tit .circle .inner{ position: relative; transform: unset; padding: 15px; }
}

@media screen and (max-width: 1100px){
	#strategy .strategy .color-diagram::before{ width: 100%; }
}

@media screen and (max-width: 900px){
	#strategy .framework{
		--length: 2;
	}
	#strategy .framework .diagram > div:nth-of-type(2){ margin-right: 0; }
	#strategy .framework .diagram > div:nth-of-type(2)::before{ display: none; }
	#strategy .framework .diagram .inner{ padding: 0 15px; }
	#strategy .framework .diagram .circle{ transition-delay: unset !important; }
}


/* ESG - ESG 경영 - ESG 중점전략방향 */
#emphasis .gray-layout{ display: grid; grid-template-columns: 540px calc(100% - 540px); }
#emphasis .gray-layout .right{ padding-left: 100px; }

#emphasis .gray-layout .bg{ height: 100%; position: relative; }
#emphasis .gray-layout .bg img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
#emphasis .gray-layout .bg h4{ font-family: var(--engFont); font-size: 8.4rem; font-weight: 500; color: #FFF; letter-spacing: -0.02em; text-align: center; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }

#emphasis .gray-layout ul{ display: grid; grid-template-columns: 50% 50%; border-top: 1px solid #000; }
#emphasis .gray-layout ul li{ padding: 40px; border-bottom: 1px solid #E5E5E5; }
#emphasis .gray-layout dl dt{ font-size: 21px; font-weight: 500; color: #111; letter-spacing: -0.02em; padding-left: 40px; margin-bottom: 15px; position: relative; }
#emphasis .gray-layout dl dt::before{ content: attr(data-num); font-family: var(--engFont); color: var(--mainColor); position: absolute; top: 0; left: 0; }
#emphasis .gray-layout dl dd{ min-height: 3em; font-size: 19px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.5; }

@media screen and (max-width: 1700px){
	#emphasis .gray-layout{ display: grid; grid-template-columns: 450px calc(100% - 450px); }
	#emphasis .gray-layout ul li{ padding: 30px; }
	#emphasis .gray-layout dl dt{ font-size: 19px; }
	#emphasis .gray-layout dl dd{ font-size: 18px; }
}

@media screen and (max-width: 1400px){
	#emphasis br{ display: none; }
	#emphasis .gray-layout .right{ padding-left: 60px; }
}

@media screen and (max-width: 1280px){
	#emphasis .gray-layout{ display: grid; grid-template-columns: 350px calc(100% - 350px); }
	#emphasis .gray-layout ul li{ padding: 20px; }
	#emphasis .gray-layout dl dt{ font-size: 18px; padding-left: 30px; margin-bottom: 10px; }
	#emphasis .gray-layout dl dd{ font-size: 16px; }
}

@media screen and (max-width: 1100px){
	#emphasis .gray-layout{ grid-template-columns: repeat(1, 1fr); }
	#emphasis .gray-layout .right{ padding-left: 0; padding-top: 15px; }

	#emphasis .gray-layout .bg img{ display: none; }
	#emphasis .gray-layout .bg h4{ color: #111; text-align: left; position: static; transform: translateY(0); }
}

@media screen and (max-width: 650px){
	#emphasis .gray-layout .bg{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); transform: translateY(var(--aosPlus)); opacity: 0; transition-property: transform, opacity !important; }
	#emphasis .gray-layout .bg.aos-animate{ transform: translateY(0); opacity: 1; }

	#emphasis .gray-layout ul{ grid-template-columns: repeat(1, 1fr); }
	#emphasis .gray-layout ul li{ padding: 15px 10px; }
	#emphasis .gray-layout dl dd{ min-height: auto; }
}


/* ESG - ESG 경영 - ESG Report */
#report .gray-table tbody tr > *:not(:first-child){ font-family: var(--engFont); }

#report .download-list{
	--gap: 50px;
	--line: 3;
}
#report .download-list{ text-align: center; margin-bottom: calc(var(--gap) * -1); }
#report .download-list ul{ display: flex; flex-wrap: wrap; }
#report .download-list ul li{ width: calc((100% - (var(--gap) * (var(--line) - 1))) / var(--line)); margin-right: var(--gap); margin-bottom: var(--gap); }
#report .download-list ul li:nth-of-type(3n){ margin-right: 0; }
#report .download-list .img{ position: relative; }
#report .download-list .img i{ width: 100px; height: 100px; display: flex; flex-direction: column; justify-content: center; background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#report .download-list .img i::before{ content: ""; display: block; height: 22px; background: url("/img/sub/esg/download_icon.svg") no-repeat center center / contain; }
#report .download-list figure{ display: block; position: relative; padding-bottom: 117.78%; border: 2px solid #E5E5E5; border-radius: 10px; overflow: hidden; }
#report .download-list figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#report .download-list p{ font-size: 23px; font-weight: 500; color: #111; letter-spacing: -0.02em; word-break: break-all; margin-top: 30px; }

@media screen and (max-width: 1700px){
	#report .download-list .img i{ width: 80px; height: 80px; }
	#report .download-list p{ font-size: 21px; margin-top: 20px; }
}

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

	#report .download-list .img i{ width: 65px; height: 65px; }
	#report .download-list .img i::before{ height: 20px; }
	#report .download-list p{ font-size: 19px; }
}

@media screen and (max-width: 1200px){
	#report .download-list{
		--gap: 25px;
		--line: 3;
	}
	#report .download-list ul{ margin-bottom: -30px; }
	#report .download-list ul li{ margin-bottom: 30px; }
}

@media screen and (max-width: 900px){
	#report .download-list{
		--gap: 20px;
		--line: 2;
	}
	#report .download-list ul li:nth-of-type(3n){ margin-right: var(--gap); }
	#report .download-list ul li:nth-of-type(2n){ margin-right: 0; }
	#report .download-list .img i{ width: 55px; height: 55px; }
	#report .download-list .img i::before{ height: 18px; }
	#report .download-list p{ font-size: 18px; margin-top: 15px; }
}


/* ESG - E(환경) - 환경경영 */
@media screen and (max-width: 1450px){
	#environment br{ display: none; }
}


/* ESG - E(환경) - 추진체계 */
#propulsion h5{ font-size: 24px; font-weight: 500; color: #111; letter-spacing: -0.02em; margin-bottom: 40px; }
#propulsion .color-diagram .left{ border-radius: 20px !important; }
#propulsion .color-diagram .box{ background: #222; border: none; color: #FFF; }
#propulsion .color-diagram .dl ul{ background: var(--grayBg); }

#propulsion .emphasis{ background: url("/img/sub/esg/propulsion_bg.jpg") no-repeat center center / cover; }
#propulsion .emphasis .dl-box{ display: grid; grid-template-columns: repeat(3, 1fr); margin: -20px -10px; }
#propulsion .emphasis .dl-box dl{ display: flex; flex-direction: column; margin: 20px 10px; }
#propulsion .emphasis .dl-box dl dt{ min-height: 70px; display: flex; flex-direction: column; justify-content: center; background: #222; border-radius: 10px; font-size: 19px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; text-align: center; padding: 10px 20px; margin-bottom: 10px; }
#propulsion .emphasis .dl-box dl dd{ flex: 1 0 auto; background: rgba(255, 255, 255, 0.85); border-radius: 10px; padding: 40px; }


#propulsion .roadmap{
	--arrow: 120px;
	--dt: 75px;
	--dd: 65px;
}
#propulsion .roadmap{ font-size: 17px; }
#propulsion .roadmap .flex-box{ display: flex; text-align: center; }
#propulsion .roadmap .flex-box > div > p{ font-weight: 600; color: var(--mainColor); }
#propulsion .roadmap .item{ width: calc((100% - (var(--arrow) * 3)) / 4); }
#propulsion .roadmap .item > p{ margin-top: 40px; }
#propulsion .roadmap .arrow{ width: var(--arrow); display: flex; flex-direction: column; justify-content: center; }
#propulsion .roadmap .arrow i{ display: inline-block; width: 30px; height: 30px; background: url("/img/sub/esg/arrow_blue.svg") no-repeat center center / contain; transform: rotate(90deg); margin: 0 auto; }
#propulsion .roadmap .arrow p{ font-size: 15px; margin-top: 10px; }

#propulsion .roadmap dl dt,
#propulsion .roadmap dl dd{ display: flex; flex-direction: column; justify-content: center; padding: 10px; }
#propulsion .roadmap dl dt{ min-height: var(--dt); background: #222; font-size: 19px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; border-radius: 20px 20px 0 0; }
#propulsion .roadmap dl dd{ min-height: var(--dd); background: var(--grayBg); font-weight: 300; color: #555; letter-spacing: -0.02em; margin-top: 2px; }
#propulsion .roadmap dl dd:last-of-type{ border-radius: 0 0 20px 20px; }
#propulsion .roadmap dl dd:nth-of-type(even){ background: #EEE; }
#propulsion .roadmap dl dd strong{ display: none; font-weight: 500; color: #111; }

#propulsion .roadmap .tit dl dt{ background: var(--mainColor); }
#propulsion .roadmap .tit dl dd strong{ display: block; }

@media screen and (max-width: 1700px){
	#propulsion h5{ font-size: 22px; margin-bottom: 30px; }
	
	#propulsion .emphasis .dl-box dl dt{ min-height: 60px; font-size: 18px; }
	#propulsion .emphasis .dl-box dl dd{ padding: 30px; }

	#propulsion .roadmap{
		--arrow: 100px;
		--dt: 65px;
		--dd: 55px;
	}
	#propulsion .roadmap .item > p{ margin-top: 30px; }

	#propulsion .roadmap dl dt{ font-size: 18px; }
}

@media screen and (max-width: 1400px){
	#propulsion .roadmap .tit{ display: none; }
	#propulsion .roadmap .blank{ display: none; }

	#propulsion .roadmap .item{ width: calc((100% - (var(--arrow) * 2)) / 3); }
	#propulsion .roadmap dl dd{ flex-direction: row; align-items: center; padding: 0; }
	#propulsion .roadmap dl dd > *{ width: 50%; padding: 10px; }
	#propulsion .roadmap dl dd strong{ display: block; position: relative; }
}

@media screen and (max-width: 1280px){
	#propulsion h5{ font-size: 20px; margin-bottom: 20px; }

	#propulsion .emphasis .dl-box{ grid-template-columns: repeat(3, 1fr); }
	#propulsion .emphasis .dl-box dl dt{ min-height: 55px; font-size: 17px; }
	#propulsion .emphasis .dl-box dl dd{ padding: 20px; }

	#propulsion .roadmap{
		--arrow: 80px;
		--dt: 55px;
	}
	#propulsion .roadmap{ font-size: 16px; }
	#propulsion .roadmap .item > p{ margin-top: 20px; }
	#propulsion .roadmap .arrow i{ width: 25px; height: 25px; }
	#propulsion .roadmap .arrow p{ margin-top: 5px; }
}

@media screen and (max-width: 1200px){
	#propulsion .emphasis .dl-box{ grid-template-columns: repeat(2, 1fr); margin: -15px -10px; }
	#propulsion .emphasis .dl-box dl{ margin: 15px 10px; }
}

@media screen and (max-width: 1100px){
	#propulsion .roadmap .flex-box{ flex-direction: column; }
	#propulsion .roadmap .flex-box > div{ width: 100%; transition-delay: unset !important; transform: translateY(var(--aosPlus)); }
	#propulsion .roadmap .flex-box > div.aos-animate{ transform: translateY(0); }
	#propulsion .roadmap .arrow{ padding: 20px 0; position: relative; }
	#propulsion .roadmap .arrow::before{ content: ""; width: block; width: 12px; height: 40px; background: var(--mainColor); margin: 0 auto; }
	#propulsion .roadmap .arrow i{ width: 30px; height: 30px; transform: rotate(180deg); }
	#propulsion .roadmap .arrow p{ background: #FFF; border: 2px solid rgba(var(--mainRGB), 0.5); border-radius: 10px; margin-top: 0; position: absolute; padding: 7px 15px 5px; top: calc(50% - 7px); left: 50%; transform: translate(-50%, -50%); }
}

@media screen and (max-width: 750px){
	#propulsion .emphasis .dl-box{ grid-template-columns: repeat(1, 1fr); }
}


/* ESG - S(사회) - 인권경영 */
#human .blue-list ul{ grid-template-columns: repeat(3, 1fr); }

#human .center-text{ text-align: center; border-bottom: 1px solid #E5E5E5; }
#human .center-text h5{ font-size: 28px; font-weight: 600; color: #333; letter-spacing: -0.02em; line-height: 1.5; }
#human .center-text p{ font-size: 21px; font-weight: 300; color: #333; letter-spacing: -0.02em; margin-top: 40px; }

#human .gray-table{
	--col: 24.5%;
}
#human .gray-table colgroup col.col01{ width: var(--col); }
#human .gray-table ul{ text-align: left; }
#human .gray-table ul li{ padding-left: 12px; position: relative; }
#human .gray-table ul li:not(:last-of-type){ margin-bottom: 10px; }
#human .gray-table ul li::before{ content: "-"; position: absolute; top: 0; left: 0; }


#human .table02 colgroup col.col02{ width: calc((100% - var(--col)) / 4); }
#human .table02 colgroup col.col03{ width: calc((100% - var(--col)) / 2); }

#human .table03 tbody tr > *:not(:last-child){ border-right: var(--border); }

@media screen and (max-width: 1700px){
	#human .center-text h5{ font-size: 24px; }
	#human .center-text p{ font-size: 19px; margin-top: 30px; }
}

@media screen and (max-width: 1280px){
	#human .gray-table{
		--col: 20%;
	}
	#human .center-text h5{ font-size: 20px; }
	#human .center-text p{ font-size: 17px; margin-top: 20px; }
}

@media screen and (max-width: 1000px){
	#human .blue-list ul{ grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 900px){
	#human .center-text br{ display: none; }
}

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

@media screen and (max-width: 650px){
	#human .blue-list ul{ grid-template-columns: repeat(1, 1fr); }
}


/* ESG - S(사회) - 안전경영 */
@media screen and (max-width: 800px){
	#safety br{ display: none; }
}


/* ESG - G(지배구조) - 윤리경영 */
#ethical > div section{ border-bottom: 1px solid #E5E5E5; }
#ethical .top h5{ font-size: 24px; font-weight: 500; color: #111; letter-spacing: -0.02em; margin-bottom: 20px; }


#ethical .organ{
	--max: 420px;
	--min1: 100px;
	--min2: 75px;

	--border: #E5E5E5;
}
#ethical .organ{ max-width: 1280px; width: 100%; margin: 0 auto; text-align: center; position: relative; }
#ethical .organ::before{ content: ""; width: 2px; height: 100%; background: var(--border); position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
#ethical .organ .center{ display: flex; justify-content: center; margin-bottom: 50px; }
#ethical .organ .round, 
#ethical .organ .box{ max-width: calc((100% - 30px) / 2); width: var(--max); display: flex; justify-content: center; align-items: center; padding: 5px 20px; position: relative; }
#ethical .organ .round{ min-height: var(--min1); background: #222; border-radius: 100px; font-family: var(--engFont); font-weight: 400; color: #FFF; letter-spacing: -0.02em; }
#ethical .organ .box{ min-height: var(--min2); background: var(--grayBg); border-radius: 10px; font-size: 19px; font-weight: 300; color: #333; letter-spacing: -0.02em; }

#ethical .organ .center .round{ font-size: 23px; }

#ethical .organ .side > div{ display: flex; justify-content: space-between; position: relative; }
#ethical .organ .side > div:not(:last-of-type){ margin-bottom: 10px; }
#ethical .organ .side .green > div{ background: var(--green); }
#ethical .organ .side .orange > div{ background: var(--orange); }

#ethical .organ .side > div:not(.line)::before{ content: ""; width: 100%; height: calc(100% + 10px); background: #FFF; position: absolute; top: 0; left: 0; }

#ethical .organ .side .line::before{ content: ""; width: 100%; height: calc(50% + 10px); background: #FFF; border-top: 2px solid var(--border); position: absolute; top: calc(50% - 1px); left: 0; box-sizing: border-box; }
#ethical .organ .side .line:first-of-type::before{ height: 2px; background: var(--border); border: none; top: 50%; transform: translateY(-50%); } 
#ethical .organ .side .line::after{ content: ""; width: 10px; height: 10px; background: #FFF; border: 3px solid var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; }
#ethical .organ .side .round{ font-size: 21px; }


#ethical .gray-table col.s{ width: 31.5%; }
#ethical .gray-table p,
#ethical .gray-table ul{ text-align: left; }
#ethical .gray-table ul li{ padding-left: 12px; position: relative; }
#ethical .gray-table ul li:not(:last-of-type){ margin-bottom: 10px; }
#ethical .gray-table ul li::before{ content: "-"; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1700px){
	#ethical .organ{
		--max: 350px;
		--min1: 85px;
		--min2: 65px;
	}
	#ethical .organ .box{ font-size: 17px; }

	#ethical .organ .center .round{ font-size: 21px; }

	#ethical .organ .side .round{ font-size: 19px; }
}

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

@media screen and (max-width: 1280px){
	#ethical .organ{
		--max: 300px;
		--min1: 70px;
		--min2: 55px;
	}
	#ethical .organ .box{ font-size: 16px; }

	#ethical .organ .center{ margin-bottom: 30px; }
	#ethical .organ .center .round{ font-size: 19px; }

	#ethical .organ .side .round{ font-size: 17px; }
	#ethical .organ .side .line::after{ width: 8px; height: 8px; border-width: 2px; }
}

@media screen and (max-width: 900px){
	#ethical .organ{
		--max: 250px;
		--min1: 60px;
	}
	#ethical .organ .center{ margin-bottom: 20px; }
	#ethical .organ .box{ padding: 10px 15px; }
}


/* ESG - G(지배구조) - 준법경영 */
#law .gray-table td.none{ padding: var(--padding) 0; }
#law ul.base li{ line-height: inherit; position: relative; padding-left: 15px; }
#law ul.base li:not(:last-of-type){ margin-bottom: 7px; }
#law ul.base li::before{ content: ""; width: 3px; height: 3px; background: #333; border-radius: 50%; position: absolute; top: calc(1.6em / 2); left: 0; transform: translateY(-50%); }

#law .dl-box{ display: grid; grid-template-columns: repeat(3, 1fr); margin: -5px; text-align: center; }
#law .dl-box > *{ margin: 5px; }
#law .dl-box dl{ display: flex; flex-direction: column; letter-spacing: -0.02em; }
#law .dl-box dl > *{ display: flex; flex-direction: column; justify-content: center; border-radius: 10px; }
#law .dl-box .green{ background: var(--green); }
#law .dl-box .orange{ background: var(--orange); }
#law .dl-box .blue{ background: var(--mainColor); }

#law .dl-box dl dt{ min-height: 85px; font-size: 23px; font-weight: 500; color: #FFF; margin-bottom: 10px; }
#law .dl-box dl dd{ flex: 1 0 auto; border: 2px solid #E5E5E5; font-size: 19px; font-weight: 300; color: #333; line-height: 1.5; padding: 60px; }
#law .dl-box dl dd *{ line-height: inherit; }

@media screen and (max-width: 1700px){
	#law .dl-box dl dt{ min-height: 75px; font-size: 21px; }
	#law .dl-box dl dd{ font-size: 18px; padding: 40px; }
}

@media screen and (max-width: 1400px){
	#law .dl-box dl dt{ min-height: 65px; }
	#law .dl-box dl dd{ padding: 35px; }
}

@media screen and (max-width: 1280px){
	#law ul.base li{ padding-left: 10px; }

	#law .dl-box dl dt{ min-height: 55px; font-size: 19px; }
	#law .dl-box dl dd{ font-size: 17px; padding: 25px; }
}

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

@media screen and (max-width: 1000px){
	#law .dl-box{ grid-template-columns: repeat(1, 1fr); margin: -15px -5px; }
	#law .dl-box > *{ transition-delay: unset !important; margin: 15px 5px; }
}

@media screen and (max-width: 900px){
	#law .gray-table thead{ display: none; }
	#law .gray-table tr{ width: 100%; display: flex; flex-wrap: wrap; }
	#law .gray-table tr td{ width: 100%; padding: 15px !important; padding-left: 215px !important; position: relative; }
	#law .gray-table tr td:not(:last-of-type){ border-bottom: var(--border); }
	#law .gray-table tr td::before{ content: attr(data-th); width: 200px; height: 100%; display: flex; justify-content: center; align-items: center; background: var(--grayBg); font-weight: 500; color: #111; padding: 10px; position: absolute; top: 0; left: 0; box-sizing: border-box; }
}


/* ESG - G(지배구조) - 사회공헌 */
#society{ overflow: hidden; }
#society .grid-box{ display: grid; grid-template-columns: calc(100% - 700px) 700px; }
#society .left{ font-size: 19px; font-weight: 300; color: #333; letter-spacing: -0.02em; padding-right: 80px; }
#society .left *{ line-height: 1.6; }
#society .left h5{ font-size: 28px; font-weight: 500; color: #333; letter-spacing: -0.02em; }
#society .left p{ margin-top: 25px; }


#society .right figure{ display: block; padding-bottom: 60%; position: relative; border-radius: 20px; overflow: hidden; }
#society .right figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#society .right .top{ margin-bottom: 10px; }
#society .right .bottom{ padding: 0 40px; }
#society .right .bottom .slick-list{ margin-right: -10px; }
#society .right .bottom .img{ margin-right: 10px; position: relative; cursor: pointer; }
#society .right .bottom .img figure::after{ content: ""; background: rgba(0, 0, 0, 0.5); border: 4px solid transparent; border-radius: inherit; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; transition: background 0.3s, border-color 0.3s; }
#society .right .bottom .img.slick-current figure::after{ background: transparent; border-color: var(--mainColor); }

@media screen and (max-width: 1700px){
	#society .grid-box{ display: grid; grid-template-columns: calc(100% - 600px) 600px; }

	#society .left{ font-size: 18px; }
	#society .left h5{ font-size: 22px; }
	#society .left p{ margin-top: 15px; }
}

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

@media screen and (max-width: 1280px){
	#society .grid-box{ display: grid; grid-template-columns: calc(100% - 500px) 500px; }

	#society .left{ font-size: 17px; padding-right: 40px; }
	#society .left h5{ font-size: 20px; }
	#society .left p{ margin-top: 10px; }

	#society .right .bottom{ padding: 0 20px; }
}

@media screen and (max-width: 1100px){
	#society .grid-box{ display: flex; flex-direction: column-reverse; }
	#society .left{ padding-right: 0; padding-top: 30px; }
}


/* Notice - 인재채용 - 인재상 */
#talent{ padding-bottom: 0; }
#talent .grayBox{ background: var(--grayBg); border-radius: 20px; padding: 120px; }
#talent .inner{ max-width: 1280px; margin: 0 auto; }

#talent .circle-diagram .circle{ color: var(--mainColor); }
#talent .circle-diagram .circle::before{ background: rgba(var(--mainRGB), 0.05); opacity: 1; }

#talent .diagram{
	--lineB: 30px;
}
#talent .diagram{ max-width: 1280px; margin: 0 auto; letter-spacing: -0.02em; text-align: center; }
#talent .diagram .top{ padding-bottom: var(--lineB); }
#talent .diagram .dl{ display: grid; grid-template-columns: repeat(4, 1fr); margin: -10px; }
#talent .diagram .dl dl{ display: flex; flex-direction: column; text-align: center; margin: 10px; position: relative; }
#talent .diagram .dl dl::after{ content: ""; width: calc(100% + 18px); height: var(--lineB); background: var(--grayBg); border: 2px solid #E5E5E5; border-top: none !important; border-right: none; position: absolute; left: calc(50% - 1px); bottom: 0; transform: translateY(100%); }
#talent .diagram .dl dl:first-of-type::after{ border-radius: 0 0 0 10px; }
#talent .diagram .dl dl:last-of-type::after{  border-radius: 0 0 10px 0; }
#talent .diagram .dl dl:nth-of-type(3)::after,
#talent .diagram .dl dl:nth-of-type(4)::after{ left: unset; right: calc(50% - 1px); border-left: none; border-right: 2px solid #E5E5E5; }
#talent .diagram .dl dl dt, 
#talent .diagram .dl dl dd{ display: flex; flex-direction: column; justify-content: center; border-radius: 10px; }
#talent .diagram .dl dl dt{ min-height: 85px; background: #222; font-size: 21px; font-weight: 500; color: #FFF; margin-bottom: 10px; padding: 10px; }
#talent .diagram .dl dl dd{ flex: 1 0 auto; background: #FFF; border: 2px solid #E5E5E5; font-size: 19px; font-weight: 500; color: #111; position: relative; z-index: 10; padding: 20px; }
#talent .diagram .dl dl dd::after{ content: ""; width: 10px; height: 10px; background: #FFF; border: 3px solid var(--mainColor); border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); box-sizing: border-box; }

#talent .diagram .arrow{ padding: var(--lineB) 0; }
#talent .diagram .arrow i{ display: block; height: 30px; background: url("/img/sub/esg/arrow_blue.svg") no-repeat center center / contain; transform: rotate(180deg); }

#talent .diagram .bottom{ background: #324566; border-radius: 10px; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25); padding: 50px; }
#talent .diagram .bottom p{ font-size: 24px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; line-height: 1.6; }


#talent .value{ background: url("/img/sub/notice/talent_bg.jpg") no-repeat center center / cover; padding-bottom: var(--subPb); border-radius: 0 0 calc(var(--secR) - 3px) calc(var(--secR) - 3px); }
#talent .value .inner{ margin-bottom: -40px; }
#talent .value .dl-box{ display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
#talent .value .dl-box dl{ width: calc((100% - 20px) / 3); display: flex; flex-direction: column; margin-right: 10px; margin-bottom: 40px; }
#talent .value .dl-box dl:last-of-type{ margin-right: 0 !important; }
#talent .value .dl-box dl dt,
#talent .value .dl-box dl dd{ display: flex; flex-direction: column; justify-content: center; border-radius: 10px; }
#talent .value .dl-box dl dt{ min-height: 85px; background: #324566; font-size: 23px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; margin-bottom: 10px; }
#talent .value .dl-box dl dd{ flex: 1 0 auto; background: #FFF; font-size: 19px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.5; padding: 45px; }  

#talent .value .dl-box:nth-of-type(even) dl dt{ background: var(--mainColor); }

@media screen and (max-width: 1700px){
	#talent .grayBox{ padding: 80px; }  

	#talent .diagram .dl dl dt{ min-height: 75px; font-size: 19px; }
	#talent .diagram .dl dl dd{ font-size: 18px; padding: 15px; }

	#talent .diagram .bottom{ padding: 35px; }
	#talent .diagram .bottom p{ font-size: 21px; }

	#talent .value .dl-box dl dt{ min-height: 75px; font-size: 21px; }
	#talent .value .dl-box dl dd{ font-size: 18px; padding: 30px; }
}

@media screen and (max-width: 1280px){
	#talent .grayBox{ padding: 40px; }  

	#talent .diagram{
		--lineB: 20px;
	}
	#talent .diagram .dl dl dt{ min-height: 65px; font-size: 18px; }
	#talent .diagram .dl dl dd{ font-size: 17px; }

	#talent .diagram .arrow i{ height: 22px; }

	#talent .diagram .bottom{ padding: 25px; }
	#talent .diagram .bottom p{ font-size: 19px; }

	#talent .value .dl-box dl{ margin-bottom: 30px; }
	#talent .value .dl-box dl dt{ min-height: 65px; font-size: 19px; }
	#talent .value .dl-box dl dd{ font-size: 17px; padding: 25px; }
}

@media screen and (max-width: 1000px){
	#talent .diagram .dl{ grid-template-columns: repeat(2, 1fr); }
	#talent .diagram .dl dl:nth-of-type(odd)::after{ left: calc(50% - 1px); right: unset; }
	#talent .diagram .dl dl:nth-of-type(even)::after{ width: calc(100% + 18px); left: unset; right: calc(50% - 1px); }
	#talent .diagram .dl dl:nth-of-type(1)::after{ border: 2px solid #E5E5E5; border-right: none; border-bottom: none; }
	#talent .diagram .dl dl:nth-of-type(2)::after{ border: 2px solid #E5E5E5; border-left: none; border-bottom: none; }
	#talent .diagram .dl dl:nth-of-type(3)::after{ border: 2px solid #E5E5E5; border-right: none; border-radius: 0 0 10px 10px; }
	#talent .diagram .dl dl:nth-of-type(4)::after{ border: 2px solid #E5E5E5; border-left: none; border-radius: 0 0 10px 10px; }
	#talent .diagram .dl dl dd::after{ width: 7px; height: 7px; border-width: 2px; }

	#talent .value br{ display: none; }
}

@media screen and (max-width: 900px){
	#talent .grayBox{ padding: 25px; } 

	#talent .diagram .dl dl dt{ min-height: 55px; font-size: 17px; margin-bottom: 5px; }
	#talent .diagram .dl dl dd{ font-size: 16px; }

	#talent .diagram .bottom p{ font-size: 18px; }

	#talent .value .dl-box dl dt{ min-height: 55px; font-size: 18px; }
	#talent .value .dl-box dl dd{ padding: 20px; }
}

@media screen and (max-width: 800px){
	#talent .value br{ display: block; }
	#talent .value .dl-box{ flex-direction: column; }
	#talent .value .dl-box:not(:last-of-type){ margin-bottom: 50px; }
	#talent .value .dl-box dl{ width: 100%; margin-bottom: 15px; }
	#talent .value .dl-box dl:last-of-type{ margin-bottom: 0; }
	#talent .value .dl-box dl dt{ margin-bottom: 5px; }
}

@media screen and (max-width: 700px){
	#talent .diagram br{ display: none; }
}


/* Notice - 인재채용 - 채용정보 */
#recruit figure,
#recruit figure img{ width: 100%; }

#recruit .grid-layout{ display: grid; grid-template-columns: 500px calc(100% - 500px); padding: 0 40px; margin-top: 80px; }
#recruit .grid-layout .left{ padding-right: 40px; }
#recruit .grid-layout h5{ font-size: 48px; font-weight: 500; color: #111; letter-spacing: -0.02em; }
#recruit .grid-layout ul li p{ font-size: 17px; font-weight: 300; color: #555; letter-spacing: -0.02em; }

#recruit .grid-layout .hyphen{ margin-top: 15px; } 
#recruit .grid-layout .hyphen p{ position: relative; padding-left: 12px; }
#recruit .grid-layout .hyphen p:not(:last-of-type){ margin-bottom: 10px; }
#recruit .grid-layout .hyphen p::before{ content: "-"; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1700px){
	#recruit .grid-layout{ grid-template-columns: 400px calc(100% - 400px); margin-top: 60px; }
	#recruit .grid-layout h5{ font-size: 36px; }
}

@media screen and (max-width: 1280px){
	#recruit .grid-layout{ grid-template-columns: 300px calc(100% - 300px); padding: 0 20px; margin-top: 40px; }
	#recruit .grid-layout .left{ padding-right: 20px; }
	#recruit .grid-layout h5{ font-size: 30px; }
	#recruit .grid-layout ul li p{ font-size: 16px; }
	#recruit .grid-layout .hyphen{ margin-top: 10px; } 
	#recruit .grid-layout .hyphen p:not(:last-of-type){ margin-bottom: 5px; }
}

@media screen and (max-width: 1000px){
	#recruit .grid-layout{ grid-template-columns: repeat(1, 1fr); padding: 0 10px; margin-top: 20px; }
	#recruit .grid-layout .left{ padding-right: 0; padding-bottom: 15px; }
}

@media screen and (max-width: 900px){
	#recruit .grid-layout h5{ font-size: 24px; }
}

/*재무정보 : 김승준 */
.tbl--bg{background-color:#f5f5f5}
.tbl__caption{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5em}
.tbl__caption-tit{position:relative; font-size: 32px; font-weight: 600; color: #111;}
.tbl__caption-tit .stxt { font-size: 20px; }
.tbl__caption-info{font-size:15px; color:#666}

.tbl__basic{width:100%; border-top:1px solid #333}
.tbl__basic th,
.tbl__basic td{padding:.75em 1em; border-bottom:1px solid #ddd; font-size: 15px;}
.tbl__basic th{font-weight:500; vertical-align:middle}

.tbl__line{width:100%; border-top:1px solid #333} /* 주가정보 기본 라인 */
.tbl__line th,
.tbl__line td{padding:1em; font-size: 19px; font-weight:500; text-align:center}
.tbl__line th + th,
.tbl__line td + td{border-left:1px solid #ddd; font-size: 19px;}
.tbl__line thead th{border-bottom:1px solid #ddd}
.tbl__line tbody td{border-top:1px solid #ddd}
.tbl__line tfoot td{border-top:1px solid #ddd; background-color:#f5f5f5}
.tbl__line a{display:block; padding:0 1em; text-align:left}
.tbl__line.tbl--dis{} /* 재무상태 표 */
.tbl__line.tbl--dis th + th,
.tbl__line.tbl--dis td + td{border-left:0}
.tbl__line.tbl--dis th,
.tbl__line.tbl--dis td{border-bottom:1px solid #ddd; font-size: 19px;}

.tab__menu{display:flex; width:100%}
.tab__menu-link{position:relative; padding:1em; width:100%; background-color:#f5f5f5; border:0; color:#666; font-size: 19px;}
.tab__menu-link:before{content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background-color:#fff}
.tab__menu-link.is-active{background-color:#af2320; color:#fff;}
.tab__menu + .tab__cont{margin-top:4em}
.tab__cont-item{display:none}
.tab__cont-item.is-active{display:block}

.section__title{margin-bottom:1em; font-size: 30px; text-align:center}

@media screen and (max-width: 1800px){
	.tbl__caption-tit{ font-size: 26px; }
	.tbl__caption-tit .stxt{ font-size: 18px; }

	.tbl__line th,
	.tbl__line td{ font-size: 18px; }
	.tbl__line.tbl--dis th,
	.tbl__line.tbl--dis td{ font-size: 18px; }
	.tab__menu-link{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	.tbl__caption-tit{ font-size: 24px; }
	.tbl__caption-tit .stxt{ font-size: 17px; }

	.tbl__line th,
	.tbl__line td{ font-size: 17px; }
	.tbl__line.tbl--dis th,
	.tbl__line.tbl--dis td{ font-size: 17px; }
	.tab__menu-link{ font-size: 17px; }
}

@media screen and (max-width:1024px){
    .tbl--scroll{overflow:hidden; overflow-x:auto}
    .tbl--scroll > table[class*=tbl]{width:1000px}
}

@media screen and (max-width: 900px){
	.tbl__caption-tit{ font-size: 22px; }
}

@media screen and (max-width:599px){
    .tab__menu{flex-wrap:wrap}
    .tab__menu-link{width:50%}
}

/* stock __ 재무재표 */
.disinfo article + article{margin-top:6em}
/*재무정보 : 김승준 */