@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');

h1, h2, h3, h4 {

  font-family: "Noto Serif TC", serif;

}

h1 {

  line-height: 250px;

  font-weight: 800;

  font-size: 225px;

  color: #e1948e

}

h2 {

 line-height: 95px;

  color: #000;

   font-size: 75px;

  margin: 0px;

  font-weight: 600

}

.p0 {

  padding: 0px

}

body {

  font-family: "Noto Sans TC", serif;

  line-height: 32px;

  font-size: 18px;

  font-weight: 400;

  color: #000;

  letter-spacing: 1px;

  

}

.bgcolor{background-color:  #e1958e}



.nav-pills .nav-link.active, .nav-pills .show > .nav-link {

  background-color: #604c3f

}

.nav-link {

  color: #604c3f

}

/*.carousel-control-prev-icon {

 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23A37C52' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;

}



.carousel-control-next-icon {

  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23A37C52' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;

}*/



h4 {

	 font-family: "Noto Sans TC", serif;

  line-height: 38px;

  color: #000;

  font-size: 30px;

  margin: 0px;

  font-weight: 600;

}

h3 {

  color: #000;

	font-family: "Noto Sans TC", serif;

  font-weight: 600;

  margin-top: 0px;

  font-size: 50px;

  line-height: 65px;

  margin-bottom: 0px

}







@media (max-width:1360px) {

  h3 {

    font-size: 40px;

    line-height: 50px;

  }

}

.fade-out.aos-animate {

  opacity: 0

}

hr {

  border-top: 1px solid #efefef;

}

.delay2 {

  -webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */

  animation-delay: 0.2s;

}

.delay4 {

  -webkit-animation-delay: 0.4s; /* Chrome, Safari, Opera */

  animation-delay: 0.4s;

}

.delay6 {

  -webkit-animation-delay: 0.6s; /* Chrome, Safari, Opera */

  animation-delay: 0.6s;

}

.clear {

  clear: both

}

.top30 {

  padding-top: 30px

}



.blue {

  color: #6cbbd1

}

h1 span {

  font-size: 28px;

  padding: 10px;

  border: 1px solid #0a8279;

  position: relative;

  bottom: 18px;

  background-color: #0a8279;

  color: #fff

}

.areabox {

  padding-top: 80px;

  padding-bottom: 0px

}

.foot {

  padding: 70px 0px 0px 0px

}

.topbg {

  background-image: url(../images/top.jpg);

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  height: 100vh;

}

.img60 {

  margin-top: 60px

}

.img30 {

  margin-top: 30px

}

.b2 {

  padding-top: 50px;

}

.toparea {

  height: 66px

}

.man {

  margin-bottom: -50px

}

.downc {

  padding: 5px 15px;

  background-color: #C00;

  color: #FFF;

  font-weight: bold;

  font-size: 24px

}

.b3 {

  background-color: #efefef;

  overflow: hidden;

  margin: 30px 15px;

  border: 1px #CCCCCC solid;

}

.b4 {

  border: 1px solid rgba(0, 0, 0, 0.35);

  padding: 15px;

  margin: 15px;

  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);

  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);

  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);

  background-color: rgba(0, 0, 0, 0.5);

  color: #fff

}

.sublogo {

  text-align: center

}

.sublogo img {

  max-width: 320px;

  margin: auto

}

.col-sm-13 {

  width: 20%;

  float: left

}

.img15 {

  margin-top: 15px

}

.fullbg {

  background-size: cover;

  background-position: center center

}

.imgbox {

  height: 360px

}

.p0 {

  padding: 0px

}

.r30 {

  text-align: right;

  margin-right: 30px

}

.form-control {

  -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);

  box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075)

}

.stl {

  text-align: right

}

.p15 {

  padding-left: 15px;

  padding-right: 15px

}

.wtext {

  position: absolute;

  font-size: 13px;

  right: 30px;

  bottom: 15px;

  color: #fff;

  text-shadow: black 0.1em 0.1em 0.2em;

}

.wtext1 {

  position: absolute;

  font-size: 13px;

  font-weight: bold;

  right: 30px;

  bottom: 40px;

  color: #fff;

  text-shadow: black 0.1em 0.1em 0.2em;

}

.btext {

  padding-top: 5px

}

.col-md-13 {

  width: 50%;

  float: left;

  padding: 15px;

}

.col-md-13 div {

  border: 1px solid #ccc;

  padding: 15px

}

.img90 {

  margin-top: 90px

}

.b90 {

  padding-bottom: 90px

}

.v991 {

  display: none

}

.p60 {

  padding: 60px

}

.barea {

  height: 55px

}

.sbox {

  padding: 60px 90px;

  background-color: #fff

}

.d3t {

  left: 11%;

  bottom: 13%;

  z-index: 9;

  text-shadow: 0 0 0;

  color: #333

}

.mt30 {

  margin-top: 30px;

  position: absolute

}

.pr20 {

  padding-right: 20%

}

.pl20 {

  padding-left: 20%

}

.img120 {

  margin-top: 120px

}

.cenbox {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.col-lg-13 {

  -ms-flex: 0 0 20%;

  flex: 0 0 20%;

  max-width: 20%;

}

.mainblock {

  padding: 120px 60px;

  position: relative

}

.mainblock-full {

  padding: 120px 0;

  position: relative

}

.t9 {

  width: 100%;

  max-width: 750px

}

.vcen {

  position: relative;

  top: 50%;

  transform: translateY(-50%)

}

hr {

  margin: 30px 0px

}

.bg1 {

  background-image: url("../images/img_4_1.jpg");

  background-size: cover;

  padding-bottom: 300px

}

.w-60 {

  width: 60%

}

.bg2 {

  background-image: url("../images/img_4.jpg");

  background-size: cover;

  padding: 60px 0 250px 0;

  background-position: bottom center

}

.p45 {

  padding: 45px

}

.p-top {

  padding-top: 590px;

  padding-bottom: 90px

}

.m-top {

  margin-top: -500px;

  position: relative;

  bottom: 0

}

.po_a {

  position: absolute;

  bottom: 0

}

.top60 {

  padding-top: 30px;

  position: absolute;

  left: 50%;

  transform: translateX(-50%)

}

.boom60 {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  bottom: 0px;

  width: 100%

}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {

  position: relative

}

.top {

  margin: auto;

  position: relative;

  padding-bottom: 120px

}

.logo {

  width: 60%;

  margin: auto;

  margin-top: 60px

}

.p30 {

  padding: 30px

}

.vcbox {

  background-color: #ddd;

  padding: 45px;

  height: 100%;

  position: relative

}

.vcbox h3 {

  margin-bottom: 10px

}

.bg_box {

  background-size: cover;

  background-position: right center;

  height: 100%;

  min-height: 360px

}

.blogo {

  position: absolute;

  right: 0;

  top: 0

}

.blogo img {

  width: 80px

}

.bg_box_r {

  background-size: cover;

  background-position: center center;

  height: 100%;

  min-height: 320px

}

.p120 {

  padding: 60px

}

.h100 {

  height: 100%

}

.x_bar img {

  width: 100%

}

.tbox {

  padding: 60px;

  padding-bottom: 0

}

.tbox h1 {

  text-align: center;

  margin-bottom: 30px

}

.t_box {

  display: flex;

  justify-content: center;

}

.cen_t {

  width: 14%;

  text-align: center

}

.larr {

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

  background-position: right center;

  background-size: cover;

  height: 30px;

  width: 43%

}

.rarr {

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

  background-position: left center;

  background-size: cover;

  height: 30px;

  width: 43%

}

.spe-0 {

  padding-right: 0

}

.sps-0 {

  padding-left: 0

}

.g_l1 {

  position: absolute;

  bottom: 0;

  right: 0;

  pointer-events: none;

}

.t_h {

  height: 60px

}

.i6bg {

  background-color: #f5f5f5;

}

.i6bg .row {

  padding-top: 150px

}

.ar3bg {

  background-image: url("../images/n3.png");

  background-repeat: no-repeat;

  background-position: right top 150px;

  background-size: 18%

}

.g_l2 {

  position: absolute;

  bottom: 0;

  left: 0;

  pointer-events: none;

  z-index: 1

}

.ar4bg {

  background-image: url("../images/n4.png");

  background-repeat: no-repeat;

  background-position: right 5vw top;

  background-size: 20%

}

.n4 {

  position: absolute;

  width: 30%;

  top: -35%;

  left: -5%;

  z-index: 0

}

.n5 {

  position: absolute;

  width: 25%;

  top: 20%;

  left: -5%;

  z-index: 0

}



.t1{width: 100%;margin: auto;padding: 150px 0}

.square{width: 100%;padding-bottom: 100%;background-size: cover;background-position: center center}







.t2{position: absolute;width: 45%;transform: translateX(-50%);left: 50%; padding-top: 8vw}





.line-b{background-image: url("../images/b.gif");background-position: center center; background-repeat: repeat-x}

.line-b h3{display: inline-block;background-color:#e1958e;padding: 5px 15px}

.dis_b{display: flex;    flex-direction: column;

    align-items: stretch;}





.h150{height: 150px}

@media (max-width:1500px) {
h1 {

  font-size: 140px;

  line-height: 180px;

}
}

@media (max-width:991px) {

	.h150{height: 90px}

	

	.t1{width: 80%;margin: auto;padding: 120px 0}

	

  .n5 {

    width: 30%

  }

  .i6bg .row {

    padding-top: 30px

  }

  .bgimg {

    min-height: 1px;

    height: auto

  }

  /*.bgimg{background-image: none}

.bgimg:before {

  content: ' ';

  position: fixed;

  z-index: -1;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: url("../images/bg.jpg") center 0 no-repeat;

  background-size: cover;

}

	 */

  .spe-0 {

    padding: 0

  }

  .sps-0 {

    padding: 0

  }

  .cen_t {

    width: 30%;

    text-align: center

  }

  .larr {

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

    background-position: right center;

    background-size: cover;

    height: 30px;

    width: 35%

  }

  .rarr {

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

    background-position: left center;

    background-size: cover;

    height: 30px;

    width: 35%

  }

  .x_bar {

    text-align: center;

    overflow-x: scroll

  }

  .tbox h1 {

    text-align: center;

    margin-bottom: 15px

  }

  .x_bar img {

    width: 1000px;

  }

  .h100 {

    height: auto

  }

  .vcbox {

    background-color: #ddd;

    padding: 30px;

    height: auto

  }

  .vcen {

    position: static;

    top: 0%;

    transform: translateY(0%)

  }

  .vcbox .vcen {

    margin-top: 60px;

    margin-bottom: 60px

  }

  .bg_box {

    min-height: 250px

  }

  .sp15 {

    padding: 15px

  }

  .sbar {

    overflow-x: scroll

  }

  .sbar img {

    max-width: 800px !important

  }

  .top {

    position: relative;

  }

  .logo {

    top: 30%;

    width: 50%

  }

  .p30 {

    padding: 15px

  }

  .topimg img {

    height: 45vh

  }

  .top60 {

    padding-top: 60px

  }

  h3 {

    font-size: 19px;

    line-height: 28px

  }

  h4 {

    line-height: 28px;

    font-size: 20px;

    margin: 0px;

    font-weight: 700

  }

  .po_a {

    position: relative;

    bottom: 0;

    margin-top: -180px

  }

  .p-top {

    padding: 30px

  }

  .m-top {

    margin-top: 0px;

    position: relative;

    bottom: 0

  }

  .linebox {

    border-left: 0px solid #A37C52;

    padding-top: 15px;

    border-top: 3px solid #A37C52;

    margin-top: 15px;

    padding-left: 0px

  }

  .p45 {

    padding: 60px

  }

  .w-60 {

    width: 70%

  }

  .sp0 {

    padding: 0px

  }

  .mainblock {

    padding: 45px 15px;

  }
  
  .mainblock-full {

    padding: 45px 0;

  }

  .ar3bg {

    background-size: 35%

  }

  .ar4bg {

    background-size: 35%

  }

  .col-lg-13 {

    -ms-flex: 0 0 33.33333%;

    flex: 0 0 33.33333%;

    max-width: 33.33333%;

    padding-left: 5px;

    padding-right: 5px

  }

  .tbox {

    padding: 30px;

    padding-bottom: 0

  }

  .icon5 img {

    width: 95%;

  }

  h1 span {

    font-size: 22px;

    padding: 0px 10px;

    border: 1px solid #0a8279;

    position: static;

    bottom: 0px;

    background-color: #0a8279;

    color: #fff;

    display: inline-block

  }

  .cenbox {

    position: static;

    width: 100%;

    top: 0%;

    left: 0%;

    transform: translate(0%, 0%);

  }

  .top .cenbox {

    position: absolute;

    width: 92%;

    top: 45%;

    left: 50%;

    transform: translate(-50%, -50%);

  }

  .img120 {

    margin-top: 60px

  }

  .pl20 {

    padding-left: 0

  }

  .pr20 {

    padding-right: 0

  }

  .mt30 {

    margin-top: 5px;

    position: static;

    margin-bottom: 0 !important

  }

  .s-60 {

    margin-top: -60px !important

  }

  .br {

    right: 0px;

    margin-top: 5px;

    text-align: right

  }

  .br img {

    max-width: 15vw

  }

  .sbox {

    padding: 15px;

    padding-bottom: 40px

  }

  P {

    text-align: justify;

  }

  .p60 {

    padding: 15px

  }

  .sscoll {

    overflow-x: scroll;

  }

  .sscoll img {

    width: 820px;

    max-width: none

  }

  .h991 {

    display: none

  }

  .v991 {

    display: block

  }

  .slar img {

    padding-bottom: 0px;

    margin-bottom: 0px;

    max-width: 150px;

    margin-left: auto;

    margin-right: auto

  }

  .b90 {

    padding-bottom: 30px

  }

  .img90 {

    margin-top: 30px

  }

  .s15 {

    margin-top: 15px

  }

  .slr15 {

    padding-left: 15px;

    padding-right: 15px;

  }

  .col-md-13 {

    width: 100%;

    float: none;

    padding: 15px;

    padding-bottom: 0px

  }

  .btext {

    padding-top: 5px;

    position: static;

  }

  .wtext1 {

    position: static;

    font-size: 13px;

    font-weight: bold;

    color: #fff;

    text-shadow: black 0.1em 0.1em 0.2em;

    margin-top: -35px;

    float: right;

    margin-right: 15px

  }

  .topbg {

    height: auto;

  }

  h1 {

    font-size: 24px;

    line-height: 32px

  }

  .box {

    padding: 30px 15px

  }

  .sl0 {

    padding-left: 0px

  }

  .sr0 {

    padding-right: 0px

  }

  .p15 {

    padding-left: 0px;

    padding-right: 0px

  }

  .simg15 {

    margin-top: 15px

  }

  .r30 {

    margin-right: 0px;

    text-align: center !important;

    margin-left: 0px

  }

  .p-15 {

    margin-left: -15px;

    margin-right: -15px

  }

  .col-sm-13 {

    width: 100%;

    float: none;

    padding: 15px;

    padding-bottom: 0px

  }

  .toparea {

    height: 50px

  }

  .img60 {

    margin-top: 30px

  }

  .img30 {

    margin-top: 15px

  }

  .topbg .img15 {

    margin-top: 15px

  }

  .img15 {

    margin-top: 15px

  }

  .s0 {

    padding: 0;

    margin: 0

  }

  h1 {

    font-size: 100px;

    line-height: 120px;

  }

  h2 {

    font-size: 26px;

    line-height: 34px;

  }

  body {

    font-size: 15px;

    line-height: 24px

  }

  .top30 {

    padding-top: 15px

  }

  .scenter {

    text-align: center;

    margin: auto

  }

  .scenter img {

    text-align: center;

    margin: auto

  }

  .stl {

    text-align: left

  }

  .foot {

    padding: 40px 0px 0px 0px

  }

  h4 {

    font-size: 18px

  }

  hr {

    margin-top: 15px;

    margin-bottom: 15px

  }

  .map {

    margin-top: 0px

  }

}

@media (max-width:685px) {
  h1 {
  
    font-size: 70px;
  
    line-height: 90px;
  
  }
}
@media (max-width:480px) {
  h1 {
  
    font-size: 40px;
  
    line-height: 50px;
  
  }
}

.top-style{position: relative;}
  .top-tree{ position: absolute; top: 0; right: 0; width: 45%; z-index: 1;}
    .top-tree img{ width: 100%; margin: 0;}
    @media (max-width:991px) {.top-tree{ width: 65%;}}
    @media (max-width:768px) {.top-tree{ top: 5%; width: 70%;}}
    @media (max-width:480px) {.top-tree{ top: 10%; width: 75%;}}


.footer-information{ width: 70%; margin: 0 15% 100px;}
  .footer-information p{ width: 100%; margin:30px 0; font-size: 45px; line-height: 50px; color: #333;}
  @media (max-width:991px) {
    .footer-information{ width: 80%; margin: 0 10% 90px;}
    .footer-information p{ width: 100%; margin:25px 0; font-size: 35px; line-height: 40px;}
  }
  @media (max-width:768px) {
    .footer-information{ width: 90%; margin: 0 5% 80px;}
    .footer-information p{ width: 100%; margin:20px 0; font-size: 28px; line-height: 35px;}
  }
  @media (max-width:680px) {
    .footer-information p{ width: 100%; margin:18px 0; font-size: 22px; line-height: 25px;}
  }
  @media (max-width:480px) {
    .footer-information{ width: 92%; margin: 0 4% 80px;}
    .footer-information p{ width: 100%; margin:12px 0; font-size: 16px; line-height: 20px;}
  }