/*mainStyle.css*/
@font-face {
    font-family: 'GongGothicLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body.dark-mode { background:#333; }
body.dark-mode h1, h2 , h3, p { color:#fff; }
body.dark-mode p,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode a { color:#fff; }
body.dark-mode button {
    background-color:#c71526;
    color:#fff;
}
body.light-mode h1, h2, h3, p, a { color:#333; }
body.light-mode button {
    background-color:#c71526;
    color:#eee
}
button { background:#e3e300; }
#darkLight {
    width:70px; height:90px; 
    font-size:3em;
    padding-left:0.5%;
    position:fixed;
    right:0; bottom:3%;
    border-radius:100px 0 0 100px;
    transition:all .3s;
    z-index:99999;
}
#darkLight:hover {
    width:130px;
    padding-left:1%;
    background-color:#111;
}

#arrows{}

#container{overflow: hidden; font-family: 'GongGothicLight';}
.sub1 img{max-width: 100%; text-align:center; height: auto; margin:auto; display: block;}
.sub2 img{max-width: 100%; text-align:center; height: auto; margin:auto; display: block;}
.sub3 img{max-width: 80%; text-align:center; height: auto; margin:auto; display: block;}


.bannerWrap{width: 100%; height: 1200px; position: relative;}
/* 슬라이더 레이어: 배경 위, 콘텐츠 아래 */
/* 총 3초(슬라이드 3장 × 1초) */
.bg2-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.bg2-slider .bg2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  animation: fadeSlide 16s infinite;
  transition: opacity 0.8s ease-in-out;
}

/* 각 이미지 딜레이 (4초 간격) */
.bg2-slider .s1 { animation-delay: 0s; }
.bg2-slider .s2 { animation-delay: 4s; }
.bg2-slider .s3 { animation-delay: 8s; }
.bg2-slider .s4 { animation-delay: 12s; }

@keyframes fadeSlide {
  0%   { opacity: 0; }
  6.25% { opacity: 1; }   /* fade in (16s * 6.25% = 1s) */
  25%  { opacity: 1; }    /* 유지 (4s) */
  31.25% { opacity: 0; }  /* fade out (1s) */
  100% { opacity: 0; }    /* 대기 */
}
/* 기본: PC에서는 보이게 (아무 변화 없음) */

/* 모바일(768px 이하)에서는 숨김 */
@media (max-width: 768px) {
  .bg2-slider {
    display: none !important;
  }
}
.title-bouncy{
  display: block;
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: center bottom;

  /* fadeInDown(1s, 0.3s 딜레이) → 끝나고 bounceSoft(무한) 시작 */
  animation-name: fadeInDown, bounceSoft;
  animation-duration: 1s, 3.8s;
  animation-delay: 0.3s, 1.5s;            /* fadeInDown(0.3s 후 시작), bounce는 그 이후 */
  animation-timing-function: ease, cubic-bezier(.34,1.56,.64,1);
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, both;        /* 사라짐 방지 */
}

/* 부드러운 더블 바운스 */
@keyframes bounceSoft{
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-14px); }
  55%  { transform: translateY(0); }
  70%  { transform: translateY(-7px); }
  85%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .title-bouncy{ animation: none; }
}
/* 배너 전체 래퍼 */
.bannerWrap {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  background-color: #e8761d;
}
/* bg1: 기본 배경(흐르는 요소 → 컨테이너 높이 생성) */
/* bg1: 기본 배경(흐르는 요소 → 컨테이너 높이 생성) */
.bannerWrap .bg1,
.bannerWrap .bg1 img{
  display: block;
  width: 100%;
  height: auto;
}

.bannerWrap .bg2{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 중앙 앵커 */
  height: 100%;     /* 세로 기준 채우기 */
  min-width: 100%;  /* 가로 부족 시 확장 */
  width: auto;
  z-index: 1;
  pointer-events: none;
}


/* PC 배경 이미지 */
.pc-bg {
  display: block;
}
.pc-bg img {
  width: 100%;
  height: auto;
  display: block;
}
/* 배경 이미지 (PC/Mobile 공통 처리) */
.bannerWrap picture,
.bannerWrap picture img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* 배너 내용 (중앙 정렬 + 투명 배경) */
.bannerInner{
  position: absolute;
  inset: 0;
  z-index: 2;          /* bg2(1)보다 위 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
  background: transparent;
}


/* 기존 .time-badge 위치/크기 유지 */
.time-badge{
  position:absolute;
  top:60px; right:15%;
  width:23vw; max-width:430px;
  height:auto; z-index:10;
}

/* 숫자 오버레이 박스: time 이미지와 정확히 겹치게 JS로 동기화됨 */
.d-day-text{
  position:absolute;
  z-index:11;
  pointer-events:none; /* 클릭 방해 X */
  /* 초기값은 임시. JS가 실제 좌표/크기로 덮어씀 */
  top:0; left:0; width:0; height:0;
  
}

/* time.png의 흰 네모 칸 영역(퍼센트는 미세 조정 가능) */
.d-day-text .grid{
  position:absolute;
  top:13.7%;
  left:32.5%;
  width:46%;
  height:20%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6%;
  
}

/* 각 칸 숫자 */
.d-day-text .digit{
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  font-size:clamp(12px, 2.2vw, 30px);
  line-height:1;
  color:#f6921e;
  transform:translateY(2%); /* 필요시 미세 보정 */
   font-family: 'YeogiOttaeJalnan';
}
/* ▼ 모바일 전용 (≤768px) ------------------------------------- */
@media (max-width: 768px) {
  /* 배지 이미지: 위치/크기 */
  .time-badge{
    position: absolute;
    top: 454px;        /* 배너 상단으로부터 거리 */
    right: 6%;        /* 오른쪽 여백 */
    width: 45vw;      /* 뷰포트 기준 가로폭 */
    max-width: 280px; /* 과도한 확대 제한 */
    height: auto;
    z-index: 10;
    display: block !important; /* 혹시 이전에 숨김 처리했다면 해제 */
  }

  /* 숫자 오버레이 상자: 배지와 같은 박스에 정확히 겹치게 */
  .d-day-text{
    position: absolute;
    top: 454px;        /* ↑ time-badge와 동일 */
    right: 6%;
    width: 45vw;
    max-width: 280px;
    height: auto;
    z-index: 11;      /* 배지 이미지 위 */
    pointer-events: none;
    display: block !important;
  }

  /* 숫자 4칸 영역(배지 내부의 흰 네모 영역 비율에 맞춰 조정) */
  .d-day-text .grid{
    position: absolute;
    top: 13.0%;   /* 수직 위치 */
    left: 32.5%;    /* 수평 위치 */
    width: 46%;   /* 전체 가로폭(칸+여백 포함) */
    height: 22%;  /* 전체 높이 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6%;      /* 칸 사이 간격 */
  }

  /* 각 칸의 글자 크기·미세 정렬 */
  .d-day-text .digit{
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    font-size: clamp(18px, 4.6vw, 42px); /* 화면 크기에 맞춰 자동 스케일 */
    line-height: 1;
    color: #f6921e;                       /* 필요 시 변경 */
    transform: translateY(2%);            /* 수직 미세 보정 */
  }
}

/* 데스크톱 전용 이미지 (백업용 또는 예외 처리 시 사용) */
.bannerWrap > img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  min-width: 1920px;
  z-index: 1;
  pointer-events: none;
  display: block;
}


/* 미디어 쿼리: 모바일 대응 */
/* 모바일에서는 pc 배경 숨김 + background-image 사용 */
@media (max-width: 768px) {
  .pc-bg {
    display: none;
  }

 .bannerWrap {
    background-image: url('<?php echo G5_THEME_IMG_URL ?>/main/main_m_bg.jpg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: auto;   /* ✅ auto로 변경 */
    height: auto;       /* ✅ 강제 설정 */
	 z-index: 9; /* 메뉴보다 아래로 내려가도록 설정 */
  }
}

/* 배너 콘텐츠 중앙 정렬 */
.bannerInner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  box-sizing: border-box;
}

.main-title-img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  position:relative;
  left:-6%;
}


/* 설명 텍스트 */
.bannerWrap > div p {
  font-size: 23px;
  line-height: 1.5;
}

.bannerWrap > div p span {
  display: block;
}

/* 양쪽 대괄호 장식 이미지 */
.bannerWrap > div > div {
  width: 37px;
  height: 192px;
  position: absolute;
  font-size: 100px;
  color: #fff;
  z-index: 10;
  top: 30px;
  background-size: 100% 100%;
}

.bannerWrap > div > div.square_bracket1 {
  left: 100px;
  background-image: url(../img/main/square_bracket1.png);
}

.bannerWrap > div > div.square_bracket2 {
  right: 100px;
  background-image: url(../img/main/square_bracket2.png);
}




.main_title{padding: 10px 0;}
.main_title h2{font-size: 60px; line-height: 1.0; color: #777; text-align: center;}
.main_title h2::after{content: ""; display: block; width: 1px; height: 35px; background: #223040; margin: 55px auto;}
.main_title h2 span{color: #ea7e37; font-weight: 600; margin-right: 20px;}
.main_title p{width: 70%; margin: 0 auto; text-align: center; font-size: 20px; line-height: 1.5;}
.detail{width: 100%; margin: 0 auto;}
.detail > ul{width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 auto;}
.detail > ul li{float: left; width: 42%; padding: 13px ;  border-radius: 40px / 40px;}
.detail > ul li.second{margin: 0 2%;}
.detail > ul li img{margin: 30px auto 35px;}
.detail > ul li p{color: #666; font-size: 28px; margin-bottom: 26px;}
.detail > ul li p span{display: block;}
.detail > ul li strong{display: block; font-size: 35px; line-height: 1.5; color: #333; margin: 0 auto; text-align: center;} 
.detail > ul li strong span{font-size: 44px; color: #223040; display: inline-block; font-weight: bold; margin-right: 10px;}
.detail > ul li p{text-align: center;}
.aboutWrap{width: 100%;}
.aboutWrap .detail > ul li strong{text-align: center;}
.coreComWrap{width: 100%; background-size: 100% auto; background-position: center; top:300px; z-index:999;transform: translateZ(0);


}
.coreComWrap {
  background: url(../img/main/bgtest.jpg) no-repeat center center;
  background-size: cover;   /* 비율 유지 + 꽉 채움 */
}
/*.coreComWrap .bg{background: url(../img/main/main_bg2.png);  background-size: 100%; background-repeat: no-repeat; }*/
.coreComWrap .main_title h2::after{background: #fff;}
.coreComWrap .main_title h2, .coreComWrap .main_title h2 span, .coreComWrap .main_title p{color: #fff;}
.coreComWrap .main_title h2{letter-spacing: -4px; font-weight: 600;}
.coreComWrap .main_title h2 span{letter-spacing: 0;}
.coreComWrap .detail ul li{background-image: url(../img/main/gam.png);display: inline-block; margin:auto;width:35px; height:35px;background-repeat: no-repeat;}
.coreComWrap .detail ul li strong{font-weight: bold; margin-bottom: 26px;}
.coreComWrap .detail ul li p{font-size: 22px; line-height: 1.4; margin-bottom: 0;}
.coreComWrap .skip{background: url(../img/main/left1.png);  width: 100%;position: absolute; background-size: 100%; height:200px; left:0%; top:22%;background-repeat: no-repeat;  }






.coreComWrapp .main_title h2::after{background: #fff;}
.coreComWrapp .main_title h2, .coreComWrap .main_title h2 span, .coreComWrap .main_title p{color: #fff;}
.coreComWrapp .main_title h2{letter-spacing: -4px; font-weight: 600;}
.coreComWrapp .main_title h2 span{letter-spacing: 0;}
.coreComWrapp .detail ul li{background: #fff; border-radius: 10px; }
.coreComWrapp .detail ul li strong{font-weight: bold; margin-bottom: 26px;}
.coreComWrapp .detail ul li p{font-size: 22px; line-height: 1.4; margin-bottom: 0;}


/*.coreComWrappp{background: url(../img/main/sec5_bg.png);  background-size: 100% 100%; background-repeat: no-repeat; }*/
.coreComWrappp .main_title h2::after{background: #fff;}
.coreComWrappp .main_title h2, .coreComWrap .main_title h2 span, .coreComWrap .main_title p{color: #fff;}
.coreComWrappp .main_title h2{letter-spacing: -4px; font-weight: 600;}
.coreComWrappp .main_title h2 span{letter-spacing: 0;}
.coreComWrappp .detail ul li{background: #ffffff00; border-radius: 10px; }
.coreComWrappp .detail ul li strong{font-weight: bold; margin-bottom: 26px;}
.coreComWrappp .detail ul li p{font-size: 22px; line-height: 1.4; margin-bottom: 0;}


/*.coreComWrapppp{background: url(../img/main/sec6_bg.png);  background-size: 100% 100%; ; background-repeat: no-repeat;  }*/
.coreComWrapppp .main_title h2::after{background: #fff;}
.coreComWrapppp .main_title h2, .coreComWrap .main_title h2 span, .coreComWrap .main_title p{color: #fff;}
.coreComWrapppp .main_title h2{letter-spacing: -4px; font-weight: 600;}
.coreComWrapppp .main_title h2 span{letter-spacing: 0;}
.coreComWrapppp .detail ul li{background: #ffffff00; border-radius: 10px; }
.coreComWrapppp .detail ul li strong{font-weight: bold; margin-bottom: 26px;}
.coreComWrapppp .detail ul li p{font-size: 22px; line-height: 1.4; margin-bottom: 0;}


/*.coreComWrappppp{background: url(../img/main/sec_bg.png);  background-size: 100% 100% ; position:relative;background-repeat: no-repeat; }*/
.coreComWrappppp .main_title h2, .coreComWrap .main_title h2 span, .coreComWrap .main_title p{color: #fff;}
.coreComWrappppp .main_title h2{letter-spacing: -4px; font-weight: 600;}
.coreComWrappppp .main_title h2 span{letter-spacing: 0;}
.coreComWrappppp .detail ul li{ width:33%; }
.coreComWrappppp .detail ul img{ max-width:100%; }
.coreComWrappppp .detail ul li strong{font-weight: bold; margin-bottom: 26px;}
.coreComWrappppp .detail ul li p{font-size: 22px; line-height: 1.4; margin-bottom: 0;}

/* 모바일 전용 설정 추가 */
@media (max-width: 768px) {
  .coreComWrappppp .detail ul li {
    width: 70%;
    display: block;
    margin-bottom: 16px; /* 아래 여백 추가 (선택) */
  }

  .coreComWrappppp .detail ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center; /* 가운데 정렬 원할 경우 */
  }
}





/*.portfolioWrap{background: url(../img/main/port_bg.png); padding-bottom: 90px;}*/
.portfolioWrap .main_title h2::after{background: #fff;}
.portfolioWrap .main_title h2, .portfolioWrap .main_title h2 span, .portfolioWrap .main_title p{color: #fff;}
.port_go{width: 100%;}
.portfolioWrap .port_go a{color: #fff; text-align: center; font-size: 18px;background: #ef4822;width: 100%; border: 1px solid #fff; padding: 15px 0px; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;  -webokit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition: 0.3s; -0-transition-duration: 0.3s;margin: 0 auto;}
.portfolioWrap .port_go a:hover{background: #fff; color: #223040;}
.port .port_go a{color: #fff; text-align: center; font-size: 18px;background: #ef4822;width: 100%; border: 1px solid #fff; padding: 15px 0px; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;  -webokit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition: 0.3s; -0-transition-duration: 0.3s;margin: 0 auto;}
.port .port_go a:hover{background: #935040; color: #fff;}
.pic_lt .lat_title, .pic_lt .lt_more, .pic_lt li .new_icon, .pic_lt .lt_date{display: none;}
.portfolioWrap .mainPage{display: block;}  
.portfolioWrap .latest_wr{display: none;}
.portfolioWrap .latest_wr2{display: block;}
.portfolioWrap .pic_lt .empty_li{width: 100%; height: 500px; background: #fff; line-height: 500px; text-align: center;}
.portfolioWrap .pic_lt{width: 100%; background: none; border: none; margin-bottom: 0;} 
.portfolioWrap .pic_lt ul{padding: 0;}
.portfolioWrap .pic_lt li{padding: 0; margin:0.6%; height:347px; overflow: hidden;}
.portfolioWrap .pic_lt li .lt_img{  }
.portfolioWrap .pic_lt li .lt_img img{display: block;    display: block;}
.portfolioWrap .pic_lt li .lt_img + a{display: none;}
.portfolioWrap .latest_wr2 .pic_lt .new_icon + a{display: none;}
.portfolioWrap .owl-theme .owl-dots .owl-dot{outline: 0 none;}
.portfolioWrap .owl-theme .owl-dots .owl-dot span{background: #ddd;}
.portfolioWrap .owl-theme .owl-dots .owl-dot span:hover, .portfolioWrap .owl-theme .owl-dots .owl-dot.active span{background: #c80e21;}

/*.consertWrap{background: url(../img/main/sec7_bg.png);  background-size: 100% 100%; background-repeat: no-repeat;   }*/
.consertWrap > img{height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);margin:auto;}
.consertWrap .inner{padding-bottom: 1px;}
.consertWrap .main_title{padding-bottom: 30px;}
.consertWrap .latest_wr{width: 100%; margin: 0 auto;}
.consertWrap .latest_wr > div{float: left; width: 45%;}
 .consertWrap .latest_wr > div.ing_projects{margin-bottom: 5%;}
.consertWrap .po{width:113%; height:490px; margin:auto;}
.hot_icon .latest_wr > div.ing_projects{ height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);margin:auto;}
.pic_lt li .hot_icon { float:left; margin:1%; }
.consertWrap .latest_wr > div.news{float: right;}
.consertWrap .lat{margin-bottom: 0; border: none; padding: 60px; min-height: 493px;}
.consertWrap .lat .lat_title{border-bottom: none; background: none; padding: 0; line-height: 1.0em; font-size: 1.0em; color:#333; border-bottom: 1px solid #ddd;}
.consertWrap .lat .lat_title a{color: #333; font-size: 30px; color: #333; font-weight: 600; line-height: 70px; height: 70px;}
.consertWrap .lat ul{padding: 0; margin-top: 30px;}
.consertWrap .lat li{padding: 0; padding-right: 0; padding-left: 0; line-height: 45px; overflow: hidden; }
.consertWrap .lat li:before{display: none;}
.consertWrap .lat li a{width: 70%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #333; font-size: 18px;}
.consertWrap .lat li a:hover{color:#c80e21; font-weight: bold;}
.consertWrap .lat .lt_date{color: #888; font-size: 18px; float:right; }
.consertWrap .lat .lat_title_area{position: relative;}
.consertWrap .lat .lt_more{top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0;  font-weight: normal; color: #7a838c; font-size: 45px;}
.consertWrap .lat .lt_more .fa{display: none;}
.consertWrap .lat li .new_icon{display: none;}
.consertWrap .lat li .hot_icon { float:left; margin: 4%; }
.consertWrap .lat .lat_title a:after{display: none;}
.consertWrap .lat .empty_li{line-height: 270px; font-size: 18px;}
.contactWrap{background: url(../img/main/banner2.png); background-size: cover; background-position: center;}
.contactWrap .inner{padding-bottom: 170px;}
.contactWrap .main_title{padding-bottom: 70px;}
.contactWrap .main_title h2::after{display: none;}
.contactWrap .main_title h2, .contactWrap .main_title h2 span, .contactWrap .main_title p{color: #fff;}
.contactWrap .main_title p{padding-top: 50px;}
.contactWrap .detail{width: 100%; height: 420px; }

.contactWrap .root_daum_roughmap{height: 100%;}
.contactWrap .root_daum_roughmap .wrap_map{height: 100%;}
@media screen and (max-width: 1199px){

    .bannerWrap > div img{width:420px;}   
    .bannerWrap > div h2{font-size: 30px;}
    .bannerWrap > div p{width: 90%; margin: 0 auto; font-size: 18px;}
    .bannerWrap > div > div{top: 20px;}
    .bannerWrap > div > div.square_bracket1{left: 160px;}
    .bannerWrap > div > div.square_bracket2{right: 160px;}
	
	.bannerWrap2 > div img{width:420px;}   
    .bannerWrap2 > div h2{font-size: 30px;}
    .bannerWrap2 > div p{width: 90%; margin: 0 auto; font-size: 18px;}
    .bannerWrap2 > div > div{top: 20px;}
    .bannerWrap2 > div > div.square_bracket1{left: 160px;}
    .bannerWrap2 > div > div.square_bracket2{right: 160px;}
    .inner{width: 100%; padding: 0 5px 60px;} 
    
	.main_title{padding: 60px 0;}
    .main_title h2{font-size: 42px;}
    .main_title h2::after{width: 1px; height: 24px; margin: 35px auto;}
    .main_title h2 span{margin-right: 15px;}
    .main_title p{width: 100%; font-size: 16px; padding: 0 30px;} 
    .detail > ul li p{font-size: 20px; margin-bottom: 0;}
    .detail > ul li strong{font-size: 26px;} 
    .detail > ul li strong span{font-size: 30px;}
    .detail > ul li, .detail > ul li img{-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webokit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition: 0.3s; -0-transition-duration: 0.3s;} 
    .aboutWrap .detail > ul li:hover img{-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
    .coreComWrap{background-size: auto 100%;}
    .coreComWrap .main_title h2{letter-spacing: -2px;}
    .coreComWrap .detail ul li strong{margin-bottom: 0; font-size: 26px;}
    .coreComWrap .detail ul li p{padding: 0 20px; font-size: 20px;}  
	 .coreComWrap .detail img{display: block; max-width:100%; width:395px;}  
    .portfolioWrap .port_go a{width: 100%; margin-top: 35px;}
    .portfolioWrap .port_go a{font-size: 16px;}
    .contactWrap .inner{padding-bottom: 100px;}
    .contactWrap .main_title{padding-bottom: 50px;}  
}
@media screen and (min-width:481px){
    .portfolioWrap .mainPagewrap{width: 100%; position: relative;}
    .portfolioWrap .latest_wr{display: none;}
    .portfolioWrap .latest_wr2{display: block; width: 100%; height: auto; margin: 0 auto;} 
    .portfolioWrap .pic_lt ul{display: inherit; width: 100%; overflow: hidden; margin-bottom: 32px; padding: 0;}
    .portfolioWrap .pic_lt li{padding: 0; width: 32%;  padding: 0;}
    .portfolioWrap .pic_lt li .lt_img{margin: 0; width: 100%; overflow: hidden;}
    .portfolioWrap .pic_lt li .lt_img:hover img{-webkit-transform: scale(1.2);-ms-transform: scale(1.2);transform: scale(1.2); -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webokit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -ms-transition: 0.6s; -0-transition-duration: 0.6s;}
}
@media screen and (min-width:481px) and (max-width: 1199px){
    .bannerWrap{height: 800px;}
}
@media screen and (max-width:1024px){
    .consertWrap .latest_wr > div{width: 49%;} 
    .consertWrap .lat .lat_title a{font-size: 20px;}
    .consertWrap .lat .lt_more{font-size: 30px;}
    .consertWrap .lat li a, .consertWrap .lat .lt_date{font-size: 16px;}
    .consertWrap .lat .empty_li{line-height: 270px; font-size: 16px;}
}
@media screen and (max-width:767px){
    .bannerWrap > div{width: 480px;}
    .bannerWrap > div > div.square_bracket1{left: 20px;}
    .bannerWrap > div > div.square_bracket2{right: 20px;}
    .detail > ul{width: 80%; display: inherit;}
    .detail > ul li{width: 100%;}
    .detail > ul li.second{margin: 0;}
    .detail > ul li p{font-size: 20px; margin-bottom: 0;}
    .detail > ul li strong{font-size: 26px;} 
    .detail > ul li strong span{font-size: 30px;}
    .consertWrap .inner{padding-bottom: 80px;}
    .consertWrap .main_title{padding-bottom: 0;} 
    .consertWrap .latest_wr > div{float: left; width: 100%;}
    .consertWrap .latest_wr > div.ing_projects{margin-bottom: 5%;}
    .consertWrap .lat{padding: 40px;}
    .consertWrap .lat .lat_title a{font-size: 20px; line-height: 60px; height: 60px;}
    .consertWrap .lat li{line-height: 50px;}
    .consertWrap .lat li a, .consertWrap .lat .lt_date{font-size: 16px;}
    .consertWrap .lat .empty_li{line-height: 300px; font-size: 16px;}

}
@media screen and (max-width:600px){
    .portfolioWrap .latest_wr{display: block;}
    .portfolioWrap .latest_wr2{display: none;}
    .portfolioWrap .pic_lt .empty_li{height: 200px; line-height: 200px;}
    .portfolioWrap .inner{position: relative;}
    .portfolioWrap .mainPagewrap{width: 100%; position: relative;}
    .portfolioWrap .latest_wr{width: 240px; height: auto; margin: 0 auto;}
    .portfolioWrap{padding-bottom: 60px;}
    .portfolioWrap .port_go a{width: 100%; margin-top: 35px; font-size: 12px; padding: 10px 0;}
}
@media screen and (min-width:481px) and (max-width:767px){
    .coreComWrap .detail ul{width: 40%; min-width: 320px;}
    .coreComWrap .detail img{margin: 10px auto 20px;}
    .coreComWrap .detail > ul li.second{margin: 20px 0;}
}
@media screen and (max-width: 480px){
    .inner.box{padding: 0 20px 10px;} 
	.bannerWrap > img{height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
    .bannerWrap{height: 700px;}
    .bannerWrap > div{width: 440px;}
    .bannerWrap > div img{width:423px; height: auto; }   
	.bannerWrap div .time{width:543px; height: auto;position: absolute; left: -36%; top: 70%; }   
    .bannerWrap > div h2{font-size: 36px;letter-spacing: 30px; line-height: 1.1; top:84%;left:21%;position: absolute;}
    .bannerWrap > div p{font-size: 12px;}
    .bannerWrap > div > div{width: 20px; height: 104px;}
    .bannerWrap > div > div.square_bracket1{left: 20px;}
    .bannerWrap > div > div.square_bracket2{right: 20px;}
	.consertWrap .po{width:100%; height:auto;}

	.bannerWrap2 > img{height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
    .bannerWrap2 {height: 700px;}
    .bannerWrap2 > div{width: 323px;}
    .bannerWrap2 > div img{width:323px; height: auto; margin: 30px auto 20px;}   
    .bannerWrap2 > div h2{font-size: 20px;}
    .bannerWrap2 > div p{font-size: 12px;}
    .bannerWrap2 > div > div{width: 20px; height: 104px;}
    .bannerWrap2 > div > div.square_bracket1{left: 20px;}
    .bannerWrap2 > div > div.square_bracket2{right: 20px;}
	.bannerWrap2 > .bg{background-image: url(../img/main/sec1_bg.png); position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);background-size: cover; 
background-repeat: no-repeat;
background-position: center;}
	

    .main_title{padding: 40px 0;}
    .main_title h2{font-size: 27px;}
    .main_title h2::after{width: 1px; height: 13px; margin: 20px auto;}
    .main_title h2 span{margin-right: 10px;}
    .main_title p{width: 100%; font-size: 12px; padding: 0 20px;} 
   

    .detail > ul{width: 100%; display: inherit;}
    .detail > ul li{width: 100%;}
    .detail > ul li.second{margin: 0;}
    .detail > ul li p{font-size: 20px; margin-bottom: 0;}
    .detail > ul li strong{font-size: 26px;} 
    .detail > ul li strong span{font-size: 30px;}
	 .detail img {width:375px; max-width:100%}


    .aboutWrap .detail > ul li img{float: left;}
    .aboutWrap .detail > ul li p{float: right;}
    .aboutWrap .detail > ul li strong{float: right;} 
    .aboutWrap .detail > ul li strong{text-align: left;}
    .coreComWrap .detail ul li{padding: 0px 0; height: 14px;}
    .coreComWrap .detail > ul li.second{margin: 15px 0;}
    .coreComWrap .detail ul li strong, .coreComWrap .detail ul li p{width: 100%;}
    .coreComWrap .detail ul li strong{margin-bottom: 15px; text-align: center; font-size:23px;}
    .coreComWrap .detail ul li p{font-size: 14px; margin-bottom: 0; text-align: center;} 
	.coreComWrap .skip{background: url(../img/main/left1.png);  width: 100%;position: absolute; background-size: 100%; height:100px; left:0%; top:20%; z-index:999;background-repeat: no-repeat;  }

	.coreComWrapp.detail ul li{padding: 40px 0; height: 240px;}
    .coreComWrapp .detail > ul li.second{margin: 15px 0;}
    .coreComWrapp .detail ul li strong, .coreComWrap .detail ul li p{width: 100%;}
    .coreComWrapp .detail ul li strong{margin-bottom: 15px; text-align: center; font-size:23px;}
    .coreComWrapp .detail ul li p{font-size: 14px; margin-bottom: 0; text-align: center;} 

	.coreComWrappp .detail ul li{padding: 40px 0; height: 240px;}
    .coreComWrappp .detail > ul li.second{margin: 15px 0;}
    .coreComWrappp .detail ul li strong, .coreComWrap .detail ul li p{width: 100%;}
    .coreComWrappp .detail ul li strong{margin-bottom: 15px; text-align: center; font-size:23px;}
    .coreComWrappp .detail ul li p{font-size: 14px; margin-bottom: 0; text-align: center;} 

	.coreComWrapppp .detail ul li{padding: 40px 0; height: 240px;}
    .coreComWrapppp .detail > ul li.second{margin: 15px 0;}
    .coreComWrapppp .detail ul li strong, .coreComWrap .detail ul li p{width: 100%;}
    .coreComWrapppp .detail ul li strong{margin-bottom: 15px; text-align: center; font-size:23px;}
    .coreComWrapppp .detail ul li p{font-size: 14px; margin-bottom: 0; text-align: center;} 

	.coreComWrappppp .detail ul li{padding: 40px 0; height: 240px;}
    .coreComWrappppp .detail > ul li.second{margin: 15px 0;}
    .coreComWrappppp .detail ul li strong, .coreComWrap .detail ul li p{width: 100%;}
    .coreComWrappppp .detail ul li strong{margin-bottom: 15px; text-align: center; font-size:23px;}
    .coreComWrappppp .detail ul li p{font-size: 14px; margin-bottom: 0; text-align: center;} 

	.coreComWrapppppp .detail ul li{padding: 40px 0; height: 240px;}
    .coreComWrapppppp .detail > ul li.second{margin: 15px 0;}
    .coreComWrapppppp .detail ul li strong, .coreComWrap .detail ul li p{width: 100%;}
    .coreComWrapppppp .detail ul li strong{margin-bottom: 15px; text-align: center; font-size:23px;}
    .coreComWrapppppp .detail ul li p{font-size: 14px; margin-bottom: 0; text-align: center;} 


    .consertWrap .inner{padding-bottom: 0px;}
    .consertWrap .lat{padding: 30px; min-height: 373px;}
    .consertWrap .lat .lat_title a{font-size: 17px; height: 40px; line-height: 40px;}
    .consertWrap .lat .lt_more{font-size: 20px;}
    .consertWrap .lat li{line-height: 40px;}
    .consertWrap .lat li a, .consertWrap .lat .lt_date{font-size: 14px;}
    .consertWrap .lat .empty_li{line-height: 240px; font-size: 14px;}
    .contactWrap .inner{padding-bottom: 50px;}
    .contactWrap .main_title{padding-bottom: 30px;}
    .contactWrap .detail{height: 220px; overflow: hidden;}  
    .portfolioWrap .pic_lt li .lt_img {height: 220px;}

}
@media screen and (max-width:350px){
    .portfolioWrap .port_go a{font-size: 12px;}
}


@media (max-width: 768px) {
  .bannerWrap {
    z-index: 0 !important;
  }

  .bannerInner,
  .time-badge,
  .d-day-text {
    z-index: 0 !important;
  }
}


/* 메인 영상 */
.main-video-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 40px;
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}
.main-video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: none;
}

/* 공통 비디오 카드 스타일 */
.video-wrapper {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 모바일 기본 숨김 처리 */
.pc-only { display: block; }
.mobile-only { display: none; }

/* 반응형 모바일 전환 */
@media screen and (max-width: 768px) {
  .pc-only { display: none; }
  .mobile-only { display: block; }
}