@charset "utf-8";

.subVisual{ padding-top: calc(var(--header-height) + 117rem); 
	.inr{ display: grid; }
	[data-menu-snb="1"]{ font: 600 var(--fs25) var(--font-pre); color: var(--primary); }
	[data-menu-snb="2"]{ margin-top: 0.28571429em; font: 700 var(--fs70) var(--font-pre); }
	.lnb{ place-self: end; font-size: 18rem; color: #aaa;
		&, .sub_menu{ display: flex; gap: 30rem; }
		a{ display: inline-block; padding: 7rem 24rem 8rem; border: 1px solid #e5e5e5; border-radius: 5em; }
		a.isVisiting{ background: var(--primary); border-color: #0000; font-weight: 700; color: #fff; }
	}
	.img{ contain: content; margin-top: 69rem; }
	.img::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
	@media(prefers-reduced-motion:no-preference){
		/*.img{ animation: subVisual-img var(--duration) .6s both; }*/
		.inr > *{ opacity: 0; animation: subVisualText .6s .2s both; }
		.inr > *:nth-child(2){ animation-delay: .3s; }
		.inr > *:nth-child(3){ animation-delay: .5s; }
	}
	@media(min-width:768px){
		.lnb{ grid-area: 1/2/3/3; translate: 0 calc( var(--fs70) * -.25714286); }
		.img{ --duration: 1s; height: 420rem; }
		.about::before{ background-image: url('/images/content/subVisual-1-pc.jpg'); }
		.business::before{ background-image: url('/images/content/subVisual-2-pc.jpg'); }
		.story::before{ background-image: url('/images/content/subVisual-3-pc.jpg'); }
		.review::before{ background-image: url('/images/content/subVisual-4-pc.jpg'); }
		.common::before{ background-image:url('/images/content/subVisual-4-pc.jpg'); }
		.employee::before{ background-image:url('/images/content/subVisual-5-pc.jpg'); }
	}
	@media(max-width:767px){
        &{padding-top: calc(var(--header-height) + 80rem); }
		.lnb{ margin-top: 30rem; place-self:flex-start;
            .sub_menu{gap:10rem;}
        }
		.img{ --duration: .6s; height:260rem; margin-top:50rem;}
		.about::before{ background-image: url('/images/content/subVisual-1-pc.jpg'); }
		.business::before{ background-image: url('/images/content/subVisual-2-mob.jpg'); }
		.story::before{ background-image: url('/images/content/subVisual-3-mob.jpg'); }
		.review::before{ background-image: url('/images/content/subVisual-4-mob.jpg'); }
		.common::before{ background-image: url('/images/content/subVisual-4-mob.jpg'); }
		.employee::before{ background-image: url('/images/content/subVisual-5-mob.jpg'); }
        .story,
        .review,
        .common,
        .employee{margin-top:30rem !important;}
	}
}

/*
@keyframes subVisual-img {
	0%{ clip-path: inset(0 100% 0 0); }
	100%{ clip-path: inset(0); }
}
*/

@keyframes subVisualText {
	0%{ transform: translateY(40rem); opacity: 0; }
	100%{ transform: translateY(0); opacity: 1; }
}


/* common content */
main#content{ min-height:300px; padding:100rem 0 120rem; }
.sub_title{ margin-bottom: 3.75em;}
.sub_title h2{ text-align:center; font-size:var(--fs35); }
h2.subTit1{position:relative; padding-left:33rem; margin-bottom:25rem; font-size:28rem; color:#000;}
h2.subTit1:before{content:'■'; display:block; position:absolute; left:0; top:0; color:var(--primary);}
.pointColor{color:var(--primary);}

.mt120{margin-top:120rem;}

.bullet1{position:relative; padding-left:14rem;}
.bullet1:before{content:'-'; display:block; position:absolute; top:0; left:0;}
.bullet2{position:relative; padding-left:10rem;}
.bullet2:before{content:'·'; display:block; position:absolute; top:0; left:0; font-weight:900;}

.table_st01{table-layout:fixed;}
.table_st01 th,
.table_st01 td{padding:20rem 10rem !important; font-size:18rem !important;}
.table_st01 th{background:#edf5f5 !important;}
.table_st01 td{color:#555 !important;}
@media(max-width:1279px){
    .mt120{margin-top:100rem;}
}
@media(max-width:767px){
    main#content{padding:80rem 0 100rem;}
    .mt120{margin-top:80rem;}
    .table_st01 th,
    .table_st01 td{font-size:16rem !important;}
}


/* about */
.about1 .grt h1{font-size:40rem; font-weight:800; color:#003034;}
.about1 .grt h2{font-weight:600; color:#aaa; font-size:35rem;}
.about1 .grtBox{display:flex; justify-content:space-between; margin-top:50rem;}
.about1 .grtBox_img{display:block; width:calc(45% - 80rem);}
.about1 .grtBox_img img{display:block; width:100%;}
.about1 .grtBox_txt{width:55%; margin-top:80rem;}
.about1 .grtBox_txt h3{margin-bottom:30rem; font-size:25rem; color:#111;}
.about1 .grtBox_txt p{font-size:18rem; color:#555;}
.about1 .grtBox_txt p+p{margin-top:20rem;}
.about1 .vision ul{display:grid; grid-template-columns:repeat(3, 1fr); gap:40rem;}
.about1 .vision li{position:relative; padding:35rem 30rem; border:1px solid #ddd; border-top:2rem solid var(--primary);}
.about1 .vision span{display:block; position:absolute; top:40rem; right:30rem; width:50rem; height:50rem;}
.about1 .vision img{display:block; width:100%; height:100%; object-fit:contain;}
.about1 .vision em{display:block; margin-bottom:20rem; font-size:25rem; color:#111; font-weight:600;}
.about1 .vision i{display:block; margin-bottom:5rem; font-family:var(--font-mon); font-style:normal; font-size:16rem; font-weight:bold; color:var(--primary);}
.about1 .vision p{font-size:18rem; color:#555;}
.about1 .certi ul{display:grid; grid-template-columns:repeat(4, 1fr); gap:40rem;}
.about1 .certi span{display:block; width:100%; border:1px solid #ddd;}
.about1 .certi img{display:block; width:100%;}
.about1 .certi em{display:block; font-size:18rem; color:#333; padding:15rem; background:#f5f5f5; text-align:center;}
@media(max-width:1279px){
    .about1 .grtBox_img{width:calc(45% - 50rem);}
    .about1 .grtBox_txt{margin-top:0;}
    .about1 .grtBox_txt h3{font-size:22rem;}
    .about1 .grtBox_txt p > br{display:none;}
    .about1 .vision ul{gap:20rem;}
    .about1 .certi ul{gap:20rem;}
}
@media(max-width:767px){
    .about1 .grt h1{font-size:28rem;}
    .about1 .grt h2{font-size:24rem;}
    .about1 .grtBox{display:block; margin-top:30rem;}
    .about1 .grtBox_img{width:100%;}
    .about1 .grtBox_txt{margin-top:30rem; width:100%;}
    .about1 .grtBox_txt h3{font-size:20rem;}
    .about1 .grtBox_txt h3 > br.hide_mo{display:none;}
    .about1 .vision ul{grid-template-columns:1fr; gap:20rem;}
    .about1 .vision p > br{display:none;}
    .about1 .certi ul{grid-template-columns:repeat(2, 1fr); gap:20rem 15rem;}
    .about1 .certi em{font-size:16rem; padding:15rem 10rem;}
}


/* 회사소개 > 조직도 */
.about2 .ceo{margin:0 auto 80rem; padding:6rem; aspect-ratio:1/1; width:190rem; border-radius:50%; background:linear-gradient(135deg, #0b65f7, #1ac549);}
.about2 .ceo span{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:100%; height:100%; background:#fff; border-radius:50%; font-size:30rem; color:var(--primary); font-weight:bold;}
.about2 .ceo span em{display:block; font-size:22rem; color:#a3c5c6; font-weight:bold; font-family:var(--font-mon);}
.about2 .team{display:grid; grid-template-columns:repeat(4, 1fr); gap:50rem; padding:0 100rem;}
.about2 .teamList h3{display:block; margin-bottom:10rem; width:100%; height:66rem; line-height:65rem; background:linear-gradient(150deg, #01737d, #019c7d); color:#fff; font-size:22rem; font-weight:600; text-align:center; border-radius:10rem;}
.about2 .teamList ul{padding:0 15rem; border-radius:10rem; border:1px solid #ddd;}
.about2 .teamList li{padding:18rem 0; font-size:20rem; text-align:center;}
.about2 .teamList li+li{border-top:1px dashed #ddd;}
@media(max-width:1280px){
    .about2 .ceo{margin:0 auto 60rem; width:170rem;}
    .about2 .ceo span{font-size:26rem;}
    .about2 .ceo span em{font-size:18rem;}
    .about2 .team{padding:0; gap:20rem;}
    .about2 .teamList h3{font-size:20rem; height:60rem; line-height:59rem;}
    .about2 .teamList li{font-size:18rem;}
}
@media(max-width:767px){
    .about2 .ceo{margin:0 auto 50rem; width:150rem;}
    .about2 .ceo span{font-size:24rem;}
    .about2 .ceo span em{font-size:18rem;}
    .about2 .team{padding:0; gap:25rem 20rem; grid-template-columns:repeat(2, 1fr);}
    .about2 .teamList h3{font-size:18rem; height:46rem; line-height:45rem;}
    .about2 .teamList li{padding:10rem 0; font-size:16rem;}
}


/* 사업분야 > 대기측정 */
.biz1 .cnt1 h2{margin-bottom:10rem; font-size:30rem; color:#003034;}
.biz1 .cnt1 p{font-size:18rem; color:#555;}
.biz1 .cnt1 img{display:block; margin-top:30rem; width:100%;}
.biz1 .cnt2 ul{display:flex; justify-content:space-between; flex-wrap:wrap;}
.biz1 .cnt2 li{position:relative;}
.biz1 .cnt2 li:after{content:'▶'; display:block; position:absolute; right:-56rem; top:64rem; font-size:25rem; color:var(--primary);}
.biz1 .cnt2 li:last-child:after{display:none;}
.biz1 .cnt2 span{display:block; padding:30rem; width:160rem; height:160rem; border-radius:50%; background:#f5f5f5;}
.biz1 .cnt2 img{display:block; width:100%; height:100%; object-fit:contain;}
.biz1 .cnt2 li:nth-child(3) img{margin-left:5rem;}
.biz1 .cnt2 em{display:block; margin-top:15rem; text-align:center; font-size:18rem; font-weight:500; color:#222;}
.biz1 .cnt3 td:nth-child(4){text-align:left;}
.biz1 .cnt3 p+p{margin-top:10rem;}
.biz1 .cnt4 h3{padding:20rem; text-align:center; font-size:20rem; border-top:3rem solid var(--primary);}
.biz1 .cnt4 > ul{display:grid; grid-template-columns:repeat(3, 1fr); gap:80rem;}
.biz1 .cnt4 > ul > li{position:relative;}
.biz1 .cnt4 > ul > li:after{content:''; display:block; position:absolute; top:0; right:-40rem; width:1px; height:100%; background:#ddd;}
.biz1 .cnt4 > ul > li:last-child:after{display:none;}
.biz1 .cnt4 > ul > li h4{font-size:18rem; color:#fff; width:100%; height:50rem; line-height:50rem; font-weight:500; text-align:center;}
.biz1 .cnt4 .list{border-bottom:1px solid #ccc;}
.biz1 .cnt4 .list li{padding:15rem 10rem; text-align:center; border-top:1px dashed #ccc;}
.biz1 .cnt4 .list li:first-child{border-top:none;}
@media(min-width:768px){
    .biz1 .cnt1 img.mo{display:none;}
}
@media(max-width:1279px){
    .biz1 .cnt1 p > br{display:none;}
    .biz1 .cnt2 li:after{right:-30rem; top:47rem; font-size:20rem;}
    .biz1 .cnt2 span{padding:25rem; width:120rem; height:120rem;}
    .biz1 .cnt3 td:nth-child(2) > br{display:none;}
}
@media(max-width:767px){
    .biz1 .cnt1 img.pc{display:none;}
    .biz1 .cnt2 li{width:calc(100% / 3);}
    .biz1 .cnt2 li:after{right:-6rem; top:30rem; font-size:15rem;}
    .biz1 .cnt2 li:nth-child(n+4){margin-top:20rem;}
    .biz1 .cnt2 span{padding:20rem; margin:auto; width:80rem; height:80rem;}
    .biz1 .cnt2 em{margin-top:10rem; font-size:16rem;}
    .biz1 .cnt3 .tableWrap{overflow-x:scroll;}
    .biz1 .cnt3 .table{width:600rem;}
    .biz1 .cnt4 h3{padding:15rem 10rem;}
    .biz1 .cnt4 > ul{grid-template-columns:1fr; gap:20rem;}
    .biz1 .cnt4 > ul > li:after{display:none;}
    .biz1 .cnt4 > ul > li h4{height:46rem; line-height:46rem;}
    .biz1 .cnt4 .list{display:grid; grid-template-columns:1fr 1fr; gap:5rem; margin-top:5rem; border-bottom:none;}
    .biz1 .cnt4 .list li{padding:10rem 8rem; background:#f5f5f5; border-top:none;}
}


/* 사업분야 > 보유장비 */
.biz2 .tab_btn{display:flex; flex-wrap:wrap; justify-content:center;}
.biz2 .tab_btn li{padding-bottom:15rem; border-bottom:5rem solid #ddd; font-size:20rem; font-weight:700; color:#aaa; cursor:pointer; width:200rem; text-align:center;}
.biz2 .tab_btn li.active{color:var(--primary); border-color:var(--primary);}
.biz2 .tab_container{margin-top:80rem;}
.biz2 .eqptList{display:grid; grid-template-columns:1fr 1fr; gap:40rem;}
.biz2 .eqptList li{display:flex; align-items:center; border:1px solid #ddd;}
.biz2 .eqptList span{display:block; padding:20rem; width:200rem; height:200rem;}
.biz2 .eqptList img{display:block; width:100%; height:100%; object-fit:contain;}
.biz2 .eqptList .txt{padding:30rem 20rem; width:calc(100% - 200rem);}
.biz2 .eqptList h2{color:#003034; font-family:var(--font-mon); font-size:30rem;}
.biz2 .eqptList i{display:block; font-style:normal; font-family:var(--font-mon); font-size:16rem; color:#888;}
.biz2 .eqptList em{display:block; margin-bottom:5rem; position:relative; padding-top:36rem; font-size:19rem; color:#222; font-weight:bold;}
.biz2 .eqptList em:before{content:''; display:block; position:absolute; top:14rem; left:0; width:50rem; height:3rem; background:var(--primary);}
.biz2 .eqptList p{font-size:17rem; color:#555;}
.biz2 .eqptList p+p{margin-top:5rem;}
.biz2 .eqptList p b{color:#333;}
@media(max-width:1279px){
    .biz2 .tab_container{margin-top:60rem;}
    .biz2 .eqptList{gap:30rem 20rem;}
    .biz2 .eqptList li{display:block; padding:0 15rem;}
    .biz2 .eqptList span{margin:auto; padding:30rem; height:220rem; width:auto;}
    .biz2 .eqptList .txt{padding:20rem 0; width:100%; border-top:1px dashed #ccc;}
}
@media(max-width:767px){
    .biz2 .tab_btn li{padding-bottom:10rem; width:150rem;}
    .biz2 .tab_container{margin-top:50rem;}
    .biz2 .eqptList{grid-template-columns:1fr; gap:20rem;}
    .biz2 .eqptList h2{font-size:25rem;}
}


/* 사업분야 > 관련기관 */
.biz3 .guide{display:block; margin:0 auto 100rem; padding:20rem; font-size:16rem; color:#666; text-align:center; border:1px solid var(--primary); box-shadow:0 20rem 30rem rgba(1,115,125,0.15); width:500rem; border-radius:40rem;}
.biz3 .guide em{font-weight:500; color:var(--primary);}
.biz3 .img{display:block; position:relative; margin:auto; width:100%;}
.biz3 .img img{display:block; width:100%;}
.biz3 .link{display:block; position:absolute; width:16.5%; font-size:0;}
.biz3 .link1{top:42.9%; left:0; height:10.4%;}
.biz3 .link2{bottom:5.5%; left:11.9%; height:24%;}
.biz3 .link3{top:15%; left:20.7%; height:10.4%;}
.biz3 .link4{top:31%; left:20.7%; height:21%;}
.biz3 .link5{bottom:5.5%; left:32%; height:24%;}
.biz3 .link6{top:31%; left:43.3%; height:21%;}
@media(max-width:767px){
    .biz3 .guide{margin-bottom:60rem; padding:12rem 20rem; width:84%; font-size:14rem;}
}


/* employee */
.employee1{display:grid; gap:40rem; grid-template-columns:1fr 1fr;}
.employee1.view{grid-template-columns:1fr;}
.employee1 .listBox{display:flex; align-items:center; padding:20rem; border:1px solid #ddd; transition:0.2s;}
.employee1 .listBox_img{display:block; width:200rem; height:200rem; background: url('/images/common/no_img.svg') no-repeat 50% / 50%; }
.employee1 .listBox_img img{display:block; width:100%; height:100%; object-fit:cover; text-indent: -100vw; }
.employee1 .listBox_info{padding-left:40rem; width:calc(100% - 200rem);}
.employee1 .listBox_info li{display:flex;}
.employee1 .listBox_info li.st1{margin-bottom:25rem;}
.employee1 .listBox_info li.st1 svg{display:block; width:18rem;}
.employee1 .listBox_info li.st1 .clr{fill:#aaa; transition:0.2s;}
.employee1 .listBox_info li.st1 em{display:block; margin-left:10rem; font-size:20rem; color:#000; font-weight:700;}
.employee1 .listBox_info li.st2{margin-top:8rem; font-size:18rem;}
.employee1 .listBox_info li.st2 i{display:block; color:#111; font-style:normal; font-weight:600; width:90rem;}
.employee1 .listBox_info li.st2 a,
.employee1 .listBox_info li.st2 em{display:block; color:#444; width:calc(100% - 90rem);}
@media(hover:hover){
    .employee1 .listBox:hover{border-color:var(--primary);}
    .employee1 .listBox:hover li.st1 .clr{fill:var(--primary);}
}
@media(max-width:1279px){
    .employee1{gap:20rem;}
    .employee1 .listBox{padding:10rem;}
    .employee1 .listBox_img{width:150rem; height:150rem;}
    .employee1 .listBox_info{padding-left:20rem; width:calc(100% - 150rem);}
}
@media(max-width:767px){
    .employee1{grid-template-columns:1fr;}
    .employee1 .listBox{padding:5rem;}
    .employee1 .listBox_img{width:115rem; height:115rem;}
    .employee1 .listBox_info{padding-right:10rem; width:calc(100% - 115rem);}
    .employee1 .listBox_info li.st1{margin-bottom:12rem;}
    .employee1 .listBox_info li.st1 svg{width:15rem;}
    .employee1 .listBox_info li.st1 em{font-size:18rem;}
    .employee1 .listBox_info li.st2{margin-top:3rem; font-size:16rem;}
    .employee1 .listBox_info li.st2 i{width:65rem;}
    .employee1 .listBox_info li.st2 a,
    .employee1 .listBox_info li.st2 em{width:calc(100% - 65rem);}
}


/* 고객만족도조사 */
.subVisual .img.csSurvey{display:none;}
.csSurvey1{padding-top:50rem !important;}
.csSurvey1 > p{font-size:17rem; color:#444;}
.csSurvey1 .info{display:grid; grid-template-columns:repeat(4, 1fr); gap:40rem; margin-top:60rem;}
/*.csSurvey1 .info li{border-top:3rem solid var(--primary);}*/
.csSurvey1 .info :where(em, .label){display:block; margin:0 0 10rem; font-size:16rem; color:var(--primary); font-weight:700;}
.csSurvey1 .info input{font-size:17rem; color:#444; padding:10rem 8rem; outline:none; border:none; width:100%; background:#f5f5f5;}
.csSurvey1 .formWrap{padding-top:25rem; margin-top:80rem; border-top:3rem solid var(--primary);}
.csSurvey1 .form > li{display:flex; align-items:center; padding:20rem 0;}
.csSurvey1 .form > li:first-child{padding-top:0;}
.csSurvey1 .form > li:last-child{padding-bottom:0;}
.csSurvey1 .form > li+li{border-top:1px dashed #ccc;}
.csSurvey1 .formQ{display:flex; align-items:center; width:60%;}
.csSurvey1 .formQ i{display:block; margin:-1rem 10rem 0 0; font-size:22rem; font-weight:bold; color:var(--primary); font-family:var(--font-mon); font-style:normal;}
.csSurvey1 .formQ p{font-size:19rem; font-weight:500; color:#222;}
.csSurvey1 .formRadio{display:flex; align-items:center; justify-content:space-evenly; width:40%; height:46rem; border-radius:30rem; background:#f5f5f5;}
.csSurvey1 .formRadio li{display:flex; align-items:center; justify-content:center; width:90rem;}
.csSurvey1 .formRadio input{margin:0; cursor:pointer; width:15rem; height:15rem;}
.csSurvey1 .formRadio label{padding-left:6rem; cursor:pointer; font-size:17rem; line-height:1;}
.csSurvey1 .total{display:flex; margin-top:30rem; height:60rem; border:1px solid var(--primary); background:#f2fbfb;}
.csSurvey1 .total span{display:flex; align-items:center; justify-content:center; height:100%; font-size:22rem; font-weight:bold; color:#000;  width:60%;}
.csSurvey1 .total ul{display:flex; align-items:center; justify-content:space-evenly; width:40%;}
.csSurvey1 .total li{width:90rem; font-size:20rem; color:#777; width:90rem; text-align:center;}
.csSurvey1 .total em{font-weight:600; color:var(--primary);}
.csSurvey1 #opinion{padding:15rem 15rem; border:none; background:#f5f5f5; outline:none; width:100%; height:150rem;}
.csSurvey1 .submitWrap{margin-top:100rem;}
.csSurvey1 .submitWrap p{font-size:17rem; color:#444; text-align:center;}
.csSurvey1 .submitWrap button{display:block; margin:50rem auto 0; background:#222; width:180rem; height:60rem; border-radius:30rem; font-size:17rem; color:#fff;}
@media(max-width:1279px){}
@media(max-width:767px){
    .csSurvey1{padding-top:0rem !important;}
    .csSurvey1 p{font-size:16rem;}
    .csSurvey1 .info{display:block;}
    .csSurvey1 .info li+li{margin-top:20rem;}
    .csSurvey1 .form > li{display:block;}
    .csSurvey1 .formQ{width:100%; align-items:flex-start;}
    .csSurvey1 .formQ i{font-size:20rem; margin-right:6rem;}
    .csSurvey1 .formQ p{font-size:18rem;}
    .csSurvey1 .formRadio{width:100%; margin-top:10rem;}
    .csSurvey1 .total span{width:30%;}
    .csSurvey1 .total ul{width:70%;}
}