@import url(common.css);

#wrap{
  position: relative;
  width:100%;
  max-width:100%;
  overflow: hidden;
}

.inner { max-width: 1200px; margin: 0 auto;}

div.sec{
  position: relative;
  width:100%;
  max-width:100%;
  overflow: hidden;
}
div.sec [class^=img-] { width: 100%; max-width: 100%;}
.img-mo { display: none;}
div.sec [class^=img-] img { width:100%;max-width:100%;}

.sec.faq { padding: 30px 0 120px; background: #eee;}

.sec.faq .title { font-size: 36px; text-align: center; margin-bottom: 60px;}

.faq-list { width: 1000px; margin: 0 auto;}
.faq-list .faq-item + .faq-item { margin-top: 20px;}
.faq-item { background: #fff; padding: 30px 40px; border-radius: 15px; cursor: pointer;}
.faq-item .question { display: flex; align-items: center; justify-content: space-between;}
.faq-item .question p { font-size: 24px;}
.faq-item .question p span { color: #7959e0; margin-right: 8px;}
.faq-item .question p span:nth-child(2) { display: none;}

.faq-item.active .question p { color: #7959e0;}
.faq-item.active .question p span:nth-child(1) { display: none;}
.faq-item.active .question p span:nth-child(2) { display: inline;}

.faq-item .question .btn { 
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 30px;
  width: 120px;
  height: 40px;
  font-size: 18px;
  background: #7959e0;
  box-shadow: 1px 2px 10px #7959e0;
}
.faq-item .question .btn span:nth-child(2) { display: none;}

.faq-item.active .question .btn { background: #666; box-shadow: 1px 2px 10px #666;}
.faq-item.active .question .btn span:nth-child(1) { display: none;}
.faq-item.active .question .btn span:nth-child(2) { display: inherit;}

.faq-item .answer { display: none;}
.faq-item.active .answer { 
  display: block;
  height: auto;
  color: #666;
  text-align: left;
  font-size: 20px;
  line-height: 34px;
  margin-top: 20px;
  padding-left: 40px;
  /* transition: all .2s; */
}

.sec.join { position: relative; padding: 120px 0; background: #fff; text-align: center;}
/* .sec.join::after { content: ''; position: absolute; width: 100%; height: 200px; background: #d5645d; bottom: 0; left: 0;} */
.join-box{
  position: relative;
  width:680px;
  padding:120px 0;   
  background: #fff;
  margin:0 auto;
  box-shadow: 0px 0px 40px #b9b9b9;
  z-index: 5;
}
legend{
  padding-top:0px;
  font-weight: 600;
  font-size:2.5rem;
  letter-spacing: -1px;
  line-height: 60px;
}
.form-sub{
  font-size:1.250rem;
  margin-top:20px;
  line-height: 30px;
}
.red{
  color:#a20016;
  font-weight: 800;
}
#NAME{
  border:1px solid #bebebe;
  box-sizing: border-box;
  width:480px;
  height:60px;
  margin:0px auto;
  margin-top:20px;
  margin-bottom:20px;
  font-size: 1rem;
}
#NAME2{
  border:1px solid #bebebe;
  box-sizing: border-box;
  width:230px;
  height:60px;
  margin:0px auto;
  margin-top:20px;
  margin-bottom:20px;
  font-size: 1rem;
}
#NAME4{
  border:1px solid #bebebe;
  box-sizing: border-box;
  width:480px;
  height:60px;
  margin:0px auto;
  margin-top:20px;
  margin-bottom:20px;
  font-size: 1rem;
}
select{
  border:1px solid #bebebe;
  box-sizing: border-box;
  width:100px;
  text-align: center;
  height: 60px;
  font-size: 1rem;
}

.option-box{
  width:73%;
  max-width:73%;
  margin:0 auto;
}
.option-box:after{ display:block; content:''; clear:both;}
.select2{
  width:50%;
  float:left;
  /* background: #222; */
}
.select2:after{display:block; content:''; clear:both;}
#HP2{
  border:1px solid #bebebe;
  box-sizing: border-box;
  width:185px;
  height: 60px;
  font-size: 1rem;
}
#HP3{
  border:1px solid #bebebe;
  box-sizing: border-box;
  width:185px;
  height: 60px;
  font-size: 1rem;
}
input::placeholder{
  padding-left: 15px;
}
.agree-box{
  width:480px;
  margin:0 auto;
  text-align: left;
  margin-top:25px;
}
.agree-box label { margin-top: 20px; font-size: 14px; color: #666; font-weight: normal;}

.formRight{
  width:480px;
  margin:0 auto;
  margin-top:25px;
  background: #d5645d;
  border: 0;
  color:#fff;
  font-weight: 500;
  font-size:1.725rem;
}
.formRight a { 
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 퀵상담 */
.form-box2{
  width:1200px;
  height:130px;
  margin:0 auto;
}
.quick_bottom_wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:99;
  box-sizing:border-box;
  background: #eee;
  border-top: 1px solid #dedede;
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3);
}

.quick_bottom_wrap .title-box { display: none;}

.quick_bottom_wrap .form-box2 {
  display: flex;
  max-width: 1200px;
  width: auto;
  height: auto;
  padding: 20px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.q-left { width: 25%;}
.quick_form{
  width:100%;
  margin:0 auto;
  position:relative;
  box-sizing:border-box;
}
.quick_form:after{display:block; content:''; clear:both;}
.quick_form input[type="text"],
.quick_form input[type="password"],
.quick_form select {
  border:none; height:40px;
  box-sizing:border-box;
  padding:3px;
  vertical-align:middle;
}
.quick_form .form-agree{
  color:#fff;
  font-size: 14px;
}
.quick_form .form-agree a{color:#000; font-weight:bold; text-decoration:underline;}

.quick_form .form-agree1{color:#fff; /*padding:0 10px;*/position: relative;top: 12px;}
.quick_form .form-agree1 a{color:#fff; font-weight:bold; text-decoration:underline;}

.form-title{float:left; padding:39px 26px 20px 19px; line-height:40px; color:#fff; font-size:20px; font-weight:bold;}
.form-input{ width: 50%;}
.form-input::after { content: ''; display: block; clear: both;}
.form-input .form-name,
.form-input .form-pass { float: left; width: calc((100% - 5px) / 2);}
.form-input .form-pass { margin-left: 5px;}
.form-command{
  width:15%;
}
.form-command button{width:100%; height:80px; background: #da2626; color:#fff; font-size:20px; border:none; text-align: center;}

input:focus {outline:none;}
#q-NAME{
  width:100%;
  height:53px;
}
#hp{
  width:100%;
  height:53px;
}
.row{
  display: block;
  padding-top: 15px;
  clear: both;
}
.row label { display: inline-block;}

.footer { background: #333; padding: 60px 0; color: #fff;}
.footer .company-info { display: flex; align-items: center; justify-content: center;}
.footer .company-info .info { width: 800px; margin-left: 30px;}
.footer .company-info .info .text span{ display: block; font-size: 16px;}
.footer .company-info .info .text span + span { margin-top: 3px;}
.footer .company-info .info .company { margin-top: 20px;}
.footer .company-info .info .company .info-text { display: inline-block; margin-top: 4px; font-size: 14px; line-height: 20px; vertical-align: top;}
.footer .company-info .info .company .gap { content: ""; display: inline-block; width: 1px; height: 10px; margin: 7px 4px 0; background-color: #d5d5d5; vertical-align: top;}

/*result*/
.result{width:100%;max-width:100%;height:100vh;}
.result img{width:100%;max-width:100%;}

@media (max-width:1080px) {
  .sec.faq .title { font-size: 28px;}

  .faq-list { width: 100%; padding: 0 20px; margin: 0; box-sizing: border-box;}
}

@media (max-width:940px) {
  .footer { padding: 40px 0;}
  .footer .logo { display: none;}

  .footer .company-info { display: flex; align-items: center; justify-content: center;}
  .footer .company-info .info { width: auto; margin-left: 0;}
  .footer .company-info .info .text span{ display: block; font-size: 14px;}
  .footer .company-info .info .text span + span { margin-top: 2px;}
}

@media (max-width:780px) {

  .sec.faq { margin-top: -2px; padding: 0 0 80px;}

  .sec.faq .title { font-size: 22px; margin-bottom: 40px;}

  .faq-list .faq-item + .faq-item { margin-top: 30px;}
  .faq-item { padding: 20px 10px;}
  .faq-item .question p { font-size: 16px;}
  .faq-item .question p span { margin-right: 0;}

  .faq-item .question { flex-direction: column;}

  .faq-item .question .btn { 
    width: 70px;
    height: 30px;
    font-size: 12px;
    margin-top: 8px;
  }

  .faq-item.active .answer { 
    font-size: 12px;
    line-height: 22px;
    padding-left: 0;
  }
}

@media (max-width:720px) { 
  .img-pc { display: none;}
  .img-mo { display: block;}

  .sec.join { padding: 80px 0;}
  /* .sec.join::after { height: 150px; background: #d5645d;} */
  .join-box{
    width:90%;
    max-width:90%;
    padding:60px 0;
    box-shadow: 0px 0px 20px #b9b9b9;
  }
  .formBox{
    width:90%;
    max-width:90%;
    margin:0 auto;
  }
  legend{
    font-size:1.3rem;
    line-height: 32px;
  }
  .form-sub{
    font-size:1rem;
    margin-top:10px;
    line-height: 26px;
  }
  #NAME{
    width:100%;
    max-width:100%;
    height:65px;
    margin-bottom: 10px;
  }
  select{
    width:30%;
    max-width:30%;
    text-align: center;
    height: 65px;
    font-size: 1rem;
  }
  .option-box{
    width:100%;
    max-width:100%;
  }
  .select2{
    width:100%;
    float:left;
    /* background: #222; */
    /* background: #222; */
  }
  .select3{
    width:100%;
    float:left;
    /* background: #222; */
    /* background: #222; */
  }
  #NAME2{
    border:1px solid #bebebe;
    box-sizing: border-box;
    width:100%;
    max-width:100%;
    height:60px;
    margin:0px auto;
    margin-top:20px;
    margin-bottom:20px;
    font-size: 1rem;
  }
  #NAME4{
    border:1px solid #bebebe;
    box-sizing: border-box;
    width:100%;
    max-width:100%;
    height:60px;
    margin:0px auto;
    margin-top:20px;
    margin-bottom:20px;
    font-size: 1rem;
  }
  #HP2{
    border:1px solid #bebebe;
    width:33.33%;
    max-width:33.33%;
    height: 65px;
    font-size: 1rem;
  }
  #HP3{
    width:33.33%;
    max-width:33.33%;
    height: 65px;
    font-size: 1rem;
  }
  input::placeholder{
    padding-left: 15px;
  }
  .agree-box{
    width:100%;
    max-width:100%;
    font-size: 0.7rem;
    margin:0 auto;
    text-align: left;
    margin-top:15px;
  }
  .agree-box label { font-size: 12px;}
  .agree-box a { display: inline-block; margin-top: 3px;}
  .formRight{
    width:100%;
    max-width:100%;
    margin:0 auto;
    margin-top:20px;
    background: #7959e0;
    color:#fff;
    font-size:1.125rem;
  }
  

  .quick_bottom_wrap { padding: 10px 20px;}
  .quick_bottom_wrap .title-box { display: block; font-size: 16px; color: #000; margin-bottom: 9px; text-align: center;}
  .quick_bottom_wrap .title-box .purple { color: #7959e0;}
  .quick_bottom_wrap .title-box .pink { color: #d5645d;}
  .quick_bottom_wrap .title-box .skyblue { color: #16bdf0;}
  .quick_bottom_wrap .form-box2 { padding: 0; align-items: flex-start;}

  .q-left { display: none;}
  .form-input { width: 70%;}
  .form-input .form-name,
  .form-input .form-pass { width: 100%;}
  .form-input .form-pass { margin-left: 0; margin-top: 5px;}
  .form-command { width: 25%;}
  .form-command button{ font-size:12px; height: 77px;}

  #q-NAME{
    width:100%;
    height:36px;
    font-size: 12px;
  }
  #hp{
    width:100%;
    height:36px;
    font-size: 12px;
  }
  .quick_form .form-agree{
    font-size: 10px;
  }
  .row { padding-top: 5px;}
  .quick_form .form-agree a {
    display: inline-block;
    margin-left: 5px;
  }

  .footer .company-info { padding: 0 20px;}

  .footer .company-info .info .company { margin-top: 20px;}
  .footer .company-info .info .company .info-text { display: block; font-size: 13px;}
  .footer .company-info .info .company .gap { display: none;}
}