@charset "UTF-8";
/* ============================================================================= */
/* for 筆電 */
/* ============================================================================= */
/* ============================================================================= */
/* for 平板 */
/* ============================================================================= */
/* -------------- iPAD PRO -------------- */
@media screen and (max-device-width: 1024px) {
  body {
    background-color: #bae3f9; }
  #loader-bg {
    min-height: 100vh; }
  main:before {
    height: 150rem;
    background-size: cover; }
  header .inner {
    min-height: 150rem; }
  #conts_01 {
    height: 140rem;
    padding-bottom: 17em; }
  #conts_02 {
    height: 135rem;
    padding-top: 3em; }
  #conts_04 {
    height: 150rem; }
  #about-wrap {
    height: 280rem; }
  #about_02 {
    height: 240rem; }
  header .inner {
    font-size: 2em; }
  header h1 {
    font-size: 8em;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    margin-left: -21%; }
  header .slogan {
    bottom: .8em; }
  header .store-icon img {
    height: 2em; }
  header .kv-character {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3); }
    header .kv-character-1:before {
      -webkit-transform: translate(-103%, -21%);
      -ms-transform: translate(-103%, -21%);
      transform: translate(-103%, -21%); }
    header .kv-character-2:before {
      -webkit-transform: translate(14%, -17%);
      -ms-transform: translate(14%, -17%);
      transform: translate(14%, -17%); }
    header .kv-character-3:before {
      -webkit-transform: translate(-46%, -169%);
      -ms-transform: translate(-46%, -169%);
      transform: translate(-46%, -169%); }
  header .kv-cappuccino:before {
    -webkit-transform: translate(-22%, 175%);
    -ms-transform: translate(-22%, 175%);
    transform: translate(-22%, 175%); }
  header .kv-chiffon:before {
    -webkit-transform: translate(79%, 89%);
    -ms-transform: translate(79%, 89%);
    transform: translate(79%, 89%); }
  header .kv-mocha:before {
    -webkit-transform: translate(-237%, 149%);
    -ms-transform: translate(-237%, 149%);
    transform: translate(-237%, 149%); }
  header .kv-coffee:before {
    -webkit-transform: translate(-64%, 143%);
    -ms-transform: translate(-64%, 143%);
    transform: translate(-64%, 143%); }
  header .kv-cloud:before {
    -webkit-transform: translate(174%, 34%);
    -ms-transform: translate(174%, 34%);
    transform: translate(174%, 34%); }
  #conts_01 {
    background-position: 100% -28%; }
    #conts_01 section {
      -webkit-transform: scale(1.3);
      -ms-transform: scale(1.3);
      transform: scale(1.3);
      margin-top: 12em; }
    #conts_01 .slick-dots {
      margin-top: -7em;
      right: auto;
      margin-left: -80%;
      width: 100%; }
      #conts_01 .slick-dots li {
        display: inline-block;
        margin: 0 0.5em; }
      #conts_01 .slick-dots li:nth-child(4) {
        margin-left: 7em; }
    #conts_01 .slide-character {
      -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
      transform: scale(0.7);
      left: 50%; }
      #conts_01 .slide-character-1 {
        top: 72%;
        margin-left: -36%; }
      #conts_01 .slide-character-2 {
        top: 113%;
        margin-left: -7%; }
  #conts_02 .title {
    width: 100%;
    margin-bottom: 3em; }
  #conts_02 section {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }
  #conts_02 .slick-dots {
    width: 100%;
    padding-top: 10.5em;
    margin-left: 0.6em;
    display: block; }
    #conts_02 .slick-dots li {
      -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2);
      display: inline-block;
      margin: 0 .66em; }
  .avatar-info {
    margin-left: -27em;
    margin-bottom: -15.5em; }
    .avatar-info-content {
      -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2);
      margin-left: 4em; }
  .avatar .avatar-item:before {
    background-size: 90%; }
  .avatar .avatar-item .avatar-info dl {
    font-size: 1.5em; }
  .avatar .avatar-item-1:before {
    background-size: 90%;
    -webkit-transform: translate(24%, 75%);
    -ms-transform: translate(24%, 75%);
    transform: translate(24%, 75%); }
  .avatar .avatar-item-1 .avatar-info {
    margin-left: -29em;
    margin-bottom: -19em; }
    .avatar .avatar-item-1 .avatar-info dl {
      padding-top: 1.5em;
      padding-bottom: 1.5em; }
  .avatar .avatar-item-1 .avatar-info-title {
    -webkit-transform: translate(-45%, -195%);
    -ms-transform: translate(-45%, -195%);
    transform: translate(-45%, -195%); }
  .avatar .avatar-item-2:before {
    -webkit-transform: translate(15%, 66%);
    -ms-transform: translate(15%, 66%);
    transform: translate(15%, 66%); }
  .avatar .avatar-item-2 .avatar-info dl {
    padding-top: 1.5em;
    padding-bottom: 1.5em; }
  .avatar .avatar-item-2 .avatar-info-title {
    -webkit-transform: translate(-45%, -195%);
    -ms-transform: translate(-45%, -195%);
    transform: translate(-45%, -195%); }
  .avatar .avatar-item-2 .avatar-info-content div {
    width: 100%; }
  .avatar .avatar-item-3:before {
    -webkit-transform: translate(18%, 60%);
    -ms-transform: translate(18%, 60%);
    transform: translate(18%, 60%); }
  .avatar .avatar-item-3 .avatar-info-content p {
    font-size: 1.8em;
    line-height: 1.3em; }
  .avatar .avatar-item-4:before {
    -webkit-transform: translate(18%, 65%);
    -ms-transform: translate(18%, 65%);
    transform: translate(18%, 65%); }
  .avatar .avatar-item-4 .avatar-info-content p {
    font-size: 1.8em;
    line-height: 1.3em; }
  .avatar .avatar-item-5:before {
    -webkit-transform: translate(17%, 72%);
    -ms-transform: translate(17%, 72%);
    transform: translate(17%, 72%); }
  .avatar .avatar-item-5 .avatar-info dl {
    padding-top: 1.5em;
    padding-bottom: 1.5em; }
  .avatar .avatar-item-5 .avatar-info-title {
    -webkit-transform: translate(-45%, -195%);
    -ms-transform: translate(-45%, -195%);
    transform: translate(-45%, -195%); }
  .avatar .avatar-item-5 .avatar-info-content {
    margin-left: 3em; }
  .avatar .avatar-item-6:before {
    -webkit-transform: translate(10%, 7%);
    -ms-transform: translate(10%, 7%);
    transform: translate(10%, 7%); }
  .avatar .avatar-item-6 .avatar-info {
    margin-left: -27em; }
    .avatar .avatar-item-6 .avatar-info dl {
      padding-top: 1.5em;
      padding-bottom: 1.5em; }
  .avatar .avatar-item-6 .avatar-info-title {
    -webkit-transform: translate(-45%, -195%);
    -ms-transform: translate(-45%, -195%);
    transform: translate(-45%, -195%); }
  #conts_03 {
    padding-top: 7em; }
    #conts_03 .introduce-bottom {
      height: 23em;
      padding-top: 3em; }
      #conts_03 .introduce-bottom img {
        width: 80%; }
    #conts_03 .copytext {
      text-align: right;
      margin-top: -3em; }
      #conts_03 .copytext img {
        width: 80%; }
  .introduce-nav li {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }
  .introduce-nav .introduce-nav-5 {
    margin-left: -47vw;
    margin-top: 6.5vw; }
  #conts_04 .story {
    max-width: 85%;
    height: 48em; }
  #conts_04 .story-text span {
    font-size: 1.5em; }
  #conts_04 .copytext {
    max-width: 80%;
    margin-top: 2em; }
    #conts_04 .copytext img {
      width: 28%; }
  #conts_04 .title {
    width: 80%; }
  #about_02 h2 {
    width: 80%;
    margin: 0 auto;
    font-size: 15rem; }
    #about_02 h2 img {
      left: 0;
      margin-left: 50%;
      height: 20rem; }
  #about_02 p {
    width: 100%;
    font-size: 10rem; }
    #about_02 p img {
      width: 100%; }
  #about_02 .inner h3 img {
    width: 75%; }
  #about_02 .inner h2 + p img {
    width: 120%;
    margin-left: -10%; }
  #about_02 h3 img {
    width: 50%; }
  .intro .slick_slider02 {
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
    margin-top: 4em;
    margin-bottom: 6em; }
  footer .sp {
    width: 100%;
    text-align: center; }
    footer .sp li {
      display: inline-block;
      padding: 0 1em; }
  footer .pc + p {
    font-size: 2rem;
    padding: 2em 0 1em; }
    footer .pc + p img {
      width: 60%; } }

/* -------------- PAD -------------- */
/* ============================================================================= */
/* for 手機版 */
/* ============================================================================= */
@media screen and (max-device-width: 480px) {
  #loader {
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
    transform: scale(2.5);
    top: 50%;
    margin-top: -100%; }
  #hum-menu nav {
    width: 95%; }
    #hum-menu nav .nav-list li a {
      font-size: 4rem;
      line-height: 3em; }
  .btn-close {
    -webkit-transform: scale(2.2);
    -ms-transform: scale(2.2);
    transform: scale(2.2);
    top: 4em; }
  header .inner {
    height: 170rem; }
  #conts_01 {
    height: 175rem;
    background-position: 100% -100%; }
  #conts_02 {
    height: 168rem; }
  #conts_04 {
    margin-bottom: -15px; }
  #about-wrap {
    height: 305rem; }
  #about_02 {
    height: 275rem; }
  header h1 {
    font-size: 10em; }
  header .slogan {
    bottom: 0.2em; }
  header .store-icon {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    padding-top: 0.5em; }
  #conts_01 section {
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
    margin-top: 24em;
    /*margin-left: 6.5em;*/ }
  #conts_01 .slick-dots {
    margin-top: -12em;
    width: 84%;
    margin-left: 7.5em;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5); }
    #conts_01 .slick-dots li {
      width: 10em; }
    #conts_01 .slick-dots li:nth-child(4) {
      margin-left: .5em; }
    #conts_01 .slick-dots li:nth-child(5) {
      margin-left: 6em; }
  .title {
    -webkit-transform: scale(1.35);
    -ms-transform: scale(1.35);
    transform: scale(1.35); }
  #conts_02 section {
    -webkit-transform: scale(1.35);
    -ms-transform: scale(1.35);
    transform: scale(1.35);
    margin-top: 10em; }
  #conts_02 .slick-prev {
    -webkit-transform: translate(10%, -255%);
    -ms-transform: translate(10%, -255%);
    transform: translate(10%, -255%); }
  #conts_02 .slick-next {
    -webkit-transform: translate(0%, -255%);
    -ms-transform: translate(0%, -255%);
    transform: translate(0%, -255%); }
  #conts_04 .story {
    max-width: 100%;
    height: 55em; }
  #conts_04 .story-text span {
    font-size: 1.8em; }
  #conts_04 .copytext {
    max-width: 100%; }
  #about_02 p img {
    width: 125%;
    margin-left: -1em; }
  #about_02 .inner h2 + p img {
    width: 140%;
    margin-left: -20%; }
  .introduce-nav li a {
    font-size: 1.5em; }
  .introduce-nav .introduce-nav-2 {
    margin-left: 24vw; }
  .introduce-nav .introduce-nav-3 {
    margin-left: 17vw; }
  .introduce-nav .introduce-nav-4 {
    margin-left: -23vw;
    margin-top: 32vw; }
  .introduce-nav .introduce-nav-5 {
    margin-left: -46vw;
    margin-top: 24vw; }
  .introduce-nav .introduce-nav-6 {
    margin-left: -46vw;
    margin-top: -14vw; }
  #conts_05 .inner {
    width: 70%; }
  #conts_05 .btn-section:nth-child(2) a {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 17em;
    flex: 0 0 17em; }
  footer .sp {
    padding-top: 1em; }
    footer .sp li {
      font-size: 1.4em; }
  footer .pc + p {
    font-size: 3rem;
    padding: 1em 0 1em; }
    footer .pc + p img {
      width: 85%; } }

/* -------------- Phone -------------- */
/* 長螢幕畫面 */
/* Sumsung Note10 Lite */
/* 長螢幕畫面 */
/* Pixel 2 XL  */
@media screen and (max-device-width: 412px) and (min-device-height: 914px) {
  #loader {
    margin-top: -110%; } }

/* iPhone X */
/* 正常螢幕高度 */
/* HTC M8 */
/* iPhone SE */
/* -------------- 裝置橫向 -------------- */