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

:root {
    --basic-txt: #212121;
    --main: #ff2727;
    --light: #ff657a;
    --dark: #d81111;
    --primary-btn: #fd77d5;
    --primary-hover: #002578;
    --content-p: 2.5rem;
    --transition-com: all 0.3s ease;
}

#sec-jp {
    --main: #ed1b70;
    --light: #fa8eb0;
    --dark: #cc0e5a;
}

#sec-kr {
    --main: #bf28bb;
    --light: #ec92c6;
    --dark: #9e189a;
}

.bg-pink {
    background-color: #fde0f1;
}

strong {
    font-weight: 600 !important;
}

.material-icons {
    vertical-align: middle;
}

/*-- 大標樣式 --*/

h1 {
    font-family: 'Noto Sans TC', sans-serif;
    position: relative;
    display: inline-block;
    white-space: nowrap;
    letter-spacing: 0.1rem;
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: 1rem;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    /* background-image: url(../images/bg-h1.png); */
    background-color: var(--primary-btn);
    background-position: top center;
    background-size: 100%;
    z-index: 100;
    margin-bottom: 40PX;
}

h1::before {
    --icon-w: 77px;
    content: '';
    position: absolute;
    display: inline-block;
    top: calc(var(--icon-w) * 28 / 77 * -1);
    /* left: calc(var(--icon-w) * 28 / 77 * -1); */
    transform: translateX(-150%);
    width: var(--icon-w);
    height: calc(var(--icon-w) * 93 / 77);
    background: url(https://event.cdn-gunnarworks.com/events/sakura/2025/icon-h1-left.png) no-repeat center/contain;
    z-index: -1;
}

h1::after {
    --icon-w: 108px;
    content: '';
    position: absolute;
    display: inline-block;
    /* top: -6px; */
    /* right: 0.1rem; */
    transform: translateX(120%);
    width: var(--icon-w);
    height: calc(var(--icon-w) * 57 / 82);
    background: url(https://event.cdn-gunnarworks.com/events/sakura/2025/icon-h1-right.png) no-repeat center/contain;
    z-index: -1;
}

@media screen and (max-width:767px) {
    h1::before {
        --icon-w: 56px;
    }

    h1::after {
        --icon-w: 66px;
    }
}

/*-- 按鈕 --*/

.btn-primary {
    color: #fff;
    background-color: var(--primary-btn);
    border-color: var(--primary-btn);
    border-radius: 0;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

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

.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;
    }
}

/*-- 區塊樣式 --*/

.con_area {
    position: relative;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    background: rgb(255, 255, 255);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 237, 1) 80%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 237, 1) 80%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 237, 1) 80%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#faf8ed', GradientType=0);
    /* IE6-9 */
}

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

/*-------------------- 台灣賞櫻前線 #sec-tw --------------------*/

@keyframes movecloud {
    0% {
        transform: translateY(5%);
        opacity: 0;
    }

    40% {
        transform: translateY(-10%);
        opacity: 0.65;
    }

    100% {
        transform: translateY(-15%);
        opacity: 0;
    }
}

#wrapper {
    position: relative;
    padding-top: calc(var(--content-p) * 1.4);
    min-width: 100%;
    width: 100%;
    overflow-x: hidden;
}

#wrapper::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(https://event.cdn-gunnarworks.com/events/sakura/2025/bg6.png) repeat-y top center/100%;
    z-index: 1;
}


#wrapper>section>.intro {
    position: relative;
}

#wrapper>section>.intro::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 95%;
    top: 5%;
    left: 50%;
    transform: skewX(-30deg);
    background-color: var(--main);
    opacity: 0.2;
    z-index: 2;
}


:is(#wrapper>#sec-jp, #wrapper>#sec-tw) .intro::before { 
    left: -64%; 
  }

@media screen and (max-width:767px) {
    #wrapper>section>.intro::before {
        width: 200%;
        height: 95%;
        top: 5%;
        left: 50%;
        /* transform: skewX(-20deg); */
    }

    :is(#wrapper>#sec-jp, #wrapper>#sec-tw) .intro::before { 
        left: 54%;
        transform: skewX(-30deg);
      }
}

#sec-tw {
    text-align: center;
}

#sec-jp h1 {
    margin-bottom: var(--content-p);
}

.map-area {
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.map-area>img.map-title {
    position: absolute;
    top: -15px;
    left: -6px;
    z-index: -1;
    max-width:32%;
}

.map-area>.map-title-1 {
    position: absolute;
    top: -15px;
    left: -6px;
    z-index: -1;
    max-width:31%;
}
.map-area>.map-title-2 {
    position: absolute;
    top: 26px;
    left: 24px;
    z-index: -1;
    max-width:35%;
}
.map-area>.map-title-3 {
    position: absolute;
    top: -33px;
    left: 5px;
    z-index: -1;
    max-width:31%;
}
/* 桌機版定位 (寬度 >= 768px) */
@media screen and (min-width: 768px) {
    .map-area>.map-title-1 {
        top: -4px;
        left: -6px;
    }
    .map-area>.map-title-2 {
        top: 85px;
        left: 57px;
    }
    .map-area>.map-title-3 {
        top: -14px;
        left: 2px;
    }
}

/* 桌機版定位 (寬度 >= 992px) */
@media screen and (min-width: 768px) {
    .map-area>.map-title-1 {
        top: -4px;
        left: -6px;
    }
    .map-area>.map-title-2 {
        top: 85px;
        left: 57px;
    }
    .map-area>.map-title-3 {
        top: -14px;
        left: 2px;
    }
}





.blog-area>.rowline>div[class*='col-'] {
    display: flex;
    margin-bottom: max(min(calc(1vw + 5px), 30px), 1rem);
}

.blog-area>.rowline>div[class*='col-']:nth-of-type(1) {
    justify-content: end;
}

.blog-area>.rowline>div[class*='col-']:nth-of-type(2) {
    justify-content: start;
}

@media (min-width:992px) and (max-width:1399px) {
    .blog-area>.rowline>div[class*='col-']:nth-of-type(2) {
        margin-left: -10%;
    }
}

.blog-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: auto;
    border: solid 6px #fff;
}

@media screen and (max-width: 991px) {
    .blog-area {
        margin-top: 1rem;
    }

    .blog-box {
        max-width: none;
    }
}

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

.blog-box>.blog-txt {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 1.5rem 1rem;
    text-align: left;
    color: #fff;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.5+30 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=0);
    /* IE6-9 */
}

.blog-txt>p {
    margin-bottom: 0;
}

.blog-txt>a,
.blog-txt>a:link,
.blog-txt>a:visited {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    padding: 0.5rem 1rem;
    color: #fff;
    background: var(--main);
    transition: var(--transition-com);
}

.blog-txt>a::after {
    content: '\e409';
    font-family: 'Material Icons';
    font-size: 120%;
    vertical-align: sub;
    transition: var(--transition-com);
}

.blog-txt>a:hover,
.blog-txt>a:active {
    background: var(--dark);
}

.blog-txt>a:hover::after {
    margin-left: 0.3rem;
}

@media screen and (max-width: 991px) {
    .blog-txt>p {
        margin-bottom: 1rem;
    }

    .blog-txt>a {
        padding: 0.3rem 0.7rem;
    }

}

/*-- 商品區 --*/

.pro {
    margin-top: var(--content-p);
    padding-bottom: calc(var(--content-p) * 3);
}

@media screen and (max-width: 767px) {
    .pro {
        padding-bottom: calc(var(--content-p) * 2);
    }
}

.pro>h2 {
    font-weight: 600;
    color: var(--main);
    background: url(https://event.cdn-gunnarworks.com/events/sakura/2025/bg-h2-title-1.png) no-repeat center/contain;
    /* text-shadow: 2px 3px var(--main); */
}



.pro-area {}

.pro-area>div {
    margin-bottom: 1rem;
}

.sale_box {
    color: var(--com-color);
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: #ffffff;
    border: 2px solid var(--main);
    z-index: 10;
    transition: var(--transition-com);
}

.sale_box:hover {
    color: var(--com-color);
    border: 2px solid var(--light);
    box-shadow: 0 0 0 2px var(--main);
}

/* .sale_box>.sale_img {
    position: relative;
    width: 100%;
    height: 230px;
    border-top-left-radius: var(--b-round);
    border-top-right-radius: var(--b-round);
    overflow: hidden;
} */

.sale_box>.sale_img>img {
    width: 100%;
    max-width: 100%;
    height: auto;
    transition: var(--transition-com);
}

.sale_box:hover>.sale_img>img {
    filter: contrast(1.3);
}

.sale_info {
    position: relative;
    padding: 0.5rem 0.5rem 0;
    margin-bottom: 88px;
    font-size: 1rem;
    text-align: left;
}

.sale_info>h4 {
    color: var(--basic-txt);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.sale_info>ul {
    width: 100%;
    padding-inline-start: 0;
    margin-block-end: 0;
}

.sale_info>ul li {
    color: var(--hot-txt);
    line-height: 1.3;
    margin-bottom: 3px;
}

@media screen and (min-width:991px) {
    .sale_info>ul li {
        margin-bottom: 2px;
    }
}

.sale_info>ul li::before {
    content: url(https://event.cdn-gunnarworks.com/events/sakura/2022/icon-hot-tw.png);
    vertical-align: middle;
    margin-right: 0.3rem;
}

.sale_info>p {
    color: var(--box-border);
    margin-top: 0.3rem;
    margin-bottom: 0;
}

.sale_info>.date_txt {
    float: left;
    padding-top: 0.6rem;
}

.sale_info>.price_txt {
    float: right;
    color: var(--main);
}

.sale_info>.price_txt>span {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 3px;
}

@media screen and (min-width:992px) {
    .sale_info>.price_txt>span {
        font-size: 1.8rem;
    }
}

.sale_box .btn {
    position: absolute;
    bottom: 0.5rem;
    width: calc(100% - 1rem);
    left: 0.5rem;
    border-radius: 0;
    color: #fff;
    background: var(--light);
    transition: var(--transition-com);
}

.sale_box:hover .btn {
    color: #fff;
    background: var(--main);
}

/*-- 一般商品格子區 .pro-area END --*/

/*-------------------- 台灣賞櫻前線 #sec-tw END --------------------*/

/*-------------------- 好禮雙重抽 #double-gift --------------------*/

#double-gift {
    --main: #ed1b70;
    --light: #fa8eb0;
    --dark: #cc0e5a;
    padding-bottom: calc(var(--content-p) * 3);
}

#double-gift h2 {
    color: var(--h2-color);
    font-weight: 600;
}

.double-gift-area {
    position: relative;
}

.double-gift-area::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.double-gift-area>div {
    position: relative;
    width: 55%;
    padding: calc(var(--content-p) * 1.6) 0;
}


.double-gift-area>div>img[src*='pic-meal'] {
    position: absolute;
}

.double-gift-area .gift-over {
    --h2-color: var(--main);
    margin-right: -5%;
    z-index: 1;
    float: left;
    color: var(--basic-txt);
}

.double-gift-area .gift-fb {
    --h2-color: var(--primary-btn);
    margin-left: -5%;
    margin-top: 5%;
    z-index: 2;
    float: right;
    color: #fff;
}

@media screen and (max-width:767px) {
    .double-gift-area>div {
        width: 90%;
        padding: calc(var(--content-p) * 0.8) 0;
    }

    .double-gift-area .gift-fb {
        margin-top: -6%;
    }
}


.double-gift-area .gift-over>img[src*='pic-meal'] {
    max-width: calc(403 / 821 * 100%);
    top: 0;
    left: 0;
    transform: translate(-40%, -40%);
}

.double-gift-area .gift-fb>img[src*='pic-meal'] {
    max-width: calc(368 / 821 * 100%);
    bottom: 0;
    left: 0;
    transform: translate(-50%, 25%);
}

@media screen and (max-width:767px) {
    .double-gift-area .gift-over>img[src*='pic-meal'] {
        max-width: 50%;
        top: 0;
        left: 73%;
        transform: translate(0, -50%);
    }

    .double-gift-area .gift-fb>img[src*='pic-meal'] {
        max-width: 50%;
        bottom: 0;
        left: 0;
        transform: translate(-20%, 50%);
    }
}

.double-gift-area>div::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: skewX(-20deg);
    z-index: -1;
}

.double-gift-area .gift-over::before {
    background: #fff;
}

.double-gift-area .gift-fb::before {
    background: var(--main);
    opacity: 0.45;
}

.gift-txt p>span {
    font-weight: 600;
}

.gift-txt p>span>b {
    font-size: 140%;
}

/*-------------------- 好禮雙重抽 #double-gift END --------------------*/

/*-------------------- LINE好友獨享 #line-friend --------------------*/

#line-friend {
    background: url(../images/bg-flower.png) no-repeat center bottom/contain;
    padding-bottom: var(--content-p);
}


.line-up {
    justify-content: end;
    align-items: center;
    background-image: url(../images/pic-line.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
}

.line-up>.gift-txt {
    height: 450px;
    padding-top: 0;
}

.line-up>.gift-txt p>span {
    font-weight: 400;
}

@media screen and (min-width:768px) {
    .line-up>.gift-txt {
        height: 550px;
        padding-top: 20px;
    }

    .line-up {
        background-position: left bottom;
        background-size: 90%;
    }
}

@media screen and (min-width:991px) {
    .line-up>.gift-txt {
        height: 550px;
        padding-top: 30px;
    }

    .line-up {
        background-size: 85%;
    }
}

@media screen and (min-width:1200px) {
    .line-up>.gift-txt {
        height: 620px;
        padding-top: 80px;
    }
}

@media screen and (min-width:1400px) {
    .line-up>.gift-txt {
        height: 699px;
        padding-top: 89px;
    }
}

/*-------------------- LINE好友獨享 #line-friend END --------------------*/

/*-------------------- 品牌合作 #coop-brand --------------------*/

#coop-brand {
    --main: #ed1b70;
    padding-bottom: calc(var(--content-p) * 3);
}

#coop-brand h1 {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
    color: #fff;
}

.brand-sec {
    padding-bottom: calc(var(--content-p) * 2);
}

.brand-sec img[src*='logo-brand'] {
    margin-right: 5%;
}

.brand-sec img[src*='logo-brand']:nth-of-type(1) {
    width: 30%;
    max-width: 300px;
}

.brand-sec img[src*='logo-brand']:nth-of-type(2) {
    width: 13.88%;
    max-width: 141px;
}

@media screen and (max-width:767px) {
    .brand-sec img[src*='logo-brand']:last-of-type {
        margin-right: 0;
    }

    .brand-sec img[src*='logo-brand']:nth-of-type(1) {
        width: 50%;
    }

    .brand-sec img[src*='logo-brand']:nth-of-type(2) {
        width: 22.5%;
    }
}

.note-sec {
    position: relative;
    width: 85%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    padding: 1.5rem 1.8rem;
}

.note-sec::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--main);
    opacity: 0.3;
    z-index: -1;
}

.note-sec h3 {
    font-weight: 600;
}

.note-sec ul li {
    list-style-type: disc
}

.note-sec ul li.list-title {
    font-weight: 600;
    list-style-type: none;
    text-indent: -1rem;
}

/*-------------------- 品牌合作 #coop-brand END --------------------*/