@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900');
@font-face {
	font-family: 'KOHIBaeum';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/KOHIBaeumOTF.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* ===================================================== */
/* COMMON */
:root {
	font-size: 10px;
  --color-main: #008891;
	--color-main-lighten: #00bac6;
	--color-main-a3: #0088914d;
	--color-main-a6: #00889199;
  --color-sub: #005786 ;
  --color-sub2: #006091;
	--color-bg-main: #e4ecec;
	--color-bg-gray: #e8e8e8;
	--color-white-a05: rgba(255, 255, 255, 0.05);
	--color-white-a1: rgba(255, 255, 255, 0.1);
	--color-white-a2: rgba(255, 255, 255, 0.2);
	--color-white-a4: rgba(255, 255, 255, 0.4);
	--color-white-a6: rgba(255, 255, 255, 0.6);
	--color-white-a8: rgba(255, 255, 255, 0.8);
	--color-white-a9: rgba(255, 255, 255, 0.9);
	--color-black-a05: rgba(0, 0, 0, 0.05);
	--color-black-a1: rgba(0, 0, 0, 0.1);
	--color-black-a2: rgba(0, 0, 0, 0.2);
	--color-black-a4: rgba(0, 0, 0, 0.4);
	--color-black-a6: rgba(0, 0, 0, 0.6);
	--color-black-a8: rgba(0, 0, 0, 0.8);
	--color-black-a9: rgba(0, 0, 0, 0.9);
	--border-gray-1: 1px solid #eee;
	--border-gray-a05: 1px solid var(--color-black-a05);
	--box-shadow-2: 0 0 2rem var(--color-black-a2);
	--drop-shadow-6: drop-shadow(0 0 6rem var(--color-black-a6));
	--drop-shadow-4: drop-shadow(0 0 4rem var(--color-black-a4));
	--drop-shadow-2: drop-shadow(0 0 2rem var(--color-black-a2));
	--scroll-width: 0px;
	--inner-width: calc(100vw - var(--scroll-width));
	--inner-padding: max(20px, calc(((var(--inner-width)) - 1400px) / 2));
	--outer-padding: min(var(--inner-padding), 50px);
	--font-pretendard: Pretendard, 'Pretendard Variable', "Noto Sans KR", 'Malgun Gothic','돋움', dotum, sans-serif;
	--font-kohi: 'KOHIBaeum', Pretendard, 'Pretendard Variable', 'Noto Sans KR', 'Malgun Gothic','돋움', dotum,sans-serif;
}
html::-webkit-scrollbar {width: 8px; background-color: #eee;}
html::-webkit-scrollbar-thumb {background-color: #444;}
body {--header-height: 110px; min-width: 320px; font: 16px/1.2 Pretendard, 'Pretendard Variable', "Noto Sans KR", 'Malgun Gothic','돋움', dotum, sans-serif; color: #666; overscroll-behavior: none; letter-spacing: 0.025em;}
p {line-height: 1.5;}
.is-fix {--header-height: 95px;}
.is-open {overflow: hidden !important;}
.is-open #wrap { padding-right: var(--scroll-width);}
.inner {position: relative; margin: 0 var(--inner-padding);}

/* 좌우스크롤가이드 */
.scroll-x-wrap { overflow-x: auto; max-width: 100%; } 
.scroll-x-wrap::-webkit-scrollbar { height: 6px; border-radius: 30px; background: #ddd; } 
.scroll-x-wrap::-webkit-scrollbar-thumb { border: 1px solid transparent; border-radius: 30px; background-image: var(--color-gradient); background-clip: content-box; } 
.scroll-x-guide { position: relative; width: 44px; height: 41px; margin: -10px 0 15px auto; } 
.scroll-x-guide::before { display: block; width: 44px; height: 6px; border-radius: 3px; background-color: #ddd; content: ''; } 
.scroll-x-guide::after { position: absolute; top: 1px; left: 1px; width: 24px; height: 40px; background-image: url(../images/common/scroll-x_pointer.svg); content: ''; animation: scroll-x-guide 3s ease-in-out infinite; } 
@keyframes scroll-x-guide { 50% { transform: translateX(19px); } } 

/* 글머리 기호 */
[class|="mark"] { display: flex; } 
[class|="mark"] + [class|="mark"] { margin-top: 0.4em; } 
[class|="mark"]::before { flex-shrink: 0; margin-right: 0.5em; content: "";} 
.mark-hyphen::before {content: '-';}

/* br */
br:where([class^="br"]) {display: none;}

@media (max-width: 1280px) {
	:root {font-size: 9px;}
	body,
	.is-fix {--header-height: 95px;}
  .br1280 {display: block;}
}
@media (max-width: 1024px) { .br1024 {display: block;} }
@media (max-width: 820px) { .br820 {display: block;} }
@media (max-width: 768px) {
	:root {font-size: 8px;}
	body, 
	.is-fix {--header-height: 85px;}
  .br768 {display: block;}
}
@media (max-width: 640px) { .br640 {display: block;} }
@media (max-width: 576px) { .br576 {display: block;} }
@media (max-width: 480px) {
	:root {font-size: 7px;}
	body, 
	.is-fix {--header-height: 75px;}
  .br480 {display: block;}
}
@media (max-width: 414px) { .br414 {display: block;} }
@media (max-width: 360px) {
	:root {--inner-padding: 15px;}
  .br360 {display: block;}
}
/* COMMON */
/* ===================================================== */


/* ===================================================== */
/* HEADER */
.header {position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; --allmenu-right-padding: 6%; --allmenu-img-width: 22.5%;}
.header-inner {display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; z-index: 1100; width: 100%; height: var(--header-height); padding: 0 var(--outer-padding); transition: all .3s, padding 0s; column-gap: 2%;}
.header-inner::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  content: ''; transition: all 0.3s, background-size 0s; border-bottom: 1px solid transparent; background: linear-gradient(to left, #eee 0%, #eee 100%) no-repeat right bottom/0 1px;} 
.is-open .header-inner {padding-right: calc(var(--outer-padding) + var(--scroll-width));}
:is(.is-fix):not(.is-open) .header-inner::before { background-color: #fff; border-bottom-color: var(--color-main-a3);}
.is-open .header-inner::before {background-size: calc(100% - var(--allmenu-right-padding) - var(--allmenu-img-width)) 1%;}

.header-logo {position: relative; z-index: 5; transition: all .3s; max-width: 26rem;}
.header-logo #header-logo {width: 100%; opacity: 0; transition: opacity .3s;}
.header-logo #header-logo-white {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .3s;}
:is(.is-fix, .is-open, .header-logo:hover) #header-logo {opacity: 1;}
:is(.is-fix, .is-open, .header-logo:hover) #header-logo-white {opacity: 0;}
.is-open .header-logo {position: absolute; left: calc(var(--allmenu-img-width) + var(--allmenu-right-padding)); bottom: 0; max-width: none;}
.is-open .header-logo #header-logo {width: 40rem;}

/* gnb */
.gnb {position: absolute; left: 0; width: 100%; transition: opacity .3s;}
.gnb-wrap {display: flex; justify-content: center; padding: 0 1.5em; position: relative; width: fit-content; margin: 0 auto; background: linear-gradient(to right, var(--color-main-a3) 0%, var(--color-main-a3) 100%) no-repeat center bottom/100% 1px; transition: all .3s; font-size: 17px;}
.depth1 > a {padding: 0 2.5em; font-family: var(--font-kohi); height: var(--header-height);}
.depth1 > a span {color: #fff; white-space: nowrap; display: flex; align-items: center; height: 100%; padding-top: 0.2em;}
.depth2 {display: none; position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: var(--color-main); font-weight: 700;}
.depth2 ul {display: flex;}
.depth2 li {max-width: 50%; flex-grow: 1;}
.depth2 a {padding: 1.25em 1.35em; font-size: calc(1em - 1px); color: #fff; height: 100%; display: flex; align-items: center; justify-content: center; transition: color .2s, background-color .2s;}

.depth1:hover > a span {color: var(--color-main);}
.depth2 a:hover {background-color: #fff; color: #222;}
.is-open .gnb {padding-right: var(--scroll-width); visibility: hidden; opacity: 0;}
.is-fix .gnb-wrap {background-size: 0 1px;}
.is-fix .depth1 > a span {color: #222;}
.is-fix .depth1:hover > a span {color: var(--color-main)}

/* 유틸 */
.util {display: flex; column-gap: clamp(3rem, 2.5vw, 4.5rem); align-items: center; margin-left: auto;}

/* 유틸-언어 */
.util-lang {position: relative; font-size: 14px; font-family: var(--font-kohi);}
.util-lang-btn {width: 28px; height: 28px; background: url(../images/common/lang_ico.svg) no-repeat center/contain; transition: all .3s;}
.util-lang-list {display: none; position: absolute; top: calc(100% + 10px); left: 50%; padding: 0.6em 0 0.4em; background-color: #fff; color: #666; transform: translateX(-50%); box-shadow: var(--box-shadow-2); border-radius: 0.3em 0;}
.util-lang-list a {padding: 0.5em 1em 0.3em; transition: all .3s;}
.util-lang-list .on a,
.util-lang-list a:hover {color: var(--color-main);}
:is(.is-hover, .is-fix, .is-open) .util-lang-btn {background-image: url(../images/common/lang_ico_on.svg);}

/* 유틸-전체메뉴 버튼 */
.util-allmenu-btn { position: relative; width: 23px; height: 23px;} 
.util-allmenu-btn span { position: absolute; top: 10px; left: 0; width: 23px; height: 3px; border-radius: 3px; background-color: #fff; transition: all .3s; } 
.util-allmenu-btn span:nth-child(1) { transform: translateY(-8px); } 
.util-allmenu-btn span:nth-child(2) { width: 18px; } 
.util-allmenu-btn:hover span:nth-child(2) {width: 23px;}
.util-allmenu-btn span:nth-child(3) { transform: translateY(8px); } 
:is(.is-fix, .is-hover, .is-open) .util-allmenu-btn span {background-color: var(--color-main);}
.is-open .util-allmenu-btn span { width: 31px; transform: rotate(45deg) translate(-3px, 3px);} 
.is-open .util-allmenu-btn:hover span { width: 31px; } 
.is-open .util-allmenu-btn span:nth-child(2) { opacity: 0; } 
.is-open .util-allmenu-btn span:nth-child(3) { transform: rotate(-45deg) translate(-3px, -3px); } 

/* 전체메뉴 */
.allmenu {visibility: hidden; position: fixed; width: calc(100% + var(--scroll-width)); height: 100%; background: #fff url(../images/common/allmenu_bg01.jpg) no-repeat right center/cover; opacity: 0; transition: opacity .3s, visibility .3s; display: flex; left: 0;}
.allmenu::before {width: var(--allmenu-img-width); content: ''; background: url(../images/common/allmenu_bg02.jpg) no-repeat 40% center/cover; filter: brightness(30%);}
.allmenu-right {flex-grow: 1; padding-left: var(--allmenu-right-padding); }
.allmenu-wrap {overflow: hidden auto; height: calc(100% - var(--header-height)); margin-top: var(--header-height); }
.allmenu-wrap::-webkit-scrollbar {width: 0;}
.allmenu-list {display: flex; padding: calc(10rem + 10vh) 0 calc(3rem + 3vh);}

.all-depth1 {padding: 0 4%; border-left: var(--border-gray-a05); position: relative; flex-grow: 1;}
.all-depth1::before {content: ''; width: 12rem; height: 9.26rem; background: url(../images/common/img_deco.svg) no-repeat left top/contain; position: absolute; left: -1px; top: -7rem; opacity: 0; transition: all .3s; transform: translateY(20%);}
.all-depth1-btn {display: block; position: relative; width: 100%; margin-bottom: 3.5rem; font-size: 3rem; text-align: left; cursor: default; font-family: var(--font-kohi); color: #222; transition: color .3s;}
.all-depth2 a {padding: 0.6em 0; font-weight: 700; line-height: 1.45;}
.all-depth2 a span {background: linear-gradient(to right, var(--color-main) 0%, var(--color-main) 100%) no-repeat left bottom/0 1px; transition: all .3s; padding-bottom: 0.05em;}

.all-depth1:hover::before {opacity: 1; transform: translateY(0);}
.all-depth1:hover .all-depth1-btn {color: var(--color-main);}
.all-depth2 a:hover span {background-size: 100% 1px; color: var(--color-main);}
.is-open .allmenu {visibility: visible; opacity: 1; width: 100%;}

/* dim */
.gnb-dim {opacity: 0; position: fixed; bottom: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: var(--color-black-a6); transition: opacity .3s; pointer-events: none;}
:is(.is-hover):not(.is-open) .gnb-dim {opacity: 1;}

@media (max-width: 1600px) {
	.gnb {position: relative; width: auto; transition: 0s;}
	.is-open .header-inner {justify-content: end;}
	:not(.is-open) .util {margin-left: 0;}
}
@media (max-width: 1440px) {
	.header {--allmenu-right-padding: 3rem; --allmenu-img-width: 20%;}
	.gnb-wrap {padding: 0 1.35em;}
	.depth1 > a {padding: 0 2em;}
}
@media (max-width: 1280px) {
	.header {--allmenu-right-padding: var(--inner-padding); --allmenu-img-width: 140px;}
	.gnb-wrap {padding: 0 max(0.8em, 1.5vw); font-size: 16px;}
	.depth1 > a {padding: 0 max(1.2em, 2.5vw);}

	.all-depth1::before {width: 8vw; top: -4vw;}
	.all-depth2 a {font-size: 15px;}
}
@media (max-width: 1024px) {
	.header {--allmenu-right-padding: 0px; --allmenu-img-width: 0px;}
	.is-open .header-inner {justify-content: space-between;}
	body:not(.is-open) .header-inner::before {border-bottom-color: var(--color-main-a3);}
	.is-open .header-logo {position: relative; left: auto; bottom: auto; max-width: 26rem;}
	.is-open .header-logo #header-logo {width: 100%;}
	.gnb {display: none;}
	.all-depth1:last-child {border-right: var(--border-gray-a05); }
	.all-depth1-btn {font-size: max(22px, 2.6vw);}
	.allmenu-list {padding-left: var(--inner-padding); padding-right: var(--inner-padding);}
}
@media (max-width: 768px) {
	.allmenu-list {flex-direction: column; justify-content: center; padding: 0 0 var(--header-height); min-height: 100%;}
	.all-depth1 {padding: 0; border: 0; flex-grow: 0;}
	.all-depth1:last-child {border-right: 0;}
	.all-depth1::before {display: none;}
	.all-depth1-btn { padding: 1.2em var(--inner-padding) 0.8em; margin: 0; font-size: 3.6rem; cursor: pointer; text-align: center; }
	.all-depth1-btn.on {color: var(--color-main);}
	.all-depth2 {display: none; text-align: center;}
	.all-depth2 a {padding: 1.2em var(--inner-padding); font-size: 16px; background-color: var(--color-black-a05); color: #444; transition: all .3s;}
	.all-depth2 a:hover {background-color: var(--color-main-a6);}
	.all-depth2 a:hover span {color: #fff; background: none;}
}
@media (max-width: 576px) {
	.header-inner {column-gap: 30px;}
	.util {column-gap: var(--inner-padding);}
}
@media (max-width: 414px) {
	.all-depth2 a {padding: 1.2em var(--inner-padding); font-size: 15px;}
}
/* HEADER */
/* ===================================================== */


/* ===================================================== */
/* FOOTER */
.footer { background-color: #222; color: #fff; font-size: 15px; overflow: hidden; position: relative;}
.footer .inner {padding: 7rem 0 0 ; display: grid; grid: repeat(4, auto) / 1fr auto; }

/* 로고 */
.footer-logo {order: 10; width: 100%; margin-bottom: -0.5rem; grid-column: 1 / -1;}
.footer-logo img {width: 100%;}

/* 푸터메뉴 */
.footer-menu {display: flex; align-items: center; font-weight: 700; grid-column-start: 2; margin: 0 -1.2em 1.7em; flex-wrap: wrap;}
.footer-menu .item a {padding: 0.6em 1.2em; position: relative;}
.footer-menu .item:nth-last-child(2) a {color: var(--color-main); font-weight: 800;}
.footer-menu .item:not(:last-child) a::after {position: absolute; width: 1px; height: 0.6em; background-color: #eee; content: ''; top: 50%; right: 0; transform: translateY(-50%);}
.footer-slogan {order: 5; font-size: 18px; font-weight: 900; color: #444; padding: 4em 0 3em; grid-column: 1 / -1; text-align: justify; width: 100%;}
.footer-slogan::before {content: 'C R E A T I V E  I N N O V A T I O N  W E  A R E  C H E M I C A L  C O M P A N Y'; white-space: pre;}
.footer-slogan::after {display: inline-block; content: ''; width: 100%;}

/* 카피라이트 */
.footer-copy {color: #888; letter-spacing: 0.15em; grid-column-start: 2; line-height: 1.3;}

/* 탑버튼 */
.top-btn {display: flex; width: 6.6rem; height: 6rem; position: absolute; right: var(--outer-padding); top: 6.5rem; overflow: hidden;}
.top-btn::before {content: ''; background: url(../images/common/top-btn_bg.svg) no-repeat center top/contain; width: 100%; height: 100%; display: block; opacity: 0.5; transition: .3s;}
.top-btn::after {content: ''; background: url(../images/common/top-btn_ico.svg) no-repeat center top/contain; width: 2.6rem; height: 5.4rem; position: absolute; top: 1.7rem; left: 50%; transform: translateX(-50%);}
.top-btn:hover::before {opacity: 1;}
.top-btn:hover::after { animation: top-btn 1.5s infinite linear; } 
@keyframes top-btn { 
	33% { transform: translate(-50%, 2px); } 
	66% { transform: translate(-50%, -4px); } 
}

@media (max-width: 1700px) {
	.footer-menu {grid-column-start: 1;}
	.footer-copy {grid-column: 1 / -1;}
}
@media (max-width: 1280px) {
	.footer .inner {grid-template-columns: 1fr 9rem;}
	.footer-slogan {font-size: 17px;}
	.footer-slogan::before {content: 'C R E A T I V E   I N N O V A T I O N   W E   A R E  C H E M I C A L   C O M P A N Y';}
	.top-btn { top: 7.5rem; }
}
@media (max-width: 1024px) {
	.footer-slogan {font-size: 16px; }
	.footer-logo {margin-bottom: -0.3vw;}
}
@media (max-width: 768px) {
	.footer {font-size: 14px;}
	.footer .inner {padding-top: 16rem;}
	.footer-menu {grid-column-end: -1; margin: 0 0 2em;}
	.footer-menu .item { flex-grow: 1; width: 40%; }
	.footer-menu .item a {padding: 0.5em 1.5em; text-align: center;}
	.footer-menu .item:nth-child(even) a::after { display: none;}
	.footer-slogan {font-size: 15px; padding: 2.8em 0 1.8em; letter-spacing: normal;}
	.footer-copy {text-align: center;}
	.top-btn { top: 5.5rem; right: 50%; transform: translateX(50%);}

	:lang(en) .footer-menu .item:nth-last-child(3) ~ .item {width: 80%;}
	:lang(en) .footer-menu .item:nth-last-child(3) ~ .item a {padding: 0.7em 1.5em;}
	:lang(en) .footer-menu .item:nth-last-child(2) a {padding-top: 1.5em;}
	:lang(en) .footer-menu .item:nth-last-child(2) a::after {width: 0.6em; height: 1px; top: 100%; right: 50%; transform: translateX(50%);}
}
@media (max-width: 640px) {
	.footer-slogan {font-size: 15px; text-align: center; line-height: 1.3; letter-spacing: 0.5vw;}
	.footer-slogan::before { content: 'C R E A T I V E   I N N O V A T I O N \A W E   A R E   C H E M I C A L   C O M P A N Y';}
}
@media (max-width: 576px) {
	.footer-copy {font-size: 2.6vw; letter-spacing: 0.3vw;}
}
@media (max-width: 480px) {
	.footer-menu .item a {padding: 0.5em 1em;}
	.footer-slogan {padding: 2.4em 0 1.5em; letter-spacing: 0.2vw; font-size: 14px;}
}
@media (max-width: 414px) {
	.footer-copy {font-size: 13px;}
}
@media (max-width: 375px) {
	.footer-slogan {font-size: 3.6vw;}
}
/* FOOTER */
/* ===================================================== */


/* ===================================================== */
/* ANIMATION */
[data-aos="clip-center"] {
	clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
	transition-property: clip-path;
}
[data-aos="clip-center"].aos-animate {
	clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}
[data-aos="clip-right"] {
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	transition-property: clip-path;
}
[data-aos="clip-right"].aos-animate {
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
[data-aos="clip-bottom"] {
	clip-path: polygon(0 0, 100% 0%, 100% 0%, 0 0);
	transition-property: clip-path;
}
[data-aos="clip-bottom"].aos-animate {
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}
[data-aos="clip-left"] {
	clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%);
	transition-property: clip-path;
}
[data-aos="clip-left"].aos-animate {
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
[data-aos="clip-top"] {
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
	transition-property: clip-path;
}
[data-aos="clip-top"].aos-animate {
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}

@keyframes float { /* ease-in-out + alternate */
	0% {transform: translateY(0);}
	50% {transform: translateY(4px);}
	100% {transform: translateY(0);}
}

@keyframes fade-down { 
	0% { opacity: 0; transform: translateY(-4rem); } 
	100% { opacity: 1; transform: translateY(0); } 
}
@keyframes fade-up { 
	0% { opacity: 0; transform: translateY(4rem); } 
	100% { opacity: 1; transform: translateY(0); } 
}
@keyframes fade-left { 
	0% { opacity: 0; transform: translateX(-4rem); } 
	100% { opacity: 1; transform: translateX(0); } 
}
@keyframes fade-right { 
	0% { opacity: 0; transform: translateX(4rem); } 
	100% { opacity: 1; transform: translateX(0); } 
}
@keyframes fade-in { 
	0% { opacity: 0; } 
	100% { opacity : 1; } 
}
@keyframes fade-out { 
	0% { opacity: 1; visibility: visible;} 
	100% { opacity : 0; visibility: hidden;} 
}
@keyframes show { 
	0% { visibility: hidden; } 
	100% { visibility: visible; } 
}
@keyframes text-up { 
	0% { transform: translateY(1.2em); } 
	100% { transform: translateY(0); } 
}
@keyframes flip-down { 
	0% { opacity: 0; transform: scaleY(0); } 
	100% { opacity: 1; transform: scaleY(1); } 
}
@keyframes fade-in-blur { 
	0% { opacity: 0; filter: blur(0.3em); } 
	100% { opacity: 1;  filter: none;} 
}
 /* ANIMATION */
 /* ===================================================== */