@charset "utf-8";


/* ********************************* PC over : 1025 ~  ********************************* */

/* ******************** 공용 ******************** */
.main .part01 {position:relative;}

/* 비쥬얼 */

/* 메인 두번째 섹션(영상화면) */
main .sliderV2 {width:100%; height:650px; position:relative;}
main .sliderV2 .sliderObj {height:100% !important;}
main .sliderV2 .sliderObj>li {transform:scale(1.1)}
/*main .sliderV2 .sliderObj>li>div {position:relative;}*/
main .sliderV2 .sliderObj>li.on {transform:scale(1)}
main .sliderV2 .sliderButton {display:none;}
main .sliderV2 .sliderObj>li:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0);}
main .sliderV2 .txt { 
position:absolute; top:46%; left:50%; transform:translate(-50%, -50%);
text-align:left; color:#fff; font-size:21px; 
font-weight : 200; z-index:99;}
main .sliderV2 .txt h2 {color:#fff; font-size:3.75rem; font-family: 'TmonMonsori'; line-height:1.1;}
main .sliderV2 .txt h2 span {display:block; font-size:5rem;}
main .sliderV2 .txt p br.mob {display:none;}
main .sliderV2 .txt p {position:relative; color:#3fc67b; padding:40px 0 0 20px; font-size:1.12rem; font-weight:500; transform:rotate(0.03deg); line-height:1.2; }
main .sliderV2 .txt p:before {content:""; display:block; position:absolute; width:3px; height:60px; left:0; bottom:3px; background:#3fc67b;}
main .sliderV2 li:nth-of-type(2) .txt p {padding-top:30px;}
main .sliderV2 li:nth-of-type(2) .txt p:before {height:42px; bottom:1px;}
main .sliderV2 .controler.w_vw85 {position:relative;}

/* 메인 메뉴 버튼 */
main .menu_btn {display:flex; padding:55px 0 55px; }
main .menu_btn .cont {display: grid; grid-template-columns: repeat(4, 1fr); width: calc(50% - 150px);}
main .menu_btn .blank {width:50%;}
main .menu_btn .cont a {position:relative;}
main .menu_btn .cont a:hover dl dd {color:var(--blue);}
main .menu_btn .cont dl {position:relative; text-align:center;}
main .menu_btn .cont a+a:before {content:""; display:block; width:1px; height:26px; background:#c7c7c7; position:absolute; left:0; top:13%;}
main .menu_btn .cont dl dd {margin-top:15px; transform:rotate(.03deg);}
main .menu_btn dl dd {font-weight:500; color:#000; line-height:1.2;}

/* 뉴스 */
main .news_banner {position:absolute; clear:both; width:50%; height:360px; background: linear-gradient(to right bottom, #1f7cad 5%, #125286 35%, #0b396f 59%); background-size:cover; top:550px; right:0; z-index:100; padding: 50px 0 60px 70px; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 30px 4px; overflow:hidden;}
main .rollBanner {width:120%; overflow:hidden;}
main .rollBanner:before {content:""; width:380px; background:rgba(11, 57, 111, 0.5); height:100%; position:absolute; right:-30px; z-index:9;}
main .news_banner .top {display:flex; justify-content:space-between; width:83%; align-items: center;} 
main .news_banner h3 { position: relative; font-size: 1.12rem; font-weight: 600; color: #fff;
text-align: left; transform: rotate(0.03deg); }
main .news_banner h3:before {content: ""; display: block; position: absolute; right: -28px;
top: 8px; width: 17px; height: 2px; background: #fff;}
main .top .rollBtn {display:flex; gap:10px;}
main .top .rollBtn button { display:block; width:40px; height:40px; cursor:pointer; background:url(../images/main/icon_rollBanner.png) center no-repeat; border:1px solid rgba(255,255,255,0.3); border-radius:50%;}
main .top .rollBtn button:hover {background:url(../images/main/icon_rollBanner_B.png) center no-repeat; background-color:rgba(255,255,255,1); }
main .top .rollBtn button.prev {left:0; transform:rotate(180deg);}
main .top .rollBtn button.next {right:0;}
main .part02 .top {display:flex; width:83%; justify-content:space-between; }
main .rollWrap { width:90%; position:relative; }
main .rollWrap ul {position:relative;}
main .rollBanner ul li {width:430px;}
main .rollBanner ul li a .info {position:relative; padding:35px 0 0;}
main .rollBanner ul li a .info dt {font-size: 1.5rem; color: #fff; font-weight: 500;
overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-all; line-height:1.3;}
main .rollBanner ul li a .info dd {font-size: 1rem; color: #fff; font-weight: 400;
overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-all; margin-top:20px;
}
main .rollBanner ul li a .info > span {display:block; margin-top:10px; opacity:0.6; color:#fff;}
main .rollBanner .swiper-slide {opacity: 1; transition: opacity 0.3s;}

main .news_banner2 .top {display:flex; justify-content:space-between; width:100%; align-items: center;} 
main .news_banner2 h3 { position: relative; font-size: 1.12rem; font-weight: 600; color: #fff;
text-align: left; transform: rotate(0.03deg); }
main .news_banner2 h3:before {content: ""; display: block; position: absolute; right: -28px;
top: 8px; width: 17px; height: 2px; background: #fff;}
main .news_banner2 {position:absolute; clear:both; width:50%; height:360px; background: linear-gradient(to right bottom, #1f7cad 5%, #125286 35%, #0b396f 59%); background-size:cover; top:550px; right:0; z-index:100; padding: 50px 70px 60px 70px; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 30px 4px; overflow:hidden;}
main .top .rollBtn2 {display:flex; gap:10px;}
main .top .rollBtn2 button { display:block; width:40px; height:40px; cursor:pointer; background:url(../images/main/icon_rollBanner.png) center no-repeat; border:1px solid rgba(255,255,255,0.3); border-radius:50%;}
main .top .rollBtn2 button:hover {background:url(../images/main/icon_rollBanner_B.png) center no-repeat; background-color:rgba(255,255,255,1); }
main .top .rollBtn2 button.prev {left:0; transform:rotate(180deg);}
main .top .rollBtn2 button.next {right:0;}
main .rollBanner2 {overflow:hidden;}
main .rollBanner2:before {}
main .rollBanner2 ul li {width:430px;}
main .rollBanner2 ul li a .info {position:relative; padding:35px 0 0;}
main .rollBanner2 ul li a .info dt {font-size: 1.5rem; color: #fff; font-weight: 500;
overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:keep-all; line-height:1.3;}
main .rollBanner2 ul li a .info dd {font-size: 1rem; color: #fff; font-weight: 400;
overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-all; margin-top:20px;
}
main .rollBanner2 ul li a .info > span {display:block; margin-top:10px; opacity:0.6; color:#fff;}
main .rollBanner2 .swiper-slide {opacity: 1; transition: opacity 0.3s;}

/* interest */
.interest-btnWrap {display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:50px;}
.interest-btnWrap a {border:1px solid var(--border1); border-radius:10px; padding:50px 30px; font-size:20px; color:#999; font-weight:500; transform:rotate(0.03deg); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; line-height:1.4; display:flex
; flex-direction: column; justify-content: space-between; overflow:hidden; transition:all 0.3s;}
.interest-btnWrap a .cover {width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; top:0; left:0; z-index:-1;}
.interest-btnWrap a:hover {transform:translateY(-5px);}

.interest-btnWrap a.industrial-btn {background:url(/images/main/m-interest_btn1.webp) no-repeat center / cover;}
.interest-btnWrap a.energy-btn {background:url(/images/main/m-interest_btn2.webp) no-repeat center / cover;}
.interest-btnWrap a.sustainable-btn {background:url(/images/main/m-interest_btn3.webp) no-repeat center / cover;}
.interest-btnWrap a.battery-btn {background:url(/images/main/m-interest_btn4.webp) no-repeat center / cover;}
.interest-btnWrap a.safety-health-btn {background:url(/images/main/m-interest_btn5.webp) no-repeat center / cover;}

.interest-btnWrap a .topic {color:#fff;}
.interest-btnWrap a:hover .topic {color:#ffed1b;}
.interest-btnWrap a:hover {color:var(--green);}
.interest-btnWrap a .bottoms {display:flex; justify-content:space-between;}
.interest-btnWrap a i {display:block; order:2; width:50px;}
.interest-btnWrap a i img {width:100%;}
.interest-btnWrap a span.num {display:block; position:relative; font-size:20px; color:var(--green); padding-bottom:5px; margin-bottom:15px;}
.interest-btnWrap a span.num:before {content:""; display:block; width:25px; height:2px; background:var(--green); position:absolute; bottom:0;}
.interest-btnWrap a .arrow {position:relative; width:60px; height:2px; background:#fff; margin-top:40px; transition:all 0.3s;}
.interest-btnWrap a .arrow:before {content:""; display:block; width:20px; height:2px; transform:rotate(45deg); position:absolute; right:-4px; top:-7px; background:#fff;}
.interest-btnWrap a:hover .arrow {width:75px; background:#ffed1b;}
.interest-btnWrap a:hover .arrow:before {background:#ffed1b;}

/* Project */
main .part02 { padding:120px 0; background:url(../images/main/main_bg_logo.webp) no-repeat center; border-top:1px solid var(--border1);}
main .part02 .inner { display:flex; }
main .part02 .top {display:flex; justify-content:space-between; }
main .part02 .top h3 {font-size:2.25rem; color:#000;}
main .part02 .top a {display:inline-block; font-weight:500; transform:rotate(0.03deg);}
main .part02 .top a+a {margin-left:25px;}
main .part02 .left .top a+a:hover {color:var(--green);}
main .part02 .right .top a+a:hover {color:var(--blue);}
main .part02 .top a.on {color:#000; border-bottom:2px solid #000;}
main .part02 .cont {margin-top:60px;}
main .part02 .cont dt {color:#000;}
main .part02 .left {width:50%; padding-right:150px;}
main .part02 .left .cont a {display:block;}
main .part02 .left .cont a:hover dl {background:var(--green);}
main .part02 .left .cont a:hover dl dt { color:#fff; }
main .part02 .left .cont a:hover dl dd { color:#fff;}
main .part02 .left .cont dl {border:1px solid var(--border2); background:#fff; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; padding:35px 50px; transition:all 0.3s;}
main .part02 .left .cont dl dt {font-size:1.25rem; overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:keep-all; transition:all 0.3s; font-weight:500;} 
main .part02 .left .cont dl dd {font-size:14px; overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:keep-all; margin-top:5px; transition:all 0.3s;} 
main .part02 .left .cont dl dd span+span {padding-left:20px;}
main .part02 .left .cont a+a {margin-top:20px;}
main .part02 .right {width:50%;}
main .part02 .right .cont a {display:block;}
main .part02 .right .cont a:nth-of-type(1) dl {padding-bottom:25px;}
main .part02 .right .cont a:nth-of-type(2) dl {padding:25px 0; border-top:1px solid var(--border1); border-bottom:1px solid var(--border1);}
main .part02 .right .cont a:nth-of-type(3) dl {padding-top:25px;}
main .part02 .right .cont a dl dt {overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:keep-all; font-weight:500;}
/* main .part02 .right .cont a:hover dl dt {text-decoration:underline; text-underline-offset:4px; color:var(--blue); } */
main .part02 .right .cont a dl dd {margin-top:10px;}
main .part02 .right .cont a dl dd p {position:relative; padding-left:13px;}
main .part02 .right .cont a dl dd p:before {content:""; display:block; width:3px; height:3px; background:#2f85b3; position:absolute; left:0; top:12px;}

/* SPEID Lab Gallery */
main .part03 { background:#f0f2f5; padding:120px 0;}
main .gallery h3 {text-align:center; font-size:2.25rem; color:#000; font-weight:700; transform:rotate(0.03deg);}
main .gallery .list {display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:45px;}
main .gallery .list>li {overflow:hidden;}
main .gallery .list>li+li {}
main .gallery .list>li a:hover p{color:var(--green);}
main .gallery .list a {display:block; }
main .gallery .list a .img {width:100%; height:100%; aspect-ratio:1/.69; overflow:hidden; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;}
main .gallery .list a .img img{width:100%; height:100%; transition:all 1s; aspect-ratio: 1 / .69;
    object-fit: cover;}
main .gallery .list a p {overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:keep-all; color:#000; margin-top:25px; text-align:center; line-height:1.3; padding:0 10px;}
main .gallery .list a:hover img {transform:scale(1.1); }

	

	/* ********************************* 테블릿 : ~ 1024 ********************************* */
	@media screen and (min-width:1200px), print{
		
	}
/* ********************************* 테블릿 : ~ 1800 ********************************* */
@media screen and (max-width:1800px), print{ 
main .rollBanner:before {right:-90px;}
}

/* ********************************* 테블릿 : ~ 1800 ********************************* */
@media screen and (max-width:1500px), print{ 
main .rollBanner:before {right:-150px;}
}

/* ********************************* 테블릿 : ~ 1800 ********************************* */
@media screen and (max-width:1250px), print{ 
main .rollBanner:before {right:-80px;}
}

/* ********************************* 테블릿 : ~ 1200 ********************************* */
@media screen and (max-width:1199px), print{
main .sliderV2 {height:450px;}
main .sliderV2 .txt {left: 30px; transform:translateY(-50%);}
main .sliderV2 .txt h2 {font-size: 2.5rem;}
main .sliderV2 .txt h2 span {font-size:3.5rem;}
main .sliderV2 .txt p {font-size:1rem; padding:30px 0 0 15px;}
main .sliderV2 .txt p:before {height: 55px; bottom:2px; }
main .sliderV2 li:nth-of-type(2) .txt p:before {height:38px; bottom:1px;}
main .sliderV2 .pageType1 {bottom:3vh; left:30px;} 
main .sliderV2 .pageType1 button {width:30px; height:8px;}
main .menu_btn {padding:50px 0;}
main .menu_btn .cont {width:100%;}
main .news_banner {position:static; width:100%; height:320px; padding: 50px 40px 60px 40px; box-shadow: rgba(0, 0, 0, 0.25) 0px 13px 18px 2px;}


main .rollBanner ul li {}
main .rollBanner {width:100%;}
main .rollBanner ul li a .info dt {font-size:1.25rem;}
main .rollBanner ul li a .info dd {font-size:14px;}
main .rollBanner ul li a .info > span {font-size:14px;}

main .rollBanner ul li {max-width:none;}
main .rollBanner:before {display:none;} 


main .news_banner2 {position:static; width:100%; height:320px; padding: 50px 40px 60px 40px; box-shadow: rgba(0, 0, 0, 0.25) 0px 13px 18px 2px;}


main .rollBanner2 ul li {}
main .rollBanner2 {width:100%;}
main .rollBanner2 ul li a .info dt {font-size:1.25rem;}
main .rollBanner2 ul li a .info dd {font-size:14px;}
main .rollBanner2 ul li a .info > span {font-size:14px;}

main .rollBanner2 ul li {max-width:none;}
main .rollBanner2:before {display:none;} 

.interest-btnWrap {margin-top:80px; margin-bottom:0; padding:0 30px;}
.interest-btnWrap a {font-size:18px; padding:30px;}
.interest-btnWrap a i {width:40px;}
main .part02 {padding:80px 0; border-top:0;}
main .part02 .inner {display:flex; padding:0 30px; flex-direction:column;}
main .part02 .left {width:100%; padding-right:0; order:2;  margin-top:80px; }
main .part02 .right {width:100%; margin-top:0px; order:1;}
main .part02 .top h3 {font-size:1.8rem;}
main .part02 .cont {margin-top:40px;}
main .part02 .left .cont dl {padding:25px 35px;}
main .part02 .left .cont dl dt {font-size:1.15rem;}
main .part02 .right .cont a:nth-of-type(1) dl  {padding-bottom:20px;}
main .part02 .right .cont a:nth-of-type(2) dl  {padding:20px 0;}
main .part02 .right .cont a:nth-of-type(3) dl  {padding-top:20px;}
main .part02 .right .cont a dl dd {margin-top:5px;} 

main .part03 {padding:80px 0;}
main .part03 .inner {padding:0 30px;}
main .gallery h3 {font-size:1.8rem;}
main .gallery .list {gap:30px; grid-template-columns: repeat(2, 1fr);}
}

/* ************************ 모바일 (0~991) ************************ */
@media screen and (max-width: 991px) { 
main .rollBanner:before {right:-195px;}
.interest-btnWrap {grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(2, 1fr); margin-top: 60px;}
}
/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
main .sliderV2 {height:350px;}
main .rollWrap ul li {padding-right:50px;}
main .sliderV2 .txt {top:50%;}
main .sliderV2 .txt h2 {font-size:1.5rem;}
main .sliderV2 .txt h2 span {font-size:2.5rem;}
main .sliderV2 .txt p br.mob {display:block;}
main .sliderV2 .txt p:before {height: 56px;}
main .menu_btn {padding:30px 10px;}
main .menu_btn .cont dl dt img {width:50px;}
main .menu_btn .cont dl dd {margin-top:10px; font-size:14px;}

main .part01 .top {width:90%;}
main .news_banner {padding:50px 0 50px 30px}
main .rollBanner {width:100%;}
main .rollBanner:before {display:none;}

main .rollWrap ul li {padding-right:40px;}
main .rollWrap ul li a .info {padding-top:30px;}

main .news_banner2 {padding:50px 30px 50px 30px}
main .rollBanner2 {width:100%;}
main .rollBanner2:before {display:none;}

.interest-btnWrap a {font-size:16px; padding:30px 20px;}
.interest-btnWrap a span.num {font-size:18px;}
.interest-btnWrap a span.num:before {width:23px;}
.interest-btnWrap a .arrow {width:50px;}
.interest-btnWrap a:hover .arrow {width:75px;}
.interest-btnWrap {grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(2, 1fr); margin-top: 60px;}
main .rollWrap ul li {padding-right:40px;}
main .rollWrap ul li a .info {padding-top:30px;}

main .part02 {padding:50px 0;}
main .part02 .top {display:block;}
main .part02 .top h3 {font-size:1.5rem;}
main .part02 .top > div {margin-top:15px;}
main .part02 .cont {margin-top:30px;}
main .part02 .left .cont dl {padding:20px;}
main .part02 .left .cont dl dt {-webkit-line-clamp:2;}
main .part02 .left .cont dl dd {margin-top:20px;}
main .part02 .left .cont dl dd span {display:block;}
main .part02 .left .cont dl dd span+span {padding-left:0; padding-top:5px;}
main .part02 .left {margin-top:50px;}
main .part02 .right .cont a dl dd p:before {top:9px;}

main .part03 {padding:50px 0;}
main .gallery h3 {font-size:1.5rem;}
main .gallery .list {grid-template-columns:repeat(1,1fr); margin-top:30px;}
}

/* ************************ 모바일 (0~500) ************************ */
@media screen and (max-width: 500px) { 
.interest-btnWrap {padding:0 20px; margin-top:40px; grid-template-columns:repeat(1,1fr);}
.interest-btnWrap a {padding:20px;}
.interest-btnWrap a .arrow {margin-top:30px;}
}