@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_web02.jpg"); background-size: cover; background-repeat: no-repeat;
   position: relative; z-index: 88; background-position: center;}


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

.main_h{margin:0 auto; } 

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


.mainbox{
    position: absolute;
    bottom: 48px;
    width: 100%;
    transition: all .3s;
    background-image: url("../img/frame.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 56px 50px 36px;
    }
.mainbox > ul{overflow: hidden;}
.mainbox > ul > li{float: left;}
.mainbox > ul > li:nth-child(1){width:calc(100% - 260px);  padding-right: 24px;}
.mainbox > ul > li:nth-child(2){width:260px;}

.buttonbox{position:absolute;z-index: 999;/*bottom:40px;    left: 48px;*/max-width: 260px;top: 50px;}

.buttonbox > ul{}
.buttonbox > ul > li{float: left;}
.buttonbox > ul > li:nth-child(1){width: 100%;margin-bottom: 14px;}
.buttonbox > ul > li:nth-child(2){width:calc(100% / 2 - 8px); margin-right: 14px;}
.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:#ffd76d; line-height: 1.5;text-align: center; border: 1px #ffd76d solid; padding: 6px 12px; border-radius: 4px; width: 100%;transition: all .3s;}

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

@media screen and (max-width: 980px) {
  .main{background-image: url("../img/main_pad02.jpg");}
    
  .mainbox{bottom: -5px;     padding: 50px 20px 36px;}
}

@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{left: 0; max-width: 100%; margin-left: 0; width: 100%; padding: 0 20px;top: auto; margin-top: 20px;}
    
.mainbox{bottom: -5px; padding: 42px 20px 90px 20px;}
.mainbox > ul > li:nth-child(1){width:100%; padding-right: 0;    margin-bottom: 8px;}
.mainbox > ul > li:nth-child(2){width:100%;  padding-right: 0;}
    
.button01{font-size:14px;}
}

@media screen and (max-width: 320px) {
.mainbox{bottom: -5px; padding: 34px 20px 86px 20px;}
}

.goldbar{width:100%;position: relative;z-index: 88;transition: all .3s;/*background-image: url("../img/frame.png");background-repeat: no-repeat;
background-position: center;background-size: cover;padding: 38px 20px 26px 20px;*/}

.goldbar h3{ font-size: 22px;    margin-bottom: 16px; color: #fff;}

.goldbox {z-index: 3;   position: relative;transition: all .3s;  }
.goldbox > ul{overflow:hidden;}
.goldbox > ul >li{width:calc(100% / 5); float: left; text-align: center;}
.bar{position:absolute;bottom: 62px;z-index: 1;transition: all .3s; right: -8px;  left: -6px;}
/*.goldbox p{font-size: 20px;color: #fff;}*/
.date{font-size: 20px;color:#b9773c;}
.date_ok{font-size: 20px;color:#ffbd0f;}


.gold{width: 84px;margin: 0 auto;transition: all .3s;}

@media screen and (max-width: 980px) {
.bar{right: -16px;}   
    
}
@media screen and (max-width: 736px) {
.goldbar h3{ text-align: center;  margin-bottom: 16px; } 
.gold{width: 50px; height:50px;margin: 0 auto;}
.bar{position:absolute;bottom: 40px;z-index: 1;right: 0;left: 0;}
.date{font-size: 18px;}
.date_ok{font-size: 18px;}
}

.gold_title{position:absolute; z-index: 999; left: 54px;top: -26px; width: 260px;}

@media screen and (max-width: 736px) {
.gold_title{ width: 220px; left: 50%; margin-left: -110px;top: -22px;}
}

@media screen and (max-width: 320px) {
    .gold_title{ width: 200px; left: 50%; margin-left: -100px;top: -22px;}
}

/*活動內容*/
.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: 40px 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; display: none;}

@media screen and (max-width: 980px) {
.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: 300px; 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: 44px;
    color: #fff;
    font-weight: bold;
    position: relative;
    background-color: #b10000;
    }

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

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

.popup h3{font-size: 18px;line-height: 1.2;text-align: center;color: #440000;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: #ff7100;
    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:calc(50% - 8px); margin-right: 16px;/*padding: 0px 20px 6px;*/}

.box2s li:last-child{ margin-right: 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: #ff7100;
    border-radius: 6px;
    transition: all .3s;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    }

.goto:hover{    background-color: #ff4d00;    }

.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: #b10000;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: #810000; 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;}

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

.iknow:hover{    background-color: #ff4d00;    }