@charset "UTF-8";
/***!  /templates/bevel/css/blank.css?69c930  !***/

.type-alias-custom-page {
  background: #fff;
}

.container.container--border {
  background: #fff;
  margin-top: calc(124px + 20px);
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 30px;
}
.container img {
  max-width: 100%;
  height: auto;
}
.container img.page__hero--content {
  margin: 0 auto 30px;
}

:root {
  --c-primary900: #202b41;
  --c-primary700: #004f95;
  --c-primary800: #263774;
  --c-primary500: #3082d4;
  --c-primary100: #ecf4ff;
  --c-yellow900: #f9a554;
  --c-yellow800: #ea9442;
  --c-yellow700: #ffd60d;
  --c-yellow600: #ffd200;
  --h-header-height: 58px;
  --h-header-top-height: 30px;
  --h-header-total: calc(var(--h-header-height) + var(--h-header-top-height));
  --w-search-width: 60px;
}
@media only screen and (max-width: 678px) {
  :root {
    --h-header-height: 46px;
    --h-header-top-height: 0px;
    --w-search-width: 46px;
  }
}

.page__hero {
  overflow: hidden;
  position: relative;
}
.page__hero:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2);
}
.page__hero:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 0;
  background: #000;
}
.page__hero + .container {
  padding-top: 50px;
}
.page__hero__imgwrap {
  display: block;
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media (max-width: 1279px) {
  .page__hero__imgwrap {
    width: auto;
  }
}
.page__hero__imgwrap:after {
  content: "";
  display: block;
  padding-top: 45%;
}
@media only screen and (max-width: 1024px) {
  .page__hero__imgwrap:after {
    padding-top: 60%;
  }
}
.page__hero__imgwrap .hero-mask-l,
.page__hero__imgwrap .hero-mask-r {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.page__hero__imgwrap .hero-mask-l {
  right: auto;
  width: 80%;
  background: linear-gradient(to right, black 0, rgba(0, 0, 0, 0) 100%);
}
.page__hero__imgwrap .hero-mask-r {
  left: auto;
  width: 20%;
}
.page__hero--img--big {
  position: absolute;
  top: -104px;
  left: 0;
  width: 100%;
  bottom: 0;
  background-image: url(https://www.gss.com.tw/templates/bevel/images/galaxy01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media only screen and (max-width: 834px) {
  .page__hero--img--big {
    display: none;
  }
  .page__hero--img--big.no-rwd-img {
    display: block;
  }
}
.page__hero--img--mobile {
  display: none;
  position: absolute;
  top: -104px;
  left: 0;
  width: 100%;
  bottom: 0;
  background-image: url(https://www.gss.com.tw/templates/bevel/images/galaxy01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media only screen and (max-width: 834px) {
  .page__hero--img--mobile {
    display: block;
  }
}

.heading-group {
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translate3d(0, calc(-50% + 60px), 0);
  max-width: calc(100% - 100px);
  z-index: 5;
}
@media only screen and (max-width: 1024px) {
  .heading-group {
    left: 40px;
    transform: translate3d(0, calc(-50% + 60px - 30px), 0);
  }
}
.heading-group__title {
  font-size: 100px;
  color: #fff;
  line-height: 1.4;
  font-weight: 100;
}
@media only screen and (max-width: 1024px) {
  .heading-group__title {
    font-size: 80px;
  }
}
@media only screen and (max-width: 1024px) {
  .heading-group__title {
    font-size: 30px;
  }
}
.heading-group__title--sub {
  font-size: 50px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  font-weight: 100;
  padding-left: 8px;
}
@media only screen and (max-width: 1024px) {
  .heading-group__title--sub {
    font-size: 30px;
  }
}
@media only screen and (max-width: 1024px) {
  .heading-group__title--sub {
    font-size: 20px;
  }
}
.heading-group__title--summary {
  margin-top: 16px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  font-weight: 200;
  width: 80%;
}

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