div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
strong,
ol,
ul,
li,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
nav,
section {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  letter-spacing: normal; }

h1 {
  margin-top: 0; }

.dib {
  display: inline-block; }

#pickup_app {
  margin-top: 80px;
  margin-bottom: 60px; }
  @media screen and (max-width: 768px) {
    #pickup_app {
      margin-top: 40px; } }

.h2_wrap {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  margin-bottom: 50px; }
  @media screen and (max-width: 768px) {
    .h2_wrap {
      margin-bottom: 25px; } }
  .h2_wrap:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #fcab1a;
    z-index: -9; }
  .h2_wrap h2 {
    display: inline-block;
    background: #fff;
    padding-left: 30px;
    padding-right: 30px;
    position: relative; }
    .h2_wrap h2:before {
      content: "";
      position: absolute;
      width: 2px;
      height: 30px;
      -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      transform: rotate(30deg);
      background-color: #fcab1a;
      left: 0; }
    .h2_wrap h2:after {
      content: "";
      position: absolute;
      width: 2px;
      height: 30px;
      -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      transform: rotate(30deg);
      background-color: #fcab1a;
      right: 0; }

.recommend_wrap {
  overflow: hidden; }
  .recommend_wrap .most_recommend {
    max-width: 630px;
    width: calc(100% - 330px);
    float: left;
    background-color: #ececec; }
    @media screen and (max-width: 768px) {
      .recommend_wrap .most_recommend {
        max-width: inherit;
        width: 100%; } }
    .recommend_wrap .most_recommend .most_recommend_wrap {
      padding: 3.1746%; }
      .recommend_wrap .most_recommend .most_recommend_wrap .app_col {
        margin-bottom: 20px; }
      .recommend_wrap .most_recommend .most_recommend_wrap h4.app_title {
        font-size: 27px; }
      .recommend_wrap .most_recommend .most_recommend_wrap .most_recommend_text {
        font-size: 16px;
        min-height: 185px;
        margin-bottom: 20px; }
        @media screen and (max-width: 768px) {
          .recommend_wrap .most_recommend .most_recommend_wrap .most_recommend_text {
            min-height: inherit; } }
      .recommend_wrap .most_recommend .most_recommend_wrap .most_recommend_image_col_4 {
        text-align: center;
        margin-bottom: 20px; }
        .recommend_wrap .most_recommend .most_recommend_wrap .most_recommend_image_col_4 img {
          width: calc(97% / 4);
          font-size: 0;
          margin-right: 1%; }
          .recommend_wrap .most_recommend .most_recommend_wrap .most_recommend_image_col_4 img:last-child {
            margin-right: 0; }
      .recommend_wrap .most_recommend .most_recommend_wrap .most_recommend_image_col_3 {
        text-align: center;
        margin-bottom: 20px; }
        .recommend_wrap .most_recommend .most_recommend_wrap .most_recommend_image_col_3 img {
          width: calc(98% / 3);
          font-size: 0;
          margin-right: 1%; }
          .recommend_wrap .most_recommend .most_recommend_wrap .most_recommend_image_col_3 img:last-child {
            margin-right: 0; }
      .recommend_wrap .most_recommend .most_recommend_wrap .most_recommend_image_col_2 {
        text-align: center;
        margin-bottom: 20px; }
        .recommend_wrap .most_recommend .most_recommend_wrap .most_recommend_image_col_2 img {
          width: calc(99% / 2);
          font-size: 0;
          margin-right: 1%; }
          .recommend_wrap .most_recommend .most_recommend_wrap .most_recommend_image_col_2 img:last-child {
            margin-right: 0; }
      .recommend_wrap .most_recommend .most_recommend_wrap .btn_download a:hover {
        -webkit-transform: scale(1.03);
        -ms-transform: scale(1.03);
        transform: scale(1.03); }

.appeal {
  font-weight: 900;
  margin-bottom: 5px; }

.side_recommend {
  float: right;
  width: 31.4583%;
  min-width: 300px;
  min-height: 674px; }
  .side_recommend .app_item {
    max-height: inherit;
    margin-bottom: 25px; }
  .side_recommend .app_text {
    min-height: 113px;
    padding-bottom: 0;
    cursor: inherit; }
    .side_recommend .app_text:after {
      display: none; }
  .side_recommend .appeal {
    margin-bottom: 2px; }
  @media screen and (max-width: 768px) {
    .side_recommend {
      display: none; } }

.category {
  margin-bottom: 30px; }
  .category.sticky ul {
    position: fixed;
    width: 100%;
    max-width: 960px;
    top: 85px;
    z-index: 99;
    -webkit-transition: top 0.5s ease 0s;
    -o-transition: top 0.5s ease 0s;
    transition: top 0.5s ease 0s; }
    @media screen and (max-width: 989px) {
      .category.sticky ul {
        max-width: 788px; } }
    @media screen and (max-width: 817px) {
      .category.sticky ul {
        top: 50px;
        padding-right: 15px; } }
    @media screen and (max-width: 768px) {
      .category.sticky ul {
        margin-left: -15px;
        margin-right: -15px;
        padding-right: 0; } }
    @media screen and (max-width: 768px) {
      .category.sticky ul li {
        padding-top: 10px;
        padding-bottom: 10px; } }
    @media screen and (max-width: 768px) {
      .category.sticky ul li:before {
        height: 39px; } }
  .category ul {
    overflow: hidden;
    background-color: #e3e3e3;
/*    background-color: #ececec;*/
    top: 0; }
    .category ul li {
      width: calc(100% / 6);
      float: left;
      font-size: 20px;
      text-align: center;
      padding-top: 19px;
      padding-bottom: 19px;
      cursor: pointer;
      position: relative;
      z-index: 99;
      display: block;
      -webkit-transition: background 0.5s ease 0s,color 0.5s ease 0s;
      -o-transition: background 0.5s ease 0s,color 0.5s ease 0s;
      transition: background 0.5s ease 0s,color 0.5s ease 0s; }
      .category ul li:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 68px;
        background-color: #bcbcbc;
        -webkit-transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
        -o-transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
        transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
        z-index: -9; }
        @media screen and (max-width: 768px) {
          .category ul li:before {
            height: 39px; } }
      .category ul li:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 3px;
        background-color: #00a8b5;
        -webkit-transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
        -o-transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
        transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s; }
      @media screen and (max-width: 768px) {
        .category ul li {
          width: calc(100% / 3);
          padding-top: 10px;
          padding-bottom: 10px;
          font-size: 13px; } }
      .category ul li.active {
        color: #fff; }
        .category ul li.active:before {
          -webkit-transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
          -o-transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
          transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
          right: 0;
          left: inherit;
          width: 100%; }
        .category ul li.active:after {
          -webkit-transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
          -o-transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
          transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
          left: 0;
          right: inherit;
          width: 100%; }

#app_items .app_item {
  display: none; }
  #app_items .app_item.dummy {
    display: inline-block; }

.app_list_wrap {
  text-align: justify; }
  @media screen and (max-width: 989px) {
    .app_list_wrap {
      max-width: calc(600px + 3.125%);
      width: 100%;
      margin-left: auto;
      margin-right: auto; } }
  @media screen and (max-width: 768px) {
    .app_list_wrap {
      max-width: inherit; } }

.app_item {
  background-color: #ececec;
  margin-bottom: 30px;
  max-width: 300px;
  width: 100%;
  vertical-align: top; }
  @media screen and (max-width: 768px) {
    .app_item {
      margin-bottom: 20px;
      max-width: inherit; } }
  .app_item:last-child {
    margin-bottom: 0; }
  .app_item .app_wrap {
    padding: 20px; }

.app_col {
  overflow: hidden;
  margin-bottom: 10px;
  min-height: 110px; }
  .app_col .app_icon {
    max-width: 100px;
    width: 100%;
    float: left;
    margin-right: 20px; }
  .app_col .app_about {
    float: left;
    width: calc(100% - 120px);
    text-align: left; }
    .app_col .app_about .app_title {
      font-size: 20px;
      line-height: 1.5; }
      .app_col .app_about .app_title .sub_title {
        margin-top: -2px; }
    .app_col .app_about .sub_title {
      margin-top: -2px; }
    .app_col .app_about .app_company {
      margin-top: 3px;
      font-size: 11px; }

.app_text {
  margin-bottom: 10px;
  padding-bottom: 20px;
  min-height: 80px;
  position: relative;
  cursor: pointer; }
  .app_text:after {
    font-family: FontAwesome;
    content: "\f103  more";
    position: absolute;
    bottom: 0;
    right: 0;
    color: #00a8b5;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s; }
  .app_text .more_text {
    display: none; }
  .app_text.more_on:after {
    content: "\f102  close"; }

.btn_download a {
  display: block;
  font-size: 16px;
  padding-top: 13px;
  padding-bottom: 13px;
  background-color: #fcab1a;
  text-align: center;
  color: #fff;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
  transition: -webkit-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
  -o-transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s, -webkit-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; }
  .btn_download a:after {
    content: url(../img/icon_blank_w.png);
    width: 10px;
    height: 10px;
    margin-left: 5px; }
  .btn_download a:hover {
    -webkit-transition: -webkit-transform 0.2s ease 0s;
    transition: -webkit-transform 0.2s ease 0s;
    -o-transition: transform 0.2s ease 0s;
    transition: transform 0.2s ease 0s;
    transition: transform 0.2s ease 0s, -webkit-transform 0.2s ease 0s;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05); }