#section4 .main-slider{position: relative;}
#section4 .main-slider .product-content {overflow:hidden;position: relative;}
#section4 .slick-slide{display:block;float:left;margin: 0 10px;}

#section2 .problem{overflow:hidden;position: relative;}
#section2 .problem .slick-slide{display:block;float:left;}

#section1.main_img .df {display: flex;flex-wrap: wrap;padding: clamp(40px,4vw,60px) clamp(54px,30vw,212px) clamp(40px,10vw,140px);justify-content: space-between;align-items: center;gap: 20px;}
#section1.main_img .df .inner.middle {width: calc(45% - 10px);}
#section1.main_img .df > img {width: calc(55% - 10px);}
#section1.main_img .df .txt_box {padding: 0 0 clamp(20px,3.4vw,40px);}
#section1.main_img .df .txt_box .color {font-size: clamp(22px,2vw,30px);font-weight: 700;padding: 0 0 24px;margin-bottom: 70px;border-bottom: 1px solid;width: fit-content;color: #78c0df;}
#section1.main_img .df .txt_box h2.typing {font-size: clamp(32px,5.2vw,64px);padding: 0 0 clamp(20px,2.8vw,46px);opacity: 0;white-space: nowrap;overflow: hidden;display: block;border-right: 1px solid;animation: fadeInTyping 1s steps(22) forwards, removeCursor 0.5s step-end forwards;animation-delay: 0s;}
#section1.main_img .df .txt_box .sub_title.style1.typing {color: #7b7f89;font-size: clamp(22px,2vw,26px);font-weight: 500;animation: fadeInTyping 0.8s steps(22) forwards, removeCursor 0.5s step-end forwards;animation-delay: 1.5s;opacity: 0;white-space: nowrap;overflow: hidden;display: block;border-right: 1px solid;line-height: 1.2em;}


#section4 .top_title .tap-wrapper {position: relative;width: 100%;max-width: 400px;margin: 0 auto;z-index: 1; display: none;}

#section4 .top_title .tap-wrapper .tap li {
  padding: 12px 16px;
  background: #f5f5f5;
  width: 100%;
  max-width: none;
  text-align: left;
  color: #b2b6c0;
  margin: 1px;
}


#qna .inner {
    height: 100%;
}

#qna .inner .df {
    flex-wrap: wrap;
    padding: clamp(44px,6.4vw,100px) 0 clamp(26px,2vw,64px);
    gap: clamp(20px,5.8vw,100px);
    display: flex;
    height: 100%;
}

#qna .inner .df .option-inline {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px,2vw,46px);
    flex: 0 1 calc(100% / 2 - clamp(10px,3vw,50px));
    /* flex-direction: column; */
    height: auto;
}

#qna .inner .df .option-inline .text {
  height: auto;
  flex: 100%;
  display: table-row;
}

#qna .inner .df .option-inline .text .tit {
  font-size: clamp(18px,2vw,22px);
  color: #767b85;
  font-weight: 600;
  position: relative;
  padding: 0 0 clamp(14px,2vw,24px);
}

#qna .inner .df .option-inline .text .tit span {
  color: #ee6f62;
  position: absolute;
  top: -8px;
}

#qna .inner .df .option-inline input, #qna .inner .df .option-inline textarea {
  height: clamp(40px,4vw,80px);
  width: 100%;
  border-radius: 12px;
  border: 1px solid #dfdfdf;
  padding: 12px 20px;
}

#qna .inner .df .option-inline textarea {
  max-height: 250px;
  height: calc(100% - 36.8px);
}

#qna .inner .button {
}
#qna .inner .btn {
  display: flex;
  justify-content: center;
  height: auto;
  line-height: normal;
}

#qna .inner .btn button {
  line-height: normal;
  padding: clamp(14px,2vw,26px) 0;
  width: 100%;
  max-width: 300px;
  font-size: clamp(16px,2vw,18px);
}


.dropdown {
  position: relative;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-end;
  max-width: 166px;
}

.dropdown-button {
  background-color: #f5f5f5;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-button:hover {
  background-color: #e0e0e0;
}

.dropdown {
  position: relative;
  display: inline-block;
  display: flex;
}

.dropdown-button {
  background-color: #f5f5f5;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-button .arrow {
  width: 16px;
  height: 16px;
  border: 1.5px solid black;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-button .arrow::after {content: '';display: block;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 6px solid black;}
.dropdown-content {position: absolute;top: 100%;left: 54%;transform: translateX(-50%);background-color: white;min-width: 180px;border-radius: 8px;box-shadow: 0 8px 16px rgba(0,0,0,0.2);opacity: 0;/* transform: translateY(-10px); */pointer-events: none;transition: opacity 0.3s ease, transform 0.3s ease;z-index: 1;}
.dropdown-content.show {opacity: 1;/* transform: translateY(0); */pointer-events: auto;}
.dropdown-content a {padding: 10px 20px;text-decoration: none;color: black;display: block;}
.dropdown-content a:hover { background-color: #f0f0f0;}

.modal {display: none;position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.5);padding: 40px;align-items: center;justify-content: center;}
.modal-content {background-color: #fff;padding: 20px;width: 100%;height: 100%;max-width: none;border-radius: 10px;height: auto;display: flex;flex-direction: column;}
.close {color: #aaa;float: right;font-size: 24px;font-weight: bold;cursor: pointer;text-align: right;}
.modal-content #modalBody {display: flex;align-items: center;flex-wrap: wrap;justify-content: center;line-height: 1.4em;height: 100%;}
.modal-content #modalBody img{max-height: 500px;object-fit: contain;}

.modal-content #modalBody .inner_txt{width: 100%;text-align: left;line-height: 1.4em;}

#qna .qna_btn.pc_only{display: flex;}
#qna .qna_btn.mo_only{display: none;}

@media screen and (max-width:1800px) {
  #section1.main_img .df{padding: clamp(40px,8vw,200px) clamp(40px,4.8vw,80px) clamp(40px,10vw,140px);}
  #section1.main_img .df .inner.middle{width: 100%;z-index: 1;}
  #section1.main_img .df > img{position: absolute;z-index: 0;right: 0;top: 50%;transform: translateY(-50%);}

  #section3 .slide-content .right > .txt_box .description br{display: none;}

}

@media screen and (max-width:1600px) {
  #section2 .problem > li p br{display: none;}

  #section3 .slide-content .right > .txt_box .description{height: 450px;}

  section > .inner.middle{padding: clamp(40px,4.8vw,80px) clamp(20px,8.4vw,120px);}
}

@media screen and (max-width:1400px) {
  #section2 .problem > li{flex: 0 1 calc(100% / 2 - clamp(12px,2vw,20px));}
}

@media screen and (max-width:1024px) {
  #section2 .problem li p{text-align: center;}

  #section3 .slide-content{flex-direction: column;} 
  #section3 .slide-content .right > .txt_box .description{height: 220px;}

  #section3 .menu-wr.fix ul{justify-content: space-between;}

  #section4 .tap{padding: 0 20px;}
  #section4 .tap > li{flex: 0 1 calc(100% /  3 - 10px);}
}


@media screen and (max-width:768px) {
  #section1 ul.keyword > li{flex: 0 1 calc(100% / 2 - 10px);text-align: center;align-items: center;justify-content: center;display: flex;width: auto;flex: none;}
  #section1.main_img .df{flex-direction: column;padding: 0;}
  #section1.main_img .df > img{position: relative;right: auto;top: auto;transform: none;width: 100%;}
  #section1.main_img .df .txt_box .color{margin: 0 0 24px;padding: 0 0 10px;}
  
  #section1.main_img .df .inner.middle{padding: clamp(40px,8vw,200px) clamp(40px,4.8vw,80px) 0;}
  #section1 ul.keyword{margin: 0;gap: clamp(6px,2vw,12px);}

  #section2 .problem{display: block;}

  #section2 .problem .slick-dots{display: flex;flex-wrap: wrap;width: 100%;align-items: center;justify-content: center;padding: 30px 0 0;gap: 12px;}
  #section2 .slick-dots li button {font-size: 0;width: 14px;height: 14px;border-radius: 50%;background: #e9e9e9;border: none;padding: 0;cursor: pointer;}
  #section2 .problem li p{text-align: left;}
  #section2 .problem li p br{display: none;}
  #section2 .problem .slick-dots li {border: 0;background: none;flex: 0;}
  #section2 .slick-dots li.slick-active button {background: #8ecceb;}

  #section3 .menu-wr.fix ul{display: none;}
  #section3 .slide-content .right > .txt_box .description{}

  #section4 .top_title > .tap{display: none !important;position: absolute;}
  #section4 .product .box:hover .item_box{background: #ffffff;}
  #section4 .product .box:hover .item_box .icon_plus{visibility: visible;}
  #section4 .product .box:hover h5{visibility: visible;}
  #section4 .product .box:hover::before{display: none;}
  #section4 .product .box .item_box {background: none;}
  #section4 .product .box .item_box > .inner_txt{display: none !important;}
  #section4 .product .box h5{visibility: visible;}
  #section4 .product .box .item_box .icon_plus{visibility: visible;display: block;}

  #section4 .top_title .tap-wrapper{display: block;padding: 0 20px;}
  #section4 .top_title .tap-wrapper .tap {display: none;margin: 0;width: 100%;position: absolute;bottom: 0;left: 50%;transform: translate(-50% , 100%);padding: 0;flex-direction: column;height: auto;gap: 0;padding: 0 20px;}
  #section4 .top_title .tap-wrapper .tap-toggle {background: #eee;padding: 12px 16px;border-radius: 30px;font-weight: bold;color: #b2b6c0;cursor: pointer;position: relative;}
  #section4 .top_title .tap-wrapper .tap-toggle::after {content: "â–¼";position: absolute;right: 16px;top: 50%;transform: translateY(-50%);font-size: 12px;}

  #section4 .progress {height: 8px;background: #eee;width: auto;position: relative;margin: 50px clamp(60px,6.2vw,150px);overflow: hidden;}
  #section4 .progress-bar {position: absolute;top: 0;left: 0;height: 8px;background: #8ecceb;width: 0;transition: width 0.3s;}
  #section4 .slider__label {position: absolute;top: auto;transform: translateX(-50%);font-size: 12px;color: #8ecceb;height: 8px;}
  #service > .service .txt_box > .description br{display: none;}


  #qna .inner .df{flex-direction: column;}
  #qna .top_title{flex-direction: column;gap: 20px;align-items: center;}
  .section .top_title .title{text-align: center;padding: 0 0 20px;}
  .section .top_title .title br{display: none;}
  #qna .inner .df .option-inline textarea{min-height: 20vh;max-height: none;}
  #ft_wr{flex-direction: column;}
  .dropdown{display: none;}

  #qna .inner .btn{flex-direction: column;gap: 14px;}
  #qna .qna_btn.pc_only{display: none;}
  #qna .qna_btn.mo_only{display: flex;align-items: center;justify-content: center;padding: clamp(14px,2vw,26px) 0;}
  #qna .inner .btn button{max-width: none;}
  #qna .qna_btn.mo_only #check_mo {display: none;}
  #qna #check_mo+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}
  #check_mo:checked + label {background-image: url(../img/icon_check.png);background-repeat: no-repeat;background-size: contain;}
}

@media screen and (max-width:500px) {
  #section1 ul.keyword{display: none;}
  #section1.main_img .df{height: auto;}
  #section1.main_img .df .txt_box .sub_title.style1.typing{animation: none;opacity: 1;white-space: normal;border-right: 0;}
  #section3 .slide-content .right > .txt_box .description{height: 300px;}
}