.blocker {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  overflow: auto;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.75);
  text-align: center;
}
.blocker:before{
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em;
}
.blocker.behind {
  background-color: transparent;
}
.modal_popup {
  display: none;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  background: #fff;
  text-align: left;
  top:10px;
  margin-bottom:40px;
}

.modal_popup a.close-modal {
  position: absolute;
  top: -40px;
  right: 0px;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('/img/close.png');

}

.modal-spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 12px 16px;
  border-radius: 5px;
  background-color: #111;
  height: 20px;
}

.modal-spinner > div {
  border-radius: 100px;
  background-color: #fff;
  height: 20px;
  width: 2px;
  margin: 0 1px;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.modal-spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.modal-spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.modal-spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

#modal_wrap{width:620px;}
#modal_coun{width:480px;}

.row {width:100%; height:480px; overflow-y: auto;}

.modal_title {float:left; width:100%; background-color:#bd253e; color:#fff; font-size:30px; font-weight:600;  padding:20px 0px; text-align:center;}
.modal_title1 {float:left; width:100%; font-size:30px; font-weight:600;  padding:20px 0px; text-align:center;}

.modal_con {float:left; width:100%; padding:20px; padding-bottom:0px;}

.hr-sect {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	color: #222222;
	font-size:28px;
	margin-top:10px;
	margin-bottom:20px;
	font-weight:600;
}
.hr-sect::before,
.hr-sect::after {
	content: "";
	flex-grow: 1;
	background: #222222;
	height:2px;
	font-size:0px;
	line-height:0px;
	margin:0px 0px;
}
.hr-sect::after {margin-left:10px;}
.hr-sect::before {margin-right:10px;}

.calls {float:left; width:100%; margin-bottom:20px; }
.calls li {float:left; width:50%; border:1px solid #ebebeb; border-bottom:1px solid #ebebeb; padding:20px 15px; cursor:pointer; margin-top:-1px;}
.calls li:nth-child(2n){border-left:none;}
.calls li .colnum {float:left; width:70%; color:#222222; font-size:24px; font-weight:300;}
.calls li .colnum p{font-weight:600;}
.calls li .colicon {float:left; width:30%}

.kakaos {float:left; width:100%; margin-bottom:20px; padding:0 20px;}
.kakaos li {float:left; width:48.8%; margin-right:10px; margin-bottom:10px; background-color:#fce801; color:#382017; border-bottom:none; padding:10px 15px; cursor:pointer;border-radius:6px;}
.kakaos li:nth-child(2n){margin-right:0px;}
.kakaos li .kakaonum {float:left; width:70%; font-weight:600; font-size:24px; margin-top:9px;}
.kakaos li .kakaoicon {float:left; width:30%}


/*»ó´ã½Åû*/
.form-control{
	float: left;
    width: 100%;
    height: 50px;
    padding: 15px 10px;
    font-weight: 300;
    font-size: 18px;
    color: #888888;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ebebeb;
    margin-bottom: 10px;
}

.checkbox {float: left; margin:20px 0px;}
.checkbox input.checkbox1{
    font-size: 1em;
    width: 1.5em; /* ³Êºñ ¼³Á¤ */
    height: 1.5em; /* ³ôÀÌ ¼³Á¤ */
    vertical-align: middle;
	border:1px solid #ebebeb;
}
.checkbox input.checkbox1 + label{ /* ¶óº§ ÅؽºÆ® Å©±â¿Í ¼öÁ÷ Á¤·Ä ¸ÂÃã */
    font-size: 1.12em;
    vertical-align: middle;
	font-weight:300;
	margin-left:5px;
	text-indent: 2em;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.5) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

@media only screen and (min-width:300px) and (max-width:320px) {
	#modal_wrap, #modal_coun{width:280px;}
	.modal_popup {top:30px;}
	.row{height:360px;}
	.hr-sect{font-size:20px;}
	.calls li {padding:10px 5px}
	.calls li .colnum {font-size:12px;}
	.calls li .colicon img {width:100%}

	.kakaos{padding:0px;}
	.kakaos li {padding:10px; margin-bottom:5px;}
	.kakaos li:nth-child(n){margin-right:5px;}
	.kakaos li:nth-child(2n){margin-right:0px;}
	.kakaos li .kakaonum {font-size:12px; margin-top:2px;}
	.kakaos li .kakaoicon img{width:100%; height:auto}

	.modal_title, .modal_title1 {font-size:20px;}
	.checkbox input.checkbox1 + label{font-size: 0.8em;}
}

@media only screen and (min-width:321px) and (max-width:480px) {
	#modal_wrap, #modal_coun{width:300px;}

	.hr-sect{font-size:20px;}
	.calls li {padding:10px 5px}
	.calls li .colnum {font-size:14px;}
	.calls li .colicon img {width:100%}


	.kakaos{padding:0px;}
	.kakaos li {padding:10px; margin-bottom:5px;}
	.kakaos li:nth-child(n){margin-right:5px;}
	.kakaos li:nth-child(2n){margin-right:0px;}
	.kakaos li .kakaonum {font-size:14px; margin-top:2px;}
	.kakaos li .kakaoicon img{width:100%; height:auto}

	.modal_title, .modal_title1 {font-size:20px;}

	.checkbox input.checkbox1 + label{font-size: 1em;}
}

@media only screen and (min-width:481px) and (max-width:568px) {
	#modal_wrap, #modal_coun{width:460px;}
	
	.calls li .colnum {font-size:20px;}
	.calls li .colicon img {width:100%}

	.kakaos li .kakaonum {font-size:14px; margin-top:2px;}
	.kakaos li .kakaoicon img{width:100%; height:auto}

	.checkbox input.checkbox1 + label{font-size: 1em;}
}

@media only screen and (min-width:569px) and (max-width:680px) {
	#modal_wrap{width:530px;}
}