@keyframes car {
    0% {
        left: -80%;
        top: 10%;
    }
    100% {
        left: 0;
        top: 0;
    }
}

@keyframes line {
    0% {
        stroke-dashoffset: 1470;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes op {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@media screen and (min-width: 1280px) {
    /*---------------預約消費-----------*/
    .book {
        width: 80%;
        min-width: 1200px;
        max-width: 1600px;
        position: relative;
        margin: 0 auto;
        padding: 64px;
        box-sizing: border-box;
        background: #f5f5f5;
    }
    /*---------------預約消費標題-----------*/
    .book .title {
        width: 100%;
        margin-bottom: 32px;
        position: relative;
    }
    .book .title h2 {
        font-size: 34px;
        line-height: 50px;
        letter-spacing: 4px;
        color: #ad0117;
        transform: skew(-15deg);
    }
    .book .title .api_fb {
        position: absolute;
        right: 0;
        top: 16px;
        margin: auto;
    }
    .book .title .api_fb::before {
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .book .title .api_fb iframe {
        display: inline-block;
        vertical-align: middle;
    }
    /*---------------預約消費流程-----------*/
    .book .item {
        width: 100%;
        box-shadow: 8px 8px 0 0 #e5e5e5;
        margin-bottom: 64px;
    }
    .book .item .photo {
        width: 100%;
        font-size: 0;
        background: #fff;
        text-align: center;
        padding: 32px 0;
    }
    .book .item .photo svg {
        width: 80%;
    }
	/*20250813 add*/
	.book .item .photo img {
        width: 100%;
    }
    /*---------------預約消費價格----------*/
    .book .cost {
        width: 100%;
        font-size: 0;
        position: relative;
        margin-bottom: 64px;
    }
    .book .cost .box {
        width: 31%;
        display: inline-block;
        vertical-align: middle;
        box-shadow: 8px 8px 0 0 #e5e5e5;
        text-align: right;
        position: relative;
        overflow: hidden;
    }
    .book .cost .box+.box {
        margin: 0 0 0 3.5%;
    }
    /*---------------預約消費 圖示特效----------*/
    .book .cost .box .photo {
        width: 45%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        text-align: left;
        z-index: 11;
    }
    .book .cost .box:hover .photo {
        animation: car .8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    }
    .book .cost .box .photo::before {
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .book .cost .box .photo img {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    /*---------------預約消費 文字說明---------*/
    .book .cost .box .text {
        width: 50%;
        padding: 32px 0;
        display: inline-block;
        text-align: left;
        position: relative;
        z-index: 5;
    }
    .book .cost .box::before {
        content: '';
        width: 70%;
        height: 100%;
        position: absolute;
        right: -10%;
        top: 0;
        background: #fff;
        border-left: 15px solid #af0318;
        transform: skew(-25deg);
    }
    .book .cost .box .text h3 {
        font-size: 20px;
        line-height: 40px;
        letter-spacing: 1px;
        color: #282828;
    }
    .book .cost .box .text h3 span {
        color: #a0a0a0;
        margin-left: 8px;
    }
    .book .cost .box .text p {
        font-size: 16px;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 1px;
        color: #af0318;
    }
    /*---------------預約消費 GOpro---------*/
    .book .gopro {
        width: 75%;
        margin: 0 auto 32px;
        font-size: 0;
        text-align: center;
    }
    .book .gopro h2 {
        font-size: 32px;
        line-height: 48px;
        letter-spacing: 4px;
        color: #ad0117;
        transform: skew(-8deg);
        border-bottom: 1px solid #333;
        margin-bottom: 12px;
    }
    .book .gopro div {
        width: 34%;
        display: inline-block;
        vertical-align: top;
    }
    .book .gopro div h4 {
        font-size: 20px;
        line-height: 40px;
        letter-spacing: 2px;
    }
    .book .gopro div h4 span {
        font-size: 32px;
        color: #ad0117;
        margin: 0 8px;
    }
    .book .gopro div h5 {
        font-size: 15px;
        line-height: 30px;
        letter-spacing: 1px;
        color: #333;
    }
    .book .gopro p {
        display: inline-block;
        vertical-align: top;
        width: 32%;
        font-size: 13.5px;
        line-height: 25px;
        font-weight: 600;
        text-align: left;
        letter-spacing: 1px;
    }
    /*---------------預約消費提示----------*/
    .book .information {
        width: 100%;
    }
    .book .information .text {
        width: 100%;
        text-align: center;
    }
    .book .information .text img {
        width: 45px;
        vertical-align: middle;
        margin-right: 12px;
    }
    .book .information .text p {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 1px;
        line-height: 28px;
        color: #282828;
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }
    /*---------------預約消費 按鈕----------*/
    .book .information .btn {
        width: 60%;
        height: 70px;
        margin: 32px auto;
        position: relative;
        overflow: hidden;
    }
    .book .information .btn::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: -100%;
        background: #f5f5f5;
        z-index: 3;
        transition: .5s;
        transform: skew(-15deg);
    }
    .book .information .btn:hover::before {
        left: 0;
    }
    .book .information .btn::after {
        content: '';
        width: 99%;
        height: 99%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        border: 2px solid #af0318;
        opacity: 0;
        transition: .5s;
        z-index: 4;
    }
    .book .information .btn:hover::after {
        width: 95%;
        height: 90%;
        opacity: 1;
    }
    .book .information .btn .block {
        width: 95%;
        height: 90%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background: #af0318;
    }
    .book .information .btn a {
        width: 95%;
        height: 90%;
        font-size: 28px;
        font-weight: 700;
        line-height: 63px;
        letter-spacing: 5px;
        text-align: center;
        color: #fff;
        transition: .4s;
        text-shadow: 2px 2px 2px #282828;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 5;
    }
    .book .information .btn a:hover {
        color: #af0318;
        text-shadow: 0 0 0 #ccc;
    }
    /*---------------預約消費 svg動畫----------*/
    .book .item .photo .line {
        stroke-dasharray: 1470;
        animation: line 4s both;
    }
    .book .item .photo .op1 {
        animation: op .3s .5s both;
    }
    .book .item .photo .op2 {
        animation: op .3s .9s both;
    }
    .book .item .photo .op3 {
        animation: op .3s 1.3s both;
    }
    .book .item .photo .op4 {
        animation: op .3s 1.7s both;
    }
    .book .item .photo .op5 {
        animation: op .3s 2.1s both;
    }
    .book .item .photo .op6 {
        animation: op .3s 2.5s both;
    }
    .book .item .photo .op7 {
        animation: op .3s 2.9s both;
    }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
    /*---------------預約消費-----------*/
    .book {
        width: 90%;
        position: relative;
        margin: 0 auto;
        padding: 32px;
        box-sizing: border-box;
        background: #f5f5f5;
    }
    /*---------------預約消費標題-----------*/
    .book .title {
        width: 100%;
        margin-bottom: 32px;
        position: relative;
    }
    .book .title h2 {
        font-size: 34px;
        line-height: 50px;
        letter-spacing: 4px;
        color: #ad0117;
        transform: skew(-15deg);
    }
    .book .title .api_fb {
        position: absolute;
        right: 0;
        top: 16px;
        margin: auto;
    }
    .book .title .api_fb::before {
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .book .title .api_fb iframe {
        display: inline-block;
        vertical-align: middle;
    }
    /*---------------預約消費流程-----------*/
    .book .item {
        width: 100%;
        box-shadow: 8px 8px 0 0 #e5e5e5;
        margin-bottom: 32px;
    }
    .book .item .photo {
        width: 100%;
        font-size: 0;
        background: #fff;
        text-align: center;
        padding: 32px 0;
    }
    .book .item .photo svg {
        width: 90%;
    }
	/*20250813 add*/
	.book .item .photo img {
        width: 100%;
    }
    /*---------------預約消費價格----------*/
    .book .cost {
        width: 100%;
        font-size: 0;
        position: relative;
        margin-bottom: 64px;
    }
    .book .cost .box {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
        box-shadow: 8px 8px 0 0 #e5e5e5;
        text-align: right;
        position: relative;
        overflow: hidden;
    }
    .book .cost .box+.box {
        margin-top: 32px;
    }
    /*---------------預約消費 圖示特效----------*/
    .book .cost .box .photo {
        width: 36%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        text-align: left;
        z-index: 11;
    }
    .book .cost .box:hover .photo {
        animation: car .8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    }
    .book .cost .box .photo::before {
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .book .cost .box .photo img {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    /*---------------預約消費 文字說明---------*/
    .book .cost .box .text {
        width: 45%;
        padding: 48px 0;
        display: inline-block;
        text-align: left;
        position: relative;
        z-index: 5;
    }
    .book .cost .box::before {
        content: '';
        width: 70%;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        background: #fff;
        border-left: 15px solid #af0318;
        transform: skew(-25deg);
    }
    .book .cost .box .text h3 {
        font-size: 22px;
        line-height: 42px;
        letter-spacing: 1px;
        color: #282828;
    }
    .book .cost .box .text h3 span {
        color: #a0a0a0;
        margin-left: 8px;
    }
    .book .cost .box .text p {
        font-size: 16px;
        line-height: 32px;
        letter-spacing: 1px;
        color: #af0318;
        font-weight: 600;
    }
    /*---------------預約消費 GOpro---------*/
    .book .gopro {
        width: 100%;
        margin-bottom: 32px;
        font-size: 0;
        text-align: center;
    }
    .book .gopro h2 {
        font-size: 28px;
        line-height: 40px;
        letter-spacing: 3px;
        color: #ad0117;
        transform: skew(-8deg);
        border-bottom: 1px solid #333;
        margin-bottom: 12px;
    }
    .book .gopro div {
        width: 50%;
        display: inline-block;
        vertical-align: top;
    }
    .book .gopro div h4 {
        font-size: 18px;
        line-height: 40px;
        letter-spacing: 2px;
    }
    .book .gopro div h4 span {
        font-size: 30px;
        color: #ad0117;
        margin: 0 8px;
    }
    .book .gopro div h5 {
        font-size: 13.5px;
        line-height: 25px;
        letter-spacing: .5px;
        color: #333;
    }
    .book .gopro p {
        width: 85%;
        font-size: 13.5px;
        line-height: 25px;
        font-weight: 600;
        text-align: left;
        letter-spacing: 1px;
        margin: 16px auto;
    }
    /*---------------預約消費提示----------*/
    .book .information {
        width: 100%;
    }
    .book .information .text {
        width: 100%;
        text-align: center;
    }
    .book .information .text img {
        width: 45px;
        vertical-align: middle;
        margin-right: 12px;
    }
    .book .information .text p {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 1px;
        line-height: 28px;
        color: #282828;
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }
    /*---------------預約消費 按鈕----------*/
    .book .information .btn {
        width: 60%;
        height: 70px;
        margin: 32px auto;
        position: relative;
    }
    .book .information .btn::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #ab0418;
        transform: skew(-30deg);
        z-index: 5;
    }
    .book .information .btn::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: -3px;
        left: 3px;
        background: #6d0111;
        transform: skew(-30deg);
    }
    .book .information .btn a {
        width: 100%;
        height: 100%;
        display: inline-block;
        font-size: 28px;
        line-height: 70px;
        font-weight: 700;
        letter-spacing: 5px;
        color: #fff;
        position: relative;
        z-index: 6;
        text-align: center;
        transform: skew(-15deg);
        text-shadow: 2px 2px 2px #282828;
    }
    .book .information .btn a span {
        font-size: 16px;
        letter-spacing: 1px;
        margin-left: 4px;
        text-shadow: 0 0 0 transparent;
    }
    /*---------------預約消費 svg動畫----------*/
    .book .item .photo .line {
        stroke-dasharray: 1470;
        animation: line 4s both;
    }
    .book .item .photo .op1 {
        animation: op .3s .5s both;
    }
    .book .item .photo .op2 {
        animation: op .3s .9s both;
    }
    .book .item .photo .op3 {
        animation: op .3s 1.3s both;
    }
    .book .item .photo .op4 {
        animation: op .3s 1.7s both;
    }
    .book .item .photo .op5 {
        animation: op .3s 2.1s both;
    }
    .book .item .photo .op6 {
        animation: op .3s 2.5s both;
    }
    .book .item .photo .op7 {
        animation: op .3s 2.9s both;
    }
    @media screen and (min-width: 1024px) and (max-width: 1279px) {
        .book .cost {
            width: 100%;
            font-size: 0;
            position: relative;
            margin-bottom: 64px;
        }
    }
}

@media screen and (max-width: 767px) {
    /*---------------預約消費-----------*/
    .book {
        width: 100%;
        position: relative;
        padding: 16px 0;
        box-sizing: border-box;
        background: #f5f5f5;
    }
    /*---------------預約消費標題-----------*/
    .book .title {
        width: 90%;
        min-width: 300px;
        max-width: 600px;
        position: relative;
        margin: 0 auto 8px;
    }
    .book .title h2 {
        font-size: 34px;
        line-height: 50px;
        letter-spacing: 4px;
        color: #ad0117;
        transform: skew(-15deg);
        margin-bottom: 16px;
    }
    .book .title .api_fb {
        width: 100%;
    }
    .book .title .api_fb::before {
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .book .title .api_fb iframe {
        display: inline-block;
        vertical-align: middle;
    }
    /*---------------預約消費流程-----------*/
    .book .item {
        width: 100%;
        margin-bottom: 32px;
    }
    .book .item .photo {
        width: 100%;
        font-size: 0;
        background: #fff;
        text-align: center;
        padding: 16px 0;
    }
    .book .item .photo svg {
        width: 100%;
    }
	
	/*20250813 add*/
	.book .item .photo img {
        width: 100%;
    }
    /*---------------預約消費價格----------*/
    .book .cost {
        width: 90%;
        min-width: 300px;
        max-width: 600px;
        font-size: 0;
        position: relative;
        margin: 0 auto 32px;
    }
    .book .cost .box {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
        box-shadow: 8px 8px 0 0 #e5e5e5;
        text-align: right;
        position: relative;
        overflow: hidden;
    }
    .book .cost .box+.box {
        margin-top: 32px;
    }
    /*---------------預約消費 圖示特效----------*/
    .book .cost .box .photo {
        width: 48%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        text-align: left;
        z-index: 11;
    }
    .book .cost .box:hover .photo {
        animation: car .8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    }
    .book .cost .box .photo::before {
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .book .cost .box .photo img {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    /*---------------預約消費 文字說明---------*/
    .book .cost .box .text {
        width: 51%;
        padding: 16px 0;
        display: inline-block;
        text-align: left;
        position: relative;
        z-index: 5;
    }
    .book .cost .box::before {
        content: '';
        width: 70%;
        height: 100%;
        position: absolute;
        right: -10%;
        top: 0;
        background: #fff;
        border-left: 15px solid #af0318;
        transform: skew(-25deg);
    }
    .book .cost .box .text h3 {
        font-size: 17px;
        line-height: 42px;
        letter-spacing: 1px;
        color: #282828;
    }
    .book .cost .box .text h3 span {
        color: #a0a0a0;
        margin-left: 8px;
    }
    .book .cost .box .text p {
        font-size: 14px;
        line-height: 32px;
        letter-spacing: 1px;
        color: #af0318;
        font-weight: 600;
    }
    /*---------------預約消費 GOpro---------*/
    .book .gopro {
        width: 90%;
        margin: 32px auto;
        font-size: 0;
        text-align: center;
    }
    .book .gopro h2 {
        font-size: 28px;
        line-height: 40px;
        letter-spacing: 3px;
        color: #ad0117;
        transform: skew(-8deg);
        border-bottom: 1px solid #333;
        margin-bottom: 12px;
    }
    .book .gopro div {
        width: 100%;
    }
    .book .gopro div h4 {
        font-size: 18px;
        line-height: 40px;
        letter-spacing: 2px;
    }
    .book .gopro div h4 span {
        font-size: 30px;
        color: #ad0117;
        margin: 0 8px;
    }
    .book .gopro div h5 {
        font-size: 13.5px;
        line-height: 25px;
        letter-spacing: .5px;
        color: #333;
    }
    .book .gopro p {
        width: 80%;
        font-size: 14px;
        line-height: 25px;
        font-weight: 600;
        text-align: left;
        letter-spacing: 1px;
        margin: 16px auto;
        background: #999;
        color: #fff;
        padding: 8px;
    }
    /*---------------預約消費提示----------*/
    .book .information {
        width: 90%;
        min-width: 300px;
        max-width: 600px;
        margin: 0 auto;
    }
    .book .information .text {
        width: 100%;
        text-align: center;
    }
    .book .information .text img {
        width: 45px;
        vertical-align: middle;
        margin-bottom: 8px;
    }
    .book .information .text p {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 1px;
        line-height: 28px;
        color: #282828;
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }
    /*---------------預約消費 按鈕----------*/
    .book .information .btn {
        width: 80%;
        height: 70px;
        margin: 32px auto;
        position: relative;
    }
    .book .information .btn::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #ab0418;
        transform: skew(-30deg);
        z-index: 5;
    }
    .book .information .btn::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: -3px;
        left: 3px;
        background: #6d0111;
        transform: skew(-30deg);
    }
    .book .information .btn a {
        width: 100%;
        height: 100%;
        display: inline-block;
        font-size: 28px;
        line-height: 45px;
        font-weight: 700;
        letter-spacing: 5px;
        color: #fff;
        position: relative;
        z-index: 6;
        transition: .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        text-align: center;
        transform: skew(-15deg);
        text-shadow: 2px 2px 2px #282828;
    }
    .book .information .btn a span {
        font-size: 16px;
        letter-spacing: 1px;
        margin-left: 4px;
        text-shadow: 0 0 0 transparent;
        display: block;
        line-height: 16px;
    }
    /*---------------預約消費 svg動畫----------*/
    .book .item .photo .line {
        stroke-dasharray: 1470;
        animation: line 4s both;
    }
    .book .item .photo .op1 {
        animation: op .3s .5s both;
    }
    .book .item .photo .op2 {
        animation: op .3s .9s both;
    }
    .book .item .photo .op3 {
        animation: op .3s 1.3s both;
    }
    .book .item .photo .op4 {
        animation: op .3s 1.7s both;
    }
    .book .item .photo .op5 {
        animation: op .3s 2.1s both;
    }
    .book .item .photo .op6 {
        animation: op .3s 2.5s both;
    }
    .book .item .photo .op7 {
        animation: op .3s 2.9s both;
    }
}