@import url(/include/css/webfont/nanumsquare/NanumSquare.css);
html {
  font-size: 8px;
  height: 100%;
  font-family: NanumSquare;
  scrollbar-3dLight-Color: #494b4e;
  scrollbar-arrow-color: #494b4e;
  scrollbar-base-color: #f5f5f5;
  scrollbar-Face-Color: #f5f5f5;
  scrollbar-Track-Color: #494b4e;
  scrollbar-DarkShadow-Color: #f5f5f5;
  scrollbar-Highlight-Color: #f5f5f5;
  scrollbar-Shadow-Color: #f5f5f5; }

body {
  overflow-x: hidden; }

input, textarea, select, button {
  font-family: NanumSquare; }

button {
  cursor: pointer;
  margin: 0;
  padding: 0;
  outline: 0; }

label, a {
  cursor: pointer; }

ul {
  list-style: none;
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0; }

img {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none; }

.hover_group:hover .hover_on {
  display: inline;
  display: initial; }

.hover_group:hover .hover_off {
  display: none; }

.hover_group .hover_on {
  display: none; }

.hover_group .hover_off {
  display: inline;
  display: initial; }

.toggle_group.active_on > .value_on {
  display: inline;
  display: initial; }

.toggle_group.active_on > * > .value_on {
  display: inline;
  display: initial; }

.toggle_group.active_off > .value_off {
  display: inline;
  display: initial; }

.toggle_group.active_off > * > .value_off {
  display: inline;
  display: initial; }

.toggle_group .toggle_item {
  display: none; }

.toggle_group[type=radio] {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0; }
  .toggle_group[type=radio] ~ .value_on,
  .toggle_group[type=radio] ~ .value_off {
    width: 13px;
    width: 1.3rem;
    vertical-align: middle;
    margin-right: 10px; }
  .toggle_group[type=radio] ~ .value_on {
    display: none; }
  .toggle_group[type=radio]:checked ~ .value_on {
    display: inline;
    display: initial; }
  .toggle_group[type=radio]:checked ~ .value_off {
    display: none; }

.toggle_group[type=checkbox] {
  visibility: hidden;
  position: absolute; }
  .toggle_group[type=checkbox] ~ .value_on,
  .toggle_group[type=checkbox] ~ .value_off {
    width: 13px;
    width: 1.3rem;
    vertical-align: middle;
    margin-right: 10px; }
  .toggle_group[type=checkbox] ~ .value_on {
    display: none; }
  .toggle_group[type=checkbox]:checked ~ .value_on {
    display: inline;
    display: initial; }
  .toggle_group[type=checkbox]:checked ~ .value_off {
    display: none; }

.viewer {
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  .viewer .dynamic_bg {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .viewer .dynamic_bg div {
      animation: dancee 15s ease infinite; }
  .viewer .page {
    background-color: #fff; }
    .viewer .page .page_contents_wrap {
      width: 100%; }
  .viewer .page_no {
    display: none;
    cursor: pointer;
    position: absolute;
    bottom: 1%;
    left: 0px;
    width: 100%;
    font-size: 10px;
    z-index: 9999;
    text-align: center; }

.floating_layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1%; }
  .floating_layer ~ div .blur_ie {
    display: none; }
  .floating_layer.active {
    height: 100%; }
    .floating_layer.active ~ div {
      filter: blur(10px);
      -webkit-filter: blur(10px);
      -ms-filter: blur(10px);
      filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
      color: #e9d0af !important;
      text-shadow: 3px 3px 3px #ccc !important; }
      .floating_layer.active ~ div .blur_ie {
        display: block; }
        .floating_layer.active ~ div .blur_ie + img {
          display: none; }
    .floating_layer.active .floating_background {
      display: block; }
    .floating_layer.active .floating_group.active {
      display: block; }
    .floating_layer.active .btn_menu_hide {
      display: block; }
    .floating_layer.active .btn_show_management, .floating_layer.active .btn_show_gallery {
      display: none; }
    .floating_layer.active .floating_group.group_reply .floating_item_list {
      position: relative;
      height: 4rem;
      top: 0; }
      .floating_layer.active .floating_group.group_reply .floating_item_list .menu_tab_title {
        margin-left: 1rem; }
    .floating_layer.active .floating_group.group_reply .btn_hide_floating {
      top: 0; }
  .floating_layer .btn_show_management {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    transition: all 1s ease;
    cursor: pointer;
    z-index: 10; }
    .floating_layer .btn_show_management:hover {
      transform: rotateZ(90deg); }
    .floating_layer .btn_show_management img {
      width: 40px;
      height: 40px; }
  .floating_layer .btn_show_gallery {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    transition: all 1s ease;
    cursor: pointer;
    z-index: 10; }
    .floating_layer .btn_show_gallery:hover {
      transform: rotateZ(90deg); }
    .floating_layer .btn_show_gallery img {
      width: 40px;
      height: 40px; }
  .floating_layer .floating_background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    opacity: 0.9; }
  .floating_layer .floating_group {
    display: none;
    position: relative;
    top: 10%;
    left: 0;
    width: 80%;
    height: 80%;
    max-width: 1024px;
    max-height: 768px;
    background-image: url("/digital_photobook/resources/image/floating/layer_bg.png");
    color: #fff;
    margin: 0 auto;
    opacity: 0.8;
    overflow: hidden; }
    .device_mobile .floating_layer .floating_group {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%; }
    .floating_layer .floating_group .floating_item_list {
      position: relative;
      width: 100%;
      height: 13%;
      height: calc(5rem);
      position: absolute;
      height: 13%;
      height: 4rem;
      top: 13%;
      top: 4rem;
      z-index: 1;
      margin: 0;
      padding: 0;
      border: 0; }
      .floating_layer .floating_group .floating_item_list li {
        height: 32px;
        height: 4rem;
        line-height: 32px;
        line-height: 4rem;
        position: relative;
        float: left;
        top: 0;
        left: 0;
        vertical-align: middle;
        font-size: 17.6px;
        font-size: 1.6rem;
        cursor: pointer;
        border: 0;
        color: #fff;
        text-align: left;
        transition: .3s ease;
        opacity: 0.5;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=50;
        filter: progid:DXImageTransform.Microsoft.Alpha Opacity=50; }
        .floating_layer .floating_group .floating_item_list li.visible {
          display: block; }
        .floating_layer .floating_group .floating_item_list li:hover, .floating_layer .floating_group .floating_item_list li.active {
          background: none;
          opacity: 1;
          -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=100;
          filter: progid:DXImageTransform.Microsoft.Alpha Opacity=100; }
        .floating_layer .floating_group .floating_item_list li:first-child .menu_tab_title:before {
          display: none; }
        .floating_layer .floating_group .floating_item_list li .menu_tab_title {
          vertical-align: middle;
          text-shadow: #cac3c3 0px 0px 31px; }
          .floating_layer .floating_group .floating_item_list li .menu_tab_title:before {
            position: relative;
            display: inline-block;
            content: '';
            height: 1.6rem;
            vertical-align: middle;
            border-left: 1px solid #fff;
            opacity: 0.5;
            -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=50;
            filter: progid:DXImageTransform.Microsoft.Alpha Opacity=50;
            transition: left .3s ease-out; }
        .floating_layer .floating_group .floating_item_list li .menu_tab_icon {
          position: relative;
          vertical-align: middle;
          transition: margin, height .3s ease-out; }
          .floating_layer .floating_group .floating_item_list li .menu_tab_icon + .menu_tab_title {
            margin-left: 0 !important; }
        .floating_layer .floating_group .floating_item_list li .menu_tab_icon {
          margin: 0 11px 0 36px;
          margin: 0 1rem 0 3.6rem;
          height: 16px;
          height: 1.6rem;
          max-width: 16px;
          max-width: 1.6rem; }
          .floating_layer .floating_group .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
            left: -44px;
            left: -4.4rem; }
        .floating_layer .floating_group .floating_item_list li .menu_tab_title {
          margin-left: 46px;
          margin-left: 4.6rem; }
          .floating_layer .floating_group .floating_item_list li .menu_tab_title:before {
            left: -23px;
            left: -2.3rem; }
    .floating_layer .floating_group .floating_item_contents_wrap {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 87%;
      height: calc(100% - 5rem);
      height: 100%;
      padding: 0;
      box-sizing: content-box;
      font-size: 16.5px;
      font-size: 1.5rem;
      transition: left .4s ease-out; }
    .floating_layer .floating_group .floating_item_contents {
      position: absolute;
      top: 0;
      left: 0;
      width: 92%;
      height: 100%;
      width: 100%;
      padding: 0;
      box-sizing: content-box;
      text-align: center; }
      .floating_layer .floating_group .floating_item_contents > div {
        float: left;
        position: relative;
        width: 100%;
        height: 100%; }
    .floating_layer .floating_group .block_grid label {
      position: relative;
      margin-right: 2%; }
      .floating_layer .floating_group .block_grid label .custom_label {
        margin-left: 0; }
    .floating_layer .floating_group .btn_hide_floating {
      position: absolute;
      top: 60px;
      top: 4rem;
      left: 96%;
      transform: translateX(50%);
      z-index: 2; }
      .floating_layer .floating_group .btn_hide_floating span {
        position: relative;
        font-size: 17.6px;
        font-size: 1.6rem;
        line-height: 60px;
        line-height: 4rem;
        margin-right: 15px;
        margin-right: 1.6rem; }
        .floating_layer .floating_group .btn_hide_floating span img {
          position: absolute;
          margin-top: 1.1rem;
          height: 120%;
          right: 0;
          cursor: pointer; }
  .floating_layer .contents_header {
    height: 24%;
    height: 8rem;
    margin: 0;
    font-size: 17.6px;
    font-size: 1.6rem; }
    .floating_layer .contents_header strong {
      display: inline-block;
      animation: scale_ani 3s infinite;
      animation-timing-function: linear; }
    .floating_layer .contents_header h1 {
      font-size: 17.6px;
      font-size: 1.6rem; }
  .floating_layer .contents_footer {
    width: 100%;
    height: 25%;
    left: 0;
    bottom: 0; }
    .floating_layer .contents_footer p {
      margin: 0;
      padding: 0; }
    .floating_layer .contents_footer button {
      box-sizing: content-box;
      padding: 10px 2%;
      padding: 1rem 2%;
      margin: 1% 1.5%;
      background-color: #5c5750;
      color: #fff;
      border: 0;
      outline: none;
      border-radius: 3rem;
      font-size: 15px;
      font-size: 1.25rem;
      line-height: 22.5px;
      line-height: 1.5rem;
      word-break: keep-all;
      font-weight: 400;
      transition: all .3s ease-out; }
      .floating_layer .contents_footer button:hover {
        opacity: 0.9;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=90;
        filter: progid:DXImageTransform.Microsoft.Alpha Opacity=90; }
      .floating_layer .contents_footer button strong {
        font-size: 16.5px;
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: 0 !important; }
      .floating_layer .contents_footer button .btn_responsive_contents {
        position: relative;
        width: 16px;
        width: 1.6rem;
        height: 10px;
        height: 1rem;
        display: block;
        margin-right: 7px;
        display: inline-block;
        vertical-align: middle; }
        .floating_layer .contents_footer button .btn_responsive_contents img {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 16px;
          width: 1.6rem;
          max-width: 1.6rem;
          vertical-align: bottom; }
  .floating_layer .contents_body {
    position: relative;
    width: 96%;
    height: 51%;
    height: calc(75% - 8rem);
    overflow: hidden; }
    .floating_layer .contents_body.postcode_active {
      z-index: 2;
      height: 70%; }
    .floating_layer .contents_body .do_scroll {
      height: 85%;
      margin-top: 3%;
      overflow-y: scroll;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch; }
      .floating_layer .contents_body .do_scroll::-webkit-scrollbar {
        width: 4px;
        background-color: #fff; }
      .floating_layer .contents_body .do_scroll::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
        background-color: #494b4e; }
      .floating_layer .contents_body .do_scroll::-webkit-scrollbar-thumb {
        background-color: #494b4e;
        background-color: #F5F5F5; }
  .floating_layer .menu_share_contents .contents_body {
    width: 90%;
    height: 44%;
    height: calc(68 * 1% - 8rem);
    margin: 0 auto;
    padding: 0 6%; }
    .floating_layer .menu_share_contents .contents_body[data-channel] li {
      opacity: 0.5;
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=50;
      filter: progid:DXImageTransform.Microsoft.Alpha Opacity=50; }
      .floating_layer .menu_share_contents .contents_body[data-channel] li.active {
        opacity: 1;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=100;
        filter: progid:DXImageTransform.Microsoft.Alpha Opacity=100; }
    .floating_layer .menu_share_contents .contents_body[data-channel] + .contents_footer button {
      background-color: #fa4a4e; }
      .floating_layer .menu_share_contents .contents_body[data-channel] + .contents_footer button .custom_right_arrow_wrap {
        display: inline; }
    .floating_layer .menu_share_contents .contents_body .share_channel_list {
      height: 90%;
      margin: 0;
      padding: 0 11% 0 9%; }
    .floating_layer .menu_share_contents .contents_body li {
      display: block;
      float: left;
      width: 16%;
      padding: .05% 3% 12px;
      cursor: pointer;
      position: relative;
      margin: 5% 0; }
      .floating_layer .menu_share_contents .contents_body li:hover img {
        transform: scale(1.05); }
      .floating_layer .menu_share_contents .contents_body li.active .channel_name {
        color: #fff;
        opacity: 1;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=100;
        filter: progid:DXImageTransform.Microsoft.Alpha Opacity=100; }
      .floating_layer .menu_share_contents .contents_body li .channel_name {
        display: block;
        width: 100%;
        font-size: 15px;
        font-size: 1.2rem;
        line-height: 15px;
        line-height: 1rem;
        color: #D8D8D8;
        opacity: 0.7;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=70;
        filter: progid:DXImageTransform.Microsoft.Alpha Opacity=70;
        position: absolute;
        bottom: 0;
        left: 0; }
      .floating_layer .menu_share_contents .contents_body li img {
        transition: all .3s ease-out; }
  .floating_layer .menu_share_contents .contents_footer {
    height: 32%; }
    .floating_layer .menu_share_contents .contents_footer p {
      height: 21.875%;
      font-size: 15px;
      font-size: 1.3rem;
      opacity: 0.7;
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=70;
      filter: progid:DXImageTransform.Microsoft.Alpha Opacity=70;
      line-height: 30px;
      line-height: 2rem; }
    .floating_layer .menu_share_contents .contents_footer button {
      padding: 10px 10%;
      padding: 1rem 10%;
      background-color: #7a7a7a;
      transition: all .3s ease-out; }
      .floating_layer .menu_share_contents .contents_footer button[disabled] {
        cursor: not-allowed; }
        .floating_layer .menu_share_contents .contents_footer button[disabled] .custom_right_arrow_wrap {
          display: none; }
  .floating_layer .menu_share_contents .custom_right_arrow_wrap {
    position: relative;
    margin-left: 10px; }
    .floating_layer .menu_share_contents .custom_right_arrow_wrap span {
      visibility: hidden; }
    .floating_layer .menu_share_contents .custom_right_arrow_wrap img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%; }
  .floating_layer .menu_keep_contents button {
    max-width: 26.3%; }
    .floating_layer .menu_keep_contents button[data-term="3"] {
      background-color: #90ca76;
      letter-spacing: -1px; }
    .floating_layer .menu_keep_contents button[data-term="12"] {
      background-color: #e86e6d; }
    .floating_layer .menu_keep_contents button[data-term="36"] {
      background-color: #61a7db; }
  .floating_layer .menu_keep_contents h5 {
    bottom: 0;
    color: #8a8c8b;
    margin: 1% 0; }
  .floating_layer .menu_keep_contents .admin_message {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: left;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    white-space: nowrap; }
  .floating_layer .menu_keep_contents .copyright {
    margin-left: 1%; }
  .floating_layer .menu_keep_contents .expire_text {
    float: right;
    margin-right: 1%;
    text-align: right; }
  .floating_layer .menu_print_contents .contents_body.postcode_active ~ .contents_footer button {
    display: none; }
  .floating_layer .menu_print_contents .contents_body.postcode_active .daum_postcode_wrap {
    display: block;
    z-index: 2;
    webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(3px); }
    .floating_layer .menu_print_contents .contents_body.postcode_active .daum_postcode_wrap ~ div {
      display: none; }
  .floating_layer .menu_print_contents .contents_body.postcode_active ~ .bg_close_daum {
    display: block;
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 1;
    webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(1px); }
  .floating_layer .menu_print_contents .contents_body .daum_postcode_wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    margin: 0 5%;
    height: 100%;
    z-index: 10000; }
    .floating_layer .menu_print_contents .contents_body .daum_postcode_wrap.active {
      display: block; }
      .floating_layer .menu_print_contents .contents_body .daum_postcode_wrap.active ~ div {
        display: none; }
  .floating_layer .menu_print_contents .post_code input {
    width: 30%;
    cursor: not-allowed; }
  .floating_layer .menu_print_contents .post_code .btn_show_daum_postcode {
    width: 28%;
    margin-left: 2%;
    height: 35px;
    height: 3.5rem;
    font-size: 16.5px;
    font-size: 1.5rem;
    line-height: 52.5px;
    line-height: 3.5rem;
    padding: 2px 0;
    box-sizing: content-box;
    border: 0;
    color: #fff;
    background-color: #919191; }
    .floating_layer .menu_print_contents .post_code .btn_show_daum_postcode:hover {
      background-color: #818181; }
  .floating_layer .menu_print_contents .addr1 input {
    cursor: not-allowed; }
  .floating_layer .menu_print_contents .contents_footer button {
    background-color: #fa4a4e;
    padding: 1rem 1.5rem; }
  .floating_layer .management_config_contents .contents_body table,
  .floating_layer .management_pay_contents .contents_body table {
    position: relative;
    width: 80%;
    transition: width .5s ease-out;
    margin: 0 auto;
    border-spacing: 0;
    border-collapse: collapse; }
  .device_mobile .floating_layer .management_config_contents .contents_body table,
  .device_mobile .floating_layer .management_pay_contents .contents_body table {
    width: 90%; }
  .floating_layer .management_config_contents .contents_body th,
  .floating_layer .management_pay_contents .contents_body th {
    text-align: left;
    padding: 0 0 10px 5px;
    border-bottom: 2px solid #5f5d5e;
    color: #dbdbdb; }
  .floating_layer .management_config_contents .contents_body td,
  .floating_layer .management_pay_contents .contents_body td {
    text-align: left;
    padding: 11px 0 11px 5px; }
    .floating_layer .management_config_contents .contents_body td span,
    .floating_layer .management_pay_contents .contents_body td span {
      vertical-align: middle;
      margin-right: 10px; }
  .floating_layer .management_config_contents .contents_body > div {
    height: 90%; }
  .floating_layer .management_config_contents .contents_body th[data-col=col1] {
    width: 17%; }
  .floating_layer .management_config_contents .contents_body th[data-col=col2] {
    width: 27%; }
  .floating_layer .management_config_contents .contents_body th[data-col=col3] {
    width: 27%; }
  .floating_layer .management_config_contents .contents_body th[data-col=col4] {
    width: 29%; }
  .floating_layer .management_config_contents .contents_body td {
    word-break: break-all; }
  .floating_layer .management_config_contents .contents_body span {
    font-size: 14px;
    font-size: 1rem;
    color: #fff; }
  .floating_layer .management_config_contents .contents_body .toggle_active {
    vertical-align: middle; }
    .floating_layer .management_config_contents .contents_body .toggle_active .toggle_item {
      width: 16px;
      width: 1.6rem; }
  .floating_layer .management_config_contents .contents_body .change_password button,
  .floating_layer .management_config_contents .contents_body .copy_link button,
  .floating_layer .management_config_contents .contents_body .btn_add_private {
    background-color: #545152;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    font-size: 1rem;
    margin: 0;
    padding: 1px 10px 3px;
    border-radius: 30px;
    border: 1px solid #bbb;
    vertical-align: middle;
    transition: color, background-color .3s ease-out; }
    .floating_layer .management_config_contents .contents_body .change_password button:hover,
    .floating_layer .management_config_contents .contents_body .copy_link button:hover,
    .floating_layer .management_config_contents .contents_body .btn_add_private:hover {
      background-color: #fff;
      color: #545152; }
  .floating_layer .management_config_contents .contents_body .btn_add_private {
    line-height: 19.5px;
    line-height: 1.3rem; }
  .floating_layer .management_config_contents .contents_body .link_created .btn_remove_link {
    border: 0;
    outline: 0;
    background: none;
    vertical-align: middle; }
    .floating_layer .management_config_contents .contents_body .link_created .btn_remove_link img {
      width: 16px;
      width: 1.6rem;
      vertical-align: bottom; }
  .floating_layer .management_config_contents .contents_body .copy_link:hover {
    color: #4285f4; }
  .floating_layer .management_config_contents .contents_footer button {
    padding: 1rem 1.5rem; }
  .floating_layer .management_config_contents .block_grid .tab_name {
    width: 25%; }
  .floating_layer .management_config_contents .btn_set_active_all[data-term="Y"] {
    background-color: #90ca76; }
  .floating_layer .management_config_contents .btn_set_active_all[data-term="N"] {
    background-color: #e86e6d; }
  .floating_layer .management_pay_contents .contents_body {
    height: 70%; }
    .floating_layer .management_pay_contents .contents_body > div {
      height: 90%; }
    .floating_layer .management_pay_contents .contents_body th[data-col=col1] {
      width: 40%; }
    .floating_layer .management_pay_contents .contents_body th[data-col=col2] {
      width: 29%; }
    .floating_layer .management_pay_contents .contents_body th[data-col=col3] {
      width: 31%; }
    .floating_layer .management_pay_contents .contents_body td {
      word-break: break-all; }
    .floating_layer .management_pay_contents .contents_body .pay_type strong, .floating_layer .management_pay_contents .contents_body .pay_type span {
      display: block;
      float: left; }
    .floating_layer .management_pay_contents .contents_body tr.cancelled span {
      text-decoration: line-through;
      text-decoration-color: #ff7362; }
    .floating_layer .management_pay_contents .contents_body tr.cancelled .pay_date button {
      display: none; }
    .floating_layer .management_pay_contents .contents_body tr.cancelled .pay_cancelled {
      font-size: 14px;
      font-size: 1.1rem;
      text-decoration: none; }
    .device_mobile .pay_date span {
      float: left; }
    .floating_layer .management_pay_contents .contents_body .pay_date button {
      background-color: #545152;
      color: #fff;
      font-weight: 400;
      font-size: 14px;
      font-size: 1rem;
      margin: 0;
      padding: 1px 10px 3px;
      border-radius: 30px;
      border: 1px solid #bbb;
      vertical-align: middle;
      transition: color, background-color .3s ease-out; }
      .floating_layer .management_pay_contents .contents_body .pay_date button:hover {
        background-color: #fff;
        color: #545152; }
    .floating_layer .management_pay_contents .contents_body .commodity_purchase strong, .floating_layer .management_pay_contents .contents_body .commodity_order strong {
      color: white;
      margin-right: 10px;
      font-size: 14px;
      font-size: 1.1rem;
      line-height: 24px;
      line-height: 1.6rem;
      padding: 2px 4px;
      padding: .2rem .4rem; }
    .floating_layer .management_pay_contents .contents_body .commodity_purchase strong {
      background-color: #83d15a; }
    .floating_layer .management_pay_contents .contents_body .commodity_order strong {
      background-color: #40b2ff; }
  .floating_layer .require_login,
  .floating_layer .reorder_disable {
    position: absolute;
    bottom: 0;
    height: 70%;
    width: 100%; }
    .floating_layer .require_login p,
    .floating_layer .reorder_disable p {
      font-size: 26.4px;
      font-size: 2.4rem;
      line-height: 60px;
      line-height: 4rem; }
    .floating_layer .require_login a,
    .floating_layer .reorder_disable a {
      padding: 10px 15px;
      padding: 1rem 1.5rem;
      margin: 15px;
      background-color: #595f62;
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid #fff;
      border-radius: 50px;
      color: #fff;
      text-decoration: none; }
      .floating_layer .require_login a:hover,
      .floating_layer .reorder_disable a:hover {
        background-color: #787d7f;
        background-color: rgba(255, 255, 255, 0.4); }
  .floating_layer .gallery_contents .gallery_contents_item_list {
    padding: 0 8%;
    margin: 0 auto;
    text-align: left; }
  .floating_layer .gallery_contents .gallery_contents_item {
    position: relative;
    margin: 2%;
    overflow: hidden;
    display: block;
    float: left;
    width: 20.5%;
    transition: width .3s ease-out; }
    .floating_layer .gallery_contents .gallery_contents_item:after {
      display: block;
      content: '';
      padding-bottom: 100%; }
    .floating_layer .gallery_contents .gallery_contents_item img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      min-width: 100%;
      filter: blur(3px); }
    .floating_layer .gallery_contents .gallery_contents_item .background_wrap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .floating_layer .gallery_contents .gallery_contents_item .background_wrap .background_rect {
        display: block;
        width: 100%;
        height: 100%;
        background: #231f20;
        opacity: 0.7;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=70;
        filter: progid:DXImageTransform.Microsoft.Alpha Opacity=70;
        z-index: 1; }
      .floating_layer .gallery_contents .gallery_contents_item .background_wrap .background_circle {
        display: block;
        width: 50%;
        height: 50%;
        margin: 25%;
        background: #939393;
        opacity: 0.5;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=50;
        filter: progid:DXImageTransform.Microsoft.Alpha Opacity=50;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        z-index: 2; }
    .floating_layer .gallery_contents .gallery_contents_item .text_create_date {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-size: 1rem;
      z-index: 3; }
  .floating_layer .gallery_contents .contents_body {
    height: 70%; }
  .floating_layer .user_reply_contents .contents_header {
    height: 10%; }
  .floating_layer .user_reply_contents .contents_body {
    position: relative;
    height: calc(106% - 7rem);
    width: 100%; }
    .floating_layer .user_reply_contents .contents_body .reply_input_wrap.m_focused {
      height: 21rem; }
      @media (min-width: 500px) and (orientation: landscape) {
        .floating_layer .user_reply_contents .contents_body .reply_input_wrap.m_focused {
          height: 7rem; } }
      .floating_layer .user_reply_contents .contents_body .reply_input_wrap.m_focused .input_box {
        width: 95%;
        height: 94%; }
        @media (min-width: 500px) and (orientation: landscape) {
          .floating_layer .user_reply_contents .contents_body .reply_input_wrap.m_focused .input_box {
            height: 80%; } }
        .floating_layer .user_reply_contents .contents_body .reply_input_wrap.m_focused .input_box .reply_input {
          border-radius: 0;
          height: 85%;
          width: 99.5%;
          border-bottom: 1px solid rgba(255, 255, 255, 0.3);
          margin: 0; }
          @media (min-width: 500px) and (orientation: landscape) {
            .floating_layer .user_reply_contents .contents_body .reply_input_wrap.m_focused .input_box .reply_input {
              height: 47%; } }
        .floating_layer .user_reply_contents .contents_body .reply_input_wrap.m_focused .input_box .byte_indicator_wrap {
          float: left; }
        .floating_layer .user_reply_contents .contents_body .reply_input_wrap.m_focused .input_box .reply_input_submit_btn {
          float: right; }
    .floating_layer .user_reply_contents .contents_body .reply_input_wrap.pc_focused {
      height: 12rem; }
      .floating_layer .user_reply_contents .contents_body .reply_input_wrap.pc_focused .input_box {
        width: 95%;
        height: 89%; }
        .floating_layer .user_reply_contents .contents_body .reply_input_wrap.pc_focused .input_box .reply_input {
          height: 73%;
          width: 99.4%;
          border-bottom: 1px solid rgba(255, 255, 255, 0.3);
          margin: 0; }
        .floating_layer .user_reply_contents .contents_body .reply_input_wrap.pc_focused .input_box .byte_indicator_wrap {
          float: left; }
        .floating_layer .user_reply_contents .contents_body .reply_input_wrap.pc_focused .input_box .reply_input_submit_btn {
          float: right; }
    .floating_layer .user_reply_contents .contents_body .reply_input_wrap {
      width: 100%;
      height: 10%;
      background: #515151;
      height: 32px;
      height: 4rem;
      line-height: 32px;
      line-height: 4rem; }
      .floating_layer .user_reply_contents .contents_body .reply_input_wrap ::-webkit-input-placeholder {
        margin-left: 1rem;
        color: #ffffff;
        font-size: 15px;
        font-size: 1.2rem;
        font-weight: 300; }
      .floating_layer .user_reply_contents .contents_body .reply_input_wrap :-moz-placeholder {
        margin-left: 1rem;
        color: #ffffff;
        font-size: 15px;
        font-size: 1.2rem;
        font-weight: 300; }
      .floating_layer .user_reply_contents .contents_body .reply_input_wrap ::-moz-placeholder {
        margin-left: 1rem;
        color: #ffffff;
        font-size: 15px;
        font-size: 1.2rem;
        font-weight: 300; }
      .floating_layer .user_reply_contents .contents_body .reply_input_wrap :-ms-input-placeholder {
        margin-left: 1rem;
        color: #ffffff;
        font-size: 15px;
        font-size: 1.2rem;
        font-weight: 300; }
      .floating_layer .user_reply_contents .contents_body .reply_input_wrap div {
        display: inline-block; }
      .floating_layer .user_reply_contents .contents_body .reply_input_wrap .input_box {
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.3);
        line-height: 2.5rem;
        height: 2.5rem;
        width: 90%;
        vertical-align: middle; }
        @media (max-width: 500px) {
          .floating_layer .user_reply_contents .contents_body .reply_input_wrap .input_box {
            width: 80%; } }
        .floating_layer .user_reply_contents .contents_body .reply_input_wrap .input_box .byte_indicator_wrap {
          color: rgba(255, 255, 255, 0.5);
          font-size: 15px;
          font-size: 1.2rem;
          right: 6rem;
          float: right;
          margin-right: 0.5rem; }
        .floating_layer .user_reply_contents .contents_body .reply_input_wrap .input_box .reply_input {
          background: transparent;
          color: #ffffff;
          font-size: 15px;
          font-size: 1.2rem;
          font-weight: 300;
          resize: none;
          border: 0;
          width: 80%;
          float: left;
          height: 2rem;
          overflow: hidden;
          line-height: 2rem;
          margin-left: 0.5rem; }
        .floating_layer .user_reply_contents .contents_body .reply_input_wrap .input_box .reply_input:focus {
          outline: none; }
        .floating_layer .user_reply_contents .contents_body .reply_input_wrap .input_box #reply_input_fold {
          position: absolute;
          margin: 0 auto;
          width: 4rem;
          left: 0;
          right: 0;
          bottom: -1.2rem; }
      .floating_layer .user_reply_contents .contents_body .reply_input_wrap .reply_input_submit_btn {
        width: 4rem;
        height: 2.5rem;
        vertical-align: middle;
        margin-left: 0.7rem;
        background-color: #bdb8b0;
        border: 0;
        color: #ffffff;
        font-size: 15px;
        font-size: 1.2rem; }
    .floating_layer .user_reply_contents .contents_body .do_scroll {
      margin: 0;
      height: 91%; }
      .floating_layer .user_reply_contents .contents_body .do_scroll .reply_container .reply_wrap {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        line-height: 1.4; }
        .floating_layer .user_reply_contents .contents_body .do_scroll .reply_container .reply_wrap .reply_header {
          height: 5rem;
          line-height: 5rem;
          text-align: left;
          width: 100%; }
          .floating_layer .user_reply_contents .contents_body .do_scroll .reply_container .reply_wrap .reply_header div {
            display: inline-block; }
          .floating_layer .user_reply_contents .contents_body .do_scroll .reply_container .reply_wrap .reply_header .header_contexts {
            width: 30rem; }
            .floating_layer .user_reply_contents .contents_body .do_scroll .reply_container .reply_wrap .reply_header .header_contexts .user_name {
              margin-left: 2rem;
              font-size: 15px;
              font-size: 1.3rem;
              font-weight: 700;
              color: #fff; }
            .floating_layer .user_reply_contents .contents_body .do_scroll .reply_container .reply_wrap .reply_header .header_contexts .write_date {
              font-size: 14px;
              font-size: 1rem;
              font-weight: 300;
              color: rgba(255, 255, 255, 0.5);
              margin-left: 3%; }
          .floating_layer .user_reply_contents .contents_body .do_scroll .reply_container .reply_wrap .reply_header .button_wrap {
            float: right;
            height: 100%;
            margin-right: 3%; }
            .floating_layer .user_reply_contents .contents_body .do_scroll .reply_container .reply_wrap .reply_header .button_wrap img {
              width: 1rem;
              margin-top: 1rem;
              cursor: pointer; }
          .floating_layer .user_reply_contents .contents_body .do_scroll .reply_container .reply_wrap .reply_header .context_wrap {
            width: 40%;
            text-align: center;
            vertical-align: middle;
            display: table-cell; }
        .floating_layer .user_reply_contents .contents_body .do_scroll .reply_container .reply_wrap .reply_body {
          text-align: left;
          padding: 0 30px 30px 30px; }
          .floating_layer .user_reply_contents .contents_body .do_scroll .reply_container .reply_wrap .reply_body .body_context {
            font-size: 15px;
            font-size: 1.3rem;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.7); }
      .floating_layer .user_reply_contents .contents_body .do_scroll .reply_bottom_btn_wrap {
        height: 32px;
        height: 4rem;
        line-height: 32px;
        line-height: 4rem;
        cursor: pointer; }
        .floating_layer .user_reply_contents .contents_body .do_scroll .reply_bottom_btn_wrap .btn_expend {
          background: transparent;
          color: #ffffff;
          font-size: 15px;
          font-size: 1.2rem;
          border: 0; }
        .floating_layer .user_reply_contents .contents_body .do_scroll .reply_bottom_btn_wrap img {
          width: 1rem;
          margin-left: 1rem; }

.photo_layer {
  position: absolute; }

.background_layer .smilecat_url, .background_layer .btn_management, .background_layer .btn_gallery, .background_layer .btn_reply, .background_layer .btn_copy_url {
  z-index: 1001; }

@media (max-height: 500px) {
  .background_layer .btn_reply {
    left: 9% !important; } }

.device_pc .background_layer .smilecat_url {
  width: 115px !important;
  height: 22.5px !important; }

.device_pc .background_layer .btn_management, .device_pc .background_layer .btn_gallery, .device_pc .background_layer .btn_show_guide, .device_pc .background_layer .btn_reply, .device_pc .background_layer .btn_copy_url {
  width: 25px !important;
  height: 25px !important;
  padding: 10px; }

.background_layer .btn_management, .background_layer .btn_gallery, .background_layer .btn_reply, .background_layer .btn_copy_url {
  transition: all 1s ease;
  cursor: pointer;
  padding: 1%; }
  .background_layer .btn_management:hover:not(.btn_reply), .background_layer .btn_gallery:hover:not(.btn_reply), .background_layer .btn_reply:hover:not(.btn_reply), .background_layer .btn_copy_url:hover:not(.btn_reply) {
    transform: rotateZ(90deg); }

.background_layer .btn_show_guide {
  transition: all .3s ease;
  cursor: pointer;
  padding: 1%; }
  .background_layer .btn_show_guide:hover {
    transform: scale(1.1); }
  .background_layer .btn_show_guide.shy_guide {
    animation: shy_guide 3s ease-out; }

.background_layer .btn_reply .reply_count {
  width: 2rem;
  height: 2rem;
  background: black;
  color: #ffffff;
  bottom: 1.8rem;
  left: 1.8rem;
  position: absolute;
  border-radius: 1rem;
  line-height: 2rem;
  font-size: 0.9rem;
  text-align: center; }

.background_layer .preview_guide_wrapper {
  position: absolute;
  width: 100%;
  height: 7rem;
  background-color: rgba(0, 0, 0, 0.7);
  bottom: 0;
  z-index: 2000;
  display: table;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  opacity: 1; }
  .background_layer .preview_guide_wrapper.hide {
    opacity: 0; }
  .background_layer .preview_guide_wrapper .content_wrap {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    padding: 0 8% 0 8%; }
    .background_layer .preview_guide_wrapper .content_wrap img {
      width: 2.4rem;
      vertical-align: middle;
      cursor: pointer; }
      .background_layer .preview_guide_wrapper .content_wrap img.close_btn {
        float: right; }
    .background_layer .preview_guide_wrapper .content_wrap span {
      font-size: 16.5px;
      font-size: 1.5rem;
      color: #ffffff;
      vertical-align: middle;
      margin-left: 2%; }
      @media (min-width: 500px) and (orientation: landscape) {
        .background_layer .preview_guide_wrapper .content_wrap span {
          font-size: 25.3px;
          font-size: 2.3rem; } }

.block_grid {
  clear: left;
  margin: 0 0 3%;
  margin: 0 0 1.5rem;
  text-align: left;
  height: 35px;
  height: 3.5rem;
  line-height: 52.5px;
  line-height: 3.5rem; }
  .block_grid .tab_name {
    display: block;
    width: 20%;
    text-align: left;
    margin: 0 0 0 10%;
    float: left; }
  .block_grid input[type=text] {
    height: 35px;
    height: 3.5rem;
    font-size: 16.5px;
    font-size: 1.5rem;
    line-height: 52.5px;
    line-height: 3.5rem;
    width: 60%;
    text-indent: 10px;
    background-color: #404b4b;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #535050;
    outline: 0;
    padding: 0;
    color: #fff; }
    .block_grid input[type=text]:active, .block_grid input[type=text]:focus {
      border-color: #fa4a4e; }

@keyframes dancee {
  0%, 50%, 100% { }
  25% {
    transform: rotateZ(-10deg); }
  75% {
    transform: rotateZ(10deg); } }

@keyframes dance3 {
  0%, 100% {
    transform: translate(-150%, -200%); }
  10% {
    transform: translate(150%, -200%); }
  20% {
    transform: translate(150%, 0); }
  30% {
    transform: translate(-100%, -100%); }
  40%, 80% {
    transform: translate(150%, -100%); } }

@keyframes scale_ani {
  0%, 100% {
    transform: scale(1) rotateZ(0deg); }
  25% {
    transform: scale(1.05) rotateZ(1deg); }
  50% {
    transform: scale(1) rotateZ(0deg); }
  75% {
    transform: scale(1.05) rotateZ(-1deg); } }

@keyframes shy_guide {
  0% {
    transform: scale(1); }
  25% {
    transform: scale(1.5) rotateZ(15deg); }
  50% {
    transform: scale(1.4); }
  75% {
    transform: scale(1.7) rotateZ(-15deg); }
  100% {
    transform: scale(1); } }

.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  perspective: 1000px; }

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0); }
  20%, 80% {
    transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
    border-color: #fa4a4e; }
  40%, 60% {
    transform: translate3d(4px, 0, 0); } }

.hidden_input_number {
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(141deg, #2b3838 0%, #131617 20%, #3a4448 40%, #10191d 60%, #293033 80%) !important; }
  .hidden_input_number .hidden_input_contents {
    position: relative;
    width: 80%;
    height: 35%;
    margin: 0 auto;
    text-align: center; }
  .hidden_input_number h1 {
    margin: 30px 0 10px;
    padding: 0;
    text-align: center;
    color: #fff; }
  .hidden_input_number input {
    position: absolute;
    top: -100%;
    left: -100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: transparent; }
    .hidden_input_number input:focus + label,
    .hidden_input_number input:focus ~ .fill + label {
      background: #fff; }
      .hidden_input_number input:focus + label:before,
      .hidden_input_number input:focus ~ .fill + label:before {
        content: '';
        border-bottom-color: transparent;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggleSvg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.st0{animation:shift .53s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-50%);}}%3C/style%3E%3Cpath fill='none' stroke='%23f00' stroke-width='1' class='st0' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
        background-position: 0 90%;
        background-size: auto 5px;
        background-repeat: repeat-x;
        padding-bottom: 3%;
        text-decoration: none;
        border-bottom: none;
        width: 200%;
        height: 100%;
        margin: 0; }
      .hidden_input_number input:focus + label.fill,
      .hidden_input_number input:focus ~ .fill + label.fill {
        background: #34383a; }
        .hidden_input_number input:focus + label.fill:before,
        .hidden_input_number input:focus ~ .fill + label.fill:before {
          display: none; }
    .hidden_input_number input:focus ~ label .img_cursor {
      display: none !important; }
    .hidden_input_number input + label .img_cursor {
      display: block; }
      .hidden_input_number input + label .img_cursor.fill {
        display: none; }
  .hidden_input_number label {
    cursor: pointer;
    cursor: url("/digital_photobook/resources/image/floating/pointer_s.png") 0 0, pointer;
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 20%;
    height: 50%;
    height: 15vw;
    background: #34383a;
    background-image: none;
    color: #fff;
    font-size: 50px;
    font-size: 10vw;
    margin: 1%;
    border-radius: 10px;
    border: 3px solid #4c4a4b;
    vertical-align: top; }
    .hidden_input_number label.fill {
      background-color: #1f1f1f;
      border-color: #fff; }
      .hidden_input_number label.fill .img_cursor {
        display: none; }
      .hidden_input_number label.fill + label .img_cursor {
        display: block; }
      .hidden_input_number label.fill + label.fill .img_cursor {
        display: none; }
    .hidden_input_number label span {
      display: block;
      line-height: 15vw; }
  .hidden_input_number .btn_wrap {
    display: block;
    position: relative;
    text-align: center;
    margin-top: 5%; }
    .hidden_input_number .btn_wrap button {
      margin: 0 3%;
      padding: 1.2% 4%;
      outline: none;
      border: 0;
      background-color: transparent;
      color: #fff;
      font-size: 22px;
      font-size: 2rem;
      font-weight: 600;
      border-radius: 4rem;
      line-height: 1; }
      .hidden_input_number .btn_wrap button.btn_accept {
        bottom: 3%;
        right: 2%;
        background-color: #fa4a4e; }
      .hidden_input_number .btn_wrap button.btn_deny {
        right: 6%;
        bottom: 3%;
        background-color: #7a7a7a; }
  .hidden_input_number .img_cursor {
    display: none;
    position: absolute;
    top: 88%;
    left: 38%;
    width: 24%;
    color: #fff;
    animation: dance3 15s infinite; }
  .hidden_input_number .alert_message {
    color: #fff;
    text-align: center; }
  .hidden_input_number .btn_close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2; }
    .hidden_input_number .btn_close span {
      position: relative;
      font-size: 19.8px;
      font-size: 1.8rem;
      line-height: 75px;
      line-height: 5rem;
      margin-right: 15px;
      margin-right: 1.6rem; }
    .hidden_input_number .btn_close img {
      position: absolute;
      height: 120%;
      top: -10%;
      right: 0;
      cursor: pointer; }

@keyframes asnyc_loading {
  0%, 25%, 75%, 100% {
    width: 75%;
    height: 75%; }
  50% {
    width: 150%;
    height: 150%; } }

#appAsyncLoading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50000000000; }
  #appAsyncLoading .async_loading_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.6;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=60;
    filter: progid:DXImageTransform.Microsoft.Alpha Opacity=60; }
  #appAsyncLoading table {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    font-size: 27.5px;
    font-size: 2.5rem; }
  #appAsyncLoading .async_loading_box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto; }
    #appAsyncLoading .async_loading_box .async_loading_static_image {
      width: 100%;
      transform: translateY(-18018px); }
    #appAsyncLoading .async_loading_box .async_animation_block {
      position: absolute;
      width: 100px;
      height: 100px;
      margin: 0 auto;
      top: -18018px;
      left: 0;
      transform: translateY(18018px); }
      #appAsyncLoading .async_loading_box .async_animation_block div {
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        width: 10%;
        height: 10%; }
        #appAsyncLoading .async_loading_box .async_animation_block div:after {
          position: absolute;
          display: block;
          width: 100%;
          height: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          content: '';
          animation: asnyc_loading 1s linear infinite;
          background-color: #fff;
          border-radius: 50%; }
        #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(1) {
          transform: translate(-50%, -50%) translate(229.81333%, 192.83628%); }
          #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(1):after {
            animation-delay: 0.11111s; }
        #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(2) {
          transform: translate(-50%, -50%) translate(52.09445%, 295.44233%); }
          #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(2):after {
            animation-delay: 0.22222s; }
        #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(3) {
          transform: translate(-50%, -50%) translate(-150%, 259.80762%); }
          #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(3):after {
            animation-delay: 0.33333s; }
        #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(4) {
          transform: translate(-50%, -50%) translate(-281.90779%, 102.60604%); }
          #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(4):after {
            animation-delay: 0.44444s; }
        #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(5) {
          transform: translate(-50%, -50%) translate(-281.90779%, -102.60604%); }
          #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(5):after {
            animation-delay: 0.55556s; }
        #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(6) {
          transform: translate(-50%, -50%) translate(-149.99999%, -259.80762%); }
          #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(6):after {
            animation-delay: 0.66667s; }
        #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(7) {
          transform: translate(-50%, -50%) translate(52.09482%, -295.44225%); }
          #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(7):after {
            animation-delay: 0.77778s; }
        #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(8) {
          transform: translate(-50%, -50%) translate(229.8202%, -192.83461%); }
          #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(8):after {
            animation-delay: 0.88889s; }
        #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(9) {
          transform: translate(-50%, -50%) translate(300.09037%, 0.02482%); }
          #appAsyncLoading .async_loading_box .async_animation_block div:nth-child(9):after {
            animation-delay: 1s; }

@keyframes rolling0 {
  0% {
    transform: translateX(0); }
  33% {
    transform: translateX(-100%); }
  66% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(-200%); } }

.rolling_text_wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  left: 0;
  height: 40%;
  height: 4rem;
  background: rgba(255, 255, 255, 0.05); }
  .rolling_text_wrap .rolling_text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: opacity 1s ease-out;
    opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=0;
    filter: progid:DXImageTransform.Microsoft.Alpha Opacity=0; }
    .rolling_text_wrap .rolling_text.fade_in {
      opacity: 1;
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=100;
      filter: progid:DXImageTransform.Microsoft.Alpha Opacity=100; }
    .rolling_text_wrap .rolling_text p {
      line-height: 60px;
      line-height: 4rem;
      margin: 0 0 0 4%;
      -webkit-text-size-adjust: none;
      color: #ffffff;
      font-size: 17.6px;
      font-size: 1.6rem; }

@-webkit-keyframes rolling2 {
  20% {
    transform: translateY(0); }
  40% {
    transform: translateY(-100%); }
  60% {
    transform: translateY(-100%); }
  80% {
    transform: translateY(-200%); }
  100% {
    transform: translateY(-200%); } }

@-moz-keyframes rolling2 {
  20% {
    transform: translateY(0); }
  40% {
    transform: translateY(-100%); }
  60% {
    transform: translateY(-100%); }
  80% {
    transform: translateY(-200%); }
  100% {
    transform: translateY(-200%); } }

@-o-keyframes rolling2 {
  20% {
    transform: translateY(0); }
  40% {
    transform: translateY(-100%); }
  60% {
    transform: translateY(-100%); }
  80% {
    transform: translateY(-200%); }
  100% {
    transform: translateY(-200%); } }

@keyframes rolling2 {
  20% {
    transform: translateY(0); }
  40% {
    transform: translateY(-100%); }
  60% {
    transform: translateY(-100%); }
  80% {
    transform: translateY(-200%); }
  100% {
    transform: translateY(-200%); } }

@-webkit-keyframes rolling3 {
  14.28571% {
    transform: translateY(0); }
  28.57143% {
    transform: translateY(-100%); }
  42.85714% {
    transform: translateY(-100%); }
  57.14286% {
    transform: translateY(-200%); }
  71.42857% {
    transform: translateY(-200%); }
  85.71429% {
    transform: translateY(-300%); }
  100% {
    transform: translateY(-300%); } }

@-moz-keyframes rolling3 {
  14.28571% {
    transform: translateY(0); }
  28.57143% {
    transform: translateY(-100%); }
  42.85714% {
    transform: translateY(-100%); }
  57.14286% {
    transform: translateY(-200%); }
  71.42857% {
    transform: translateY(-200%); }
  85.71429% {
    transform: translateY(-300%); }
  100% {
    transform: translateY(-300%); } }

@-o-keyframes rolling3 {
  14.28571% {
    transform: translateY(0); }
  28.57143% {
    transform: translateY(-100%); }
  42.85714% {
    transform: translateY(-100%); }
  57.14286% {
    transform: translateY(-200%); }
  71.42857% {
    transform: translateY(-200%); }
  85.71429% {
    transform: translateY(-300%); }
  100% {
    transform: translateY(-300%); } }

@keyframes rolling3 {
  14.28571% {
    transform: translateY(0); }
  28.57143% {
    transform: translateY(-100%); }
  42.85714% {
    transform: translateY(-100%); }
  57.14286% {
    transform: translateY(-200%); }
  71.42857% {
    transform: translateY(-200%); }
  85.71429% {
    transform: translateY(-300%); }
  100% {
    transform: translateY(-300%); } }

@-webkit-keyframes rolling4 {
  11.11111% {
    transform: translateY(0); }
  22.22222% {
    transform: translateY(-100%); }
  33.33333% {
    transform: translateY(-100%); }
  44.44444% {
    transform: translateY(-200%); }
  55.55556% {
    transform: translateY(-200%); }
  66.66667% {
    transform: translateY(-300%); }
  77.77778% {
    transform: translateY(-300%); }
  88.88889% {
    transform: translateY(-400%); }
  100% {
    transform: translateY(-400%); } }

@-moz-keyframes rolling4 {
  11.11111% {
    transform: translateY(0); }
  22.22222% {
    transform: translateY(-100%); }
  33.33333% {
    transform: translateY(-100%); }
  44.44444% {
    transform: translateY(-200%); }
  55.55556% {
    transform: translateY(-200%); }
  66.66667% {
    transform: translateY(-300%); }
  77.77778% {
    transform: translateY(-300%); }
  88.88889% {
    transform: translateY(-400%); }
  100% {
    transform: translateY(-400%); } }

@-o-keyframes rolling4 {
  11.11111% {
    transform: translateY(0); }
  22.22222% {
    transform: translateY(-100%); }
  33.33333% {
    transform: translateY(-100%); }
  44.44444% {
    transform: translateY(-200%); }
  55.55556% {
    transform: translateY(-200%); }
  66.66667% {
    transform: translateY(-300%); }
  77.77778% {
    transform: translateY(-300%); }
  88.88889% {
    transform: translateY(-400%); }
  100% {
    transform: translateY(-400%); } }

@keyframes rolling4 {
  11.11111% {
    transform: translateY(0); }
  22.22222% {
    transform: translateY(-100%); }
  33.33333% {
    transform: translateY(-100%); }
  44.44444% {
    transform: translateY(-200%); }
  55.55556% {
    transform: translateY(-200%); }
  66.66667% {
    transform: translateY(-300%); }
  77.77778% {
    transform: translateY(-300%); }
  88.88889% {
    transform: translateY(-400%); }
  100% {
    transform: translateY(-400%); } }

@-webkit-keyframes rolling5 {
  9.09091% {
    transform: translateY(0); }
  18.18182% {
    transform: translateY(-100%); }
  27.27273% {
    transform: translateY(-100%); }
  36.36364% {
    transform: translateY(-200%); }
  45.45455% {
    transform: translateY(-200%); }
  54.54545% {
    transform: translateY(-300%); }
  63.63636% {
    transform: translateY(-300%); }
  72.72727% {
    transform: translateY(-400%); }
  81.81818% {
    transform: translateY(-400%); }
  90.90909% {
    transform: translateY(-500%); }
  100% {
    transform: translateY(-500%); } }

@-moz-keyframes rolling5 {
  9.09091% {
    transform: translateY(0); }
  18.18182% {
    transform: translateY(-100%); }
  27.27273% {
    transform: translateY(-100%); }
  36.36364% {
    transform: translateY(-200%); }
  45.45455% {
    transform: translateY(-200%); }
  54.54545% {
    transform: translateY(-300%); }
  63.63636% {
    transform: translateY(-300%); }
  72.72727% {
    transform: translateY(-400%); }
  81.81818% {
    transform: translateY(-400%); }
  90.90909% {
    transform: translateY(-500%); }
  100% {
    transform: translateY(-500%); } }

@-o-keyframes rolling5 {
  9.09091% {
    transform: translateY(0); }
  18.18182% {
    transform: translateY(-100%); }
  27.27273% {
    transform: translateY(-100%); }
  36.36364% {
    transform: translateY(-200%); }
  45.45455% {
    transform: translateY(-200%); }
  54.54545% {
    transform: translateY(-300%); }
  63.63636% {
    transform: translateY(-300%); }
  72.72727% {
    transform: translateY(-400%); }
  81.81818% {
    transform: translateY(-400%); }
  90.90909% {
    transform: translateY(-500%); }
  100% {
    transform: translateY(-500%); } }

@keyframes rolling5 {
  9.09091% {
    transform: translateY(0); }
  18.18182% {
    transform: translateY(-100%); }
  27.27273% {
    transform: translateY(-100%); }
  36.36364% {
    transform: translateY(-200%); }
  45.45455% {
    transform: translateY(-200%); }
  54.54545% {
    transform: translateY(-300%); }
  63.63636% {
    transform: translateY(-300%); }
  72.72727% {
    transform: translateY(-400%); }
  81.81818% {
    transform: translateY(-400%); }
  90.90909% {
    transform: translateY(-500%); }
  100% {
    transform: translateY(-500%); } }

@-webkit-keyframes rolling6 {
  7.69231% {
    transform: translateY(0); }
  15.38462% {
    transform: translateY(-100%); }
  23.07692% {
    transform: translateY(-100%); }
  30.76923% {
    transform: translateY(-200%); }
  38.46154% {
    transform: translateY(-200%); }
  46.15385% {
    transform: translateY(-300%); }
  53.84615% {
    transform: translateY(-300%); }
  61.53846% {
    transform: translateY(-400%); }
  69.23077% {
    transform: translateY(-400%); }
  76.92308% {
    transform: translateY(-500%); }
  84.61538% {
    transform: translateY(-500%); }
  92.30769% {
    transform: translateY(-600%); }
  100% {
    transform: translateY(-600%); } }

@-moz-keyframes rolling6 {
  7.69231% {
    transform: translateY(0); }
  15.38462% {
    transform: translateY(-100%); }
  23.07692% {
    transform: translateY(-100%); }
  30.76923% {
    transform: translateY(-200%); }
  38.46154% {
    transform: translateY(-200%); }
  46.15385% {
    transform: translateY(-300%); }
  53.84615% {
    transform: translateY(-300%); }
  61.53846% {
    transform: translateY(-400%); }
  69.23077% {
    transform: translateY(-400%); }
  76.92308% {
    transform: translateY(-500%); }
  84.61538% {
    transform: translateY(-500%); }
  92.30769% {
    transform: translateY(-600%); }
  100% {
    transform: translateY(-600%); } }

@-o-keyframes rolling6 {
  7.69231% {
    transform: translateY(0); }
  15.38462% {
    transform: translateY(-100%); }
  23.07692% {
    transform: translateY(-100%); }
  30.76923% {
    transform: translateY(-200%); }
  38.46154% {
    transform: translateY(-200%); }
  46.15385% {
    transform: translateY(-300%); }
  53.84615% {
    transform: translateY(-300%); }
  61.53846% {
    transform: translateY(-400%); }
  69.23077% {
    transform: translateY(-400%); }
  76.92308% {
    transform: translateY(-500%); }
  84.61538% {
    transform: translateY(-500%); }
  92.30769% {
    transform: translateY(-600%); }
  100% {
    transform: translateY(-600%); } }

@keyframes rolling6 {
  7.69231% {
    transform: translateY(0); }
  15.38462% {
    transform: translateY(-100%); }
  23.07692% {
    transform: translateY(-100%); }
  30.76923% {
    transform: translateY(-200%); }
  38.46154% {
    transform: translateY(-200%); }
  46.15385% {
    transform: translateY(-300%); }
  53.84615% {
    transform: translateY(-300%); }
  61.53846% {
    transform: translateY(-400%); }
  69.23077% {
    transform: translateY(-400%); }
  76.92308% {
    transform: translateY(-500%); }
  84.61538% {
    transform: translateY(-500%); }
  92.30769% {
    transform: translateY(-600%); }
  100% {
    transform: translateY(-600%); } }

@-webkit-keyframes rolling7 {
  6.66667% {
    transform: translateY(0); }
  13.33333% {
    transform: translateY(-100%); }
  20% {
    transform: translateY(-100%); }
  26.66667% {
    transform: translateY(-200%); }
  33.33333% {
    transform: translateY(-200%); }
  40% {
    transform: translateY(-300%); }
  46.66667% {
    transform: translateY(-300%); }
  53.33333% {
    transform: translateY(-400%); }
  60% {
    transform: translateY(-400%); }
  66.66667% {
    transform: translateY(-500%); }
  73.33333% {
    transform: translateY(-500%); }
  80% {
    transform: translateY(-600%); }
  86.66667% {
    transform: translateY(-600%); }
  93.33333% {
    transform: translateY(-700%); }
  100% {
    transform: translateY(-700%); } }

@-moz-keyframes rolling7 {
  6.66667% {
    transform: translateY(0); }
  13.33333% {
    transform: translateY(-100%); }
  20% {
    transform: translateY(-100%); }
  26.66667% {
    transform: translateY(-200%); }
  33.33333% {
    transform: translateY(-200%); }
  40% {
    transform: translateY(-300%); }
  46.66667% {
    transform: translateY(-300%); }
  53.33333% {
    transform: translateY(-400%); }
  60% {
    transform: translateY(-400%); }
  66.66667% {
    transform: translateY(-500%); }
  73.33333% {
    transform: translateY(-500%); }
  80% {
    transform: translateY(-600%); }
  86.66667% {
    transform: translateY(-600%); }
  93.33333% {
    transform: translateY(-700%); }
  100% {
    transform: translateY(-700%); } }

@-o-keyframes rolling7 {
  6.66667% {
    transform: translateY(0); }
  13.33333% {
    transform: translateY(-100%); }
  20% {
    transform: translateY(-100%); }
  26.66667% {
    transform: translateY(-200%); }
  33.33333% {
    transform: translateY(-200%); }
  40% {
    transform: translateY(-300%); }
  46.66667% {
    transform: translateY(-300%); }
  53.33333% {
    transform: translateY(-400%); }
  60% {
    transform: translateY(-400%); }
  66.66667% {
    transform: translateY(-500%); }
  73.33333% {
    transform: translateY(-500%); }
  80% {
    transform: translateY(-600%); }
  86.66667% {
    transform: translateY(-600%); }
  93.33333% {
    transform: translateY(-700%); }
  100% {
    transform: translateY(-700%); } }

@keyframes rolling7 {
  6.66667% {
    transform: translateY(0); }
  13.33333% {
    transform: translateY(-100%); }
  20% {
    transform: translateY(-100%); }
  26.66667% {
    transform: translateY(-200%); }
  33.33333% {
    transform: translateY(-200%); }
  40% {
    transform: translateY(-300%); }
  46.66667% {
    transform: translateY(-300%); }
  53.33333% {
    transform: translateY(-400%); }
  60% {
    transform: translateY(-400%); }
  66.66667% {
    transform: translateY(-500%); }
  73.33333% {
    transform: translateY(-500%); }
  80% {
    transform: translateY(-600%); }
  86.66667% {
    transform: translateY(-600%); }
  93.33333% {
    transform: translateY(-700%); }
  100% {
    transform: translateY(-700%); } }

@-webkit-keyframes rolling8 {
  5.88235% {
    transform: translateY(0); }
  11.76471% {
    transform: translateY(-100%); }
  17.64706% {
    transform: translateY(-100%); }
  23.52941% {
    transform: translateY(-200%); }
  29.41176% {
    transform: translateY(-200%); }
  35.29412% {
    transform: translateY(-300%); }
  41.17647% {
    transform: translateY(-300%); }
  47.05882% {
    transform: translateY(-400%); }
  52.94118% {
    transform: translateY(-400%); }
  58.82353% {
    transform: translateY(-500%); }
  64.70588% {
    transform: translateY(-500%); }
  70.58824% {
    transform: translateY(-600%); }
  76.47059% {
    transform: translateY(-600%); }
  82.35294% {
    transform: translateY(-700%); }
  88.23529% {
    transform: translateY(-700%); }
  94.11765% {
    transform: translateY(-800%); }
  100% {
    transform: translateY(-800%); } }

@-moz-keyframes rolling8 {
  5.88235% {
    transform: translateY(0); }
  11.76471% {
    transform: translateY(-100%); }
  17.64706% {
    transform: translateY(-100%); }
  23.52941% {
    transform: translateY(-200%); }
  29.41176% {
    transform: translateY(-200%); }
  35.29412% {
    transform: translateY(-300%); }
  41.17647% {
    transform: translateY(-300%); }
  47.05882% {
    transform: translateY(-400%); }
  52.94118% {
    transform: translateY(-400%); }
  58.82353% {
    transform: translateY(-500%); }
  64.70588% {
    transform: translateY(-500%); }
  70.58824% {
    transform: translateY(-600%); }
  76.47059% {
    transform: translateY(-600%); }
  82.35294% {
    transform: translateY(-700%); }
  88.23529% {
    transform: translateY(-700%); }
  94.11765% {
    transform: translateY(-800%); }
  100% {
    transform: translateY(-800%); } }

@-o-keyframes rolling8 {
  5.88235% {
    transform: translateY(0); }
  11.76471% {
    transform: translateY(-100%); }
  17.64706% {
    transform: translateY(-100%); }
  23.52941% {
    transform: translateY(-200%); }
  29.41176% {
    transform: translateY(-200%); }
  35.29412% {
    transform: translateY(-300%); }
  41.17647% {
    transform: translateY(-300%); }
  47.05882% {
    transform: translateY(-400%); }
  52.94118% {
    transform: translateY(-400%); }
  58.82353% {
    transform: translateY(-500%); }
  64.70588% {
    transform: translateY(-500%); }
  70.58824% {
    transform: translateY(-600%); }
  76.47059% {
    transform: translateY(-600%); }
  82.35294% {
    transform: translateY(-700%); }
  88.23529% {
    transform: translateY(-700%); }
  94.11765% {
    transform: translateY(-800%); }
  100% {
    transform: translateY(-800%); } }

@keyframes rolling8 {
  5.88235% {
    transform: translateY(0); }
  11.76471% {
    transform: translateY(-100%); }
  17.64706% {
    transform: translateY(-100%); }
  23.52941% {
    transform: translateY(-200%); }
  29.41176% {
    transform: translateY(-200%); }
  35.29412% {
    transform: translateY(-300%); }
  41.17647% {
    transform: translateY(-300%); }
  47.05882% {
    transform: translateY(-400%); }
  52.94118% {
    transform: translateY(-400%); }
  58.82353% {
    transform: translateY(-500%); }
  64.70588% {
    transform: translateY(-500%); }
  70.58824% {
    transform: translateY(-600%); }
  76.47059% {
    transform: translateY(-600%); }
  82.35294% {
    transform: translateY(-700%); }
  88.23529% {
    transform: translateY(-700%); }
  94.11765% {
    transform: translateY(-800%); }
  100% {
    transform: translateY(-800%); } }

@-webkit-keyframes rolling9 {
  5.26316% {
    transform: translateY(0); }
  10.52632% {
    transform: translateY(-100%); }
  15.78947% {
    transform: translateY(-100%); }
  21.05263% {
    transform: translateY(-200%); }
  26.31579% {
    transform: translateY(-200%); }
  31.57895% {
    transform: translateY(-300%); }
  36.84211% {
    transform: translateY(-300%); }
  42.10526% {
    transform: translateY(-400%); }
  47.36842% {
    transform: translateY(-400%); }
  52.63158% {
    transform: translateY(-500%); }
  57.89474% {
    transform: translateY(-500%); }
  63.15789% {
    transform: translateY(-600%); }
  68.42105% {
    transform: translateY(-600%); }
  73.68421% {
    transform: translateY(-700%); }
  78.94737% {
    transform: translateY(-700%); }
  84.21053% {
    transform: translateY(-800%); }
  89.47368% {
    transform: translateY(-800%); }
  94.73684% {
    transform: translateY(-900%); }
  100% {
    transform: translateY(-900%); } }

@-moz-keyframes rolling9 {
  5.26316% {
    transform: translateY(0); }
  10.52632% {
    transform: translateY(-100%); }
  15.78947% {
    transform: translateY(-100%); }
  21.05263% {
    transform: translateY(-200%); }
  26.31579% {
    transform: translateY(-200%); }
  31.57895% {
    transform: translateY(-300%); }
  36.84211% {
    transform: translateY(-300%); }
  42.10526% {
    transform: translateY(-400%); }
  47.36842% {
    transform: translateY(-400%); }
  52.63158% {
    transform: translateY(-500%); }
  57.89474% {
    transform: translateY(-500%); }
  63.15789% {
    transform: translateY(-600%); }
  68.42105% {
    transform: translateY(-600%); }
  73.68421% {
    transform: translateY(-700%); }
  78.94737% {
    transform: translateY(-700%); }
  84.21053% {
    transform: translateY(-800%); }
  89.47368% {
    transform: translateY(-800%); }
  94.73684% {
    transform: translateY(-900%); }
  100% {
    transform: translateY(-900%); } }

@-o-keyframes rolling9 {
  5.26316% {
    transform: translateY(0); }
  10.52632% {
    transform: translateY(-100%); }
  15.78947% {
    transform: translateY(-100%); }
  21.05263% {
    transform: translateY(-200%); }
  26.31579% {
    transform: translateY(-200%); }
  31.57895% {
    transform: translateY(-300%); }
  36.84211% {
    transform: translateY(-300%); }
  42.10526% {
    transform: translateY(-400%); }
  47.36842% {
    transform: translateY(-400%); }
  52.63158% {
    transform: translateY(-500%); }
  57.89474% {
    transform: translateY(-500%); }
  63.15789% {
    transform: translateY(-600%); }
  68.42105% {
    transform: translateY(-600%); }
  73.68421% {
    transform: translateY(-700%); }
  78.94737% {
    transform: translateY(-700%); }
  84.21053% {
    transform: translateY(-800%); }
  89.47368% {
    transform: translateY(-800%); }
  94.73684% {
    transform: translateY(-900%); }
  100% {
    transform: translateY(-900%); } }

@keyframes rolling9 {
  5.26316% {
    transform: translateY(0); }
  10.52632% {
    transform: translateY(-100%); }
  15.78947% {
    transform: translateY(-100%); }
  21.05263% {
    transform: translateY(-200%); }
  26.31579% {
    transform: translateY(-200%); }
  31.57895% {
    transform: translateY(-300%); }
  36.84211% {
    transform: translateY(-300%); }
  42.10526% {
    transform: translateY(-400%); }
  47.36842% {
    transform: translateY(-400%); }
  52.63158% {
    transform: translateY(-500%); }
  57.89474% {
    transform: translateY(-500%); }
  63.15789% {
    transform: translateY(-600%); }
  68.42105% {
    transform: translateY(-600%); }
  73.68421% {
    transform: translateY(-700%); }
  78.94737% {
    transform: translateY(-700%); }
  84.21053% {
    transform: translateY(-800%); }
  89.47368% {
    transform: translateY(-800%); }
  94.73684% {
    transform: translateY(-900%); }
  100% {
    transform: translateY(-900%); } }

@media only screen and (max-device-width: 800px) {
  .floating_layer.active .floating_group.active {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; } }

@media (min-width: 320px) {
  html {
    font-size: 11px; } }

@media (min-width: 480px) {
  html {
    font-size: 12px; } }

@media (min-width: 600px) {
  html {
    font-size: 13px; } }

@media (min-width: 801px) {
  html {
    font-size: 14px; } }

@media (min-width: 1025px) {
  html {
    font-size: 15px; }
  .floating_layer .menu_keep_contents button {
    max-width: initial; }
    .floating_layer .menu_keep_contents button[data-term="3"] {
      letter-spacing: 0; } }

@media (min-width: 1080px) {
  .floating_layer .menu_keep_contents button strong:before {
    content: '|';
    padding: 0 7px 0 2px;
    opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=50;
    filter: progid:DXImageTransform.Microsoft.Alpha Opacity=50; } }

@media (max-width: 456px) {
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon {
    margin: 0 10.25px 0 5px;
    margin: 0 0.25rem 0 0.5rem;
    height: 1px;
    height: 0.1rem;
    max-width: 1px;
    max-width: 0.1rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
      left: -6px;
      left: -0.6rem; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_title {
    margin-left: 7.5px;
    margin-left: 0.75rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_title:before {
      left: -3.75px;
      left: -0.375rem; }
  .block_grid .tab_name {
    margin: 0 5%;
    width: 25%; }
  .toggle_group[type=radio] ~ .value_on, .toggle_group[type=radio] ~ .value_off {
    margin-right: 3px; }
  .floating_layer .menu_config_contents table {
    width: 90%; }
  .floating_layer .menu_config_contents .contents_footer button {
    padding: 1rem 1rem; }
    .floating_layer .menu_config_contents .contents_footer button span {
      margin-right: 0; }
  .floating_layer .menu_share_contents .share_channel_list li {
    width: 26%; } }

@media (min-width: 456px) and (max-width: 600px) {
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon {
    margin: 0 10.35px 0 14px;
    margin: 0 0.35rem 0 1.4rem;
    height: 7px;
    height: 0.7rem;
    max-width: 7px;
    max-width: 0.7rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
      left: -17.5px;
      left: -1.75rem; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_title {
    margin-left: 17.5px;
    margin-left: 1.75rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_title:before {
      left: -8.75px;
      left: -0.875rem; }
  .floating_layer .menu_config_contents table {
    width: 77%; } }

@media (min-width: 601px) and (max-width: 700px) {
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon {
    margin: 0 10.7px 0 14px;
    margin: 0 0.7rem 0 1.4rem;
    height: 16px;
    height: 1.6rem;
    max-width: 16px;
    max-width: 1.6rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
      left: -30px;
      left: -3rem; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_title {
    margin-left: 21px;
    margin-left: 2.1rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_title:before {
      left: -10.5px;
      left: -1.05rem; }
  .floating_layer .menu_config_contents table {
    width: 77%; } }

@media (min-width: 700px) and (max-width: 1080px) {
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon {
    margin: 0 11px 0 24px;
    margin: 0 1rem 0 2.4rem;
    height: 16px;
    height: 1.6rem;
    max-width: 16px;
    max-width: 1.6rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
      left: -38px;
      left: -3.8rem; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_title {
    margin-left: 34px;
    margin-left: 3.4rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_title:before {
      left: -17px;
      left: -1.7rem; } }

@media (max-width: 767px) {
  html.device_mobile {
    font-size: 10px !important; } }

@media (max-width: 800px) {
  .floating_layer .management_config_contents .contents_body th[data-col=col1] {
    width: 18% !important; }
  .floating_layer .management_config_contents .contents_body th[data-col=col2] {
    width: 22% !important; }
  .floating_layer .management_config_contents .contents_body th[data-col=col3] {
    width: 26% !important; }
  .floating_layer .management_config_contents .contents_body th[data-col=col4] {
    width: 34% !important; }
  .floating_layer .management_pay_contents .contents_body th[data-col=col1] {
    width: 34%; }
  .floating_layer .management_pay_contents .contents_body th[data-col=col2] {
    width: 34%; }
  .floating_layer .management_pay_contents .contents_body th[data-col=col3] {
    width: 32%; }
  .floating_layer .gallery_contents .gallery_contents_item {
    width: 28.5%; } }

@media (orientation: landscape) and (max-device-width: 400px) {
  html {
    font-size: 10px; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon {
    margin: 0 10.3px 0 8px;
    margin: 0 0.3rem 0 0.8rem;
    height: 13px;
    height: 1.3rem;
    max-width: 13px;
    max-width: 1.3rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
      left: -20px;
      left: -2rem; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_title {
    margin-left: 11px;
    margin-left: 1.1rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_title:before {
      left: -5.5px;
      left: -0.55rem; } }

@media (orientation: landscape) and (max-device-width: 500px) {
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon {
    margin: 0 10.6px 0 14px;
    margin: 0 0.6rem 0 1.4rem;
    height: 14px;
    height: 1.4rem;
    max-width: 14px;
    max-width: 1.4rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
      left: -27px;
      left: -2.7rem; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_title {
    margin-left: 20px;
    margin-left: 2rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_title:before {
      left: -10px;
      left: -1rem; } }

@media (orientation: landscape) and (max-device-width: 600px) {
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon {
    margin: 0 10.9px 0 18px;
    margin: 0 0.9rem 0 1.8rem;
    height: 15px;
    height: 1.5rem;
    max-width: 15px;
    max-width: 1.5rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
      left: -33px;
      left: -3.3rem; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_title {
    margin-left: 27px;
    margin-left: 2.7rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_title:before {
      left: -13.5px;
      left: -1.35rem; } }

@media (orientation: landscape) and (max-device-width: 800px) {
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon {
    margin: 0 11px 0 24px;
    margin: 0 1rem 0 2.4rem;
    height: 16px;
    height: 1.6rem;
    max-width: 16px;
    max-width: 1.6rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
      left: -38px;
      left: -3.8rem; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_title {
    margin-left: 34px;
    margin-left: 3.4rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_title:before {
      left: -17px;
      left: -1.7rem; } }

@media (orientation: portrait) and (max-device-width: 700px) {
  html {
    font-size: 10px; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon {
    margin: 0 10.3px 0 8px;
    margin: 0 0.3rem 0 0.8rem;
    height: 13px;
    height: 1.3rem;
    max-width: 13px;
    max-width: 1.3rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
      left: -20px;
      left: -2rem; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_title {
    margin-left: 11px;
    margin-left: 1.1rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_title:before {
      left: -5.5px;
      left: -0.55rem; }
  .floating_layer .floating_group .floating_item_list {
    top: 60px;
    top: 6rem; }
  .floating_layer .floating_group .btn_hide_floating {
    top: 60px;
    top: 6rem; }
  .floating_layer .contents_header {
    height: 100px;
    height: 10rem; }
  .rolling_text_wrap {
    height: 60px;
    height: 6rem; }
  .rolling_text_wrap .rolling_text p {
    margin: 0 10% 0 4%;
    word-break: keep-all;
    line-height: 20px;
    line-height: 2rem;
    text-align: center; }
  .floating_layer .menu_keep_contents .copyright {
    float: right; } }

@media (orientation: portrait) and (min-device-width: 360px) {
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon {
    margin: 0 10.6px 0 15px;
    margin: 0 0.6rem 0 1.5rem;
    height: 13px;
    height: 1.3rem;
    max-width: 13px;
    max-width: 1.3rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
      left: -26.5px;
      left: -2.65rem; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_title {
    margin-left: 21px;
    margin-left: 2.1rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_title:before {
      left: -10.5px;
      left: -1.05rem; } }

@media (orientation: portrait) and (min-device-width: 400px) {
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon {
    margin: 0 10.8px 0 18px;
    margin: 0 0.8rem 0 1.8rem;
    height: 13px;
    height: 1.3rem;
    max-width: 13px;
    max-width: 1.3rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
      left: -30px;
      left: -3rem; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_title {
    margin-left: 26px;
    margin-left: 2.6rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_title:before {
      left: -13px;
      left: -1.3rem; } }

@media (orientation: portrait) and (min-device-width: 700px) {
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon {
    margin: 0 11.1px 0 30px;
    margin: 0 1.1rem 0 3rem;
    height: 13px;
    height: 1.3rem;
    max-width: 13px;
    max-width: 1.3rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_icon + .menu_tab_title:before {
      left: -39px;
      left: -3.9rem; }
  .floating_layer .floating_group.active .floating_item_list li .menu_tab_title {
    margin-left: 41px;
    margin-left: 4.1rem; }
    .floating_layer .floating_group.active .floating_item_list li .menu_tab_title:before {
      left: -20.5px;
      left: -2.05rem; } }

.guide_wrap {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  text-align: center; }
  .guide_wrap .guide_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.7;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha Opacity=70;
    filter: progid:DXImageTransform.Microsoft.Alpha Opacity=70;
    z-index: 10000; }
  .guide_wrap .guide_text_wrap {
    position: fixed;
    top: 43%;
    left: 0;
    width: 100%;
    height: 14%;
    z-index: 10002; }
    .guide_wrap .guide_text_wrap .guide_text {
      position: relative;
      height: 100%; }
  .guide_wrap .guide_gesture {
    position: absolute;
    height: 90%;
    right: 5%;
    top: 5%;
    z-index: 10000; }
  .guide_wrap .guide_gesture_text {
    position: absolute;
    height: 25px;
    right: -4%;
    top: -4%;
    z-index: 10001; }
  .guide_wrap .guide_share_wrap,
  .guide_wrap .guide_gallery_wrap {
    position: fixed;
    bottom: 3%;
    width: 35px;
    height: 35px;
    z-index: 10000; }
  .guide_wrap .guide_share_wrap {
    left: 3%; }
    .guide_wrap .guide_share_wrap .guide_share_icon {
      position: relative;
      height: 100%;
      z-index: 10001; }
    .guide_wrap .guide_share_wrap .guide_share_tail {
      position: absolute;
      left: 23%;
      bottom: 72%;
      height: 100%;
      z-index: 10000; }
    .guide_wrap .guide_share_wrap .guide_share_text {
      position: absolute;
      left: 110%;
      bottom: 115%;
      height: 70%;
      z-index: 10001; }
  .guide_wrap .guide_gallery_wrap {
    right: 3%; }
    .guide_wrap .guide_gallery_wrap .guide_gallery_icon {
      position: relative;
      height: 100%;
      z-index: 10001; }
    .guide_wrap .guide_gallery_wrap .guide_gallery_tail {
      position: absolute;
      right: 75%;
      bottom: -14%;
      height: 100%;
      z-index: 10000; }
    .guide_wrap .guide_gallery_wrap .guide_gallery_text {
      position: absolute;
      right: 175%;
      bottom: 3%;
      height: 70%;
      z-index: 10001; }
  .device_pc .guide_wrap .guide_gesture_text {
    height: 38px; }
  .device_pc .guide_wrap .guide_share_wrap,
  .device_pc .guide_wrap .guide_gallery_wrap {
    width: 45px !important;
    height: 45px !important; }
  .device_pc .guide_wrap .guide_share_text {
    height: 100%; }
  .device_pc .guide_wrap .guide_gallery_text {
    height: 90%; }

.empty_block {
  display: table;
  width: 100%;
  height: 100%; }
  .empty_block h2 {
    display: table-cell;
    vertical-align: middle; }

#adminPanel {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background: #ff7362;
  color: #fff;
  z-index: 100000;
  line-height: 1;
  padding-left: 15px; }
  #adminPanel .btn_panel_close {
    background-color: #4285f4;
    color: white;
    padding: 10px;
    outline: 0;
    border: 0;
    border-radius: 5px;
    position: absolute;
    right: 5%;
    top: 15px; }
