*:link, *:visited, *:hover, *:active, *:focus, * {
    -o-transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
    -webkit-transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
    -moz-transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
    transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
}

.eventPage {
	overflow: hidden;
	position: relative;
	width:100%;
	max-width: 768px;
	margin: 0 auto;
	line-height: 0;
}
.eventPage img{
    width: 100%;
}


.eventPage .TT {
    position: absolute;
    width: 100%;
    top: 0%;
    left: 0;
    z-index: 50; 
    animation: TT 6S both infinite;   
}
@keyframes TT {
    0%{
        opacity: 0;
        top: -1%;
    }
    10%,100% {
        opacity: 1;
        top: 0%;
        left: 0%;
    }
}
.eventPage .Castle {
    position: absolute;
    width: 100%;
    top: 15%;
    left: 0;
    z-index: 6; 
    animation: Castle 1.5S both 0.3s;   
}
.eventPage .twmlogo {
    position: absolute;
    width: 100%;
    top: 0%;
    left: 0;
    z-index: 50; 
}

.eventPage .Castle {
    position: absolute;
    width: 100%;
    top: 15%;
    left: 0;
    z-index: 6; 
    animation: Castle 1.5S both 0.3s;   
}
@keyframes Castle {
    0%{
        opacity: 0;
        top: 17%;
    }
    48%,100% {
        opacity: 1;
        top: 15%;
    }
}


.eventPage .airplan1 {
    width: 14%;
    top: 8%;
    right:2.2%;
    z-index: 3;
    position: absolute;
    animation: airplan1 6S both infinite;
}

@keyframes airplan1 {
    0% {
        opacity: 1;
        top: 8%;
    }

   10%,100% {
        opacity: 1;    
        top: 5.5%;  
    }
}
.eventPage .ball-1 {
    width: 12%;
    top: 20%;
    right:2.1%;
    z-index: 3;
    position: absolute;
    animation: ball-1 6S both 0.5s infinite, run 1s both ;
}

@keyframes ball-1 {
    0% {
        opacity: 1;
        top: 15%;
    }
    50%{
        opacity: 1;    
        top: 17%; 
    }
    100% {
        opacity: 1;    
        top: 15%;  
    }
}
.eventPage .ball-2 {
    width: 18%;
    top:9%;
    left:-2%;
    z-index: 60;
    position: absolute;
    animation: ball-2 7S both infinite, run1 1s both 0.5s;
}

@keyframes ball-2 {
    0% {
        opacity: 1;
        top: 11%;
    }
    50%{
        opacity: 1;    
        top: 9%; 
    }
    100% {
        opacity: 1;    
        top: 11%;  
    }
}

.eventPage .ball-3 {
    width: 12%;
    top: 40%;
    right:1.5%;
    z-index: 50;
    position: absolute;
    animation: ball-3 6S both 0.5s infinite, run 1s both ;
}

@keyframes ball-3 {
    0% {
        opacity: 1;
        top: 42%;
    }
    50%{
        opacity: 1;    
        top: 40%; 
    }
    100% {
        opacity: 1;    
        top: 42%;  
    }
}
.eventPage .ball-4 {
    width: 18%;
    top: 50%;
    left:0.5%;
    z-index: 3;
    position: absolute;
    animation: ball-4 7S both infinite, run1 1s both 0.5s;
}

@keyframes ball-4 {
    0% {
        opacity: 1;
        top:  50%;
    }
    50%{
        opacity: 1;    
        top: 48%; 
    }
    100% {
        opacity: 1;    
        top: 50%;  
    }
}

.eventPage .ball-5 {
    width: 12%;
    top: 60%;
    right:2.3%;
    z-index: 3;
    position: absolute;
    animation: ball-5 6S both 0.5s infinite, run 1s both ;
}

@keyframes ball-5 {
    0% {
        opacity: 1;
        top: 60%;
    }
    50%{
        opacity: 1;    
        top: 58%; 
    }
    100% {
        opacity: 1;    
        top: 60%;  
    }
}
.eventPage .ball-6 {
    width: 18%;
    top: 70%;
    left:0.5%;
    z-index: 3;
    position: absolute;
    animation: ball-6 7S both infinite, run1 1s both 0.5s;
}

@keyframes ball-6 {
    0% {
        opacity: 1;
        top:  70%;
    }
    50%{
        opacity: 1;    
        top: 68%; 
    }
    100% {
        opacity: 1;    
        top: 70%;  
    }
}

.eventPage .ball-7 {
    width: 12%;
    top: 80%;
    right:1%;
    z-index: 3;
    position: absolute;
    animation: ball-7 6S both 0.5s infinite, run 1s both ;
}

@keyframes ball-7 {
    0% {
        opacity: 1;
        top: 80%;
    }
    50%{
        opacity: 1;    
        top: 78%; 
    }
    100% {
        opacity: 1;    
        top: 80%;  
    }
}
.eventPage .ball-8 {
    width: 18%;
    top: 92%;
    left:0.5%;
    z-index: 3;
    position: absolute;
    animation: ball-8 7S both infinite, run1 1s both 0.5s;
}

@keyframes ball-8 {
    0% {
        opacity: 1;
        top:  90%;
    }
    50%{
        opacity: 1;    
        top: 92%; 
    }
    100% {
        opacity: 1;    
        top: 90%;  
    }
}



@keyframes run{
    0%{transform:rotateY(0deg); opacity: 0;}
    30%{transform:rotateY(720deg); opacity: 1;}
    100%{transform:rotateY(0deg); opacity: 1;}
}
@keyframes run1{
    0%{transform:rotateY(0deg); opacity: 0;}
    30%{transform:rotateY(-450deg); opacity: 1;}
    100%{transform:rotateY(0deg); opacity: 1;}
}
.eventPage .btn01 {
    width:100%;
    position     : absolute;
    top          : 4.5%;
	left:0%;
    display      : block;
    z-index      : 6;
    cursor       : pointer;
}
.eventPage .btn02 {
	clear: both;
    width:100%;
    position     : absolute;
    top          : 10.5%;
	left:0%;
    display      : block;
    z-index      : 10;
    cursor       : pointer;

}
.eventPage .btn03 {
    width:100%;
    position     : absolute;
	bottom:0%;
	left:0%;
    display      : block;
    z-index      : 6;
    cursor       : pointer;
}
.eventPage .btn04 {
    width:42%;
    position     : absolute;
    top          : 68.2%;
	left:51.25%;
    display      : block;
    z-index      : 6;
    cursor       : pointer;

}
.eventPage .btn05 {
    width:42%;
    position     : absolute;
    top          : 82.9%;
	left:7%;
    display      : block;
    z-index      : 6;
    cursor       : pointer;
}
.eventPage .btn06 {
    width:42%;
    position     : absolute;
    top          : 82.9%;
	left:51.25%;
    display      : block;
    z-index      : 6;
    cursor       : pointer;

}

@keyframes btn {
    0% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.eventPage .icon01 a, .eventPage .icon02 a, .eventPage .icon03 a, .eventPage .icon04 a, .eventPage .icon05 a, .eventPage .icon06 a{
    width: 24.7%;
    position: absolute;
    animation: CButton 2s both;
    z-index: 9;
}
.eventPage .icon07 a{
    position: absolute;
    animation: CButton 2s both;
    z-index: 9;
}
@keyframes CButton {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% { opacity: 1;}
}

@keyframes CButton1 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% { opacity: 1;}
}
.eventPage .icon01 a, .eventPage .icon02 a, .eventPage .icon03 a{
    bottom: 39.4%;
}
.eventPage .icon04 a, .eventPage .icon05 a, .eventPage .icon06 a{
    bottom: 29.5%;
}
.eventPage .icon07 a{
    bottom: 0.5%;
}
.eventPage .icon01 a{left:10.8%;animation: CButton1 2s both 0.3s;}
.eventPage .icon02 a{left:38.2%;animation: CButton1 2s both 0.5s;}
.eventPage .icon03 a{left:65.7%;animation: CButton1 2s both 0.7s;}
.eventPage .icon04 a{left:10.8%;animation: CButton1 2s both 0.9s;}
.eventPage .icon05 a{left:38.2%;animation: CButton1 2s both 1.1s;}
.eventPage .icon06 a{left:65.7%;animation: CButton1 2s both 1.3s;}
.eventPage .icon07 a{left:0;animation: CButton1 2s both 1.5s;}
.eventPage .icon01 img, .eventPage .icon02 img, .eventPage .icon03 img, .eventPage .icon04 img, .eventPage .icon05 img, .eventPage .icon06 img, .eventPage .icon07 img{

        }
.eventPage .icon01 a img, .eventPage .icon02 a img, .eventPage .icon03 a img, .eventPage .icon04 a img, .eventPage .icon05 a img, .eventPage .icon06 a img, .eventPage .icon07 a img{
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
.eventPage .icon01 a:hover img, .eventPage .icon02 a:hover img, .eventPage .icon03 a:hover img, .eventPage .icon04 a:hover img, .eventPage .icon05 a:hover img, .eventPage .icon06 a:hover img, .eventPage .icon07 a:hover img{

    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -webkit-transform: scale3d(1.05, 1.05, 1);
    transform: scale3d(1.05, 1.05, 1);
    }

    .eventPage .boom{
        width: 50%;
    position: absolute;
    bottom: 0%;
    left:0;
    z-index: 9;
    }


    .eventPage .car{
        width: 14%;
        position: absolute;
        bottom: 0;
        right: 0;
        animation: car 8s infinite;
        z-index: 9;
        }
        @keyframes car {
            0%,100%{
                bottom:0%
            }
            50%{
                bottom: 5%;
            }
        }

        /*popup視窗*/
.event201606-layer {
    position: fixed;
    left    : 0;
    top     : 0;
    width   : 100%;
    height  : 100%;
    z-index : 9999;
}

.event201606-layer .layer-mask {
    background-color: black;
    opacity         : 0.85;
    width           : 100%;
    height          : 100%;
    position        : absolute;
    top             : 0;
    left            : 0;
    z-index         : 9;
}

.event201606-layer .layer-inner {
    position             : absolute;
    left                 : 50%;
    top                  : 15%;
    width                : 300px;
    margin               : 20px 0 0 -150px;
    padding              : 4px;
    z-index              : 10;
    -webkit-border-radius: 20px;
    -moz-border-radius   : 20px;
    border-radius        : 20px;
    background           : #ee077b;
}

.event201606-layer .layer-inner .btn-x {
    background : url(https://www.myfone.com.tw/buy/myfoneweb/buy/event2021/211129/img_btn_close.png) 0 0 no-repeat;
    position   : absolute;
    right      : 0;
    top        : 0;
    width      : 41px;
    height     : 41px;
    display    : block;
    white-space: nowrap;
    text-indent: 100%;
    overflow   : hidden;
}

.event201606-layer .layer-inner .btn-x:hover,
.event201606-layer .layer-inner .btn-x:focus {
    background-position: -41px 0px
}

.event201606-layer .layer-inner .layer-content {
    text-align      : center;
    background-color: #FFF;
    overflow        : hidden;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    border-radius        : 10px;
    width: 94%;
    margin: 3%;
}

.event201606-layer .layer-inner .layer-content h2 {
    font-size  : 27px;
    font-weight: 700;
    line-height: 1.2em;
    margin     : 40px auto 0px;
    color      : #0e1e35;
}

.event201606-layer .layer-inner .layer-content h3 {
    font-size  : 23px;
    font-weight: normal;
    margin     : 0 0 20px;
}

.event201606-layer .layer-inner .layer-content .btn-send {
    padding              : 10px 50px;
    color                : #FFF;
    text-shadow:#df0000 0.1em 0.1em 0.2em;
    font-size            : 20px;
    font-weight          : 700;
    margin               : 20px;
    display              : inline-block;
    -webkit-border-radius: 5px;
    -moz-border-radius   : 5px;
    border-radius        : 5px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c60307+0,990002+100 */
background: #c60307; /* Old browsers */
background: -moz-linear-gradient(top,  #c60307 0%, #990002 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #c60307 0%,#990002 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #c60307 0%,#990002 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c60307', endColorstr='#990002',GradientType=0 ); /* IE6-9 */


}
.event201606-layer .layer-inner #prize_name3{
    font-size: 22px;
}
.event201606-layer .layer-inner .layer-content p {
    background: #FFF;
    padding   : 6px;
    color     : #515151;
    font-size : 17px;
    min-height: 2.4em;
    margin    : 10px auto 5px auto;
    text-align: center;
}

.event201606-layer .layer-inner .layer-content p b {
    font-size: 22px;
    color    : #fe3950;
}

.event201606-layer .layer-inner .layer-content p span {
    font-size: 13px;
    display  : block;
    color: #990002;
}

.event201606-layer .layer-inner .layer-content .img-piggy img {
    width: 40%;
}

.event201606-layer .layer-inner .layer-content .note1 {
    background    : #ffc830;
    width         : 100%;
    padding       : 6px;
    color         : #000;
    font-size     : 25px;
    letter-spacing: 0.1em;
    min-height    : 2.4em;
    text-align    : center;
}

.event201606-layer .layer-inner .layer-content .note1 .Box {
    width : 100%;
    margin: 5px auto;
}