/* default */
#exjoin p div th td input span a{}
#contact_wrap{position:relative;max-width:980px; margin:0 auto;padding:10px;margin-top:0px;}

/* 입력 */
.input01{width:98%;height:40px;padding-left:10px;border:1px solid;border-color:#bebec1 #d4d4d8 #d4d4d8 #bebec1;font-size:16px;line-height:18px;color:#222;background-color:#fff;}
.input02{width:31.5%;height:40px;padding-left:6px;border:1px solid;border-color:#bebec1 #d4d4d8 #d4d4d8 #bebec1;font-size:16px;line-height:18px;color:#222;background-color:#fff;}

#invi {

		color: #444444;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
		background: #f3f3f3;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#e8e8e8));
		background: -webkit-linear-gradient(0% 0%, 0% 100%, from(white), to(#e8e8e8));
		background: -moz-linear-gradient(center top, white, #e8e8e8);
		background: linear-gradient(#ffffff, #e8e8e8);
		border-radius: 0px;
		border: 1px solid transparent;
		border-color: #d0d0d0;padding:6px;float:right;margin-top:-6px;
		}

/* 입력폼  */

#exjoin {width:100%;border-spacing:0; border-collapse:collapse;border-top:0px solid;border-color:#e4e4e4}
#exjoin th{font-size:16px;font-weight:normal;border-bottom:0px solid;border-color:#e4e4e4;text-align:left;padding:10px;width:23%;}
#exjoin td{padding:10px;}
#exjoin td.td01{font-size:12px;color:#000000;}
#exjoin td.td02{font-size:12px;color:#000000;background-color:#fff7d7;}
#exjoin .img01{margin-bottom:0px;}


.agree_check{font-size:14px;border:0px solid;border-color:#e4e4e4;padding:20px 10px;text-align:left;}
.send {text-align:center;margin-top:20px;}
.send img{width:50%;max-width:500px;}
.required_icon{background:url('/exjoin/icon_check.png') no-repeat 0 0px;width:13px;}


.textarea01{width:100%;border:1px solid;border-color:#bebec1 #d4d4d8 #d4d4d8 #bebec1;font-size:15px;color:#222;padding:10px;}
.textarea02{width:100%;}
.center{text-align:center;}

/* 로딩 버튼속성 */

.button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  magrin: 0;
  padding: 2rem 3.125rem;
  background-color: #121212;
  border: none;
  border-radius: 2rem;
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);
  color: white;
  font-weight: 900;
  font-size:20px;
  text-transform: uppercase;
  overflow: hidden;
}
.button:before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #54d98c;
}
.button span {
  position: absolute;
  line-height: 0;
}
.button span i {
  transform-origin: center center;
}
.button span:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%);
}
.button span:nth-of-type(2) {
  top: 100%;
  transform: translateY(0%);
  font-size: 36px;
}
.button span:nth-of-type(3) {
  display: none;
}

.active {
  background-color: #2ecc71;
}
.active:before {
  width: 100%;
  transition: width 3s linear;
}
.active span:nth-of-type(1) {
  top: -100%;
  transform: translateY(-50%);
}
.active span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}
.active span:nth-of-type(2) i {
  animation: loading 500ms linear infinite;
}
.active span:nth-of-type(3) {
  display: none;
}

.finished {
  background-color: #54d98c;
}
.finished .submit {
  display: none;
}
.finished .loading {
  display: none;
}
.finished .check {
  display: block !important;
  font-size: 36px;
  animation: scale 0.5s linear;
}
.finished .check i {
  transform-origin: center center;
}

@keyframes loading {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes scale {
  0% {
    transform: scale(10);
  }
  50% {
    transform: scale(0.2);
  }
  70% {
    transform: scale(1.2);
  }
  90% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}


@media screen and (max-width:767px){
#exjoin th{font-size:14px;font-weight:normal;#e4e4e4;text-align:left;padding:10px 5px 10px 5px;width:70px;}
.textarea01{width:96%;border:1px solid;border-color:#bebec1 #d4d4d8 #d4d4d8 #bebec1;font-size:15px;color:#222;padding:10px;}
}




/* 모바일 반응형 */
@media all and (max-width:767px) {
    .board{margin: 10px 0;}
    .extraVarsList th{width:30%;}
    .extraVarsList td{width:70%;}
    .reading,.check,.checkbox{display:none;}
    .extraVarsList tr td .tel{width:98%;}
    .extraVarsList th{padding: 0 10px; text-align: center;}
    .extraVarsList tr td .address{width:96%;}
    .extraVarsList tr td a span{ width: 100%;}
    .extraVarsList tr td select{width:90%;}
.m_btn{ width: 100%; margin: 20px 0;font-size:20px;}
    .no_btn{display:none;}
   .reading,.check,.checkbox{display:none;}
}