/* 서브 비주얼 이미지 */
#visual.visual1 .bg{ background: url("/img/sub/overview_bg.jpg") no-repeat center center / cover; }
#visual.visual1[data-index="2"] .bg{ background: url("/img/sub/vision_bg.jpg") no-repeat center center / cover; }
#visual.visual1[data-index="3"] .bg{ background: url("/img/sub/philosophy_bg.jpg") no-repeat center center / cover; }
#visual.visual1[data-index="4"] .bg{ background: url("/img/sub/company_news_bg.jpg") no-repeat center center / cover; }

#visual.visual2 .bg{ background: url("/img/sub/cdmo_bg2.jpg") no-repeat center center / cover; }
#visual.visual2[data-index="2"] .bg{ background: url("/img/sub/quality_test_bg.jpg") no-repeat center center / cover; }
#visual.visual2[data-index="3"] .bg{ background: url("/img/sub/partnership_bg.jpg") no-repeat center center / cover; }

#visual.visual3 .bg{ background: url("/img/sub/platform_bg.jpg") no-repeat center center / cover; }
#visual.visual3[data-index="2"] .bg{ background: url("/img/sub/pipeline_bg.jpg") no-repeat center center / cover; }

#visual.visual4 .bg{ background: url("/img/sub/invest_bg.jpg") no-repeat center center / cover; }

#visual.visual5 .bg{ background: url("/img/sub/recruit_bg.jpg") no-repeat center center / cover; }

#visual.visual6 .bg{ background: url("/img/sub/customer_bg.jpg") no-repeat center center / cover; }
/* #visual.visual6[data-index="2"] .bg{ background: url("/img/sub/talent_bg.jpg") no-repeat center center / cover; } */
#visual.visual6[data-index="2"] .bg{ background: url("/img/sub/reference_bg.jpg") no-repeat center center / cover; }
#visual.visual6[data-index="3"] .bg{ background: url("/img/sub/location_bg.jpg") no-repeat center center / cover; }

#visual.visual7 .bg{ background: url("/img/sub/policy_bg.jpg") no-repeat center center / cover; }


/* visual */
#visual{ position: relative; opacity: 1 !important; overflow: hidden; }
#visual .bg-box{ transform: scale(1); transform-origin: top center; animation: bgScale 1s both; }
#visual .bg{ padding-bottom: 100vh; }
#visual .content-box{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 175px 0 130px; }
#visual .content-box > div{ height: 100%; }
#visual .content-box *{ color: #fff; }
#visual .flex-box{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
#visual .text-box{ width: 100%; }
#visual .text-box span{ display: block; font-size: 2.6rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); }
#visual .text-box h2{ font-size: 8rem; font-weight: 700; color: #fff; margin-top: 20px; }

#visual .bg-box{ transform: scale(0.8); }


/* lnb */
#lnb{ margin-top: -17px; margin-left: -17px; }
#lnb > ul{ display: flex; align-items: center; }
#lnb > ul > li{ position: relative; } 
#lnb > ul > li::after{ content: ""; width: 10px; height: 10px; background: url("/img/sub/lnb_arrow.svg") no-repeat center center / contain; position: absolute; top: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
#lnb > ul > li:last-of-type::after{ display: none; }
#lnb > ul > li > a, #lnb button{ font-family: var(--baseFont); font-size: 2rem; font-weight: 300; color: #FFF; padding: 17px; }
#lnb > ul > li > a{ display: inline-block; }
#lnb button{ background: none; border: none; padding-right: 20px; position: relative; }
#lnb button::after{ content: ""; width: 12px; height: 12px; background: url("/img/sub/depth02_arrow.svg") no-repeat center right / contain; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(0); transition: transform 0.5s; }

#lnb .local02.active button::after{ transform: translateY(-50%) rotate(-180deg); }


#lnb .depth02{ width: max-content; background: var(--mainColor); border-radius: 10px; text-align: center; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 10px 0; display: none; }
#lnb .depth02 li a{ display: inline-block; padding: 7px 20px; font-size: 1.6rem; font-weight: 500; color: #fff; opacity: 0.7; transition: opacity 0.5s; }

@media screen and (hover: hover){
	#lnb .depth02 li:hover a{ opacity: 1; }
}


/* common */
.sub-content{ padding: 160px 0 170px; }
.grayBg{ background: var(--grayBg); }
.point{ color: var(--mainColor) !important; }
.red{ color: var(--red) !important; }
.purple{ color: var(--purple) !important; }
.eng{ font-family: var(--engFont) !important; }
br.block{ display: block !Important; }

/* 간격 */
.pt230{ padding-top: 230px; }
.pb230{ padding-bottom: 230px; }
.pt170{ padding-top: 170px; }
.pb170{ padding-bottom: 170px; }
.pt160{ padding-top: 160px; }
.pb160{ padding-bottom: 160px; }
.pt140{ padding-top: 140px; }
.pb140{ padding-bottom: 140px; }
.pt120{ padding-top: 120px; }
.pb120{ padding-bottom: 120px; }
.pt100{ padding-top: 100px; }
.pb100{ padding-bottom: 100px; }

/* page-title */
.page-title{ margin-bottom: 60px; }
.page-title h3{ font-size: 6.5rem; font-weight: 700; color: #111; letter-spacing: -0.02em; line-height: 1.5; }
.page-title h3 strong{ color: var(--mainColor); }
.page-title p{ font-size: 2.2rem; font-weight: 300; color: #111; letter-spacing: -0.02em; line-height: 1.6; margin-top: 60px; }

/* sec-title */
.sec-title{ margin-bottom: 60px; }
.sec-title h4{ font-size: 4.5rem; font-weight: 700; color: #111; letter-spacing: -0.02em; }
.sec-title p{ font-size: 2.2rem; font-weight: 300; color: #111; letter-spacing: -0.02em; margin-top: 60px; }

/* titRing */
.titRing{ --bg: #fff; font-size: 2.9rem; font-weight: 600; color: #111; position: relative; padding-left: 40px; margin-bottom: 40px; }
.titRing::before{ content: ""; width: 30px; height: 30px; background: linear-gradient(var(--bg), var(--bg)), linear-gradient(to right, #3F10AC, var(--mainColor)); border: 7px solid transparent; border-radius: 50%; position: absolute; top: calc(1.3em / 2); background-origin: border-box; background-clip: content-box, border-box; left: 0; transform: translateY(-50%); box-sizing: border-box; }
.titRing em{ color: #2358CA; }

.titRing.purple::before{ background: linear-gradient(var(--bg), var(--bg)), linear-gradient(to right, #3D2B70, var(--purple)); background-origin: border-box; background-clip: content-box, border-box; }
.titRing.purple em{ color: var(--purple); } 

.titRing.deg45::before{ background: linear-gradient(var(--bg), var(--bg)), linear-gradient(-45deg, #3F10AC, var(--mainColor)); background-origin: border-box; background-clip: content-box, border-box; }
.titRing.purple.deg45::before{ background: linear-gradient(var(--bg), var(--bg)), linear-gradient(-45deg, #3D2B70, var(--purple)); background-origin: border-box; background-clip: content-box, border-box; }

.grayBg .titRing{ --bg: var(--grayBg); }

@media screen and (max-width: 1700px){
	/* visual */
	#visual .content-box{ padding: 130px 0 100px; }
	#visual .text-box span{ font-size: 2.2rem; }
	#visual .text-box h2{ font-size: 6.5rem; }

	/* lnb */
	#lnb > ul > li > a, #lnb button{ font-size: 1.8rem; }

	/* common */
	.sub-content{ padding: 120px 0 140px; }

	/* 간격 */
	.pt230{ padding-top: 180px; }
	.pb230{ padding-bottom: 180px; }
	.pt170{ padding-top: 140px; }
	.pb170{ padding-bottom: 140px; }
	.pt160{ padding-top: 120px; }
	.pb160{ padding-bottom: 120px; }
	.pt140{ padding-top: 120px; }
	.pb140{ padding-bottom: 120px; }

	/* page-title */
	.page-title{ margin-bottom: 50px; }
	.page-title h3{ font-size: 5.5rem; }
	.page-title p{ font-size: 2rem; margin-top: 50px; }

	/* sec-title */
	.sec-title{ margin-bottom: 50px; }
	.sec-title h4{ font-size: 4rem; }
	.sec-title p{ font-size: 2rem; margin-top: 40px; }

	/* titRing */
	.titRing{ font-size: 2.4rem; margin-bottom: 30px; }
}

@media screen and (max-width: 1280px){
	/* visual */
	#visual .content-box{ padding: 100px 0 60px; }
	#visual .text-box span{ font-size: 2rem; }
	#visual .text-box h2{ font-size: 4.5rem; }

	/* lnb */
	#lnb{ margin: -15px; }
	#lnb button::after{ width: 10px; height: 10px; }
	#lnb > ul > li > a, #lnb button{ font-size: 1.7rem; padding: 15px; }
	#lnb button{ padding-right: 17px; }

	/* common */
	.sub-content{ padding: 80px 0 100px; }

	/* 간격 */
	.pt230{ padding-top: 140px; }
	.pb230{ padding-bottom: 140px; }
	.pt170{ padding-top: 100px; }
	.pb170{ padding-bottom: 100px; }
	.pt160{ padding-top: 100px; }
	.pb160{ padding-bottom: 100px; }
	.pt140{ padding-top: 90px; }
	.pb140{ padding-bottom: 90px; }
	.pt120{ padding-top: 90px; }
	.pb120{ padding-bottom: 90px; }
	.pt100{ padding-top: 80px; }
	.pb100{ padding-bottom: 80px; }

	/* page-title */
	.page-title{ margin-bottom: 30px; }
	.page-title.mb40{ margin-bottom: 20px !important; }
	.page-title h3{ font-size: 4rem; }
	.page-title p{ font-size: 1.8rem; margin-top: 30px; }

	/* sec-title */
	.sec-title{ margin-bottom: 30px; }
	.sec-title.mb40{ margin-bottom: 20px !important; }
	.sec-title h4{ font-size: 3.5rem; }
	.sec-title p{ font-size: 1.9rem; margin-top: 30px; }

	/* titRing */
	.titRing{ font-size: 2.2rem; margin-bottom: 20px; padding-left: 30px; }
	.titRing::before{ width: 20px; height: 20px; border-width: 5px; }
}

@media screen and (max-width: 900px){
	/* visual */
	#visual .bg{ padding-bottom: var(--vh); }
	#visual .text-box span{ font-size: 1.8rem; }
	#visual .text-box h2{ font-size: 3.5rem; }
	#visual .text-box h2 br{ display: none; }

	/* 간격 */
	.pt230{ padding-top: 110px; }
	.pb230{ padding-bottom: 110px; }
	.pt160{ padding-top: 80px; }
	.pb160{ padding-bottom: 80px; }
	.pt140{ padding-top: 80px; }
	.pb140{ padding-bottom: 80px; }
	.pt100{ padding-top: 60px; }
	.pb100{ padding-bottom: 60px; }

	/* page-title */
	.page-title h3{ font-size: 3rem; }
	.page-title p{ font-size: 1.7rem; margin-top: 15px; }

	/* sec-title */
	.sec-title h4{ font-size: 2.8rem; }
	.sec-title p{ font-size: 1.8rem; }

	/* titRing */
	.titRing{ font-size: 2rem; }
}

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


/* 팝업 (공통) */
#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; border-radius: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#popup .inner-title{ padding-bottom: 60px; }
#popup .inner-title h5{ font-size: 3.6rem; font-weight: 700; color: #111; letter-spacing: -0.02em; text-align: center; }
#popup .close{ text-align: center; margin-top: 60px; }
#popup .close button{ width: 250px; height: 60px; background: #333; border: none; border-radius: 99px; font-family: var(--baseFont); font-size: 2.1rem; font-weight: 500; color: #fff; }


/* tab-menu */
.tab-menu{ margin-bottom: 60px; }
.tab-menu ul{ display: flex; flex-wrap: wrap; padding: 10px; background: #fff; border: 1px solid #DDD; border-radius: 99px; }
.tab-menu ul li{ min-height: 75px; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 99px; font-size: 2.5rem; font-weight: 600; color: #BBB; text-align: center; padding: 5px 10px; position: relative; transition: background 0.5, color 0.5s; cursor: pointer; }
.tab-menu ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }
.tab-menu ul li.on{ background: #111; color: #fff; }

.tab-menu ul.two li{ width: calc(100% / 2); }
.tab-menu ul.three li{ width: calc(100% / 3); }


/* sec-tab-menu */
.sec-tab-menu{ margin-bottom: 60px; }
.sec-tab-menu ul{ max-width: 100%; width: max-content; display: flex; padding: 10px; border: 1px solid #DDD; border-radius: 99px; }
.sec-tab-menu ul li{ max-width: calc(100% / 2); width: 350px; min-height: 70px; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 99px; font-family: var(--engFont); font-size: 2.5rem; font-weight: 500; color: #AAA; text-align: center; padding: 10px; cursor: pointer; }
.sec-tab-menu ul li.on{ background: var(--mainColor); color: #fff; }

.sec-tab-menu ul.two li{ width: calc(100% / 2); }


/* card-box */
.card-box .item{ position: relative; }
.card-box .item > div{ background: #fff; border-radius: 20px; transition: opacity 0.5s, transform 0.5s; }
.card-box .item .front{ height: 100%; opacity: 1; transform: scaleX(1); }
.card-box .item .back{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 25px; display: flex; justify-content: center; align-items: center; opacity: 0; transform: scaleX(-1); }

.card-box .item.active .front{ opacity: 0 !important; transform: scaleX(-1) !important; }
.card-box .item.active .back{ opacity: 1 !important; transform: scaleX(1) !important; }

/* table-box */
.table-box{ overflow-x: auto; overflow-y: clip; }
.table-box::-webkit-scrollbar{ width: 22px; height: 22px; }
.table-box::-webkit-scrollbar-thumb{ background: var(--mainColor); background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }
.table-box::-webkit-scrollbar-track{ background: #E9E9E9; background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }

.table-box table{ border-top: 2px solid #111; }
.table-box table colgroup col{ width: 100%; }
.table-box table *{ font-size: 2.1rem; letter-spacing: -0.02em; }
.table-box table th, .table-box table td{ border: 1px solid #DDD; }
.table-box table th{ font-weight: 600; color: #111; padding: 24px 10px; }
.table-box table td{ font-weight: 300; color: #333; padding: 24px 35px; }
.table-box table tr > *:first-of-type{ border-left: none; }
.table-box table tr > *:last-of-type{ border-right: none; }
.table-box table tr > *.lineL{ border-left: 1px solid #DDD; }
.table-box table tr > *.lineR{ border-right: 1px solid #DDD; }
.table-box table .noPadding{ padding: 0; }
.table-box .bold{ font-weight: 500; color: #111; }
.table-box .blue{ color: var(--mainColor); }
.table-box .center{ text-align: center; }
.table-box .left{ text-align: left; }

.grayBg .table-box table th, .grayBg .table-box table td{ border: 1px solid #CCC; }
.grayBg .table-box table tr > *:first-of-type{ border-left: none; }
.grayBg .table-box table tr > *:last-of-type{ border-right: none; }
.grayBg .table-box table tr > *.lineL{ border-left: 1px solid #CCC; }
.grayBg .table-box table tr > *.lineR{ border-right: 1px solid #CCC; }


/* gallery-list */
.gallery-list{ margin-top: 40px; }
.gallery-list ul{ display: flex; flex-wrap: wrap; margin-bottom: -25px; }
.gallery-list ul li{ width: calc((100% - 50px) / 3); margin-right: 25px; margin-bottom: 25px; }
.gallery-list ul li:nth-of-type(3n){ margin-right: 0; }
.gallery-list ul li figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 67%; border-radius: 20px; }
.gallery-list ul li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.gallery-list ul li p{ font-size: 2.1rem; font-weight: 500; color: #333; margin: 10px 0 15px; text-align: center; }


/* dot-list */
.dot-list li{ --height: 1.3em; font-size: 2.1rem; font-weight: 300; color: #333; position: relative; padding-left: 15px; }
.dot-list li::before{ content: ""; width: 4px; height: 4px; background: var(--mainColor); border-radius: 50%; position: absolute; top: calc(var(--height) / 2); left: 0; transform: translateY(-50%); }
.dot-list li:not(:last-of-type){ margin-bottom: 15px; }


/* process-icon-box */
.process-icon-box{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: -45px; }
.process-icon-box .item{ width: calc((100% - 320px) / 5); background: var(--grayBg); border-radius: 20px; padding: 65px 40px; text-align: center; margin-left: 80px; margin-bottom: 45px; position: relative; transition: background 0.5s, opacity 1s, transform 1s; }
.process-icon-box .item:first-of-type{ margin-left: 0; }
.process-icon-box .item::before{ content: ""; width: 20px; height: 20px; background: url("/img/sub/business/process_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: -40px; transform: translate(-50%, -50%); }
.process-icon-box .item:first-of-type::before{ display: none; }
.process-icon-box .item span{ font-family: var(--engFont); font-size: 2rem; font-weight: 600; color: #333; letter-spacing: -0.02em; transition: color 0.5s; }
.process-icon-box .item .icon{ margin: 30px 0; }
.process-icon-box .item .icon img{ transition: filter 0.5s; }
.process-icon-box .item p{ font-size: 2.1rem; font-weight: 400; color: #111; letter-spacing: -0.02em; transition: color 0.5s; }

.grayBg .process-icon-box .item{ background: #fff; }
.grayBg .process-icon-box .item .icon img{ filter: unset; -webkit-filter: unset; }


/* arrowBtn */
.arrowBtn{ --height: 50px; }
.arrowBtn{ display: flex; justify-content: space-between; align-items: center; width: 220px; background: #111; border: none; border-radius: 99px; font-family: var(--baseFont); font-size: 2.2rem; font-weight: 600; color: #fff !important; padding: 10px; text-align: left; }
.arrowBtn::after{ content: ""; display: inline-block; width: var(--height); height: var(--height); background: #fff url("/img/sub/inquiry_button.svg") no-repeat center center / auto; border-radius: 50%; }
.arrowBtn span{ display: inline-block; padding-left: 30px; }

@media screen and (hover: hover){
	/* card-box */
	.card-box .item:hover .front{ opacity: 0 !important; transform: scaleX(-1) !important; }
	.card-box .item:hover .back{ opacity: 1 !important; transform: scaleX(1) !important; }

	/* process-icon-box */
	.process-icon-box .item:hover{ background: var(--purple); }
	.process-icon-box .item:hover span{ color: #fff; }
	.process-icon-box .item:hover .icon img{ filter: grayscale(1) brightness(6); -webkit-filter: grayscale(1) brightness(6); }
	.process-icon-box .item:hover p{ color: #fff; }
}

@media screen and (max-width: 1700px){
	/* 팝업 (공통) */
	#popup .inner-title{ padding-bottom: 40px; }
	#popup .inner-title h5{ font-size: 3rem; }
	#popup .close{ marign-top: 40px; }
	#popup .close button{ width: 220px; height: 55px; font-size: 1.9rem; }

	/* tab-menu */
	.tab-menu{ margin-bottom: 40px; }
	.tab-menu ul li{ min-height: 65px; font-size: 2rem; }

	/* sec-tab-menu */
	.sec-tab-menu{ margin-bottom: 40px; }
	.sec-tab-menu ul li{ width: 350px; min-height: 65px; font-size: 2rem; }

	/* table-box */
	.table-box table *{ font-size: 1.9rem; }
	.table-box table th{ padding: 20px 10px; }
	.table-box table td{ padding: 20px; }

	/* gallery-list */
	.gallery-list ul li p{ font-size: 1.9rem; }

	/* dot-list */
	.dot-list li{ font-size: 1.9rem; }
	.dot-list li:not(:last-of-type){ margin-bottom: 15px; }

	/* process-icon-box */
	.process-icon-box .item{ padding: 40px; }
	.process-icon-box .item .icon{ margin: 20px 0; }
	.process-icon-box .item span{ font-size: 1.8rem; }
	.process-icon-box .item p{ font-size: 1.9rem; }

	/* arrowBtn */
	.arrowBtn{ width: 200px; font-size: 2rem; }
}

@media screen and (max-width: 1300px){
	/* process-icon-box */
	.process-icon-box .item{ width: calc((100% - 240px) / 5); margin-left: 60px; margin-bottom: 30px; }
	.process-icon-box .item::before{ left: -30px; }
}

@media screen and (max-width: 1280px){
	/* 팝업 (공통) */
	#popup.inner-title{ padding-bottom: 30px; }
	#popup .inner-title h5{ font-size: 2.8rem; }
	#popup .close{ margin-top: 30px; }
	#popup .close button{ width: 180px; height: 50px; font-size: 1.8rem; }

	/* tab-menu */
	.tab-menu{ margin-bottom: 30px; }
	.tab-menu ul{ padding: 5px; }
	.tab-menu ul li{ min-height: 55px; font-size: 1.8rem; }

	/* sec-tab-menu */
	.sec-tab-menu{ margin-bottom: 30px; }
	.sec-tab-menu ul{ padding: 5px; }
	.sec-tab-menu ul li{ width: 350px; min-height: 55px; font-size: 1.8rem; }

	/* table-box */
	.table-box table *{ font-size: 1.8rem; }
	.table-box table th{ padding: 15px 10px; }
	.table-box table td{ padding: 15px; }

	/* gallery-list */
	.gallery-list{ margin-top: 20px; }
	.gallery-list ul li p{ font-size: 1.8rem; }

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

	/* process-icon-box */
	.process-icon-box .item{ padding: 35px; }
	.process-icon-box .item .icon{ margin: 15px 0; }
	.process-icon-box .item span{ font-size: 1.7rem; }
	.process-icon-box .item p{ font-size: 1.8rem; }

	/* arrowBtn */
	.arrowBtn{ --height: 45px; }
	.arrowBtn{ width: 180px; font-size: 1.9rem; padding: 7px; }
	.arrowBtn span{ padding-left: 20px; }
}

@media screen and (max-width: 1200px){
	/* process-icon-box */
	.process-icon-box .item{ width: calc((100% - 120px) / 3); }
	.process-icon-box .item:nth-of-type(3n) + .item{ margin-left: 0; }
	.process-icon-box .item:nth-of-type(3n) + .item::before{ display: none; }
}

@media screen and (max-width: 1000px){
	/* gallery-list */
	.gallery-list ul{ display: flex; flex-wrap: wrap; margin-bottom: -10px -15px; }
	.gallery-list ul li{ width: calc((100% - 30px) / 3); margin-right: 15px; margin-bottom: 10px; }
}

@media screen and (max-width: 900px){
	/* 팝업 (공통) */
	#popup .inner{ padding: 30px; }
	#popup .inner-title h5{ font-size: 2.6rem; }
	#popup .close button{ width: 160px; font-size: 1.7rem; }

	/* tab-menu */
	.tab-menu ul li{ min-height: 45px; font-size: 1.7rem; }

	/* sec-tab-menu */
	.sec-tab-menu ul li{ min-height: 45px; font-size: 1.7rem; }

	/* table-box */
	.table-box table *{ font-size: 1.7rem; }

	/* gallery-list */
	.gallery-list ul li p{ font-size: 1.7rem; margin: 5px 0 15px; }

	/* dot-list */
	.dot-list li{ font-size: 1.7rem; }
}

@media screen and(max-width: 900px){
	/* arrowBtn */
	.arrowBtn{ font-size: 1.8rem; }
}

@media screen and (max-width: 800px){
	/* gallery-list */
	.gallery-list ul li{ width: calc((100% - 15px) / 2); }
	.gallery-list ul li:nth-of-type(3n){ margin-right: 15px; }
	.gallery-list ul li:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 750px){
	/* process-icon-box */
	.process-icon-box .item{ width: calc((100% - 60px) / 2); padding: 30px 35px; }
	.process-icon-box .item:nth-of-type(3n) + .item{ margin-left: 60px; }
	.process-icon-box .item:nth-of-type(3n) + .item::before{ display: block; }
	.process-icon-box .item:nth-of-type(2n) + .item{ margin-left: 0; }
	.process-icon-box .item:nth-of-type(2n) + .item::before{ display: none; }
}


/* ENCell - 기업소개 */
#overview{ background: #fff url("/img/sub/company/overview_bg.png") no-repeat top right / contain; }
#overview .page-title h3 img{ width: auto; height: 5.2rem; vertical-align: baseline; margin: 0 20px; }

#overview .ceo{ position: relative; }
#overview .ceo::before, #overview .ceo::after{ position: absolute; }
#overview .ceo::before{ content: url("/img/sub/company/ceo_circle01.png"); top: -30px; left: 0; }
#overview .ceo::after{ content: url("/img/sub/company/ceo_circle02.png"); bottom: 100px; right: 0; }

#overview .ceo p{ font-size: 2.1rem; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.5; }
/* #overview .ceo .flex-box{ display: flex; flex-wrap: wrap; align-items: flex-end; } */

#overview .ceo .left p:not(:last-of-type){ margin-bottom: 30px; }

#overview .ceo .right{ text-align: right; position: relative; padding-right: 150px; margin-top: 20px; }
#overview .ceo .right p strong{ font-size: 4.8rem; font-weight: 700; color: #111; letter-spacing: 0.05em; margin-left: 10px; }
#overview .ceo .right .strong{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); }


#overview .awards{ background: var(--grayBg); }
#overview .awards .card-box{ display: grid; grid-template-columns: repeat(4, 1fr); margin: -15px; }
#overview .awards .item{ margin: 15px; position: relative; }

#overview .awards .front{ height: 100%; text-align: center; padding: 70px 30px; }
#overview .awards .front figure{ margin-bottom: 45px; padding: 0 30px; }
#overview .awards .front p{ font-size: 2.2rem; font-weight: 300; color: #666; letter-spacing: -0.02em; line-height: 1.5; margin-top: 10px; }
#overview .awards .front p.bold{ font-weight: 500; color: #111; }
#overview .awards .front span{ display: block; font-size: 2.4rem; font-weight: 500; color: var(--mainColor); margin-top: 30px; }

#overview .awards .back{ padding: 30px 60px; }
#overview .awards .back .figure{ width: 100%; height: 100%; margin: 0 auto; }
#overview .awards .back figure{ width: 100%; height: 100%; position: relative; overflow: hidden; }
#overview .awards .back figure img{ max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


#overview .ci .flex-box{ --gap: 30px; display: flex; }
#overview .ci .border{ border: 1px solid #DDD; border-radius: 20px; }
#overview .ci .blue{ background: var(--mainColor); border-radius: 20px; }
#overview .ci .black{ background: #111; border-radius: 20px; }

#overview .ci .color{ width: 40%; display: flex; justify-content: space-between; align-items: center; padding: 40px; }
#overview .ci .color dl *{ font-family: var(--engFont); color: #111; }
#overview .ci .color dl dt{ font-size: 2.8rem; font-weight: 600; margin-bottom: 30px; }
#overview .ci .color dl dd{ font-size: 2.1rem; font-weight: 400; line-height: 1.5; }
#overview .ci .color .circle{ width: 140px; height: 140px; background: var(--mainColor); border-radius: 50%; }

#overview .ci .logos{ width: 60%; display: grid; grid-template-columns: repeat(3, 1fr); margin: -15px; padding-left: 30px; }
#overview .ci .logos .box{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 15px; text-align: center; padding: 40px 20px; }
#overview .ci .logos .box p{ font-size: 2.1rem; font-weight: 300; color: #fff; margin-top: 45px; }
#overview .ci .logos .box.border p{ color: #111; }

@media screen and (max-width: 1700px){
	#overview .page-title h3 img{ height: 4.2rem; }

	#overview .ceo::before{ top: -60px; }
	#overview .ceo::after{ bottom: 50px; }

	#overview .ceo p{ font-size: 1.9rem; }
	#overview .ceo .left p:not(:last-of-type){ margin-bottom: 20px; }
	#overview .ceo .right p strong{ font-size: 4.5rem; }

	#overview .awards .front figure{ margin-bottom: 30px; }
	#overview .awards .front p{ font-size: 2rem; }
	#overview .awards .front span{ font-size: 2.2rem; }

	#overview .awards .back{ padding: 20px 40px; }

	#overview .ci .color dl dt{ font-size: 2.4rem; }
	#overview .ci .color dl dd{ font-size: 1.9rem; }

	#overview .ci .logos .box p{ font-size: 1.9rem; }
}

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

@media screen and (max-width: 1400px){
	#overview .ci .color .circle{ width: 120px; height: 120px; }
	#overview .ci .logos .box p{ margin-top: 30px; }
}

@media screen and (max-width: 1280px){
	#overview .page-title h3 img{ height: 3.2rem; margin: 0 10px; }

	#overview .ceo p{ font-size: 1.8rem; }

	#overview .ceo .left{ width: 100%; }

	#overview .ceo .right{ padding-right: 135px; }
	#overview .ceo .right p strong{ font-size: 4.2rem; }

	#overview .awards .card-box{ width: calc(100% + 14px); margin: -7px; }
	#overview .awards .item{ margin: 7px;}

	#overview .awards .front figure{ margin-bottom: 15px; }
	#overview .awards .front{ padding: 40px 20px; }
	#overview .awards .front p{ font-size: 1.9rem; }
	#overview .awards .front span{ font-size: 2rem; margin-top: 20px; }

	#overview .awards .back{ padding: 20px 30px; }

	#overview .ci .color{ padding: 30px; }
	#overview .ci .color dl dt{ font-size: 2.2rem; margin-bottom: 15px; }
	#overview .ci .color dl dd{ font-size: 1.8rem; }

	#overview .ci .logos .box{ padding: 30px 20px; }
	#overview .ci .logos .box p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1200px){
	#overview .awards .card-box{ grid-template-columns: repeat(2, 1fr); }
	
	#overview .awards .front{ padding: 30px 15px; }
	#overview .awards .front p{ margin-top: 5px; }

	#overview .awards .back{ padding: 20px 15px; }

	#overview .ci .flex-box{ flex-wrap: wrap; }
	#overview .ci .color{ width: 100%; }
	#overview .ci .logos{ width: calc(100% + 20px); padding-left: 0; padding-top: 20px; margin: -10px; }
	#overview .ci .logos .box{ margin: 10px; }
}

@media screen and (max-width: 900px){
	#overview .page-title h3 img{ height: 2.3rem; }

	#overview .ceo p{ font-size: 1.7rem; }
	#overview .ceo .right{ padding-right: 125px; }
	#overview .ceo .right p strong{ font-size: 4rem; }

	#overview .awards .front p{ font-size: 1.7rem; }
	#overview .awards .front span{ font-size: 1.8rem; }

	#overview .ci .color dl dt{ font-size: 2rem; }
	#overview .ci .color dl dd{ font-size: 1.7rem; }

	#overview .ci .logos .box p{ font-size: 1.7rem; }
}

@media screen and (max-width: 600px){
	#overview .ci .logos{ grid-template-columns: repeat(1, 1fr); }
}


/* ENCell - 미션 & 비전 */
#vision .vision{ overflow: hidden; }
#vision .vision .page-title{ margin-bottom: 0; }
#vision .diagram{ display: flex; align-items: center; }
#vision .diagram > div{ width: 100%; }
#vision .diagram .flex-box{ width: 100%; display: flex; align-items: center; }
#vision .diagram .flex-box > div{ width: 50%; }

#vision .diagram .circle{ position: relative; }
#vision .diagram .circle figure{ width: 100%; position: relative; padding-bottom: 100%; overflow: hidden; border-radius: 50%; }
#vision .diagram .circle figure::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); position: absolute; top: 0; left: 0; /* opacity: 0; transition: opacity 0.8s; */ }
#vision .diagram .circle figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.8s; }
#vision .diagram .circle .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); padding: 0 20px; /* opacity: 0; transition: opacity 0.8s; */ }
#vision .diagram .circle .text h5{ font-size: 4rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1.4; text-align: center; }

#vision .diagram .list{ padding-left: 120px; }
#vision .diagram .list ul li{ display: flex; align-items: center; padding: 40px 10px; box-shadow: 0px 0px 30px rgba(14, 145, 226, 0.2); border-radius: 20px; }
#vision .diagram .list ul li:not(:last-of-type){ margin-bottom: 30px; }
#vision .diagram .list ul li span{ display: inline-block; width: 120px; font-family: var(--engFont); font-size: 4rem; font-weight: 700; color: var(--mainColor); text-align: center; }
#vision .diagram .list dl{ width: calc(100% - 120px); padding-right: 30px; }
#vision .diagram .list dl dt{ font-size: 2.6rem; font-weight: 600; color: #111; letter-spacing: -0.02em; line-height: 1.4; margin-bottom: 10px; }
#vision .diagram .list dl dd{ font-size: 2rem; font-weight: 300; color: #444; letter-spacing: -0.02em; }

#vision .diagram.black{ background: #111; }
#vision .diagram.black .flex-box{ flex-direction: row-reverse; }
#vision .diagram.black .list{ padding-left: 0 !important; padding-right: 120px; text-align: right; }
#vision .diagram.black .list ul li{ flex-direction: row-reverse; box-shadow: 0px 0px 30px rgba(117, 83, 214, 0.3); }
#vision .diagram.black .list ul li *{ color: #fff !important; }
#vision .diagram.black .list dl{ padding-left: 30px; padding-right: 0; }
#vision .diagram.black .list ul li span{ color: var(--purple) !important; }


#vision .history .flex-box{ display: flex; }
#vision .history .tab{ width: 520px; }
#vision .history .tab .sticky{ position: sticky; top: calc(var(--headerH) + 20px); left: 0; }
#vision .history .tab ul li{ cursor: pointer; }
#vision .history .tab ul li:not(:last-of-type){ margin-bottom: 40px; }
#vision .history .tab ul li h5{ font-size: 5rem; font-weight: 700; color: #CCC; letter-spacing: -0.02em; transition: color 0.5s; }
#vision .history .tab ul li .sliding{ --height: 0; height: 0; overflow: hidden; transition: height 0.5s; }
#vision .history .tab ul li p{ font-size: 2.8rem; font-weight: 300; color: #111; letter-spacing: -0.02em; padding: 20px 0 30px; }
#vision .history .tab ul li figure{ width: 100%; position: relative; padding-bottom: 0; /* padding-bottom: 95%; */ overflow: hidden; border-radius: 20px; transition: padding 0.5s; }
#vision .history .tab ul li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#vision .history .tab ul li.active h5{ color: #111; }
#vision .history .tab ul li.active .sliding{ height: var(--height); }
#vision .history .tab ul li.active figure{ padding-bottom: 95%; }

#vision .history .list{ width: calc(100% - 520px); padding-left: 130px; }
#vision .history .list .scroll-box{ padding-left: 1px; position: relative; }
#vision .history .list .scroll{ width: 1px; height: calc(100% - 30px); background: #DFDFDF; position: absolute; bottom: 0; left: 0; }
#vision .history .list .scroll div{ width: 100%; height: 0; background: var(--mainColor); }
#vision .history .list ul{ width: calc(100% - 1px); }
#vision .history .list ul:not(:last-of-type){ padding-bottom: 170px; }
#vision .history .list ul li{ padding-left: 60px; position: relative; }
#vision .history .list ul li:not(:last-of-type){ padding-bottom: 170px; }
#vision .history .list ul:last-of-type li:last-of-type::before{ content: ""; width: 60px; height: calc(100% - 30px); background: #fff; position: absolute; left: -1px; bottom: 0; }
#vision .history .list h6{ font-size: 4.2rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 40px; position: relative; transition: color 0.5s; }
#vision .history .list h6::before, #vision .history .list h6::after{ content: ""; border-radius: 50%; position: absolute; top: 50%; left: -60px; transform: translate(-50%, -50%); transition: background 0.5s; }
#vision .history .list h6::before{ width: 25px; height: 25px; background: rgba(204, 204, 204, 0.2); }
#vision .history .list h6::after{ width: 13px; height: 13px; background: #CCC; }
#vision .history .list dl *{ font-size: 2.1rem; letter-spacing: -0.02em; }
#vision .history .list dl{ position: relative; }
#vision .history .list ul li dl:not(:last-of-type){ margin-bottom: 40px; }
#vision .history .list dl dt{ font-weight: 600; color: #111; position: absolute; top: 0; left: 0; }
#vision .history .list dl dd{ font-weight: 300; color: #444; padding-left: 45px; }
#vision .history .list dl dd:not(:last-of-type){ margin-bottom: 15px; }

#vision .history .list ul li.active h6{ color: var(--mainColor); }
#vision .history .list ul li.active h6::before{ background: rgba(14, 145, 226, 0.2); }
#vision .history .list ul li.active h6::after{ background: var(--mainColor); }

@media screen and (hover: hover){
	#vision .diagram .circle:hover figure::after{ opacity: 1; }
	#vision .diagram .circle:hover figure img{ transform: translate(-50%, -50%) scale(1.1); }
	#vision .diagram .circle:hover .text{ opacity: 1; }
}

@media screen and (max-width: 1700px){
	#vision .diagram .circle .text h5{ font-size: 3.5rem; }

	#vision .diagram .list{ padding-left: 80px; }
	#vision .diagram .list ul li{ padding: 30px 10px; }
	#vision .diagram .list ul li span{ width: 100px; font-size: 3.5rem; }
	#vision .diagram .list dl{ width: calc(100% - 100px); }
	#vision .diagram .list dl dt{ font-size: 2.2rem; }
	#vision .diagram .list dl dd{ font-size: 1.8rem; }

	#vision .diagram.black .list{ padding-right: 80px; }
	#vision .diagram.black .list dl{ padding-left: 20px; }


	#vision .history .tab ul li:not(:last-of-type){ margin-bottom: 30px; }
	#vision .history .tab ul li h5{ font-size: 4rem; }
	#vision .history .tab ul li p{ font-size: 2.4rem; }

	#vision .history .list{ padding-left: 100px; }
	#vision .history .list ul:not(:last-of-type){ padding-bottom: 120px; }
	#vision .history .list ul li{ padding-left: 40px; }
	#vision .history .list ul li:not(:last-of-type){ padding-bottom: 120px; }
	#vision .history .list h6{ font-size: 3.6rem; margin-bottom: 30px; }
	#vision .history .list h6::before, #vision .history .list h6::after{ left: -40px; }
	#vision .history .list ul li dl:not(:last-of-type){ margin-bottom: 30px; }
	#vision .history .list dl *{ font-size: 1.9rem; }
}

@media screen and (max-width: 1280px){
	#vision .diagram .circle .text h5{ font-size: 3rem; }

	#vision .diagram .list ul li{ padding: 20px 10px; }
	#vision .diagram .list ul li:not(:last-of-type){ margin-bottom: 20px; }
	#vision .diagram .list ul li span{ width: 80px; font-size: 3rem; }
	#vision .diagram .list dl{ width: calc(100% - 80px); }
	#vision .diagram .list dl dt{ font-size: 2rem; }
	#vision .diagram .list dl dd{ font-size: 1.7rem; }


	#vision .history .tab ul li:not(:last-of-type){ margin-bottom: 20px; }
	#vision .history .tab ul li h5{ font-size: 3.5rem; }
	#vision .history .tab ul li p{ font-size: 2.2rem; padding: 10px 0 20px; }

	#vision .history .list{ padding-left: 70px; }
	#vision .history .list .scroll{ width: 1px; height: calc(100% - 20px); }
	#vision .history .list ul:not(:last-of-type){ padding-bottom: 70px; }
	#vision .history .list ul:last-of-type li:last-of-type::before{ height: calc(100% - 20px); }
	#vision .history .list ul li{ padding-left: 30px; }
	#vision .history .list ul li:not(:last-of-type){ padding-bottom: 70px; }
	#vision .history .list h6{ font-size: 3rem; margin-bottom: 20px; }
	#vision .history .list h6::before, #vision .history .list h6::after{ left: -30px; }
	#vision .history .list ul li dl:not(:last-of-type){ margin-bottom: 20px; }
	#vision .history .list dl *{ font-size: 1.8rem; }
	#vision .history .list dl dd{ padding-left: 30px; }
}

@media screen and (max-width: 1200px){
	#vision .diagram .flex-box > div.circle{ width: 40%; }
	#vision .diagram .flex-box > div.list{ width: 60%; }

	#vision .history .flex-box{ flex-wrap: wrap; }
	#vision .history .tab{ width: 100%; padding-bottom: 30px; }
	#vision .history .tab ul{ display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid #DDD; border-radius: 99px; padding: 10px; }
	#vision .history .tab ul li{ text-align: center; margin: 0 !important; border-radius: 99px; }
	#vision .history .tab ul li h5{ padding: 10px; }
	#vision .history .tab ul li .sliding{ display: none; }
	#vision .history .tab ul li figure{ display: none; }

	#vision .history .tab ul li.active{ background: #111; }
	#vision .history .tab ul li.active h5{ color: #fff; }

	#vision .history .list{ width: 100%; padding-left: 10px; }
	#vision .history .list h6::before{ width: 20px; height: 20px;}
	#vision .history .list h6::after{ width: 8px; height: 8px; }
}

@media screen and (max-width: 1000px){
	#vision .diagram .list{ padding-left: 50px; }
	#vision .diagram.black .list{ padding-right: 50px; }
}

@media screen and (max-width: 900px){
	#vision .diagram .circle .text h5{ font-size: 2.6rem; }

	#vision .diagram .list ul li span{ font-size: 2.6rem; }
	#vision .diagram .list dl dt{ font-size: 1.8rem; }

	#vision .history .tab ul li h5{ font-size: 2.6rem; }
	#vision .history .tab ul li p{ font-size: 2rem; }

	#vision .history .list h6{ font-size: 2.6rem; }
	#vision .history .list dl *{ font-size: 1.7rem; }
}

@media screen and (max-width: 800px){
	#vision .diagram .flex-box{ flex-direction: column !important; }
	#vision .diagram .flex-box > div{ width: 100% !important; }
	#vision .diagram .flex-box > div.circle{ max-width: 300px; margin: 0 auto; }
	#vision .diagram .list{ padding: 40px 0 0 !important; }
	#vision .diagram .list ul li span{ width: 70px; }
	#vision .diagram .list dl{ width: calc(100% - 70px); padding-left: 10px; }

	#vision .diagram.black .list ul li{ flex-direction: row; text-align: left; }
	#vision .diagram.black .list dl{ padding-left: 10px; padding-right: 20px; }
}


/* ENCell - 경영철학 */
#philosophy .philosophy .philosophy-wrap .slick-list{ margin-right: -20px; }
#philosophy .philosophy .item{ position: relative; overflow: hidden; margin-right: 20px; }
#philosophy .philosophy .item figure{ width: 100%; position: relative; padding-bottom: 103.0132%; overflow: hidden; border-radius: 20px; }
#philosophy .philosophy .item figure::after{ content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, var(--mainColor)); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s; }
#philosophy .philosophy .item figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#philosophy .philosophy .item .text{ position: absolute; bottom: 0; left: 0; right: 0; padding: 50px 40px; }  
#philosophy .philosophy .item .text-wrap{ position: relative; }
#philosophy .philosophy .item .absolute{ top: 0; left: 0; transform: translateY(0); transition: top 0.5s, transform 0.5s; }
#philosophy .philosophy .item .text-wrap > h5{ opacity: 0; }
#philosophy .philosophy .item .text h5{ font-size: 4rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
#philosophy .philosophy .item .text h5 span{ font-size: 2.2rem; opacity: 0.5; margin-left: 15px; }
#philosophy .philosophy .item .text ul{ display: flex; flex-wrap: wrap; margin: -3px -13px; margin-right: -16px; padding-top: 30px; opacity: 0; transition: opacity 0.5s; overflow: hidden; }
#philosophy .philosophy .item .text ul li{ font-size: 2rem; font-weight: 400; color: #fff; padding: 3px 13px; padding-right: 16px; position: relative; }
#philosophy .philosophy .item .text ul li::before{ content: ""; width: 3px; height: 3px; background: #fff; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translate(-100%, -50%); }
#philosophy .philosophy .item .absolute{ position: absolute; top: 0; left: 0; }

#philosophy .philosophy .item:hover figure::after{ opacity: 1; }
#philosophy .philosophy .item:hover .absolute{ top: 100%; transform: translateY(-100%); }
#philosophy .philosophy .item:hover .text ul{ opacity: 1; }


#philosophy .icon-box{ display: grid; grid-template-columns: repeat(4, 1fr); margin: -10px; }
#philosophy .icon-box .box{ border-radius: 20px; background: #fff; border: 1px solid #DDD; padding: 35px; margin: 10px; transition: background 0.5s, border 0.5s, transform 1s, opacity 1s; }
#philosophy .icon-box dl{ height: 100%; display: flex; flex-direction: column; }
#philosophy .icon-box dl dt{ flex: 1 0 auto; font-size: 2.4rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 25px; transition: color; }
#philosophy .icon-box dl dd{ display: grid; grid-template-columns: auto 90px; align-items: end; }
#philosophy .icon-box dl dd p{ display: flex; flex-wrap: wrap; align-items: flex-end; min-height: 4.8em; font-size: 2rem; font-weight: 300; color: #444; line-height: 1.6; letter-spacing: -0.02em; transition: color; }
#philosophy .icon-box dl dd p span{ color: #999; }
#philosophy .icon-box dl dd .icon{ text-align: right; }
#philosophy .icon-box dl dd .icon img{ transition: filter 0.5s; }

#philosophy .grayBg .icon-box .box{ border: none !important; transition: background 0.5s, transform 1s, opacity 1s; }

@media screen and (hover: hover){
	#philosophy .icon-box .box:hover{ background: var(--purple); border: 1px solid var(--purple); }
	#philosophy .icon-box .box:hover dl dt{ color: #fff; }
	#philosophy .icon-box .box:hover dl dd p{ color: #fff !important; }
	#philosophy .icon-box .box:hover .icon img{ filter: brightness(20); -webkit-filter: brightness(20); }

	#philosophy .grayBg .icon-box .box:hover{ background: var(--mainColor); }
}

@media screen and (max-width: 1750px){
	#philosophy .icon-box br{ display: none; }
}

@media screen and (max-width: 1700px){
	#philosophy .philosophy .item .text{ padding: 40px 30px; }
	#philosophy .philosophy .item .text h5{ font-size: 3.5rem; }
	#philosophy .philosophy .item .text h5 span{ font-size: 2rem; }
	#philosophy .philosophy .item .text ul{ padding-top: 20px; }
	#philosophy .philosophy .item .text ul li{ font-size: 1.8rem; }

	#philosophy .icon-box .box{ padding: 25px; }
	#philosophy .icon-box dl dt{ font-size: 2.2rem; }
	#philosophy .icon-box dl dd p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1400px){
	#philosophy .philosophy .item{ max-width: 450px; width: 100%; }

	#philosophy .icon-box{ grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 1280px){
	#philosophy .philosophy .item .text{ padding: 30px 20px; }
	#philosophy .philosophy .item .text h5{ font-size: 3rem; }
	#philosophy .philosophy .item .text h5 span{ font-size: 1.8rem; }
	#philosophy .philosophy .item .text ul{ padding-top: 10px; }
	#philosophy .philosophy .item .text ul li{ font-size: 1.7rem; }

	#philosophy .icon-box .box{ padding: 20px; }
	#philosophy .icon-box dl dt{ font-size: 2rem; margin-bottom: 15px; }
	#philosophy .icon-box dl dd p{ font-size: 1.7rem; }
}

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

@media screen and (max-width: 900px){
	#philosophy .philosophy .item{ max-width: 400px; }
	#philosophy .philosophy .item .text h5{ font-size: 2.6rem; }
	#philosophy .philosophy .item .text h5 span{ font-size: 1.7rem; }

	#philosophy .icon-box dl dt{ font-size: 1.9rem; }
}

@media screen and (max-width: 700px){
	#philosophy .icon-box{ grid-template-columns: repeat(1, 1fr); }
	#philosophy .icon-box dl dt{ margin-bottom: 5px; }
	#philosophy .icon-box dl dd{ grid-template-columns: auto 190px; }
}


/* ENCell - 회사소식 */
#news{ overflow: hidden; }
#news .intro{ --top: 275px; --padding: 50px; }
#news .intro .img{ background: url("/img/sub/company/news_bg.jpg") no-repeat center center / cover; padding-bottom: 35.471%; border-radius: 30px; }
#news .intro .right{ margin-top: calc(var(--top) * -1); }
#news .intro .inner{ max-width: 1100px; width: 100%; margin-left: auto; position: relative; }
#news .intro .inner::before{ content: ""; height: 30px; width: 30px; background: #fff; -webkit-mask-image: radial-gradient(circle 24px at 35px 35px, transparent 0, transparent 35px, black 36px); position: absolute; top: var(--top); left: 0; transform: translate(-100%, -100%) rotate(180deg); }
#news .intro h4{ font-size: 4.2rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; padding: 0 var(--padding) var(--padding); }
#news .intro .whiteBg{ background: #fff; border-radius: 30px 0 0 0; padding: calc(var(--padding) - 10px) var(--padding); padding-right: 0; position: relative; }
#news .intro .whiteBg::before{ content: ""; height: 30px; width: 30px; background: #fff; -webkit-mask-image: radial-gradient(circle 24px at 35px 35px, transparent 0, transparent 35px, black 36px); position: absolute; top: 0; right: 0; transform: translateY(-100%) rotate(180deg); }
#news .intro .whiteBg p{ font-size: 2.1rem; font-weight: 300; color: #111; line-height: 1.6; letter-spacing: -0.02em; }
#news .intro .whiteBg span{ display: block; font-size: 2rem; font-weight: 600; color: #ccc; letter-spacing: -0.02em; margin-top: 30px; }


@media screen and (max-width: 1720px){
	#news .intro br{ display: none; }
}

@media screen and (max-width: 1700px){
	#news .intro{ --top: 200px; --padding: 40px; }
	#news .intro h4{ font-size: 3.5rem; }
	#news .intro .whiteBg p{ font-size: 1.9rem; }
	#news .intro .whiteBg span{ font-size: 1.8rem; }
}

@media screen and (max-width: 1280px){
	#news .intro{ --top: 150px; --padding: 30px; }
	#news .intro .img{ padding-bottom: 250px; }
	#news .intro h4{ font-size: 3rem; }
	#news .intro .right{ margin-top: calc(var(--top) * -1); }
	#news .intro .inner{ max-width: 100%; }
	#news .intro .whiteBg{ border-radius: 30px 30px 0 0; padding: calc(var(--padding) - 10px) var(--padding); }
	#news .intro .whiteBg::before{ display: none; }
	#news .intro .whiteBg p{ font-size: 1.8rem; }
	#news .intro .whiteBg span{ font-size: 1.7rem; margin-top: 15px; }
}

@media screen and (max-width: 900px){
	#news .intro h4{ font-size: 2.6rem; padding-bottom: 15px; }
	#news .intro .whiteBg p{ font-size: 1.7rem; }
	#news .intro .whiteBg span{ font-size: 1.6rem; }
}


/* 사업 - 위탁개발생산(CDMO) - 개요 */
#cmdo.overview{ overflow: hidden; }

#cmdo.overview .hashtag{ margin-bottom: 40px; }
#cmdo.overview .hashtag ul{ display: flex; flex-wrap: wrap; margin: -5px -15px; }
#cmdo.overview .hashtag ul li{ font-size: 2.1rem; font-weight: 600; color: #111; letter-spacing: -0.02em; padding: 15px 30px; border: 2px solid rgba(14, 145, 226, 0.4); border-radius: 99px; margin: 5px 15px; }
#cmdo.overview .hashtag ul li span{ color: var(--mainColor); }


#cmdo.overview .cmdo .titRing + p{ font-size: 2.2rem; font-weight: 300; color: #111; letter-spacing: -0.02em; }
#cmdo.overview .cmdo .titRing + p strong{ font-weight: 600; color: var(--mainColor); }

#cmdo.overview .cmdo .rocket{ margin-top: 40px; }
#cmdo.overview .cmdo .rocket img{ border-radius: 20px; }

#cmdo.overview .cmdo .slide{ margin-top: 45px; }
#cmdo.overview .cmdo .slide .text-wrap{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: -30px; }
#cmdo.overview .cmdo .slide .text{ width: calc((100% - 30px) / 2); background: #fff; border-radius: 20px; padding: 70px 40px; margin-bottom: 30px; position: relative; overflow: hidden; }
#cmdo.overview .cmdo .slide .text .figure{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; opacity: 0; transition: opacity 0.5s; }
#cmdo.overview .cmdo .slide .text .figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.5s; }
#cmdo.overview .cmdo .slide dl dt{ font-size: 2.7rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 35px; }
#cmdo.overview .cmdo .slide dl dt span{ color: var(--mainColor); }
#cmdo.overview .cmdo .slide dl dd{ font-size: 2.1rem; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.6; padding-left: 15px; position: relative; }
#cmdo.overview .cmdo .slide dl dd:not(:last-of-type){ margin-bottom: 20px; }
#cmdo.overview .cmdo .slide dl dd::before{ content: ""; width: 4px; height: 4px; background: var(--mainColor); border-radius: 50%; position: absolute; top: calc(1.6em / 2); left: 0; transform: translateY(-50%); }
#cmdo.overview .cmdo .slide .progress{ height: 10px; background: rgba(0, 0, 0, 0.07); border-radius: 99px; margin-top: 40px; }
#cmdo.overview .cmdo .slide .progress div{ height: 100%; background: var(--mainColor); border-radius: 99px; }


#cmdo.overview .step{ display: grid; grid-template-columns: repeat(5, 1fr); margin: -10px; }
#cmdo.overview .step .item{ margin: 10px; padding: 20px 0; background: #fff; box-shadow: 0px 0px 8px rgba(14, 145, 226, 0.2); border-radius: 20px; transition: opacity 1s, transform 1s, background 0.5s; }
#cmdo.overview .step .item dl dt{ display: flex; justify-content: center; align-items: center; height: 140px; font-size: 2.4rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; text-align: center; position: relative; z-index: 10; transition: color 0.5s; }
#cmdo.overview .step .item dl dt svg{ width: 100%; width: calc(100% + 45px); height: 100%; position: absolute; top: 0; left: -20px; z-index: -5; }
#cmdo.overview .step .item dl dt svg path{ fill: var(--color); transition: fill 0.5s; }
#cmdo.overview .step .item dl dd{ padding: 20px 30px; }
#cmdo.overview .step .item dl dd p{ font-size: 2.1rem; font-weight: 300; color: #444; letter-spacing: -0.02em; padding-left: 15px; position: relative; transition: color 0.5s; }
#cmdo.overview .step .item dl dd p:not(:last-of-type){ margin-bottom: 15px; }
#cmdo.overview .step .item dl dd p::before{ content: ""; width: 4px; height: 4px; background: var(--color); border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); transition: background 0.5s; }


#cmdo.overview .research{ background: url("/img/sub/business/research_bg.jpg") no-repeat center center / cover; }
#cmdo.overview .research *{ color: #fff !important; }
#cmdo.overview .research .hashtag ul *{ color: var(--mainColor) !important; }
#cmdo.overview .research .hashtag ul li{ background: #FFF; border: none; font-weight: 500; }

#cmdo.overview .research .progress{ display: flex; flex-wrap: wrap; margin-top: 40px; margin-bottom: -35px; }
#cmdo.overview .research .progress .item{ --blank: 10px; width: calc((100% - 175px) / 6); display: flex; justify-content: center; align-items: center; margin-right: 35px; margin-bottom: 35px; padding: 70px 45px; position: relative; }
#cmdo.overview .research .progress .item:last-of-type{ margin-right: 0; }
#cmdo.overview .research .progress p{ font-size: 2.2rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; line-height: 1.5; text-align: center; }
#cmdo.overview .research .progress .circle, #cmdo.overview .research .progress .arrow{ width: 65px; height: 2px; background: rgba(255, 255, 255, 0.4); position: absolute; }

#cmdo.overview .research .progress .circle{ top: calc(50% + var(--blank)); left: 2px; transform: translateX(-100%); }
#cmdo.overview .research .progress .item:first-of-type .circle{ display: none; }
#cmdo.overview .research .progress .circle::before{ content: ""; width: 10px; height: 10px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translate(-100%, -50%); box-sizing: border-box; }

#cmdo.overview .research .progress .arrow{ top: calc(50% - var(--blank) + 2px); right: -2px; transform: translateX(100%); }
#cmdo.overview .research .progress .item:last-of-type .arrow{ display: none; }
#cmdo.overview .research .progress .arrow::before{ content: ""; width: 9px; height: 15px; background: url("/img/sub/business/cmdo_progress_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 1px; transform: translate(50%, -50%); }

#cmdo.overview .research .progress .item::before{ content: ""; width: 100%; height: 100%; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 40px; position: absolute; top: 0; left: 0; clip-path: polygon(0% 0%, 0 100%, 0 calc(50% + var(--blank)), 0 calc(50% - var(--blank) - 8px), 100% calc(50% - var(--blank)), 100% calc(50% + var(--blank) + 8px), 0 calc(50% + var(--blank)), 0 100%, 100% 100%, 100% 0%); }
#cmdo.overview .research .progress .item:first-of-type::before{ clip-path: polygon(0% 0%, 0 100%, 10% calc(50% + var(--blank)), 10% calc(50% - var(--blank)), 100% calc(50% - var(--blank)), 100% calc(50% + var(--blank) + 8px), 0 calc(50% + var(--blank)), 0 100%, 100% 100%, 100% 0%); }
#cmdo.overview .research .progress .item:last-of-type::before{ clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 calc(50% - var(--blank) - 8px), 90% 50%, 90% 50%, 0 calc(50% + var(--blank)), 0 100%, 100% 100%, 100% 0%); }

@media screen and (hover: hover){
	#cmdo.overview .cmdo .slide .text:hover .figure{ opacity: 1; }
	#cmdo.overview .cmdo .slide .text:hover .figure img{ transform: translate(-50%, -50%) scale(1.1); }

	#cmdo.overview .step .item:hover{ background: var(--color); }
	#cmdo.overview .step .item:hover dl dt{ color: var(--color); }
	#cmdo.overview .step .item:hover dl dt svg path{ fill: #fff; }
	#cmdo.overview .step .item:hover dl dd p{ color: #fff; }
	#cmdo.overview .step .item:hover dl dd p::before{ background: #fff; }
}

@media screen and (max-width: 1700px){
	#cmdo.overview .hashtag ul li{ font-size: 1.9rem; padding: 10px 20px; }

	#cmdo.overview .cmdo .titRing + p{ font-size: 2rem; }
	#cmdo.overview .cmdo .slide .text{ padding: 40px; }
	#cmdo.overview .cmdo .slide dl dt{ font-size: 2.2rem; margin-bottom: 20px; }
	#cmdo.overview .cmdo .slide dl dd{ font-size: 1.9rem; }
	#cmdo.overview .cmdo .slide dl dd:not(:last-of-type){ margin-bottom: 10px; }
	#cmdo.overview .cmdo .slide .progress{ margin-top: 30px; }

	#cmdo.overview .step .item dl dt{ height: 120px; font-size: 2.2rem;  }
	#cmdo.overview .step .item dl dd p{ font-size: 1.9rem; }

	#cmdo.overview .research .progress .item{ padding: 60px 45px; }
	#cmdo.overview .research .progress p{ font-size: 2rem; }
}

@media screen and (max-width: 1450px){
	#cmdo.overview .step{ grid-template-columns: repeat(3, 1fr); }

	#cmdo.overview .step .item br{ display: none; }
	#cmdo.overview .research .progress{ margin-bottom: -20px; }
	#cmdo.overview .research .progress .item{ width: calc((100% - 40px) / 3); margin-right: 20px; margin-bottom: 20px; padding: 50px 40px; }
	#cmdo.overview .research .progress .item:nth-of-type(3n){ margin-right: 0; }
	#cmdo.overview .research .progress .circle, #cmdo.overview .research .progress .arrow{ width: 45px; }
}

@media screen and (max-width: 1280px){
	#cmdo.overview .hashtag{ margin-bottom: 20px; }
	#cmdo.overview .hashtag ul li{ font-size: 1.8rem; padding: 7px 20px; }

	#cmdo.overview .cmdo .titRing + p{ font-size: 1.8rem; }
	#cmdo.overview .cmdo .slide .text{ padding: 30px; }
	#cmdo.overview .cmdo .slide dl dt{ font-size: 2rem; margin-bottom: 10px; }
	#cmdo.overview .cmdo .slide dl dd{ font-size: 1.8rem; }
	#cmdo.overview .cmdo .slide dl dd:not(:last-of-type){ margin-bottom: 5px; }
	#cmdo.overview .cmdo .slide .progress{ margin-top: 20px; }

	#cmdo.overview .step .item{ padding: 15px 0; }
	#cmdo.overview .step .item dl dt{ height: 100px; font-size: 2rem; }
	#cmdo.overview .step .item dl dd{ padding: 20px; }
	#cmdo.overview .step .item dl dd p{ font-size: 1.8rem; }
	#cmdo.overview .step .item dl dd p:not(:last-of-type){ margin-bottom: 10px; }

	#cmdo.overview .research .progress p{ font-size: 1.8rem; }
}

@media screen and (max-width: 900px){
	#cmdo.overview .hashtag ul li{ font-size: 1.7rem; }

	#cmdo.overview .cmdo .titRing + p{ font-size: 1.7rem; }
	#cmdo.overview .cmdo .slide dl dt{ font-size: 1.9rem; }
	#cmdo.overview .cmdo .slide dl dd{ font-size: 1.7rem; }

	#cmdo.overview .step .item{ padding: 10px 0 5px; }
	#cmdo.overview .step .item dl dt{ height: 85px; font-size: 1.9rem;  }
	#cmdo.overview .step .item dl dd p{ font-size: 1.7rem; padding-left: 10px; }

	#cmdo.overview .research .progress p{ font-size: 1.7rem; }
}

@media screen and (max-width: 850px){
	#cmdo.overview .cmdo .slide .text{ width: 100%; }

	#cmdo.overview .step{ grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 700px){
	#cmdo.overview .research .progress .item{ --blank: 7px; width: calc((100% - 20px) / 2); }
	#cmdo.overview .research .progress .item:nth-of-type(3n){ margin-right: 20px; }
	#cmdo.overview .research .progress .item:nth-of-type(2n){ margin-right: 0; }
}


/* 사업 - 위탁개발생산(CDMO) - GMP 시설 */
#cmdo.gmp{ padding-bottom: 0; }
#cmdo.gmp .diagram .mobile{ max-width: 500px; margin: 0 auto; display: none; }
#cmdo.gmp .diagram .svg{ width: 100%; height: auto; }
#cmdo.gmp .diagram .svg .hover{ cursor: pointer; }
#cmdo.gmp .diagram .svg .list .bg{ transition: fill 0.5s; }
#cmdo.gmp .diagram .svg .list .stroke{ transition: stroke 0.5s; }
#cmdo.gmp .diagram .svg .list path,
#cmdo.gmp .diagram .svg .list circle{ transition: fill 0.5s; }

#cmdo.gmp .diagram .svg .list.active .bg{ fill: var(--mainColor); }
#cmdo.gmp .diagram .svg .list.active .stroke{ stroke: var(--mainColor); }
#cmdo.gmp .diagram .svg .list.active path, 
#cmdo.gmp .diagram .svg .list.active circle{ fill: #fff; }

#cmdo.gmp .table-box th{ width: 300px; }
#cmdo.gmp .table-box ul{ display: flex; }
#cmdo.gmp .table-box ul li{ width: calc(100% / 4); display: flex; align-items: center; padding: 24px 35px; }
#cmdo.gmp .table-box ul.five li{ width: calc(100% / 5); }
#cmdo.gmp .table-box ul li:not(:last-of-type){ border-right: 1px solid #DDD; }

#cmdo.gmp .table-box .flex{ display: flex; flex-wrap: wrap; align-items: center; margin: -5px -10px; }
#cmdo.gmp .table-box .flex > *{ margin: 5px 10px; }

#cmdo.gmp .mt{ margin-top: 80px; }

@media screen and (max-width: 1700px){
	#cmdo.gmp .table-box ul li{ padding: 20px; }
}

@media screen and (max-width: 1400px){
	#cmdo.gmp .table-box th{ width: 200px; }
}

@media screen and (max-width: 1280px){
	#cmdo.gmp .table-box ul li{ padding: 15px; }

	#cmdo.gmp .mt{ margin-top: 40px; }
}

@media screen and (max-width: 1200px){
	#cmdo.gmp .diagram .pc{ display: none; }
	#cmdo.gmp .diagram .mobile{ display: block; }
}

@media screen and (max-width: 1000px){
	#cmdo.gmp .table-box table{ width: 950px; }
}


/* 사업 - 위탁개발생산(CDMO) - 품질 운영시스템 */
#cmdo.quality{ overflow: hidden; }
#cmdo.quality .table-box{ text-align: center; }
#cmdo.quality .table-box colgroup col.large{ width: 296%; }
#cmdo.quality .table-box colgroup col.medium{ width: 122%; }

#cmdo.quality .licence .card-box{ display: flex; flex-wrap: wrap; margin-bottom: -30px; }
#cmdo.quality .licence .item{ width: calc((100% - 90px) / 4); margin-right: 30px; margin-bottom: 30px; position: relative; }
#cmdo.quality .licence .item:nth-of-type(4n){ margin-right: 0; }
#cmdo.quality .licence .item > div{ background: #fff; border-radius: 20px; transition: opacity 0.5s, transform 0.5s; }

#cmdo.quality .licence .item .front{ height: 100%; padding: 90px 30px; text-align: center; opacity: 1; transform: scaleX(1); }
#cmdo.quality .licence .item .front *{ font-size: 2.2rem; }
#cmdo.quality .licence .item .front p{ font-weight: 600; color: #111; letter-spacing: -0.02em; margin-top: 50px; }
#cmdo.quality .licence .item .front span{ display: block; font-weight: 300; color: #666; letter-spacing: -0.02em; line-height: 1.5; margin-top: 10px; }

#cmdo.quality .licence .item .back{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 25px; display: flex; justify-content: center; align-items: center; opacity: 0; transform: scaleX(-1); }
#cmdo.quality .licence .item .back figure{ max-width: 270px; width: 100%; height: 100%; position: relative; overflow: hidden; margin: 0 auto; }
#cmdo.quality .licence .item .back figure img{ max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


#cmdo.quality .diagram-box{ --center: 525px; --gap: 55px; --padding: 35px; position: relative; margin-top: 95px; }
#cmdo.quality .diagram-box .inner{ max-width: 1575px; width: 100%; margin: 0 auto; }
#cmdo.quality .diagram-box .center{ width: var(--center); position: absolute; top: calc(50% + var(--aosPlus)); left: 50%; transform: translate(-50%, -50%); z-index: -1; transition: top 1s, opacity 1s; }
#cmdo.quality .diagram-box .center.aos-animate{ top: 50%; }
#cmdo.quality .diagram-box .center .circle{ width: 100%; padding-bottom: 100%; background: url("/img/sub/business/diagram_circle.png") no-repeat center center / contain; position: relative; }
#cmdo.quality .diagram-box .center .white{ width: calc(100% - (var(--padding) * 2)); height: calc(100% - (var(--padding) * 2)); background: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#cmdo.quality .diagram-box .center .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; padding: 0 (var(--padding) * 2); }
#cmdo.quality .diagram-box .center .text h6{ font-family: var(--engFont); font-size: 2.4rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-top: 30px; }
#cmdo.quality .diagram-box .center .text p{ font-size: 2.2rem; font-weight: 400; color: var(--mainColor); letter-spacing: -0.02em; line-height: 1.5; margin-top: 15px; }

#cmdo.quality .diagram-box .flex-box{ position: relative; z-index: 20; }
#cmdo.quality .diagram-box .flex-box .line{ display: flex; justify-content: space-between; }
#cmdo.quality .diagram-box .flex-box .line:not(:last-of-type){ margin-bottom: 42px; }
#cmdo.quality .diagram-box .flex-box .box{ width: 430px; display: flex; align-items: center; padding: 30px 40px; background: #fff; box-shadow: 0px 0px 20px rgba(14, 145, 226, 0.2); border-radius: 99px; position: relative; }
#cmdo.quality .diagram-box .flex-box .box::before{ content: url("/img/sub/business/diagram_line02.png"); position: absolute; top: 50%; z-index: -1; }
#cmdo.quality .diagram-box .flex-box .box::after{ content: ""; width: 100%; height: 100%; background: #fff; border-radius: inherit; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#cmdo.quality .diagram-box .flex-box .icon, #cmdo.quality .diagram-box .flex-box dl{ position: relative; z-index: 10; }
#cmdo.quality .diagram-box .flex-box .icon{ width: 50px; }
#cmdo.quality .diagram-box .flex-box dl{ width: calc(100% - 50px); padding-right: 20px; }
#cmdo.quality .diagram-box .flex-box dl dt{ font-size: 2.1rem; font-weight: 500; color: #111; letter-spacing: -0.01em; margin-bottom: 5px; }
#cmdo.quality .diagram-box .flex-box dl dd{ font-family: var(--engFont); font-size: 1.9rem; font-weight: 400; color: #999; letter-spacing: -0.02em; line-height: 1.5; }

#cmdo.quality .diagram-box .flex-box .line01, #cmdo.quality .diagram-box .flex-box .line04{ margin-left: 40px; margin-right: 40px; }
#cmdo.quality .diagram-box .flex-box .line .box:first-of-type{ flex-direction: row-reverse; text-align: right; margin-right: var(--gap); }
#cmdo.quality .diagram-box .flex-box .line .box:last-of-type{ margin-left: var(--gap); }
#cmdo.quality .diagram-box .flex-box .line .box:last-of-type dl{ padding-right: 0; padding-left: 20px; }

#cmdo.quality .diagram-box .flex-box .line01 .box::before, #cmdo.quality .diagram-box .flex-box .line04 .box::before{ content: url("/img/sub/business/diagram_line01.png"); }
#cmdo.quality .diagram-box .flex-box .line .box:first-of-type::before{ right: 0; transform: translate(100%, -50%); }
#cmdo.quality .diagram-box .flex-box .line .box:last-of-type::before{ left: 0; transform: translate(-100%, -50%) scaleX(-1); }

#cmdo.quality .diagram-box .flex-box .line01 .box:first-of-type::before{ transform: translate(100%, 0); }
#cmdo.quality .diagram-box .flex-box .line01 .box:last-of-type::before{ transform: translate(-100%, 0) scaleX(-1); }
#cmdo.quality .diagram-box .flex-box .line04 .box:first-of-type::before{ transform: translate(100%, -100%) scaleY(-1); }
#cmdo.quality .diagram-box .flex-box .line04 .box:last-of-type::before{ transform: translate(-100%, -100%) scale(-1); }

@media screen and (max-width: 1700px){
	#cmdo.quality .licence .item .front{ padding: 70px 30px; }
	#cmdo.quality .licence .item .front *{ font-size: 2rem; }
	#cmdo.quality .licence .item .front p{ margin-top: 30px; }

	#cmdo.quality .diagram-box{ margin-top: 50px; }
	#cmdo.quality .diagram-box .center .text h6{ font-size: 2.2rem; }
	#cmdo.quality .diagram-box .center .text p{ font-size: 2rem; }
	#cmdo.quality .diagram-box .flex-box dl dt{ font-size: 1.9rem; }
	#cmdo.quality .diagram-box .flex-box dl dd{ font-size: 1.8rem; }

	#cmdo.quality .diagram-box .flex-box .box{ padding: 25px 30px; }
}

@media screen and (max-width: 1650px){
	#cmdo.quality .diagram-box .center{ width: 30%; }
}

@media screen and (max-width: 1550px){
	#cmdo.quality .diagram-box .flex-box .line .box:first-of-type::before{ right: var(--gap); }
	#cmdo.quality .diagram-box .flex-box .line .box:last-of-type::before{ left: var(--gap);  }
	#cmdo.quality .diagram-box .flex-box .line:not(:last-of-type){ margin-bottom: 52px; }

	#cmdo.quality .diagram-box .flex-box .line01, #cmdo.quality .diagram-box .flex-box .line04{ margin-left: 80px; margin-right: 80px; }
	#cmdo.quality .diagram-box .flex-box .line02, #cmdo.quality .diagram-box .flex-box .line03{ margin-left: 30px; margin-right: 30px; }
}

@media screen and (max-width: 1450px){
	#cmdo.quality .diagram-box .flex-box .line02, #cmdo.quality .diagram-box .flex-box .line03{ margin-left: 0; margin-right: 0; }
}

@media screen and (max-width: 1400px){
	#cmdo.quality .diagram-box .center{ max-width: 400px; width: 100%; position: relative; top: unset; left: unset; transform: unset; margin: 0 auto; }

	#cmdo.quality .diagram-box .flex-box{ margin-top: 40px; }
	#cmdo.quality .diagram-box .flex-box .line{ justify-content: center; margin-left: 0 !important; margin-right: 0 !important; }
	#cmdo.quality .diagram-box .flex-box .line:not(:last-of-type){ margin-bottom: 30px; }
	#cmdo.quality .diagram-box .flex-box .box{ max-width: calc((100% - 30px) / 2); margin: 0 !important; padding: 25px; }
	#cmdo.quality .diagram-box .flex-box .line .box:first-of-type{ margin-right: 30px !important; }
	#cmdo.quality .diagram-box .flex-box .box::before{ display: none; }
}

@media screen and (max-width: 1280px){
	#cmdo.quality .licence .card-box{ margin-bottom: -20px; }
	#cmdo.quality .licence .item{ width: calc((100% - 60px) / 4); margin-right: 20px; margin-bottom: 20px; }
	#cmdo.quality .licence .item .front{ padding: 60px 30px; }
	#cmdo.quality .licence .item .front *{ font-size: 1.8rem; }
	#cmdo.quality .licence .item .front p{ margin-top: 15px; }
	#cmdo.quality .licence .item .front span{ margin-top: 5px; }
	
	#cmdo.quality .diagram-box{ margin-top: 30px; }
	#cmdo.quality .diagram-box .center .text h6{ font-size: 2rem; margin-top: 20px; }
	#cmdo.quality .diagram-box .center .text p{ font-size: 1.8rem; margin-top: 10px; }
	#cmdo.quality .diagram-box .flex-box dl dt{ font-size: 1.8rem; }
	#cmdo.quality .diagram-box .flex-box dl dd{ font-size: 1.7rem; }
}

@media screen and (max-width: 1050px){
	#cmdo.quality .licence .item{ width: calc((100% - 20px) / 2); }
	#cmdo.quality .licence .item:nth-of-type(2n){ margin-right: 0; }
	#cmdo.quality .licence .item .front{ padding: 50px 20px; }
	#cmdo.quality .licence .item .back{ padding: 15px; }
}

@media screen and (max-width: 900px){
	#cmdo.quality .licence .item .front *{ font-size: 1.7rem; }

	#cmdo.quality .diagram-box .center .text h6{ font-size: 1.8rem; margin-top: 10px; }
	#cmdo.quality .diagram-box .center .text p{ font-size: 1.7rem; margin-top: 5px; }
	#cmdo.quality .diagram-box .flex-box dl dt{ font-size: 1.7rem; }
	#cmdo.quality .diagram-box .flex-box dl dd{ font-size: 1.6rem; }
}

@media screen and (max-width: 850px){
	#cmdo.quality .table-box colgroup col.large{ width: 270%; }
}

@media screen and (max-width: 800px){
	#cmdo.quality .table-box table{ width: 700px; }
}

@media screen and (max-width: 750px){
	#cmdo.quality .diagram-box{ --padding: 25px; }
	#cmdo.quality .diagram-box .center{ max-width: 350px; }

	#cmdo.quality .diagram-box .flex-box .line{ flex-direction: column; align-items: center; }
	#cmdo.quality .diagram-box .flex-box .box{ max-width: 100%; padding: 25px 30px; }
	#cmdo.quality .diagram-box .flex-box .line .box:first-of-type{ flex-direction: row; margin-bottom: 30px !important; margin-right: 0 !important; text-align: left; }
	#cmdo.quality .diagram-box .flex-box dl{ padding-right: 0; padding-left: 20px; }
}




/* 사업 - 위탁품질시험 - 개요 */
#quality-test.quality .overview .table-box{ text-align: center; }
#quality-test.quality .overview .table-box colgroup col.large{ width: 223%; }
#quality-test.quality .overview .table-box span{ display: inline-block; width: 20px; height: 20px; background: #AAA; border-radius: 50%; }

#quality-test.quality .process-icon-box{ padding: 0 80px; }
#quality-test.quality .process-icon-box .item{ max-width: 275px; width: calc((100% - 240px) / 4); }

@media screen and (max-width: 1300px){
	#quality-test.quality .process-icon-box{ padding: 0 60px; }
	#quality-test.quality .process-icon-box .item{ width: calc((100% - 180px) / 4); }
}

@media screen and (max-width: 1280px){
	#quality-test.quality .overview .table-box span{ width: 15px; height: 15px; }
}

@media screen and (max-width: 1200px){
	#quality-test.quality .process-icon-box{ padding: 0; }
	#quality-test.quality .process-icon-box .item{ width: calc((100% - 120px) / 3); }
}

@media screen and (max-width: 1000px){
	#quality-test.quality .overview br{ display: none; }
	#quality-test.quality .overview .table-box colgroup col.large{ width: 180%; }
}

@media screen and (max-width: 950px){
	#quality-test.quality .overview .table-box table{ min-width: 830px; }
}

@media screen and (max-width: 750px){
	#quality-test.quality .process-icon-box .item{ width: calc((100% - 60px) / 2); }
}


/* 사업 - 위탁품질시험 - 시험항목 */
#quality-test.test-article{ padding-bottom: 0; overflow: hidden; }
#quality-test.test-article .article .item{ display: flex; align-items: center; padding: 50px 0; }
#quality-test.test-article .article .item:not(:last-of-type){ border-bottom: 1px solid #DDD; }
#quality-test.test-article .article .item:first-of-type{ padding-top: 0; }
#quality-test.test-article .article .figure{ width: 615px; }
#quality-test.test-article .article .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 65.042%; border-radius: 20px; }
#quality-test.test-article .article .figure figure.border{ border: 1px solid #DDD; }
#quality-test.test-article .article .figure figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#quality-test.test-article .article .text{ width: calc(100% - 615px); padding-left: 60px; }
#quality-test.test-article .article .text h6{ font-size: 2.5rem; font-weight: 600; color: #111; letter-spacing: -0.02em; }
#quality-test.test-article .article .text p{ font-size: 2.1rem; font-weight: 400; color: #111; letter-spacing: -0.02em; line-height: 1.6; margin-top: 25px; }
#quality-test.test-article .article .text .dot-list{ margin-top: 25px; }
#quality-test.test-article .article .text .dot-list li{ font-size: 2rem; color: #555; }


#quality-test.test-article .viral  p{ font-size: 2.2rem; font-weight: 300; color: #111; letter-spacing: -0.02em; margin-bottom: 30px; }
#quality-test.test-article .viral .dot-list li{ color: #111; }
#quality-test.test-article .viral .dot-list li:not(:last-o-type){ margin-bottom: 25px; }
#quality-test.test-article .viral .flex-box{ display: flex; }

#quality-test.test-article .viral .figure{ width: calc(100% - 475px); background: #fff; border-radius: 20px; padding: 35px; }
#quality-test.test-article .viral .text{ width: 475px; padding-left: 60px; }

@media screen and (max-width: 1700px){
	#quality-test.test-article .article .text h6{ font-size: 2.4rem; }
	#quality-test.test-article .article .text p{ font-size: 1.9rem; margin-top: 20px; }
	#quality-test.test-article .article .text .dot-list{ margin-top: 20px; }
	#quality-test.test-article .article .text .dot-list li{ font-size: 1.9rem; }

	#quality-test.test-article .viral .dot-list li:not(:last-o-type){ margin-bottom: 15px; }
	#quality-test.test-article .viral  p{ font-size: 2rem; margin-bottom: 20px; }
}

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

	#quality-test.test-article .viral .figure{ width: calc(100% - 350px); }
	#quality-test.test-article .viral .text{ width: 350px; }
}

@media screen and (max-width: 1280px){
	#quality-test.test-article .article .item{ padding: 40px 0; }
	#quality-test.test-article .article .figure{ width: 50%; }

	#quality-test.test-article .article .text{ width: 50%; }
	#quality-test.test-article .article .text h6{ font-size: 2.2rem; }
	#quality-test.test-article .article .text p{ font-size: 1.8rem; margin-top: 10px; }
	#quality-test.test-article .article .text .dot-list{ margin-top: 10px; }
	#quality-test.test-article .article .text .dot-list li{ font-size: 1.8rem; }

	#quality-test.test-article .viral .dot-list li:not(:last-o-type){ margin-bottom: 10px; }
	#quality-test.test-article .viral  p{ font-size: 1.9rem; margin-bottom: 15px; }
}

@media screen and (max-width: 1200px){
	#quality-test.test-article .viral .flex-box{ flex-direction: column; }
	#quality-test.test-article .viral .figure{ width: 100%; padding: 20px; }
	#quality-test.test-article .viral .text{ width: 100%; padding-left: 0; padding-top: 20px; }
}

@media screen and (max-width: 900px){
	#quality-test.test-article .article .text h6{ font-size: 2rem; }
	#quality-test.test-article .article .text p{ font-size: 1.8rem; }

	#quality-test.test-article .viral  p{ font-size: 1.8rem; }
}

@media screen and (max-width: 850px){
	#quality-test.test-article .article .item{ flex-direction: column; }
	#quality-test.test-article .article .figure{ width: 100%; }
	#quality-test.test-article .article .text{ width: 100%; padding-left: 0; padding-top: 30px; }
}


/* 사업 - 고객사 - 사업실적 */
#partnership.result .table-box colgroup col.ing{ width: 165px; }
#partnership.result .table-box tr{ opacity: 1; }
#partnership.result .table-box td.ing{ padding: 10px 15px; }
#partnership.result .overflow{ height: 50px; position: relative; border-radius: 7px; }
#partnership.result .bar{ width: 0; height: 100%; background: linear-gradient(to right, #18154F, var(--mainColor)); clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%); --webkit-clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%); position: relative; border-radius: 7px 0 0 7px; overflow: hidden; transition: width 1s; }
#partnership.result .bar.approved::after{ content: "APPROVED"; border: 1px solid #FFC700; border-radius: 99px; font-family: var(--engFont); font-size: 2rem; font-weight: 500; color: #FFC700; letter-spacing: -0.05em; line-height: 1; padding: 4px 10px; position: absolute; top: 50%; right: 25px; transform: translateY(-50%); box-sizing: border-box; }
#partnership.result span{ font-size: 2rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding: 0 20px; opacity: 0; transition: opacity 1s 0.5s; }
#partnership.result .fda{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 4px 6px; border: 1px solid #DFDFDD; border-radius: 10px; display: flex; justify-content: center; align-items: center; }

#partnership.result tr.aos-animate .bar{ width: var(--width); }
#partnership.result tr.aos-animate span{ opacity: 1; }

@media screen and (max-width: 1700px){
	#partnership.result .overflow{ height: 45px; }
	#partnership.result .bar.approved::after{ font-size: 1.8rem; }
	#partnership.result span{ font-size: 1.8rem; }
}

@media screen and (max-width: 1400px){
	#partnership.result .table-box colgroup col.ing{ width: 140px; }
	#partnership.result tr span{ padding: 0 10px; }
}

@media screen and (max-width: 1280px){
	#partnership.result .bar.approved::after{ font-size: 1.7rem; }
	#partnership.result span{ font-size: 1.7rem; }
}

@media screen and (max-width: 1200px){
	#partnership.result .table-box table{ min-width: 1150px; }
}

@media screen and (max-width: 1900px){
	#partnership.result .bar.approved::after{ font-size: 1.6rem; }
	#partnership.result span{ font-size: 1.6rem; }
}


/* 사업 - 고객사 - 차별성 */
#partnership.distinction{ padding-bottom: 0; overflow: hidden; }
#partnership.distinction .card-box{ display: flex; flex-wrap: wrap; margin-bottom: -40px; }
#partnership.distinction .card-box .item{ width: calc((100% - 80px) / 3); margin-right: 40px; margin-bottom: 40px; text-align: center; }
#partnership.distinction .card-box .item:nth-of-type(3n){ margin-right: 0; }
#partnership.distinction .card-box .item > div{ border: 1px solid #DDD; }
#partnership.distinction .card-box .item h6{ font-size: 3.6rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 20px; }
#partnership.distinction .card-box .item p{ font-size: 2.2rem; font-weight: 500; color: #111; letter-spacing: -0.02em; line-height: 1.6; }

#partnership.distinction .front{ padding: 50px; }
#partnership.distinction .card-box .item .front h6{ font-family: var(--engFont); color: var(--mainColor); }
#partnership.distinction .front .icon{ margin: 40px 0; }
#partnership.distinction .front span{ display: block; font-weight: 300; color: #444; line-height: inherit; }


#partnership.distinction .gmp .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#partnership.distinction .gmp .sec:nth-of-type(even) .flex-box{ flex-direction: row-reverse; }
#partnership.distinction .gmp .flex-box > div{ width: calc((100% - 140px) / 2); }

#partnership.distinction .gmp .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 57.642%; border-radius: 20px; }
#partnership.distinction .gmp .figure figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#partnership.distinction .gmp .text{ display: flex; align-items: center; }
#partnership.distinction .gmp .text h6{ font-size: 3.2rem; font-weight: 700; color: #111; letter-spacing: -0.02em; margin: 25px 0 30px; }
#partnership.distinction .gmp .text p{ font-family: var(--engFont); font-size: 2.2rem; font-weight: 400; color: #777; letter-spacing: -0.02em; }
#partnership.distinction .gmp .text p:not(:last-of-type){ margin-bottom: 7px; }

@media screen and (max-width: 1700px){
	#partnership.distinction .card-box .item h6{ font-size: 3rem; }
	#partnership.distinction .card-box .item p{ font-size: 2rem; }

	#partnership.distinction .front .icon{ margin: 30px 0; }

	#partnership.distinction .gmp .text h6{ font-size: 2.8rem; }
	#partnership.distinction .gmp .text p{ font-size: 2rem; }
}

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

@media screen and (max-width: 1280px){
	#partnership.distinction .card-box{ margin-bottom: -20px; }
	#partnership.distinction .card-box .item{ width: calc((100% - 40px) / 3); margin-right: 20px; margin-bottom: 20px; }
	#partnership.distinction .card-box .item h6{ font-size: 2.6rem; margin-bottom: 5px; }
	#partnership.distinction .card-box .item p{ font-size: 1.9rem; }

	#partnership.distinction .front{ padding: 40px; }
	#partnership.distinction .front .icon{ margin: 20px 0; }

	#partnership.distinction .gmp .text h6{ font-size: 2.4rem; margin: 20px 0 15px; }
	#partnership.distinction .gmp .text p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1000px){
	#partnership.distinction .card-box .item{ width: calc((100% - 20px) / 2); }
	#partnership.distinction .card-box .item:nth-of-type(3n){ margin-right: 20px; }
	#partnership.distinction .card-box .item:nth-of-type(2n){ margin-right: 0; }

	#partnership.distinction .gmp .flex-box{ flex-direction: column !important; }
	#partnership.distinction .gmp .flex-box > div{ width: 100%; }
	#partnership.distinction .gmp .text{ padding-top: 20px; }
}

@media screen and (max-width: 900px){
	#partnership.distinction .card-box .item h6{ font-size: 2.4rem; }
	#partnership.distinction .card-box .item p{ font-size: 1.8rem; }

	#partnership.distinction .gmp .text h6{ font-size: 2.2rem; }
	#partnership.distinction .gmp .text p{ font-size: 1.7rem; }
}

@media screen and (max-width: 650px){
	#partnership.distinction .front{ padding: 30px; }
}

@media screen and (max-width: 600px){
	#partnership.distinction .card-box .item{ width: 100%; margin-right: 0; }
	#partnership.distinction .card-box .item:nth-of-type(3n){ margin-right: 0; }
}


/* 사업 - 고객사 - 주요 고객사 */
#partnership.partnership .partner-box ul{ display: flex; flex-wrap: wrap; margin-bottom: -65px; }
#partnership.partnership .partner-box ul li{ width: calc((100% - 200px) / 6); margin-right: 40px; margin-bottom: 65px; }
#partnership.partnership .partner-box ul li:nth-of-type(6n){ margin-right: 0; }
#partnership.partnership .partner-box ul li figure{ width: 100%; height: 100px; border: 1px solid #DDD; border-radius: 15px; display: flex; justify-content: center; align-items: center; padding: 10px; }
#partnership.partnership .partner-box ul li figure img{ max-height: 100%; }
#partnership.partnership .partner-box ul li p{ font-size: 2.1rem; font-weight: 400; color: #111; text-align: center; margin-top: 20px; }

@media screen and (max-width: 1700px){
	#partnership.partnership .partner-box ul li p{ font-size: 1.9rem; }
}

@media screen and (max-width: 1500px){
	#partnership.partnership .partner-box ul{ margin-bottom: -40px; }
	#partnership.partnership .partner-box ul li{ width: calc((100% - 100px) / 6); margin-right: 20px; margin-bottom: 40px; }
}

@media screen and (max-width: 1300px){
	#partnership.partnership .partner-box ul li{ width: calc((100% - 80px) / 5); }
	#partnership.partnership .partner-box ul li:nth-of-type(6n){ margin-right: 20px; }
	#partnership.partnership .partner-box ul li:nth-of-type(5n){ margin-right: 0; }
	#partnership.partnership .partner-box ul li figure{ height: 90px; }
}

@media screen and (max-width: 1280px){
	#partnership.partnership .partner-box ul li p{ font-size: 1.8rem; margin-top: 10px; }
}

@media screen and (max-width: 1000px){
	#partnership.partnership .partner-box ul li{ width: calc((100% - 60px) / 4); }
	#partnership.partnership .partner-box ul li:nth-of-type(5n){ margin-right: 20px; }
	#partnership.partnership .partner-box ul li:nth-of-type(4n){ margin-right: 0; }
}

@media screen and (max-width: 900px){
	#partnership.partnership .partner-box ul li p{ font-size: 1.7rem; }
}

@media screen and (max-width: 800px){
	#partnership.partnership .partner-box ul li{ width: calc((100% - 40px) / 3); }
	#partnership.partnership .partner-box ul li:nth-of-type(4n){ margin-right: 20px; }
	#partnership.partnership .partner-box ul li:nth-of-type(3n){ margin-right: 0; }
	#partnership.partnership .partner-box ul li figure{ height: 80px; }
}

@media screen and (max-width: 600px){
	#partnership.partnership .partner-box ul li{ width: calc((100% - 20px) / 2); }
	#partnership.partnership .partner-box ul li:nth-of-type(3n){ margin-right: 20px; }
	#partnership.partnership .partner-box ul li:nth-of-type(2n){ margin-right: 0; }
}


/* 연구개발 - 플랫폼 기술 - 차세대 줄기세포(ENCT) */
#platform.enct{ padding-bottom: 0; overflow: hidden; }
#platform.enct .diagram .tit{ max-width: 500px; width: 90%; background: #002565; border-radius: 99px; padding: 20px 40px; text-align: center; margin: 0 auto; margin-bottom: -51px; position: relative; z-index: 10; }
#platform.enct .diagram .tit p{ font-size: 2.4rem; font-weight: 300; color: #fff; letter-spacing: -0.02em; }
#platform.enct .diagram .tit p strong{ font-weight: 600; letter-spacing: -0.02em; }

#platform.enct .diagram .inner{ max-width: 1150px; width: 100%; margin: 0 auto; padding: 45px; padding-top: 0; border: 1px dashed #BBB; border-radius: 20px; }
#platform.enct .diagram .content{ padding: 90px 85px 45px; }
#platform.enct .diagram .content .flex{ display: flex; justify-content: space-between; }
#platform.enct .diagram .content .flex:not(:last-of-type){ margin-bottom: 15px; }
#platform.enct .diagram .content .flex > *{ width: calc((100% - 20px) / 2); }

#platform.enct .diagram .content .flex.p-box{ margin-bottom: 20px; }
#platform.enct .diagram .content .p-box p{ font-size: 2.5rem; font-weight: 600; color: #555; letter-spacing: -0.02em; text-align: center; }
#platform.enct .diagram .content .p-box p.blue{ color: var(--mainColor); }

#platform.enct .diagram .content .box{ display: flex; justify-content: center; align-items: center; background: #F9F9F9; border-radius: 20px; font-size: 2rem; font-weight: 300; color: #333; letter-spacing: -0.02em; text-align: center; padding: 27px; position: relative; }
#platform.enct .diagram .content .flex .box:last-of-type{ background: var(--mainColor); font-weight: 500; color: #fff; }
#platform.enct .diagram .content .flex .box:last-of-type p{ font-size: 2.1rem; font-weight: 600; }
#platform.enct .diagram .content .box::after{ content: ""; width: 50px; height: 50px; background: #fff url("/img/sub/rnd/enct_arrow.svg") no-repeat center center / auto; border-radius: 50%; box-shadow: 0 0 7px rgba(22, 152, 231, 0.15); position: absolute; top: 50%; right: -10px; z-index: 20; transform: translate(50%, -50%); }
#platform.enct .diagram .content .flex .box:last-of-type::after{ display: none; }

#platform.enct .p{ margin-top: 30px; }
#platform.enct .p p{ font-size: 2.1rem; font-weight: 300; color: #444; letter-spacing: -0.02em; line-height: 1.5; text-align: center; }
#platform.enct .p p:not(:last-of-type){ margin-bottom: 15px; }
#platform.enct .p p strong{ font-weight: 600; color: #111; }


#platform.enct .grayBg .flex-box{ display: flex; }
#platform.enct .grayBg .text{ width: calc(100% - 665px); padding-right: 45px; }
#platform.enct .grayBg .text .dot-list{ margin-bottom: 40px; }
#platform.enct .grayBg .text .dot-list li strong{ font-weight: 500; }
#platform.enct .grayBg .text .table-box{ text-align: center; }
#platform.enct .grayBg .text .table-box td{ padding: 20px 10px; }

#platform.enct .grayBg .image{ width: 665px; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 20px; }
#platform.enct .grayBg .image figcaption{ font-size: 2.1rem; font-weight: 300; color: #333; letter-spacing: -0.02em; text-align: center; margin-top: 15px; }

@media screen and (max-width: 1700px){
	#platform.enct .diagram .tit p{ font-size: 2.2rem; }

	#platform.enct .diagram .content .p-box p{ font-size: 2.3rem; }
	#platform.enct .diagram .content .box{ font-size: 1.8rem; }
	#platform.enct .diagram .content .flex .box:last-of-type p{ font-size: 1.9rem; }

	#platform.enct .p p{ font-size: 1.9rem; }


	#platform.enct .grayBg .image figcaption{ font-size: 1.9rem; }
}

@media screen and (max-width: 1450px){
	#platform.enct .grayBg .text{ width: 50%; }
	#platform.enct .grayBg .image{ width: 50%; }
}

@media screen and (max-width: 1280px){
	#platform.enct .diagram .tit{ max-width: 350px; padding: 15px 30px; margin-bottom: -41px; }
	#platform.enct .diagram .tit p{ font-size: 2rem; }

	#platform.enct .diagram .inner{ padding: 0 20px; }
	#platform.enct .diagram .content{ padding: 80px 40px 40px; }
	#platform.enct .diagram .content .p-box p{ font-size: 2.1rem; }
	#platform.enct .diagram .content .box{ font-size: 1.7rem; padding: 20px; }
	#platform.enct .diagram .content .box::after{ width: 40px; height: 40px; }
	#platform.enct .diagram .content .flex .box:last-of-type p{ font-size: 1.8rem; }

	#platform.enct .p{ margin-top: 20px; }
	#platform.enct .p p{ font-size: 1.8rem; }
	#platform.enct .p p:not(:last-of-type){ margin-bottom: 10px; }

	#platform.enct .grayBg .text .dot-list{ margin-bottom: 20px; }
	#platform.enct .grayBg .text .table-box td{ padding: 15px 10px; }
	#platform.enct .grayBg .image figcaption{ font-size: 1.8rem; }
}

@media screen and (max-width: 1100px){
	#platform.enct .grayBg .flex-box{ flex-direction: column-reverse; }
	#platform.enct .grayBg .text{ width: 100%; padding-right: 0; padding-top: 30px; }
	#platform.enct .grayBg .image{ width: 100%; }
}

@media screen and (max-width: 900px){
	#platform.enct .diagram .tit{ padding: 10px 30px; }
	#platform.enct .diagram .tit p{ font-size: 1.9rem; }

	#platform.enct .diagram .inner{ padding: 0; }
	#platform.enct .diagram .content{ padding: 70px 20px 20px; }
	#platform.enct .diagram .content .p-box p{ font-size: 2rem; }
	#platform.enct .diagram .content .box{ font-size: 1.6rem; padding: 15px; }
	#platform.enct .diagram .content .flex .box:last-of-type p{ font-size: 1.7rem; }
	
	#platform.enct .p p{ font-size: 1.7rem; }

	#platform.enct .grayBg .text .table-box *{ font-size: 1.6rem; }
	#platform.enct .grayBg .image figcaption{ font-size: 1.7rem; }
}

@media screen and (max-width: 800px){
	#platform.enct .diagram .p br{ display: none; }
}


/* 연구개발 - 플랫폼 기술 - 바이럴 벡터 */
#platform.viral .tab-content .tab:not(:first-of-type){ display: none; }

#platform.viral .aav .flex-box{ display: flex; flex-wrap: wrap; margin-bottom: -30px; }
#platform.viral .aav .flex-box .box{ width: calc((100% - 90px) / 4); border: 1px solid #DDD; border-radius: 20px; margin-right: 30px; margin-bottom: 30px; padding: 50px 30px; text-align: center; }
#platform.viral .aav .flex-box .box:nth-of-type(4n){ margin-right: 0; }
#platform.viral .aav .flex-box .box h6{ font-family: var(--engFont); font-size: 2.1rem; font-weight: 500; color: #111; letter-spacing: -0.02em; }
#platform.viral .aav .flex-box .box figure{ width: 100%; margin: 50px 0 45px; }
#platform.viral .aav .flex-box .box p{ font-size: 2rem; font-weight: 300; color: #444; letter-spacing: -0.02em; line-height: 1.6; }


#platform.viral .vector .sec:not(:last-of-type){ margin-bottom: 150px; }
#platform.viral .vector .grid-box{ display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin: -30px 0; }
#platform.viral .vector .item{ display: flex; flex-direction: column; justify-content: flex-end; margin: 30px 0; }
#platform.viral .vector .item figure{ width: 100%; padding: 0 10px; }
#platform.viral .vector .item .text{ height: 100px; display: flex; justify-content: center; align-items: center; background: linear-gradient(to right, #222, #222); font-family: var(--engFont); font-size: 2.1rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; clip-path: polygon(calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0% 100%, 18px 50%, 0% 0%); -webkit-clip-path: polygon(calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0% 100%, 18px 50%, 0% 0%); margin-top: 35px; padding: 10px 20px; transition: background 0.5s; cursor: pointer; }

#platform.viral .vector .item.column{ grid-column: auto / span 2; }
#platform.viral .vector .item.column .flex{ display: flex; }
#platform.viral .vector .item.column .flex .text{ width: calc(100% / 2); }

#platform.viral .vector .tit h6{ font-family: var(--engFont); font-size: 3rem; font-weight: 600; color: #222; letter-spacing: -0.02em; text-align: center; margin-bottom: 50px; }

#platform.viral .vector .black-process{ --height: 123px; --pt: 25px; display: flex; position: relative; z-index: 10; }
#platform.viral .vector .black-process::before{ content: ""; width: 100%; height: var(--height); background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1)); border-radius: 999px; position: absolute; top: 0; left: 0; z-index: -1; }
#platform.viral .vector .black-process .box{ width: calc(100% / 6); text-align: center; position: relative; }
#platform.viral .vector .black-process .black{ height: var(--height); display: flex; justify-content: center; align-items: center; position: relative; }
#platform.viral .vector .black-process .box .black::after{ content: ""; width: 50px; height: 45px; background: url("/img/sub/rnd/viral_vector_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
#platform.viral .vector .black-process .box:last-of-type .black::after{ display: none; }
#platform.viral .vector .black-process .black span{ display: flex; justify-content: center; align-items: center; width: 160px; height: 57px; border-radius: 999px; font-size: 2.1rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; }
#platform.viral .vector .black-process .black span.bg{ background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

#platform.viral .vector .black-process .dl{ max-width: 260px; width: 100%; margin: 0 auto; margin-top: var(--pt); }
#platform.viral .vector .black-process .dl *{ font-size: 2rem; font-weight: 400; }
#platform.viral .vector .black-process .dl dt{ height: 60px; display: flex; justify-content: center; align-items: center; background: var(--purple); font-family: var(--engFont); color: #fff; letter-spacing: -0.02em; border-radius: 15px 15px 0 0; }
#platform.viral .vector .black-process .dl dd{ min-height: 125px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #111; line-height: 1.6; padding: 15px 20px; border: 1px solid rgba(14, 145, 226, 0.2); border-radius: 0 0 15px 15px; }
#platform.viral .vector .black-process .dl dd span{ display: block; }

#platform.viral .vector .black-process .dashed{ padding-top: var(--pt); position: relative; }
#platform.viral .vector .black-process .dashed::before{ content: ""; width: 50%; height: var(--pt); border: 1px dashed #999; border-radius: 0 0 15px 15px; border-top: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
#platform.viral .vector .black-process .dashed p{ font-size: 2rem; font-weight: 400; color: #111; letter-spacing: -0.02em; line-height: 1.6; padding-top: 20px; }
#platform.viral .vector .black-process .dashed.wide{ width: 200%; }

@media screen and (hover: hover){
	#platform.viral .vector .item .text:hover{ background: linear-gradient(to right, #3D2B70, var(--purple)); }
}

@media screen and (max-width: 1600px){
	#platform.viral .aav .flex-box .box{ padding: 40px 20px; }
	#platform.viral .aav .flex-box .box h6{ font-size: 1.9rem; }
	#platform.viral .aav .flex-box .box figure{ margin: 30px 0 35px; }
	#platform.viral .aav .flex-box .box p{ font-size: 1.8rem; }

	#platform.viral .vector .sec:not(:last-of-type){ margin-bottom: 120px; }
	#platform.viral .vector .item .text{ height: 90px; font-size: 1.9rem; }

	#platform.viral .vector .tit h6{ font-size: 2.6rem; }

	#platform.viral .vector .black-process{ --height: 110px; }
	#platform.viral .vector .black-process .black span{ width: 140px; height: 50px; font-size: 1.9rem; }
	#platform.viral .vector .black-process .dl *{ font-size: 1.8rem; }
	#platform.viral .vector .black-process .dl dt{ height: 55px; }
	#platform.viral .vector .black-process .dl dd{ min-height: 120px; }
	#platform.viral .vector .black-process .dashed p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1450px){
	#platform.viral .aav .flex-box{ margin-bottom: -20px; }
	#platform.viral .aav .flex-box .box{ width: calc((100% - 60px) / 4); margin-right: 20px; margin-bottom: 20px; padding: 30px 20px; }
	#platform.viral .aav .flex-box .box br{ display: none; }
}

@media screen and (max-width: 1280px){
	#platform.viral .vector .black-process{ --height: 100px; }
	#platform.viral .aav .flex-box .box{ width: calc((100% - 20px) / 2); }
	#platform.viral .aav .flex-box .box:nth-of-type(2n){ margin-right: 0; }
	#platform.viral .aav .flex-box .box h6{ font-size: 1.8rem; }
	#platform.viral .aav .flex-box .box figure{ margin: 15px 0 20px; }
	#platform.viral .aav .flex-box .box p{ font-size: 1.7rem; }

	#platform.viral .vector .sec:not(:last-of-type){ margin-bottom: 80px; }
	#platform.viral .vector .item .text{ height: 80px; font-size: 1.8rem; margin-top: 20px; }

	#platform.viral .vector .tit h6{ font-size: 2.2rem; margin-bottom: 20px; }

	#platform.viral .vector .black-process .box .black::after{ width: 34px; height: 30px; }
	#platform.viral .vector .black-process .black span{ width: 110px; height: 45px; font-size: 1.8rem; }
	#platform.viral .vector .black-process .dl *{ font-size: 1.7rem; }
	#platform.viral .vector .black-process .dl dt{ height: 50px; }
	#platform.viral .vector .black-process .dl dd{ min-height: 100px; padding: 10px 15px; }
	#platform.viral .vector .black-process .dashed p{ font-size: 1.7rem; }
}

@media screen and (max-width: 1200px){
	#platform.viral .vector .grid-box{ grid-template-columns: repeat(3, 1fr); }

	#platform.viral .vector .black-process{ --height: 140px; max-width: 100%; width: max-content; display: block; margin: 0 auto; }
	#platform.viral .vector .black-process::before{ width: var(--height); height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1)); border-radius: 15px; }
	#platform.viral .vector .black-process .box{ width: 100%; display: flex; align-items: center; padding: 15px 0; }
	#platform.viral .vector .black-process .black{ width: var(--height); }
	#platform.viral .vector .black-process .box .black::after{ top: unset; bottom: -15px; transform: translate(-150%, 50%) rotate(90deg); }
	#platform.viral .vector .black-process .dl{ width: calc(100% - var(--height)); padding-top: 0; padding-left: var(--pt); margin: 0; }
	#platform.viral .vector .black-process .dashed{ max-width: 260px; width: calc(100% - var(--height)); padding-top: 0; padding-left: calc(var(--pt) + 20px); }
	#platform.viral .vector .black-process .dashed br{ display: none; }
	#platform.viral .vector .black-process .dashed::before{ width: var(--pt); height: 100%; top: 50%; left: 0; transform: translateY(-50%); border-top: 1px dashed #999; border-left: none; border-radius: 0 15px 15px 0; }

	#platform.viral .vector .black-process .dashed.wide{ width: calc(100% - var(--height)); height: calc(200% - 60px); position: absolute; top: 30px; left: var(--height); display: flex; align-items: center; }
}

@media screen and (max-width: 900px){
	#platform.viral .aav .flex-box .box h6{ font-size: 1.7rem; }
	#platform.viral .aav .flex-box .box p{ font-size: 1.6rem; }

	#platform.viral .vector .item .text{ height: 70px; font-size: 1.7rem; }

	#platform.viral .vector .tit h6{ font-size: 2rem; }

	#platform.viral .vector .black-process .black span{ font-size: 1.7rem; }
	#platform.viral .vector .black-process .dl *{ font-size: 1.6rem; }
	#platform.viral .vector .black-process .dashed p{ font-size: 1.6rem; }
}

@media screen and (max-width: 600px){
	#platform.viral .aav .flex-box .box{ width: 100%; margin-right: 0; }

	#platform.viral .vector .item .text{ height: 60px; font-size: 1.5rem; clip-path: polygon(calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0% 100%, 10px 50%, 0% 0%); -webkit-clip-path: polygon(calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0% 100%, 10px 50%, 0% 0%) }
}


/* 연구개발 - 파이프라인 */
#pipeline{ overflow: hidden; }
#pipeline .en001 .bg{ background: url("/img/sub/rnd/pipeline_en001_bg.jpg") no-repeat center center / cover; border-radius: 20px; position: relative; }
#pipeline .en001 .bg::before{ content: ""; width: 160px; height: 65px; background: url("/img/sub/rnd/pipeline_en001_logo.svg") no-repeat bottom right / contain; position: absolute; bottom: 50px; right: 90px; z-index: 10; }
#pipeline .en001 .bg .text{ padding: 130px 100px; position: relative; z-index: 10; }
#pipeline .en001 .bg h5{ font-size: 3.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); line-height: 1.5; }
#pipeline .en001 .bg h5 em{ color: #fff; }


#pipeline .grayBg > div{ position: relative; }
#pipeline .grayBg .arrow{ width: 2px; height: 100px; background: url("/img/sub/rnd/pipeline_line.svg") repeat top center / auto; position: absolute; top: 50%; right: -40px; }
#pipeline .grayBg .arrow::before{ content: ""; width: 10px; height: 17px; background: url("/img/sub/rnd/pipeline_arrow_blue.svg") no-repeat center center / contain; opacity: 0.5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#pipeline .grayBg .arrow::after{ content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(245, 245, 245, 0.8), transparent); position: absolute; top: 0; left: 0; }
#pipeline .grayBg .arrow > div{ width: 80px; height: 2px; background: url("/img/sub/rnd/pipeline_line_r.svg") repeat top center / auto; position: absolute; right: 0; }
#pipeline .grayBg .arrow > div.top{ top: -1px; }
#pipeline .grayBg .arrow > div.top::after{ content: ""; width: 100%; height: 100%; background: rgba(245, 245, 245, 0.8); position: absolute; top: 0; left: 0; }
#pipeline .grayBg .arrow > div.bottom{ bottom: -1px; }
#pipeline .grayBg .arrow > div.bottom::before{ content: ""; width: 10px; height: 17px; background: url("/img/sub/rnd/pipeline_arrow_blue.svg") no-repeat center center / contain; position: absolute; left: 0; bottom: 0; transform: translateY(45%) rotate(90deg); }

#pipeline .grayBg .whiteBg:not(:last-of-type){ margin-bottom: 40px; }
#pipeline .whiteBg{ width: calc(100% - 40px); }
#pipeline .whiteBg{ display: flex; align-items: flex-end; background: #fff; border-radius: 15px; padding: 40px; }
#pipeline .whiteBg .dl{ width: 540px; }
#pipeline .whiteBg .dl dt{ min-height: 80px; display: flex; justify-content: center; align-items: center; background: var(--color); border-radius: 15px; font-size: 2.4rem; font-weight: 700; color: #111; text-align: center; padding: 10px; }
#pipeline .whiteBg .dl dd{ border: 1px solid #DDD; border-radius: 15px; padding: 45px 30px; margin-top: 30px; }
#pipeline .whiteBg .dl dd .dot-list{ font-size: 2rem; }
#pipeline .whiteBg .dl dd .dot-list li{ padding-left: 15px; }
#pipeline .whiteBg .dl dd .dot-list li:not(:last-of-type){ margin-bottom: 25px; }
#pipeline .whiteBg .dl dd .dot-list li::before{ width: 3px; height: 3px; background: #111; }

#pipeline .whiteBg .content{ --padding: 40px; width: calc(100% - 540px); padding-left: 40px; }
#pipeline .whiteBg .content .graph{ display: flex; text-align: center; margin-right: calc(var(--padding) * -1); }
#pipeline .whiteBg .content .graph .box{ position: relative; padding-top: 75px; }

#pipeline .whiteBg .content .graph .circle{ width: 100%; position: relative; padding: 0 var(--padding); }
#pipeline .whiteBg .content .graph .circle::before{ content: ""; width: 20px; height: 20px; background: url("/img/sub/rnd/pipeline_graph_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
#pipeline .whiteBg .content .graph .box:first-of-type .circle::before{ transform: translateY(-50%); }
#pipeline .whiteBg .content .graph .circle div{ width: 100%; padding-bottom: 100%; border-radius: 50%; background: var(--color); position: relative; z-index: 10; }
#pipeline .whiteBg .content .graph .circle span{ font-family: var(--engFont); font-size: 1.8rem; font-weight: 700; color: #111; letter-spacing: -0.02em; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }

#pipeline .whiteBg .content .graph .line{ position: absolute; top: 0; left: 0; }
#pipeline .whiteBg .content .graph .line p{ font-size: 2rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 15px; }
#pipeline .whiteBg .content .graph .line div{ height: 2px; background: #DDD; position: relative; margin-bottom: 35px; }
#pipeline .whiteBg .content .graph .line div::before, #pipeline .whiteBg .content .graph .line div::after{ content: ""; width: 1px; height: 20px; background: #999; position: absolute; top: 50%; transform: translateY(-50%); }
#pipeline .whiteBg .content .graph .line div::before{ left: 0; }
#pipeline .whiteBg .content .graph .line div::after{ right: 0; }

#pipeline .whiteBg .content .graph .p-box{ margin-top: 20px; position: relative; left: 50%; transform: translateX(-50%); }
#pipeline .whiteBg .content .graph .p-box p{ font-family: var(--engFont); font-size: 1.7rem; font-weight: 500; color: #111; letter-spacing: -0.02em; line-height: 1.5777; }
#pipeline .whiteBg .content .graph .p-box p em{ font-weight: 300; white-space: nowrap; }


#pipeline .gray{ position: relative; z-index: 10; }
#pipeline .gray .content .graph .box{ width: calc(100% / 6); }
#pipeline .gray .content .graph .line01{ width: 350%; }
#pipeline .gray .content .graph .line02{ width: calc(250% - var(--padding)); left: calc(50% - 1px); }


#pipeline .whiteBg.blue .dl dt{ color: #fff; }
#pipeline .whiteBg.blue .dl dd{ display: flex; justify-content: center; align-items: center; background: #F2F8FB; border: none; min-height: 325px; }
#pipeline .blue .content{ --padding: 60px; display: flex; align-items: center; }
#pipeline .blue .content .graph{ width: 60%; }
#pipeline .blue .content .graph .box{ width: calc(100% / 3); }
#pipeline .blue .content .graph .line{ width: calc(300% - var(--padding)); }
#pipeline .blue .content .graph .line div{ background: rgba(35, 88, 202, 0.2); }
#pipeline .blue .content .graph .line div::before, #pipeline .blue .content .graph .line .line div::after{ background: #2358CA; }
#pipeline .blue .content .graph .line p{ color: #2358CA; }
#pipeline .blue .content .graph .circle div{ background: #fff; border: 1px dashed var(--mainColor); }
#pipeline .blue .content .graph .circle span{ color: var(--mainColor); }

#pipeline .blue .content .graph .last .circle div{ background: #2358CA; border: none; z-index: 10; } 
#pipeline .blue .content .graph .last .circle div::after{ content: ""; width: 80px; height: 56px; background: url("/img/sub/rnd/pipeline_gradi_arrow.png") no-repeat center center / contain; position: absolute; top: 50%; right: 15px; z-index: -1; transform: translate(100%, -50%); }
#pipeline .blue .content .graph .last .circle span{ color: #fff; } 

#pipeline .blue .content .text{ width: calc(40% + var(--padding)); padding-left: 40px; position: relative; }
#pipeline .blue .content .text .border{ width: 100%; height: 100%; border: 3px solid #2358CA; border-radius: 20px; padding: 50px 30px; }
#pipeline .blue .content .text .inner{ max-width: 280px; width: 100%; margin: 0 auto; }
#pipeline .blue .content .text .calendar{ display: flex; align-items: center; }
#pipeline .blue .content .text .calendar .icon{ width: 56px; }
#pipeline .blue .content .text p{ width: calc(100% - 56px); font-size: 2.1rem; font-weight: 600; color: #222; padding-left: 20px; }
#pipeline .blue .content .text p em{ color: #2358CA; }

#pipeline .blue .content .text .day{ display: flex; justify-content: space-between; position: relative; margin: 20px 0 30px; }
#pipeline .blue .content .text .day::after{ content: ""; width: 30px; height: 10px; background: url("/img/sub/rnd/pipeline_arrow_three.png") no-repeat center center / contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#pipeline .blue .content .text .day span{ display: flex; justify-content: center; align-items: center; max-width: calc((100% - 50px) / 2); width: 110px; height: 47px; background: rgba(14, 145, 226, 0.5); border-radius: 99px; font-size: 2.1rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; text-align: center; }
#pipeline .blue .content .text .day span:last-of-type{ background: #2358CA; }

#pipeline .blue .content .text .dot-list ul{ max-width: max-content; margin: 0 auto; }
#pipeline .blue .content .text .dot-list ul li{ max-width: max-content; font-family: var(--engFont); font-size: 1.6rem; font-weight: 400; color: #111; }


#pipeline .stem-cell p{ font-size: 2.6rem; font-weight: 300; color: #444; letter-spacing: -0.02em; text-align: center; }
#pipeline .stem-cell p strong{ font-weight: 500; color: #111; }
#pipeline .stem-cell figure{ width: 100%; text-align: center; margin: 90px 0 80px; }
#pipeline .stem-cell dl{ display: flex; background: #F5F5F5; border-radius: 20px; padding: 40px; }
#pipeline .stem-cell dl dt{ width: 380px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 20px; font-size: 2.1rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; text-align: center; padding: 15px; }
#pipeline .stem-cell dl dd{ width: calc(100% - 380px); padding-left: 40px; }
#pipeline .stem-cell .dot-list{ padding: 8px 0; }
#pipeline .stem-cell .dot-list li{ color: #444; }


#pipeline .safety .p-box p{ font-size: 2.1rem; font-weight: 300; color: #444; letter-spacing: -0.02em; line-height: 1.8; }
#pipeline .safety .p-box p:not(:last-of-type){ margin-bottom: 20px; }
#pipeline .safety .p-box p strong{ font-weight: 500; color: #111; }

#pipeline .safety .flex-box{ display: flex; justify-content: space-between; margin-top:75px; }
#pipeline .safety .half{ width: calc((100% - 100px) / 2); padding: 70px; border-radius: 20px; position: relative; }
#pipeline .safety .half::after{ content: ""; width: 36px; height: 36px; background: url("/img/sub/rnd/safety_plus.svg") no-repeat center center / contain; position: absolute; top: 50%; right: -50px; transform: translate(50%, -50%); }
#pipeline .safety .half:last-of-type::after{ display: none; }
#pipeline .safety .left{ background: url("/img/sub/rnd/safety_bg01.jpg") no-repeat center center / cover; }
#pipeline .safety .right{ background: url("/img/sub/rnd/safety_bg02.jpg") no-repeat center center / cover; }
#pipeline .safety dl{ max-width: 420px; margin: 0 auto; color: #fff; text-align: center; }
#pipeline .safety dl dt{ font-size: 3rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 30px; }
#pipeline .safety dl dd{ border-radius: 20px; font-size: 2rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.6; padding: 16px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
#pipeline .safety dl dd:not(:last-of-type){ margin-bottom: 10px; }
#pipeline .safety .left dl dd{ background: rgba(14, 145, 226, 0.6); }
#pipeline .safety .right dl dd{ background: rgba(35, 88, 202, 0.6); }


#pipeline .hyphen-list{ margin-bottom: 40px; }
#pipeline .hyphen-list li{ font-size: 2.1rem; font-weight: 300; color: #111; letter-spacing: -0.02em; padding-left: 15px; position: relative; }
#pipeline .hyphen-list li:not(:last-of-type){ margin-bottom: 15px; }
#pipeline .hyphen-list li::before{ content: "-"; position: absolute; top: 0; left: 0; font-weight: 500; color: #777; }

#pipeline .disease h4.center{ font-size: 3.2rem; font-weight: 600; color: #111; text-align: center; margin-bottom: 40px; }

#pipeline .disease .grid-box{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -20px; }
#pipeline .disease .grid-box > div{ display: flex; flex-direction: column; margin: 20px; }
#pipeline .disease .grid-box .block{ grid-column: auto / span 2; }
#pipeline .disease .grid-box .tit{ min-height: 95px; display: flex; align-items: center; background: #F5F5F5; border-radius: 13px; padding: 15px 40px; }
#pipeline .disease .grid-box .content{ display: flex; flex-direction: column; justify-content: space-between; flex: 1 0 auto; margin-top: 40px; padding: 0 40px; }

#pipeline .deco{ font-size: 2.4rem; font-weight: 600; color: #111; padding-left: 45px; position: relative; }
#pipeline .deco::before, #pipeline .deco::after{ content: ""; background: var(--mainColor); border-radius: 50%; position: absolute; top: calc(1.3em / 2); transform: translateY(-50%); }
#pipeline .deco::before{ width: 8px; height: 8px; opacity: 0.5; left: 0; }
#pipeline .deco::after{ width: 10px; height: 10px; opacity: 0.9; left: 20px; }

#pipeline .num-list li{ font-size: 2rem; font-weight: 300; color: #444; letter-spacing: -0.02em; padding: calc((40px - 1.3em) / 2) 0; padding-left: 55px; position: relative; }
#pipeline .num-list li:not(:last-of-type){ margin-bottom: 25px; }
#pipeline .num-list li::before{ content: attr(data-num); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 50%; font-family: var(--engFont); font-size: 1.7rem; font-weight: 400; color: #fff; letter-spacing: -0.02em; position: absolute; top: 0; left: 0; }

#pipeline .border-list{ display: flex; flex-wrap: wrap; margin-bottom: -20px; }
#pipeline .border-list .item{ border: 1px solid #DDD; border-radius: 20px; margin-right: 20px; margin-bottom: 20px; text-align: center; }
#pipeline .border-list .item *{ font-size: 2.1rem; font-weight: 300; color: #111; letter-spacing: -0.02em; }


#pipeline .sec01 p{ font-size: 2.1rem; font-weight: 300; color: #444; letter-spacing: -0.02em; line-height: 1.6; }
#pipeline .sec01 .left figure{ width: 100%; margin-top: 65px; }
#pipeline .sec01 .left figure img{ width: 100%; border-radius: 20px; }

#pipeline .sec01 .right .border-list{ margin-top: 30px; }
#pipeline .sec01 .right .border-list .item{ width: calc((100% - 20px) / 2); padding: 40px 30px; }
#pipeline .sec01 .right .border-list .item:nth-of-type(2n){ margin-right: 0; }
#pipeline .sec01 .right .border-list .item p{ background: var(--mainColor); border-radius: 99px; font-weight: 500; color: #fff; text-align: center; padding: 8px; margin-top: 30px; }
#pipeline .sec01 .right .border-list .item p.black{ background: #111; }


#pipeline .sec02 .right .border-list .item{ width: calc((100% - 40px) / 3); padding: 65px 30px 30px; }
#pipeline .sec02 .right .border-list .item:nth-of-type(3n){ margin-right: 0; }
#pipeline .sec02 .right .border-list .item .icon{ margin-bottom: 40px; }


#pipeline .sec03 .left .border-list .item{ width: calc((100% - 20px) / 2); padding: 30px; }
#pipeline .sec03 .left .border-list .item:nth-of-type(2n){ margin-right: 0; }
#pipeline .sec03 .left .border-list .item .icon{ margin-bottom: 25px; }
#pipeline .sec03 .left .border-list .item p span{ display: inline-block; color: #CD3D60; padding-left: 20px; position: relative; }
#pipeline .sec03 .left .border-list .item p span::before{ content: ""; width: 1px; height: 10px; background: #DDD; position: absolute; top: 50%; left: 10px; transform: translate(-50%, -50%); }

#pipeline .sec03 .right p{ font-size: 2.1rem; font-weight: 400; color: #111; letter-spacing: -0.02em; }
#pipeline .sec03 .right .num-list{ margin: 30px 0; }
#pipeline .sec03 .right .num-list li:not(:last-of-type){ margin-bottom: 20px; }


#pipeline .sec04 h6{ font-size: 2.6rem; font-weight: 500; color: #111; letter-spacing: -0.02em; text-align: center; margin-bottom: 45px; }
#pipeline .sec04 .flex-box{ max-width: 1450px; width: 100%; display: flex; flex-wrap: wrap; margin: 0 auto; margin-bottom: -30px; }
#pipeline .sec04 .box{ width: calc((100% - 100px) / 3); text-align: center; margin-right: 50px; margin-bottom: 30px; }
#pipeline .sec04 .box:nth-of-type(3n){ margin-right: 0; }
#pipeline .sec04 .box dl{ height: 100%; display: flex; flex-direction: column; }
#pipeline .sec04 .box dl dt{ flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 2.4rem; font-weight: 500; color: #111; letter-spacing: -0.02em; padding: 22px; background: #F7FBFE; border: 1px solid rgba(14, 145, 226, 0.2); border-radius: 20px 20px 0 0; margin-bottom: -1px; }
#pipeline .sec04 .box dl dt span{ display: block; font-family: var(--engFont); font-size: 2rem; font-weight: 300; color: #555; letter-spacing: -0.02em; margin-top: 10px; }
#pipeline .sec04 .box dl dd{ border: 1px solid #DDD; border-radius: 0 0 20px 20px; padding: 20px 7px; }


#pipeline .gallery h6{ font-size: 2.4rem; font-weight: 500; color: #111; letter-spacing: -0.02em; text-align: center; margin-bottom: 30px; }
#pipeline .gallery .figure ul{ max-width: 1180px; width: 100%; display: flex; flex-wrap: wrap; margin: 0 auto; margin-bottom: -50px; }
#pipeline .gallery .figure ul li{ width: calc((100% - 100px) / 3); margin-right: 50px; margin-bottom: 50px; }
#pipeline .gallery .figure ul li:nth-of-type(3n){ margin-right: 0; }
#pipeline .gallery .figure ul li p{ font-size: 2.1rem; font-weight: 500; color: #111; letter-spacing: -0.02em; text-align: center; margin-top: 25px; }
#pipeline .gallery .p-box{ text-align: center; margin-top: 70px; }
#pipeline .gallery .p-box p{ font-size: 2.1rem; font-weight: 300; color: #444; letter-spacing: -0.02em; line-height: 1.6; }
#pipeline .gallery .p-box p:not(:last-of-type){ margin-bottom: 20px; }
#pipeline .gallery .p-box p strong{ font-weight: 500; color: #111; }

#pipeline .grayBg.gallery .figure{ padding: 40px; background: #fff; border-radius: 20px; }
#pipeline .grayBg.gallery .p-box{ margin-top: 30px; }

@media screen and (max-width: 1700px){
	#pipeline .en001 .bg::before{ width: 120px; height: 50px; }
	#pipeline .en001 .bg .text{ padding: 100px 80px; }
	#pipeline .en001 .bg h5{ font-size: 3.5rem; }


	#pipeline .whiteBg .dl dt{ min-height: 70px; font-size: 2.2rem; }
	#pipeline .whiteBg .dl dd{ padding: 35px 30px; }
	#pipeline .whiteBg .dl dd .dot-list li:not(:last-of-type){ margin-bottom: 20px; }

	#pipeline .whiteBg .content .graph .line p{ font-size: 1.8rem; }
	#pipeline .whiteBg .content .graph .circle span{ font-size: 1.7rem; }
	#pipeline .whiteBg .content .graph .p-box p{ font-size: 1.6rem; }

	#pipeline .whiteBg.blue .content{ --padding: 50px; }
	#pipeline .blue .content .graph .last .circle div::after{ width: 70px; }

	#pipeline .blue .content .text p{ font-size: 1.9rem; }
	#pipeline .blue .content .text .day span{ font-size: 1.9rem; }
	#pipeline .blue .content .text .dot-list ul li{ font-size: 1.6rem; }


	#pipeline .stem-cell p{ font-size: 2.4rem; }
	#pipeline .stem-cell figure{ margin: 70px 0; }
	#pipeline .stem-cell dl dt{ font-size: 1.9rem; }

	
	#pipeline .safety .p-box p{ font-size: 1.9rem; }
	#pipeline .safety .flex-box{ margin-top: 50px; }
	#pipeline .safety .half{ padding: 50px; }
	#pipeline .safety dl dt{ font-size: 2.6rem; }
	#pipeline .safety dl dd{ font-size: 1.8rem; }


	#pipeline .hyphen-list li{ font-size: 1.9rem; }

	#pipeline .disease .grid-box .tit{ min-height: 85px; }
	#pipeline .disease .grid-box .content{ padding: 0 20px; }
	#pipeline .deco{ font-size: 2.2rem; }

	#pipeline .border-list .item *{ font-size: 1.9rem; }

	#pipeline .num-list li{ font-size: 1.8rem; }
	#pipeline .num-list li:not(:last-of-type){ margin-bottom: 20px; }

	#pipeline .disease h4.center{ font-size: 2.6rem; }

	#pipeline .sec01 p{ font-size: 1.9rem; }
	#pipeline .sec01 .left figure{ margin-top: 50px; }
	#pipeline .sec01 .right .border-list .item{ padding: 30px 20px; }

	#pipeline .sec02 .right .border-list .item{ padding: 45px 20px 30px; }

	#pipeline .sec03 .right p{ font-size: 1.9rem; }

	#pipeline .sec04 h6{ font-size: 2.4rem; }
	#pipeline .sec04 .box dl dt{ font-size: 2.2rem; }
	#pipeline .sec04 .box dl dt span{ font-size: 1.8rem; }


	#pipeline .gallery h6{ font-size: 2.2rem; }
	#pipeline .gallery .figure ul li p{ font-size: 1.9rem; }
	#pipeline .gallery .p-box p{ font-size: 1.9rem; }
}

@media screen and (max-width: 1550px){
	#pipeline .whiteBg .content{ --padding: 30px; }

	#pipeline .whiteBg.blue .content{ --padding: 40px; }
	#pipeline .blue .content br{ display: none; }
	#pipeline .blue .content .text .border{ padding: 30px 25px; }

	#pipeline .sec01 br{ display: none; }
}

@media screen and (max-width: 1500px){
	#pipeline .sec03 .left .border-list .item p span{ display: block; padding-top: 20px; padding-left: 0; }
	#pipeline .sec03 .left .border-list .item p span::before{ width: 50px; height: 1px; top: 10px; left: 50%; transform: translateX(-50%); }
}

@media screen and (max-width: 1450px){
	#pipeline .whiteBg.blue .content{ --padding: 30px; }
	#pipeline .blue .content .text .border{ padding: 20px; }
	#pipeline .blue .content .text .day{ margin: 15px 0 20px; }
}

@media screen and (max-width: 1400px){
	#pipeline .whiteBg .dl{ width: 440px; }
	#pipeline .whiteBg .content{ --padding: 20px; width: calc(100% - 440px); }
	#pipeline .whiteBg .content .graph .circle::before{ width: 15px; height: 15px; }
}

@media screen and (max-width: 1300px){
	#pipeline .whiteBg.blue .content{ --padding: 20px; }
	#pipeline .whiteBg.blue .content .graph{ width: calc(50% + var(--padding)); }
	#pipeline .whiteBg.blue .content .text{ width: 50%; }
}

@media screen and (max-width: 1280px){
	#pipeline .en001 .bg::before{ width: 100px; height: 40px; bottom: 30px; right: 40px; }
	#pipeline .en001 .bg .text{ padding: 70px 50px; }
	#pipeline .en001 .bg h5{ font-size: 3rem; }


	#pipeline .whiteBg{ padding: 30px; }
	#pipeline .whiteBg .dl dt{ min-height: 60px; font-size: 2rem; }
	#pipeline .whiteBg .dl dd{ padding: 25px; margin-top: 15px; }
	#pipeline .whiteBg .dl dd .dot-list li:not(:last-of-type){ margin-bottom: 15px; }

	#pipeline .whiteBg .content .graph .line p{ font-size: 1.7rem; }
	#pipeline .whiteBg .content .graph .circle span{ font-size: 1.6rem; }
	#pipeline .whiteBg .content .graph .p-box p{ font-size: 1.5rem; }

	#pipeline .whiteBg.blue .content{ --padding: 50px; }
	#pipeline .blue .content .text p{ font-size: 1.8rem; }
	#pipeline .blue .content .text .day span{ font-size: 1.8rem; }
	#pipeline .blue .content .text .dot-list ul li{ font-size: 1.5rem; }


	#pipeline .stem-cell p{ font-size: 2.2rem; }
	#pipeline .stem-cell figure{ margin: 40px 0; }
	#pipeline .stem-cell dl{ padding: 30px; }
	#pipeline .stem-cell dl dt{ width: 250px; font-size: 1.8rem; }
	#pipeline .stem-cell dl dd{ width: calc(100% - 250px); padding-left: 30px; }


	#pipeline .safety .p-box p{ font-size: 1.8rem; }
	#pipeline .safety .p-box p:not(:last-of-type){ margin-bottom: 10px; }
	#pipeline .safety .flex-box{ margin-top: 30px; }
	#pipeline .safety .half{ padding: 30px; }
	#pipeline .safety dl dt{ font-size: 2.4rem; margin-bottom: 20px; }
	#pipeline .safety dl dd{ font-size: 1.7rem; padding: 10px 15px; }

	
	#pipeline .hyphen-list li{ font-size: 1.8rem; }
	#pipeline .hyphen-list li:not(:last-of-type){ margin-bottom: 10px; }

	#pipeline .disease .grid-box .tit{ min-height: 75px; padding: 10px 20px; }
	#pipeline .disease .grid-box .content{ padding: 0; margin-top: 20px; }
	#pipeline .deco{ font-size: 2rem; padding-left: 30px; }
	#pipeline .deco::before{ width: 5px; height: 5px; }
	#pipeline .deco::after{ width: 8px; height: 8px; left: 12px; }

	#pipeline .num-list li{ font-size: 1.7rem; padding: calc((35px - 1.3em) / 2) 0; padding-left: 45px; }
	#pipeline .num-list li:not(:last-of-type){ margin-bottom: 15px; }
	#pipeline .num-list li::before{ width: 35px; height: 35px; font-size: 1.5rem; }

	#pipeline .disease h4.center{ font-size: 2.4rem; margin-bottom: 20px; }

	#pipeline .sec01 p{ font-size: 1.8rem; }
	#pipeline .sec01 .left figure{ margin-top: 30px; }
	#pipeline .border-list .item *{ font-size: 1.8rem; }

	#pipeline .sec02 .right .border-list .item .icon{ margin-bottom: 20px; }

	#pipeline .sec03 .right p{ font-size: 1.8rem; }
	#pipeline .sec03 .right .num-list{ margin: 20px 0; }
	#pipeline .sec03 .right .num-list li:not(:last-of-type){ margin-bottom: 10px; }

	#pipeline .sec04 h6{ font-size: 2.2rem; margin-bottom: 25px; }
	#pipeline .sec04 .flex-box{ margin-bottom: -20px; }
	#pipeline .sec04 .box{ width: calc((100% - 40px) / 3); margin-right: 20px; margin-bottom: 20px; }
	#pipeline .sec04 .box dl dt{ font-size: 2rem; padding: 15px; }
	#pipeline .sec04 .box dl dt span{ font-size: 1.7rem; margin-top: 5px; }


	#pipeline .gallery h6{ font-size: 2rem; }
	#pipeline .gallery .figure ul li p{ font-size: 1.8rem; margin-top: 15px; }
	#pipeline .gallery .p-box{ margin-top: 30px; }
	#pipeline .gallery .p-box p{ font-size: 1.8rem; }
	#pipeline .gallery .p-box p:not(:last-of-type){ margin-bottom: 10px; }

	#pipeline .grayBg.gallery .figure{ padding: 30px; }
	#pipeline .grayBg.gallery .p-box{ margin-top: 20px; }
}

@media screen and (max-width: 1200px){
	#pipeline .whiteBg{ flex-direction: column; padding: 20px; }
	#pipeline .whiteBg .dl{ width: 100%; }
	#pipeline .whiteBg .content{ width: 100%; padding-left: 0; padding-top: 30px; }
	#pipeline .whiteBg .content .graph .box{ padding-top: 60px; }
	#pipeline .whiteBg .content .graph .line p{ margin-bottom: 10px; }
	#pipeline .whiteBg .content .graph .line div{ margin-bottom: 20px; }

	#pipeline .whiteBg.blue .dl dd{ min-height: auto; padding: 40px 30px; }
	#pipeline .whiteBg.blue .dl dd figure img{ width: auto; max-height: 50px; height: auto; }


	#pipeline .disease .grid-box{ grid-template-columns: repeat(1, 1fr); margin: 0; }
	#pipeline .disease .grid-box > div{ margin: 0; }
	#pipeline .disease .grid-box > div:not(:last-of-type){ margin-bottom: 90px; }
}

@media screen and (max-width: 1100px){
	#pipeline .whiteBg.blue .content{ --padding: 40px; }
	#pipeline .blue .content .graph .last .circle div::after{ width: 50px; }
}

@media screen and (max-width: 1000px){
	#pipeline .safety .half{ width: calc((100% - 60px) / 2); }
	#pipeline .safety .half::after{ width: 26px; height: 26px; right: -30px; }
}

@media screen and (max-width: 950px){
	#pipeline .sec04 .box{ width: calc((100% - 20px) / 2); }
	#pipeline .sec04 .box:nth-of-type(3n){ margin-right: 20px; }
	#pipeline .sec04 .box:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 900px){
	#pipeline .en001 .bg::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; border-radius: inherit; }
	#pipeline .en001 .bg .text{ padding: 40px 30px; padding-bottom: 100px; }
	#pipeline .en001 .bg h5{ font-size: 2.4rem; bottom: 20px; right: 30px; }

	#pipeline .whiteBg .dl dt{ min-height: 50px; font-size: 1.9rem; }

	#pipeline .whiteBg .content .graph .line p{ font-size: 1.6rem; }
	#pipeline .whiteBg .content .graph .circle span{ font-size: 1.5rem; }

	#pipeline .whiteBg.blue .content{ --padding: 30px; }
	#pipeline .blue .content .text p{ font-size: 1.7rem; }
	#pipeline .blue .content .text .day span{ font-size: 1.7rem; }


	#pipeline .stem-cell p{ font-size: 2rem; }
	#pipeline .stem-cell figure{ margin: 20px 0 40px; }
	#pipeline .stem-cell dl{ flex-direction: column; padding: 20px; }
	#pipeline .stem-cell dl dt{ width: 100%; font-size: 1.7rem; }
	#pipeline .stem-cell dl dd{ width: 100%; padding-left: 0; padding-top: 20px; }
	#pipeline .stem-cell .dot-list{ padding: 0; }


	#pipeline .safety .p-box p{ font-size: 1.7rem; }
	#pipeline .safety dl dt{ font-size: 2.2rem; }
	#pipeline .safety dl dd{ font-size: 1.6rem; }


	#pipeline .hyphen-list li{ font-size: 1.7rem; }

	#pipeline .disease .grid-box .tit{ min-height: 65px; }
	#pipeline .deco{ font-size: 2.1rem; }

	#pipeline .disease h4.center{ font-size: 2.2rem; }

	#pipeline .sec01 p{ font-size: 1.7rem; }
	#pipeline .border-list .item *{ font-size: 1.7rem; }

	#pipeline .sec03 .left .border-list .item{ padding: 20px; }
	#pipeline .sec03 .right p{ font-size: 1.7rem; }

	#pipeline .sec04 h6{ font-size: 2rem; }
	#pipeline .sec04 .box dl dt{ font-size: 1.8rem; }
	#pipeline .sec04 .box dl dt span{ font-size: 1.7rem; }

	#pipeline .gallery h6{ font-size: 1.9rem; }
	#pipeline .gallery .figure ul li{ width: calc((100% - 40px) / 3); margin-right: 20px; }
	#pipeline .gallery .figure ul li p{ font-size: 1.7rem; }
	#pipeline .gallery .p-box p{ font-size: 1.7rem; }
}

@media screen and (max-width: 850px){
	#pipeline .safety br{ display: none; }
}

@media screen and (max-width: 800px){
	#pipeline .whiteBg.blue .content{ --padding: 20px; }

	#pipeline .safety .flex-box{ flex-direction: column; }
	#pipeline .safety .half{ width: 100%; }
	#pipeline .safety .half:not(:last-of-type){ margin-bottom: 60px; }
	#pipeline .safety .half::after{ top: calc(100% + 30px); right: 50%; }
}

@media screen and (max-width: 700px){
	#pipeline .whiteBg{ width: calc(100% - 20px); }
	#pipeline .grayBg .arrow{ right: -20px; }
	#pipeline .grayBg .arrow > div{ width: 40px; }

	#pipeline .whiteBg .content{ --padding: 30px; }
	#pipeline .whiteBg .content .graph .p-box p{ padding: 0 20px; }
	#pipeline .whiteBg .content .graph .p-box p em{ white-space: normal; }

	#pipeline .gray .content .graph{ flex-wrap: wrap; }
	#pipeline .gray .content .graph .box{ width: calc(100% / 3); }
	#pipeline .gray .content .graph .box:nth-of-type(3n) + .box .circle::before{ transform: translateY(-50%); }
	#pipeline .gray .content .graph .line01, #pipeline .gray .content .graph .line02{ width: calc(300% - var(--padding) + 20px); }
	#pipeline .gray .content .graph .line01 div::after{ right: calc((100% / 6) - var(--padding) + 20px); }
	#pipeline .gray .content .graph .line01 p{ width: calc(100% - var(--padding) - 20px); }
	#pipeline .gray .content .graph .line02{ left: -20px; }
	#pipeline .gray .content .graph .line02 p{ width: calc(100% - 20px - (100% / 6)); margin-left: calc(20px + (100% / 6)); }
	#pipeline .gray .content .graph .line02 div::before{ left: calc(20px + (100% / 6)); }

	#pipeline .whiteBg.blue .content{ --padding: 30px; flex-direction: column; }
	#pipeline .whiteBg.blue .content .graph{ width: 100%; }
	#pipeline .whiteBg.blue .content .text{ width: 100%; padding-left: 0; }
	#pipeline .blue .content .graph .last .circle div::after{ width: 60px; top: calc(100% - 5px); right: 50%; z-index: -5; transform: translate(50%, 0) rotate(90deg); }
	#pipeline .blue .content .graph .p-box{ margin-top: 10px; }

	#pipeline .blue .content .graph .box{ padding-top: 75px; }
	#pipeline .blue .content .graph .last .p-box{ top: calc(-100% - 3px); }
}

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


	#pipeline .sec01 .right .border-list .item{ width: 100%; margin-right: 0; }
	#pipeline .sec01 .right .border-list .item figure{ max-width: 250px; }

	#pipeline .sec02 .right .border-list .item{ width: 100%; margin-right: 0; }
	#pipeline .sec02 .right .border-list .item{ padding: 20px; }

	#pipeline .sec04 .box dl dt{ font-size: 1.6rem; }
	#pipeline .sec04 .box dl dt span{ font-size: 1.5rem; }

	
	#pipeline .gallery br{ display: none; }
	#pipeline .gallery .figure ul li{ width: calc((100% - 20px) / 3); margin-right: 10px; }

	#pipeline .grayBg.gallery .figure{ padding: 20px; }
}


/* 투자정보 - 주가정보 */
#stock .inner{ max-width: 714px; width: 100%; margin: 0 auto; overflow-x: auto; overflow-y: clip; }
#stock .inner::-webkit-scrollbar{ width: 22px; height: 22px; }
#stock .inner::-webkit-scrollbar-thumb{ background: var(--mainColor); background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }
#stock .inner::-webkit-scrollbar-track{ background: #E9E9E9; background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }


/* 투자정보 - 공시정보 */
#ir .tab-menu ul li{ width: calc(100% / 2); }


/* 투자정보 - 공시정보 (팝업) */
#popup.ir .inner{ max-width: 1400px; padding: 80px 100px; }
#popup.ir .scroll-box{ max-height: calc(var(--vh) - 400px); overflow-y: scroll; overflow-x: clip; outline: none; }

#popup.ir .scroll-box{ 
	-ms-overflow-style: none; /* 인터넷 익스플로러 */
	scrollbar-width: none; /* 파이어폭스 */
}
#popup.ir .scroll-box::-webkit-scrollbar{  display: none; }

@media screen and (max-width: 1600px){
	#popup.ir .inner{ padding: 60px 70px; }
	#popup.ir .scroll-box{ max-height: calc(var(--vh) - 300px); }
}

@media screen and (max-width: 1280px){
	#popup.ir .inner{ padding: 50px 40px; }
}

@media screen and (max-width: 900px){
	#popup.ir .inner{ padding: 30px; }
	#popup.ir .scroll-box{ max-height: calc(var(--vh) - 200px); }
}


/* 고객지원 - 고객센터 */
#customer .text{ margin-top: 60px; }
#customer .text h6{ font-size: 3.2rem; font-weight: 700; color: #333; letter-spacing: -0.02em; margin-bottom: 15px; }
#customer .text p{ font-size: 2.2rem; font-weight: 300; color: #111; line-height: 1.6; letter-spacing: -0.02em; margin-top: 0; }

@media screen and (max-width: 1700px){
	#customer .text{ margin-top: 40px; }
	#customer .text h6{ font-size: 2.8rem; }
	#customer .text p{ font-size: 2rem; }
}

@media screen and (max-width: 1280px){
	#customer .text{ margin-top: 20px; }
	#customer .text h6{ font-size: 2.4rem; margin-bottom: 5px; }
	#customer .text p{ font-size: 1.9rem; }
}

@media screen and (max-width: 900px){
	#customer .text h6{ font-size: 2.2rem; }
	#customer .text p{ font-size: 1.8rem; }
}

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


/* 문의 폼 */
.inquiry-form{
	--height: 60px;
	--border: 1px solid #DFDFDF;
	--padding: 25px;
}

.inquiry-form table{ border-top: 2px solid #000; }
.inquiry-form table *{ font-size: 2.1rem; font-weight: 400; color: #333; letter-spacing: -0.02em; }
.inquiry-form table.table > tbody > tr > th, .inquiry-form table.table > tbody > tr > td{ border: 1px solid #DDD; }
.inquiry-form table.table > tbody > tr > th{ width: 350px; border-left: none; padding: 40px 30px; font-weight: 500; color: #111; text-align: left; }
.inquiry-form table.table > tbody > tr > th span{ color: var(--mainColor); }
.inquiry-form table.table > tbody > tr > td{ border-right: 0; padding: 25px 15px; }


.inquiry-form input, .inquiry-form textarea{ width: 100%; border: var(--border); border-radius: 10px; -webkit-border-radius: 10px; }
.inquiry-form input{ height: var(--height); padding: 0 var(--padding); }
.inquiry-form input:placeholder{ font-size: 1.9rem; font-weight: 400; color: #666; }
.inquiry-form textarea{ resize: none; height: 175px; padding: var(--padding); }

.inquiry-form .selectric-box *{ font-size: 2.1rem !important; font-weight: 400; color: #333; }
.inquiry-form .selectric-box .selectric{ background: #FFF; border: var(--border); border-radius: 10px; -webkit-border-radius: 10px; }
.inquiry-form .selectric-box .selectric .label{ height: var(--height); display: flex; align-items: center; background: url("/img/sub/select_arrow.svg") no-repeat center right var(--padding) / auto; margin: 0; padding-left: var(--padding); padding-right: calc((var(--padding) * 2) + 10px); }
.inquiry-form .selectric-box .selectric .button{ display: none; }
.inquiry-form .selectric-box .selectric-items{ background: #fff; border: var(--border); border-radius: 10px; -webkit-border-radius: 10px; overflow: hidden; top: calc(100% - 1px); }

.inquiry-form .selectric-box .selectric-items .selectric-scroll::-webkit-scrollbar{ width: 13px; height: 22px; }
.inquiry-form .selectric-box .selectric-items .selectric-scroll::-webkit-scrollbar-thumb{ background: var(--mainColor); background-clip: padding-box; border: 3px solid transparent; border-radius: 100px; }
.inquiry-form .selectric-box .selectric-items .selectric-scroll::-webkit-scrollbar-track{ background: #E9E9E9; background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }

.inquiry-form .selectric-box .selectric-items li{ padding: 12px var(--padding); }
.inquiry-form .selectric-box .selectric-items li.highlighted{ background: var(--mainColor) !important; color: #fff !important; }
.inquiry-form .selectric-box .selectric-items li:hover{ background: #fff; color: var(--mainColor); }


.inquiry-form .max630{ max-width: 630px; }
.inquiry-form .max350{ max-width: 350px;}
.inquiry-form .max200{ max-width: 200px; }

.inquiry-form .flex{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inquiry-form .flex span{ color: #666; }
.inquiry-form .hyphen{ display: inline-block; width: 12px; height: 1px; background: #DFDFDF; }

.inquiry-form .tel .flex > *:not(span){ width: calc((100% - 64px) / 3); }
.inquiry-form .email .flex > *:not(span){ width: calc((100% - 45px) / 3); }

.inquiry-form .policy{ height: 175px; border: var(--border); border-radius: 10px; padding: var(--padding); overflow-y: auto; overflow-x: clip; }
.inquiry-form .policy *{ font-size: 2rem !important; font-weight: 300 !important; color: #777 !important; line-height: 1.5 !important; }
.inquiry-form .privacy br{ display: none; }
.inquiry-form .privacy .table-box th{ width: auto; }
.inquiry-form .privacy .textBox{ gap: 35px 0; }
.inquiry-form .privacy .dlBox{ gap: 25px 0; }

.inquiry-form .agree{ margin-bottom: -20px; }
.inquiry-form .agree input{ display: none; }
.inquiry-form .agree label{ display: inline-block; font-weight: 300; color: #333; padding: 10px; padding-left: 25px; position: relative; cursor: pointer; }
.inquiry-form .agree label::before{ content: ""; width: 20px; height: 20px; border: var(--border); border-radius: 50%; position: absolute; top: calc((1.3em / 2) + 10px); left: 0; transform: translateY(-50%); }

.inquiry-form .agree input:checked + label::before{ background: var(--mainColor); border: 1px solid var(--mainColor); }
.inquiry-form .agree input:checked + label::after{ content: ""; width: 20px; height: 20px; background: url("/img/sub/agree_check.svg") no-repeat center center / auto; position: absolute; top: calc((1.3em / 2) + 10px); left: 0; transform: translateY(-50%); }

.inquiry-form .file .fileBtn{ width: 170px; height: var(--height); }
.inquiry-form .file input[type="file"]{ display: none; }
.inquiry-form .file label{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(14, 145, 226, 0.03); border: 1px solid rgba(14, 145, 226, 0.2); border-radius: 99px; font-family: var(--baseFont); font-weight: 600; color: var(--mainColor); cursor: pointer; }

.inquiry-form .auto figure{ width: 160px; height: var(--height); border-radius: 10px; overflow: hidden; }
.inquiry-form .auto figure img{ width: 100% !important; height: 100% !important; object-fit: cover; }
.inquiry-form .auto input{ width: calc(100% - 160px - 20px - var(--height)); }
.inquiry-form .auto button{ width: var(--height); height: var(--height); background: #fff; border: var(--border); border-radius: 10px; -webkit-border-radius: 10px; padding: 0; }
.inquiry-form .auto button img{ width: auto; height: auto; }


.inquiry-form .scroll-bar{ outline: none; }
.inquiry-form .scroll-bar::-webkit-scrollbar{ width: 16px; height: 16px; }
.inquiry-form .scroll-bar::-webkit-scrollbar-thumb{ background: #D9D9D9; background-clip: padding-box; border: 6px solid transparent; border-radius: 100px; }
.inquiry-form .scroll-bar::-webkit-scrollbar-track{ background: #EEE; background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }


.inquiry-form .inquiry-btn{ margin-top: 100px; }
.inquiry-form .inquiry-btn .arrowBtn{ margin: 0 auto; }

@media screen and (max-width: 1700px){
	.inquiry-form{
		--height: 55px;
		--padding: 20px;
	}

	.inquiry-form table *{ font-size: 1.9rem; }
	.inquiry-form table.table > tbody > tr > th{ width: 300px; padding: 30px; }
	.inquiry-form table.table > tbody > tr > td{ padding: 20px 15px; }

	.inquiry-form .selectric-box *{ font-size: 1.9rem !important; }

	.inquiry-form .policy *{ font-size: 1.8rem !important; }

	.inquiry-form .file .fileBtn{ width: 140px; }

	.inquiry-form .inquiry-btn{ margin-top: 80px; }
}

@media screen and (max-width: 1280px){
	.inquiry-form{
		--height: 50px;
		--padding: 15px;
	}

	.inquiry-form table *{ font-size: 1.8rem; }
	.inquiry-form table.table > tbody > tr > th{ width: 200px; padding: 20px; }
	.inquiry-form table.table > tbody > tr > td{ padding: 15px; }

	.inquiry-form .selectric-box *{ font-size: 1.8rem !important; }

	.inquiry-form .policy *{ font-size: 1.7rem !important; }
	.inquiry-form .agree{ margin-bottom: -15px; }
	.inquiry-form .agree label::before{ width: 17px; height: 17px; }

	.inquiry-form .agree input:checked + label::after{ width: 17px; height: 17px; }

	.inquiry-form .inquiry-btn{ margin-top: 60px; }
}

@media screen and (max-width: 1000px){
	.inquiry-form table.table > tbody > tr{ display: flex; flex-direction: column; margin-bottom: -1px; }
	.inquiry-form table.table > tbody > tr > th, .inquiry-form table.table > tbody > tr > td{ width: 100%; }
	.inquiry-form table.table > tbody > tr > th{ padding: 15px 10px; border-right: none; margin-bottom: -1px; }
	.inquiry-form table.table > tbody > tr > td{ border-left: none; padding: 10px; }

	.inquiry-form .agree{ margin-bottom: -10px; }

	.inquiry-form .file input{ width: calc(100% - 130px); }
	.inquiry-form .file .fileBtn{ width: 120px; }
}

@media screen and (max-width: 900px){
	.inquiry-form table *{ font-size: 1.7rem; }

	.inquiry-form .selectric-box *{ font-size: 1.7rem !important; }

	.inquiry-form .policy *{ font-size: 1.6rem !important; }
}

@media screen and (max-width: 750px){
	.inquiry-form .max630, .inquiry-form .max350, .inquiry-form .max200{ max-width: 100%; }

	.inquiry-form .email .flex > *:not(span){ width: calc((100% - 35px) / 2); }
	.inquiry-form .email .flex .selectric-box{ width: 100%; }
}


/* 고객지원 - 인재경영 */
#talent{ background: url("/img/sub/support/talent_page_bg.jpg") no-repeat bottom right / auto; }

#talent .diagram{ --circle: 320px; --side: 90px; --gridCenter: calc(var(--circle) + (var(--side) * 2)); position: relative; z-index: 50; }
#talent .diagram .circle{ width: var(--circle); position: absolute; top: 50%; left: 50%; z-index: -10; transform: translate(-50%, -50%); }
#talent .diagram .circle::before{ content: ""; width: calc(100% + 320px); padding-bottom: calc(100% + 320px); background: url("/img/sub/support/talent_circle.png") no-repeat center center / contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#talent .diagram .circle .blue{ width: 100%; padding-bottom: 100%; background: radial-gradient(82.33% 75.83% at 17.67% 11.83%, #0E91E2 0%, #3CB4FF 100%); border-radius: 50%; position: relative; }
#talent .diagram .circle .blue::before, #talent .diagram .circle .blue::after{ content: ""; background: linear-gradient(146deg, rgba(14, 145, 226, 0.05) 14.38%, rgba(60, 180, 255, 0.05) 87.86%); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#talent .diagram .circle .blue::before{ width: calc(100% + 110px); padding-bottom: calc(100% + 110px); } 
#talent .diagram .circle .blue::after{ width: calc(100% + 210px); padding-bottom: calc(100% + 210px); }
#talent .diagram .circle .blue .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; padding: 0 30px; }
#talent .diagram .circle .blue .text span{ display: block; font-size: 3.2rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; margin-top: 20px; }


#talent .diagram .grid-box{ display: grid; grid-template-columns: 1fr var(--gridCenter) 1fr; margin-bottom: -60px; }
#talent .diagram .item{ padding: 35px; padding-top: 50px; background: #fff; border: 1px solid var(--mainColor); border-radius: 20px; text-align: center; margin-bottom: 60px; }
#talent .diagram .item:nth-of-type(2){ grid-column: 3 / 4; }
#talent .diagram .item:nth-of-type(4){ grid-column: 3 / 4; }
#talent .diagram .item dl{ margin-top: 15px; }
#talent .diagram .item dl dt{ font-size: 3rem; font-weight: 700; color: #111; letter-spacing: -0.02em; }
#talent .diagram .item dl dd{ font-size: 2.1rem; font-weight: 300; color: #444; letter-spacing: -0.02em; line-height: 1.5; margin-top: 15px; }


#talent .step .step-list{ display: flex; flex-wrap: wrap; justify-content: center; margin: -20px 0; }
#talent .step .step-list .item{ display: flex; width: calc(100% / 5); text-align: center; position: relative; margin: 20px 0; }
#talent .step .step-list .item:not(:last-of-type){ padding-right: 50px; }
#talent .step .step-list .item::after{ content: ""; width: 21px; height: 21px; background: url("/img/sub/support/talent_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 25px; transform: translate(50%, -50%); }
#talent .step .step-list .item:last-of-type::after{ display: none; }
#talent .step .step-list .item p{ font-size: 2.4rem; font-weight: 600; letter-spacing: -0.02em; transition: color 0.5s; }
#talent .step .step-list .item span{ display: block; font-size: 2.1rem; font-weight: 300; color: #333; letter-spacing: -0.02em; margin-top: 10px; transition: color 0.5s; }

#talent .step .step-list .box{ flex: 1 0 auto; background: #fff; padding: 60px 30px; padding-top: 85px; border-radius: 20px; transition: background 0.5s; }
#talent .step .step-list .box .icon img{ transition: filter 0.5s; }
#talent .step .step-list .box p{ color: #111; margin-top: 25px; }

#talent .step .step-list .padding{ width: 100%; padding: 40px; }
#talent .step .step-list .circle{ width: 100%; padding-bottom: 100%; background: var(--purple); border-radius: 50%; position: relative; z-index: 50; }
#talent .step .step-list .circle::before, #talent .step .step-list .circle::after{ content: ""; background: var(--purple); border-radius: 50%; opacity: 0.1; position: absolute; top: 50%; left: 50%; z-index: -5; transform: translate(-50%, -50%); }
#talent .step .step-list .circle::before{ width: calc(100% + 40px); padding-bottom: calc(100% + 40px); }
#talent .step .step-list .circle::after{ width: calc(100% + 80px); padding-bottom: calc(100% + 80px); }
#talent .step .step-list .circle .text{ padding: 0 30px; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#talent .step .step-list .circle p{ color: #fff; margin-top: 10px; }


#talent .office .flex-box{ display: flex; flex-wrap: wrap; }
#talent .office .item{ width: calc((100% - 60px) / 3); display: flex; flex-direction: column; margin-right: 30px; margin-bottom: 30px; overflow: hidden; border-radius: 20px; }
#talent .office .item:nth-of-type(3n){ margin-right: 0; } 
#talent .office .item .map{ position: relative; padding-bottom: 66.29%; border-radius: 20px 20px 0 0; overflow: hidden; transform: translateY(100%); transition: transform 1.5s; }
#talent .office .item.aos-animate .map{ transform: translateY(0); }
#talent .office .item .map iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

#talent .office .item .text{ flex: 1 0 auto; background: #fff; border: 1px solid #DDD; border-radius: 20px; padding: 45px 40px; margin-top: -20px; position: relative; z-index: 10; }
#talent .office .item .text p{ font-size: 2.4rem; font-weight: 700; color: #111; letter-spacing: -0.02em; padding-left: 30px; position: relative; margin-bottom: 20px; }
#talent .office .item .text p::before{ content: ""; width: 27px; height: 27px; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#talent .office .item .text p.name::before{ background: url("/img/sub/support/talent_name.svg") no-repeat center center / contain; }
#talent .office .item .text p.address::before{ background: url("/img/sub/support/talent_address.svg") no-repeat center center / contain; }
#talent .office .item .text dl{ font-size: 2.1rem; font-weight: 500; color: #111; letter-spacing: -0.02em; margin-top: 25px; }
#talent .office .item .text dl dt{ margin-bottom: 15px; }
#talent .office .item .text .dot-list{ display: flex; flex-wrap: wrap; margin: -5px -8px; }
#talent .office .item .text .dot-list li{ margin: 5px 8px !important; }
#talent .office .small-txt{ font-size: 2.1rem; font-weight: 300; color: #999; letter-spacing: -0.02em; }

#talent .document .grid-box{ display: grid; grid-template-columns: repeat(5, 1fr); margin: -15px; }
#talent .document .box{ background: #F5F5F5; border-radius: 20px; padding: 30px; margin: 15px; }
#talent .document .box .num{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: var(--purple); border-radius: 50%; font-family: var(--engFont); font-size: 1.7rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; margin-bottom: 30px; }
#talent .document .box p{ font-size: 2.4rem; font-weight: 600; color: #111; letter-spacing: -0.02em; }
#talent .document .box p span{ display: block; font-size: 2.1rem; font-weight: 300; color: #444; letter-spacing: inherit; margin-top: 10px; }


#talent .submit .sec-title{ margin-bottom: 30px; }
#talent .submit p{ font-size: 2.1rem; font-weight: 300; color: #444; letter-spacing: -0.02em; margin-bottom: 40px; }
#talent .submit p strong{ font-weight: 500; color: #111; }
#talent .submit .arrowBtn span{ padding-left: 15px; }

@media screen and (hover: hover){
	#talent .step .step-list .box:hover{ background: var(--purple); }
	#talent .step .step-list .box:hover .icon img{ filter: invert(1) brightness(10); -webkit-filter: invert(1) brightness(10); transition-delay: unset; }
	#talent .step .step-list .box:hover p{ color: #fff; }
	#talent .step .step-list .box:hover span{ color: #fff; }
}

@media screen and (max-width: 1700px){
	#talent .diagram .circle .blue .text span{ font-size: 2.8rem; }

	#talent .diagram .item{ padding-top: 40px; }
	#talent .diagram .item dl dt{ font-size: 2.6rem; }
	#talent .diagram .item dl dd{ font-size: 1.9rem; }
	#talent .step .step-list .item p{ font-size: 2.2rem; }

	#talent .step .step-list .box{ padding: 50px 30px; padding-bottom: 30px; }
	#talent .step .step-list .item span{ font-size: 1.9rem; }

	#talent .office .item .text{ padding: 35px; }
	#talent .office .item .text p{ font-size: 2.2rem; }
	#talent .office .item .text dl{ font-size: 1.9rem; }
	#talent .office .small-txt{ font-size: 1.9rem; }

	#talent .document .box{ padding: 25px; }
	#talent .document .box .num{ font-size: 1.6rem; }
	#talent .document .box p{ font-size: 2.2rem; }
	#talent .document .box p span{ font-size: 1.9rem; }

	#talent .submit p{ font-size: 1.9rem; }
}

@media screen and (max-width: 1450px){
	#talent .diagram{ --circle: 280px; --side: 30px; }
	#talent .diagram .circle .blue .text .icon img{ width: 150px; height: auto; }

	#talent .step .step-list .box p{ margin-top: 15px; }

	#talent .document .grid-box{ grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 1280px){
	#talent .diagram{ --circle: 230px; --side: 40px; }
	#talent .diagram .circle .blue .text span{ font-size: 2.4rem; }
	#talent .diagram .circle::before{ content: ""; width: calc(100% + 240px); padding-bottom: calc(100% + 240px); }
	#talent .diagram .circle .blue::before{ width: calc(100% + 80px); padding-bottom: calc(100% + 80px); } 
	#talent .diagram .circle .blue::after{ width: calc(100% + 160px); padding-bottom: calc(100% + 160px); }

	#talent .diagram .item{ padding: 25px; }
	#talent .diagram .item br{ display: none; }
	#talent .diagram .item dl dt{ font-size: 2.2rem; margin-top: 10px; }
	#talent .diagram .item dl dd{ font-size: 1.8rem; margin-top: 10px; }

	#talent .step .step-list{ max-width: 700px; margin: -20px auto; }
	#talent .step .step-list .item{ width: calc((100% - 50px) / 2); }
	#talent .step .step-list .item:not(:last-of-type){ padding-right: 0; margin-right: 50px; }
	#talent .step .step-list .item:nth-of-type(2n){ margin-right: 0; }
	#talent .step .step-list .item::after{ right: -25px; }
	#talent .step .step-list .item:nth-of-type(2n)::after{ display: none; }
	#talent .step .step-list .item p{ font-size: 2rem; }
	#talent .step .step-list .item span{ font-size: 1.8rem; }

	#talent .office .item .text{ padding: 25px; }
	#talent .office .item .text p{ font-size: 2rem; margin-bottom: 10px; }
	#talent .office .item .text p::before{ width: 20px; height: 20px; }
	#talent .office .item .text dl{ font-size: 1.8rem; }
	#talent .office .item .text dl dt{ margin-bottom: 5px; }
	#talent .office .small-txt{ font-size: 1.8rem; margin-top: -20px; }

	#talent .document .box .num{ width: 30px; height: 30px; font-size: 1.5rem; margin-bottom: 15px; }
	#talent .document .box p{ font-size: 2rem; }
	#talent .document .box p span{ font-size: 1.8rem; margin-top: 5px; }

	#talent .submit .sec-title{ margin-bottom: 15px; }
	#talent .submit p{ font-size: 1.8rem; margin-top: 20px; }
	#talent .submit .arrowBtn{ font-size: 1.8rem; }
	#talent .submit .arrowBtn span{ padding-left: 10px; }
}

@media screen and (max-width: 1150px){
	#talent .office .item{ width: calc((100% - 30px) / 2); }
	#talent .office .item:nth-of-type(3n){ margin-right: 30px; }
	#talent .office .item:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 900px){
	#talent .diagram .circle .blue .text span{ font-size: 2.2rem; }

	#talent .diagram .item dl dt{ font-size: 2rem; }
	#talent .diagram .item dl dd{ font-size: 1.7rem; }

	#talent .step .step-list .item p{ font-size: 1.9rem; }
	#talent .step .step-list .item span{ font-size: 1.7rem; }

	#talent .office .item .text p{ font-size: 1.9rem; }
	#talent .office .item .text dl{ font-size: 1.7rem; }
	#talent .office .small-txt{ font-size: 1.7rem; }

	#talent .document .grid-box{ margin: -10px; }
	#talent .document .box{ margin: 10px; }
	#talent .document .box p{ font-size: 1.9rem; }
	#talent .document .box p span{ font-size: 1.7rem; }

}

@media screen and (max-width: 850px){
	#talent .diagram .circle{ position: relative; top: unset; left: unset; transform: unset; margin: 100px auto; }
	#talent .diagram .circle::before{ content: ""; width: calc(100% + 150px); padding-bottom: calc(100% + 150px); }
	#talent .diagram .circle .blue::before{ width: calc(100% + 50px); padding-bottom: calc(100% + 50px); } 
	#talent .diagram .circle .blue::after{ width: calc(100% + 100px); padding-bottom: calc(100% + 100px); }

	#talent .diagram .grid-box{ grid-template-columns: repeat(2, 1fr); margin: -10px; }
	#talent .diagram .item{ margin: 10px; padding: 20px; }
	#talent .diagram .item:nth-of-type(2){ grid-column: unset; }
	#talent .diagram .item:nth-of-type(4){ grid-column: unset; }
}

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

@media screen and (max-width: 700px){
	#talent .office .item{ width: 100%; margin-right: 0 !important; }

	#talent .document .box{ padding: 20px; }
}

@media screen and (max-width: 600px){
	#talent .step .step-list .padding{ padding: 30px 0; }
	#talent .step .step-list .circle::before{ width: calc(100% + 30px); padding-bottom: calc(100% + 30px); }
	#talent .step .step-list .circle::after{ width: calc(100% + 60px); padding-bottom: calc(100% + 60px); }
}


/* 고객지원 - 자료실 */
#reference .tab-menu ul li{ width: calc(100% / 2); }


/* 고객지원 - 자료실 - 규정 & 가이드라인 */
@media screen and (max-width: 1000px){
	#reference.reference .board_box colgroup, #reference.reference .board_box thead{ display: none; }
	#reference.reference .board_box tr{ display: flex; flex-wrap: wrap; }
	#reference.reference .board_box table td::before{ content: attr(data-txt); }
	#reference.reference .board_box table td:nth-of-type(1){ width: 100%; padding-bottom: 0; }

	#reference.reference .board_box table td:nth-of-type(2), 
	#reference.reference .board_box table td:nth-of-type(3), 
	#reference.reference .board_box table td:nth-of-type(4){ padding: 15px 10px; }

	#reference.reference .board_box table td:nth-of-type(2), 
	#reference.reference .board_box table td:nth-of-type(3){ padding-right: 0; padding-bottom: 0; margin-bottom: -10px; }
}


/* 고객지원 - 자료실 - 규정 & 가이드라인 (팝업) */
#popup.reference .inner{ max-width: 1200px; padding: 80px 100px; }
#popup.reference .table-box{ text-align: center; }
#popup.reference .table-box colgroup col:nth-of-type(2), 
#popup.reference .table-box colgroup col:nth-of-type(3){ width: 200px; }
#popup.reference .table-box th{ border-left: none; border-right: none; position: relative; }
#popup.reference .table-box th::after{ content: ""; width: 1px; height: 15px; background: #DDD; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
#popup.reference .table-box tr th:last-of-type::after{ display: none; }
#popup.reference .table-box td{ color: #999; padding: 27px 10px; border-right: none; border-left: none; }
#popup.reference .table-box span{ display: block; font-weight: 400; color: #111; text-align: left; padding: 0 30px; }
#popup.reference .table-box a{ width: max-content; display: flex; background: var(--mainColor); font-size: 2.1rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; padding: 9px 30px; border-radius: 99px; margin: 0 auto; }
#popup.reference .table-box a::after{ content: url("/img/sub/support/target_blank.svg"); vertical-align: middle; margin-left: 7px; }

@media screen and (max-width: 1700px){
	#popup.reference .inner{ padding: 60px 80px; }
	#popup.reference .table-box span{ padding: 0 20px; }

	#popup.reference .table-box a{ font-size: 1.9rem; padding: 9px 20px; }
}

@media screen and (max-width: 1280px){
	#popup.reference .inner{ padding: 40px; }
	#popup.reference .table-box colgroup col:nth-of-type(2), 
	#popup.reference .table-box colgroup col:nth-of-type(3){ width: 170px; }
	#popup.reference .table-box td{ padding: 20px 10px; }
	#popup.reference .table-box span{ padding: 0 10px; }

	#popup.reference .table-box a{ font-size: 1.8rem; }
}

@media screen and (max-width: 900px){
	#popup.reference .inner{ padding: 30px 25px; }
	#popup.reference .inner-title{ padding-bottom: 20px; }
	#popup.reference .table-box colgroup,
	#popup.reference .table-box thead{ display: none; }
	#popup.reference .table-box tr{ display: flex; flex-direction: column; }
	#popup.reference .table-box td{ width: 100%; padding: 15px 10px; padding-left: 110px; border-right: none; border-left: none; position: relative; }
	#popup.reference .table-box tr td:not(:last-of-type){ border-bottom: none; }
	#popup.reference .table-box td::before{ content: attr(data-tit); display: flex; justify-content: center; align-items: center; width: 100px; height: 100%; border-right: 1px solid #DDD; font-weight: 600; color: #111; position: absolute; top: 0; left: 0; }

	#popup.reference .table-box a{ font-size: 1.7rem; }
}


/* 고객지원 - 오시는 길 */
#location{ overflow: hidden; }
#location .tab-menu ul{ flex-wrap: wrap; }
#location .tab-menu ul li{ width: calc(100% / 3); }
#location .tab-content .tab:not(:first-of-type){ display: none; }

#location .map{ position: relative; padding-bottom: 35.295%; overflow: hidden; border-radius: 20px; }
#location .map iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#location .text{ padding-top: 35px; }
#location .text ul{ display: flex; flex-wrap: wrap; margin: -7px -55px; }
#location .text ul li{ margin: 7px 55px; }
#location .text dl{ display: flex; align-items: baseline; }
#location .text dl dt{ font-size: 2.4rem; font-weight: 700; color: var(--mainColor); letter-spacing: -0.02em; padding-left: 55px; padding-right: 15px; position: relative; }
#location .text dl dt::before{ content: ""; width: 40px; height: 40px; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#location .text dl.address dt::before{ background: url("/img/sub/support/location_address.svg") no-repeat center center / contain; }
#location .text dl.tel dt::before{ background: url("/img/sub/support/location_tel.svg") no-repeat center center / contain; }
#location .text dl dd{ font-size: 2.1rem; font-weight: 300; color: #111; letter-spacing: -0.02em; }

@media screen and (max-width: 1700px){
	#location .text ul{ margin: -7px -30px; }
	#location .text ul li{ margin: 7px 30px; }
	#location .text dl dt{ font-size: 2.2rem; }
	#location .text dl dd{ font-size: 1.9rem }
}

@media screen and (max-width: 1280px){
	#location .text{ padding-top: 20px; }
	#location .text ul{ margin: -7px -20px; }
	#location .text ul li{ margin: 7px 20px; }
	#location .text dl dt{ font-size: 2rem; padding-left: 35px; }
	#location .text dl dt::before{ width: 30px; height: 30px; }
	#location .text dl dd{ font-size: 1.8rem }
}

@media screen and (max-width: 1000px){
	#location .tab-menu ul{ border-radius: 30px; }
	#location .tab-menu ul li{ width: calc(100% / 2); border-radius: 25px; }

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

@media screen and (max-width: 900px){
	#location .text dl dt{ font-size: 1.9rem; }
	#location .text dl dd{ font-size: 1.7rem }
}