@charset "UTF-8";


/* 全頁面start */

.allpage00 {
  background-image: url("../img/bg.jpg");
  background-repeat: no-repeat; /* 背景圖不重複 */
  background-position: center top; /* 背景位置 */
  background-color: #78ccff; /* 背景顏色 */
  font-family: 'Roboto', 'Noto Sans TC', sans-serif; /* 設定全網頁字型 預設為“思源黑體” */
}

a {text-decoration: none;} /* 移除超連結樣式 */

a:hover, a:visited, a:link, a:active { /* 移除超連結樣式 */
text-decoration: none;
}


/* 全頁面end */

.top-activity {
	max-width: 1000px; /* 設定寬度 */
	height:auto;
	margin:0 auto;
}

.top-activity .topMan { 
	width:80%;
	display: block;
	margin:6% auto;
}

/* 次標1 */

.title {
	max-width: 1000px; /* 設定寬度 */
	height:auto;
	margin:0 auto;
}

.title img{
	width:70%;
	display: block;
	margin:-20px auto 0px;
}

/* 次標2 */

.title-2 {
	max-width: 1000px; /* 設定寬度 */
	height:auto;
	margin:0 auto;
}

.title-2 img{
	width:70%;
	display: block;
	margin:40px auto 10px;
}

/* 次標3 */

.title-3 {
	max-width: 1000px; /* 設定寬度 */
	height:auto;
	margin:0 auto;
}

.title-3 img{
	width:70%;
	display: block;
	margin:28px auto -20px;
}

/* 活動 */

.eveneeall {
	max-width: 1000px;
	margin:0 auto;
}

.evenee img{
	width:70%;
	display: block;
	margin:0 auto;

}


/* 活動標題和背景 */

.logodes {
	width: 260px;
    height:auto;
	display: block;
	margin : 0 auto -32px;
}

.even-logo {
	max-width: 800px;
	margin : 0 auto -20px;
	height:60px;
	background-color: #ffe772;
	border-radius: 8px;
	 border-color:#180d52; 
	 border-style:solid;
	 border-width:6px;
}

/* tag切換 */

.tab-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    max-width: 830px;
	margin : 0 auto ;
	padding: 10px 16px;
}

.tab-2 > label {
	
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: 1em .6em;
    border-radius: 8px;
	border-color:#180d52; 
	border-style:solid;
	border-width:4px;
    background-color: #180d52;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
}

.tab-2 > label:hover {
    background-color: #f21224;
}

.tab-2 input {
    display: none;
}

.tab-2 > div {
    display: none;
    width: 100%;
    padding: 1.5em 0;
}

.tab-2 label:has(:checked) {
    background-color: #d91010;
}

.tab-2 label:has(:checked) + div {
    display: block;
}

spen.mora{
	color:#e50416;
	font-weight: 900;
}


/* 表格一 */

.si {
	padding: 8px 0px;
}

.ta {
	max-width: 800px;
	height:auto;
	margin:0px auto;
	background-color: #ffffff; 
	     border-color:#180d52; 
	     border-style:solid;
	     border-width:6px;
	border-radius: 8px;
}

.lin {
    width:100%;
	height:3px;
	background-color: #000000;
	margin-left: -2px;
}


/* 表格 */


.ta .ta-2 {
    width: 100%;
	display: grid;
	grid-template-columns: 20% 80% ;
	justify-content: center; /* 對齊方式 1.start 靠左 2.center 置中 3.end 靠右 4.stretch 平均分佈 */
	align-items: center;
	

	
	
}


.ta .ta-2 h4 {
	text-align: left;
	padding: 18px 12px 12px 12px;
	color: #3c3c41;
	font-size:1rem;
	font-weight: 900;
	line-height: 26px;
	
}

.ta .ta-2 h4 .h4otta{
margin-bottom:20px;
	
}

.ta .ta-2 h5 {
	display: flex;
    justify-content: center;    
    align-items: center;  
	height: 100%;
	text-align: center;
	background-color: #2029DE;
	font-size:1.4rem;
	font-weight: 900;
	color: #ffffff;
}

.ta .ta-2 h2 {
	display: flex;
    justify-content: center;    
    align-items: center;  
	height: 100%;
	text-align: center;
	background-color: #2029DE;
	font-size:1.4rem;
	font-weight: 900;
	color: #ffffff;
}

.seemoreall {
	margin:20px 0px;
}

.seemore0 {
	font-size:1rem;
	font-weight:800;
	border-radius: 60px;
	color:#ffffff;
	background-color:#e7af0c;
	padding:6px 18px;
}


/* 產品選單start */

.tagfull01 {
	padding: 30px 10px;
   }
   
   
   .tagsecond {
	   max-width: 800px;
	   margin: 0 auto;
	   border-radius: 36px;
	   border-radius: 8px;
	   border-color:#180d52; 
	   border-style:solid;
	   border-width:6px;
	   background-color: #fafafa;
   }
   
   
   
   
   .tab-4 {
	   display: flex;
	   flex-wrap: wrap;
	   max-width: 100%;
	   background-color: #ffffff;
   }
   
   .tab-4 > label {
	   flex: 1 1;
	   order: -1;
	   position: relative;
	   min-width: 70px;
	   padding: .7em 1em;
	   background-color: #e3e3e3;
	   color: #999;
		font-weight: 600;
	   font-size: 2rem;
	   text-align: center;
	   cursor: pointer;
   }
   
   .tab-4 > label:hover,
   .tab-4 label:has(:checked) {
	   background-color: #2029df;
	   color: #fff;
   }
   
   .tab-4 label:has(:checked)::before {
	   position: absolute;
	   bottom: -8px;
	   left: 50%;
	   transform: translateX(-50%);
	   width: 18px;
	   height: 9px;
	   background-color: #2029df;
	   content: '';
	   clip-path: polygon(0 0, 100% 0, 50% 100%);
   }
   
   .tab-4 input {
	   display: none;
   }
   
   .tab-4 > div {
	   display: none;
	   width: 100%;
	   padding: 1.5em 1em;
   }
   
   /* 產品選單顯示start */
   
   .con01 label:has(:checked) + div {
	   display: block;
   }
   
   .con02 label:has(:checked) + div {
	   display: block;
   }
   
   .con03 label:has(:checked) + div {
	   display: block;
   }
   
   .con04 label:has(:checked) + div {
	   display: block;
   }
   
   /* 產品選單顯示end */
   
   .tab-4 h1{
	 font-size: 2.2rem;
	 font-weight: 900;
	 margin: 24px 0px 20px;
   }
   
   .tab-4 .processtitle{
	 font-size: 2rem;
	 font-weight: 800;
	 margin: 24px 0px 28px 12px;
   }
   
   .tab-4 .processtitlelast {
	 font-size: 2rem;
	 font-weight: 800;
	 margin: 36px 0px 28px 12px;
   }
   
   .tab-4 .tabblock {
	 border-bottom: 1px solid #cdcdcd;
	 padding: 20px 0px 40px;
   }
   
   .tab-4 .tabblock-02 {
	 padding: 20px 0px 30px;
   }
   
   .tab-4 .tabblock-last {
	 display: flex;
	 flex-direction: row;
	 justify-content: space-evenly;
	 align-items: center; 
	 padding: 20px 0px 0px;
   }
   
   /* 回收流程start */
   
   .tab-4 .restep {
	 display: flex;
	 flex-wrap: wrap;
   }
   
   
   .tab-4 .restepphoto{
	   width: 22%;
	   margin: 0px auto 12px;
	   align-items: center;
	   justify-content: center;
   }
   
   .tab-4 .restepphotolap {
	 display: flex;
	 flex-wrap: wrap;
   }
   
   .tab-4 .restepphotolap{
	 width: 27%;
	 margin: 0px auto 32px;
	 align-items: center;
	 justify-content: center;
   }
   
   
   .tab-4 p{
	 margin: 8px 0px 12px 12px;
	 font-size: 0.8rem;
	 font-weight: 400;
	 line-height: 1.5;
   }
   
   .Recyclingfull {
	 margin-top: 28px;
	 display: flex;
	 flex-wrap:wrap;
	 justify-content: center;
	 align-items: center;
   }
   
   .Recyclphoto {
	 width: 25%;
	 margin:4px 16px 20px;
   }
   
   .safetimefull {
	 display: flex;
	 justify-content: center;
	 align-items: center; 
	 flex-wrap: wrap;
	 margin-bottom: 24px;
   }
   
   .safetime {
	 width: 160px;
	 height: auto;
   }
   
   .safetimefont {
	 margin: 6px 10px 0px 20px ;
   }
   
   .safetimefull .safetimefont .safetimefonttit{
	 font-size: 1.3rem;
	 color: #3a3a3a;
	 font-weight: 600;
	 margin-bottom: 12px;
   }
   
   .safetimefull .safetimefont .safetimefontp {
	 font-size: 0.8rem;
	 font-weight: 300;
	 margin-bottom: 8px;
   }
   
   
   
   /* 回收流程end */
   
   /* 注意事項start */

   .label-titt {
	max-width:400px;
	padding:6px 12px;
	background-color: #0088db;
	color:#ffffff;
	border-radius: 36px;
	margin: 26px 0 16px 0;
   }
   
   .tab-4 h5{
	 margin: 12px 0px 16px;
	 padding-left: 8px;
	 font-size: 1.2rem;
	 font-weight: 800;
	 line-height:2;
	 color: #0041ec;
   }
   
   .tab-4 h6{
	 margin-bottom: 18px;
	 font-size: 0.9rem;
	 line-height:1.8;
	 color: #3a3a3a;
   }
   
   /* 注意事項end */
   
   /* 產品選單end */


/* 按鈕 start */

.button {
	max-width:500px;
	background-color: #e50416;
	padding: 12px;
	margin: 40px auto 80px;
	text-align: center;
	border-radius: 36px;
}

.button:hover {
	background-color: #f83545;
}

.button h1 {
	color: #ffffff;
	font-size: 2.6rem;
	font-weight: 900;
}

/* 按鈕 end */



/* 版身標 */

.title-pdo {
	max-width: 1000px; /* 設定寬度 */
	height:auto;
	margin:0 auto;
}

.title-pdo img{
	max-width:260px;
	display: block;
	margin:36px auto 0px;
}




/* 設定一行四塊板身區塊 start */

.four-sales-activity {
	display: grid;
	grid-template-columns: 22% 22% 22% 22%; /* 設定一行數量與各塊大小,以百分比為主 */
	justify-content: center; /* 對齊方式 1.start 靠左 2.center 置中 3.end 靠右 4.stretch 平均分佈 */
	grid-gap: 10px; /* 設定間距 */
	max-width: 1160px; /* 設定寬度 */
	height:auto;
	margin:0px auto; /* 置中 */
	padding:20px 0px 20px 0px; /* 設定內部距離 1.第一個數值上面 2.第二個數值右邊 3.第三個數值下面 4.第四個數值左邊 */

}

.four-activity {
	width:100%;
	height:auto;
    background-color: #ffffff; /* 設定商品板塊背景 */
	border-radius: 10px 10px 10px 10px; /* 1.左上 2.右上 3.右下 4.左下 */
	padding: 0px 0px 12px 0px ; /* 設定內部距離 1.第一個數值上面 2.第二個數值右邊 3.第三個數值下面 4.第四個數值左邊 */
}

.four-activity .four-activity-img { /* 設定商品圖 */
	     display: block;
	     width:96%; /* 圖片尺寸 */
	     height:auto;
	     margin:0px auto; /* 置中 */
}


.four-activity h2 { /* 設定炸炸 */
	     font-size: 1rem; /* 設定文字大小 */
	     font-weight: 600; /* 設定文字粗度 100~900 */
	     letter-spacing:0px; /* 設定字距 */
		 line-height:22px; /* 設定行高 */
	     color: #ffffff;   /* 設定文字顏色 */
		 text-align: center; /* left靠左 right靠右 center置中 */
		 background-color: #253BBD; /* 設定背景顏色 */
		 border-radius: 10px 10px 0px 0px; /* 1.左上 2.右上 3.右下 4.左下 */
		 padding: 10px 4px 10px ; /* 設定內部距離 1.第一個數值上面 2.第二個數值右邊 3.第三個數值下面 4.第四個數值左邊 */
		 margin-bottom: 6px;
}

.four-activity:hover h2 {
	     background-color: #2f47e9; /* 滑過變背景顏色 */

	     /* 如果要設定滑過出現邊框就使用這段語法,需注意padding的上下數值要扣掉邊框的寬度
	     padding: 8px 0px 8px 0px;
	     border-color:#0000FF; 
	     border-style:solid;
	     border-width:2px;
	     */
	     
}

.four-activity-content-font h1 { /* 設定品名 */
	     font-size: 1.2rem; /* 設定文字大小 */
	     font-weight: 600; /* 設定文字粗度 100~900 */
	     letter-spacing:0px; /* 設定字距 */
		 line-height:22px; /* 設定行高 */
	     color: #000000;   /* 設定文字顏色 */
		 text-align:center;
	     padding: 4px 10px 6px 10px; /* 設定四方向距離其他物件的距離 1.第一個數值上面 2.第二個數值右邊 3.第三個數值下面 4.第四個數值左邊 */
}

.four-activity-content-font p { /* 設定規格 */
	     font-size: 0.8rem; /* 設定文字大小 */
	     font-weight: 400; /* 設定文字粗度 100~900 */
	     letter-spacing:0px; /* 設定字距 */
	     color: #000000;   /* 設定文字顏色 */
		 text-align:center;
	     padding: 4px 10px 14px 10px; /* 設定四方向距離其他物件的距離 1.第一個數值上面 2.第二個數值右邊 3.第三個數值下面 4.第四個數值左邊 */
}

.four-activity-content-font h3  { /* 設定價格 */
		 text-align: center; /* left靠左 right靠右 center置中 */
         margin: 0px auto ; /* 設定左邊距離 */
	     font-size: 1.8rem; /* 設定文字大小 */
	     font-weight: 800; /* 設定文字粗度 100~900 */
	     color:#FF0004;   /* 設定文字顏色 */
}

.four-activity-content-font h3 .nt  { /* 設定NT或＄或文字 */
	     font-size: 0.8rem; /* 設定文字大小 */
	     color: #FF0004;   /* 設定文字顏色 */
}

.four-activity-content-font h3 .ori-price  { /* 設定原價 */
	     font-size: 0.8rem; /* 設定文字大小 */
	     color: #000000;   /* 設定文字顏色 */
		 font-weight: 300; /* 設定文字粗度 100~900 */
	     margin-right: 8px; /* 設定右邊距離 */
		 text-decoration:line-through; /* 加刪除線 */
}

/* 設定一行四塊板身區塊 end */











/* 當寬度低於或等於768px時 */
@media screen and (max-width: 992px) {
	
}




/* 當寬度低於或等於768px時 */
@media (max-width: 768px) {

.top-activity .topMan { 
	width:100%;
	display: block;
	padding-top: 60px;
	margin:0 auto 20px;
}
	
.title img{
	width:100%;
}
	

.ta .ta-2 h3 .rip-2 {
	font-size:1.6rem;
	line-height:50px;
	
}
	

/* 設定一行四塊板身區塊 768寬以下 start */	
	
.four-sales-activity { 
	grid-template-columns: 46% 46% ; /* 改成一行兩格 */
 }
	 
   .four-activity h2 { /* 設定炸炸 */
		  font-size: 0.9rem; /* 設定文字大小 */
		  line-height:22px; /* 設定行高 */
 }
	 
   .four-activity-content-font h1 { /* 設定品名 */
		  font-size: 1rem; /* 設定文字大小 */
		  font-weight: 600; /* 設定文字粗度 100~900 */
		  letter-spacing:0px; /* 設定字距 */
		  line-height:20px; /* 設定行高 */
 }
	 
   .four-activity-content-font h3 .ori-price  { /* 設定原價 */
		  font-size: 0.6rem; /* 設定文字大小 */
		  margin-right: 6px; /* 設定右邊距離 */
 }
	 
	 
 /* 設定一行四塊板身區塊 768寬以下 end */	
	

	
}





/* 當寬度低於或等於576px時 */
@media screen and (max-width: 576px) {
	
	.allpage00 {

		background-position: center -120px; /* 背景位置 */
	  }

/* 活動 */

.evenee img{
	width:100%;
}

/* 活動標題和背景 */

.logodes {
	width: 200px;
	margin : 0 auto -16px;
}

.even-logo {
	margin : 0 auto -40px;
	border-width:4px;
}

/* 活動 start */




.ta {
	border-width:4px;
}

.ta .ta-2 h2 {
	font-size:1rem;
	padding:0px 12px;
	line-height:24px;
}
	
.ta .ta-2 h5 {
	font-size:1rem;
	}
	
.ta .ta-2 h3 .rip-2 {
	font-size:1rem;
	line-height:36px;
	
}
	
.ta .ta-2 h3 {
	font-size:1.2rem; 
	line-height:20px;
	
}
	
.ta .ta-2 h3 .rip {
	font-size:0.8rem;
	line-height:12px;
	padding:6px;
	
}
	
.ta .ta-2 h4 {
	font-size:0.9rem;
	}



/* 活動 end */


/* 次標 start */



.title-2 img{
	width:100%;
	margin:20px auto;
}

.title-3 img{
	width:100%;
	margin:28px auto 10px;
}
/* 次標 end */

/* 品牌標籤 start */
.tab-2 > label {
    font-size: .8rem;
}
/* 品牌標籤 end */


/* 產品選單start */

.tagfull01 {
	padding: 10px 10px 30px;
   }
   
   .tagsecond{
	 border-radius:0px;
	 border-width:4px;
	 padding: 0px;
   }
   
   .tab-4 .restepphoto{
	   width: 47%;
	   margin: 0px auto 12px
   }

   .tab-4 > label {
	font-size: 1.2rem;
  }
   
   .tab-4 .restepphotolap{
	 width: 47%;
	 margin: 0px auto 16px;
   }

   .tab-4 .processtitle{
	margin: 6px 0px 28px 12px;
  }
   
   .tab-4 > div {
	   padding: 1.5em 12px;
   }

   .Recyclingfull {
	margin-top: 18px;
	padding: 0px 6px;
  
  }
  
  
  .Recyclphoto {
	width: 50%;
	margin:4px auto 16px;
  }
   
   /* 產品選單end */

   /* 注意事項start */

   .label-titt {
    font-size:.8rem;
	text-align:center;
   }


/* 按鈕 start */

.button {
	max-width:340px;
	background-color: #e50416;
	padding: 20px 6px;
	margin: 30px auto 60px;
	text-align: center;
	border-radius: 36px;
}

.button h1 {
	color: #ffffff;
	font-size: 1.6rem;
	font-weight: 900;
}

/* 按鈕 end */

/* 版身標 start*/
.title-pdo img{
	max-width:200px;
}
/* 版身標 end*/



/* 設定一行四塊板身區塊 576寬以下 start */	
	
.four-activity-content-font h3  { /* 設定價格 */
	font-size: 1.2rem; /* 設定文字大小 */
}

.four-activity-content-font h1 { /* 設定品名 */
	font-size: .9rem; /* 設定文字大小 */
}

/* 設定一行四塊板身區塊 576寬以下 end */	
	


	
}