@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');
 } 


 .small {
     font-size: inherit;
 }

 .input-group .form-control:focus,
 .input-group .form-control:active,
 .input-group .form-control:hover,
 .input-group .form-control {
     z-index: 1;
 }

 body.line header>.wrapper {
     border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 }

 @media (max-width: 1299px) {
     body.line header {
         border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     }

     body.line header>.wrapper {
         border-bottom: 0;
     }
 }

 section {
     padding: 100px 0;
 }

 section .header {
     margin-bottom: 60px;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     font-size: 2.429em;
     text-transform: uppercase;
     line-height: 120%;
 }

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

     .swiper-pagination-fraction {
         bottom: auto;
         top: -12px;
         right: 8px;
         left: auto;
         text-align: right;
         -webkit-transform: translate(0);
         -moz-transform: translate(0);
         -ms-transform: translate(0);
         -o-transform: translate(0);
         transform: translate(0);
     }

     .at-resp-share-element .at-share-btn .at-icon-wrapper {
         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;
     }
 }

 @media (min-width: 576px) and (max-width: 991px) {
     section {
         padding: 70px 0;
     }

     section .header {
         margin-bottom: 30px;
     }

     .at-resp-share-element .at-icon,
     .at-resp-share-element .at-label {
         width: 40px !important;
         height: 40px !important;
     }
 }

 @media (max-width: 575px) {

     .at-resp-share-element .at-icon,
     .at-resp-share-element .at-label {
         width: 32px !important;
         height: 32px !important;
     }

     section {
         padding: 50px 0;
     }

     section.menu {
         padding-top: 40px;
         padding-bottom: 0;
     }

     section .header {
         font-size: 1.833em;
         margin-bottom: 25px;
     }
 }

 .link {
     color: #C0272D;
     position: relative;
 }

 .link:after {
     content: "";
     width: 100%;
     height: 1px;
     position: absolute;
     left: 0;
     bottom: 0;
     background-color: #C0272D;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .link:hover {
     color: #C0272D;
 }

 .link:hover:after {
     width: 0%;
 }

 .link:focus {
     color: #C0272D;
 }

 .highlight {
     color: #fff;
     text-transform: uppercase;
     overflow: hidden;
     vertical-align: top;
     position: relative;
     line-height: 100%;
 }

 .highlight.highlight-white {
     color: #212121;
     text-transform: inherit;
     line-height: 160%;
 }

 .font1 {
     font-family: "Caveat", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
 }

 .light .icon.location {
     background-image: url("../image/location.svg");
 }

 .light .icon.user {
     background-image: url("../image/user.svg");
 }

 .light .icon.cart {
     background-image: url("../image/cart.svg");
 }

 .dark .icon.location {
     background-image: url("../image/location_black.svg");
 }

 .dark .icon.user {
     background-image: url("../image/user_black.svg");
 }

 .dark .icon.cart {
     background-image: url("../image/cart_black.svg");
 }

 .fa.fa-chevron-right:before {
     display: inline-block;
     font-family: 'Font Awesome 5 Free';
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     transform: translate(0, 0);
     content: "\f054";
 }

 .fa.fa-chevron-left:before {
     display: inline-block;
     font-family: 'Font Awesome 5 Free';
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     transform: translate(0, 0);
     content: "\f053";
 }

 .icon {
     position: relative;
     background-size: 100%;
     background-repeat: no-repeat;
     display: inline-block;
 }

 .icon.location {
     width: 14px;
     height: 19px;
     background-image: url("../image/location_black.svg");
 }

 .icon.user {
     width: 16px;
     height: 17.5px;
     background-image: url("../image/user_black.svg");
 }

 .icon.cart {
     width: 16px;
     height: 17.64px;
     background-image: url("../image/cart_black.svg");
 }

 .icon.fb-w {
     width: 16px;
     height: 16px;
     background-image: url("../image/fb_white.svg");
 }

 .icon.ig-w {
     width: 16px;
     height: 16px;
     background-image: url("../image/ig_white.svg");
 }

 .icon.youtube-w {
     width: 20px;
     height: 14px;
     background-image: url("../image/youtube_white.svg");
 }

 .icon.fb-b {
     width: 16px;
     height: 16px;
     background-image: url("../image/fb_black.svg");
 }

 .icon.ig-b {
     width: 16px;
     height: 16px;
     background-image: url("../image/ig_black.svg");
 }

 .icon.youtube-b {
     width: 20px;
     height: 14px;
     background-image: url("../image/youtube_black.svg");
 }

 .icon.arrow-right {
     width: 12px;
     height: 12px;
     background-image: url("../image/arrow_right.svg");
 }

 .icon.arrow-right-r {
     width: 12px;
     height: 12px;
     background-image: url("../image/arrow_right_red.svg");
 }

 .icon.close-r {
     width: 24px;
     height: 24px;
     background-image: url("../image/close.svg");
 }

 .icon.close-b {
     width: 18px;
     height: 18px;
     background-image: url("../image/close_b.svg");
 }

 .icon.magnifier {
     width: 16px;
     height: 17px;
     background-image: url("../image/magnifier.svg");
 }

 .icon.wifi {
     width: 28px;
     height: 20px;
     background-image: url("../image/info_wifi.svg");
 }

 .icon.pc {
     width: 28px;
     height: 20px;
     background-image: url("../image/info_pc.svg");
 }

 .icon.phone {
     width: 16px;
     height: 16px;
     background-size: 120%;
     background-image: url("../image/tel.svg");
 }

 .icon.fax {
     width: 16px;
     height: 16px;
     background-size: 90%;
     background-image: url("../image/fax.svg");
 }

 .icon.delete:after {
     display: inline-block;
     font-family: "Ionicons";
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     text-rendering: auto;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     content: "\f2d7";
     font-size: 1.67em;
 }

 .icon.minus:after {
     display: inline-block;
     font-family: "Ionicons";
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     text-rendering: auto;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     content: "\f3cf";
     font-size: 1.67em;
 }

 .icon.add:after {
     display: inline-block;
     font-family: "Ionicons";
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     text-rendering: auto;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     content: "\f3d1";
     font-size: 1.67em;
 }

 @media (max-width: 1299px) {
     .icon.cart {
         width: 19px;
         height: 100%;
     }
 }

 .polygon {
     background-size: auto;
     background-repeat: no-repeat;
     position: absolute;
     z-index: -1;
 }

 .polygon.filled {
     background-image: url("../image/bg_thought1.svg");
 }

 .polygon.hollow {
     background-image: url("../image/homepage/bg_thought2.png");
 }

 .polygon-wrapper {
     position: relative;
 }

 .polygon-wrapper .small-wrap {
     width: 65%;
     position: relative;
     margin-left: 30px;
 }

 .polygon-wrapper .box {
     background-color: #F8F5EE;
     padding: 50px 40px;
     margin: 30px 0;
 }

 .polygon-wrapper .box .md-form {
     margin-top: 30px;
     margin-bottom: 0;
 }

 .polygon-wrapper .box .md-form input:-webkit-autofill,
 .polygon-wrapper .box .md-form input:-webkit-autofill:hover,
 .polygon-wrapper .box .md-form input:-webkit-autofill:active,
 .polygon-wrapper .box .md-form input:-webkit-autofill:focus {
     background-color: #F8F5EE !important;
     -webkit-box-shadow: 0 0 0 1000px #F8F5EE inset !important;
 }

 .polygon-wrapper .box>p {
     font-size: 1.571em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     line-height: 140%;
 }

 .polygon-wrapper .box  p {
    font-size: 1.571em;
    font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
    line-height: 140%;
}

 .polygon-wrapper .box>p.alert {
     color: #C0272D;
     text-transform: uppercase;
     padding: 0;
     margin-top: 40px;
     margin-bottom: 0;
     border: none;
     border-radius: 0;
 }

 .polygon-wrapper .box  p.alert {
    color: #C0272D;
    text-transform: uppercase;
    padding: 0;
    margin-top: 40px;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
}

 .polygon-wrapper .box .btn {
     margin-top: 40px;
     min-width: 193px;
 }

 .polygon-wrapper .copy {
     margin-top: 20px;
 }

 .polygon-wrapper .copy p {
     margin-bottom: 20px;
 }

 .polygon-wrapper .copy p:last-child {
     margin-bottom: 0;
 }

 .polygon-wrapper .copy table tr {
     margin-bottom: 10px;
 }

 .polygon-wrapper .copy table td {
     font-size: 1em;
 }

 .polygon-wrapper .copy table td:first-of-type {
     font-size: 0.857em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     color: #C0272D;
     text-transform: uppercase;
     letter-spacing: 1px;
     padding: 5px 20px 5px 0;
 }

 .polygon-wrapper .copy .subhead {
     font-size: 0.857em;
     color: #C0272D;
     letter-spacing: 1px;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     text-transform: uppercase;
     margin-top: 15px;
     margin-bottom: 15px;
 }

 .polygon-wrapper .copy a {
     text-decoration: underline;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .polygon-wrapper .copy a:hover {
     color: #C0272D;
 }

 .polygon-wrapper.portrait .polygon.filled {
     background-image: url("../image/portrait_1.svg");
     width: 226px;
     height: 196px;
     left: 0;
     top: -35px;
 }

 .polygon-wrapper.portrait .polygon.hollow {
     background-image: url("../image/portrait_1_2.svg");
     width: 381px;
     height: 235px;
     right: -60px;
     bottom: -55px;
 }

 .polygon-wrapper.portrait2 .polygon.filled {
     background-image: url("../image/portrait_2_2.svg");
     width: 334px;
     height: 223px;
     right: -85px;
     bottom: -38px;
 }



 .polygon-wrapper.portrait2 .polygon.hollow {
     background-image: url("../image/portrait_2.svg");
     width: 218px;
     height: 191px;
     left: -30px;
     top: -20px;
 }




 .polygon-wrapper.portrait3 .polygon.filled {
     background-image: url("../image/portrait_3.svg");
     width: 317px;
     height: 238px;
     left: -50px;
     top: -38px;
 }

 .polygon-wrapper.portrait3 .polygon.hollow {
     background-image: url("../image/portrait_3_2.svg");
     width: 250px;
     height: 189px;
     right: -40px;
     bottom: -36px;
 }

 .polygon-wrapper.landscape1 .polygon.filled {
     background-image: url("../image/landscape_1.svg");
     width: 247px;
     height: 202px;
     left: 0;
     top: -40px;
 }

 .polygon-wrapper.landscape1 .polygon.hollow {
     background-image: url("../image/landscape_1_2.svg");
     width: 273px;
     height: 190px;
     right: -15px;
     bottom: -55px;
 }



 .polygon-wrapper.landscape2 .polygon.filled {
     background-image: url("../image/landscape_2_2.svg");
     width: 273px;
     height: 178px;
     right: -15px;
     bottom: -54px;
 }

 .polygon-wrapper.landscape2 .polygon.hollow {
     background-image: url("../image/landscape_2.svg");
     width: 247px;
     height: 202px;
     left: 0;
     top: -33px;
 }

 .polygon-wrapper.landscape-big .polygon.hollow {
     background-image: url("../image/landscape_big_1.svg");
     width: 226px;
     height: 195px;
     left: -60px;
     top: -33px;
 }

 .polygon-wrapper.landscape-big .polygon.filled {
     background-image: url("../image/landscape_big_2.svg");
     width: 566px;
     height: 364px;
     right: -160px;
     bottom: -49px;
 }

 @media (max-width: 991px) {
     .polygon-wrapper .polygon {
         background-size: 100%;
     }
 }

 @media (min-width: 768px) and (max-width: 991px) {
     .polygon-wrapper .small-wrap {
         width: 80%;
     }

     .polygon-wrapper.landscape1 .polygon.filled {
         width: 145px;
         height: 120px;
         top: -30px;
         left: 0px;
     }

     .polygon-wrapper.landscape1 .polygon.hollow {
         width: 206px;
         bottom: -38px;
         height: 138px;
         right: -13px;
     }

     .polygon-wrapper.landscape2 .polygon.filled {
         width: 200px;
         height: 147px;
     }

     .polygon-wrapper.landscape2 .polygon.hollow {
         width: 167px;
         height: 143px;
     }

     .polygon-wrapper.landscape-big .polygon.filled {
         width: 400px;
         height: 264px;
         right: -120px;
         bottom: -53px;
     }

     .polygon-wrapper.portrait .polygon.filled {
         width: 200px;
         height: 180px;
     }

     .polygon-wrapper.portrait .polygon.hollow {
         width: 225px;
         height: 150px;
         right: -30px;
     }

     .polygon-wrapper.portrait3 .polygon.filled {
         width: 220px;
         height: 210px;
         left: -100px;
     }

     .polygon-wrapper.portrait3 .polygon.hollow {
         width: 200px;
         height: 150px;
         right: -30px;
     }
 }

 @media (max-width: 767px) {
     .polygon-wrapper.landscape1 .polygon.filled {
         left: -30px;
     }

     .polygon-wrapper.landscape1 .polygon.hollow {
         right: -30px;
     }

     .polygon-wrapper.landscape2 .polygon.hollow {
         left: -90px;
     }

     .polygon-wrapper .small-wrap {
         width: 90%;
         margin: 0 auto;
     }

     .polygon-wrapper .box {
         padding: 35px 30px;
     }

     .polygon-wrapper.portrait2 .polygon.filled {
         background-image: url(../image/portrait_2_2_m.svg);
         width: 139px;
         height: 86px;
         right: -36px;
         bottom: -24px;
     }

     .polygon-wrapper.portrait2 .polygon.hollow {
         width: 100px;
         height: 88px;
         left: -30px;
         top: -15px;
     }
 }

 @media (min-width: 576px) and (max-width: 767px) {
     .polygon-wrapper .box {
         margin: 20px 0;
     }

     .polygon-wrapper .box>p {
         font-size: 1.125em;
     }
     .polygon-wrapper .box  p {
        font-size: 1.125em;
    }

     .polygon-wrapper .box .btn.outline {
         min-width: auto;
     }

     .polygon-wrapper.portrait .polygon.filled {
         left: -20px;
     }

     .polygon-wrapper.portrait .polygon.hollow {
         width: 300px;
         height: 187px;
         right: -38px;
         bottom: -45px;
     }

     .polygon-wrapper.portrait3 .polygon.filled {
         width: 280px;
         height: 220px;
         left: -114px;
         top: -38px;
     }

     .polygon-wrapper.portrait3 .polygon.hollow {
         right: -50px;
     }

     .polygon-wrapper.landscape1 .polygon.filled {
         width: 220px;
     }

     .polygon-wrapper.landscape1 .polygon.hollow {
         width: 250px;
         right: -50px;
     }

     .polygon-wrapper.landscape2 .polygon.filled {
         right: -50px;
     }

     .polygon-wrapper.landscape-big .polygon.filled {
         width: 325px;
         height: 216px;
         right: -150px;
         bottom: -43px;
     }

     .polygon-wrapper.landscape-big .polygon.hollow {
         width: 200px;
         height: 169px;
         left: -60px;
         top: -33px;
     }
 }

 @media (max-width: 575px) {
     .polygon.hollow {
         background-image: url("../image/bg_thought2.svg");
     }

     .polygon-wrapper .box {
         margin: 50px 0;
     }

     .polygon-wrapper .box>p {
         font-size: 1.333em;
         line-height: 160%;
     }

     .polygon-wrapper .box  p {
        font-size: 1.333em;
        line-height: 160%;
    }

     .polygon-wrapper .box .btn {
         margin-top: 20px;
         min-width: auto;
     }

     .polygon-wrapper .copy {
         margin-top: 10px;
     }

     .polygon-wrapper .copy p {
         margin-bottom: 15px;
     }

     .polygon-wrapper .copy table td:first-of-type {
         font-size: 0.833em;
         padding: 2px 10px 2px 0;
     }

     .polygon-wrapper .copy .subhead {
         margin-bottom: 5px;
     }

     .polygon-wrapper.landscape1 .polygon.filled {
         top: -22px;
         width: 150px;
     }

     .polygon-wrapper.landscape1 .polygon.hollow {
         right: -40px;
         width: 175px;
         bottom: -40px;
         height: 120px;
     }

     .polygon-wrapper.landscape2 .polygon.filled {
         width: 239px;
         height: 155px;
         bottom: -86px;
         width: 150px;
         right: -40px;
     }

     .polygon-wrapper.landscape2 .polygon.hollow {
         height: 164px;
         width: 170px;
         height: 145px;
         bottom: -108px;
     }

     .polygon-wrapper.landscape-big .polygon.filled {
         width: 150px;
         height: 103px;
         right: -61px;
         bottom: -30px;
     }

     .polygon-wrapper.landscape-big .polygon.hollow {
         width: 136px;
         height: 122px;
         left: -62px;
         top: -23px;
     }

     .polygon-wrapper.portrait .polygon.filled {
         width: 148px;
         height: 130px;
         left: -24px;
         top: -29px;
     }

     .polygon-wrapper.portrait .polygon.hollow {
         width: 200px;
         height: 130px;
         right: -24px;
         bottom: -40px;
     }

     .polygon-wrapper.portrait3 .polygon.filled {
         width: 150px;
         height: 130px;
         left: -52px;
         top: -25px;
     }

     .polygon-wrapper.portrait3 .polygon.hollow {
         width: 150px;
         height: 126px;
         right: -37px;
         bottom: -43px;
     }
 }

 .com-item {
     background-color: #fff;
 }

 .com-item .item {
     cursor: pointer;
     padding: 32px 28px;
     margin-bottom: 2px;
     box-shadow: 0 2px #CCCCCC;
 }

 .com-item .item .head {
     font-size: 1.143em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     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: justify;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-justify-content: space-between;
     justify-content: space-between;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .com-item .item.active .head {
     color: #C0272D;
 }

 .com-item .item.active .head i:before {
     color: #C0272D;
 }

 @media (max-width: 575px) {
     .com-item .item {
         padding: 20px 15px;
     }

     .com-item .item .head {
         font-size: 1em;
     }
 }

 .com-redirect .item .head i {
     font-size: 2.1rem;
 }

 .com-redirect .item .head i:before {
     display: inline-block;
     font-family: "Ionicons";
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     text-rendering: auto;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     content: "\f30f";
     color: #C0272D;
     opacity: 0;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .com-redirect .item:hover {
     color: #C0272D;
 }

 .com-redirect .item:hover i:before {
     opacity: 1;
     -webkit-transform: translateX(5px);
     -moz-transform: translateX(5px);
     -ms-transform: translateX(5px);
     -o-transform: translateX(5px);
     transform: translateX(5px);
 }

 .com-grid {
     margin-top: 60px;
     margin-bottom: 50px;
 }

 .com-grid .row {
     -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
 }

 .com-grid .row .col {
     margin-bottom: 60px;
 }

 .com-grid .item {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-direction: normal;
     -moz-box-direction: normal;
     -webkit-box-orient: vertical;
     -moz-box-orient: vertical;
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .com-grid .item h3 {
     font-size: 1.714em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     margin-bottom: 20px;
     text-align: center;
     padding: 0 10px;
     line-height: 140%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
 }

 .com-grid .item .icon {
     margin-bottom: 30px;
 }

 .com-grid .item .icon span {
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
     width: 85px;
     height: 85px;
     display: block;
 }

 .com-grid .item .icon img {
     width: 100%;
 }

 .com-grid .item .desc {
     padding: 0 10px;
     text-align: center;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
 }

 @media (min-width: 576px) and (max-width: 991px) {
     .com-grid .item .icon span {
         width: 70px;
         height: 70px;
     }

     .com-grid .row .col {
         margin-bottom: 40px;
     }
 }

 @media (max-width: 575px) {
     .com-grid {
         margin-top: 40px;
     }

     .com-grid .row .col {
         margin-bottom: 20px;
     }

     .com-grid .item h3 {
         margin-bottom: 10px;
     }

     .com-grid .item .icon {
         margin-bottom: 10px;
     }

     .com-grid .item .icon span {
         width: 60px;
         height: 60px;
     }
 }

 .com-accordion .item .head i:before {
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     display: inline-block;
     font-family: "Ionicons";
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     text-rendering: auto;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     content: "\f218";
     color: #CCCCCC;
     font-size: 1.3em;
 }

 .com-accordion .item .content {
     margin-top: 20px;
     width: 90%;
     display: none;
 }

 .com-accordion .item.active .head {
     color: #C0272D;
 }

 .com-accordion .item.active .head i:before {
     content: "\f209";
 }

 @media (min-width: 992px) {
     .com-accordion {
         max-width: 993px;
         margin: 0 auto;
     }

     #pop-topup-desktop .purchase .com-form {
         width: auto;
     }
 }

 @media (max-width: 575px) {
     .com-accordion .item {
         padding: 20px;
     }

     .com-accordion .item .head {
         font-size: 1em;
     }

     .com-accordion .item .content {
         width: 100%;
         margin-top: 15px;
     }

     .com-accordion .head i {
         display: none;
     }
 }

 .btn {
     cursor: pointer;
     white-space: normal;
 }

 .btn.scroll {
     width: 58px;
     height: 58px;
 }

 .btn.scroll-down {
     background-size: 100%;
     background-repeat: no-repeat;
     background-image: url("../image/scroll_down.svg");
 }

 .btn.scroll-up {
     background-size: 100%;
     background-repeat: no-repeat;
     background-image: url("../image/scroll_up.svg");
     -webkit-transition: -webkit-transform 0.3s ease-in-out;
     -moz-transition: -moz-transform 0.3s ease-in-out;
     -o-transition: -o-transform 0.3s ease-in-out;
     transition: -webkit-transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out, -o-transform 0.3s ease-in-out, transform 0.3s ease-in-out;
 }

 .btn.scroll-up:hover {
     -webkit-transform: translateY(-29px);
     -moz-transform: translateY(-29px);
     -ms-transform: translateY(-29px);
     -o-transform: translateY(-29px);
     transform: translateY(-29px);
 }

 .btn.outline {
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     border-radius: 0;
     text-transform: uppercase;
     text-align: center;
     font-size: 0.857em;
     font-weight: 500;
     letter-spacing: 1px;
     padding: 15px 20px;
     min-width: 207px;
     -webkit-transition: color background-color 0.2s ease-in-out;
     -moz-transition: color background-color 0.2s ease-in-out;
     -o-transition: color background-color 0.2s ease-in-out;
     transition: color background-color 0.2s ease-in-out;
 }

 .btn.outline-red {
     border: 2px solid #C0272D;
 }

 .btn.outline-red:hover {
     background-color: #C0272D;
     color: #fff;
 }

 .btn.outline-white {
     border: 2px solid #fff;
 }

 .btn.outline-white:hover {
     background-color: #fff;
     color: #000;
 }

 .btn.fill-red {
     color: #fff;
     border: 2px solid #C0272D;
     background-color: #C0272D;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     border-radius: 0;
     text-transform: uppercase;
     text-align: center;
     font-size: 0.857em;
     font-weight: 500;
     letter-spacing: 1px;
     padding: 15px 20px;
     min-width: 207px;
     -webkit-transition: color background-color 0.2s ease-in-out;
     -moz-transition: color background-color 0.2s ease-in-out;
     -o-transition: color background-color 0.2s ease-in-out;
     transition: color background-color 0.2s ease-in-out;
 }

 .btn.fill-red:hover {
     background-color: #fff;
     color: #C0272D;
 }

 @media (max-width: 575px) {
     .btn.outline {
         font-size: 0.833em;
         padding: 14px 24px;
     }
 }

 .section-lg-swiper .swiper-button-prev,
 .com-lg-swiper .swiper-button-prev {
     width: 58px;
     height: 58px;
     background-size: contain;
     background-repeat: no-repeat;
     background-image: url("../image/scroll_left_hover.svg");
     -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;
     margin-right: 11px;
 }

 .section-lg-swiper .swiper-button-prev.swiper-button-disabled,
 .com-lg-swiper .swiper-button-prev.swiper-button-disabled {
     background-image: url("../image/scroll_left.svg");
 }

 .section-lg-swiper .swiper-button-next,
 .com-lg-swiper .swiper-button-next {
     width: 58px;
     height: 58px;
     background-size: contain;
     background-repeat: no-repeat;
     background-image: url("../image/scroll_right_hover.svg");
 }

 .section-lg-swiper .swiper-button-next.swiper-button-disabled,
 .com-lg-swiper .swiper-button-next.swiper-button-disabled {
     background-image: url("../image/scroll_right.svg");
 }

 .section-lg-swiper .txt_line.row_1,
 .com-lg-swiper .txt_line.row_1 {
     color: #fff;
     font-size: 1.125em;
     letter-spacing: 1px;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     text-transform: uppercase;
 }

 .section-lg-swiper .txt_line.row_1 .txt-wrap>span,
 .com-lg-swiper .txt_line.row_1 .txt-wrap>span,
 .section-lg-swiper .txt_line.row_1 .shadow,
 .com-lg-swiper .txt_line.row_1 .shadow {
     padding: 15px 30px;
 }

 .section-lg-swiper .txt_line.row_1 .txt-wrap,
 .com-lg-swiper .txt_line.row_1 .txt-wrap {
     background-color: #000;
 }

 .section-lg-swiper .txt_line.row_1 .txt-wrap:after,
 .com-lg-swiper .txt_line.row_1 .txt-wrap:after {
     background-color: #000;
 }

 .section-lg-swiper .txt_line.row_2,
 .com-lg-swiper .txt_line.row_2 {
     color: #fff;
     font-size: 2.429em;
     font-family: "AvantGardeCE-Medium", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     text-transform: uppercase;
 }

 .section-lg-swiper .txt_line.row_2 .txt-wrap>span,
 .com-lg-swiper .txt_line.row_2 .txt-wrap>span,
 .section-lg-swiper .txt_line.row_2 .shadow,
 .com-lg-swiper .txt_line.row_2 .shadow {
     padding: 15px 30px;
 }

 .section-lg-swiper .txt_line.row_2 .txt-wrap,
 .com-lg-swiper .txt_line.row_2 .txt-wrap {
     background-color: #C0272D;
 }

 .section-lg-swiper .txt_line.row_2 .txt-wrap:after,
 .com-lg-swiper .txt_line.row_2 .txt-wrap:after {
     background-color: #C0272D;
 }

 .section-lg-swiper .txt_line.row_3,
 .com-lg-swiper .txt_line.row_3 {
     color: #212121;
     line-height: 160%;
 }

 .section-lg-swiper .txt_line.row_3 .txt-wrap>span,
 .com-lg-swiper .txt_line.row_3 .txt-wrap>span,
 .section-lg-swiper .txt_line.row_3 .shadow,
 .com-lg-swiper .txt_line.row_3 .shadow {
     padding: 20px 30px;
 }

 .section-lg-swiper .txt_line.row_3 .txt-wrap,
 .com-lg-swiper .txt_line.row_3 .txt-wrap {
     background-color: #fff;
 }

 .section-lg-swiper .txt_line.row_3 .txt-wrap:after,
 .com-lg-swiper .txt_line.row_3 .txt-wrap:after {
     background-color: #fff;
 }

 .swiper-button-prev,
 .swiper-button-next {
     margin-top: 0px;
     background-size: contain;
     background-repeat: no-repeat;
     z-index: 9;
     width: 40px;
     height: 40px;
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
     transform: translateY(-50%);
 }

 .swiper-button-prev {
     background-image: url("../image/scroll_left_w.svg");
 }

 .swiper-button-next {
     background-image: url("../image/scroll_right_w.svg");
 }

 .section-lg-swiper .swiper-slide.swiper-slide-active .overlay {
     width: 100%;
     height: 100%;
     background-color: #fff;
     z-index: 2;
     position: absolute;
     right: 0;
     top: 0;
 }

 .section-lg-swiper .swiper-slide:not(.swiper-slide-active) .overlay {
     width: 0;
 }

 .txt_line {
     overflow: hidden;
     -webkit-align-self: flex-start;
     -ms-flex-item-align: start;
     align-self: flex-start;
     position: relative;
     line-height: 100%;
     display: inline-flex;
 }

 .txt_line .txt-wrap {
     position: absolute;
     top: 0;
     left: 0;
     padding: inherit;
     width: 100%;
     height: 100%;
 }

 .txt_line .txt-wrap .txt {
     display: none;
 }

 .txt_line .txt-wrap:after {
     content: "";
     width: 100%;
     height: 100%;
     display: inline-block;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     opacity: 0;
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
     -ms-transform: translateX(0);
     -o-transform: translateX(0);
     transform: translateX(0);
     -webkit-transition: opacity 0.1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s;
     -moz-transition: opacity 0.1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s;
     -o-transition: opacity 0.1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s;
     transition: opacity 0.1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s;
     -webkit-transition: -webkit-transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.8s;
     -moz-transition: -moz-transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.8s;
     -o-transition: -o-transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.8s;
     transition: -webkit-transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.8s, -moz-transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.8s, -o-transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.8s, transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.8s;
 }

 .txt_line .shadow {
     opacity: 0;
     position: relative;
     display: inline-block;
 }

 .txt_line.active .txt-wrap .txt {
     display: inline-block;
 }

 .txt_line.active .txt-wrap:after {
     opacity: 1;
     -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
     -ms-transform: translateX(100%);
     -o-transform: translateX(100%);
     transform: translateX(100%);
 }

 .section-highlight-swiper .header {
     text-align: center;
 }

 .section-highlight-swiper .swiper-wrapper {
     -webkit-box-align: end;
     -moz-box-align: end;
     -webkit-align-items: flex-end;
     -ms-flex-align: end;
     align-items: flex-end;
     -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
 }

 .section-highlight-swiper .swiper-slide {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
 }

 .section-highlight-swiper .swiper-slide:last-child {
     margin-right: 0 !important;
 }

 .section-highlight-swiper .swiper-slide .highlight {
     opacity: 1;
 }

 .section-highlight-swiper .swiper-slide .highlight-bg:after {
     width: 100%;
 }

 .section-highlight-swiper .swiper-slide .highlight-bg>span {
     opacity: 1 !important;
 }

 .section-highlight-swiper .swiper-slide .highlight-bg>span:after {
     display: none;
 }

 .section-highlight-swiper .highlight-sharp {
     position: absolute;
     left: 0;
     bottom: 0;
     font-size: 1.571em;
     padding: 6px 20px;
     line-height: 140%;
     opacity: 0;
     font-family: "AvantGardeCE-Medium", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
 }

 @media (max-width: 991px) {
     .section-highlight-swiper .slide img {
         max-width: 100%;
     }
 }

 @media (max-width: 575px) {
     .section-highlight-swiper {
         overflow: hidden;
     }

     .section-highlight-swiper .highlight-sharp {
         font-size: 1.5em;
     }

     .section-highlight-swiper .swiper-container {
         overflow: visible;
     }

     .section-highlight-swiper .swiper-wrapper {
         -webkit-box-pack: start;
         -moz-box-pack: start;
         -ms-flex-pack: start;
         -webkit-justify-content: flex-start;
         justify-content: flex-start;
     }

     .section-highlight-swiper .swiper-slide {
         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: start;
         -moz-box-pack: start;
         -ms-flex-pack: start;
         -webkit-justify-content: flex-start;
         justify-content: flex-start;
     }

     .section-highlight-swiper .curtain {
         width: 0%;
     }
 }

 .curtain {
     width: 100%;
     height: 100%;
     background-color: #fff;
     z-index: 2;
     position: absolute;
     right: 0;
     top: 0;
 }

 #loading {
     background-color: #fff;
     width: 100%;
     height: 100%;
     position: fixed;
     left: 0;
     top: 0;
     z-index: 9999;
 }

 #loading .logo {
     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     width: 88px;
     height: auto;
 }

 #loading img {
     max-width: 100%;
 }

 @media (max-width: 575px) {
     #loading .logo {
         width: 80px;
         height: 80px;
     }

     #loading img {
         max-width: 100%;
     }
 }

 .mfp-bg {
     opacity: 0.6;
 }

 .mfp-content {
     max-width: 1200px;
     margin: 0 auto;
 }

 .popup-close {
     color: #fff;
     position: absolute;
     top: -30px;
     right: 0;
     padding: 0;
     font-size: 1em;
     opacity: 1;
     text-shadow: none;
     font-weight: normal;
     float: none;
     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;
 }

 .popup-close span:first-child {
     margin-right: 10px;
 }

 .popup-close .icon {
     background-image: url(../image/popup_close.svg);
     background-repeat: no-repeat;
     background-size: 100%;
     width: 14px;
     height: 14px;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .popup-close:hover .icon {
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
 }

 .popup {
     background-color: #fff;
     padding: 70px 60px;
     position: relative;
     margin: 50px 0;
 }

 .popup .heading {
     font-size: 2.429em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     text-transform: uppercase;
     margin-bottom: 10px;
     line-height: 120%;
 }

 .popup .msg {
     padding: 15px 0;
 }

 .popup .msg p:not(last-child) {
     margin-bottom: 15px;
 }

 #pop-topup-desktop .wrapper {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     position: relative;
 }

 #pop-topup-desktop .popup-close {
     top: 20px;
 }

 #pop-topup-desktop .topup {
     width: 61%;
     padding-right: 50px;
 }

 #pop-topup-desktop .topup .main-body {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-justify-content: space-between;
     justify-content: space-between;
 }

 #pop-topup-desktop .topup .main-body .com-form {
     padding-right: 20px;
     width: 61%;
     margin-top: 20px;
 }

 #pop-topup-desktop .topup .main-body .member-card {
     padding-left: 15px;
     width: 39%;
 }

 #pop-topup-desktop .topup .main-body .member-card img {
     width: 100%;
 }

 #pop-topup-desktop .topup .checkbox1-container {
     margin-top: 40px;
     margin-bottom: 20px;
     border-bottom: 0;
 }

 #pop-topup-desktop .topup .btn {
     margin-top: 20px;
 }

 #pop-topup-desktop .purchase {
     width: 39%;
     background-color: #F8F5EE;
 }

 #pop-topup-desktop .purchase .heading {
     font-size: 1.571em;
     margin-bottom: 5px;
 }

 #pop-topup-desktop .purchase h3 {
     color: #C0272D;
     text-transform: uppercase;
     font-size: 1.143em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     margin-bottom: 30px;
 }

 #pop-topup-desktop .purchase .md-form {
     margin-top: 10px;
 }

 #pop-topup-desktop .purchase .btn {
     margin-top: 10px;
 }

 .topup-mobile {
     position: fixed;
     right: 0;
     top: 0;
     overflow: auto;
     width: 100%;
     height: 100%;
     z-index: 100;
     background-color: #fff;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-direction: normal;
     -moz-box-direction: normal;
     -webkit-box-orient: vertical;
     -moz-box-orient: vertical;
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: justify;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-justify-content: space-between;
     justify-content: space-between;
     -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
     -ms-transform: translateX(100%);
     -o-transform: translateX(100%);
     transform: translateX(100%);
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .topup-mobile .heading {
     font-size: 1.571em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     text-transform: uppercase;
     margin-bottom: 20px;
 }

 .topup-mobile.active {
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
     -ms-transform: translateX(0);
     -o-transform: translateX(0);
     transform: translateX(0);
 }

 .topup-mobile .wrapper {
     padding-top: 80px;
     padding-bottom: 40px;
 }

 .topup-mobile .icon.close-r {
     position: absolute;
     right: 26px;
     top: 22px;
     z-index: 102;
     cursor: pointer;
 }

 .topup-mobile .msg {
     margin-bottom: 15px;
 }

 .topup-mobile .member-card {
     margin: 10px 0;
 }

 .topup-mobile .member-card img {
     width: 100%;
     max-width: 550px;
 }

 .topup-mobile h3 {
     margin-top: 20px;
     margin-bottom: 20px;
     color: #C0272D;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     text-transform: uppercase;
 }

 .topup-mobile .md-form {
     margin-top: 20px;
     margin-bottom: 0;
 }

 .topup-mobile .redirect {
     background-color: #F8F5EE;
     font-size: 1.143em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
 }

 .topup-mobile .redirect .container {
     padding-top: 20px;
     padding-bottom: 20px;
 }

 .topup-mobile .redirect .container a {
     width: 100%;
     height: 100%;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-justify-content: space-between;
     justify-content: space-between;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .topup-mobile .btn.outline {
     margin-top: 20px;
 }

 @media (max-width: 991px) {
     .mfp-content {
         padding: 0 24px;
     }

     #pop-topup-desktop .wrapper {
         -webkit-box-direction: normal;
         -moz-box-direction: normal;
         -webkit-box-orient: vertical;
         -moz-box-orient: vertical;
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
     }

     #pop-topup-desktop .topup {
         width: 100%;
         margin-bottom: 0;
     }

     #pop-topup-desktop .purchase {
         width: 100%;
         margin-top: 0;
     }
 }

 @media (max-width: 575px) {
     .popup {
         padding: 40px;
     }

     .popup-close {
         top: -25px;
     }

     .topup-mobile .heading {
         font-size: 1.833em;
     }

     .topup-mobile .redirect {
         font-size: 1.333em;
     }

     .topup-mobile .icon.close-r {
         right: 26px;
         top: 22px;
     }

     .topup-mobile .input-container.select-container .input-group {
         margin-bottom: 10px;
     }

     #pop-topup-mobile .btn.outline {
         margin-top: 15px;
     }

     #pop-purchase-mobile .btn.outline {
         margin-top: 30px;
     }
 }

 input[type="text"],
 input[type="password"],
 input[type="email"],
 input[type="url"],
 input[type="time"],
 input[type="date"],
 input[type="datetime-local"],
 input[type="tel"],
 input[type="number"],
 input[type="search-md"],
 input[type="search"],
 textarea.md-textarea {
     border-bottom: 1px solid #000;
     -webkit-transition: border 0.2s ease-in-out;
     -moz-transition: border 0.2s ease-in-out;
     -o-transition: border 0.2s ease-in-out;
     transition: border 0.2s ease-in-out;
 }

 .form-control {
     padding: 10px 0 5px 0;
     margin: 0;
 }

 .md-form label {
     color: #000;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
 }

 .md-form label.active {
     font-size: 0.857em;
     top: 1.2rem;
     z-index: 1;
 }

 input[type="text"]:focus:not([readonly])+label,
 input[type="password"]:focus:not([readonly])+label,
 input[type="email"]:focus:not([readonly])+label,
 input[type="url"]:focus:not([readonly])+label,
 input[type="time"]:focus:not([readonly])+label,
 input[type="date"]:focus:not([readonly])+label,
 input[type="datetime-local"]:focus:not([readonly])+label,
 input[type="tel"]:focus:not([readonly])+label,
 input[type="number"]:focus:not([readonly])+label,
 input[type="search-md"]:focus:not([readonly])+label,
 input[type="search"]:focus:not([readonly])+label,
 textarea.md-textarea:focus:not([readonly])+label {
     color: #C0272D;
 }

 input[type="text"]:focus:not([readonly]),
 input[type="password"]:focus:not([readonly]),
 input[type="email"]:focus:not([readonly]),
 input[type="url"]:focus:not([readonly]),
 input[type="time"]:focus:not([readonly]),
 input[type="date"]:focus:not([readonly]),
 input[type="datetime-local"]:focus:not([readonly]),
 input[type="tel"]:focus:not([readonly]),
 input[type="number"]:focus:not([readonly]),
 input[type="search-md"]:focus:not([readonly]),
 input[type="search"]:focus:not([readonly]),
 textarea.md-textarea:focus:not([readonly]) {
     border-bottom: 2px solid #000;
     box-shadow: none;
 }

 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:active,
 input:-webkit-autofill:focus {
     background-color: #ffffff !important;
     -webkit-box-shadow: 0 0 0 1000px white inset !important;
 }

 .datepicker {
     padding: 10px;
 }

 .datepicker table {
     border-spacing: 5px 0px;
     border-collapse: separate;
 }

 .datepicker table thead {
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     text-transform: uppercase;
 }

 .datepicker table th,
 .datepicker table td {
     font-size: 0.7rem;
     width: 30px;
     height: 30px;
 }

 .datepicker.dropdown-menu {
     border: 1px solid #CCCCCC;
     border-radius: 10px;
     box-shadow: none;
 }

 .datepicker.datepicker-inline td,
 .datepicker.datepicker-inline th,
 .datepicker.dropdown-menu td,
 .datepicker.dropdown-menu th {
     padding: 5px;
     text-align: center;
 }

 .datepicker table tr td.active.active,
 .datepicker table tr td.active.disabled,
 .datepicker table tr td.active.disabled.active,
 .datepicker table tr td.active.disabled.disabled,
 .datepicker table tr td.active.disabled:active,
 .datepicker table tr td.active.disabled:hover,
 .datepicker table tr td.active.disabled:hover.active,
 .datepicker table tr td.active.disabled:hover.disabled,
 .datepicker table tr td.active.disabled:hover:active,
 .datepicker table tr td.active.disabled:hover:hover,
 .datepicker table tr td.active.disabled:hover[disabled],
 .datepicker table tr td.active.disabled[disabled],
 .datepicker table tr td.active:active,
 .datepicker table tr td.active:hover,
 .datepicker table tr td.active:hover.active,
 .datepicker table tr td.active:hover.disabled,
 .datepicker table tr td.active:hover:active,
 .datepicker table tr td.active:hover:hover,
 .datepicker table tr td.active:hover[disabled],
 .datepicker table tr td.active[disabled] {
     background-color: #C0272D;
     color: #fff;
     border-radius: 50%;
     background-image: none;
 }

 .datepicker table tr td.day.focused,
 .datepicker table tr td.day:hover {
     background: #CCCCCC;
     border-radius: 50%;
 }

 .datepicker .prev:before {
     content: "\f053";
     display: inline-block;
     font-family: 'Font Awesome 5 Free';
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     transform: translate(0, 0);
 }

 .datepicker .prev:before.fa-chevron-right:before {
     display: inline-block;
     font-family: 'Font Awesome 5 Free';
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     transform: translate(0, 0);
     content: "\f054";
 }

 .datepicker .prev:before.fa-chevron-left:before {
     display: inline-block;
     font-family: 'Font Awesome 5 Free';
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     transform: translate(0, 0);
     content: "\f053";
 }

 .datepicker .next:before {
     content: "\f054";
     display: inline-block;
     font-family: 'Font Awesome 5 Free';
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     transform: translate(0, 0);
 }

 .datepicker .next:before.fa-chevron-right:before {
     display: inline-block;
     font-family: 'Font Awesome 5 Free';
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     transform: translate(0, 0);
     content: "\f054";
 }

 .datepicker .next:before.fa-chevron-left:before {
     display: inline-block;
     font-family: 'Font Awesome 5 Free';
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     transform: translate(0, 0);
     content: "\f053";
 }

 select::-ms-expand {
     display: none;
 }

 .com-form .error {
     color: #C0272D;
     font-size: 0.857em;
     margin-top: 5px;
 }

 .com-form .remarks {
     font-size: 0.857em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     margin-bottom: 10px;
 }

 .com-form .form-head {
     text-transform: uppercase;
     color: #C0272D;
     font-size: 1.143em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     margin-bottom: 22px;
 }

 .com-form .form-group {
     margin-bottom: 30px;
 }

 .com-form .form-group .row:not(:last-child) {
     margin-bottom: 30px;
 }

 .com-form .captcha {
     margin: 10px 0 40px 0;
     cursor: pointer;
 }

 .com-form .input-container {
     margin-bottom: 30px;
 }

 .com-form .input-container .remarks {
     font-size: 0.857em;
     margin-top: 5px;
 }

 .com-form .radio-container {
     margin-bottom: 30px;
 }

 .com-form .radio-group {
     position: relative;
 }

 .com-form .radio-group label {
     cursor: pointer;
     width: 100%;
     border: 2px solid #CCCCCC;
     padding: 25px;
     margin-bottom: 10px;
     border-radius: 10px;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     letter-spacing: 1px;
     position: relative;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-justify-content: space-between;
     justify-content: space-between;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .com-form .radio-group label .method {
     font-family: "AvantGardeCE-Book", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     text-transform: none;
     letter-spacing: 0;
     padding-right: 10px;
 }

 .com-form .radio-group label .price {
     font-size: 0.857em;
     text-transform: uppercase;
 }

 .com-form .radio-group label:not(:last-child) {
     margin-right: 20px;
 }

 .com-form .radio-group label:hover,
 .com-form .radio-group label.checked {
     border-color: #C0272D;
     color: #C0272D;
 }

 .com-form .radio-group input {
     display: none;
 }

 .com-form .radio-group input:checked~.checkmark:before {
     opacity: 1;
 }

 .com-form .radio-group input~.checkmark {
     position: absolute;
     right: -11px;
     top: -11px;
 }

 .com-form .radio-group input~.checkmark:before {
     content: "";
     background-image: url("../image/checked.svg");
     background-size: contain;
     background-repeat: no-repeat;
     width: 22px;
     height: 22px;
     display: inline-block;
     opacity: 0;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .com-form .checkbox-container {
     margin-bottom: 50px;
 }

 .com-form .checkbox-container.long .checkbox-group label {
     width: calc((100% - 60px - 16px)/4);
 }

 .com-form .checkbox-container.long .checkbox-group label:nth-child(4n) {
     margin-right: 0;
 }

 .com-form .checkbox-container.long .checkbox-group label sup {
     color: #C0272D;
 }

 .com-form .checkbox-group {
     position: relative;
 }

 .com-form .checkbox-group label {
     cursor: pointer;
     text-align: center;
     width: calc((100% - 120px - 28px)/7);
     border: 2px solid #CCCCCC;
     text-transform: uppercase;
     font-size: 0.857em;
     padding: 13px 0;
     margin-bottom: 10px;
     border-radius: 10px;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     letter-spacing: 1px;
     position: relative;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .com-form .checkbox-group label:not(:last-child) {
     margin-right: 20px;
 }

 .com-form .checkbox-group label:hover,
 .com-form .checkbox-group label.checked {
     border-color: #C0272D;
     color: #C0272D;
 }

 .com-form .checkbox-group input {
     display: none;
 }

 .com-form .checkbox-group input:checked~.checkmark:before {
     opacity: 1;
 }

 .com-form .checkbox-group input~.checkmark {
     position: absolute;
     right: -11px;
     top: -11px;
 }

 .com-form .checkbox-group input~.checkmark:before {
     content: "";
     background-image: url("../image/checked.svg");
     background-size: contain;
     background-repeat: no-repeat;
     width: 22px;
     height: 22px;
     display: inline-block;
     opacity: 0;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .com-form .checkbox1-container label {
     display: block;
     position: relative;
     top: 0;
     cursor: pointer;
     font-family: "AvantGardeCE-Book", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     padding-left: 30px;
 }

 .com-form .checkbox1-container input {
     display: none;
 }

 .com-form .checkbox1-container .checkmark {
     position: absolute;
     top: 4px;
     left: 0;
     height: 16px;
     width: 16px;
     border: 2px solid #000;
     background-color: #fff;
     -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;
 }

 .com-form .checkbox1-container label input:checked~.checkmark {
     left: 4px;
     top: -1px;
     width: 9px;
     height: 16px;
     border-width: 0 2px 2px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }

 .com-form .checkbox2-container label {
     display: block;
     position: relative;
     top: 0;
     cursor: pointer;
     font-family: "AvantGardeCE-Book", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     padding-left: 30px;
 }

 .com-form .checkbox2-container input {
     display: none;
 }

 .com-form .checkbox2-container .checkmark {
     position: absolute;
     top: 4px;
     left: 0;
     height: 16px;
     width: 16px;
     border: 1px solid #000;
     background-color: #fff;
     -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;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .com-form .checkbox2-container .checkmark:after {
     content: "";
     background-color: #C0272D;
     width: 10px;
     height: 10px;
     opacity: 0;
     display: block;
     -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;
 }

 .com-form .checkbox2-container label input:checked~.checkmark {
     border: 1px solid #C0272D;
 }

 .com-form .checkbox2-container label input:checked~.checkmark:after {
     opacity: 1;
 }

 .com-form .upload-container input[type="file"] {
     display: none;
 }

 .com-form .upload-container label {
     cursor: pointer;
     border: 2px solid #CCCCCC;
     border-radius: 10px;
     text-transform: uppercase;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     font-size: 0.857em;
     letter-spacing: 1px;
     padding: 25px;
     width: 100%;
     text-align: center;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .com-form .upload-container label:hover {
     border: 2px solid #C0272D;
     color: #C0272D;
 }

 .com-form .select-container select {
     cursor: pointer;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     width: 100%;
     height: 38px;
     position: relative;
     border: none;
     box-shadow: none;
     border-radius: 0;
     -webkit-appearance: none;
     -moz-appearance: none;
     -o-appearance: none;
     appearance: none;
     outline: none;
     background-color: transparent;
     background-image: url("../image/drop_down.svg");
     background-position: right;
     background-size: 12px 7px;
     background-repeat: no-repeat;
 }

 .com-form .select-container .input-group:before {
     content: "";
     background-color: #000;
     height: 1px;
     width: 100%;
     position: absolute;
     bottom: 0;
     left: 0;
 }

 .com-form .textarea-container .input-group {
     position: relative;
 }

 .com-form .textarea-container textarea {
     padding-right: 3em;
 }

 .com-form .textarea-container .count {
     position: absolute;
     right: 5px;
     bottom: 10px;
     z-index: 2;
 }

 .md-form .com-form .form-head {
     margin-bottom: 30px;
 }

 textarea.md-textarea {
     overflow-y: auto;
     padding: 10px 0 5px 0;
     min-height: auto;
 }

 textarea.md-textarea.long {
     min-height: 9em;
 }

 @media (max-width: 991px) {
     .com-form .checkbox-group label:not(:last-child) {
         margin-right: 10px;
     }
 }

 @media (min-width: 768px) and (max-width: 991px) {
     .com-form .checkbox-group label {
         width: calc((100% - 60px - 28px)/7);
     }

     .com-form .checkbox-container.long .checkbox-group label {
         width: calc((100% - 20px - 12px)/3);
     }

     .com-form .checkbox-container.long .checkbox-group label:nth-child(4n) {
         margin-right: 10px;
     }

     .com-form .checkbox-container.long .checkbox-group label:nth-child(3n) {
         margin-right: 0px;
     }
 }

 @media (min-width: 576px) and (max-width: 767px) {
     .com-form .checkbox-group label {
         width: calc((100% - 40px - 16px)/4);
     }

     .com-form .checkbox-container.long .checkbox-group label {
         width: calc((100% - 10px - 8px)/2);
     }

     .com-form .checkbox-container.long .checkbox-group label:nth-child(2n) {
         margin-right: 0px;
     }
 }

 @media (max-width: 575px) {
     .com-form .checkbox-container.long {
         padding-top: 12px;
         max-height: 318px;
         overflow-y: scroll;
     }

     .com-form .checkbox-container.long .checkbox-group label {
         width: calc(100% - 11px - 4px);
     }

     .com-form .checkbox-container.long .checkbox-group label:nth-child(4n) {
         margin-right: 0px;
     }

     .com-form .checkbox-container.long .checkbox-group label:not(:last-child) {
         margin-right: 0;
     }

     .com-form .input-container {
         margin-bottom: 20px;
     }

     .com-form .input-container .remarks {
         font-size: 1.167em;
     }

     .com-form .checkbox-group label {
         width: calc((100% - 20px - 8px)/2);
     }

     .com-form .form-group {
         margin-bottom: 10px;
     }

     .com-form .form-head {
         margin-bottom: 20px;
         font-size: 1em;
     }

     .com-form .checkbox-container {
         margin-bottom: 30px;
     }

     .com-form .md-form label.active {
         font-size: 1em;
     }
 }

 .com-listing:not(:last-child) {
     margin-bottom: 50px;
 }

 .com-listing .head {
     font-size: 1.571em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     margin-bottom: 30px;
 }

 .com-listing .subhead {
     margin-bottom: 10px;
 }

 .com-listing ul {
     margin-left: 26px;
 }

 .com-listing ul:not(:last-child) {
     margin-bottom: 40px;
 }

 .com-listing ul li {
     position: relative;
 }

 .com-listing ul li:not(:last-child) {
     margin-bottom: 10px;
 }

 .com-listing ul li:not(:last-child).location {
     margin-bottom: 20px;
 }

 .com-listing ul li:before {
     content: "";
     width: 6px;
     height: 6px;
     background-color: #C0272D;
     display: inline-block;
     position: absolute;
     left: -26px;
     top: 9px;
 }

 @media (max-width: 575px) {
     .com-listing ul li:before {
         top: 7px;
     }
 }