@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
::-moz-selection {background: #000000; /*메인색*/ color: #e6e6e6;text-shadow: none;}
::selection {background: #000000; color: #e6e6e6; text-shadow: none;}
html, body, div, span, object, iframe, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, strong, sub, sup, legend, caption, table, tbody, thead, tfoot, tr, th, td, summary, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, b, i, a, small, menu, nav, section, time, mark, audio, video, dl, dt, dd, ul, li, ol, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, select, textarea, p, blockquote, button {margin:0;padding:0; border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-family: inherit;color:inherit;vertical-align: middle}
dl,ul,ol,menu,li {list-style:none}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
input,select,textarea,button {font-family:"Pretendard";font-size: inherit;background:none}
input::-moz-placeholder, textarea::-moz-placeholder {color: #bbb !important;}
img {border:0; width:100%}
table {border-collapse:collapse; table-layout: fixed;}
a {position: relative;text-decoration:none;}
a:active {top:1px;left:1px}
a:hover {transition:.3s all ease}
span {vertical-align:top}
blockquote {font-style:italic;border-left:5px #000 solid; padding-left:20px;margin:40px 20px;}
div,p {word-break:keep-all;}
b, strong {font-weight:700;}
html{font-size:16px;scroll-behavior: smooth;}
body {width: 100%;color:#333; font-family:"Pretendard","Malgun Gothic","Apple SD Gothic NEO",dotum,sans-serif; background:#fff;-webkit-font-smoothing: antialiased;-webkit-overflow-scrolling: touch;}

:root {
	--main: #22628F;
	--main-bg: #202C4B;
	--main-navy: #214B91;
	--bg-gray: #EAEBF1;
}

.ta-l {text-align: left;}
.ta-c {text-align: center;}
.ta-r {text-align: right;}
.mb2 {margin-bottom: 2rem;}
.mb4 {margin-bottom: 4rem;}

.bg_gray {background-color: #d5d5d5;}

.textarea_style1 {
	width: 100%;
	font-size: 1.5rem;
	border: 2px solid #b7b7b7;
	padding: 1rem;
}
.input_style1 {
	width: 100%;
	font-size: 1.5rem;
	border: 1px solid #b7b7b7;
	padding: 0.5rem 1rem;
}

.mo_none {display: block;}
.pc_none {display: none;}

.header {
	position: fixed;
	z-index: 100;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: start;
	height: 116px;
	padding: 1rem 1.5rem;
	background: #000a;
	transition: all 0.3s ease-in-out;
}
.header.active {height: 350px;}
.header.active .snb {
  visibility: visible;
  opacity: 1;
  transform: translateY(0); /* 원래 위치로 */
  transition-delay: 0.2s;
}
.header .logo {width: 40%;}
.header .logo img {max-width: 326px;}

.gnb {
	display: flex;
	margin-top: 2rem;
}
.gnb > li {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 500;
	margin-right: 3rem;
	width: 200px;
}
.gnb > li:last-child {width: 2rem;margin-right: 3rem;}

.snb {
	margin-top: 2rem;
	visibility: hidden; /* 보이게 설정 */
	opacity: 0; /* 초기 상태: 투명 */
	transform: translateY(-10px);
	transition: all 0.3s ease-in-out;
}
.snb li {margin-top: 1rem; font-size: 1.25rem;}

.hammenu {
	width: 30px;
	height: 22px;
	position: relative;
	cursor: pointer;
	z-index: 20;
}
.hammenu span{
	position: absolute;
	width: 100%;
	height: 6px;
	background-color: #fff;
	transition: 0.3s;
}
.hammenu.active span {}
.hammenu span:nth-child(1) {left:0; top: 0;}
.hammenu span:nth-child(2) {left:0; top: 50%;}
.hammenu span:nth-child(3) {left:0; top: 100%;}
.hammenu.active span:nth-child(1) {
	top: 50%;
	transform: rotate(45deg);
}
.hammenu.active span:nth-child(2) {
	opacity: 0;
}
.hammenu.active span:nth-child(3) {
	top: 50%;
	transform: rotate(-45deg);
}

.header .ham_nav {
	position:fixed;
	top:116px; left:200%;
	width: 100%;
	height: 100%;
	transition: all 0.5s;
	border-top: 1px solid #969EB0;
	background:#fff;
	z-index:99;
}
.header .ham_nav.on { left:0%; }
.header .ham_nav > ul { 
	width:100%;
	height:100%;
	padding:0 0 3rem;
	overflow-y:auto;
} 
.header .ham_nav > ul  > li { 
	width:100%; 
	font-size:1.5rem;
	color: #0E1320;
} 
.header .ham_nav > ul > li.on {
	color: #fff;
	font-weight: 500;
	background-color: var(--main-navy);
}
.header .ham_nav > ul > li > a {
	display:block; 	
	cursor:pointer; 
	-ms-user-select: none;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	border-bottom: 1px solid #969EB0;
	padding: 1rem;
}
.header .ham_nav .snb_mo {
	display: none;
	font-weight:400;
	color: #0E1320;
	background-color: #fff;
}
.header .ham_nav .snb_mo a {
	display: block;
	border-bottom: 1px solid #EAEBF1;
	padding: 1rem 0;
	margin: 0 3rem;
}

#index .swiper-slide img {
	width:100%;
	height: 100vh;
}
#index .threebanner ul {
	display: flex;
	justify-content: space-between
}
#index .threebanner ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(100% / 3);
	height: 118vh;
	background-size: cover;
	background-repeat: no-repeat;
}
#index .threebanner ul li:nth-child(1) {background-image: url("/images/main_slice1_off.jpg?v=2");}
#index .threebanner ul li:nth-child(2) {background-image: url("/images/main_slice2_off.jpg?v=2");}
#index .threebanner ul li:nth-child(3) {background-image: url("/images/main_slice3_off.jpg?v=2");}
#index .threebanner ul li:hover:nth-child(1) {background-image: url("/images/main_slice1_on.jpg");}
#index .threebanner ul li:hover:nth-child(2) {background-image: url("/images/main_slice2_on.jpg");}
#index .threebanner ul li:hover:nth-child(3) {background-image: url("/images/main_slice3_on.jpg");}

#index .circle-wrap {
	color: #fff;
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
}
#index .circle {
	border-radius: 100%;
	background-color: #fff5;
	width: 100px;
	height: 100px;
	transition: all 0.3s ease-in-out;
	margin-bottom: 1rem;
}
#index .circle-wrap:hover .circle {
	background-color: #0ba29a55;
}
#index .circle-link {display: block;margin-top: 0.5rem;}

#index .corp-wrap {
	width: 100%;
	height: 100vh;
	padding: 5% 7%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-image: url("/images/main_gaussian.jpg");
}
#index .corp {
	position: relative;
	width: 35%;
}
#index .corp .p1 {
	position: absolute;
	left: 2.5rem;
	top:2rem;
	color: #fff;
	font-weight: 500;
	font-size: 2rem;
	border-bottom: 1px solid #fff6;
	padding-bottom: 0.5rem;
	z-index: 2;
}
#index .corp .p2 {
	position: absolute;
	left: 2.5rem;
	top: 6rem;
	color: #fff;
	line-height: 1.2rem;
	z-index: 2;
}
#index .corp a {
	border-radius: 2rem;
	box-shadow: 0rem 0rem 1rem #000;
	display: block;
	transition: all 0.3s ease;
	top:0; left:0;
}
#index .corp a:hover {box-shadow: 0rem 0rem 3rem #000;}
#index .corp a img {border-radius: 2rem;}
#index .corp button {
	position: absolute;
	bottom: 2rem;
	left: 2.5rem;
	border: 1px solid #fff;
	color: #fff;
	padding: 0.5rem 3rem;
	border-radius: 2rem;
	cursor: pointer;
}
#index .corp button:active,
#index .corp button:hover {
	border-color:#171c61;
	background-color: #171c61;
} 

.top_banner {
	height: 599px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.naviWrap {
	width:100%; 
	height:4rem; 
	border-bottom:1px solid #b2b2b2;
	background-color: #1a1f60;
}
.navi {
	width:1400px; 
	font-size:1rem; 
	color:#fff; 
	font-weight:500;
	margin:0 auto;
	display: flex;
}
.navi:after {content:""; display:block; clear:both;}
.navi_li {
	position: relative;
	display:flex; 
	height:4rem; 
	align-items: center;
	flex-direction: column;
	border-left: 1px solid #fff;
}
.navi_li.n1 {
	width:68px;
	background: url("/images/menu_icon.png") no-repeat center;
}
.navi_li.n1 a {
	display: inline-block;
	width: 100%;
	height: 100%;
}
.navi_li.n2 {width:20%;}
.navi_li.n3 {
	width:20%;
	border-right: 1px solid #fff;
}
.navi_li button {
	width: 100%;
	border-left: 1px solid #fff;
	height: 100%;
	display: flex;
	padding-left: 2rem;
	align-items: center;
	text-align: left;
	font-size: 1.25rem;
	cursor: pointer;
	background: url("/images/allow_down.png") no-repeat 90% 50%;
}

.naviSub {
	display:none;
	position:absolute;
	top: 4rem;
	width:100%;
	font-size:1rem; 
	font-weight:400;
	z-index:1;
}
.naviSub li {
	color: #494949;
	background-color: #dadada;
	margin-bottom: 3px;
}
.naviSub li:hover {
	color:#fff;
	background-color:#4d4d4d;
}
.naviSub li a {
	display:block;
	padding:10px 0 10px 10px;
}

.article {
	width: 1400px;
	margin: 0 auto;
	text-align: center;
	padding: 10rem 0;
}
.article h1 {
	font-size: 2.75rem;
	font-weight: 600;
	letter-spacing: 0.75rem;
	margin-bottom: 2rem;
}
.article h2 {
	font-family: "Bree Serif";
	color: #929292;
	font-size: 2.25rem;
	font-weight: 500;
	margin-bottom: 1rem;
	text-transform: uppercase;
}
.article .h3-wrap {text-align: left;}
.article h3 {
	display: inline-block;
	font-size: 2rem;
	font-weight: 700;
	border-left: 11px solid #1b2061;
	padding-left: 1rem;
	margin-bottom: 1rem;
}
.article h4 {
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 3rem;
}
.article .sub {
	font-size: 1.75rem;
	font-weight: 600;
}
.article .vertical-line {
	height: 200px;
	width: 4px;
	display: inline-block;
	background-color: #9b9dbb;
	margin-bottom: 1rem;
}
.article .vertical-space {
	display: inline-block;
	margin-bottom: 5rem;
}

.article100 {
	width: 100%;
	text-align: center;
	padding: 5rem 2rem 5rem;
}
article100 .h3-wrap {text-align: center;}
.article100 h3 {
	display: inline-block;
	font-size: 3rem;
	font-weight: 700;
	border-left: 11px solid #1b2061;
	padding-left: 1rem;
	margin-bottom: 4rem;
	letter-spacing: 0.5rem;
}

#corp .top_banner {background-image: url("/images/sub_bg_intro.jpg");}
#corp .dan {display: flex;justify-content: center;}
#corp .dan1 {
	max-width: 450px;
	margin-right: 5rem;
}
#corp .dan2 {
	text-align: left;
	padding-top: 1rem;
}
#corp .dan2 .tit {
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 3rem;
	border-bottom: 1px solid #171c61;
	padding-bottom: 1rem;
	margin-bottom: 3rem;
}
#corp .dan2 .exp {
	color: #929292;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 2rem;
}

#history .top_banner {background-image: url("/images/sub_bg_intro.jpg");}

#location .top_banner {background-image: url("/images/sub_bg_intro.jpg");}
#location .dan {display: flex;}
#location .dan1 {width: 47%; margin-right: 3%;}
#location .dan1 iframe {width: 100%;height: 428px;}
#location .dan2 {width: 50%;}
#location .address1 {
	font-size: 1.5rem;
	font-weight: 600;
	padding: 1rem 0;
}
#location .address1 dl {display: flex;}
#location .address1 dt {
	width: 100px;
	text-align: left;
}

#certificates .top_banner {background-image: url("/images/sub_bg_intro.jpg");}

#product .top_banner {background-image: url("/images/sub_bg_business.jpg");}


#chemical-manufacturing .top_banner {background-image: url("/images/sub_bg_business.jpg");}
#chemical-manufacturing .end {
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 5rem;
}

#chemical-transport .top_banner {background-image: url("/images/sub_bg_business.jpg");}
#chemical-transport .end {
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 5rem;
}

#extractor .top_banner {background-image: url("/images/sub_bg_product.jpg");}
#extractor .grid22 {
	display: flex;
	flex-wrap: wrap;
	max-width: 1100px;
	margin: 0 auto;
}
#extractor .grid22 li {
	width: 50%;
	padding: 0 1.5rem;
}
#extractor .grid22 .img {
	margin-bottom: 1rem;
}
#extractor .grid22 .tit {
	display: inline-block;
	color: #fff;
	font-size: 1.5rem;
	border-radius: 2rem;
	margin-bottom: 1rem;
	background-color: #0ba29b;
	font-weight: 600;
	padding: 1rem 2rem;
}
#extractor .grid22 .sub {
	font-size: 1.5rem;
	margin-bottom: 2rem;
}

#caustic-soda .top_banner {background-image: url("/images/sub_bg_product.jpg");}

#etc .top_banner {background-image: url("/images/sub_bg_product.jpg");}

#contact .top_banner {background-image: url("/images/sub_bg_contact.jpg");}
#contact .title {
	font-size: 2.5rem;
	text-align: left;
	border-radius:2rem;
	padding: 2rem 4rem;
	margin-bottom: 7rem;
	background: #e3e3e3;
}
#contact .privay_policy {
	text-align: left;
	font-size: 1.25rem;
	height: 300px;
	overflow-y:scroll;
	border:2px solid #aaa;
	padding: 2rem 1rem;
	margin-bottom: 1rem;
}
#contact .label-wrap {font-size: 1.25rem;margin-bottom: 4rem;}
#contact .label-wrap input {width: 1.5rem; height: 1.5rem;}
#contact .privay_policy b {font-size: 1.25rem;}
#contact #writeForm {max-width: 700px;margin: 0 auto;}
#contact #writeForm dl {
	display: flex;
	margin-bottom: 1rem;
}
#contact #writeForm dt {
	width: 20%;
	font-size: 1.25rem;
	font-weight: 600;
	text-align: left;
}
#contact #writeForm dt .red {color: red;}
#contact #writeForm dd {width: 80%;}
#contact .btn-wrap {display: flex;margin-top: 4rem;}
#contact .btn-wrap button {
	font-weight: 600;
	font-size: 1.25rem;
	border: 1px solid #c1c1c1;
	padding: 1rem 3rem;
	cursor: pointer;
}
#contact .btn-wrap button:nth-child(1) {width: 47%; margin-right: 3%;}
#contact .btn-wrap button:nth-child(2) {width: 50%; color: #fff;background-color: #1d2162;}


.footer {
	position: relative;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 500;
	padding: 1rem 4rem;
	background-color: #8c8c8c;
}
.footer .links {
	display: flex;
	border-bottom: 1px solid #fff;
	padding: 1rem 0.5rem 2rem;
}
.footer .links li {margin-right: 2rem;}
.footer .bottom {
	display: flex;
	justify-content: space-between;
	align-items: end;
	padding: 2rem 0.5rem 1rem;
}
.footer .bottom ul li {margin-bottom: 1rem;}


@media screen and (max-width:1920px) {
	html, body {font-size: 15px;}
	.header {
		position: absolute;
		padding: 1rem;
	}
	.gnb > li {width: 20%; min-width: 150px;}

	#index .swiper-slide img {height: auto;}
	#index .threebanner ul li {height: 100vh;}
	#index .corp-wrap {80vh}

}

@media screen and (max-width:1400px) {
	html, body {font-size: 14px;}
	.gnb > li.mo_none {margin-right: 0;}
	.navi {width: 100%;}
	.navi_li.n2 {width: 250px;}
	.navi_li.n3 {width: 300px;}
	.article {width: 100%;padding: 7rem 1.5rem 5rem;}

	#index .threebanner ul li {height: 700px;}
	#index .corp-wrap {height: 50vh;}
	#index .corp {width: 50%;}
}

@media screen and (max-width:1200px) {
	html, body {font-size: 13px;}
	.header {align-items: center;}
	.gnb {margin-top: 0;}
	.gnb > li {display: none; min-width: auto;}
	.gnb > li:last-child {width: auto; margin-right: 0;}

	.mo_none {display: none !important;}
	.pc_none {display: block !important;}
	.top_banner {height: 300px;}

	#index .threebanner ul li {height: 400px;}
	#index .corp-wrap {
		height: auto;
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
	#index .mainPager.swiper-pagination {left: 1rem;bottom: 1rem;}

	#corp .dan {
		flex-direction: column;
		align-items: center;
		margin-bottom: 7rem;
	}
	#corp .dan1 {margin-right: 0; margin-bottom: 3rem;}
	#location .dan {
		flex-direction: column;
		align-items: center;
	}
	#location .dan1 {
		width: 100%;
		margin-right: 0;
		margin-bottom: 3rem;
	}
	#location .dan2 {width: 100%;}
	#location .dan2 img {width: 100%;}

	.footer {font-size: 1rem;padding: 2rem;}
	.footer .bottom {
		flex-direction: column;
		align-items: start;
	}
	.footer .logo_white {margin-top: 2rem;}

}

@media screen and (max-width:768px) {
	html, body {font-size: 12px;}
	.header {
		position: relative;
		height: 72px;
		background-color: #000c;
	}
	.header .ham_nav {top:72px;}
	.hammenu {height: 20px;}
	.hammenu span {height: 4px;}
	.navi_li.n1 {width: 10%;}
	.navi_li.n2 {width: 40%;}
	.navi_li.n3 {width: 50%;}
	.naviSub {font-size: 1.25rem;}
	.article .sub {font-size: 1.5rem;}
	.article h1 {font-size: 3rem; margin-bottom: 1rem;}
	.top_banner {height: 150px;}

	#index .corp {width: 100%;}
	#index .corp button {border: 2px solid #fff;}
	#chemical-manufacturing .end {font-size: 1.5rem;}
	#chemical-transport .end {font-size: 1.75rem;}

	#contact .title {
		font-size: 2rem;
		padding: 1rem 2rem;
		border-radius: 1rem;
	}

	.footer .logo_white {width: 40%;}
}