.main.rule { position: relative; width: 100%; background: url(//www.payeasy.com.tw/pay_event/event_04/2022vip/images/bg.jpg)center 600px #000; padding-bottom: 30px;}
.rule_wrapper { background: url("../images/rule_kv.jpg")no-repeat center top #000; }
.rule_container { position: relative;  z-index: 1;  margin: auto;  width: 1200px;  height: 590px; }
.rule_slogan { position: absolute; top: 140px;  left: 284px; z-index: 2; }

.terms_wrapper { width: 1180px;  margin: 0 auto;  padding-bottom: 40px;}
.terms_container { background-color: #fff;  border: solid 3px #fff; border-radius: 50px 50px;}
.terms_container h2 { font-size: 36px;  font-weight: 800;  text-align: center; background-color: #fec995; color:#6c370d; border-radius: 50px 50px 0 0;  padding: 15px 0; line-height: 42px;}
.terms_content { width: 90%;  margin: 0 auto 40px;  font-size: 17px; line-height: 24px;}
.terms_container h3 { background-color:#bd8151; border-radius: 20px; font-size: 22px; line-height: 30px; font-weight: bold; padding: 5px 20px; display: inline-block; margin: 15px 0 7px; color: #fff;}
.terms_content ol li { margin: 0 30px 7px 40px;  list-style-type: decimal;  }
.terms_content a { display: inline-block; font-weight: bold; font-size: 18px; margin: 5px 3px; border-radius: 10px; color: #fff; background-color: tomato;  padding: 5px 20px;  transition: transform .35s;  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);}
.terms_content a:hover { -webkit-transform: translate(10%, 0);  transform: translate(0, -5px);}
.terms_container p { padding-left: 18px; margin-bottom: 5px;}

a.but{ display: block;  width: 270px; margin: auto; border-radius: 50px; color: #fff; padding: 20px 5px; font-size: 25px; transition: none; text-align: center;font-weight: bold; text-decoration: none; background: #d30000;  border-bottom: 5px #910000 solid; }
a.but:hover{ background-color: #ff6347;  border-bottom: 5px #d12a0c solid;  -webkit-transform: translate(0, 0);  transform: translate(0, 0);}

table { background: white; border-collapse: collapse;  margin: 15px 0;  width: 100%; border: 2px solid #d9974a;}
table tr,table th,table td {  border: none;  border-bottom: 1px solid #e4ebeb;}
table th,table td {  padding: 10px 5px;  text-align: left;}
table th { background: #ffd8b2;  color: #663810;  text-transform: uppercase;}
table tr td { background: #f5f5f5; }
table tr:nth-of-type(2n+2) td {  background: #ffffff;}
table.bt tfoot th,table.bt tfoot td,table.bt tbody td {  font-size: 14px;  padding: 0;}
table.bt tfoot th:before,table.bt tfoot td:before,table.bt tbody td:before {  background: #989898;  color: white;  margin-right: 10px;  padding: 10px 10px 0;}
table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content {  display: inline-block;  padding: 10px 5px 0;}
table.bt tfoot th:first-of-type:before,
table.bt tfoot th:first-of-type .bt-content,
table.bt tfoot td:first-of-type:before,
table.bt tfoot td:first-of-type .bt-content,
table.bt tbody td:first-of-type:before,
table.bt tbody td:first-of-type .bt-content {  padding-top: 10px;}
table.bt tfoot th:last-of-type:before,
table.bt tfoot th:last-of-type .bt-content,
table.bt tfoot td:last-of-type:before,
table.bt tfoot td:last-of-type .bt-content,
table.bt tbody td:last-of-type:before,
table.bt tbody td:last-of-type .bt-content {  padding-bottom: 10px;}


@media screen and (max-width:768px) {
.main.rule {background-size:100vw; padding-bottom:60px;}
.rule_wrapper{background: url("../images/rule_kv.jpg")no-repeat center 17vw #000; background-size: 158vw;}
.rule_wrapper img {width: 100%; }
.rule_container {width: 100vw; height: 59vw;}
.rule_slogan {width:50vw; top: 28vw; left:24.5vw;}

.terms_wrapper { width: 94vw; padding-bottom: 24px;}
.terms_container { border-radius: 30px 30px; padding-bottom: 20px; }
.terms_container h2 { font-size: 19px; line-height: 22px; border-radius: 30px 30px 0 0; padding: 10px 0;}
.terms_container h2 span{ display: block;}
.terms_content { width: 92%;  font-size: 14px;  line-height: 18px; margin: 0 auto;}
.terms_container h3 { font-size: 20px;  line-height: 26px; }
.terms_content ol li { margin: 4px 5px 0 15px; }
.rule .terms_content img { max-width: 80%;  }
.terms_container p { padding-left: 0;}

table { border: 1px solid #e4ebeb; margin: 0 auto 10px;}
table tr td { background: #fff;}
table#table-two-axis tr { border: 1px solid #d9974a;}
table.bt tfoot th:before,table.bt tfoot td:before,table.bt tbody td:before { background: #ebebeb; color: #555; }
table.two-axis tr td:first-of-type,
table.two-axis tr:nth-of-type(2n+2) td:first-of-type, table.two-axis tr td:first-of-type:before { background: #ffd8b2; color: #663810;  }
table.two-axis tr td:first-of-type { border-bottom: 1px solid #e4ebeb;  }
table.two-axis tr td:first-of-type:before { padding-bottom: 10px; width: 17vw; }
table tr,table th,table td { font-size:14px;}
    
a.but{ display: none; }

}