.a11y-Hidden, .sr-only{ position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);}


/*   
 * 해상도에 따른 노출  보이지 않음
 */
	
	@media (max-width:599px)                                          {.none-m{display:none;}}   /* Mobile     에서  보이지 않음  */
	@media (max-width:599px) and (max-width:1023px)  {.none-t{display:none;}}    /* Tablet      에서  보이지 않음  */
	@media (min-width:1024px)                                         {.none-d{display:none;}}   /* DeskTOP 에서  보이지 않음  */

	@media (min-width:600px)                                            {.none-td{display:none;}}   /* Tablet  DeskTOP   에서  보이지 않음  */
	

/* 
	배  경
*/

	/* 	배경이미지 확대 */
	.bg_imgwrap{width:100%;height:210px;overflow:hidden;margin-bottom:1rem;}
	.bg_img{width:100%;height:100%;background-size:cover;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;}
	.bg_img:hover{-webkit-transform: scale(1.3);-moz-transform: scale(1.3);-o-transform: scale(1.3);-ms-transform: scale(1.3); /* IE 9 */transform: scale(1.3);} 

	/*	배경이미지 100% */
	.bgfull{background-size:cover;}

	/*  배경이미지 꽉차게*/
	.bg-cover{background-size: cover;}

	/* 배경칼라 */
	.p-bg-c, .pbgc{background-color:#739356;}  /*  메인배경 칼라 */
	.s-bg-c, .sbgc{background-color:#eeeeee;}  /*   두번째 배경 칼라 */
	.t-bg-c, .tbgc{background-color:#707070;}  /*   세번째 배경 칼라 */	
	   
    .button-bg{background-color:#739356; border-radius:4px; color:#fff; padding:20px 0; }  

 


/*	*
  *	서브사이즈 상관없이 100% 적용
  */
.fullSize{width:100vw;position:relative;left:50%;margin-left:-50vw;}

/**
 *상단고정 
 */
.top-fixed{ position:sticky;  top:0px;}


/**
 *  마진
 */
.m-lr-1{margin-left:5vw; margin-right:5vw;}   /*  마진 좌 우  */

.m-tb-1{margin:top:10vh; margin:bottom:10vh;}   /*  마진 위 아래  */
.mx-auto{margin-left: auto; margin-right: auto;}



/**
 *  패딩
 */
 .padding-top-bottom-1{padding-top-bottom:1em;}
.p-l-1{padding-left:3vw; }  /*  패딩 좌     */
.p-l-2{padding-left:5vw; }

.p-lr-1{padding-left:5vw; padding-right:5vw;}  /*  패딩 좌우     */
.p-lr-2{padding-left:10vw; padding-right:10vw; }
.p-lr-3{padding-left:15vw; padding-right:15vw; }
.p-lr-3{padding-left:20vw; padding-right:20vw; }

.p-tb-1{padding-top:1vw; padding-bottom:1vw;}  /*  패딩 위 아래   */
.p-tb-2{padding-top:3vw; padding-bottom:3vw; }
.p-tb-3{padding-top:5vw; padding-bottom:5vw; }
.p-tb-4{padding-top:7vw; padding-bottom:7vw; }
.p-tb-5{padding-top:10vw; padding-bottom:10vw; }
.p-tb-6{padding-top:15vw; padding-bottom:15vw; }
.p-tb-7{padding-top:20vw; padding-bottom:20vw; }

/**
 *  position
 */
.posit-a{position:absolute;}
.posit-r{position:relative;}




/**
 *  정렬    
 */
.mga{margin:auto;} /*  가로 가운데 정렬  */



/*
 *  폰트 
 */

 /*   폰트 크기  */
 	.text-2xl{font-size: 1.5rem; line-height: 2rem; /*24px*/}
	.text-3xl{font-size: 1.875rem; line-height: 2.25rem; /*30px*/}
	.text-4xl{font-size: 2.25rem; line-height: 2.25rem; /*36px*/}
	.text-5xl{font-size: 3rem; line-height: 1; /*48px*/}
	.text-6xl{font-size: 3.75rem; line-height: 1; /*60px*/}
	.text-7xl{font-size: 4.5rem; line-height: 1; /*72px*/}
	.text-8xl{font-size: 6rem; line-height: 1; /*96px*/}
	.text-9xl{font-size: 8rem; line-height: 1; /*128px*/}
.text-xxl{font-size:24px;    color:var(--one-color); font-weight:600;}
.text-xl{ont-size: 1.25rem; line-height: 1.75rem; /*20px*/; color:var(--four-color); font-weight:500; margin-bottom:0.8rem; }
.text-lg{font-size: 1.125rem; line-height: 1.75rem; /*18px*/}
.text-basic{font-size: 1rem;  /*16px*/}
.text-sm{font-size: 0.875rem; line-height: 1.25rem; /*14px*/}	
.text-xs{font-size: 0.75rem; line-height: 1rem; /*12px*/}
	



	/* 폰트 종류 */
	


	/* 폰트 정렬 */
	.text-align-center{text-align:center;}  /*  폰트 중앙 정렬*/
	.t-a-l{text-align:left;}    /*  폰트 좌측 정렬*/
	.t-a-r{text-align:right;}   /*  폰트 우측 정렬*/
	.tl{text-align:left;}    /*  폰트 좌측 정렬*/
	.tr{text-align:right;}   /*  폰트 우측 정렬*/
	 

/*
*  마진
*/
.mb-base{margin-bottom:40px;}





/**
 *  블럭처리
 */
.block{display:block;}
.in-b{display:inline-block}
.inline-b{display:inline-block}


/* max-width */
.max-w-0{max-width: 0rem;}
.max-w-none{max-width: none;}
.max-w-xs{max-width: 20rem;}
.max-w-sm{	max-width: 24rem;}
.max-w-md{max-width: 28rem;}
.max-w-lg{max-width: 32rem;}
.max-w-xl{max-width: 36rem;}
.max-w-2xl{max-width: 42rem;}
.max-w-3xl{	max-width: 48rem;}
.max-w-4xl{max-width: 56rem;}
.max-w-5xl{max-width: 64rem;}
.max-w-6xl{max-width: 72rem;}
.max-w-7xl{max-width: 80rem;}
.max-w-full{max-width: 100%;}


 /*
  *세로 사이즈
 */
.h-0{height: 0px;}
.h-1{height: 0.25rem; /*4px*/}
.h-2{height: 0.5rem; /*8px*/}
.h-3{height: 0.75rem; /*12px*/}
.h-4{height: 1rem; /*16px*/}
.h-5{height: 1.25rem; /*20px*/}
.h-6{height: 1.5rem; /*24px*/}
.h-7{height: 1.75rem; /*28px*/}
.h-8{height: 2rem; /*32px*/}
.h-9{height: 2.25rem; /*36px*/}
.h-10{height: 2.5rem; /*40px*/}
.h-11{height: 2.75rem; /*44px*/}
.h-12{height: 3rem; /*48px*/}
.h-14{height: 3.5rem; /*56px*/}
.h-16{height: 4rem; /*64px*/}
.h-20{height: 5rem; /*80px*/}
.h-24{height: 6rem; /*96px*/}
.h-28{height: 7rem; /*112px*/}
.h-32{height: 8rem; /*128px*/}
.h-36{height: 9rem; /*144px*/}
.h-40{height: 10rem; /*160px*/}



 /*
  *  flex
 */
 .fl{display:flex;-webkit-display:flex;} 
 .justify-center{justify-content: center;} 중앙정렬
 .fl-lr{flex-direction:row;}                /* 가로정렬 왼쪽   => 오른쪽 */
 .flex-row{flex-direction:row;}  
 .flex-row-reverse{flex-direction: row-revers;}        /* 가로정렬 오른쪽 => 왼쪽  */
 .fl-tb{flex-direction: row-column;}        /* 위    =>  아래  */
 .fl-bt{flex-direction: row-column-reverse;}/* 아래  =>  위    */

 .flex-wrap{flex-wrap : wrap;}                /*  줄바꿈         제품 추가시 유동적으로 아래로 떨어지게  */

 .fl-j-s{justify-content:flex-start;}    /* 왼쪽 또는 윗쪽 맞춤 */
 .fl-j-e{justify-content:flex-end ;}     /* 오른쪽 또는 아래맞춤 */
 .fl-j-c{justify-content:center ;}       /* 상하중앙 */
 .flex-between{justify-content:space-between;} /* 간격균등 시작과 끝에 빈 공간 없음 */
 .fl-j-a{justify-content:space-around;}  /* 간격균등 시작과 끝에 빈 공간 생김 */
 .fl-right {margin-left: auto;}/*   우측 정렬   부모 flex 상태에서 주기 ,  위 정렬에도 해당 소스 있음 수정시 윗 부분도 수정 */
 .fl-left {margin-right: auto;}/*   좌측 정렬   부모 flex 상태에서 주기 ,  위 정렬에도 해당 소스 있음 수정시 윗 부분도 수정 */
 .fl-ai-c{align-items: center;}
 .fl-v-c{     /*   세로 중앙정렬   부모한테 준다  */
	display: flex;
    flex-wrap: wrap;
    flex-direction: column; /*수직 정렬*/
    align-items: center;
    justify-content: center;
	}


/*   버튼  */
 
  .btn-holder {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	 }
  .btn {
	position: relative;
	display: inline-block;
	width: auto; height: auto;
	background-color: transparent;
	border: none;
	cursor: pointer;
	min-width: 170px;
  }
	.btn span {         
	  position: relative;
	  display: inline-block;
	  font-size: 14px;
	  font-weight: bold;
	  letter-spacing: 2px;
	  text-transform: uppercase;
	  top: 0; left: 0;
	  width: 100%;
	  padding: 15px 20px;
	  transition: 0.3s;
	}
  
  /*--- btn-1 ---*/
  .btn-1::before {
	 position: absolute;
	content: "";
	background-color:#2190d0;
	transition: 0.3s ease-out;
  }
  .btn-1 span {
	color:#fff;
	border: 1px solid #2190d0;
	transition: 0.2s 0.1s;
  }
  .btn-1 span:hover {
	color: #2190d0;
	transition: 0.2s 0.1s;
  }
  .btn.hover-filled-slide-down::before {
	bottom: 0; left: 0; right: 0; 
	height: 100%; width: 100%;
  }
  .btn.hover-filled-slide-down:hover::before {
	height: 0%;
  }