﻿/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
img {
	max-width: 100%;
	height: auto;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1; margin: 0;
	font-family: "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    line-height: 20px;
    letter-spacing: 0.5px;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: 0;
	border-spacing: 0;
}
/* ---reset.css--- */

html {	
	font-family:Helvetica, sans-serif;
	font-family: '微軟正黑體', Arial, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
	-webkit-text-size-adjust:none;

}





body{

.multi_bg_example {
  background-image   : url(https://mdn.mozillademos.org/files/11305/firefox.png),
                       url(https://mdn.mozillademos.org/files/11307/bubbles.png),
                       linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));

  background-repeat  : no-repeat,
                       no-repeat,
                       no-repeat;

  background-position: bottom right,
                       left,
                       right;
}


}



html{
          font-size: 18px;
        }
        .rwdtxt {
          font-size: 1.5rem;
  
        }
        @media screen and (min-width: 600px) and (max-width: 1200px) {
           .rwdtxt {
            font-size: calc(1.2rem + (1.3-1.2) * ((100vw - 600px) / (1200 - 600)));
            color:blue;
          }
        }
        @media screen and (min-width: 1200px) {
          .rwdtxt {
            font-size: 2rem;
            color:red;
          }
        }




/* --電腦版型------------------------------------- */

/*back top*/
#mini-header { background-color: #ffd200; max-width: 100%; margin: 0 auto;}

/*主視覺只做1張圖*/
#BANNER{
	clear:both;
	width:100%; 
	margin:0 auto;
/*	box-shadow: 0 12px 20px -13px rgba(0,0,0,.15);*/
}

/*主視覺做2張圖*/
#BANNER-BG{
	width:100%;height:600px; 
	background-image:url(../images/KV-PC.jpg);background-position: center;
}

/*視覺做2張圖在用*/
#BANNER h1{
	display:block;
	width:100%;
	height:600px;
	background-image:url(../images/KV-PC.jpg);
	text-indent:-9999px;
}

/*模塊背景*/ /*漸層寫法參考 https://ithelp.ithome.com.tw/articles/10190867*/
#CONTENT-1-bg1{ 
	width: 100%; 
    background: url(../images/bg.jpg) 100% / cover fixed;
	/* background: #000; */
}
#CONTENT-1-bg1 section {
	height: 100%;
}
section.last {
	align-items: self-end;
}
#CONTENT-1-bg1 img {
	max-width: 100%;
}

/*模塊1--4變2*/
#CONTENT-1{
	clear:both;
	width:1000px;
	margin:0 auto;
	overflow:hidden;
	padding-top: 0px;
	padding-bottom: 15px;
}
#CONTENT-1 .BOX-ad{
	float:left; clear:both;
	width:23%;
	margin: 5px;
}

#CONTENT-1 .BOX{
	float:left;
	width:21%;
	background-color: white;
	padding:5px 5px 5px 5px; border-color: #ddd; border-width: 1px; border-style: solid;
	margin: 5px;
	box-shadow: 0 12px 20px -13px rgba(0,0,0,.15);
}

.CONTENT-6.swiper-product{
    max-width: 900px;
    padding: 20px 0 40px 0;
}

.CONTENT-6 .product {
    background-color: white;
    padding: 5px;
    border-color: #ddd;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    transition: .3s;
}

@media screen and (min-width: 737px) {
    .CONTENT-6 .product:hover {
        transform: translateY(-10px);
        transition: .3s;
    }
}

.CONTENT-6 .product .price{
    float: none;
}

/*模塊1--文字化*/
#CONTENT-1 .BOX h3 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 25px;
    line-height: 35px;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    border-radius: 100px;
    background-color: #8a8988;
    width: 100%;
}

#CONTENT-1 .BOX p{
	margin-top: 5px; 
	margin-bottom:5px;
	font-size:18px;
	line-height:25px;
	color:#000000;
	text-align: center;
}


#CONTENT-1 .price{  padding-left: 4px;
	  float: left; margin: 0 auto;width: 98%; height: 40px; border-top-left-radius: 10px; border-bottom-left-radius:10px;border-top-right-radius: 10px; border-bottom-right-radius: 10px;border-color: #df0037;border-width: 1px; border-style: solid;
}

#CONTENT-1 .buy{ float: right; width: 65px; line-height: 40px; background-color: #df0037; border-top-right-radius: 8px; border-bottom-right-radius: 8px;font-size: 27px; font-weight: bold; color: white; text-align: center; text-decoration: none;}

#CONTENT-1 .buy a{ float: right; width: 65px; line-height: 40px; background-color: #df0037; border-top-right-radius: 8px; border-bottom-right-radius: 8px;font-size: 27px; font-weight: bold; color: white; text-align: center; text-decoration: none;}

#CONTENT-1 .buy a:hover{ float: right; width: 65px; line-height: 40px; background-color: #8c0325; border-top-right-radius: 8px; border-bottom-right-radius: 8px;font-size: 27px; font-weight: bold; color: white; text-align: center; text-decoration: none;}

#CONTENT-1 .font20-g{ float:left; font-size: 14px; color: #777;line-height: 40px; text-decoration: line-through;}
#CONTENT-1 .font20-r{ float:left;font-size: 16px; color: #df0037; font-weight: bold;line-height: 40px;}
#CONTENT-1 .font40-r{ float:left;font-size: 33px; color: #df0037; font-weight: bold;line-height: 40px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}

#CONTENT-1 .title{
	clear:both;
	width:75%;
	margin:0 auto;
}

#CONTENT-1 .title2{
	clear:both;
	width:33%;
	margin:0 auto;
}

/*模塊2--2變2*/
#CONTENT-2{
	clear:both;
	width:1000px;
	margin:0 auto;
	overflow:hidden;
	padding-top: 0px;

}

#CONTENT-2 .BOX{
	float:left;
	width:50%;

	border-radius: 15px;
	padding: 5px;
}


#CONTENT-2 .title{
	clear:both;
	width:75%;
	margin:0 auto;
}

#CONTENT-2 .title-2{
	clear:both;
	width:40%;
	margin:0 auto;
}



/*模塊BN--BN*/
#CONTENT-BN{
	clear:both;
	width:1000px;
	margin:0 auto;
	overflow:hidden;


}

#CONTENT-BN .BOX{
	float:left;
	width:90%;
	/*background-color: white;*/
	/*padding:5px 5px 3px 5px; border-color: #ddd; border-width: 1px; border-style: solid;
	margin: 5px;
	box-shadow: 0 12px 20px -13px rgba(0,0,0,.15);*/
}


#CONTENT-BN .title{
	clear:both;
	width:75%;
	margin:0 auto;
}



/*模塊3--3變2*/
#CONTENT-3{
	clear:both;
	width:1200px;
	margin:0 auto;
	overflow:hidden;
	padding-top: 0px;
	padding-bottom: 30px;
}

#CONTENT-3 .BOX{
	float:left;
	width:33%;
	transition: width 0.3s;
	transition-timing-function: ease-out;
	/*background-color: white;*/
	/*padding:5px 5px 3px 5px; border-color: #ddd; border-width: 1px; border-style: solid;
	margin: 5px;
	box-shadow: 0 12px 20px -13px rgba(0,0,0,.15);*/
}
#CONTENT-3 .BOX:hover{
	width:34%;
}




#CONTENT-3 .title{
	clear:both;
	width:75%;
	margin:0 auto;
}


/*模塊2--3變1*/
#CONTENT-3-2{
	clear:both;
	width:1100px;
	margin:0 auto;
	overflow:hidden;
	padding-top: 0px;
	cursor: pointer;
}

#CONTENT-3-2 .BOX{
	float:left;
	width:33.3%;
	box-shadow: 0 12px 20px -13px rgba(0,0,0,.15);
}

#CONTENT-3-2 .BOX h3{
	font-size:2em;
	line-height:2;
	border-bottom:2px solid #0CC;
	color:#0CC;
	text-align:center;
}

#CONTENT-3-2 .BOX p{
	font-size:13px;
	line-height:1.8;
	padding:20px;
	color:#333;
}

#CONTENT-3-2 .title{
	clear:both;
	width:85%;
	margin:0 auto;
}

/*模塊4--4變2*/
#CONTENT-4{
	clear:both;
	width:1200px;
	margin:0 auto;
	overflow:hidden;
	padding-top: 0px;
	padding-bottom: 30px;
}

#CONTENT-4 .BOX{
	float:left;
	width:25%;
	padding: 1em;


}

#CONTENT-4 .title{
	clear:both;
	width:75%;
	margin:0 auto;
}

#CONTENT-4 .time{
	clear:both;
	width:100%;
	margin:0 auto;
}

/*模塊5--3變3*/
#CONTENT-5{
	clear:both;
	width:1200px;
	margin:0 auto;
	overflow:hidden;
	padding-top: 0px;
	padding-bottom: 30px;
}

#CONTENT-5 .BOX{
	float:left;
	width:33%;
	/*background-color: white;*/
	/*padding:5px 5px 3px 5px; border-color: #ddd; border-width: 1px; border-style: solid;
	margin: 5px;
	box-shadow: 0 12px 20px -13px rgba(0,0,0,.15);*/
}

#CONTENT-5 .title{
	clear:both;
	width:85%;
	margin:0 auto;
}

#CONTENT-5 .time{
	clear:both;
	width:100%;
	margin:0 auto;
}

/*模塊6*/
.CONTENT-6{
	clear:both;
	/*width:1000px;*/
	width: 100%;
	margin:0 auto;
	overflow:hidden;
/*	background-color:rgb(74,49,11);*/
	margin-top: 0px; 
    padding: 3.5% 0;
}

.CONTENT-6 .BOX{
	/*float:left;*/
	/*width:23.7%;*/
	display: inline-block;
	width: 15.6%;
	background-color: white;
	padding: 3px; border-color: #ddd; border-width: 1px; border-style: solid;
	margin: 6px;
	border-radius: 10px;
}
@media screen and (max-width: 1200px) {
	.CONTENT-6 .BOX {
		width: 25%;
	}
}
@media screen and (max-width: 760px) {
	.CONTENT-6 .BOX {
		width: 45%;
	}
}

.CONTENT-6 .catalog{
	font-size: 50px; color:#8b5921;; font-weight: bold; line-height: 70px;text-align:center;
}

.CONTENT-6 .title .catalog {
	font-family: "cwTeXYen", "Quicksand", sans-serif;
}


/*模塊1--文字化*/

.CONTENT-6 .BOX h3{
	margin-top: 5px;
	margin-bottom:5px;
	font-size:25px;
	line-height:35px;
	color: #FFFFFF;
	text-align:center;
	font-weight: bold;
	border-radius: 100px;
	background-color: #8a8988;
	width: 100%; 
}

.CONTENT-6 .BOX p,
.CONTENT-6 .product p {
    margin: 5px;
    font-size: 18px;
    line-height: 22px;
    color: #000000;
    text-align: left;
    height: 44px;
    overflow: hidden;
}


.CONTENT-6 .price{ float: left; margin: 0 auto;height: 40px;margin: 0 auto; text-align: center; width:100%; padding: 8px 0;}

.CONTENT-6 .buy{ float: right; width: 60px;line-height: 30px; background-color: #df0037; font-size: 20px; font-weight: bold; color: white; text-align: center; text-decoration: none;border-radius: 20px; padding: 0px;  margin-top:8px; }

.CONTENT-6 .buy a{ float: right; width: 60px; line-height: 30px; background-color: #df0037; font-size: 20px; font-weight: bold; color: white; text-align: center; text-decoration: none;border-radius: 20px;padding: 0px;}

.CONTENT-6 .buy a:hover{ float: right; width: 60px; line-height:30px; background-color: #8c0325;  font-size:20px; font-weight: bold; color: white; text-align: center; text-decoration: none;border-radius: 20px;padding: 0px;}

    .CONTENT-6 .font-og {
        float: left;
        font-size: 14px;
        color: #777;
        line-height: 40px;
        text-decoration: line-through;
        /*padding-left: 5px;*/
    }
.CONTENT-6 .font-s{ float:left;font-size: 14px; color: #df0037; font-weight: bold;line-height: 40px;padding-left: 5px;}
    .CONTENT-6 .font-sp {
        float: left;
        /*font-size: 30px;*/
		font-size: 22px;
        color: #df0037;
        font-weight: bold;
        line-height: 40px;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    }

.CONTENT-6 .title {
	clear: both;
	width: 60%;
	margin: 0 auto;
}

#actScope .CONTENT-6 .title {
	margin-bottom: 2em;
}

.CONTENT-6 .title2{
	clear:both;
	width:33%;
	margin:0 auto;
}


/*模塊6--8變4*/
#pd-menu-bg{ width: 100%; height:70px; background: linear-gradient( #9a241e, #dc3c38);}
#pd-menu{ clear:both; width:1300px;  margin:0 auto; oveflow:hidden; padding-top: 5px;padding-bottom: 10px;}
#pd-menu .BOX{float:left; width:11%;}



/*模塊7--4變1*/
#CONTENT-7{
	clear:both;
	width:1200px;
	margin:0 auto;
	overflow:hidden;
	padding-top: 0px;
}

#CONTENT-7 .BOX{
	float:left;
	width:50%;
	/*background-color: white;*/
	/*padding:5px 5px 3px 5px; border-color: #ddd; border-width: 1px; border-style: solid;
	margin: 5px;
	box-shadow: 0 12px 20px -13px rgba(0,0,0,.15);*/
}

#CONTENT-7 .title{
	clear:both;
	width:75%;
	margin:0 auto;
	padding-top:20px
}

#CONTENT-7 .title2{
	clear:both;
	width:75%;
	margin:0 auto;

}

/*模塊8--券 3變3 */
#CONTENT-8{
	clear:both;
	width:1000px;
	margin:0 auto;
	overflow:hidden;
	margin-top: -200px;
	position: relative;

}

#CONTENT-8 .BOX{
	float:left;
	width:25%; 
}
#CONTENT-8 .BOX2{
	float:left;
	width:25%; 
	margin-top: -30px;
}

#CONTENT-8 .title{
 font-size: 40px; color: #000; font-weight: bold;margin:0 auto; line-height: 50px; margin-top: 20px;	width:75%;}

#CONTENT-8 .date{
 font-size: 25px; color: #000; font-weight: bold;margin:0 auto; line-height: 25px;
}

#CONTENT-8-2{
	clear:both;
	width:1000px;
	margin:0 auto;
	overflow:hidden;

}

#CONTENT-8-2 .BOX{
	float:left;
	width:25%; 
}

#CONTENT-8-2 .BOX2{
	float:left;
	width:25%; 
	margin-top: -40px;
}
#CONTENT-8-2 .BOX3{
	float:left;
	width:100%; 
}
#CONTENT-8-2 .BOX4{
	float:left;
	width:33%; 
}



#CONTENT-8-2 .title{
 font-size: 40px; color: #fff; font-weight: bold;margin:0 auto; line-height: 50px; margin-top: 20px;	width:75%;}

#CONTENT-8-2 .date{
 font-size: 25px; color: #fff; font-weight: bold;margin:0 auto; line-height: 25px;
}


/*模塊9--券 2變2 */
#CONTENT-9-2{
	clear:both;
	width:800px; /*background-color: #df0037*/; border-radius: 15px;
	margin:0 auto;
	overflow:hidden;
	padding-top: 10px;	padding-bottom: 10px;  margin-bottom: 10px; margin-top: 20x;
	text-align: center;
}

#CONTENT-9-2 .BOX{
	float:left;
	width:47%; padding: 10px;
}

#CONTENT-9-2 .title{
 font-size: 40px; color: #FFFFFF; font-weight: bold;margin:0 auto; line-height: 50px;
}

#CONTENT-9-2 .date{
 font-size: 25px; color: #FFFFFF; font-weight: bold;margin:0 auto; line-height: 25px;
}


/*模塊10--券 4變2 */
#CONTENT-10{
	clear:both;
	width:1200px; /*background-color: #df0037*/; border-radius: 15px;
	margin:0 auto;
	overflow:hidden;
	padding-top: 10px;	padding-bottom: 10px;  margin-bottom: 10px; margin-top: 20x;
}

#CONTENT-10 .BOX{
	float:left;
	width:25%; padding: 10px;
}

#CONTENT-10 .title{
 font-size: 40px; color: #FFFFFF; font-weight: bold;margin:0 auto; line-height: 50px;
}

#CONTENT-10 .date{
 font-size: 25px; color: #FFFFFF; font-weight: bold;margin:0 auto; line-height: 25px;
}


#CONTENT-11{
	clear:both;
	width:850px; 
	margin:0 auto;
	overflow:hidden;
	padding-top: 10px;
	padding-bottom: 10px;  margin-bottom: 10px;
}
#CONTENT-11 .title{
 font-size: 60px; color: #000; font-weight: bold;margin:0 auto; line-height: 60px; font-style:italic;
}

#CONTENT-11 .date{
 font-size: 30px; color: #000; font-weight: bold;margin:0 auto; line-height: 60px;font-style:italic;
}



#DOWN{
	clear:both;
	width:100%;
	margin:0 auto;
	background-color:#03080e;
	padding:5px 0px;
}

#DOWN p{
	font-size:13px;
	text-align:center;
	line-height:1.8;
	color:#fff;
}

/* 選單 */
/*#menu-float {
	width:100%; height:50px; 
	margin:auto;
   position: fixed;
    top: 0px;
    z-index: 999;	
	
}*/

ul,li{  margin: 0; padding: 0;
    list-style:  none;
	display: inline-block;
	margin: 0 auto ;  
}

/* 選單 */
#floater ul,
#floater ul{font-size:0;}	
#floater li{float:none;}
#floater li{cursor:pointer;}
#floater li{cursor:pointer;}
#floater { width:100%;  height: 50px;background-color: #af2200; z-index: 999;}
#floater .content{
	width:100%;  
	background-color: #af2200; 
	margin: 0 auto;
	text-align: center;
	z-index: 10;
}

#floater .content right{ float: right;}	

/*活動辦法*/
#rule {clear:both; width:1100px; margin:0 auto; overflow:hidden; font-size: 20px; background-color:#2a2a41; border: 4px solid #f5416b; margin-bottom: 20px; border-radius: 20px; text-align: left;}

#rule-border{clear:both; width:100%; max-width: 1100px; height: auto; margin:0 auto; overflow:hidden; 
	        padding: 20px 30px;line-height: 200%;box-sizing: border-box;}

#rule-border .p_title {background: #f5416b; padding: 5px 15px;color: #ffffff; font-size: 24px;font-weight: bold; border-radius: 10px;}


#rule-border .sp25 { font-size: 30px;  line-height: 50px; padding-left: 15px; color: #fff; text-align: center;}
#rule-border .sp15 { padding-left: 15px;     color: #fff; line-height: 40px;}
#rule-border .sp15  a{ padding-left: 15px; color: #df0037;}

#rule-border .sp15-r { padding-left: 15px; color: #df0037; font-weight: bold;}
#rule-border .bold { font-weight: bold; }

#rule-border .red_border { margin-left: 65px;  padding: 10px; color: #201057; font-weight: bold; border: dotted ; }
#rule-border .red_bold { color: #201057; font-weight: bold; }
#rule-border .red_font { color: #201057;  }

#rule-border ul { list-style-type: circle!important;/*display: flex; justify-content: center; */}
#rule-border li { display: block;/*margin: unset;margin: 0 auto;*/} 

#rule-border ul.circle{list-style-type:circle}

#rule-border .p_btn  {  width:250px; padding: 5px 15px; margin: 15px 15px; color:#FFFFFF; font-size: 24px;font-weight: bold; 
	                   text-decoration: none; text-align: center; border-radius: 100px; float: left; }

#rule-border .p_btn a {background: #8f0b1d;  width:250px; padding: 5px 15px; margin: 15px 15px; color:#FFFFFF; font-size: 24px;font-weight: bold; 
	                   text-decoration: none; text-align: center; border-radius: 100px; float: left; }

#rule-border .p_btn a:hover {background:  #8f0b1d;  width:250px; padding: 5px 15px; margin: 15px 15px; color:#FFFFFF;font-size: 24px;font-weight: bold;
	                         text-decoration: none; text-align: center; border-radius: 100px; float: left; }


#rule-border .p_space{ width: 28px; float: left;} 

#rule-border .sp_ans { padding-left: 65px;}

#rule-border .btn_line{ margin: 0 auto;}

.link { color: #fff; text-decoration: underline;}
.link a{ color: #fff; text-decoration: underline;}
.link a:hover{ color: #fff; text-decoration: none;}


/* 橘子嘉年華23 */
.socialBlock {
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
    justify-content: space-evenly;
	margin: 24px auto;
}
.socialBlock .social {
	max-width: 20%;
}
.CONTENT-6 .prize,
.CONTENT-6 .pd {
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
    justify-content: space-evenly;
	margin: auto;
}
.CONTENT-6 .prize a {
	max-width: 16%;
}
.CONTENT-6 .prize a:hover {
    transform: translate(3px, 3px);
}
.box1 {
	width: 24%;
	overflow: hidden;
	margin: 4px;
    height: 100%;
	transition: ease 0.2s;
}
.box2 {
	margin-top: 3em;
}
.box1:hover {
    transform: translate(3px, 3px);
}
.box1 a {
	position: relative;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.box1 .price {
	text-align: center;
	font-family: Arial, "微軟正黑體";
	color: #ffffff;
}
.box1 .price span.ori {
	text-decoration: line-through;
}
.box1 .superText {
	font-weight: 600;
	font-size: 24px;
	color: #ef625c;
}
.box1 img {
	width: 100%;
}
.box1 p {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #47361f;
	height: 2.5em;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	margin-bottom: 4px;
}
.dNone {
	display: none;
}
.main-kv {
	position: relative;
}
.KV-bg {
    /* background: url(../images/bg.jpg) no-repeat top / 100%; */
	position: relative;
}
.KV-btn {
	position: absolute;
    right: 28vw;
    bottom: 14vh;
    max-width: 26vw;
	transform: translateX(50%);
	width: 100%;
}
.KV-btn a {
	width: 100%;
	margin: auto;
}
.top-imgLink{
	/* width: 200px; */
	max-width: 200px;
    position: absolute;
    left: 50%;
    top: 3em;
    transform: translateX(-50%);
}

.activity {
    position: relative;
	margin-top: 4em;
}
.activity .title {
    position: absolute;
    top: 0;
	/* bottom: 10%; */
    left: 50%;
    transform: translate(-50%, -40%);
	z-index: 1;
}

.frame {
	position: relative;
	background: url(../images/FR1.png) no-repeat 100% / 100%;
    padding: 8% 0 6.5%;
	margin: 0 auto;
}

.frame p {
	font-size: 24px;
	font-weight: 600;
	line-height: 32px;
	text-align: left;
	margin: auto;
    /* max-width: 75%; */
    width: 100%;
	color: #84624d;
	padding-left: 1.8em;
}
.frame ul li {
	font-size: 24px;
	font-weight: 600;
	line-height: 32px;
	text-align: left;
	margin: auto;
    /* max-width: 75%; */
    width: 100%;
	color: #84624d;
	padding-left: 2.8em;
	text-align: left;
}

.SD{
	width: 250px;
	position: absolute;
	transform: translate(-45%, 80%);
	z-index: 2;
}

.hBlock{
	width: 80%;
	margin: 0 auto;
}

.hContent {
	margin: 0 auto;
	/* max-width: 70%;
	width: 80%; */
}
p.text-i {
    text-indent: -1em;
	padding-left: 3.8em;
    /* margin-left: 4em; */
	/* margin-left: 2.9em; */
}

.btnBlock {
	/* position: absolute; */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: 1em;
}
.btnItem {
	max-width: 23%;
    width: 100%;
    margin: 0 4em;
}
.eventBlock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	max-width: 1200px;
	margin: auto;
}
.event {
	width: 50%;
	padding: 1em;
	overflow: hidden;
}
.event-content {
	height: 100%;
}


/* 白爛貓 */
.ins-preview-wrapper.ins-preview-wrapper-368.ins-pos-top-left {
	display: none !important;
}
h3, h4, p {
	display: block;
	color: #000;
	width: 100%;
    text-align: left;
	font-size: 1rem;
	line-height: 1.4rem;
}
.KV-main {
	/* max-width: 90vw;
	width: 100%;
	max-height: 100%;
	height: 100%; */
	max-width: 95vw;
    width: 100%;
    margin-top: auto;
}
.w-100 {
	width: 100%;
}
.dp-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.c-w1 {
	max-width: 86%;
	width: 100%;
	padding: .2em .5em;
}
.c-w2 {
	max-width: 50%;
	width: 100%;
	padding: .2em .5em;
}
.c-w3 {
	max-width: 30%;
	width: 100%;
	padding: .2em .5em;
}
.c-w4 {
    max-width: 46%;
    width: 100%;
}
.c-w5 {
	max-width: 80%;
	width: 100%;
	padding: .2em .5em;    
	margin: 3em 0 1em;
}
.c-sp1 {
	max-width: 55.5%;
	width: 100%;
	padding: 0.1em 0.5em 0;
}
.c-sp2 {
	max-width: 30.5%;
	width: 100%;
	padding: 0.1em 0.5em 0;
}
.c-auto {
    width: 100%;
	max-width: 19%;
	margin: 0 4px;
}
.swiper-block {
	position: relative;
	width: 100%;
	margin-bottom: 2em;
}
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
	bottom: -32px;
	left: 0;
	width: 100%;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer;
    margin: 0 4px;
}
.swiper-block .swiper-button-prev {
    left: 0;
}
.swiper-block .swiper-button-next {
    right: 0;
}
.swiper-block .swiper-pagination-bullet {
    background: #8b5921;
}
.swiper-block .swiper-pagination-bullet-active {
    opacity: 1;
    background: #8b5921;
}
.modal-content {
	border-radius: .5em;
    overflow: hidden;
}
.modal-content table {
	width: 100%;
}
.modal-content table tr th,
.modal-content table tr td {
	border: 1px solid #000;
	padding: 1px;
	text-align: center;
	font-weight: 600;
	vertical-align: middle;
}

.event {
	position: relative;
	width: 100%;
}
.event h3 {
	font-size: 1.8rem;
	font-weight: 900;
	letter-spacing: -1px;
	color: #8b5921;
	width: 100%;
    text-align: center;
	padding: 0 0 .5em;
    line-height: 2rem;
}
.event h4 {
	font-size: 1.5rem;
    line-height: 1.7rem;
	font-weight: 900;
	letter-spacing: -1px;
	color: #8b5921;
	width: 100%;
}
.fb_iframe_widget_fluid span {
    width: 100%;
    max-height: 60vh;
    overflow: hidden;
}
.event .fb-page {
    display: block;
}
.lineLink {
	max-width: 50%;
    margin: auto;
	padding: 1em 0 0;
}
.fb-page {
	width: 100%;
    max-height: 56vh;
    height: 100%;
}
.fb_iframe_widget iframe {
	border-radius: 1em;
}
.m-auto {
	margin: auto;
}
section.container {
	padding-top: 4%;
}
.spe1 {
	position: relative;
	width: fit-content;
	/* margin: auto; */
	border-radius: 16px;
	border: 8px solid #e59b52;
	outline: 4px solid #fff;
	background: #ffffffb3;
	padding: 1em;
    margin-top: 10vh;
	max-width: 52%;
}
.spe1 .event {
	background: unset;
}
.spe2 {
	position: relative;
	padding: 1em;
    padding-top: 2%;
	width: fit-content;
	margin: auto;
}
.spe2 .container {
	border-radius: 16px;
	border: 8px solid #e59b52;
	outline: 4px solid #fff;
}
.spe2-btn {
    max-width: 48%;
	margin-right: auto;
	text-align: center;
	justify-content: center;
}
.spe2-card {
    max-width: 34%;
    margin-left: auto;
    padding: 2em 0;
}
.spe2-img {
    max-width: 46%;
	width: 100%;
    padding: 1em;
}
.spe2-img1 {
    max-width: 40%;
	width: 100%;
    padding: 1em;
}
.prize {
	max-width: 38%;
}
.e2 .spe2-btn {
	justify-content: right;
}
.e4 {
	padding: 0 2%; 
	align-items: flex-end; 
	height: calc(100% - 12vh);
}
section .evtt0 {
    position: absolute;
    top: -26%;
    left: 50%;
    transform: translateX(-50%);
    /* max-width: 42vw; */
    max-width: 35vw;
    width: 100%;
}
section .evtt {
	position: absolute;
	top: 7vh;
    left: 50%;
    transform: translateX(-50%);
	max-width: 35vw;
    width: 100%;
	z-index: 1;
}
section .evtt1 {
	max-width: 40vw;
    width: 100%;
	margin: 0 auto;
}
.event {
	background: #ffffffb3;
	position: relative;
    padding: 4vh 1vh 1vh;
}
.event.container {
    padding-top: 5%;
    margin-top: 12%;
	/* height: 72vh; */
}
.tRule {
    padding: 0 0 2em 0;
}
.checkBlock {
	max-width: 88%;
	padding: 1em 0 2em;
}
.swiper-container {
	transition-timing-function: linear;
}
.txt {
	font-size: 1.2rem;
	/*line-height: 1.5rem;*/
	font-weight: 600;
	color: #8b5921;
	/*padding-top: .5em;*/
}
.txt1 {
	font-size: 1rem;
}
.txt1 a:link, .txt1 a:visited {
	color: #d11235;
	font-weight: 600;
}
.txt2 {
	color: #dc4048;
	font-size: 1rem;
	font-weight: 700;
}
.txt3 {
	color: #bba699;
    font-size: .9rem;
    line-height: 1.1rem;
}
.txt4 {
	font-size: 1.6rem;
    line-height: 1.9rem;
	font-weight: 900;
	letter-spacing: -1px;
	color: #8b5921;
	width: 100%;
    text-align: center;
	padding: 0 0 .5em;
}
a.txt5:visited, a.txt5:link {
	font-size: 1.8rem;
	line-height: 2.2rem;
	font-weight: 900;
	letter-spacing: -1px;
	color: #d11235;
    text-align: center;
}
.t-center {
	text-align: center;
}
.swiper-slide {
	height: 1px;
}
.swiper-slide-active {
	height: auto;
}
.swiper-container.mySwiper3 {
	height: 100vh;
}
section .swiper-button-prev,
section .swiper-button-next {
	background: #a18549;
    border-radius: 50em;
    color: #f7ed96;
    padding: 1.5em;
	opacity: .8;
}
section.last {
	padding-top: 3em;
}
.spe2-btn {
	padding: 1em 0;
}

/* --手機版型------------------------------------- */

@media screen and (max-width: 736px) {
	
	*{	-webkit-box-sizing:border-box;box-sizing:border-box;}

	html,body{-webkit-text-size-adjust:none;}

	/*主視覺做1張圖*/
	#BANNER{
		clear:both;
		width:100%;
		margin:0 auto;
		box-shadow: 0 12px 20px -13px rgba(0,0,0,.15);
	}
		
	/*主視覺做2張圖*/
	#BANNER-BG{
		display:block;
		width:100%; height:280px;
		margin:0 auto;
		background-size:cover;
		background-position:center center;	
		background-image:url(../images/KV-MB.jpg);
		
	}
		

	/*主視覺做2張圖在用*/
		
	#BANNER h1{
			display:block;
			width:100%;
			height:360px;
			background-image:url(../images/KV-MB.jpg);
			background-size:cover;
			background-position:center center;	
			text-indent:-9999px;
	}

	/*模塊背景*/ /*漸層寫法參考 https://ithelp.ithome.com.tw/articles/10190867*/

	#CONTENT-1-bg1 { 
		width: 100%; 
		/* background: #000; */
	}

	#CONTENT-1-bg2{
		width: 100%; 
		background: #000 url(../images/bg-mb.png) no-repeat;
	}

		

	/*模塊1--4變2*/	
	#CONTENT-1{
		clear:both;
		width:100%;
		margin:0 auto;
		overflow:hidden;
		padding-top: 0px;

	}
		
	#CONTENT-1 .BOX-ad{
		float:left;
		width:45%;
		margin: 5px;
	}
			
	#CONTENT-1 .BOX{
		float:left;
		width:46%;
		background-color: white;
		padding:5px 5px 5px 5px; border-color: #ddd; /*border-width: 1px; border-style: solid;*/
		margin:5px;
		/*box-shadow: 0 12px 20px -13px rgba(0,0,0,.15);*/

	}

	/*模塊1--文字化*/

	#CONTENT-1 .BOX h3{
		margin-top: 5px;
		margin-bottom:5px;
		font-size:16px;
		line-height:25px;
		color: #FFFFFF;
		text-align:center;
		font-weight: bold;
		border-radius: 100px;
		background-color: #8a8988;
		width: 100%; 
	}

	#CONTENT-1 .BOX p{
		margin-top: 3px; margin-bottom: 3px;
		font-size:14px;
		line-height:20px;
		color:#000000;
		text-align: center;
	}


	#CONTENT-1 .price{  padding-left: 2px;
		float: left; margin: 0 auto;width: 98%; height: 30px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;border-top-right-radius: 5px; border-bottom-right-radius: 5px;border-color: #df0037;border-width: 1px; border-style: solid;
	}

	#CONTENT-1 .buy { float: right; width: 30px; line-height: 28px;  border-top-right-radius: 4px; border-bottom-right-radius: 4px;font-size: 12px; font-weight: bold; color: white; text-align: center;text-decoration: none;}
		
	#CONTENT-1 .buy a { background-color: #df0037;float: right; width: 30px; line-height: 28px;  border-top-right-radius: 4px; border-bottom-right-radius: 4px;font-size: 12px; font-weight: bold; color: white; text-align: center; text-decoration: none;}	
		
	#CONTENT-1 .buy a:hover {background-color: #8c0325; float: right; width: 30px; line-height: 28px;  border-top-right-radius: 4px; border-bottom-right-radius: 4px;font-size: 12px; font-weight: bold; color: white; text-align: center;text-decoration: none;}	
		
	#CONTENT-1 .font20-g{ float:left; font-size: 10px; color: #777;line-height: 30px; text-decoration: line-through; letter-spacing: -2px;}
	#CONTENT-1 .font20-r{ float:left;font-size: 11px; color: #df0037; font-weight: bold;line-height: 30px;letter-spacing: -1px;}
	#CONTENT-1 .font40-r{ float:left;font-size: 17px; color: #df0037; font-weight: bold;line-height: 30px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
		
	#CONTENT-1 .title{
		width:100%;
		margin:0 auto;

	}
		
	#CONTENT-1 .title2{
		clear:both;
		width:90%;
		margin:0 auto;
	}


	/*模塊2--2變1*/
	#CONTENT-2{
		clear:both;
		width:100%;
		margin:0 auto;
		overflow:hidden;
		/*padding-top: 20px;*/
	}

	#CONTENT-2 .BOX{
		float:left;
		width:50%;
	}
		

		
	#CONTENT-2 .title{
		/*clear:both;*/
		width:98%;
		margin:0 auto;
	}

	#CONTENT-2 .title-2{
		/*clear:both;*/
		width:70%;
		margin:0 auto;
	}

	/*模塊BN*/
	#CONTENT-BN{
		clear:both;
		width:97%;
		margin:0 auto;
		overflow:hidden;

	}

	#CONTENT-BN .BOX{
		float:left;
		width:98%;
	}
		

		
	#CONTENT-BN .title{
		/*clear:both;*/
		width:98%;
		margin:0 auto;
	}


	/*模塊3--4變2*/
	#CONTENT-3{
		clear:both;
		width:100%;
		margin:0 auto;
		overflow:hidden;
	}

	#CONTENT-3 .BOX{
		float:left;
		position:relative;
		left:20%;
		width:60%;
	}

	#CONTENT-3 .title{
		clear:both;
		width:100%;
		margin:0 auto;
	}

	/*模塊2--3*/
	#CONTENT-3-2{
		clear:both;
		width:100%;
		margin:0 auto;
		overflow:hidden;
		padding-top: 20px;
	}

	#CONTENT-3-2 .BOX{
		float:left;
		width:33%;
		box-shadow: 0 12px 20px -13px rgba(0,0,0,.15);
	}
		

	#CONTENT-3-2 .BOX h3{
		font-size:2em;
		line-height:2;
		border-bottom:2px solid #0CC;
		color:#0CC;
		text-align:center;
	}

	#CONTENT-3-2 .BOX p{
		font-size:17px;
		line-height:1.8;
		padding:20px;
		color:#333;
	}
		
	#CONTENT-3-2 .title{
		width:90%;
		margin:0 auto;
	}


	/*模塊4--4變2*/
	#CONTENT-4{
		clear:both;
		width:100%;
		margin:0 auto;
		overflow:hidden;
	}

	#CONTENT-4 .BOX{
		float:left;
		width:50%;
		padding: 5px;

	}

	#CONTENT-4 .title{
		clear:both;
		width:98%;
		margin:0 auto;
	}

	#CONTENT-4 .time{
		clear:both;
		width:100%;
		margin:0 auto;
	}

	/*模塊5--3變3*/
	#CONTENT-5{
		clear:both;
		width:100%;
		margin:0 auto;
		overflow:hidden;
	}

	#CONTENT-5 .BOX{
		float:left;
		width:33%;
	}

	#CONTENT-5 .title{
		clear:both;
		width:90%;
		margin:0 auto;
	}

	#CONTENT-5 .time{
		clear:both;
		width:100%;
		margin:0 auto;
	}

	/*模塊6-*/
	.CONTENT-6{
		clear:both;
		width:100%;
		margin:0 auto;
		overflow:hidden; padding: 3px; 
		padding: 10px 0 15px 0

	}
		
	.CONTENT-6 .BOX{
		float:left;
		width:47%;
		background-color: white;
		padding: 3px 3px 3px 3px;
		margin:3% 0.5% 0.5% 1.5%;
	}

	.CONTENT-6 .product{
		padding: 3px;
	}

	/*模塊1--文字化*/

	.CONTENT-6 .BOX h3{
		margin-top: 5px;
		margin-bottom:5px;
		font-size:16px;
		line-height:25px;
		color: #FFFFFF;
		text-align:center;
		font-weight: bold;
		border-radius: 100px;
		background-color: #8a8988;
		width: 100%; 
	}

	.CONTENT-6 .BOX p,
	.CONTENT-6 .product p{
		margin: 3px;
		font-size:11px;
		line-height:15px;
		color:#000000;
		text-align: left;
		height: 30px;
	}


	.CONTENT-6 .price {
		width: 100%;
		float: left;
		margin: 0 auto;
		height: 46px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		margin-bottom: 8px;
	}



	.CONTENT-6 .buy{ float:right; width: 35px;line-height: 20px; background-color: #df0037;font-size: 15px; font-weight: bold; color: white; text-align: center; text-decoration: none;border-radius: 5px;  margin-top:0x;  }

	.CONTENT-6 .buy a{ float:right; width: 35px; line-height: 20px; background-color: #df0037; font-size: 15px; font-weight: bold; color: white; text-align: center; text-decoration: none;border-radius: 5px;}

	.CONTENT-6 .buy a:hover{ float:right; width: 35px; line-height:20px; background-color: #8c0325;  font-size:15px; font-weight: bold; color: white; text-align: center; text-decoration: none;border-radius: 5px;}



		
	.CONTENT-6 .font-og{ float:left; font-size: 12px; color: #777;line-height: 30px; text-decoration: line-through;  padding: 0px;}
	.CONTENT-6 .font-s{ float:left;font-size: 12px; color: #df0037; font-weight: bold;line-height: 30px;letter-spacing: -1px;padding: 0px;}
	.CONTENT-6 .font-sp{ float:left;font-size: 22px; color: #df0037; font-weight: bold;line-height: 30px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";padding: 0px; }
		
	.CONTENT-6 .title,
	.CONTENT-7 .title {
		width:80%;
		margin: 0 auto;
	}
		
	.CONTENT-6 .title2{
		clear:both;
		width:90%;
		margin:0 auto;
	}
	#actScope .CONTENT-6 .title {
		margin-top: 1em;
	}

	.CONTENT-6 .catalog{ font-size: 28px; font-weight: bold; line-height: 30px;text-align: center; padding-left:10px; padding-top: 10px;}
		
	/*模塊6--8變4*/
	#pd-menu-bg{ width: 100%; height: 160px; background: linear-gradient( #9a241e, #dc3c38);}
	#pd-menu{ clear:both; width:100%;  margin:0 auto; oveflow:hidden; padding-top: 5px;padding-bottom: 10px;}
	#pd-menu .BOX{float:left; width:33%;}
	#pd-menu .BOX img{ width:100%;}	
		
		
	/*模塊7--4變1*/
	#CONTENT-7{
		clear:both;
		width:100%;
		margin:0 auto;
		overflow:hidden;
	}

	#CONTENT-7 .BOX{
		float:left;
		width:100%;
	}

	#CONTENT-7 .title{
		clear:both;
		width:98%;
		margin:0 auto;
	}
	#CONTENT-7 .title2{
		clear:both;
		width:98%;
		margin:0 auto;
	}




	/*模塊8--優惠券 */
	#CONTENT-8{
		clear:both;
		width:95%; 
		margin:0 auto;
		overflow:hidden;
		margin-top: -125px;

	}

	#CONTENT-8 .BOX{
		float:left;
		width:25%;
	}
	#CONTENT-8 .BOX2{
		float:left;
		width:25%; 
		margin-top:-10px;
	}

	#CONTENT-8 .title{
	font-size: 22px; color: #000; font-weight: bold;margin:0 auto; line-height: 28px;
	}

	#CONTENT-8 .date{
	font-size: 15px; color: #000; font-weight: bold;margin:0 auto; line-height: 18px;
	}

	/*模塊8--優惠券 */
	#CONTENT-8-2{
		clear:both;
		width:95%; 
		margin:0 auto;
		overflow:hidden;

	}

	#CONTENT-8-2 .BOX{
		float:left;
		width:25%; padding: 3px;
	}
	#CONTENT-8-2 .BOX2{
		float:left;
		width:25%; 
		margin-top:-10px;
	}
	#CONTENT-8-2 .BOX3{
		float:left;
		width:100%; 

	}
	#CONTENT-8-2 .BOX4{
		float:left;
		width:33%; 

	}


	#CONTENT-8-2 .title{
	font-size: 22px; color: #fff; font-weight: bold;margin:0 auto; line-height: 28px;
	}

	#CONTENT-8-2 .date{
	font-size: 15px; color: #fff; font-weight: bold;margin:0 auto; line-height: 18px;
	}
		
	/*模塊9--優惠券 */
	#CONTENT-9-2{
		clear:both;
		width:95%; /*background-color: #ff9e00;*/ border-radius: 15px;
		margin:0 auto;
		overflow:hidden;
		padding-top: 5px;
		padding-bottom: 5px;  margin-bottom: 10px;
		text-align: center;
	}

	#CONTENT-9-2 .BOX{
		float:none;
		width:80%; padding: 3px;
		margin: 0 auto;
	}

	#CONTENT-9-2 .title{
	font-size: 22px; color: #FFFFFF; font-weight: bold;margin:0 auto; line-height: 28px;
	}

	#CONTENT-9-2 .date{
	font-size: 15px; color: #FFFFFF; font-weight: bold;margin:0 auto; line-height: 18px;
	}


	/*模塊10--優惠券 */
	#CONTENT-10{
		clear:both;
		width:95%; /*background-color: #ff9e00;*/ border-radius: 15px;
		margin:0 auto;
		overflow:hidden;
		padding-top: 5px;
		padding-bottom: 5px;  margin-bottom: 10px;
	}

	#CONTENT-10 .BOX{
		float:left;
		width:50%; padding: 3px;
	}

	#CONTENT-10 .title{
	font-size: 22px; color: #FFFFFF; font-weight: bold;margin:0 auto; line-height: 28px;
	}

	#CONTENT-10 .date{
	font-size: 15px; color: #FFFFFF; font-weight: bold;margin:0 auto; line-height: 18px;
	}


	/*模塊8--優惠券 */
	#CONTENT-11{
		clear:both;
		width:95%; 
		margin:0 auto;
		overflow:hidden;
		padding-top: 5px;
		padding-bottom: 5px;  margin-bottom: 10px;
	}

	#CONTENT-11 .BOX{
		float:left;
		width:33%; padding: 3px;
	}

	#CONTENT-11 .title{
	font-size: 38px; color: #000; font-weight: bold;margin:0 auto; line-height: 45px;
	}

	#CONTENT-11 .date{
	font-size: 25px; color: #000; font-weight: bold;margin:0 auto; line-height: 30px;
	}


	#DOWN{
		clear:both;
		width:100%;
		/* margin-top: 10px !important; */
		background-color:#03080e;
		padding: 0;
		padding-bottom: 8vh;
	}

	#DOWN p{
		font-size:13px;
		text-align:center;
		line-height:1.8;
		color:#fff;
	}

	/* 選單 */
	#menu-float {
		width:100%; height:50px; 
		margin:auto;
	position: fixed;
		top: 0px;
		z-index: 999;	
		
	}

	ul,li{  margin: 0; padding: 0;
		list-style:  none;
		display: inline-block;
		margin: 0 auto ;  
	}

	#floater ul,
	#floater ul{font-size:0;}	
	#floater li{float:none;}
	#floater li{cursor:pointer;}

	#floater { 
		width:100%;  
		height: 50px;background-color: #af2200;
		z-index: 999;
	}
	#floater .content{
		width:100%;  
		background-color: #af2200; 
		margin: 0 auto;
		text-align: center;
		z-index: 10;
	}

	#floater .content right{ float: right;}	
	#floater img{width:100% }
		
			
	.backHome{
	color: #f4c343;
	font-size: 20px;
	}

	/* 手機橘子嘉年華 */
	.CONTENT-6 .prize a {
		max-width: 42%;
		margin-bottom: 1em;
	}
	.box1 {
		width: 47%;
		margin: 4px;
	}

	.box2 {
		margin: 1em 0.5em;
		
	}

	.box1 .superText {
		font-size: 18px;
	}
	.box1 p {
		/* font-size: 18px; */
		/* height: unset; */
		/* max-height: 3em; */
		height: 4em;
		max-width: 95%;
		line-height: 22px;
		margin-bottom: unset;
	}
	.socialBlock .social {
		max-width: 60%;
	}	
	.box1 .price span.ori {
		width: 100%;
	}
	.box1 .price span.superText {
		font-size: 20px;
	}
	.dNone {
		display: block;
	}

	#CONTENT-1-bg3 {
		background-size: 10%;
		padding-top: 10%;
	}
	#CONTENT-1-bg5 {
		background-size: 10%;
		/* padding-top: 18%; */
		padding-top: 62px;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.activity {
		margin-top: 2em;
	}
	.btnItem {
		max-width: 50%;
	}
	.frame {
		padding: 8% 0 5%;
		margin: 1em 1em 0;
		background: url(../images/FR-mb3.png) no-repeat 100% / 100%;
	}
	.frame p {
		font-size: 15px;
		line-height: 18px;
		/* text-align: justify; */
		padding-left: 1.8em;
		text-indent: -1.2em;
	}
	.frame ul li {
		font-size: 16px;
		line-height: 20px;
		/* text-align: justify; */
		padding-left: 1.6em;
		/* padding-left: 1.8em;
		text-indent: -1.2em; */
	}
	.text-i {
		padding-left: 2em;
		text-indent: -1.2em;
	}
	.text-i1 {
		padding-left: 2em;
		text-indent: -1.2em;
	}
	.hContent {
		/* padding: 0 1.8em; */
	}
	.SD {
		display: none;
	}
	.hBlock {
		width: 100%;
		padding: 0 0.9em;
	}
	.activity .title {
		transform: translate(-50%, -30%);
	}
	.top-imgLink {
		max-width: 112px;
	}
	.KV-bg {
	}
	.KV-btn {
		max-width: 72vw;
		width: 100%;
		right: unset;
		/* bottom: calc(100% - 84vh); */
		bottom: unset;
		position: relative;
		/* margin: auto; */
		transform: unset;
	}
	/* .cat1 {
		width: 80%;
		margin: auto;
		margin-top: 0.5em;
	} */
	.cat2 {
		width: 42%;
		margin-left: 16em;
		margin-top: 2em;
	}
	.main-kv {
		/* padding-top: 40px; */
	}
	.event {
		padding: 6% 0;
	}
	.event-content {
		height: 100%;
		/* align-items: end; */
		align-items: flex-end;
		/* align-items: center; */
		padding: 0.2em;
		padding-top: 2vh;
	}
	.event h3 {
		padding: 0 0 1vh;
		font-size: 1.1rem;
		line-height: 1.2rem;
		letter-spacing: -1px;
	}



	/*活動辦法*/
	#rule {clear:both; width:100%; margin:0 auto; overflow:hidden; font-size: 16px; padding-bottom: 10px;}

	#rule-border{clear:both; width:100%; max-width: 1330px; height: auto; margin:0 auto; overflow:hidden; 
				padding: 5px 5px;line-height: 180%;box-sizing: border-box;}

	#rule-border .p_title { padding: 5px 15px;color: #ffffff; font-size: 20px;font-weight: bold; border-radius: 100px; margin: 8px 4px;}
		
	#rule-border .sp25 { font-size: 25px;  line-height: 30px; padding-left: 15px; color: #fff; text-align: center;}
	#rule-border .sp15 { padding-left:10px; line-height: 30px; text-align: justify; max-width: 96%;}
	#rule-border .bold { font-weight: bold; }

	#rule-border .red_border { margin-left: 15px;  padding: 10px; color: #201057; font-weight: bold; border: dotted ; }
	#rule-border .red_bold { color: #201057; font-weight: bold; }
	#rule-border .red_font { color: #201057;  }

	#rule-border ul { list-style-type: circle!important;}
	#rule-border li { display: block;} 


	#rule-border .p_btn  {  width:250px; padding: 5px 15px; margin:0px; color:#FFFFFF; font-size: 24px;font-weight: bold; 
						text-decoration: none; text-align: center; border-radius: 100px; float: left; }

	#rule-border .p_btn a {background: #8f0b1d;  width:250px; padding: 5x 15px; margin:0px; color:#FFFFFF; font-size: 24px;font-weight: bold; 
						text-decoration: none; text-align: center; border-radius: 100px; float: left; }

	#rule-border .p_btn a:hover {background:  #8f0b1d;  width:250px; padding: 5px 15px; margin:0px; color:#FFFFFF;font-size: 24px;font-weight: bold;
								text-decoration: none; text-align: center; border-radius: 100px; float: left; }
		#rule-border .btn{ width: 300px; margin: 0 auto;}

	#rule-border .p_space{ width: 22px; float: left;} 

	#rule-border .sp_ans { padding-left: 15px;}

	#rule-border .btn_line{ margin: 0 auto;}


	/*活動辦法*/
	#gash {clear:both; width:100%; margin:0 auto; overflow:hidden; font-size: 16px; background-color:#f2dbae; padding-bottom:0px;}

	#gash-border{clear:both; width:100%; max-width: 1600px; height: auto; margin:0 auto; overflow:hidden; 
			border: 10px solid #ba9661;line-height: 150%;box-sizing: border-box;}

	#gash-border .sp_ans { padding-left: 15px;}
	#gash-border .pp { color: #000000;text-decoration: none;} 
	#gash-border .pp a { color: #000000;text-decoration: underline;}
	#gash-border .pp a:hover { color: #000000; text-decoration: none;}




	.video-container iframe, .video-container object, .video-container embed {

	position: absolute;

	top: 0;left: 0;

	width: 100%;

	height: 100%;}

	
	/* 白爛貓 */
	#CONTENT-1-bg1 section {
		margin: auto;
		/* max-height: calc(100% - 12vh); */
		height: 100%;
		padding-top: 4vh;
		/* max-width: 96%; */
	}
	/* #CONTENT-1-bg1 section.last {
		height: 100%;
	} */
	#CONTENT-1-bg1 section.container {
		/* height: calc(100% - 12vh);  */
		max-width: 98vw;
		/* max-height: 92vh; */
	}
	.dp-md-none {
		display: none;
	}
	.checkBlock {
		max-width: 100%;
		padding: 0;
	}
	.tRule {
		max-width: 90%;
	}
	.c-w1 {
		max-width: 100%;
	}
	.c-w2 {
		max-width: 100%;
		width: 100%;
	}
	.c-sp1 {
		max-width: 58%;
	}
	.c-sp2 {
		max-width: 33%;
	}
	.c-auto {
		display: none;
	}
	.txt3 {
		font-size: .8rem;
		line-height: 1rem;
		padding: 0;
	}
	a.txt5:visited, a.txt5:link {
		font-size: 1.4rem;
		line-height: 1.6rem;
	}
	.tRule {
		padding: 0 0 1em 0;
	}
	.spe1 {
		border-radius: 12px;
		border: 4px solid #e59b52;
		outline: 3px solid #fff;
		max-width: 94%;
		width: 100%;
		padding: 0.5em;
	}
	.spe2 {
		padding: 0;
	}
	.spe2 .container {
		border-radius: 12px;
		border: 4px solid #e59b52;
		outline: 3px solid #fff;
		max-width: 92%;
		width: 100%;
		padding: .5em;
		margin-top: 8vh;
		/* margin: auto; */
		/* height: calc(100% - 24vh); */
	}
	.spe2-text {
		padding: 0;
	}
	.spe2-text1 {
		width: 100%;
		padding: 0;
	}
	.spe2-img, .spe2-img1 {
		max-width: 82%;
		padding: 0;
	}
	.spe2-card {
		max-width: 68%;
		/* margin: -6em 2em -0.5em auto; */
		padding: 0.5em 0 0;
		line-height: 14px;
		margin: auto;
	}
	.spe2-btn {
		max-width: 90%;
		margin: auto;
		justify-content: center;
		margin: 0 auto auto !important;
		padding: 0;
	}
	.spe2-btn a.c-w1 {
		max-width: 91%;
	}
	.prize {
		max-width: 38%;
	}
	.event1-content {
		max-width: 50vw;
	}
	.event1 h3 {
		font-size: 1.2rem;
		line-height: 1.4rem;
	}
	.event1 .fb-page {
		/* position: absolute; */
		max-width: 100%;
		width: 100%;
		max-height: 128px;
		overflow: hidden;
		overflow-x: hidden;
		overflow-y: hidden;
	}
	.event h4 {
		font-size: 1.1rem;
		line-height: 1.3rem;
	}
	.txt {
		padding-top: .5em;
	}
	.txt1 {
		font-size: .8rem;
		line-height: 1.2rem;
	}
	.txt2 {
		font-size: .8rem;
		line-height: 1rem;
		letter-spacing: -.5px;
	}
	section .evtt0 {
		max-width: 100%;
		width: 100%;
		top: -14%;
	}
	section .evtt {
		max-width: 100%;
		width: 100%;
		top: 0;
	}
	section .evtt1 {
		max-width: unset;
		/* margin: 8vh auto 0; */
		/* margin: 4vh auto -8vh; */
    	margin-bottom: 1vh;
	}
	.e2, .e3 {
		height: calc(100% - 2vh);
	}
	.KV-main {
		height: fit-content;
		max-height: 100%;
		/* transform: translateY(-12%); */
		max-width: 90vw;
	}
	.c-w5 {
		max-width: 60%;
	}
	.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
		/* bottom: -24px; */
		bottom: -4em;
		left: 0;
		width: 100%;
	}
	.last .container {
		/* height: calc(100% - 240px); */
		height: calc(100% - 46px);
	}
	.e4 .spe2-btn {
		margin: 4vh auto auto !important;
	}
	.e2 .spe2-btn {
		justify-content: center;
		margin: 0 auto !important;
	}

}
/* XR以下 */
@media screen and (max-width: 415px) {
	.KV-btn {
		max-width: calc(100% - 36vw);
	}
	.spe1 {
		border-radius: 12px;
		border: 4px solid #e59b52;
		outline: 3px solid #fff;
		max-width: 94%;
		width: 100%;
		/* padding: 0.5em 1.5em; */
		margin-top: 8vh;
		/* height: calc(100% - 24vh); */
	}
	section .evtt0 {
		max-width: 100%;
		width: 100%;
		top: -9vh;
	}
	.event {
		padding: 2vh 0 1vh;
		max-height: 100%;
	}
	.spe2-text {
		padding: 0;
	}
	.spe2-text1 {
		max-width: 65%;
		width: 100%;
		padding: 0;
	}
	.spe2-card {
		max-width: 35%;
	}
	.spe2-btn .txt2 {
		margin: 0.2em 0;
		text-wrap: nowrap;
	}
	.tRule {
		padding: 0;
	}
	.tRule .c-w2 {
		padding: 0;
		max-width: 68%;
	}
	.txt {
		padding-top: .2em;
	}
	section .evtt1 {
		margin: 0 auto -4vh;
	}
	.spe2-img, .spe2-img1 {
		max-width: 74%;
		margin: -0.5em;
	}
	.last .container {
		/* height: calc(100% - 252px); */
		height: calc(100% - 10vh);
	}
	.spe2-btn {
		max-width: 100%;
		/* margin: 0 auto 2vh !important; */
	}
	.e2, .e3 {
		height: calc(100% - 4vh);
	}
	.swiper-block {
		margin-bottom: 0;
	}
	.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
		bottom: -2em;
	}
	.e4 .spe2-btn {
		margin: 1vh auto 1vh !important;
	}
	.txt1 {
		font-size: .7rem;
		line-height: 1rem;
	}
	.txt2 {
		font-size: .7rem;
		line-height: 1rem;
	}
	.txt3 {
		font-size: .7rem;
		line-height: 1rem;
	}
	section .evtt {
		top: 6vh;
	}
	section .evtt1 {
		margin: 0 auto 2vh;
	}
	.spe2 .container {
		margin-top: 12vh;
	}
}
@media screen and (max-width: 376px) {
	.spe2-img, .spe2-img1 {
		max-width: 70%;
	}
	#CONTENT-1-bg1 section {
		padding-top: 5vh;
	}
	section .evtt {
		top: 4vh;
	}
	section .evtt0 {
		top: -12vh;
	}
	.e4 .spe2-btn {
		margin: 4vh auto 1vh !important;
	}
}