/*   모든 사이트에 공통으로 들어가는 부분으로
      사이트에 공통사용 	  
		  
*/
@media (min-width:640px){ }
@media (min-width:768px){ }
@media (min-width:1024px){ }
@media (min-width:1280px){ }
@media (min-width:1536px){ }

/*  부모상관없이 가로 100vw  */
.fullsize { width: 100vw ;    position: relative;    left: 50%;    margin-left: -50vw;}

/*  중앙배치   */
.content-center{margin:0 auto;}

/*  이미지위에 필터 씌우기 */
.filter{ filter: brightness(32%); transition: all 2s;}
.filter:hover{ filter: brightness(100%)}

/*   화면에선느 보이지 않지만 스크린리더에서는 읽게*/
.sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border-width: 0;}
.not-sr-only{position: static;width: auto;height: auto;padding: 0;margin: 0;overflow: visible;clip: auto;white-space: normal;

/*   flex  */
.flex{display: flex; border:1px solid red; }
.flex-row{flex-direction: row;}                  /* 수평 */
.flex-row-reverse{flex-direction: row-reverse;}   /* 우측이 앞으로 */
.flex-wrap{flex-wrap: wrap;}    /*   줄바꿈  */
.justify-between{justify-content: space-between;}

.justify-center{justify-content: center;} /* 수평 가운데 */


.flex-col{flex-direction: column;}  /* 수직  */
.flex-col-reverse{flex-direction: column-reverse;}  /*  세로 하단 제일 위로   */

.items-center{align-items: center;} /* 수직 중앙 */
.items-end{align-items: flex-end;}  /* 수직 하단 */
.items-baseline{align-items: baseline;}


/*   block  inline   inline-block  */
.block{display:block;}


/*   border    선  점선 실선 */
.border{border:1px solid red;}
.border-dashed{border:1px dashed red;}


/*  text   폰트 정렬  */
.text-left   {text-align: left;	}
.text-center {text-align: center;	}
.text-right  {text-align: right;	}
.text-justify{text-align: justify;}



/*   폰트 사이즈  */
.text-xs   {font-size: 0.75rem; line-height: 1rem;}          /*	12px */
.text-sm   {font-size: 0.875rem; line-height: 1.25rem;}   /* 14px */
.text-base {font-size:16px;}
.text-lg   {font-size: 1.125rem;line-height: 1.75rem;}	    /* 18px */
.text-xl   {font-size: 1.25rem;line-height: 1.75rem;}      /* 20px */
.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.5rem;}       /* 36px */




/*   폰트 굵기  */

.font-light   {font-weight: 300;}
.font-normal  {font-weight: 400;}
.font-medium  {font-weight: 500;}
.font-semibold{font-weight: 600;}
.font-bold    {font-weight: 700;}
.font-extrabold{font-weight: 800;}
.font-black{font-weight: 900;}



/*   폰트  칼라 흰색 회색 블랙 계열  */

.text-black{--tw-text-opacity: 1;color: rgba(0, 0, 0, var(--tw-text-opacity));}
.text-white{ --tw-text-opacity: 1;	color: rgba(255, 255, 255, var(--tw-text-opacity));	}
.text-gray-50{--tw-text-opacity: 1;color: rgba(249, 250, 251, var(--tw-text-opacity));	}
.text-gray-100{--tw-text-opacity: 1;color: rgba(243, 244, 246, var(--tw-text-opacity));}
.text-gray-200{--tw-text-opacity: 1;color: rgba(229, 231, 235, var(--tw-text-opacity));	}
.text-gray-300{--tw-text-opacity: 1;color: rgba(209, 213, 219, var(--tw-text-opacity));	}
.text-gray-400{--tw-text-opacity: 1;color: rgba(156, 163, 175, var(--tw-text-opacity));	}
.text-gray-500{--tw-text-opacity: 1;color: rgba(107, 114, 128, var(--tw-text-opacity));	}
.text-gray-600{--tw-text-opacity: 1;color: rgba(75, 85, 99, var(--tw-text-opacity));	}
.text-gray-700{--tw-text-opacity: 1;color: rgba(55, 65, 81, var(--tw-text-opacity));}	
.text-gray-800{--tw-text-opacity: 1;color: rgba(31, 41, 55, var(--tw-text-opacity));}	
.text-gray-900{--tw-text-opacity: 1;color: rgba(17, 24, 39, var(--tw-text-opacity))}

.text-green{color:green;}



/*   텍스트 정렬 */
.text-left{text-align: left;	}
.text-center{text-align: center;	}
.text-right{text-align: right;	}
.text-justify{text-align: justify;}



/*   배경색   회색   */

.bg-white       { --tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity));	}
.bg-gray-50    { --tw-bg-opacity: 1; background-color: rgba(249, 250, 251, var(--tw-bg-opacity));	}
.bg-gray-100  { --tw-bg-opacity: 1; background-color: rgba(243, 244, 246, var(--tw-bg-opacity));	}
.bg-gray-200  { --tw-bg-opacity: 1; background-color: rgba(229, 231, 235, var(--tw-bg-opacity));	}
.bg-gray-300  { --tw-bg-opacity: 1; background-color: rgba(209, 213, 219, var(--tw-bg-opacity));	}
.bg-gray-400 {--tw-bg-opacity: 1;background-color: rgba(156, 163, 175, var(--tw-bg-opacity));	}
.bg-gray-500 {--tw-bg-opacity: 1;background-color: rgba(107, 114, 128, var(--tw-bg-opacity));	}
.bg-gray-600 {--tw-bg-opacity: 1;background-color: rgba(75, 85, 99, var(--tw-bg-opacity));	}
.bg-gray-700 {--tw-bg-opacity: 1;background-color: rgba(55, 65, 81, var(--tw-bg-opacity));	}
.bg-gray-800 {--tw-bg-opacity: 1;background-color: rgba(31, 41, 55, var(--tw-bg-opacity));	}
.bg-gray-900 {--tw-bg-opacity: 1;background-color: rgba(17, 24, 39, var(--tw-bg-opacity));}




/*******************************************
****************  패딩 ***********************
********************************************/
/*  패딩  전체 */
.p-0  {padding: 0px;}
.p-1  {padding: 0.25rem;}	/*  4px */
.p-2  {padding: 0.5rem;	}   /*  8px */
.p-3  {padding: 0.75rem;}	/* 12px */
.p-4  {padding: 1rem;	}       /* 16px */
.p-5  {padding: 1.25rem;}	/* 20px */
.p-6  {padding: 1.5rem;	}   /* 24px */
.p-7  {padding: 1.75rem;}    /* 28px */
.p-8  {padding: 2rem;	}       /* 32px */
.p-9  {padding: 2.25rem;}	/* 36px */
.p-10{padding: 2.5rem;}	    /* 40px */
.p-11{padding: 2.75rem;}    /* 44px */
.p-12{padding: 3rem;}         /* 48px */
.p-14{padding: 3.5rem;}      /* 56px */
.p-16{padding: 4rem;	}       /* 64px */
.p-20{padding: 5rem;}         /*	 80px */
.p-24{padding: 6rem;}         /*	 96px */
.p-28{padding: 7rem;	}       /*   112px */


/*   패딩  위 아래    */
.py-0{padding-top: 0px;padding-bottom: 0px;	}
.py-1{padding-top: 0.25rem;padding-bottom: 0.25rem;	} /*  4px */
.py-2{padding-top: 0.5rem;padding-bottom: 0.5rem;	} /*  8px */
.py-3{padding-top: 0.75rem;padding-bottom: 0.75rem;	} /* 12px */
.py-4{padding-top: 1rem;padding-bottom: 1rem;	}     /* 16px */
.py-5{padding-top: 1.25rem;padding-bottom: 1.25rem;	} /* 20px */
.py-6{padding-top: 1.5rem;padding-bottom: 1.5rem;	} /* 24px */
.py-7{padding-top: 1.75rem;padding-bottom: 1.75rem;	} /* 28px */
.py-8{padding-top: 2rem;padding-bottom: 2rem;	}     /* 32px */
.py-9{padding-top: 2.25rem;padding-bottom: 2.25rem;}  /* 36px */
.py-10{padding-top: 2.5rem;padding-bottom: 2.5rem;	} /* 40px */
.py-11{padding-top: 2.75rem;padding-bottom: 2.75rem;} /* 44px */
.py-12{padding-top: 3rem;padding-bottom: 3rem;	}     /* 48px */
.py-14{padding-top: 3.5rem;padding-bottom: 3.5rem;}   /* 56px */
.py-16{padding-top: 4rem;padding-bottom: 4rem;	}     /* 64px */


/*  패딩   상단 */
.pt-0{padding-top: 0px;	}
.pt-1{padding-top: 0.25rem;} /* 	4px   */
.pt-2{padding-top: 0.5rem;	/* 8px*/
.pt-3{padding-top: 0.75rem;	/* 12px*/
.pt-4{padding-top: 1rem;	/* 16px*/
.pt-5{padding-top: 1.25rem;/* 	20px*/
.pt-6{padding-top: 1.5rem;	/* 24px*/
.pt-7{padding-top: 1.75rem;	/* 28px*/
.pt-8{padding-top: 2rem;	/* 32px*/
.pt-9{padding-top: 2.25rem;/* 	36px*/
.pt-10{padding-top: 2.5rem;	/* 40px*/
.pt-11{padding-top: 2.75rem;	/* 44px*/



/*  패딩   하단 */
.pb-0{padding-bottom: 0px;	}       	
.pb-1{padding-bottom: 0.25rem;	 }    /*  4px   */
.pb-2{padding-bottom: 0.5rem;	 }    /*  8px   */
.pb-3{padding-bottom: 0.75rem;	 }    /* 12px  */
.pb-4{padding-bottom: 1rem;		 }    /* 16px  */
.pb-5{padding-bottom: 1.25rem;	 }    /* 20px  */
.pb-6{padding-bottom: 1.5rem;	 }    /* 24px  */
.pb-7{padding-bottom: 1.75rem;	 }    /* 28px  */
.pb-8{padding-bottom: 2rem;		 }    /* 32px  */
.pb-9{padding-bottom: 2.25rem;	 }    /* 36px  */
.pb-10{padding-bottom: 2.5rem;	 }    /* 40px  */
.pb-11{padding-bottom: 2.75rem;}    /* 44px  */
.pb-12{padding-bottom: 3rem;	 }    /* 48px  */
.pb-14{padding-bottom: 3.5rem;	 }    /* 56px  */
.pb-16{padding-bottom: 4rem;	 }    /* 64px  */


/*   패딩  좌우    */
.px-0{padding-left: 0px;padding-right:}     /*  0px;	 */
.px-1{padding-left: 0.25rem;padding-right: 0.25rem;	  /*  4px   */
.px-2{padding-left: 0.5rem;padding-right: 0.5rem;	      /*  8px   */
.px-3{padding-left: 0.75rem;padding-right: 0.75rem;	  /* 12px  */
.px-4{padding-left: 1rem;padding-right: 1rem;	          /* 16px  */
.px-5{padding-left: 1.25rem;padding-right: 1.25rem;   /* 20px  */
.px-6{padding-left: 1.5rem;padding-right: 1.5rem;	      /* 24px  */
.px-7{padding-left: 1.75rem;padding-right: 1.75rem;	  /* 28px  */




/*******************************************
****************  마진 ***********************
********************************************/
.m-auto{margin: auto;}


/*  마진 상단*/
.mt-0 {margin-top: 0px; }	
.mt-1 {margin-top: 0.25rem; }	    /*   4px  */
.mt-2 {margin-top: 0.5rem; }	    /*   8px  */
.mt-3 {margin-top: 0.75rem; }	    /* 12px  */
.mt-4 {margin-top: 1rem;	 }	        /* 16px  */
.mt-5 {margin-top: 1.25rem; }	    /* 20px  */
.mt-6 {margin-top: 1.5rem;	 }	    /*  24px */
.mt-7 {margin-top: 1.75rem;	 }	/* 28px  */
.mt-8 {margin-top: 2rem;	 }	        /* 32px  */
.mt-9 {margin-top: 2.25rem;	 }	/* 36px  */
.mt-10 {margin-top: 2.5rem; }		/* 40px  */
.mt-11{margin-top: 2.75rem;}     /* 44px */
.mt-12{margin-top: 3rem;}	         /* 48px */
.mt-14{margin-top: 3.5rem;	}       /* 56px */
.mt-16{margin-top: 4rem;}	         /* 64px */
.mt-20{margin-top: 5rem;}	         /* 80px */
.mt-24{margin-top: 6rem;}	         /* 96px */
.mt-28{margin-top: 7rem;}	         /* 112px */
.mt-32{margin-top: 8rem;}	         /* 128px */
.mt-auto{margin-top: auto;}


/*  마진 하단*/
.mb-0{margin-bottom: 0px;}
.mb-1{margin-bottom: 0.25rem;}	/* 4px */
.mb-2{margin-bottom: 0.5rem;}		/* 8px */
.mb-3{margin-bottom: 0.75rem;}	/* 12px */
.mb-4{margin-bottom: 1rem;}			/* 16px */
.mb-5{margin-bottom: 1.25rem;}	/* 20px */
.mb-6{margin-bottom: 1.5rem;}		/* 24px */
.mb-7{margin-bottom: 1.75rem;}	/* 28px */
.mb-8{margin-bottom: 2rem;}			/* 32px */
.mb-9{margin-bottom: 2.25rem;}	/* 36px */
.mb-10{margin-bottom: 2.5rem;}	/* 40px */
.mb-11{margin-bottom: 2.75rem;}	/* 44px */
.mb-12{margin-bottom: 3rem;}		/* 48px */
.mb-14{margin-bottom: 3.5rem;}	/* 56px */
.mb-16{margin-bottom: 4rem;}		/* 64px */
.mb-20{margin-bottom: 5rem;}		/* 80px */
.mb-24{margin-bottom: 6rem;}		/* 96px */
.mb-28{margin-bottom: 7rem;}		/* 112px */
.mb-32{margin-bottom: 8rem;}		/* 128px */
.mb-auto{margin-bottom: auto;}


/* 마진 좌측 */
.ml-0{margin-left: 0px;}
.ml-1{margin-left: 0.25rem;}		/* 4px */
.ml-2{margin-left: 0.5rem;}			/* 8px */
.ml-3{margin-left: 0.75rem;}		/* 12px */
.ml-4{margin-left: 1rem;}			/* 16px */
.ml-5{margin-left: 1.25rem;}		/* 20px */
.ml-6{margin-left: 1.5rem;}			/* 24px */
.ml-7{margin-left: 1.75rem;}		/* 28px */
.ml-8{margin-left: 2rem;}			/* 32px */
.ml-9{margin-left: 2.25rem;}		/* 36px */
.ml-10{margin-left: 2.5rem;}		/* 40px */
.ml-11{margin-left: 2.75rem;}		/* 44px */
.ml-12{margin-left: 3rem;}			/* 48px */
.ml-14{margin-left: 3.5rem;}		/* 56px */
.ml-16{margin-left: 4rem;}			/* 64px */
.ml-20{margin-left: 5rem;}			/* 80px */
.ml-24{margin-left: 6rem;}			/* 96px */
.ml-28{margin-left: 7rem;}			/* 112px */
.ml-32{margin-left: 8rem;}			/* 128px */
.ml-auto{margin-left: auto;}


/* 마진 우측 */
.mr-0{margin-right: 0px;}
.mr-1{margin-right: 0.25rem;}		/* 4px */
.mr-2{margin-right: 0.5rem;}		/* 8px */
.mr-3{margin-right: 0.75rem;}		/* 12px */
.mr-4{margin-right: 1rem;}			/* 16px */
.mr-5{margin-right: 1.25rem;}		/* 20px */
.mr-6{margin-right: 1.5rem;}		/* 24px */
.mr-7{margin-right: 1.75rem;}		/* 28px */
.mr-8{margin-right: 2rem;}			/* 32px */
.mr-9{margin-right: 2.25rem;}		/* 36px */
.mr-10{margin-right: 2.5rem;}		/* 40px */
.mr-11{margin-right: 2.75rem;	}	/* 44px */
.mr-12{margin-right: 3rem;}		/* 48px */
.mr-14{margin-right: 3.5rem;}		/* 56px */
.mr-16{margin-right: 4rem;}		/* 64px */
.mr-20{margin-right: 5rem;}		/* 80px */
.mr-24{margin-right: 6rem;}		/* 96px */
.mr-28{margin-right: 7rem;}		/* 112px */
.mr-32{margin-right: 8rem;}		/* 128px */
.mr-auto{margin-right: auto;}

/* 마진 좌우 */
.mx-4{margin-left: 1rem;margin-right: 1rem;}  /* 16px*/
.mx-5{margin-left: 1.25rem;margin-right: 1.25rem;}    /* 20px */


/*******************************************
**************배경색  회색배경 ***********************
********************************************/
.bg-white{--tw-bg-opacity: 1;background-color: rgba(255, 255, 255, var(--tw-bg-opacity));	}
.bg-gray-50{--tw-bg-opacity: 1;background-color: rgba(249, 250, 251, var(--tw-bg-opacity));}	
.bg-gray-100{--tw-bg-opacity: 1;background-color: rgba(243, 244, 246, var(--tw-bg-opacity));}	
.bg-gray-200{--tw-bg-opacity: 1;background-color: rgba(229, 231, 235, var(--tw-bg-opacity));}	
.bg-gray-300{--tw-bg-opacity: 1;background-color: rgba(209, 213, 219, var(--tw-bg-opacity));}	
.bg-gray-400{--tw-bg-opacity: 1;background-color: rgba(156, 163, 175, var(--tw-bg-opacity));}	


/*******************************************
************** 가로 사이트  width   **************
********************************************/
.w-8/12{width: 66.666667%;	}
.w-9/12{width: 75%;}
.w-10/12{width: 83.333333%;	}
.w-11/12{width: 91.666667%;}
.w-full    {width: 100%;	}
.w-screen{width: 100vw;}