@import url("vendor/reset.css");

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200;300;400;500;600;700&family=Oswald:wght@400&display=swap");

body, html {

  font-family: 'Noto Serif TC', sans-serif;

  -webkit-tap-highlight-color: transparent;

  font-size: 14px;

  line-height: 1.8;

  font-weight: 400;

  background-color: #fff;

  color: #323f48; }



a {

  text-decoration: none;

  color: #323f48; }



button {

  transition: 0.5s ease; }



textarea, select, input, button {

  outline: none; }



:focus {

  outline-color: transparent;

  outline-style: none; }



.text-left {

  text-align: left; }

.text-right {

  text-align: right; }

.text-center {

  text-align: center; }



.hide {

  display: none; }



.clear-fix {

  clear: both; }



::placeholder {

  color: #b4b4b4;

  opacity: 1; }



:-ms-input-placeholder {

  color: #b4b4b4; }



::-ms-input-placeholder {

  color: #b4b4b4; }



header {

  position: fixed;

  z-index: 2;

  left: 0;

  top: 0;

  width: 100%;

  padding: 15px 0;

  background-color: #fff; }

  header .header-div {

    position: relative;

    z-index: 2; }

    header .header-div .top-div .outer-div {

      margin: 0 auto;

      max-width: 1200px;

      padding: 0 15px;

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

      align-items: center;

      height: 50px; }

      header .header-div .top-div .outer-div .brand a {

        display: inline-flex;

        height: 55px;

        transition: 0.5s ease; }

        header .header-div .top-div .outer-div .brand a img {

          height: 100%;

          transition: 0.5s ease; }

      header .header-div .top-div .outer-div .search-links {

        display: inline-flex;

        flex-wrap: wrap;

        align-items: center; }

        header .header-div .top-div .outer-div .search-links .search-div .box {

          display: inline-flex;

          border: 1px solid #cccccc;

          padding: 5px;

          margin-top: -5px; }

          header .header-div .top-div .outer-div .search-links .search-div .box input {

            border: none;

            border-radius: 0;

            color: #323f48;

            font-size: 16px;

            width: 370px; }

            header .header-div .top-div .outer-div .search-links .search-div .box input::placeholder {

              /* Chrome, Firefox, Opera, Safari 10.1+ */

              color: #cccccc;

              opacity: 1;

              /* Firefox */ }

            header .header-div .top-div .outer-div .search-links .search-div .box input:-ms-input-placeholder {

              /* Internet Explorer 10-11 */

              color: #cccccc; }

            header .header-div .top-div .outer-div .search-links .search-div .box input::-ms-input-placeholder {

              /* Microsoft Edge */

              color: #cccccc; }

          header .header-div .top-div .outer-div .search-links .search-div .box button {

            padding: 0;

            border-radius: none;

            background-position: center;

            background-repeat: no-repeat;

            background-image: url(../images/icon_search_green.svg);

            width: 24px;

            height: 24px;

            background-size: 20px auto;

            background-color: transparent; }

        header .header-div .top-div .outer-div .search-links .navi {

          display: inline-flex;

          align-items: center; }

          header .header-div .top-div .outer-div .search-links .navi li {

            display: inline-block; }

            header .header-div .top-div .outer-div .search-links .navi li:first-child {

              margin-left: 0; }

            header .header-div .top-div .outer-div .search-links .navi li a {

              font-size: 16px;

              color: #323f48;

              padding: 0px 10px;

              display: inline-block;

              position: relative; }

              header .header-div .top-div .outer-div .search-links .navi li a:hover {

                color: #3a9f85; }



.body-brand-had-bg header:before {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  width: calc(12vw + 160px);

  height: 220px;

  background-color: #292a2a; }



.scroll header {

  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);

  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);

  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);

  padding: 10px 0; }

  .scroll header .header-div {

    position: relative; }

    .scroll header .header-div .top-div .outer-div .brand {

      padding-top: 0; }

      .scroll header .header-div .top-div .outer-div .brand a {

        height: 45px; }



main {

  margin-top: 80px;

  position: relative;

  z-index: 1;

  overflow: hidden; }



.scroll main {

  margin-top: 70px; }



@media all and (max-width: 1480px) {

  .body-brand-had-bg header:before {

    width: 16vw; } }

@media all and (max-width: 992px) {

  header {

    padding: 10px 0; }

    header .header-div .top-div {

      top: 0; }

      header .header-div .top-div .outer-div {

        height: 40px; }

        header .header-div .top-div .outer-div .brand {

          padding-top: 0; }

          header .header-div .top-div .outer-div .brand a {

            height: 40px; }

        header .header-div .top-div .outer-div .search-links .search-div {

          margin-right: 40px; }

        header .header-div .top-div .outer-div .search-links .links {

          display: none; }



  .scroll header {

    padding: 10px 0; }

    .scroll header .header-div .top-div .outer-div .brand a {

      height: 40px; }



  main {

    margin-top: 60px; } }

@media all and (max-width: 640px) {

  header .header-div .top-div .outer-div .search-links .search-div .box input {

    width: 40vw;

    font-size: 14px; } }

@media all and (max-width: 480px) {

  header {

    padding: 8px 0; }

    header .header-div .top-div .outer-div .brand a {

      height: 35px; }

    header .header-div .top-div .outer-div .search-links .search-div .box input {

      width: 35vw; }



  main {

    margin-top: 56px; }



  .scroll header {

    padding: 8px 0; }

    .scroll header .header-div .top-div .outer-div .brand a {

      height: 35px; }

  .scroll main {

    margin-top: 56px; } }

footer {

  position: relative;

  z-index: 1;

  background-color: #323f48; }

  footer .footer-div .outer-div {

    max-width: 980px;

    margin: 0 auto;

    padding: 0 15px; }

  footer .footer-div .top-div {

    padding: 50px 0; }

    footer .footer-div .top-div .two-cols {

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

      align-items: center; }

      footer .footer-div .top-div .two-cols .col01 {

        width: calc(100% - 540px);

        color: #cccccc;

        font-size: 14px; }

        footer .footer-div .top-div .two-cols .col01 .sub-top img {

          height: 45px; }

        footer .footer-div .top-div .two-cols .col01 .sub-bottom .sub-item {

          display: flex;

          flex-wrap: wrap;

          margin: 10px 0; }

          footer .footer-div .top-div .two-cols .col01 .sub-bottom .sub-item .sub-col01 {

            width: 20px;

            text-align: center;

            margin-right: 10px; }

          footer .footer-div .top-div .two-cols .col01 .sub-bottom .sub-item .sub-col02 {

            width: calc(100% - 30px); }

            footer .footer-div .top-div .two-cols .col01 .sub-bottom .sub-item .sub-col02 a {

              color: #cccccc; }

      footer .footer-div .top-div .two-cols .col02 {

        width: 540px; }

        footer .footer-div .top-div .two-cols .col02 iframe {

          width: 100%;

          height: 220px; }

  footer .footer-div .bottom-div {

    text-align: center;

    font-size: 14px;

    color: #fff;

    padding-bottom: 30px; }



.toggle-btn {

  display: none;

  position: fixed;

  top: 16px;

  right: 15px;

  width: 26px;

  height: 30px;

  z-index: 889;

  background: none;

  border: none;

  padding: 0; }

  .toggle-btn span {

    display: block;

    width: 100%;

    height: 2px;

    background: #323f48;

    margin: 5px 0;

    transition: 0.5s ease; }



.float-div {

  position: fixed;

  z-index: 11;

  left: 30px;

  bottom: 150px;

  width: 30px; }

  .float-div .deco {

    position: relative;

    text-align: center;

    height: 155px;

    margin-bottom: 15px; }

    .float-div .deco:after {

      content: '';

      position: absolute;

      left: 50%;

      height: 100%;

      width: 1px;

      background-color: #5b5d5d; }

  .float-div .links {

    text-align: center;

    display: inline-block;

    width: 30px; }

    .float-div .links a {

      display: inline-block;

      margin-bottom: 15px; }

      .float-div .links a img {

        width: 24px; }

      .float-div .links a :last-child {

        margin-bottom: 0; }

      .float-div .links a.hide {

        display: none; }



.body-mobile-active {

  overflow: hidden; }

  .body-mobile-active .toggle-btn {

    right: 15px;

    z-index: 999; }

    .body-mobile-active .toggle-btn span {

      background-color: #323f48; }

      .body-mobile-active .toggle-btn span:nth-child(1) {

        transform: rotate(-45deg); }

      .body-mobile-active .toggle-btn span:nth-child(2) {

        transform: rotate(-135deg);

        position: absolute;

        top: 9px; }

      .body-mobile-active .toggle-btn span:nth-child(3) {

        display: none; }



.hide {

  display: none; }



.overlay {

  z-index: 130;

  display: none;

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: #fff; }



.body-mobile-active .overlay {

  display: block; }



#mobile-nav {

  z-index: 130;

  display: none;

  position: fixed;

  left: 0;

  top: 0px;

  height: 100vh;

  bottom: 0;

  padding-bottom: 10px;

  padding-top: 10px;

  overflow-y: auto;

  background-color: #fff;

  width: 100%; }

  #mobile-nav .brand {

    display: inline-block;

    padding: 0px 15px;

    text-align: left; }

    #mobile-nav .brand a {

      display: inline-block;

      height: 40px; }

      #mobile-nav .brand a img {

        height: 100%; }

  #mobile-nav ul {

    margin: 0 15px;

    padding: 0;

    list-style: none; }

    #mobile-nav ul li {

      display: block; }

      #mobile-nav ul li a {

        font-size: 16px;

        font-weight: 400;

        color: #323f48;

        display: block;

        padding: 15px 10px;

        text-align: center;

        border-bottom: 1px solid rgba(155, 155, 155, 0.5);

        position: relative; }



.body-mobile-active #mobile-nav {

  display: block; }



.gotop {

  z-index: 88;

  position: fixed;

  display: none;

  background-image: url(./../images/icon_gotop.svg);

  background-position: center;

  background-size: 100%;

  width: 36px;

  height: 36px;

  right: 20px;

  bottom: 100px;

  background-color: transparent;

  border: 1px solid #fff;

  border-radius: 100px;

  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);

  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);

  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3); }



.scroll .gotop {

  display: block; }



@media all and (max-width: 1024px) {

  footer .footer-div .top-div {

    padding: 30px 0; }

    footer .footer-div .top-div .two-cols {

      display: block; }

      footer .footer-div .top-div .two-cols .col01 {

        width: 100%; }

      footer .footer-div .top-div .two-cols .col02 {

        width: 100%;

        margin-top: 20px; }

        footer .footer-div .top-div .two-cols .col02 iframe {

          height: 45vw; } }

@media all and (max-width: 992px) {

  .toggle-btn {

    display: inline-block; }



  .float-div {

    left: 10px; }



  .scroll .float-div {

    display: none; } }

@media all and (max-width: 640px) {

  footer .footer-div .top-div {

    padding: 20px 0 10px 0; }

    footer .footer-div .top-div .two-cols {

      display: block; }

      footer .footer-div .top-div .two-cols .col01 {

        font-size: 12px; }

  footer .footer-div .bottom-div {

    padding-bottom: 10px;

    font-size: 12px; } }

.fr-close.fr-close-outside .fr-close-icon {

  background: url(../images/icon_close.svg);

  background-size: 60% auto;

  background-position: center !important;

  width: 48px;

  height: 48px;

  background-color: transparent;

  left: 0;

  top: 0;

  background-repeat: no-repeat; }



.fr-window-skin-fresco.fr-window-ui-outside .fr-close-background {

  display: none; }



.fr-thumbnail.fr-load-thumbnail.fr-thumbnail-active {

  outline: 4px solid #fff; }



.fr-position-outside .fr-position-text {

  display: none; }



.fr-window-skin-fresco .fr-content-background {

  background: transparent; }



.fr-ui-outside .fr-info-background {

  background: transparent; }



.fr-info {

  text-align: center; }

  .fr-info .fr-stroke {

    display: none; }



.section-banner .banner-div {

  height: 300px;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  position: relative; }

  .section-banner .banner-div .info {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    letter-spacing: 2px; }

    .section-banner .banner-div .info h2 {

      color: #fff;

      font-weight: 700;

      font-size: 35px;

      font-family: 'Questrial', sans-serif; }

    .section-banner .banner-div .info h3 {

      color: #fff;

      font-size: 24px;

      font-weight: 400; }



.section-breadcrumb {

  background-color: #323f48;

  padding: 20px 0; }

  .section-breadcrumb .outer-div {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 15px;

    color: #fff;

    font-size: 16px; }

    .section-breadcrumb .outer-div a {

      color: #fff; }



.section-div .outer-div {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 15px; }



.section-project-list {

  padding: 85px 0; }

  .section-project-list .outer-div {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 15px; }

    .section-project-list .outer-div .project-list {

      display: flex;

      flex-wrap: wrap; }

      .section-project-list .outer-div .project-list .item {

        width: calc(100% / 3 - 16px);

        margin: 8px;

        position: relative;

        overflow: hidden; }

        .section-project-list .outer-div .project-list .item .img {

          background-position: center;

          background-repeat: no-repeat;

          background-size: cover;

          transition: 0.5s ease; }

          .section-project-list .outer-div .project-list .item .img img {

            width: 100%; }

        .section-project-list .outer-div .project-list .item:hover .img {

          -ms-transform: scale(1.1, 1.1);

          /* IE 9 */

          -webkit-transform: scale(1.1, 1.1);

          /* Safari */

          transform: scale(1.1, 1.1); }

        .section-project-list .outer-div .project-list .item a {

          position: absolute;

          left: 0;

          top: 0;

          width: 100%;

          height: 100%;

          display: flex;

          flex-wrap: wrap;

          align-items: center;

          justify-content: center;

          background-color: rgba(50, 63, 72, 0.4);

          transition: 0.5s ease; }

          .section-project-list .outer-div .project-list .item a h3 {

            font-size: 20px;

            color: #fff;

            font-weight: 700;

            position: relative;

            z-index: 2;

            text-align: center; }

          .section-project-list .outer-div .project-list .item a:hover {

            background: rgba(5, 190, 144, 0.6);

            background: -moz-linear-gradient(top, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(5, 190, 144, 0.6)), color-stop(41%, rgba(117, 189, 209, 0.6)), color-stop(100%, rgba(0, 100, 194, 0.6)));

            background: -webkit-linear-gradient(top, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

            background: -o-linear-gradient(top, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

            background: -ms-linear-gradient(top, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

            background: linear-gradient(to bottom, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05be90', endColorstr='#0064c2', GradientType=0 ); }

            .section-project-list .outer-div .project-list .item a:hover h3 {

              opacity: 1; }



.section-project-detail {

  padding: 80px 0; }

  .section-project-detail .outer-div {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 15px; }

    .section-project-detail .outer-div .project-detail .two-cols {

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between; }

      .section-project-detail .outer-div .project-detail .two-cols .col01 {

        width: 280px; }

      .section-project-detail .outer-div .project-detail .two-cols .col02 {

        width: calc(100% - 280px - 30px); }

    .section-project-detail .outer-div .project-detail .mobile-show-select-div {

      position: relative;

      z-index: 10;

      margin-bottom: 15px; }

      .section-project-detail .outer-div .project-detail .mobile-show-select-div button {

        display: none;

        border: 1px solid #cccccc;

        background-color: transparent;

        width: 100%;

        padding: 8px;

        text-align: left;

        font-size: 18px;

        position: relative; }

        .section-project-detail .outer-div .project-detail .mobile-show-select-div button span {

          display: inline-block; }

        .section-project-detail .outer-div .project-detail .mobile-show-select-div button i {

          display: inline-block;

          width: 20px;

          height: 20px;

          position: absolute;

          right: 10px;

          top: 7px; }

          .section-project-detail .outer-div .project-detail .mobile-show-select-div button i:before {

            content: '';

            position: absolute;

            left: 0;

            top: 10px;

            width: 0;

            height: 0;

            border-style: solid;

            border-width: 10px 10px 0 10px;

            border-color: #323f48 transparent transparent transparent; }

      .section-project-detail .outer-div .project-detail .mobile-show-select-div.active button i:before {

        width: 0;

        height: 0;

        border-style: solid;

        border-width: 0 10px 10px 10px;

        border-color: transparent transparent #323f48 transparent; }

    .section-project-detail .outer-div .project-detail .sub-project-navi {

      position: relative;

      z-index: 1; }

      .section-project-detail .outer-div .project-detail .sub-project-navi .item {

        font-size: 16px;

        color: #323f48; }

        .section-project-detail .outer-div .project-detail .sub-project-navi .item .item-title h3 {

          display: flex;

          flex-wrap: wrap;

          align-items: center;

          padding: 15px 15px;

          position: relative;

          border-bottom: 1px solid #50ceae; }

          .section-project-detail .outer-div .project-detail .sub-project-navi .item .item-title h3 a {

            display: flex;

            flex-wrap: wrap;

            align-items: center; }

            .section-project-detail .outer-div .project-detail .sub-project-navi .item .item-title h3 a:hover {

              color: #3a9f85;

              font-weight: 700; }

          .section-project-detail .outer-div .project-detail .sub-project-navi .item .item-title h3 b {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            width: 20px;

            height: 20px;

            margin-right: 10px;

            position: relative; }

            .section-project-detail .outer-div .project-detail .sub-project-navi .item .item-title h3 b img {

              max-width: 100%; }

              .section-project-detail .outer-div .project-detail .sub-project-navi .item .item-title h3 b img:nth-child(2) {

                position: absolute;

                left: 0;

                top: 0;

                opacity: 0; }

          .section-project-detail .outer-div .project-detail .sub-project-navi .item .item-title h3 i {

            display: inline-block;

            width: 20px;

            height: 20px;

            background-image: url(../images/icon_open_green.svg);

            background-position: center;

            background-size: 100% auto;

            position: absolute;

            right: 15px;

            top: 20px;

            cursor: pointer; }

        .section-project-detail .outer-div .project-detail .sub-project-navi .item .sub-links {

          height: 0;

          overflow: hidden; }

          .section-project-detail .outer-div .project-detail .sub-project-navi .item .sub-links ul li {

            border-bottom: 1px solid #50ceae; }

            .section-project-detail .outer-div .project-detail .sub-project-navi .item .sub-links ul li a {

              display: block;

              padding: 15px 0 15px 45px; }

              .section-project-detail .outer-div .project-detail .sub-project-navi .item .sub-links ul li a:hover {

                color: #3a9f85;

                font-weight: 700; }

              .section-project-detail .outer-div .project-detail .sub-project-navi .item .sub-links ul li a.active {

                font-weight: 700; }

        .section-project-detail .outer-div .project-detail .sub-project-navi .item.active .item-title {

          background: #05be8f;

          background: -moz-linear-gradient(left, #05be8f 0%, #0064c2 100%);

          background: -webkit-gradient(left top, right top, color-stop(0%, #05be8f), color-stop(100%, #0064c2));

          background: -webkit-linear-gradient(left, #05be8f 0%, #0064c2 100%);

          background: -o-linear-gradient(left, #05be8f 0%, #0064c2 100%);

          background: -ms-linear-gradient(left, #05be8f 0%, #0064c2 100%);

          background: linear-gradient(to right, #05be8f 0%, #0064c2 100%);

          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05be8f', endColorstr='#0064c2', GradientType=1 ); }

          .section-project-detail .outer-div .project-detail .sub-project-navi .item.active .item-title h3 {

            border-bottom: 1px solid transparent;

            color: #fff; }

            .section-project-detail .outer-div .project-detail .sub-project-navi .item.active .item-title h3 b img:nth-child(1) {

              opacity: 0; }

            .section-project-detail .outer-div .project-detail .sub-project-navi .item.active .item-title h3 b img:nth-child(2) {

              opacity: 1; }

            .section-project-detail .outer-div .project-detail .sub-project-navi .item.active .item-title h3 i {

              background-image: url(../images/icon_close_white.svg); }

        .section-project-detail .outer-div .project-detail .sub-project-navi .item.active .sub-links {

          height: auto; }

    .section-project-detail .outer-div .project-detail .project-detail-list {

      display: flex;

      flex-wrap: wrap;

      margin-left: -8px;

      margin-right: -8px;

      margin-top: -8px; }

      .section-project-detail .outer-div .project-detail .project-detail-list .item {

        margin: 8px 8px 30px 8px;

        overflow: hidden;

        width: calc(100% / 3 - 16px); }

        .section-project-detail .outer-div .project-detail .project-detail-list .item .box {

          background-position: center;

          background-repeat: no-repeat;

          background-size: cover;

          transition: 0.5s ease;

          position: relative;

          overflow: hidden; }

          .section-project-detail .outer-div .project-detail .project-detail-list .item .box a {

            display: block;

            width: 100%;

            height: 100%;

            position: relative;

            z-index: 2; }

            .section-project-detail .outer-div .project-detail .project-detail-list .item .box a img {

              width: 100%; }

        .section-project-detail .outer-div .project-detail .project-detail-list .item:hover .box {

          -ms-transform: scale(1.1, 1.1);

          /* IE 9 */

          -webkit-transform: scale(1.1, 1.1);

          /* Safari */

          transform: scale(1.1, 1.1); }

          .section-project-detail .outer-div .project-detail .project-detail-list .item:hover .box:before {

            content: '';

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            background: rgba(5, 190, 144, 0.6);

            background: -moz-linear-gradient(top, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(5, 190, 144, 0.6)), color-stop(41%, rgba(117, 189, 209, 0.6)), color-stop(100%, rgba(0, 100, 194, 0.6)));

            background: -webkit-linear-gradient(top, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

            background: -o-linear-gradient(top, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

            background: -ms-linear-gradient(top, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

            background: linear-gradient(to bottom, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05be90', endColorstr='#0064c2', GradientType=0 ); }

          .section-project-detail .outer-div .project-detail .project-detail-list .item:hover .box a {

            background-image: url(../images/icon_search_white.svg);

            background-repeat: no-repeat;

            background-position: center;

            background-size: 28px auto; }

        .section-project-detail .outer-div .project-detail .project-detail-list .item .album {

          display: none; }

        .section-project-detail .outer-div .project-detail .project-detail-list .item .desc {

          font-size: 14px;

          color: #323f48;

          text-align: center;

          margin-top: 15px; }

    .section-project-detail .outer-div .project-detail .pagination-div {

      margin-top: 60px; }



.pagination-div {

  text-align: center; }

  .pagination-div a {

    font-size: 15px;

    display: inline-block;

    color: #323f48;

    min-width: 30px;

    min-height: 30px;

    border: 1px solid #323f48;

    border-radius: 5px; }

    .pagination-div a.active, .pagination-div a:hover {

      border: 1px solid #50ceae;

      color: #fff;

      background-color: #50ceae; }



.section-contact-us {

		

  padding: 80px 0;

	 

  }

  .section-contact-us .outer-div {

    max-width: 1200px;

	

    margin: 0 auto;

    padding: 0 15px;

	

	}

    .section-contact-us .outer-div .sub-title h3 {

      position: relative;

      padding-left: 20px;

      font-size: 24px;

      color: #000;

      font-weight: 700;

      text-align: left;

      padding-bottom: 0; }

      .section-contact-us .outer-div .sub-title h3:before {

        content: '';

        position: absolute;

        left: 0;

        top: 10px;

        width: 4px;

        height: 25px;

        background-color: #50ceae; }

    .section-contact-us .outer-div .form-div {

      margin-top: 30px; }

      .section-contact-us .outer-div .form-div .two-cols {

        display: flex;

        flex-wrap: wrap;

        justify-content: space-between;

        font-size: 16px; }

        .section-contact-us .outer-div .form-div .two-cols .col01 {

          width: 420px; }

        .section-contact-us .outer-div .form-div .two-cols .col02 {

          width: calc(100% - 420px - 25px); }

        .section-contact-us .outer-div .form-div .two-cols .item {

          margin: 25px 0; }

          .section-contact-us .outer-div .form-div .two-cols .item input {

            width: calc(100% - 22px);

            border: 1px solid #707070;

            font-size: 16px;

            padding: 10px; }

          .section-contact-us .outer-div .form-div .two-cols .item textarea {

            width: calc(100% - 22px);

            border: 1px solid #707070;

            font-size: 16px;

            padding: 10px;

            height: 148px; }

          .section-contact-us .outer-div .form-div .two-cols .item.validate-code-div {

            margin-top: -10px;

            display: flex;

            flex-wrap: wrap;

            align-items: center; }

            .section-contact-us .outer-div .form-div .two-cols .item.validate-code-div span {

              display: inline-block;

              height: 40px; }

              .section-contact-us .outer-div .form-div .two-cols .item.validate-code-div span:nth-child(1) input {

                width: 120px; }

              .section-contact-us .outer-div .form-div .two-cols .item.validate-code-div span:nth-child(2) {

                margin-left: 25px; }

                .section-contact-us .outer-div .form-div .two-cols .item.validate-code-div span:nth-child(2) img {

                  height: 40px; }

              .section-contact-us .outer-div .form-div .two-cols .item.validate-code-div span:nth-child(3) {

                margin-left: 25px;

                font-size: 16px;

                color: #323f48;

                display: inline-flex;

                align-items: center; }

      .section-contact-us .outer-div .form-div .action {

        text-align: center;

        margin-top: 50px; }

        .section-contact-us .outer-div .form-div .action button {

          color: #fff;

          background-color: #50ceae;

          font-size: 16px;

          border-radius: 100px;

          border: none;

          padding: 5px 35px;

          transition: 0.5s ease; }

          .section-contact-us .outer-div .form-div .action button:hover {

            opacity: 0.5;

            -ms-transform: scale(1.1, 1.1);

            /* IE 9 */

            -webkit-transform: scale(1.1, 1.1);

            /* Safari */

            transform: scale(1.1, 1.1); }



.section-about-funisland {

  padding: 80px 0; }

  .section-about-funisland .outer-div {

    max-width: 980px;

    margin: 0 auto;

    padding: 0 15px; }

    .section-about-funisland .outer-div .sub-title h3 {

      position: relative;

      padding-left: 20px;

      font-size: 24px;

      color: #000;

      font-weight: 700;

      text-align: left;

      padding-bottom: 0; }

      .section-about-funisland .outer-div .sub-title h3:before {

        content: '';

        position: absolute;

        left: 0;

        top: 10px;

        width: 4px;

        height: 25px;

        background-color: #50ceae; }

    .section-about-funisland .outer-div .two-cols {

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      justify-content: space-between; }

      .section-about-funisland .outer-div .two-cols .col01 {

        width: calc(100% - 740px);

        text-align: left; }

        .section-about-funisland .outer-div .two-cols .col01 img {

          height: 190px; }

      .section-about-funisland .outer-div .two-cols .col02 {

        width: 740px; }

        .section-about-funisland .outer-div .two-cols .col02 .info {

          margin-top: 30px; }

          .section-about-funisland .outer-div .two-cols .col02 .info P {

            font-size: 16px;

            margin-top: 30px;

            color: #000; }

            .section-about-funisland .outer-div .two-cols .col02 .info P:first-child {

              margin-top: 0; }



.section-color-green {

  background-color: #50ceae; }



.section-color-gray {

  background-color: #f5f5f5; }



.section-div .sub-title h3 {

  position: relative;

  font-size: 24px;

  color: #000;

  font-weight: 700;

  text-align: center;

  padding-bottom: 20px;

  letter-spacing: 2px; }

  .section-div .sub-title h3:before {

    content: '';

    position: absolute;

    left: calc(50% - 40px);

    bottom: 10px;

    width: 80px;

    height: 4px;

    background-color: #50ceae; }

.section-div .icon-list {

  padding: 100px 0;

  display: flex;

  flex-wrap: wrap; }

  .section-div .icon-list .item {

    width: calc(100% / 4);

    text-align: center; }

    .section-div .icon-list .item .desc {

      margin-top: 15px; }

      .section-div .icon-list .item .desc h4 {

        color: #fff;

        font-size: 18px; }



.section-type {

  padding: 100px 0; }

  .section-type .outer-div {

    max-width: 980px; }

    .section-type .outer-div .type-list {

      display: flex;

      flex-wrap: wrap;

      margin-top: 30px; }

      .section-type .outer-div .type-list .item {

        width: calc(100% / 4);

        position: relative; }

        .section-type .outer-div .type-list .item .img img {

          width: 224px; }

        .section-type .outer-div .type-list .item .desc {

          position: absolute;

          left: 0;

          top: 0;

          width: 100%;

          height: 100%;

          display: flex;

          align-items: center;

          justify-content: center; }

          .section-type .outer-div .type-list .item .desc h4 {

            font-size: 18px;

            color: #fff;

            font-weight: 700;

            display: none; }



.section-process {

  padding: 100px 0; }

  .section-process .outer-div .process-step-div {

    margin-top: 60px; }

    .section-process .outer-div .process-step-div .item {

      text-align: center;

      padding-bottom: 50px;

      position: relative;

      margin-bottom: 20px; }

      .section-process .outer-div .process-step-div .item:last-child {

        margin-bottom: 0; }

        .section-process .outer-div .process-step-div .item:last-child:after {

          background-image: none; }

      .section-process .outer-div .process-step-div .item:after {

        content: '';

        position: absolute;

        width: 26px;

        height: 26px;

        bottom: 0;

        left: calc(50% - 13px);

        background-image: url(../images/icon_arrow_down_green.svg);

        background-repeat: no-repeat;

        background-size: 100% auto;

        background-position: center; }

      .section-process .outer-div .process-step-div .item .item-title {

        font-size: 20px;

        color: #323f48;

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        justify-content: center;

        font-weight: 700; }

        .section-process .outer-div .process-step-div .item .item-title big {

          font-size: 34px;

          font-family: 'Questrial', sans-serif;

          font-weight: 700;

          margin-right: 10px; }

      .section-process .outer-div .process-step-div .item .item-info p {

        font-size: 16px;

        color: #6d7072; }

        .section-process .outer-div .process-step-div .item .item-info p span {

          display: block; }

  .section-process .outer-div .process-remind-div {

    margin-top: 50px;

    border-top: 1px solid #cccccc;

    padding-top: 80px;

    text-align: center; }

    .section-process .outer-div .process-remind-div p {

      font-size: 16px;

      color: #6d7072; }

      .section-process .outer-div .process-remind-div p span {

        display: block; }



.section-funisland {

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  padding: 90px 0; }

  .section-funisland .outer-div .two-cols {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between; }

    .section-funisland .outer-div .two-cols .col01 {

      width: calc(100% - 720px - 50px - 5px); }

      .section-funisland .outer-div .two-cols .col01 h3 {

        font-size: 35px;

        color: #fff; }

    .section-funisland .outer-div .two-cols .col02 {

      width: 720px;

      padding: 30px 0 30px 50px;

      border-left: 5px solid #cccccc; }

      .section-funisland .outer-div .two-cols .col02 p {

        font-size: 16px;

        color: #fff; }



.section-work-list {

  padding: 100px 0; }

  .section-work-list .outer-div .work-list {

    display: flex;

    flex-wrap: wrap;

    margin-left: -8px;

    margin-right: -8px; }

    .section-work-list .outer-div .work-list .item {

      width: calc(100% / 3); }

      .section-work-list .outer-div .work-list .item a {

        display: block;

        margin: 0 8px 30px 8px; }

        .section-work-list .outer-div .work-list .item a .img {

          background-position: center;

          background-repeat: no-repeat;

          background-size: cover; }

          .section-work-list .outer-div .work-list .item a .img img {

            width: 100%; }

        .section-work-list .outer-div .work-list .item a .info {

          color: #323f48;

          margin-top: 25px;

          text-align: center; }

          .section-work-list .outer-div .work-list .item a .info h3 {

            font-size: 18px;

            font-weight: 700; }

          .section-work-list .outer-div .work-list .item a .info h4 {

            font-size: 14px; }

  .section-work-list .outer-div .pagination-div {

    margin-top: 30px; }



.section-work-detail {

  padding: 100px 0; }

  .section-work-detail .outer-div .work-detial {

    line-height: 1.6; }

    .section-work-detail .outer-div .work-detial h2 {

      font-size: 36px; }

    .section-work-detail .outer-div .work-detial h3 {

      font-size: 28px; }

    .section-work-detail .outer-div .work-detial h4 {

      font-size: 22px; }

    .section-work-detail .outer-div .work-detial p {

      font-size: 18px;

      margin: 15px 0; }

    .section-work-detail .outer-div .work-detial img {

      max-width: 100%;

      margin: 15px 0; }



@media all and (max-width: 1240px) {

  .section-funisland .outer-div .two-cols .col01 {

    width: calc(100% - 60vw - 30px - 5px); }

  .section-funisland .outer-div .two-cols .col02 {

    width: 60vw;

    padding: 30px 0 30px 30px; } }

@media all and (max-width: 992px) {

  .section-contact-us {

    padding: 40px 0; }



  .section-about-funisland {

    padding: 40px 0; }

    .section-about-funisland .outer-div .two-cols {

      display: flex; }

      .section-about-funisland .outer-div .two-cols .col01 {

        width: 100%;

        text-align: center; }

      .section-about-funisland .outer-div .two-cols .col02 {

        width: 100%;

        margin-top: 15px; }

        .section-about-funisland .outer-div .two-cols .col02 .info {

          margin-top: 15px; }



  .section-process {

    padding: 40px 0; }

    .section-process .outer-div .process-step-div {

      margin-top: 30px; }

    .section-process .outer-div .process-remind-div {

      margin-top: 15px;

      padding-top: 30px; }



  .section-type {

    padding: 40px 0; }



  .section-project-list {

    padding: 40px 0; }



  .section-project-detail {

    padding: 40px 0; }



  .section-funisland {

    padding: 40px 0; }

    .section-funisland .info {

      margin: 30px 0; }



  .section-work-list {

    padding: 40px 0; }



  .section-work-detail {

    padding: 40px 0; } }

@media all and (max-width: 913px) {

  .section-banner .banner-div {

    height: 45vw; }



  .section-div .icon-list .item {

    width: calc(100% / 2 );

    margin: 15px 0; }

    .section-div .icon-list .item .img img {

      width: 120px; }



  .section-contact-us .outer-div .form-div .two-cols {

    display: block; }

    .section-contact-us .outer-div .form-div .two-cols .col01 {

      width: 100%; }

    .section-contact-us .outer-div .form-div .two-cols .col02 {

      width: 100%; }



  .section-type .outer-div .type-list .item {

    width: calc(100% / 2); }

    .section-type .outer-div .type-list .item .img {

      text-align: center; }

      .section-type .outer-div .type-list .item .img img {

        width: 35vw;

        margin: 0 auto; }



  .section-project-detail .outer-div .project-detail .two-cols {

    display: block; }

    .section-project-detail .outer-div .project-detail .two-cols .col01 {

      width: 100%; }

    .section-project-detail .outer-div .project-detail .two-cols .col02 {

      width: 100%; }

  .section-project-detail .outer-div .project-detail .mobile-show-select-div button {

    display: inline-block; }

  .section-project-detail .outer-div .project-detail .mobile-show-select-div.active .sub-project-navi {

    display: block; }

  .section-project-detail .outer-div .project-detail .sub-project-navi {

    max-height: 70vw;

    overflow-y: auto;

    display: none;

    position: absolute;

    left: 0;

    width: 100%;

    background-color: #fff; }

    .section-project-detail .outer-div .project-detail .sub-project-navi .item .item-title h3 {

      padding: 10px 15px; }

    .section-project-detail .outer-div .project-detail .sub-project-navi .item .sub-links ul li a {

      padding: 10px 0 10px 45px; }



  .section-funisland .outer-div .two-cols {

    display: block; }

    .section-funisland .outer-div .two-cols .col01 {

      width: 100%;

      text-align: center; }

    .section-funisland .outer-div .two-cols .col02 {

      margin-top: 15px;

      width: 100%;

      border-left: 0;

      padding: 0;

      text-align: center; } }

@media all and (max-width: 768px) {

  .section-project-list .outer-div .project-list .item {

    width: calc(100% / 2 - 16px); }

    .section-project-list .outer-div .project-list .item a h3 {

      font-size: 16px; }



  .section-work-list .outer-div .work-list .item {

    width: 50%; } }

@media all and (max-width: 640px) {

  .section-div .icon-list {

    padding: 50px 0; }

    .section-div .icon-list .item .img img {

      width: 100px; }



  .section-process .outer-div .process-step-div .item .item-info p span {

    display: inline; }



  .section-project-detail .outer-div .project-detail .project-detail-list .item {

    width: calc(100% / 2 - 16px); }



  .pagination-div a {

    min-width: 24px;

    min-height: 24px;

    font-size: 13px; }



  .section-work-detail .outer-div .work-detial h2 {

    font-size: 28px; }

  .section-work-detail .outer-div .work-detial h3 {

    font-size: 24px; }

  .section-work-detail .outer-div .work-detial h4 {

    font-size: 20px; }

  .section-work-detail .outer-div .work-detial p {

    font-size: 15px; } }

.anchor-div {

  position: relative;

  height: 1px;

  overflow: hidden; }

  .anchor-div span {

    display: block;

    margin-top: -50px;

    height: 50px; }



.section-home-about-funisland {

  padding: 70px 0; }

  .section-home-about-funisland .info {

    text-align: center;

    margin: 50px 0; }

    .section-home-about-funisland .info p {

      text-align: center;

      font-size: 18px;

      color: #000; }

      .section-home-about-funisland .info p span {

        display: block; }

  .section-home-about-funisland .more {

    text-align: center; }

    .section-home-about-funisland .more a {

      display: inline-block;

      color: #fff;

      background-color: #50ceae;

      font-size: 16px;

      border-radius: 100px;

      border: none;

      padding: 5px 35px;

      transition: 0.5s ease; }

      .section-home-about-funisland .more a:hover {

        opacity: 0.5;

        -ms-transform: scale(1.1, 1.1);

        /* IE 9 */

        -webkit-transform: scale(1.1, 1.1);

        /* Safari */

        transform: scale(1.1, 1.1); }



.section-home-banner .banner-div {

  height: 500px;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  background-size: cover;

  position: relative; }

  .section-home-banner .banner-div .info {

    position: absolute;

    left: 0;

    top: 0;

    width: calc(100% - 30px);

    height: 100%;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    color: #fff;

    letter-spacing: 2px;

    padding: 0 15px;

    text-align: center; }

    .section-home-banner .banner-div .info h2 {

      color: #fff;

      font-weight: 700;

      font-size: 35px;

      font-family: 'Questrial', sans-serif; }

    .section-home-banner .banner-div .info h3 {

      color: #fff;

      font-size: 24px;

      font-weight: 400; }



.section-home-project {

  padding: 100px 0; }

  .section-home-project .project-slider-div {

    margin-top: 50px; }

    .section-home-project .project-slider-div .swiper-project-slider .swiper-slide .box {

      background-position: center;

      background-repeat: no-repeat;

      background-size: cover;

      position: relative; }

      .section-home-project .project-slider-div .swiper-project-slider .swiper-slide .box img {

        width: 100%; }

      .section-home-project .project-slider-div .swiper-project-slider .swiper-slide .box a {

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        display: flex;

        align-items: center;

        justify-content: center; }

        .section-home-project .project-slider-div .swiper-project-slider .swiper-slide .box a h3 {

          font-size: 24px;

          color: #fff;

          font-weight: 700;

          opacity: 0;

          transition: 0.5s ease; }

        .section-home-project .project-slider-div .swiper-project-slider .swiper-slide .box a:hover {

          background: rgba(5, 190, 144, 0.6);

          background: -moz-linear-gradient(top, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

          background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(5, 190, 144, 0.6)), color-stop(41%, rgba(117, 189, 209, 0.6)), color-stop(100%, rgba(0, 100, 194, 0.6)));

          background: -webkit-linear-gradient(top, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

          background: -o-linear-gradient(top, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

          background: -ms-linear-gradient(top, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

          background: linear-gradient(to bottom, rgba(5, 190, 144, 0.6) 0%, rgba(117, 189, 209, 0.6) 41%, rgba(0, 100, 194, 0.6) 100%);

          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05be90', endColorstr='#0064c2', GradientType=0 ); }

          .section-home-project .project-slider-div .swiper-project-slider .swiper-slide .box a:hover h3 {

            opacity: 1; }

    .section-home-project .project-slider-div .swiper-pagination {

      position: relative;

      margin-top: 40px; }

      .section-home-project .project-slider-div .swiper-pagination .swiper-pagination-bullet {

        background-color: #cccccc;

        width: 10px;

        height: 10px;

        margin: 0 10px; }

        .section-home-project .project-slider-div .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {

          background-color: #50ceae; }



.section-home-works {

  padding: 70px 0; }

  .section-home-works .works-slider-div {

    margin-top: 50px; }

    .section-home-works .works-slider-div .swiper-works-slider .swiper-slide .box .img {

      background-position: center;

      background-repeat: no-repeat;

      background-size: cover; }

      .section-home-works .works-slider-div .swiper-works-slider .swiper-slide .box .img img {

        width: 100%; }

    .section-home-works .works-slider-div .swiper-works-slider .swiper-slide .box .info {

      color: #323f48;

      margin-top: 25px;

      text-align: center; }

      .section-home-works .works-slider-div .swiper-works-slider .swiper-slide .box .info h3 {

        font-size: 18px;

        font-weight: 700; }

      .section-home-works .works-slider-div .swiper-works-slider .swiper-slide .box .info h4 {

        font-size: 14px; }

    .section-home-works .works-slider-div .swiper-works-slider .swiper-button-next {

      top: 42%;

      transition: 0.5s ease; }

      .section-home-works .works-slider-div .swiper-works-slider .swiper-button-next:after {

        color: #fff;

        font-size: 24px; }

      .section-home-works .works-slider-div .swiper-works-slider .swiper-button-next:hover {

        opacity: 0.3; }

        .section-home-works .works-slider-div .swiper-works-slider .swiper-button-next:hover:after {

          font-size: 30px; }

    .section-home-works .works-slider-div .swiper-works-slider .swiper-button-prev {

      top: 42%;

      transition: 0.5s ease; }

      .section-home-works .works-slider-div .swiper-works-slider .swiper-button-prev:after {

        color: #fff;

        font-size: 24px; }

      .section-home-works .works-slider-div .swiper-works-slider .swiper-button-prev:hover {

        opacity: 0.3; }

        .section-home-works .works-slider-div .swiper-works-slider .swiper-button-prev:hover:after {

          font-size: 30px; }

  .section-home-works .more {

    text-align: center;

    margin-top: 50px; }

    .section-home-works .more a {

      display: inline-block;

      color: #fff;

      background-color: #50ceae;

      font-size: 16px;

      border-radius: 100px;

      border: none;

      padding: 5px 35px;

      transition: 0.5s ease; }

      .section-home-works .more a:hover {

        opacity: 0.5;

        -ms-transform: scale(1.1, 1.1);

        /* IE 9 */

        -webkit-transform: scale(1.1, 1.1);

        /* Safari */

        transform: scale(1.1, 1.1); }



.section-home-funisland {

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  padding: 90px 0; }

  .section-home-funisland .outer-div .two-cols {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between; }

    .section-home-funisland .outer-div .two-cols .col01 {

      width: calc(100% - 720px - 50px - 5px); }

      .section-home-funisland .outer-div .two-cols .col01 h3 {

        font-size: 35px;

        color: #fff; }

    .section-home-funisland .outer-div .two-cols .col02 {

      width: 720px;

      padding: 30px 0 30px 50px;

      border-left: 5px solid #cccccc; }

      .section-home-funisland .outer-div .two-cols .col02 p {

        font-size: 16px;

        color: #fff; }



@media all and (max-width: 1240px) {

  .section-home-funisland .outer-div .two-cols .col01 {

    width: calc(100% - 60vw - 30px - 5px); }

  .section-home-funisland .outer-div .two-cols .col02 {

    width: 60vw;

    padding: 30px 0 30px 30px; } }

@media all and (max-width: 992px) {

  .section-home-banner .banner-div {

    height: 65vw; }



  .section-home-about-funisland {

    padding: 40px 0; }

    .section-home-about-funisland .info {

      margin: 30px 0; }



  .section-home-project {

    padding: 40px 0; }

    .section-home-project .project-slider-div {

      margin-top: 30px; }



  .section-home-works {

    padding: 40px 0; }

    .section-home-works .works-slider-div {

      margin-top: 30px; }

    .section-home-works .more {

      margin-top: 30px; } }

@media all and (max-width: 913px) {

  .section-home-funisland .outer-div .two-cols {

    display: block; }

    .section-home-funisland .outer-div .two-cols .col01 {

      width: 100%;

      text-align: center; }

    .section-home-funisland .outer-div .two-cols .col02 {

      margin-top: 15px;

      width: 100%;

      border-left: 0;

      padding: 0;

      text-align: center; } }

@media all and (max-width: 768px) {

  .section-home-banner .banner-div {

    height: 75vw; }

    .section-home-banner .banner-div .info h2 {

      font-size: 28px;

      line-height: 1.2; }

    .section-home-banner .banner-div .info h3 {

      font-size: 18px;

      margin-top: 15px; } }

@media all and (max-width: 640px) {

  .section-home-about-funisland .info p span {

    display: inline; } }