@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; color: #484848; }

html, body { width: 100%; height: 100%; overflow-x: hidden; }

input[type=text] { appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; }

select { background-color: white; background-image: url(https://webusiness.co.kr/event/assets/img/select.svg); background-position: right; background-repeat: no-repeat; border-bottom: 1px solid #c7c8c9; appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; cursor: pointer; padding-right: 30px; text-align: center;}

.wrapper-logo { width: 900px; height: 100px; line-height: 100px; margin: 0 auto; }

.logo-left { width: 50%; float: left; text-align: left; padding-top: 30px;}

.logo-right { width: 50%; float: left; text-align: right; padding-top: 30px; }

.logo-left img, .logo-right img { max-width: 50%; vertical-align: middle; }

.main-title { width: 100%; height: 320px; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; }

.main-title-info { width: 900px; height: 70px; line-height: 70px; background-color: #484848; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding: 0 40px; }

.form-title { display: inline-block; float: left; color: white; font-size: 20px; vertical-align: middle; }

.form-atten { display: inline-block; float: right; color: white; font-size: 14px; font-weight: 300; vertical-align: middle; }

.wrapper-form { margin:0 auto; width:100%; display: flex; flex-direction: column; background-color: #F2F4F5; }

.container-info { width: 900px; display: flex; background-color: white; margin: 0 auto; padding: 50px 40px; margin-bottom: 2px; }

.container-survey { width: 900px; display: flex; background-color: white; margin: 0 auto; padding: 50px 40px; margin-bottom: 2px; }

.container-agree { width: 900px; display: flex; background-color: white; margin: 0 auto; padding: 50px 40px;  }

.container-submit { width: 900px; display: flex; justify-content: center; background-color: white; margin: 0 auto; margin-bottom: 100px; }

.form-side { width: 15%; display: block; float: left; font-size: 20px; color: #5f5f5f;  }
.form-side_2 { display: none; font-size: 20px;}

.form-contents { width: 85%; display: flex; float: left; flex-direction: row; flex-wrap: wrap; }



/* 기본 정보 input style */
.info-item { flex: 1 1 50%; height: 60px; padding: 0 15px; margin-bottom: 30px; }
.info-item-2 { flex: 1 1 50%; height: 60px; padding: 0 15px; margin-bottom: 30px; width: 100%;}
.pnum-1{
    display: flex;
    justify-content: space-between;
}
.info-item span { display: block; font-size: 14px; font-weight: 300; ; }
.info-item-2 span { display: block; font-size: 14px; font-weight: 300; ; }
.style5{
    height: 40px;
    line-height: 40px;
}
.info-item input[type=text] { width: 100%; height: 40px; display: block; border: 1px solid #c7c8c9; border-radius: 5px;  font-size: 16px; }
.info-item-2 input[type=text] { width: 100%; height: 40px; display: block; border: 1px solid #c7c8c9; border-radius: 5px;  font-size: 16px; }
.info-item-2 input[type=text]:hover{
    border: 1px solid #000;
}
.info-item-2 select{
    width: 33.33333%; height: 40px; display: block; border: 1px solid #c7c8c9; border-radius: 5px;  font-size: 16px;
}
.info-item-2 select:hover{
    border: 1px solid #000;
}

.info-item input[type=text]::placeholder { font-size: 16px; color: #C7C8C9; }

.info-item input[type=text]:focus { outline: none; }
.info-item select:focus { outline: none; }
#gubun1{
    color: rgb(199, 200, 201);
}
.staff1 {
    text-align: left;
}
#gubun1>option{
    color: black
}
/* #gubun1{color: red;} */
/* 기본 정보 세팅 input style */
.info-item-set { display: flex; flex: 1 1 50%; height: 60px; margin-bottom: 30px; }

.info-item-set span { display: block; font-size: 14px; font-weight: 300; }

.info-item-set input[type=text], select { width: 100%; height: 40px; display: block; border-radius: 5px; border: 1px solid #c7c8c9; font-size: 16px; }

.info-item-set input[type=text]::placeholder { font-size: 16px; color: #C7C8C9; }

.info-item-set input[type=text]:focus { outline: none; }
.info-item-set select:focus { outline: none; }

.set-item { margin-right: 0; flex: 1 1 50%; padding: 0 15px; }
.set-item:last-child { margin-right: 0px; padding: 0 15px ;}


/* Hover, Focus시  */
.info-item>input:hover{
    border: 1px solid #000;
    
}
.info-item>input:focus{
    border: 1px solid #000;
}
input:hover{
    border: 1px solid #000;
    
}
input:focus{
    border: 1px solid #000;
}



#hp1:hover{
    border: 1px solid #000;
}
#hp2:hover{
    border: 1px solid #000;
}
#hp3:hover{
    border: 1px solid #000;
}
#hp1:focus{
    border: 1px solid #000;
}
#hp2:focus{
    border: 1px solid #000;
}
#hp3:focus{
    border: 1px solid #000;
}


#tel1:hover{
    border: 1px solid #000;
}
#tel2:hover{
    border: 1px solid #000;
}
#tel3:hover{
    border: 1px solid #000;
}
#tel1:focus{
    border: 1px solid #000;
}
#tel2:focus{
    border: 1px solid #000;
}
#tel3:focus{
    border: 1px solid #000;
}



.set-item>input:focus{
    border: 1px solid #000;
}
.set-item>input:hover{
    border: 1px solid #000;
    
}
#gubun1:hover{
    border: 1px solid #000;
}
#gubun1:focus{
    border: 1px solid #000;
    
}
#industry:hover{
    border: 1px solid #000;
}
#industry:focus{
    border: 1px solid #000;
    
}
.survey-item>#chk5:hover{
    border: 1px solid #000;
}
.survey-item>#chk5:focus{
    border: 1px solid #000;
}
.survey-item>#chk6:hover{
    border: 1px solid #000;
}
.survey-item>#chk6:focus{
    border: 1px solid #000;
}


/* 설문 문항 input style */
.survey-item { width: 100%; display: block; padding: 0 15px; margin-bottom: 30px; }

.survey-item p { color: #0076ce; font-size: 16px; font-weight: 400; margin-bottom: 16px; word-break: keep-all; }
#sub-atten { color: #484848; font-size: 14px; font-weight: 300; margin-bottom: 16px; word-break: keep-all; }

.survey-item span { display: inline-block; margin-right: 30px; margin-bottom: 10px; }

.survey-item input[type=radio] { width: auto; margin-right: 10px; }
.survey-item input[type=checkbox] { width: auto; margin-right: 10px; }
.survey-item select { width: inherit; height: 40px; border: 1px solid #c7c8c9; border-radius: 5px; padding-left: 10px; padding-right: 30px; }
.survey-item input[type=text] { width: inherit; height: 40px; border: 1px solid #c7c8c9; border-radius: 5px; padding-left: 10px; }
.survey-item input[type=text]::placeholder { font-size: 16px; color: #C7C8C9; }
#etc_input { width: 150px; height: 20px; border: none; border-bottom: 1px solid #c7c8c9; margin-left: 10px; appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; }
.survey-item textarea { width: 100%; height: 100px; border: 1px solid #c7c8c9; border-radius: 5px; padding: 10px; resize: none; }

.survey-item input:focus { outline: none; }
.survey-item select:focus { outline: none; }
.survey-item textarea:focus { outline: none; }



/* 개인정보 동의 style */
.agree-item { width: 100%; height: auto; display: block; padding: 0 15px; margin-bottom: 30px; }

.agree-item-title { font-size: 14px; word-break: keep-all; }

#agree_all, #agree_requ, #agree_op1, #agree_op2 { display: none; }

.agree-chk-all { height: 45px; border-bottom: 1px solid #c7c8c9; }
.agree-chk-all svg { vertical-align: text-top; margin-right: 10px; cursor: pointer; }
.agree-chk-all span { vertical-align: top; }

.agree-chk-requ { height: 45px; line-height: 45px; position: relative; }
.agree-chk-requ svg { vertical-align: middle; margin-right: 10px; cursor: pointer; }
.agree-chk-requ span { vertical-align: middle; color: #0076ce;  }
.agree-chk-requ img { position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; }

.agree-chk-op1 { height: 45px; line-height: 45px; position: relative; }
.agree-chk-op1 svg { vertical-align: middle; margin-right: 10px; cursor: pointer; }
.agree-chk-op1 span { vertical-align: middle; }
.agree-chk-op1 img { position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; }

.agree-chk-op2 { height: 45px; line-height: 45px; position: relative; }
.agree-chk-op2 svg { vertical-align: middle; margin-right: 10px; cursor: pointer; }
.agree-chk-op2 span { vertical-align: middle; }
.agree-chk-op2 img { position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; }

.container-agree img{
    rotate: 180deg;
}


.agree-detail { width: 100%; height: 165px; display: none; line-height: normal; background-color: #fff; border-radius: 5px; font-size: 12px; color: #707070; padding: 10px; margin: 16px 0px; word-break: keep-all; overflow: scroll; }
.agree-detail::-webkit-scrollbar { display: none; }

.agree-item-atten { font-size: 12px; font-weight: 300; word-break: keep-all; }

.agree-item-privacy { font-size: 12px; font-weight: 300; border-top: 1px solid #c7c8c9; padding-top: 20px; word-break: keep-all; text-align: center; }
.agree-item-privacy a { font-weight: 400; color: #0076ce; text-decoration: none; }



/* submit button */
.btn-a { margin: 10px auto;width: 400px; height: 60px; background-color: #da291c ; color: white; border: none; border-radius: 5px; text-align: center; font-size: 20px; margin-bottom: 55px; cursor: pointer; 
    text-align: center;
    line-height: 60px;
    text-decoration: none;
}



/* 주소지 입력 input style */
.form-item-adress { display: block; margin-bottom: 30px; }

.form-item-adress span { display: block; font-size: 14px; font-weight: 300; padding-left: 15px; }

.adress-item { width: 50%; float: left; margin: 0; margin-top: 10px; padding: 0 15px; }

.adress-item input { width: 100%; height: 40px; display: block; border: 1px solid #c7c8c9; border-radius: 5px; font-size: 16px; padding: 0 10px; margin-bottom: 10px; }

.adress-item input::placeholder { font-size: 16px; color: #C7C8C9; }
.adress-item input:focus { outline: none; }

.adress-item-btn { width: 100%; float: left; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; }

.adress-item-btn input { flex: 1 1 0; }

#postBtn { border: none; background-color: #0076ce; color: white; margin-left: 10px; flex: 1 1 0; cursor: pointer; appearance: none; -webkit-appearance: none; border-radius: 5px; }



/* 파일 업로드 input style */
.form-item-file { width: 100%; display: block; padding: 0 15px; }

.file-title { width: 30%; display: inline-block; float: left; font-size: 14px; font-weight: 300; }

.file-atten { width: 70%; display: inline-block; float: left; font-size: 12px; font-weight: 300; text-align: right;}

.form-item-file input { display: none; }

.file-btn { width: 100%; height: 40px; line-height: 40px; display: block; float: left; position: relative; margin-top: 10px; }

.file-name { width: calc(100% - 130px); height: 40px; display: inline-block; overflow: hidden; text-overflow: ellipsis; font-size: 16px; color: #c7c8c9; padding: 0 10px; border: 1px solid #c7c8c9; border-radius: 5px; text-align: left; vertical-align: middle; white-space: nowrap; }

.file-btn label { width: 120px; height: 40px; display: inline-block; background-color: #0076ce; color: white; border-radius: 5px; position: absolute; right: 0; text-align: center; cursor: pointer; }



/* 등록 완료 화면 style */
.wrapper-thanks { width: 100%; height: calc(100% - 420px); background-color: #F2F4F5; position: relative; }

.container-thanks { width: 860px; height: 540px; background-color: white; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); }

.container-item { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }

.item-tit { font-size: 20px; color: #0076ce; font-weight: 400; margin-top: 30px; word-break: keep-all; }
.item-des { font-size: 14px; color: #707070; margin-top: 16px; word-break: keep-all; }
.item-mail { font-size: 14px; margin-top: 30px; }
.item-mail img { margin-left: 14px; margin-right: 5px; }
.item-mail a { text-decoration: none; cursor: pointer; }
.item-btn { width: 400px; height: 60px; border-radius: 5px; border: none; background-color: #0076ce; color: white; font-size: 20px; font-weight: 400; margin-top: 30px; cursor: pointer; }



@media all and (min-width:540px) and (max-width:860px) { 

    .wrapper-logo { width: 100%; padding: 0 20px; }
            
    .main-title { height: 365px; }
    
    .main-title-info { width: calc(100% - 40px); height: 80px; line-height: 2; padding: 20px; }
    
    .form-title { width: 50%; display: block; float: left; color: white;  margin-bottom: 10px; }
    
    .form-atten { width: 50%; display: block; text-align: right;float: right; color: white;  word-break: keep-all; }
        
    .container-info { width: calc(100% - 40px); padding: 20px 20px 60px 20px; }
    
    .container-survey { width: calc(100% - 40px); padding: 60px 20px; }
    
    .container-agree { width: calc(100% - 40px); padding: 60px 20px; }
    
    .container-submit { width: calc(100% - 40px); padding: 0 20px; margin-bottom: 20px; }
    
    .form-side { display: none; }

    .form-side_2 { display: block; font-size: 20px; margin-bottom: 20px; border-bottom: 1px solid #C7C8C9;}
    
    .form-contents { width: 100%; }
    
    
    
    /* 기본 정보 input style */
    .info-item { flex: 100%; padding: 0px; }
    
    /* Phone Number Width */
    .info-item-2 { flex: 1 1 50%; height: 60px; padding: 0; margin-bottom: 30px; width: 100%;}
    .pnum-1{
        display: flex;
        justify-content: space-between;
    }
    .info-item span { display: block; font-size: 14px; font-weight: 300; ; }
    .info-item-2 span { display: block; font-size: 14px; font-weight: 300; ; }
    .info-item-2 input[type=text] { width: 100%; height: 40px; display: block; border: 1px solid #c7c8c9; border-radius: 5px;  font-size: 16px; }

    .info-item-2 select{
        width: 33.33333%; height: 40px; display: block; border: 1px solid #c7c8c9; border-radius: 5px;  font-size: 16px;
    }
    .style5{
        height: 40px;
        line-height: 40px;
    }


    /* 기본 정보 세팅 input style */
    .info-item-set { padding: 0px; } 
    .set-item { margin-right: 30px; flex: 1 1 50%; padding: 0; }
    .set-item:last-child { margin-right: 0px; padding: 0;;}
    
    /* 설문 문항 input style */
    .survey-item { padding: 0px; }
    
    
    /* 개인정보 동의 style */
    .agree-item { padding: 0px; }

    .agree-chk-requ span {  font-size: 12px;  color: #0076ce; }
    .agree-chk-op1 span { font-size: 12px; }
    .agree-chk-op2 span { font-size: 12px; }

    
    /* submit button */
    .submit-btn { width: 100%; }
    
    
    /* 주소지 입력 input style */
    .form-item-adress span { padding-left: 0px; }
    
    .adress-item { width: 100%; padding: 0px; }
    .adress-item:last-child { margin-top: 0; }
    
    
    /* 파일 업로드 input style */
    .form-item-file { padding: 0px; }
    
    .file-title { width: 100%; margin-bottom: 10px; }
    
    .file-atten { width: 100%; text-align: left; }


    /* 등록 완료 화면 style */
    .wrapper-thanks { height: calc(100% - 425px); }

    .container-thanks { width: calc(100% - 40px); height: 100%; top: -125px; padding: 90px 20px; }

    .container-item { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }

    .item-svg svg { width: 90px; height: auto; }
    .item-des { margin-top: 13px; }
    .item-mail img { margin-left: 14px; margin-right: 5px; }
    .item-btn { width: 300px; }
    
}



@media all and (min-width:320px) and (max-width:539px) { 
    .btn-a{
        width: 80%;
    }
    .wrapper-logo { width: 100%; height: 60px; line-height: 60px; margin: 0 auto;  }
    .logo-left { padding: 20px 20px; }
    .main-title { height: 365px; }
    
    .main-title-info { width: calc(100% - 40px); height: 60px; line-height: 1; padding: 20px; }
    
    .form-title { width: 50%; display: block; float: left; color: white;  margin-bottom: 10px; height: 40px; }
    
    .form-atten { width: 50%; display: block; height: 40px; float: right; text-align: right; color: white;  word-break: keep-all; }
        
    .container-info { width: calc(100% - 40px); padding: 20px 20px 60px 20px; }
    
    .container-survey { width: calc(100% - 40px); padding: 60px 20px; }
    
    .container-agree { width: calc(100% - 40px); padding: 60px 20px; }
    
    .container-submit { width: calc(100% - 40px); padding: 0 20px; margin-bottom: 20px; }
    
    .form-side { display: none; }

    .form-side_2  { font-weight: bold; display: block; font-size: 20px; margin-bottom: 20px; border-bottom: 1px solid #C7C8C9; }
    
    .form-contents { width: 100%; }
    
    
    
    /* 기본 정보 input style */
    .info-item { flex: 100%; padding: 0px; }
    
      /* Phone Number Width */
      .info-item-2 { flex: 1 1 50%; height: 60px; padding: 0; margin-bottom: 30px; width: 100%;}
      .pnum-1{
          display: flex;
          justify-content: space-between;
      }
      .info-item span { display: block; font-size: 14px; font-weight: 300; ; }
      .info-item-2 span { display: block; font-size: 14px; font-weight: 300; ; }
      .info-item-2 input[type=text] { width: 100%; height: 40px; display: block; border: 1px solid #c7c8c9; border-radius: 5px;  font-size: 16px; }
  
      .info-item-2 select{
          width: 33.33333%; height: 40px; display: block; border: 1px solid #c7c8c9; border-radius: 5px;  font-size: 16px;
      }
      .style5{
          height: 40px;
          line-height: 40px;
      }
    /* 기본 정보 세팅 input style */
    .info-item-set { padding: 0px; } 
    .info-item-set { padding: 0px; } 
    .set-item { margin-right: 30px; flex: 1 1 50%; padding: 0; }
    .set-item:last-child { margin-right: 0px; padding: 0;;}
    
    /* 설문 문항 input style */
    .survey-item { padding: 0px; }

    #etc_input { width: 145px; }
    
    
    /* 개인정보 동의 style */
    .agree-item { padding: 0px; font-weight: bold;}

    .agree-chk-requ span {  font-size: 10px; color: #0076ce;  }
    .agree-chk-op1 span { font-size: 10px; }
    .agree-chk-op2 span { font-size: 10px;  line-height: 0; }

    .btn-area{
        height: 70px;
        line-height: 70px;
    }
    
    
    
    /* 주소지 입력 input style */
    .form-item-adress span { padding-left: 0px; }
    
    .adress-item { width: 100%; padding: 0px; }
    .adress-item:last-child { margin-top: 0; }
    
    
    /* 파일 업로드 input style */
    .form-item-file { padding: 0px; }
    
    .file-title { width: 100%; margin-bottom: 10px; }
    
    .file-atten { width: 100%; text-align: left; font-size: 11.5px; }


    /* 등록 완료 화면 style */
    .wrapper-thanks { height: 70%; }

    .container-thanks { width: calc(100% - 40px); height: 100%; top: -125px; padding: 90px 0px; }

    .container-item { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; padding: 0px 20px; }

    .item-svg svg { width: 90px; height: auto; }
    .item-des { margin-top: 13px; }
    .item-mail img { margin-left: 14px; margin-right: 5px; }
    .item-btn { width: 100%; }
    
}



@media all and (max-width:319px) {

    html{ display: none; }

}

.logo-left { width: 300px; float: left; text-align: left; }
.logo-right { width: 30%; float: right; text-align: right; }
.logo-left img, .logo-right img { max-width: 50%; vertical-align: middle; }

.main-title {margin: 0 auto;height: 580px; background-color: #fff ;;background-image: url(../images/reg_top.jpg); background-size: cover; }
.main-title-info { background-color: red; }


/* 설문 문항 input style */
.survey-item p { color: #005BE7; }


/* submit button */
.btn-area {
    /* background-color: rgb(0, 64, 74); */
    text-decoration: none;
    line-height: 60px;
    
 }


/* 주소지 입력 input style */
#postBtn { background-color: #005BE7; }


/* 파일 업로드 input style */
.file-btn label { background-color: #005BE7; }


/* 등록 완료 화면 style */
.item-tit { color: #005BE7; }
.item-btn { background-color: #005BE7; }


@media all and (min-width:540px) and (max-width:860px) { 
    .wrapper-logo{
        height: 80px;
    }        
    .main-title { height: 415px; background-image: url(../images/reg_top_m.jpg); background-size:cover;}   

    
    /* 설문 문항 input style */
    .survey-item p { color: #005BE7; }


    /* submit button */
    .btn-area {  background-color: rgb(0, 64, 74); width: 50%;}


    /* 주소지 입력 input style */
    #postBtn { background-color: #005BE7; }


    /* 파일 업로드 input style */
    .file-btn label { background-color: #005BE7; }


    /* 등록 완료 화면 style */
    .item-tit { color: #005BE7; }
    .item-btn { background-color: #005BE7; }
    

}

@media all and (min-width:320px) and (max-width:539px) { 
    .wrapper-logo{
        height: 70px;
        padding: 0;
    }  
    .main-title { height: 250px; background-image: url(../images/reg_top_m.jpg); background-size:cover; }   
    .main-title-info{
        position: absolute;
        top: 215px;
    }
    .wrapper-form{
        margin-top: 30px;
    }
    /* 설문 문항 input style */
    .survey-item p { color: #005BE7; }


    /* submit button */
    .btn-area {  background-color: rgb(0, 64, 74); width: 50%;}


    /* 주소지 입력 input style */
    #postBtn { background-color: #005BE7; }


    /* 파일 업로드 input style */
    .file-btn label { background-color: #005BE7; }


    /* 등록 완료 화면 style */
    .item-tit { color: #005BE7; }
    .item-btn { background-color: #005BE7; }
    

}