@charset "utf-8";


/* 모든페이지의 공통된 스타일:common.css */
/* ------------------------------------------------ 1)태그초기화 -----------------------------------------------------------------------------  */
body{ margin:0px; font-family : 'Noto Sans KR', 돋움, Dotum, sans-serif;font-size:15px;font-weight:400;color:#333;position:relative;line-height:20px;letter-spacing:-0.5px}
html{margin:0 auto;width:100%;height:100%}
h1, h2,h3, h4, h5, p, ul, ol, dl, dd{ margin: 0px; padding: 0px; font-weight:normal }
ul,ol,li{ list-style:none; }
a{ text-decoration: none;color:#333}
a:hover{color:#000; text-decoration: none;}
a:active{background:none}
img, fieldset, button{ border:0px;}
address,em{font-style:normal}
hr{display:none}
optgroup {font-style:normal;font-weight:bold;}
caption, legend{display:block; position:absolute; left:0; top:-5000px; overflow:hidden;width:0; line-height:0;height:0;font-size:0}
table {border-collapse:collapse}
.blind{position: absolute; top: 0px; left: -9999px; font-size: 0px; line-height: 0px }
label{cursor:pointer}
.hide{ display:none; }
input:focus {  outline: none;}
select:focus {  outline: none;}
textarea:focus {  outline: none;}

/* ============2)공통 클래스 모음=========================== */
.floL{ float: left !important}
.floR{ float: right !important}
.posR{ position: relative !important}
.posA{ position: absolute !important}
.tc{text-align:center !important}
.tr{text-align:right !important}
.tl{text-align:left !important}
.clr{*zoom: 1 }
.clr:after{ content: ""; display: block; clear: both }

.w1900{width:100%; margin: 0px auto}
.w1100{width:1100px; margin: 0px auto}
.w100{min-width: 1100px; margin: 0px auto }
.w500{width: 500px}
.w550{width: 550px}
.w90{width:90%; margin: 0px auto }
.h550{height:550px}



.bd0{border:0 !important}
.bdl0{border-left:0 !important}
.bg0{background:none !important}
.bg1{background:#f3f3f3 !important}
.mg0{margin:0 auto  !important}
.mgt-10{margin-top:10px}
.mgt-20{margin-top:20px}
.mgt-30{margin-top:30px}
.mgt-40{margin-top:40px}
.mgt-50{margin-top:50px !important}
.mgt-70{margin-top:70px}
.mgt-80{margin-top:80px}
.mgt-90{margin-top:90px}
.mgt-100{margin-top:100px !important}
.mgt-150{margin-top:150px !important}

.mgl-0{margin-left:0 !important}
.mgl-10{margin-left:10px}
.mgl-15{margin-left:15px}
.mgl-20{margin-left:20px}
.mgl-25{margin-left:25px}
.mgl-30{margin-left:30px}
.mgl-50{margin-left:50px}

.mgr-0{margin-right:0 !important}
.mgr-10{margin-right:10px}
.mgr-15{margin-right:15px}
.mgr-20{margin-right:20px !important}

.pdb-10{padding-bottom:10px}
.pdb-80{padding-bottom:80px}

.pdt-10{padding-top:10px}
.pdt-25{padding-top:25px}

input[type="checkbox"] {cursor:pointer}

.line_gray{background:#e4e4e4;height:1px;width:100%}
.line_gray-50{background:#e4e4e4;height:1px;width:50%}

/* ============3)skip네비게이션============================ */
#skip a{ position: absolute; top: 0px; left: -9999px; z-index: 100 }
#skip a:focus, #skip a:active{ left: 0px; width: 100%; text-align: center; padding: 10px 0px; background: #8f6210; color: #fff; font-weight: bold; }



/* ============4)공통 레이아웃============================= */
#wrap{min-width:1100px}
#container{min-width:1100px;margin-bottom:80px }
#footer{margin:0px auto 20px auto;border-top:2px solid #dbdbdb}





/* ============4)공통 레이아웃============================= 204592 */

#header{}

header {width: 100%;background:#fff;line-height: 80px; /*텍스트 중앙정렬*/
   height: 80px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
	z-index:9998;
	overflow:hidden;
	
}

.innerHeader {
    max-width: 1100px; /*로고,메뉴바가 있는 실제 메뉴 너비*/
    margin: auto; /*중앙정렬*/
    display: flex; /*로고, 메뉴 가로 배치*/
    justify-content: space-between;
    align-items: center;	
}


.innerHeader .logo{position: absolute;top: 10px;left: 50%;margin-left:-45%;width:10%}
.innerHeader .logo img{width:85px} 

/* gnb*/


.innerHeader .mainmenu {
   position: absolute;
    top: 3px;
	left:20%;
	width:80%;
    /* top: 0; */
    /* transform: translateX(-55%); */
    /* margin-left: 10px; */

}

.submenu{margin-top:-20px}
.mainmenu_list_inner{}

.innerHeader .mainmenu .mainmenu_list {
    display: flex; /*메뉴들 가로배치*/  
    font-size: 18px;
}

.innerHeader .mainmenu .mainmenu_list .mainmenu_list_inner {
    width:25%;
    cursor: pointer;
	position:relative;
	text-align: left;
}


.innerHeader .mainmenu .mainmenu_list .mainmenu_list_inner>a:hover>span {   
	color:#000;
	font-size:22px;
}
.innerHeader .mainmenu .mainmenu_list .mainmenu_list_inner>a>span .blit{
    position: relative;
}

.innerHeader .mainmenu .mainmenu_list .mainmenu_list_inner>a:hover>span .blit::after {
    position: absolute;
    top: 8px; /* 원하는 위치값  */
    left: 5px; /* 원하는 위치값 */
    display: inline-block;
    content: '';
    width: 8px; /* 만들 화살표의 넓이*/
    height: 8px; /* 만들 화살표의 넓이 */
    border-top: 3px solid #fff; /* rotate 했을때 왼쪽선 두께와 색상 */
    border-right: 3px solid #fff; /*rotate 했을때 오른쪽선 선 두께 */
    transform: rotate(45deg); /* 각도 */
}
.innerHeader .mainmenu .mainmenu_list .mainmenu_list_inner>a>span:after {
    content: "";
    width: 0; /*display none 같은 역할*/
    height: 3px;
    left: 50%; /*left 50%를 주면 중앙에서부터 바가 퍼지게 만듦*/
    bottom: -10px;
    background-color: var(--color-wine);
    position: absolute;
    transition: all 0.3s; /*width가 100이 되는 과정을 천천히*/

}

.innerHeader .mainmenu .mainmenu_list .mainmenu_list_inner:hover span::after {
    width: 100%; /*hover 하면 span이 100%여서 보임*/
    left: 0;	
}

.innerHeader .mainmenu .mainmenu_list .mainmenu_list_inner:hover span{
    font-weight: 700;
	color:#000;
	font-size:22px;

}
.innerHeader .mainmenu .mainmenu_list .mainmenu_list_inner:hover span .blit::after{
    position: absolute;
    top: 8px; /* 원하는 위치값  */
    left: 5px; /* 원하는 위치값 */
    display: inline-block;
    content: '';
    width: 8px; /* 만들 화살표의 넓이*/
    height: 8px; /* 만들 화살표의 넓이 */
    border-top: 3px solid #fff; /* rotate 했을때 왼쪽선 두께와 색상 */
    border-right: 3px solid #fff; /*rotate 했을때 오른쪽선 선 두께 */
    transform: rotate(45deg); /* 각도 */

}

.mainmenu .mainmenu_list .submenu .submenu_inner {
    font-size: 18px;
    color: #111;
    height: 30px;
    line-height: 50px;
    margin-top: 8px;
}

.innerHeader .mainmenu .mainmenu_list .mainmenu_list_inner:hover .submenu_inner {
    font-weight: 500;
	color:#000
}

.submenu_inner a{color:#666}
.submenu_inner a:hover{color:#000}


.lnb{position: absolute;top: 15px;right:0;margin-right:5%;}
.lnb img{width: 45px;}

#footer .foot_menu ul {  display: flex;  justify-content: center;   gap: 20px;  padding: 0;  margin: 0;  list-style: none;}
#footer .foot_menu li {  margin-top: 20px;}
#footer .foot_menu li a{display:inline-block;border-left:1px solid #e5e5e5;margin-left:20px;padding-left:20px;height:14px;line-height:14px}

/*#footer .foot_menu{height:52px;border-bottom:1px solid #dbdbdb;}
#footer .foot_menu li{float:left;margin-top:20px}
#footer .foot_menu li a{display:inline-block;border-left:1px solid #e5e5e5;margin-left:20px;padding-left:20px;height:14px;line-height:14px}
#footer .foot_menu li:first-child a{border-left:0;margin-left:30px;padding-left:0}
*/

#footer .foot_info {height:105px}
#footer .foot_info h2{float:left;margin:40px 50px 0 30px}
#footer .foot_info ul{margin-top:25px}
#footer .foot_info li:first-child{margin-bottom:15px;font-size:15px}
#footer address b{margin-left:13px}
#footer address b:first-child{margin-left:0}
#footer .foot_info ul li{color:#555;font-size:13px;line-height:20px;letter-spacing:-0.25px}

#topusername{color:#222222}

/*버튼스타일*/
.btn01{display:inline-block;padding:13px 66px;color:#fff;background:#333;font-size:13px}
.btn01:hover{color:#fff;background:#000}
.btn02{display:inline-block;padding:11px 64px;color:#333;background:#fff;font-size:13px;border:1px solid #333}
.btn02:hover{color:#333;background:#fff}
.btn03{display:inline-block;padding:15px 50px;color:#fff;background:#f65c60;font-size:18px}
.btn03:hover{color:#fff;background:#f65c60}
.btn04{display:inline-block;padding:15px 50px;color:#fff;background:#333;font-size:18px}
.btn04:hover{color:#fff;background:#333}
.btn05{display:inline-block;padding:13px 66px;color:#fff;background:#E94E60;font-size:13px}
.btn05:hover{color:#fff;background:#E94E60}
.btn01_s{display:inline-block;padding:4px 11px;color:#fff;background:#f65c60;font-size:11px}
.btn01_s:hover{color:#fff;background:#db484c}
.btn02_s{display:inline-block;padding:4px 11px;color:#fff;background:#333;font-size:11px}
.btn02_s:hover{color:#fff;background:#181818}
.btn03_s{display:inline-block;padding:2px 9px;color:#333;background:#fff;font-size:11px;border:1px solid #333}
.btn03_s:hover{color:#333;background:#ededed}
.btn04_s{display:inline-block;padding:7px 20px;color:#fff;background:#282828;font-size:11px;font-family: Gulim;border-radius:3px}
.btn04_s:hover{color:#fff;background:#282828}
.btn05_s{display:inline-block;padding:2px 7px;color:#fff;background:#282828;font-size:11px;font-family: Gulim}
.btn05_s:hover{color:#fff;background:#282828}
.btn06_s{display:inline-block;padding:2px 7px;color:#fff;background:#E94E60;font-size:11px;font-family: Gulim}
.btn06_s:hover{color:#fff;background:#E94E60}
.btn07_s{display:inline-block;padding:4px 20px;color:#fff;background:#333;font-size:11px}
.btn07_s:hover{color:#fff;background:#181818}
.btn08_s{display:inline-block;padding:4px 11px;color:#fff;background:#999;font-size:11px}
.btn08_s:hover{color:#fff;background:#999}
.btn09_s{display:inline-block;padding:7px 20px;color:#fff;background:#f65c60;font-size:11px;font-family: Gulim;border-radius:3px}
.btn09_s:hover{color:#fff;background:#db484c}

/*20180122 추가 및 수정
#footer{margin:0 auto 0 auto;border-top:2px solid #dbdbdb}
*/


/*메인풀스크린롤링*/
.swiper {width: 100%;height: 100%;}
.swiper-slide {text-align: center;font-size: 18px; flex;justify-content: center;align-items: center;}
.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}

.visualSwiper {width: 100%;height: 100%;position: relative; }
.visualSwiper img {width: 100%;height: 100%;object-fit: cover;}

  /* 네비게이션 버튼 커스터마이즈 (원하는 스타일로 변경 가능) */
.visualSwiper .swiper-button-prev,
.visualSwiper .swiper-button-next {color: #98E05F;transition: opacity 0.3s;z-index: 10;top: 50%;width: 44px;height: 44px;margin-top: -22px;}


.visualSwiper .swiper-button-prev:hover,
.visualSwiper .swiper-button-next:hover {opacity: 0.7;}

.mainproduct-section {height:100%;margin: 0 auto;text-align: center;padding-top:150px;background:#F7F7F7}
.mainproduct-section h2 {font-size: 48px;margin: 50px 0 30px 0;color: #222;}
.mainproduct-section p {font-size: 28px;}
.mainproduct-list {display: flex;justify-content: space-between; /* 4개 균등 배치 */flex-wrap: wrap;gap: 20px; /* 모바일에서 줄바꿈 시 간격 */margin-top:50px;padding:0 30px  }
.mainproduct-item {flex: 1 1 calc(25% - 15px); /* 4개 나열 */;padding: 20px;box-sizing: border-box; border-radius: 8px;text-align: center;  }
.mainproduct-item img {width: 100%;height: 100%;object-fit: cover;border-radius: 15px }
.mainproduct-item p{font-size: 20px}
.mainproduct-item p b {font-size: 24px;line-height:45px }

.swiper-product {width: 100%;height: 100%;}
.swiper-slide-product {text-align: center;font-size: 18px; flex;justify-content: center;align-items: center;}


.product-section {margin: 0 auto;text-align: center;height: 900px;padding-top:450px;background:#F7F7F7}
.product-section h2 {font-size: 48px;margin: 50px 0 30px 0;color: #222;}
.product-list {display: flex;justify-content: space-between; /* 4개 균등 배치 */flex-wrap: wrap;gap: 20px; /* 모바일에서 줄바꿈 시 간격 */margin-top:50px;padding:0 30px  }
.product-item {flex: 1 1 calc(25% - 15px); /* 4개 나열 */;padding: 20px;box-sizing: border-box; border-radius: 8px;text-align: center;  }
.product-item img {width: 100%;height: 100%;object-fit: cover;border-radius: 15px }
.product-item p{font-size: 16px}
.product-item p b {font-size: 20px;line-height:45px }


.map-section {min-width:1100px;height:100%;margin: 0 auto;text-align: left;padding-top:50px;background:#F7F7F7}
.map_list {width:40%;float:left;margin:0 5%}
.map_list h3{font-size: 48px;margin: 90px 0 50px 0;color: #222;}
.map_list b{font-size:20px}
.map_list p{line-height:25px;}
.product-item img {width: 100%;height: 100%;object-fit: cover;border-radius: 15px }
.product-item ul li {float:left}
.product-item ul li img{width: 30%}
.map_list1{margin:50px 0;font-size:35px;color:#0DE3AC;}
.map_list ul {padding-top:10px}
.map_list ul li{float:left;width:70%;line-height:40px}
.map_list ul li:first-child{width:30%;}
.map_imgs {width:45%;float:right;margin-right:5%}
.map_imgs p {max-width:500px;height:450px;border:1px solid #ccc;margin-top:50px}
.map_imgs p img{}
.map_imgs ul{width:500px;}
.map_imgs ul li{width:32%;float:left;margin-right:2%;margin-top:20px}
.map_imgs ul li:last-child{margin-right:0}


.counsel-section{width:90%;height:130px;margin: 0 auto;padding:30px 5%;background:#D1D1D1;position:absolute;bottom:0}
.counsel-section b{font-size:25px;line-height:40px}
.contact-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap; /* 한 줄로 유지 */
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
}

.contact-form .input-box {
  flex: 1;
  min-width: 150px;
  position: relative;
}

/* label 숨김 */
.contact-form .input-box label {
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

.contact-form .input-box input,
.contact-form .input-box select {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
  transition: 0.3s;
}

.contact-form .input-box input:focus,
.contact-form .input-box select:focus {
  border-color: #98E05F;
  box-shadow: 0 0 4px rgba(152, 224, 95, 0.4);
}

/* 버튼 */
.contact-form button {
  background: #98E05F;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 30px;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.contact-form button:hover {
  background: #7AC14E;
}


/* 체크박스 레이블은 보이도록 별도 스타일 */
.counsel-section .checkbox-box label {
  position: static;
  visibility: visible;
  font-size: 14px;
  color: #333;
}

/* 개인정보 동의 */
.counsel-section .checkbox-box {
  display: flex;
  position:absolute;
  gap: 6px;
  flex-shrink: 0;
  color:#000; right:5%;top:15%;
}

.counsel-section .checkbox-box input[type="checkbox"] {
  accent-color: #98E05F;
  width:16px;
}
.counsel-section .checkbox-box b{font-size:15px}

/* 레이어팝업 */
.view-layer .pop-layer .pop-container {
  padding: 20px 25px;
}

.view-layer .pop-layer p.ctxt {
  color: #666;
  line-height: 25px;
}

.view-layer .pop-layer .btn-r {
  width: 100%;
  padding-top: 10px;
  text-align: right;
}

.view-layer .pop-layer {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 650px;
  height: 400px;
  background-color: #fff;
  border: 5px solid #3571B5;
  z-index: 10;
}

.view-layer {
  display: none;
  position: fixed;
  _position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.view-layer .viewBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5;
  filter: alpha(opacity=50);
}

.view-layer .pop-layer {  display: block;}
.view-layer .pop-conts h3 {font-size:20px;margin-bottom:20px}
.view-layer .pop-conts iframe {border:1px solid #ccc ;width:100%;height:280px }

a.btn-layerClose {
  display: inline-block;
  height: 25px;
  padding: 0 14px 0;
   border: 1px solid #091940;
  background-color: #3f5a9d;
 
  color: #fff;
  line-height: 25px;
}

a.btn-layerClose:hover {
  border: 1px solid #091940;
  background-color: #1f326a;
  color: #fff;
}