@charset "UTF-8";
html, body, div, span, iframe,h1, h2, h3, h4, h5, h6, p,a, em, img,
b, u, i, dl, dt, dd, ol, ul, li,form, label, article, aside, nav {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit; vertical-align: baseline;}
article, aside,footer, header, menu, nav{display: block;}
body {line-height: 1;}
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
table {border-collapse:collapse; border-spacing: 0;}
body { font-family: "微軟正黑體" !important;}
.clearfix {clear: both;}

/* desktop */
.wrap{height: 100vh;background: #ece8df;}

header{height: 95vh;position: relative;}
header::before{content:'';position: absolute;top: 0;left: 0;background:url(../images/1_header-icon.png)no-repeat;background-size: cover;background-position: center;width: 100%;height: 100%;}
header::after{content:'';position: absolute;top: 0;left: 0;background:url(../images/1_header-stickers.png)no-repeat;background-size: cover;background-position: center;width:90%;height:90%;}
header .title{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:url(../images/1_header-title.png);background-size: cover;background-position: center;}
header .bkg{background:url(../images/1_header-bkg-1.png)no-repeat;background-size: cover;background-position: center;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
header .chat{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
header .chat-1{background:url(../images/1_chat-1.png)no-repeat;background-size: cover;background-position: center;animation: opSh .6s linear;animation-delay: 0.5s;animation-fill-mode: both;}
header .chat-2{background:url(../images/1_chat-2.png)no-repeat;background-size: cover;background-position: center;animation: opSh .6s linear;animation-delay: 1s;animation-fill-mode: both;}
header .chat-3{background:url(../images/1_chat-3.png)no-repeat;background-size: cover;background-position: center;animation: opSh .6s linear;animation-delay: 1.5s;animation-fill-mode: both;}
@keyframes opSh{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
header .header{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:10; display: flex;flex-wrap: wrap;justify-content: center;align-items: flex-end;box-sizing: border-box;padding-bottom:3%;}
header .start{position: relative;color: #fff;font-size: 22px;background: #3f3430;border-radius:99em;text-decoration: none;display: inline-block;text-align: center;box-sizing: border-box;padding:13px 80px;line-height: 1.3;cursor: pointer;border:10px solid #f0bbb1;}
header .start span{display: block;font-size: 44px;font-weight: bold;color:#f6c0b6;}
header .start span::after{content:'\f0a8';font-family:"Font Awesome 5 Free";display: inline-block;}
header .start:hover{transform: scale(1.1);}
header .start:active{border:10px solid #f0bbb1;transform: translateY(-5px);}

footer{height:5vh; display: flex;justify-content: center;align-items: center;background: #fff;}
footer p{color: #666666;}
footer br{display: none;}

/* other */
@media(max-width:1024px){
    .wrap{padding-top: 10vh;box-sizing: border-box;}
    header{height:80vh;}
    header .title{height:90%;top: -5%;}

    footer{height:10vh;}
}

/* table */
@media(max-width:768px){
    .wrap{padding-top: 0;}
    header{height: 90vh;overflow: hidden;}
    /* header::after{padding-left:35%;} */
    header::after{height:70%;top: 15%;}

    header .title{height: 65%;top:0;}
    header .bkg .chat-2{left: 10%;}
    header .bkg .chat-3{right:10%;width: 110%;}

    footer{height: 10vh;}
    footer p{line-height: 1.6;font-size: 18px;}
    footer br{display:unset;}
}

/* phone */
@media(max-width:600px){
    .wrap{padding-top:5vh;}
    header{background:url(../images/1_header-mobile.jpg)no-repeat;background-size:cover;height: 75vh;overflow: unset;}
    header::before{display: none;}
    header::after{display: none;}
    header .title{background:url(../images/1_header-title-mobile.png)no-repeat;background-size: cover;}
    /* header .title{display: none;} */
    header .bkg{background:url(../images/1_chat-mobile.png)no-repeat;background-size: cover;animation: opSh .6s linear;animation-delay:.5s;animation-fill-mode: both;}
    header .bkg>div{display: none;}
    header .header{top: 100%;height: 20vh;padding:0;}
    header .start{font-size:5vw;padding:1.5vh 0;border-radius: unset;border: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;line-height:1;border-width:10px;border-style: solid;border-color: #574842 #574842 #2C2421 #2C2421;box-sizing: border-box;}
    header .start:active{border-color: #2C2421 #2C2421 #574842 #574842;border-width:5px;box-sizing: border-box;transform: translateY(0px);}
    header .start span{font-size:9vw;display: block;width: 100%;margin:8px 0;}
    header .start span::after{margin-left:5px;animation:moveX 1.5s linear infinite;}
    @keyframes moveX{
        0%{transform: translateX(0px);}
        50%{transform: translateX(10px);}
        100%{transform: translateX(0px);} 
    }
    header .start::after{content:'5/20-6/03　完成測驗抽好禮３選1';font-weight: bold;color: #ffd35a;font-size:5vw;}
    footer{display: none;}
}


/* 活動關閉 */
.lightBkg{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgb(0, 0, 0,.5);z-index: 99;display: flex;justify-content: center;align-items: center;}
.lightBkg>div{background: #fff;color: #595959;font-size: 30px;font-weight: 600; text-align: center;box-sizing: border-box;padding:30px 100px 30px 100px;border-radius: 10px;position: relative;}
.lightBkg>div::before{content:"";display: block;width:130px;height:130px;border:3px solid #595959;border-radius: 99em;margin:0 auto 40px auto;animation: opSh-be .3s linear;animation-fill-mode: both;backface-visibility:hidden}
@keyframes opSh-be{
    0%{transform: rotateX(-90deg);opacity: 0;}
    100%{transform: rotateX(0);opacity: 1;}
}
.lightBkg>div::after{content:"\f00d";font-family:"Font Awesome 5 Free";font-weight:900;font-size:100px;margin-bottom:40px;display: block;position: absolute;top:50px;left: calc((100% - 68.75px)/2);animation: opSh-af 0.4s linear;animation-fill-mode: both;animation-delay: .1s;backface-visibility:hidden;}
@keyframes opSh-af{
    0%{transform:scale(0);}
    60%{transform:scale(1.1);}
    80%{transform:scale(0.9);}
    100%{transform:scale(1);}
}
/* 活動關閉 */