/* 공통 */
.ws-pre-line {
  white-space: pre-line;
}
input[type="text"].form-control,
input[type="password"].form-control {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
input[type="text"].form-control:focus,
input[type="password"].form-control:focus {
  border: 1px solid #1ec3cb;
}
ul,
li {
  list-style: none;
}

div.user {
  /* height: 100%; */
  display: flex;
}

.user > .d-flex {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  flex-direction: column !important;
}
.user .page {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  flex-direction: row !important;
}
.user .page .wrapper {
  display: flex;
  flex-direction: column !important;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  min-width: 0;
}
.user .page .wrapper .header {
  align-items: stretch !important;
  margin-bottom: 1.25rem !important;
}
.user .page .wrapper .header .container-xxl {
  display: flex;
  align-items: center;
}
.user .page .wrapper .header .container-xxl .header-logo {
  flex-grow: 1 !important;
  margin-right: 1.25rem !important;
}
.user .page .wrapper .header .container-xxl .header-logo a img {
  height: 45px;
}
.user .page .wrapper .header .container-xxl .infoBox {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.user .page .wrapper .header .container-xxl .infoBox .d-flex {
  align-items: center;
}
.user .page .wrapper .header .container-xxl .infoBox .d-flex .info label {
  color: #fff;
  font-weight: bold;
  line-height: 1;
  font-size: 1.075rem !important;
}
.user .page .wrapper .header .container-xxl .infoBox .d-flex .info label span {
  font-weight: 400;
}
.user .page .wrapper .header .container-xxl .infoBox .d-flex a {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.16) url("../img/logout_w.png") no-repeat 50%;
  margin-left:1rem;
}
.user .page .wrapper .page-title {
  display: flex;
  justify-content: space-between;
}

.user .page .wrapper .page-title h1 {
  color: #fff;
  font-weight: bold;
  font-size: 1.35rem !important;
  margin: 0.25rem 0;
}
.user .page .wrapper .page-title span.time {
  color: #fff;
  font-weight: bold;
  font-size: 1.25rem !important;
}
.user .page .wrapper .contents_section {
  display: flex;
  align-items: flex-start !important;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}
.user .page .wrapper .contents_section .content {
  min-width: 0;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
.user .page .wrapper .contents_section .content .card {
  margin-bottom: 1.25rem !important;
}
.user .page .wrapper .contents_section .content .card .card-title {
  margin: 0 !important;
}
.user .page .wrapper .contents_section .content .card .card-title h3 {
  font-weight: bold;
  margin: 0 !important;
}
.user
  .page
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  .question-box
  .title.essential::after {
  content: "*";
  color: #dc3545;
}

/* footer */
.user .page .wrapper .footer {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  padding: 1rem 0;
  background: url("../img/header-bg.jpg") no-repeat;
}
.user .page .wrapper .footer .container-xxl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user .page .wrapper .footer .container-xxl .btnBox a {
  color: #071437;
  font-weight: bold;
}

/* 로그인 */
.user.login {
  /* background:linear-gradient(to right, #425cc7,#1ec3cb)!important; */
  background: linear-gradient(to right, #1263cc, #12a495) !important;
}
.user.login .page .wrapper .contents_section {
  width: 100%;
  max-width: 40rem;
  justify-content: center;
  align-items: center !important;
}
.user.login .page .wrapper .contents_section .content .card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.25rem;
}
.user.login .page .wrapper .contents_section .content .card .card-body h1 {
  font-size: 2rem;
}
.user.login .page .wrapper .contents_section .content .card .card-body h1 img{
  width: 200px;
}
.user.login .page .wrapper .contents_section .content .card .card-body p {
  margin-top: 6rem;
  margin-bottom: 3rem;
  font-size: 1.1rem;
  color: #4b5675;
}
.user.login
  .page
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  .form-group
  .btnBox {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}
.user.login
  .page
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  .form-group
  button {
  min-width: 16rem;
  border-radius: 20px;
  background-color: #1ec3cb;
  color: #fff;
  font-weight: bold;
}
.user.login
  .page
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  .form-group
  button:hover {
  background: #189aa0;
}
.user.login .page .wrapper .footer {
  background: rgba(255, 255, 255, 0.16) !important;
}
.user.login .page .wrapper .footer ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}
.user.login .page .wrapper .footer ul li {
  color: #fff;
  font-weight: bold;
  margin-right: 2rem;
  position: relative;
}
.user.login .page .wrapper .footer ul li:after {
  content: "|";
  position: absolute;
  right: -1rem;
}
.user.login .page .wrapper .footer ul li:last-child:after {
  display: none;
}

/* 표지 */
.user.guide {
  /* background:linear-gradient(to right, #425cc7,#1ec3cb)!important; */
  background: linear-gradient(to right, #1263cc, #12a495) !important;
}
.user.guide
  .page.guide
  .wrapper
  .contents_section
  .card.survey-info
  .card-body
  ul {
  padding-left: 0;
}
.user.guide
  .page.guide
  .wrapper
  .contents_section
  .card.survey-info
  .card-body
  ul
  li {
  display: flex;
  font-size: 1.25rem;
  color: #4b5675;
  margin-bottom: 1rem;
}
.user.guide
  .page.guide
  .wrapper
  .contents_section
  .card.survey-info
  .card-body
  ul
  li
  .title {
  position: relative;
  padding-left: 20px;
  font-weight: bold;
  margin-right: 10px;
}
.user.guide
  .page.guide
  .wrapper
  .contents_section
  .card.survey-info
  .card-body
  ul
  li
  .title:before {
  content: "";
  position: absolute;
  top: 35%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #4b5675;
}
.user.guide
  .page.guide
  .wrapper
  .contents_section
  .card.survey-info
  .card-body
  ul
  li
  .bullet {
  background-color: #4b5675;
}
.user.guide .page.guide .wrapper .contents_section .btnBox {
  display: flex;
  justify-content: flex-end;
}
.user.guide .page.guide .wrapper .contents_section .btnBox a {
  font-weight: bold;
}

/* 유의사항 */
.user .page.notice .wrapper .contents_section .content .card .card-body {
  padding: 1rem 2.25rem !important;
}
.user .page.notice .wrapper .contents_section .content .card .card-body p {
  font-size: 1.15rem !important;
}

.user .page.notice .wrapper .footer .container-xxl {
  justify-content: flex-end;
}

/* 설문응답 - 공통 */
.user .page.survey .wrapper .page-title {
  margin-right: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}
.user .page.survey .wrapper .progressBar {
  display: flex;
  align-items: center;
  flex-direction: column !important;
}
.user .page.survey .wrapper .progressBar .status {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: auto !important;
  margin-bottom: 0.5rem !important;
}
.user .page.survey .wrapper .progressBar .status span {
  font-weight: bold;
  font-size: 1.075rem !important;
  color: #fff;
}
.user .page.survey .wrapper .progressBar .bar {
  width: 100%;
  height: 5px;
  background-color: #f9f9f9;
  margin-bottom: 0.75rem !important;
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}
.user .page.survey .wrapper .progressBar .bar > div {
  height: 5px;
  background-color: #1ec3cb;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  h3 {
  color: #1ec3cb;
  margin-bottom: 2rem !important;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  h3
  span {
  text-decoration: underline;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article {
  margin-bottom: 2rem;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article:last-child {
  margin-bottom: 0;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box {
  margin-left: 0;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box
  .title {
  font-weight: bold;
  font-size: 1.25rem !important;
}

/* 인구통계 페이지 */
.user
  .page.survey.statistics
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article {
  margin-bottom: 2rem;
}

/* 응답페이지 */
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article {
    margin-bottom: 2rem;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box
  .title {
    font-weight: bold;
    font-size: 1.15rem !important;
  }
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box
  .title.type2 {
    font-size: 1.25rem!important;
    margin-bottom:2rem;
  }
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box
  .form-group
  .form-check {
  margin-bottom: 1.5rem;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box
  .form-group
  .form-check
  label {
  color: #262626;
  cursor: pointer;
  font-size: 1.15rem;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box
  .form-group
  .form-check-input:checked {
  background-color: #1ec3cb;
  border-color: #1ec3cb;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box
  .form-group
  .form-check-input:checked
  + label {
  color: #071437;
  font-weight: bold;
}

/* 매트릭스 응답문항 */
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box.scale
  table,
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box.matrix
  table {
  border: 1px solid #dbdfe9;
  text-align: center;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box.scale
  table
  tr
  td
  .form-check,
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box.matrix
  table
  tr
  td
  .form-check {
  justify-content: center;
  margin-bottom: 0rem;
}

/* 순위 응답문항 */
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box.rank
  .form-group {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box.rank
  .form-group
  .d-flex {
  align-items: center;
}

.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box.rank
  .form-group
  .d-flex
  .badge {
  min-width: calc(1.5em + 1.1rem + 2px);
  height: calc(1.5em + 1.1rem + 2px);
  font-size: 1rem;
  margin-left: 1rem;
  margin-right: 0.5rem;
}
.user
  .page.survey
  .wrapper
  .contents_section
  .content
  .card
  .card-body
  section
  article
  .question-box.rank
  .form-group
  .d-flex
  .form-control {
  margin-bottom: 0;
  padding: 0.6rem 1rem;
}

/* 7점 척도 */
.user 
  .page.survey
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale {
  display: flex;
  align-items: center;
  justify-content: center;
}
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group {
    max-width: 70rem;
  }
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul {
  display: flex;
  justify-content: space-between;
  padding-left: 0;
}
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul.labels 
  li 
  span {
  display: inline-flex;
  align-items: center;
  line-height: 46px;
  font-weight: 700;
}
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul.labels 
  li 
  span 
  i {
  display: inline-flex;
}
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul.d-flex 
  li{
  width: calc(100% / 7 - 0.6rem);
}
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul 
  li 
  input[type='radio'] {
    appearance: none;
  }
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul 
  li 
  label{
  position: relative;
  width: 100%;
  background-color: #DBDFE9;
  font-size: 46px;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
}
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul 
  li 
  label:hover{
    background-color:#99A1B7;
  }
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul 
  li:first-child 
  label{
  border-top-left-radius: 30%;
  border-bottom-left-radius: 30%;
}
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul 
  li:last-child 
  label{
  border-top-right-radius: 30%;
  border-bottom-right-radius: 30%;
  margin-right: 0;
}
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul 
  li
  label:after {
    display:none;
    content:'';
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #7239EA;
    position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
  }
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul 
  li 
  input[type='radio'] {
    appearance: none;
  }
.user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul 
  li 
  input[type='radio']:checked + label:after{
  display: inline-block;
}

/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/ 
@media all and (min-width:1024px) and (max-width:1279px) { 
  .user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul 
  li
  label:after {
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
  }
} 

/* 테블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) { 
  .user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul 
  li
  label:after {
    width: 53px;
    height: 53px;
    margin-top: -26px;
    margin-left: -26px;
  }
} 

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (min-width:480px) and (max-width:767px) {
  .user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul 
  li
  label:after {
    width: 45px;
    height: 45px;
    margin-top: -22px;
    margin-left: -22px;
  }
} 

/* 모바일 세로 (해상도 ~ 479px)*/ 
@media all and (max-width:479px) {
  .user 
  .page.survey 
  .wrapper 
  .contents_section 
  .content 
  .card 
  .card-body 
  section 
  article 
  .question-box.seven-scale 
  .form-group 
  ul 
  li
  label:after {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
  }
}