@charset "utf-8";

.dialog-triangle-wrap {
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.3));
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    transition: all .3s ease;
}

.dialog-triangle {
    width: 53px;
    height: 24px;
    background-color: #feebdb;
    clip-path: path('M 0 0 L 53 0 L 32 19 Q 26.5 24 21 19 L 0 0 Z');
    transition: all .3s ease;
}

.h1 {
    font-size: 4rem;
    line-height: 1.5;
    margin-bottom: 43px;
}
.h3.st {
    font-size: 3.2rem;
    text-align: left;
}
.h4.st {
    font-size: 2.2rem;
}

.pm-pic-list .pm-pic-item .pic-info {
    font-size: 1.95rem;
}
.icon.icon-plus.bg-gray:before, 
.icon.icon-plus.bg-gray:after {
    background: #ccc;
    border-radius: 30px;
}

.icon.icon-plus.bg-gray:before {
    height: 5px;
}

.icon.icon-plus.bg-gray:after {
    width: 5px;
}
.icon.icon-minus {
    width: 30px;
    height: 5px;
    border-radius: 30px;
    background: #ddefe7;
}

.btn.btn-bg-green {
    padding-bottom: 30px;
}
.deco-item.gradian-circle {
    aspect-ratio: 1 /1;
    position: absolute;
}
.deco-item.gradian-circle.qrcode-circle-deco1 {
    width: 77.8%;
    top: -50%;
    left: -33%;
    z-index: 0;
}
.deco-item.gradian-circle.qrcode-circle-deco2 {
    width: 41%;
    top: 20%;
    right: -13%;
    z-index: 0;
    opacity: 0.45;
}
.deco-item.gradian-circle.qrcode-circle-deco3 {
    width: 70.6%;
    top: -21%;
    left: -22%;
    z-index: 0;
}
.deco-item.gradian-circle.qrcode-circle-deco4 {
    width: 41%;
    top: 41%;
    right: -31%;
    z-index: 0;
    opacity: 0.8;
}
.deco-item.gradian-circle.qrcode-circle-deco5 {
    width: 59.5%;
    top: 53%;
    right: -21%;
    z-index: 0;
    opacity: 0.7;
}
.deco-item.deco-money {
    width: 16.2%;
    left: 13%;
    bottom: 10%;
}

.deco-item.deco-money2 {
    width: 12.8%;
    top: 61%;
    left: 21%;
    animation: coinFade2 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.deco-item.deco-money3 {
    width: 11.3%;
    right: 10%;
    top: 21%;
    animation: coinFade3 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.deco-item.deco-money4 {
    width: 10.7%;
    right: 14%;
    top: 42%;
    animation: coinFade4 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

/* money3 第一個掉落 */
@keyframes coinFade3 {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }
    15% {
        opacity: 1;
        transform: translateY(4px);
    }
    20% {
        transform: translateY(0);
    }
    65% {
        opacity: 1;
        transform: translateY(0);
    }
    75% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* money4 第二個掉落：money3 還在出現時就開始 */
@keyframes coinFade4 {
    0%, 10% {
        opacity: 0;
        transform: translateY(-60px);
    }
    25% {
        opacity: 1;
        transform: translateY(4px);
    }
    30% {
        transform: translateY(0);
    }
    65% {
        opacity: 1;
        transform: translateY(0);
    }
    75% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* money2 第三個掉落：money4 還在出現時就開始 */
@keyframes coinFade2 {
    0%, 20% {
        opacity: 0;
        transform: translateY(-60px);
    }
    35% {
        opacity: 1;
        transform: translateY(4px);
    }
    40% {
        transform: translateY(0);
    }
    65% {
        opacity: 1;
        transform: translateY(0);
    }
    75% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}
.sec .container {
    max-width: 100%;
}
/** eqrcode-topintro **/
.sec.eqrcode-topintro-sec {
    padding: 100px 15px 105px;
    position: relative;
}
.eqrcode-topintro-box {
    display: flex;
    align-items: center;
}

.eqrcode-topintro-pic-cont {
    flex: 0 0 auto;
    width: 48%;
    margin-left: -6%;
    position: relative;
}

.eqrcode-topintro-cont {
    flex: 0 0 auto;
    width: 58%;
    padding-left: 6%;
    position: relative;
}

.eqrcode-topintro-pic-cont-box {
    width: 108%;
}

.eqrcode-topintro-cont .btn-box .btn {
    margin-right: 20px;
    font-size: 2.4rem;
}
.btn.btn-bord-round {
    padding: 14px 60px 20px;
}
.eqrcode-topintro-cont .btn-box .tsec2 {
    margin-top: 25px;
}

.eqrcode-topintro-cont .btn-box {
    margin-top: 55px;
}

.eqrcode-topintro-cont .h1 {
    margin-bottom: 40px;
}

/** eqrcode-paymethod **/
.eqrcode-paymethod-area .tabs-area .tabs-title-area {
    margin-bottom: 55px;
}
.eqrcode-paymethod-area .tabs-area .tabs-title-area .nav-tabs {
    flex-wrap: nowrap;
    gap: 35px;
    border: none;
}
.eqrcode-paymethod-area .tabs-area .tabs-title-area .nav-item {
    aspect-ratio: 1 / 1;
    width: calc(100% / 5);
    padding-bottom: 24px;
}
.eqrcode-paymethod-area .tabs-area .tabs-title-area .nav-link {
    font-size: 2.2rem;
    padding: 0 10px;
    text-align: center;
    aspect-ratio: 1 /1;
    box-shadow: 3px 3px 10px #e6e6e6;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: none;
    color: #757575;
    transition: all .3s ease;
    width: 100%;
}
.eqrcode-paymethod-area .tabs-area .tabs-title-area .nav-link .txt {
    position: relative;
    z-index: 2;
}
.eqrcode-paymethod-area .tabs-area .tabs-title-area .nav-link:before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 15px;
    transition: all .3s ease;
    background: #fff;
    z-index: 1;

}
.eqrcode-paymethod-area .tabs-area .tabs-title-area .nav-link.active {
    border: none;
    color: #fff;
}
.eqrcode-paymethod-area .tabs-area .tabs-title-area .nav-link.active:before {
    background: #e87e24;
        
}
.eqrcode-paymethod-area .tabs-area .tabs-title-area .nav-link.active .dialog-triangle-wrap {
    bottom: -23px;
    
}
.eqrcode-paymethod-area .tabs-area .tabs-title-area .nav-link.active .dialog-triangle-wrap .dialog-triangle {
    background-color: #e87e24;
}
.eqrcode-paymethod-area .tabs-area .tabs-title-area .nav-link:not(.active):hover {
    background: #ccc;
    border: none;
    transform: scale(0.95);
}

.eqrcode-paymethod-area .tabs-area .tabs-title-area .nav-link:hover:not(.active):before {
    background: #feebdb;
}

.eqrcode-paymethod-area .tabs-area .tabs-title-area .nav-link:hover:not(.active) .dialog-triangle-wrap {
    bottom: -23px;
}

/** tabs content **/
.sec.eqrcode-paymethod-sec {
    padding: 108px 0 52px;
    background: #f5f9fc;
    position:relative;

}
.pmethod-cont-tit-box {
    padding-right: 12.5%;
    position: relative;
    padding-top: 35px;
    height: 100%;
}
.pmethod-cont-tit-box .dot-line-area.fv {
    right: 4%;
}
.pmethod-cont-tit-box .pic {
    aspect-ratio: 709 / 317;
    border-radius: 30px;
    overflow: hidden;
}
.pmethod-cont-tit-box .pm-cont-tit {
    padding: 55px 0 55px 45px;
}
.pmethod-cont-tit-box .pm-cont-tit .desc {
    font-size: 2.2rem;
    color: #333333;
    text-align: left;
    line-height: 1.5;
}
.pmethod-cont-det-box {
    padding-top: 35px;
    position: relative;
}
.pmethod-list .pm-item {
    display: flex;
}

.pmethod-list .pm-item .no {
    font-size: 1.7rem;
    color: #46b3a3;
    width: 42px;
    height: 42px;
    border: solid 2.5px #46b3a3;
    border-radius: 50%;
    display: block;
    line-height: 1.2;
    flex: 0 0 auto;
    text-align: center;
    margin-top: 9px;
}

.pmethod-list .pm-item .info {
    padding-left: 20px;
}
.pm-pic-list .pm-pic-item {
    display: flex;
    align-items: center;
}

.pm-pic-list .pm-pic-item .pic {
    flex: 0 0 auto;
    width: 120px;
}

.pm-pic-list .pm-pic-item .pic-info {
    width: calc(100% - 120px);
    font-size: 2.0125rem;
    color: #333333;
    padding-left: 35px;
}

.pm-pic-list .pm-pic-item + .pm-pic-item {
    margin-top: 37px;
}

/** eqrcode-qa **/
.sec.eqrcode-qa-sec {
    padding: 95px 0;
}
.eq-qa-acc-list > .h3 {
    margin-bottom: 60px;
}
.eq-qa-acc-list .eqq-item .wpb_accordion_header {
    font-size: 2.3rem !important;
    color: #333333 !important;
    background: none !important;
    border-bottom: solid 2px #ccc;
}

.eq-qa-acc-list .eqq-item .wpb_accordion_header:before {
    position: absolute;
    content: "Q";
    display: block;
    width: 45px;
    height: 45px;
    background: #46b3a3;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 1.25;
    font-size: 1.8rem;
    left: 45px;
    top: 35px;
}

.eq-qa-acc-list .eqq-item .wpb_accordion_header a {
    padding: 30px 117px;
}
.wpb_accordion .wpb_accordion_wrapper .ui-state-active .ui-icon, 
.wpb_accordion .wpb_accordion_wrapper .ui-state-default .ui-icon {
    display: none;
}

.eq-qa-acc-list .eqq-item .wpb_accordion_header .icon-plus {
    position: absolute;
    right: 40px;
    top: 32px;
    width: 30px;
    height: 30px;
}
.eq-qa-acc-list .eqq-item .wpb_accordion_header .icon-plus:before,
.eq-qa-acc-list .eqq-item .wpb_accordion_header .icon-plus:after {
    transition: all .3s ease;
}
.eq-qa-acc-list .eqq-item .ui-accordion-content {
    padding: 25px 117px 40px;
    font-size: 2rem;
    color: #333333;
}

.eq-qa-acc-list .eqq-item .ui-accordion-content p {
    line-height: 1.65;
    margin-bottom: 0;
}

.eq-qa-acc-list .eqq-item .wpb_accordion_header.ui-accordion-header-active {
    color: #46b3a3 !important;
}

.eq-qa-acc-list .eqq-item .wpb_accordion_header.ui-accordion-header-active .icon-plus:after {
    opacity: 0;
}

.eq-qa-acc-list .eqq-item .wpb_accordion_header.ui-accordion-header-active .icon-plus:before {
    background: #ddefe7;
}

.eq-qa-acc-list .eqq-item .wpb_accordion_header a:hover {
    font-weight: 500;
    color: #46b3a3;
}

/** arrow **/
.eqrcode-paymethod-area .tabs-area .arrow-group > .btn {
    position: absolute;
    top: 0;
    background: rgb(245 249 252 / 70%);
    display: flex;
    align-items: center;
    color: #868686;
    z-index: 30;
    height: 113px;
    left: 0;
    padding: 0 5px;
    border-radius: 0;
    border: none;
}
.eqrcode-paymethod-area .tabs-area .arrow-group>.btn.btn-arrow-next {
    left: auto;
    right: 0
}
.eqrcode-paymethod-area .tabs-area .arrow-group > .btn img {
    width: 13px;
}
.eqrcode-paymethod-area .tabs-area .arrow-group > .btn:active {
    outline: none;
    box-shadow: none;
    border: none;
}