@charset "UTF-8";

:root {
    --gacha-text-cls: #FCEECD;
    --btn-gacha-cls: #851b20;
    --gacha-stroke-yellow: #ebbb39;
    --prize-gacha-cls: #f6be45;
}

/* entires pages may use it*/
.text-white {
    color: #fff !important
}
/* entires pages may use it*/


/* pages */
#page_banner {
    position: relative;
    height: 150px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (min-width: 1140px) {
    #page_banner {
        height: 300px;
    }
}

#footer_slogan {
    text-indent: -9999px;
    overflow: hidden;
    background: #e3ae47 url(./images/footer_slogan.png) 50% 50% no-repeat;
    background-size: 235px 69px;
    height: 131px;
}

#news_list {
    padding-top: 5px;
    padding-bottom: 5px;
}

#news_list li {
    border-left: 5px solid #ccc;
    margin-bottom: 13px;
    min-height: 60px;
}

#news_list li a {
    display: block;
    text-decoration: none;
    padding: 0px 0 0 10px;
    font-size: 16px;
    font-weight: bold;
    color: #231815;
    letter-spacing: 1px;
}

#news_list li .news_info {
    font-size: 16px;
    letter-spacing: 1px;
    color: #231815;
    display: block;
    line-height: 22px;
    font-weight: normal;
}

#news_list li .news_cat {
    font-size: 14px;
    letter-spacing: 1px;
    color: white;
    display: inline-block;
    padding: 0px 8px;
    height: 22px;
    line-height: 22px;
    background: #0d6fb8;
    margin-left: 10px;
    background-color: #e2ad46;
    border-radius: 5px;
}

#news_list li .title {
    padding-top: 10px;
    line-height: 18px;
}

@media (min-width: 1140px) {
    #news_list {
        padding-top: 40px;
        padding-bottom: 43px;
    }

    #news_list li {
        min-height: 0;
        margin-bottom: 40px;
    }
}

h1.news_title {
    padding: 40px 0 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #9c9c9c;
}

h1.news_title .title_block {
    border-left: 5px solid #ccc;
    padding-left: 10px;
}

h1.news_title .news_info {
    font-size: 16px;
    letter-spacing: 1px;
    color: #231815;
    display: block;
    line-height: 22px;
    font-weight: normal;
}

h1.news_title .news_cat {
    font-size: 14px;
    letter-spacing: 1px;
    color: white;
    display: inline-block;
    padding: 0px 8px;
    height: 22px;
    line-height: 22px;
    background: #0d6fb8;
    margin-left: 10px;
    background-color: #e2ad46;
    border-radius: 5px;
}

h1.news_title .title {
    padding-top: 10px;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 24px;
    padding-top: 3px;
}

h1.news_title .social .fb-like {
    float: right;
}

h1.news_title.luan_wen {
    padding-top: 11px;
}

@media (min-width: 1140px) {
    h1.news_title {
        padding-top: 0;
    }

    h1.news_title.luan_wen {
        padding-top: 0;
    }
}

.read_more {
    position: relative;
    display: block;
    text-decoration: none;
    width: 167px;
    height: 37px;
    text-align: center;
    line-height: 37px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #e2ad46;
    border: 2px solid #e3ae47;
    background: white;
    border-radius: 20px;
    margin: 0 auto 40px auto;
}

.read_more:hover {
    color: white;
    background-color: #e2ad46;
}

.read_more.news_detail {
    margin-bottom: 20px;
    margin-top: -25px;
}

@media (min-width: 1140px) {
    .read_more {
        margin: 0 auto 87px auto;
    }
}

.back_to_list {
    display: block;
    text-decoration: none;
    width: 167px;
    height: 37px;
    text-align: center;
    line-height: 37px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #e2ad46;
    border: 2px solid #e3ae47;
    background: white;
    border-radius: 20px;
    margin: 0 auto 0 auto;
}

.back_to_list:hover {
    color: white;
    background-color: #e2ad46;
}

@media (min-width: 1140px) {
    .back_to_list {
        margin: 0 auto 0 auto;
    }
}

.article_content {
    position: relative;
    overflow: hidden;
}

@media (min-width: 1140px) {
    .article_content {
        padding: 0;
        margin: 0;
    }

    .article_content.about_content {
        padding-top: 30px;
    }
}

.book_tag {
    padding-left: 26px;
    color: #e3ae47 !important;
    background: url(./images/book_tag.png) 0 2px no-repeat;
    background-size: 20px 16px;
    font-size: 16px;
    line-height: 20px !important;
    margin-top: 7px;
    margin-bottom: 7px;
}

.book_tag a {
    color: #e3ae47 !important;
}

.book_tag a span {
    color: #e3ae47 !important;
}

.book_tag.scriptures {
    margin-top: 20px;
}

@media (min-width: 1140px) {
    .book_tag.scriptures {
        margin-top: 0px;
    }
}

.article_action {
    position: relative;
    z-index: 60;
    margin-bottom: 40px;
}

.article_action .switch_article {
    position: absolute;
    bottom: 13px;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #9c9c9c;
    text-decoration: none;
}

.article_action .switch_article.prev_article {
    left: 0;
}

.article_action .switch_article.prev_article::before {
    content: "<";
    color: #e3ae47;
    display: inline-block;
    margin-right: 5px;
}

.article_action .switch_article.next_article {
    right: 0;
}

.article_action .switch_article.next_article::after {
    content: ">";
    color: #e3ae47;
    display: inline-block;
    margin-right: 5pxs;
}

.article_action.open {
    padding-top: 40px;
}

@media (min-width: 1140px) {
    .article_action {
        padding-top: 40px;
        margin-bottom: 87px;
    }

    .article_action.about {
        padding-top: 0;
    }
}

.about_slider_wrap {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 11px;
}

@media (min-width: 1140px) {
    .about_slider_wrap {
        margin-top: 35px;
        margin-left: 0;
        margin-right: 0;
    }
}

.service_slider_wrap {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 11px;
}

@media (min-width: 1140px) {
    .service_slider_wrap {
        margin: 35px auto 0 auto;
        width: 800px;
    }
}

#about_slider,
.service_slider {
    background: url(./images/slider_bg.jpg) 0 0 repeat;
    height: 320px;
}

#about_slider li.slide,
.service_slider li.slide {
    position: relative;
    height: 320px;
}

#about_slider li.slide .bg,
.service_slider li.slide .bg {
    height: 100%;
    width: 100%;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

@media (min-width: 1140px) {

    #about_slider,
    .service_slider {
        height: 600px;
    }

    #about_slider li.slide,
    .service_slider li.slide {
        height: 600px;
    }
}

#about_slider_nav,
.service_slider_nav {
    height: 43px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#about_slider_nav li.slide,
.service_slider_nav li.slide {
    position: relative;
    height: 43px;
    padding: 0 1px;
    cursor: pointer;
}

#about_slider_nav li.slide .bg,
.service_slider_nav li.slide .bg {
    height: 100%;
    width: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {

    #about_slider_nav,
    .service_slider_nav {
        height: 100px;
        margin-top: 38px;
        margin-bottom: 38px;
    }

    #about_slider_nav li.slide,
    .service_slider_nav li.slide {
        height: 100px;
        padding: 0 3px;
    }
}

.about_slider_num,
.service_slider_num {
    text-align: center;
    font-size: 20px;
    padding-bottom: 40px;
}

.about_slider_num .prev_slider,
.about_slider_num .next_slider,
.service_slider_num .prev_slider,
.service_slider_num .next_slider {
    color: #e7bd6d;
    display: inline-block;
    text-decoration: none;
}

.about_slider_num .prev_slider,
.service_slider_num .prev_slider {
    margin-right: 10px;
}

.about_slider_num .next_slider,
.service_slider_num .next_slider {
    margin-left: 10px;
}

@media (min-width: 1140px) {

    .about_slider_num,
    .service_slider_num {
        padding-bottom: 87px;
    }

    .about_slider_num.service_slider_num,
    .service_slider_num.service_slider_num {
        padding-bottom: 0;
    }
}

input[type="text"].y {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Adobe 繁黑體 Std B", "儷黑 Pro";
    -webkit-appearance: button;
    border-radius: 8px;
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background: white url(./images/select_arrow_2.png) right 14px top 50% no-repeat;
    background-size: 8px 5px;
    border: 2px solid #e5e5e7;
    font-weight: bold;
    font-size: 14px;
    color: #231815;
    letter-spacing: 1px;
    height: 36px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    padding: 5px 15px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 204px;
    margin-bottom: 15px;
}

#luan_wen_list {
    padding: 0;
    margin: 0 auto;
    width: 290px;
}

#luan_wen_list li {
    list-style-type: none;
    width: 135px;
    margin-bottom: 20px;
}

#luan_wen_list li a {
    display: block;
    height: 67px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    color: #3e3e3e;
    text-decoration: none;
    background: url(./images/block_list_bg.png) 0 0 no-repeat;
    background-size: 135px 67px;
    line-height: 14px;
    padding-top: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#luan_wen_list li a span {
    display: block;
    padding-top: 10px;
}

#luan_wen_list li .luan_wen_content {
    display: none;
    padding: 20px 0;
    background: #f1eeeb;
    border-bottom: 5px solid #e2ad46;
}

#luan_wen_list li .luan_wen_content>p {
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    letter-spacing: 1px;
    line-height: 24px;
}

#luan_wen_list li .luan_wen_content .date {
    text-align: center;
    color: #3e3e3e;
    letter-spacing: 1px;
    font-size: 14px;
}

@media (min-width: 475px) {
    #luan_wen_list {
        width: 445px;
    }
}

@media (min-width: 630px) {
    #luan_wen_list {
        width: 600px;
    }
}

@media (min-width: 890px) {
    #luan_wen_list {
        width: 860px;
    }

    #luan_wen_list li {
        width: 200px;
    }

    #luan_wen_list li a {
        width: 200px;
        height: 100px;
        padding-top: 0;
        line-height: 100px;
        background: url(./images/block_list_bg_d.png) 0 0 no-repeat;
        background-size: 200px 100px;
    }

    #luan_wen_list li a span {
        display: inline-block;
        margin-left: 4px;
        padding-top: 0;
    }

    #luan_wen_list li .luan_wen_content {
        padding: 12px 0;
    }

    #luan_wen_list li .luan_wen_content .date {
        text-align: right;
        margin-right: 12px;
    }
}

@media (min-width: 1140px) {
    #luan_wen_list {
        width: 100%;
        padding-bottom: 50px;
    }
}

.luan_wen_intro {
    padding-top: 40px;
    padding-bottom: 36px;
}

@media (min-width: 1140px) {
    .luan_wen_intro {
        padding-top: 35px;
        padding-bottom: 14px;
    }

    .luan_wen_intro p {
        line-height: normal;
    }
}

.load_more {
    position: relative;
    display: block;
    text-decoration: none;
    width: 167px;
    height: 37px;
    text-align: center;
    line-height: 37px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #e2ad46;
    border: 2px solid #e3ae47;
    background: white;
    border-radius: 20px;
    margin: 0 auto 40px auto;
}

.load_more:hover {
    color: white;
    background-color: #e2ad46;
}

@media (min-width: 1140px) {
    .load_more {
        margin: 0 auto 87px auto;
    }
}

.incense_intro,
.traffic_intro {
    padding-top: 33px;
    padding-bottom: 33px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #3e3e3e;
    line-height: 30px;
    border-bottom: 1px solid #e3ae47;
    margin-bottom: 30px;
}

.incense_intro.traffic_intro,
.traffic_intro.traffic_intro {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.incense_intro a,
.traffic_intro a {
    text-decoration: none;
    color: #3e3e3e;
}

@media (min-width: 1140px) {

    .incense_intro,
    .traffic_intro {
        padding-top: 27px;
    }

    .incense_intro.traffic_intro,
    .traffic_intro.traffic_intro {
        padding-bottom: 40px;
    }
}

.incense_form {
    border-bottom: 1px solid #e3ae47;
    margin-bottom: 40px;
}

.incense_form .row {
    padding: 10px 0;
    font-weight: bold;
    color: #3e3e3e;
    letter-spacing: 1px;
}

.incense_form .resp_left {
    float: left;
    line-height: 33px;
    padding-right: 11px;
}

.incense_form .resp_left.check {
    line-height: normal;
}

.incense_form .resp_field {
    overflow: hidden;
    display: block;
    padding-right: 4px;
}

.incense_form input[type="text"] {
    height: 33px;
    border: 1px solid #cdcdcd;
    line-height: 33px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 0;
    width: 100%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #3e3e3e;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Adobe 繁黑體 Std B", "儷黑 Pro";
}

.incense_form textarea {
    border: 1px solid #cdcdcd;
    line-height: 28px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 0;
    width: 100%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #3e3e3e;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Adobe 繁黑體 Std B", "儷黑 Pro";
    margin-top: 10px;
    height: 110px;
}

.incense_form img#captcha {
    display: inline-block;
    vertical-align: middle;
}

.incense_form a {
    display: inline-block;
    color: #e3ae47;
    font-size: 14px;
    vertical-align: middle;
    margin-left: 4px;
}

.incense_form button {
    display: block;
    width: 116px;
    height: 116px;
    text-indent: -999px;
    overflow: hidden;
    border: 0;
    background: url(./images/submit_incense.png) 0 0 no-repeat;
    background-size: 116px 116px;
    margin: 30px auto 40px auto;
    cursor: pointer;
}

@media (min-width: 1140px) {
    .incense_form {
        border-bottom: 0;
        margin-bottom: 0;
    }
}

.incense_title {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #3e3e3e;
    padding-left: 45px;
    line-height: normal;
}

.incense_title .icon {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 35px;
    height: 31px;
    background: url(./images/burner_icon.png) 0 0 no-repeat;
    background-size: 35px 31px;
}

#incense_list {
    padding: 20px 0 0 0;
    margin: 0 auto;
    width: 290px;
}

#incense_list li {
    list-style-type: none;
    width: 135px;
    margin-bottom: 20px;
}

#incense_list li a {
    display: block;
    height: 67px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    color: white;
    text-decoration: none;
    background: url(./images/block_list_bg_green.png) 0 0 no-repeat;
    background-size: 135px 67px;
    line-height: 14px;
    padding-top: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#incense_list li a span {
    display: block;
    padding-top: 6px;
    font-size: 20px;
    color: #3e3e3e;
}

#incense_list li .incense_content {
    display: none;
    padding: 20px 7px;
    background: #f1eeeb;
    border-bottom: 5px solid #89927b;
}

#incense_list li .incense_content>p {
    text-align: left;
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    letter-spacing: 1px;
    line-height: 24px;
    word-break: break-all;
}

#incense_list li .incense_content .date {
    text-align: right;
    color: #3e3e3e;
    letter-spacing: 1px;
    font-size: 14px;
}

#incense_list li.w a {
    background-image: url(./images/block_list_bg_red.png);
}

#incense_list li.w .incense_content {
    border-bottom: 5px solid #ca897b;
}

@media (min-width: 475px) {
    #incense_list {
        width: 445px;
    }
}

@media (min-width: 630px) {
    #incense_list {
        width: 600px;
    }
}

@media (min-width: 890px) {
    #incense_list {
        width: 860px;
    }

    #incense_list li {
        width: 200px;
    }

    #incense_list li a {
        width: 200px;
        height: 100px;
        padding-top: 30px;
        background: url(./images/block_list_bg_green_d.png) 0 0 no-repeat;
        background-size: 200px 100px;
    }

    #incense_list li a span {
        padding-top: 6px;
    }

    #incense_list li .incense_content {
        padding: 12px 11px;
    }

    #incense_list li.w a {
        background-image: url(./images/block_list_bg_red_d.png);
    }
}

@media (min-width: 1140px) {
    #incense_list {
        width: 100%;
        padding-bottom: 50px;
        padding-top: 42px;
    }
}

/* service use */
.service_title {
    margin: 40px 0 33px 0;
    text-indent: -9999px;
    overflow: hidden;
    height: 126px;
}

.service_title.service_1 {
    background: url(./images/service_1_header.png) 50% 0 no-repeat;
    background-size: 115px 126px;
}

.service_title.service_2 {
    background: url(./images/service_2_header.png) 50% 0 no-repeat;
    background-size: 144px 126px;
}

.service_title.service_3 {
    background: url(./images/service_3_header.png) 50% 0 no-repeat;
    background-size: 144px 121px;
    height: 121px;
}

.service_title.service_4 {
    background: url(./images/service_4_header.png) 50% 0 no-repeat;
    background-size: 177px 99px;
    height: 99px;
}

.service_title.service_5 {
    background: url(./images/service_5_header.png) 50% 0 no-repeat;
    background-size: 114px 98px;
    height: 98px;
}

.service_title.service_6 {
    background: url(./images/service_6_header.png) 50% 0 no-repeat;
    background-size: 114px 98px;
    height: 98px;
}

.service_title.service_7 {
    background: url(./images/service_7_header.png) 50% 0 no-repeat;
    background-size: 177px 121px;
    height: 121px;
}

@media (min-width: 1140px) {
    .service_title {
        margin: 54px 0 23px 0;
    }
}

.service_intro {
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    color: #3e3e3e;
    padding: 0 15px 33px 15px;
}

@media (min-width: 1140px) {
    .service_intro {
        padding: 0 0 28px 0;
    }
}

#service_list>li {
    margin-bottom: 5px;
}

#service_list>li>a {
    display: block;
    height: 150px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

#service_list>li>a h2 {
    position: relative;
    height: 100%;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#service_list>li>a h2::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(./images/service_item_mask.png) 0 0 repeat;
    z-index: 0;
}

#service_list>li>a h2 span {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 196px 20px;
    text-align: center;
    letter-spacing: 7px;
    color: #fff;
    margin-top: 66px;
}

#service_list>li>a.service_1_1 {
    background-image: url(./images/service_1_1_bg.jpg);
}

#service_list>li>a.service_1_1 h2 span {
    background-image: url(./images/service_1_1_title.png);
}

#service_list>li>a.service_1_2 {
    background-image: url(./images/service_1_2_bg.jpg);
}

#service_list>li>a.service_1_2 h2 span {
    background-image: url(./images/service_1_2_title.png);
}

#service_list>li>a.service_1_3 {
    background-image: url(./images/service_1_3_bg.jpg);
}

#service_list>li>a.service_1_3 h2 span {
    background-image: url(./images/service_1_3_title.png);
}

#service_list>li>a.service_1_4 {
    background-image: url(./images/service_1_4_bg.jpg);
}

#service_list>li>a.service_1_4 h2 span {
    background-image: url(./images/service_1_4_title.png);
}

#service_list>li>a.service_1_5 {
    background-image: url(./images/service_1_5_bg.jpg);
}

#service_list>li>a.service_1_5 h2 span {
    background-image: url(./images/service_1_5_title.png);
}

#service_list>li>a.service_1_6 {
    background-image: url(./images/service_1_6_bg.jpg);
}

#service_list>li>a.service_1_6 h2 span {
    background-image: url(./images/service_1_6_title.png);
}

#service_list>li>a.service_1_7 {
    background-image: url(./images/service_1_7_bg.jpg);
}

#service_list>li>a.service_1_7 h2 span {
    background-image: url(./images/service_1_7_title.png);
}

#service_list>li>a.service_2_1 {
    background-image: url(./images/service_2_1_bg.jpg);
}

#service_list>li>a.service_2_1 h2 span {
    background-image: url(./images/service_2_1_title.png);
}

#service_list>li>a.service_2_2 {
    background-image: url(./images/service_2_2_bg.jpg);
}

#service_list>li>a.service_2_2 h2 span {
    background-image: url(./images/service_2_2_title.png);
}

#service_list>li>a.service_2_3 {
    background-image: url(./images/service_2_3_bg.jpg);
}

#service_list>li>a.service_2_3 h2 span {
    background-image: url(./images/service_2_3_title.png);
}

#service_list>li>a.service_2_4 {
    background-image: url(./images/service_2_4_bg.jpg);
}

#service_list>li>a.service_2_4 h2 span {
    background-image: url(./images/service_2_4_title.png);
}

#service_list>li>a.service_2_5 {
    background-image: url(./images/service_2_5_bg.jpg);
}

#service_list>li>a.service_2_5 h2 span {
    background-image: url(./images/service_2_5_title.png);
}

#service_list>li>a.service_2_6 {
    background-image: url(./images/service_2_6_bg.jpg);
}

#service_list>li>a.service_2_6 h2 span {
    background-image: url(./images/service_2_6_title.png);
}

#service_list>li>a.service_2_7 {
    background-image: url(./images/service_2_7_bg.jpg);
}

#service_list>li>a.service_2_7 h2 span {
    background-image: url(./images/service_2_7_title.png);
}

#service_list>li>a.service_3_1 {
    background-image: url(./images/service_3_1_bg.jpg);
}

#service_list>li>a.service_3_1 h2 span {
    background-image: url(./images/service_3_1_title.png);
}

#service_list>li>a.service_3_2 {
    background-image: url(./images/service_3_2_bg.jpg);
}

#service_list>li>a.service_3_2 h2 span {
    background-image: url(./images/service_3_2_title.png);
}

#service_list>li>a.service_3_3 {
    background-image: url(./images/service_3_3_bg.jpg);
}

#service_list>li>a.service_3_3 h2 span {
    background-image: url(./images/service_3_3_title.png);
}

#service_list>li>a.service_4_1 {
    background-image: url(./images/service_4_1_bg.jpg);
}

#service_list>li>a.service_4_1 h2 span {
    background-image: url(./images/service_4_1_title.png);
}

#service_list>li>a.service_4_2 {
    background-image: url(./images/service_4_2_bg.jpg);
}

#service_list>li>a.service_4_2 h2 span {
    background-image: url(./images/service_4_2_title.png);
}

#service_list>li>a.service_4_3 {
    background-image: url(./images/service_4_3_bg.jpg);
}

#service_list>li>a.service_4_3 h2 span {
    background-image: url(./images/service_4_3_title.png);
}

#service_list>li>a.service_4_4 {
    background-image: url(./images/service_4_4_bg.jpg);
}

#service_list>li>a.service_4_4 h2 span {
    background-image: url(./images/service_4_4_title.png);
}

#service_list>li>a.service_4_5 {
    background-image: url(./images/service_4_5_bg.jpg);
}

#service_list>li>a.service_4_5 h2 span {
    background-image: url(./images/service_4_5_title.png);
}

#service_list>li>a.service_5_1 {
    background-image: url(./images/service_5_1_bg.jpg);
}

#service_list>li>a.service_5_1 h2 span {
    background-image: url(./images/service_5_1_title.png);
}

#service_list>li>a.service_5_2 {
    background-image: url(./images/service_5_2_bg.jpg);
}

#service_list>li>a.service_5_2 h2 span {
    background-image: url(./images/service_5_2_title.png);
}

#service_list>li>a.service_5_3 {
    background-image: url(./images/service_5_3_bg.jpg);
}

#service_list>li>a.service_5_3 h2 span {
    background-image: url(./images/service_5_3_title.png);
}

#service_list>li>a.service_6_1 {
    background-image: url(./images/service_6_1_bg.jpg);
}

#service_list>li>a.service_6_1 h2 span {
    background-image: url(./images/service_6_1_title.png);
}

#service_list>li>a.service_6_2 {
    background-image: url(./images/service_6_2_bg.jpg);
}

#service_list>li>a.service_6_2 h2 span {
    background-image: url(./images/service_6_2_title.png);
}

#service_list>li>a.service_6_3 {
    background-image: url(./images/service_6_3_bg.jpg);
}

#service_list>li>a.service_6_3 h2 span {
    background-image: url(./images/service_6_3_title.png);
}

#service_list>li>a.service_6_4 {
    background-image: url(./images/service_6_4_bg.jpg);
}

#service_list>li>a.service_6_4 h2 span {
    background-image: url(./images/service_6_4_title.png);
}

#service_list>li>a.service_6_5 {
    background-image: url(./images/service_6_5_bg.jpg);
}

#service_list>li>a.service_6_5 h2 span {
    background-image: url(./images/service_6_5_title.png);
}

#service_list>li>a.service_7_1 {
    background-image: url(./images/service_7_1_bg.jpg);
}

#service_list>li>a.service_7_1 h2 span {
    background-image: url(./images/service_7_1_title.png);
}

#service_list>li>a.service_7_2 {
    background-image: url(./images/service_7_2_bg.jpg);
}

#service_list>li>a.service_7_2 h2 span {
    background-image: url(./images/service_7_2_title.png);
}

#service_list>li>a.service_7_3 {
    background-image: url(./images/service_7_3_bg.jpg);
}

#service_list>li>a.service_7_3 h2 span {
    background-image: url(./images/service_7_3_title.png);
}

#service_list>li>a:hover h2,
#service_list>li>a.active h2 {
    opacity: 0;
}

#service_list>li>a:last-child {
    margin-bottom: 0;
}

#service_list>li .item_content {
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    color: #3e3e3e;
    padding: 11px 15px 8px 15px;
    display: none;
}

@media (min-width: 1140px) {
    #service_list>li {
        width: 152px;
        float: left;
        margin-right: 6px;
        margin-bottom: 0;
    }

    #service_list>li:last-child {
        margin-right: 0;
    }

    #service_list>li>a {
        height: 273px;
    }

    #service_list>li>a h2 span {
        letter-spacing: 0;
        margin-top: 0;
        background-size: 16px 198px;
        text-indent: -9999px;
    }

    #service_list>li>a.service_1_1 h2 span {
        background-image: url(./images/service_1_1_title_d.png);
    }

    #service_list>li>a.service_1_2 h2 span {
        background-image: url(./images/service_1_2_title_d.png);
    }

    #service_list>li>a.service_1_3 h2 span {
        background-image: url(./images/service_1_3_title_d.png);
    }

    #service_list>li>a.service_1_4 h2 span {
        background-image: url(./images/service_1_4_title_d.png);
    }

    #service_list>li>a.service_1_5 h2 span {
        background-image: url(./images/service_1_5_title_d.png);
    }

    #service_list>li>a.service_1_6 h2 span {
        background-image: url(./images/service_1_6_title_d.png);
    }

    #service_list>li>a.service_1_7 h2 span {
        background-image: url(./images/service_1_7_title_d.png);
    }

    #service_list>li>a.service_2_1 h2 span {
        background-image: url(./images/service_2_1_title_d.png);
    }

    #service_list>li>a.service_2_2 h2 span {
        background-image: url(./images/service_2_2_title_d.png);
    }

    #service_list>li>a.service_2_3 h2 span {
        background-image: url(./images/service_2_3_title_d.png);
    }

    #service_list>li>a.service_2_4 h2 span {
        background-image: url(./images/service_2_4_title_d.png);
    }

    #service_list>li>a.service_2_5 h2 span {
        background-image: url(./images/service_2_5_title_d.png);
    }

    #service_list>li>a.service_2_6 h2 span {
        background-image: url(./images/service_2_6_title_d.png);
    }

    #service_list>li>a.service_2_7 h2 span {
        background-image: url(./images/service_2_7_title_d.png);
    }

    #service_list>li>a.service_3_1 h2 span {
        background-image: url(./images/service_3_1_title_d.png);
    }

    #service_list>li>a.service_3_2 h2 span {
        background-image: url(./images/service_3_2_title_d.png);
    }

    #service_list>li>a.service_3_3 h2 span {
        background-image: url(./images/service_3_3_title_d.png);
    }

    #service_list>li>a.service_4_1 h2 span {
        background-image: url(./images/service_4_1_title_d.png);
    }

    #service_list>li>a.service_4_2 h2 span {
        background-image: url(./images/service_4_2_title_d.png);
    }

    #service_list>li>a.service_4_3 h2 span {
        background-image: url(./images/service_4_3_title_d.png);
    }

    #service_list>li>a.service_4_4 h2 span {
        background-image: url(./images/service_4_4_title_d.png);
    }

    #service_list>li>a.service_4_5 h2 span {
        background-image: url(./images/service_4_5_title_d.png);
    }

    #service_list>li>a.service_5_1 h2 span {
        background-image: url(./images/service_5_1_title_d.png);
    }

    #service_list>li>a.service_5_2 h2 span {
        background-image: url(./images/service_5_2_title_d.png);
    }

    #service_list>li>a.service_5_3 h2 span {
        background-image: url(./images/service_5_3_title_d.png);
    }

    #service_list>li>a.service_6_1 h2 span {
        background-image: url(./images/service_6_1_title_d.png);
    }

    #service_list>li>a.service_6_2 h2 span {
        background-image: url(./images/service_6_2_title_d.png);
    }

    #service_list>li>a.service_6_3 h2 span {
        background-image: url(./images/service_6_3_title_d.png);
    }

    #service_list>li>a.service_6_4 h2 span {
        background-image: url(./images/service_6_4_title_d.png);
    }

    #service_list>li>a.service_6_5 h2 span {
        background-image: url(./images/service_6_5_title_d.png);
    }

    #service_list>li>a.service_7_1 h2 span {
        background-image: url(./images/service_7_1_title_d.png);
    }

    #service_list>li>a.service_7_2 h2 span {
        background-image: url(./images/service_7_2_title_d.png);
    }

    #service_list>li>a.service_7_3 h2 span {
        background-image: url(./images/service_7_3_title_d.png);
    }

    #service_list>li .item_content {
        display: none !important;
    }

    #service_list.three_cols>li {
        width: 362px;
        margin-right: 7px;
    }

    #service_list.three_cols>li:last-child {
        margin-right: 0;
    }

    #service_list.five_cols>li {
        width: 214px;
        margin-right: 7px;
    }

    #service_list.five_cols>li:last-child {
        margin-right: 0;
    }
}

#service_gold_list {
    text-align: center;
}

#service_gold_list img {
    display: block;
    max-width: 100%;
    margin: 0 auto 25px auto;
}

@media (min-width: 1140px) {
    #service_gold_list {
        text-align: center;
    }

    #service_gold_list img {
        display: inline-block;
        margin: 0 6px 10px 6px;
    }
}

#service_content_d {
    display: none;
}

@media (min-width: 1140px) {
    #service_content_d {
        display: block;
        padding: 28px 0;
        font-size: 16px;
        font-weight: bold;
        line-height: 30px;
        color: #3e3e3e;
    }

    #service_content_d.w_padding {
        padding-bottom: 100px;
    }
}

#service_cart_panel .left {
    padding: 35px 15px 0 15px;
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    color: #3e3e3e;
}

#service_cart_panel form {
    padding: 40px 15px 40px 15px;
    width: 290px;
    margin: 0 auto;
}

#service_cart_panel form select {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Adobe 繁黑體 Std B", "儷黑 Pro";
    -webkit-appearance: button;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background: white url(./images/select_arrow.png) right 5px top 50% no-repeat;
    background-size: 9px 8px;
    border: 1px solid #cfcfcf;
    font-weight: bold;
    font-size: 16px;
    color: #3e3e3e;
    height: 35px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    padding: 5px 4px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
    margin-bottom: 20px;
}

#service_cart_panel form button {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Adobe 繁黑體 Std B", "儷黑 Pro";
    display: block;
    text-decoration: none;
    width: 100%;
    height: 41px;
    text-align: center;
    line-height: 37px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #e2ad46;
    border: 2px solid #e3ae47;
    background: white;
    cursor: pointer;
    margin-bottom: 18px;
    border-radius: 20px;
}

#service_cart_panel form button:hover {
    background: #e3ae47;
    color: white;
}

#service_cart_panel form .note {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #a00000;
    text-align: right;
}

@media (min-width: 1140px) {
    #service_cart_panel {
        padding-top: 15px;
        padding-bottom: 75px;
    }

    #service_cart_panel .left {
        float: left;
        width: 510px;
        padding: 0;
    }

    #service_cart_panel form {
        float: right;
        padding: 0;
        width: 335px;
        text-align: right;
    }

    #service_cart_panel form select {
        float: left;
    }

    #service_cart_panel form select.service_option {
        width: 248px;
        margin-right: 10px;
    }

    #service_cart_panel form select.item_qty {
        width: 74px;
    }

    #service_cart_panel form button {
        display: inline-block;
        width: 171px;
    }
}

#map a {
    display: block;
    height: 154px;
    background: url(./images/map_link_icon.png) 50% 50% no-repeat;
    background-size: 63px 75px;
    text-indent: -9999px;
    overflow: hidden;
}

#map img {
    display: none;
}

@media (min-width: 1140px) {
    #map {
        padding-bottom: 20px;
    }

    #map a {
        display: none;
    }

    #map img {
        width: 684px;
        margin: 0 auto;
        border: 0;
        display: block;
    }
}

.contact_form {
    padding-bottom: 20px;
    padding-top: 33px;
}

.contact_form .row {
    padding: 0 0 20px 0;
    font-weight: bold;
    color: #3e3e3e;
    letter-spacing: 1px;
}

.contact_form .row span {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #3e3e3e;
    letter-spacing: 1px;
    padding-bottom: 10px;
    line-height: normal;
}

.contact_form input[type="text"] {
    height: 33px;
    border: 1px solid #cdcdcd;
    line-height: 33px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 0;
    width: 100%;
    max-width: 400px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #3e3e3e;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Adobe 繁黑體 Std B", "儷黑 Pro";
}

.contact_form select {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Adobe 繁黑體 Std B", "儷黑 Pro";
    -webkit-appearance: button;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background: white url(./images/select_arrow.png) right 5px top 50% no-repeat;
    background-size: 9px 8px;
    border: 1px solid #cfcfcf;
    font-weight: bold;
    font-size: 16px;
    color: #3e3e3e;
    height: 35px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 400px;
    overflow: hidden;
    padding: 5px 4px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
}

.contact_form textarea {
    border: 1px solid #cdcdcd;
    line-height: 28px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 0;
    width: 100%;
    max-width: 638px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #3e3e3e;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Adobe 繁黑體 Std B", "儷黑 Pro";
    height: 110px;
}

.contact_form img#captcha {
    display: inline-block;
    vertical-align: middle;
    border: 0;
}

.contact_form .captcha_code {
    margin-top: 10px;
}

.contact_form a {
    display: inline-block;
    color: #e3ae47;
    font-size: 14px;
    vertical-align: middle;
    margin-left: 4px;
}

.contact_form button {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Adobe 繁黑體 Std B", "儷黑 Pro";
    display: block;
    text-decoration: none;
    width: 100%;
    height: 41px;
    text-align: center;
    line-height: 37px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #e2ad46;
    border: 2px solid #e3ae47;
    background: white;
    cursor: pointer;
    margin-bottom: 18px;
    border-radius: 20px;
}

.contact_form button.reset {
    color: #9c9c9c;
    border: 2px solid #9c9c9c;
}

.contact_form button:hover {
    background: #e3ae47;
    color: white;
}

.contact_form button:hover.reset {
    background: #9c9c9c;
}

@media (min-width: 460px) {
    .contact_form input[type="text"].captcha_code {
        width: 178px;
        margin-top: 0;
        margin-left: 5px;
    }

    .contact_form button {
        display: inline-block;
        width: 171px;
        margin-right: 40px;
    }
}

@media (min-width: 1140px) {
    .contact_form {
        padding-top: 0;
        padding-bottom: 40px;
    }
}

.search_group {
    position: relative;
    border: 2px solid #e2ad46;
    border-radius: 25px;
}

.search_group input {
    border: 0;
    display: block;
    height: 48px;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #3e3e3e;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Adobe 繁黑體 Std B", "儷黑 Pro";
    padding: 0 19px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 30px;
}

.search_group input:focus {
    outline: 0;
}

.search_group button {
    position: absolute;
    right: 0px;
    top: 0px;
    background: white url(./images/search_icon.png) 50% 50% no-repeat;
    background-size: 31px 27px;
    width: 71px;
    height: 48px;
    border: 0;
    padding: 0;
    text-indent: -999px;
    overflow: hidden;
    display: block;
    border-radius: 25px;
    cursor: pointer;
}

.search_group button#clear_keyword {
    background-image: url(./images/clear_icon.png);
    display: none;
}

.search_group.faq {
    margin-top: 40px;
    max-width: 500px;
}

.search_group.search {
    width: 100%;
}

.search_group.search input {
    height: 40px;
}

.search_group.search button {
    background-image: url(./images/search_icon_black.png);
    background-size: 16px 16px;
    height: 40px;
}

@media (min-width: 1140px) {
    .search_group.faq {
        margin-top: -13px;
    }
}

#faq_list {
    padding: 40px 0 0 0;
    overflow: hidden;
}

#faq_list>li {
    margin-bottom: 11px;
    list-style-type: none;
    display: none;
}

#faq_list>li a.q {
    font-size: 18px;
    font-weight: bold;
    color: #e7bd6d;
    line-height: 30px;
    text-decoration: none;
}

#faq_list>li .ans {
    padding-top: 6px;
    font-size: 16px;
    font-weight: bold;
    color: #3e3e3e;
    line-height: 30px;
    display: none;
}

#faq_list>li.matched {
    display: block;
}

@media (min-width: 1140px) {
    #faq_list {
        padding-top: 14px;
    }
}

h1.page_title {
    width: 173px;
    height: 28px;
    text-indent: -999px;
    overflow: hidden;
    background-size: 173px 28px;
    background-position: 0 0;
    background-repeat: no-repeat;
    margin: 40px auto 0 auto;
}

h1.page_title.temple_page {
    background-image: url(./images/temple_header_20210507.png);
}

@media (min-width: 1140px) {
    h1.page_title.temple_page {
        display: none;
    }
}

@media (min-width: 1140px) {
    #temple_panel {
        padding-top: 55px;
    }
}

#temple_map .mobile {
    display: block;
    background: url(./images/view_temple_map.png) 50% 50% no-repeat;
    background-size: 63px 80px;
    margin: 0px auto 20px auto;
    width: 100px;
    height: 120px;
    text-indent: -999px;
    overflow: hidden;
}

#temple_map .full_map {
    display: none;
}

@media (min-width: 1140px) {
    #temple_map {
        width: 650px;
        float: left;
    }

    #temple_map .mobile {
        display: none;
    }

    #temple_map .full_map {
        position: relative;
        display: block;
        background: white url(./images/area_full_map.png) 0 0 no-repeat;
        background-size: 621px 789px;
        height: 789px;
        padding-bottom: 70px;
    }

    #temple_map .full_map li {
        position: absolute;
    }

    #temple_map .full_map li a {
        text-indent: -999px;
        overflow: hidden;
        display: block;
    }

    #temple_map .full_map li a span {
        display: block;
        height: 100%;
        opacity: 0;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }

    #temple_map .full_map li a:hover span,
    #temple_map .full_map li a.active span {
        opacity: 1;
    }

    #temple_map .full_map li.area_link_1 a::after,
    #temple_map .full_map li.area_link_2 a::after,
    #temple_map .full_map li.area_link_3 a::after,
    #temple_map .full_map li.area_link_4 a::after,
    #temple_map .full_map li.area_link_5 a::after,
    #temple_map .full_map li.area_link_6 a::after,
    #temple_map .full_map li.area_link_7 a::after,
    #temple_map .full_map li.area_link_8 a::after,
    #temple_map .full_map li.area_link_9 a::after {
        content: '1';
        color: white;
        display: block;
        position: absolute;
        width: 17px;
        height: 24px;
        background: url(./images/area_red_dot.png) 0 0 no-repeat;
        background-size: 17px 24px;
        left: 50%;
        margin-left: -8px;
        top: -10px;
        text-indent: 0;
        text-align: center;
        font-size: 12px;
        line-height: 20px;
    }

    #temple_map .full_map li.area_link_1 {
        top: 269px;
        left: 259px;
    }

    #temple_map .full_map li.area_link_1 a {
        width: 130px;
        height: 75px;
    }

    #temple_map .full_map li.area_link_1 a span {
        background: url(./images/area_1_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_1 a::after {
        margin-left: -6px;
    }

    #temple_map .full_map li.area_link_2 {
        top: 269px;
        left: 212px;
    }

    #temple_map .full_map li.area_link_2 a {
        width: 49px;
        height: 75px;
    }

    #temple_map .full_map li.area_link_2 a span {
        background: url(./images/area_2_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_2 a::after {
        content: '2';
    }

    #temple_map .full_map li.area_link_3 {
        left: 76px;
        top: 302px;
    }

    #temple_map .full_map li.area_link_3 a {
        width: 50px;
        height: 76px;
    }

    #temple_map .full_map li.area_link_3 a span {
        background: url(./images/area_3_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_3 a::after {
        content: '3';
        margin-top: -3px;
    }

    #temple_map .full_map li.area_link_4 {
        left: 76px;
        top: 210px;
    }

    #temple_map .full_map li.area_link_4 a {
        width: 50px;
        height: 76px;
    }

    #temple_map .full_map li.area_link_4 a span {
        background: url(./images/area_4_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_4 a::after {
        content: '4';
        top: -19px;
    }

    #temple_map .full_map li.area_link_5 {
        left: 117px;
        top: 196px;
    }

    #temple_map .full_map li.area_link_5 a {
        width: 50px;
        height: 76px;
    }

    #temple_map .full_map li.area_link_5 a span {
        background: url(./images/area_5_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_5 a::after {
        content: '5';
        margin-top: -5px;
        margin-left: -9px;
    }

    #temple_map .full_map li.area_link_6 {
        left: 211px;
        top: 376px;
    }

    #temple_map .full_map li.area_link_6 a {
        width: 224px;
        height: 182px;
    }

    #temple_map .full_map li.area_link_6 a span {
        background: url(./images/area_6_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_6 a::after {
        content: '6';
        top: 14px;
        margin-left: -6px;
    }

    #temple_map .full_map li.area_link_7 {
        left: 386px;
        top: 269px;
    }

    #temple_map .full_map li.area_link_7 a {
        width: 49px;
        height: 75px;
    }

    #temple_map .full_map li.area_link_7 a span {
        background: url(./images/area_7_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_7 a::after {
        content: '7';
    }

    #temple_map .full_map li.area_link_8 {
        left: 522px;
        top: 210px;
    }

    #temple_map .full_map li.area_link_8 a {
        width: 50px;
        height: 76px;
    }

    #temple_map .full_map li.area_link_8 a span {
        background: url(./images/area_8_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_8 a::after {
        content: '8';
        margin-top: -5px;
        margin-left: -9px;
    }

    #temple_map .full_map li.area_link_9 {
        left: 481px;
        top: 196px;
    }

    #temple_map .full_map li.area_link_9 a {
        width: 49px;
        height: 75px;
    }

    #temple_map .full_map li.area_link_9 a span {
        background: url(./images/area_9_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_9 a::after {
        content: '9';
        margin-left: -6px;
    }

    #temple_map .full_map li.area_link_10 {
        left: 427px;
        top: 50px;
    }

    #temple_map .full_map li.area_link_10 a {
        width: 61px;
        height: 61px;
    }

    #temple_map .full_map li.area_link_10 a span {
        background: url(./images/area_10_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_11 {
        left: 117px;
        top: 297px;
    }

    #temple_map .full_map li.area_link_11 a {
        width: 49px;
        height: 46px;
    }

    #temple_map .full_map li.area_link_11 a span {
        background: url(./images/area_11_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_11_1 {
        left: 480px;
        top: 297px;
    }

    #temple_map .full_map li.area_link_11_1 a {
        width: 49px;
        height: 46px;
    }

    #temple_map .full_map li.area_link_11_1 a span {
        background: url(./images/area_11_1_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_12 {
        left: 117px;
        top: 0;
    }

    #temple_map .full_map li.area_link_12 a {
        width: 413px;
        height: 22px;
    }

    #temple_map .full_map li.area_link_12 a span {
        background: url(./images/area_12_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_13 {
        left: 0;
        top: 442px;
    }

    #temple_map .full_map li.area_link_13 a {
        width: 116px;
        height: 115px;
    }

    #temple_map .full_map li.area_link_13 a span {
        background: url(./images/area_13_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_14 {
        left: 457px;
        top: 377px;
    }

    #temple_map .full_map li.area_link_14 a {
        width: 72px;
        height: 181px;
    }

    #temple_map .full_map li.area_link_14 a span {
        background: url(./images/area_14_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_15 {
        left: 0;
        top: 596px;
    }

    #temple_map .full_map li.area_link_15 a {
        width: 132px;
        height: 133px;
    }

    #temple_map .full_map li.area_link_15 a span {
        background: url(./images/area_15_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_16 {
        left: 433px;
        top: 571px;
    }

    #temple_map .full_map li.area_link_16 a {
        width: 96px;
        height: 217px;
    }

    #temple_map .full_map li.area_link_16 a span {
        background: url(./images/area_16_active.png) 0 0 no-repeat;
        background-size: contain;
    }

    #temple_map .full_map li.area_link_17 {
        left: 552px;
        top: 0;
    }

    #temple_map .full_map li.area_link_17 a {
        width: 69px;
        height: 378px;
    }

    #temple_map .full_map li.area_link_17 a span {
        background: url(./images/area_17_active.png) 0 0 no-repeat;
        background-size: contain;
    }
}

@media (min-width: 1205px) {
    #temple_map {
        margin-left: -100px;
    }
}

#temple_areas {
    padding-bottom: 40px;
}

#temple_areas>li {
    margin-bottom: 5px;
}

#temple_areas>li>a {
    display: block;
    height: 150px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

#temple_areas>li>a h2 {
    position: relative;
    height: 100%;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#temple_areas>li>a h2::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(./images/service_item_mask.png) 0 0 repeat;
    z-index: 0;
}

#temple_areas>li>a h2 span {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 196px 20px;
}

#temple_areas>li>a.area_1 h2 span {
    background-image: url(./images/area_1_title_20210507.png);
}

#temple_areas>li>a.area_2 h2 span {
    background-image: url(./images/area_2_title_20210507.png);
}

#temple_areas>li>a.area_3 h2 span {
    background-image: url(./images/area_3_title_20210507.png);
}

#temple_areas>li>a.area_4 h2 span {
    background-image: url(./images/area_4_title_20210507.png);
}

#temple_areas>li>a.area_5 h2 span {
    background-image: url(./images/area_5_title_20210507.png);
}

#temple_areas>li>a.area_6 h2 span {
    background-image: url(./images/area_6_title_20210507.png);
}

#temple_areas>li>a.area_7 h2 span {
    background-image: url(./images/area_7_title_20210507.png);
}

#temple_areas>li>a.area_8 h2 span {
    background-image: url(./images/area_8_title_20210507.png);
}

#temple_areas>li>a.area_9 h2 span {
    background-image: url(./images/area_9_title_20210507.png);
}

#temple_areas>li>a.area_10 h2 span {
    background-image: url(./images/area_10_title_20210507.png);
}

#temple_areas>li>a.area_11 h2 span {
    background-image: url(./images/area_11_title_20210507.png);
}

#temple_areas>li>a.area_12 h2 span {
    background-image: url(./images/area_12_title_20210507.png);
}

#temple_areas>li>a.area_13 h2 span {
    background-image: url(./images/area_13_title_20210507.png);
}

#temple_areas>li>a.area_14 h2 span {
    background-image: url(./images/area_14_title_20210507.png);
}

#temple_areas>li>a.area_15 h2 span {
    background-image: url(./images/area_15_title_20210507.png);
}

#temple_areas>li>a.area_16 h2 span {
    background-image: url(./images/area_16_title_20210507.png);
}

#temple_areas>li>a.area_17 h2 span {
    background-image: url(./images/area_17_title_20210507.png);
}

#temple_areas>li>a.active h2 {
    opacity: 0;
}

#temple_areas>li>a:last-child {
    margin-bottom: 0;
}

#temple_areas .item_content {
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    color: #3e3e3e;
    padding: 11px 15px 8px 15px;
    display: none;
}

#temple_areas .item_content hr {
    height: 1px;
    border: none;
    background-color: #e2ad46;
    margin: 12px 0 10px 0;
}

#temple_areas .item_content img {
    display: inline-block;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: auto !important;
}

@media (min-width: 1140px) {
    #temple_areas {
        float: right;
        width: 450px;
    }

    #temple_areas>li>a {
        display: block;
        height: 28px;
        background: transparent !important;
        cursor: default;
    }

    #temple_areas>li>a h2::before {
        display: none;
    }

    #temple_areas>li>a h2 span {
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: contain;
    }

    #temple_areas>li>a.area_1 h2 span {
        background-image: url(./images/area_1_title_d_20210507.png);
    }

    #temple_areas>li>a.area_2 h2 span {
        background-image: url(./images/area_2_title_d_20210507.png);
    }

    #temple_areas>li>a.area_3 h2 span {
        background-image: url(./images/area_3_title_d_20210507.png);
    }

    #temple_areas>li>a.area_4 h2 span {
        background-image: url(./images/area_4_title_d_20210507.png);
    }

    #temple_areas>li>a.area_5 h2 span {
        background-image: url(./images/area_5_title_d_20210507.png);
    }

    #temple_areas>li>a.area_6 h2 span {
        background-image: url(./images/area_6_title_d_20210507.png);
    }

    #temple_areas>li>a.area_7 h2 span {
        background-image: url(./images/area_7_title_d_20210507.png);
    }

    #temple_areas>li>a.area_8 h2 span {
        background-image: url(./images/area_8_title_d_20210507.png);
    }

    #temple_areas>li>a.area_9 h2 span {
        background-image: url(./images/area_9_title_d_20210507.png);
    }

    #temple_areas>li>a.area_10 h2 span {
        background-image: url(./images/area_10_title_d_20210507.png);
    }

    #temple_areas>li>a.area_11 h2 span {
        background-image: url(./images/area_11_title_d_20210507.png);
    }

    #temple_areas>li>a.area_12 h2 span {
        background-image: url(./images/area_12_title_d_20210507.png);
    }

    #temple_areas>li>a.area_13 h2 span {
        background-image: url(./images/area_13_title_d_20210507.png);
    }

    #temple_areas>li>a.area_14 h2 span {
        background-image: url(./images/area_14_title_d_20210507.png);
    }

    #temple_areas>li>a.area_15 h2 span {
        background-image: url(./images/area_15_title_d_20210507.png);
    }

    #temple_areas>li>a.area_16 h2 span {
        background-image: url(./images/area_16_title_d_20210507.png);
    }

    #temple_areas>li>a.area_17 h2 span {
        background-image: url(./images/area_17_title_d_20210507.png);
    }

    #temple_areas>li>a.active h2 {
        opacity: 1;
    }

    #temple_areas .item_content {
        line-height: 28px;
        padding: 13px 0;
        display: block !important;
    }
}

@media (min-width: 1205px) {
    #temple_areas {
        width: 532px;
    }
}

.search_intro {
    padding-top: 40px;
    padding-bottom: 23px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e3ae47;
}

.search_intro .hot_keywords {
    padding-top: 8px;
    line-height: 30px;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: bold;
    color: #3e3e3e;
}

.search_intro .hot_keywords ul li {
    display: inline-block;
}

.search_intro .hot_keywords ul li a {
    color: #3e3e3e;
}

.search_intro .hot_keywords ul li::after {
    content: ",";
}

@media (min-width: 1140px) {
    .search_intro {
        padding-top: 34px;
        border-bottom: 0;
        padding-bottom: 55px;
        margin-bottom: 0;
    }

    .search_intro .hot_keywords ul li {
        display: block;
    }
}

.result_num {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #3e3e3e;
}

.result_num span {
    color: #e2ad46;
}

.search_result {
    padding-top: 35px;
}

.search_result li {
    margin-bottom: 40px;
}

.search_result li a {
    border-left: 5px solid #3e3e3e;
    display: block;
    text-decoration: none;
    padding: 6px 0 0 11px;
    color: #231815;
    letter-spacing: 1px;
}

.search_result li a .post_date {
    color: #231815;
}

.search_result li a h3 {
    /*padding-top: 14px;*/
    padding-bottom: 10px;
    line-height: 28px;
    color: #3e3e3e;
    font-size: 20px;
    font-weight: bold;
}

.search_result li a p {
    color: #3e3e3e;
    font-size: 16px;
    line-height: 30px;
    font-weight: bold;
}

.search_result li a:hover {
    border-left: 5px solid #e3ae47;
}

.search_result li a:hover h3 {
    color: #e3ae47;
}

@media (min-width: 1140px) {
    .search_result {
        padding-top: 45px;
    }
}

.r_empty {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(./images/r_empty.png) 0 0 no-repeat;
    background-size: 13px 13px;
}

.r_ok {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(./images/r_ok.png) 0 0 no-repeat;
    background-size: 13px 13px;
}

#search_date {
    padding-top: 20px;
    padding-bottom: 30px;
    text-align: center;
}

#search_date .search_fields {
    display: inline-block;
}

#search_date .search_fields>input,
#search_date .search_fields>select {
    float: left;
    margin-right: 9px;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Adobe 繁黑體 Std B", "儷黑 Pro";
    -webkit-appearance: button;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    background: white url(./images/select_arrow.png) right 5px top 50% no-repeat;
    background-size: 9px 8px;
    border: 1px solid #cfcfcf;
    font-weight: bold;
    font-size: 14px;
    color: #3e3e3e;
    height: 27px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    padding: 5px 4px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 108px;
    display: block;
}

#search_date .search_fields>button {
    float: left;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Adobe 繁黑體 Std B", "儷黑 Pro";
    height: 27px;
    width: 55px;
    background: #e3ae47;
    border: 1px solid #e3ae47;
    color: white;
    font-size: 16px;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    margin-left: 9px;
}

#search_date .search_fields>button .loading_btn {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: url(./images/loading_btn.gif) 0 0 no-repeat;
    background-size: 8px 8px;
}

#search_date .icon_desc {
    display: block;
    text-align: center;
    padding-top: 20px;
    color: white;
    font-size: 16px;
    letter-spacing: 1px;
}

#search_date .icon_desc .r_ok {
    margin-left: 20px;
}

#search_date .icon_desc .r_ok,
#search_date .icon_desc .r_empty {
    margin-right: 3px;
}

@media (min-width: 1140px) {
    #search_date {
        text-align: left;
    }

    #search_date .search_fields {
        float: left;
    }

    #search_date .icon_desc {
        float: right;
        text-align: right;
        padding-top: 0;
    }
}

.scroll_table_panel {
    position: relative;
    margin-bottom: 60px;
}

.scroll_table_panel .scroll_table {
    position: absolute;
    width: 30px;
    height: 67px;
    line-height: 67px;
    color: #e2ad46;
    text-decoration: none;
    z-index: 100;
}

.scroll_table_panel .scroll_table.left {
    left: 60px;
    top: 0;
    text-align: right;
}

.scroll_table_panel .scroll_table.right {
    right: -15px;
    top: 0;
    background: #222222;
    padding-left: 5px;
}

@media (min-width: 1140px) {
    .scroll_table_panel .scroll_table.right {
        right: 20px;
    }
}

.room_list_wrap {
    overflow-x: scroll;
}

.room_list_wrap .fixed-column { 
	position: absolute; 
	display: inline-block; 
	width: 93px; 
	background: #222222; 
	overflow: hidden; 
	z-index: 99; 
	top: 13px;
}
.fixed-column.room_list .room .room_name {
	margin-bottom: 23px;
}



@media (min-width: 1140px) {
    .room_list_wrap {
        width: 770px;
    }
}

.content ul.room_list {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.content ul.room_list>li {
    width: 100%;
    font-size: 16px;
    white-space: nowrap;
}

.content ul.room_list li {
    list-style-type: none;
}

.content ul.room_list li.room {
    padding-bottom: 35px;
}

.content ul.room_list li .room_name {
    width: 93px;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    color: #e2ad46;
    vertical-align: middle;
}

.content ul.room_list li .room_name span {
    display: block;
    color: white;
}

.content ul.room_list li .d {
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    width: 50px;
    margin-right: 3px;
    line-height: 24px;
    color: #e2ad46;
}

.content ul.room_list li .d:last-of-type {
    padding-right: 20px;
}

@media (min-width: 1140px) {
    .content ul.room_list li .room_name {
        margin-right: 45px;
    }

    .content ul.room_list li .d {
        margin-right: 60px;
    }

    .content ul.room_list li .d:last-of-type {
        margin-right: 0;
        padding-right: 20px;
    }
}

.two_cols>div {
    padding-bottom: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.two_cols>div img {
    display: block;
    width: 100%;
}

@media (min-width: 1140px) {
    .two_cols>div {
        width: 50%;
        float: left;
        padding-bottom: 0;
    }

    .two_cols>div img {
        display: inline-block;
        width: auto;
        max-width: 100%;
    }
}

.three_cols>div {
    padding-bottom: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.three_cols>div img {
    display: block;
    width: 100%;
}

@media (min-width: 1140px) {
    .three_cols>div {
        width: 33.3%;
        float: left;
        padding-bottom: 0;
    }

    .three_cols>div img {
        display: inline-block;
        width: auto;
        max-width: 100%;
    }
}

.ui-monthpicker.ui-datepicker td span,
.ui-monthpicker.ui-datepicker td a {
    text-align: center;
    padding: 8px 0;
}

.ui-monthpicker.ui-datepicker td {
    width: 33.3%;
}

/* 驗證頁面 verification */
.gachaBg {
    background-image: url('./images/gacha/bg.svg');
    max-height: 100%;
    height: 100%;
    width: 100%;
    background-repeat: repeat;

    /* padding-block element not support ios */
    /* padding-block: 45.6%; */
    padding: 45.6% 0;
}

@media (min-width: 900px) {
    .gachaBg {
        /* padding-block element not support for ios */
        /* padding-block: 185px; */
        padding: 185px 0;
    }
}

.gacha-text--color {
    color: var(--gacha-text-cls)
}

.font-gacha--title {
    display: inline-block;
    letter-spacing: 0.1rem;
    font-weight: 600;
    line-height: 1.5;
    font-size: max(32px, 62px);
    line-height: 1.5;

    font-family: inherit;
}

@media screen and (max-width: 468px) {
    .font-gacha--title {
        font-size: 32px;
        margin-right: auto;
    }
}

.gacha-container {
    position: relative;
    inset: auto;
    width: 1100px;
    height: 100%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1099.98px) {
    .gacha-container {
        padding-inline: 15px;
        width: 75%;
    }
}

.gacha-container .font-label {
    font-size: 20px;
    color: var(--gacha-text-cls);
    line-height: 1.5;

    font-family: inherit;
}

.gacha-container .form-group-row {
    margin-top: 0.75rem;
}

.gacha-container .mb-3 {
    margin-bottom: 1.5rem
}

.gacha-container .mb-5 {
    margin-bottom: 3rem
}

.gacha-custom-form-control {
    width: 206px;
    height: 45px;
    border: none;
    border-radius: 5px;
    padding-left: 12px;
    outline: none;

    font-size: 16px;
    line-height: 1.5;
}

.gacha-custom-captcha--form-control {
    width: 100%;
    height: 51px;
    border: none;
    border-radius: 5px;
    padding-left: 12px;
    margin-bottom: 1rem;
    outline: none;

    font-size: 16px;
    line-height: 1.5;
}

.gacha-custom-form-control::placeholder {
    font-size: 16px;
    letter-spacing: 0.1rem;

    position: relative;
    top: 2px;
    text-align: left;
}

.btn-captcha {
    padding: 9px 12px;
    border-radius: 5px;
    border: none;
    background-color: #f5cb69;
    color: #851b20;
    font-size: 16px;
    position: relative;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.1rem;
    top: 3px;
    cursor: pointer;

    height: 46px;
}

.go-gacha {
    display: flex;
    flex-direction: column;
}

.go-gacha button {
    display: block;
    width: 120px;
    margin: 0 auto;
    height: 55px;
    font-size: 20px;
}

/* 驗證頁面 verification */

/* 扭蛋頁面 info.html */
.gacha-infor-container {
    position: relative;
    inset: auto;
    width: 1100px;
    height: 100%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1099.98px) {
    .gacha-infor-container {
        width: 100%;
    }
}

.first-gacha-infor {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;

    position: relative;
    overflow: hidden;
}

.first-gacha-infor picture:first-child {
    margin-bottom: 1rem;
}

.first-gacha-infor picture:first-child img {
    width: 340px;
}

.GachaTigerRoll {
    position: relative;
    overflow: hidden;
}

.infor-pointer {
    position: absolute;
    display: inline-block;
    bottom: 14%;
    left: 52%;
    transform: translate(-50%, -50%);
    z-index: 2;
    cursor: pointer;
}

.CatCoin {
    display: inline-block;
    width: 108px;
    height: 94px;
    position: absolute;
    background-image: url(./images/gacha/coin1.png);
    background-repeat: no-repeat;
    bottom: 4%;
    left: 58%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all 300ms linear;
    z-index: 1;
}

.CatCoin:hover {
    transform: translate(-50%, -50%) rotate(15deg);
}

.CatCoinAnimation {
    animation: CoinMoving 300ms ease backwards;
}

@keyframes CoinMoving {
    0% {
        background-image: url(./images/gacha/coin1.png);
    }

    50% {
        background-image: url(./images/gacha/coin2.png);
    }

    100% {
        background-image: url(./images/gacha/coin3.png);
    }
}

.GachaLightItUpAnimation {
    background-repeat: no-repeat;
}

.gacha-tiger.active svg {
    stroke: var(--prize-gacha-cls);
    transition: all 0.5s ease;
}

.second-gacha-infor {
    height: 100%;
    /* padding-block element not support for ios */
    /* padding-block: 80px; */
    padding: 80px 0;
    width: 100%;
    background-color: #851b20;
    position: relative;
    top: -100px;
    z-index: 1;
}

.second-gacha-infor .second-gacha-infor--title {
    width: 400px;
    margin: 0 auto;
}

@media only screen and (max-width: 468px) {
    .second-gacha-infor .second-gacha-infor--title {
        width: calc((100% + 250px) / 2);
    }
}

.second-gacha-infor-content {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    margin-top: 45px;
}

.second-gacha-grid-3 ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-content: center;
    width: 500px;
    text-align: center;
    transition: all 500ms ease;
}

.second-gacha-grid-3 ul li {
    margin-bottom: 1.5rem;
    transition: all 500ms ease;
}

.second-gacha-grid-3 ul li svg {
    width: 100px;
    height: 100px;
}

.gacha-result {
    text-align: center;
    color: var(--gacha-stroke-yellow);
    font-size: 20px;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
}

.btn-link {
    color: var(--prize-gacha-cls);
    line-height: 1.5;
}

/* 扭蛋頁面 info.html */

/* 獎品頁 prize.html */

@supports (-webkit-touch-callout: none) {
    .gachaBg-2 {
        background-image: url("./images/gacha/SVG/Asset 61.svg");
        max-height: 100%;
        height: 100%;
        width: 100%;
        background-repeat: repeat;

        /* padding-block not support for ios */
        /* padding-block: 60.6%; */
        padding: 40.6% 0;
    }
}

@supports not (-webkit-touch-callout: none) {

    .gachaBg-2 {
        background-image: url("./images/gacha/bg2.svg");
        max-height: 100%;
        height: 100%;
        width: 100%;
        background-repeat: repeat;

        /* padding-block not support for ios */
        /* padding-block: 60.6%; */
        padding: 50.6% 0;
    }
}



@media (min-width: 900px) {
    .gachaBg-2 {
        /* padding-block not support for ios */
        /* padding-block: 185px; */
        padding: 185px 0;
    }
}

.gacha-prize-container {
    position: relative;
    inset: auto;
    width: 1100px;
    height: 100%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1099.98px) {
    .gacha-prize-container {
        width: 100%;
    }
}

.first-gacha-prize {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;

    position: relative;
    overflow: hidden;

    margin-bottom: 1.5rem;
}

.second-gacha-prize {
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    z-index: 1;
}

.second-gacha-prize .second-gacha-prize--title {
    width: 400px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 468px) {
    .second-gacha-prize .second-gacha-prize--title {
        width: calc((100% + 250px) / 2);
    }
}

.second-gacha-prize .second-gacha-prize--title button {
    margin-bottom: 2rem;

    height: 70px;
    position: relative;

    font-size: 22px;

    border-radius: 20px;

    border: 2px solid #ebbe76;

    background-color: var(--btn-gacha-cls);
    color: var(--prize-gacha-cls);
    font-weight: 700;
    text-align: center;

    box-shadow: 0px 0px 1px 6px var(--btn-gacha-cls);

    cursor: pointer;
    pointer-events: all;
}

.second-gacha-prize .second-gacha-prize--title button:focus {
    background-color: #5a1214;
}

.prize-title {
    position: relative;
    overflow: hidden;
    width: 330px;
}

.prize-title .prize-title--inset {
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translate(-50%, -20%);
    color: var(--prize-gacha-cls);
    font-weight: 700;
    font-size: 25px;
    letter-spacing: 0.175rem;
}

.gacha-prize-container .first-gacha-prize picture.prize--BlackTiger-image img {
    width: 400px;
    height: 400px;

    border-radius: 50%;
}

@media only screen and (max-width: 992px) {
    .gacha-prize-container .first-gacha-prize picture.prize--BlackTiger-image {
        padding: 2rem
    }

    .gacha-prize-container .first-gacha-prize picture.prize--BlackTiger-image img {
        width: 100% !important;
        height: auto !important;
    }
}

.prize-title.mb-3 {
    margin-bottom: 1.5rem;
}

/* 獎品頁 prize.html */

/* 二選一確認頁面 confirm.html */
.verify-grid-3 {
    display: flex;
    -ms-display: flex;
    -webkit-display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.verify-border {
    border: 1px solid #161616;
    padding: 1rem;
    margin-bottom: 1rem;

    border-radius: 8px;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.8);
}

.verify-number--count {
    margin-bottom: 1.5rem;
    font-weight: 800;
    font-size: 20px
}

.verify-title {
    position: relative;
    overflow: hidden;

    font-size: max(20px, 32px);
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.1rem;
    margin-bottom: 1rem;
    margin-right: auto;

    width: 100%;
}

.verify-title .wrap-box {
    position: relative;
    overflow: hidden;
}

.verify-title :is(svg) {
    width: 100%;
}

.verify-title .wrap-box .verify-title--inset {
    position: absolute;
    display: inline-block;
    top: 30%;
    color: var(--prize-gacha-cls);
    width: 100%;

    left: 50%;
    transform: translate(-16%, 0%);
    font-size: max(16px, 20px);
}

@media screen and (min-width: 478px) {
    .verify-title .wrap-box .verify-title--inset {
        top: 17%;
        left: 50%;
    }
}

.verify-grid-3 picture {
    margin: auto 1rem;
}

.verify-border {
    width: 25rem;
}

.text-center {
    text-align: center;
}

.gacha-verify-container {
    box-sizing: border-box;
}

.gacha-verify-container .first-gacha-verify {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 100%;
}

.gacha-verify-container .first-gacha-verify .verify-title .text-center {
    font-size: max(16px, 25px);
    width: 100%;

    position: relative;
    left: 10px;
}

.verify-wrap-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.verify-confirm-title {
    margin-bottom: 0rem !important;
}

.regular-checkbox {
	margin: 0;
	max-width: 100%;
	height: auto;	
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: #1b1b1b;
	vertical-align: middle;
	-webkit-appearance: none;
	   -moz-appearance: none;
	   		appearance: none;
	border: 2px solid #2f2f2f;
    border-radius: 3px;

    cursor: pointer;
}

.regular-checkbox {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1em;
}

input[type="radio"].regular-checkbox {
	width: 1.25em; height: 1.25em;
}	
input[type="radio"].regular-checkbox:checked {
	/* background-image: url("data:image/svg+xml,%3Csvg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11.4 21.5-5.93-5.93-2.01 2.01 7.94 7.94 17.1-17.1-2.01-2.01z' fill='#161616'/%3E%3C/svg%3E"); */
	background-image: url("./images/gacha/check.svg");
	background-size: 80% 80%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	border-color: #161616;
}

.second-gacha-verify {
    height: 100%;
    padding-bottom: 20px;
    width: 100%;
    position: relative;
    top: 50px;
    z-index: 1;
}

.second-gacha-verify .second-gacha-verify--title {
    width: 400px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 468px) {
    .second-gacha-verify .second-gacha-verify--title {
        width: calc((100% + 250px) / 2);
    }
}

.second-gacha-verify .second-gacha-verify--title button {
    margin-bottom: 2rem;

    height: 62px;
    position: relative;

    font-size: 22px;

    border-radius: 20px;

    border: 2px solid #ebbe76;

    background-color: var(--btn-gacha-cls);
    color: var(--prize-gacha-cls);
    font-weight: 700;
    text-align: center;

    box-shadow: 0px 0px 1px 6px var(--btn-gacha-cls), 5px 5px 0 7px rgba(0, 0, 0, 0.8);

    cursor: pointer;

    transition: all 300ms ease;
}

.second-gacha-verify .second-gacha-verify--title button span {
    position: relative;
    transition: all 300ms ease;
}

.second-gacha-verify .second-gacha-verify--title button:active {
    border: none;
    box-shadow: 5px 5px 0 7px var(--btn-gacha-cls), 5px 5px 0 7px var(--btn-gacha-cls);
}

.second-gacha-verify .second-gacha-verify--title button:active span {
    top: 5px;
    left: 5px
}

.verify-grid-3 picture img {
    width: 80px;
    height: 80px;
}

.lucky-coming {
    margin: 21px auto;
    display: inline-block;
    border-left: 3px solid #5b2e23;
    border-right: 3px solid #5b2e23;
    padding: 3px 21px;
    font-size: 18px;
    font-weight: 700;
    color: #5b2e23;
}

.lucky-coming-second {
    margin: 0 auto;
    display: inline-block;
    padding: 3px 21px;
    font-size: 18px;
    font-weight: 700;
    color: #5b2e23;
}
@media only screen and (max-width: 450px) {
    .verify-grid-3 picture img {
        width: 60px;
        height: 60px;
    }
}

@media screen and (max-width: 768px) {
    .verify-title .wrap-box .verify-title--inset {
        left: calc(50% + 3%);
    }
}

@media screen and (max-width: 458px) {
    .verify-border {
        width: 75%;
    }

    @supports (-webkit-touch-callout: none) {
        .verify-border {
            width: 100%;
        }

        .gacha-verify-container .first-gacha-verify .verify-title.verify-title--outside {
            width: 100%;
            padding-left: 2rem;
        }

        .verify-title .wrap-box .verify-title--inset {
            top: calc(30% - 25%);
            left: calc(50% - 5%);
        }

    }

    @supports not (-webkit-touch-callout: none) {
        
        .verify-title .wrap-box .verify-title--inset {
            top: calc(30% - 16%);
            left: calc(50% - 8%);
        }
    }

    .gacha-verify-container .first-gacha-verify .verify-title.verify-title--outside {
        width: 75%;
        padding-left: 2rem;
    }

}

/* 二選一確認頁面 confirm.html */