@charset "UTF-8";

/* 로그인, 회원가입 */


.gnb-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  position: relative;
  background: #fff;
}

.gnb-left {
  position: absolute;
  left: 20px;
  top: 55%;
  transform: translateY(-50%);
}



.contents-wrapper {
	margin-left: 20px;
	margin-right: 20px;
}


/* input form */
input[type="checkbox"] {
	display: none;
}

input[type="checkbox"] + label em {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0px 10px 0 -5px;
  vertical-align: middle;
	background: url(/main/m/assets/images/login_checkbox.svg) left top no-repeat;
  cursor: pointer;
}

input[type="checkbox"]:checked +label em {
  display: inline-block;
  width: 24px;
  height: 24px;
  /*margin: 0px 10px 0 -5px;*/
  vertical-align: middle;
  background: url(/main/m/assets/images/checkbox-checked.svg) left top no-repeat;
  cursor: pointer;
}

input[type="radio"] {
	display: none;
}

input[type="radio"] + label em {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0px 10px 0 -5px;
  vertical-align: middle;
	background: url(/main/m/assets/images/login_checkbox.svg) left top no-repeat;
  cursor: pointer;
}

input[type="radio"]:checked +label em {
  display: inline-block;
  width: 24px;
  height: 24px;
  /*margin: 0px 10px 0 -5px;*/
  vertical-align: middle;
  background: url(/main/m/assets/images/checkbox-checked.svg) left top no-repeat;
  cursor: pointer;
}

/* 인풋박스*/
.input-box {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  border: 1px solid #E8E8E8;
  margin-bottom: 8px;
  position: relative;
}

.input-box input{
  width: 80%;
  margin-left: 12px;
  margin-right: 12px;
  font-size: 14px;
  font-weight: 400;
  border:none;
  margin-top: 14.5px;
}
.input-box input:focus {
  outline:none;
}

.input-box input::placeholder{
  font-size: 14px;
  color: #989898;
}

.input-box input[value] {
  font-size: 14px;
}

.input-box input:disabled {
  background: #F4F4F4;
}

.input-box-date {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  border: 1px solid #E8E8E8;
  margin-bottom: 8px;
  margin-right: 18px;
  position: relative;
}

.input-box-date input{
  width: 80%;
  margin-left: 12px;
  margin-right: 12px;
  font-size: 14px;
  font-weight: 400;
  border:none;
  margin-top: 14.5px;
}
.input-box-date input:focus {
  outline:none;
}

.input-box-date input::placeholder{
  font-size: 14px;
  color: #989898;
}

.input-box-date input[value] {
  font-size: 14px;
}

.input-box-date input:disabled {
  background: #F4F4F4;
}

/* 버튼 */
.main-bt  button{
	width: 100%;
	height: 48px;
	line-height: 48px;
	background-color: var(--main-color);
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	color:#FFFFFF;
}

.bottomFixed{
	position:fixed;
	bottom:0;
	/*width: calc(100% - 20px * 2);*/
	width:100%;
  max-width:600px;
  margin:auto;
	margin-bottom: 20px;
	padding:0px 20px;
}

.bottomViewFixed{
	position:fixed;
	bottom:0;
	/*width: calc(100% - 20px * 2);*/
	width:100%;
	/*margin-bottom: 20px;*/
	padding:15px 20px;
  max-width:600px;
  margin:auto;
}

/* 모달 팝업 */
.modal_popupbox {
  max-width: 560px;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 200;
  background: #fff;
  border-radius: 16px 16px 0 0; 
  padding: 32px 16px 16px 16px;
}

.modal_popupbox h1{
  font-size: 18px;
  font-weight: 700;
}

.modal_popupbox p{
  margin-top: 16px;
  font-size: 14px;
  color: #585858;
  line-height: 21px;
}

/* 팝업 박스*/
.popup-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 900;
  background: #fff;
  width: 83%;
  max-width: 400px;
  border-radius: 16px; 
  padding: 24px 16px 16px 16px; 
}

.popup-title {
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  margin-bottom: 16px;
  color: #222222;
}

.popup-txt span{
  font-weight: 700;
}


.popup-txt {
  width: 260px;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;

}

.popup-btn  button{
  width: 100%;
  height: 48px;
  line-height: 48px;
  background-color: var(--main-color);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  color:#FFFFFF;
}

.popup-find {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 14px;
}

.popup-find a{
  color: var(--main-color);
}

.popup-btn-flex {
  display: flex;
  justify-content: center;
}

.popup-btn-flex  .left-btn{
  width: 100%;
  height: 48px;
  line-height: 48px;
  background-color: #E9EDFF;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  color:#2448D9;

  margin-right: 10px;
}

.popup-btn-flex  .right-btn{
  width: 100%;
  height: 48px;
  line-height: 48px;
  background-color: var(--main-color);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  color:#FFFFFF;
}

.popup-guide {
  font-size: 12px;
  color: #989898;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* 바텀 메뉴 */

.bottom-menu {
  height: 54px;
  background-color: #FFFFFF;
  border-top: 1px solid #F4F4F4;
  text-align: center;
  padding-top: 10px;
}

.bottom-menu p{
  font-size: 11px;
  color: #989898;
}

.bottom-menu ul{
  display: flex;
  justify-content: space-between;
}

.bottom-menu li {
  position: relative;
  width: 90px;
}

.navigation-link::before{
  position:absolute;
  left: 0px;
  top: -10px;
  height: 3px;
  width: 100%;
  background: var(--main-color);
  content: "";
}

.navigation-link p{
  color: #2448D9;
}

.bottomFixedMenu{
  position:fixed;
  max-width:600px;
  margin:auto;
  bottom:0;
  width:100%;
  z-index:9;
}

/* 텍스트에리어 */
.textarea-box {
  height: 380px;
  /*
  border-radius: 8px;
  border: 1px solid #E2E2E2;
  margin-bottom: 12px;
  position: relative;
  padding: 12px;
  */
}

.textarea-box textarea{
  height: 326px;
  font-size: 14px;
  font-weight: 400;
  border:none;
  resize: none;
}

.textarea-box textarea:focus {
  outline:none;
}

.textarea-box textarea::placeholder{
  font-size: 14px;
  color: #989898;
  
}

.add-campaign {
  width: 100%;
  height: 37px;
  line-height: 37px;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  background-color: #2448D9;
  margin-top: 12px;
  border-radius: 4px;
}

.add-campaign-history {
  width: 100%;
  height: 37px;
  line-height: 37px;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  background-color: #c00000;
  margin-top: 12px;
  border-radius: 4px;
}

.add-campaign-modify {
  width: 100%;
  height: 37px;
  line-height: 37px;
  font-size: 14px;
  font-weight: 700;
  color: #165f82;
  text-align: center;
	border:2px solid #165f82;
  background-color: #ffffff;
  margin-top: 12px;
  border-radius: 4px;
}

.add-campaign.complete {
  background-color: #fff;
  border: 1px solid #2448D9;
  color:#2448D9 ;
}

.div-region.first {
  border-top: none;
}

.star-point-area img {
	width:48px;
	height:48px;
	border-radius:50%;
}