home-mobile.css 5.0 KB


@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min--moz-device-pixel-ratio:1.5), screen and (-o-min-device-pixel-ratio:1.5), screen and (min-device-pixel-ratio:1.5) {
  #page_download_hand {
    background-image: url(../images/download_hand_2x2740d2.png);
  }
  #page_download_mobile_iPhone {
    background-image: url(../images/ui_2x2761ce.png);
    background-size: 100% 322%;
  }
  #page_download_mobile_android {
    background-image: url(../images/ui_2x2761ce.png);
    background-size: 100% 322%;
    background-position: 0 47%;
  }
  #page_function1_book_page3 {
    background-image: url(../images/function1_book_page2_2x2761ce.jpg);
    background-size: 100% 100%;
  }
  #page_function1_book_page2 {
    background-image: url(../images/function1_book_page2_2x2761ce.jpg);
    background-size: 100% 100%;
  }
  #page_function1_book_page1 {
    background-image: url(../images/function1_book_page1_2x2761ce.jpg);
    background-size: 100% 100%;
  }
  #page_function2_book_06 {
    background-image: url(../images/function2_book_06_2x2761ce.jpg);
    background-size: 100% 100%;
  }
  #page_function2_book_05 {
    background-image: url(../images/function2_book_05_2x2761ce.jpg);
    background-size: 100% 100%;
  }
  #page_function3_book {
    background-image: url(../images/function5_book_2x2740d2.png);
    background-size: 100% 100%;
  }
  #page_function4_book {
    background-image: url(../images/mobile_function4_table_background_4x.png);
    background-size: 100% 100%;
  }
}
@media (orientation: portrait) and (max-width: 640pt) and (min-width: 360px) and (max-width: 414px) {
  body {
    font-size: 84%;
  }
  #page_download_button, #page_download_button {
    width: 56%;
    margin-left: -28%;
  }
}

@media (orientation: portrait) and (max-width: 640pt) {
  #page_download_button {
    display: block;
    position: absolute;
    bottom: 10%;
    width: 60%;
    left: 50%;
    margin-left: -30%;
    opacity: 0;
  }
  #page_download_button1 {
    display: block;
    position: absolute;
    bottom: 20%;
    width: 60%;
    left: 50%;
    margin-left: -30%;
    opacity: 0;
  }
  #page_download_button_top {
    width: 100%;
    padding-bottom: 23.9%;
    border-radius: 1000px;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
  .page_download_button_text{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 124%;
    color: white;
    font-family: download;
  }
  .page_download_button_icon{
    width: 32px;
    height: 32px;
    margin-right: 5px;
  }
  #page_download_mobile_iPhone {
    position: absolute;
    width: 68.2%;
    height: 62.8%;
    left: 50%;
    margin-left: -33.1%;
    top: 18.6%;
    display: none;
  }
  #page_download_mobile_android {
    position: absolute;
    width: 68.2%;
    height: 62.8%;
    left: 50%;
    margin-left: -28.1%;
    top: 18.6%;
  }
  #page_download_hand {
    position: absolute;
    left: -5%;
    top: 30%;
    width: 80%;
  }
  #page_download_hand1 {
    position: absolute;
    left: -5%;
    top: 30%;
    width: 80%;
  }
  #page_download_show {
    width: 80%;
    right: 10%;
    top: 10%;
    height: 80%;
  }
  #page_download_text {
    left: 0;
    top: 5%;
    color: white;
    font-size: 160%;
    line-height: 160%;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
    text-align: center;
  }
  #page_function1_text, #page_function2_text, #page_function3_text, #page_function4_text {
    left: 10%;
    top: 67.5%;
    width: 80%;
  }
  #page_function1_text_title, #page_function2_text_title, #page_function3_text_title, #page_function4_text_title {
    font-family: title;
    color: white;
    font-size: 150%;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
    opacity: 0;
    text-align: center;
  }
  #page_function1_text_sub, #page_function2_text_sub, #page_function3_text_sub, #page_function4_text_sub {
    width: 100%;
    margin-top: 10px;
    font-family: text;
    color: white;
    font-size: 100%;
    line-height: 160%;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
    opacity: 0;
    text-align: center;
  }
  #page_function1_show {
    top: 12.5%;
    width: 60%;
    right: 20%;
    height: 44.1%;
    -webkit-transform: scale(0.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
  }
  #page_function2_text {
    left: 10%;
    top: 67.5%;
    width: 80%;
  }
  #page_function2_show {
    top: 12.5%;
    width: 70%;
    right: 15%;
    height: 40%;
    -webkit-transform: scale(0.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
  }
  #page_function3_show, #page_function5_show, #page_function4_show {
    top: 17.5%;
    right: 15%;
    width: 70%;
    height: 40%;
    -webkit-transform: scale(0.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
  }
  #page_function3_book, #page_function4_book  {
    width: 120%;
    height: 200%;
    left: 50%;
    margin-left: -60%;
    top: -10%;
  }
  #page_function4_show_title{
    width: 133%;
    margin-left: -18%;
    margin-top: -20%;
  }
}