.logo-font {
  font-family: Tw Cen MT Condensed;
  color: #0993dd;
}

.content-font, body {
  font-family: "Roboto", "Helvetica Neue", "Helvetica", source-han-sans-simplified-c, Helvetica, Microsoft JhengHei, Arial, sans-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 1.4em;
}

.blue_text {
  color: #0993dd;
}

.white_text {
  color: white;
}

.tc {
  text-align: center;
}

.shadow, #page_content .service_block_os li:hover, .btn_frame:hover, .btn_blue:hover {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
}

.btn_blue {
  background-color: #0993dd;
  color: white;
  cursor: pointer;
  padding: 8px 12px;
  display: inline-block;
  font-size: 18px;
  text-align: center;
  border: none;
  outline: none;
}
.btn_blue:hover {
  color: white;
  transform: scale(1.02);
}

.btn_frame {
  background-color: transparent;
  cursor: pointer;
  padding: 6px 24px;
  display: inline-block;
  font-size: 16px;
  text-align: center;
  border: 1px solid;
  outline: none;
}
.btn_frame:hover {
  transform: scale(1.02);
}

.btn_full {
  display: block;
  width: 90%;
  max-width: 640px;
}

.background_gray {
  background-color: #fafafa;
}

body {
  color: #000000;
  font-weight: 400;
  height: 100%;
  width: 100%;
  background-color: white;
  position: relative;
  cursor: default;
  display: block;
}
@media screen and (max-width: 960px) {
  body {
    font-size: 16px;
  }
}

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, a, blockquote, pre, form, fieldset, table, th, td, span, input, textarea, img {
  margin: 0;
  padding: 0;
  direction: ltr;
  list-style: none;
  text-decoration: none;
  vertical-align: middle;
}

a, a:hover {
  color: #000000;
}

img {
  max-width: 100%;
  max-height: 100%;
}

p {
  font-size: 18px;
  line-height: 1.3em;
}
@media screen and (max-width: 960px) {
  p {
    font-size: 16px;
  }
}

h1 {
  font-size: 68px;
  font-weight: bold;
  line-height: 1.4em;
}
@media screen and (max-width: 960px) {
  h1 {
    font-size: 40px;
  }
}

h2 {
  font-size: 40px;
  font-weight: bold;
  line-height: 1.3em;
}
@media screen and (max-width: 960px) {
  h2 {
    font-size: 32px;
  }
}

h3 {
  font-size: 30px;
  font-weight: bold;
  line-height: 1.3em;
}
@media screen and (max-width: 960px) {
  h3 {
    font-size: 20px;
  }
}

h4 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.35em;
}
@media screen and (max-width: 960px) {
  h4 {
    font-size: 20px;
  }
}

h5 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3em;
}
@media screen and (max-width: 960px) {
  h5 {
    font-size: 18px;
  }
}

#all_page #loading_icon {
  width: 200px;
  height: 200px;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#all_page #page_content, #all_page #top_menu, #all_page #footer, #all_page #cookie_noti, #all_page #tmp_noti {
  opacity: 1; /* For Safari 3.1 to 6.0 */
  transition: all 0.3s ease-out;
}
#all_page.loading #page_content, #all_page.loading #top_menu, #all_page.loading #new_menu, #all_page.loading #footer, #all_page.loading #cookie_noti, #all_page.loading #tmp_noti {
  opacity: 0;
}
#all_page.loading #loading_icon {
  display: block;
}
#all_page #toast {
  position: fixed;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #0993dd;
  color: white;
  padding: 16px 24px;
  width: 300px;
  line-height: 2em;
  box-sizing: border-box;
  transition: all 0.3s ease-out;
  z-index: 5;
  opacity: 1;
  box-shadow: 2px 2px 16px 2px rgba(0, 0, 0, 0.2);
}
#all_page #toast.hide {
  opacity: 0;
  z-index: -1;
}
#all_page #cookie_noti, #all_page #tmp_noti {
  position: fixed;
  z-index: 1;
  top: 81px;
  right: 16px;
  width: 360px;
  height: auto;
  background: rgba(255, 255, 255, 0.96);
  padding: 16px;
  box-sizing: border-box;
  box-shadow: 1px 2px 3px 2px rgba(0, 0, 0, 0.2);
  text-align: center;
}
@media screen and (max-width: 960px) {
  #all_page #cookie_noti, #all_page #tmp_noti {
    top: 45px;
    width: 280px;
  }
}
#all_page #cookie_noti p, #all_page #tmp_noti p {
  margin-bottom: 16px;
  line-height: 1.5em;
  text-align: left;
}
#all_page #tmp_noti {
  top: 230px;
  right: 16px;
}
@media screen and (max-width: 960px) {
  #all_page #tmp_noti {
    top: 200px;
    width: 280px;
  }
}

/*------------------footer------------------*/
#footer {
  width: 100%;
  background: #f2f2f2;
  text-align: center;
  padding: 32px 0;
}
#footer .cate_block {
  display: inline-block;
  width: 300px;
  margin: 0;
  text-align: left;
  vertical-align: top;
}
#footer .cate_block.blank {
  width: 0;
}
@media screen and (max-width: 1280px) {
  #footer .cate_block {
    width: 180px;
  }
}
@media screen and (max-width: 960px) {
  #footer .cate_block.blank {
    width: 180px;
  }
}
#footer .cate_block h2 {
  display: inline-block;
}
@media screen and (max-width: 1280px) {
  #footer .cate_block h2 {
    font-size: 18px;
  }
}
#footer .cate_block ul {
  width: 100%;
  padding: 0;
  height: auto;
  margin: 16px 0 0 0;
  line-height: 36px;
}
@media screen and (max-width: 1280px) {
  #footer .cate_block ul {
    margin: 8px 0 24px 0;
    font-size: 14px;
    line-height: 28px;
  }
}
#footer #privacy_and_announce a {
  vertical-align: top !important;
}
#footer #footer_announce {
  width: auto !important;
  display: inline-block !important;
}

/*------------------page content------------------*/
#page_content {
  height: auto;
  min-height: calc(100vh - 334px);
  padding: 68px 0 0 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
#page_content.morePadding {
  padding: 100px 0;
}
@media screen and (max-width: 1280px) {
  #page_content {
    padding: 60px 0 0 0;
    min-height: calc(100vh - 290px);
  }
  #page_content.morePadding {
    padding: 80px 0 0;
  }
}
@media screen and (max-width: 960px) {
  #page_content {
    padding: 56px 0 0 0;
  }
  #page_content.morePadding {
    padding: 48px 0 0;
  }
}
#page_content h2 {
  margin: 0.5em auto;
  display: block;
  line-height: 1.4em;
}
#page_content p {
  margin: 0.5em auto;
  display: block;
  margin-bottom: 32px;
  line-height: 1.4em;
}
#page_content #slider_container {
  width: 100%;
  position: relative;
  height: auto;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#page_content #slider_container .controller {
  height: 12px;
  width: 12px;
  display: inline-block;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.33);
  position: absolute;
  bottom: 4px;
  left: 50%;
  z-index: 2;
  box-shadow: inset -1px 1px 2px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
#page_content #slider_container #slidebtn_1 {
  margin-left: -40px;
}
#page_content #slider_container #slidebtn_2 {
  margin-left: -20px;
}
#page_content #slider_container #slidebtn_3 {
  margin-left: 0px;
}
#page_content #slider_container #slidebtn_4 {
  margin-left: 20px;
}
#page_content #slider_container #slidebtn_5 {
  margin-left: 40px;
}
#page_content #slider_container #slidebtn_6 {
  margin-left: 60px;
}
#page_content #slider_container .controller:hover {
  background-color: rgba(255, 255, 255, 0.66);
}
#page_content #slider_container #slide_list {
  list-style: none;
  position: relative;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  height: auto;
  width: auto;
  min-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
}
#page_content #slider_container #slide_list:hover {
  animation-play-state: paused;
}
#page_content #slider_container #slidebtn_1:hover ~ #slide_list,
#page_content #slider_container #slidebtn_2:hover ~ #slide_list,
#page_content #slider_container #slidebtn_3:hover ~ #slide_list,
#page_content #slider_container #slidebtn_4:hover ~ #slide_list,
#page_content #slider_container #slidebtn_5:hover ~ #slide_list,
#page_content #slider_container #slidebtn_6:hover ~ #slide_list {
  animation: 0;
  animation-delay: 0s;
  transition: none;
  transition-delay: 0s;
}
#page_content #slider_container #slidebtn_1:hover ~ #slide_list {
  margin-left: 0vw;
}
#page_content #slider_container #slidebtn_2:hover ~ #slide_list {
  margin-left: -100vw;
}
#page_content #slider_container #slidebtn_3:hover ~ #slide_list {
  margin-left: -200vw;
}
#page_content #slider_container #slidebtn_4:hover ~ #slide_list {
  margin-left: -300vw;
}
#page_content #slider_container #slidebtn_5:hover ~ #slide_list {
  margin-left: -400vw;
}
#page_content #slider_container #slidebtn_6:hover ~ #slide_list {
  margin-left: -500vw;
}
#page_content #slider_container .slide_box {
  display: inline-block;
  word-wrap: break-word;
  white-space: normal;
  width: auto;
  min-width: 100vw;
  min-height: 533px;
  height: 100%;
  max-height: 640px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
@media screen and (min-width: 1280px) {
  #page_content #slider_container .slide_box {
    height: 33vw;
  }
}
#page_content #slider_container .slide_box .column {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
#page_content #slider_container .slide_box .column.right_column {
  width: 29vw;
  margin-right: 0;
  margin-left: 65vw;
  max-width: 555px;
}
#page_content #slider_container .slide_box .column.me_l {
  width: 70vw;
  left: 0;
}
#page_content #slider_container .slide_box .column.me_r {
  width: 49vw;
  right: 0;
  bottom: -10px;
  transform: none;
  top: auto;
}
@media screen and (max-width: 960px) {
  #page_content #slider_container .slide_box .column {
    padding: 0 40px;
    box-sizing: border-box;
    margin: 0;
    display: block;
    transform: none;
    position: relative;
    vertical-align: top;
    text-align: center;
  }
  #page_content #slider_container .slide_box .column.right_column, #page_content #slider_container .slide_box .column.me_l, #page_content #slider_container .slide_box .column.me_r {
    width: 100vw;
    margin: 0 auto;
    margin-top: 0;
    padding: 32px 16px;
    box-sizing: border-box;
    max-width: 100vw;
  }
  #page_content #slider_container .slide_box .column.right_column h2, #page_content #slider_container .slide_box .column.right_column p, #page_content #slider_container .slide_box .column.me_l h2, #page_content #slider_container .slide_box .column.me_l p, #page_content #slider_container .slide_box .column.me_r h2, #page_content #slider_container .slide_box .column.me_r p {
    max-width: 90% !important;
  }
  #page_content #slider_container .slide_box .column.me_l {
    margin: 0;
    padding-bottom: 0;
  }
  #page_content #slider_container .slide_box .column.me_r {
    max-height: 176px;
    margin: 0;
    padding: 0 16px;
  }
  #page_content #slider_container .slide_box .column.me_r img {
    max-height: 280px;
  }
}
@keyframes slide-2 {
  40% {
    margin-left: 0vw;
  }
  50% {
    margin-left: -100vw;
  }
  90% {
    margin-left: -100vw;
  }
  100% {
    margin-left: 0vw;
  }
}
@keyframes slide-3 {
  23% {
    margin-left: 0vw;
  }
  34% {
    margin-left: -100vw;
  }
  56% {
    margin-left: -100vw;
  }
  67% {
    margin-left: -200vw;
  }
  89% {
    margin-left: -200vw;
  }
  100% {
    margin-left: 0vw;
  }
}
@keyframes slide-4 {
  0% {
    margin-left: 0vw;
  }
  16% {
    margin-left: 0vw;
  }
  25% {
    margin-left: -100vw;
  }
  41% {
    margin-left: -100vw;
  }
  50% {
    margin-left: -200vw;
  }
  66% {
    margin-left: -200vw;
  }
  75% {
    margin-left: -300vw;
  }
  91% {
    margin-left: -300vw;
  }
  100% {
    margin-left: 0vw;
  }
}
@keyframes slide-5 {
  0% {
    margin-left: 0vw;
  }
  15% {
    margin-left: 0vw;
  }
  20% {
    margin-left: -100vw;
  }
  35% {
    margin-left: -100vw;
  }
  40% {
    margin-left: -200vw;
  }
  55% {
    margin-left: -200vw;
  }
  60% {
    margin-left: -300vw;
  }
  75% {
    margin-left: -300vw;
  }
  80% {
    margin-left: -400vw;
  }
  95% {
    margin-left: -400vw;
  }
  100% {
    margin-left: 0vw;
  }
}
@keyframes slide-6 {
  0% {
    margin-left: 0vw;
  }
  12% {
    margin-left: 0vw;
  }
  14% {
    margin-left: -100vw;
  }
  26% {
    margin-left: -100vw;
  }
  28% {
    margin-left: -200vw;
  }
  40% {
    margin-left: -200vw;
  }
  42% {
    margin-left: -300vw;
  }
  54% {
    margin-left: -300vw;
  }
  56% {
    margin-left: -400vw;
  }
  68% {
    margin-left: -400vw;
  }
  70% {
    margin-left: -500vw;
  }
  82% {
    margin-left: -500vw;
  }
  100% {
    margin-left: 0vw;
  }
}
#page_content #slider_container.home {
  background: #fafafa;
}
#page_content #slider_container.home #slide_list {
  animation: slide-3 21s ease infinite;
  animation-delay: 2.4s;
  transition: all 0.4s ease-out;
  transition-delay: 2s;
}
#page_content #slider_container.home .slide_box.beam .column.right_column, #page_content #slider_container.home .slide_box.compact .column.right_column {
  margin-left: 50vw;
}
@media screen and (max-width: 960px) {
  #page_content #slider_container.home .slide_box.beam .column.right_column, #page_content #slider_container.home .slide_box.compact .column.right_column {
    margin: 0;
  }
}
@media screen and (max-width: 960px) {
  #page_content #slider_container.home .slide_box.pro .column {
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.33) 64px, rgb(0, 0, 0) 100%);
    color: white;
  }
}
#page_content #slider_container.classic {
  background: black;
  color: white;
}
#page_content #slider_container.classic #slide_list {
  animation: slide-3 12s ease infinite;
  animation-delay: 2.4s;
  transition: all 0.4s ease-out;
  transition-delay: 2s;
  max-height: calc(100vh - 80px);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #page_content #slider_container.classic #slide_list {
    max-height: calc(100vh - 40px);
  }
}
#page_content #slider_container.classic .slide_box {
  min-height: 0;
}
#page_content #slider_container.classic .slide_box .column {
  text-align: left;
  position: relative;
  top: auto;
  transform: translateY(0);
  width: 49vw;
  display: inline-block;
  padding: 3vw;
  box-sizing: border-box;
}
#page_content #slider_container.classic .slide_box .column.product {
  text-align: center;
}
#page_content #slider_container.classic .slide_box .column.product img {
  padding: 12.5%;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  #page_content #slider_container.classic .slide_box .column {
    width: 90vw;
    display: block;
    margin: 0 auto;
  }
  #page_content #slider_container.classic .slide_box .column.product img {
    padding: 0%;
    max-height: 30vh;
  }
}
#page_content .column_1_1 { /* column width - 1:1*/ }
#page_content .column_1_1 .column {
  display: inline-block;
  margin: 0;
  width: 40%;
  vertical-align: middle;
  max-width: 640px;
}
@media screen and (max-width: 960px) {
  #page_content .column_1_1 .column {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
    margin: 0 auto;
  }
}
#page_content .column_1_2 .column_1 {
  width: 30%;
  max-width: 427px;
}
#page_content .column_1_2 .column_2 {
  width: 60%;
  max-width: 853px;
}
#page_content .column_1_2 .column_1, #page_content .column_1_2 .column_2 {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}
@media screen and (max-width: 960px) {
  #page_content .column_1_2 .column_1, #page_content .column_1_2 .column_2 {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
    margin: 0 auto;
  }
}
#page_content .column_2_3 .btn_blue {
  vertical-align: bottom;
  margin-left: 16px;
  padding: 8px 32px;
}
#page_content .column_2_3 .column_2 {
  width: 40%;
  max-width: 512px;
}
#page_content .column_2_3 .column_3 {
  width: 59%;
  max-width: 768px;
}
#page_content .column_2_3 .column_2, #page_content .column_2_3 .column_3 {
  display: inline-block;
  vertical-align: middle;
  padding: 0 5%;
  box-sizing: border-box;
}
@media screen and (max-width: 960px) {
  #page_content .column_2_3 .column_2, #page_content .column_2_3 .column_3 {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
    margin: 16px auto;
  }
}
#page_content .column_1_1, #page_content .column_1_2, #page_content .column_2_3, #page_content .column_full {
  width: 100%;
  display: block;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
@media screen and (max-width: 960px) {
  #page_content .column_1_1 .blank, #page_content .column_1_2 .blank, #page_content .column_2_3 .blank, #page_content .column_full .blank {
    display: none;
  }
  #page_content .column_1_1 .text_background_black, #page_content .column_1_2 .text_background_black, #page_content .column_2_3 .text_background_black, #page_content .column_full .text_background_black {
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 64px, rgb(0, 0, 0) 100%);
    max-width: 100vw;
  }
  #page_content .column_1_1 .text_background_white, #page_content .column_1_2 .text_background_white, #page_content .column_2_3 .text_background_white, #page_content .column_full .text_background_white {
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.6) 64px, rgb(255, 255, 255) 100%);
    max-width: 100vw;
  }
}
#page_content .service_block_os {
  width: 100%;
  max-width: 960px;
  text-align: center;
  margin: 0 auto;
}
#page_content .service_block_os li {
  width: 280px;
  max-width: 90%;
  height: 210px;
  box-sizing: border-box;
  border: 1px solid #e8e8e8;
  font-size: 30px;
  display: inline-block;
  margin: 18px;
}
#page_content .service_block_os li a {
  display: inline-block;
  padding: 132px 0 58px 0;
  background: no-repeat top;
  line-height: 18px;
  font-size: 18px;
  height: 18px;
  margin: 0 auto;
  color: #8e8f8f;
  width: 100%;
  background-position: top 56px left 107px;
  background-color: #f6f4f4;
}
#page_content .service_block_os li a.manual {
  background-image: url(/assets/images/product/manual.png);
}
#page_content .service_block_os li a.android {
  background-image: url(/assets/images/product/android.png);
}
#page_content .service_block_os li a.chrome {
  background-image: url(/assets/images/product/chrome.png);
}
#page_content .service_block_os li a.ios {
  background-image: url(/assets/images/product/ios.png);
}
#page_content .service_block_os li a.mac {
  background-image: url(/assets/images/product/mac.png);
}
#page_content .service_block_os li a.windows {
  background-image: url(/assets/images/product/windows.png);
}
#page_content .service_block_os li a.phone {
  background-image: url(/assets/images/product/phone.png);
}
#page_content .detail_form {
  width: 90%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  /* Edge (also supports ::-webkit-input-placeholder) */
}
#page_content .detail_form input[type=text], #page_content .detail_form input[type=file], #page_content .detail_form input[type=email], #page_content .detail_form input[type=tel], #page_content .detail_form select {
  height: 2em;
  line-height: 2em;
  margin: 8px auto;
  box-sizing: border-box;
  padding: 0 4px;
  border: 1px solid #999;
  border-radius: 0;
  vertical-align: middle;
  font-size: 18px;
}
#page_content .detail_form input[type=text]:focus, #page_content .detail_form input[type=file]:focus, #page_content .detail_form input[type=email]:focus, #page_content .detail_form input[type=tel]:focus, #page_content .detail_form select:focus {
  outline: none;
}
#page_content .detail_form input[type=text].full, #page_content .detail_form input[type=file].full, #page_content .detail_form input[type=email].full, #page_content .detail_form input[type=tel].full, #page_content .detail_form select.full {
  width: 100%;
}
#page_content .detail_form input[type=text].half, #page_content .detail_form input[type=file].half, #page_content .detail_form input[type=email].half, #page_content .detail_form input[type=tel].half, #page_content .detail_form select.half {
  width: 49.3%;
}
#page_content .detail_form input[type=text].set, #page_content .detail_form input[type=file].set, #page_content .detail_form input[type=email].set, #page_content .detail_form input[type=tel].set, #page_content .detail_form select.set {
  border-top: 1px dotted #999;
  border-bottom: 1px dotted #999;
  margin: 0 auto;
  margin-top: -1px;
}
#page_content .detail_form input[type=text].set_first, #page_content .detail_form input[type=file].set_first, #page_content .detail_form input[type=email].set_first, #page_content .detail_form input[type=tel].set_first, #page_content .detail_form select.set_first {
  border-bottom: 1px dotted #999;
  margin-bottom: 0;
}
#page_content .detail_form input[type=text].set_end, #page_content .detail_form input[type=file].set_end, #page_content .detail_form input[type=email].set_end, #page_content .detail_form input[type=tel].set_end, #page_content .detail_form select.set_end {
  border-top: 1px dotted #999;
  margin-top: -1px;
}
#page_content .detail_form label {
  margin-top: 16px;
  font-size: 16px;
  vertical-align: middle;
  display: block;
  text-align: left;
  font-size: 18px;
}
@media screen and (min-width: 640px) {
  #page_content .detail_form input[type=text].with_label, #page_content .detail_form input[type=email].with_label, #page_content .detail_form input[type=file].with_label, #page_content .detail_form input[type=tel].with_label, #page_content .detail_form select.with_label {
    width: 68%;
    display: inline-block;
    margin-top: 16px;
    font-size: 16px;
  }
  #page_content .detail_form label.with_label {
    width: 30%;
    display: inline-block;
    margin-top: 16px;
    font-size: 16px;
  }
}
#page_content .detail_form textarea {
  width: 100%;
  height: 8em;
  line-height: 2em;
  margin: 8px auto;
  padding: 0 4px;
  box-sizing: border-box;
}
#page_content .detail_form :-ms-input-placeholder {
  color: #ccc !important;
  font-weight: 400 !important;
}
#page_content .detail_form ::-ms-input-placeholder {
  color: #ccc;
  font-weight: 400;
}/*# sourceMappingURL=basic.css.map */