@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* 그누보드 */
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
.btn_admin { display: none; }

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {display:inline-block;position:relative;max-width:none;background:none;text-align:left;}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden;}
#captcha #captcha_img {height:40px;border:1px solid #ccc;vertical-align:top;padding:0;margin:0;border-radius:3px}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat  0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top}
#captcha #captcha_info {display:block;margin:5px 0 0;font-size:80%;color:#ff0000;letter-spacing:-0.1em}

/* 게시판 */
#bo_v_img { width:100%; overflow:hidden; zoom:1 }
#bo_v_img img { margin-bottom:20px; max-width:100%; height:auto }

/* 커스텀 */
select { font-size: 14px; }

#footer .logo img {	filter: grayscale(1); top: 0px; }

#latest h4 a { color: #000; }
#latest h4 a:hover { text-decoration: none; }
#latest li a { color: #777; }

.dropdown-item { font-size: 14px; }

.ck.ck-editor__editable { min-height: 200px !important; }

/*
.title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%; }
*/

.ec-blue1 {background-color: #007ed7 !important;}
.ec-blue1--text {color: #007ed7 !important;}

.navtop {color:#fff; padding:0; height: 40px;}
.navtop .wlink, .navtop .nav-link  {color:#fff; }
.navtop .wlink:hover, .navtop .nav-link:hover{text-decoration: underline;}

.top-search {border:3px solid #017ed8}
.top-search > input {line-height: 44px; outline: none; padding: 0 4px; width: 100px; border: none; } 
.top-search > button {display: inline-block; width: 44px; line-height: 44px; background-color: #017ed8; color: #fff; border:none; margin: 0;}

@media (min-width:1200px){ 
    .top-search > input {width: 240px;}
}

#gnb .navbar-nav .menu-item > a {font-family: 'Noto Sans KR', sans-serif; font-size: 17px; font-weight: 700; text-transform: uppercase; color:#333; border-top:2px solid transparent; border-bottom: 2px solid transparent;}
#gnb .navbar-nav .menu-item.menu-60 > a, 
#gnb .navbar-nav .menu-item.menu-10 > a,  
#gnb .navbar-nav .menu-item.menu-20 > a, 
#gnb .navbar-nav .menu-item.menu-30 > a {color :#007ed7}
#gnb .navbar-nav .menu-item > a.active {border-bottom: 2px solid #007ed7;}
#gnb .dropdown-menu a {overflow: hidden; text-overflow: ellipsis; text-transform: uppercase;}
#gnb .dropdown-menu {width: calc(100vw - 30px);}
@media (min-width:500px){ /*테블릿 세로 MD*/
    #gnb .dropdown-menu {width: calc(100vw - 40px);}
}

@media (min-width:520px){ /*테블릿 세로 MD*/
    #gnb .dropdown-menu {width: auto; max-height: 600px; overflow: auto;}
}

.subpage {min-height: calc(100vh - 672px);}

/* 메인 상단 */
#mainSlider {font-family: 'Noto Sans KR', sans-serif;}
#mainSlider .slidebg {height: 300px; background:  no-repeat center top/cover; font-size: 0.6em;}
#mainSlider .bg01 {background-image: url('../img/main/slide01.jpg');}
#mainSlider .bg02 {background-image: url('../img/main/slide02.jpg');}
#mainSlider .bg03 {background-image: url('../img/main/slide03.jpg');}

#mainSlider .slidebg .title {color: #fff; padding-top: 75px; max-width: 1140px; margin: 0 auto; position: relative; transition: all 0.3s;}
#mainSlider .slidebg .title .t1 {font-size: 1em; letter-spacing: -0.5px;}
#mainSlider .slidebg .title .t2 {font-size: 2em; letter-spacing: -0.5px;}
#mainSlider .slidebg .title .t3 {font-size: 4em; font-weight: bolder; line-height: 1em;}

#mainSlider .swiper-pagination-bullet {background:#fff; opacity: 0.5;}
#mainSlider .swiper-pagination-bullet-active {opacity: 1;}

@media (min-width:767px){ 
    #mainSlider .slidebg {height: 500px; font-size: 1em;}
    #mainSlider .slidebg .title {padding-top:120px}
}

/* 메인 상단 */
#mainSlider2 {font-family: 'Noto Sans KR', sans-serif; border: 1px solid #007ed7;}
#mainSlider2 .slidebg {height: 150px; background:  no-repeat center top/cover; font-size: 0.6em;}
#mainSlider2 .bg01 {background-image: url('../img/main/biolab/banner1.jpg');}
#mainSlider2 .bg02 {background-image: url('../img/main/biolab/banner2.jpg');}
#mainSlider2 .bg03 {background-image: url('../img/main/biolab/banner3.jpg');}
#mainSlider2 .bg04 {background-image: url('../img/main/biolab/banner4.jpg');}
#mainSlider2 .bg05 {background-image: url('../img/main/biolab/banner5.jpg');}
#mainSlider2 .bg06 {background-image: url('../img/main/biolab/banner6.jpg');}
#mainSlider2 .bg07 {background-image: url('../img/main/biolab/banner7.jpg');}
#mainSlider2 .bg08 {background-image: url('../img/main/biolab/banner8.jpg');}

#mainSlider2 .slidebg .title {position: relative; color: #4e4e4e;}
#mainSlider2 .bg01 .title .t1{ font-size: 1em; padding-top: 1em; font-style: italic;}

#mainSlider2 .bg02 .title .t1{position: absolute; left:90px; top:100px; font-size: 1.75em; color:#76af20}
#mainSlider2 .bg02 .title .t2{position: absolute; left:90px; top:145px; font-size: 0.875em; text-align: left;}

#mainSlider2 .bg03 .title .t1 b,
#mainSlider2 .bg03 .title .t2 b {color: #338696; font-weight: 400;}
#mainSlider2 .bg03 .title .t1 {text-align: right; position: absolute; right: 130px; top:20px}
#mainSlider2 .bg03 .title .t2 {text-align: left;position: absolute; left: 120px; top:193px}

#mainSlider2 .bg04 .title .t1 {position: absolute; top:45px; right:30px;}
#mainSlider2 .bg04 .title .t2 {position: absolute; top:80px; left:35px; font-size: 0.5em; text-align: left;}

#mainSlider2 .bg05 .title .t1 {position: absolute; top:85px; left:200px; color:#043a7c; text-align: left;}
#mainSlider2 .bg05 .title .t2 {position: absolute; top:110px; left:200px; color:#838383; font-size: 1.75em; text-align: left;}

#mainSlider2 .bg06 .title .t1 {position: absolute; top:60px; left:440px; font-weight: bold; font-size: 0.5em; }
#mainSlider2 .bg06 .title .t1 ul { padding :0; margin-left: -8px; }
#mainSlider2 .bg06 .title .t1 ul li {display:inline-block; margin-left:8px}
#mainSlider2 .bg06 .title .t1 ul li + li::before{content: "|"; display:inline; margin-right:8px} 
#mainSlider2 .bg06 .title .t2 {position: absolute; top:85px; left:440px; font-size: 0.875em; text-align: left;}
#mainSlider2 .bg06 .title .t3 {position: absolute; top:25px; left:440px; font-size: 1.25em; color: #023a73} 

#mainSlider2 .bg07 .title .t1 {position: absolute; top:60px; left:440px; font-weight: bold; font-size: 0.5em; }
#mainSlider2 .bg07 .title .t1 ul { padding :0; margin-left: -8px; }
#mainSlider2 .bg07 .title .t1 ul li {display:inline-block; margin-left:8px}
#mainSlider2 .bg07 .title .t1 ul li + li::before{content: "|"; display:inline; margin-right:8px} 
#mainSlider2 .bg07 .title .t2 {position: absolute; top:85px; left:440px; font-size: 0.875em; text-align: left;}
#mainSlider2 .bg07 .title .t3 {position: absolute; top:25px; left:440px; font-size: 1.25em; color: #023a73} 

#mainSlider2 .bg08 .title .t1 {position: absolute; top:60px; left:440px; font-weight: bold; font-size: 0.5em; }
#mainSlider2 .bg08 .title .t1 ul { padding :0; margin-left: -8px; }
#mainSlider2 .bg08 .title .t1 ul li {display:inline-block; margin-left:8px}
#mainSlider2 .bg08 .title .t1 ul li + li::before{content: "|"; display:inline; margin-right:8px} 
#mainSlider2 .bg08 .title .t2 {position: absolute; top:85px; left:440px; font-size: 0.875em; text-align: left;}
#mainSlider2 .bg08 .title .t3 {position: absolute; top:25px; left:440px; font-size: 1.25em; color: #023a73} 


#mainSlider2 .swiper-button-white {--swiper-navigation-color :#007ed7; }
#mainSlider2 .swiper-pagination-bullet {background:#007ed7; opacity: 0.5;}
#mainSlider2 .swiper-pagination-bullet-active {opacity: 1;}

@media (min-width:767px){ 
    #mainSlider2 .slidebg {height: 257px; font-size: 1em;}
    /* #mainSlider2 .slidebg .title {padding-top:120px} */
}



/* 서브 상단 */
#subTop {background: url(../img/sub/sub_bg_0.jpg) no-repeat center top/cover; display: flex; justify-content: center; align-items: center; height: 250px;}
#subTop.bg10 {background-image: url(../img/sub/sub_bg_1.jpg);}
#subTop.bg20 {background-image: url(../img/sub/sub_bg_2.jpg);}
#subTop.bg30 {background-image: url(../img/sub/sub_bg_3.jpg);}
#subTop.bg40 {background-image: url(../img/sub/sub_bg_4.jpg);}
#subTop.bg50 {background-image: url(../img/sub/sub_bg_5.jpg);}

#subTop .title {color: #fff; max-width: 1140px; margin: 0 auto; position: relative;}
#subTop .title .t1 {font-size: 1em; letter-spacing: -0.5px;  }
#subTop .title .t2 {font-size: 2em; letter-spacing: -0.5px; animation-delay: 1s; }
#subTop .title .t3 {font-size: 4em; font-weight: bolder; line-height: 1em; }

/* 서브 네비 */
#sub_nav {position: relative; border-bottom: 1px solid #eaeaea; z-index: 10;}
#sub_nav .m-cont {display: flex; overflow: visible; }
#sub_nav .home {display: block; height: 36px; width: 36px;line-height: 36px; color:#222; text-align: center; font-size: 1em; -webkit-transition: all 0.3s; transition: all 0.3s;}
#sub_nav .subSelect { position: relative; width: calc(40% - 18px);} 
#sub_nav .subSelect + .subSelect{ width: calc(60% - 18px);} 
#sub_nav .subSelect > button {font-family: "Noto Sans KR", sans-serif; color:#222; display: block; border: none; background: #fff; height: 36px; width: 100%; outline: none; text-align: left; position: relative; padding-left: 10px; font-size: 14px; font-weight: 500; z-index: 20; -webkit-transition: all 0.3s; transition: all 0.3s; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-transform: uppercase;}
#sub_nav .subSelect > button .fas {transition: all 0.3s ease;}
#sub_nav .subSelect > button.drop .fas {transform: rotate(180deg);}
#sub_nav .subSelect .dep2 {color: #222; font-weight: 300; letter-spacing: -1px; text-transform: uppercase; }
#sub_nav .subSelect > button .fas {position: absolute; right: 10px;
     font-size: 18px; color:#999fa4; -webkit-transition: all 0.3s; transition: all 0.3s;}
#sub_nav .subSelect > ul {position: absolute; display:none; background: #fff; padding: 10px 0; width: calc(100% + 2px); left:-1px;
	border: 1px solid #eaeaea; font-family: "Noto Sans KR", sans-serif; border-top:none; list-style: none;
	box-shadow: 0 10px 20px rgba(0,0,0,0.12), 0 6px 6px rgba(0,0,0,0.18);
	max-height: 600px; overflow: auto;
}
#sub_nav .subSelect > ul li b, 
#sub_nav .subSelect > ul li a {display: block; padding-left: 10px; font-size: 14px; line-height: 26px; color: #999; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-transform: uppercase;}
#sub_nav .subSelect > ul li b {color: #0070d9; font-weight: 500; }
#sub_nav .subSelect > ul li a:hover {background: #f9f9f9; color: #222;}

@media (min-width:767px){ /*테블릿 세로 MD*/
    #sub_nav .subSelect > button {display: block; width: 100%;  padding-right: 100px;}
    #sub_nav .subSelect {width: auto !important; }
		#sub_nav .subSelect + .subSelect {min-width:360px !important; }
/*	#sub_nav .home {border-left: 1px solid #eaeaea}*/
}

@media (min-width:992px){ /* 테블릿 가로 LG*/
	#sub_nav .home {height: 60px; width: 60px; line-height: 60px; }
	#sub_nav .subSelect > button  {height: 60px; line-height: 60px; font-size: 16px;}
    #sub_nav .subSelect > button .fas {line-height: 60px;}
}

/* 하단 */
#footer {background: #2d2d2d; font-family: 'Noto Sans KR', sans-serif; color:#fff;}
#foot-menu li {line-height: 1em; font-size: 1em;}
#foot-menu li > a {color:#279ff4; font-weight: bold;}
#foot-menu li > a:hover {color:#ccc;}
#foot-menu li + li {border-left: 1px solid #279ff4; padding-left: 8px;}
#footer .cpy {font-size: 0.875em; font-weight:100;}
#footer .foot-logo {line-height: 1.5em; font-size: 0.875em; font-weight: 100; }

#footer .customer .t1 {font-size: 1.25em; font-weight: 900;}
#footer .customer .t2 {font-size: 1.875em; font-weight: 900; color:#279ff4; line-height: 1em;}
#footer .customer .t3 {font-size: 1.25em; font-weight: 100;}

/* 메인 하단 */
#main-bottom {background:url('../img/main/bottombg.jpg') no-repeat center top/cover; height: 300px; 
    font-family: 'Noto Sans KR', sans-serif; flex-direction: column;
justify-content: center; align-items: center;}
#main-bottom span {font-size: 1.25em; font-weight: 300; margin-top:-40px }
#main-bottom div {color:#fff; background: #000; height: 60px; width: 60px; text-align: center; line-height: 60px; margin-top:24px}


#main_visual h4 {font-weight: bold;}
#main_visual .product h6 { background-color: #007ed7; padding:20px;}
#main_visual .product h6 a {color:#fff; font-size: 1.125em; font-weight: bold;}
#main_visual .product.bg2 h6 { background-color: #29304a;}
#main_visual .product.bg3 h6 { background-color: #305f72;}

.main-swiper .imgbox {display: block; padding-top: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.main-swiper .subject, .main-swiper .content {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;}
.main-swiper .subject {font-weight: 700; color: #333;}
.main-swiper .content {font-weight: 300; color:#b1b1b1; font-size: 0.875em;}
.main-swiper .linker {position: relative; border-radius: 5px; overflow: hidden; padding: 10px}
.main-swiper .linker .over {position: absolute; left:0; top:0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);
display: flex; justify-content: center; align-items: center; opacity: 0; transition: all 0.3s; }
.main-swiper .linker:hover .over {opacity: 1;}
.main-swiper .swiper-button-grey {color:#dcdcdc}