#modal-btn-container {
	display: flex;
	justify-content: center;
  
	.modal-btn {
	  width: 80%;
	  max-width: 240px;
	  height: 48px;
	  border-radius: 8px;
	  background-color: skyblue;
	  border: none;
	  color: white;
  
	  &:hover {
		opacity: 0.7;
	  }
	}
  }
  
  .mask {
	display: none;
  
	&.appear {
	  display: block;
	  background: rgba(0, 0, 0, 0.7);
	  position: fixed;
	  top: 0;
	  bottom: 0;
	  right: 0;
	  left: 0;
	  z-index: 101;
	  animation: fadeIn 0.5s ease-out;
	  max-height: 100%;
	}
  }
  
  .modal {
	display: none;
  
	&.appear {
	  display: block;
	  background: #fff;
	  width: 50%;
	  padding: 24px;
	  border-radius: 4px;
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  z-index: 102;
	  animation: fadeIn 0.5s ease-out;
  
	}
  }
  
  .close-btn-container {
	display: flex;
	justify-content: flex-end;
  
	.close-btn {
	  border-radius: 8px;
	  padding: 8px;
	}
  }
  
  @media (max-width: 768px) {
	#modal.appear {
	width: 75%;
	}
  }
  
  @keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
  }

  .search-container {
	  padding-top:40px;
	  padding-bottom:40px;
	  /*background-color:#f6f8fc;*/
    display: flex;
    justify-content: space-between;

}

.keyword-box, .search-more {
		display: flex;
  align-content: center;
  justify-content: center;
    flex: 1;
    margin: 10px;
	h3{
		font-size:1.6rem;
	}
	.modal-btn{
		margin-top:5px;
		margin-bottom:5px;
	}
}
.selected-value p{
	 margin-bottom:0;
}

button.selected {
    background-color: #a35602;
}
@media (max-width: 991.8px) {
	  .search-container {
	flex-wrap:wrap;
	}
	.search-wrap .diagonal-border{
		width:100% !important;
		height:1px;
		border-top:1px solid #CCC;
		margin:auto  calc(2.5vw + 10px);
	}
	.diagonal-border:before{
		content:"";
		display:none;
	}
	.keyword-box, .search-more{
		width:100%;
		flex: auto;
	}
}