/** {*/
/*    --tw-ring-inset: var(--tw-empty,!*!*! !*!*!);*/
/*    --tw-ring-offset-width: 0px;*/
/*    --tw-ring-offset-color: #fff;*/
/*    --tw-ring-color: rgba(14, 165, 233, 0.5);*/
/*    --tw-ring-offset-shadow: 0 0 #0000;*/
/*    --tw-ring-shadow: 0 0 #0000;*/
/*    --tw-shadow: 0 0 #0000;*/
/*}*/

h1, h2, h3, p, h1, h2, h3, p, h4, h5, h6, hr {
    margin: 0;
}

hr {
    height: 0;
    color: #C8CBD0;
    border-top-width: 1px;
    margin: 10px 0px 10px 0px;
}

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    z-index: 100;
}

main {
    display: block;
}

body {
    margin: 0px;
    display: contents;
}

article {
    display: block;
    width: -webkit-fill-available;
    background-image: url(../../../../img/menu/hci/concert/section2-bg1.svg);
}

section {
    padding-top: 20px;
    padding-bottom: 20px;
}

section p {
    text-align: justify;
    line-height: 1.6;
    margin-bottom: 30px;
}

.bg-\[\#EEF8F7\] {
    --tw-bg-opacity: 1;
    background-color: rgba(238, 248, 247, var(--tw-bg-opacity));
}

.bg-\[\#FBF8EC\] {
    --tw-bg-opacity: 1;
    background-color: rgba(251, 248, 236, var(--tw-bg-opacity));
}

.mt-10 {
    margin-top: 10px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-60 {
    margin-top: 60px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.m-20 {
    margin: 20px;
}

.w-100_ta-c {
    width: 100%;
    text-align: center;
}

.w-100 {
    width: 100%;
}

.fw-600 {
    font-weight: 600;
}

.v-h {
    visibility: hidden;
}

.icon-section1-bg2 {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    /*background-image: url(../../../../img/menu/hci/concert/section1-bg2.svg);*/
    background-image: url(../../../../img/menu/hci/concert/section1-bg2.png);
    background-position: top;
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0;
    /*margin-top: -50px;*/
}

@font-face {
    font-family: 'ChenYuluoyan-Thin';
    font-style: cursive;
    font-weight: 400;
    font-display: swap;
    src: url('../../../../fonts/ChenYuluoyan-2.0-Thin.ttf') format('truetype');
}

.draw_fonts {
    font-family: "ChenYuluoyan-Thin", cursive;
    /*src: url('../../../fonts/ChenYuluoyan-2.0-Thin.ttf') format('truetype');*/
    font-weight: normal;
    font-style: normal;
}

.section1-content-web-font-style1 {
    color: #832118;
    line-height: 43px;
    font-size: 34px;
}

.section1-content-web-font-style2 {
    color: #CD2111;
    line-height: 43px;
    font-size: 34px;
}

.section1-content-phone-font-style1 {
    color: #832118;
    line-height: 22px;
    font-size: 22px;
}

.section1-content-phone-font-style2 {
    color: #CD2111;
    line-height: 22px;
    font-size: 22px;
}

.icon-section1-bg1 {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(../../../../img/menu/hci/concert/section1-bg1.svg);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0;
}

.icon-section1-bg3 {
    position: absolute;
    display: inline-block;
    width: 290px;
    height: 400px;
    background-image: url(../../../../img/menu/hci/concert/section1-bg3.svg);
    background-position: top;
    background-size: 100% auto;
    background-repeat: no-repeat;
    float: right;
    margin: 0px;
    padding: 0;
    right: 0;
    top: 430px;
    /*margin-top: -50px;*/
}

.icon-section2-bg1 {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(../../../../img/menu/hci/concert/section2-bg1.svg);
    background-position: top;
    background-size: 100% auto;
    /*background-repeat: no-repeat;*/
    margin: 0px;
    padding: 0;
    padding-bottom: 500px;
    height: 2800px;
}

.icon-section3-bg1 {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(../../../../img/menu/hci/concert/section3-bg1.svg);
    background-position: 50% 0%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0;

    height: 2900px;
    margin-top: -340px;
}

.icon-section4-bg1 {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(../../../../img/menu/hci/concert/section4-bg1.svg);
    background-position: unset;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0;

    height: 1100px;
    margin-top: -175px;
    margin-bottom: -70px;
}

.icon-section5-bg1 {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(../../../../img/menu/hci/concert/section5-bg1.svg);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0;

    height: 120px;
    margin-bottom: -15px;
}

.agree-check-label {
    align-items: center;
    background: #A2C6BB;
    border-radius: 40px;
    cursor: pointer;
    font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
    color: #fff;
    letter-spacing: 2px;
    user-select: none;
    width: 378px;
    height: 55px;
    display: inline-block;
}

.send-info-label {
    align-items: center;
    background: #A2C6BB;
    border-radius: 40px;
    cursor: not-allowed;
    font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
    color: #fff;
    letter-spacing: 2px;
    user-select: none;
    width: 378px;
    height: 55px;
    display: inline-block;
}

.confirm-btn-view {
    align-items: center;
    background: #489C82;
    border-radius: 40px;
    cursor: pointer;
    font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
    color: #fff;
    letter-spacing: 2px;
    user-select: none;
    width: 270px;
    height: 60px;
    display: inline-block;
}

.confirm-btn-view:hover {
    opacity: 0.7;
}

.agree-checkbox, .donate-checkbox {
    /* 隱藏原生checkbox */
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.agree-custom {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
    margin-right: 10px;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: border 0.1s;
    margin-top: 15px;
}

.agree-checkbox:checked + .agree-custom {
    border-color: #fff;
    background: #fff;
}
.agree-checkbox:checked + .agree-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 7px;
    width: 9px;
    height: 4px;
    border-left: 2px solid #489C82;
    border-bottom: 2px solid #489C82;
    transform: rotate(-45deg);
    border-radius: 2px;
}

.agree-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    vertical-align: bottom;
}

.send-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 55px;
    vertical-align: bottom;
}

.confirm-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 55px;
    vertical-align: bottom;
}

.donate-custom {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #2B2B2B;
    background: transparent;
    margin-right: 10px;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: border 0.1s;
    margin-top: 15px;
}

.donate-checkbox:checked + .donate-custom {
    border-color: #2B2B2B;
    background: transparent;
}
.donate-checkbox:checked + .donate-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 7px;
    width: 9px;
    height: 4px;
    border-left: 2px solid #2B2B2B;
    border-bottom: 2px solid #2B2B2B;
    transform: rotate(-45deg);
    border-radius: 2px;
}

.donate-text-block {
    display: inline-block;
    width: calc(100% - 105px);
}

.donate-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    vertical-align: bottom;
}

.join-text {
    font-size: 26px;
    font-weight: 400;
    line-height: 55px;
    vertical-align: bottom;
}


.form-block {
    border-radius: 20px;
    margin: 60px auto;
    box-sizing: border-box;
    width: 900px;
    /*height: 340px; */
    padding: 50px;
    padding-bottom: 25px;
    background-color: #E6DECBCC;
}

/* 單行橫向排列 */
.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    /*padding: 0 36px;*/
}

/* 標籤：星號和文字等底線對齊，靠右對齊 */
.form-label-flex {
    /*     display: flex; */
    align-items: center;
    justify-content: flex-end;
    font-size: 20px;
    font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
    color: #222;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: left;
    min-width: 130px;
}

/* 紅色*號，底線對齊 */
.form-label-flex .star {
    color: #d40000;
    font-size: 20px;
    margin-right: 10px;
    line-height: 1;
    display: inline-block;
    position: relative;
    top: 2px; /* 微調底線齊平，可依需求調整 */
}

/* 輸入框 */
.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row input[type="code"]{
    width: 100%;
    height: 60px;
    flex: 1 1 auto;
    font-size: 20px;
    font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
    background: #F9F6ED;
    border: none;
    border-radius: 11px;
    padding: 18px 20px;
    margin-left: 30px;
    color: #2B2B2B;
    outline: none;
    transition: box-shadow 0.14s;
    box-shadow: none;
}

.form-row input:focus {
    color: #555;
    box-shadow: 0 0 0 2px #e0d7c5;
}

.form-row input::placeholder {
    color: #B6B6B6;
    opacity: 1;
    font-weight: 400;
}

.form-row.join input::placeholder {
    color: #8C5610;
    opacity: 1;
    font-weight: 400;
}

/* 按鈕區 */
.form-row .btn {
    height: 60px;
    min-width: 200px;
    font-size: 20px;
    border-radius: 11px;
    border: none;
    margin-left: 26px;
    font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
    font-weight: 400;
    box-shadow: none;
    letter-spacing: 2px;
}

.btn-verify {
    background: #E3C785;
    color: #423008;
}
.btn-verify:hover { background: #E3C785FF; }

.btn-code {
    background: #C9BFA4;
    color: #423008;
}
.btn-code:hover { background: #C9BFA4FF; }


a {
    color: inherit;
    text-decoration: inherit;
}

::placeholder {
    color: #ABABAB;
}

.oval {
    width: 40px;
    height: 20px;
    margin: 1px 1px 1px 12px;
    /* box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); */
    border: solid 1px #979797;
    background-color: #ffffff;
}

input[type='radio'] {
    --active: #009aef;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #009aef;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #d8d8d8;
    cursor: pointer;
    width: 20px;
    box-shadow: none;
}

.donationAmount_field_title {
    display: inline-block;
    line-height: 30px;
    margin-left: 5px;
    margin-right: 10px;
    color: #606060;
    vertical-align: text-bottom;
    margin-bottom: 2px;
}

.footer-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 34px 18px 18px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.footer-logo {
    width: 32px;
    height: 32px;
    background-image: url(../../../../img/menu/hci/concert/logo-hci.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.footer-title-cn {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 2px;
    margin-right: 10px;
    line-height: 20px;
}
.footer-title-en {
    font-size: 12px;
    color: #fff;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 20px;
}

.footer-icons {
    position: absolute;
    top: 36px;
    right: 50px;
    display: flex;
    gap: 18px;
}

.footer-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    transition: transform 0.14s;
}

.footer-btn:hover svg circle {
    fill: #f3d26a55;
}

.footer-btn svg {
    display: block;
}

.footer-links {
    display: flex;
    gap: 18px;
    margin-top: 10px;
}

.footer-link {
    color: #F4D240;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
    letter-spacing: 1px;
}
.footer-link:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-divider-color {
    color: #F4D240;
}

.countdown-label {
    display: none;
    /* background: #e6c377; */
    color: #2B2B2B;
    border-radius: 22px;
    /* padding: 8px 22px; */
    font-size: 20px;
    font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
    font-weight: 500;
    /* margin-left: 34px; */
    transition: background 0.3s, color 0.3s;
    /* width: 330px; */
}
.countdown-label.timeout {
background: #eecaca;
color: #d40000;
}
#countdown-num {
font-weight: bold;
}

.successIcon {
    display: none;
    width: 24px;
    height: 24px;
    background-image: url(../../../../img/menu/hci/concert/done.svg);
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    vertical-align: bottom;
}

.refreshIcon {
    display: none;
    width: 24px;
    height: 24px;
    background-image: url(../../../../img/menu/hci/concert/refresh.svg);
    background-repeat: no-repeat;
    background-position: center;
    /*margin-right: 10px;*/
    vertical-align: bottom;
}

#resultTxt {
    margin-left: 20px;
    color: #8E6202;
}

.dialog_view {
    display: none;
    /*position: absolute;*/
    position: fixed;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /*width: calc(100% - 100px);*/
    /*height: calc(100% - 80px);*/
    overflow: hidden;
    background-color: #E9E1D0;
    border-radius: 20px;
    z-index: 101;
    max-width: 471px;
    max-height: 366px;
}

.dialog-view-close-block {
    display: block;
    float: right;
}

.dialog-view-content-block {
    width: 100%;
    text-align: center;
    margin-top: 55px;
}

.icon-close {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(../../../../img/menu/hci/concert/close.svg) no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: top;
    cursor: pointer;
    margin: 20px;
}

.icon-close:hover {
    opacity: 0.7;
}

.confirm-btn-block1 {
    width: 100%;
    text-align: center;
    margin-top: 40px;
}

.confirm-btn-block2 {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

#requiredFieldsAlertDialogView {
    max-height: fit-content;
    top: 0;
}

#section1-content-web {
    display: block;
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 100px;
}

#section1-content-phone {
    display: none;
    text-align: left;
    position: absolute;
    width: 100%;
    bottom: 100px;
    padding-left: 30px;
    padding-right: 30px;
}

.personal_info_statement {
    color: #000000;
    line-height: 100%;
    font-size: 36px;
}

.personal_info_statement_content {
    font-size: 20px;
    line-height: 30px;
    text-align: left;
    width: 1000px;
    display: inline-block;
}

.agree-check-label-view {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    position: absolute;
    z-index: 1;
}

.donor-info-view {
    margin-top: 280px;
}

.donor-info {
    color: #000000;
    line-height: 100%;
    font-size: 36px;
}

.donate-info {
    color: #000000;
    line-height: 100%;
    font-size: 36px;
}

.donate-info-view {
    background-color: #F9F6ED80;
    color: #265949;
    border-radius: 10px;
    padding-left: 30px;
    padding-top: 20px;
    padding-bottom: 20px
}

.bank-title-view,
.accountName-title-view,
.accountNo-title-view {
    display: inline-block;
}

.bank-title,
.accountName-title,
.accountNo-title {
    font-size: 20px;
    font-weight: 600;
    margin-right: 20px;
    line-height: 30px;
}

.bank-content-view,
.accountName-content-view,
.accountNo-content-view {
    display: inline-block;
}

.bank-content,
.accountName-content,
.accountNo-content {
    font-size: 20px;
    font-weight: 400;
    margin-right: 20px;
    line-height: 30px;
}

.accountName-block-view {
    margin-top: 0px;
}

.accountNo-block-view {
    margin-top: 0px;
}

.donate-flower-view {
    border-radius: 10px;
    margin-top: 70px;
}

#donateFlowerDesc-web {
    display: block;
    color: #573421;
    font-size: 20px;
    font-weight: 600;
    margin-right: 20px;
    line-height: 30px;
}

#donateFlowerDesc-phone {
    display: none;
    color: #573421;
    font-size: 16px;
    font-weight: 600;
    margin-right: 20px;
    line-height: 20px;
}

.donate-amount-view {
    border-radius: 10px;
    margin-top: 70px;
    margin-bottom: 30px;
}

.donate-amount-desc {
    color: #573421;
    font-size: 20px;
    font-weight: 600;
    margin-right: 20px;
    line-height: 30px;
}

.agree-for-tax-star-block {
    display: inline-block;
    vertical-align: top;
}

.agree-for-tax-desc-block {
    display: inline-block;
    width: calc(100% - 25px);
}

.agree-for-tax-desc {
    color: #489C82;
    font-size: 20px;
    font-weight: 600;
    margin-right: 20px;
    line-height: 30px;
}

.guestIdView {
    display: inline-block;
    width: calc(100% - 120px);
    vertical-align: bottom;
    margin: 0;
}

.agree-for-tax-view {
    display: inline-block;
    line-height: 45px;
}

.agree-for-tax-view-line-height {
    line-height: 55px;
}

.agree-receipt-view {
    margin-top: 80px;
}

.agree-receipt-view-star-block {
    display: inline-block;
    vertical-align: top
}

.agree-receipt-view-desc-block {
    display: inline-block;
    width: calc(100% - 25px);
}

.agree-receipt-view-desc1 {
    color: #489C82;
    font-size: 20px;
    font-weight: 600;
    margin-right: 20px;
    line-height: 30px;
}

.agree-receipt-view-desc2 {
    color: #489C82;
    font-size: 20px;
    font-weight: 400;
    margin-right: 20px;
    line-height: 30px;
}

.receiptAddressView {
    display: inline-block;
    width: calc(100% - 200px);
    vertical-align: bottom;
    margin: 0;
}

.receiptTitleView {
    display: inline-block;
    width: calc(100% - 200px);
    vertical-align: bottom;
    margin: 0;
    margin-left: 40px;
}

.receiptTitleCheckBox {
    visibility: hidden;
    display: inline-block;
}

.agree-announce-title {
    color: #489C82;
    font-size: 20px;
    font-weight: 600;
    margin-right: 20px;
    line-height: 30px;
}

.agree-announce-view {
    margin-top: 80px;
    margin-bottom: 25px;
}

.agree-announce-checkbox-view {
    display: inline-block;
}

.section4-title {
    color: #000000;
    line-height: 100%;
    font-size: 48px;
}

.section4-view {
    width: 100%;
    text-align: center;
    margin-top: 300px;
}

.section4-content-view {
    width: 700px;
    margin: 0px auto;
    margin-top: 60px;
}

.section4-content-desc-view {
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

.section4-content-desc {
    color: #000000;
    line-height: 100%;
    font-size: 20px;
    font-weight: 600;
}

.concertDate1View {
    display: inline-block;
    line-height: 45px;
}

.concertDate1_joinCnt_view {
    display: inline-block;
    width: calc(100% - 400px);
    vertical-align: bottom;
    margin: 0;
}

.section4-contact-view-web {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 60px;
}

.section4-contact-view-web-font-style1 {
    color: #000000;
    line-height: 35px;
    font-size: 24px;
    font-weight: 400;
}

.section4-contact-view-web-font-style2 {
    color: #CD2111;
    font-weight: bold;
}

.section4-contact-view-phone {
    display: none;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.section4-contact-view-phone-font-style1 {
    color: #000000;
    line-height: 26px;
    font-size: 16px;
    font-weight: 400;
}

.section4-contact-view-phone-font-style2 {
    color: #CD2111;
    font-weight: bold;
}


.success-dialog-title {
    font-size: 40px;
}

.success-dialog-content {
    margin-top: 70px;
    font-size: 20px;
}

.requiredFields-dialog-title {
    font-size: 40px;
}

.requiredFields-dialog-content {
    margin-top: 40px;
    font-size: 20px;
    line-height: 30px;
}

@media only screen and (max-width: 1750px) {
    .icon-section2-bg1 {
        height: 2700px;
    }

    .icon-section3-bg1 {
        margin-top: -310px;
    }

    .icon-section4-bg1 {
        height: 1000px;
        margin-top: -145px;
    }

    .section4-view {
        margin-top: 260px;
    }
}

@media only screen and (max-width: 1550px) {
    .icon-section2-bg1 {
        height: 2600px;
    }

    .icon-section4-bg1 {
        height: 900px;
    }

    .section4-view {
        margin-top: 160px;
    }
}

@media only screen and (max-width: 1366px) {
    .icon-section2-bg1 {
        height: 2500px;
    }

    .icon-section4-bg1 {
        height: 850px;
    }

    .section4-view {
        margin-top: 160px;
    }
}

@media only screen and (max-width: 500px) {
    .icon-section1-bg1 {
        background-image: url(../../../../img/menu/hci/concert/section1-bg1-phone.svg);
    }

    .icon-section1-bg2 {
        /*background-image: url(../../../../img/menu/hci/concert/section1-bg2-phone.svg);*/
        background-image: url(../../../../img/menu/hci/concert/section1-bg2-phone.png);
    }

    .icon-section1-bg3 {
        width: 80px;
        height: 90px;
        background-image: url(../../../../img/menu/hci/concert/section1-bg3-phone.svg);
        right: 0px;
        top: 305px;
    }

    .icon-section2-bg1 {
        height: 1225px;
        padding-bottom: 0px;
    }

    #section1-content-web {
        display: none;
    }

    #section1-content-phone {
        display: block;
    }

    .personal_info_statement {
        font-size: 30px;
    }

    .personal_info_statement_content {
        font-size: 14px;
        line-height: 25px;
        text-align: left;
        margin-left: 30px;
        margin-right: 30px;
        width: auto;
        display: inline-block;
    }

    .agree-check-label {
        width: 240px;
    }

    .agree-text {
        font-size: 14px;
        line-height: 30px;
    }

    .agree-check-label-view {
        margin-top: 40px;
    }

    .icon-section3-bg1 {
        background-image: url(../../../../img/menu/hci/concert/section3-bg1-phone.svg);
        margin-top: 130px;
    }

    .donor-info-view {
        margin-top: 70px;
    }

    .donor-info {
        font-size: 30px;
    }

    .form-block {
        width: calc(100% - 40px);
        margin-top: 40px;
        padding: 20px;
        margin-bottom: 40px;
    }

    .form-row {
        display: block;
    }

    .form-label-flex {
        font-size: 16px;
    }

    /* 輸入框 */
    .form-row input[type="text"],
    .form-row input[type="tel"],
    .form-row input[type="email"],
    .form-row input[type="code"]{
        margin-left: 0px;
        margin-top: 15px;
        font-size: 16px;
        height: 50px;
        padding-left: 10px;
    }

    /* 按鈕區 */
    .form-row .btn {
        margin-left: 0px;
        margin-top: 15px;
        font-size: 16px;
        min-width: 200px;
        height: 50px;
    }

    .verifyBtnView {
        margin-bottom: 0px;
    }

    .countdown-label {
        font-size: 16px;
    }

    /* 捐款資訊 */
    .donate-info {
        font-size: 30px;
    }

    .donate-info-view {
        padding-left: 20px;
        padding-top: 15px;
        padding-bottom: 15px
    }

    .bank-title-view,
    .accountName-title-view {
        display: inline-block;
        vertical-align: bottom;
        margin-bottom: 4px;
    }

    .bank-title,
    .accountName-title {
        font-size: 16px;
        font-weight: 600;
        margin-right: 20px;
        line-height: 30px;
    }

    .bank-content-view,
    .accountName-content-view {
        display: inline-block;
        width: calc(100% - 98px);
    }

    .bank-content,
    .accountName-content {
        font-size: 16px;
        font-weight: 400;
        margin-right: 20px;
        line-height: 16px;
    }

    .accountNo-title-view {
        display: inline-block;
        vertical-align: unset;
        margin-bottom: 0px;
    }

    .accountNo-title {
        font-size: 16px;
        font-weight: 600;
        margin-right: 20px;
        line-height: 30px;
    }

    .accountNo-content-view {
        display: inline-block;
        width: calc(100% - 105px);
    }

    .accountNo-content {
        font-size: 16px;
        font-weight: 400;
        margin-right: 20px;
        line-height: 16px;
    }

    .accountName-block-view {
        margin-top: 10px;
    }

    .accountNo-block-view {
        margin-top: 10px;
    }

    .donate-flower-view {
        margin-top: 40px;
    }

    #donateFlowerDesc-web {
        display: none;
    }

    #donateFlowerDesc-phone {
        display: block;
    }

    .donate-checkbox:checked + .donate-custom::after {
        left: 3px;
        top: 5px;
    }

    .donate-custom {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

    .donate-text {
        font-size: 16px;
    }

    .donate-amount-view {
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .donate-amount-desc {
        font-size: 16px;
    }

    .donateAccountView {
        margin-bottom: 0px;
    }

    .agree-for-tax-desc {
        font-size: 16px;
        line-height: 20px;
    }

    .guestIdView {
        width: calc(100%);
    }

    .agree-for-tax-view {
        line-height: normal;
    }

    .agree-for-tax-view-line-height {
        line-height: 25px;
    }

    .agree-receipt-view {
        margin-top: 40px;
    }

    .agree-receipt-view-desc1 {
        font-size: 16px;
        line-height: 20px;
    }

    .agree-receipt-view-desc2 {
        font-size: 16px;
        line-height: 20px;
    }

    .receiptAddressView {
        display: block;
        width: calc(100%);
    }

    .receiptTitleView {
        display: block;
        width: calc(100%);
        margin-left: 0px;
    }

    .receiptTitleCheckBox {
        visibility: hidden;
        display: none;
    }

    .agree-announce-title {
        font-size: 16px;
        line-height: 20px;
    }

    .agree-announce-view {
        margin-top: 40px;
        margin-bottom: 0px;
    }

    .agree-announce-checkbox-view {
        vertical-align: top;
    }

    .icon-section4-bg1 {
        background-image: url(../../../../img/menu/hci/concert/section4-bg1-phone.svg);
        margin-top: -320px;
        height: 880px;
        background-position: center;
    }

    .section4-title {
        font-size: 30px;
    }

    .section4-view {
        margin-top: 90px;
    }

    .section4-content-view {
        width: calc(100% - 80px);
        margin-top: 40px;
    }

    .section4-content-desc-view {
        margin-bottom: 20px;
        text-align: left;
        line-height: 25px;
    }

    .section4-content-desc {
        font-size: 16px;
    }

    .concertDate1View {
        display: block;
        text-align: left;
    }

    .join-text {
        font-size: 20px;
    }

    .concertDate1_joinCnt_view {
        width: calc(100% - 10px);
        margin-top: -15px;
    }

    .section4-contact-view-web {
        display: none;
    }

    .section4-contact-view-phone {
        display: block;
    }

    .send-info-label {
        width: 280px;
    }

    .icon-section5-bg1 {
        display: none;
    }

    .dialog_view {
        max-width: 300px;
        max-height: 280px;
    }

    .success-dialog-title {
        font-size: 30px;
    }

    .success-dialog-content {
        margin-top: 30px;
        font-size: 16px;
    }

    .requiredFields-dialog-title {
        font-size: 30px;
    }

    .requiredFields-dialog-content {
        margin-top: 40px;
        font-size: 16px;
        line-height: 30px;
    }

    .confirm-text {
        font-size: 16px;
        line-height: 50px;
    }

    .confirm-btn-view {
        width: 200px;
        height: 50px;
    }
}

@media only screen and (max-width: 450px) {
    .icon-section2-bg1 {
        height: 1250px;
        padding-bottom: 0px;
    }
}

@media only screen and (max-width: 400px) {
    .icon-section2-bg1 {
        height: 1300px;
        padding-bottom: 0px;
    }
}

@media only screen and (max-width: 360px) {
    .icon-section2-bg1 {
        height: 1335px;
        padding-bottom: 0px;
    }

    .section4-content-view {
        width: calc(100% - 55px);
        margin-top: 40px;
    }

    .icon-section4-bg1 {
        margin-top: -270px;
    }
}