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

 @media (min-width: 1440px) {
     .com-lg-swiper .swiper-slide:not(.swiper-slide-active) .slide {
         -webkit-transform: scale(0.7);
         -moz-transform: scale(0.7);
         -ms-transform: scale(0.7);
         -o-transform: scale(0.7);
         transform: scale(0.7);
     }

     .com-line {
         padding-left: 90px;
         padding-right: 90px;
     }
 }

 @media (min-width: 992px) and (max-width: 1299px) {
     body {
         padding-top: 113px;
     }
 }

 @media (min-width: 992px) and (max-width: 1439px) {
     .com-lg-swiper .swiper-slide:not(.swiper-slide-active) .slide {
         -webkit-transform: scale(0.93);
         -moz-transform: scale(0.93);
         -ms-transform: scale(0.93);
         -o-transform: scale(0.93);
         transform: scale(0.93);
     }

     section.banner-theme .container {
         background-position: 50px 0;
         min-height: 200px;
     }
 }

 @media (min-width: 1025px) {
     .com-list .com-card {
         overflow: hidden;
     }

     .com-list .com-card .name {
         opacity: 0;
         -webkit-transform: translateY(100%);
         -moz-transform: translateY(100%);
         -ms-transform: translateY(100%);
         -o-transform: translateY(100%);
         transform: translateY(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;
     }

     .com-list .com-card:hover .name {
         -webkit-transform: translateY(0);
         -moz-transform: translateY(0);
         -ms-transform: translateY(0);
         -o-transform: translateY(0);
         transform: translateY(0);
         opacity: 1;
     }
 }

 @media (min-width: 992px) {
     .com-product .wrapper .product img {
         display: none;
     }

     .com-list .com-line {
         padding: 60px;
     }

     .section-highlight-swiper .highlight {
         max-width: 90%;
     }

     .com-tab .details {
         display: none !important;
     }

     .com-tab .tab-menu .item:hover .head span:after {
         opacity: 1;
         left: 0;
         right: auto;
         width: 100%;
     }

     .com-tab .tab-menu .item:hover .head {
         color: #C0272D;
     }

     .com-lg-swiper .article {
         max-width: 787px;
         margin-left: auto;
         margin-right: auto;
     }

     section.banner .txt_line.row_1 {
         text-align: center;
     }

     section.banner .heading {
         max-width: 800px;
         margin: 0 auto;
     }

     section.banner-theme .container {
         padding-left: 20px;
         padding-right: 20px;
     }

     .menu-mobile {
         display: none;
     }

     .menu-dt.sticky {
         position: fixed;
         top: 180px;
     }

     .menu-dt .item {
         cursor: pointer;
         margin-bottom: 40px;
         -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;
     }

     .menu-dt .item .head {
         display: -webkit-box;
         display: -moz-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
     }

     .menu-dt .item .head sup {
         margin-right: 10px;
         font-size: 1.714em;
         font-family: "Caveat", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
         top: 0;
     }

     .menu-dt .item .head span {
         font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
         font-size: 1.571em;
         position: relative;
     }

     .menu-dt .item .head span:after {
         content: "";
         height: 4px;
         width: 0;
         background-color: #C0272D;
         display: inline-block;
         position: absolute;
         bottom: -6px;
         right: 0;
         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;
     }

     .menu-dt .item.active .head,
     .menu-dt .item:hover .head {
         color: #c0272d;
     }

     .menu-dt .item.active .head span:after,
     .menu-dt .item:hover .head span:after,
     .menu-dt .item.active .head span:after,
     .menu-dt .item:hover .head span:after {
         opacity: 1;
         left: 0;
         right: auto;
         width: 100%;
     }
 }

 @media (max-width: 991px) {
     section.banner .slide {
         position: relative;
         height: auto;
     }

     section.banner .slide:before {
         content: "";
         display: block;
         padding-top: 62.5%;
     }

     section.banner .slide.short {
         position: relative;
         height: auto;
     }

     section.banner .slide.short:before {
         content: "";
         display: block;
         padding-top: 45%;
     }

     section.banner-theme {
         text-align: left;
     }

     section.banner-theme .bg {
         position: relative;
         height: auto;
         -webkit-box-pack: start;
         -moz-box-pack: start;
         -ms-flex-pack: start;
         -webkit-justify-content: flex-start;
         justify-content: flex-start;
     }

     section.banner-theme .bg:before {
         content: "";
         display: block;
         padding-top: 37.5%;
     }

     section.banner-theme .container {
         position: relative;
         height: auto;
         background-position: right -5px bottom;
         -webkit-box-pack: start;
         -moz-box-pack: start;
         -ms-flex-pack: start;
         -webkit-justify-content: flex-start;
         justify-content: flex-start;
     }

     section.banner-theme .container:before {
         content: "";
         display: block;
         padding-top: 37.5%;
     }

     section.banner-theme .subhead {
         text-transform: none;
     }

     .com-product .wrapper {
         padding: 0;
     }

     .com-product .wrapper .product {
         background-image: none !important;
         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-product .wrapper .product:before {
         display: none;
     }

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

     .com-category {
         -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;
     }

     .com-category .swiper-container {
         margin: 0;
     }

     .com-category .swiper-button-next {
         top: -2px;
     }

     .com-category .category:after {
         height: 2px;
     }

     .section-highlight-swiper .highlight {
         left: -5px;
     }

     .com-lg-swiper .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);
     }

     .com-lg-swiper .slide {
         display: block;
         margin-bottom: 20px;
     }

     .com-lg-swiper .slide .image {
         width: 100%;
     }

     .com-lg-swiper .slide .copy {
         margin-left: 0;
         position: relative;
         width: 80%;
         bottom: 0px;
         right: 0px;
     }

     .com-tab .bg {
         background-image: none;
     }

     .com-tab .bg:before {
         display: none;
     }

     .com-tab .bg img {
         display: block;
         width: 100%;
     }

     .com-tab .txt {
         display: block;
     }

     .com-tab .tab-menu {
         width: 100%;
         margin-top: 0;
     }

     .com-tab .tab-menu .item {
         display: block;
     }

     .com-tab .tab-menu .item.active .head span:after,
     .com-tab .tab-menu .item:hover .head span:after {
         height: 2px;
     }

     .com-tab .tab-menu .details {
         font-size: 1em;
     }

     .com-tab .tab-menu sup {
         font-size: 75%;
     }

     .com-tab .desc {
         display: none !important;
     }

     .menu-dt {
         display: none;
     }

     .menu-mobile {
         margin-left: -24px;
         margin-right: -24px;
     }

     .menu-mobile .select-container {
         padding-left: 24px;
         padding-right: 24px;
         border-bottom: 2px solid #CCCCCC;
         padding-bottom: 20px;
         display: -webkit-box;
         display: -moz-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
     }

     .menu-mobile .select-container .number {
         color: #C0272D;
         font-size: 1.286em;
         font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
         margin-right: 5px;
     }

     .menu-mobile select {
         color: #C0272D;
         width: 100%;
         background-color: #fff;
         border: none;
         box-shadow: none;
         border-radius: 0;
         -webkit-appearance: none;
         -moz-appearance: none;
         -o-appearance: none;
         appearance: none;
         outline: none;
         font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
         font-size: 1.143em;
         background-image: url("../image/drop_down_r.svg");
         background-size: 12px 7px;
         background-position: right;
         background-repeat: no-repeat;
         margin-top: 7px;
     }
 }

 @media (min-width: 576px) and (max-width: 991px) {
     body {
         padding-top: 112px;
     }

     .com-product .wrapper {
         max-width: 70%;
         margin: 0 auto;
     }

     .com-list .part {
         width: calc((100% - 20px)/2);
     }

     .com-list .com-card {
         margin-bottom: 15px;
     }

     .com-news-list .part {
         width: calc((100% - 20px)/2);
     }

     .com-news-list .com-news-card {
         margin-bottom: 15px;
     }

     .com-news .part {
         width: calc((100% - 20px)/2);
     }

     .com-news .part:last-of-type {
         padding-top: 80px;
     }

     .com-news .com-news-card {
         margin-bottom: 15px;
     }

     .com-lg-swiper .swiper-pagination-fraction {
         font-size: 3em;
     }

     .com-lg-swiper .slide .txt_line.row_1 {
         font-size: 1.125em;
     }

     .com-lg-swiper .slide .copy {
         margin-top: -48px;
     }

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

     .com-lg-swiper .article {
         margin-top: 10px;
         font-size: 1.125em;
     }

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

     .com-quote .desc>span:before {
         width: 40px;
         height: 40px;
     }

     .com-quote .wrapper {
         padding: 18px 30px;
     }

     section.banner-theme .container {
         background-size: auto;
     }
 }

 @media (min-width: 768px) and (max-width: 991px) {
     section.banner .txt_line.row_1 {
         font-size: 3.5em;
     }

     .com-list .name {
         padding: 20px;
     }

     .com-quote .row {
         -webkit-box-align: center;
         -moz-box-align: center;
         -webkit-align-items: center;
         -ms-flex-align: center;
         align-items: center;
     }

     .com-quote .desc>span:before {
         left: -25px;
         top: -10px;
     }
 }

 @media (min-width: 768px) {
     html[lang="tc"] .com-line .styling {
         font-size: 1.5625em;
     }
 }

 @media (max-width: 767px) {
     section.banner .slide {
         -webkit-box-pack: start;
         -moz-box-pack: start;
         -ms-flex-pack: start;
         -webkit-justify-content: flex-start;
         justify-content: flex-start;
         padding: 0 24px;
     }

     section.banner .container {
         padding: 0;
         margin: 0;
     }

     .com-quote .pic-wrapper {
         max-width: 50%;
         margin: 0 auto;
     }

     .com-quote .name,
     .com-quote .title {
         text-align: center;
     }

     .com-quote .name {
         margin: 30px 0 15px 0;
     }

     .com-quote .desc {
         text-align: center;
     }

     .com-row .pic {
         width: 100%;
     }

     .com-row .copy {
         margin-bottom: 70px;
     }

     .com-list .name {
         font-size: 1.333em;
         padding: 12px 15px;
     }

     .com-video .pic:after {
         width: 57px;
         height: 57px;
     }

     .com-news-list .content {
         display: block;
         width: 100%;
     }

     .com-news-list .part {
         display: none !important;
     }
 }

 @media (min-width: 576px) and (max-width: 767px) {
     section.banner .txt_line.row_1 {
         font-size: 2.6em;
     }

     .com-line {
         padding: 30px 20px;
     }

     .com-line .styling {
         font-size: 1.5em;
     }

     .com-news .com-news-card .wrapper {
         width: 90%;
         margin: 0 auto;
     }

     .com-news .com-news-card .small-wrap {
         width: 100%;
     }

     .com-video {
         margin: 20px 0 40px 0;
     }

     .com-quote .desc {
         margin-top: 10px;
         font-size: 1.8em;
     }

     .com-quote .desc>span:before {
         left: -26px;
         top: -14px;
     }
 }

 @media (max-width: 575px) {
     body {
         padding-top: 88px;
     }

     section.banner .container {
         max-width: 75%;
     }

     section.banner .slide.short .highlight-sharp {
         font-size: 2em;
     }

     section.banner .txt_line.row_1 {
         font-size: 2.5em;
     }

     section.banner .txt_line.row_1 .txt-wrap>span,
     section.banner .txt_line.row_1 .shadow {
         padding: 7px 10px;
     }

     section.banner-theme .subhead {
         font-size: 1.333em;
     }

     section.banner-theme .heading {
         font-size: 2em;
     }

     section.banner-theme .container {
         background-size: contain;
     }

     section.filledbg {
         padding: 40px 0 30px 0;
     }

     section.card {
         padding: 40px 0;
     }

     .com-row .copy {
         margin-bottom: 60px;
         font-size: 1em;
     }

     .com-row .copy p:not(:last-child) {
         margin-bottom: 20px;
     }

     .com-row .copy .head {
         font-size: 1.714em;
         margin-bottom: 10px;
     }

     .com-row.vertical2 {
         margin-bottom: 50px;
     }

     .com-row .btn {
         margin-top: 20px;
         min-width: 164px;
     }

     .com-intro p:not(:last-child) {
         margin-bottom: 25px;
     }

     .com-heading .desc {
         text-align: left;
         padding: 0;
     }

     .com-heading h2 {
         text-align: left;
         font-size: 1.833em;
         margin-bottom: 15px;
     }

     .com-category {
         margin-bottom: 30px;
     }

     .com-category .category {
         font-size: 1.333em;
     }

     .com-product .wrapper .title {
         font-size: 1.333em;
     }

     .com-product .wrapper .product img {
         width: 250px;
     }

     .com-line {
         border-width: 1px;
         padding: 40px 20px;
     }

     .com-line .copy {
         font-size: 1em;
         margin-bottom: 0;
     }

     .com-line .styling {
         font-size: 1.667em;
         margin-bottom: 15px;
     }

     .com-line .btn.outline-red {
         margin-top: 30px;
     }

     .btn-container .btn.outline-red {
         width: auto;
         padding: 14px 36px;
     }

     .com-list {
         display: block;
     }

     .com-list .part {
         width: 100%;
     }

     .com-list .pic.small {
         width: 100%;
     }

     .com-list .pic.right {
         float: none;
     }

     .com-list .com-card {
         margin-bottom: 20px;
     }

     section#related {
         background: linear-gradient(#fff 0%, #fff 35%, #F8F5EE 35%, #F8F5EE 100%);
     }

     .com-lg-swiper .slide .copy {
         margin-top: -35px;
     }

     .com-lg-swiper .slide .txt_line.row_1 .txt-wrap>span,
     .com-lg-swiper .slide .txt_line.row_1 .shadow {
         padding: 20px;
     }

     .com-lg-swiper .article {
         margin-top: 20px;
     }

     .com-lg-swiper .article p:not(:last-child) {
         margin-bottom: 25px;
     }

     .com-lg-swiper .swiper-pagination-fraction {
         font-size: 2.667em;
     }

     .accordion-head {
         text-align: center;
         margin-bottom: 25px;
         font-size: 1.833em;
     }

     .section-highlight-swiper .highlight {
         font-size: 1.5em;
         padding: 2px 7px;
     }

     .com-news {
         margin-bottom: 0;
     }

     .com-news .wrapper {
         display: block;
     }

     .com-news .part {
         width: 100%;
     }

     .com-news .polygon-wrapper.portrait2 .polygon.hollow {
         left: -30px;
     }

     .com-news .polygon-wrapper.portrait2 .polygon.filled {
         right: -35px;
     }

     .com-news-card {
         margin-bottom: 0px;
     }

     .com-news-card .wrapper,
     .com-news-card .small-wrap {
         width: 100%;
     }

     .com-news-card .copy {
         margin-top: -30px;
         margin-bottom: 20px;
         padding: 25px 25px 30px 25px;
     }

     .com-news-card .copy .name {
         margin-bottom: 12px;
         font-size: 1.333em;
     }

     .com-news-card .copy .title {
         font-size: 1.333em;
     }

     .com-news-card .copy table tr td {
         font-size: 1em;
     }

     .com-news-card .copy .more {
         font-size: 0.833em;
     }

     .com-tab .tab-menu {
         padding: 25px 0;
     }

     .com-tab .tab-menu .item {
         margin-bottom: 25px;
     }

     .com-tab .tab-menu .item.active .head span:after,
     .com-tab .tab-menu .item:hover .head span:after {
         bottom: -2px;
     }

     .com-tab .tab-menu .item .head {
         font-size: 1.333em;
     }

     .com-tab .tab-menu sup {
         font-size: 1.125rem;
     }

     .com-tab .details p:first-child {
         margin-top: 20px;
     }

     section#related .header {
         margin-bottom: 20px;
     }

     .com-video {
         margin: 60px 0 80px 0;
     }

     .com-quote {
         margin: 10px 0;
     }

     .com-quote .desc {
         font-size: 1.667em;
     }

     .com-quote .desc>span:before {
         width: 30px;
         height: 30px;
         left: -20px;
         top: -10px;
     }

     .com-quote .name {
         font-size: 1.333em;
     }

     .com-quote .title {
         font-size: 0.833em;
     }

     .com-quote .wrapper {
         padding: 30px 20px;
     }

     .com-remarks {
         margin-top: 35px;
         margin-bottom: 30px;
     }

     .menu-mobile .select-container .number {
         font-size: 1.5em;
     }

     .menu-mobile select {
         font-size: 1.333em;
     }
 }