@charset "utf-8";

:root {
  --site_width:1440px;
  --color_primary: #00A598;
  --color_second: #f8f8f8;
}

* { margin: 0; padding: 0; box-sizing: border-box;}
a { color: inherit; text-decoration: inherit; }
a:hover, a:focus, a:active { text-decoration: none; }
ul li {list-style: none;}
img { vertical-align: middle; border: none; }

/* 공통 --------------------------------------------------------------*/
/* .section {margin-top: 100px; margin-bottom: 100px;} */
/* ------------------------------------------------------------------ */

/* header ------------------------------------------------------------*/
.header{width: 100%; position: relative;}
.header_wrap {position: relative;width: 100%; z-index: 10;}
.header_video {position: relative;  background: rgb(255, 255, 255); }
.header_video video {width: 100%; height:100vh; }
.header_nav { height: 100px; position: absolute; top: 0; left: 0; z-index: 10;}
.header_content {position: absolute; margin: auto;   height: 100px; display: flex; justify-content: space-between; align-items: center; }
.gnb > ul {display: flex; gap: 70px; align-items: center; }
.gnb > ul > li span {font-size: 18px; font-weight: 600; color: #fff;}
.header_content:hover .gnb > ul > li span {color: #000;}
.header_nav.hover-bg { background: #fff;}
.header_nav {width: 100%;left: 0;right: 0;position: absolute;}
.header_content {max-width: 1440px;width: 100%;margin: 0 auto;left: 0;right: 0;transform: none;position: relative; padding-right: 20px; padding-left: 20px;}
/* .ham_ico .ham_hover { display: none !important; }
.header_content:hover .ham_ico .ham_default { display: none !important; }
.header_content:hover .ham_ico .ham_hover { display: inline-block !important; } */
.visual_tit {position: absolute; top: 50%; left: 10%; transform: translateY(-50%); text-align: left; color: #fff; font-size: 24px; font-weight: bold; z-index: 10;}
/*  ----------------------------------------------------------------- */

/* sub header ------------------------------------------------------- */
.sub_header_bg {position: relative;background-image: url('http://carevibe.shop/hana2/images/company_bg_3.png');width: 100%;height: 500px;background-size: cover;background-position: center;overflow: hidden;animation: bgZoom 8s infinite alternate;}

@keyframes bgZoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.sub_header .inner {position: relative;}
.sub_header_wrap {position: relative;width: 100%;overflow: hidden;}
.sub_header_nav { height: 100px; position: absolute; top: 0; left: 0;}
.sub_header_content {position: absolute; margin: auto;   height: 100px; display: flex; justify-content: space-between; align-items: center; }
.sub_header_nav {width: 100%;left: 0;right: 0;position: absolute;}
.sub_header_content {max-width: 1440px;width: 100%;margin: 0 auto;left: 0;right: 0;transform: none;position: relative; padding-right: 20px; padding-left: 20px;}
.sub_header_content:hover .gnb > ul > li span {color: #000;}
.sub_header_nav.hover-bg { background: #fff;}
.sub_header_content:hover .ham_ico .ham_default { display: none !important; }
.sub_header_content:hover .ham_ico .ham_hover { display: inline-block !important; }
.sub_visual_tit {position: absolute; top: 250px; left:0px; width: 100%; overflow: hidden;}
.sub_visual_title {width: var(--site_width);max-width: 100%;margin: 0 auto;display: flex;flex-direction: column;padding-left: 50px;}



/* .sub_visual_tit {max-width: var(--site_width); position: absolute; top: 250px; left: 10%; transform: translateY(-50%); text-align: left; color: #fff; font-size: 24px; font-weight: bold;} */
.sub_visual_tit span {font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, 0.5); display: block; margin-bottom: 0px;}
.sub_visual_tit h3 {font-size: 42px; font-weight: 700; color: #fff; margin-bottom: 0px;}
.sub_visual_title h4 {font-size: 122px; font-weight: 700; color: #670d0d; margin-bottom: 0px; }

/* ------------------------------------------------------------------ */

/* 회사소개 ---------------------------------------------------------- */
.sub_section {padding: 0; margin: 0;}
/* ------------------------------------------------------------------- */

/* header TITLE ----------------------------------------------------- */
.visual_tit span {font-size: 22px; font-weight: 700; color: #ffffff; display: block; margin-bottom: 10px;}
.visual_tit h3 {font-size: 38px; font-weight: 700; color: #fff; margin-bottom: 10px;}
.visual_tit h4 {font-size: 30px; display: inline-block; font-weight: 700; padding: 20px; color: #e4ae18; margin-bottom: 10px; margin-top: 50px; background: rgba(0, 0, 0, 0.5); border-radius: 10px; border: 1px solid #fff;}
/* ------------------------------------------------------------------ */

/* index - point  ---------------------------------------------------- */
.section {width: 100%; background: #000000; height: 850px; padding-top: 100px; }
.point .point_wrap {max-width: var(--site_width); margin: auto;}
.point .point_wrap h2 {font-size: 36px; color:#ffffff; text-align: left; margin-bottom: 50px;}
.point .point_wrap p {font-size: 20px; color: #ecebeb; text-align: left; margin-top: 20px;}

.point_list > li:hover {
  color: #e4ae18;
  /* background-color: #fff; */
}
/* .point_list > li:hover img {
  transform: scale(1.3);
  transition: transform 0.3s;
} */
.point_list {display: flex; gap: 0px; justify-content: center;}

.point_list > li {color:#fff; padding: 20px; border: 1px solid #fff;}

.point_list > li:nth-of-type(1) {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("http://carevibe.shop/hana2/images/point_3.png");width: 33%;height: 500px;background-position: center;background-repeat: no-repeat;background-size: cover;}
.point_list > li:nth-of-type(2) {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("http://carevibe.shop/hana2/images/point_1.png");width: 33%;height: 500px;background-position: center;background-repeat: no-repeat;background-size: cover;}
.point_list > li:nth-of-type(3) {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("http://carevibe.shop/hana2/images/point_2.png");width: 33%;height: 500px;background-position: center;background-repeat: no-repeat;background-size: cover;}

.point_sublist {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.point_sublist > li:nth-of-type(1) {font-size: 24px; font-weight: 700; margin-top: 50px; margin-bottom: 0px;}
.point_sublist > li:nth-of-type(2) {font-size: 30px; font-weight: 800; margin-top: 30px; margin-bottom: 30px; border-bottom:1px solid #fff; padding-bottom: 10px;}
.point_sublist > li:nth-of-type(3) {font-size: 18px; font-weight: 400; margin-top: 30px; margin-bottom: 20px; line-height: 2;}
.point_sublist > li:nth-of-type(4) {margin-top: 30px; margin-bottom: 30px;}

/* ------------------------------------------------------------------- */

/* 인사말 -------------------------------------------------------------- */
.greeting {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: center; background: #ffffff; margin-top: 80px; margin-bottom: 0px;}
.greeting .greeting_wrap h2 {font-size: 36px; color:#000000; text-align: left; margin-bottom: 50px;}
.greeting .greeting_wrap p {font-size: 20px; color: #7d7d7d; text-align: left; margin-top: 20px;}
.greeting_wrap ul {display: flex; justify-content: space-between; gap:100px;}
.greeting_wrap ul > li {width: 50%;}
.greeting_wrap ul > li h4 {text-align: left; font-size: 24px; font-weight: 600; line-height: 1.5; margin-bottom: 30px;}
.greeting_wrap ul > li h3 {text-align: left; font-size: 18px; font-weight: 400; line-height: 2; margin-bottom: 30px;}
.greeting_wrap ul > li h5 {text-align: right; font-size: 20px; font-weight: 400; line-height: 2; margin-bottom: 30px;}
.greeting_wrap ul > li h5 span{font-weight: 600; font-size: 23px;}
/* -------------------------------------------------------------------- */

/* 연혁 */
.com_history {background: #ededed; padding-top: 20px; padding-bottom: 50px;}
.com_history_wrap {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: left; background: #ededed;}
.com_history_wrap ul {display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.com_history .com_history_wrap h2 {font-size: 36px; color:#000000; text-align: left; margin-bottom: 50px;}
.com_history .com_history_wrap p {font-size: 20px; color: #7d7d7d; text-align: left; margin-top: 20px;}
.com_history .com_history_wrap .history {display: flex; flex-direction: column; align-items: center; gap: 0px; }
.com_history .com_history_wrap .history ul{border-bottom: 1px solid #ccc; padding: 24px 0;}
.com_history .com_history_wrap .history ul li:nth-of-type(1) {width: 100px; justify-content: center; align-items: center;}
.com_history .com_history_wrap .history ul li:nth-of-type(2) {width: 500px; justify-content: center; align-items: center;}

/* CERTIFICATE */
.certificate {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: center; background: #ffffff; margin-top: 20px; margin-bottom: 50px;}
.certificate .certificate_wrap h2 {font-size: 36px; color:#000000; text-align: left; margin-bottom: 50px;}
.certificate .certificate_wrap p {font-size: 20px; color: #7d7d7d; text-align: left; margin-top: 20px;}
.certificate .certificate_wrap .certificate_list {display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 50px;}
.certificate .certificate_wrap .certificate_list .certificate_item {background: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #ccc; border-radius: 10px;}
.certificate .certificate_wrap .certificate_list .certificate_item li {padding: 20px; font-size: 18px; font-weight: 400;}
.certificate .certificate_wrap .certificate_list .certificate_item span {border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px;}
/* .certificate .certificate_wrap .certificate_list .certificate_item li:nth-of-type(1) {display: flex; align-items: center;} */

/*  주요 사업분야  -----------------------------------------------------*/
.business {background: #ededed; padding-top: 50px; padding-bottom: 50px;}
.business_wrap {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: left; background: #ededed;}
.business .business_wrap h2 {font-size: 36px; color:#000000; text-align: left; margin-bottom: 10px;}
.business .business_wrap p {font-size: 20px; color: #7d7d7d; text-align: left; margin-top: 20px;}
.business .business_wrap span {font-size: 18px; display: block; margin-bottom: 50px; font-weight: 400; line-height: 1.5; margin-top: 10px; display: block;}
.business .business_wrap {width: 100%;}
.business .business_wrap ul {display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; margin-top: 30px;}
.business .business_wrap ul h3 {text-align: center; font-size: 17px; font-weight: 500; border-radius: 10px; margin-top: 30px; padding: 10px; border: 1px solid #ccc; background: rgb(237, 235, 235);}
.business .business_wrap ul span {text-align: center; font-size: 16px; font-weight: 400; line-height: 1.5; margin-top: 10px; display: block;}


.business_wrap ul li img:hover {
  transform: scale(1.08);
}
.biz-title.air {
  background: #1976d2;
  padding: 8px 16px;
  border-radius: 8px;
  margin-top: 12px;
  font-weight: bold;
  font-size: 1.1em;
  transition: background 0.3s;
}

/* 이미지 호버 시 h3 배경색 변경 */
.business_wrap ul li img:hover + .biz-title.air {
  background: #1565c0;
  color: #fff;
}
/* -------------------------------------------------------------------- */

/* 세정식 */
.scrubber {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: center; background: #ffffff; margin-top: 60px; margin-bottom: 0px;}
.scrubber .scrubber_wrap h2 {font-size: 36px; color:#000000; text-align: left; margin-bottom: 50px;}
.scrubber .scrubber_wrap p {font-size: 20px; color: #7d7d7d; text-align: left; margin-top: 20px;}
.scrubber .scrubber_wrap .txt {text-align: left;}
.scrubber .scrubber_wrap .img2 {border: 0px solid #979696; padding: 0px;;}
.scrubber .scrubber_wrap .txt span {text-align: left; padding: 20px; border: 1px solid #ccc; padding: 10px; border-radius: 5px; display: inline-block; margin-top: 10px;}
.scrubber_wrap > ul {display: flex; justify-content: space-between; gap:0px; align-items: center;} 
.scrubber_line {position: relative; height: 200px; background: #ccc; max-width: var(--site_width); margin: auto; margin-top: 80px; background-image: url("../images/scrubber_bg.png");}
.scrubber_line h3 {position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 700;  color:#fff;}
.scrubber_wrap > ul > li {width: 100%;}
.scrubber_wrap > ul > li h4 {text-align: left; font-size: 24px; font-weight: 600; line-height: 1.5; margin-bottom: 10px;}
.scrubber_wrap > ul > li h3 {text-align: left; font-size: 16px; font-weight: 400; line-height: 2; margin-bottom: 0px;}
.scrubber_wrap > ul > li h5 {text-align: right; font-size: 20px; font-weight: 400; line-height: 2; margin-bottom: 30px;}
.scrubber_wrap > ul > li h5 span{font-weight: 600; font-size: 23px;}

.scrubber1 {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: center; background: #ffffff; margin-top: 60px; margin-bottom: 0px;}
.scrubber1 .scrubber_wrap1 h2 {font-size: 36px; color:#000000; text-align: left; margin-bottom: 50px;}
.scrubber1 .scrubber_wrap1 p {font-size: 20px; color: #7d7d7d; text-align: left; margin-top: 20px;}
.scrubber1 .scrubber_wrap1 .txt {text-align: left;}
.scrubber1 .scrubber_wrap1 .img2 {border: 0px solid #979696; padding: 0px;;}
.scrubber1 .scrubber_wrap1 .txt span {text-align: left; padding: 20px; border: 1px solid #ccc; padding: 10px; border-radius: 5px; display: inline-block; margin-top: 10px;}
.scrubber_wrap1 > ul {display: flex; justify-content: space-between; gap:100px; align-items: center;} 
.scrubber_line {position: relative; height: 200px; background: #ccc; max-width: var(--site_width); margin: auto; margin-top: 80px; background-image: url("../images/scrubber_bg.png");}
.scrubber_line h3 {position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 700;  color:#fff;}
.scrubber_wrap1 > ul > li {width: 100%;}
.scrubber_wrap1 > ul > li h4 {text-align: left; font-size: 24px; font-weight: 600; line-height: 1.5; margin-bottom: 10px;}
.scrubber_wrap1 > ul > li h3 {text-align: left; font-size: 16px; font-weight: 400; line-height: 2; margin-bottom: 0px;}
.scrubber_wrap1 > ul > li h5 {text-align: right; font-size: 20px; font-weight: 400; line-height: 2; margin-bottom: 30px;}
.scrubber_wrap1 > ul > li h5 span{font-weight: 600; font-size: 23px;}


.scrubber2 {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: center; background: #ffffff; margin-top: 60px; margin-bottom: 0px;}
.scrubber2 .scrubber_wrap2 h2 {font-size: 36px; color:#000000; text-align: center; margin-bottom: 10px;}
.scrubber2 .scrubber_wrap2 h4 {font-size: 36px; color:#0a3abe; text-align: center; margin-bottom: 30px;}
.scrubber2 .scrubber_wrap2 p {font-size: 20px; color: #7d7d7d; text-align: left; margin-top: 20px;}
.scrubber2 .scrubber_wrap2 .txt {text-align: left;}
.scrubber2 .scrubber_wrap2 .img2 {border: 0px solid #979696; padding: 0px;;}
.scrubber2 .scrubber_wrap2 .txt span {text-align: left; padding: 20px; border: 1px solid #ccc; padding: 10px; border-radius: 5px; display: inline-block; margin-top: 10px;}
.scrubber_wrap2 > ul {display: flex; justify-content: space-between; gap:100px; align-items: center;} 
.scrubber_line {position: relative; height: 200px; background: #ccc; max-width: var(--site_width); margin: auto; margin-top: 80px; background-image: url("../images/scrubber_bg.png");}
.scrubber_line h3 {position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 700;  color:#fff;}
.scrubber_wrap2 > ul > li {width: 50%;}
.scrubber_wrap2 > ul > li h4 {text-align: left; font-size: 24px; font-weight: 600; line-height: 1.5; margin-bottom: 10px;}
.scrubber_wrap2 > ul > li h3 {text-align: left; font-size: 16px; font-weight: 400; line-height: 2; margin-bottom: 0px;}
.scrubber_wrap2 > ul > li h3 span{text-align: left; color:#0a3abe; font-size: 16px; font-weight: 400; line-height: 2; margin-bottom: 0px;}

.scrubber_wrap2 > ul > li h5 {text-align: right; font-size: 20px; font-weight: 400; line-height: 2; margin-bottom: 30px;}
.scrubber_wrap2 > ul > li h5 span{font-weight: 600; font-size: 23px;}

.scrubber_list2 {display: flex; gap: 20px; justify-content: flex-start; align-items: center;  flex-wrap: wrap;  margin-top: 0px;}
.scrubber_list li {text-align: center; padding: 0; margin: 0;}
.scrubber_list li h3 {border: 1px solid #ccc; padding: 10px; margin: 0; border-radius: 5px; font-size: 16px; font-weight: 400; color: #7d7d7d;}



.scrubber_list {display: flex; gap: 20px; justify-content: flex-start; align-items: center;  flex-wrap: wrap;  margin-top: 0px;}
.scrubber_list li {text-align: center; padding: 0; margin: 0;}
.scrubber_list li h3 {border: 1px solid #ccc; padding: 10px; margin: 0; border-radius: 5px; font-size: 16px; font-weight: 400; color: #7d7d7d;}


.customer {background: #ffffff;}
.customer .customer_wrap { margin: auto; height: 200px; border-top: 1px solid #ccc;}
.customer .customer_wrap p {color: #fff; }
.customer .customer_wrap h3 {font-size: 30px;}
.customer ul {height: 100%; display: flex; gap: 120px; justify-content: center; flex-wrap: wrap; align-items: center;}
.customer .customer_list {display: flex; background: #ffffff; gap: 220px; justify-content: space-between; flex-wrap: wrap; align-items: center;}
/* -------------------------------------------------------------------- */

/* 탈취 */
.deodorization {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: center; background: #ffffff; margin-top: 60px; margin-bottom: 0px;}
.deodorization .deodorization_wrap h2 {font-size: 36px; color:#000000; text-align: left; margin-bottom: 50px;}
.deodorization .deodorization_wrap p {font-size: 20px; color: #7d7d7d; text-align: left; margin-top: 20px; }
.deodorization .deodorization_wrap .txt {text-align: left;}
.deodorization .deodorization_wrap .img2 {border: 0px solid #979696; padding: 0px;}
.deodorization .deodorization_wrap .txt span {text-align: left; padding: 20px; border: 1px solid #ccc; padding: 10px; border-radius: 5px; display: inline-block; margin-top: 10px;}
.deodorization_wrap ul {display: flex; justify-content: space-between; gap:100px; align-items: center;} 
.deodorization_line {position: relative; height: 200px; background: #ccc; max-width: var(--site_width); margin: auto; margin-top: 80px; background-image: url("../images/deo.png");}

.deodorization_line h3 {position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 400;  color:#fff;}

.deodorization_wrap > ul > li {width: 100%;}
.deodorization_wrap ul > li h4 {text-align: left; font-size: 24px; font-weight: 600; line-height: 1.5; margin-bottom: 10px;}
.deodorization_wrap ul > li h3 {text-align: left; font-size: 16px; font-weight: 400; line-height: 2; margin-bottom: 40px;}
.deodorization_wrap ul > li h5 {text-align: right; font-size: 20px; font-weight: 400; line-height: 2; margin-bottom: 30px;}
.deodorization_wrap ul > li h5 span{font-weight: 600; font-size: 23px;}
.deodorization_wrap .deodorization_features {display: flex;   gap: 0px; justify-content: center; }
.deodorization_wrap .deodorization_info {padding: 0px;  height: 400px; border: 1px solid #ccc;  display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 0px; }
.deodorization_wrap .deodorization_features > li {width: 25%; color:#fff;}
/* .deodorization_wrap .deodorization_info > li {width: 20%; color:#fff;} */

.deodorization_wrap .deodorization_info > li:nth-of-type(1) {font-size: 24px; font-weight: 700; margin-top: 0px; margin-bottom: 0px;}
.deodorization_wrap .deodorization_info > li:nth-of-type(2) {font-size: 20px; font-weight: 700; margin-top: 0px; margin-bottom: 0px;}
.deodorization_wrap .deodorization_info > li:nth-of-type(3) { font-size: 16px; font-weight: 400; margin-top: 0px; margin-bottom: 0px;}
/* .deodorization_img1 {background-image: url("../images/sp_2.png");background-size: 100%;background-position: center;transition: background-size 0.8s, filter 0.8s;} */
.deodorization_img1 {background-image: url("../images/sp_1.png");background-size: 100%;background-position: center;transition: background-size 0.8s, filter 0.8s;}
.deodorization_img2 {background-image: url("../images/sp_2.png");background-size: 100%;background-position: center;transition: background-size 0.8s, filter 0.8s;}
.deodorization_img3 {background-image: url("../images/sp_3.png");background-size: 100%;background-position: center;transition: background-size 0.8s, filter 0.8s;}
.deodorization_img4 {background-image: url("../images/sp_4.png");background-size: 100%;background-position: center;transition: background-size 0.8s, filter 0.8s;}


.deodorization_info:hover {
  background-size: 120%;
  filter: brightness(1.6); /* 호버 시 이미지 밝게 */
}

.deodorization_info .txt {
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(0px); /* 처음엔 제자리 */
  transition: opacity 0.8s, transform 0.8s;
  background: tomato;
  padding: 20px;
  pointer-events: none;
  height: 200px;
}

.deodorization_info:hover .txt {
  opacity: 1;
  transform: translateY(-20px);
  pointer-events: auto;
}

.customer {background: #ffffff;}
.customer .customer_wrap { margin: auto; height: 200px; border-top: 1px solid #ccc; max-width: var(--site_width);}
.customer .customer_wrap p {color: #fff; }
.customer .customer_wrap h3 {font-size: 30px;}
.customer ul {height: 100%; display: flex; gap: 120px; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.customer .customer_list {display: flex; background: #ffffff; gap: 220px; justify-content: space-between; flex-wrap: wrap; align-items: center;}

/* -------------------------------------------------------------------- */

/* 도장부스 */

.booth {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: center; background: #ffffff; margin-top: 60px; margin-bottom: 0px;}
.booth .booth_wrap h2 {font-size: 36px; color:#000000; text-align: left; margin-bottom: 50px;}
.booth .booth_wrap p {font-size: 20px; color: #7d7d7d; text-align: left; margin-top: 20px;}
.booth .booth_wrap .booth_point {display: flex; gap: 20px; margin-top: 20px;}
.booth .booth_wrap span {padding: 20px; border: 1px solid #ccc; padding: 10px; border-radius: 5px; display: inline-block; margin-top: 10px;}
.booth .booth_wrap .txt {text-align: left;}
.booth .booth_wrap .img2 {border: 0px solid #979696; padding: 0px;;}
.booth .booth_wrap .txt span {text-align: left; padding: 20px; border: 1px solid #ccc; padding: 10px; border-radius: 5px; display: inline-block; margin-top: 10px;}
.booth_wrap ul {display: flex; justify-content: space-between; gap:100px; align-items: center;} 
.booth_line {position: relative; height: 200px; background: #ccc; max-width: var(--site_width); margin: auto; margin-top: 80px; background-image: url("../images/scrubber_bg.png");}
.booth_line h3 {position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 700;  color:#fff;}
.booth_wrap ul > li {width: 100%;}
.booth_wrap ul > li h4 {text-align: left; font-size: 24px; font-weight: 600; line-height: 1.5; margin-bottom: 10px;}
.booth_wrap ul > li h3 {text-align: left; font-size: 16px; font-weight: 400; line-height: 2; margin-bottom: 40px;}
.booth_wrap ul > li h5 {text-align: right; font-size: 20px; font-weight: 400; line-height: 2; margin-bottom: 30px;}
.booth_wrap ul > li h5 span{font-weight: 600; font-size: 23px;}

/* footer --------------------------------------------------------------*/
.footer {width: 100%; background: #dbdada; height: 400px; padding: 50px 20px;  text-align: center;}
.footer_wrap {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: left; background: #dbdada;}
.footer_wrap > ul {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}

.footer_wrap > ul li h3 {margin-bottom: 50px;}
.footer_wrap > ul li h4 {font-size: 14px; font-weight: 400; color: #767676; margin-top: 10px;}
/* -------------------------------------------------------------------- */


/* 폼메일 */
.sec4 {background: #ffffff;}
.sec4 .inner {max-width: var(--site_width); margin: auto; height: 800px;}
.sec4 .inner h3 {color: #fff; font-size: 28px; font-weight: 500; margin-bottom: 10px; }
.sec4 .inner h4 {color:  rgb(0, 0, 0); font-size: 40px; font-weight: 800; margin-bottom: 10px; margin-top: 80px; text-align: center;}

.sec4 .contact {display: flex; justify-content:center; align-items: center; gap: 50px; margin-top: 0px;}

/* .sec4 .contact .txt .contact_logo {background-image: url("http://carevibe.shop/maple/image/contact_logo_m.png"); width: 189px; height: 48px; background-repeat: no-repeat; background-size: cover; background-position: center;}  */
.sec4 .contact .txt h3 {font-size: 16px; margin-top: 10px;}
.sec4 .contact .txt h4 {font-size: 30px; margin-top: 10px; color:#fff; }
.sec4 .contact .txt span {display: block; font-size: 18px; color: #fff;  }
/* .sec4 .contact .txt .contact_line {width: 100%; height: 2px; background: #ddd; margin: 20px 0; margin-bottom: 130px;} */
.sec4 .contact .form_mail {color:#fff; height: 400px;  width: 100%;}
.sec4 .contact .form_mail h3 {color:#c0c0c0; font-size: 16px;  width: 100%; margin-bottom: 30px; margin-top: 20px;}
.sec4 .contact .txt {width: 40%; background: rgb(0, 0, 0); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; height: auto;}

/* 폼메일 */
/* .form_mail {background: blue;} */
.form_mail ul {display: flex;  gap: 0px; padding: 0px; justify-content: center; width: 100%; background: #ffffff;}
.form_mail ul li {width: 100%; padding: 10px;}

.form_mail ul .name  {width:100%; height: 50px; border-radius: 10px; padding-left: 10px; border: 1px solid #000000;; background-color: #ffffff;  color:#000000;}
.form_mail ul .phone {width:100%; height: 50px; border-radius: 10px; padding-left: 10px;  border: 1px solid #000000;; background-color: #ffffff;  color:#000000;}
.form_mail ul .email {width:100%; height: 50px; border-radius: 10px; padding-left: 10px;  border: 1px solid #000000;; background-color: #ffffff;  color:#000000;}
.form_mail ul .message {width: 100%; height: 250px; border-radius: 10px; padding: 10px; border: 1px solid #000000;; background-color: #ffffff;  color:#000000; resize: none;}

.form_mail .agree {display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%;}
.form_mail .agree .check {color:#fff; margin-top: 0px; width: 100%; text-align: left; display: flex; justify-content: flex-start; gap:10px; align-items: center;}
.form_mail .agree .check input {width: 20px; height: 20px; padding-right: 10px;}
.form_mail .agree .check span {font-size: 14px; color:#000000;}
.form_mail .agree .question {background: #F7941D; width: 250px;  border-radius: 10px; margin-right: 20px; text-align: center;}
.form_mail .agree .question span{padding: 10px; font-size: 20px; font-weight: 600; color:#fff;}

/* input.name placeholder 폰트 크기 줄이기 */
input.name::placeholder {font-size: 15px;font-weight: 500;color: #cccccc;}
input.phone::placeholder {font-size: 15px;font-weight: 500;color: #cccccc;}
input.email::placeholder {font-size: 15px;font-weight: 500;color: #cccccc;}
textarea.message::placeholder {font-size: 15px;font-weight: 500;color: #cccccc;}


#sham_ico {cursor: pointer; z-index: 1000;} 
/* .hambuger_wrap {display: none;} */
header {position: relative;}
.hambuger_wrap {z-index: 10; position: absolute; max-width: var(--site_width); top:0px; width: 60%; background: #353535; height: 100%; z-index: 1;}
.hambuger_wrap .inner {padding-left: 10px; padding-right: 10px;}
.hambuger_wrap .hambuger .top {margin-top: 30px; text-align: center;}
.hambuger_wrap .hambuger .top > ul {display: flex; justify-content: space-between; align-items: center;}
.hambuger_wrap .hambuger .top:after {content: ""; height: 1px; width: 100%; display: block; background: #e9dddd; margin-top: 10px;}
.hambuger_wrap .hambuger .top > ul  li:nth-of-type(1) {font-size: 20px; font-weight: 700; color:#fff;}
.hambuger_wrap .hambuger .top > ul  li:nth-of-type(2) {background-image: url("../images/hambuger_close.png"); width:40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.hambuger_wrap .hambuger .menu {margin-top: 30px;}
.hambuger_wrap .hambuger .menu > ul {display: flex; justify-content: start; align-items: left; gap: 0px; flex-direction: column; color:#fff; font-size: 18px; font-weight: 600;}
.hambuger_wrap .hambuger .menu > ul  li {height: 50px; align-items: center; padding-left: 6px;}
.hambuger_wrap .hambuger .menu > ul  li span {line-height: 50px; font-size:16px;}
.hambuger_wrap .hambuger .menu > ul  li:hover {background: #ffffff; color:#FCB908;}
.hambuger_wrap .ham_logo {display: flex; text-align: center; justify-content: center; margin-top: 60px;}
.hambuger_wrap .ham_logo div {text-align: center; color:#fff; background: no-repeat center/cover url("/images/logo_w.png"); height: 50px; width: 100px;}
.hambuger_wrap .ham_txt {color:#fff; font-size: 16px; font-weight: 600; display: flex; text-align: center; justify-content: center; margin-top: 40px;}
.hambuger_wrap .ham_mail {color:#fff; font-size: 16px;  font-weight: 800; display: flex; text-align: center; justify-content: center; margin-top: 10px;}


#visual-slogan {font-size: 50px;}

.m_only {display: none;}
/* 모달창 */

@media (max-width: 950px) {
.header_content .gnb {display: none;}
.gnb {display: none;}
.visual_tit .m_only {display: block;}
#visual-slogan {font-size: 38px; margin-right: 20px;}
.point_list > li:nth-of-type(1) {width: 100%; height: 700px;}
.point_list > li:nth-of-type(2) {width: 100%; height: 700px;}
.point_list > li:nth-of-type(3) {width: 100%; height: 700px;}

}


@media (max-width: 768px) {
.header_content .gnb {display: none;}
.section {margin-top: 0px; margin-bottom: 50px;}
.point_wrap {padding-right: 20px; padding-left: 20px; }
.point_list {flex-direction: column;}

.point_sublist {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.point_sublist > li:nth-of-type(1) {font-size: 24px; font-weight: 700; margin-top: 50px; margin-bottom: 0px;}
.point_sublist > li:nth-of-type(2) {font-size: 30px; font-weight: 800; margin-top: 30px; margin-bottom: 30px; border-bottom:1px solid #fff; padding-bottom: 10px;}
.point_sublist > li:nth-of-type(3) {font-size: 18px; font-weight: 400; margin-top: 30px; margin-bottom: 20px; line-height: 2;}
.point_sublist > li:nth-of-type(4) {margin-top: 30px; margin-bottom: 0px;}

.section {width: 100%; background: #000000; height: 2450px; padding-top: 60px; }
.greeting_wrap ul {display: flex; flex-direction: column; justify-content: space-between; gap:0px;  padding-top: 80px; padding-right: 20px; padding-left: 20px;}
.greeting_wrap ul > li {width: 100%;}
.greeting {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: center; background: #ffffff; margin-top: 0px;padding-top: 0; margin-bottom: 0px;}
.business .business_wrap ul { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-top: 30px;}
.business .business_wrap ul {display: flex;gap: 20px;justify-content: center;flex-wrap: wrap;align-items: center;margin-top: 30px;}
.business .business_wrap ul li {text-align: center;}
.footer_wrap > ul > li:nth-of-type(2) {display: none;}


.scrubber_wrap2 > ul {display: flex; padding-right: 20px; padding-left: 20px; justify-content: space-between; flex-direction: column; gap:0px; align-items: center;} 
.scrubber_wrap2 > ul > li {width: 100%;}

.scrubber_wrap > ul {display: flex; justify-content: space-between; gap:0px; align-items: center; flex-direction: column; padding-right: 20px; padding-left: 20px;} 

.customer .customer_wrap { margin: auto; height: 240px; border-top: 1px solid #ccc; padding-bottom: 50px; padding-top: 80px;}
.customer ul {height: 100%; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center;}
.customer .customer_list {display: flex; background: #ffffff; gap: 20px; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.customer_wrap >ul >li >h3 {font-size: 18px;}
.scrubber_wrap1 {padding-right: 20px; padding-left: 20px;}


.deodorization_wrap ul {flex-direction: column;} 
.deodorization_wrap ul {display: flex; justify-content: space-between; gap:30px; align-items: center;} 

.deodorization_line {position: relative; height: 140px; background: #ccc; max-width: var(--site_width); margin: auto; margin-top: 40px; background-image: url("../images/deo.png");}

.deodorization_line h3 {position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 400; width: 80%;  color:#fff;}

.deodorization {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: center; background: #ffffff; margin-top: 10px; margin-bottom: 50px;}
.deodorization_wrap .deodorization_features > li {width: 100%; color:#fff;}

.com_history .com_history_wrap .history ul li:nth-of-type(2) {width: 300px; justify-content: center; align-items: center;}

.footer {width: 100%; background: #dbdada; height: 400px; padding: 50px 0px;  text-align: center;}
.footer_wrap {max-width: var(--site_width); margin: auto; padding: 50px 20px; text-align: text; background: #dbdada;}

/* .booth_img {display: flex; flex-direction: column;} */
.booth_img ul {padding-right: 0; margin-right: 0px; display: flex; flex-direction: column; justify-content: center; gap:20px; align-items: center;}

  .booth_img ul li img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 20px;
  }

}

/* 고객사 로고 반응형 이미지 */

@media (max-width: 900px) {
  .customer_list img {
    width: 120px;
    /* height: 50px; */
    margin: 0 6px;
  }
}
/* scrubber .img2 반응형 이미지 */
.scrubber .img2 img {
  padding-top: 50px;
  width: 600px;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  /* box-shadow: 0 2px 16px rgba(0,0,0,0.08); */
  display: block;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .scrubber .img2 img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }
}
/* scrubber2 반응형 이미지 */
.scrubber2 .img2 img {
  padding-top: 50px;
  width: 400px;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  /* box-shadow: 0 2px 16px rgba(0,0,0,0.08); */
  display: block;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .scrubber2 .img2 img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }

  .deodorization .img2 img {
   
    width: 100%;
    /* max-width: 100%; */
    height: auto;
    border-radius: 12px;
  }

}