@font-face {
     font-family: 'AvantGardeCE-Light';
     src: url('../font/FONTS/AvantGardeCE-Light.eot');
     src: url('../font/FONTS/AvantGardeCE-Light.eot?#iefix') format('embedded-opentype'), url('../font/FONTS/AvantGardeCE-Light.woff') format('woff'), url('../font/FONTS/AvantGardeCE-Light.ttf') format('truetype');
 }

 @font-face {
     font-family: 'AvantGardeCE-Book';
     src: url('../font/FONTS/AvantGardeCE-Book.eot');
     src: url('../font/FONTS/AvantGardeCE-Book.eot?#iefix') format('embedded-opentype'), url('../font/FONTS/AvantGardeCE-Book.woff') format('woff'), url('../font/FONTS/AvantGardeCE-Book.ttf') format('truetype');
 }

 @font-face {
     font-family: 'AvantGardeCE-Demi';
     src: url('../font/FONTS/AvantGardeCE-Demi.eot');
     src: url('../font/FONTS/AvantGardeCE-Demi.eot?#iefix') format('embedded-opentype'), url('../font/FONTS/AvantGardeCE-Demi.woff') format('woff'), url('../font/FONTS/AvantGardeCE-Demi.ttf') format('truetype');
 }

 @font-face {
     font-family: 'AvantGardeCE-Medium';
     src: url('../font/FONTS/AvantGardeCE-Medium.eot');
     src: url('../font/FONTS/AvantGardeCE-Medium.eot?#iefix') format('embedded-opentype'), url('../font/FONTS/AvantGardeCE-Medium.woff') format('woff'), url('../font/FONTS/AvantGardeCE-Medium.ttf') format('truetype');
 }

 @font-face {
     font-family: 'AvantGardeGothic-Demi';
     src: url('../font/FONTS/AvantGardeGothic-Demi.eot');
     src: url('../font/FONTS/AvantGardeGothic-Demi.eot?#iefix') format('embedded-opentype'), url('../font/FONTS/AvantGardeGothic-Demi.woff') format('woff'), url('../font/FONTS/AvantGardeGothic-Demi.ttf') format('truetype');
 }

 section.benefits .thumbnail {
     margin-top: 70px;
 }

 section.benefits .thumbnail .swiper-container {
     border-bottom: 2px solid #CCCCCC;
     overflow: visible;
 }

 section.benefits .thumbnail .swiper-slide .wrapper {
     cursor: pointer;
     border-radius: 8px;
     border: 2px solid #CCCCCC;
     margin-bottom: 60px;
     padding: 10px;
     position: relative;
     height: auto;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -o-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
 }

 section.benefits .thumbnail .swiper-slide .wrapper:before {
     content: "";
     display: block;
     padding-top: 83.33333333%;
 }

 section.benefits .thumbnail .swiper-slide .wrapper img {
     max-width: 100%;
 }

 section.benefits .thumbnail .swiper-slide.active .wrapper {
     border-color: #C0272D;
 }

 section.benefits .thumbnail .swiper-slide.active:after {
     opacity: 1;
 }

 section.benefits .thumbnail .swiper-slide:after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: -12px;
     width: 30px;
     height: 17px;
     display: block;
     opacity: 0;
     background-color: #fff;
     background-size: contain;
     background-repeat: no-repeat;
     background-image: url(../image/arrow_up1.jpg);
     -webkit-transform: translate(0, -50%);
     -moz-transform: translate(0, -50%);
     -ms-transform: translate(0, -50%);
     -o-transform: translate(0, -50%);
     transform: translate(0, -50%);
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -o-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
 }

 section.benefits .details.active {
     border-bottom: 2px solid #CCCCCC;
 }

 section.benefits .details .item {
     display: none;
     padding: 60px;
 }

 section.benefits .details .brand {
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     font-size: 1.714em;
     margin-bottom: 20px;
 }

 section.benefits .details .desc {
     padding-right: 10px;
 }

 section.benefits .details .tnc .title {
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     font-size: 1.143em;
     text-transform: uppercase;
     color: #C0272D;
     letter-spacing: 1px;
 }

 section.benefits .details .tnc ul {
     margin-top: 16px;
     margin-bottom: 30px;
 }

 section.benefits .details .tnc ul li {
     position: relative;
     padding-left: 15px;
 }

 section.benefits .details .tnc ul li:before {
     content: "";
     background-color: #C0272D;
     width: 5px;
     height: 5px;
     display: inline-block;
     position: absolute;
     left: 0;
     top: 10px;
 }

 section.benefits .details .tnc .expire {
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
 }

 section.faq .btn-container {
     margin-top: 60px;
 }

 section.faq .item .head span {
     padding-right: 20px;
 }

 @media (max-width: 991px) {
     section .header {
         text-align: left;
     }

     section.benefits .thumbnail .swiper-container {
         margin-left: -24px;
         margin-right: -24px;
     }

     section.benefits .thumbnail .swiper-container .swiper-slide {
         padding: 0 24px;
     }

     section.benefits .thumbnail .swiper-container .swiper-slide .wrapper {
         position: relative;
         height: auto;
     }

     section.benefits .thumbnail .swiper-container .swiper-slide .wrapper:before {
         content: "";
         display: block;
         padding-top: 58.82352941%;
     }

     section.benefits .details {
         margin-left: -24px;
         margin-right: -24px;
     }

     section.point .pic #earn {
         width: 196px;
     }

     section.point .pic #redeem {
         width: 207px;
     }
 }

 @media (min-width: 768px) and (max-width: 991px) {
     section.point .pic {
         padding: 0 30px;
     }
 }

 @media (max-width: 767px) {
     section.point .pic {
         margin-bottom: 5px;
     }

     section.point .col {
         margin-bottom: 0;
     }

     section.point .col:first-child {
         border-right: 0;
     }

     section.point .desc {
         margin-top: 10px;
     }
 }

 @media (min-width: 576px) and (max-width: 991px) {
     section.benefits .thumbnail .swiper-container .swiper-slide .wrapper {
         max-width: 400px;
         margin-left: auto;
         margin-right: auto;
     }

     section.benefits .details .desc {
         margin-bottom: 20px;
     }

     section.benefits .details .tnc ul {
         margin-top: 10px;
     }
 }

 @media (max-width: 575px) {
     .com-heading h2 {
         text-align: center;
     }

     section.point .desc {
         text-align: left;
         padding: 0;
     }

     section.point .title {
         font-size: 1.333em;
     }

     section.benefits h3 {
         margin-bottom: 15px;
     }

     section.benefits .thumbnail {
         margin-top: 25px;
     }

     section.benefits .thumbnail .swiper-container {
         border-bottom: 1px solid #CCCCCC;
     }

     section.benefits .thumbnail .swiper-container .swiper-slide:after {
         left: 49%;
         bottom: -5px;
         width: 20px;
         height: 8px;
         background-image: url(../image/arrow_up_m.jpg);
     }

     section.benefits .thumbnail .swiper-container .swiper-slide .wrapper {
         border-width: 1px;
         margin-bottom: 30px;
     }

     section.benefits .details.active {
         border-width: 1px;
     }

     section.benefits .details .item {
         padding: 30px;
     }

     section.benefits .details .brand {
         margin-bottom: 13px;
         font-size: 1.333em;
     }

     section.benefits .details .tnc {
         margin-top: 20px;
     }

     section.benefits .details .tnc .title {
         font-size: 1em;
     }

     section.benefits .details .tnc ul {
         margin-bottom: 20px;
         margin-top: 8px;
     }

     section.benefits .details .tnc ul li:not(:last-child) {
         margin-bottom: 10px;
     }

     section.faq .btn-container {
         margin-top: 30px;
     }
 }