@charset "utf-8";
/* CSS Document */

/****活動用****/
.blackbarnew{
    top:0;
	left:0;
	width:100%;
	height:30px;
    padding:0 10px;
	background-color:#000;
	position: fixed;
	z-index:999;
	overflow: hidden;}

.yeslogo{font-size: 12px; color: #fff; line-height: 30px; letter-spacing: 2px; float: left;}

.yeslogo i{margin-right: 8px; float: left;}

.yeslogo i img{width: 10px; margin-top: 10px;}

.yesgogo{font-size: 12px; color: #fff; line-height: 30px; letter-spacing: 2px; float: right;}

.yesyes{font-size: 15px; color: #fff; font-weight: bold; line-height: 30px; letter-spacing: 1px; margin-right: 4px;}


.pad {
display:none
}

.phone {
display:none
}

.web {
display:block
}

@media screen and (max-width: 800px) {
.web {
display:none
}

.phone {
display:none
}

.pad {
display:block
}
}

@media screen and (max-width: 736px) {
.web {
display:none
}

.pad {
display:none
}

.phone {
display:block
}
}


/*主視覺*/
.main{ width: 100%; margin-top: 30px; background-image: url("../img/main_web.jpg"); background-size: cover; background-repeat: no-repeat;
   position: relative; z-index: 88; background-position: center; transition: all .3s; }

.bg02{ background-image: url("../img/main_web02.jpg");}

.box01{max-width:950px;margin: 0 auto;position:relative; z-index: 8;transition: all .3s; }

.main_h{margin:0 auto; } 

.main_mob{margin-bottom:-3px;}

.buttonbox{position:absolute; z-index: 999; bottom:40px;    left: 48px; max-width: 320px;}

.buttonbox > ul{}
.buttonbox > ul > li{float: left;}
.buttonbox > ul > li:nth-child(1){width: 100%;margin-bottom: 20px;}
.buttonbox > ul > li:nth-child(2){width:calc(100% / 2 - 8px); margin-right: 16px;}
.buttonbox > ul > li:nth-child(3){width:calc(100% / 2 - 8px);}

.gogo {text-align: center; line-height: 1.5; font-size: 32px; font-weight: bold; color: #fff; border-radius: 4px;transition: all .3s; /*background-image:url("../img/button.png");background-repeat: no-repeat;background-size: cover;*/  margin: 0 auto; /*padding: 6px 0;*/ height: 66px;}

.gogo:hover{ -webkit-filter:brightness(1.1);}

.button01{font-size:16px;color: #fff; line-height: 1.5;text-align: center; border: 1px #fff solid; padding: 6px 12px; border-radius: 4px; width: 100%;transition: all .3s;}

.button01:hover{ color: #9affff; border: 1px #9affff solid;}

.button02{font-size:16px;color: #8d0318; line-height: 1.5;text-align: center; border: 1px #8d0318 solid; padding: 6px 12px; border-radius: 4px; width: 100%;transition: all .3s;}

.button02:hover{ color: #c7011f; border: 1px #c7011f solid;}


@media screen and (max-width: 980px) {
 .buttonbox{bottom:30px;}   
}

@media screen and (max-width: 736px) {
.buttonbox > ul > li:nth-child(1){width: 100%; position: fixed; z-index: 999; bottom: 0; left: 0; padding: 12px 20px 16px 20px;
background-color: rgba(0,0,0,0.7); box-shadow: 0 -2px 4px rgba(0,0,0,0.2);margin-bottom: 0; }
    
.gogo{width:100%; border-radius: 4px; margin:0 auto;line-height: 48px; font-size: 22px;height: 52px;}

.buttonbox{bottom:20px;    left: 0; max-width: 100%; margin-left: 0; width: 100%; padding: 0 20px; }
    
.button02{font-size:16px;color: #fff; line-height: 1.5;text-align: center; border: 1px #fff solid; padding: 6px 12px; border-radius: 4px; width: 100%;transition: all .3s;}
}




/*活動內容*/
.bg{position: fixed;top: 30px;right: 0; bottom: 0; left: 0;  z-index: -1;  background-image: url("../img/bg.jpg"); 
    background-repeat: no-repeat;  background-position: top center;  background-size: cover;    transition: all .3s;     }

.bg_red{position: fixed;top: 30px;right: 0; bottom: 0; left: 0;  z-index: -1;  background-image: url("../img/bg02.jpg"); 
    background-repeat: no-repeat;  background-position: top center;  background-size: cover;    transition: all .3s;     }

.page{ max-width: 900px; margin: 30px auto 0; padding: 0px 0 60px;}

.content{overflow: hidden;}

.content > li{width: 100%; margin-bottom: 40px;}
.content > li:nth-last-child(1){margin-bottom:0;}



@media screen and (max-width: 980px) {
    .page{ padding: 0 20px 60px;}
}

@media screen and (max-width: 736px) {
.page{ padding: 0 20px 120px; margin: 20px auto 0; }
.content > li{margin-bottom: 24px;}
    /*.bg{display: none;}
     body{background-color: #19184b;}*/
}

/*line*/
.line{background-image:url("../img/line.png"); background-size: cover; background-position: center; background-repeat: no-repeat;
    height: 40px;transition: all .3s; }

@media screen and (max-width: 736px) {
.line{height: 30px; margin-top: 3px; display: none;}
}

.contentimg{  box-shadow: 0 2px 6px rgb(8, 11, 44, 0.6);transition: all .3s;}
.contentimg:hover{ -webkit-filter:brightness(1.1);}

.contentimg02{  box-shadow: 0 2px 6px rgb(32, 0, 5, 0.6);transition: all .3s;}
.contentimg02:hover{ -webkit-filter:brightness(1.1);}

.connection{text-align: center;}
.connection > h1{color: #ede2b9; font-size: 28px; font-weight:bold;}

.changebar{background-color: rgba(0, 0, 0, 0.3); height: 60px; font-size: 24px; border-bottom:3px #2a2f58 solid;}
.changebar > ul{overflow:hidden;}
.changebar > ul >li{width: 50%;float: left;}

.changebar02{background-color: rgba(0, 0, 0, 0.3); height: 60px; font-size: 24px; border-bottom:3px #693139 solid;}
.changebar02 > ul{overflow:hidden;}
.changebar02 > ul >li{width: 50%;float: left;}


.change{ height: 60px; line-height: 60px;text-align: center;color: #cecece;}
.change02{ height: 60px; line-height: 60px;text-align: center;color: #b08a73;}
.change_ok{ height: 60px; line-height: 60px; color:#ffe1b4;  border-bottom:3px #ffe1b4 solid; font-weight: bold;}

.change:hover{ color:#ffe1b4;  border-bottom:3px #ffe1b4 solid;}
.change02:hover{ color:#ffe1b4;  border-bottom:3px #ffe1b4 solid;}

@media screen and (max-width: 736px) {
.changebar{height: 48px;font-size: 18px;}
.changebar02{height: 48px;font-size: 18px;}
.change{ height: 48px; line-height: 48px;}
.change02{ height: 48px; line-height: 48px;}
.change_ok{ height: 48px; line-height: 48px; }  
}



/*popup*/
.bgblack{position: fixed; top:0; left: 0; bottom: 0; right: 0; z-index: 1000; background-color: rgba(0,0,0,0.7);display: none;}

.popup{ width: 400px; min-height: 280px; position: absolute; top:8%;  z-index: 999; border-radius: 8px; background-color: #fffbda; padding-bottom: 60px;  /*overflow: auto;*/   overflow: hidden;}

.popup h1{font-size: 24px; text-align: center; line-height: 40px; color: #fff; font-weight: bold; position: relative; 
    background-color: #fb278b;}

.popup p{font-size: 16px;line-height: 1.5;text-align: center;padding: 0 16px;margin-bottom: 20px;color: #4b0885; margin-top: -6px;}

.popup h2{font-size: 20px;line-height: 1.2;text-align: center;padding: 14px 16px 0px;color: #4b0885;font-weight: bold;margin-bottom: 12px;}

.popup h3{font-size: 16px;line-height: 1.2;text-align: center;color: #4b0885;margin-bottom: 20px;}

.cantlogin{font-size: 14px; line-height: 1.5; text-align: center; padding: 0px 16px 16px; color: #4b0885;display: none;}

@media screen and (max-width: 736px) {
    .popup h2{margin-bottom: 8px;}
    .cantlogin{display: block;}
}

.fblog {width: 258px; margin: 0 auto;}

.fbshare{width: calc(100%); height: 44px; line-height: 44px; text-align: center; font-size: 18px; color: #fff; background-color: #1877f2; 
    border-radius: 6px; transition: all .3s; cursor: pointer;}

.lineshare{width: calc(100%); height: 44px; line-height: 44px; text-align: center; font-size: 18px; color: #fff; background-color:#00B735;
    border-radius: 6px; transition: all .3s; cursor: pointer;}

.joinus{
    width: calc(100%);
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 22px;
    color: #ffffff;
    background-color: #e40077;
    border-radius: 6px;
    transition: all .3s;
    cursor: pointer;
    font-weight: bold;
    }

.fbshare:hover{ -webkit-filter:brightness(1.1);}
.lineshare:hover{ -webkit-filter:brightness(1.1);}
.joinus:hover{ -webkit-filter:brightness(1.1);}

.box2s{position: absolute; bottom: 16px; left: 16px; width: calc(100% - 32px); overflow: hidden;}

.box2s li{float: left; width:100%; margin-right: 16px;/*padding: 0px 20px 6px;*/}

.box2s li:last-child{margin: 0;}

/*share*/
.box3s{position: absolute; bottom: 16px; left: 16px; width: calc(100% - 32px);  overflow: hidden;}

.box3s li{float: left; width: calc(50% - 8px); margin-right: 16px;}

.box3s li:nth-child(1){float: left; width:100%; margin-bottom: 20px;}

.box3s li:last-child{margin: 0;}

.popup3{ padding-bottom: 120px;}

/*close popup*/
.close{position: absolute; right: 20px; width: 40px; cursor: pointer;}
@media screen and (max-width: 736px) {
    .close{position: absolute; right: 0px; width: 40px; cursor: pointer;}
}


@keyframes op{ from{opacity: 0;} to{opacity: 0.8;}}

@media screen and (max-width: 736px) {    
    .popup{ width: 300px; /*margin:-200px 0 0 -150px;*/ padding-bottom: 16px;}      
    
    .popup3{padding-bottom: 130px;}

    .box2s li{width: 100%; margin-bottom: 8px;}
    
    .box2s{position: static; width: calc(100%); padding: 0 16px; left: auto; bottom: auto;}
    
    .okgod{position: static; left: auto; bottom: auto; width: calc(100% - 32px); margin: 0 auto;}
    
    .close{position: absolute; right: 0px; width: 40px; cursor: pointer;}
}


@media screen and (max-width: 736px)  and  (orientation:landscape) {
    .popup{top:0vh; height: 100vh; width: 400px; overflow-y: auto;}
}



.bodyno{overflow: hidden;}

.goto{
    width: calc(100%);
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    background-color: #e40077;
    border-radius: 6px;
    transition: all .3s;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    }

.copynumber{font-size: 14px; line-height: 1.5; text-align: center; padding: 0px 16px; color: #4b0885;}

.number{font-size: 24px; line-height: 1.5; text-align: center; padding: 0px 16px 16px; color: #4b0885;font-weight: bold;}

/*popup 活動辦法*/
.popup_title{width: 100%; background-color: #fb278b;height: 44px; padding: 0 16px; text-align: center;}

.popup_title h1{font-size: 24px; text-align: center; line-height: 44px; color: #fff; font-weight: bold; position: relative;   
    display: inline-block; }

.popup_title p{font-size: 16px; color: #fff; float: right; line-height: 44px;  /*text-decoration: underline;*/}

.popup_content{padding: 16px 16px 0; height: 70vh; text-align: center;background-size: cover;
    background-repeat: no-repeat;overflow-y: auto;}

.popup_content > ul{overflow: hidden; width: 100%;  }

.popup_content > ul > li{ text-align: left; font-size: 20px;  color: #550a96; margin-bottom: 8px;font-weight: bold;
    line-height: 1.5;}

.popup_content > ul > li > p{font-size: 16px;  color: #333; font-weight: normal;}

.list_s {overflow: hidden; padding-left: 18px;}

.list_s > li{text-align: left; font-size: 16px;  color: #333;  font-weight: normal;line-height: 1.5;list-style-type:disc; 
margin-bottom: 10px;}

/*popup2 中獎名單*/
.popup2 { width: 400px; min-height: 300px; position: absolute; top:8%;  border-radius: 8px; background-color: #fffbda; padding-bottom: 60px; 
    max-height: 80vh; overflow: auto; z-index: 999;  }

.popup2 h1{width: 400px;font-size: 24px;background-color: #fb278b;text-align: center;line-height: 40px;color: #fff;font-weight: bold;position: fixed;z-index: 999;}

.popup2 p{font-size: 16px; line-height: 1.5; text-align: left; padding: 8px 16px 16px; color: #440000;}

.popup2 h2{font-size: 20px; line-height: 1.2; text-align: center; padding: 14px 16px 0px; color: #440000; font-weight: bold; margin-bottom: 24px;}

.popup2 h4{padding: 0px 16px;font-size: 16px;color: #550a96;overflow: hidden;margin-bottom: 12px;text-align: center;}


.winners {width:100%;  padding: 8px 24px;   text-align: center;}

.winners h3{font-size: 20px; line-height: 48px; text-align: center; color: #440000;  font-weight: bold;  display: inline-block;}


@media screen and (max-width: 736px) {
    .featlogo {width: 160px; margin-right: 12px;}
    .popup2 {max-height:none; width: 100%; top:0; bottom: 0; right: 0; left: 0!important; border-radius: 0px; }
    .popup2 h1{width: 100%;}
}


.winnerbox{width:100%; padding-top: 40px;z-index: 88;}

.winner_table{ width: 100%; padding: 0 16px 20px;}

.winner_table table{width: 100%; }

.winner_table td{max-width: 200px; border: 1px solid #ccc; font-size: 16px; height: 40px; line-height: 40px; color: #444; overflow: hidden;
    text-overflow: ellipsis;   white-space: nowrap;  padding: 0px 10px;}

.winner_table td:nth-child(1){width: 25%; text-align: center;}

.winner_table tr:nth-child(odd){background-color: #f2f2f2;}

.winner_table tr:nth-child(even){background-color: #fff;}

.winner_table tr:nth-child(1){background-color: #d4f1ff;     text-align: center;}

/*倒數計時*/
.time{
	max-width: 350px;
	color: #ffe1b4;
	font-size:36px;
	background-color:rgba(0,0,0,0.6);
	border-radius: 4px;
	padding: 12px 20px;
	box-sizing: border-box;
	margin: 0 auto;
	box-shadow: 0 0px 10px 0px rgba(0,0,0,0.3) inset;
}

.sday{font-size:16px; margin-left: -5px; color: #dddddd; }

.buttonbox h2{font-size: 14px; color: #fff; margin-bottom: 8px; letter-spacing: 2px;}

@media screen and (max-width: 736px) {
.time{padding: 16px;font-size: 36px;/* max-width: 250px; */text-align: center;background-color: #ffe1b4; color:#302416;
    	box-shadow: 0 0px 0px 0px rgba(0,0,0,0.3) inset;}    
.sday{font-size:18px; color:#614f38;}
.buttonbox h2{font-size: 16px; text-align: center;}
}

@media screen and (max-width: 330px) {
.time{font-size: 30px}
}

/*活動獎項*/

.awards{ width: 100%; padding: 0 0px 20px; }

.awards table{width: 100%;  }

.awards td{ border: 1px solid #ccc; font-size: 12px; min-height: 40px; line-height: 1.5; color: #444; overflow: hidden;
    text-overflow: ellipsis; padding: 4px; text-align: center; }


.awards tr:nth-child(odd){background-color: #f2f2f2;}

.awards tr:nth-child(even){background-color: #fff;}

/*.awards td:nth-child(1){width: 30%;}
.awards td:nth-child(2){width: 30%;}
.awards td:nth-child(3){width: 10%;}
.awards td:nth-child(4){width: 30%;}*/