@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600&display=swap');

/*-------------------- 全頁共用 --------------------*/
:root {
    --basic-txt: #c28b53;
    --main-color: #9a5514;
    --bg-color: #010101;
    --content-p: 3rem;
    --transition-com: all 0.25s ease;
}

@media screen and (min-width: 992px) {
    :root {
        --content-p: 5rem;
    }
}

/*-- 標題字級 --*/

h1 {
    font-family: 'Noto Serif TC', "微軟正黑體", "微软雅黑", sans-serif;
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
    white-space: nowrap;
    line-height: 1.3;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/bg-crayon.jpg);
    background-position: center top;
    background-size:1000px;
    z-index: 100;
}

@media screen and (min-width: 768px) {
    h1 {
        text-align: left;
    }
}

h1>.h2 {
    font-family: 'Noto Serif TC', "微軟正黑體", "微软雅黑", sans-serif;
}

.material-icons {
    vertical-align: text-top;
}

/*-- 按鈕 --*/

.btn {
    font-size: inherit;
}

.btn-lg {
    padding: 0.8rem 2rem;
    color: #fff !important;
    white-space: nowrap;
}

@media screen and (max-width:991px) {
    .btn-lg {
        /* padding: 0.8rem 2.2rem; */
        font-size: 1.125rem;
    }
}

/*-- 按鈕區域 --*/

.btn-sec {
    padding: 2rem 0;
    margin-bottom: 0;
    text-align: center;
}

/*-------------------- 全頁共用 END --------------------*/

/*-------------------- 主視覺 --------------------*/

#main_top>h1 {
    display: block;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 1px;
    padding: 0;
    margin: 0;
}

#main_top {
    width: 100%;
    height: 0;
    /* padding-bottom: 550px; */
    padding-bottom: 40%;
    overflow: hidden;
    position: relative;
    background: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/header_1920x768.jpg) no-repeat center;
    background-size: cover;
}

/* @media screen and (max-width: 991px) {
    #main_top {
        padding-bottom: 300px;
    }
} */

@media screen and (max-width: 767px) {
    #main_top {
        padding-bottom: 52.1%;
        background: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/header_768x400.jpg) no-repeat center;
        background-size: cover;
    }
}

/*-------------------- 主視覺 END --------------------*/

/*-------------------- 前言 #single_intro --------------------*/

#wrapper {
    padding-top: var(--content-p);
    width: 100%;
}

#single_intro {
    padding: calc(7vw + 15px) 0;
    background: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/pic-intro.png) no-repeat right center/contain, url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/icon-wave01.png) no-repeat 78% top/23.9%;
}

#single_intro::before {
    content: '';
    position: absolute;
    width: 22.66%;
    height: 0;
    padding-bottom: calc(1.069 * 0.2266 * 100%);
    background: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/icon-wave02.png) no-repeat center top/contain
}

#single_intro>p {
    padding: 0 6.5vw;
}

@media screen and (max-width: 767px) {
    #single_intro {
        padding: 0 0 calc(7vw + 15px);
        text-align: center;
        background: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/icon-wave01.png) no-repeat 120% bottom/70%;
    }
}

/*-------------------- 前言 #single_intro END --------------------*/

/*-------------------- 演唱會獨家套票 #limited_set --------------------*/

#limited_set::before {
    content: '';
    position: absolute;
    width: 95.99%;
    height: 0;
    padding-bottom: calc(0.9599 * (493 / 1843) * 100%);
    bottom: 0;
    right: 0;
    transform: translateY(60%);
    background: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/bg-wave-rainbow.png) no-repeat right top/contain;
}

@media screen and (max-width: 768px) {
    #limited_set::before {
        padding-bottom: calc(0.9599 * (493 / 1843) * 200%);
        background: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/bg-wave-rainbow.png) no-repeat right top/cover;
    }
}

#limited_set .txt-sec {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    padding: 5vw 3.5vw;
    padding-right: 1rem;
}

@media screen and (min-width: 768px) {
    #limited_set .txt-sec {
        text-align: left;
    }

    #limited_set .col-md:nth-of-type(1) {
        flex: 0 0 auto;
        width: 44%;
    }

    #limited_set .col-md:nth-of-type(2) {
        flex: 0 0 auto;
        width: 56%;
    }
}

#limited_set #carouselFade, #limited_set .carousel-inner, #limited_set .carousel-inner .carousel-item {
    width: 100%;
    height: 100%;
}

#limited_set .carousel-inner .carousel-item:nth-of-type(1) {
    background-image: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/pic-train01.jpg);
}

#limited_set .carousel-inner .carousel-item:nth-of-type(2) {
    background-image: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/pic-train02.jpg);
}

#limited_set .carousel-inner .carousel-item:nth-of-type(3) {
    background-image: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/pic-train03.jpg);
}

#limited_set .carousel-inner .carousel-item {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
    #limited_set {
        padding-left: 0;
        padding-right: 0;
    }

    #limited_set .col-md:nth-of-type(1) {
        padding-left: 0;
        padding-right: 0;
    }

    #limited_set .carousel-inner .carousel-item {
        width: 100%;
        height: 0;
        padding-bottom: calc(547 / 843 * 100%);
    }
}

/*-------------------- 演唱會獨家套票 #limited_set END --------------------*/

/*-------------------- 演出資訊 #concert_info --------------------*/

@keyframes light {
    0% {
        opacity: 0.2;
    }

    38% {
        opacity: 0.6;
    }
    45% {
        opacity: 0.6;
    }

    100% {
        opacity: 0.2;
    }
}

#concert_info {
    padding-top: calc(var(--content-p) * 0.6);
    padding-bottom: 4.5vw;
}

#concert_info::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    padding-bottom: 36.71875%;
    background: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/bg-concert.png) no-repeat center/cover;
    bottom: 0;
    left: 0;
    transform: translateY(50%);
    animation-name: light;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@media screen and (max-width: 991px) {
    #concert_info::before {
        padding-bottom: 45%;
        transform: translateY(45%);
    }
}

@media screen and (max-width: 767px) {
    #concert_info::before {
        padding-bottom: 70%;
        transform: translateY(40%);
    }
}

/*-------------------- 演出資訊 #concert_info END --------------------*/

/*-------------------- 訂購流程 #step --------------------*/

#step {
    padding-top: 9.2vw;
    max-width: 1430px;
}

.step-sec {
    margin-top: 2.5rem;
    justify-content: center;
}

.step-sec>div {
    position: relative;
    margin-bottom: 3rem;
}

@media screen and (min-width:992px) {
    .step-sec>div[class^='col'] {
        padding: 0 2rem;
    }
}

.step-sec>div::before {
    content: '\e5e1';
    position: absolute;
    font-family: 'Material Icons';
    color: var(--main-color);
    font-size: 200%;
    top: 45%;
    right: 0;
    transform: translateX(50%);
    z-index: 100;
}

.step-sec>div:last-of-type:before {
    display: none;
}

@media screen and (max-width:767px) {
    .step-sec>div::before {
        top: 100%;
        right: 50%;
        font-size: 150%;
        transform: translateX(50%) rotate(90deg);
    }
}

.step-sec .step-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    background: transparent;
    padding: 3rem 1rem;
}

.step-sec .step-wrap::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--bg-color);
    border: 1px solid var(--main-color);
    transform: skewY(-8deg);
    z-index: -1;
}

.step-sec .step-wrap .step-num {
    position: absolute;
    font-family: 'Noto Serif TC', "微軟正黑體", "微软雅黑", sans-serif;
    color: var(--basic-txt);
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.step-sec .step-wrap img {
    margin-bottom: 1rem;
}

.step-sec .step-wrap .img-sec {
    display: block;
    position: relative;
}

.step-sec .step-wrap .img-sec::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 90px;
    top: 72%;
    left: 52%;
    transform: translateX(-50%);
    border: 4px solid var(--bs-warning);
}

#step ul.note {
    padding: 0 2.5rem;
}

#step ul.note li {
    list-style-type: '*';
}

/*-------------------- 訂購流程 #step END --------------------*/

/*-------------------- 限量！演唱會套票行程 #tour --------------------*/

@keyframes movelight {
    0% {
        opacity: 0;
        top: 0;
    }

    20% {
        opacity: 0.4;
        top: 10%;
    }

    50% {
        opacity: 0.7;
        top: 25%;
    }

    60% {
        opacity: 0.6;
        top: 30%;
    }

    80% {
        opacity: 0.4;
        top: 40%;
    }

    100% {
        opacity: 0;
        top: 50%;
    }
}

#tour {
    padding-top: 4.2vw;
}

#tour::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    padding-bottom: 61.30208%;
    background: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/bg-light.png) no-repeat center/cover;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translateY(-10vw);
    animation-name: movelight;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@media screen and (max-width: 991px) {
    #tour::before {
        padding-bottom: 90%;
    }
}

@media screen and (max-width: 767px) {
    @keyframes movelight {
        0% {
            opacity: 0;
            top: 0;
        }

        20% {
            opacity: 0.6;
            top: 20%;
        }

        50% {
            opacity: 0.85;
            top: 50%;
        }

        60% {
            opacity: 0.7;
            top: 60%;
        }

        80% {
            opacity: 0.6;
            top: 80%;
        }

        100% {
            opacity: 0;
            top: 100%;
        }
    }

    #tour::before {
        transform: translateY(-60vw);
        padding-bottom: 150%;
    }
}

/*-- 商品區 .pro-ticket --*/

.pro-ticket {
    max-width: 1430px;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.pro-ticket>div {
    margin-bottom: 1.5rem;
}

.pro-box {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    text-decoration: none;
    color: var(--basic-txt);
    padding: 0;
    box-shadow: 0 0 0 1px var(--main-color);
    background: var(--bg-color);
    z-index: 10;
    transition: var(--transition-com);
}

.pro-box:hover {
    text-decoration: none;
    color: var(--basic-txt);
    box-shadow: 0 0 0 1px var(--bs-warning);
}

.pro-box>img {
    width: 100%;
    height: auto;
}

.pro-box .sale_info {
    position: relative;
    padding: 0.5rem 0.5rem 40px;
}

.pro-box .sale_info>h3 {
    color: #fff;
    margin-bottom: 0.3rem;
}

@media screen and (min-width:1200px) {
    .pro-box .sale_info h3, .pro-box .sale_info .h3 {
        font-size: 1.875rem;
    }
}

.sale_info>.spec_txt {
    padding-inline-start: 0;
}

.pro-box .sale_info>.spec_txt>li::before {
    font-family: 'Material Icons';
    content: '\e2e6';
    vertical-align: middle;
    margin-right: 0.4rem;
}

.pro-box .sale_info>.spec_txt>li:last-of-type::before {
    content: '\e001';
}

.pro-box .sale_info>.price_txt {
    position: absolute;
    display: block;
    text-align: right;
    padding: 0 0.8rem 0.8rem;
    right: 0;
    bottom: 0;
    color: var(--bs-warning);
}

.sale_info>.price_txt>span {
    display: inline-block;
    font-weight: 600;
    margin-bottom: 0;
}

.sale_info>.price_txt:after {
    /* clearfix */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.pro-box .btn {
    white-space: nowrap;
    margin-top: -0.5rem;
}

.pro-box .btn_sale>.material-icons {
    vertical-align: bottom;
}

.pro-box .btn_sale:hover, .pro-box:hover .btn_sale {
    color: var(--basic-txt);
    background-color: var(--sale-hover);
    border-color: var(--sale-hover);
}

.pro-box.sold_out{box-shadow: 0 0 0 1px var(--bs-warning);}

.pro-box.sold_out::before {
    content: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/icon-soldout.png);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* .pro-box.sold_out:hover {
    color: inherit;
    box-shadow: 0 0 0 1px var(--main-color);
} */

/*-------------------- 限量！演唱會套票行程 #tour END --------------------*/

/*-------------------- 注意事項 #concert_note --------------------*/

#concert_note {
    padding-top: var(--content-p);
    background: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/icon-wave02.png) no-repeat left 130%/22.65625%,url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/icon-wave01.png) no-repeat 90% 132%/25%;
}

#concert_note ul {
    /* padding-inline-start: 24px; */
    margin-bottom: 5px;
}

@media screen and (max-width: 575px) {
    #concert_note ul {
        padding-inline-start: 5px;
    }
}

#concert_note li {
    text-align: left;
    list-style-type: decimal;
    margin-bottom: 4px;
}

@media screen and (max-width:991px) {
    #concert_note li {
        font-size: 0.9375rem;
    }
}

#btn_top{
    position: fixed;
    bottom: 60px;
    right: 5px;
    z-index: 999;
}

@media screen and (max-width:767px) {
    #concert_note .contentbox>ul {
        width: 95%;
    }

    #btn_top, #btn_app {
        right: 0;
    }
}