@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+TC:300,400,500,600,700,900&display=swap");
* {
  position: relative;
  font-family: "Noto Serif", "Noto Serif CJK TC", "Noto Serif CJK SC", "Noto Serif CJK", "Source Han Serif TC", "Source Han Serif SC", "Source Han Serif CN", "Source Han Serif", "Noto Serif TC", serif;
  font-size: 0.16rem;
  font-weight: 400;
  letter-spacing: 2.6px;
  -webkit-font-smoothing: antialiased;
  color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  *::-moz-selection {
    color: #fff;
    background: #f864b2; }
  *::selection {
    color: #fff;
    background: #f864b2; }
  *::-moz-selection {
    color: #fff;
    background: #f864b2; }

html, body {
  font-size: calc(16px * 100 / 16);
  width: 100%;
  margin: 0; }

body {
  background-color: #000; }
.dropdown-menu {
    position: absolute;
    top: 100%;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;      /* 10rem */
    padding: 8px 0;        /* .5rem 0 */
    margin: 2px 0 0;       /* .125rem 0 0 */
    font-size: 16px;       /* 1rem */
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;    /* .25rem = 4px */
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 4px 24px;      /* .25rem = 4px, 1.5rem = 24px */
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.dropdown-item.active, .dropdown-item:active{
  background-color:#f864b2;
}
@media (max-width: 575px), (max-width: 767px){
  .dropdown-menu{
        margin: auto;
        left: 0 !important;
        right: 0 !important;
        text-align: center;
        background-color: rgba(0, 0, 0, 1);
        transform: translate3d(0px, 45px, 0px) !important;
        /* position: static !important;
        transform: none !important; */
    
  }
  .dropdown-item.active, .dropdown-item:active{
    background: none;
  }
  
}
#hover-mobile {
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  overflow: auto;
  z-index: -9999; }
  #hover-mobile .hover-bg {
    display: inline-block;
    width: 100%;
    height: 100%; }

/* ----------------------------------- */
/* ------ Labels ------ */
/* ----------------------------------- */
a {
  display: inline-block;
  text-decoration: none !important;
  color: inherit; }
  a:hover {
    color: inherit; }

button:focus {
  outline: 0; }

img {
  width: 100%; }

ul {
  list-style: none;
  padding: 0;
  margin: 0; }

/* ----------------------------------- */
/* ------ Fonts ------ */
/* ----------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500; }

h1, h2, h3, h4, h5, h6, p {
  margin: 0; }

h1.slogan {
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.045; }

h2.sub-slogan {
  font-size: 0.22rem;
  font-weight: 500;
  letter-spacing: 0.024; }

h2.title {
  font-size: 0.3rem;
  font-weight: 700;
  letter-spacing: 0.032rem; }

h2.title-en {
  font-size: 0.24rem;
  font-weight: 500;
  letter-spacing: 0.026;
  color: #f864b2; }
  h2.title-en span.head {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.065rem;
    color: #f864b2; }

h3.title-small {
  font-size: 0.26rem;
  font-weight: 700;
  letter-spacing: 0.03rem; }

h3.title-small-inner {
  font-family: "Noto Sans", "Noto Sans CJK TC", "Noto Sans CJK SC", "Noto Sans CJK", "Source Han Sans TC", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", "Noto Sans TC", "微軟正黑體", sans-serif;
  font-size: 0.18rem;
  font-weight: 700;
  letter-spacing: 0.015rem;
  line-height: 1.5; }

p {
  font-family: "Noto Sans", "Noto Sans CJK TC", "Noto Sans CJK SC", "Noto Sans CJK", "Source Han Sans TC", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", "Noto Sans TC", "微軟正黑體", sans-serif;
  letter-spacing: 0.025rem;
  line-height: 1.56;
  text-align: justify; }

.p-btn {
  font-family: "Noto Sans", "Noto Sans CJK TC", "Noto Sans CJK SC", "Noto Sans CJK", "Source Han Sans TC", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", "Noto Sans TC", "微軟正黑體", sans-serif;
  font-size: 0.17rem;
  letter-spacing: 0.018rem; }

.p-footer {
  font-family: "Noto Sans", "Noto Sans CJK TC", "Noto Sans CJK SC", "Noto Sans CJK", "Source Han Sans TC", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", "Noto Sans TC", "微軟正黑體", sans-serif;
  font-size: 0.15rem;
  letter-spacing: 0.016rem; }

.btn-more {
  font-family: "Noto Sans", "Noto Sans CJK TC", "Noto Sans CJK SC", "Noto Sans CJK", "Source Han Sans TC", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", "Noto Sans TC", "微軟正黑體", sans-serif;
  font-weight: 500;
  letter-spacing: 0.016rem; }

@media (max-width: 575px), (max-width: 767px) and (orientation: landscape) {
  h1.slogan {
    font-size: 0.3rem;
    letter-spacing: 0.03; }
  h2.sub-slogan {
    font-size: 0.16rem;
    letter-spacing: 0.018; }
  h2.title {
    font-size: 0.26rem;
    font-weight: 700;
    letter-spacing: 0.032rem; }
  h2.title-en {
    font-size: 0.2rem;
    letter-spacing: 0.02;
    color: #f864b2; }
    h2.title-en span.head {
      font-size: 0.54rem;
      letter-spacing: 0.046rem;
      color: #f864b2; }
  h3.title-small {
    font-size: 0.24rem;
    letter-spacing: 0.026rem; } }

/* ----------------------------------- */
/* ------ Adjustments ------ */
/* ----------------------------------- */
/* -- title -- */
.title-area {
  display: inline-block;
  margin-bottom: 0.5rem; }
  .title-area h2.title {
    margin: 0 0 -0.35rem .8rem; }
  .title-area h2.title-en {
    display: inline-block; }
    .title-area h2.title-en:after {
      content: '';
      display: none;
      position: absolute;
      width: 2.8rem;
      height: 1px;
      right: calc(100% + 0.18rem);
      bottom: 0.12rem;
      background-color: #f864b2; }

/* -- title-small-inner -- */
h3.title-small-inner {
  margin-bottom: 0.3rem; }

/* -- btn-more -- */
.btn-more {
  padding: 0 0.4rem;
  margin-top: 0.6rem;
  border: 1px solid #fff;
  background-color: #fff;
  color: #2c2c2c;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s; }
  .btn-more:hover {
    background-color: transparent;
    color: #fff; }

@media (max-width: 575px), (max-width: 767px) and (orientation: landscape) {
  /* -- title -- */
  .title-area {
    margin-bottom: 10vw; }
    .title-area h2.title {
      margin: 0 0 -0.3rem 0.45rem; }
    .title-area h2.title-en:after {
      width: calc(75vw - 100%); }
  /* -- btn-more -- */
  .btn-more {
    margin-top: 10vw; } }

/* ----------------------------------- */
/* ------ Div ------ */
/* ----------------------------------- */
/* -- nav#navbar -- */
nav#navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  padding: 0.3rem 3.5vw;
  z-index: 999; }
  nav#navbar a.logo {
    width: 3.3rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    z-index: 10; }
  nav#navbar ul.btn-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto; }
    nav#navbar ul.btn-area li {
      margin-left: 3vw; }
    nav#navbar ul.btn-area li:first-child {
      margin-left: 0; }
    nav#navbar ul.btn-area a.p-btn {
      -webkit-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s; }
      nav#navbar ul.btn-area a.p-btn:hover, nav#navbar ul.btn-area a.p-btn.active {
        color: #f864b2; }

/* -- header#header -- */
header#header {
  background-color: #000; }
  header#header .swiper-slide {
    height: 100vh;
    background-size: cover;
    background-position: center center; }
    header#header .swiper-slide:after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-image: -webkit-gradient(linear, left top, right top, from(#000000), color-stop(35%, transparent), color-stop(57%, transparent), to(rgba(0, 0, 0, 0.7)));
      background-image: -webkit-linear-gradient(left, #000000, transparent 35%, transparent 57%, rgba(0, 0, 0, 0.7));
      background-image: -o-linear-gradient(left, #000000, transparent 35%, transparent 57%, rgba(0, 0, 0, 0.7));
      background-image: linear-gradient(to right, #000000, transparent 35%, transparent 57%, rgba(0, 0, 0, 0.7));
      z-index: -1; }
  header#header .swiper-slide.bg1 {
    background-image: url("../img/banner/banner01.jpg"); }
  header#header .swiper-slide.bg2 {
    background-image: url("../img/banner/banner02.jpg"); }
  header#header .swiper-slide.bg3 {
    background-image: url("../img/banner/banner03.jpg"); }
  header#header .swiper-slide.bg4 {
    background-image: url("../img/banner/banner04.jpg"); }
    header#header .swiper-slide.bg5 {
    background-image: url("../img/banner/banner05.jpg"); }
    header#header .swiper-slide.bg6 {
    background-image: url("../img/banner/banner06.jpg"); }
  header#header .swiper-slide.swiper-slide-active h1.slogan, header#header .swiper-slide.swiper-slide-active h2.sub-slogan,
  header#header .swiper-slide.swiper-slide-duplicate-active h1.slogan,
  header#header .swiper-slide.swiper-slide-duplicate-active h2.sub-slogan {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; }
  header#header .slogan-area {
    position: absolute;
    left: 8.5vw;
    top: 44%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
  header#header .slogan-wrapper {
    overflow: hidden; }
  header#header h1.slogan, header#header h2.sub-slogan {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
    -webkit-transition: opacity 2.5s, -webkit-transform 2.5s;
    transition: opacity 2.5s, -webkit-transform 2.5s;
    -o-transition: transform 2.5s, opacity 2.5s;
    transition: transform 2.5s, opacity 2.5s;
    transition: transform 2.5s, opacity 2.5s, -webkit-transform 2.5s; }
  header#header h2.sub-slogan {
    margin-top: 0.3rem; }

/* -- main#main -- */
main#main {
  background-color: #000; }

/* -- section.section_about -- */
section.section_about {
  padding: 1.4rem 0 12vw 1.6rem;
  background-image: url("../img/index-about.jpg");
  background-size: cover;
  background-position: center center;
  overflow: hidden; }
  section.section_about2 {
  background-image: url("../img/index-about2.jpg"); }
  section.section_about:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: -webkit-linear-gradient(359deg, transparent, #000000);
    background-image: -o-linear-gradient(359deg, transparent, #000000);
    background-image: linear-gradient(91deg, transparent, #000000); }
  section.section_about .col-md-12 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }
  section.section_about .content {
    max-width: 480px; }
    section.section_about .content * {
      text-align: right;
      opacity: 0.9; }
  section.section_about .btn-more {
    opacity: 0.9; }

/* -- section.section_link -- */
section.section_link {
  z-index: 10; }
  section.section_link .col-lg-4 {
    padding: 0; }
  section.section_link .img-mask {
    display: block;
    min-height: 370px;
    overflow: hidden; }
    section.section_link .img-mask:before {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.4);
      -webkit-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s; }
    section.section_link .img-mask:hover:before {
      background-color: rgba(0, 0, 0, 0.2); }
  section.section_link img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -o-object-fit: cover;
    object-fit: cover;
    z-index: -1; }
  section.section_link h3.title-small {
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    padding-right: 5vw;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #f864b2;
    color: #f864b2; }

/* -- footer#footer -- */
footer#footer.relative {
  position: relative; }

footer#footer {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 0.8rem 8vw;
  background-image: url("../img/footer-bg.jpg");
  background-size: cover;
  background-position: center center;
  opacity: 0;
  z-index: -99; }
  footer#footer:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.6); }
  footer#footer * {
    text-align: center; }
  footer#footer .logo-area {
    display: inline-block;
    /* height: 1.43rem; */
    margin-bottom: 0.1rem;
    cursor: pointer; }
    footer#footer .logo-area svg {
      height: 100%; }
    footer#footer .logo-area path#fill-circle {
      fill: #b9b9b9;
      -webkit-transition: fill 0.5s;
      -o-transition: fill 0.5s;
      transition: fill 0.5s; }
    footer#footer .logo-area:hover path#fill-circle {
      fill: #f864b2; }
  footer#footer ul.btn-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0.2rem 0 0.2rem; }
    footer#footer ul.btn-footer li {
      padding-right: 1vw;
      margin-right: 1vw; }
      footer#footer ul.btn-footer li:after {
        content: '/';
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
        color: #f864b2; }
    footer#footer ul.btn-footer li:last-child {
      padding-right: 0;
      margin-right: 0; }
      footer#footer ul.btn-footer li:last-child:after {
        display: none; }
    footer#footer ul.btn-footer a.p-footer {
      -webkit-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s; }
      footer#footer ul.btn-footer a.p-footer:hover {
        color: #f864b2; }
/*counter*/
.counter p span{
  background: rgba(0,0,0,.6);
  padding: 5px;
}
.counter p{
  margin: 10px 0;
  font-size: 16px;
}
/* ----------------------------------- */
/* ------ Inner ------ */
/* ----------------------------------- */
/* -- header#header_inner -- */
header#header_inner {
  padding-bottom: 0.7rem;
  background-color: #000; }
  header#header_inner .img-mask {
    height: 74vh;
    background-size: cover;
    background-position: center center; }
    header#header_inner .img-mask:after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-image: -webkit-gradient(linear, left top, right top, from(#000000), color-stop(35%, transparent), color-stop(57%, transparent), to(rgba(0, 0, 0, 0.7)));
      background-image: -webkit-linear-gradient(left, #000000, transparent 35%, transparent 57%, rgba(0, 0, 0, 0.7));
      background-image: -o-linear-gradient(left, #000000, transparent 35%, transparent 57%, rgba(0, 0, 0, 0.7));
      background-image: linear-gradient(to right, #000000, transparent 35%, transparent 57%, rgba(0, 0, 0, 0.7)); }
  header#header_inner .img-mask.about {
    background-image: url("../img/banner/banner-index01.jpg"); }
  header#header_inner .img-mask.medical {
    background-image: url("../img/banner/banner-index04.jpg"); }
  header#header_inner .img-mask.residential {
    background-image: url("../img/banner/banner04.jpg"); }
  header#header_inner .img-mask.commercial {
    background-image: url("../img/banner/banner06.jpg"); }
  header#header_inner .img-mask.projects {
    background-image: url("../img/banner/banner-index02.jpg"); }
  header#header_inner .img-mask.contact {
    background-image: url("../img/banner/banner-index03.jpg"); }
  header#header_inner .title-area {
    left: 15vw;
    margin-top: -25px; }

/* -- main#main.inner -- */
main#main.inner {
  padding: 0 calc(15vw - 15px) 1.2rem;
  overflow: hidden;
  z-index: 10; }

main#main.inner.contact {
  overflow: inherit; }

/* -- section.section_about_inner -- */
section.section_about_inner {
  padding: 0; }
  section.section_about_inner .img-mask {
    height: 100%;
    background-size: cover;
    background-position: center center;
    overflow: hidden; }
  section.section_about_inner .img-mask.about01 {
    background-image: url("../img/about/about01.jpg"); }
  section.section_about_inner .img-mask.about02 {
    background-image: url("../img/about/about02.jpg"); }
  section.section_about_inner .img-mask.about03 {
    background-image: url("../img/about/about03.jpg"); }
  section.section_about_inner .img-mask.medical01 {
    background-image: url("../img/index-about2.jpg"); }
  section.section_about_inner .img-mask.residential01 {
    background-image: url("../img/residential/residential.jpg"); }
    section.section_about_inner .img-mask.medical02 {
    background-image: url("../img/medical02.jpg"); }

section.section_about_inner.intro .col-md-6:first-child {
  padding: 0.2rem 5vw 0.75rem 15px; }

section.section_about_inner.intro .col-md-6:last-child {
  padding-left: 4vw; }

section.section_about_inner.intro .img-mask {
  margin-right: -9vw;
  border-radius: 20px 0 0 0; }

section.section_about_inner.certificate {
  padding-top: 1.2rem; }
  section.section_about_inner.certificate .col-md-6.order-md-1 {
    padding-right: 5vw; }
  section.section_about_inner.certificate .col-md-6.order-md-2 {
    padding: 0.7rem 15px 0.7rem 4vw; }
  section.section_about_inner.certificate .img-mask {
    margin-left: -15vw;
    border-radius: 0 0 20px 0; }

section.section_about_inner.experience {
  padding-top: 1.6rem;
  margin-bottom: -1.2rem; }
  section.section_about_inner.experience .row.outer {
    margin-right: -15vw; }
  section.section_about_inner.experience .col-xl-9 {
    padding-right: 6vw;
    padding-bottom: 1.2rem; }
  section.section_about_inner.experience .col-xl-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding: 0; }
  section.section_about_inner.experience .img-mask {
    width: 100%;
    height: 80%;
    border-radius: 20px 0 0 0; }
  section.section_about_inner.experience p.head {
    font-weight: 500;
    color: #f864b2; }

/* -- section.section_projects_inner -- */
section.section_projects_inner {
  margin: 0 -4vw; }
  section.section_projects_inner #projects-area {
    margin-top: -0.24rem; }
  section.section_projects_inner .row {
    margin: 0 -0.12rem; }
  section.section_projects_inner .col-xl-4 {
    padding: 0 0.12rem;
    padding-top: 0.24rem; }
  section.section_projects_inner h3.title-small, section.section_projects_inner button {
    font-family: "Noto Sans", "Noto Sans CJK TC", "Noto Sans CJK SC", "Noto Sans CJK", "Source Han Sans TC", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", "Noto Sans TC", "微軟正黑體", sans-serif; }
  section.section_projects_inner h3.title-small {
    font-size: 0.2rem; }

/* -- section.section_process_inner -- */
section.section_process_inner .col-md-12.links {
  margin-top: 0.8rem; }

section.section_process_inner ul.process-wrapper li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0.3rem; }
  section.section_process_inner ul.process-wrapper li:last-child {
    margin-bottom: 0; }

section.section_process_inner ul.links-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  section.section_process_inner ul.links-wrapper li {
    width: 33.3333%;
    padding: 0.2rem 0.3rem;
    border: 1px solid #f864b2;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
    section.section_process_inner ul.links-wrapper li:hover {
      background-color: rgba(255, 255, 255, 0.8); }
      section.section_process_inner ul.links-wrapper li:hover p.head {
        color: #000; }
  section.section_process_inner ul.links-wrapper p.head {
    margin-bottom: 0.1rem;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
  section.section_process_inner ul.links-wrapper a {
    color: #f864b2;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
    section.section_process_inner ul.links-wrapper a:hover {
      padding: 0 0.1rem;
      background-color: #f864b2;
      color: #fff; }

/* -- section.section_contact_inner -- */
section.section_contact_inner.info {
  margin-top: -1vw; }
  section.section_contact_inner.info ul.info-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    section.section_contact_inner.info ul.info-wrapper li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-right: 3vw; }
      section.section_contact_inner.info ul.info-wrapper li:last-child {
        margin-right: 0; }
    section.section_contact_inner.info ul.info-wrapper p.head {
      -ms-flex-negative: 0;
      flex-shrink: 0; }

section#section_contact_inner.form-area, section#section_contact_inner.map-area {
  padding-top: 1rem; }
  section#section_contact_inner.form-area h2.title, section#section_contact_inner.map-area h2.title {
    margin-bottom: 0.4rem; }

@media (max-width: 1200px) {
  html, body {
    font-size: calc(15px * 100 / 16); }
  /* ----------------------------------- */
  /* ------ Div ------ */
  /* ----------------------------------- */
  /* -- nav#navbar -- */
  nav#navbar a.logo {
    width: 2.2rem; }
  /* -- section.section_link -- */
  section.section_link .img-mask {
    min-height: 320px; }
  /* ----------------------------------- */
  /* ------ Inner ------ */
  /* ----------------------------------- */
  /* -- header#header_inner -- */
  header#header_inner .title-area {
    left: 10vw; }
  /* -- main#main.inner -- */
  main#main.inner {
    padding: 0 calc(10vw - 15px) 1.2rem; }
  /* -- section.section_about_inner -- */
  section.section_about_inner.intro .col-md-6:first-child {
    padding: 0.2rem 2vw 0.75rem 15px; }
  section.section_about_inner.intro .img-mask {
    margin-right: -5vw; }
  section.section_about_inner.certificate {
    padding-top: 0.8rem; }
    section.section_about_inner.certificate .col-md-6.order-md-1 {
      padding-right: 2vw; }
    section.section_about_inner.certificate .img-mask {
      margin-left: -10vw; }
  section.section_about_inner.experience {
    padding-top: 1.2rem; }
    section.section_about_inner.experience .row.outer {
      margin-right: -10vw; }
    section.section_about_inner.experience .img-mask {
      height: 70%; } }

@media (max-width: 1024px) {
  html, body {
    font-size: calc(14px * 100 / 16); } }

@media (max-width: 991px) {
  /* ----------------------------------- */
  /* ------ Div ------ */
  /* ----------------------------------- */
  /* -- nav#navbar -- */
  nav#navbar {
    padding: 0.3rem 6vw; }
  /* -- section.section_link -- */
  section.section_link .img-mask {
    min-height: 300px; }
  /* ----------------------------------- */
  /* ------ Inner ------ */
  /* ----------------------------------- */
  /* -- header#header_inner -- */
  header#header_inner .img-mask {
    height: 65vh; }
  /* -- section.section_projects_inner -- */
  section.section_projects_inner {
    margin: 0; }
  /* -- section.section_about_inner -- */
  section.section_about_inner.experience .content.first {
    margin-bottom: 0.5rem; } }

@media (max-width: 767px) {
  /* ----------------------------------- */
  /* ------ Div ------ */
  /* ----------------------------------- */
  /* -- nav#navbar -- */
  nav#navbar ul.btn-area {
    display: none; }
  /* ----------------------------------- */
  /* ------ Inner ------ */
  /* ----------------------------------- */
  /* -- header#header_inner -- */
  header#header_inner {
    padding-bottom: 0.5rem; }
    header#header_inner .title-area {
      left: 10vw; }
  /* -- main#main.inner -- */
  main#main.inner {
    padding: 0 calc(10vw - 15px) 1.2rem; }
  /* -- section.section_about_inner -- */
  section.section_about_inner .img-mask {
    height: 0;
    padding-bottom: 50%; }
  section.section_about_inner.intro .col-md-6:first-child {
    padding: 0 5vw 0.7rem; }
  section.section_about_inner.intro .col-md-6:last-child {
    padding: 0 15px; }
  section.section_about_inner.certificate {
    padding-top: 1rem; }
    section.section_about_inner.certificate .col-md-6.order-md-1 {
      padding-right: 0 15px; }
    section.section_about_inner.certificate .col-md-6.order-md-2 {
      padding: 0 5vw 0.7rem; }
  section.section_about_inner.experience {
    padding-top: 1rem; }
    section.section_about_inner.experience .row.outer {
      margin-right: -15px; }
    section.section_about_inner.experience .col-xl-9 {
      padding: 0 15px 0.7rem; }
    section.section_about_inner.experience .col-xl-3 {
      display: block;
      padding: 0 15px; }
    section.section_about_inner.experience .col-md-12, section.section_about_inner.experience .col-lg-6 {
      padding: 0 5vw; }
    section.section_about_inner.experience .img-mask {
      width: auto;
      height: 50%;
      margin-right: -10vw; }
  /* -- section.section_process_inner -- */
  section.section_process_inner ul.links-wrapper li {
    width: 50%; } }

@media (max-width: 575px) {
  /* ----------------------------------- */
  /* ------ Div ------ */
  /* ----------------------------------- */
  /* -- nav#navbar -- */
  nav#navbar a.logo {
    width: 1.9rem; }
  /* -- header#header -- */
  header#header .swiper-slide {
    height: 88vh; }
  header#header .slogan-area {
    top: 48%; }
  /* -- section.section_about -- */
  section.section_about {
    padding: 26vw 8vw 28vw; }
  /* -- section.section_link -- */
  section.section_link .img-mask {
    height: 0;
    min-height: inherit;
    padding-bottom: 65%; }
  section.section_link h3.title-small {
    padding-right: 10vw; }
  /* -- footer#footer -- */
  footer#footer {
    padding: 18vw 8vw; }
    footer#footer ul.btn-footer li {
      margin-bottom: 0.05rem; }
    footer#footer ul.btn-footer li:not(li:last-child) {
      padding-right: 2vw;
      margin-right: 2vw; }
    /* footer#footer .logo-area {
      height: 1.2rem; } */
  /* ----------------------------------- */
  /* ------ Inner ------ */
  /* ----------------------------------- */
  /* -- header#header_inner -- */
  header#header_inner {
    padding-bottom: 4vw; }
    header#header_inner .img-mask {
      height: 60vh; }
    header#header_inner .title-area {
      left: 8vw; }
  /* -- main#main.inner -- */
  main#main.inner {
    padding: 0 calc(8vw - 15px) 1.2rem; }
  /* -- section.section_about_inner -- */
  section.section_about_inner.intro .col-md-6:first-child {
    padding: 0 6vw 12vw; }
  section.section_about_inner.intro .img-mask {
    margin-right: -8vw; }
  section.section_about_inner.certificate {
    padding-top: 16vw; }
    section.section_about_inner.certificate .col-md-6.order-md-1 {
      padding-right: 0 15px; }
    section.section_about_inner.certificate .col-md-6.order-md-2 {
      padding: 0 6vw 12vw; }
    section.section_about_inner.certificate .img-mask {
      margin-left: -8vw; }
  section.section_about_inner.experience {
    padding-top: 16vw; }
    section.section_about_inner.experience .col-xl-9 {
      padding: 0 15px 12vw; }
    section.section_about_inner.experience .col-xl-3 {
      margin-right: -8vw; }
    section.section_about_inner.experience .col-md-12, section.section_about_inner.experience .col-lg-6 {
      padding: 0 6vw; }
    section.section_about_inner.experience .content.first {
      margin-bottom: 0.5rem; }
    section.section_about_inner.experience .img-mask {
      margin-right: -8vw; }
  /* -- section.section_projects_inner -- */
  section.section_projects_inner {
    margin: 0 -2vw; }
    section.section_projects_inner .row {
      margin: 0 -0.05rem; }
    section.section_projects_inner .col-xl-4 {
      padding: 0 0.05rem;
      padding-top: 0.1rem; }
    section.section_projects_inner h3.title-small {
      font-size: 0.18rem; }
  /* -- section.section_process_inner -- */
  section.section_process_inner .col-md-12.links {
    margin-top: 16vw; }
  section.section_process_inner ul.links-wrapper li {
    padding: 4vw 2vw; }
  section.section_process_inner ul.links-wrapper a:hover {
    padding: 0; }
  /* -- section.section_contact_inner -- */
  section.section_contact_inner.info {
    margin-top: 0; }
    section.section_contact_inner.info ul.info-wrapper li {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: 0;
      margin-bottom: 0.1rem; }
  section#section_contact_inner.form-area, section#section_contact_inner.map-area {
    padding-top: 16vw; }
    section#section_contact_inner.form-area h2.title, section#section_contact_inner.map-area h2.title {
      margin-bottom: 6vw; } }