@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%;height: 100vh;overflow: hidden; background: #A8C920;}
.header_visual {position: relative; max-width: var(--site_width); margin: auto; width: 100%;height: 100vh; object-fit: cover; overflow: hidden;}
.header_visual .swiper-slide {position: relative;width: 100%;height: 100vh;display: flex;align-items: center;justify-content: flex-end;} 
 .header_visual .visual_img {width: auto;height: 100vh;object-fit: cover;}
.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 { max-width: var(--site_width); margin: auto; }
.visual_title {position: absolute;top: 50%; transform: translateY(-50%); color: #fff;font-size: 24px;font-weight: bold;z-index: 10;padding-left: 20px;width: 1440px; }
.visual_tit .visual_title span {font-size:48px; font-weight: 900; color:#535353; display: inline-block; margin-bottom: 50px;}
.visual_tit .visual_title h3 {font-size: 36px; margin-bottom: 10px;}
.visual_tit .visual_title .store > ul {display: flex; justify-content: flex-start; align-items: center; gap: 30px; margin-top: 50px;}
.visual_tit .visual_title .store > ul > li {border: 1px solid #252525; padding: 10px 20px 16px 20px; border-radius: 10px;}
/*  ----------------------------------------------------------------- */
.header_nav.hover-bg {background-color: rgba(0, 0, 0, 0.1) !important;}

.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; }

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

/* index */
.section {margin-top: 0px; margin-bottom: 0px;}
.introduce_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; text-align: center; padding-top: 100px; padding-bottom: 100px;}
.introduce_wrap > ul {display: flex; justify-content: space-between; gap:200px; align-items: center;  width: 100%;}
.introduce_wrap > ul > li:nth-of-type(1) {width: 60%; text-align: right;  margin-right: auto;}
.introduce_wrap > ul > li:nth-of-type(2) {width: 40%; }
.introduce_wrap h2 {font-size: 40px; font-weight: 700; color: #333; margin-bottom: 20px; text-align: center;}
.introduce_wrap h3 {font-size: 26px; font-weight: 700;  color: #A8C920; margin-bottom: 20px;  text-align: center;}
.introduce_wrap h4 {font-size: 18px; font-weight: 400; color: #333; margin-bottom: 20px; line-height: 2.3;  text-align: center;}
.introduce_wrap p {font-size: 18px; color: #666; line-height: 1.6; margin-bottom: 30px;}
.introduce_wrap .introduce_img {background-image: url('/images/brand_logo.png'); background-size: cover; background-position: center; width: 300px; height: 136px; margin-top: 20px; text-align: right;}


/* company */

.company_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; text-align: center; padding-top: 100px; padding-bottom: 100px; }
.company_wrap > ul {display: flex; justify-content: space-around; gap:200px; align-items: center;  width: 100%;}
.company_wrap > ul > li:nth-of-type(1) {width: 60%; text-align: right;  margin-right: auto;}
.company_wrap > ul > li:nth-of-type(2) {width: 40%; }
.company_wrap h2 {font-size: 40px; font-weight: 700; color: #333; margin-bottom: 20px; text-align: center;}
.company_wrap h3 {font-size: 26px; font-weight: 700;  color: #A8C920; margin-bottom: 50px;  text-align: center;}
.company_wrap h4 {font-size: 18px; font-weight: 400; color: #333; margin-bottom: 20px; line-height: 2.3;  text-align: center;}
.company_wrap p {font-size: 18px; color: #666; line-height: 1.6; margin-bottom: 30px;}
.company_wrap .company_img {background-image: url('/images/company_bg.png'); background-size: cover; background-position: center; width: 500px; height: 600px; margin-top: 20px; text-align: right;}

.introduce_wrap_2 .introduce_img_2 {background-image: url('/images/company_bg_3.png'); background-size: cover; background-position: center; width: 500px; height: 600px; margin-top: 20px; text-align: right;}
.introduce_wrap_2 {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; text-align: center; padding-top: 100px; padding-bottom: 100px;}
.introduce_wrap_2 > ul {display: flex; justify-content: center; gap:200px; align-items: center;  width: 100%;}
.introduce_wrap_2 > ul > li:nth-of-type(1) {width: 50%; text-align: right;  margin-right: auto;}
.introduce_wrap_2 > ul > li:nth-of-type(2) {width: 50%; }
.introduce_wrap_2 h2 {font-size: 40px; font-weight: 700; color: #333; margin-bottom: 20px; text-align: center;}
.introduce_wrap_2 h2::before {content: ""; display: block; width: 50px; height: 30px; background: #A8C920; }
.introduce_wrap_2 h3 {font-size: 26px; font-weight: 700;  color: #A8C920; margin-bottom: 60px;  text-align: center;}
.introduce_wrap_2 h4 {font-size: 18px; font-weight: 400; color: #333; margin-bottom: 20px; line-height: 2.3;  text-align: center;}
.introduce_wrap_2 h4::after {content: "";display: block;width: 50px;height: 30px;background: #A8C920;margin-left: auto; margin-top: 50px;}
.introduce_wrap_2 p {font-size: 18px; color: #666; line-height: 1.6; margin-bottom: 30px;}
.introduce_wrap_2 .introduce_img {background-image: url('/images/brand_logo.png'); background-size: cover; background-position: center; width: 300px; height: 136px; margin-top: 20px; text-align: right;}
.notice_txt {font-size: 14px; color: #999; margin-top: 10px; text-align: center;}
.notice_txt h4 {margin-bottom: 20px;}
.notice_txt .notice_txt_wrap {max-width: var(--site_width); margin: 0 auto; padding:20px; text-align: center;}

/* contact */
.contact_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; text-align: center; padding-top: 100px; padding-bottom: 100px; }

.contact_wrap h2 {font-size: 40px; font-weight: 700; color: #333; margin-bottom: 20px; text-align: center;}
.contact_wrap h3 {font-size: 26px; font-weight: 700;  color: #A8C920; margin-bottom: 50px;  text-align: center;}
.contact_wrap h4 {font-size: 18px; font-weight: 400; color: #333; margin-bottom: 20px; line-height: 2.3;  text-align: center;}
.contact_wrap p {font-size: 18px; color: #666; line-height: 1.6; margin-bottom: 30px;}
.contact_wrap .company_img {background-image: url('/images/company_bg.png'); background-size: cover; background-position: center; width: 500px; height: 600px; margin-top: 20px; text-align: right;}



/* 감동을 전하는 헤어 */
.subjects {background: #f7f6f6; padding-bottom: 50px; padding-top: 50px;}
.subjects_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 20px; text-align: center; padding-top: 50px; padding-bottom: 50px;}
.subjects_wrap span {font-size: 20px; font-weight: 700; color: #333;} 
.subjects_wrap h3 {font-size: 40px; font-weight: 700; color: #333; margin-top: 10px; margin-bottom: 20px; text-align: center;}
.subjects_wrap ul {display: flex; justify-content: space-between; align-items: center; gap:0px; margin-top: 30px;}
.subjects_wrap .subjects_list {display: flex; flex-direction: column; align-items: center; border: 1px solid #000; padding: 20px;}
.subjects_wrap .subjects_list {position: relative;}
.subjects_wrap .subjects_list::before {content: "";position: absolute;top: 0; left: 0;width: 0;height: 50%;border-left: 0;transition: border-left 0.2s;}
.subjects_wrap .subjects_list:hover::before {border-left: 10px solid #A8C920;}
.subjects_wrap .subjects_list::after {content: "";position: absolute;top: 0; left: 0;width: 50%;height: 0;border-top: 0;transition: border-top 0.2s;}
.subjects_wrap .subjects_list:hover::after {border-top: 10px solid #A8C920;}
.subjects_wrap .subjects_list::before {content: "";position: absolute;top: 0; left: 0;width: 0;height: 50%;border-left: 0;transition: border-left 0.2s;}
.subjects_wrap .subjects_list:hover::before {border-left: 10px solid #A8C920;}
.subjects_wrap .subjects_list:hover {border-color: #A8C920;;transition: border-color 0.2s;}
.subjects_wrap .subjects_list > li:nth-of-type(1) {font-size: 28px; font-weight: 700; color: #333; margin-bottom: 30px; margin-top: 50px;}
.subjects_wrap .subjects_list > li:nth-of-type(2) {font-size: 18px; font-weight: 500; color: #333; margin-bottom: 30px; margin-top: 20px;}
.subjects_wrap .subjects_list .subject_img_1 {width: 100%;height: 400px;background: url('/images/service_1.png') no-repeat center / cover;margin: 0px;padding: 0;transition: transform 0.3s;}
.subjects_wrap .subjects_list:hover .subject_img_1 {transform: scale(1.08);}
.subjects_wrap .subjects_list .subject_img_2 {width: 100%;height: 400px;background: url('/images/service_2.png') no-repeat center / cover;margin: 0px;padding: 0;transition: transform 0.3s;}
.subjects_wrap .subjects_list:hover .subject_img_2 {transform: scale(1.08);}
.subjects_wrap .subjects_list .subject_img_3 {width: 100%;height: 400px;background: url('/images/service_3.png') no-repeat center / cover;margin: 0px;padding: 0;transition: transform 0.3s;}
.subjects_wrap .subjects_list:hover .subject_img_3 {transform: scale(1.08);}
.subjects_wrap .subjects_list .subject_img_4 {width: 100%;height: 400px;background: url('/images/service_4.png') no-repeat center / cover;margin: 0px;padding: 0;transition: transform 0.3s;}
.subjects_wrap .subjects_list:hover .subject_img_4 {transform: scale(1.08);}


/* 서비스 */
.service {background: #ffffff; padding-bottom: 50px; padding-top: 50px;}
.service_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 20px; text-align: center; padding-top: 50px; padding-bottom: 50px;}
.service_wrap ul {width: 100%;}
.service_wrap ul li {width: 25%;}
.service_wrap span {font-size: 20px; font-weight: 700; color: #000000;} 
.service_wrap h3 {font-size: 40px; font-weight: 700; color: #000000; margin-top: 10px; margin-bottom: 20px; text-align: center;}
.service_wrap ul {display: flex; justify-content: space-between; align-items: center; gap:0px; margin-top: 30px;}
.service_wrap .service_list {display: flex; flex-direction: column; background-color: #A8C920; align-items: center; border: 1px solid #ffffff; padding: 20px;}
.service_wrap .service_list {position: relative; text-align: center;}
.service_wrap .service_list::before {content: "";position: absolute;top: 0; left: 0;width: 0;height: 100%;border-left: 0;transition: border-left 0.2s;}
.service_wrap .service_list::before {content: "";position: absolute;top: 0; left: 0;width: 0;height: 0;border-left: 6px solid #778F14;transition: height 0.3s;z-index: 1;}
.service_wrap .service_list:hover::before {height: 100%;}
.service_wrap .service_list::after {content: "";position: absolute;top: 0; left: 0;width: 0;height: 0;border-top: 6px solid #778F14;transition: width 0.3s;z-index: 1;}
.service_wrap .service_list:hover::after {width: 100%;}
.service_wrap .service_list:hover {border-color:  #778F14;transition: border-color 0.2s;}
.service_wrap .service_list::after {content: "";position: absolute;top: 0; right: 0;width: 0;height: 0;border-right: 6px solid #778F14;transition: height 0.3s;z-index: 1;}
.service_wrap .service_list:hover::after {height: 100%;}
.service_wrap .service_list::before {content: "";position: absolute;left: 0; bottom: 0;width: 0;height: 0;border-bottom: 6px solid #778F14;transition: width 0.3s;z-index: 1;}
.service_wrap .service_list:hover::before {width: 100%;}
.service_wrap .service_list > li:nth-of-type(1) {font-size: 30px; font-weight: 700; color: #ffffff; width: 300px; margin-bottom: 30px; margin-top: 50px; text-align: center; border-bottom: 1px solid #eee; padding-bottom: 20px;}
.service_wrap .service_list > li:nth-of-type(2) {font-size: 24px; font-weight: 500; color: #ffffff; width: 300px; margin-bottom: 30px; margin-top: 20px; text-align: center;}

/* 모델 */
.service {background: #ffffff; padding-bottom: 50px; padding-top: 50px;}
.service_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 20px; text-align: center; padding-top: 50px; padding-bottom: 50px;}
.service_wrap ul {width: 100%;}
.service_wrap ul li {width: 25%;}
.service_wrap span {font-size: 20px; font-weight: 700; color: #000000;} 
.service_wrap h3 {font-size: 40px; font-weight: 700; color: #000000; margin-top: 10px; margin-bottom: 20px; text-align: center;}

/* 모델 */
.model {background: #000000;  padding-top: 58px; padding-bottom: 100px;}
.model h3 {font-size: 40px; font-weight: 700; color: #ffffff; margin-top: 10px; margin-bottom: 20px; text-align: center;}
.model span {display: block; font-size: 20px; font-weight: 500; color: #ffffff; margin-top: 10px; margin-bottom: 80px; text-align: center;}

/* .swiper-wrapper {background: #000000; max-width: var(--site_width); margin: 0 auto; padding: 0 20px; text-align: center; padding-top: 50px; padding-bottom: 50px;} */
.model_wrap {background: #000000; max-width: var(--site_width); margin: 0 auto; padding: 0 20px; text-align: center; }
.model_wrap ul {width: 100%;}
/* .model_wrap ul li {width: 25%;} */
.model_wrap span {font-size: 20px; font-weight: 700; color: #ffffff;} 
.model_wrap h3 {font-size: 40px; font-weight: 700; color: #ffffff; margin-top: 10px; margin-bottom: 20px; text-align: center;}
.model_wrap ul {display: flex; justify-content: space-between; align-items: center; gap:0px; margin-top: 30px;}

/* 카운터 */
.count ul {display: flex; justify-content: space-around; align-items: center; max-width: var(--site_width); margin: 0 auto; padding: 0 20px; text-align: center; padding-top: 50px; padding-bottom: 50px; background: #ffffff;}
.count ul h2 {font-size: 50px; font-weight: 700; color: #333; margin-bottom: 20px; text-align: center;}
.count ul h3 {font-size: 17px; font-weight: 400; color: #333; margin-bottom: 20px; text-align: center;}

/* 장점 */
.strength {background: #f0f0f0;  padding-top: 5px; padding-top: 100px; padding-bottom: 100px;}
.strength h3 {font-size: 40px; font-weight: 700; color: #ffffff; margin-top: 10px; margin-bottom: 20px; text-align: center;}
.strength span {display: block; font-size: 20px; font-weight: 500; color: #ffffff; margin-top: 10px; margin-bottom: 80px; text-align: center;}
.strength_wrap {background: #f0f0f0; max-width: var(--site_width); margin: 0 auto; padding: 0 20px; text-align: center; }
.strength_wrap ul {width: 100%;}
.strength_wrap span {font-size: 20px; font-weight: 700; color: #ffffff;} 
.strength_wrap h3 {font-size: 40px; font-weight: 700; color: #ffffff; margin-top: 10px; margin-bottom: 20px; text-align: center;}
.strength_wrap ul {display: flex; justify-content: space-between; align-items: center; gap:0px; margin-top: 30px;}

.strength_wrap ul:nth-of-type(1) li:nth-of-type(1) {width: 40%;}
.strength_wrap ul:nth-of-type(1) li:nth-of-type(2) {width: 60%; padding-left: 150px; padding-right: 20px;} 
.strength_wrap ul:nth-of-type(2) li:nth-of-type(1) {width: 60%; padding-right: 150px; padding-left: 20px;}
.strength_wrap ul:nth-of-type(2) li:nth-of-type(2) {width: 40%;}
.strength_wrap ul:nth-of-type(3) li:nth-of-type(1) {width: 40%;}
.strength_wrap ul:nth-of-type(3) li:nth-of-type(2) {width: 60%; padding-left: 150px; padding-right: 20px;} 

.strength_wrap ul li h3 {font-size: 30px; font-weight: 700; color: #333; margin-bottom: 20px; text-align: left;; padding-left: 20px; border-left: 15px solid #A8C920; }
.strength_wrap ul li h4 {font-size: 24px; font-weight: 700; color: #A8C920; ; margin-bottom: 20px; text-align: left; }
.strength_wrap ul li span {font-size: 17px; line-height: 30px; font-weight: 400; color: #333; margin-bottom: 20px; text-align: left;  }
.strength_wrap ul li {margin-bottom: 100px;}
.strength_wrap .img_1 {background: url('/images/sample_3.png') no-repeat center / cover; width: 600px; height: 350px; transition: transform 0.3s;}
.strength_wrap .img_2 {background: url('/images/sample_2.png') no-repeat center / cover; width: 600px; height: 400px; transition: transform 0.3s;}
.strength_wrap .img_3 {background: url('/images/sample_1.png') no-repeat center / cover; width: 600px; height: 350px; transition: transform 0.3s;}
.strength_wrap .img:hover {transform: scale(1.05);}

/* footer */
.footer {background: #A8C920;  padding-top: 100px; padding-bottom: 100px; color: #fff; text-align: left;}
.footer_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 20px; text-align: left; }
.footer_wrap h3 {font-size: 40px; font-weight: 700; color: #ffffff; margin-top: 10px; margin-bottom: 20px; text-align: left;}
.footer_wrap h4 {display: block; font-size: 18px; font-weight: 500; color: #e8e6e6; margin-top: 10px; margin-bottom: 20px; text-align: left;}
.footer_wrap span {display: block; font-size: 18px; font-weight: 500; color: #e8e6e6; margin-top: 10px; margin-bottom: 20px; text-align: left;}
.footer_wrap ul {display: flex; justify-content: space-between; align-items: center; gap:0px; margin-top: 30px;}
.footer_wrap .img {background: url('/images/f_logo.png') no-repeat center / cover; width: 200px; height: 100px; margin-right: 20px;}
.footer_wrap .img:hover {transform: scale(1.05);}




.contactus {background: #000000;}
.sec4 .inner {max-width: var(--site_width); margin: auto; height: 440px;}
.sec4 .inner h3 {color: #fff; font-size: 28px; font-weight: 500; margin-bottom: 10px; }
.sec4 .inner h4 {color:  tomato; font-size: 40px; font-weight: 800; margin-bottom: 10px;}

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

.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 .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 ul {display: flex;  gap: 0px; padding: 0px; justify-content: center; width: 100%; background: #000;}
.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 #fff;; background-color: #000;  color:#fff;}
.form_mail ul .phone {width:100%; height: 50px; border-radius: 10px; padding-left: 10px;  border: 1px solid #fff;; background-color: #000;  color:#fff;}
.form_mail ul .email {width:100%; height: 50px; border-radius: 10px; padding-left: 10px;  border: 1px solid #fff;; background-color: #000;  color:#fff;}
.form_mail ul .message {width: 100%; height: 250px; border-radius: 10px; padding: 10px; border: 1px solid #fff;; background-color: #000;  color:#fff; 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:#fff;}
.form_mail .agree .question {background: #F7941D; width: 250px;  border-radius: 10px; margin-right: 20px;}
.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: 600;color: #ffffff;}
input.phone::placeholder {font-size: 15px;font-weight: 600;color: #ffffff;}
input.email::placeholder {font-size: 15px;font-weight: 600;color: #ffffff;}
textarea.message::placeholder {font-size: 15px;font-weight: 600;color: #ffffff;}



@media (max-width: 950px) {
.header_content .gnb {display: none;}
}


@media (max-width: 768px) {
.header_content .gnb {display: none;}
.section {margin-top: 0px; margin-bottom: 50px;}
}