@charset "utf-8";

.mtit { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem;  }
.mtit h3 { font-size: 4rem;  font-family: 'Poppins';  font-weight: 500; }
.mtit .more { width: 50px; height: 50px; background: rgba(255,255,255,0.1) url('../img/common/arrow_right.svg') no-repeat center; background-size: 100% auto; }
.mtit .more:hover { background-color: var(--green); }

@media all and (max-width:480px) {
  .mtit h3 { font-size: 3rem; }
  .mtit .more { width: 40px; height: 40px; }
}


/****************************************************************
메인 영상
****************************************************************/

.mainVod { position: relative; width: 100%; /*height: 0; padding-top: 56.25%;*/ height:100vh; padding:0; overflow: hidden;  }
/* .mainVod .mv-vod video { width:100%; display: block; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); object-fit: contain; overflow-clip-margin:content-box; overflow:clip; } */

.mainVod .mv-vod video {min-width:100%; display: block; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); object-fit: contain; overflow-clip-margin:content-box; overflow:clip}

.mainVod .mv-txt {  position: absolute;  }

@media all and (max-width:767px) {
  .mainVod { padding-top: 75%; }
}

@media all and (max-width:480px) {
  .mainVod { padding-top: 120%; }
}


/****************************************************************
 mSection01
****************************************************************/
#mSection01 .mv-txt {  top: 68%; left: 5%; max-width: 35%;   }
#mSection01 .mv-txt img { max-width: 100%; }


@media all and (max-width:1024px) {
  #mSection01 .mv-txt {  top: 78%; left: 3%; }
}

@media all and (max-width:568px) {
  #mSection01 .mv-txt {  top: 50%; left: 50%; transform: translate(-50%, -50%);  max-width: 80%; }
}


/****************************************************************
 mSection02
****************************************************************/
#mSection02 .mv-vod { opacity: 0.2; }
#mSection02 .mv-txt { left:0; top:0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column;
  background: rgba(0,0,0.0.3); background: linear-gradient(to bottom, rgba(0,0,0,0) 52%, #000000 100%); }
#mSection02 .mv-txt img { max-width: 30%; }
#mSection02  .mv-txt p { font-size: 3.6rem; font-weight: 300; margin-top: 1em;  line-height: 1.3em; }

@media all and (max-width:1280px) {
  #mSection02  .mv-txt p { font-size: 3.2rem; }
}

@media all and (max-width:1024px) {
  #mSection02  .mv-txt p { font-size: 2.8rem; }
}

@media all and (max-width:480px) {
  #mSection02 .mv-txt { padding: 0 8%; }
  #mSection02 .mv-txt img { max-width: 40%; }
  #mSection02  .mv-txt p { font-size: 3rem; }
}



/****************************************************************
 mSection03
****************************************************************/
#mSection03 { --margin: 40px; --gap: calc(var(--margin) * 2); position: relative; }
#mSection03 .bgline-top,
#mSection03 .bgline-bottom { z-index: 1; /*opacity: 0; transform: scale(0); */ transition: all 1s ease-out; width: 1800px; height: 700px; position: absolute; background-size: 100% auto; background-repeat: no-repeat; }
#mSection03 .bgline-top { top:6%; /*left: 100%;*/   background-image: url('../img/main/mSection03_bg.svg'); background-position: center top; }
#mSection03 .bgline-bottom { bottom: 6%; /*left: -100%;*/ background-image: url('../img/main/mSection03_bg2.svg'); background-position: center bottom; }
/* #mSection03 .bgline-top.aos-animate,
#mSection03 .bgline-bottom.aos-animate { transform: scale(1) translateX(-50%); opacity: 1; }
#mSection03 .bgline-top.aos-animate { left:50%; }
#mSection03 .bgline-bottom.aos-animate { left:50%;  } */


#mSection03 .m-inner { z-index: 2; }
#mSection03 .tit { margin-top: -4.8rem; }
#mSection03 .tit .typo { font-size: 4.8rem; line-height: 1.1em; background: #AAFFD7; background: linear-gradient(to bottom, #AAFFD7 0%, #226F4B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#mSection03 .tit .typo + p { margin-top: 2em; opacity: 0.56; line-height: 1.4em; }
#mSection03 .mCoreValue { padding: 7% 0;  }
#mSection03 .mCoreValue ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: flex-start;  width: calc(100% + var(--gap)); margin-left: calc(var(--margin)*(-1)); }
#mSection03 .mCoreValue ul li { position: relative; background: rgba(255,255,255,0.24); max-width: 452px; width: calc(100% / 3 - var(--gap)); margin: var(--margin);  padding: 1px;
                                            -webkit-clip-path: polygon(0 0, 21% 0, 44% 6%, 100% 6%, 100% 100%, 0 100%); clip-path: polygon(0 0, 21% 0, 44% 6%, 100% 6%, 100% 100%, 0 100%); }
#mSection03 .mCoreValue ul li .img { background: #000; -webkit-clip-path: polygon(0 0, 21% 0, 44% 6%, 100% 6%, 100% 100%, 0 100%); clip-path: polygon(0 0, 21% 0, 44% 6%, 100% 6%, 100% 100%, 0 100%);  }
#mSection03 .mCoreValue ul li .img img { opacity: 0.2; max-width: 100%; transform: scale(1); transition: all 0.3s ease-out; }
#mSection03 .mCoreValue ul li a:hover .img img { opacity: 0.4; transform: scale(1.1); }
#mSection03 .mCoreValue ul li .txt { position: absolute; left:0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#mSection03 .mCoreValue ul li .txt dt { font-size: 1.2rem; background: rgba(255,255,255,0.1); padding: 0.6em 1.1em; color: rgba(255,255,255,0.8); }
#mSection03 .mCoreValue ul li .txt dd { font-size: 2.9rem; margin-top: 0.6em; line-height: 1.3em; }
#mSection03 .mCoreValue ul li .txt dd em { font-weight: 700; }

#mSection03 .mProjects { padding: 7% 0 18%; }
#mSection03 .mProjects ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: flex-start;  width: calc(100% + var(--gap)); margin-left: calc(var(--margin)*(-1)); }
#mSection03 .mProjects ul li { position: relative; overflow: hidden; width: calc(100% / 3 - var(--gap)); margin: var(--margin); border: 1px solid rgba(255,255,255,0.08); box-sizing: border-box; }
#mSection03 .mProjects ul li a { display: block;  }
#mSection03 .mProjects ul li a .item-img {position: relative; height:0; padding-top: 145%;}
#mSection03 .mProjects ul li a .item-img .img {position:relative; width: 100%;transform: scale(1);transition: all 0.3s ease-out;position: absolute;top: 50%;left: 50%;height: 100%;transform: translate(-50%,-50%);background-size: cover;background-position: center center;}
#mSection03 .mProjects ul li a .item-img .img img,
#mSection03 .mProjects ul li a .item-img .img video {position:absolute; height:100%; top:50%; left:50%; transform: translate(-50%, -50%);}
#mSection03 .mProjects ul li a:hover .item-img .img { transform: translate(-50%,-50%) scale(1.1); }
#mSection03 .mProjects ul li a .item-box { position: absolute; left:0; bottom:-1px; width: 100%; height: 120px; overflow: hidden;  background: rgba(0,0,0,0.72);
                                        -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); -webkit-clip-path: polygon(0 0, 28% 0, 49% 33%, 100% 33%, 100% 100%, 0 100%);
                                        clip-path: polygon(0 0, 28% 0, 49% 33%, 100% 33%, 100% 100%, 0 100%);
                                        display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; align-items: flex-end; justify-content: space-between; }
#mSection03 .mProjects ul li a .item-box .item-txt { padding: 2.4rem; opacity: 0.8; }
#mSection03 .mProjects ul li a .item-box .item-txt .item-sort { font-size: 1.4rem; margin-bottom: 0.4em; font-weight: 300; }
#mSection03 .mProjects ul li a .item-box .item-txt .item-tit { font-size: 2.4rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 1; /* 라인 수 */-webkit-box-orient: vertical; word-wrap: break-word; }
#mSection03 .mProjects ul li a .item-box .item-more { transition: all 0.3s ease-out; width: 80px; height: 80px; background: rgba(255,255,255,0.08) url('/img/common/arrow_right.svg') no-repeat center; }
#mSection03 .mProjects ul li a:hover .item-box .item-more { background-color: var(--green); }

@media all and (max-width:1480px) {
  #mSection03 { --margin: 30px;  }
  #mSection03 .mCoreValue ul li .txt dd { font-size: 2.5rem;  }
}

@media all and (max-width:1280px) {
  #mSection03 .tit { margin-top: -2.8rem; padding: 2em 0;  }
  #mSection03 .tit .typo { font-size: 3.8rem; }
  #mSection03 .mCoreValue ul li .txt dd { font-size: 2rem;  }
}

@media all and (max-width:1024px) {
  #mSection03 .bgline-bottom { bottom: 2%; }

  #mSection03 .tit { margin-top: 0; padding: 3em 0;  }
  #mSection03 .tit .typo { font-size: 3rem; }

  #mSection03 .mCoreValue ul { width: 120%; }
  #mSection03 .mCoreValue ul li { }

  #mSection03 .mProjects { padding: 7% 0 22%; }
  #mSection03 .mProjects ul li { width: calc(100% / 2 - var(--gap)); }
  #mSection03 .mProjects ul li a .item-box { height: 100px; }
  #mSection03 .mProjects ul li a .item-box .item-more { width: 70px; height: 70px; }
}

@media all and (max-width:767px) {
  #mSection03 { --margin: 15px;  }
  #mSection03 .mProjects ul li a .item-box .item-txt { padding: 1.8rem; }
  #mSection03 .mProjects ul li a .item-box .item-txt .item-sort { font-size: 1.2rem; }
  #mSection03 .mProjects ul li a .item-box .item-txt .item-tit { font-size: 2rem;  }
  #mSection03 .mProjects ul li a .item-box { height: 88px; }
  #mSection03 .mProjects ul li a .item-box .item-more { width: 60px; height: 60px; }
}

@media all and (max-width:568px) {
  #mSection03 .tit .typo { font-size: 3rem; }

  #mSection03 .mCoreValue ul { width: 130%; }
}

@media all and (max-width:480px) {
 #mSection03 .bgline-top { top:-2%; }
 #mSection03 .bgline-bottom {  bottom: 35%; }


  #mSection03 .mProjects ul li { width: calc(100% - var(--gap));}
  #mSection03 .mProjects ul li a .item-box .item-txt { padding: 2rem; }
}




/****************************************************************
 mSection04
****************************************************************/
#mSection04::before { content:''; width: 300px; height: 80px; background: #000; position: absolute; left:0; top:-1px; clip-path: polygon(0 0, 100% 0, 68% 100%, 0% 100%); z-index:10; }
#mSection04::after { content:''; width: 300px; height: 80px; background: #000; position: absolute; right:0; bottom:-1px; clip-path: polygon(32% 0, 100% 0, 100% 100%, 0% 100%); z-index:10; }
#mSection04 .mv-txt { bottom: 10%;  left: 5%;  }
#mSection04 .mv-txt .t1 { font-size: 4.8rem; font-weight: 600;  }
#mSection04 .mv-txt .t2 { opacity: 0.56; margin-top: 2em; line-height: 1.6em; }

@media all and (max-width:1280px) {
  #mSection04::before,
  #mSection04::after { width: 15%; height: 50px; }

  #mSection04 .mv-txt .t1 { font-size: 4.2rem; }
}

@media all and (max-width:1024px) {
 #mSection04.mainVod { padding-top: 62.5%; }
 #mSection04 .mv-txt { left: 0; bottom: 15%; width: 100%; padding: 0 7%; }
 #mSection04 .mv-txt .t1 { font-size: 3.8rem; }
}

@media all and (max-width:767px) {
  #mSection04::before,
  #mSection04::after {  height: 30px; }
  #mSection04.mainVod { padding-top: 80%; }
  #mSection04 .mv-txt .t1 { font-size: 3.4rem; }
   #mSection04 .mv-txt .t1 br { display: none; }
}

@media all and (max-width:480px) {
  #mSection04::before,
  #mSection04::after { display: none; }
  #mSection04.mainVod { padding-top: 120%; }
  #mSection04 .mv-txt { left: 50%; bottom: inherit; top:50%; transform: translate(-50%, -50%);}
}

@media all and (max-width:380px) {
  #mSection04 .mv-txt .t1 { font-size: 3.2rem; }
  #mSection04 .mv-txt .t2 { font-size: 0.9em; }
}


/****************************************************************
 mSection05
****************************************************************/
#mSection05 { padding: 10% 0 12%; background: url('../img/main/news_bg.png') no-repeat left bottom; background-size:cover; }
#mSection05 .newsList { --gap: calc(var(--margin) * 2); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: space-between;  /*width: calc(100% + var(--gap)); margin-left: calc(var(--margin)*(-1)); margin-top: calc(var(--margin)*(-1)); */}
#mSection05 .newsList .newsitems{  position: relative; overflow: hidden; /*width: calc(100% / 4 - var(--gap)); */}
#mSection05 .newsList .newsitems a .news-date { display: inline-block; font-size: 1.2rem; font-family: "eurostile-extended"; background: rgba(255,255,255,0.1); padding: 0.6em 1.2em 0.7em; color: rgba(255,255,255,0.8);  }
#mSection05 .newsList .newsitems a .news-img {  /*background: rgba(255,255,255,0.24);*/ padding: 1px; margin: 1.5rem 0;  -webkit-clip-path: polygon(55% 7%, 76% 0, 100% 0, 100% 100%, 0 100%, 0 7%); clip-path: polygon(55% 7%, 76% 0, 100% 0, 100% 100%, 0 100%, 0 7%);  }
#mSection05 .newsList .newsitems a .news-img .img { max-width: 100%; padding-top: 108%; transform: scale(1); transition: all 0.3s ease-out; -webkit-clip-path: polygon(55% 7%, 76% 0, 100% 0, 100% 100%, 0 100%, 0 7%); clip-path: polygon(55% 7%, 76% 0, 100% 0, 100% 100%, 0 100%, 0 7%); /*height: 350px;*/ background-size:cover; background-position:center center; }
#mSection05 .newsList .newsitems a .news-img .img img { position: absolute; left:0; top: 0; width: 100%; height: 100%; }

#mSection05 .newsList .newsitems a .news-txt h4 { font-size: 2rem; font-weight: 400; margin: 1.5rem 0; line-height: 1.3em; 
    overflow: hidden; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2; /* 라인 수 */-webkit-box-orient: vertical; word-wrap: break-word; 
}
#mSection05 .newsList .newsitems a .news-txt p { font-size: 1.4rem; opacity: 0.48; line-height: 1.5em; word-break: break-all;
    overflow: hidden; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2; /* 라인 수 */-webkit-box-orient: vertical; word-wrap: break-word; 
}
#mSection05 .newsList .newsitems a:hover .news-img .img { transform: scale(1.1); }
#mSection05 .newsList .newsitems a:hover h4 {color:var(--cr-primary); transition: all ease 0.3s;}

@media all and (max-width:1280px) {
  #mSection05 .newsList { --margin: 15px; }
}

@media all and (max-width:1024px) {
  #mSection05 { padding: 15% 0 20%; }
  /* #mSection05 .newsList li { width: calc(100% / 2 - var(--gap)); max-width: 374px; } */
}

@media all and (max-width:767px) {
  #mSection05 { padding: 15% 0 25%; }
}

@media all and (max-width:480px) {
  #mSection05 { padding: 18% 0 35%; }
  /* #mSection05 .newsList { overflow: visible; width: 190%; } */

}