@charset "utf-8";

/********************************************
    VIP고객등록
********************************************/
.contents{padding: 40px 0 80px}
.registWrap {border: 0;}
.registTit {border-top: 1px solid #003057; border-bottom: 1px solid #e3e3e3; padding: 20px 20px; background: #f5f5f5; color: #003057; font-family: 'Noto Sans', sans-serif;}
.registCon {}
.registCon > dl {}
.registCon > dl > dt { border-bottom: 1px solid #e3e3e3; padding: 20px 20px; width: 100%; overflow: hidden; position: relative; background: #f5f5f5; color: #222;}
.registCon > dl > dt * { vertical-align: middle; }
.registCon > dl > dt .rulsfn { position: absolute; right: 0; top:16px;}
.registCon > dl > dt .rulsfn label {font-size: 14px;}
.registCon > dl > dt .rulsfn a {
  display: inline-block;
  height: 30px;
  line-height: 30px;    
  font-size: 14px;
  color: #103d61;
  position: absolute;
  right: 0;
  top: 0;
  width: inherit;
  padding: 0 30px;
}
.registCon > dl > dt .rulsfn a i {
      display: inline-block;
}
.registCon > dl.on > dt .rulsfn a i {transform: rotate(180deg);}
.registCon > dl > dd {color: #999;}
.registCon > dl > dd h3 {background: #9cbc41; color: #fff; font-size: 15px; letter-spacing: -0.2px; padding:15px 20px;}
.registCon > dl > dd h4 {font-size: 15px; color: #4a4a4a; font-family: 'Noto Sans Medium', sans-serif; padding: 15px 0 10px;}
.registCon > dl > dd .rulsCon { padding:25px 10px 20px 40px; border-bottom: 1px solid #e3e3e3;}
.registCon > dl > dd .rulsCon .scrollbox { background: #fff; height: 250px; overflow-y:auto; padding-right: 10px;}
.registCon > dl > dd .rulsCon .scrollbox p {font-size: 14px; margin-bottom: 3px; line-height: 1.5;}
.registCon > dl > dd .rulsCon .scrollbox p.privacyTit { color: #555; font-weight: 500; padding-top: 10px;}
.registCon > dl > dd .rulsCon .scrollbox ul {padding-left: 10px; font-size: 13px;}
.registCon > dl > dd .rulsCon .scrollbox ul li {font-size: 13px; margin-bottom: 3px; line-height: 20px;}
.registCon > dl > dd .rulsCon table {width:100%;text-align:left; font-size: 13px; border-left: 1px solid #ddd; border-top: 1px solid #ddd; margin-top: 10px;}
.registCon > dl > dd .rulsCon table th {font-weight:500; padding:10px 0 10px 20px; background:#fff; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.registCon > dl > dd .rulsCon table td {padding:10px 0 10px 20px; background:#fff; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; vertical-align: middle;}

.registCon > dl > dd h4 span { font-weight: bold; text-decoration: underline; }
.registCon > dl > dd .strong_content h4, .registCon > dl > dd .rulsCon .scrollbox .strong_content p {}
.registCon > dl > dd .rulsCon .scrollbox .strong_content ul li { font-size: 13px;}

.registWrap .totalAgree { font-size: 14px; background:#0080b8; color: #fff; padding: 14px 0 14px 30px; position: relative; margin-bottom: 30px;}
.registWrap .totalAgree * { vertical-align: middle;}
.registWrap .totalAgree strong { position: absolute; display: inline-block; left: 70px; top: 19px;}
.registWrap .totalAgree input[type=checkbox].checkbox, input[type=radio].radio { width: 30px; height: 30px; }
.registWrap .totalAgree input[type=checkbox].checkbox+.label::before, .registWrap .totalAgree input[type=radio].radio+.label::before {
    color:#fff;
    background-color:#0080b8;
    border:1px solid #ffffff;
}
.registWrap .totalAgree input[type=checkbox].checkbox:checked+.label:before, registWrap .totalAgree input[type=radio].radio:checked+.label:before {
    background-color:#ffffff;
    border-color:#0080b8;
    color:#0080b8;
}

.registWrap .registComment {padding: 15px 0;}


.customer_ori {
  color: #052f57;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 30px;
}


.registWrap .terms_agree ul li {
	overflow: hidden;
	border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.registWrap .terms_agree ul li .text {
	/* float: left; */
	/* width: 800px; */
	padding: 10px 10px 10px 20px;
}
.registWrap .terms_agree ul li .check {
	padding: 10px 20px 10px 0;
	text-align: right;
	/* float: right; */
	/* width: 200px; */
}
.registWrap .terms_agree ul li .check * { vertical-align: middle; }
.registWrap .terms_agree ul li .check label {
	margin: 0 0 0 15px;
}


  .formTable {border-top: 1px solid #003057; margin-top: 10px;}
  .formTable .type-text {font-family:Noto Sans, 'Malgun Gothic','돋움', 'dotum';  color:#777; font-size: 14px; height: 40px;}
  .formTable select {font-family:Noto Sans, 'Malgun Gothic','돋움', 'dotum';  color:#777; font-size: 14px;}
  .formTable table { width: 100%; table-layout: fixed;}
  .formTable table tbody th { 
  vertical-align: middle; 
  font-size: 15px;  
  background: #f9f9f9; 
  border:1px solid #e3e3e3;   
  border-top: 0;
  border-left: 0;
  color: #222;
  text-align: left;
  padding:20px 50px;
  font-family:Noto Sans;
  position: relative;
}   
  .formTable table.pdcnt tbody th {padding:20px 15px; text-align: center;}
  .formTable th.require::before {
    content: "";
    width: 3px;
    height: 3px;
    background: #f53a22;
    position: absolute;
    left: 35px;
    top: 30px;
    border-radius: 3px;
  }
  .formTable table tbody td { 
  vertical-align: middle; 
  color: #000; 
  padding:0.8rem 0.6rem;
  font-size: 15px; 
  text-align: left;
  border-bottom:1px solid #e3e3e3;
  border-top: 0;
  background: #fff;
}
/* .formTable table tbody tr:first-child td { border-top: 1px solid #e3e3e3;} */


.bottomBtns {padding: 30px 0; text-align: center;}
.bottomBtns * { vertical-align: middle;}
.bottomBtns input[type="reset"],
.bottomBtns a {display: inline-block; padding: 15px 50px; line-height: 1; width: inherit; height: inherit;}
.bottomBtns .btn_register {color: #fff; background: #8b8075; border:1px solid #8b8075;}
.bottomBtns .btn_cancel {color: #fff; background: #003057; border:1px solid #003057;}
.select-wrapper {
    position: relative;
    display: inline-block;
    padding-right: 40px;
    top: -1px;
}
.select-wrapper:before {
    content: "\f0d7";
    display: inline-block;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    right: 15px;
    top: 8px;
    pointer-events: none;
    z-index: 1;
    font-size: 16px;
    color: #222;
}
.formTable select {
    font-family: Noto Sans, 'Malgun Gothic', '돋움', 'dotum';
    color: #777;
    font-size: 14px;
}
select {
    border: none;
    height: 40px;
    font-size: 0.82rem;
    font-family: 'Noto Sans DemiLight';
    color: #777;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: 0.01px;
    position: relative;
    width: auto;
    color: #222;
    margin-right: -40px;
    padding-right: 40px;
    padding-left: 20px;
    min-width: 100px;
    background: #fff;
    border: 1px solid #ccc;
}

.bl_billi{margin-top: 20px;}
.joinUrl{width: 100%; max-width: 400px;}

@media screen and (max-width: 670px) {
  .registWrap .terms_agree ul li{flex-direction: column; align-items: flex-start;}
  #joinNm{width: 100%;}
  .formTable th.require::before{top: 0; bottom: 0; margin: auto;}
  .registCon > dl > dd .rulsCon{padding: 10px;}
  .registCon > dl > dd .rulsCon table td{padding: 5px;}
  .registCon > dl > dd .rulsCon table th{padding: 5px;}
  .flex-box{display: flex; flex-direction: column; gap: 5px;}
  .select-wrapper{padding: 0;}
  .formTable select{width: 100%;}
}