#wrap {
  width: 100%;
  height: auto;
  min-height: 100vh; }
  #wrap img {
    max-width: 500%; }

header {
  width: 100%;
  height: 76px;
  border-bottom: 1px solid #ddd;
  padding: 0; }
  header a {
    display: block;
    float: left; }
  header img {
    display: block;
    float: right; }

footer {
  width: 100%;
  height: 60px;
  display: block;
  background-color: #222;
  padding: 0; }
  footer img {
    display: block;
    margin: 0 auto; }

nav {
  width: auto;
  height: 100vh;
  display: block;
  float: left;
  background-color: #f7f8fa; }
  nav.qui-act {
    width: 80px; }
  nav.lar-act {
    width: 235px; }
  nav > div {
    height: 100%;
    background-color: #192945; }
    nav > div > ul {
      height: auto;
      position: relative; }
      nav > div > ul li:nth-of-type(3) {
        height: 103px; }
  nav .quick-nav {
    width: 55px; }
    nav .quick-nav .qui-menu {
      height: 51px;
      display: none; }
      nav .quick-nav .qui-menu.act {
        display: block; }
    nav .quick-nav .qui-menu-sub {
      width: 165px;
      height: 100%;
      background-color: #fff;
      border-right: 1px solid #ddd;
      position: absolute;
      top: 0;
      left: 55px;
      display: none;
      z-index: 500; }
      nav .quick-nav .qui-menu-sub.act {
        display: block; }
  nav .large-nav {
    width: 210px; }
    nav .large-nav .lar-menu {
      height: 51px;
      display: none; }
      nav .large-nav .lar-menu.act {
        display: block; }
      nav .large-nav .lar-menu.on {
        height: 102px; }

.quick {
  display: block; }

.large {
  display: none; }

section {
  width: auto;
  height: auto;
  display: block;
  background-color: #f7f8fa; }
  section .con-body {
    float: left; }
    section .con-body.quick-on {
      width: calc(100% - 80px); }
    section .con-body.large-on {
      width: calc(100% - 235px); }
    section .con-body img {
      width: 100%;
      display: none; }
      section .con-body img.on {
        display: block; }

.hmls-login {
  width: 100%;
  height: 100vh;
  display: block;
  background-image: url("/img/pages/hmls/login-bg.jpg");
  position: relative; }
  .hmls-login section div {
    width: 1000px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url("/img/pages/hmls/login-box.jpg");
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%); }
  .hmls-login a {
    width: 310px;
    height: 50px;
    display: block;
    margin-top: 380px;
    margin-left: 595px; }

.hmls-main .tab_box {
  position: relative; }
  .hmls-main .tab_box ul {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 25px; }
    .hmls-main .tab_box ul li {
      float: left; }
    .hmls-main .tab_box ul li a {
      height: 47px;
      display: block;
      float: left; }
    .hmls-main .tab_box ul li:nth-of-type(1) a {
      width: 140px; }
    .hmls-main .tab_box ul li:nth-of-type(2) a {
      width: 160px; }
    .hmls-main .tab_box ul li:nth-of-type(3) a {
      width: 190px; }
  .hmls-main .tab_box .pop_btn {
    width: 6.6%;
    height: 8%;
    display: block;
    animation: btn_color 2s infinite linear;
    position: absolute;
    bottom: 35%;
    left: 17%; }

.hmls-order .formBox {
  width: 100%;
  height: 407px;
  background-image: url("/img/pages/hmls/order/order-bg.jpg"); }

.hmls-order form {
  width: 1025px;
  display: block;
  float: left; }

.hmls-order form + img {
  width: 95px;
  display: block;
  float: right; }

.hmls-order .order-select {
  position: relative; }
  .hmls-order .order-select div {
    position: absolute;
    top: 140px;
    left: 139px;
    width: 180px;
    height: auto; }
    .hmls-order .order-select div select {
      width: 180px;
      height: 35px;
      display: block;
      cursor: pointer; }

.hmls-order .order-list-sort {
  width: 100%; }
  .hmls-order .order-list-sort > * {
    float: left; }
  .hmls-order .order-list-sort img:nth-of-type(1) {
    width: 844px; }
  .hmls-order .order-list-sort div {
    width: 181px; }
  .hmls-order .order-list-sort input {
    display: none; }
  .hmls-order .order-list-sort label {
    width: 89px;
    height: 35px;
    display: block;
    float: left;
    cursor: pointer; }
  .hmls-order .order-list-sort label:nth-of-type(1) {
    margin-right: 3px; }
  .hmls-order .order-list-sort label span {
    font-size: 0;
    display: none; }
  .hmls-order .order-list-sort input.lately-od + label {
    background-image: url("/img/pages/hmls/order/order-btn-lately-off.jpg"); }
  .hmls-order .order-list-sort input.lately-od:checked + label {
    background-image: url("/img/pages/hmls/order/order-btn-lately-on.jpg"); }
  .hmls-order .order-list-sort input.date-od + label {
    background-image: url("/img/pages/hmls/order/order-btn-date-off.jpg"); }
  .hmls-order .order-list-sort input.date-od:checked + label {
    background-image: url("/img/pages/hmls/order/order-btn-date-on.jpg"); }

.hmls-order .order-search-btn {
  position: relative; }
  .hmls-order .order-search-btn a {
    width: 73px;
    height: 40px;
    display: block;
    position: absolute;
    top: -2px;
    right: 0;
    margin-right: 123px;
    animation: btn_color 2s infinite linear; }

.hmls-order .result-box {
  width: 100%;
  height: auto;
  display: none; }
  .hmls-order .result-box .result_title img {
    width: auto;
    float: left; }
  .hmls-order .result-box .result_title img:last-of-type {
    float: right; }
  .hmls-order .result-box .result_table {
    width: 100%;
    min-height: 100px;
    display: none; }
    .hmls-order .result-box .result_table .result_list {
      display: none; }
    .hmls-order .result-box .result_table .result_list.on {
      display: block; }
  .hmls-order .result-box .result_btn div {
    width: 100%;
    min-height: 65px; }
  .hmls-order .result-box .result_btn img {
    width: auto; }
  .hmls-order .result-box .result_btn div:first-of-type img {
    float: right; }
  .hmls-order .result-box .result_btn div:last-of-type img {
    margin: 0 auto; }

.faq_btn, .receipt_btn {
  position: relative; }

.faq_btn a {
  width: 3%;
  height: 70%;
  position: absolute;
  top: 8px;
  right: 3.2%;
  animation: btn_color 2s infinite linear; }

.receipt_btn a {
  width: 3%;
  height: 73%;
  position: absolute;
  top: 6px;
  right: 10.8%;
  animation: btn_color 2s infinite linear; }

.con-popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.5);
  display: none; }

div[class*="pop_"] {
  width: 700px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -350px;
  display: none; }

div[class*="pop_faq"] a.pop_close_top {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0; }

div[class*="pop_faq"] a.pop_close_bot {
  width: 74px;
  height: 38px;
  position: absolute;
  top: 453px;
  left: 364px; }

div[class*="pop_faq"] a.main-close {
  top: 210px;
  left: 313px; }

.receipt_main {
  width: 100%;
  height: 554px;
  padding: 16px 15px 0px;
  overflow-y: scroll;
  background: #fff;
  border: 1px solid #192945;
  border-top: 0;
  box-sizing: border-box;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px; }

.receipt_tab {
  position: relative;
  height: auto; }
  .receipt_tab img {
    display: none; }
  .receipt_tab img.on {
    display: block; }
  .receipt_tab ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 648px;
    height: 47px;
    display: block; }
  .receipt_tab ul li {
    width: 216px;
    height: 47px;
    float: left;
    display: block; }
  .receipt_tab ul li a {
    width: 100%;
    height: 100%;
    display: block; }

.pop_receipt a.pop_close_top {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0; }

.receipt_main a.pop_close_bot {
  position: absolute;
  bottom: 26px;
  right: 163px;
  width: 70px;
  height: 40px; }

.hmls-main .con-body .title {
  width: auto; }

.hmls-main .con-body .mypage_main {
  position: relative; }

.hmls-main .con-body .mypage_main > img {
  width: auto;
  margin: 0 auto; }

.hmls-main .con-body .mypage_main > a {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -35px;
  width: 70px;
  height: 37px;
  animation: btn_color 2s infinite linear; }

@keyframes btn_color {
  0% {
    background: 0; }
  50% {
    background: rgba(240, 48, 103, 0.5); }
  100% {
    background: 0; } }