@charset "utf-8";


/* ********************************* PC over : 1025 ~  ********************************* */

/* ******************** 공용 ******************** */
.only-pc {display:block;}
.only-mobile {display:none;}


/* 글자 하나씩 애니메이션 / 스크립트 aniTxt와 조인 */
.aniTxt {display:flex; flex-wrap:wrap; position:relative; flex-direction:row;}
.aniTxt>span {overflow:hidden; display:block; transform: rotate(0.03deg);}
.aniTxt>span>span {display:block; transform:translateY(100%); opacity:0;}
.aniTxt>span.on>span {transform:translateY(0); transition:all .8s ease !important; opacity:1;}

/* table-typeA */
.table-wrap.typeA table tbody tr {border-top:1px solid #ddd;}
.table-wrap.typeA table tbody tr>* {padding:20px;}
.table-wrap.typeA table tbody tr th {color:#000; font-weight:500; text-align:left; background-color:#f2f4f8; border-left:1px solid #ddd; border-right:1px solid #ddd; transform:rotate(-0.03deg);}
.table-wrap.typeA table tbody tr th:nth-of-type(1) {border-left:1px solid transparent;}
.table-wrap.typeA table tbody tr:nth-of-type(1) {border-top:1px solid #333;}
.table-wrap.typeA table tbody tr:last-child {border-bottom:1px solid #333;}
.table-wrap.typeA table tbody tr td {color:#000;}
.table-wrap.typeA table tbody tr td .homepage {display:inline-block; padding-left:25px; background:url(../images/intro/i-homepage.png)no-repeat left center;}
.table-wrap.typeA table tbody tr td .mail {display:inline-block; padding-left:25px; background:url(../images/intro/i-mail.png)no-repeat left center;}
/* table-typeB */
.table-wrap.typeB table tbody tr {text-align:center;}
.table-wrap.typeB table tbody tr th {color:#000; font-weight:500; padding:10px 15px; text-align:center; background-color:#edeff6; transform:rotate(-0.03deg); border-top:2px solid var(--navy);}
.table-wrap.typeB table tbody tr td {color:#000; padding:10px 15px; border-bottom:1px solid #e9e9e9;}
/* table-typeC */
.table-wrap.typeC table tbody tr {text-align:center;}
.table-wrap.typeC table tbody tr th {color:#000; font-weight:500; padding:10px 15px; text-align:center; background-color:#edeff6; transform:rotate(-0.03deg); border-top:2px solid var(--navy); border-right:1px solid #e9e9e9;}
.table-wrap.typeC table tbody tr th:last-of-type {border-right:0;}
.table-wrap.typeC table tbody tr td {color:#000; padding:10px 15px; border-bottom:1px solid #e9e9e9; border-right:1px solid #e9e9e9;}
.table-wrap.typeC table tbody tr td.br0 {border-right:0;}

@media screen and (max-width:768px){
	.table-wrap {overflow-x:scroll;}
	.table-wrap.typeA table {min-width:800px; width:100%;}
	.table-wrap.typeB table {min-width:600px; width:100%;}
	.table-wrap.typeB table tbody tr th {padding:7px 10px;}
	.table-wrap.typeB table tbody tr td {padding:7px 10px;}
	.table-wrap.typeC table {min-width:768px; width:100%;}
	.table-wrap.typeC table tbody tr th {padding:7px 10px;}
	.table-wrap.typeC table tbody tr td {padding:7px 10px;}
}
/* 탭 */
.tabWrap {}
.tabWrap ul {display:grid; border:1px solid #ddd;}
.tabWrap ul li {text-align:center; border-right:1px solid #ddd;}
.tabWrap ul li:last-child {border-right:0;}
.tabWrap ul li a {display:block; font-size:21px; color:#000; font-weight:500; padding:15px 10px; width:100%; height:100%; transform:rotate(-0.03deg);}
.tabWrap ul li.on {}
.tabWrap ul li.on a{}

.tab-content {}
.tab-content>div {display:none;}
.tab-content .tabItem.on {display:block;}

/***** 회사소개 *****/

/** CEO인사말 **/
.greeting {display:flex; gap:100px; position:relative; word-break:break-all;}
.greeting .img {width:30%;}
.greeting .img img {max-width:100%;}
.greeting .text {width:70%; color:#000; transform:rotate(-0.03deg);}
.greeting .text .tit {font-size:30px; color:var(--navy); line-height:1.6;}
.greeting .text .tit b {font-weight:500;}
.greeting .text p {}
.greeting .text p+p {margin-top:30px; line-height:1.8;}
.greeting .text .ceo_name {
	display:flex; gap:20px; align-items:center;
	margin-top:30px; font-size:18px; font-family:'NotoSansJP'; transform:rotate(-0.03deg);
}
.greeting .text .ceo_name .big {font-size:24px; font-weight:700;}
.greeting .text .ceo_name img {height:65px;}

/** 회사개요 **/
.introduce {}
.introduce>div~div {margin-top:100px;}
.introduce h3 {font-size:24px; font-weight:500; color:#000; padding-left:10px; border-left:5px solid var(--navy); }
.introduce .motto {}
.introduce .motto .motto-in {width:100%; padding-top:30px;}
.introduce .motto .motto-in img {max-width:100%;}
.introduce .vision {}
.introduce .vision .tit {font-size:30px; color:#fff; background:url(../images/intro/intro-bg.webp)no-repeat center/cover; height:210px; width:100%; margin-top:50px; padding:80px 0; text-align:center; justify-content:center;}
.introduce .vision .vision-in {background:#f1f3f7; padding:50px; display:grid; grid-template-columns:repeat(4, 1fr);}
.introduce .vision .vision-in article {text-align:center; display:flex; flex-direction:column; align-items:center; gap:30px;}
.introduce .vision .vision-in article>div:nth-of-type(1) {border-radius:50%; background:#10268a; padding:50px 20px; transition:.3s ease; width:250px; height:250px;}
.introduce .vision .vision-in article>div:nth-of-type(2) {}
.introduce .vision .vision-in article span {width:100%; display:block; line-height:70px;}
.introduce .vision .vision-in article span img {}
.introduce .vision .vision-in article h4 {font-size:24px; font-weight:500; color:#fff; padding-top:40px; padding-top:35px;}
.introduce .vision .vision-in article p {font-size:21px; font-weight:500; color:#000; transform:rotate(-0.03deg); padding-bottom:10px;}
.introduce .vision .vision-in article ul {position:relative; padding-top:20px;}
.introduce .vision .vision-in article ul:before,.introduce .vision .vision-in article ul:after {display:block; content:''; position:absolute; left:50%; transform:translateX(-50%); background:#6074f1;}
.introduce .vision .vision-in article ul:before {top:0; width:85px; height:2px;}
.introduce .vision .vision-in article ul:after {top:-3px; border-radius:50%; width:8px; height:8px;}
.introduce .vision .vision-in article ul li {font-size:18px; color:#000; margin-top:10px;}
.introduce .vision .vision-in article ul li:nth-of-type(1) {margin-top:0;}
.introduce .vision .vision-in article:hover>div:nth-of-type(1) {background:#243fbc; transform:scale(1.1); box-shadow:20px 20px 20px rgba(0,0,0,.1);}
.introduce .slogan {display:flex; justify-content:center; margin-top:70px;}
.introduce .slogan p {text-align:center; font-size:30px; color:#000; position:relative; padding:0 50px;}
.introduce .slogan p:before,.introduce .slogan p:after {display:block; content:''; position:absolute; width:54px; height:32px; top:0;}
.introduce .slogan p:before {left:0; background:url(../images/intro/quot-left.png)no-repeat left center;}
.introduce .slogan p:after {right:0; background:url(../images/intro/quot-right.png)no-repeat right center;}
.introduce .slogan p span {font-weight:700; color:var(--navy);}

/* 연혁 */
.history {}
.history .tabWrap ul {grid-template-columns:repeat(4, 1fr);}
.history .tabWrap ul li {}
.history .tabWrap ul li.on {background-color:var(--navy);}
.history .tabWrap ul li.on a {color:#fff;}
.history .tabItem {margin-top:80px;}
.history .tabItem article {}
.history .tabItem article dl {position:relative; display:flex;}
.history .tabItem article dl+dl {padding-top:50px;}
.history .tabItem article dl:before {position:absolute; top:14px; right:50%; width:3px; background:#ddd; height:100%; content:""; display:block; z-index:-1; transform:translateX(50%);}
.history .tabItem article dl dt {width:50%;}
.history .tabItem article dl dd {width:50%;}
.history .tabItem article dl dd strong {position:relative; display:flex; font-family:'NotoSansJP'; font-size:28px; font-weight:700; color:#000; line-height:1; margin-bottom:10px;}
.history .tabItem article dl.right dd strong {justify-content:flex-end;}
.history .tabItem article dl dd strong:before {content:""; display:block; position:absolute; top:0px; width:25px; height:25px; border-radius:50%; background:#fff; border:5px solid var(--navy);}
.history .tabItem article dl dd p {margin-top:5px; color:#000;}
.history .tabItem article dl dd p span {position:relative; display:inline-block; padding-left:10px;}
.history .tabItem article dl dd p span:before {position:absolute; top:10px; left:0; width:3px; height:3px; border-radius:50%; background:#aaa; content:""; display:block;}
.history .tabItem article dl.right {text-align:right;}
.history .tabItem article dl.right dd {padding-right:40px;}
.history .tabItem article dl.right dd strong:before {right:-53px;}
.history .tabItem article dl.left dd {padding-left:40px;}
.history .tabItem article dl.left dd strong:before {left:-53px;}


/** 조직도 **/
.organ {text-align:center;}
.organ img {max-width:100%;}

/** 인증현황 **/
.certificate {word-break:break-all;}
.certificate .controls {display:grid; grid-template-columns:repeat(4, 1fr); border:1px solid #ddd;}
.certificate .controls button {text-align:center; border-right:1px solid #ddd; display:block; font-size:21px; color:#000; font-weight:500; padding:15px 10px; width:100%; height:100%; transform:rotate(-0.03deg);}
.certificate .controls button.mixitup-control-active {background:var(--navy); color:#fff;}
.certificate .controls button:last-child {border-right:0;}
.certificate .list {margin-top:80px;}
.certificate .list ul {display:grid; grid-template-columns:repeat(4, 1fr); gap:50px 35px;}
.certificate .list li {border:1px solid #ddd; transition:0.2s;}
.certificate .list li a {padding:20px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%;}
.certificate .list li a .img {width:100%; height:100%; overflow:hidden;}
.certificate .list li a .img img {width:100%; height:100%; object-fit:scale-down; transition:0.2s;}
.certificate .list li:hover {border:1px solid var(--navy);}
.certificate .list li a .img:hover img {transform:scale(110%);}
.certificate .list li a p {color:#000; margin-top:15px;}
.certificate .list li a span {display:block; font-size:14px; color:#666; margin-top:5px;}
.popWrap {z-index:-1; position:fixed; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; padding:2vw; background:rgba(0, 0, 0, .7); opacity:0;}
.popWrap.on {z-index:99999; opacity:1;}
.popWrap.cert_focus .wrap {max-width:792px; width:100%; overflow:hidden; height:100%;}
.popWrap.cert_focus .wrap img {width:100%; height:95%; margin-top:5%; object-fit:scale-down;}
.popWrap.cert_focus .btnClose {position:absolute; right:20px; top:50px; display:block; padding:15px 30px; font-size:14px; color:#fff; line-height:1; letter-spacing:3px; font-weight:600; background:#000; border:1px solid #fff; border-radius:5px; z-index:99; transform:translateY(-50%) skew(-0.1deg); cursor:pointer; text-transform:uppercase;}

/** 설비현황 **/
.facility {}
.facility h3 {font-size:24px; font-weight:500; color:#000; padding-left:10px; border-left:5px solid var(--navy); margin-top:60px;}
.facility h4 {font-size:18px; font-weight:500; color:#000; transform:rotate(-0.03deg); margin-top:20px;}
.facility .table-wrap {margin-top:20px;}
.facility .tabWrap ul {grid-template-columns:repeat(2, 1fr); max-width:900px; margin:0 auto;}
.facility .tabWrap ul li {background-color:#fff;}
.facility .tabWrap ul li.on {background-color:var(--navy);}
.facility .tabWrap ul li.on a {color:#fff;}
.facility .tabItem {margin-top:80px;}
.facility .facility01 .img {display:flex; gap:25px; margin-top:50px;}
.facility .facility01 .img>div {width:25%; aspect-ratio:1/.8;}
.facility .facility01 .img img {width:100%; height:100%; object-fit:cover;}
.facility .facility01 .status {display:grid; grid-template-columns:repeat(2, 1fr); gap:60px 120px; margin-top:80px;}
.facility .facility01 .status article {}
.facility .facility01 .status article h4 {font-size:24px; color:#000; font-weight:500; padding-bottom:10px;}
.facility .facility01 .status article h4>span {color:var(--navy); font-weight:700;}
.facility .facility01 .status article dl {position:relative; padding-left:103px;}
.facility .facility01 .status article dl:nth-of-type(odd) {padding-left:52px;}
.facility .facility01 .status article dl dd {color:#000;}
.facility .facility01 .status article dl dt {position:absolute; font-weight:500; transform:rotate(-0.03deg); color:#000; top:0; left:0; padding-left:10px;}
.facility .facility01 .status article dl dt:before {display:block; position:absolute; content:''; top:10px; left:0; width:3px; height:3px; background:#a5a9ca;}
.facility .facility02 {}
.facility .facility02 .img {display:flex; flex-wrap:wrap; gap:40px 30px; margin-top:80px;}
.facility .facility02 .img .item {width:calc(33.3% - 20px); border:1px solid #ededed;}
.facility .facility02 .img .item>div {aspect-ratio:1 / .8; overflow:hidden;}
.facility .facility02 .img p {margin-top:-2px; color:#fff; background:var(--green); text-align:center; padding:10px; transition:.5s ease;}
.facility .facility02 .img img {width:100%; height:100%; object-fit:cover; transition:.5s ease;}
.facility .facility02 .item:hover {box-shadow:20px 20px 20px rgba(0,0,0,.2);}
.facility .facility02 .item:hover img {transform:scale(1.1);}
.facility .facility02 .item:hover p {background:var(--navy);}

/** 주요거래처 **/
.clients {}
.clients h3 {font-size:24px; font-weight:500; color:#000; padding-left:10px; border-left:5px solid var(--navy);}
.clients .client-list+.client-list {margin-top:80px;}
.clients .client-list ul {display:grid; grid-template-columns:repeat(4, 1fr); gap:30px 20px; margin-top:30px;}
.clients .client-list ul li {display:flex; align-items:center; justify-content:center; padding:10px; border:1px solid #ddd; height:100px; transition:.3s ease !important;}
.clients .client-list ul li:hover {border:1px solid var(--navy); box-shadow:10px 10px 10px rgba(0,0,0,.1); transform:scale(1.02);}
.clients .client-list ul li img {max-width:100%; max-height:50px;}


/** 찾아오시는길 **/
.location {display:flex; flex-direction:column;}
.location h3 {font-size:24px; font-weight:500; color:#000; padding-left:10px; border-left:5px solid var(--navy); margin-bottom:30px;}
.location .map-con {display:flex; gap:120px;}
.location .map-con+h3 {margin-top:80px;}
.location .map {width:50%;}
.location .map iframe {width:100%; height:500px; border:1px solid #eee;}
.location .info {width:50%; display:flex; flex-direction:column;}
.location .info h3 {font-family:'NotoSansJP'; font-size:36px; font-weight:700; color:var(--navy); line-height:1.4; padding-right:120px;}
.location .text {}
.location .text p {position:relative; font-size:18px; padding-left:28px; color:#000;}
.location .text p:before {display:block; content:''; position:absolute; top:0; left:0; background:url(../images/intro/i-location.png)no-repeat left center; width:18px; height:23px;}
.location .table-wrap {margin-top:30px;}
.location .table-wrap h4 {color:#000; font-size:18px; font-weight:500; margin-bottom:20px; padding:15px 0 15px 45px;}
.location .table-wrap .bus {background:url(../images/intro/i-bus.png)no-repeat left center;}
.location .table-wrap .subway {background:url(../images/intro/i-subway.png)no-repeat left center;}

/***** 사업영역 *****/
.field {word-break:break-all;}
.field h3 {font-size:24px; color:#000; font-weight:500; padding-bottom:20px;}
.field h3>span {color:var(--navy); font-weight:700;}
.field .field-con {}
.field .field-con~.field-con {margin-top:70px;}
.field .field-con>div {display:flex; gap:60px;}
.field .field-con>div~div {margin-top:30px;}
.field .field-con .txtBox {width:55%;}
.field .field-con .txtBox p {font-size:18px; color:#000; font-weight:500; transform:rotate(-0.03deg);}
.field .field-con .txtBox dl {border:1px solid #ddd; padding:30px 20px; margin-top:20px; height:calc(100% - 50px);}
.field .field-con .txtBox dl dt {color:#384cc9; font-weight:500; transform:rotate(-0.03deg);}
.field .field-con .txtBox dl dd {color:#000; margin-top:10px;}
.field .field-con .imgBox {display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; width:45%;}
.field .field-con .imgBox>div {aspect-ratio:1/1;}
.field .field-con .imgBox>div img {width:100%; height:100%; object-fit:cover;}

/***** 사업실적 *****/
.performance {word-break:break-all;}
.performance .table-wrap.typeB table tbody tr th {transform:none; border-right:1px solid #ddd;}
.performance .table-wrap.typeB table tbody tr th p {transform:rotate(0.03deg);}
.performance .table-wrap.typeB table tbody tr th:last-of-type {border-right:0;}
.performance .table-wrap.typeB table tbody tr td {border-right:1px solid #eee;}
.performance .table-wrap.typeB table tbody tr td:last-of-type {border-right:0;}
.performance .table-wrap.typeB table tbody tr td img {max-width:100%;}
.performance h3 {font-size:24px; font-weight:500; color:#000; padding-left:10px; border-left:5px solid var(--navy); margin-top:60px;}
.performance h4 {font-size:18px; font-weight:500; color:#000; transform:rotate(-0.03deg); margin-top:20px; margin-bottom:20px;}


/***** 제품정보 *****/
.pro-tit {text-align:center; background:linear-gradient(90deg, rgba(13,37,140,1) 0%, rgba(0,120,83,1) 100%); color:#fff; padding:25px 10px; box-shadow:3px 3px 5px rgba(0,0,0,.15);}
.pro-tit h3 {font-size:30px; font-weight:700; justify-content:center;}
.pro-tit p {margin-top:12px;}
.pro {word-break:break-all;}
.pro h4 {border-left:5px solid var(--navy); font-size:24px; font-weight:500; color:#000; padding-left:10px; margin-top:60px;}
.pro ul {margin-top:15px;}
.pro ul li {position:relative; color:#000; padding-left:10px;}
.pro ul li~li {margin-top:5px;}
.pro ul li:before {position:absolute; content:''; display:block; background:#a5a9ca; width:3px; height:3px; top:10px; left:0;}
.pro ul li b {font-weight:500; display:inline-block; transform:rotate(-0.03deg);}
.pro ul li span {font-weight:500; display:inline-block; color:var(--navy); transform:rotate(-0.03deg);}

/** dcpol **/
.dcpol .table-wrap {margin-top:20px;}
.dcpol .cmb-fmb {display:flex; justify-content:space-between; align-items:center; gap:50px;} 
.dcpol .cmb-fmb img {max-height:230px; max-width:100%;}
.dcpol .package {display:flex; justify-content:space-between; margin-top:20px;} 
.dcpol .package article {display:flex; flex-direction:column; gap:25px;} 
.dcpol .package article dl {} 
.dcpol .package article dl dt {display:inline-block; padding:3px 15px; border-radius:3rem; background:#007753; font-weight:500; color:#fff; margin-bottom:5px;} 
.dcpol .package article dl dd {position:relative; color:#000; padding-left:10px; margin-top:5px;} 
.dcpol .package article dl dd:before {position:absolute; content:''; display:block; background:#a5a9ca; width:3px; height:3px; top:10px; left:0;}
.dcpol .package article dl dd b {font-weight:500; display:inline-block; transform:rotate(-0.03deg);} 
.dcpol .package .imgs {display:flex; gap:25px;}
.dcpol .package .img p {text-align:center; color:#000; margin-top:5px;}
.dcpol .package .img img {max-width:100%; object-fit:cover;}

/** dcchem **/
.dcchem {}
.dcchem .pro-con {display:flex; gap:35px; margin-top:50px;}
.dcchem .pro-con article {width:33.33%;}
.dcchem .pro-con article .img {border:1px solid #ddd;}
.dcchem .pro-con article .img img {width:100%; height:100%;}
.dcchem .pro-con article h4 {margin-top:50px;}
.dcchem .pro-con.imgBox {gap:2vw;}
.dcchem .pro-con.imgBox>div {width:20%;}
.dcchem .pro-con.imgBox>div img {width:100%; height:100%; object-fit:cover;}

/** 나노사이트 **/
.nanosite {}
.nanosite .pro-con {display:flex; justify-content:space-between; margin-top:60px; gap:8%;}
.nanosite .pro-con article {width:50%;}
.nanosite .pro-con article>h4:first-child {margin-top:0;}
.nanosite .pro-con .img {max-width:100%;}
.nanosite .pro-con .img img {width:100%;}
.nanosite .pro-con .mcp-txt {font-size:18px; font-weight:500; color:#000; transform:rotate(0.03deg); margin-top:20px; position:relative; padding-left:13px;}
.nanosite .pro-con .mcp-txt span {font-weight:700; color:var(--navy);}
.nanosite .pro-con .mcp-txt:before {display:block; content:''; position:absolute; width:7px; height:2px; background:#000; left:0; top:14px;}
.nanosite .pro-con .spec {display:flex; gap:10%;}
.nanosite .pro-con .spec .txt {width:50%;}
.nanosite .pro-con .spec .img {width:50%; margin-top:60px;}
.nanosite .pro-con .table-wrap:nth-of-type(1) {margin-top:20px;}
.nanosite .pro-con .table-wrap:nth-of-type(2) {margin-top:60px;}
.nanosite .components {}
.nanosite .components .cont {display:flex; gap:8%; justify-content:space-between;}
.nanosite .components .cont>div {width:50%;}
.nanosite .components .cont>div p {font-size:18px; font-weight:500; color:#000; margin-top:20px; position:relative; padding-left:13px;}
.nanosite .components .cont>div p:before {display:block; content:''; position:absolute; width:7px; height:2px; background:#000; left:0; top:14px;}
.nanosite .components .cont>div .img {margin-top:10px;}
.nanosite .components .cont>div .img img {width:100%;}

/** cnf **/
.cnf {}
.cnf h4 {margin-top:0;}
.cnf .pro-tit {margin-top:70px; padding:30px 10px;}
.cnf .pro-tit:first-of-type {margin-top:0;}
.cnf .pro-con {margin-top:50px;}
.cnf .pro-con.flex {display:flex; gap:50px;}
.cnf .pro-con.flex>div {width:50%;}
.cnf .pro-con p {color:#000;}
.cnf .pro-con .tit {font-size:20px; color:#000; position:relative; padding-left:10px;}
.cnf .pro-con .tit:before {display:block; position:absolute; content:''; width:3px; height:3px; background:var(--navy); left:0; top:13px;}
.cnf .pro-con img {width:100%; margin-top:30px;}
.cnf .pro-con .imgs {display:grid; grid-template-columns:repeat(2, 1fr); gap:50px;}
.cnf .pro-con article {display:flex; gap:50px; margin-top:60px;}
.cnf .pro-con article>div {width:50%;}
.cnf .pro-con .dispersion {margin-top:10px;}
.cnf .pro-con .bending .table-wrap.typeA th {transform:none;}
.cnf .pro-con .bending .table-wrap.typeA th p {transform:rotate(-0.03deg);}
.cnf .pro-con .bending .table-wrap.typeA td {border-right:1px solid #e9e9e9;}
.cnf .pro-con .bending .table-wrap.typeA td:last-child {border-right:0;}
.cnf .pro-con .table-wrap+p {margin-top:10px;}
.cnf .pro-con .result .tit {margin-bottom:20px;}

/***** 지속가능경영 *****/
.management {word-break:break-all;}
.txt_big {display:flex; justify-content:center; margin-top:70px;}
.txt_big p {display:inline-block; text-align:center; font-size:28px; color:#000; position:relative; padding:0 50px;}
.txt_big p:before, .txt_big p:after {display:block; content:''; position:absolute; width:54px; height:32px; top:0;}
.txt_big p:before {left:0; background:url(../images/intro/quot-left.png) no-repeat left center;}
.txt_big p:after {right:0; background:url(../images/intro/quot-right.png) no-repeat right center;}

.ethics h3 {font-size:24px; font-weight:500; color:#000; padding-left:10px; border-left:5px solid var(--navy);}
.ethics h3>span {font-size:18px; font-weight:400; color:#666; padding-left:15px;}
.ethics .ethics-con {}
.ethics .ethics-con .tit {display:flex; flex-direction:column; align-items:center;}
.ethics .ethics-con .tit span {width:82px; height:82px; background:linear-gradient(0deg, rgba(13,37,140,1) 0%, rgba(68,91,232,1) 100%); display:flex; align-items:center; justify-content:center;}
.ethics .ethics-con .tit span img {}
.ethics .ethics-con .tit p {font-size:24px; font-weight:500; color:#000; margin-top:10px;}
.ethics .ethics-con .tit+p {color:#000; margin:20px 0;}
.ethics .ethics-con ul {border-top:1px solid #333; border-bottom:1px solid #333;}
.ethics .ethics-con ul li {color:#000; padding:15px 20px;}
.ethics .ethics-con ul li~li {border-top:1px solid #eee;}
.ethics .ethics-con ul li span {display:inline-block; font-family:'NotoSansJP'; font-weight:700; color:#384cc9; padding-right:10px;}
.ethics .policy {margin-top:80px;}
.ethics .policy>p {font-size:18px; color:#000; margin-top:30px;}
.ethics .policy .policy-con {margin-top:30px;}
.ethics .policy .policy-con ul {display:grid; grid-template-columns:repeat(3, 1fr); gap:40px 30px;}
.ethics .policy .policy-con ul li {border:1px solid #ddd;}
.ethics .policy .policy-con ul li dl {padding:30px; background-color:#f2f4f8; border-bottom:1px solid #ddd; text-align:center;transition:.5s ease;}
.ethics .policy .policy-con ul li:hover {border-color:var(--navy); cursor:default;}
.ethics .policy .policy-con ul li:hover dl {background:var(--navy);}
.ethics .policy .policy-con ul li:hover dl * {color:#fff !important;}
.ethics .policy .policy-con ul li dl dt:first-of-type {font-size:20px; font-weight:700; color:var(--navy);}
.ethics .policy .policy-con ul li dl dt:last-of-type {font-size:20px; font-weight:500; color:#000; margin-top:5px; justify-content: center;}
.ethics .policy .policy-con ul li dl dd {}
.ethics .policy .policy-con .txt {padding:30px 20px 40px; text-align:center;}
.ethics .policy .policy-con .txt span {display:inline-block; font-size:18px; font-weight:500; color:var(--navy); transform:rotate(-0.03deg);}
.ethics .policy .policy-con .txt p {margin-top:5px;}
.ethics .policy .policy-con .txt p+span {margin-top:30px;}


/** esg경영 **/
.esg {}
.esg h3 {font-size:24px; font-weight:500; color:#000; padding-left:10px; border-left:5px solid var(--navy);}
.esg h3>span {font-size:18px; font-weight:400; color:#666; padding-left:15px;}
.esg .policy>p {font-size:18px; color:#000; margin-top:30px;}
.esg .policy .policy-con {margin-top:30px;}
.esg .policy .policy-con>div {position:relative;}
.esg .policy .policy-con>div+div {margin-top:50px;}
.esg .policy .policy-con>div .tit {position:absolute; left:0; top:50%; transform:translateY(-50%);}
.esg .policy .policy-con>div .tit img {max-width:100%;}
.esg .policy .policy-con>div .txt {border:1px solid #ddd; padding:40px 30px 50px 170px; width:calc(100% - 137px); margin-left:137px;}
.esg .policy .policy-con>div .txt ul {}
.esg .policy .policy-con>div .txt ul li {position:relative; display:grid; grid-template-columns:repeat(1, 1fr); gap:20px;}
.esg .policy .policy-con>div .txt ul li+li {margin-top:30px;}
.esg .policy .policy-con>div .txt ul li p {font-size:16px; font-weight:500; color:#fff; border-radius:3rem; padding:7px 5px; height:40px; text-align:center; transform:rotate(-0.03deg);}
.esg .policy .policy-con>div:first-of-type .txt ul li p {background-color:#51be62;}
.esg .policy .policy-con>div:nth-of-type(2) .txt ul li p {background-color:#417ce5;}
.esg .policy .policy-con>div:nth-of-type(3) .txt ul li p {background-color:#6767e5;}
.esg .policy .policy-con>div .txt ul li dl {display:flex; gap:20px;}
.esg .policy .policy-con>div .txt ul li dl+dl {margin-top:15px;}
.esg .policy .policy-con>div .txt ul li dl dt {display:inline-block; font-weight:500; color:#000; padding:5px 0; transform:rotate(-0.03deg);}
.esg .policy .policy-con>div:first-of-type .txt ul li dl dt {border-color:#51be62; color:#51be62;}
.esg .policy .policy-con>div:nth-of-type(2) .txt ul li dl dt {border-color:#417ce5; color:#417ce5;}
.esg .policy .policy-con>div:nth-of-type(3) .txt ul li dl dt {border-color:#6767e5; color:#6767e5;}
.esg .policy .policy-con>div .txt ul li dl dd {color:#000; padding:5px 0;}
.esg .declaration {padding:70px; margin-top:80px; border:1px solid #dce7f4; background-image:url(../images/management/esg_bg01.png), url(../images/management/esg_bg02.png); background-position:-10% -60% ,116% 134%; background-repeat:no-repeat;}
.esg .declaration .tit {display:flex; flex-direction:column; align-items:center;}
.esg .declaration .tit>span {width:82px; height:82px; background:linear-gradient(0deg, rgba(0,133,141,1) 0%, rgba(81,190,98,1) 100%); display:flex; align-items:center; justify-content:center;}
.esg .declaration .tit p {font-size:24px; font-weight:500; color:#000; margin-top:10px;}
.esg .declaration .tit+p {color:#000; margin:30px 0 0;}
.esg .declaration>p {font-size:18px;}
.esg .declaration>p b {font-weight:500; transform:rotate(-0.03deg);}
.esg .declaration article {margin-top:45px;}
.esg .declaration article dl~dl {margin-top:30px;}
.esg .declaration article dl dt {font-size:18px; font-weight:500; color:#007452; transform:rotate(-0.03deg); margin-bottom:15px;}
.esg .declaration article dl dd {padding-left:10px; position:relative; color:#000; margin-top:10px;}
.esg .declaration article dl dd:before {position:absolute; top:10px; left:0; width:3px; height:3px; background:#333; content:''; display:block;}
.esg .ceo_name {margin-top:30px; font-size:18px; font-weight:500; color:#000; transform:rotate(-0.03deg); text-align:center;}
.esg .ceo_name .big {font-size:24px; font-weight:700; padding-left:15px; font-family:'NotoSansJP';}
.esg .esg-cert {display:flex; justify-content:space-between; gap:10%; margin-top:80px;}
.esg .esg-cert img {max-width:100%;}

/** 품질경영 **/
.quality h3 {font-size:24px; font-weight:500; color:#000; padding-left:10px; border-left:5px solid var(--navy);}
.quality h3>span {font-size:18px; font-weight:400; color:#666; padding-left:15px;}
.quality .policy {}
.quality .policy>p {font-size:18px; color:#000; margin-top:30px;}
.quality .policy .policy-con {margin-top:30px;}
.quality .policy .policy-con ul {display:grid; grid-template-columns:repeat(3, 1fr); gap:40px 30px;}
.quality .policy .policy-con ul li {border:1px solid #ddd; transition:.3s ease;}
.quality .policy .policy-con ul li:hover {border-color:var(--navy);}
.quality .policy .policy-con ul li dl {padding:30px; background-color:#f2f4f8; border-bottom:1px solid #ddd; text-align:center;transition:.3s ease;}
.quality .policy .policy-con ul li:hover dl {background:var(--navy);}
.quality .policy .policy-con ul li:hover dl * {color:#fff;}
.quality .policy .policy-con ul li dl dt:first-of-type {font-size:20px; font-weight:700; color:var(--navy);}
.quality .policy .policy-con ul li:hover dl dt:first-of-type {color:#fff;}
.quality .policy .policy-con ul li dl dt:last-of-type {font-size:20px; font-weight:500; color:#000; margin-top:5px; justify-content:center;}
.quality .policy .policy-con ul li dl dd {}
.quality .policy .policy-con .txt {padding:30px 20px 40px; text-align:center;}
.quality .policy .policy-con .txt span {display:inline-block; font-size:18px; font-weight:500; color:var(--navy); transform:rotate(-0.03deg);}
.quality .policy .policy-con .txt p {margin-top:5px;}
.quality .policy .policy-con .txt p+span {margin-top:30px;}
.quality .slogan {margin-top:80px;}
.quality .slogan .tit {text-align:center; padding:65px 0; background:url(../images/management/quality_bg.webp)no-repeat center/cover;}
.quality .slogan .tit h4 {font-size:30px; font-weight:400; color:#fff; justify-content:center;}
.quality .slogan .tit h4 b {font-weight:700;}
.quality .slogan .img {width:100%; margin-top:50px;}
.quality .slogan .img img {max-width:100%;}
.quality .quality-cert {margin-top:80px; display:flex; justify-content:space-between; gap:10%;}
.quality .quality-cert .img img {max-width:100%;}

/** 안전경영 **/
.safety {display:flex; justify-content:space-between; gap:10%; word-break:break-all;}
.safety h3 {font-size:24px; font-weight:500; color:#000; padding-left:10px; border-left:5px solid var(--navy);}
.safety .safety-con {width:45%; padding:50px; border:1px solid #dce7f4;}
.safety .safety-con .policy {}
.safety .safety-con .policy ul {margin-top:30px;}
.safety .safety-con .policy ul li {font-size:17px; color:#000; padding-left:25px; background:url(../images/management/i-check.png)no-repeat left center;}
.safety .safety-con .policy ul li~li {padding-top:5px;}
.safety .safety-con .goal {margin-top:50px;}
.safety .safety-con .goal dl {margin-top:30px;}
.safety .safety-con .goal dl dt {font-size:20px; font-weight:500; color:var(--navy); line-height:1.3;}
.safety .safety-con .goal dl dd {font-size:17px; color:#000; margin-top:10px;}
.safety .safety-con .goal dl dd p~p {padding-top:5px;}
.safety .safety-con .goal dl dd span {display:inline-block; font-size:10px; font-weight:500; color:#000; background:#e8ecff; width:18px; height:18px; border-radius:50%; text-align:center; margin-right:7px;}
.safety .safety-con .goal .name {display:flex; justify-content:center; gap:10%; margin-top:60px;}
.safety .safety-con .goal .name span {font-family:'NotoSansJP'; display:inline-block; font-size:20px; font-weight:700; color:#000; transform:rotate(0.03deg);}
.safety .safety-con .goal .name span b {display:inline-block;}
.safety .safety-cert {width:45%;}
.safety .safety-cert .img {}
.safety .safety-cert .img img {max-width:100%; border:1px solid #ddd;}


/***** 채용정보 *****/
.recruitment {word-break:break-all;}

/** 인재육성 **/
.talent {}
.talent .talent-con~.talent-con {margin-top:80px;}
.talent .talent-con h3 {font-size:24px; font-weight:500; color:#000; padding-left:10px; border-left:5px solid var(--navy);}
.talent .talent-con h4 {font-size:18px; font-weight:500; transform:rotate(-0.03deg); color:#000; margin-top:30px;}
.talent .talent-con p {font-size:18px; color:#000; margin-top:20px;}
.talent .talent-con p span.c_navy {display:inline-block; font-weight:500; transform:rotate(-0.03deg);}
.talent .talent-con .img {text-align:center; margin-top:50px;}
.talent .talent-con .img img {max-width:100%;}
.talent .talent-con .edu {display:grid; grid-template-columns:repeat(4, 1fr); gap:2%; margin-top:30px;}
.talent .talent-con .edu li {border:1px solid #ddd; padding:40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px;}
.talent .talent-con .edu li img {display:inline-block;}
.talent .talent-con .edu li span {font-size:18px; color:#000; text-align:center;}


/** 복리후생 **/
.benefits {}
.benefits>p {font-size:18px; color:#000;}
.benefits .benefit-list {display:grid; grid-template-columns:repeat(5, 1fr); gap:35px; margin-top:50px;}
.benefits .benefit-list li {border:1px solid #ddd; padding:30px 20px; display:flex; flex-direction:column; align-items:center; transition:.3s ease;}
.benefits .benefit-list li:hover {border:1px solid var(--navy); box-shadow:10px 10px 10px rgba(0,0,0,.1); transform:scale(1.05);}
.benefits .benefit-list li .img {width:100px; height:100px; background:#f7f7f7; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.benefits .benefit-list li .img img {max-width:100%;}
.benefits .benefit-list li p {font-size:18px; color:#384cc9; margin-top:15px; text-align:center;}


/** 채용절차 **/
.recruit {}
.recruit .slogan {display:flex; justify-content:center;}
.recruit .slogan p {text-align:center; font-size:30px; color:#000; position:relative; padding:0 50px;}
.recruit .slogan p:before,.recruit .slogan p:after {display:block; content:''; position:absolute; width:54px; height:32px; top:0;}
.recruit .slogan p:before {left:0; background:url(../images/intro/quot-left.png)no-repeat left center;}
.recruit .slogan p:after {right:0; background:url(../images/intro/quot-right.png)no-repeat right center;}
.recruit .recruit-con {display:flex; gap:8%; margin-top:70px;}
.recruit .recruit-con .bg {width:46%; height:300px; padding:50px; background:url(../images/recruitment/recruit_bg1.jpg)no-repeat center/cover;}
.recruit .recruit-con .bg p {font-size:30px; font-weight:500; color:#fff; text-shadow:0 0 10px rgba(0, 0, 0, .5);}
.recruit .recruit-con .list {width:46%;}
.recruit .recruit-con .list li {display:grid; grid-template-columns:65px auto; align-items:center; padding:10px 0;}
.recruit .recruit-con .list li img {display:inline-block; height:40px;}
.recruit .recruit-con .list li span {font-size:20px; color:#333; font-weight:500; transform:rotate(0.03deg);}


/** 개인정보처리방침 **/
.privacy {}
.privacy .otherTit {font-size:18px; font-weight:500; transform:rotate(-0.03deg); color:#000;}
.privacy pre {background-color:#f9f9f9; border:1px solid #e5e5e5; margin-top:20px; padding: 30px; font-family:inherit; font-size:15px; line-height:1.8;}

/***** 고객센터 *****/
/** 온라인문의 **/
.inquiry {}
.inquiry .list_wrap {margin-top:20px;}
.inquiry .list_wrap .list {border-bottom:1px solid #ddd;}
.inquiry .list_wrap .list * {font-size:16px;}
.inquiry .list_wrap .list .tit_wrap {display:flex; border-top:1px solid #ccc; border-bottom: 1px solid #ccc; background-color:#f9f9f9; color:#000; padding:15px 0;}
.inquiry .list_wrap .list .tit_wrap p {text-align:center;}
.inquiry .list_wrap .list .tit_wrap .num {width:7%; min-width:90px;}
.inquiry .list_wrap .list .tit_wrap .title {width:66%; min-width:300px;}
.inquiry .list_wrap .list .tit_wrap .writer {width:10%; min-width:120px;}
.inquiry .list_wrap .list .tit_wrap .date {width:10%; min-width:120px;}
.inquiry .list_wrap .list .tit_wrap .answer {width:7%; min-width:90px;}
.inquiry .list_wrap .list ul li {display:flex; padding:15px 0; text-align:center; border-bottom:1px solid #e6e7ef;}
.inquiry .list_wrap .list ul li:last-child {border-bottom:0;}
.inquiry .list_wrap .list ul .num {width:7%; min-width:90px;}
.inquiry .list_wrap .list ul .title {width:66%; color:#000; font-weight:500; text-align:left;padding:0 15px; min-width:300px; overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:break-all;transition:all 0.3s;}
.inquiry .list_wrap .list ul .title img {width:15px; height:15px; object-fit:contain; transform:translateY(-2px); margin-right:7px;}
.inquiry .list_wrap .list ul .writer {width:10%; color:#666; font-weight:500; min-width:120px;}
.inquiry .list_wrap .list ul .date {width:10%; min-width:120px;}
.inquiry .list_wrap .list ul .answer {width:7%; min-width:90px; position:relative;}
.inquiry .list_wrap .list ul .answer .wait {display:inline-block; position:absolute; border: 1px solid #ccc; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 10px; font-size: 15px;}
.inquiry .list_wrap .list ul .answer .complete {display:inline-block; color:#fff; font-weight:500; position:absolute; background:var(--blue); left:50%; top:50%; transform:translate(-50%, -50%); padding:5px 10px; font-size:15px;}
.inquiry .list_wrap .btn_wrap {position:relative;}
.inquiry .list_wrap .btn_wrap a {display:inline-block; padding:8px 30px; border:1px solid #ccc;margin-top:30px; z-index:99; position:absolute; right:0; color:#000; font-weight:500;}
.inquiry .list_wrap .btn_wrap a:hover {background:#222; color:#fff; border:1px solid #222;}
.popup_lock {position:fixed; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; padding:2vw; background:rgba(0, 0, 0, .7); opacity:0; z-index:-1;}

/* 비밀게시판 팝업 */
.popup_lock.on {z-index:99999; opacity:1;}
.popup_lock .wrap {max-width:300px; width:100%; overflow:visible; height:auto; position:relative; background:#fff; padding:50px; text-align:center;}
.popup_lock .wrap h3 {font-size:20px; padding-bottom:0; margin-bottom:30px; color:#000; font-weight:500;}
.popup_lock .wrap input[type=password] {padding:0 10px; height:45px; line-height:43px; border:1px solid #ececec;}
.popup_lock .wrap .btns {margin-top:15px; display:flex; gap:10px;}
.popup_lock .wrap .btns button.into {background:#000; color:#fff; border:0;}
.popup_lock .wrap .btns button {background:#fff; text-align:center; border:1px solid #ddd; width:50%; padding:7px 10px;}

/** 온라인문의 뷰페이지 **/
.inquiry .view {border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.inquiry .view .tit {color:#000;}
.inquiry .view .tit .info {display:grid; grid-template-columns:repeat(2,1fr); border-bottom: 1px solid #ccc;} 
.inquiry .view .tit .info li {display:flex; align-items:center; border-bottom:1px solid #ccc;}
.inquiry .view .tit .info li.attach {grid-column:1/3;}
.inquiry .view .tit .info li.attach span {display:flex; gap:5px;}
.inquiry .view .tit .info li.attach span .btn_upload img {width:20px; height:19px; object-fit:contain; transform: translateY(-4px);}
.inquiry .view .tit .info li p {background:#ececec; padding:15px; width:120px; text-align:center; color:#000;}
.inquiry .view .tit .info li span {padding:15px;}
.inquiry .view .tit h3 {display:flex; align-items:center; border-top:1px solid #ccc; border-bottom:1px solid #ccc; font-weight:400; font-size:16px; line-height:1.6;}
.inquiry .view .tit h3 p {background:#ececec; padding:15px; width:120px; text-align:center; color:#000;}
.inquiry .view .tit h3 span {padding:15px;}
.inquiry .view .cont {padding:100px 0; color:#000; font-weight:400; /*white-space:pre-line;*/}
.inquiry .view .cont img {width:100%; }

.inquiry .view_answer {display:flex; padding:30px; background:#f6f6f6; border:1px solid #ececec; margin-top:50px;}
.inquiry .view_answer p {color:#000; font-size:18px; width:75px; white-space: nowrap;}
.inquiry .view_answer span {margin-top:3px; width:calc(100% - 80px); font-weight:400;}
.inquiry .viewBtn_wrap {width:100%; text-align:center; display: flex; justify-content: center; gap: 5px;}
.inquiry .viewBtn_wrap a {display:inline-block; padding:13px 50px; width:300px; background: #fff; transition:all 0.3s; text-align:center; color:#000; font-size:18px; margin-top:60px; border:1px solid #222;}
.inquiry .viewBtn_wrap button {display:inline-block; padding:13px 50px; width:300px; background:#fff; transition:all 0.3s; text-align:center; color:#000; font-size:18px; margin-top:60px; border:1px solid #222;}
.inquiry .viewBtn_wrap a:hover {background:#222; color:#fff;}
.inquiry .viewBtn_wrap button:hover {background:#222; color:#fff;}

/** 온라인문의 글쓰기페이지 **/
.inquiry .write {padding:0px 0; border-top:2px solid #ccc; border-bottom:2px solid #ccc;}
.inquiry .write > div {display:grid; grid-template-columns:180px auto; padding:20px 30px 20px; background:#f9f9f9;}
.inquiry .write > div+div {border-top:1px solid var(--border1);}
.inquiry .write > div p.tit {padding-top:7px; padding-left:15px; color:#000; position:relative; font-size:16px;}
.inquiry .write > div p.tit:before {content:""; display:block; position:absolute; width:4px; height:4px; background:var(--navy); left:0; top:17px;}
.inquiry .write > div input {height:40px; line-height:38px;}
.inquiry .write div.inputWrap textarea {width:100%; height:300px; resize:none; border:1px solid #ddd; padding:20px; font-size:16px; font-weight: 300;}
.inquiry .write div.attachWrap .file_attach_box .btn_upload { display: inline-block; text-align:center; padding:8px 20px; font-size: 14px; color: #fff; background: #000; border-radius:2rem; cursor:pointer; margin-right:5px;}
.inquiry .write .inputWrap.title input {width:50%;}
.inquiry .write .inputWrap.name input {max-width:400px}
.inquiry .write .inputWrap.email input {min-width:300px;}
.inquiry .write .inputWrap.phone input {max-width:150px;}
.inquiry .write .file_attach_box > div+div {margin-top:5px;}
.inquiry .write input[type=file]::file-selector-button {display:none;}
.inquiry .write .info {color:var(--navy); margin-top:10px;}
.inquiry .write .inputWrap.autoCodeWrap input[type=text] {max-width:200px; width:50%; margin-top:5px;}
.inquiry .write .inputWrap.autoCodeWrap > div {padding-top:4px;} 
.inquiry .agreeWrap {margin-top:50px;}
.inquiry .agreeWrap p.tit {font-size:18px; color:#000; font-weight:500; transform:rotate(0.03deg);}
.inquiry .agreeWrap > div {}
.inquiry .agreeWrap > div .info_box {background:#fff; border:1px solid #eee; padding:30px 30px; background:#f9f9f9; margin-top:20px;}
.inquiry .agreeWrap > div .info_box dl {height:150px; overflow-y:auto; font-weight:400; padding-right:10px; color:#222;}
.inquiry .agreeWrap > div .info_box dl dt {font-weight:500; transform:rotate(0.03deg);}
.inquiry .agreeWrap > div .info_box dl dt+dd {margin-top:5px;}
.inquiry .agreeWrap > div .info_box dl dd+dt {margin-top:20px;}
.inquiry .agreeWrap > div .ckwrap {margin-top:20px; float:right; font-weight:400; color:#000;}
.inquiry .agreeWrap > div .ckwrap input[type='checkbox'] {position:absolute; left: -999999999999px;}
.inquiry .agreeWrap > div .ckwrap input[type='checkbox']+label { padding:4px 40px; padding-left:25px; background:url(../images/common/check-mark.svg) left 3px no-repeat; cursor:pointer;}
.inquiry .agreeWrap > div .ckwrap input[type='checkbox']:checked+label {background-image:url(../images/common/check-mark-on.svg);}
.inquiry .agreeWrap > div .info_box dl::-webkit-scrollbar {width:8px;}
.inquiry .agreeWrap > div .info_box dl::-webkit-scrollbar-track {background-color:none;}
.inquiry .agreeWrap > div .info_box dl::-webkit-scrollbar-thumb {background-color:#666; border-radius:5px;}

/* 카탈로그 */
.catalog {}
.catalog>div {overflow:hidden;}
.catalog .subTit {position:relative; text-align:center; font-family:'NotoSansJP';}
.catalog .subTit h4 {font-size:30px; font-weight:500; color:#000; transform:rotate(-0.03deg); line-height:1.5;}
.catalog .subTit p {font-size:30px; font-weight:700; color:#000;}
.catalog .list {position:relative; display:flex; gap:5%; margin-top:50px;}
.catalog .list li {display:flex; gap:5px; flex-direction:column; align-items:center; width:auto; background-color:#fff;}
.catalog .list li .cover {position:relative; width:350px; border:1px solid #ddd; transition:0.4s;}
.catalog .list li .cover:hover {box-shadow:3px 10px 15px 5px rgba(0,0,0,.15);}
.catalog .list li .cover img {width:100%; height:100%; object-fit:cover;}
.catalog .list li .cover a {position:absolute; width:130px; height:130px; display:inline-block; top:50%; transform:translateY(-50%); border-radius:50%; padding:70px 0 0; font-size:15px; color:#fff; background-size:45px 40px; background-repeat:no-repeat; background-position:center top 25px; text-align:center; opacity:0; transition:0.4s ease;}
.catalog .list li .cover .view_btn {background-image:url(../images/common/i-view.svg);  background-color:#333; left:0;}
.catalog .list li .cover:hover .view_btn {left:30px; opacity:1;}
.catalog .list li .cover .dl_btn {background-image:url(../images/common/i-download.svg); background-color:var(--navy); right:0;}
.catalog .list li .cover:hover .dl_btn {right:30px; opacity:1;}
.catalog .list li .txt {text-align:center; padding-top:10px;}
.catalog .list li .txt p {font-size:20px; font-weight:500; color:#444; transform:rotate(0.03deg);}
.catalog .list li .txt .btn {display:inline-block; border:1px solid var(--navy); padding:5px 20px; background:#fff; margin-top:10px; transition:all 0.3s;}
.catalog .list li .txt .btn:hover {background:var(--navy); color:#fff;}


/* ********************************* 테블릿 : ~ 1024 ********************************* */
@media screen and (max-width:1024px), print{
	/* ******************** 공용 ******************** */
	.tabWrap ul li a {padding:10px; font-size:18px;}
	
	/** CEO인사말 **/
	.greeting {gap:6%;}
	.greeting .text .tit {font-size:24px;}
	.greeting .text p+p {margin-top:20px;}
	.greeting .text .ceo_name {margin-top:20px;}
	
	/** 회사개요 **/
	.introduce .vision .tit {font-size:24px; height:auto; padding:70px 20px;}
	.introduce .vision .vision-in article>div:nth-of-type(1) {padding:50px 20px; width:200px; height:200px;}
	.introduce .vision .vision-in article span {line-height:45px;}
	.introduce .vision .vision-in article span img {width:45px; height:45px; object-fit:contain;}
	.introduce .vision .vision-in article h4 {font-size:20px; padding-top:25px;}
	.introduce .vision .vision-in article p {font-size:18px;}
	.introduce .vision .vision-in article ul:before {width:70px;}
	.introduce .vision .vision-in article ul li {font-size:16px;}
	.introduce .slogan p {font-size:26px; padding:0 45px;}
	.introduce .slogan p:before, .introduce .slogan p:after {background-size:contain; height:25px;}
	
	/* 연혁 */
	.history .tabItem {margin-top:60px;}
	.history .tabItem article dl dd strong {font-size:24px;}
	
	/** 인증현황 **/
	.certificate .controls button {font-size:18px; padding:10px;}
	.certificate .list {margin-top:60px;}
	.certificate .list ul {grid-template-columns:repeat(3, 1fr); gap:40px 30px;}
	
	/** 설비현황 **/
	.facility .facility01 .img {display:grid; grid-template-columns:repeat(2, 1fr); gap:3%;}
	.facility .facility01 .img>div {width:100%;}
	.facility .facility02 .status {grid-template-columns:repeat(1, 1fr); gap:40px; margin-top:60px;}
	.facility .facility02 .status article h4 {font-size:20px;}
	.facility .facility02 .img {margin-top:60px;}
	.facility .facility02 .img .item {width:calc(50% - 15px);}

	/** 찾아오시는길 **/
	.location .map-con {display:flex; flex-direction:column; gap:30px;}
	.location .map {width:100%; height:300px;}
	.location .map iframe {width:100%; height:100%;}
	.location .table-wrap {margin-top:20px;}
	.location .info {width:100%;}
	
	/***** 사업영역 *****/
	.field .field-con>div {flex-direction:column; gap:30px;}
	.field .field-con .txtBox {width:100%;}
	.field .field-con .txtBox dl {height:auto;}
	.field .field-con .imgBox {gap:3vw; width:100%;}
	.field .field-con>div~div {margin-top:50px;}
	
	/* 제품정보 */
	.pro-tit h3 {font-size:24px; line-height:1.3;}
	.dcpol .package {gap:30px;}
	
	.cnf .pro-con.flex {flex-direction:column;}
	.cnf .pro-con.flex>div {width:100%;}
	.cnf .pro-con .imgs {grid-template-columns:repeat(1, 1fr); gap:20px;}
	.cnf .pro-con img {margin-top:10px;}
	.cnf .pro-con article {flex-direction:column; margin-top:50px; gap:40px;}
	.cnf .pro-con article>div {width:100%;}
	
	.nanosite .pro-con article {width:100%;}
	
	
	/***** 지속가능경영 *****/
	.txt_big p {font-size:24px; padding:0 45px;}
	.txt_big p:before,.txt_big p:after {background-size:contain;}
	
	.ethics h3>span {font-size:16px;}
	.ethics .policy>p {font-size:16px; margin-top:20px;}
	.ethics .policy .policy-con {margin-top:20px;}
	.ethics .policy .policy-con ul {grid-template-columns:repeat(2, 1fr); gap:30px 20px;}
	.ethics .policy .policy-con ul li dl dt:first-of-type {font-size:18px;}
	.ethics .policy .policy-con ul li dl dt:last-of-type {font-size:18px;}
	.ethics .policy .policy-con .txt span {font-size:17px;}
	
	/** esg경영 **/
	.esg .policy .policy-con {margin-top:140px;}
	.esg .policy .policy-con>div+div {margin-top:150px;}
	.esg .policy .policy-con>div .tit {left:50%; top:0; transform:translate(-50%, -50%);}
	.esg .policy .policy-con>div .txt {padding:135px 30px 50px; width:100%; margin:0;}
	.esg .policy .policy-con>div .txt ul li {grid-template-columns:repeat(1, 1fr);}
	.esg .policy .policy-con>div .tit img {width:220px;}
	.esg .policy .policy-con>div .txt ul li dl dt {height:40px;}
	
	/** 품질경영 **/
	.quality h3>span {font-size:16px;}
	.quality .policy>p {font-size:16px; margin-top:20px;}
	.quality .policy .policy-con {margin-top:20px;}
	.quality .policy .policy-con ul {grid-template-columns:repeat(2, 1fr); gap:30px 20px;}
	.quality .policy .policy-con ul li dl dt:first-of-type {font-size:18px;}
	.quality .policy .policy-con ul li dl dt:last-of-type {font-size:18px; justify-content:flex-start;}
	.quality .policy .policy-con .txt span {font-size:17px;}
	.quality .slogan .tit {padding:70px 20px;}
	.quality .slogan .tit h4 {font-size:24px; line-height:1.4;}
	
	
	/** 안전경영 **/
	.safety {gap:50px; flex-direction:column;}
	.safety .safety-con {width:100%; padding:40px;}
	.safety .safety-cert {width:100%; text-align:center;}
	
	/***** 채용정보 *****/
	/** 인재육성 **/



	/** 복리후생 **/
	.benefits>p {font-size:16px;}
	.benefits .benefit-list {grid-template-columns:repeat(3, 1fr); gap:30px; margin-top:40px;}
	.benefits .benefit-list li {padding:20px;}
	.benefits .benefit-list li p {font-size:16px;}
	
	/* 채용절차 */
	.recruit .slogan p {font-size:26px; padding:0 45px;}
	.recruit .slogan p:before, .recruit .slogan p:after {background-size:contain; height:25px;}
	.recruit .recruit-con {gap:30px; margin-top:40px; flex-direction:column;}
	.recruit .recruit-con .bg {width:100%; height:auto; padding:100px 50px; text-align:center;}
	.recruit .recruit-con .bg p {font-size:26px;}
	.recruit .recruit-con .list {width:100%;}
	.recruit .recruit-con .list li img {height:40px;}
	.recruit .recruit-con .list li span {font-size:20px;}
	
	/***** 고객센터 *****/
	/** 온라인문의 **/
	.inquiry .search_wrap {margin-top:0;}
	.inquiry .list_wrap .list * {font-size:15px;}
	.inquiry .list_wrap .list ul li {display:block; padding:15px 0; text-align:left; position:relative;}
	.inquiry .list_wrap .list ul .num {width:100%; text-align:left; font-size:15px;}
	.inquiry .list_wrap .list ul .title {width:100%; padding:0; margin:0 0 10px; padding-left:0; padding-right:90px;  -webkit-line-clamp:2;}
	.inquiry .list_wrap .list ul .writer {min-width:80px; font-size:15px;}
	.inquiry .list_wrap .list ul .date {min-width:100px; font-size:15px; font-weight:300; margin-top:5px;}
	.inquiry .list_wrap .list ul .answer {position: absolute; right:0px; top:15px; text-align:right;}
	.inquiry .list_wrap .list ul .answer .wait {position:static; transform:translate(0,0); font-size:15px; padding:3px 10px;}
	.inquiry .list_wrap .list ul .answer .complete {position:static; transform:translate(0,0); font-size:15px;}
	
	/** 온라인문의 뷰페이지 **/
	.inquiry .view .tit .info {grid-template-columns:repeat(1,1fr);}
	.inquiry .view .tit .info li.attach {grid-column:auto;}
	.inquiry .viewBtn_wrap a {font-size:16px;}
	.inquiry .view .cont {padding:60px 0;}
	.mobile select#page {line-height:1;}
	
	/** 온라인문의 글쓰기페이지 **/
	.inquiry .write > div {grid-template-columns:auto; gap:10px;}
	.inquiry .write .inputWrap.title input {width:100%; max-width:500px;}
	.inquiry .write .inputWrap.phone span {display:flex; align-items:center; gap:10px;}
	.inquiry .write .inputWrap.phone input {width:30%;}
	.inquiry .viewBtn_wrap a {display:inline-block; padding:11px 20px; width:150px; background:#fff; transition:all 0.3s; text-align:center; color:#000; font-size:16px; margin-top: 60px; border:1px solid #222; }
	.inquiry .viewBtn_wrap button {display:inline-block; padding: 11px 20px; width:150px; background:#fff; transition:all 0.3s; text-align:center; color:#000; font-size: 16px; margin-top:60px; border:1px solid #222;}
	.inquiry .viewBtn_wrap a:hover {background:#222; color:#fff;}
	.inquiry .viewBtn_wrap button:hover {background:#222; color:#fff;}
	.inquiry .write .inputWrap.autoCodeWrap > div {padding-top:0px;}
	
	/* 카탈로그 */
	.catalog .subTit h4 {font-size:26px;}
	.catalog .list li {width:50%;}
	
}


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	.only-pc {display:none;}
	.only-mobile {display:block;}
	/* ******************** 공용 ******************** */
	.tabWrap ul li a {font-size:16px;}
	
	/** CEO인사말 **/
	.greeting {flex-direction:column; gap:30px;}
	.greeting .img {width:100%;}
	.greeting .text {width:100%;}
	.greeting .text .tit {font-size:22px;}
	.greeting .text .ceo_name {font-size:16px;}
	.greeting .text .ceo_name .big {font-size:20px;}
	.greeting .text .ceo_name img {height:50px;}
	
	/** 회사개요 **/
	.introduce h3 {font-size:20px;}
	.introduce .vision .tit {font-size:20px;}
	.introduce .vision .vision-in {padding:30px; display:flex; justify-content:center; flex-wrap:wrap; gap:8vw;}
	.introduce .vision .vision-in article {gap:4vw;}
	.introduce .vision .vision-in article p {font-size:17px;}
	.introduce .slogan {margin-top:50px;}
	.introduce .slogan p {font-size:24px; padding:0 40px;}
	.introduce .slogan p:before, .introduce .slogan p:after {height:23px;}
	
	/** 연혁 **/
	.history {word-break:break-all;}
	.history .tabItem {margin-top:50px;}
	.history .tabItem article dl:before {right:auto; left:5px; transform:none;}
	.history .tabItem article dl+dl {padding-top:40px;}
	.history .tabItem article dl dt {width:0%;}
	.history .tabItem article dl dd {width:100%;}
	.history .tabItem article dl dd strong {font-size:21px;}
	.history .tabItem article dl dd strong:before {width:20px; height:20px; border:4px solid var(--navy);}
	.history .tabItem article dl.left dd {padding-left:30px;}
	.history .tabItem article dl.right {text-align:left;}
	.history .tabItem article dl.right dd {padding-right:0; padding-left:30px;}
	.history .tabItem article dl.right dd strong {justify-content:flex-start;}
	.history .tabItem article dl.left dd strong:before {left:-33px;}
	.history .tabItem article dl.right dd strong:before {right:auto; left:-33px;}
	
	/** 인증현황 **/
	.certificate .controls {grid-template-columns:repeat(2, 1fr);}
	.certificate .controls button {border-bottom:1px solid #ddd; font-size:17px;}
	.certificate .controls button:nth-of-type(2n) {border-right:0;}
	.certificate .controls button:nth-of-type(3),.certificate .controls button:nth-of-type(4) {border-bottom:0;}
	.certificate .list ul {grid-template-columns:repeat(1, 1fr); gap:30px 20px;}
	.certificate .list li a {padding:10px;}
	.certificate .list li a p {margin-top:10px;}
	.certificate .list li a span {font-size:13px;}
	
	/** 설비현황 **/
	.facility h3 {font-size:20px; margin-top:50px;}
	.facility .tabItem {margin-top:50px;}
	.facility .facility01 .status {grid-template-columns:repeat(1, 1fr); gap:30px; margin-top:50px;}
	.facility .facility01 .status article h4 {font-size:21px;}
	.facility .facility02 .status article dl {padding-left:95px;}
	.facility .facility02 .status article dl:nth-of-type(odd) {padding-left:50px;}
	.facility .facility02 .img {display:grid; grid-template-columns:repeat(1,1fr); gap:15px;}
	.facility .facility02 .img .item {width:100%;}
	
	/** 주요거래처 **/
	.clients h3 {font-size:20px;}
	.clients .client-list+.client-list {margin-top:50px;}
	.clients .client-list ul {grid-template-columns:repeat(2, 1fr); margin-top:20px; gap:20px 15px;}
	.clients .client-list ul li {height:85px;}
	
	/** 찾아오시는길 **/
	.location h3 {font-size:20px; margin-bottom:20px;}
	.location .text p {font-size:16px;}
	
	/***** 사업영역 *****/
	.field h3 {font-size:20px;}
	.field .field-con .txtBox p {font-size:17px;}
	
	/** 사업실적 **/
	.performance .table-wrap.typeB table {min-width:768px; width:100%;}
	.performance h3 {font-size:20px;}
	
	/* 제품정보 */
	.pro h4 {font-size:20px; margin-top:50px;}
	.pro-tit h3 {font-size:20px;}
	.pro-tit p {margin-top:10px; font-size:14px;}
	.dcpol .package {flex-direction:column;}
	.dcpol .cmb-fmb {flex-direction:column; gap:30px; align-items:normal;}
	
	.dcchem .pro-con {flex-direction:column;}
	.dcchem .pro-con article {width:100%;}
	.dcchem .pro-con article h4 {margin-top:30px;}
	.dcchem .pro-con.imgBox>div {width:100%;}
	
	.nanosite .pro-con {flex-direction:column; margin-top:50px;}
	.nanosite .pro-con .mcp-txt {font-size:18px;}
	.nanosite .pro-con article:nth-of-type(2)>h4:first-child {margin-top:50px;}
	.nanosite .components .cont {flex-direction:column; gap:10px;}
	.nanosite .components .cont>div {width:100%;}
	
	.cnf h4 {margin-top:0;}
	
	/***** 지속가능경영 *****/
	.txt_big {margin-top:50px;}
	.txt_big p {font-size:20px; padding:0 35px;}
	.txt_big p:before,.txt_big p:after {height:20px;}
	
	.ethics h3 {font-size:20px;}
	.ethics .ethics-con .tit p {font-size:20px; margin-top:5px;}
	.ethics .ethics-con .tit span {width:70px; height:70px;}
	.ethics .ethics-con .tit span img {height:35px;}
	.ethics .ethics-con ul li {padding:12px 15px;}
	.ethics .policy {margin-top:60px;}
	.ethics .policy .policy-con ul {grid-template-columns:repeat(1, 1fr);}
	.ethics .policy .policy-con ul li dl {padding:20px; text-align:left;}
	.ethics .policy .policy-con .txt {padding:20px 20px 25px; text-align:left;}
	.ethics .policy .policy-con .txt p+span {margin-top:20px;}
	
	/** esg경영 **/
	.esg h3 {font-size:20px;}
	.esg h3>span {font-size:16px;}
	.esg .policy>p {font-size:16px;}
	.esg .policy .policy-con>div .tit img {min-width:200px;}
	.esg .policy .policy-con>div .txt ul li dl {gap:0px; flex-direction:column;}
	.esg .policy .policy-con>div .txt ul li dl dt {width:160px; height:35px;}
	.esg .declaration {padding:30px; margin-top:60px;}
	.esg .declaration .tit p {font-size:20px;}
	.esg .declaration .tit+p {margin:20px 0 0; font-size:16px;}
	.esg .declaration article {margin-top:30px;}
	.esg .declaration article dl dt {font-size:16px; margin-bottom:10px;}
	.esg .declaration article dl dd {margin-top:5px;}
	.esg .declaration article dl~dl {margin-top:20px;}
	.esg .declaration .tit>span {width:70px; height:70px;}
	.esg .declaration .tit span img {height:35px;}
	.esg .ceo_name {font-size:16px;}
	.esg .ceo_name .big {font-size:21px; padding-left:10px;}
	.esg .esg-cert {margin-top:60px; flex-direction:column; align-items:center; gap:20px;}
	
	/** 품질경영 **/
	.quality h3 {font-size:20px;}
	.quality .policy .policy-con ul {grid-template-columns:repeat(1, 1fr);}
	.quality .policy .policy-con ul li dl {padding:20px; text-align:left;}
	.quality .slogan {margin-top:50px;}
	.quality .slogan .tit h4 {font-size:20px;}
	.quality .quality-cert {margin-top:60px; flex-direction:column; align-items:center; gap:20px;}
	
	/** 안전경영 **/
	.safety h3 {font-size:20px;}
	.safety .safety-con {padding:30px;}
	.safety .safety-con .policy ul {margin-top:20px;}
	.safety .safety-con .policy ul li {font-size:16px; background:url(../images/management/i-check.png)no-repeat left center/16px;}
	.safety .safety-con .goal {margin-top:40px;}
	.safety .safety-con .goal dl {margin-top:20px;}
	.safety .safety-con .goal dl dt {font-size:18px;}
	.safety .safety-con .goal dl dd {font-size:16px; margin-top:5px;}
	.safety .safety-con .goal .name {margin-top:40px;}
	.safety .safety-con .goal .name span {font-size:16px;}
	
	
	/* 인재육성 */
	.talent .talent-con h3 {font-size:20px;}
	.talent .talent-con h4 {margin-top:20px; line-height:1.4;}
	.talent .talent-con p {margin-top:10px;}
	.talent .talent-con~.talent-con {margin-top:50px;}
	.talent .talent-con .img {margin-top:35px;}
	.talent .talent-con .edu {grid-template-columns:repeat(2, 1fr); gap:10px;}
	
	/** 복리후생 **/
	.benefits .benefit-list {grid-template-columns:repeat(2, 1fr); gap:20px; margin-top:30px;}
	.benefits .benefit-list li .img {width:80px; height:80px;}
	.benefits .benefit-list li .img img {height:35px; object-fit:scale-down;}
	
	
	/* 채용절차 */
	.recruit .slogan p {font-size:24px; padding:0 40px;}
	.recruit .slogan p:before, .recruit .slogan p:after {height:23px;}
	.recruit .recruit-con .bg {padding:70px 30px;}
	.recruit .recruit-con .list li span {font-size:18px;}
	
	/** 온라인문의 **/
	.inquiry .list_wrap {margin-top:30px;}
	.inquiry .search_wrap form > div {flex-wrap:wrap;}
	.inquiry .search_wrap form select {width:100%; min-width:auto;}
	.inquiry .search_wrap form input {width: calc(100% - 67px); border-left:1px solid #ddd; border-top:0;}
	.inquiry .list_wrap .btn_wrap a {padding:8px 20px; font-size:15px;}
	.inquiry .view_answer {flex-direction:column; gap:10px; padding:20px; }
	.inquiry .view_answer p {font-size:16px; width: 55px;}
	.inquiry .view_answer span {margin-top:0; width:100%; font-size:15px;}
	
	
	.inquiry .view .tit h3 {font-size:15px;}
	.inquiry .view .tit .info li.attach span .btn_upload img {height:13px;}
	.inquiry .view .cont {padding:40px 0; }
	.inquiry .view .tit .info li p {padding:12px;}
	.inquiry .view .tit .info li span {padding:12px;}
	.inquiry .view .tit h3 p {padding:12px;}
	.inquiry .view .tit h3 span {padding:12px;}
	.inquiry .viewBtn_wrap a {margin-top:40px;}
	
	.inquiry .write > div {padding: 20px 20px 20px;}
	.inquiry .write .inputWrap.email input {min-width:auto; width:100%;} 
	.inquiry .viewBtn_wrap a {display:inline-block; padding:8px 20px; width:130px; background: #fff; transition:all 0.3s; text-align:center; color:#000; font-size:15px; margin-top:40px; border:1px solid #222;}
	.inquiry .viewBtn_wrap button {display:inline-block; padding:8px 20px; width:130px; background:#fff; transition:all 0.3s; text-align:center; color:#000; font-size:15px; margin-top:40px; border:1px solid #222;}
	.inquiry .viewBtn_wrap a:hover {background:#222; color:#fff;}
	.inquiry .viewBtn_wrap button:hover {background:#222; color:#fff;}
	.inquiry .agreeWrap > div .ckwrap input[type='checkbox']+label {padding:5px 20px 5px 40px; padding-left:25px;}
	
	/* 카탈로그 */
	.catalog .subTit h4 {font-size:24px;}
	.catalog .list {flex-direction:column; gap:30px;}
	.catalog .list li {width:100%;}
	.catalog .list li .cover {width:auto; max-width:350px;}
	.catalog .list li .txt p {font-size:16px;}
	.catalog .list li .cover a {width:110px; height:110px; padding:60px 0 0; background-size:40px 35px; background-position:center top 20px; font-size:13px;}
	.catalog .list li .cover:hover .view_btn {left:20px;}
	.catalog .list li .cover:hover .dl_btn {right:20px;}
}