@charset "UTF-8";
@font-face {
    font-family: "Noto Sans TC script=all rev=1";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(https://fonts.gstatic.com/s/notosanstc/v11/-nF7OG829Oofr2wohFbTp9iFOisNA_cTyNromxqQuEMQ2wHYwbnmy1R1jDujLebozBXCo2qYhRo.0.woff2) format("woff2")
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10px);
    }
}

@keyframes mover {
    0% {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10px);
    }
}

.header {
    height: 120px;
    border-bottom: 1px solid #efefef;
    background: #fff;
}

@media (max-width: 767px) {
    .header {
        height:60px;
    }
}

.header .logo {
    padding-top: 0;
}

.header .logo img {
    height: 124px;
}

@media (max-width: 767px) {
    .header .logo img {
        height:62px;
    }
}

.footer {
    padding: 50px 65px;
    background-color: #efefef;
}

@media (max-width: 767px) {
    .footer {
        padding:25px 32.5px;
    }
}

.footer .company-name {
    font-size: 23.5px;
    color: #333;
    font-weight: 700
}

@media (max-width: 767px) {
    .footer .company-name {
        font-size:20px;
    }
}

.footer .company-info {
    font-size: 18px;
    margin-bottom: 46px;
}

@media (max-width: 767px) {
    .footer .company-info {
        font-size:14px;
        margin-bottom: 23px;
    }
}

.footer .company-info span {
    margin-right: 15px;
}

.footer .phone-num {
    font-size: 46px;
    color: #b30002;
    margin: 20px 0;
    line-height: 1;
    font-weight: 700;
}

@media (max-width: 767px) {
    .footer .phone-num {
        font-size:32px;
        margin: 10px 0;
    }
}

.footer .footer-content {
    font-size: 22px;
    text-align: justify;
}

@media (max-width: 767px) {
    .footer .footer-content {
        font-size:15px;
    }
}

[v-cloak] {
    display: none;
}

.black {
    font-weight: 900;
}

.bold {
    font-weight: 700;
}

.medium {
    font-weight: 500;
}

.light {
    font-weight: 300;
}

.italic {
    font-style: italic;
}

.font60 {
    font-size: 60px;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .font60 {
        font-size:30px;
    }
}
.font50 {
    font-size: 50px;
}

@media (max-width: 767px) {
    .font50 {
        font-size:25px;
    }
}
.font40 {
    font-size: 40px;
}

@media (max-width: 767px) {
    .font40 {
        font-size:20px;
    }
}

.font32 {
    font-size: 32px;
}

@media (max-width: 767px) {
    .font32 {
        font-size:16px;
    }
}

.font20 {
    font-size: 20px;
}

@media (max-width: 767px) {
    .font20 {
        font-size:12px;
    }
}

.font15 {
    font-size: 15px;
}

@media (max-width: 767px) {
    .font15 {
        font-size:12px;
    }
}

.ani-mover {
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

.bg-red {
    background-color: #b30002;
}

.bg-green {
    background-color: #1d5929;
}

.bg-grayb8b {
    background-color: #b8b8b8;
}

.red {
    color: #b30002;
}

.gray333 {
    color: #333;
}

.gray707 {
    color: #707070;
}
.gray2a2 {
    color: #2a2a2a;
}
.color-white {
    color: #fff;
}
.color-black {
    color: #000;
}
.px-60 {
    padding-left: 60px;
    padding-right: 60px;
}

@media (max-width: 767px) {
    .px-60 {
        padding-left:30px;
        padding-right: 30px;
    }
}

.px-30 {
    padding-left: 30px;
    padding-right: 30px;
}

@media (max-width: 767px) {
    .px-30 {
        padding-left:15px;
        padding-right: 15px;
    }
}

@media (max-width: 767px) {
    .pl-5,.px-5 {
        padding-left:2.25rem!important;
    }

    .pr-5,.px-5 {
        padding-right: 2.25rem!important;
    }

    .pb-4,.py-4 {
        padding-bottom: .75rem!important;
    }

    .pt-4,.py-4 {
        padding-top: .75rem!important;
    }

    .pt-5,.py-5 {
        padding-top: 1.5rem!important;
    }

    .pb-5,.py-5 {
        padding-bottom: 1.5rem!important;
    }

    .mt-4,.my-4 {
        margin-top: .75rem!important;
    }

    .mb-4,.my-4 {
        margin-bottom: .75rem!important;
    }

    .mt-5,.my-5 {
        margin-top: 1.5rem!important;
    }

    .mb-5,.my-5 {
        margin-bottom: 1.5rem!important;
    }
}

body {
    font-family: Noto Sans TC,Helvetica,Arial,微軟正黑體,Microsoft Jhenghei,sans-serif;
    line-height: 1.7;
    color: #333;
    background-color: #f7f7f7;
}

#app,body {
    position: relative;
}

#app {
    max-width: 750px;
    width: 100%;
    background-color: #fff;
}

#app,img {
    margin: 0 auto;
}

img {
    max-width: 100%;
}

.modal-backdrop {
    z-index: 2999;
    background-color: #b30002;
}

.modal-backdrop.show {
    opacity: .75;
}

.modal {
    z-index: 3000;
}

@media (max-width: 767px) {
    .modal .modal-dialog {
        margin:1rem;
    }
}

.modal .modal-content {
    border-radius: 15px;
}

.modal .title {
    font-size: 26px;
    margin-top: 10px;
}

@media (max-width: 767px) {
    .modal .title {
        font-size:16px;
    }
}

.modal .btn {
    padding: 12px 0;
    border-radius: 40px;
    font-size: 24px;
    width: 100%;
}

@media (max-width: 767px) {
    .modal .btn {
        padding:7.5px 0;
        border-radius: 20px;
        font-size: 16px;
    }
}

.modal .close {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #b30002;
    opacity: 1;
    padding: 5px 9px 7px 10px;
    text-shadow: none;
    color: #fff;
    border-radius: 5px;
    z-index: 3001;
}

.modal .close:hover {
    opacity: 1!important
}

.thx .form-row .btn {
    padding: 12px 0;
    border-radius: 40px;
    font-size: 24px;
    width: 100%;
}

@media (max-width: 767px) {
    .thx .form-row .btn {
        padding:7.5px 0;
        border-radius: 20px;
        font-size: 16px;
    }
}
.index .kv{
    font-size: 40px;
}
.index .kv .kv-title {
    font-size: 78px;
    line-height: 1.2;
    margin-bottom: 30px;
}
.index .kv .kv-subtitle{
    font-size: 50px;
    line-height: 1.3;
    display: block;
    text-align: justify;
    text-align-last: justify;
}
.index .kv .kv-subtitle:not(.red){
    text-align-last: left;
}
.index .kv .kv-subtitle.red:first-line{
    /*text-align-last: justify;*/
}
@media (max-width: 767px) {
    .index .kv{
        font-size: 20px;
    }
    .index .kv .kv-title {
        font-size:37px;
        margin-bottom: 15px;
    }
    .index .kv .kv-subtitle{
      font-size: 30px;
    }
}

.index .kv .kv-content {
    padding: 0 60px 60px;
}

@media (max-width: 767px) {
    .index .kv .kv-content {
        padding:0 30px 50px;
    }
}

.index .kv .kv-content .kv-subtitle {
    margin-bottom: 50px;
}

@media (max-width: 767px) {
    .index .kv .kv-content .kv-subtitle {
        margin-bottom:25px;
    }
}

.index .kv .num {
    line-height: 1;
}

.index .section1 .section1-content {
    padding: 110px 60px;
    background: url(../img/section-tiiteBG@2x.png) no-repeat;
    background-size: 100% 100%;
}

@media (max-width: 767px) {
    .index .section1 .section1-content {
        padding:55px 30px;
    }
}

/* .index .section1 .line {
    background: url(../img/line@2x.png) no-repeat;
    background-size: contain;
    background-position: 0 15px;
    padding-top: 30px;
    padding-bottom: 60px;
}

@media (max-width: 767px) {
    .index .section1 .line {
        padding-top:15px;
        padding-bottom: 30px;
        background-position: 0 0;
    }
} */

.index .btn.gtm-ask {
    padding: 15px 135px;
    border-radius: 40px;
}

@media (max-width: 767px) {
    .index .btn.gtm-ask {
        padding:7.5px 67.5px;
        border-radius: 20px;
    }
}

.mainbody .collapse-body{
  padding-top: 3rem!important;
}

.index .block-contactUS .content {
    margin-left: 54px;
    margin-right: 54px;
}

@media (max-width: 767px) {
    .index .block-contactUS .content {
        margin-left:20px;
        margin-right: 20px;
    }
}

.index .block-contactUS .chart {
    margin: 0 35px;
    border-bottom: 2px solid #b30002
}

@media (max-width: 767px) {
    .index .block-contactUS .chart {
        margin:0 17.5px
    }
}

.index .block-contactUS .btn-open {
    font-size: 28px;
    border-bottom: 1px solid #b30002;
}

@media (max-width: 767px) {
    .index .block-contactUS .btn-open {
        font-size:14px;
    }
}

.index .block-contactUS .btn-open:hover {
    text-decoration: none;
    border-color: transparent;
    color: #b30002;
}
.blcok-AQ{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,d7d7d7+97 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(215,215,215,1) 97%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(215,215,215,1) 97%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(215,215,215,1) 97%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d7d7d7',GradientType=1 ); /* IE6-9 */

}
.qa-item{
    background: url(../img/listPoint-bg.png) left bottom repeat-x;
}
.qa-item:last-child{
    background: none;
}
.qa-item>div {
    padding-left: 70px;
    position: relative;
}
.qa-item .answer p{margin-top: 1rem!important;}
.qa-item .answer p:first-child{margin-top: 0!important;}
@media (max-width: 767px) {
    .qa-item>div {
        padding-left:35px;
    }
}

.qa-item>div:before {
    content: " ";
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
}

@media (max-width: 767px) {
    .qa-item>div:before {
        width:25px;
        height: 25px;
    }
  }

.qa-item .question:before {
    background: url(../img/QA-iconQ@2x.png) no-repeat;
    background-size: contain;
}

.qa-item .answer:before {
    background: url(../img/QA-iconA@2x.png) no-repeat;
    background-size: contain;
}

.is-page-bottom {
    height: 1px;
    width: 100%;
    display: block;
    background-color: #efefef;
}
.main-content .section{
  margin-top: 40px;
}
.main-content .section:first-child{
  margin-top: 0px;
}
.main-content .section.nospace{
  margin-top: 0px;
}