#modal-emoticon-survey {--width: 1200px;}
/* body.dev #modal-emoticon-survey {opacity: 1; display: flex; pointer-events: initial;} */
#modal-emoticon-survey.modal .container .head {background: transparent; padding-bottom: 10px;}
#modal-emoticon-survey .container .content {padding-bottom: 30px;}

#esv {}
.esv-head {display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 15px; padding-inline: 38px; border-bottom: 4px solid #E3E3E3; position: relative;}
.esv-head .subject {padding-left: 52px;}
.esv-head .subject .logo {margin-left: -52px; width: 205px;}
.esv-head .subject .txt {display: block; font-size: 40px; font-weight: 800; color: var(--dark-navy); line-height: 1.7;}
.esv-head .emoticon {position: absolute; right: 90px; bottom: 0;}

.esv-body {padding: 53px 38px 0 38px;}

.esv-form-page {display: none;}
.esv-form-page.active {display: block;}

.esv-form-page-head {margin-bottom: 15px;}
.esv-form-page-head .title {font-size: 28px; font-weight: 700; color: var(--primary);}
.esv-form-page-head .title small {color: var(--gray-dark); font-size: 17px; font-weight: 400; display: inline-block; margin-left: 0.5em;}

.esv-form-page-body {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.esv-form-page-body .plx-inp-box .plx-inp-tit small {color: var(--gray-dark); font-size: 17px; font-weight: 400; display: inline-block; margin-left: 0.5em;}
.esv-form-page-body .plx-inp-box.full {grid-column:  span 2;}
.esv-form-page-body .plx-inp-box.type2 {background: #F1F1F1; border-radius: 5px; padding-left: 20px;}
.esv-form-page-body .plx-inp-box.type2 .plx-inp-tit {width: 80px;}
.esv-form-page-body .plx-inp-box.type2 .inp {padding-left: 0;}
.esv-form-page-body .plx-inp-box.type3 {display: flex; gap: 20px; align-items: flex-start; border-top: 1px solid #E3E3E3; padding-top: 20px;}
.esv-form-page-body .plx-inp-box.type3 .plx-inp-tit {width: 136px; height: auto; margin-top: -0.2em;}
.esv-form-page-body .plx-inp-box.type3 .inp-container {width: 100%;}
.esv-form-page-body .plx-inp-box.type4 {display: block; border-top: 1px solid #E3E3E3; padding-top: 20px;}
.esv-form-page-body .plx-inp-box.type4 .plx-inp-tit {width: 100%; height: auto; margin-bottom: 0.5em;}
.esv-form-page-body .plx-inp-box.type4 .inp-container {width: 100%;}
.esv-form-page-body .etc-inp-wrap {margin-top: 20px;}

.esv-form-page-body .doc-box .doc {background: #f1f1f1; border-radius: 5px; padding: 30px;}
.esv-form-page-body .doc-box .plx-checkbox {margin-top: 15px;}

.esv-form-page .agreebox { margin-top: 30px; border-top: 4px solid #E3E3E3; width: calc(100% + 76px); margin-left: -38px; padding-inline: 38px; padding-top: 20px;}

.esv-form-page-foot {display: flex; justify-content: center; margin-top: 35px; gap: 20px;}
.esv-form-page-foot button {gap: .8em; font-size: 20px;}
.esv-form-page-foot button:disabled {pointer-events: none; opacity: .5;}
.esv-form-page-foot button.next {padding-right: 0.8em;}
.esv-form-page-foot button.prev {--bg: var(--gray-dark); color: #fff; padding-left: 0.8em;}


.esv-form-page .sv-position .checkbox-group {display: grid; grid-template-columns: repeat(6, 1fr);}
.esv-form-page .sv-emoticon-lang .checkbox-group {gap: 25px; align-items: center;}
.esv-form-page .sv-emoticon-lang .checkbox-group .note {color: var(--gray-dark);}

.esv-form-page .svq-3-1 .checkbox-group {gap: 15px;}

@media screen and (max-width: 1399px) {
  #modal-emoticon-survey {--width: 720px; padding: 30px 0;}
  #modal-emoticon-survey.modal .container .head {background: #fff;}
  #modal-emoticon-survey .container .content {padding-bottom: 80px;}

  .esv-head {padding-inline: 0;}
  .esv-head .subject {padding-left: 39px;}
  .esv-head .subject .logo {width: 150px; margin-left: -39px;}
  .esv-head .subject .txt {font-size: 24px;}
  .esv-head .emoticon {width: 110px; right: 50px;}
  .esv-form-page-head .title {font-size: 22px;}
  .esv-form-page-head .title small {margin-left: 0; display: block;}
  .esv-body {padding-inline: 0; padding-top: 30px;}
  .esv-form-page-body {grid-template-columns: repeat(1, 1fr);}
  .esv-form-page-body .plx-inp-box.full {grid-column: span 1;}
  .esv-form-page-body .plx-inp-box.type3 {display: block;}
  .esv-form-page-body .plx-inp-box.type3 .plx-inp-tit {width: 100%; margin-bottom: 0.8em;}
  .esv-form-page-body .plx-inp-box .plx-inp-tit small {font-size: 14px; margin-left: 0;}
  .esv-form-page-body .plx-inp-box.type4 .plx-inp-tit {margin-bottom: 0.8em; flex-wrap: wrap;}
  .esv-form-page-body .doc-box .doc {padding: 20px;}
  .esv-form-page .agreebox {width: 100%; padding-inline: 0; margin-left: 0; flex-direction: column;}

  .esv-form-page .sv-position .checkbox-group {grid-template-columns: repeat(4, 1fr);}
  .esv-form-page .sv-2-1 .checkbox-group .note {width: 100%;}
}
@media screen and (max-width: 767px) {
  .esv-head .subject {padding-left: 30px;}
  .esv-head .subject .logo {width: 120px; margin-left: -30px;}
  .esv-head .subject .txt {font-size: 20px;}
  .esv-head .emoticon {width: 90px; right: 10px;}
  .esv-form-page-head .title {font-size: 18px;}

  .esv-form-page-body .plx-inp-box.type2 {background: none; padding-left: 0;}
  .esv-form-page-body .plx-inp-box.type2 .inp {padding-left: 20px;}
  .esv-form-page-head .title small {font-size: 15px;}

  .esv-form-page-foot {gap: 15px;}
  .esv-form-page-foot button {font-size: 15px; height: 40px;}
  .esv-form-page-foot button svg {width: 14px;}

  .esv-form-page .sv-position .checkbox-group {display: flex; flex-wrap: wrap;}
}