@charset "utf-8";
/* CSS Document */
img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
#LP{
	width: 100%;
	margin: 0 auto;
	position: relative;
}
/*timer*/
.FV{
	position: absolute;
	top: 0%;
	left:0%;
    width: 100%;
}

.clock-container {
  padding-top:22%;
  padding-left: 0;
  width:100%;
  color: #ff4848;
  font-size: 62px;
  font-weight:bold;
  text-align: center;
  font-family:'微軟正黑體'; 
  line-height:1.5em;
 }

.clock-container h2{
  font-size: 40px;
}
@media screen and (max-width: 1750px){
	.clock-container {
		padding-top:25%;
	}
}
@media screen and (max-width: 1520px){
	.clock-container {
		padding-top:28%;
	}
}
@media screen and (max-width: 1350px){
	.clock-container {
		padding-top:32%;
	}
}
@media screen and (max-width: 1190px){
	.clock-container {
		padding-top:37%;
	}
}
@media screen and (max-width: 1030px){
	.clock-container {
		padding-top:43%;
	}
}
@media screen and (max-width: 940px){
	.clock-container {
		font-size: 54px;
	}
}
@media screen and (max-width: 800px){
	.clock-container {
		font-size: 42px;
	}
}

@media screen and (max-width: 640px){
	.clock-container {
	  font-size: 15px;
	  font-weight:bold;
	  text-align: center;
	  font-family:'微軟正黑體'; 
	  line-height:1.5em;
	  height:5px;
	 }

	.clock-container h2{
	  font-size: 15px;
	  padding-left: 50px;
	}
	
}
/*timer*/

/**nav bar START**/
nav{
    top: 0;
    width: 100%;
	height: 4em;
    background-color: #d92727;
    box-shadow: 0px -3px 20px ;
    -webkit-box-shadow: 0px 0px 20px rgba(50,17,0,0.45);
    padding-bottom: 8px;
}
ul{
	margin: 0 auto;
	padding: 0;
	width: 70%;
}
li{
    list-style: none;
    float: left;
    width: 24.7%;
    text-align: center;
    font-size: 2.2em;
    color: white;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: normal;
    border-left: white solid 3px;
	cursor: pointer;
	margin: 10px 0 10px 0;
}
li:hover{
    color: rgba(255,245,206,1.00);
	transition: .2s;
	-moz-transition: .2s;
    -webkit-transition: .2s;
    -o-transition: .2s;
}
li:first-child{
	 border-left:none;
}
/**nav bar END**/
.inner{
	max-width: 1000px;
	margin: 0 auto;
}
.full_bg{
    max-width: 1920px;
    position: relative;
    width: 100%;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
	background-position: center;
}
#fv_1{
    background-image: url("../image/01-fv/newyear_fvbg.jpg");
}
#fv_2{
    background-image: url("../image/01-fv/newyear_salebg.jpg");
}
.offer_01{
    background-image: url("../image/04-offer1/newyear_offer01bg.jpg");
}
.offer_02{
    background-image: url("../image/04-offer1/newyear_offer02_01bg.jpg");
}
.offer_03{
    background-image: url("../image/04-offer1/newyear_offer02_02bg.jpg");
}
.offer_04{
    background-image: url("../image/04-offer1/newyear_offer02_03bg.jpg");
}
.offer_05{
    background-image: url("../image/04-offer1/newyear_offer02_04bg.jpg");
}
.offer_06{
    background-image: url("../image/04-offer1/newyear_offer02_05bg.jpg");
}
.offer_title01{
    background-image: url("../image/04-offer1/newyear_offertitlebg.jpg");
}
#lp1_01{
    background-image: url("../image/01-fv/newyear_awardbg.jpg");
}
#lp1_02{
    background-image: url("../image/02-lottery/newyear_lotterybg.jpg");
}
#lp1_03{
    background-image: url(../image/02-lottery/newyear_lottery02bg.jpg);
}
#lp1_04{
    background-image: url("../image/03-product/newyear_03_product01bg.jpg");
}
#lp1_05{
    background-image: url("../image/03-product/newyear_03_product02bg.jpg");
}

#lp1_06{
    background-image: url("../image/03-product/newyear_03_product03bg.jpg");
}
#lp2_user{
    background-image: url("../image/04-offer1/newyear_userbg.jpg");
}

#lp2_03{
    background-image: url("../image/02-lottery/newyear_02_rulebg.jpg");
}


/**浮動視窗START**/
#popup{
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
}
.target_pic{
	width: 36.5%;
	position: absolute;
	cursor: pointer;
}
#tar_pic1{
	left: 3%;
	top: 10%;
	z-index: 2;
}
#tar_pic2{
	left: 32%;
	top: 16%;
	z-index: 1;
}
#tar_pic3{
	left: 61%;
	top: 16%;
	z-index: 3;
}
#tar_pic4{
	left: 5%;
	top: 40%;
	z-index: 2;
}
#tar_pic5{
	left: 32%;
	top: 32%;
	z-index: 1;
}
#tar_pic6{
	left: 60%;
	top: 42%;
	z-index: 3;
}
.pop_pic{
	width: 50%;
	height: auto;
}
.close_btn{
	max-width: 80px;
    width: 14%;
    position: absolute;
    z-index: 2500;
    left: 85%;
    /* right: 0.5%; */
    /*top: 1%;*/
	bottom: 87%;
    cursor: pointer;
}
/**浮動視窗END**/
/**活動按鈕START**/
#side_btn{
	width: 170px;
	height: auto;
	position: fixed;
	bottom: 12%;
	right: 2%;
	cursor: pointer;
}
#side_btn_mb{
	width: 100%;
	position: fixed;
	z-index: 100;
	bottom: 0;
	cursor: pointer;
	visibility: hidden;;
}
/**活動按鈕END**/
/**RWD**/
@media screen and (max-width: 1600px){
	#side_btn{
		right: 2%;
	}
	nav{
		height: 3.7em;
	}
	li{
		font-size: 2em;
	}
}
@media screen and (max-width: 1200px){
	nav{
		height: 3.3em;
	}
	ul{
		width: 100%;
	}
	li{
		font-size: 1.7em;
	}
	#side_btn{
		width: 150px;
		right: 2%;
		bottom: 10%;
	}
}
@media screen and (max-width: 900px){
	#side_btn{
		width: 130px;
		right: 2%;
		bottom: 9%;
	}
	#side_btn{
		visibility: hidden;
	}
	#side_btn_mb{
		visibility: visible;
	}
}
@media screen and (max-width: 770px){
	nav{
		padding-bottom: 5px;
		height: 2.8em;
	}
	li{
		width: 24.5%;
		font-size: 1.3em;
		border-left: white solid 2px;
	}
	#side_btn{
		width: 120px;
		right: 2%;
	}
	.md-content{
		max-width: 100%!important;
	}
}
@media screen and (max-width: 480px){
	nav{
		padding-bottom: 3px;
		height: 3.5em;
	}
	li{
		width: 24.3%;
		font-size: 1.1em;
		margin: 17px 0 17px 0;
	}
	#side_btn{
		width: 110px;
		right: 1%;
	}
}
@media screen and (max-width: 350px){
	li{
		width: 24%;
	}
}
@media screen and (max-width: 250px){
	li{
		width: 23%;
	}
}

/**popup**/

.popup-content {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  z-index: 999999999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  .popup-content img {
    width: 80%;
    margin: 1em auto;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease; }
    @media (min-width: 1024px) {
      .popup-content img {
        width: 40%; } }

.popup-content.show {
  opacity: 1;
  visibility: visible;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow-y: scroll;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .popup-content.show img {
    width: 90%; }
    @media (min-width: 1024px) {
      .popup-content.show img {
        width: 50%; } }

/**popup end**/