::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-button {
    display: none;
}
::-webkit-scrollbar-track {
    background: rgba(165,165,165,0.1);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(34,34,34,0.1), rgba(34,34,34,0.1));
}

*, *::before, *::after {
	box-sizing: inherit;
}
html {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.15;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	height:100%;
}
@media screen and (min-width: 768px) {
	html {
		font-size: 16px;
	}
}
body {
	margin: 0;
	height:100%;
}
html, body, div, article, section, main, footer, header, form, fieldset, legend, pre, code, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, textarea, table, td, th, tr, input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], .border-box {
    box-sizing: border-box;
}
article, aside, footer, header, nav, section {
    display: block;
}
a {
 text-decoration: none;
 color: inherit;
}
.container {
		max-width: 768px;
		margin: 0 auto;
	}
.db {
    display: block;
}
.dib {
    display: inline-block;
}
ul.inline > li {
	display:inline-block;
}
.button-reset {
    background: rgba(0,0,0,0);
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
.color-inherit {
    color: inherit;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.min-vh-100 {
    min-height: 100vh;
}
.w-100 {
    width: 100%;
}
.h-100 {
	height: 100%;
}
	.tc {
	text-align: center;
	}
	.tr {
	text-align: right;
	}
	.lh-15 {
		line-height: 1.5;
	}

	/**
	position
	**/
	.fixed {
		position: fixed;
	}
	.relative {
		position: relative;
	}
	.absolute {
		position: absolute;
	}
	
	.center-v {
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.center-c {
		top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
	}
	
	.right-1 {
		right: 1rem;
	}
	.bottom-0 {
		bottom: 0;
	}
	.top-0 {
		top: 0;
	}
	
	
	.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


	



	/**
	flex
	****/
	.flex-none {
	    flex: none;
	}
	.flex {
	    display: flex;
	}
	.justify-between {
	    justify-content: space-between;
	}
	.justify-center {
			justify-content: center;
	}
	.items-top {
	    align-items: flex-start;
	}
	.items-center {
	    align-items: center;
	}
	.items-end {
	    align-items: flex-end;
	}
	.items-stretch {
		align-items: stretch;
	}
	.flex-nowrap {
	    flex-wrap: nowrap;
	}
	.flex-wrap {
	    flex-wrap: wrap;
	}
	.flex-row {
	    flex-direction: row;
	}
	.flex-column {
	    flex-direction: column;
	}
	
	





	/**
	margin
	****/
	.ma0 {
		margin: 0;
	}
	.mt0 {
		margin-top: 0;
	}
	.mt02 {
		margin-top: 0.2rem;
	}
	.mt05 {
		margin-top: 0.5rem;
	}
	.mt10 {
		margin-top: 1rem;
	}
	.mt15 {
		margin-top: 1.5rem;
	}
	.mb05 {
		margin-bottom: 0.5rem;
	}
	.mb07 {
		margin-bottom: 0.7rem;
	}
	.mb10 {
		margin-bottom: 1rem;
	}
	.mb15 {
		margin-bottom: 1.5rem;
	}
	.mb20 {
		margin-bottom: 2rem;
	}
	.mb25 {
		margin-bottom: 2.5rem;
	}
	.mb30 {
		margin-bottom: 3rem;
	}
	.ml10 {
		margin-left: 1rem;
	}
	.ml05 {
		margin-left: .5rem;
	}
	.ml07 {
		margin-left: .7rem;
	}
	.mr05 {
		margin-right: .5rem;
	}
	.mr07 {
		margin-right: .7rem;
	}
	.mr10 {
		margin-right: 1rem;
	}


	/**
	padding
	****/
	.py05 {
		padding-top: .5rem;
		padding-bottom: .5rem;
	}
	.py07 {
		padding-top: .7rem;
		padding-bottom: .7rem;
	}
	.py08 {
		padding-top: .8rem;
		padding-bottom: .8rem;
	}
	.py10 {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	.py12 {
		padding-top: 1.2rem;
		padding-bottom: 1.2rem;
	}
	.py15 {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	.px05 {
		padding-left: .5rem;
		padding-right: .5rem;
	}
	.px07 {
		padding-left: .7rem;
		padding-right: .7rem;
	}
	.px10 {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.px12 {
		padding-left: 1.2rem;
		padding-right: 1.2rem;
	}
	.px15 {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.pr15 {
		padding-right: 1.5rem;
	}
	.pb07 {
		padding-bottom: .7rem;
	}
	.pb10 {
		padding-bottom: 1rem;
	}
	.pb15 {
		padding-bottom: 1.5rem;
	}
	.pt05 {
		padding-top: .5rem;
	}
	.pt10 {
		padding-top: 1rem;
	}
	.pt12 {
		padding-top: 1.2rem;
	}
	.pt15 {
		padding-top: 1.5rem;
	}

	/**
	font
	****/
	address {
		font-style: normal;
	}
	h1 {
		font-size: 2rem;
	}
	h2 {
		font-size: 1.5rem;
	}
	h3 {
		font-size: 1.17rem;
	}
	small {
		font-weight: 300;
	}
	.f09 {
	font-size: .9rem;
	}
	.f10 {
	font-size: 1rem;
	}
	.f11 {
	font-size: 1.14rem;
	}
	.f12 {
	font-size: 1.25rem;
	}
	.f15 {
	font-size: 1.5rem;
	}
	.f17 {
	font-size: 1.75rem;
	}
	.f19 {
	font-size: 1.9rem;
	}	
	.f20 {
	font-size: 2rem;
	}	
	.fw1 {
	font-weight: 100;
	}
	.fw3 {
	font-weight: 300;
	}
	.fw4 {
	font-weight: 400;
	}
	.fw5 {
	font-weight: 500;
	}
	.fw7 {
	font-weight: 700;
	}
	.fw9 {
	font-weight: 900;
	}


	/**
	color
	****/
	.bg-gray0 {
		background-color: #f8f9fa;
	}
	.bg-gray1 {
		background-color: #f1f3f5;
	}
	.bg-white {
		background-color: #fff;
	}
	.bg-blue {
		background-color: #27baff;
	}
	.gray1 {
		color: rgb(145, 145, 145);
	}
	.gray7 {
		color: #495057;
	}
	.white {
		color: #fff;
	}
	.blue {
		color: #3487ef;
	}
	.yellow {
		color: #ffcd34;
	}
	.bd-blue {
		border-color: #3487ef;
	}
	.black {
		color: #000;
	}
	
	
	/**
	효과
	****/
	.shadow-1 {
		box-shadow: 0 0.25rem 0.125rem 0 rgb(0 0 0 / 3%);
	}
	.o-60 {
		opacity: .6;
	}
	.br-pill {
    border-radius: 9999px;
	}
	.br4 {
		border-radius: 4px;
	}
	.br10 {
		border-radius: 10px;
	}
	.br20 {
		border-radius: 20px;
	}
	.bb {			
	border-bottom: 1px solid #ebeeef;
  }
  
  .ratio16 {
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.ratio3 {
  width: 100%;
   padding-top: 66.66%; /* 3:2 Aspect Ratio */
 }
 .ratio1 {
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
}

.bg-img {
background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
  

.body-scrolling-modal-active {	/*전체화면 모달 띄울때 body 스크롤 숨기기*/
					touch-action: none;
					-webkit-overflow-scrolling: none;
					overflow: hidden;
					overscroll-behavior: none;
				}
				  
  .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
.setm-ban-wrapper {/* 반려사유 입력 */
  z-index: 20;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  padding: 16px;
  max-width: 700px;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.3s;
}
.setm-ban-wrapper-trans {
	transform: translate(-50%, -300px);
	border-radius: 20px;
}


/*********************************************
checkbox, radio

		<label class="label-container">라벨명
		  <input type="radio" checked="checked" name="radio">
		  <span class="radiomark"></span>
		</label>
**********************************************/

.label-container {
  display: block;
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.label-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark, .radiomark {
  position: absolute; 
  left: 0;
  top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
  height: 20px;
  width: 20px;
  background-color: #eee;  
}
.radiomark {
	border-radius: 50%;
}
.label-container:hover input ~ .checkmark, .label-container:hover input ~ .radiomark {
  background-color: #ccc;
}
.label-container input:checked ~ .checkmark, .label-container input:checked ~ .radiomark {
  background-color: #04aa6d;
}
.checkmark:after, .radiomark:after {
  content: "";
  position: absolute;
  display: none;
}
.label-container input:checked ~ .checkmark:after, .label-container input:checked ~ .radiomark:after {
  display: block;
}
.label-container .radiomark:after {
 	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
.label-container .checkmark:after {
  left: 7px;
  top: 4px;
  width: 7px;
  height: 11px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}