* {
  box-sizing: border-box;
}

input[type=number] {
  border: 1px solid;
  border-color: #d8d8d8;
  margin: 0;
  padding: 2px;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

.loginWrap .info_form input[type=email] {
  padding: 0 3%;
  width: 94%;
  height: 50px;
  line-height: 50px;
  color: #bbb;
  text-align: left;
  border: 0;
  margin: 0;
}

.loginWrap .info_form input[type=text], .loginWrap .info_form input[type=password], .loginWrap .info_form input[type=email] {
  padding: 0 3%;
  width: 100%;
}

input[type=text], input[type=password], input[type=email], input[type=number] {
  border-radius: 5px;
}

#bglayer, #findlayerbglayer {
  background-color: #000;
  opacity: .7;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none
}

#topmessage, {
  position: fixed;
  bottom: 20px;
  height: 20px;
  line-height: 20px;
  width: 50px;
  right: 5px;
  z-index: 10001;
  background-color: #0094ff;
  color: #ffd800;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  display: none;
  opacity: .6
}

#layermessage {
  position: fixed;
  line-height: 20px;
  z-index: 10001;
  font-weight: bold;
  border-radius: 5px;
  display: none;
  text-align: center;
  padding: 30px;
  background-color: #ededed;
  color: #002c5a;
  border: 1px solid #fff;
  max-height: 80%;
  overflow: auto;
  max-width: 700px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-25%,-25%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  min-width: 500px;
}

  #layermessage div {
      word-break: break-word
  }

.mainokbutton {
  color: #fff;
  background-color: #002c5d;
  padding: 7px 40px;
  border-radius: 15px;
  font-weight: bold;
  font-size: 15px;
}

a.mainokbutton:visited, a.mainokbutton:link {
  color: #fff;
}

#bgprogress {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 15px;
  line-height: 15px;
  z-index: 10001;
  color: #fff;
  text-align: center;
  display: none;
  opacity: .7;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
  transition: width .6s ease;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-size: 15px 15px;
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
  background-color: #d9534f;
  /*background-color: #428bca;*/
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.btn {
  font-weight: bold;
  border-radius: 2px;
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  box-sizing: border-box
}

.btn-primary {
  color: #fff !important;
  background-color: #65bd77;
  border-color: #65bd77
}

ul.ex_list li.possible {
  cursor: pointer
}

ul.ex_list li.notpossible {
  background-color: #eee;
  cursor: pointer
}

ul.ex_list li.notpossible {
  background-color: #ddd
}

.text-center {
  text-align: center
}

.consBox .qbox {
  border: 1px solid #cbcbcb;
  padding: 5px;
  margin-bottom: 10px
}

  .consBox .qbox .quest {
      padding-left: 10px
  }

.list_2 li {
  padding-left: 10px
}

  .list_2 li .cons img {
      max-width: 460px
  }

.btnhide {
  opacity: .1;
  cursor: default
}

.answer input[type=text] {
  height: 50px;
  line-height: 50px;
  width: 100%;
  border: 1px solid red;
  margin-top: 10px;
  padding: 0 10px
}

.container_test .consBox .answer textarea {
  width: 100%;
  font-size: 14px;
  font-family: AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
}

.dpop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 500;
  opacity: 0.7;
  box-sizing: border-box;
  display: none;
}

  .dpop * {
      box-sizing: border-box;
  }

  .dpop h3 {
      font-weight: bold;
  }

.dpopback {
  background-color: #000;
}

.dpopbox {
  opacity: 1;
  max-width: 100%;
}

.dpopcontent {
  margin: 0 auto;
  max-width: 90%;
  max-height: 80%;
  overflow: auto;
  background-color: #fff;
  border-radius: 10px;
  width: 500px;
  color: #333;
  margin-top: 15%;
  padding: 30px;
}

  .dpopcontent h2, .dpopcontent h3, .dpopcontent h4 {
      margin: 20px 0;
  }

  .dpopcontent p {
      text-align: left;
  }

input.newtxt {
  padding: 0 20px;
  width: 100%;
  height: 45px;
  line-height: 40px;
  color: #bbb;
  text-align: left;
  font-size: 16px;
}

  input.newtxt::placeholder {
      font-size: 16px
  }

input.newtxt2 {
  padding: 0 10px;
  width: 100%;
  height: 35px;
  line-height: 30px;
  color: #bbb;
  text-align: left;
  font-size: 14px;
}

  input.newtxt2::placeholder {
      font-size: 14px
  }

.boxinp {
  margin-top: 4px
}

#confirmbox, #confirmbox * {
  box-sizing: border-box
}

#confirmbox {
  position: fixed;
  bottom: 30%;
  text-align: center;
  width: 100%;
  line-height: 50px;
  font-size: 18px;
  z-index: 3000;
  padding: 40px 20%;
  display: none;
}

#confirmboxmsg {
  font-size: 15px;
  font-weight: bold;
  color: #002c5a;
  background-color: #ededed;
  border-radius: 5px;
  margin-bottom: 0px;
  padding: 20px 20px;
  word-break: break-word;
  line-height: 35px;
  letter-spacing: -0.5px;
}

.confirmbtnbox {
  background-color: #ededed;
  padding-bottom: 25px;
  border-radius: 5px;
  margin-top: -7px;
  white-space: nowrap;
}

.btnnew {
  border-radius: 15px;
  margin-left: 10px;
  font-weight: bold;
  font-size: 15px;
}

.btn1 {
  background-color: #002c5d;
  padding: 7px 40px;
  color: #fff;
}

  .btn1:link, .btn1:active, .btn1:visited {
      color: #fff;
  }

  .btn1:hover, .btn1:focus {
      background-color: #144d89
  }

.btn0 {
  background-color: #999;
  padding: 7px 27px;
  color: #fff;
}

  .btn0:link, .btn0:active, .btn0:visited {
      color: #fff;
  }

  .btn0:hover, btn0:focus {
      background-color: #aaa
  }

.btndft {
  border-radius: 3px;
  margin-left: 5px;
  font-size: 14px;
  background-color: #fff;
  padding: 7px 10px;
  color: #002c5d;
  border: 1px solid #4c6b8d;
  vertical-align: middle;
}

  .btndft:link, .btndft:active, .btndft:visited {
      color: #002c5d
  }

  .btndft:hover, .btndft:focus {
      background-color: #fefefe
  }

table.board_view td input {
  height: 30px;
  padding: 0 10px;
}

.bggray {
  background-color: #e9e9e9;
  padding: 15px 10px;
  border-radius: 5px;
}

.bold {
  font-weight: bold;
}

.left {
  text-align: left;
}

.center, input.newtxt2.center {
  text-align: center;
}

.border1 {
  border: 1px solid #ccc;
}

.footerWrap {
  font-size: 11px
}

.lighta, .loginWrap .info_form .btn button.lighta {
  background-color: #fff;
  color: #999;
  font-size: 13px;
  border: 1px solid #eee;
  height: 30px;
  line-height: 30px;
  font-weight: normal;
}

.btnnavi {
  border: 1px solid #dadada;
  font-size: 18px;
  font-weight: bold;
  padding: 2px 5px;
  z-index: 2;
  position: fixed;
  bottom: 2px;
  line-height: 25px;
  border-radius: 5px;
  display: none;
}

.ismobile .btnnavi {
  display: block;
}

.btnnaviback {
  left: 4px;
}

.btnnavitop {
  right: 4px;
}

button, .button {
  border-radius: 5px;
}

.smallfont b {
  color: red;
  text-decoration: underline;
}

.fixbot {
  position: fixed;
  bottom: 35px;
  text-align: center;
  width: 100%;
  left: 0;
  padding: 5px 5px;
  background-color: #fff;
  text-align: center;
}

  .fixbot .button {
      max-width: 800px;
      margin: 0 auto;
  }

.inlinebtn {
  display: inline-block;
}

.consTop_msg .cons {
  width: 800px;
}

.header_test .cons {
  width: 800px;
  max-width: 100%;
}

.consTop_time .cons .tit {
  background: url(/image/ico_1.png) left center no-repeat;
  background-size: auto 25px;
  padding-left: 30px;
  line-height: 25px;
  height: 25px;
  margin-bottom: 5px;
  font-weight: bold;
}
/*.userinfo{float: left; line-height: 40px; color: #fff; font-size: 15px; margin-left: 20px;}*/
.consTop_msg .cons .tit.tit2 {
  font-size: 14px;
}

.now {
  float: right;
  font-weight: normal;
}

#now {
  font-weight: normal !important;
}

.consTop_time {
  padding: 15px 0 10px;
}

  .consTop_time .cons {
      text-align: left;
  }

      .consTop_time .cons strong {
          font-weight: normal;
      }

      .consTop_msg .cons .tit.tit2, .consTop_time .cons .tit.tit2 {
          white-space: nowrap;
          overflow: hidden;
      }

.evboxqs {
  font-size: 20px;
  margin-top: 20px;
  padding: 5px;
}

  .evboxqs .qnum {
      background-color: #ff8400;
      color: #fff;
      padding: 2px 8px;
      font-weight: 900;
  }

  .evboxqs .qnp {
      font-size: 13px;
  }

.consBox .qbox {
  border: 0 none;
  padding: 5px;
  margin-bottom: 25px;
}

  .consBox .qbox .quest {
      padding: 15px 10px;
  }

.container_test .consBox .quest {
  margin-bottom: 15px;
  font-weight: bold;
  color: #666;
  font-size: 18px;
  border: 1px solid #bbb;
  line-height: 27px;
}

.container_test .consBox .list_2 li {
  margin-bottom: 2px;
  padding: 7px;
  background-color: transparent;
  border-bottom: 0 none;
}

.button.blue.red, .red {
  color: red !important;
}

a:focus {
  outline: none;
}

input[type=text]:focus, input[type=password]:focus, input[type=number]:focus {
  outline-color: #0094ff
}

@media (max-width:800px) {
  #confirmbox {
      padding: 40px 5%;
  }
  /*.gnb{margin: 0 5px;}*/
  /*#wrap{padding: 0 5px;}*/
  #layermessage {
      max-height: 80%;
      max-width: 96%;
      padding: 15px;
      min-width: 86%;
  }

  .consTop_msg {
      display: block
  }

      .consTop_msg .cons {
          max-width: 100%;
          padding: 0 10px
      }
}

@media (min-width: 801px) {
  .header, .container, .container_test {
      width: 800px;
  }

  .consTop_time .cons {
      width: 800px;
  }
}

@media only screen and (min-width: 801px) {
  .header_test h1.test {
      width: 800px;
  }
}

@media (max-width:600px) {
  #confirmbox {
      padding: 40px 5%;
      bottom: 15%;
  }

  .dpopcont {
      padding: 10px;
      font-size: 12px;
      line-height: 150px;
  }

  .dpopcontent {
      max-height: 90%;
      margin-top: 10%;
      padding: 10px;
  }

  .bggray {
      padding: 10px;
  }

  .dpopcontent h2, .dpopcontent h3, .dpopcontent h4 {
      margin: 10px 0;
  }

  .guideinfo {
      font-size: 14px;
      line-height: 18px;
      margin-bottom: 5px;
  }

  .container_test {
      padding: 5px 5px 0;
  }

  #confirmboxmsg {
      line-height: 25px;
  }

  .loginWrap > h1 {
      margin-top: 40px;
      padding: 50px 0 20px;
      font-size: 18px;
  }

  .loginWrap .info_form {
      width: 88%;
  }

  .smallfont {
      font-size: 12px;
      letter-spacing: -1px;
  }

  #layermessage div {
      font-size: 15px;
  }

  #confirmboxmsg {
      font-size: 16px;
  }
}

@media (max-width:500px) {
  .header > h1 {
      font-size: 15px;
  }

  #confirmbox {
      bottom: 10%;
  }

  .m500db {
      display: block
  }
}

@media (max-width: 400px) {
  .consTop_msg .cons .tit.tit2 .nid, .consTop_time .cons .tit.tit2 .nid {
      max-width: 140px;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
}

@media (max-width: 320px) {
  .consTop_msg .cons .tit.tit2 .nid, .consTop_time .cons .tit.tit2 .nid {
      max-width: 85px;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
}

.viewport.marynyoung {
  height: 100%;
}
.viewport.marynyoung .off-canvas {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  height: 100%;
  font-family: 'Roboto', sans-serif;

}
.viewport.marynyoung .off-canvas .btn_menu {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -100px;
  padding: 21px 0;
  width: 200px;
  height: 76px;
  text-align: center;
  z-index: 100;
}
.viewport.marynyoung .off-canvas .btn_menu button {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 0 26px 0 15px;
  width: auto;
  height: 34px;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-image: none;
  background-color: #1e1e1e;
  cursor: pointer;
}
.viewport.marynyoung .off-canvas .btn_menu button::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 14px;
  margin: -1px -3px 0 -3px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.viewport.marynyoung.move-right .off-canvas .btn_menu button::after {
  margin-top: -5px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.viewport.marynyoung .off-canvas .off-canvas-nav {
  display: none;
  top: unset;
  right: unset;
  bottom: 58px;
  left: 50%;
  margin-left: -245px;
  width: 490px;
  background-color: transparent;
  overflow: unset;
  opacity: 0;
  -webkit-transform: translateY(-3px);
  -moz-transform: translateY(-3px);
  -o-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
}
.viewport.marynyoung.move-right .off-canvas .off-canvas-nav {
  display: block;
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
}
.viewport.marynyoung .off-canvas .off-canvas-nav .nav-arrow {
  position: relative;
  height: 24px;
  overflow: hidden;
}
.viewport.marynyoung .off-canvas .off-canvas-nav .nav-arrow::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  margin: -17px;
  width: 34px;
  height: 34px;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0px 0px 4px -2px rgba(0,0,0,0.3);
}
.viewport.marynyoung .off-canvas .off-canvas-nav .global-nav .top {
  padding: 0 64px;
  font-weight: bold;
  line-height: 22px;
  letter-spacing: -.02em;
  color: #1e1e1e;
  text-align: center;
  word-break: break-word;
  background-color: transparent;
}
.viewport.marynyoung .off-canvas .off-canvas-nav .global-nav .top .btn_close {
  top: 50%;
  right: 32px;
  margin-top: -10px;
  background: none;
}
.viewport.marynyoung .off-canvas .off-canvas-nav .global-nav .top .btn_close::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1px -8px;
  width: 16px;
  height: 2px;
  background-color: #1e1e1e;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.viewport.marynyoung .off-canvas .off-canvas-nav .global-nav .top .btn_close::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1px -8px;
  width: 16px;
  height: 2px;
  background-color: #1e1e1e;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.viewport.marynyoung .off-canvas .off-canvas-nav .global-nav {
  position: relative;
  padding: 20px 0;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
}
.viewport.marynyoung .off-canvas .off-canvas-nav .remarks {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 24px 12px;
  height: 42px;
  border-top: 1px solid #b2b2b2;
  border-bottom: 1px solid #b2b2b2;
}
.viewport.marynyoung .off-canvas .off-canvas-nav .remark-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.viewport.marynyoung .off-canvas .off-canvas-nav .remark-item::before {
  content: '';
  display: block;
  margin-right: 8px;
  height: 16px;
}
.viewport.marynyoung .off-canvas .off-canvas-nav .remark-item.current::before {
  width: 14px;
  background-image: url(/image/icon-current-location.png);
}
.viewport.marynyoung .off-canvas .off-canvas-nav .remark-item.unanswered::before {
  width: 16px;
  border: 1px dashed #000;
}
.viewport.marynyoung .off-canvas .off-canvas-nav .dropdown {
  margin: 0;
  padding: 0 0 0 20px;
  width: 100%;
  max-height: 159px;
  overflow-x: hidden;
  overflow-y: auto;
}
.viewport.marynyoung .off-canvas .off-canvas-nav .dropdown-wrap {
  position: relative;
  float: left;
  padding: 16px 8px 8px;
}
.viewport.marynyoung .off-canvas .off-canvas-nav .dropdown-wrap.current::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 -7px;
  width: 14px;
  height: 16px;
  background-image: url(/image/icon-current-location.png);
}
.viewport.marynyoung .off-canvas .off-canvas-nav .dropdown-toggle {
  padding: 0;
  width: 29px;
  height: 29px;
  font-size: 18px;
  font-weight: bold;
  line-height: 25px;
  color: #fff;
  text-align: center;
  border: 1px dashed transparent;
  background-color: #0279cd;
}
.viewport.marynyoung .off-canvas .off-canvas-nav .dropdown-toggle.none {
  color: #0279cd !important;
  border: 1px dashed #000;
  background-color: #fff;
}
.viewport.marynyoung .off-canvas .header_test {
  position: relative;
  padding: 16px 50% 26px 42px;
  width: 100%;
  overflow: hidden;
}
.viewport.marynyoung .off-canvas .header_test::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: -1px;
  width: calc(50% + 1px);
  height: 2px;
  background-image: url(/image/bg-dashed-line.png);
  background-size: contain;
  background-repeat: repeat-y;
}
.viewport.marynyoung .off-canvas .header_test::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: -1px;
  width: calc(50% + 1px);
  height: 2px;
  background-image: url(/image/bg-dashed-line.png);
  background-size: contain;
  background-repeat: repeat-y;
}
.viewport.marynyoung .off-canvas .header_test h1.test {
  padding-right: 60px;
  width: 100%;
  height: auto;
  min-height: 48px;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: #1e1e1e;
  letter-spacing: -.012em;
  word-break: break-word;
}
.viewport.marynyoung .off-canvas .test_top {
  position: absolute;
  top: 16px;
  left: 50%;
  padding: 0;
  border: unset;
  background: unset;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.viewport.marynyoung .off-canvas .test_top .cons {
  width: auto;
}
.viewport.marynyoung .off-canvas .test_top .num {
  display: none;
}
.viewport.marynyoung .off-canvas .test_top .time {
  padding: 0;
  float: unset;
  font-size: 22px;
  font-weight: 500;
  line-height: 24px;
  color: #1e1e1e;
  letter-spacing: -.02em;
}
.viewport.marynyoung .off-canvas .container_test {
  position: relative;
  padding: 8px 0 91px;
  width: 100%;
  height: 100%;
}
.viewport.marynyoung .off-canvas .container_test .consBox {
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'PT Serif', serif;
  font-family: 'Noto Serif', serif;
  overflow: hidden;
}
.viewport.marynyoung .off-canvas .container_test .evbox {
  display: flex;
  flex-flow: wrap;
  flex-basis: 1;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
.viewport.marynyoung .off-canvas .container_test .inbox {
  margin: 0 auto;
  max-width: 652px;
} 

.viewport.marynyoung .off-canvas .passage-section {
  margin-right: -1px;
  padding: 8px 42px;
  width: calc(50% + 1px);
  border-right: 2px solid #ccc;
  width: 50%;
  height: 100%;
  font-size: 15px;
  line-height: 23px;
  color: #1e1e1e;
  overflow-x: hidden;
  overflow-y: auto;
}
.viewport.marynyoung .off-canvas .question-section {
  padding: 8px 42px;
  width: 50%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.viewport.marynyoung .off-canvas .question-section:first-child {
  width: 100%;
}

.viewport.marynyoung .off-canvas .evboxqs {
  position: relative;
  margin: 0px;
  padding: 0 0 3px;
  background-color: #f0f0f0;
  overflow: hidden;
}
.viewport.marynyoung .off-canvas .evboxqs::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: -1px;
  width: calc(100% + 1px);
  height: 2px;
  border-top: 1px solid #fff;
  background-image: url(/image/bg-dashed-line.png);
  background-size: contain;
  background-repeat: repeat-y;
}
.viewport.marynyoung .off-canvas .evboxqs .qnum {
  display: block;
  float: left;
  padding: 6px 7px;
  height: 30px;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 1em;
  color: #fff;
  background-color: #1e201d;
}
.viewport.marynyoung .off-canvas .evboxqs .qnp {
  display: none;
}
.viewport.marynyoung .off-canvas .consBox .qbox {
  margin: 0;
  padding: 0;
}
.viewport.marynyoung .off-canvas .container_test .consBox .quest {
  margin: 15px 0;
  padding: 0;
  font-size: 15px;
  font-weight:  400;
  line-height: 23px;
  word-break: break-word;
  color: #1e1e1e;
  border: 0;
}
.viewport.marynyoung .off-canvas .container_test .qilist > li {
  position: relative;
  margin-top: 15px;
}
.viewport.marynyoung .off-canvas .container_test .qilist input {
  /* display: none; */
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.viewport.marynyoung .off-canvas .container_test .qilist .cons {
    background-color: transparent;
}

.viewport.marynyoung .off-canvas .container_test .qilist label {
  display: block;
  padding: 11px 10px 10px 55px;
  width: 100%;
  font-size: 15px;
  line-height: 23px;
  color: #000;
  border: 1px solid #505050;
  border-radius: 8px;
  cursor: pointer;
}
.viewport.marynyoung .off-canvas .container_test .qilist label::before {
  position: absolute;
  top: 11px;
  left: 12px;
  width: 20px;
  height: 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #505050;
  text-align: center;
  border: 2px solid #505050;
  border-radius: 50%;

}
.viewport.marynyoung .off-canvas .container_test .qilist > li:nth-child(1) label::before {
  content: 'A';
}
.viewport.marynyoung .off-canvas .container_test .qilist > li:nth-child(2) label::before {
  content: 'B';
}
.viewport.marynyoung .off-canvas .container_test .qilist > li:nth-child(3) label::before {
  content: 'C';
}
.viewport.marynyoung .off-canvas .container_test .qilist > li:nth-child(4) label::before {
  content: 'D';
}
.viewport.marynyoung .off-canvas .container_test .qilist > li:nth-child(5) label::before {
  content: 'E';
}
.viewport.marynyoung .off-canvas .container_test .qilist > li:nth-child(6) label::before {
  content: 'F';
}
.viewport.marynyoung .off-canvas .container_test .qilist > li:nth-child(7) label::before {
  content: 'G';
}
.viewport.marynyoung .off-canvas .container_test .qilist > li:nth-child(8) label::before {
  content: 'H';
}
.viewport.marynyoung .off-canvas .container_test .qilist > li:nth-child(9) label::before {
  content: 'I';
}
.viewport.marynyoung .off-canvas .container_test .qilist > li:nth-child(10) label::before {
  content: 'J';
}
.viewport.marynyoung .off-canvas .container_test .qilist input:checked + label {
  padding: 9px 8px 8px 53px;
  border: 3px solid #0077c9;
}
.viewport.marynyoung .off-canvas .container_test .qilist input:checked + label::before {
  color: #fff;
  background-color: #0077c9;
}
/* .viewport.marynyoung .off-canvas .container_test .answer input[type=text],
.viewport.marynyoung .off-canvas .container_test .consBox .answer textarea {
  margin: 0;
  display: block;
  padding: 13px 16px;
  width: 100%;
  font-size: 15px;
  line-height: 23px;
  color: #000;
  border: 1px solid #505050;
  border-radius: 8px;
} */
.viewport.marynyoung .off-canvas .container_test .consBox .answer .txt {
  margin-top: 5px;
  font-size: 13px;
  line-height: 22px;
}
.viewport.marynyoung .off-canvas .container_test .i-answer-label {
  padding: 9px 9px 10px;
  border: 1px solid #212121;
  border-radius: 8px;
}
.viewport.marynyoung .off-canvas .container_test .i-answer-label input[type=text] {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 32px;
  font-family: inherit;
  font-size: 19px;
  line-height: 1.6;
  border: 0;
  border-bottom: 1px solid #212121;
  border-radius: 0;
  outline: none;
}
.viewport.marynyoung .off-canvas .container_test .i-answer-label textarea {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: inherit;
  font-size: 19px;
  line-height: 1.6;
  border: 0;
  border-radius: 0;
  outline: none;
}

.viewport.marynyoung .off-canvas .footerWrap_test {
  height: 78px;
  border-top: none;
  background: none;
}
.viewport.marynyoung .off-canvas .footerWrap_test::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -1px;
  width: calc(50% + 1px);
  height: 2px;
  background-image: url(/image/bg-dashed-line.png);
  background-size: contain;
  background-repeat: repeat-y;
}
.viewport.marynyoung .off-canvas .footerWrap_test::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: -1px;
  width: calc(50% + 1px);
  height: 2px;
  background-image: url(/image/bg-dashed-line.png);
  background-size: contain;
  background-repeat: repeat-y;
}

.viewport.marynyoung .off-canvas .footerWrap_test::after {
  content: '';
  display: block;
  clear: both;
}
.viewport.marynyoung .off-canvas .footerWrap_test .footer {
  float: right;
  padding: 18px 32px;
  width: auto;
}
.viewport.marynyoung .off-canvas .footerWrap_test a {
  display: block;
  float: left;
  margin: 0 6px;
  padding: 8px 24px;
  width: auto;
  height: 40px;
  font-size: 14px;
  font-weight: bold;
  line-height: 22px;
  color: #fff;
  text-decoration: none;
  text-transform: capitalize;
  border-radius: 20px;
  border: 1px solid #334dc8;
  background-color: #0076c6;
}
.viewport.marynyoung .off-canvas .footerWrap_test a.btnhide {
  display: none;
}
.viewport.marynyoung .off-canvas .footerWrap_test a span {
  display: inline;
  margin: 0;
}
@media (min-width:1920px) {
  .viewport.marynyoung .off-canvas .header_test::before,
  .viewport.marynyoung .off-canvas .header_test::after,
  .viewport.marynyoung .off-canvas .footerWrap_test::before,
  .viewport.marynyoung .off-canvas .footerWrap_test::after {
    background-size: cover;
  }
}