@charset "utf-8";

.sec-header {background-color: transparent;}

.logo,
.sec-header.hd-down .logo {background:url('../img/common/logoW.png') center no-repeat !important; background-size:contain !important;}
.sec-header.on .logo,
.sec-header.fixed .logo {background-image:url('../img/common/logo.png') !important;}

#gnb > ul > li > a {color: #fff;}
.loginUl {color: #fff;}
#nav-icon span {background: #fff;}


#main {}
/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; position:relative; min-height: 650px;}
#mainVisual .mainVisualWrap, 
#mainVisual .mainVisualCon, 
#mainVisual .slick-list,  
#mainVisual .slick-track, 
.item{
	height:100%;
}

.mainVisualWrap {position:relative; z-index:2;}

/* 메인 비주얼 ::이미지 */
#mainVisual .item {position:relative;}
#mainVisual .item .img{
	width:100%;
	height:100%;
	background-size:cover !important;
	-ms-transform:scale(1.1,1.1);
    -o-transform:scale(1.1,1.1); 
    -moz-transform:scale(1.1,1.1); 
    -webkit-transform:scale(1.1,1.1); 
     transform:scale(1.1,1.1);
	-webkit-transition:transform 5000ms  ease-in-out ;
	-moz-transition:transform 5000ms ease-in-out ;
	-o-transition:transform 5000ms ease-in-out ;
	-ms-transition:transform 5000ms ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}

#mainVisual .item .text_box h3.title,
#mainVisual .item .text_box .text {
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform:translateY(-50px); 
    -o-transform:translateY(-50px); 
    -moz-transform:translateY(-50px);
    -webkit-transform:translateY(-50px); 
     transform:translateY(-50px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}

/* 메인 비주얼 ::텍스트 */
#mainVisual .item .text_box {position:absolute; width: 100%; height: 100%; top: 3%; display:flex; align-items: center; flex-direction: column; justify-content: center; width:100%; color: #fff; text-align: center; padding: 0 20px;}
#mainVisual .item .text_box h3.title {display:block; line-height:120%; margin-bottom: 60px; font-weight: 200; word-break: keep-all;}
#mainVisual .item .text_box h3.title > b {font-weight:600;}
#mainVisual .item .text_box .text {margin-bottom: 80px;}
#mainVisual .item .text_box .text > p {font-size: 1em; margin-top: 5px; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); word-break: keep-all;}
#mainVisual .item .text_box .moreBtn {background-color:rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff;}
#mainVisual .item .text_box .moreBtn span.bul:before,
#mainVisual .item .text_box .moreBtn span.bul:after {background-color: #fff;}

/* 메인 비주얼 ::active효과 */
#mainVisual .item.active-item .img{
	-ms-transform:scale(1.0,1.0) rotate(0.0001deg);
    -o-transform:scale(1.0,1.0) rotate(0.0001deg);
    -moz-transform:scale(1.0,1.0) rotate(0.0001deg);
    -webkit-transform:scale(1.0,1.0) rotate(0.0001deg);
     transform:scale(1.0,1.0) rotate(0.0001deg);
}
#mainVisual .item.active-item h3.title,
#mainVisual .item.active-item .text,
#mainVisual .item.active-item .moreBtn{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform:translateX(0px); 
    -o-transform:translateX(0px); 
    -moz-transform:translateX(0px);
    -webkit-transform:translateX(0px); 
     transform:translateX(0px);
}

	@media screen and (max-width:1024px){
	}

	@media screen and (max-width:999px){
		#mainVisual .item .text_box h3.title {margin-bottom: 50px;}
	}

	@media screen and (max-width:799px){
		#mainVisual .item .text_box h3.title.fs72 {font-size: 2.93rem !important;}
	}

	@media screen and (max-width:599px){
		#mainVisual .item .text_box h3.title {margin-bottom: 30px;}
		#mainVisual .item .text_box h3.title.fs72 {font-size: 2.04rem !important;}
	}

	@media screen and (max-width:499px){
		#mainVisual .item .text_box h3.title.fs72 {font-size: 1.73rem !important;}
		#mainVisual .item .text_box .text {margin-bottom: 20px;}
		#mainVisual .item .text_box .text > p {margin-top: 0;}
	}


#mainVisual .slick-arrow {position:absolute; bottom:155px; width:70px; height:70px; background-color:inherit; background-repeat:no-repeat; background-position:50% 50%; margin-top:-35px; cursor:pointer; border:0; cursor:pointer; z-index:9999; font-size:0; border:1px solid rgba(255,255,255,0.3); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

#mainVisual .slick-arrow.slick-prev {left:calc(50% - 700px); background-image:url('../img/main/prevBtn.png');}
#mainVisual .slick-arrow.slick-next {left:calc(50% - 631px); background-image:url('../img/main/nextBtn.png'); border-left:0;}
#mainVisual .slick-dots {position:absolute; left:calc(50% - 600px); top:29%; z-index:1099;}
#mainVisual .slick-dots li {display:inline-block; margin:0 1px; width:30px; height:2px; overflow:hidden; font-size:0;}
#mainVisual .slick-dots li button {width:100%;}

#mainVisual .slick-counter {position:absolute; width:1400px; top:50%; left:calc(50% - 694px); margin-top:-210px; z-index:1009;}
#mainVisual .slick-counter .active {color:#fff;}
#mainVisual .slick-counter .total {color:#fff;}

/*scroll icon */
@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform:translateY(0);}
	40% {-webkit-transform:translateY(-30px);}
	60% {-webkit-transform:translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform:translateY(0);}
	40% {transform:translateY(-30px);}
	60% {transform:translateY(-15px);}
}
.scrollDown{position:absolute; bottom:3%; width:100%; text-align:center; z-index:999;}
.scrollDown.bounce {display:block; animation:bounce 2.5s infinite;}

	@media screen and (max-width:999px){
	}

	@media screen and (max-width:799px){
	}

	@media screen and (max-width:599px){
	}

	@media screen and (max-width:499px){
		.scrollDown.bounce img {width: 16px;}
	}


/* default */

#mainContents {}
#mainContents .section {padding: 120px 0;}
#mainContents .section h3 {margin-bottom: 30px; font-weight: 600;}
#mainContents .section h3  .sTit {display: block; margin-bottom: 10px; font-weight: 300;}
#mainContents .section p {word-break: keep-all;}

	@media screen and (max-width:1449px) {
		#mainContents .section {padding: 100px 0;}
	}
	@media screen and (max-width:1024px) {
		#mainContents .section {padding: 80px 0;}
	}

	@media screen and (max-width:799px) {
		#mainContents .section {padding: 60px 0;}
		#mainContents .section h3 {margin-bottom: 20px;}
	}

	@media screen and (max-width:499px) {
		#mainContents .section {padding: 40px 0;}
	}

/* 그래핀 소개 */
#mainContents .mainAbout {display: flex; align-items: center; padding: 0; background-color: #fafafa;}
#mainContents .mainAbout > div {width: 50%;}
#mainContents .mainAbout > .image {padding-top: 50%; background:url('../img/main/mainAboutImg.jpg') center no-repeat; background-size: cover;}
#mainContents .mainAbout > .cont {padding: 4%;}
#mainContents .mainAbout > .cont > h3 {color: #1a9940;}
#mainContents .mainAbout > .cont > h3 .sTit {color: #333;}
#mainContents .mainAbout > .cont > .text > p {word-break: keep-all; margin-bottom: 20px;}
#mainContents .mainAbout > .cont > .text > p:last-child {margin-bottom: 0;}
#mainContents .mainAbout > .cont > .moreBtn {margin-top: 40px;}

	@media screen and (min-width:1025px) and (max-width:1199px) {
		#mainContents .mainAbout > .image {padding-top: 65%;}
		#mainContents .mainAbout > .cont > h3.fs46 {font-size: 2.0rem !important;}
	}
	
	@media screen and (max-width:1024px) {
		#mainContents .mainAbout > .image {padding-top: 70%;}
	}
	
	@media screen and (max-width:949px) {
		#mainContents .mainAbout {flex-direction: column;}
		#mainContents .mainAbout > div {width: 100%;}
		#mainContents .mainAbout > .image {padding-top: 50%;}
		#mainContents .mainAbout > .cont {padding: 50px 4%;}
	}
	
	@media screen and (max-width:799px) {
		#mainContents .mainAbout > .cont > h3.fs46 {font-size: 1.87rem !important;}
	}
	
	@media screen and (max-width:599px) {
		#mainContents .mainAbout > .image {padding-top: 300px;}
		#mainContents .mainAbout > .cont > h3.fs46 {font-size: 1.56rem !important;}
		#mainContents .mainAbout > .cont > .moreBtn {margin-top: 30px;}
	}
	
	@media screen and (max-width:499px) {
		#mainContents .mainAbout > .image {padding-top: 200px;}
		#mainContents .mainAbout > .cont {padding: 30px 4%;}
		#mainContents .mainAbout > .cont > .text > p {margin-bottom: 10px;}
	}


/* 그래핀 적용분야 */
#mainContents .mainFields {position: relative;background-size: cover; background-repeat: no-repeat; background-position: center;}
#mainContents .mainFields .container > ul {display: flex; flex-wrap: wrap; justify-content: center; gap: 1vw; margin:0 -0.5vw;}
#mainContents .mainFields .container > ul > li {position: relative; width: calc(25% - 1vw); padding-top: calc(25% - 1vw); border-radius: 10px; overflow: hidden; cursor: pointer;}
#mainContents .mainFields .container > ul > li > .image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(4px); background-color: #000; transform: scale(1); transition: 0.3s;}
#mainContents .mainFields .container > ul > li > .image > img {position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5;}
#mainContents .mainFields .container > ul > li > .info {position: absolute; left: 0; bottom: 0; width: 100%; padding: 25px; color: #fff; text-shadow: 3px 3px 3px rgba(0,0,0,0.3);}
#mainContents .mainFields .container > ul > li > .info > h4 {font-weight: 600; margin-bottom: 10px; }
#mainContents .mainFields .container > ul > li > .info > p {word-break: keep-all; line-height: 1.4em; min-height: 75px;}
#mainContents .mainFields .container > ul > li:hover > .image {transform: scale(1.1);}
#mainContents .mainFields .container > ul > li:hover > .image > img  {opacity: 0.9;}

	@media screen and (max-width:1199px) {
		#mainContents .mainFields .container > ul > li > .info {padding: 15px;}
	}
	
	@media screen and (max-width:1024px) {
		#mainContents .mainFields .container > ul > li {width: calc(50% - 1vw); padding-top: calc(35% - 1vw);}
		#mainContents .mainFields .container > ul > li > .info > p {min-height: auto;}
	}

	@media screen and (max-width:699px) {
		#mainContents .mainFields .container > ul > li {width: calc(50% - 1vw); padding-top: calc(50% - 1vw);}
		#mainContents .mainFields .container > ul > li > .info > p {min-height: 75px;}
	}

	@media screen and (max-width:599px) {
		#mainContents .mainFields .container > ul > li {width: 100%; padding-top: 200px;}
		#mainContents .mainFields .container > ul > li > .info {padding: 25px 20px;}
		#mainContents .mainFields .container > ul > li > .info > p {min-height: inherit;}
	}


/* K-Phene 인증마크 */
#mainContents .mainMark {background-color: #ddd; color: #fff; padding: 0; background-image: url('../img/main/mainMarkBg.jpg'); background-size: cover; background-position: center 20%; background-color: #000;}
#mainContents .mainMark .container {display: flex; justify-content: space-between; height: 522px;}
#mainContents .mainMark .container > div:nth-child(1) {width: 60%;}
#mainContents .mainMark .container > div:nth-child(2) {width: 40%; align-items: center;}
#mainContents .mainMark .container > div {display: flex; flex-direction: column; justify-content: center; height: 100%;}

#mainContents .mainMark .info > h3 {color: #1a9940;}
#mainContents .mainMark .info > h3 .small {font-weight: 300; color: #fff;}
#mainContents .mainMark .info > h3 .sTit {color: #fff;}
#mainContents .mainMark .info .moreBtnWrap {display: flex; gap: 10px; margin-top: 50px;}
#mainContents .mainMark .info .moreBtnWrap > .moreBtn {border: 1px solid rgba(255,255,255, 0.6); color: #fff;}
#mainContents .mainMark .info .moreBtnWrap > .moreBtn span.bul:before,
#mainContents .mainMark .info .moreBtnWrap > .moreBtn span.bul:after {background-color: #fff;}

#mainContents .mainMark .mark {text-align: center; background-color: rgba(0,0,0,0.2); backdrop-filter: blur(4px); }
#mainContents .mainMark .mark > img {max-width: 300px;}

	@media screen and (max-width:1199px) {
		#mainContents .mainMark .container {height: 472px;}
		#mainContents .mainMark .mark > img {max-width: 250px;}
	}

	@media screen and (max-width:1024px) {
		#mainContents .mainMark .container > div:nth-child(2) {margin-right: -4%;}
	}

	@media screen and (max-width:999px) {
		#mainContents .mainMark .container {flex-direction: column-reverse; height: auto; padding: 60px 0;}
		#mainContents .mainMark .container > div:nth-child(1) {width: 100%; align-items: center; padding: 0;}
		#mainContents .mainMark .container > div:nth-child(2) {width: 100%; margin-bottom: 40px;}
	
		#mainContents .mainMark .info > h3 .sTit {text-align: center;} 
		#mainContents .mainMark .info > p {text-align:center;}

		#mainContents .mainMark .mark {background: none; backdrop-filter: none;}
		#mainContents .mainMark .mark > img {max-width: 200px;}
	}

	@media screen and (max-width:799px) {
		#mainContents .mainMark .info .moreBtnWrap{margin-top: 30px;}

		#mainContents .mainMark .mark > img {max-width: 150px;}
	}

	@media screen and (max-width:499px) {
		#mainContents .mainMark .info .moreBtnWrap{flex-direction: column; align-items: center; width: 100%;}
		#mainContents .mainMark .info .moreBtnWrap > .moreBtn {}
	}



/* 게시판 */
#mainContents .mainBoard {background: #fafafa;}
#mainContents .mainBoard .container {display: flex; gap: 50px;}
#mainContents .mainBoard .board {width:70%;}
#mainContents .mainBoard .board .tab-nav { display:flex; list-style:none; padding:0;}
#mainContents .mainBoard .board .tab-nav > li {display:flex; align-items: center; font-size: 1em;}
#mainContents .mainBoard .board .tab-nav > li:after {position: relative; display: block; width: 1px; height: 16px; background-color: #ddd; margin: 0 1.5vw; content: '';}
#mainContents .mainBoard .board .tab-nav > li:last-child:after {display: none;}
#mainContents .mainBoard .board .tab-nav a { display:block;}
#mainContents .mainBoard .board .tab-nav a.is-active {font-weight: 600; color: #20b04b;}
#mainContents .mainBoard .board .tab-panel {display:none; margin-top: 20px;}
#mainContents .mainBoard .board .tab-panel.is-active { display:block; }

	@media screen and (max-width:1199px) {
		#mainContents .mainBoard .board {width:65%;}
	}

	@media screen and (max-width:1024px) {
		#mainContents .mainBoard .board {width:63%;}
	}

	@media screen and (max-width:999px) {
		#mainContents .mainBoard .container {flex-direction: column;}
		#mainContents .mainBoard .board {width: 100%;}
	}


/* 그래핀개발원 */
#mainContents .mainBoard .partner {position: relative; width: 30%; padding-top: 38.5%;}
#mainContents .mainBoard .partner .banner {position:absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; top: 0; left: 0; background-image: url('../img/main/mainBannerBg.jpg'); background-size: cover; background-position: center; text-align: center; padding: 40px; color: #fff; border-radius: 10px;}
#mainContents .mainBoard .partner .banner > img {position: relative; max-width: 300px; margin-bottom: 50px; margin-top: -7%;}
#mainContents .mainBoard .partner .banner > h5 {font-weight: 600; margin-bottom: 20px;}
#mainContents .mainBoard .partner .banner > p {word-break: keep-all;}
#mainContents .mainBoard .partner .banner > a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

	@media screen and (max-width:1199px) {
		#mainContents .mainBoard .partner {width: 35%; padding-top: 470px;}
	}

	@media screen and (max-width:1024px) {
		#mainContents .mainBoard .partner {width: 37%;}
	}

	@media screen and (max-width:999px) {
		#mainContents .mainBoard .partner {width: 100%; padding-top: 0;}
		#mainContents .mainBoard .partner .banner {position: relative; padding: 40px 30px;}
		#mainContents .mainBoard .partner .banner > img {margin-top: 0; margin-bottom: 20px;}
		#mainContents .mainBoard .partner .banner > p > br {display: none;}
	}

	@media screen and (max-width:499px) {
		#mainContents .mainBoard .partner .banner > img {width: 100%;}
	}

.sec-footer {margin-top:0;}