html,
body {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth
}

body {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-text-size-adjust: 100%;
  padding-top: constant(SA fe-area-inset-top);
  padding-right: constant(SA fe-area-inset-right);
  padding-bottom: constant(SA fe-area-inset-bottom);
  padding-left: constant(SA fe-area-inset-left);
  font-family: "微軟正黑體", "新細明體", Arial, SA ns-serif;
  font-size: .9955555556rem;
  line-height: 1.6924444444rem;
  margin: 0;
  padding: 0;
  color: #333;
  background: #e1fdff
}

@media only screen and (max-width: 767px) {
  body {
    font-size: .8866666667rem;
    line-height: 1.5073333333rem
  }
}

a {
  text-decoration: none;
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  transition: all .3s linear
}

a:hover {
  text-decoration: none
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

*:focus {
  outline: none
}

.container {
  width: 1500px;
  max-width: 90%;
  margin: auto;
  position: relative
}

a.tel,
a.tel:hover {
  pointer-events: none;
  text-decoration: none !important
}

@media print,
screen and (max-width: 999px) {

  a.tel,
  a.tel:hover {
    pointer-events: initial
  }
}

input,
button,
select,
textarea {
  outline: none
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  display: inline-block
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: bold
}

input,
textarea,
select,
button {
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  padding: 5px 10px;
  font-family: "微軟正黑體", "新細明體", Arial, SA ns-serif;
  font-size: 1rem;
  background-color: #fff
}

@media only screen and (max-width: 500px) {

  input,
  textarea,
  select,
  button {
    padding: 8px
  }
}

input[type=text],
input[type=password],
input[type=email],
input[type=file],
input[type=tel],
input[type=search],
input[type=date],
input[type=button],
input[type=submit],
textarea,
select {
  -webkit-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  background-color: #fff;
  border-color: #d0cece
}

textarea {
  height: 150px
}

input.w80 {
  width: 80px !important;
  flex: none
}

input[type=text],
input[type=password],
input[type=email],
input[type=file],
input[type=tel],
input[type=search],
input[type=date],
textarea,
select {
  font-size: .9333333333rem;
  line-height: 1.5866666667rem
}

@media only screen and (max-width: 767px) {

  input[type=text],
  input[type=password],
  input[type=email],
  input[type=file],
  input[type=tel],
  input[type=search],
  input[type=date],
  textarea,
  select {
    font-size: .8555555556rem;
    line-height: 1.4544444444rem
  }
}

input[type=button],
input[type=submit] {
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  transition: all .3s linear;
  font-size: .9333333333rem;
  line-height: 1.5866666667rem;
  padding: 5px 10px;
  color: #fff;
  cursor: pointer;
  min-width: 115px;
  border-width: 1px;
  border-style: solid;
  border-color: #89191d;
  background: #89191d
}

input[type=button]:hover,
input[type=submit]:hover {
  border-color: #745134;
  background: #745134
}

@media only screen and (max-width: 767px) {

  input[type=button],
  input[type=submit] {
    font-size: .8555555556rem;
    line-height: 1.4544444444rem
  }
}

input[type=button].gray,
input[type=submit].gray {
  background: #999;
  border-color: #999
}

input[type=button].gray:hover,
input[type=submit].gray:hover {
  border-color: #333;
  background: #333
}

svg {
  fill: currentColor
}

select {
  background-image: url("../img/arrow.svg");
  background-size: 12.5px;
  background-position: right 10px center;
  background-repeat: no-repeat;
  padding-right: 35px;
  width: 100%
}

@media only screen and (max-width: 767px) {
  select {
    background-size: 10px;
    padding-right: 25px
  }
}

select::-ms-expand {
  display: none
}

::-webkit-input-placeholder {
  color: #666
}

input::-moz-placeholder {
  color: #666
}

input::-moz-placeholder {
  color: #666
}

:-ms-input-placeholder {
  color: #666
}

.block01 {
  display: block !important
}

@media only screen and (max-width: 767px) {
  .block01 {
    display: none !important
  }
}

.none01 {
  display: none !important
}

@media only screen and (max-width: 767px) {
  .none01 {
    display: block !important
  }
}

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

.edit {
  line-height: 30px
}

@media only screen and (max-width: 767px) {
  .edit {
    line-height: 20px
  }
}

.edit ul,
.edit ol {
  padding: 0;
  width: calc(100% - 25px);
  margin-left: 25px
}

.edit ul li {
  padding: 5px 0;
  list-style: decimal
}

.edit ol li {
  padding: 5px 0;
  list-style: disc
}

.edit h2,
.edit h3 {
  text-align: left
}

.more {
  position: relative;
  z-index: 3;
  display: inline-block;
  color: #666;
  padding: 0 20px 10px 0
}

.more::after,
.more::before {
  content: "";
  display: block;
  clear: both;
  font-size: 0;
  position: absolute;
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  transition: all .3s linear
}

.more::after {
  width: 50px;
  bottom: 0;
  height: 2px;
  right: 2px;
  background-color: #666
}

.more::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8.7px;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #666;
  bottom: -4px;
  right: 0
}

.more:hover {
  padding: 0 0 10px 20px;
  color: #745134
}

.more:hover::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 8.7px 5px 0;
  border-color: rgba(0, 0, 0, 0) #745134 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  right: auto;
  left: 0
}

.more:hover::after {
  right: auto;
  left: 2px;
  background-color: #745134
}

.btn-up {
  width: 40px;
  height: 40px;
  position: fixed;
  z-index: 10;
  bottom: 100px;
  right: 30px;
  background: url(../img/icon_arrow.svg) top center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  transition: all .3s linear
}

.btn-up:hover {
  transform: scale(1.1)
}

@media only screen and (max-width: 767px) {
  .btn-up {
    right: 15px;
    bottom: 50px
  }
}

.btn-up.active {
  opacity: 1
}

.right-btn {
  position: fixed;
  z-index: 10;
  bottom: 140px;
  right: 20px;
  width: 40px
}

@media only screen and (max-width: 767px) {
  .right-btn {
    width: 40px;
    bottom: 80px
  }
}

.right-btn a {
  margin: 5px 0;
  display: block
}

.right-btn a:hover {
  transform: scale(1.1)
}

.phone-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  display: none;
  z-index: 999
}

@media only screen and (max-width: 767px) {
  .phone-btn {
    background: -webkit-linear-gradient(top, #976a44, #b58359);
    background: -o-linear-gradient(top, #976a44, #b58359);
    background: -moz-linear-gradient(top, #976a44, #b58359);
    background: linear-gradient(to top, #976a44, #b58359);
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
    display: flex;
    justify-content: space-B8etween;
    width: 100%
  }

  .phone-btn li {
    width: 25%;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .3)
  }

  .phone-btn li a {
    font-size: .7622222222rem;
    line-height: 1.2957777778rem;
    width: 100%;
    padding: 10px 0;
    color: #fff;
    display: block
  }

  .phone-btn li a img {
    height: 30px
  }

  .phone-btn li a p {
    display: block;
    width: 100%;
    margin: 0
  }
}

.page {
  margin: 0;
  padding: 75px 0 50px;
  width: 100%;
  font-size: .9rem;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap
}

@media only screen and (max-width: 767px) {
  .page {
    font-size: .8rem;
    padding: 25px 0
  }
}

.page .active,
.page a {
  margin: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  color: #745134;
  border-width: 1px;
  border-style: solid;
  border-color: #745134
}

.page a:hover {
  color: #fff !important;
  background-color: #745134 !important
}

.page a.triangle-l {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-right: 15px;
  display: flex
}

@media only screen and (max-width: 767px) {
  .page a.triangle-l {
    margin-right: 5px
  }
}

.page a.triangle-l:hover span {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 6.96px 4px 0;
  border-color: rgba(0, 0, 0, 0) #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.page a.triangle-l span {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 6.96px 4px 0;
  border-color: rgba(0, 0, 0, 0) #745134 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.page a.triangle-r {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 15px
}

@media only screen and (max-width: 767px) {
  .page a.triangle-r {
    margin-left: 5px
  }
}

.page a.triangle-r:hover span {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6.96px;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff
}

.page a.triangle-r span {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6.96px;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #745134
}

.page .active {
  background-color: #89191d;
  border-color: #89191d;
  color: #fff
}

.back {
  width: 100%;
  float: left;
  margin: 30px 0;
  padding: 0;
  font-size: .8866666667rem;
  line-height: 1.5073333333rem
}

@media only screen and (max-width: 767px) {
  .back {
    font-size: .7622222222rem;
    line-height: 1.2957777778rem
  }
}

@media only screen and (max-width: 350px) {
  .back {
    font-size: .7155555556rem;
    line-height: 1.2164444444rem
  }
}

.back a {
  margin: 0 -1px 0 0;
  padding: 5px 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #745134;
  color: #fff;
  display: inline-flex;
  align-items: center;
  background: #745134
}

@media only screen and (max-width: 767px) {
  .back a {
    margin-top: -1px
  }
}

.back a:hover {
  background: #262626;
  border-color: #262626
}

.back a span {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 8.7px 5px 0;
  border-color: rgba(0, 0, 0, 0) #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  display: inline-block;
  margin-right: 5px
}

.code .cerify-code-panel {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center
}

.code .cerify-code-panel *::after {
  content: none
}

.code .cerify-code-panel .verify-code {
  margin-bottom: 0
}

.code .cerify-code-panel .verify-code-area {
  flex: 1;
  padding-left: 10px
}

.code .cerify-code-panel .verify-code-area input {
  height: auto
}

.color1 {
  color: #745134
}

.color2 {
  color: #89191d
}

.color3 {
  color: #b2e2db
}

.color4 {
  color: #e77725
}

.color5 {
  color: #e3ae32
}

.color6 {
  color: #f9e0c5
}

.color7 {
  color: #e31010
}

.color8 {
  color: #b86eb7
}

.color9 {
  color: #fffcb5
}

.modal {
  padding-right: 0 !important
}

.modal-content {
  position: relative;
  display: flex;
  width: 100%;
  border-width: 0
}

.modal-content .modal-body {
  padding: 2.5rem
}

@media only screen and (max-width: 991px) {
  .modal-content .modal-body {
    padding: 1rem
  }
}

.modal-content .modal-body .text {
  width: 100%;
  display: flex;
  flex-wrap: wrap
}

.modal-content .modal-body .text h3 {
  width: 100%;
  padding-bottom: 15px;
  margin-bottom: 10px;
  text-align: center;
  border-width: 0;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #e0e0e0;
  font-size: 1.6333333333rem;
  line-height: 2.7766666667rem
}

@media only screen and (max-width: 1399px) {
  .modal-content .modal-body .text h3 {
    font-size: 1.4777777778rem;
    line-height: 2.5122222222rem
  }
}

@media only screen and (max-width: 767px) {
  .modal-content .modal-body .text h3 {
    font-size: 1.3222222222rem;
    line-height: 2.2477777778rem
  }
}

.modal-content .modal-body .text p {
  width: 100%;
  padding: 10px 10px 0
}

.modal-content .modal-body .text .img {
  width: 100%;
  display: flex;
  flex-wrap: wrap
}

.modal-content .modal-body .text .img img {
  width: 23%;
  margin: 15px 1%
}

@media only screen and (max-width: 991px) {
  .modal-content .modal-body .text .img img {
    width: 48%
  }
}

.modal-content .modal-body .text .img img.bk {
  background-color: #000;
  padding: 10px
}

.modal-content .modal-body .text .img.a img {
  width: auto;
  height: 60px
}

@media only screen and (max-width: 500px) {
  .modal-content .modal-body .text .img.a img {
    height: 50px
  }
}

.modal button {
  font-size: 30px;
  border: 0;
  background: none;
  width: auto;
  height: auto;
  position: absolute;
  top: 6px;
  right: 15px;
  cursor: pointer;
  z-index: 9999;
  padding: 0;
  margin: 0
}

header {
  width: 100%
}

header img {
  width: 100%
}

main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: -2px
}

main .box1 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: url(../img/bg01.svg) top center no-repeat;
  background-size: 100%;
  padding: 25px 10%;
}

@media only screen and (max-width: 1399px) {
  main .box1 {
    padding: 25px 6%
  }
}

main .box1 .tag {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-bottom: 2px #0480a5 solid;
  margin-bottom: 30px;
}

@media only screen and (max-width: 999px) {
  main .box1 .tag {
    justify-content: flex-start;
    padding-bottom: 15px
  }
}

main .box1 .tag a {
  background-color: #025f8a;
  font-size: 36px;
  line-height: 36px;
  /*
  margin: 10px;
  border-radius: 40px;
  */
  border-radius: 20px 20px 0 0;
  padding: 10px 30px;
  color: #FFF
}

@media only screen and (min-width: 2201px) {
  main .box1 .tag a {
    font-size: 42px;
    line-height: 42px
  }
}

@media only screen and (max-width: 1599px) {
  main .box1 .tag a {
    font-size: 30px;
    line-height: 30px
  }
}

@media only screen and (max-width: 1399px) {
  main .box1 .tag a {
    font-size: 24px;
    line-height: 24px;
    padding: 10px 20px
  }
}

@media only screen and (max-width: 999px) {
  main .box1 .tag a {
    width: 30%;
    text-align: center;
    font-size: 20px;
    line-height: 20px
  }
}

@media only screen and (max-width: 750px) {
  main .box1 .tag a {
    width: calc(50% - 20px);
    margin: 5px 10px
  }
}

@media only screen and (max-width: 370px) {
  main .box1 .tag a {
    font-size: 18px;
    line-height: 18px
  }
}

@media only screen and (max-width: 350px) {
  main .box1 .tag a {
    font-size: 16px;
    line-height: 16px
  }
}

main .box1 .tag a:hover {
  background-color: #0480a5
}
main .box1 .tag a:focus {
  background-color: #000
}

main .box1 .table {
  width: 100%;
  display: flex;
  flex-wrap: wrap
}

main .box1 .table ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap
}

main .box1 .table ul li {
  width: 30.33%;
  margin: 15px 1.5%;
  color: #fff;
  border-radius: 15px;
  padding: 10px 20px;
  font-size: 30px;
  line-height: 36px;
  background-color: #0480a5
}

@media only screen and (min-width: 2201px) {
  main .box1 .table ul li {
    font-size: 36px;
    line-height: 42px
  }
}

@media only screen and (max-width: 1599px) {
  main .box1 .table ul li {
    font-size: 24px;
    line-height: 30px
  }
}

@media only screen and (max-width: 1399px) {
  main .box1 .table ul li {
    font-size: 20px;
    line-height: 26px
  }
}

@media only screen and (max-width: 999px) {
  main .box1 .table ul li {
    font-size: 16px;
    line-height: 24px
  }
}

@media only screen and (max-width: 750px) {
  main .box1 .table ul li {
    width: 100%;
    margin: 10px 1.5%
  }
}

@media only screen and (max-width: 350px) {
  main .box1 .table ul li {
    font-size: 14px;
    line-height: 20px
  }
}

main .box1 .table ul li a {
  width: 100%;
  display: flex;
  margin: 0;
  color: #fff;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box
}

main .box1 .table ul.more-table {
  display: none
}

main .box1 .table ul.more-table.off {
  display: flex !important
}

main .box1 .table .menu {
  width: 97%;
  margin: 0 1.5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 2px solid #19a5ce;
  padding-top: 20px;
  margin-top: 40px
}

main .box1 .table .menu a {
  font-size: 26px;
  line-height: 26px;
  background-color: #19a5ce;
  margin: 10px;
  padding: 10px 30px;
  border-radius: 40px;
  color: #fff
}

@media only screen and (min-width: 2201px) {
  main .box1 .table .menu a {
    font-size: 30px;
    line-height: 30px
  }
}

@media only screen and (max-width: 1599px) {
  main .box1 .table .menu a {
    font-size: 22px;
    line-height: 22px
  }
}

@media only screen and (max-width: 1399px) {
  main .box1 .table .menu a {
    font-size: 18px;
    line-height: 18px
  }
}

@media only screen and (max-width: 999px) {
  main .box1 .table .menu a {
    font-size: 15px;
    line-height: 15px
  }
}

main .box1 .table .menu a:hover {
  background-color: #0480a5
}

main .box2 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: url(../img/img-l.svg) top 10% left 3% no-repeat, url(../img/img-r.svg) top 15% right 3% no-repeat;
  padding: 50px 6%;
  justify-content: center
}

@media only screen and (max-width: 1599px) {
  main .box2 {
    background-size: 20%
  }
}

main .box2 ul {
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
  max-width: 100%;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 30px rgba(121, 196, 201, .55);
  padding: 15px 35px
}

@media only screen and (min-width: 2201px) {
  main .box2 ul {
    width: 1300px
  }
}

@media only screen and (max-width: 1399px) {
  main .box2 ul {
    width: 100%
  }
}

@media only screen and (max-width: 500px) {
  main .box2 ul {
    border-radius: 20px;
    padding: 10px 20px
  }
}

main .box2 ul li {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 36px
}

@media only screen and (min-width: 2201px) {
  main .box2 ul li {
    font-size: 36px;
    line-height: 42px
  }
}

@media only screen and (max-width: 1599px) {
  main .box2 ul li {
    font-size: 24px;
    line-height: 30px
  }
}

@media only screen and (max-width: 1399px) {
  main .box2 ul li {
    font-size: 20px;
    line-height: 26px
  }
}

@media only screen and (max-width: 999px) {
  main .box2 ul li {
    font-size: 16px;
    line-height: 24px
  }
}

@media only screen and (max-width: 350px) {
  main .box2 ul li {
    font-size: 14px;
    line-height: 20px
  }
}

main .box2 ul li.baseline {
  align-items: baseline
}

main .box2 ul li h1 {
  font-size: 44px;
  line-height: 44px;
  color: #19a5ce;
  width: 100%;
  text-align: center;
  margin: 10px 0
}

@media only screen and (min-width: 2201px) {
  main .box2 ul li h1 {
    font-size: 50px;
    line-height: 50px
  }
}

@media only screen and (max-width: 1599px) {
  main .box2 ul li h1 {
    font-size: 36px;
    line-height: 36px
  }
}

@media only screen and (max-width: 1399px) {
  main .box2 ul li h1 {
    font-size: 32px;
    line-height: 32px
  }
}

@media only screen and (max-width: 1399px) {
  main .box2 ul li h1 {
    font-size: 28px;
    line-height: 28px
  }
}

@media only screen and (max-width: 767px) {
  main .box2 ul li h1 {
    font-size: 24px;
    line-height: 32px
  }
}

main .box2 ul li p {
  margin: 0;
  display: flex;
  align-items: center
}

@media only screen and (max-width: 500px) {
  main .box2 ul li p {
    width: 100%
  }
}

main .box2 ul li p span {
  color: #e71313;
  display: inline-flex;
  align-items: center;
  padding-top: 10px
}

main .box2 ul li textarea,
main .box2 ul li input[type=text] {
  flex: 1;
  font-size: 30px;
  line-height: 36px
}

@media only screen and (min-width: 2201px) {

  main .box2 ul li textarea,
  main .box2 ul li input[type=text] {
    font-size: 36px;
    line-height: 42px
  }
}

@media only screen and (max-width: 1599px) {

  main .box2 ul li textarea,
  main .box2 ul li input[type=text] {
    font-size: 24px;
    line-height: 30px
  }
}

@media only screen and (max-width: 1399px) {

  main .box2 ul li textarea,
  main .box2 ul li input[type=text] {
    font-size: 20px;
    line-height: 26px
  }
}

@media only screen and (max-width: 999px) {

  main .box2 ul li textarea,
  main .box2 ul li input[type=text] {
    font-size: 16px;
    line-height: 24px
  }
}

@media only screen and (max-width: 500px) {

  main .box2 ul li textarea,
  main .box2 ul li input[type=text] {
    flex: none;
    width: 100%
  }
}

@media only screen and (max-width: 350px) {

  main .box2 ul li textarea,
  main .box2 ul li input[type=text] {
    font-size: 14px;
    line-height: 20px
  }
}

main .box2 ul li div {
  flex: 1;
  display: flex;
  flex-wrap: wrap
}

@media only screen and (max-width: 500px) {
  main .box2 ul li div {
    flex: none;
    width: 100%
  }
}

main .box2 ul li div label {
  display: inline-flex;
  align-items: center;
  padding-right: 10px
}

main .box2 ul li div label input {
  margin-right: 5px;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1)
}

main .box2 ul li input[type=submit] {
  font-size: 26px;
  line-height: 26px;
  background-color: #19a5ce;
  border-width: 0;
  margin: 10px;
  padding: 10px 30px;
  border-radius: 40px;
  color: #fff
}

@media only screen and (min-width: 2201px) {
  main .box2 ul li input[type=submit] {
    font-size: 30px;
    line-height: 30px
  }
}

@media only screen and (max-width: 1599px) {
  main .box2 ul li input[type=submit] {
    font-size: 22px;
    line-height: 22px
  }
}

@media only screen and (max-width: 1399px) {
  main .box2 ul li input[type=submit] {
    font-size: 18px;
    line-height: 18px
  }
}

@media only screen and (max-width: 999px) {
  main .box2 ul li input[type=submit] {
    font-size: 15px;
    line-height: 15px
  }
}

main .box2 ul li input[type=submit]:hover {
  background-color: #0480a5
}

main .title {
  position: relative;
  width: 100%;
  text-align: center;
  margin-bottom: 65px
}

main .title h2 {
  position: absolute;
  width: 100%;
  top: 25%;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Serif TC", serif;
  font-weight: 900;
  font-style: normal;
  font-size: 62px;
  line-height: 62px;
  margin: 0;
  color: #114656
}

@media only screen and (min-width: 2201px) {
  main .title h2 {
    font-size: 68px;
    line-height: 68px
  }
}

@media only screen and (max-width: 1599px) {
  main .title h2 {
    font-size: 52px;
    line-height: 52px
  }
}

@media only screen and (max-width: 1399px) {
  main .title h2 {
    font-size: 42px;
    line-height: 42px
  }
}

@media only screen and (max-width: 999px) {
  main .title h2 {
    font-size: 32px;
    line-height: 32px
  }
}

@media only screen and (max-width: 600px) {
  main .title h2 {
    font-size: 24px;
    line-height: 32px
  }
}

@media only screen and (max-width: 370px) {
  main .title h2 {
    font-size: 22px;
    line-height: 32px
  }
}

main .title img {
  width: 850px
}

@media only screen and (min-width: 2201px) {
  main .title img {
    width: auto
  }
}

@media only screen and (max-width: 1599px) {
  main .title img {
    width: 750px
  }
}

@media only screen and (max-width: 1399px) {
  main .title img {
    width: 650px
  }
}

@media only screen and (max-width: 999px) {
  main .title img {
    width: 550px
  }
}

@media only screen and (max-width: 600px) {
  main .title img {
    width: 100%
  }
}

main .slider {
  width: 100%
}

main .slider .slick-prev1,
main .slider .slick-next1 {
  position: absolute;
  top: calc(50% - 32px);
  z-index: 9;
  background: rgba(0, 0, 0, 0);
  border-width: 0;
  display: flex;
  align-items: center;
  cursor: pointer
}

@media only screen and (max-width: 2200px) {

  main .slider .slick-prev1,
  main .slider .slick-next1 {
    width: 35px
  }
}

@media only screen and (max-width: 999px) {

  main .slider .slick-prev1,
  main .slider .slick-next1 {
    top: calc(50% - 20.5px)
  }
}

main .slider .slick-prev1 {
  left: 25px;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1)
}

main .slider .slick-next1 {
  right: 25px
}

main .box3 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 100px 0
}

@media only screen and (max-width: 600px) {
  main .box3 .title {
    width: 88%;
    margin: 0 6% 30px
  }
}

main .box3 .slider div {
  background-color: #000
}

main .box3 .slider div a {
  width: 100%;
  display: flex
}

main .box3 .slider div img {
  opacity: .3;
  background-size: cover
}

@media only screen and (max-width: 600px) {
  main .box3 .slider div img {
    opacity: 1
  }
}

main .box3 .slider div.slick-center img {
  opacity: 1
}

main .box4 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 25px 10% 125px;
  background: url(../img/img.svg) bottom right 3% no-repeat
}

@media only screen and (max-width: 2200px) {
  main .box4 {
    background-size: 260px;
    padding-bottom: 85px
  }
}

@media only screen and (max-width: 1699px) {
  main .box4 {
    background-size: 200px
  }
}

@media only screen and (max-width: 1399px) {
  main .box4 {
    padding: 25px 6% 50px;
    background-size: 150px
  }
}

@media only screen and (max-width: 1299px) {
  main .box4 {
    background: none
  }
}

main .box4 .slider .slick-prev1,
main .box4 .slider .slick-next1 {
  position: absolute;
  top: calc(50% - 33.5px);
  margin: 0;
  padding: 0
}

@media only screen and (max-width: 2200px) {

  main .box4 .slider .slick-prev1,
  main .box4 .slider .slick-next1 {
    width: 35px
  }
}

main .box4 .slider .slick-prev1 {
  left: -85px
}

@media only screen and (max-width: 2200px) {
  main .box4 .slider .slick-prev1 {
    left: -45px
  }
}

@media only screen and (max-width: 999px) {
  main .box4 .slider .slick-prev1 {
    left: 5px
  }
}

main .box4 .slider .slick-next1 {
  right: -85px
}

@media only screen and (max-width: 2200px) {
  main .box4 .slider .slick-next1 {
    right: -45px
  }
}

@media only screen and (max-width: 999px) {
  main .box4 .slider .slick-next1 {
    right: 5px
  }
}

main .box4 .slider .slick-slide {
  padding: 0 30px 50px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start
}

@media only screen and (max-width: 767px) {
  main .box4 .slider .slick-slide {
    padding: 0 60px 50px
  }
}

main .box4 .slider .slick-slide .img {
  width: 100%
}

main .box4 .slider .slick-slide .img img {
  width: 100%;
  background-size: cover;
  border-radius: 0 50px 0 0
}

main .box4 .slider .slick-slide .head {
  width: calc(100% + 30px);
  margin: 0 -15px;
  background-color: #1693b8;
  padding: 5px 30px;
  border-radius: 15px;
  min-height: 84px
}

@media only screen and (min-width: 2201px) {
  main .box4 .slider .slick-slide .head {
    width: calc(100% + 40px);
    margin: 0 -20px;
    min-height: 90px;
    padding: 10px 30px
  }
}

@media only screen and (max-width: 1399px) {
  main .box4 .slider .slick-slide .head {
    padding: 5px 15px;
    min-height: 74px
  }
}

@media only screen and (max-width: 999px) {
  main .box4 .slider .slick-slide .head {
    min-height: 70px;
    border-radius: 10px
  }
}

@media only screen and (max-width: 767px) {
  main .box4 .slider .slick-slide .head {
    min-height: 62px
  }
}

main .box4 .slider .slick-slide h3 {
  width: 100%;
  color: #fff;
  font-size: 26px;
  line-height: 32px;
  margin: 0;
  font-weight: bold;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box
}

@media only screen and (min-width: 2201px) {
  main .box4 .slider .slick-slide h3 {
    font-size: 30px;
    line-height: 36px
  }
}

@media only screen and (max-width: 1399px) {
  main .box4 .slider .slick-slide h3 {
    font-size: 24px;
    line-height: 30px
  }
}

@media only screen and (max-width: 999px) {
  main .box4 .slider .slick-slide h3 {
    font-size: 20px;
    line-height: 28px
  }
}

@media only screen and (max-width: 999px) {
  main .box4 .slider .slick-slide h3 {
    font-size: 20px;
    line-height: 28px
  }
}

@media only screen and (max-width: 767px) {
  main .box4 .slider .slick-slide h3 {
    font-size: 18px;
    line-height: 24px
  }
}

main .box4 .slider .slick-slide .text {
  width: 100%;
  display: flex;
  position: relative;
  background-color: #fff;
  border-radius: 0 0 0 50px;
  padding: 5px 15px 50px
}

@media only screen and (max-width: 999px) {
  main .box4 .slider .slick-slide .text {
    padding: 5px 15px 40px
  }
}

@media only screen and (max-width: 767px) {
  main .box4 .slider .slick-slide .text {
    padding: 5px 15px 35px
  }
}

main .box4 .slider .slick-slide .text p {
  margin: 0;
  width: 100%;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  font-size: 20px;
  line-height: 26px
}

@media only screen and (min-width: 2201px) {
  main .box4 .slider .slick-slide .text p {
    font-size: 24px;
    line-height: 30px
  }
}

@media only screen and (max-width: 1399px) {
  main .box4 .slider .slick-slide .text p {
    font-size: 18px;
    line-height: 26px
  }
}

@media only screen and (max-width: 999px) {
  main .box4 .slider .slick-slide .text p {
    font-size: 16px;
    line-height: 24px
  }
}

@media only screen and (max-width: 767px) {
  main .box4 .slider .slick-slide .text p {
    font-size: 14px;
    line-height: 20px
  }
}

main .box4 .slider .slick-slide .text a {
  position: absolute;
  bottom: -40px;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background-color: #6cbdd5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 20px
}

@media only screen and (min-width: 2201px) {
  main .box4 .slider .slick-slide .text a {
    font-size: 23px;
    line-height: 23px;
    bottom: -50px;
    width: 100px;
    height: 100px
  }
}

@media only screen and (max-width: 1399px) {
  main .box4 .slider .slick-slide .text a {
    font-size: 18px;
    line-height: 18px;
    width: 70px;
    height: 70px;
    bottom: -35px;
    left: calc(50% - 35px)
  }
}

@media only screen and (max-width: 999px) {
  main .box4 .slider .slick-slide .text a {
    font-size: 16px;
    line-height: 16px;
    width: 60px;
    height: 60px;
    bottom: -30px;
    left: calc(50% - 30px)
  }
}

@media only screen and (max-width: 767px) {
  main .box4 .slider .slick-slide .text a {
    font-size: 14px;
    line-height: 14px;
    width: 50px;
    height: 50px;
    bottom: -25px;
    left: calc(50% - 25px)
  }
}

main .box4 .slider .slick-slide .text a:hover {
  background-color: #1693b8
}

main .box5 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 20% 325px;
  background: url(../img/bg02.svg) bottom center no-repeat;
  background-size: 100%;
  position: relative
}

@media only screen and (max-width: 2200px) {
  main .box5 {
    padding: 50px 20% 20%
  }
}

@media only screen and (max-width: 767px) {
  main .box5 {
    padding: 0 6% 125px
  }
}

main .box5 .video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%
}

main .box5 .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

main .box5>img {
  position: absolute;
  left: 5%;
  top: -50px
}

@media only screen and (max-width: 1599px) {
  main .box5>img {
    width: 20%
  }
}

@media only screen and (max-width: 767px) {
  main .box5>img {
    display: none
  }
}

footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: #a7dcec;
  padding: 30px 6%;
  text-align: center
}

footer p {
  margin: 5px 0;
  width: 100%;
  font-size: 20px;
  line-height: 20px
}

@media only screen and (min-width: 2201px) {
  footer p {
    font-size: 24px;
    line-height: 24px
  }
}

@media only screen and (max-width: 999px) {
  footer p {
    font-size: 18px;
    line-height: 24px
  }
}

@media only screen and (max-width: 600px) {
  footer p {
    font-size: 16px;
    line-height: 24px
  }
}

footer div {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px
}

footer div img {
  height: 45px;
  margin: 0 10px
}

@media only screen and (max-width: 767px) {
  footer div img {
    height: 30px
  }
}

@media only screen and (max-width: 500px) {
  footer div img {
    height: 20px
  }
}

@media only screen and (max-width: 350px) {
  footer div img {
    height: 17px
  }
}

.iziModal {
  top: 5%;
  bottom: 5%;
  height: auto !important
}

@media only screen and (max-width: 899px) {
  .iziModal {
    max-width: 88% !important
  }
}

.iziModal .iziModal-content {
  border-radius: 0;
  background: url(../img/img01.jpg) top center no-repeat, url(../img/img03.png) bottom center no-repeat;
  padding: 30px 50px 0 !important;
  background-size: 100%
}

@media only screen and (max-width: 899px) {
  .iziModal .iziModal-content {
    padding: 30px 30px 0 !important
  }
}

@media only screen and (max-width: 500px) {
  .iziModal .iziModal-content {
    padding: 15px 15px 0 !important
  }
}

.iziModal .iziModal-content .text {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.iziModal .iziModal-content .text h2 {
  background-color: #025f8a;
  font-size: 36px;
  line-height: 36px;
  margin: 10px 10px 30px;
  padding: 10px 30px;
  border-radius: 40px;
  color: #fff
}

@media only screen and (min-width: 2201px) {
  .iziModal .iziModal-content .text h2 {
    font-size: 42px;
    line-height: 42px
  }
}

@media only screen and (max-width: 1599px) {
  .iziModal .iziModal-content .text h2 {
    font-size: 30px;
    line-height: 30px
  }
}

@media only screen and (max-width: 1399px) {
  .iziModal .iziModal-content .text h2 {
    font-size: 24px;
    line-height: 24px
  }
}

@media only screen and (max-width: 999px) {
  .iziModal .iziModal-content .text h2 {
    font-size: 20px;
    line-height: 20px;
    margin: 10px
  }
}

@media only screen and (max-width: 370px) {
  .iziModal .iziModal-content .text h2 {
    font-size: 18px;
    line-height: 18px
  }
}

@media only screen and (max-width: 350px) {
  .iziModal .iziModal-content .text h2 {
    font-size: 16px;
    line-height: 16px
  }
}

.iziModal .iziModal-content .text div {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: #f6ffed;
  border-radius: 15px;
  padding: 20px;
  margin: 15px 0
}

.iziModal .iziModal-content .text div h3 {
  font-size: 30px;
  line-height: 36px;
  color: #000;
  border-bottom: 1px solid #000;
  width: 100%;
  padding-bottom: 10px;
  margin: 0 0 15px
}

@media only screen and (min-width: 2201px) {
  .iziModal .iziModal-content .text div h3 {
    font-size: 36px;
    line-height: 42px
  }
}

@media only screen and (max-width: 1599px) {
  .iziModal .iziModal-content .text div h3 {
    font-size: 24px;
    line-height: 30px
  }
}

@media only screen and (max-width: 1399px) {
  .iziModal .iziModal-content .text div h3 {
    font-size: 20px;
    line-height: 26px
  }
}

@media only screen and (max-width: 999px) {
  .iziModal .iziModal-content .text div h3 {
    font-size: 16px;
    line-height: 24px
  }
}

@media only screen and (max-width: 750px) {
  .iziModal .iziModal-content .text div h3 {
    width: 100%;
    margin: 10px 1.5%
  }
}

@media only screen and (max-width: 350px) {
  .iziModal .iziModal-content .text div h3 {
    font-size: 14px;
    line-height: 20px
  }
}

.iziModal .iziModal-content .text div h4 {
  color: #000;
  width: 100%;
  margin: 0;
  font-size: 36px;
  line-height: 42px
}

@media only screen and (min-width: 2201px) {
  .iziModal .iziModal-content .text div h4 {
    font-size: 42px;
    line-height: 48px
  }
}

@media only screen and (max-width: 1599px) {
  .iziModal .iziModal-content .text div h4 {
    font-size: 30px;
    line-height: 36px
  }
}

@media only screen and (max-width: 1399px) {
  .iziModal .iziModal-content .text div h4 {
    font-size: 24px;
    line-height: 30px
  }
}

@media only screen and (max-width: 999px) {
  .iziModal .iziModal-content .text div h4 {
    font-size: 20px;
    line-height: 26px
  }
}

@media only screen and (max-width: 370px) {
  .iziModal .iziModal-content .text div h4 {
    font-size: 18px;
    line-height: 24px
  }
}

@media only screen and (max-width: 350px) {
  .iziModal .iziModal-content .text div h4 {
    font-size: 16px;
    line-height: 22px
  }
}

.iziModal .iziModal-content .text div p {
  width: 100%;
  margin: 10px 0;
  font-size: 20px;
  line-height: 30px
}

@media only screen and (min-width: 2201px) {
  .iziModal .iziModal-content .text div p {
    font-size: 24px;
    line-height: 36px
  }
}

@media only screen and (max-width: 999px) {
  .iziModal .iziModal-content .text div p {
    font-size: 18px;
    line-height: 24px
  }
}

@media only screen and (max-width: 600px) {
  .iziModal .iziModal-content .text div p {
    font-size: 16px;
    line-height: 24px
  }
}

.iziModal .iziModal-content .text div.a {
  background-color: rgba(225, 248, 255, .6);
  padding-bottom: 60px
}

@media only screen and (max-width: 1399px) {
  .iziModal .iziModal-content .text div.a {
    padding-bottom: 40px
  }
}

@media only screen and (max-width: 500px) {
  .iziModal .iziModal-content .text div.a {
    padding-bottom: 20px
  }
}

.iziModal .iziModal-content .button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: -70px
}

@media only screen and (max-width: 1399px) {
  .iziModal .iziModal-content .button {
    margin-top: -50px
  }
}

@media only screen and (max-width: 500px) {
  .iziModal .iziModal-content .button {
    margin-top: -40px
  }
}

.iziModal .iziModal-content .button img {
  width: 15%
}

@media only screen and (max-width: 500px) {
  .iziModal .iziModal-content .button img {
    width: 25%
  }
}

.iziModal .iziModal-content .button button {
  font-size: 26px;
  line-height: 26px;
  background-color: #19a5ce;
  border-width: 0;
  margin: 7% 0 0;
  padding: 10px 30px;
  border-radius: 40px;
  color: #fff
}

@media only screen and (min-width: 2201px) {
  .iziModal .iziModal-content .button button {
    font-size: 30px;
    line-height: 30px
  }
}

@media only screen and (max-width: 1599px) {
  .iziModal .iziModal-content .button button {
    font-size: 22px;
    line-height: 22px
  }
}

@media only screen and (max-width: 1399px) {
  .iziModal .iziModal-content .button button {
    font-size: 18px;
    line-height: 18px
  }
}

@media only screen and (max-width: 999px) {
  .iziModal .iziModal-content .button button {
    font-size: 15px;
    line-height: 15px
  }
}

@media only screen and (max-width: 500px) {
  .iziModal .iziModal-content .button button {
    margin: 12% 0 0
  }
}

.iziModal .iziModal-content .button button:hover {
  background-color: #0480a5
}

.iziModal-overlay {
  background-color: rgba(0, 0, 0, .75) !important
}
main .box-new { width: 100%; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; padding: 100px 0; }

main .listbox .list { width: 100%; max-width: 680px; display: block; }

@media only screen and (max-width: 767px) { main .listbox .list { padding: 0 6%; } }

main .listbox .list dl { display: -ms-flexbox; display: flex; width: 100%; margin: auto; margin-bottom: 30px; }

@media only screen and (max-width: 767px) { main .listbox .list dl { display: block; } }

main .listbox .list dl dt { font-size: 28px; color: #1693b8; line-height: 1.3; -ms-flex: 0 0 120px; flex: 0 0 120px; font-family: "Noto Serif TC", serif; font-weight: 900; letter-spacing: 1px; }

@media only screen and (max-width: 999px) { main .listbox .list dl dt { font-size: 22px; -ms-flex: 0 0 100px; flex: 0 0 100px; } }

@media only screen and (max-width: 767px) { main .listbox .list dl dt { font-size: 19px; text-align: center; margin-bottom: 10px; } }

@media only screen and (max-width: 767px) { main .listbox .list dl dt br { display: none; } }

main .listbox .list dl dd { font-size: 18px; line-height: 1.5; color: #333333; margin-left: 20px; }

@media only screen and (max-width: 767px) { main .listbox .list dl dd { margin-left: 0; font-size: 16px; } }

main .listbox .list dl dd li { position: relative; padding-left: 24px; margin-bottom: 6px; }

@media only screen and (max-width: 767px) { main .listbox .list dl dd li { padding-left: 20px; } }

main .listbox .list dl dd li::before, main .listbox .list dl dd li::after { content: ""; width: 8px; height: 8px; background-color: #025f8a; position: absolute; left: 0; top: 11px; border-radius: 10px; }

@media only screen and (max-width: 767px) { main .listbox .list dl dd li::before, main .listbox .list dl dd li::after { top: 9px; } }

main .listbox .list dl dd li::after { background-color: #6cbdd5; left: 5px; }

main .see-more { font-size: 22px; color: #1693b8; line-height: 1.3; font-family: "Noto Serif TC", serif; letter-spacing: 1px; }

@media only screen and (max-width: 999px) { main .see-more { font-size: 22px; -ms-flex: 0 0 100px; flex: 0 0 100px; } }

@media only screen and (max-width: 767px) { main .see-more { font-size: 19px; text-align: center; margin-bottom: 10px; } }