@charset "utf-8";
/* 기본프로그램 사용자모듈 메뉴 - PC */
.all_m_btn {padding:10px; background:#323337;}
.all_m_btn img {position:absolute; top:28%; left:15px; width:10%; max-width:40px; cursor:pointer;}
.all_m_btn .mutit {text-align:center; font-weight:900; font-size:26px; color:#fff;}
.pro_m_wrap {display:none; font-family:'Nanum Gothic', sans-serif; transition:all 0.3s linear;}
.pro_m_wrap .m_menu {width:200px;}
.pro_m_wrap .bg_black {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:-1;}


/* 기본프로그램 사용자모듈 메뉴 - MOBILE */
.pro_m_wrap .subleftmenu {
	list-style:none;
	margin:0;
	padding:0;
}
.pro_m_wrap .subleftmenu li {
	border-bottom:1px solid #515155;
	background:#323337;
}
.pro_m_wrap .subleftmenu a {
	display:block;
	color:#b5b2b2;
	font-size:14px;
	padding:11px 5px 11px 15px;
	font-family:'Noto Sans KR';
}
.sub_title_m{
	font-size:28px !important;
	font-weight:bold;
	color:#fff !important;
	padding:12px 5px 12px 15px !important;
}
.pro_m_wrap .subleftmenu a:hover {
	background:#307dd4;
	color:#fff;
}
.sub_title_m:hover {
	background:#323337 !important;
	cursor:default;
}

@media all and (max-width:999px){
	.pro_m_wrap {display:block; position:absolute; left:-100%; top:0; z-index:999;}
	.pro_m_wrap.view {left:0;}
}

/* basic */
.inner{width:100%; /*max-width:1200px;*/max-width:1100px; margin:0 auto; position:relative;}

@media all and (max-width:1200px){
	.inner{width:93.75%;}
}

/* fonts */
.poppins {font-family: 'Poppins', sans-serif;}


/* header */
#header{position:relative; /*box-shadow:12px 12px 21px rgba(36,44,50,0.05);*/ z-index:100;}

#header .inner{position:relative; }

/*
#header .logo{position:absolute; top:14px; left:0; margin:0;}
#header .logo a{display:inline-block;}
*/

#header .logo{width:100%; text-align:center; margin:40px 0;}
#header .logo a{display:inline-block;}

#header .gnb_wrap {width:100%; border-top:1px solid #cccccc;}
#header .gnb > ul{max-width:1170px; margin:0 auto; font-size:0; letter-spacing:-4px; text-align:center;}
#header .gnb > ul > li{display:inline-block; vertical-align:top; width:25%;}
#header .gnb > ul > li > a{position:relative; display:block; font-size:18px; color:#333; letter-spacing:-0.04em; font-weight:400; line-height:1.5; padding:10px 0 11px;}
#header .gnb > ul > li > a:hover {background:#006a46; color:#fff;}

/*#header .gnb > ul > li > a:before{content:''; position:absolute; top:0; left:0; display:block; width:0; height:47px;  background:#006a46;}*/
/*#header .gnb > ul > li > a:before{content:''; position:absolute; top:0; left:0; display:block; width:0; height:47px; background:#006a46; transition: all 0.3s;}*/

#header .gnb > ul > li .depth02_wrap{position:absolute; top:100%; left:50%; width:1000%; height: 0; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); text-align:center; z-index:2; box-sizing: border-box; overflow: hidden; opacity: 0; transition: all 0.3s;}
#header .gnb > ul > li ul.depth02 {display: inline-block; text-align: left; max-width:1100px;}
#header .gnb > ul > li ul.depth02 li{display:inline-block; vertical-align:top; margin:15px 18px;}
#header .gnb > ul > li ul.m1 li{width:29%;} 
#header .gnb > ul > li ul.m2 li{width:16%;} 
#header .gnb > ul > li ul.m3 li{width:29%;} 


#header .gnb > ul > li ul.depth02 li a{display:inline-block; position: relative; font-size:16px; color:#333; letter-spacing:-0.04em; font-weight:300; line-height:1.5;}
#header .gnb > ul > li ul.depth02 li a:after {position: absolute; bottom: -3px; left: 0; display: block; width: 0; /*height: 1px; background: #006a46; content: '';*/}

.m_gnb {width:100%; text-align:center; display:inline-block; border:1px solid #cccccc; border-bottom:1px solid #cccccc;}
.m_gnb ul {}
.m_gnb ul li {float:left; width:48%; border-right:1px solid #cccccc;}
/*.m_gnb ul li:nth-child( 2 ) {border-right:none;}*/
.m_gnb ul li a {font-weight:700; color:#333333;}



#header .bg {position: absolute; left: 50%; top: 100%; width:1000%; height: 0; background: rgba(240,240,240,1); border-bottom:1px solid #c5c5c5; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transition: all 0.3s;}
#header.on:before{content:''; position:absolute; bottom:0px; left:0; display:block; width:100%; height:1px; background:#aaabab;}
#header.on .bg {height: 0;}
#header.on .bg.row02 {height: 250px;}
#header.on .gnb > ul > li:hover > a:before{width: 100%;}
#header.on .gnb > ul > li:hover .depth02_wrap {height: 107px; padding:20px 0; opacity: 1;}
#header.on .gnb > ul > li.row02:hover .depth02_wrap {height: 221px;}
#header.on .gnb > ul > li ul.depth02 li a:hover {color: #006a46; font-weight: 500;}
#header.on .gnb > ul > li ul.depth02 li a:hover:after {width: 100%;}

#header .m_btn {display: none; vertical-align: middle; width:24px; margin:0 auto; text-align:right; cursor:pointer; padding: 5px; margin: 33px 0;}
#header .m_btn i{display:inline-block; width:100%; height:2px; margin:3px 0; background:#000; transition:all 0.5s;}
#header .m_btn i:nth-of-type(2){width:84%;}
#header .m_btn.on i:nth-of-type(1){margin:11px 0 -2px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);}
#header .m_btn.on i:nth-of-type(2){width:0; margin:0;}
#header .m_btn.on i:nth-of-type(3){margin:0 0 11px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg);}
#header .m_phone_btn {display: none; vertical-align: middle; margin-right: 20px; padding: 5px;}



@media all and (max-width: 1200px) {
	#header .gnb > ul > li{padding:0 25px;}
}
@media all and (max-width: 1000px) {
	/*
	#header{height:100px; text-align: right;}
	#header .inner{height:100%;}
	/*#header .gnb{display:none;}
	#header .gnb > ul > li ul.depth02 {max-width:640px;}
	*/

	#header .m_btn {display: inline-block;}
	#header .m_phone_btn {display: inline-block;}
	
}

/* 20220805 css 추가 */
#header .logo .logo_m {display: none;}


@media all and (max-width: 1000px) {
	#header .logo a img {display: none;}
	#header .logo .logo_m {display: block;}
}

/* m_menu */
.m_menu_bg {z-index:101; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(240, 240, 240,.9); cursor:pointer; opacity: 0; transition: all 0.5s;}
.m_menu_bg.on {display: none; opacity: 1;}
#m_menu {z-index:102; position:fixed; right:-100%; top:0; width:500px; max-width:80%; height:100%; background-color:#fff; box-sizing:Border-box; transition:all 0.5s; }
#m_menu.on {display: none; right:0; }
#m_menu .top_box {position:relative; padding:10px; box-sizing:border-box; }
#m_menu .top_box .close_btn {position:absolute; right:20px; top:calc(50% - 15px); width:30px; height:30px; }
#m_menu .top_box .close_btn i {display:block; width:100%; height:2px; background-color:#333; }
#m_menu .top_box .close_btn i:first-of-type {-webkit-transform:rotate(45deg) translate(9px,9px); -moz-transform:rotate(45deg) translate(9px,9px); -ms-transform:rotate(45deg) translate(9px,9px); -o-transform:rotate(45deg) translate(9px,9px); transform:rotate(45deg) translate(9px,9px); }
#m_menu .top_box .close_btn i:last-of-type {-webkit-transform:rotate(-45deg) translate(-7px,8px); -moz-transform:rotate(-45deg) translate(-7px,8px); -ms-transform:rotate(-45deg) translate(-7px,8px); -o-transform:rotate(-45deg) translate(-7px,8px); transform:rotate(-45deg) translate(-7px,8px); }
#m_menu .login_box {padding:20px 0; background-color:#292929; text-align:center; }
#m_menu .login_box a {position:relative; padding:0 30px; font-size:20px; color:#fff; letter-spacing:-0.04em; }
#m_menu .login_box a:first-of-type:before {content:''; position:absolute; right:-1px; top:calc(50% - 7px); width:2px; height:15px; background-color:#fff; }
#m_menu .gnb_box {border-top:1px solid #ddd; }
#m_menu .gnb_box > ul > li {border-bottom:1px solid #dddddd; }
#m_menu .gnb_box > ul > li > a {position:relative; display:block; padding:20px 20px; font-size:20px; font-weight:bold; color:#222222; letter-spacing:-0.04em; box-sizing:border-box; }
#m_menu .gnb_box .depth02 {display:none; padding:10px 0; background-color:#000; }
#m_menu .gnb_box .depth02 li a {position:relative; display:block; padding:7px 20px; font-size:18px; color:#fff; letter-spacing:-0.04em; box-sizing:border-box; }

@media all and (max-width: 1000px) {
	.m_menu_bg.on {display: block;}
	#m_menu.on {display: block;}
}


/* ==========================================================================
	footer
========================================================================== */
#footer{padding:50px 0; font-size:0; letter-spacing:-4px; border-top:1px solid #d2d3d3;}
#footer .inner:after{content:''; display:block; clear:both;}

#footer .txt_box{display:inline-block; vertical-align:middle; width:calc(80% - 200px);}
#footer .txt_box ul li{display:inline-block; vertical-align:top; margin:4px 0; margin-right:20px; font-size:14px; color:#999999; letter-spacing:-0.045em; font-weight:400; line-height:1.4;}
#footer .txt_box ul li:last-of-type{margin-right:0;}

#footer .logo{float:right; display:inline-block; vertical-align:middle; width:263px; margin:0; text-align:right; margin-top:0px;}
#footer .logo a{display:inline-block;}

@media all and (max-width:1000px){
	#footer .txt_box{width:100%;}
	#footer .logo{float:none; width:100%; text-align:left; margin:0; margin-bottom:40px;}
}



.content {/*min-height:400px; */margin-bottom:6%; overflow: hidden;}

.sub_tit {text-align:left; margin:8% 0 4% 0;}
.sub_tit h3 {font-size:28px; font-weight:600; color:#006a46; letter-spacing:-0.025em; }
.h4_tit {font-size:24px; font-weight:600; color:#6ba287; letter-spacing:-0.025em; margin-bottom:3%;}


/*제품 브로셔*/
.brochure_box ul {}
.brochure_box ul li {width:22%; float:left; margin-right:3.7%;}
.brochure_box ul li:nth-child(4n) {margin-right:0;}
.brochure_box p.bro_txt {font-size:16px; font-weight:500; color:#323232; padding-bottom:15px;}
.brochure_box p.bro_txt span {color:#fff; display:block;}
.brochure_box p.bro_photo {box-shadow: 0px 0px 10px #cecece;}
.brochure_box p.bro_ico {text-align:right; padding-top:15px;}

/*모바일-제품 브로셔*/
.m_brochure_box ul {}
.m_brochure_box ul li {width:30%; float:left; margin-right:5%;}
.m_brochure_box ul li:nth-child(3n) {margin-right:0;}
.m_brochure_box p.bro_txt {font-size:14px; font-weight:500; color:#323232; line-height:18px; height:60px; padding-bottom:10px;}
.m_brochure_box p.bro_txt span {color:#fff; display:block;}
.m_brochure_box p.bro_photo {box-shadow: 0px 0px 10px #cecece;}
.m_brochure_box p.bro_ico {text-align:right; padding:20px 0;}


/*분석 시험법 영상*/

.vod_wrap {background:#e8f0ec; display:inline-block; width:100%; padding:3% 0;}
.vod_wrap2 {display:inline-block; width:100%; padding:3% 0 1% 0;}

.vod_box {max-width:1100px; margin:0 auto;}
.vod_box li {float:left; padding:0 3% 3% 0; width:246px; display:inline-block;}
.vod_box li:nth-child( 4n ) {padding-right:0;}
.vod_box li .vod_photo {border:1px solid #c7cac9;}
.vod_box li .vod_txt {height:45px; font-weight:500; line-height:18px; padding-top:4%; }

.vod_box2 {max-width:1100px; margin:0 auto;}
.vod_box2 li {float:left; padding:0 12% 0 0;}
.vod_box2 li:nth-child( 2n ) {padding-right:0;}
.vod_box2 li .vod_photo {border:1px solid #c7cac9;}
.vod_box2 li .vod_txt {height:45px; font-weight:500; line-height:18px; padding-top:4%; width:100%; display:inline-block;}


/* 모바일-분석 시험법 영상*/
.m_vod_wrap {background:#e8f0ec; display:inline-block; width:100%; padding:3% 0;}
.m_vod_wrap2 {display:inline-block; width:100%; padding:3% 0 1% 0;}

.m_vod_box {width:94%; margin:0 auto; overflow: hidden;}
.m_vod_box li {float:left; width:180px; display:inline-block;}
/*.m_vod_box li:nth-child( 2n ) {padding-right:0;}*/
.m_vod_box li .vod_photo {border:1px solid #c7cac9;}
.m_vod_box li .vod_txt { font-weight:500; line-height:18px; padding-top:4%; height:120px;}
.m_vod_box iframe {width:180px; height:101px;}

.m_vod_box2 {width:94%; margin:2% auto 0 auto; overflow: hidden;}
.m_vod_box2 li {float:left; padding:0;}
/*.m_vod_box2 li:nth-child( 2n ) {padding-right:0;}*/
.m_vod_box2 li .vod_photo {border:1px solid #c7cac9;}
.m_vod_box2 li .vod_txt {font-weight:500; line-height:18px; padding:3% 0 5% 0; width:100%; display:inline-block;}
.m_vod_box2 iframe {width:360px;}


@media all and (max-width: 1200px) {
	
}

@media all and (max-width: 1000px) {
	
}



.it { font-style: italic; }