@charset "utf-8";

/* =========================================================
   CORE
   기준: company / business 페이지와 동일
   1920px 화면 / 좌우 40px / 최대 콘텐츠폭 1840px
   ========================================================= */

#core-page-wrap{
	width:100%;
	background:#fff;
}

#core-container{
	width:calc(100% - 80px);
	max-width:1840px;
	margin:0 auto;
	padding:0;
}

.core-page{
	width:100%;
	color:#222;
}

/* =========================================================
   상단 섹션 탭메뉴
   PC: 한 줄 / 모바일: 2열 버튼형
   ========================================================= */
.core-bookmark{
	width:100%;
	margin:38px auto 0;
	padding:0;
}

.core-bookmark-inner{
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:1fr;
	width:100%;
	max-width:1840px;
	margin:0 auto;
	border-top:1px solid #d8d8d8;
	border-left:1px solid #d8d8d8;
	background:#fff;
}

.core-bookmark-link{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:0;
	height:58px;
	padding:0 14px;
	border-right:1px solid #d8d8d8;
	border-bottom:1px solid #d8d8d8;
	background:#fff;
	color:#111;
	font-size:15px;
	line-height:1.25;
	font-weight:600;
	text-align:center;
	word-break:keep-all;
	transition:color .2s ease, background-color .2s ease;
}

.core-bookmark-link:after{
	content:"";
	position:absolute;
	left:-1px;
	right:-1px;
	bottom:-1px;
	height:3px;
	background:transparent;
}

.core-bookmark-link:hover,
.core-bookmark-link.is-active{
	color:#118b77;
	background:#fbfdfc;
}

.core-bookmark-link.is-active:after{
	background:#118b77;
}

@media screen and (max-width:700px){
	.core-bookmark{
		margin-top:24px;
	}

	.core-bookmark-inner{
		grid-auto-flow:row;
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}

	.core-bookmark-link{
		width:100%;
		height:48px;
		padding:0 8px;
		font-size:13px;
	}
}

.core-section{
	position:relative;
	width:100%;
	padding:76px 0 96px;
}

.core-inner{
	width:100%;
	max-width:1840px;
	margin:0 auto;
}

.core-compounding-grid{
	display:grid;
	grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
	gap:72px;
	align-items:start;
}

.core-section-head{
	margin-bottom:42px;
}

.core-eyebrow{
	display:block;
	margin-bottom:24px;
	font-size:24px;
	line-height:1.2;
	font-weight:700;
	color:#118b77;
	letter-spacing:.01em;
}

.core-section-title{
	margin:0;
	font-size:36px;
	line-height:1.3;
	font-weight:700;
	letter-spacing:-.045em;
	color:#111;
}

.core-section-desc{
	margin:24px 0 0;
	font-size:18px;
	line-height:1.7;
	font-weight:500;
	letter-spacing:-.03em;
	color:#333;
}

/* 소재 아이콘 */
.core-material-list{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:30px;
	margin-top:38px;
}

.core-material-item{
	text-align:center;
}

.core-material-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:200px;
	height:200px;
	max-width:100%;
	margin:0 auto 20px;
	border:1px solid #d9dde1;
	border-radius:50%;
	background:#fff;
}

.core-material-icon img{
	display:block;
	width:auto;
	max-width:118px;
	max-height:118px;
	height:auto;
	object-fit:contain;
}

.core-material-item h3{
	margin:0 0 10px;
	font-size:24px;
	line-height:1.3;
	font-weight:700;
	color:#111;
}

.core-material-item p{
	margin:0;
	font-size:15px;
	line-height:1.6;
	letter-spacing:-.03em;
	color:#666;
	word-break:keep-all;
}

/* 비교표 */
.core-table-scroll{
	width:100%;
	overflow-x:auto;
}

.core-material-table{
	width:100%;
	min-width:760px;
	border-collapse:collapse;
	table-layout:fixed;
	background:#fff;
}

.core-material-table th,
.core-material-table td{
	border:1px solid #d9dde1;
	text-align:center;
	vertical-align:middle;
}

.core-material-table thead th{
	padding:20px 16px;
	background:#0d2f55;
	color:#fff;
	font-size:20px;
	line-height:1.3;
	font-weight:700;
}

.core-material-table tbody th{
	width:22%;
	padding:22px 16px;
	background:#f7f7f8;
	color:#222;
	font-size:17px;
	line-height:1.45;
	font-weight:700;
}

.core-material-table tbody td{
	padding:22px 16px;
	color:#222;
	font-size:17px;
	line-height:1.5;
	font-weight:600;
}

.core-material-table tbody td span{
	font-size:15px;
	font-weight:500;
	color:#333;
}

.core-table-note{
	margin:14px 0 0;
	font-size:14px;
	line-height:1.6;
	font-weight:500;
	color:#333;
	letter-spacing:-.02em;
}

/* =========================================================
   반응형
   ========================================================= */

@media screen and (max-width:1500px){
	#core-container{
		width:calc(100% - 48px);
	}

	.core-section{
		padding:68px 0 86px;
	}

	.core-compounding-grid{
		gap:50px;
	}

	.core-eyebrow{
		margin-bottom:18px;
		font-size:20px;
	}

	.core-section-title{
		font-size:32px;
	}

	.core-section-desc{
		font-size:17px;
	}

	.core-material-icon{
		width:170px;
		height:170px;
	}

	.core-material-icon img{
		max-width:100px;
		max-height:100px;
	}
}

@media screen and (max-width:1100px){
	.core-compounding-grid{
		grid-template-columns:1fr;
		gap:56px;
	}

	.core-compounding-left,
	.core-compounding-right{
		width:100%;
		min-width:0;
	}

	.core-material-list{
		width:100%;
		max-width:760px;
		margin-left:auto;
		margin-right:auto;
	}
}

@media screen and (max-width:700px){
	#core-container{
		width:calc(100% - 28px);
	}

	.core-section{
		padding:38px 0 50px;
	}

	.core-compounding-grid{
		gap:30px;
	}

	.core-section-head{
		margin-bottom:22px;
	}

	.core-eyebrow{
		margin-bottom:8px;
		font-size:14px;
	}

	.core-section-title{
		font-size:25px;
		line-height:1.3;
		word-break:keep-all;
	}

	.core-section-desc{
		width:100%;
		margin-top:12px;
		font-size:14px;
		line-height:1.65;
		word-break:keep-all;
		overflow-wrap:break-word;
	}

	.core-material-list{
		width:100%;
		max-width:none;
		grid-template-columns:1fr;
		gap:20px;
		margin:24px 0 0;
	}

	.core-material-item{
		display:flex;
		flex-direction:column;
		align-items:center;
		width:100%;
		min-width:0;
		text-align:center;
	}

	.core-material-icon{
		width:130px;
		height:130px;
		margin-bottom:10px;
	}

	.core-material-icon img{
		max-width:76px;
		max-height:76px;
	}

	.core-material-item h3{
		margin-bottom:6px;
		font-size:19px;
	}

	.core-material-item p{
		font-size:13px;
		line-height:1.55;
	}

	.core-material-table{
		min-width:680px;
	}

	.core-material-table thead th{
		padding:16px 12px;
		font-size:16px;
	}

	.core-material-table tbody th,
	.core-material-table tbody td{
		padding:18px 12px;
		font-size:14px;
	}

	.core-material-table tbody td span{
		font-size:13px;
	}

	.core-table-note{
		font-size:12px;
		line-height:1.7;
	}
}



/* GASKET TECHNOLOGY */
.core-gasket{padding:88px 0 100px;background:#f3f4f5}
.core-gasket-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:72px;align-items:center}
.core-gasket-info .core-section-desc{max-width:720px}
.core-check-list{margin:48px 0 0;padding:0;list-style:none}
.core-check-list li{position:relative;margin:0 0 14px;padding-left:40px;font-size:17px;line-height:1.55;font-weight:500;letter-spacing:-.03em;color:#555;word-break:keep-all}
.core-check-list li:before{content:"✓";position:absolute;left:4px;top:1px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#118b77;color:#fff;font-size:14px;font-weight:700}
.core-gasket-btn{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-width:390px;height:54px;margin-top:36px;padding:0 34px;border:1px solid #118b77;border-radius:10px;color:#118b77;font-size:16px;font-weight:700;text-decoration:none;box-sizing:border-box}
.core-gasket-btn:hover{background:#118b77;color:#fff;text-decoration:none}
.core-gasket-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #ccd2d7;border-radius:10px;overflow:hidden;background:#fff}
.core-gasket-card{min-width:0;background:#fff}
.core-gasket-card+.core-gasket-card{border-left:1px solid #ccd2d7}
.core-gasket-card h3{display:flex;align-items:center;justify-content:center;height:60px;margin:0;padding:0 20px;color:#fff;font-size:27px;font-weight:700}
.core-gasket-clip h3{background:#118b77}.core-gasket-glue h3{background:#0d3766}
.core-gasket-image{display:flex;align-items:center;justify-content:center;width:100%;height:265px;padding:24px 24px 10px;box-sizing:border-box}
.core-gasket-image img{display:block;width:auto;max-width:100%;max-height:100%;height:auto;object-fit:contain}
.core-gasket-card ul{margin:0;padding:22px 38px 34px 58px;list-style:none}
.core-gasket-card li{position:relative;margin:0 0 22px;font-size:17px;line-height:1.5;font-weight:600;color:#222;word-break:keep-all}
.core-gasket-card li:before{content:"";position:absolute;left:-22px;top:.65em;width:7px;height:7px;border-radius:50%;background:#118b77}
.core-gasket-glue li:before{background:#0d3766}
@media(max-width:1100px){.core-gasket-grid{grid-template-columns:1fr;gap:48px}}
@media(max-width:700px){.core-gasket{padding:48px 0 60px}.core-gasket-grid{gap:36px}.core-check-list{margin-top:28px}.core-check-list li{padding-left:34px;font-size:14px}.core-gasket-btn{width:100%;min-width:0;height:50px;padding:0 18px;font-size:14px}.core-gasket-types{grid-template-columns:1fr}.core-gasket-card+.core-gasket-card{border-left:0;border-top:1px solid #ccd2d7}.core-gasket-card h3{height:52px;font-size:20px}.core-gasket-image{height:220px}.core-gasket-card li{font-size:14px}}


/* =========================================================
   GASKET SECTION - FULL WIDTH BACKGROUND
   배경은 100%, 내용은 기존 1840px 기준 유지
   ========================================================= */
.core-gasket{
	width:100%;
	background:#f3f4f5;
}

.core-gasket-container{
	width:100%;
	margin:0 auto;
	padding:0 40px;
	box-sizing:border-box;
}

.core-gasket-container .core-inner{
	width:100%;
	max-width:1840px;
	margin:0 auto;
}

@media screen and (max-width:1500px){
	.core-gasket-container{
		padding-left:24px;
		padding-right:24px;
	}
}

@media screen and (max-width:700px){
	.core-gasket-container{
		padding-left:14px;
		padding-right:14px;
	}
}


/* =========================================================
   QUALITY VERIFICATION PROCESS - 세 번째 섹션
   ========================================================= */
.core-quality{
	padding:90px 0 110px;
	background:#fff;
}

.core-quality-head{
	margin-bottom:64px;
	text-align:center;
}

.core-quality-head .core-eyebrow{
	margin-bottom:24px;
}

.core-quality-process{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
}

.core-quality-step{
	flex:0 1 270px;
	min-width:0;
}

.core-quality-circle{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	width:270px;
	height:270px;
	max-width:100%;
	margin:0 auto;
	padding:24px 20px 22px;
	border:1px solid #d9dde1;
	border-radius:50%;
	background:#fff;
	box-sizing:border-box;
	text-align:center;
}

.core-quality-num{
	display:block;
	margin-bottom:22px;
	color:#118b77;
	font-size:30px;
	line-height:1;
	font-weight:700;
}

.core-quality-circle img,
.core-quality-circle svg{
	display:block;
	width:auto;
	height:96px;
	max-width:110px;
	object-fit:contain;
	margin-bottom:20px;
}

.core-quality-circle h3{
	margin:0;
	color:#111;
	font-size:18px;
	line-height:1.4;
	font-weight:700;
	letter-spacing:-.03em;
	word-break:keep-all;
}

.core-quality-arrow{
	flex:0 0 62px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#aaa;
	font-size:46px;
	line-height:1;
	font-weight:300;
}

@media screen and (max-width:1500px){
	.core-quality-step{
		flex-basis:220px;
	}
	.core-quality-circle{
		width:220px;
		height:220px;
		padding:20px 15px;
	}
	.core-quality-num{
		margin-bottom:14px;
		font-size:26px;
	}
	.core-quality-circle img,
	.core-quality-circle svg{
		height:76px;
		max-width:90px;
		margin-bottom:14px;
	}
	.core-quality-circle h3{
		font-size:16px;
	}
	.core-quality-arrow{
		flex-basis:46px;
		font-size:38px;
	}
}

@media screen and (max-width:1100px){
	.core-quality-process{
		display:grid;
		grid-template-columns:repeat(5, 180px);
		gap:18px;
		overflow-x:auto;
		overflow-y:hidden;
		height:220px;
		padding-bottom:14px;
		justify-content:start;
		align-items:start;
		-webkit-overflow-scrolling:touch;
	}
	.core-quality-step{
		width:180px;
		height:190px;
	}
	.core-quality-circle{
		width:180px;
		height:180px;
	}
	.core-quality-arrow{
		display:none;
	}
	.core-quality-num{
		margin-bottom:10px;
		font-size:23px;
	}
	.core-quality-circle img,
	.core-quality-circle svg{
		height:60px;
		max-width:72px;
		margin-bottom:10px;
	}
	.core-quality-circle h3{
		font-size:14px;
	}
}

@media screen and (max-width:700px){
	.core-quality{
		padding:52px 0 64px;
	}
	.core-quality-head{
		margin-bottom:36px;
	}
	.core-quality-head .core-eyebrow{
		margin-bottom:10px;
	}
	.core-quality-process{
		grid-template-columns:repeat(5, 150px);
		gap:14px;
		height:190px;
		overflow-x:auto;
		overflow-y:hidden;
		align-items:start;
	}
	.core-quality-step{
		width:150px;
		height:170px;
	}
	.core-quality-circle{
		width:150px;
		height:150px;
		padding:14px 10px 12px;
	}
	.core-quality-num{
		margin-bottom:8px;
		font-size:20px;
	}
	.core-quality-circle img,
	.core-quality-circle svg{
		width:40px;
		height:40px;
		max-width:40px;
		max-height:40px;
		margin-bottom:8px;
		object-fit:contain;
	}
	.core-quality-circle h3{
		font-size:13px;
		line-height:1.3;
	}
}


/* =========================================================
   R&D OUTCOMES - 네 번째 섹션
   ========================================================= */
.core-rd{
	width:100%;
	padding:88px 0 100px;
	background:#f3f4f5;
}

/* 연구성과 배경은 화면 전체폭, 실제 내용은 1840px 안쪽으로 유지 */
.core-rd-container{
	width:100%;
	margin:0 auto;
	padding:0 40px;
	box-sizing:border-box;
}

.core-rd-container .core-inner{
	width:100%;
	max-width:1840px;
	margin:0 auto;
}

.core-rd-head{
	margin-bottom:58px;
	text-align:center;
}

.core-rd-head .core-eyebrow{
	margin-bottom:24px;
}

.core-rd-list{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:28px;
}

.core-rd-card{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	min-height:370px;
	padding:58px 52px 34px;
	border:1px solid #d9dde1;
	border-radius:14px;
	background:#fff;
	box-sizing:border-box;
	transition:border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

/* 버튼이 없는 연구성과 카드: 버튼(48px) + 상단 간격(34px)만큼 높이 축소 */
.core-rd-card--no-btn{
	min-height:288px;
}

.core-rd-content{
	display:flex;
	align-items:flex-start;
	gap:34px;
}

.core-rd-icon{
	flex:0 0 105px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:105px;
	height:125px;
}

.core-rd-icon img{
	display:block;
	width:auto;
	max-width:100%;
	max-height:100%;
	height:auto;
	object-fit:contain;
	transition:transform .28s ease;
}

.core-rd-text{
	min-width:0;
	padding-top:4px;
}

.core-rd-num{
	display:block;
	margin-bottom:12px;
	color:#118b77;
	font-size:34px;
	line-height:1;
	font-weight:700;
}

.core-rd-text h3{
	margin:0 0 24px;
	color:#111;
	font-size:24px;
	line-height:1.35;
	font-weight:700;
	letter-spacing:-.035em;
	word-break:keep-all;
}

.core-rd-text p{
	margin:0;
	color:#444;
	font-size:15px;
	line-height:1.8;
	font-weight:500;
	letter-spacing:-.025em;
	word-break:keep-all;
}

.core-rd-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:32px;
	width:100%;
	height:48px;
	margin-top:34px;
	border:1px solid #118b77;
	border-radius:8px;
	color:#118b77;
	font-size:15px;
	line-height:1;
	font-weight:700;
	text-decoration:none;
	box-sizing:border-box;
	transition:background-color .2s ease,color .2s ease;
}

.core-rd-btn:hover{
	background:#118b77;
	color:#fff;
	text-decoration:none;
}

.core-rd-btn span{
	font-size:17px;
}

@media screen and (max-width:1500px){
	.core-rd-card{
		min-height:350px;
		padding:46px 36px 30px;
	}
	.core-rd-card--no-btn{
		min-height:268px;
	}
	.core-rd-content{
		gap:24px;
	}
	.core-rd-icon{
		flex-basis:86px;
		width:86px;
		height:105px;
	}
	.core-rd-num{
		font-size:30px;
	}
	.core-rd-text h3{
		font-size:21px;
	}
	.core-rd-text p{
		font-size:14px;
	}
}

@media screen and (max-width:1500px){
	.core-rd-container{
		padding-left:24px;
		padding-right:24px;
	}
}

@media screen and (max-width:1100px){
	.core-rd-list{
		grid-template-columns:1fr;
	}
	.core-rd-card{
		min-height:0;
		padding:40px;
	}
	.core-rd-content{
		align-items:center;
	}
}

@media screen and (max-width:700px){
	.core-rd{
		padding:52px 0 64px;
	}
	.core-rd-container{
		padding-left:14px;
		padding-right:14px;
	}
	.core-rd-head{
		margin-bottom:36px;
	}
	.core-rd-head .core-eyebrow{
		margin-bottom:10px;
	}
	.core-rd-list{
		gap:16px;
	}
	.core-rd-card{
		padding:28px 22px 22px;
		border-radius:10px;
	}
	.core-rd-content{
		align-items:flex-start;
		gap:18px;
	}
	.core-rd-icon{
		flex-basis:64px;
		width:64px;
		height:78px;
	}
	.core-rd-num{
		margin-bottom:8px;
		font-size:24px;
	}
	.core-rd-text h3{
		margin-bottom:14px;
		font-size:18px;
	}
	.core-rd-text p{
		font-size:13px;
		line-height:1.7;
	}
	.core-rd-btn{
		height:46px;
		margin-top:24px;
		font-size:14px;
	}
}



/* =========================================================
   CORE SCROLL REVEAL ANIMATION
   각 섹션이 화면에 들어올 때 자연스럽게 등장
   ========================================================= */
.reveal,
.reveal-item{
	opacity:0;
	will-change:opacity, transform;
	transition:
		opacity .75s cubic-bezier(.22,.61,.36,1),
		transform .75s cubic-bezier(.22,.61,.36,1);
}

.reveal-up{
	transform:translateY(34px);
}

.reveal-left{
	transform:translateX(-42px);
}

.reveal-right{
	transform:translateX(42px);
}

.reveal.is-visible,
.reveal-item.is-visible{
	opacity:1;
	transform:translate(0,0);
}

/* 배합기술 아이콘 */
.core-material-item.reveal-item{
	transform:translateY(28px) scale(.97);
}

.core-material-item.reveal-item.is-visible{
	transform:translateY(0) scale(1);
}

/* 가스켓 카드 */
.core-gasket-card.reveal-item{
	opacity:0;
	transform:translateY(24px);
}

.core-gasket-card.reveal-item.is-visible{
	opacity:1;
	transform:translateY(0);
}

/* 품질검증 프로세스 */
.core-quality-step.reveal-item{
	opacity:0;
	transform:none;
}

.core-quality-step.reveal-item.is-visible{
	opacity:1;
	transform:none;
}

.core-quality-arrow{
	transition:opacity .45s ease;
}

/* 연구성과 카드 */
.core-rd-card.reveal-item{
	opacity:0;
	transform:translateY(32px);
}

.core-rd-card.reveal-item.is-visible{
	opacity:1;
	transform:translateY(0);
	transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

/* 연구성과 카드 마우스 오버 효과 */
.core-rd-card.reveal-item.is-visible:hover{
	transform:translateY(-8px);
	border-color:#b8cfc9;
	box-shadow:0 16px 34px rgba(17,139,119,.12);
}

.core-rd-card.reveal-item.is-visible:hover .core-rd-icon img{
	transform:scale(1.05);
}

/* 애니메이션이 시작되기 전 레이아웃 흔들림 방지 */
.reveal-stagger{
	position:relative;
}

/* 접근성: 모션 최소화 설정 */
@media (prefers-reduced-motion: reduce){
	.reveal,
	.reveal-item{
		opacity:1;
		transform:none;
		transition:none;
	}
}


/* =========================================================
   메뉴 앵커 이동 - 부드러운 스크롤
   ========================================================= */
html{
	scroll-behavior:smooth;
}

#compounding,
#gasket,
#quality,
#rd-outcomes{
	scroll-margin-top:120px;
}

@media screen and (max-width:1025px){
	#compounding,
	#gasket,
	#quality,
	#rd-outcomes{
		scroll-margin-top:80px;
	}
}

@media (prefers-reduced-motion: reduce){
	html{
		scroll-behavior:auto;
	}
}