@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* border: 1px solid silver; */
}
html, body{margin:0; padding:0; width:100%; height:100%;box-sizing: border-box;}
body {
  font-family:'NotoSansKR', sans-serif;
  font-size: 14px;
  color: #333;
  letter-spacing: -0.02rem;
}

h1 {
  font-size: 56px;
  font-weight: 600;
  line-height: 60px;
}

h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 51px;
}

h3 {
  font-size: 28px;
  font-weight: 400;
  line-height: 3rem;
  text-transform: uppercase;
}

h4 {
  font-size: 21px;
  font-weight: 500;
  line-height: 28px;
  text-transform: uppercase;
  font-family:'NotoSansKR', sans-serif;
}

h5 {
  font-size: 32px;
  font-weight: bold;
  line-height: 24px;
  text-transform: uppercase;
  color: #545454;
  font-family: 'NotoSansKR', sans-serif;
}

h6 {font-size: 19px;}

a:link {color: #292929;text-decoration: none;}
a:visited {color: #292929;}
a:hover {color: #292929;}
a:active {color: #292929;}

ul li {
  list-style: none;
}

button {
  border: 1px solid #5f0080;
  border-radius: 4px;
  background-color: #fff;
  color: #5f0080;
  font-size: 14px;
  font-weight: 500;
  font-family: 'NotoSansKR', sans-serif;
  cursor: pointer;
}

img {
  width: 100px;
}

input, textarea, select {
  font-family:'NotoSansKR', sans-serif;
}

.ch-box {
  position: relative;
}

.ch-box label {
  background-color: #fff;
  border: 1px solid #ccc;
 /*  border-radius: 50%; */
  cursor: pointer;
  height: 28px;
  left: 2px;
  position: absolute;
  top: -22px;
  width: 28px;
}

.ch-box label:after {
  border: 3px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 6px;
  opacity: 0;
  position: absolute;
  top: 6px;
  transform: rotate(-45deg);
  width: 12px;
}

.ch-box input[type="checkbox"] {
  visibility: hidden;
}

.ch-box input[type="checkbox"]:checked + label {
  background-color: #673AB7;
  border-color: #673AB7;
}

.ch-box input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

/*  */
input[type=date]:invalid+span:after {
  content:"생년월일을 입력하세요";
  position:absolute;
  color:#727272;
  left:10px;
  top:0;
}

input[type=date]:focus:invalid+span:after {display:none;}
input:not(:focus):invalid {color:transparent;}
label.wrap {position:relative;}




/*  */
input[type=date],input[type=search], input[type=email], input[type=password], input[type=text], input[type=number], textarea {
  width: 100%;
  height: 48px;
  padding: 0 11px 1px 15px;
  border: 1px solid #9a9a9a;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
 /*  color:#673AB7; */
  appearance: none;
  background: #fff;
  outline: 0;
}

input[type=search]:disabled, input[type=email]:disabled, input[type=password]:disabled, input[type=text]:disabled, input[type=number]:disabled, textarea:disabled {
  background: #f7f5ff;
/*   border: 1px solid #8c70be; */
}

input[type=date],input[type=search]:focus, input[type=email]:focus, input[type=password]:focus, input[type=text]:focus, input[type=number]:focus, textarea:focus {
  border: 1px solid black;
}

input[type=radio] {
  appearance: none;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 100%;
  display: inline-block;
  vertical-align: middle;
}

input[type=radio]:checked.smallradio {
  width: 24px;
  height: 24px;
  border: 7px solid #673AB7;
}

.wrapper{height:auto; min-height:100%; padding-bottom:60px; overflow: hidden; position: relative;}
footer{position:relative; height:60px; transform:translateY(-100%);}

.header {
  display: flex;
  flex-direction: column;
  height: 160px;
  background: #673AB7;
  color: #fff;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  letter-spacing: -0.3px;
}

.h-tx01 {
    background: white;
    border-radius: 50px;
    color: #673AB7;
    padding: 3px 20px;
    margin-bottom: 5px;
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.h-tx02 {display: block; font-size: 16px;}

.tx01{color:#fff; text-align: center; font-size:17px; letter-spacing: -1px;}
.tx02{color: #282828;
    text-align: center;
    font-size: 17px;
    position: relative;
    top: 220px;
    letter-spacing: -1px;}
.tx03 {
    display: block;
    position: absolute;
    top: 70px;
    left: 60px;
	font-size: 15px;
    font-weight: 600;
}
.txbox{padding: 15px; border: 1px solid #eee; background: #f6f6f6;}


.info_member>div>:nth-child(1) {
  padding: 5px 0;
  font-weight: 700;
}

 .info_member>div {
  padding: 10px 20px;
  display: block;
}

.info_member>:nth-child(4)> :nth-child(1)::after, .info_member> :nth-child(5)> :nth-child(1)::after,
.info_member>:nth-child(10)> :nth-child(1)::after {
  display: none;
}

.info_member>:nth-child(1) div {
  display: flex;
}

.info_member>:nth-child(1) div button {
  width: 100px;
  height: 48px;
  margin-left: 10px;
  transition: 0.8s;
  flex-shrink: 0;
}

.info_member>:nth-child(1) div button:hover {
  color: white;
  background: #673AB7;
}

/* 빨간 박스 */
.face-box {
  position: absolute;
  top: 46%;     /* 세로 중앙 */
  left: 50%;    /* 가로 중앙 */
  width: 210px; 
  height: 250px;
  border: 3px solid red;
  transform: translate(-50%, -50%); /* 중앙 보정 */
  pointer-events: none; /* 클릭 방해 X */
}

/* 촬영 사진 영역 */
.photo-wrapper {
  margin-top: 20px;
  text-align: center;
}


.info_member>:nth-child(6) div {
  display: flex;
}

.info_member>:nth-child(6) div button {
  width: 150px;
  height: 48px;
  margin-left: 10px;
  transition: 0.8s;
  flex-shrink: 0;
}

.info_member>:nth-child(6) div button:hover {
  color: white;
  background: #673AB7;
}

/* .info_member>:nth-child(7) input {
  background: url('') no-repeat;
  background-position: right center;
  background-size: 50px 24px;
  padding-right: 50px;
} */

.info_member>:nth-child(7) span {
  display: block;
  padding-top: 8px;
  color: #999;
  font-size: 12px;
}
/* 8번 */
.info_member>:nth-child(4) div {
  display: flex;
 /*  border: 1px solid #ddd; */
  border-radius: 4px;
}

.info_member>:nth-child(4) input {
  border: 1px solid #9a9a9a;
  text-align: center; 
}

.info_member>:nth-child(4) div span {
  margin: 0 10px;
  line-height: 48px;
  color: #ccc;
}



.info_member>:nth-child(5) label {
  display: inline-block;
  padding: 1px 10px 20px 0px;
}

.info_member>:nth-child(10) {
  padding-bottom: 12px;
}

.info_member>:nth-child(10) span {
  padding: 12px 0 4px;
  display: block;
}

.info_member>:nth-child(10) p {
  padding-bottom: 7px;
  color: #666;
  font-size: 12px;
}

.info_member>:nth-child(10) label {
  display: block;
  padding: 12px 0;
}

.consent {
  padding: 15px;
  border-top: 15px solid #f4f4f4;
}

.consent>:nth-child(1) {
    display: block;
    padding: 10px 0 10px 0;
    font-weight: 400;
    border-radius: 2px;
    color: #fff;
    text-align: center;
    background: #673AB7;
}

/* .consent> :nth-child(1):after {
  content: "*";
  color: #ee6a7b;
}
 */
.consent>:nth-child(2) {
  margin-top:10px;
  padding: 12px 0;
}

.consent>:nth-child(2) label {
    font-size: 16px;
    position: relative;
    top: 2px;
    font-weight: 500;
}

/* .consent>:nth-child(3){
  margin-top:10px;
  padding-top: 12px;
  color: #666;
}
 */
/* end */
.btn01{
  background: #673AB7;
  color: #fff !important;
  padding: 20px;
  font-size:16px;
  text-align: center;
  display: block;
  height: 60px;
  line-height: 20px;
  font-weight: 400;
 }
 .btn02{
  background: #292929;
  color: #fff !important;
  padding: 20px;
  font-size:16px;
  text-align: center;
  display: block;
  height: 60px;
  line-height: 20px;
  font-weight: 400;
 }
.btn03{
  background:#673AB7;
  padding: 15px 50px;
  text-align: center;
  font-size: 15px;
  border-radius: 50px;
  color: #fff !important;;
}
.btn01:hover, .btn03:hover{background: #371474;}
.btn02:hover{background: #575757;}

.btbox {
    display: flex;
    justify-content: center;
    position: relative;
    top: 250px;
}

.c-container {display: block; height: 160px; background: #673AB7;}
/* .f-container {display: block; height: 400px; background: #ec4e4b;} */


/*=======================
    C-Circle Sign
=========================*/
 .o-circle {
  display: flex;
  height: 110px;
  justify-content: center;
  align-items: flex-start;
}

.o-circle__sign {
  position: relative;
  opacity: 0;
  background: #fff;
  animation-duration: .8s;
  animation-delay: .2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.o-circle__sign::before, 
.o-circle__sign::after {
  content: "";
  position: absolute;
  background: inherit;
}



/*=======================
      Sign Success
=========================*/
 
.o-circle__sign--success { 
   background: #673AB7;
}

.o-circle__sign--success .o-circle__sign {
    position: relative;
    top:-5px;
    width: 0.8rem;
    height: 5rem;
    border-radius: 50% 50% 50% 0% / 10%;
    transform: translateX(130%) translateY(35%) rotate(45deg) scale(.11);
    animation-name: success-sign-appearance;
}

.o-circle__sign--success .o-circle__sign::before {
    bottom: -16%;
    width: 100%;
    height: 50%;
    transform: translateX(-150%) rotate(91deg);
    border-radius: 50% 50% 50% 50% / 20%;
}
/*--shadow--*/
.o-circle__sign--success .o-circle__sign::after {
   background: #582ca7;
}
 
.circle{
    width: 130px;
    height: 130px;
    border-radius: 50%;
	top: 230px;
    border: 8px solid #dd1717;
	position: absolute;
    left: 50%;
	right:  50%; 
	transform: translate(-50%, -50%);
}
/*=======================
      Sign Failure
=========================*/


.o-circle__sign--failure .o-circle__sign {
  position: relative;
  width: 0.8rem;
  height: 5rem;
  background: #dd1717;
  top: 170px;
  transform: translateY(25%) rotate(45deg) scale(.1);
  border-radius: 50% 50% 50% 50% / 10%;
  animation-name: failure-sign-appearance;
}

.o-circle__sign--failure .o-circle__sign::before {
   top: 50%;
   width: 100%; height: 100%; 
   transform: translateY(-50%) rotate(90deg);
   border-radius: inherit;
} 

/*--shadow--*/
.o-circle__sign--failure .o-circle__sign::after {
   background: rgba(175, 57, 55, .8);
}


/*-----------------------
      @Keyframes
--------------------------*/
 
/*CIRCLE*/
@keyframes circle-appearance {
  0% { transform: scale(0); }
  
  50% { transform: scale(1.5); }
          
  60% { transform: scale(1); }
  
  100% { transform: scale(1); }
}

/*SIGN*/
@keyframes failure-sign-appearance {         
  50% { opacity: 1;  transform: translateY(25%) rotate(45deg) scale(1.7); }
    
  100% { opacity: 1; transform: translateY(25%) rotate(45deg) scale(1); }
}

@keyframes success-sign-appearance {      
  50% { opacity: 1;  transform: translateX(130%) translateY(35%) rotate(45deg) scale(1.7); }
    
  100% { opacity: 1; transform: translateX(130%) translateY(35%) rotate(45deg) scale(1); }
}
 

@keyframes set-shaddow {
  to { opacity: 1; }
}

@keyframes set-overflow {
  to { overflow: hidden; }
}



/*+++++++++++++++++++
    @Media Queries
+++++++++++++++++++++*/

@media screen and (min-width: 1300px) {
  
  HTML { font-size: 1.5625em; } /* 25 / 16 = 1.5625 */
  
}