@charset "utf-8";

/*메인공통*/
.sc-box {padding:3% 0 20px 0; }
.sc-box > .inner {position: relative; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%)}
.sc-box .title-box {padding:0 15px 30px 15px; text-align: center;}
.sc-box .title-box h2 {font-size: 4rem; color:#000; }
.sc-box .title-box p {font-size: 2rem; margin-top:5px;}
.sc-box .more-btn {border:1px solid #666; padding:5px 40px 5px 15px; background: url(../img/common/ico-more.png) no-repeat 90% 50%; font-size: 1.5rem; position: absolute; top: 72%; left: 30px; }

/*메인비주얼*/
.main-visual {position: relative; padding:0 !important; z-index : 2;}
.main-visual .txt-box {position: absolute; top:50%; left: 50%; width: 100%; max-width: 1270px; padding:0 15px; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); text-align: left; z-index: 2}
.main-visual .txt-box span {font-size:5.8rem; color:#00abe8; display: block; font-weight: 500; line-height: 1.3;}
.main-visual .txt-box p {font-size: 2.4rem; color:#fff; }
.main-visual .txt-box p:before {content: ''; display: block; width: 10%; height: 1px; background: #fff; margin: 3% 0;}
.main-visual .main-visual-slide div {display: block !important;}
.main-visual .slide-con {width: 100%; height:100%; }
.main-visual .slide-con > div {width: 100%; height: 100%; background-size: cover !important; }
.main-visual .video-box video {position: absolute; top:0; left: 0; width: 100%;}
.main-visual .video-box:after {content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top:0; left: 0;}

/*메인 인포*/
.main-info {position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.4); padding:25px 0;z-index:9999}
.main-info .main-search {float: left; width: 55%; z-index:3;}
.main-info .main-search .title {font-size: 2.2rem; color:#fff; background: url(../img/common/ico-file-search.png) no-repeat 0 60%; margin-right: 35px; vertical-align: middle; padding:5px 0 5px 45px; }
.main-info .main-search .search-box {overflow: hidden; border:3px solid #f7941d; display: inline-block; vertical-align: middle; width: calc(100% - 200px);}
.main-info .main-search .search-box input[type="text"] {background: transparent; height: 60px; border:0; width: calc(100% - 70px); color:#fff;}
.main-info .main-search .search-box .btn-search {width: 60px; height: 60px; background:url(../img/common/ico-search-orange.png) no-repeat 50% 50%; color:#fff; text-indent: -9999px; }
.main-info .weather-info {float: right; width: 40%; text-align: right; margin-top:8px;}
.main-info .weather-info .wet-area {display: inline-block; vertical-align: middle;}
.main-info .weather-info .wet-area span {font-size: 2rem; color:#fff; margin-right: 10px; vertical-align: middle;}
.main-info .weather-info .wet-area span:nth-of-type(2) {color:#e2b86f;}
.main-info .weather-info .wet-dust{ display: inline-block; vertical-align: middle; padding-left: 30px; margin-left: 20px; border-left: 1px solid rgba(255,255,255,0.2)}
.main-info .weather-info .wet-dust li {color:#fff; font-size: 1.6rem; text-align: left;}
.main-info .weather-info .wet-dust li span {min-width: 90px;}
.main-info .weather-info .wet-dust li strong {color:#fff;}

/*주요사업*/
.main-business .biz-list {overflow: hidden; margin:0 -15px;}
.main-business .biz-list li {float: left; width: 31.3%; border:2px solid #ddd; border-radius: 10px; padding:2% 30px; margin:1%; position: relative; min-height: 250px; background-position: 90% 90%!important; background-repeat: no-repeat !important; transition: all .3s ease; -webkit-transition: all .3s ease; background-size: 40% !important; cursor: pointer}
.main-business .biz-list li:nth-of-type(1){background-image: url(../img/main/ico-biz1.png);}
.main-business .biz-list li:nth-of-type(2){background-image: url(../img/main/ico-biz2.png);}
.main-business .biz-list li:nth-of-type(3){background-image: url(../img/main/ico-biz3.png);}
.main-business .biz-list li:nth-of-type(4){background-image: url(../img/main/ico-biz4.png);}
.main-business .biz-list li:nth-of-type(5){background-image: url(../img/main/ico-biz5.png);}
.main-business .biz-list li:nth-of-type(6){background-image: url(../img/main/ico-biz6.png);}
.main-business .biz-list li:hover {background: #0d6dbe; color:#fff; border-color:#0d6dbe}
.main-business .biz-list li:nth-of-type(1):hover {background-image: url(../img/main/ico-biz1-on.png);}
.main-business .biz-list li:nth-of-type(2):hover {background-image: url(../img/main/ico-biz2-on.png);}
.main-business .biz-list li:nth-of-type(3):hover {background-image: url(../img/main/ico-biz3-on.png);}
.main-business .biz-list li:nth-of-type(4):hover {background-image: url(../img/main/ico-biz4-on.png);}
.main-business .biz-list li:nth-of-type(5):hover {background-image: url(../img/main/ico-biz5-on.png);}
.main-business .biz-list li:nth-of-type(6):hover {background-image: url(../img/main/ico-biz6-on.png);}
.main-business .biz-list li:hover .more-btn {border-color:#fff; color:#fff; background: url(../img/common/ico-more-w.png) no-repeat 90% 50%;}
.main-business .biz-list li:hover dl dt,
.main-business .biz-list li:hover dl dd {color:#fff;}
.main-business .biz-list li dl dt {font-size: 2.5rem; color:#000; margin-bottom: 10px;}
.main-business .biz-list li dl dd {font-size: 1.6rem}
.main-business .biz-partner { padding:25px 70px 25px 15px; background: #f6f6f6; border-radius: 10px; margin-top:15px;}

/*메인탭*/
.main-tab {text-align: center; margin-bottom:10px;}
.main-tab .main-tab-nav {display: table; margin:0 auto; margin-bottom:40px; border-collapse: collapse;}
.main-tab .main-tab-nav li {display: table-cell; background: #fff; border:1px solid #ccc;}
.main-tab .main-tab-nav li.on {background: #0d6dbe; border-color:#0d6dbe}
.main-tab .main-tab-nav li.on a {color:#fff;}
.main-tab .main-tab-nav li a {display: block; padding:10px 10px; min-width: 180px; color:#000; font-size: 1.8rem}
.main-tab .main-tab-con > div{display: none;}
.main-tab .main-tab-con > div.on {display: block;}



/*메인 최근글*/
.main-notice {background: url(../img/main/section2-bg.jpg) no-repeat 50% 50%; background-size: cover; }
.main-notice .recent-post {margin:0 -10px;}
.main-notice .recent-post li {text-align: left; position: relative; padding:10px;}
.main-notice .recent-post li a {display: block; padding:30px 25px; min-height: 260px; transition: all .3s ease; -webkit-transition: all .3s ease; background: #fff;  }
.main-notice .recent-post li dl dt {font-size: 2rem; color:#000; overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;  line-height: 1.4em;  max-height: 2.8em;}
.main-notice .recent-post li dl dd {font-size: 1.6rem; margin:10px 0; overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;  line-height: 1.5em;  max-height: 6em; }
.main-notice .recent-post li .date {width: 100%; display: block; position: absolute; bottom: 20px; left:0px; padding-left: 35px; color:#999}
.main-notice .recent-post li .date:after {content: ''; display: block; width: 20px; height: 20px; border:1px solid #ddd; position: absolute; top:0; right: 25px; background: url(../img/common/ico-plus.png) no-repeat 50% 50%;}
.main-notice .recent-post li:hover a {background: #11acfe; color:#fff;}
.main-notice .recent-post li:hover dl dt {color:#fff;}
.main-notice .recent-post li:hover .date {color:#fff;}
.main-notice .recent-post li:hover .date:after {background: url(../img/common/ico-plus-blue.png) no-repeat 50% 50%; border-color:#b9e5fb}

/*메인 배너*/
.banner-info {overflow: hidden;}
.banner-info .platform {float: left; width: 49.1%; overflow: hidden; background: #f68906; position: relative;}
.banner-info .platform .txt-box {float: left; width: 50%; padding:30px; }
.banner-info .platform .txt-box dl dt {font-size: 2.2rem; color:#fff;}
.banner-info .platform .txt-box dl dt:after {content: ''; display: block; width: 50px; height: 1px; background: #fff; margin:10px 0 20px 0;}
.banner-info .platform .txt-box dl dd {color:#fff; font-size: 1.6rem;}
.banner-info .platform .txt-box .more-btn {border-color:#fff; color:#fff; background: url(../img/common/ico-more-w.png) no-repeat 90% 50%; }
.banner-info .platform .slide {float: right; width: 50%;}
.banner-info .platform .slide .img {display: block !important; position: relative; padding-top:95%;}
.banner-info .platform .slide .img a {display: block;}
.banner-info .platform .slide .img img {position: absolute; top:0; left: 0; width: 100%; height: 100%;}
.banner-info .banner-zone {float: right; width: 49.1%;  position: relative;}
.banner-info .banner-zone .img {display: block !important; position: relative; padding-top:47.5%;}
.banner-info .banner-zone .img img {position: absolute; top:0; left: 0; width: 100%; height: 100%;}
.banner-info .banner-zone .img a {display: block;}

/*성능시험*/
.perform-list {overflow: hidden; border:1px solid #ddd; text-align: left;}
.perform-list .txt-box {float: left; width: 40%; padding:5% 3%;}
.perform-list .txt-box h3 {font-size: 3.2rem; color:#000;}
.perform-list .txt-box h3:after {content: ''; display: block; width: 50px; height: 1px; background: #bbb; margin:15px 0 40px;}
.perform-list .link-btn {overflow: hidden;}
.perform-list .link-btn li {float: left; width: 48%; margin-right: 2%; margin-bottom: 2%;}
.perform-list .link-btn li a {display: block; padding:15px 30px 15px 15px; border:2px solid #bbb; font-size: 1.6rem; background: url(../img/common/ico-more.png) no-repeat 90% 50%; transition: all .3s ease; -webkit-transition: all .3s ease;} 
.perform-list .link-btn li a:hover {color:#fff; background:#CF4200 url(../img/common/ico-more-w.png) no-repeat 90% 50%; border-color:#CF4200}
.perform-list .link-btn li:nth-child(2n) {margin-right: 0;}
.perform-list .img-box {float: right; width: 60%; text-align: right;}

/*연구원안내*/
.main-about {background: #feebd3;}
.about-sec01{overflow: hidden;}
.main-about .video-box {float: left; width: 49.5%; margin-bottom: 1%;}
.main-about .lab-info {float: right; width: 49.5%; margin-bottom: 1%; background: #2d3640; min-height:300px; text-align: center; padding:3% 2% 0% 2%;}
.main-about .lab-info h3 {font-size:2.6rem; color:#fff; }
.main-about .lab-info h3:after {content: ''; display: block; width: 60px; height: 1px; background: #bbb; margin:15px auto 20px auto;}
.main-about .lab-info ul li {display: inline-block; width: 24%; transition: all 0.3s ease;}
.main-about .lab-info ul li:nth-of-type(1) {background: url(../img/main/ico-lab1.png)no-repeat 50% 0; background-size: 72%;}
.main-about .lab-info ul li:nth-of-type(1):hover{background-size: 77%;}
.main-about .lab-info ul li:nth-of-type(2) {background: url(../img/main/ico-lab3.png)no-repeat 50% 0; background-size: 72%;}
.main-about .lab-info ul li:nth-of-type(2):hover{background-size: 77%;}
.main-about .lab-info ul li:nth-of-type(3) {background: url(../img/main/ico-lab2.png)no-repeat 50% 0; background-size: 72%;}
.main-about .lab-info ul li:nth-of-type(3):hover{background-size: 77%;}
.main-about .lab-info ul li:nth-of-type(4) {background: url(../img/main/ico-lab4.png)no-repeat 50% 0; background-size: 72%;}
.main-about .lab-info ul li:nth-of-type(4):hover{background-size: 77%;}
.main-about .lab-info ul li a {color:#fff; display: block; padding-top:120px;}

.about-sec02{overflow: hidden;}
.main-about .quik-menu {clear: both; overflow: hidden; float: left; width: 25%;}
.main-about .quik-menu li {float: left; width: 47%; margin-right: 4%; margin-bottom: 4%; background: #a0b3c8 url(../img/main/ico-quik1.png) no-repeat center 30px; min-height: 122px; text-align: center; background-size: 45px; transition: all 0.2s ease;}
.main-about .quik-menu li:nth-of-type(2) {background: #0d6dbe url(../img/main/ico-quik2.png) no-repeat center 30px; background-size: 45px;}
.main-about .quik-menu li:nth-of-type(3) {background: #828c98 url(../img/main/ico-quik3.png) no-repeat center 30px; background-size: 45px;}
.main-about .quik-menu li:nth-of-type(4) {background: #374164 url(../img/main/ico-quik4.png) no-repeat center 30px; background-size: 45px;}
.main-about .quik-menu li:hover{background-size: 50px;  background-position: center 25px;}
.main-about .quik-menu li a {display: block; padding: 85px 0 10px; font-size: 1.6rem; color:#fff; transition: all 0.2s ease; }
.main-about .quik-menu li a:hover {transform: scale(1.05); transform-origin: center;}
.main-about .quik-menu li:nth-of-type(2n) {margin-right: 0;}



.main-about .partner-wrap{float: right; width: 74.5%; background: #fff; padding: 2.5% 2% 2%;} 
.main-about .partner-wrap h3{font-size: 2.2rem; color:#2f2f2f; text-align: center; margin-bottom: 14px; font-weight: 500;}
.main-about .partner-wrap ul{display: table; width: 100%;}
.main-about .partner-wrap ul li{display: table-cell; padding: 0.5%;}
.main-about .partner-wrap ul:nth-of-type(2) li{width: 25%;}

/*메인팝업*/
.layerpopup {position:absolute; top:25%; left:0; right:0; margin:0 auto; z-index:999; }
.layerpopup img {display:block; width:100%;}
.layerpopup_con { position:absolute; top:10%; width: 96%;  max-width: 580px;  left: 50%; transform: translateX(-50%); z-index:999;}
.layerpopup_con .footer {background:#000; color:#ccc; padding:9px 15px; overflow:hidden; clear:both; text-align: right;text-shadow: none;}
.layerpopup_con .footer a { float:right; color:#fff; display:block; margin-left: 20px; margin-top:1px; font-size: 1.5rem;}
.layerpopup_con .footer input {vertical-align: middle; margin:0; margin-right:8px; text-shadow: none;}
.layerpopup_con .footer input[type="checkout"] {vertical-align: middle;}
.layerpopup_con img {display:block; max-width:100%; width: 100%;}
.layerpopup_con > a {display: block;}
.layerpopup_con .check-set input[type="checkbox"]:checked + label {color:#fff;}

@media all and (max-width:1600px){ 
	
}
@media all and (max-width:1400px){ 
	.main-visual .txt-box {max-width: 1000px;}
	.main-visual .video-box video {width:auto; height: 100%;}
}


@media all and (max-width:1240px){ 
	.banner-info .platform .txt-box {padding:4%;}
	.sc-box .more-btn {position: relative; top:0; left: 0; margin-top:10px;}
	
}

@media all and (max-width:1000px){ 
	.sc-box {padding:30px 0;}
	.sc-box > .inner {top:0; transform: none; -webkit-transform: none;}
	
	.sc-box .title-box {padding-bottom: 20px;}
	.sc-box .title-box h2 {font-size:3rem; }
	
	.main-visual .slide-con {height: 500px;}
	.main-visual .txt-box {text-align: center; padding:0 40px;}
	.main-visual .txt-box p:before {margin:3% auto;}
	.main-visual .txt-box span {font-size: 3.5rem;}
	.main-visual .txt-box p {font-size: 2rem;}
	.main-visual .txt-box p br {display: none;}
	
	.main-info {padding:15px 0; text-align: center;}
	.main-info .main-search {float: none; width: 100%; display: inline-block}
	.main-info .main-search .search-box {width:calc(100% - 150px) }
	.main-info .main-search .search-box input[type="text"] {height: 40px;}
	.main-info .main-search .search-box .btn-search {height: 40px;}
	.main-info .main-search .title {margin-right: 15px; font-size: 1.7rem; background-size: 25px; background-position: 0 80%; padding-left: 30px;}
	.main-info .weather-info {display: none;}
	
	.main-business .biz-partner {padding:10px 40px 10px 10px}
	.main-business .biz-list {margin:0 -5px;}
	.main-business .biz-list li dl dt {font-size: 2.3rem;}
	
	.banner-info .platform, .banner-info .banner-zone {width: 49%;}
	.banner-info .platform .txt-box dl dt {font-size:2rem;}
	.banner-info .platform .txt-box dl dt:after {margin:7px 0 10px 0; width: 40px;}
	.banner-info .platform .slide .img {padding-top:140%;}
	.banner-info .banner-zone .img {padding-top:70%;}
	
	.perform-list .txt-box {padding:20px 15px;}
	.perform-list .txt-box h3 {font-size: 2.5rem;}
	.perform-list .txt-box h3:after {margin:10px 0 20px;}
	.perform-list .link-btn li a {padding:8px 20px 8px 10px; font-size: 1.5rem;}
	
	.main-about .lab-info {min-height: inherit; padding:3% 2%}
	.main-about .lab-info h3 {font-size: 2rem; }
	.main-about .lab-info h3:after {margin:10px auto 15px auto; width: 40px;}
	.main-about .lab-info ul li {background-size: 80px !important;}
	.main-about .lab-info ul li a {padding-top:90px; font-size: 1.6rem;}
	.main-about .quik-menu li {background-size: 40px !important; min-height: inherit}
	.main-about .quik-menu li a {padding: 70px 0 10px; font-size: 1.6rem;}
}

@media all and (max-width:768px){ 
	.sc-box .title-box {padding-bottom: 10px;}
	.sc-box .more-btn {top:0; left: 0; position: relative; margin-top:10px;}
	.sc-box .title-box p {font-size: 1.8rem; margin-top:0;}
	.main-tab .main-tab-nav {margin-bottom: 20px;}
	.main-tab .main-tab-nav li a {padding:5px 20px; min-width:inherit;}
	
	
	.main-business .biz-list li {width: 48%; background-size: 20% !important; min-height: 180px;}
	
	.main-notice .recent-post li a {padding:15px; min-height: auto;}
	.main-notice .recent-post li .date {position: relative; bottom: 0; padding-left: 0;}
	.main-notice .recent-post li .date:after {right: 0;}
	.main-notice .recent-post li dl dd {margin:10px 0;}
	
	.banner-info .platform, .banner-info .banner-zone {width: 100%; float: none;}
	.banner-info .platform {margin-bottom: 20px;}
	.banner-info .platform .txt-box{padding:15px;}
	.banner-info .platform .txt-box .more-btn {margin-top:10px;}
	.banner-info .platform .slide .img {padding-top:80%;}
	.banner-info .banner-zone .img {padding-top:50%;}
	
	.perform-list .img-box {display: none;}
	.perform-list .txt-box {float: none; width: 100%;}
	
	
	.main-about .video-box,
	.main-about .lab-info {float: none; width: 100%;}
	.main-about .lab-info {margin:15px 0;}
    .main-about .quik-menu{float: none; width: 100%;}
	.main-about .quik-menu li {width: 23.5%; margin-right: 2% !important; margin-bottom: 2%;}
	.main-about .quik-menu li:last-child {margin-right: 0 !important;}
    .main-about .partner-wrap{float: none; width: 100%;}
}

@media all and (max-width:480px){ 
	
	
	.main-tab .main-tab-nav li a {padding:5px 10px; font-size: 1.5rem;}
	
	.main-info .main-search .title {display: none;}
	.main-info .main-search .search-box {width: 100%;}
	
	.main-business .biz-list {margin:0;}
	.main-business .biz-list li {float: none; width: 100%; margin:0 0 15px 0; min-height: auto; padding:15px; background-position: 90% 80% !important;}
	.main-business .biz-list li dl dt {font-size: 2rem; margin-bottom: 0}
	.main-business .biz-list li dl dd {font-size: 1.5rem;}
	.main-business .biz-list li dl dd br{display: none;}
	
	.banner-info .platform .txt-box {float: none; width: 100%;}
	.banner-info .platform .slide {display: none;}
	
	.main-about .lab-info ul li {background-size: 50px !important}
	.main-about .lab-info ul li a {padding-top:60px;}
	
	.main-about .quik-menu li {background-size: 30px !important;}

}

@media all and (max-width:380px){
    .main-about .quik-menu li{width: 48%; margin-right: 4% !important; margin-bottom: 4% !important;}
    .main-about .quik-menu li:nth-of-type(2n){margin-right: 0% !important;}
}