#landing {}
/* 
  공통 레이아웃
 */
section {position: relative;}
section.lg {/* min-height: 976px; */}
section.sm {height: auto;}
section > .inner {margin: 0 auto;}
section > .inner.middle {position: relative;width: 100%;padding: clamp(40px,5.2vw,100px) clamp(54px,12.2vw,600px);}


/* slide-visual */
.main-visu-wr {width:100%;}
.main-visu2-wr {padding:0px; width: 100%;position: relative;}
.main-visu-slider {width:100%; overflow:hidden;}
.main-visu-slider .slick-slide {display:block; float:left; transition:all 0.3s;}

.mv-height {width:100%; height:100%; background-size:100%;}



/* 
  공통 스타일 
*/
.section {overflow: hidden;}
.section.bg {background-color: #f4f4f4;}
.section > .inner > .txt_box {max-width: 750px;}
.section > .inner .txt_box .sub_title.style1 {font-size: var(--subTitleTxt); color: #7b7f89; font-weight: 500; padding: 20px 0;}
.section > .inner .txt_box .sub_title.color {color: var(--subColor); font-size: var(--subTitleTxt); font-weight: bold; border-bottom: 1px solid var(--subColor); display: inline-block; padding: 15px 0; text-transform: uppercase;}
.section > .inner .txt_box h2 {color: var(--blackColor); font-size: var(--titleTxt); font-weight: bold; margin-top: clamp(40px, 3vw, 70px);}
.section .top_title .title {color: var(--darkColor);font-weight: bold;font-size: var(--topTitleTxt);letter-spacing: -1px;line-height: 1.4em;}




/* 
  custom 
 */
#section1.main_img {position: relative;}

/* 기본 상태에서 숨김 처리 */
.section > .inner > .txt_box .sub_title.typing,
.section > .inner > .txt_box h2.typing {opacity: 0; white-space: nowrap; overflow: hidden; display: block; border-right: 1px solid;}

/* title 타이핑 효과 */
.section > .inner > .txt_box h2.typing {animation: fadeInTyping 1s steps(22) forwards, removeCursor 0.5s step-end forwards;animation-delay: 0s; /* title 즉시 시작 */}

/* sub_title 타이핑 효과 */
.section > .inner > .txt_box .sub_title.typing {animation: fadeInTyping 0.8s steps(22) forwards, removeCursor 0.5s step-end forwards;animation-delay: 2.5s; /* title 애니메이션 이후 시작 */}

/* keyword */
#section1 ul.keyword {display: flex;margin: clamp(20px,3.4vw,40px) 0 0;flex-wrap: wrap;max-width: calc(var(--innerWidth) / 2.2);gap: 20px;}
#section1 ul.keyword > li {background-color: var(--whiteColor);border-radius: 50px;padding: 1rem 1.2rem;font-size: clamp(12px,2vw,20px);color: var(--grayColor);box-shadow: 0px 0px 10px rgba(0,0,0,0.1);font-weight: bold;transition: all 0.3s;}
#section1 ul.keyword > li:hover {background-color: #78c0df;color: var(--whiteColor)}


#section3 .menu-wr {display: none;}
#section3 .menu-wr.fix {display: block;position: fixed;top: 40px;width: 100%;left: 0;z-index: 100;padding: 0 20px;box-shadow: unset;max-height: 86px;}
#section3 .menu-wr ul{justify-content: center; display: flex; flex-wrap: wrap;}
#section3 .menu-wr.fix ul{box-shadow: 0px 0px 10px 4px #00000014;background-color: #fff;padding: 0 1rem;height: 100%;max-height: 86px;align-items: center;border-radius: 60px;gap: 10px;max-width: 1400px;margin: 0 auto;}
#section3 .menu-wr.fix ul > li {flex: 0 1 calc(100% / 6 - 50px);text-align: center;line-height: 86px;}
#section3 .menu-wr.fix ul > li.logo {flex: 220px;text-align: left;}
#section3 .menu-wr.fix ul > li.none {font-size: 0;height: 0;}
#section3 .menu-wr.fix ul > li img {height: 90px;object-fit: contain;}
#section3 .menu-wr.fix ul > li > a {color: var(--grayColor);font-size: clamp(20px,2vw,24px);font-weight: bold;}
#section3 .menu-wr.fix ul > li.active > a {color: #8ecceb;}

/* 문제 */
#section2 .problem {display: flex;flex-wrap: wrap;margin-top: clamp(40px,3.8vw,70px);gap: clamp(20px,2vw,34px);justify-content: space-between;}
#section2 .problem li {border: 2px solid #e3e3e3;background-color: var(--whiteColor);border-radius: 20px;flex: 0 1 calc(100% / 3 - clamp(16px,2vw,23px));}
#section2 .problem li .con_box {padding: 33px 35px;display: flex;gap: 20px;align-items: center;height: 100%;}
#section2 .problem li img {width: 86px; height: 86px;}
#section2 .problem li p {font-size: clamp(18px,2vw,22px);color: #81838a;font-weight: 500;line-height: 1.4em;}

#section4 {height: auto;padding-top: 60px;position: relative;}
#section4 .tap {display: flex; justify-content: center; gap: 30px; margin-top: 30px;}
#section4 .tap > li {background-color: #f0f0f0;color: #b2b6c0;min-width: 250px;border-radius: 30px;font-weight: bold;text-align: center;font-size: clamp(14px,1.6vw,20px);text-transform: uppercase;padding: 20px 30px;}
#section4 .tap > li.active {background-color: #000000; color: #fff;}


#section4 .product {padding: 0 clamp(30px,6.2vw,150px);margin-top: clamp(20px,4vw,90px);width: 100%;}
#section4 .product .product-content {display: none;}
#section4 .product .product-content.active {display: block;height: 100%;}
#section4 .product .box .item_box {display: flex; flex-direction: column; align-items: center;}
#section4 .product .box .item_box > .inner_txt {visibility: hidden;min-height: 300px;}
#section4 .product .box .item_box .icon_plus {width: 75px;height: 90px;display: block;visibility: hidden;display: none;}
#section4 .product .box:hover .item_box .icon_plus {visibility: hidden;}
#section4 .product .box img {max-height: 660px;width: 60%;padding: 20px 0;}

#section4 .product .box{position: relative;}
#section4 .product .box:hover::before{content: ''; position: absolute; bottom:0; left: 50%; transform: translateX(-50%); width: 100%;height: 8px; background: #8ecceb;}
#section4 .product .box {text-align: center;}
#section4 .product .box .item_box {border-radius: 38px;transition: all 0.3s;}
#section4 .product .box .item_box:hover{background-color: #f8f8f8;}
#section4 .product .box .item_box > .inner_txt {visibility: visible;}
#section4 .product .box .item_box > .inner_txt {display: flex; flex-direction: column; }
#section4 .product .box .item_box > .inner_txt > h3 {font-size: clamp(32px,2vw,40px);color: #71757d;padding: 60px 0 26px 0;align-items: center;} 
#section4 .product .box .item_box > .inner_txt > div {border-bottom: 1px solid #71757d30;display: inline-block;padding: 10px 12px;text-align: left;line-height: 1.6em;}
#section4 .product .box .item_box > .inner_txt span.label {min-width: 55px; display: inline-block;}
#section4 .product .box .item_box > .inner_txt span {font-size: clamp(16px,1.2vw,20px);color: #8e919a;padding:5px 0}
#section4 .product .box img {width: 60%;}
#section4 .product .box h5 {color: #b2b6c0;font-size: var(--conTxt);padding: clamp(12px,2vw,20px) 0 clamp(12px,2.6vw,20px);visibility: hidden;}
#section4 .product .box:hover h5 {visibility: visible;}

#section4 .product .box img {
    height: 30vh;
    object-fit: contain;
}

/* Hover되지 않은 박스의 이미지 축소 */
#section4 .product .box:hover ~ .box img:not(.icon_plus),
#section4 .product .box:not(:hover) img:not(.icon_plus) {
  width: 60%;
  /* opacity: 0.7; */
}

.mv-bg01 {background: url(../img/main/icon_drill.png) no-repeat top center;}
.mv-bg02 {background: url(../img/main/icon_painting.png) no-repeat top center;}
.mv-bg03 {background: url(../img/main/icon_spanner.png) no-repeat top center;}

/* slide-content */
#section3 .slide-content {display: flex; width: 100%;}
#section3 .slide-content .left {flex: 0 1 calc(100% / 2);}
#section3 .slide-content .left img {width: 100%;height: 100%;object-fit: cover;}
#section3 .slide-content .right {flex: 0 1 calc(100% / 2);background-color: #8ecceb20;position: relative;padding: clamp(36px,3.2vw,86px) clamp(24px,3.6vw,86px) clamp(22px,2.8vw,56px);display: flex;flex-direction: column;justify-content: space-between;}
#section3 .slide-content .right .arrow {display: flex;align-items: center;justify-content: end;gap: 10px;}
#section3 .slide-content .right > .txt_box {color: #333;}
#section3 .slide-content .right > .txt_box .sub_title {font-size: var(--conTxt); color: #c3d7e3; letter-spacing: 5px; font-weight: bold;}
#section3 .slide-content .right > .txt_box .title {font-size: var(--topTitleTxt);font-weight: bold;margin: 10px 0; color: #484d56; padding-top: 20px;}
#section3 .slide-content .right > .txt_box .description {font-size: clamp(16px, 2vw, 24px);line-height: 1.6;color: #71757d;letter-spacing: -1px;font-weight: 400;padding-top: clamp(52px,3.2vw,60px);padding-bottom: clamp(52px,6.4vw,120px);word-break: keep-all;}

.mv-left {display: block !important;width:70px;height:70px;background-image:url('../img/main/slide-arrow_left.png');background-position:center;background-repeat:no-repeat;border-radius: 100%;background-size: cover;}
.mv-right {width:70px;height:70px;background-image:url('../img/main/slide-arrow_right.png');background-position:center;background-repeat:no-repeat;border-radius: 100%;background-size: cover;}



/* SERVICE */
#service {}
#service > .service {background-repeat: no-repeat;background-size: cover;overflow: hidden;background-position: center;will-change: transform;position: sticky;left: 0;top: 0;width: 100%;height: clamp(54vh,50vw,100vh);background-repeat: no-repeat;background-size: cover;}
#service > .service.visible {transform: translateY(0px);}
#service > .service.hidden {transform: translateY(0px);}
#service > .service:nth-child(1) {background-image: url('../img/main/service_img1.jpg') ;}
#service > .service:nth-child(2) {background-image: url('../img/main/service_img2.jpg') ;}
#service > .service:nth-child(3) {background-image: url('../img/main/service_img3.jpg') ;}
#service > .service:nth-child(4) {background-image: url('../img/main/service_img4.jpg') ;}
#service > .service:nth-child(5) {background-image: url('../img/main/service_img5.jpg') ;}
#service > .service:nth-child(6) {background-image: url('../img/main/service_img6.jpg') ;}
#service > .service .txt_box {margin: 0 auto;text-align: center;color: var(--whiteColor);position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
#service > .service .txt_box > .tag {font-size: 22px;font-weight: 900;letter-spacing: 1px;}
#service > .service .txt_box > h2 {color: var(--whiteColor);font-size: clamp(36px, 4vw, 80px);margin-top: 60px;margin-bottom: 50px;padding: 0 40px;}
#service > .service .txt_box > .description {font-size: clamp(16px, 2vw, 30px);padding: 0 40px;line-height: 1.6em;}


/* 문의하기 */
#qna {background-color: #f3f3f4;padding: clamp(40px,6.6vw,120px) clamp(20px,6.2vw,150px);}
#qna .top_title {display: flex;justify-content: space-between;align-items: flex-end;}
#check[type='checkbox'] {display: none;}
#qna .qna_btn {background-color: #000000; border-radius: 50px; color: var(--whiteColor); font-weight: bold; font-size: 1rem; display: flex; align-items: center; gap: 20px; padding: 20px;}
#qna #check+label{display: block;cursor:pointer;background-repeat: no-repeat;background-color: #ffffff;width: clamp(24px,2vw,34px);height: clamp(24px,2vw,34px);border-radius: 50px;}
#qna #check:checked+label{
  background-repeat: no-repeat; /* 반복 방지 */
  background-image: url('../img/icon_check.png'); /*on 이미지*/
  background-size: contain;
}

#qna form .form_box {}
#qna form .form_box tr > td {display: flex; flex-direction: column;}

#qna button {background-color: var(--mainColor); width: 300px; border-radius: 50px; color: var(--whiteColor); line-height: 70px; font-size: 20px; font-weight: bold;}


@media screen and (max-width: 1900px) {
  section.main_img {background-size: 90%;}
}

@media screen and (max-width: 1500px) {
  section.main_img {background-size: 80%;background-position-y: bottom;}
  section > .inner {}
  section .problem > li {flex: 1 1 40%;}
}

@media screen and (max-width: 1024px) {
  /* #landing > section {height: 700px;} */
  section.lg {min-height: auto;}
  section > .inner {}
  section .problem > li > .con_box {flex-direction: column;}
  section > .inner {}
  section .problem {gap: 20px}
  ul.keyword {margin: 0;}
  #service > .service {}
}

@media screen and (max-width: 768px) {
  .section {overflow: hidden;}
  /* section > .inner > .txt_box {text-align: center;} */
  .section > .inner > .txt_box h2.typing {animation: none;}
  .section > .inner > .txt_box .sub_title.typing {animation: none;}
  
}

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

@keyframes fadeInTyping {
  0% {
    width: 0;
    opacity: 0;
  }
  1% {
    opacity: 1; /* 즉시 표시 시작 */
  }
  100% {
    width: 100%;
    opacity: 1; /* 완전히 표시 */
  }
}
    
/* 커서 깜박임 */
@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* 커서 제거 */
@keyframes removeCursor {
  0% {
    border-right: 1px solid; /* 커서 유지 */
  }
  100% {
    border-right: none; /* 커서 제거 */
  }
}