#mtkContainer {
    text-align: left;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;
    background-color: #b956cc;
}

#mtkContainer * {
    transition: all 0.2s , font-size 0s;
}

.wrapper {
    position: relative;
    width: 94%; max-width: 1400px;
    margin: 0 auto;
}

img {
    border: 0;
    vertical-align: top;
}
.poi-header .mobile-menu-level-1 .tab .tablinks .tablinks-img{width: auto;}
#set-footer-base{z-index: 99;}

a {
    text-decoration: none;
}





:root {
  --color-purple: #d788e6;    
}



.header{
    position: relative;
    height: 900px;
    overflow: hidden;
    background:url(../images/bg-header2.jpg) center top no-repeat;
}

.header h1{
    position: absolute;
    left: 50%; top: 0;
    transform: translate(-635px,60px);
}
.header h1 img.h1-img{
}
.header h1 img.h1-1{
    position: absolute;
    left: 83px;
    top: 171px;
    animation:catTitle 0.4s 0.5s ease-in-out;
}
.header h1 img.h1-2{
    position: absolute;
    left: 339px;
    top: 174px;
    animation:catTitle 0.4s 0.6s ease-in-out;
}
.header h1 img.h1-3{
    position: absolute;
    left: 593px;
    top: 174px;
    animation:catTitle 0.4s 0.7s ease-in-out;
}
.header h1 img.h1-4{
    position: absolute;
    left: 851px;
    top: 173px;
    animation:catTitle 0.4s 0.8s ease-in-out;
}
.header h1 img.h1-5{
    position: absolute;
    left: 161px;
    top: 240px;
    animation:cateye 4s 0.5s linear infinite alternate;
    transform-origin: center bottom;
}
@keyframes catTitle {
     0% { transform: scale(1); }
    50% { transform: scale(0.9,0.3);  }
    100% { transform: scale(1);  }
}
@keyframes cateye {
     0% { transform: scaleY(1); }
    4% { transform: scaleY(0);  }
    8% { transform: scaleY(1);  }
    40% { transform: scaleY(1);  }
    43% { transform: scaleY(0);  }
    46% { transform: scaleY(1);  }
    49% { transform: scaleY(0);  }
    52% { transform: scaleY(1);  }
}

.header-nav{
    position: absolute;
    left: 50%; top: 0;
    margin-top: 625px;
    transform: translateX(-50%);
    white-space: nowrap;
}
.header-nav a{
    display: inline-block;
    margin: 0 25px;
}
.header-nav a:hover{
    filter: brightness(1.1);
    transform: translate(2px,2px);
}

.header-bg{position: relative;}

.header-bg .mess{
    position: absolute;
    left: 50%;
    top: -350px;
    margin-left: -715px;
}
.header-bg .mess .messRotate{
    animation:messRotate 120s linear infinite;
}
@keyframes messRotate {
     0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.header-bg .mess .messScale{
    opacity: 0;
    animation:messScale 4s linear infinite;
}
.header-bg .mess .messScale2{
    opacity: 0;
    animation:messScale 4s 2s linear infinite;
}
@keyframes messScale {
     0% { transform: scale(1); opacity: 0;  }
     50% { opacity: 0.6;  }
     75% { transform: scale(1.2); opacity: 0;  }
     100% { transform: scale(1.2); opacity: 0;  }
}

@media screen and (max-width:1300px) {
    .header{
            height: 68vw;
            background:url(../images/bg-header-m.jpg) center top no-repeat;
            background-size: 100%;
    }
    .header-pc{display: none;}
    .header-nav{
        width: 96%;
        margin-top: 50vw;
    }
    .header-nav a{ margin: 0 1%; }
    .header-nav a:first-child{
        width: 30%;
        text-align: right;
    }
    .header-nav a:first-child img{
        width: 100%;
        max-width: 284px;
    }
    .header-nav a:last-child{
        width: 66%;
    }
    .header-nav a:last-child img{
        width: 100%;
        max-width: 624px;
    }
}




.poiWrap{
    position: relative;
    padding: 70px 0;
    overflow: hidden;
}
.poiWrap:before{
    content: '';
    width: 1408px;
    height: 1233px;
    background: url(../images/mess-1.png) no-repeat;
    position: absolute;
    left: 0; top: 50%;
    animation:messA 90s linear infinite;
    opacity: 0.6;
    pointer-events: none;
}
.poiWrap:after{
    content: '';
    width: 1408px;
    height: 1233px;
    background: url(../images/mess-1.png) no-repeat;
    position: absolute;
    right: 0; top: 50%;
    animation:messB 90s linear infinite ;
    opacity: 0.6;
    pointer-events: none;
}
.poiWrap#cat-3:before , .poiWrap#cat-3:after{
    background: url(../images/mess-2.png) no-repeat;
}
@keyframes messA {
   from { transform: translate(-70%,-50%) rotate(0deg); }
     to { transform: translate(-70%,-50%) rotate(360deg); }
}
@keyframes messB {
   from { transform: translate(70%,-50%) rotate(0deg); }
     to { transform: translate(70%,-50%) rotate(360deg); }
}

#cat-2{
    margin-top: -60px;
}
#cat-3{
    background: #d788e6;
}

.poiWrap h2{
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
}
.poiWrap h2 img{
    vertical-align: middle;
    padding: 0 10px;
}

.poi{
    position: relative;
    z-index: 2;
    padding-bottom: 25px;
    width: 98%;
    margin: 0 auto;
}

.phgroupWrap{
    display: none;
}
.phgroupWrap.on{
    display: block;
}

@media screen and (max-width:1300px) {
    .poiWrap{
        padding: 5vw 0;
    }
    .poiWrap:before , .poiWrap:after{
        display: none;
    }
    #cat-2{
        margin-top: 0;
    }
    .poiWrap h2 img{
        display: block;
        padding: 0;
        margin: 10px auto;
    }
    .poiWrap h2 img.h2-cat{
        width: 40%;
        max-width: 280px;
    }
    .poiWrap h2 img.h2-text{
        height: 14.5vw;
        max-height: 141px;
    }
}

@media screen and (max-width:960px) {
    .poi{
        padding-bottom: 2%;
    }
}




.white-bg{
    background: white;
    position: relative;
}


.bg-gradient{
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 200px;
background: rgb(185,86,204);
background: -moz-linear-gradient(top,  rgba(185,86,204,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top,  rgba(185,86,204,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom,  rgba(185,86,204,1) 0%,rgba(255,255,255,1) 100%);
}


/*kao*/
.kao{
    position: relative;
    padding: 70px 0;
    width: 90%;
    max-width: 860px;
    margin:0 auto;
}
.kao h2{
    text-align: center;
}

@media screen and (max-width: 1300px){
    .kao{
        padding: 5vw 0;
    }
    .kao h2 img{
        height: 14.5vw;
        max-height: 141px;
    }
}


.kao-luckydraw{
    font-size: 30px;
    color: #00ad8c;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.3;
    padding: 1em 0;
    margin: 1em auto;
    border-top: solid 1px #00ad8c;
    border-bottom: solid 1px #00ad8c;
}
.kao-luckydraw section p strong{
    font-size: 166%;
}
.kao-logo{
    padding:0 1em;
}

.kao-product{
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: #4c4c4c;
}
.kao-product-section{
    display: flex;
    justify-content: center;
}
.kao-product-section:last-child{
    margin-top: 1em;
}
.kao-product-section:nth-of-type(2) .kao-product-pic{
    order: 1;
}
.kao-product-pic{width: 400px;}
.kao-product-pic img{width: 100%; max-width: 400px;}
.kao-product-intro{
    width: calc(100% - 400px);
    padding-top: 1em;
}
.kao-product-intro h5{
    font-size: 100%;
    color: #d788e6;
    color: var(--color-purple);
}
.kao-product-intro h5 b{
    display: inline-block;
    background: #d788e6;
    background: var(--color-purple);
    border-radius: 5em;
    color: white;
    padding: 0.2em 1em;
    font-size: 125%;
    line-height: 1.2;
}
.kao-product-intro h5 span{
    display: block;
    padding: 0.1em 1em;
}
.kao-product-intro > p{
    padding: 1em;
}

@media screen and (max-width: 860px){
    .kao-luckydraw{
        font-size: 20px
    }
    .kao-product{
        font-size: 16px
    }
    .kao-product-pic{width: 50%;}
    .kao-product-intro{width: 50%;}
}

@media screen and (max-width: 640px){
    .kao-luckydraw{
        flex-wrap: wrap;
    }
    .kao-luckydraw section{
        width: 100%;
        text-align: center;
    }
    .kao-logo{
        padding:0 0 1em 0;
    }
    .kao-product-section{ flex-wrap: wrap; text-align: center; }
    .kao-product-section:nth-of-type(2) .kao-product-pic{
        order: 0;
    }
    .kao-product-pic{width: 100%;}
    .kao-product-intro{width: 100%; padding-top:0;}
    .kao-product-intro > p { padding: 0em;}
}



/*fixedBtn*/
#mtkContainer .fixedWrap{
    transition: none;
}

.fixedWrap{
    display: none;
}

.fixedBtn{
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 98;
}
.fixedBtn-a{
    display: block;
    position: relative;
    font-size: 16px;
    color: #b956cc;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.05em;
    line-height: 1.2;
    transform: translateX(-25px);
}
.fixedBtn-a p{
    display: block;
    background:url(../images/dialog.png) no-repeat;
    width: 150px;
    height: 93px;
    padding-top: 1.4em;
    transform: scale(0.8) translateY(10%);
}
.fixedBtn-a img{
    width: 100px;
    transform: translate(-11%,-28%);
    filter: drop-shadow(1px 1px 2px #b956cc) drop-shadow(0px 0px 1px #b956cc);
}

.fixedBtn-a:hover{
    transform: translateX(10px);
}
.fixedBtn-a:hover p{
    transform: scale(1) translateY(0);
}

@media screen and (max-width: 1600px){
    .fixedBtn{
        top: inherit;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        transform: none;
    }
    .fixedBtn-a{
        color: white;
        transform: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
         white-space: nowrap;
         padding: 0.5em 1em;
    }
    .fixedBtn-a p{
        background: none;
        width: auto;
        height: auto;
        padding-top: 0;
        transform: none;
    }
    .fixedBtn-a img{
        width: auto;
        height: 2em;
        transform: none;
        padding-left: 5px;
        filter: none;
    }
    .fixedBtn-a:hover{
        transform: none;
        color: #fff36e;
    }
    .fixedBtn-a:hover p{
        transform: none;
    }
}

@media screen and (max-width: 800px){
    .fixedBtn{
        overflow-x: scroll;
        justify-content: flex-start;
        padding-bottom: 8px;
    }
    .fixedBtn-a{
         font-size: 12px;
         padding: 0.5em 0.8em;
    }
}







/*ex*/
.ex{
    padding: 70px 0;
    margin:0 auto;
    border-top: dotted 2px var(--color-purple);
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.03em;
    padding: 2em 0;
        color: #4c4c4c;
}
.ex h2{
    text-align: center;
}
.ex-content{
    display: block;
    width: 94%;
    max-width: 920px;
    margin: 0 auto;
    padding: 1em 0;
}
.ex-content li{
    list-style-type: decimal;
    padding: 0.5em 0;
    margin-left: 1em;
}
.ex-content li span{
    color: red;
}
.ex-content li a{
    background: #fff36e;
}
.ex-content li a:hover{
    text-decoration: underline;
}

@media screen and (max-width: 1300px){
    .ex{
        padding: 5vw 0;
    }
    .ex h2 img{
        height: 8.5vw;
        max-height: 80px;
    }
}

@media screen and (max-width: 860px){
    .ex{
        font-size: 14px;
    }
}






/*活動表格*/
.awardTable {text-align: center; width: 100%; border: 1px #4c4c4c solid; }
.awardTable tr { color: #4c4c4c;font: 18px/1.8 "arial", "微軟正黑體";}
.awardTable tr td {padding: 5px; border: 1px #c972f0 solid;}
.awardTable tr:nth-of-type(1) {background: #c972f0; color: #FFF; font: bold 24px/1.8 "arial", "微軟正黑體"; padding: 20px; text-align: center; }

@media screen and (max-width:600px) {
.awardTable tr:nth-of-type(1) {font: bold 18px/1.8 "arial", "微軟正黑體";}
.awardTable tr { font: 16px/1.8 "arial", "微軟正黑體";}
}