/*==========================================
Small Screen
==========================================*/
/*==========================================
Old Screen
==========================================*/
@media screen and (max-width: 1280px) and (min-width: 1025px) {
  header nav {
    width: calc(100% - 420px); }
  header nav > div {
    width: calc(100% / 6); }
    header nav > div > a {
      padding: 50px 2px 20px 2px;
      font-size: calc(16rem / 16);
      line-height: calc(18rem / 16); }
  header #head-right .btn-large {
    padding: 0 20px; }
  header #head-right .font-bar li {
    margin-right: 5px; }

  .wrap-inner {
    width: 1000px; }

  .col-lg-1 {
    width: 8.3333%; }

  .col-lg-2 {
    width: 16.6666%; }

  .col-lg-3 {
    width: 25%; }

  .col-lg-4 {
    width: 33.3333%; }

  .col-lg-5 {
    width: 41.6666%; }

  .col-lg-6 {
    width: 50%; }

  .col-lg-7 {
    width: 58.3333%; }

  .col-lg-8 {
    width: 66.6666%; }

  .col-lg-9 {
    width: 75%; }

  .col-lg-10 {
    width: 83.3333%; }

  .col-lg-11 {
    width: 91.66667%; }

  .col-lg-12 {
    width: 100%; }

  .list-lg-i2 > li {
    width: 48%; }
    .list-lg-i2 > li:nth-child(2n) {
      margin-right: 0; }

  .list-lg-i3 > li {
    width: 32.5%;
    margin-right: 1.2%; }
    .list-lg-i3 > li:nth-child(3n) {
      margin-right: 0; }

  .list-lg-i4 > li {
    width: 23%;
    margin-right: 1.2%; }
    .list-lg-i4 > li:nth-child(4n) {
      margin-right: 0; }

  .list-lg-i5 > li {
    width: 19%;
    margin-right: 1.2%; }
    .list-lg-i5 > li:nth-child(5n) {
      margin-right: 0; }

  .list-lg-i6 > li {
    width: 15.6666%;
    margin-right: 1.2%; }
    .list-lg-i6 > li:nth-child(6n) {
      margin-right: 0; }

  #home-main #home-counter > span {
    height: 106px;
    font-size: 48px;
    line-height: 75px; }

  .btn-large {
    padding: 0 30px; } }
/*==========================================
Tablet
==========================================*/
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .breath-list li {
    width: calc((100% / 3) - 20px); }
    .breath-list li:nth-child(3n) {
      margin-right: 0; }
    .breath-list li:nth-child(4n) {
      margin-right: 30px; }

  .org-logo-list li {
    width: calc( (100% - 30px) / 2); }
    .org-logo-list li:nth-child(2n) {
      margin-right: 0; }

  .wrap-inner {
    width: 748px; }

  .col-md-1 {
    width: 8.3333%; }

  .col-md-2 {
    width: 16.6666%; }

  .col-md-3 {
    width: 25%; }

  .col-md-4 {
    width: 33.3333%; }

  .col-md-5 {
    width: 41.6666%; }

  .col-md-6 {
    width: 50%; }

  .col-md-7 {
    width: 58.3333%; }

  .col-md-8 {
    width: 66.6666%; }

  .col-md-9 {
    width: 75%; }

  .col-md-10 {
    width: 83.3333%; }

  .col-md-11 {
    width: 91.66667%; }

  .col-md-12 {
    width: 100%; }

  .list-md-i2 > li {
    width: 48%; }
    .list-md-i2 > li:nth-child(even) {
      float: right; }

  .list-md-i3 > li {
    width: 32.5%;
    margin-right: 1.2%; }
    .list-md-i3 > li:nth-child(3n) {
      margin-right: 0; }

  .list-md-i4 > li {
    width: 23%;
    margin-right: 1.2%; }
    .list-md-i4 > li:nth-child(4n) {
      margin-right: 0; }

  .list-md-i5 > li {
    width: 19%;
    margin-right: 1.2%; }
    .list-md-i5 > li:nth-child(5n) {
      margin-right: 0; }

  .list-md-i6 > li {
    width: 15.6666%;
    margin-right: 1.2%; }
    .list-md-i6 > li:nth-child(6n) {
      margin-right: 0; } }
/*==========================================
Tablet - Mobile
==========================================*/
@media screen and (max-width: 1024px) {
  .flat-list.section-box {
    padding-bottom: 240px; }
    .flat-list.section-box:after {
      height: 200px; }
    .flat-list.section-box .side-window {
      display: none; }
    .flat-list.section-box .main-window {
      width: 100%; }
      .flat-list.section-box .main-window .img-thumb {
        height: 240px; }
    .flat-list.section-box .flat li:after {
      margin-left: -10px;
      width: calc(100% + 20px); }

  .mini-nav li a {
    font-size: calc(18rem / 16); }

  #home-main > #home-main-text {
    padding: 20px !important;
    text-align: justify;
    min-height: calc(800vw / 19.2);
    background-position: center center !important; }

  .promotion-video li {
    width: 100%;
    height: auto;
    margin-bottom: 20px; }

  #promotion-photo li {
    width: calc((100% / 2) - 10px);
    margin-right: 20px;
    margin-bottom: 20px; }
    #promotion-photo li:nth-child(2n) {
      margin-right: 0px; }

  .more-tips-list li {
    width: calc((100% - 16px) / 2);
    margin-right: 16px; }
    .more-tips-list li:nth-child(3n) {
      margin-right: 16px; }
    .more-tips-list li:nth-child(2n) {
      margin-right: 0; }

  .housing-checkbox-side > .list-xl-i2 {
    width: 100%; }

  .housing-questionnaire .mdl-checkbox .with-textbox input {
    width: 100%; }

  .flat-list.section-box .flat li {
    margin-right: 30px;
    width: calc(50% - 15px); }

  footer #footer-logo {
    text-align: center; }
    footer #footer-logo ul {
      display: inline-block; }

  #banner {
    height: 180px; }

  .inner-banner {
    height: 180px; }
    .inner-banner .wrap-inner {
      /*padding:0 100px;*/
      background-size: auto 100%; }
    .inner-banner .breadcrumb {
      display: none;
      text-align: center; }
    .inner-banner h1 {
      padding-left: 0;
      background: none;
      text-align: center;
      line-height: 100px;
      margin: 0;
      font-size: calc(48rem / 16); }

  h2 {
    text-align: center; }

  .sidebar {
    border-top: 0;
    margin-top: 20px; }
    .sidebar ul {
      /*border-left:2px solid #fff;*/
      padding-top: 10px; }
    .sidebar li {
      padding: 0; }
      .sidebar li:before {
        top: calc(50% - 7px);
        left: -7px; }
    .sidebar aside {
      display: none;
      width: 100%; }
      .sidebar aside.show {
        display: block; }
    .sidebar li {
      width: 100%;
      margin-bottom: 10px; }

  .section-box.section-right {
    width: 100%; }

  #advertisment {
    padding: 0 50px; }
    #advertisment .swiper-button-prev, #advertisment .swiper-button-next {
      width: 36px;
      height: 36px;
      background-size: auto 200%; }

  .section-box:before {
    transform: scale(0.7);
    -webkit-transform: scale(0.7); }

  .col-md-12.col-padding {
    padding: 0; }

  .tablet-show, .tablet-block {
    display: block; }

  .tablet-hide {
    display: none; }

  #home-main > div {
    text-align: center;
    padding: 0 !important; }
  #home-main h1, #home-main h2 {
    text-align: center; }
  #home-main #home-counter > span {
    width: 120px;
    height: 150px;
    line-height: 130px;
    font-size: 48px; }

  #home-counter {
    margin-bottom: 30px; }

  header {
    height: 60px; }
    header .wrap {
      width: 100%;
      padding: 0 20px; }
    header.active #head-right, header.active nav {
      display: block; }
    header #head-right {
      display: none;
      position: fixed;
      top: 60px;
      right: 0;
      width: 320px;
      height: 160px;
      padding: 10px 20px;
      background-color: #fff;
      border-bottom: 1px solid #fcfcfc; }
      header #head-right .btn-large {
        width: 100%;
        font-size: calc(20rem / 16);
        margin: 0;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin-bottom: 20px; }
      header #head-right .font-bar {
        /*margin-bottom:15px;*/ }
      header #head-right > div {
        /*width:100%;*/ }
    header .main-logo {
      margin-top: 5px;
      width: 200px; }
    header nav {
      display: none;
      position: fixed;
      right: 0;
      top: 220px;
      width: 320px;
      background-color: #fff;
      height: calc(100% - 165px);
      border-top: 1px solid #e5e5e5;
      overflow: hidden;
      overflow-y: auto;
      z-index: 2; }
      header nav > div {
        width: 100%;
        height: auto;
        max-width: 100%;
        float: none; }
        header nav > div > a {
          /*float:left;*/
          width: calc(100% - 50px);
          padding: 8px 0 8px 50px;
          height: 50px;
          text-align: left; }
          header nav > div > a:before {
            left: 10px;
            top: 10px;
            transform: scale(0.7);
            -webkit-transform: scale(0.7); }
        header nav > div .btn-toggle {
          display: block; }
        header nav > div:hover > ul {
          display: none; }
        header nav > div ul {
          display: none;
          position: static;
          width: 100%;
          overflow: hidden;
          margin: 0;
          padding: 0; }
          header nav > div ul.show {
            display: block !important; }
          header nav > div ul li a {
            padding-left: 35px;
            text-align: left; }
      header nav #nav-line {
        display: none !important;
        width: 100%; }

  .btn-key2 {
    display: block;
    width: 140px;
    float: none;
    margin: 0 auto;
    /*margin-bottom:10px;*/ }
    .btn-key2 img {
      width: 100%; }

  .page-container {
    margin-top: 60px; }

  #head-right > div {
    width: 100%; }

  h1, .undoreset h1 {
    font-size: calc(30rem / 16);
    line-height: calc(44rem / 16);
    margin: 0 0 20px 0; }

  h2, .undoreset h2 {
    font-size: calc(24rem / 16);
    line-height: calc(40rem / 16);
    margin: 0 0 20px 0; }

  h3, .undoreset h3 {
    font-size: calc(18rem / 16);
    line-height: calc(30rem / 16);
    margin: 0 0 10px 0; }

  p, .undoreset p {
    font-size: calc(16rem / 16);
    line-height: calc(24rem / 16);
    margin: 0 0 20px 0; }

  .font-xl {
    font-size: calc(18rem / 16);
    line-height: calc(30rem / 16); }

  footer > .wrap > .fl-left {
    text-align: center;
    width: 100%; }
  footer #footer-nav {
    margin: 20px 0;
    width: 100%;
    text-align: center; }
    footer #footer-nav li {
      width: 100%;
      margin: 0;
      padding: 10px 0;
      border: 0; } }
/*==========================================
NOT Tablet
==========================================*/
@media screen and (min-width: 1024px) {
  .desktop-show {
    display: block !important; } }
/*==========================================
Small Tablet
==========================================*/
@media screen and (max-width: 768px) {
  .detail-right-img {
    width: 100%;
    margin: 0 0 30px 0; }

  .questionnaire-checkbox li div.error {
    margin-left: 20px; }

  .housing-tab .tab-menu li {
    width: 100%;
    border: 0 !important; }

  .more-tips-list li {
    width: 100%;
    margin-right: 0 !important; }

  .btn-large {
    padding: 0;
    width: calc(100%  - 6px); }

  .breath-list li {
    width: calc((100% / 2) - 20px); }
    .breath-list li:nth-child(2n) {
      margin-right: 0px; }

  .housing-step li {
    width: 100%;
    padding: 0 0 40px 0; }
    .housing-step li:after {
      right: calc(50% - 20px);
      top: auto;
      transform: rotate(-90deg) scale(0.8);
      -webkit-transform: rotate(-90deg) scale(0.8); }
    .housing-step li:nth-child(3) {
      padding-bottom: 0; }

  .about-service-list > li .service-logo, .about-service-list > li .service-detail {
    width: 100%;
    float: none; }
  .about-service-list > li .service-logo {
    max-width: 240px;
    margin: 0 auto;
    width: calc(100% - 10px);
    margin-bottom: 20px;
    text-align: center; }

  .org-logo-list li {
    width: calc( (100% - 30px) / 2); }
    .org-logo-list li:nth-child(2n) {
      margin-right: 0; }

  .home-content {
    padding-top: 0px; }

  footer #footer-logo li img {
    height: 40px; }

  .flat-list.section-box {
    padding: 30px;
    border: 5px solid #62555b;
    border-bottom: 0; }
    .flat-list.section-box:before {
      left: 5px;
      width: calc(100% - 10px); }
    .flat-list.section-box:after {
      display: none;
      width: 140px;
      height: 135px;
      background-size: 100%;
      left: calc(50% - 70px); }
    .flat-list.section-box .flat li {
      width: 100%;
      margin: 0 0 30px 0;
      padding: 0; }
    .flat-list.section-box .title {
      font-size: calc(18rem / 16);
      line-height: 30px; }
      .flat-list.section-box .title .img-inline {
        width: 18px;
        margin-right: 5px; }
    .flat-list.section-box .video-frame {
      margin: 0; }

  .masonry-container .item {
    width: 100%;
    padding: 10px 0; }

  .inner-banner {
    height: auto;
    background-image: none; }
    .inner-banner .wrap-inner {
      background-image: none;
      padding: 0; }
    .inner-banner h1 {
      text-align: center;
      line-height: 80px;
      margin: 0;
      width: 100%;
      text-shadow: none;
      color: #4d6499; }

  .about-tutorial-list {
    margin-bottom: 0px; }
    .about-tutorial-list li {
      width: 50%; }
      .about-tutorial-list li:nth-child(1) {
        width: 100%; }
      .about-tutorial-list li a:after {
        opacity: 1; }

  .mfp-popup-box .mfp-close {
    width: 24px;
    height: 24px;
    line-height: 24px; }

  .about-tutorial-block figcaption {
    margin-top: 20px;
    padding: 20px 0 !important; }
    .about-tutorial-block figcaption:before {
      top: 0;
      left: 0; }

  .btn-large {
    padding: 0 30px;
    font-size: calc(20rem / 16);
    line-height: 44px;
    height: 44px;
    margin: 5px !important; }

  .section-box {
    margin: 20px 0 0;
    width: 100%;
    padding: 20px;
    border-bottom: 0; }

  .inner-content .section-box h2:before {
    width: 24px;
    height: 24px;
    background-size: auto 24px;
    top: 0; }

  #home-main > div {
    text-align: center;
    padding: 0 !important; }
  #home-main h1, #home-main h2 {
    text-align: center; }
  #home-main #home-counter:after {
    top: calc(50% - 22px);
    right: -15px;
    width: 15px;
    height: 44px; }
  #home-main #home-counter > span {
    width: 60px;
    height: 76px;
    line-height: 48px;
    font-size: 30px;
    margin-right: 5px; }
  #home-main #home-counter-title {
    width: calc(100% - 30px);
    margin-left: 15px; }
    #home-main #home-counter-title h2 {
      padding: 10px; }

  .col-sm-12.col-padding {
    padding: 0; }

  .wrap-inner, .wrap {
    width: 100%;
    padding: 0 20px; }

  .tablet-show, .tablet-block, .mobile-show, .mobile-block {
    display: block; }

  .tablet-hide, .mobile-hide {
    display: none; }

  .col-sm-1 {
    width: 8.3333%; }

  .col-sm-2 {
    width: 16.6666%; }

  .col-sm-3 {
    width: 25%; }

  .col-sm-4 {
    width: 33.3333%; }

  .col-sm-5 {
    width: 41.6666%; }

  .col-sm-6 {
    width: 50%; }

  .col-sm-7 {
    width: 58.3333%; }

  .col-sm-8 {
    width: 66.6666%; }

  .col-sm-9 {
    width: 75%; }

  .col-sm-10 {
    width: 83.3333%; }

  .col-sm-11 {
    width: 91.66667%; }

  .col-sm-12 {
    width: 100%; }

  .list-sm-i1 > li {
    width: 100%;
    margin-right: 0; }

  .list-sm-i2 > li {
    width: 48%;
    margin-right: 4%; }
    .list-sm-i2 > li:nth-child(even) {
      float: right; }
  .list-sm-i2.list-lg-i3 > li:nth-child(3n) {
    margin-right: 4%; }
  .list-sm-i2.list-lg-i3 > li:nth-child(2n) {
    margin-right: 0%; }

  .list-sm-i3 > li {
    width: 32.5%;
    margin-right: 1.2%; }
    .list-sm-i3 > li:nth-child(3n) {
      margin-right: 0; }

  .list-sm-i4 > li {
    width: 23%;
    margin-right: 1.2%; }
    .list-sm-i4 > li:nth-child(4n) {
      margin-right: 0; }

  .list-sm-i5 > li {
    width: 19%;
    margin-right: 1.2%; }
    .list-sm-i5 > li:nth-child(5n) {
      margin-right: 0; }

  .list-sm-i6 > li {
    width: 15.6666%;
    margin-right: 1.2%; }
    .list-sm-i6 > li:nth-child(6n) {
      margin-right: 0; }

  .list-sm-i2 > li {
    width: 48%; }
    .list-sm-i2 > li:nth-child(2n) {
      margin-right: 0; }

  .list-sm-i3 > li {
    width: 32.5%;
    margin-right: 1.2%; }
    .list-sm-i3 > li:nth-child(3n) {
      margin-right: 0; }

  .list-sm-i4 > li {
    width: 23%;
    margin-right: 1.2%; }
    .list-sm-i4 > li:nth-child(4n) {
      margin-right: 0; }

  .list-sm-i5 > li {
    width: 19%;
    margin-right: 1.2%; }
    .list-sm-i5 > li:nth-child(5n) {
      margin-right: 0; }

  .list-sm-i6 > li {
    width: 15.6666%;
    margin-right: 1.2%; }
    .list-sm-i6 > li:nth-child(6n) {
      margin-right: 0; }

  .btn-more {
    height: 32px;
    line-height: 32px;
    padding: 0 10px; }

  .deco-h2 .btn-more {
    margin-top: 5px; }

  .inner-banner h1 {
    font-size: calc(36rem / 16);
    line-height: 54px; }

  .mini-nav {
    width: 100%;
    text-align: center; }
    .mini-nav li {
      width: 48%; }
      .mini-nav li > a {
        width: 100%;
        padding: 5px 0;
        margin: 0; } }
/*==========================================
Mobile
==========================================*/
@media screen and (max-width: 480px) {
  #home-main #home-counter > span {
    width: 48px;
    height: 60px;
    line-height: 32px; }

  .sign-join {
    background-size: 40px;
    background-position: left top; }

  #banner {
    height: 120px; }

  .join-list li {
    width: 50%; }

  .inner-banner h1 {
    font-size: 32px; }

  .org-logo-list li {
    width: 100%;
    margin-right: 0; }

  .breadcrumb {
    display: none; }

  .breath-list li {
    width: 100%;
    margin-right: 0; }
    .breath-list li .caption {
      height: auto; }

  .list-xs-i1 > li {
    width: 100%;
    margin-right: 0%; } }

/*# sourceMappingURL=responsive.css.map */