@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:clapse; border-spacing: 0;}
body { font-family: "微軟正黑體" !important;}
.clearfix {clear: both;}

main{background: #e62c20;position: relative;overflow: hidden;box-sizing: border-box;padding:80px calc((100% - 975px)/2);}
main::after{content:'';background:url(../images/result-1.png)no-repeat;background-size: cover;background-position:100% 0; position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
main .leftup{width: 30%;position: absolute;top: 0;left: 0;}
main .leftdown{width: 30%;position: absolute;bottom: 0;left: 0;}
main .rightdown{width: 30%;position: absolute;bottom: 0;right: 0;}
main .con1{max-width:15%;position: absolute;top: 5%;left:-5%; z-index:5;animation:moveCo 3s linear infinite; animation-fill-mode: both;animation-delay:1s;}
main .con3{width:17%;position: absolute;bottom: 5%;right:-5%; z-index:5;animation:moveCo 3s linear infinite; animation-fill-mode: both;animation-delay:1.5s;}

.main{position: relative;z-index: 10;display: flex;justify-content: space-between;flex-wrap: wrap;}
.main::before{content:'登登登愣～～你未來的好運指數';font-size: 28px;color: #fff;font-weight: bold;width: 100%;display: block;margin-bottom: 20px;}
.main>div{width: 49.5%;}

.main .imgCon{background:url(../images/luckyCard.png)no-repeat;padding-bottom:66%;background-size:100% 100%;position: relative;animation:rotateCard 1s linear;width: 49.5%;}
@keyframes rotateCard{
    from{transform: rotateY(90deg);}
    to{transform: rotateY(0deg);}
}
.main .imgCon>li{box-sizing: border-box;padding:23% 11% 24% 11%;position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-flow: column;justify-content: space-between;}

.main .imgCon>li>img{display: block;margin: 0 auto 8px auto;height:300px;}
.main .imgCon>li div{background: #cf8218;color: #fff;font-size: 20px;font-weight: bold;box-sizing:border-box;padding:15px 5%;border-radius: 10px;height: 100%;line-height: 1.3;text-align: center;display: flex;flex-wrap: wrap; justify-content: center;align-items: center;}

.main .imgCon>li .star{position: absolute;top:5%;left:0%;width:100%;background: transparent;text-align: center;height: auto;}
.main .imgCon>li .star ul{display: inline-flex;justify-content: center;}
.main .imgCon>li .star li.shst{opacity:1;}
.main .imgCon>li .star li::before{content:'\f005';font-family:"Font Awesome 5 Free";font-weight: 900;font-size: 40px;}
.main .imgCon>li .star li.halfStar{position: relative;}
.main .imgCon>li .star li.halfStar::before{content:'\f089';font-family:"Font Awesome 5 Free";font-weight: 900;font-size: 40px;}
.main .imgCon>li .star li.halfStar::after{content:'\f089';font-family:"Font Awesome 5 Free";font-weight: 900;font-size: 40px;color: #fff;transform: scaleX(-1);position: absolute;right: 0;top: 0;}

.main .imgCon-1 .star ul{color: #6381b3;}
.main .imgCon-2 .star ul{color: #d42d22;}
.main .imgCon-3 .star ul{color: #814d86;}
.main .imgCon-4 .star ul{color: #00a5a5;}
.main .imgCon-5 .star ul{color: #af1314;}

.main .content{background: #fff;border-radius: 20px;padding:45px 30px;box-sizing: border-box;animation:rotateCard 1s linear;}
.main .content p{font-size: 20px;margin-bottom: 10px;line-height: 1.3;}
.main .content .directive{color:#af1314;margin-bottom: 20px;}
.main .content .directive em{font-weight: bold;}
.main .content form{text-align: center;}
.main .content form>input{width: 100%;font-size: 18px;box-sizing: border-box;padding:10px 13px 12px 13px;margin-bottom: 10px;border-radius: 5px;border: 1px solid #bcbcbc;}
.main .content .remind{color: #0b646e;font-weight: bold;font-size: 18px;margin:10px 0 20px 0;text-align: left;line-height: 1.6;}
.main .content .acceptP{font-size: 18px;color: #000;margin-bottom: 30px;text-align: left;}
.main .content .acceptP a{color: #000;}
.main .content form>a{font-size: 22px;background: #0b646e;color: #fff;display: inline-block;padding: 15px 90px;text-decoration: none;border-radius: 50px;font-weight:bold;}

footer{font-size: 14px;background: #fff;color: #af1314;box-sizing: border-box;padding: 18px 0;text-align: center;line-height: 1.3;}

/* other */
@media screen and (max-width: 1050px){
    main{padding: 80px 1%;}
}

/* ipad */
@media(max-width:768px){
    .wrap{display: flex;flex-flow: column;}
    .wrap main{height: 100%;}


    main{padding:200px 1% 120px 1%;}
    main::after{background-position: 80% 0px;}
    .main::before{color: #000;text-align: center;font-size: 32px;}
    .main .imgCon{padding-bottom: 0;}
    .main .imgCon>li{position: static;display: block;}
    .main .imgCon>li .star{position: static;padding:0 1% 10px 1%;}
    .main .imgCon>li>img{width:80%;height: auto;margin-bottom:20px;}
    .main .imgCon>li div{font-size:19px;padding: 10px 1%;height: auto;width:96%;margin: 0 auto;}
    .main .content{padding:40px 30px;}
    .main .content form>input{padding:8px 13px;font-size: 16px;}
    .main .content .remind{line-height: 1.3;}
    .main .content .acceptP{margin-bottom:20px;}
    .main .content form>a{font-size: 20px;padding: 10px 60px;}
}

/* phone */
@media(max-width:600px){
    main{padding:30px 1%;}
    main::after{display: none;}
    .main{flex-wrap: wrap;width: 96%;margin: 0 auto;}
    .main::before{color: #000;font-size:20px;}
    .main>div{width: 100%;}
    .main .imgCon{width: 100%;}
    .main .imgCon{padding-bottom: 0;margin-bottom: 20px;}

    .main .imgCon>li {padding: 23% 10% 24% 10%;}
    .main .imgCon>li .star li::before{font-size: 28px;}
    .main .imgCon>li .star li.halfStar::before{font-size: 28px;}
    .main .imgCon>li .star li.halfStar::after{font-size: 28px;}
    .main .imgCon>li div{font-size: 5.2vw;padding: 10px 2%;}

    .main .content{padding:30px 15px;}
    .main .content p{font-size:18px;}
    .main .content .remind{line-height: 1.5;font-size: 16px;}
    .main .content .acceptP{font-size: 16px;}
    .main .content form>a{padding: 10px 50px;}
}