@charset "utf-8";

.topInfo {width: 100%; height: 427px; background: url(/assets/images/guide/apply/img1.png) no-repeat; background-position: center center; background-size: cover} 
.innerTitle {margin: 110px 0 20px 0}
.innerTitle span:last-child {margin-top: 10px;}

.applyForm {    float: left; width: 100%; }
.applyForm div {margin-bottom: 10px;} 
.applyForm div:last-child {margin-bottom: 0px;}
.applyForm label {position: absolute; padding: 10px 10px 10px 20px}
.applyForm input {background: #f2f2f2;
    padding: 10px 10px 10px 70px; width: 90.6%;}
.applyForm select {background-color: #f2f2f2;
    border-radius: 0;
    -webkit-appearance: none;
    border: none;
    width: 100%;
    padding: 10px;
    font-size: 1em;}
.select {background-image: linear-gradient(45deg, transparent 50%, #333 50%), linear-gradient(135deg, #333 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;}
.applyForm option {background: #f2f2f2;}
/*라디오 박스*/
.radio:nth-child(even) {margin-left: 20px}
.radio label {position: inherit; cursor: pointer; padding: 0}
.applyForm .inputTxt {padding: 10px 10px 10px 20px;}
.essential {color: #00aeef}

/*이름*/
.applyForm input.applyName {padding: 10px 10px 10px 65px; width: 85.4%;}

/*생년월일*/
.applyForm select.year {padding: 10px 10px 10px 71px;}
.applyForm .flexYear {margin-bottom: 0}
.flexYear .c30 {width: 32%; margin-bottom: 0}
.flexYear .c30:nth-child(3) {margin: 0 10px}
/*양력음력*/
.flexYear input[type="radio"] {display: none;}
/*.flexYear input[type="radio"] + label {color: #292321; font-size: 14px;}*/
.flexYear input[type="radio"] + label span {display: inline-block; width: 10px;
  height: 10px; margin: -1px 4px 0 0; vertical-align: middle;  cursor: pointer;
  -moz-border-radius: 50%; border-radius: 50%; margin-right: 10px}
.flexYear input[type="radio"] + label span {background-color: #fafafa;}
.flexYear input[type="radio"]:checked + label span {background-color: #00aeef}
/*.flexYear input[type="radio"] + label span, .flexYear input[type="radio"]:checked + label span {
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}
*/
/*남성여성*/
.applyForm .flexGender {margin-bottom: 0}
.flexGender .inputTxt {padding: 20px}
.flexGender input[type="radio"] {display: none;}
/*.flexYear input[type="radio"] + label {color: #292321; font-size: 14px;}*/
.flexGender input[type="radio"] + label span {display: inline-block; width: 10px;
  height: 10px; margin: -1px 4px 0 0; vertical-align: middle;  cursor: pointer;
  -moz-border-radius: 50%; border-radius: 50%; margin-right: 10px}
.flexGender input[type="radio"] + label span {background-color: #d1d1d1;}
.flexGender input[type="radio"]:checked + label span {background-color: #00aeef} 

/*근처 전문점*/
.flexCenter select {padding: 10px 10px 10px 30px; margin-bottom: 15px;}

/*주소*/
.applyForm input.adressNum {padding: 10px 10px 10px 90px; width: 80.8%;}
.applyForm input.applyAdress {width: 90.8%;}
.applyForm input.applyAdress2 {width: 87.4%; padding: 10px 10px 10px 100px;}
.applyForm .flexAdress .inputTxt {padding: 0;}
.applyForm .flexAdress .btn_frmline {display: block;background: #666;
    width: 100%;
    padding: 10px 20px;
    color: #fff;
    margin-left: 19px; text-align: center;}
#reg_mb_zip {    width: 79%;
    padding: 10px 10px 10px 100px;}
#reg_mb_addr2 {padding: 10px 10px 10px 110px; width: 86%;} 
.mask {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.6); display: none; z-index: 2} 


/*전화번호*/
.flexNum .c30 {width: 29%;}
.flexNum .c30:nth-child(3) {margin: 0 10px}
.applyForm .flexNum select {padding: 10px 10px 10px 30px; width: 32%;}
.applyForm .flexNum input {padding: 10px; width: 27%;}
/*.applyForm .flexNum .phoneNum1 {margin: 0 7px;}*/

/*이메일주소*/
.flexMail .email1 {padding: 10px 10px 10px 100px; width: 21%;}
.flexMail .email2 {padding: 10px; width: 23%;}
.flexMail #email_select {width: 26%; float: right;}

/*남길 말*/
.applyTxt textarea {width: 95%;
    background: #f2f2f2;
    padding: 20px; margin-bottom: 15px;}
.applyTxt textarea::-webkit-scrollbar { width: 12px; margin-bottom: 15px}
.applyTxt textarea::-webkit-scrollbar-thumb {background: #505050;}
.applyTxt textarea::-webkit-scrollbar-track {background: #f2f2f2;}

/*개인정보동의*/
.agree .agreeTxt {background: #f2f2f2; padding: 20px; width: 95%;}
.agree .agreeTxt pre {overflow-y: auto; height: 200px; white-space: pre-wrap}
.agree .agreeTxt pre::-webkit-scrollbar { width: 12px;}
.agree .agreeTxt pre::-webkit-scrollbar-thumb {background: #505050;}
.agree .agreeTxt pre::-webkit-scrollbar-track {background: #f2f2f2;}
.agreeCheck {height: 19px; padding: 20px 0;}
.agreeCheck input[type="checkbox"] {display:none;}
.agreeCheck input[type="checkbox"] + label {color:#333; padding: 0; cursor: pointer;}
.agreeCheck input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    border: 1px solid #333;
    cursor:pointer;
}
.agreeCheck input[type="checkbox"]:checked + label span {background:#00aeef; } 

.applyForm input.applyBtn {background: #00AEEF; cursor: pointer;
    padding: 12px 90px;
    border-radius: 10px;
    color: #fff;}




 
@media (max-width: 800px) { 
/*
    .applyForm input.applyName {width: 88.4%;}
    .applyForm .flexGender {width: auto;}
    .flexGender .inputTxt {padding: 9px;}
*/
    
    .c20 {width: 20%;}
    .c45 {width: 45%;}
    .c60 {width: 60%;}
    .c70 {width: 70%;}
    .c75 {width: 75%;}
    .c80 {width: 80%;}
    
    .flexYear .c60 {width: 62%;}
    .flexYear .c30 {width: 31.7%;}
    
    .flexCenter .c60 {width: 62%; margin-bottom: 0;} 
    .flexCenter select {margin-bottom: 0;}
    
    #reg_mb_addr1 {width: 88.5%;}
    #reg_mb_addr2 {width: 82.5%;}
    
    .flexNum .c60 {width: 100%;}
    .applyForm .flexNum input {width: 28.8%;}
    .flexNum .inputTxt {float: right;}
    .flexMail .email2 {width: 15%;}
    
}

/*모바일*/
@media (max-width: 420px) { 
    
    .c20 {width: 100%;}
    .c45 {width: 100%;}
    .c60 {width: 100%;}
    .c70 {width: 100%;}
    .c75 {width: 100%;}
    .c80 {width: 100%;}
    
    
    .topInfo {height: 300px}
    .topInfo .wrapB {padding-top: 20px;     float: left;
    background: #f8f8f8;
    padding: 0 5%;} 
    .innerTitle span:last-child {margin: 0; float: left}
    .applyForm {margin-bottom: 0}
    .applyForm label {padding: 10px 0;}
    .applyForm input.applyName {float: right;width: 70%; padding: 10px; margin: 0;} 
    .applyForm .flexName .inputTxt {padding: 10px 0; float: right;}
    
    .flexYear {margin-top: 10px}
    .flexYear .c30 {width: 75%; float: right; margin: 0 0 5px 0;}
    .flexYear .c30:nth-child(3) {margin: 0 0 5px 0}
    .applyForm .flexYear .inputTxt {width: 75%; float: right; margin: 0 0 5px 0; padding: 10px 0;}
    .applyForm select.year {padding: 10px}
    
    .applyForm .flexCenter label {padding: 10px;}
    .flexCenter select {margin-bottom: 0;}
    .applyForm .flexCenter .inputTxt {padding: 10px 0;float: right;}
    
    .flexAdress .c60 {width: 70%;}
    .applyForm input.adressNum {width: 54%;
    float: right;
    padding: 10px;}
    .applyForm .flexAdress .inputTxt {float: right; width: 29%; font-size: 0.83em;}
    .applyForm .flexAdress input.adressNumBtn {margin: 0;}
    .applyForm input.applyAdress, .applyForm input.applyAdress2 {width: 70%;
    float: right;
    padding: 10px;}
    
    .applyForm .flexNum label {padding: 10px}
    .applyForm .flexNum select {width: 30%;}
    .applyForm .flexNum input {width: 24%; margin: 0;}
    .applyForm .flexNum .inputTxt {padding: 10px 0; float: right}
    
    .applyForm .flexMail label {    width: 100%;
    float: left;
    position: inherit;}
    .applyForm .flexMail form {width: 100%;}
    .flexMail .email1 {padding: 10px;
    width: 25%;
    margin: 0;}
    .flexMail .email2 {margin: 0;}
    .flexMail #email_select {width: 33%;}
    .applyForm .flexMail .inputTxt {    padding: 10px 0;
    float: right;}
    
    .applyTxt textarea, .agree .agreeTxt {width: 90%; padding: 5%;}
    
    #reg_mb_zip {padding: 10px;
    float: right;
    width: 58%;}
      #reg_mb_addr1, #reg_mb_addr2 {    width: 71%;
    padding: 10px;
    float: right;}
    .applyForm .flexAdress .btn_frmline {margin-left: 0; width: auto; display: block;}
    .flexAdress label {width: 23%;}
    
    
    .flexYear .c60 {width: 100%;}
    .flexCenter .c60 {width: 100%;}
    .agree .agreeTxt pre {overflow-x: hidden}
}