@charset "UTF-8";
/* CSS Document */
body {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: 1s cubic-bezier(0.42, 0, 0.58, 1);
  transition: 1s cubic-bezier(0.42, 0, 0.58, 1);
}

body.page-fade::after {
  opacity: 1;
}

.en {
  font-family: "Kulim Park", sans-serif;
}

a {
  color: #000;
  text-decoration: none;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

a:hover {
  color: #777;
}

* {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}

img {
  image-rendering: -webkit-optimize-contrast; /* 针对WebKit引擎 */
  image-rendering: crisp-edges;
}

/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/
.blockHeight {
  padding: 4rem 0;
  z-index: 1;
  position: relative;
}
@media screen and (max-width: 640px) {
  .blockHeight {
    padding: 2rem 0;
  }
}

p, ul {
  margin-bottom: 0;
}

.mainTit {
  font-size: 4rem;
}
@media screen and (max-width: 768px) {
  .mainTit {
    font-size: 3rem;
  }
}
@media screen and (max-width: 640px) {
  .mainTit {
    font-size: 2.5rem;
  }
}

.subTit {
  font-size: 1.25rem;
  color: #27569D;
}

.bannerStyle {
  overflow: hidden;
}
.bannerStyle .slick-prev, .bannerStyle .slick-next, .bannerStyle .slick-prev:focus, .bannerStyle .slick-next:focus {
  width: 50px;
  height: 50px;
  background: var(--mainColor);
  border-radius: 100%;
  z-index: 1;
  border: 1px solid #fff;
}
.bannerStyle .slick-prev {
  left: 3%;
}
.bannerStyle .slick-prev::before {
  content: "\f284";
  font-family: bootstrap-icons !important;
}
.bannerStyle .slick-prev:hover {
  color: #272C5C;
}
.bannerStyle .slick-next {
  right: 3%;
}
.bannerStyle .slick-next::before {
  content: "\f285";
  font-family: bootstrap-icons !important;
}
.bannerStyle .slick-next:hover {
  color: #272C5C;
}

.banner__box {
  position: relative;
}
.banner__box img {
  max-height: 100svh;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100svh;
  width: 100%;
}
.banner__box img.bn-pc {
  display: block;
}
@media screen and (max-width: 768px) {
  .banner__box img.bn-pc {
    display: none;
  }
}
.banner__box img.bn-mb {
  display: none;
}
@media screen and (max-width: 768px) {
  .banner__box img.bn-mb {
    display: block;
  }
}
.banner__box .banner__text {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #FFF;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .banner__box .banner__text {
    text-align: center;
    width: 90%;
    top: 35%;
  }
}
.banner__box .en {
  font-size: 3.5rem;
  font-weight: 200;
  position: relative;
  padding-bottom: 3rem;
}
@media screen and (max-width: 1280px) {
  .banner__box .en {
    font-size: 2rem;
  }
}
.banner__box .en::before {
  content: "";
  position: absolute;
  bottom: 25px;
  left: 0;
  width: 80px;
  height: 3px;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .banner__box .en::before {
    left: 50%;
    bottom: 15%;
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 1280px) {
  .banner__box .txt {
    font-size: 1.25rem;
  }
}

.banner {
  position: relative;
}
.banner::after {
  content: "";
  height: 115px;
  display: block;
  width: 100%;
  background: url(../images/banner/underPic.png) no-repeat center;
  position: absolute;
  bottom: 0;
  left: 0;
}

.pdtBig figure {
  text-align: center;
  border: 1px solid #d9d9d9;
  padding: 20px;
  background: #eee;
}
.pdtBig figure img {
  margin: 0 auto;
}

.pdtSm figure {
  border: 1px solid #d9d9d9;
}
.pdtSm figure img {
  max-width: 80px;
  margin: 0 auto;
}

.breadCrumbs-block {
  margin: 15px 0;
}
.breadCrumbs-block .breadCrumbs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadCrumbs-block .breadCrumbs .item {
  display: inline-block;
  padding: 0 7px 0 0;
  font-size: 14px;
}
.breadCrumbs-block .breadCrumbs .item a {
  display: inline-block;
  padding: 0 7px 0 0;
  color: #999;
}
.breadCrumbs-block .breadCrumbs .item::after {
  content: "/";
  display: inline-block;
  color: #999;
}
.breadCrumbs-block .breadCrumbs .active::after {
  display: none;
}
.breadCrumbs-block .breadCrumbs .active a {
  padding-right: 0;
  color: #4a4948;
}

header.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9;
  padding: 2rem 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
header.navbar .navbar-brand {
  font-size: 2rem;
  color: #fff;
  font-weight: 600;
}
@media screen and (max-width: 640px) {
  header.navbar .navbar-brand {
    font-size: 1.25rem;
  }
}
header.navbar .nav-link {
  font-size: 1.25rem;
  color: #fff;
}
@media screen and (max-width: 991px) {
  header.navbar .nav-link {
    font-size: 1.25rem;
    color: #272C5C;
  }
}
header.navbar .nav-item {
  position: relative;
}
@media screen and (max-width: 991px) {
  header.navbar .nav-item {
    text-align: center;
  }
}
header.navbar .nav-item:last-child {
  background: rgba(39, 44, 92, 0.7);
  border: 1px solid #4abeff;
  border-radius: 30px;
  padding: 0px 10px;
}
header.navbar .nav-item + .nav-item {
  padding-left: 1.25rem;
}
@media screen and (max-width: 991px) {
  header.navbar .nav-item + .nav-item {
    padding-left: 0rem;
  }
}
header.navbar .nav-item + .nav-item:last-child {
  margin-left: 1.5rem;
}
@media screen and (max-width: 991px) {
  header.navbar .nav-item + .nav-item:last-child {
    margin-left: 0rem;
  }
}
header.navbar .nav-item + .nav-item:last-child .nav-link {
  color: #fff;
}
header.navbar .nav-item + .nav-item:last-child::before {
  display: none;
}
@media screen and (max-width: 991px) {
  header.navbar .nav-item + .nav-item:last-child {
    text-align: center;
  }
}
header.navbar .nav-item + .nav-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 14px;
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.5);
}
@media screen and (max-width: 991px) {
  header.navbar .nav-item + .nav-item::before {
    display: none;
  }
}
header.navbar.navbar--fixed, header.navbar.active {
  background: #fff;
  padding: 0.5rem 0;
  -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3);
}
header.navbar.navbar--fixed .nav-link, header.navbar.active .nav-link {
  color: #434343;
}
header.navbar.navbar--fixed .navbar-brand, header.navbar.active .navbar-brand {
  color: #272C5C;
}
header.navbar.navbar--fixed .nav-item + .nav-item::before, header.navbar.active .nav-item + .nav-item::before {
  background: #434343;
}
@media screen and (max-width: 991px) {
  header.navbar .navbar-toggler {
    background: #fff;
  }
}
@media screen and (max-width: 991px) {
  header.navbar .navbar-collapse {
    background: rgba(255, 255, 255, 0.85);
    padding: 1rem;
    border-radius: 20px;
  }
}

footer {
  background: #272C5C;
  padding: 2rem 0;
}
footer .ftTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 640px) {
  footer .ftTop {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
footer .ftTop .ftList--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
footer .ftTop .ftList--flex > li + li {
  margin-left: 15px;
  position: relative;
}
footer .ftTop .ftList--flex > li + li::before {
  content: "";
  position: absolute;
  bottom: 3px;
  left: -8px;
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, 0.9);
}
footer .ftBtm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 2rem;
}
@media screen and (max-width: 640px) {
  footer .ftBtm {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
footer .ftBtm ul li + li {
  margin-top: 0.5rem;
}
footer .ftLogo {
  color: #fff;
  letter-spacing: 6px;
}
footer .ftList {
  list-style: none;
  padding-left: 0;
}
footer .ftList a {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
}
footer .copyright {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 400;
}
@media screen and (max-width: 640px) {
  footer .copyright {
    margin-top: 1rem;
  }
}
footer .copyright a {
  color: #fff;
}

#goTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #27569d;
  border-radius: 100%;
  cursor: pointer;
  text-align: center;
  color: #fff;
}

.tableStyle {
  width: 100%;
}
.tableStyle tr td {
  padding: 8px;
  border: 1px solid #272C5C;
}
.tableStyle tr td:first-child {
  background: #272C5C;
  color: #fff;
  border: 1px solid #fff;
}

.btnStyle {
  background: #272C5C;
  color: #fff;
  border: 1px solid #272C5C;
  padding: 10px 20px;
  display: inline-block;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  border-radius: 30px;
}
.btnStyle:hover {
  background: inherit;
  color: #272C5C;
}

.page-number {
  margin-top: 3rem;
}

.pagination {
  display: block;
}
.pagination > li {
  display: inline-block;
}
.pagination > li > a {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  border-radius: 100%;
  border: 1px solid;
  width: 40px;
  height: 40px;
  display: inline-block;
  line-height: 40px;
}
.pagination > li > a:hover {
  color: #272C5C;
}
.pagination > li.on a {
  background: #272C5C;
  color: #fff;
}
.pagination > li + li {
  margin-left: 10px;
}

.tabsGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 640px) {
  .tabsGroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.tabsGroup .tabsGroup__tabs {
  list-style: none;
  padding-left: 0;
  width: 250px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 640px) {
  .tabsGroup .tabsGroup__tabs {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.tabsGroup .tabsGroup__tabs a {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 30px;
}
@media screen and (max-width: 640px) {
  .tabsGroup .tabsGroup__tabs a {
    font-size: 0.85rem;
    padding: 5px 12px;
    text-align: center;
  }
}
@media screen and (max-width: 640px) {
  .tabsGroup .tabsGroup__tabs a i {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    display: inline-block;
  }
}
.tabsGroup .tabsGroup__tabs .active a, .tabsGroup .tabsGroup__tabs li:hover a {
  background: #272C5C;
  color: #fff;
}
.tabsGroup .tabsGroup__tabs li + li {
  margin-top: 1rem;
}
@media screen and (max-width: 640px) {
  .tabsGroup .tabsGroup__tabs li + li {
    margin-top: 0;
  }
}
.tabsGroup .tabsGroup__container {
  width: calc(100% - 250px);
  margin-left: 3rem;
}
@media screen and (max-width: 640px) {
  .tabsGroup .tabsGroup__container {
    width: 100%;
    margin-left: 0;
    margin-top: 2rem;
  }
}

@-webkit-keyframes marquee {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}

@keyframes marquee {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
.pgBanner {
  padding: 10rem 15px 5rem 15px;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 640px) {
  .pgBanner {
    padding: 8rem 15px 4rem 15px;
  }
}
.pgBanner .pageBanner__txt {
  color: #fff;
}

.pageBanner__txt .bigTit {
  font-size: 2.5rem;
  letter-spacing: 6px;
}
.pageBanner__txt .bigTit .icon img {
  max-width: 50px;
  margin-top: -5px;
}
.pageBanner__txt .smTxt {
  font-size: 1.25rem;
  letter-spacing: 3px;
  line-height: 1.8;
  margin-top: 1rem;
}
@media screen and (max-width: 640px) {
  .pageBanner__txt .smTxt {
    font-size: 1rem;
  }
}

.pgContact {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: -20px;
}
.pgContact .contactLink {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  color: #fff;
  font-size: 1.25rem;
  line-height: 50px;
  text-align: center;
}
.pgContact .contactLink.phone {
  background: #272C5C;
}
.pgContact .contactLink.mail {
  background: #27569D;
}
.pgContact .contactLink + .contactLink {
  margin-left: 20px;
}

.pgBanner--about {
  padding: 15rem 15px 8rem 15px;
}
@media screen and (max-width: 640px) {
  .pgBanner--about {
    padding: 8rem 15px;
  }
}
.pgBanner--about .pageBanner__txt--about {
  max-width: 600px;
}
.pgBanner--about .slogan {
  font-size: 3rem;
  margin-bottom: 3rem;
  position: relative;
}
.pgBanner--about .slogan::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 3px;
  width: 60px;
  background: -webkit-gradient(linear, left top, right top, color-stop(14.76%, #8BB0E8), color-stop(45.08%, #27569D), color-stop(78.15%, #272C5C));
  background: linear-gradient(90deg, #8BB0E8 14.76%, #27569D 45.08%, #272C5C 78.15%);
}
@media screen and (max-width: 640px) {
  .pgBanner--about .slogan {
    font-size: 2.5rem;
  }
}
.pgBanner--about .subSlogan {
  letter-spacing: 3px;
  line-height: 1.6;
}

.ixBtm {
  color: #fff;
  width: 100%;
  position: absolute;
  bottom: 20px;
}
@media screen and (max-width: 640px) {
  .ixBtm {
    bottom: 10px;
  }
}
.ixBtm > .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 640px) {
  .ixBtm > .container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.ixBtm .ixCopyright {
  font-size: 0.9rem;
  position: relative;
}
@media screen and (max-width: 640px) {
  .ixBtm .ixCopyright {
    text-align: center;
    font-size: 0.85rem;
  }
}
.ixBtm .enterLink {
  font-size: 3rem;
  color: #fff;
  position: absolute;
  bottom: 5px;
  right: 7vw;
}
@media screen and (max-width: 1440px) {
  .ixBtm .enterLink {
    right: 6vw;
    font-size: 2.25rem;
  }
}
@media screen and (max-width: 640px) {
  .ixBtm .enterLink {
    display: none;
  }
}

.aboutOuter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.aboutOuter:before {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  width: 1px;
  height: 100%;
  background: #27569D;
  z-index: -1;
}
.aboutOuter .aboutLeft {
  width: 40%;
  padding-right: 3rem;
  background: #fff;
}
@media screen and (max-width: 640px) {
  .aboutOuter .aboutLeft {
    width: 30%;
    padding-right: 1.5rem;
  }
}
.aboutOuter .aboutRight {
  width: 60%;
}
@media screen and (max-width: 640px) {
  .aboutOuter .aboutRight {
    width: 70%;
  }
}
.aboutOuter .aboutRight .bigTit {
  color: #272C5C;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}
.aboutOuter .aboutRight .aboutBox + .aboutBox {
  margin-top: 1.5rem;
}

.txt {
  letter-spacing: 3px;
  line-height: 1.4;
}

.aboutBtm {
  overflow: hidden;
  position: relative;
}
.aboutBtm::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: url(../images/about/aboutBtm.jpg) no-repeat center #eee;
  z-index: -1;
}

.mosaic {
  padding: 6rem 0 2rem 0;
  margin-left: -100px;
}
.mosaic h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-animation: marquee 30s linear infinite;
          animation: marquee 30s linear infinite;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  position: relative;
  margin-bottom: -20px;
  margin-top: -10px;
}
.mosaic h2 span {
  display: block;
  width: 100%;
  white-space: nowrap;
  font-size: 6.4rem;
  color: #272C5C;
}
@media screen and (max-width: 640px) {
  .mosaic h2 span {
    font-size: 3.5rem;
  }
}
.mosaic h2 span + span::before {
  content: "·";
}

.contactBtn {
  background: #27569D;
  color: #fff;
  width: 150px;
  height: 150px;
  font-size: 3rem;
  border-radius: 100%;
  display: inline-block;
  border: 5px solid #fff;
  text-align: center;
  line-height: 135px;
}
@media screen and (max-width: 640px) {
  .contactBtn {
    width: 80px;
    height: 80px;
    font-size: 1.5rem;
    line-height: 65px;
  }
}

.pdtList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  margin-top: 2rem;
}
@media screen and (max-width: 768px) {
  .pdtList {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 640px) {
  .pdtList {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }
}
.pdtList .pdtBox {
  border: 1px solid #d8d8d8;
  padding: 1rem;
  display: inline-block;
  position: relative;
}
.pdtList .pdtBox figure {
  position: relative;
}
.pdtList .pdtBox figure .viewBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #272C5C;
  color: #fff;
  width: 80px;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
}
.pdtList .pdtBox:hover .viewBtn {
  opacity: 1;
}
.pdtList .pdtBox .content .txt {
  color: #A9A9A9;
}

.pdtName {
  font-size: 1.5rem;
  font-weight: 600;
}
@media screen and (max-width: 640px) {
  .pdtName {
    font-size: 1.25rem;
  }
}

.line {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.leftTop {
  position: absolute;
  left: 0;
}
.leftTop::before {
  content: "";
  width: 25px;
  height: 3px;
  position: absolute;
  left: 0;
  top: 0;
  background: #272c5c;
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
}
.leftTop:after {
  content: "";
  width: 3px;
  height: 25px;
  position: absolute;
  left: 0;
  top: 0;
  background: #272c5c;
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
}

.leftBtm {
  position: absolute;
  left: 0;
  bottom: 0;
}
.leftBtm::before {
  content: "";
  width: 25px;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #272c5c;
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
}
.leftBtm:after {
  content: "";
  width: 3px;
  height: 25px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #272c5c;
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
}

.rightTop {
  position: absolute;
  right: 0;
}
.rightTop::before {
  content: "";
  width: 25px;
  height: 3px;
  position: absolute;
  right: 0;
  top: 0;
  background: #272c5c;
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
}
.rightTop:after {
  content: "";
  width: 3px;
  height: 25px;
  position: absolute;
  right: 0;
  top: 0;
  background: #272c5c;
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
}

.rightBtm {
  position: absolute;
  right: 0;
  bottom: 0;
}
.rightBtm::before {
  content: "";
  width: 25px;
  height: 3px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #272c5c;
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
}
.rightBtm:after {
  content: "";
  width: 3px;
  height: 25px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #272c5c;
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
}

.pdtBox:hover .leftTop::before, .pdtBox:hover .leftBtm::before, .pdtBox:hover .rightBtm::before, .pdtBox:hover .rightTop::before {
  opacity: 1;
}
.pdtBox:hover .leftTop:after, .pdtBox:hover .leftBtm:after, .pdtBox:hover .rightBtm:after, .pdtBox:hover .rightTop:after {
  opacity: 1;
}

.pdtBg {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(237, 237, 237)), to(rgba(237, 237, 237, 0)));
  background: linear-gradient(to bottom, rgb(237, 237, 237) 0%, rgba(237, 237, 237, 0) 100%);
  position: relative;
  padding-top: 4rem;
}
.pdtBg::before {
  content: "";
  background: url(../images/product/pageTop.png) no-repeat top;
  position: absolute;
  width: 100%;
  height: 750px;
  top: 0;
}
.pdtBg:after {
  content: "";
  background: url(../images/product/pageBtm.png) no-repeat bottom;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1400px;
  z-index: -1;
}

.pdtTopBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 3rem;
}
@media screen and (max-width: 768px) {
  .pdtTopBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.pdtTopBox .contentLeft {
  width: 45%;
}
@media screen and (max-width: 768px) {
  .pdtTopBox .contentLeft {
    width: 100%;
  }
}
.pdtTopBox .contentLeft .pdtName {
  color: #272C5C;
}
.pdtTopBox .contentLeft .intro {
  color: #747474;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px; /* 162.5% */
  letter-spacing: 4.8px;
}
.pdtTopBox .contentLeft .subName {
  font-size: 2.5rem;
  font-weight: 400;
  color: #414141;
  position: relative;
  margin-bottom: 2rem;
}
@media screen and (max-width: 768px) {
  .pdtTopBox .contentLeft .subName {
    font-size: 2rem;
  }
}
@media screen and (max-width: 640px) {
  .pdtTopBox .contentLeft .subName {
    font-size: 1.85rem;
  }
}
.pdtTopBox .contentLeft .subName::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 3px;
  width: 60px;
  background: -webkit-gradient(linear, left top, right top, color-stop(14.76%, #8BB0E8), color-stop(45.08%, #27569D), color-stop(78.15%, #272C5C));
  background: linear-gradient(90deg, #8BB0E8 14.76%, #27569D 45.08%, #272C5C 78.15%);
}
.pdtTopBox .contentRight {
  width: 55%;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .pdtTopBox .contentRight {
    width: 100%;
  }
}
.pdtTopBox .contentLeft + .contentRight {
  padding-left: 5rem;
}
@media screen and (max-width: 768px) {
  .pdtTopBox .contentLeft + .contentRight {
    padding-left: 0rem;
    padding-bottom: 2rem;
  }
}

.pdtBtmBox {
  margin-top: 3rem;
  position: relative;
}

.decoTxt {
  position: absolute;
  z-index: -1;
  top: -30%;
  left: 0;
  font-size: 5rem;
  color: rgba(223, 223, 223, 0.45);
  font-weight: 600;
}
@media screen and (max-width: 640px) {
  .decoTxt {
    font-size: 3rem;
    top: -20%;
  }
}

.pgContact--inner {
  position: fixed;
  left: inherit;
  -webkit-transform: inherit;
          transform: inherit;
  right: 2rem;
  top: 20%;
  bottom: inherit;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99;
}
@media screen and (max-width: 640px) {
  .pgContact--inner {
    right: 1rem;
  }
}
.pgContact--inner .contactLink + .contactLink {
  margin-left: 0px;
  margin-top: 20px;
}

.lineBtn {
  background: #00c300;
  color: #fff;
  text-align: center;
  display: inline-block;
  border-radius: 8px;
  margin-top: 1rem;
}
.lineBtn figure {
  padding: 10px;
  margin: 0;
}
.lineBtn figure img {
  max-width: 100px;
}
@media screen and (max-width: 640px) {
  .lineBtn {
    display: none;
  }
}

.line--mb {
  background: #00c300;
  display: none;
}
@media screen and (max-width: 640px) {
  .line--mb {
    display: block;
  }
}

.formGroup__item input {
  border-radius: 0;
}

.formGroup__item + .formGroup__item {
  margin-top: 1rem;
}/*# sourceMappingURL=style.css.map */