@charset "UTF-8";


/* 全頁面start */

html {
  font-family: 'Roboto', 'Noto Sans TC', sans-serif; /* 設定全網頁字型 預設為“思源黑體” */
}

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

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

html, body {
  height: 100%;
  margin: 0;
  
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  background-image: url("../img/main-1_01-618.jpg"); /* 如要設定全版面背景 */
  background-repeat: no-repeat; /* 背景圖不重複 */
  background-position: center top; /* 背景位置 */
  background-size:100%;
  background-color: #badbfe;
  flex-grow: 1; /*可佔滿垂直剩餘的空間*/
}

/* 全頁面end */


/* 版頭banner-start */
.topbannerfull {
  margin: 30px auto 20px;
  max-width: 1200px;
  height: auto;

}

.topcon {
  width: 60%;
  margin: 0px auto;
}

.toptitle {
  width: 100%;
  margin: 0px auto -20px;
  display: block;
}

.topbanner {
  width: 100%;
}

/* 版頭banner-end */


/* 主選單start */


button.tablink {
  border:none;
}

.tablink {
  font-size: 1.8rem;
  font-weight: 800;
  width: 16%;
  height: auto;
  padding: 20px 0px;
  color: #ffffff;
  background:linear-gradient(to bottom, #18baf5 5%, #3f05ff 100%);
  background-color:#18baf5;
}

.tabto1 {
  border-radius: 14px 0px 0px 14px;
}

.tabto2 {
  border-radius: 0px 14px 14px 0px;
}

.tablink:hover{
  background:linear-gradient(to bottom, #00a6e3 5%, #000ac2 100%);
	background-color:#3f05ff;
}

.form4 {
  display: flex;
  justify-content: center; 
}
/* 主選單end */



.selecttitle {
  text-align:center;
  padding-top:50px;
  font-size: 1.4rem;
  font-weight: 400;
}




/* 次選單第一組start */
.tab-navigation { margin:-10px 0px 20px;display: flex;justify-content: center;  }
.tab-content { 
    width:auto;
    height:auto;
}

/* 次選單第一組end */

/* 次選單第二組start */
.aab-navigation { margin:-10px 0px 20px;display: flex;justify-content: center;  }
.aab-content { 
    width:auto;
    height:auto;
}
/* 次選單第二組end */

/* 次選單第三組start */
.bab-navigation { margin:-10px 0px 20px;display: flex;justify-content: center;  }
.bab-content { 
    width:auto;
    height:auto;
}
/* 次選單第三組end */

/* 次選單第四組start */
.cab-navigation { margin:-10px 0px 20px;display: flex;justify-content: center;  }
.cab-content { 
    width:auto;
    height:auto;
}
/* 次選單第四組end */

select {
  /* Reset Select */
  appearance: none;
  outline: 0;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  background:url(../img/arrow.svg) no-repeat right 0.5rem center transparent;
  background-color: #ffffff;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select wrapper */

/* 次選單樣式start */

#select-box {
  margin: 20px 0px 0px 0px;
  font-size: 1.6rem;
  position: relative;
  display: flex;
  width: 64%;
  height: 100%;
  padding: 10px 18px;
  border-radius: .25em;
  overflow: hidden;
  color: #60666d;
  box-shadow: 5px 4px 10px 0px #a9beeb;   
}

#select-box02 {
  margin: 20px 0px 0px 0px;
  font-size: 1.6rem;
  position: relative;
  display: flex;
  width: 64%;
  height: 100%;
  padding: 10px 18px;
  border-radius: .25em;
  overflow: hidden;
  color: #60666d;
  box-shadow: 5px 4px 10px 0px #a9beeb;   
}

#select-box03 {
  margin: 20px 0px 0px 0px;
  font-size: 1.6rem;
  position: relative;
  display: flex;
  width: 64%;
  height: 100%;
  padding: 10px 18px;
  border-radius: .25em;
  overflow: hidden;
  color: #60666d;
  box-shadow: 5px 4px 10px 0px #a9beeb;   
}

#select-box04 {
  margin: 20px 0px 0px 0px;
  font-size: 1.6rem;
  position: relative;
  display: flex;
  width: 64%;
  height: 100%;
  padding: 10px 18px;
  border-radius: .25em;
  overflow: hidden;
  color: #60666d;
  box-shadow: 5px 4px 10px 0px #a9beeb;    
}


/* 次選單樣式end */


/* 次選單通用start */

.tabcol { 
  padding: 10px 10px 50px;
  }

.tableinside {
    max-width: 1200px;
    padding: 36px;
    height: auto;
    margin: 60px auto 0px;
    background-color: #ffffff;
    border-radius: 36px;
    box-shadow: 5px 4px 10px 0px #a9beeb;   
}

.tableinside h3{
  margin-top: 20px;
  font-size: 2rem;
  font-weight: 200;
}

.accordion h2{
  margin: 26px 0px 32px;
  font-size: 3.4rem;
  font-weight: 900;
  vertical-align: sub;
}

.accordion h2 spen{
  font-size: 2rem;
  font-weight: 900;
}

.accordion p{
  margin: 20px 0px 20px 8px;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.6;
}

table {
  border-collapse: collapse;
  padding: 0;
  width: 100%;
  margin: 0px auto 45px;
  box-shadow: 0 0 15px -6px #00000073;
}

table tr {
  background-color: #fff;
}

table th,
table td {
  padding: 20px 8px;
  border-bottom: 1px solid #eee;
}


table  th { /* 設定品項標題 */
  padding: 10px 0;
  font-size: 1.3rem;
  font-weight: 600;
  padding: 15px;
  background-color: #e7af0a;
  color:#fff;
}

table tr{ /* 設定品項 */
  text-align: center;
  font-size: 1.4rem;
  padding: 20px 0;
  background-color: #fff;
  color:#3a3a3a;
}

.spensmil{ /* 設定品項小字 */
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 400;
}

table tr:hover{
  background-color: #f8f8f8;
}

table .prbig { /* 設定禮券回收價 */
    font-size: 1.8rem;
    color: #e92020;
    font-weight: 600;
}

table spen{ /* 設定＄符號 */
    font-size: 1rem;
    color: #e92020;
    font-weight: 500;
}

/* 次選單通用end */

/* 按鈕start */

.gobuttonfull {
  display: flex;
  flex-direction:row;
  margin: 40px 0 24px;
}

.button-2 {
    align-items: center;
    padding: 12px 36px;
    margin-right:20px;
    border: none;
    border-radius: 200px;
    background-color: #ecac22;
    color: #fff;
    font-weight: 500;
    font-size: 2rem;
}

.button-2:hover {
    background-color: #f9be3f;
}

.button-1 {
    align-items: center;
    padding: 12px 36px;
    border: none;
    border-radius: 200px;
    background-color: #2556c3;
    color: #fff;
    font-weight: 500;
    font-size: 2rem;
}

.button-1:hover {
    background-color: #4074e5;
}

/* 按鈕end */

/* 產品選單start */

.tagfull01 {
 background-color: #bbdbfe;
 padding: 30px 10px;
}


.tagsecond {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 36px;
    padding: 36px;
    background-color: #fafafa;
    box-shadow: 5px 4px 10px 0px #a9beeb; 
}




.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: #003cff;
    color: #fff;
}

.tab-4 label:has(:checked)::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background-color: #003cff;
    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-content: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 */

.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 */













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

  .topcon {
    width: 80%;
  }

  .tablink {
    width: 20%;
  }

  #select-box {
    width: 80%;
  }
	
}




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

/* 底部資訊 576寬以下 start */


/* 主選單通用-start */


.topbannerfull {
  margin: 50px auto 20px;
}

.topcon {
  width: 100%;
}

.toptitle {
  width: 80%;
  margin: 0px auto -20px;
}

.tablink {
  font-size: 1.4rem;
  font-weight: 800;
  width: 22%;
  height: auto;
  padding: 20px 0px;
}

/* 主選單通用-end */

/* 次選單通用-start */

.tableinside {
  padding: 18px 12px;
  border-radius:12px;
  margin: 20px auto 0px;
}

.tableinside h3 {
  font-size: 1.8rem;
  margin-top:10px;
  margin-left: 12px;
}

.accordion h2{
  margin: 16px 0px 25px 12px;
  font-size: 2.4rem;
  font-weight: 900;
}

#select-box { /* 設定次選單 */
  font-size: 22px;
  width: 87%;
}

#select-box02 { /* 設定次選單 */
  font-size: 22px;
  width: 87%;
}

#select-box03 { /* 設定次選單 */
  font-size: 22px;
  width: 87%;
}

#select-box04 { /* 設定次選單 */
  font-size: 22px;
  width: 87%;
}

/* 次選單通用-end */


table  th { /* 設定品項標題 */
  font-size: 1rem;
  font-weight: 600;
}

table tr{ /* 設定品項 */
  font-size: 1rem;
}

table .prbig { /* 設定禮券回收價 */
    font-size: 1.2rem;
}

.accordion p{
  margin: 16px 0px 16px 8px;
  font-size: 1rem;
}

/* 按鈕start */
.gobuttonfull {
  flex-direction:column;
  justify-content: center;
  align-items: center; 
}

.button-2 {
    width: 300px;
    font-weight: 600;
    font-size: 1.6rem;
    margin:0px auto 16px;
}

.button-1 {
    width: 300px;
    font-weight: 600;
    font-size: 1.6rem;
    margin:0px auto;
}

/* 按鈕end */


.tab-4 h1{
    font-size: 1rem;
}

.tab-4 {
    margin: 6px ; 
}

.tab-4 > label {
  font-size: 1.2rem;
}

.tab-4 .processtitle{
  font-size: 1.6rem;
  font-weight: 800;
  margin: 10px 0px 28px 12px;
}

.tab-4 .processtitlelast {
  font-size: 1.6rem;
  margin: 30px 0px 28px 12px;
}


/* 產品選單start */

.tagfull01 {
 background-color: #bbdbfe;
 padding: 10px 10px 30px;
}

.tagsecond{
  border-radius:12px;
  padding: 12px 2px;
}

.tab-4 .restepphoto{
    width: 47%;
    margin: 0px auto 12px
}

.tab-4 .restepphotolap{
  width: 47%;
  margin: 0px auto 16px;
}

.tab-4 > div {
    padding: 1.5em 6px;
}

/* 產品選單end */

.Recyclingfull {
  margin-top: 18px;
  padding: 0px 6px;

}


.Recyclphoto {
  width: 50%;
  margin:4px auto 16px;
}

.tab-4 p{
  font-size: 1rem;
}

.tab-4 .tabblock-last {
  flex-wrap:wrap;
  flex-direction:column;
  align-items: baseline;
  margin-left: 12px;
}

.safetime {
  width: 80px;
  height: auto;
}

.safetimefull .safetimefont .safetimefonttit{
  font-size: 1.5rem;
}

.safetimefull .safetimefont .safetimefontp {
  font-size: 0.9rem;
}



/* 底部資訊 576寬以下 end */
  
	
}