/* 공통  */
.mainBigSection{position: relative; width: 100%; height: 100vh; overflow: hidden;}
.bigImg{ position: relative; overflow: hidden; height: 100vh;}

.mainbox{position: relative; width: 100%; padding: 100px 0;}
.mainbox .container{max-width: 1260px; margin: 0 auto;display: flex; justify-content: center; flex-direction: column;  }
.mainbox h2{margin-bottom: 50px; font-size: clamp(22px, 2.2vw, 32px); color: #333; text-align: center; font-weight: 700; line-height: 1.3; letter-spacing: -1px;}
.mainbox h2 span{color: #0066cc;}
.mainbox .title{display: block; margin-top: 10px; font-size: clamp(14px, 1.5vw, 16px); color: #333; text-align: center;line-height: 1.5;}
.mainbox a{display: block; width: 100%; height: 100%;}
.mainbox .imgbox{width: 100%;max-width: 400px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center;}
.mainbox .imgbox img{width: 100%; height:100%; display: block; object-fit: cover; min-width: 100%; min-height: 100%;}


/* 유튜브 영상 로딩 전 검은 배경 (흰색 플래시 방지) - factory는 #main-youtube가 bigImg 자체 */
#main-youtube .imgbox {background-color: #000; z-index: -1;}
#main-youtube .mbYTP_wrapper, #main-youtube .YTPWrapper {background-color: #000;}
/* 유튜브 영상 fade-in 애니메이션 */
@keyframes youtubeFadeIn {from {opacity: 0;} to {opacity: 1;}}
/* 유튜브 UI 요소를 가리는 오버레이 - 마우스 이벤트 완전 차단 */
.mainbox .imgbox .youtube-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: auto; background: linear-gradient(to bottom, transparent 0%, transparent 70%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0.2) 100%); cursor: default; opacity: 0; animation: youtubeFadeIn 2s ease-in-out forwards;}
/* YouTube UI 요소가 보통 하단에 표시되므로 하단 영역 강조 */
.mainbox .imgbox .youtube-overlay::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 25%; background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);}
/* 우측 하단 모서리 (YouTube 로고/링크/동영상 더보기 영역) 덮기 */
.mainbox .imgbox .youtube-overlay::after {content: ''; position: absolute; bottom: 0; right: 0; width: 250px; height: 100px; background: rgba(0,0,0,0.4); clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);}



.mainbox .gallery-pagination{display: flex; justify-content: center; align-items: center; margin-top: 50px; position: relative;}
.mainbox .gallery-pagination .swiper-pagination-bullet{width: 14px; height: 14px; background-color: #bababa; opacity: 1; border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease;}
.mainbox .gallery-pagination .swiper-pagination-bullet-active{background-color: #0066cc;}

.front-page .marker{ background-color: #7ee1ff;}
.front-page .search-toggle i{color: #fff;}
.front-page ul.sns li a img { filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(300%) contrast(200%); width: 23px; height: auto; } 
.front-page footer{display: block !important;}

.front-page .gotoTop{display: block !important;}
.front-page .floatRight {  bottom:30px;}

/* faq  */
.mainfaq{background-color: #f5f5f5;}
.mainfaq .accordion-wrapper{max-width: 800px; margin: 0 auto; width: 100%;}
.mainfaq .accordion-item{border-bottom: 1px solid #e0e0e0;}
.mainfaq .accordion-header{display: flex; justify-content: space-between; align-items: center; padding: 20px 0; cursor: pointer;}
.mainfaq .accordion-header h3{margin: 0; font-size: clamp(16px, 1.5vw, 20px); font-weight: 500; color: #333; flex: 1;}
.mainfaq .accordion-icon{position: relative; width: 24px; height: 24px; flex-shrink: 0; margin-left: 20px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #999;}
.mainfaq .accordion-icon::before{content: "\f4fe"; font-family: "bootstrap-icons"; display: block; line-height: 1;}
.mainfaq .accordion-item.active .accordion-icon::before{content: "\f2ea";}
.mainfaq .accordion-content{max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 !important;}
.mainfaq .accordion-content p{margin: 0 0 20px 0; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.6; color: #666;}

/* 메인 포토  */
.mainphoto{background-color: #fff;}
.mainphoto ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
/* 시공사례 이미지 비율 설정 */
.mainphoto.mainbox .imgbox{aspect-ratio: 4 / 3;}
.mainphoto.mainbox .imgbox.ratio-1-1{aspect-ratio: 1 / 1;}
.mainphoto.mainbox .imgbox.ratio-3-4{aspect-ratio: 3 / 4;}


/* 메인 갤러리 슬라이드  */
.maingallery{ background-color: #e9ecf0; }
.maingallery .gallery-swiper{position: relative; overflow: hidden; width: 100%;}
.maingallery .gallery-swiper .swiper-wrapper{display: flex; list-style: none; margin: 0; padding: 0;}
.maingallery .gallery-swiper .swiper-slide{flex-shrink: 0; list-style: none; margin: 0; padding: 0; box-sizing: border-box; height: auto;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);}
.maingallery .gallery-swiper .swiper-slide a{display: block; text-decoration: none; color: inherit;}
.maingallery.mainbox .title{background-color: #fff;padding: 20px 10px; margin-top: 0;}
/* 갤러리 이미지 비율 설정 */
.maingallery.mainbox .imgbox{aspect-ratio: 4 / 3;}
.maingallery.mainbox .imgbox.ratio-1-1{aspect-ratio: 1 / 1;}
.maingallery.mainbox .imgbox.ratio-3-4{aspect-ratio: 3 / 4;}

/* blue bar  */
.bannerBar { height: 110px; width: 100%; background-color: #1665c58c;; backdrop-filter: blur(10px); 
    position: relative; margin-top: -110px;z-index: 10;display: flex;align-items: center;justify-content: center;}
.bannerBar .container{ overflow: hidden; color: #fff; display: flex; max-width: 75%; justify-content: space-between; align-items: center; margin: 0 auto;}
.bannerBar .container .left{display: flex; align-items: center; gap: 50px; width: 100%;}
.mainnews{width: 100%; height: 25px; overflow: hidden; position: relative;}
.mainnews .news-swiper{width: 100%; height: 25px; position: relative;}
.mainnews .news-swiper .swiper-wrapper{height: 25px; list-style: none; margin: 0; padding: 0;}
.mainnews .news-swiper .swiper-slide{height: 25px; width: 100%; display: flex; align-items: center; flex-shrink: 0; list-style: none; margin: 0; padding: 0; overflow: hidden;}
.mainnews .news-swiper .swiper-slide a{height: 25px; display:grid; grid-template-columns: 100px auto; gap: 10px; align-items: center; font-size: 17px; line-height: 1; width: max-content; text-decoration: none; color: inherit;}
.mainnews .news-swiper .swiper-slide .date {display: flex; align-items: center; opacity: 0.65;}


/* swiper - 첫 섹션 전용 */
#first-section-swiper{height: 100vh; width: 100%; position: relative; z-index: 1;}
#first-section-swiper .swiper-wrapper{height: 100%;}
#first-section-swiper .swiper-slide{height: 100vh; width: 100%;}
#first-section-swiper .imgbox{display: flex; height: 100vh; width: 100%; padding: 0; margin: 0; min-height: 100vh; position: relative;}
#first-section-swiper .imgbox img{width: 100%; height: auto; object-fit: cover; min-height: 100vh;}
#first-section-swiper .imgbox .youtube-background{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; pointer-events: none;}
#first-section-swiper .imgbox .youtube-iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: none; pointer-events: none !important; min-width: 100% !important; min-height: 100vh !important; width: auto; height: auto; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; opacity: 0; animation: youtubeFadeIn 2s ease-in-out forwards;}
/* 유튜브 영상 fade-in 애니메이션 */
@keyframes youtubeFadeIn {from {opacity: 0;} to {opacity: 1;}}
/* 유튜브 UI 요소를 가리는 오버레이 - 마우스 이벤트 완전 차단 */
#first-section-swiper .imgbox .youtube-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: auto; background: linear-gradient(to bottom, transparent 0%, transparent 70%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0.2) 100%); cursor: default; opacity: 0; animation: youtubeFadeIn 2s ease-in-out forwards;}
/* YouTube UI 요소가 보통 하단에 표시되므로 하단 영역 강조 */
#first-section-swiper .imgbox .youtube-overlay::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 25%; background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);}
/* 우측 하단 모서리 (YouTube 로고/링크/동영상 더보기 영역) 덮기 */
#first-section-swiper .imgbox .youtube-overlay::after {content: ''; position: absolute; bottom: 0; right: 0; width: 250px; height: 100px; background: rgba(0,0,0,0.4); clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);}
#first-section-swiper .textbox{position: absolute;display: none !important; bottom: 60px; left: calc(50% + 30px); transform: translateX(-50%); width: 100%; max-width: 1450px; padding: 3px 10px; color: rgba(255,255,255,0.7); font-size: 16px; z-index: 3;}
#first-section-swiper .textbox a{display: inline-block;}

.mainslogen .swiper-pagination{position:relative !important; text-align: left !important; left: 0 !important; width:100% !important;  bottom: -30px; z-index: 10;
    animation:fadebanner 0.7s ease-in-out forwards; animation-delay: 0.9s; opacity: 0;}
.swiper-pagination-bullet{width: 14px; height: 14px; background: rgba(255, 255, 255, 0.5);opacity: 1 !important; border: 0px solid rgba(255,255,255,0.75); margin: 0 5px !important;}
.swiper-pagination-bullet-active{background: rgba(255,255,255,1);}

/* 유튜브만 표시될 때 (swiper 없이) */
.youtube-only{height: 100vh; width: 100%; }
.youtube-only .imgbox{display: flex; height: 100vh; width: 100%; padding: 0; margin: 0; min-height: 100vh; position: relative;}
.youtube-only .imgbox .youtube-background{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; pointer-events: none;}
.youtube-only .imgbox .youtube-iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: none; pointer-events: none !important; min-width: 100% !important; min-height: 100vh !important; width: auto; height: auto; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; opacity: 0; animation: youtubeFadeIn 2s ease-in-out forwards;}
.youtube-only .imgbox .youtube-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: auto; background: linear-gradient(to bottom, transparent 0%, transparent 70%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0.2) 100%); cursor: default; opacity: 0; animation: youtubeFadeIn 2s ease-in-out forwards;}
.youtube-only .imgbox .youtube-overlay::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 25%; background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);}
.youtube-only .imgbox .youtube-overlay::after {content: ''; position: absolute; bottom: 0; right: 0; width: 250px; height: 100px; background: rgba(0,0,0,0.4); clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);}
.youtube-only .textbox{position: absolute; bottom: 60px; left: calc(50% + 30px); transform: translateX(-50%); width: 100%; max-width: 1450px; padding: 3px 10px; color: rgba(255,255,255,0.7); font-size: 16px; z-index: 3;}
.youtube-only .textbox a{display: inline-block;}





/* 메인 슬로건  */
.mainslogen{ position: absolute; width: max-content; height: max-content; top: calc(50% - 170px); left: 13%; transform: translate(0, 0); z-index: 50;}
.mainslogen_text{font-weight: 800; color: #fff; margin-bottom: 10px; line-height: 1.3;letter-spacing: -0.5px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); animation:fadebanner 0.7s ease-in-out forwards; animation-delay: 0.4s; opacity: 0;}
.mainslogen_text{font-size: clamp(40px, 2.8vw, 48px)}
.mainslogen_subtext{font-size: clamp(15px, 1.2vw, 18px); font-weight:300; line-height: 1.45;letter-spacing: -0.5px;color: rgba(255,255,255,1); 
     text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); animation:fadebanner 0.7s ease-in-out forwards; animation-delay: 0.7s; opacity: 0;}
.mainslogen_subtext br.onlymobile, .mainslogen br.onlymobile{display: none;}
.mainbtn{display: inline-block;padding: 11px 50px; background-color: #0e85e3; color: #fff; font-size: 15px; font-weight: 400; 
    text-decoration: none; border-radius: 30px; transition: all 0.3s ease;width: max-content; 
    
position: relative; text-align: center;margin-bottom: 0px;min-width: 170px;}
.mainbtn i{position: absolute;right: 0;top: calc( 50% + 1px); transform: translateY(-50%); opacity: 0; transition: all 0.2s; font-size: 18px; }
.mainbtn span{transition: all 0.2s; transform: translateX(0px); display: inline-block;}
.mainbtn:hover i {right: 20px; opacity: 1;}
.mainbtn:hover span{ transform: translateX(-20px);}
.mainslogen_text { font-weight: var(--mainslogen-fontweight); text-shadow: var(--text-shadow);}
.mainslogen_subtext { text-shadow: var(--sub-text-shadow);}
.mainbtn { background-color: var(--main-button-color);}
.edit_main_tel_factory{ font-size: clamp(34px, 2.2vw, 44px); font-weight: 800; width: max-content;letter-spacing: -2px;-webkit-text-fill-color: transparent;  
    background: linear-gradient(88.39deg,#97f4ff 1%,#5ed0f2 ); -webkit-background-clip: text;background-clip: text;  
    -o-border-image: linear-gradient(88.39deg,#97f4ff 1%,#5ed0f2 ) 1; 
    border-image: linear-gradient(88.39deg,#97f4ff 1%,#5ed0f2 ) 1; word-break: keep-all; white-space: nowrap; line-height: 1;}
.edit_main_tel_factory i {margin-right: 10px;}

.mainslogen.mainBelow{ top: inherit !important;bottom: 180px; }
.mainslogen.mainLeft{ bottom: inherit;   }
.mainslogen.mainCenter{bottom: inherit; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.mainslogen.mainCenter>div{text-align: center;}
.mainslogen.mainCenter .swiper-pagination{    text-align: center !important;}
.mainslogen.mainSizeS .mainslogen_text{font-size: clamp(28px, 1.8vw, 32px)}
.mainslogen.mainSizeS .mainslogen_subtext{font-size: clamp(14px, 1.1vw, 16px)}
.mainslogen.mainSizeL .mainslogen_text{font-size: clamp(40px, 3vw, 55px);margin-bottom: 17px;}
.mainslogen.mainSizeL .mainslogen_subtext{font-size: clamp(16px, 1.2vw, 19px);line-height: 1.6;}
.mainslogen.mainSizeL .mainbtn{font-size: 16px;}

/* 지연 로딩 이미지 스타일 */
/* .lazy-image {  opacity: 0; transition: opacity 0.3s ease-in-out;}
.lazy-image.loaded { opacity: 1;}
.section:first-child .imgbox img { opacity: 1;} */
@media screen and (max-width:1260px) {
    .bannerBar .container .left{gap: 30px;}
    .mainbox .container{padding-left: 25px;padding-right: 25px;}
}


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

    .bannerBar .container{max-width: 95%;}
    .bannerBar .container .right{margin-right: 50px;}
    .mainnews .news-swiper .swiper-slide .date{display: none;}
    .mainnews .news-swiper .swiper-slide a{grid-template-columns: 1fr;}
    
    .mainbtn{font-size: 15px;padding: 10px 45px; min-width: 180px;}
    .mainslogen_text{margin-bottom: 15px; font-size: 34px;}
    .swiper-pagination{right: 3px;}
    .mainphoto ul{gap: 20px;}
    .mainbox h2{margin-bottom: 30px;}
    .mainbox{ padding: 60px 0;}
    .mainfaq .accordion-header{padding: 15px 0;}
}

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

    .mainbtn{pointer-events: all;        padding: 10px 30px; min-width: 120px;}
    .bannerBar .container .left{gap: 30px;}
    .mainbtn:hover i {right: inherit; opacity:0;}
    .mainbtn:hover span{ transform: inherit;}
    .mainphoto ul{ gap: 10px;}
    footer .container{text-align: left; justify-content: start;}
    
}

/* 카카오챗팅과 네이버톡이 둘 다 공백일 때 edit_main_tel_factory 위치 조정 (520px 이상에서만 적용) */
@media screen and (min-width: 521px) {
    .edit_main_tel_factory.no-chat-buttons { right: 50px; }
}

@media screen and (max-width:520px) {
    .mainbox .gallery-pagination .swiper-pagination-bullet{width: 8px; height: 8px;}
    .swiper-pagination-bullet{margin: 0 3px !important;}

    .mainphoto ul{grid-template-columns: 1fr;}
    .mainbox .container{padding-left: 15px;padding-right: 15px;}
    .mainbox .gallery-pagination{margin-top: 30px;}
    .mainfaq .accordion-header{padding: 12px 0;}
    .mainbox .imgbox{max-width:100%}
    .mainfaq .accordion-content p{line-height: 1.5;}
    
    .bannerBar {height: max-content; margin-top: 0; padding: 28px 0; position: absolute; bottom: 0; width: 100%; left: 0; right: 0;}
    .bannerBar .container {max-width: 100%; flex-direction: column; justify-content: start; align-items: start; gap: 5px; padding-left: 25px;}
    .bannerBar .container .left {gap: 15px; flex-direction: column; align-items: start;}
    .edit_main_tel_factory {font-size: 28px;}
    .bannerBar .container .right {margin-right: 0;}
    .mainnews .news-swiper .swiper-slide a {font-size: 14px; line-height: 1; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .mainslogen.mainBelow {bottom: inherit;top: calc(50% - 100px) !important;}
    .mainslogen.mainLeft {top: 35%; left: 40px; bottom: inherit; transform: translate(0%, 0%);}
    .mainslogen.mainCenter {top: 40%;}
    .mainslogen_text {font-size: 26px !important;}
    .mainslogen_subtext {font-size: 15px !important; pointer-events: none; line-height: 1.5;}
    .mainbtn {font-size: 14px; pointer-events: all; margin-bottom: 0; min-width:150px;padding: 8px 30px;}
    .mainslogen_subtext br.onlymobile, .mainslogen br.onlymobile {display: block;}
    .mainslogen .swiper-pagination {bottom: -20px;}
    .front-page .floatRight {bottom: 30px;}
   
}