html{-webkit-text-size-adjust:100%}
h2{font-family:'Noto Sans TC',Microsoft JhengHei,Arial,sans-serif;font-weight:600; text-transform:uppercase;margin-bottom:0.413em}
.bg-dark{background-color:#000}
[class*="bg-dark"]{--btn-primary-text: #fff;--btn-primary-background: #0a3962;--btn-primary-bg-hover: #8aa0a8;--btn-primary-border-color: rgba(0,0,0,0);}
.c-btn.primary{color:var(--btn-primary-text);background:var(--btn-primary-background);border-color:var(--btn-primary-border-color); font-size: 11px;font-family:'Noto Sans TC',Microsoft JhengHei,Arial,sans-serif;font-weight:600;transition: all .3s ease;}
.c-btn.primary:hover,.c-btn.primary:focus{background:var(--btn-primary-bg-hover);color:var(--btn-primary-hover-text); color: #fff;transition: all .3s ease;}
@media (hover: none){.c-btn.primary:hover,.c-btn.primary:focus{color:var(--btn-primary-text);background:var(--btn-primary-background)}}

.c-btn.primary:active{background:var(--btn-primary-bg-active);color:var(--btn-primary-text-active)}
.c-btn.primary.disabled,.c-btn.primary[disabled]{background:var(--btn-primary-bg-disabled);color:var(--btn-primary-disabled-text);border-color:var(--btn-primary-disabled-border-color)}[class*="bg-dark"]{--theme-full-text-color: #fff;color:var(--theme-full-text-color)}

*{box-sizing:border-box;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}button:-moz-focusring,[type="button"]:-moz-focusring{outline:0 !important}html{font-size:14px}figure{margin:0}
.component-full{padding:0}
.component-full.b-spacing{margin-bottom:0}
@media (min-width: 992px){.component-full.b-spacing{margin-bottom:0}}

.indexmain-section{margin:0 ;padding:0}
.indexmain-section.b-spacing{margin-bottom:32px}
@media (min-width: 992px){.indexmain-section.b-spacing{margin-bottom:0}}
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;overflow:hidden;display:block;margin:0;padding:0}
.slick-list:focus{outline:none}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{transform:translate3d(0, 0, 0)}
.slick-track{position:relative;left:0;top:0;display:block;margin-left:auto;margin-right:auto}
.slick-track:before,.slick-track:after{content:"";display:table}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{float:left;min-height:1px;display:none}[dir="rtl"] 
.slick-slide{float:right}
.slick-slide img{display:block}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}
.c-btn{font-size:14px;padding:calc((40px - (2px * 2) - (14px * 1)) / 2) 2rem;line-height:1;border:none;border-radius:0;color:currentColor;background:transparent;text-align:center;text-decoration:none;cursor:pointer}
.c-btn.-large{font-size:14px;padding-top:calc((48px - (2px * 2) - (14px * 1)) / 2);padding-bottom:calc((48px - (2px * 2) - (14px * 1)) / 2)}

@media (min-width: 576px){.c-btn{font-size:14px;padding:calc((48px - (2px * 2) - (14px * 1)) / 2) 2rem}
.c-btn.-large{font-size:18px;padding-top:calc((56px - (2px * 2) - (18px * 1)) / 2);padding-bottom:calc((56px - (2px * 2) - (18px * 1)) / 2)}}
.c-btn.primary{font-family:"Source Sans Pro bold",Helvetica,Arial,sans-serif;font-weight:normal;font-style:normal;border-radius:0;border-width:2px;border-style:solid}
.c-btn.-text{text-decoration:underline;background:none;border:none;padding:0;height:auto;font-size:1em;cursor:pointer}
.c-btn.-text.disabled,.c-btn.-text[disabled]{color:#666;text-decoration:none}
.c-btn:not(.-text):not(.adyen-checkout__button){display:block;width:100%}
@media (min-width: 576px){.c-btn:not(.-text):not(.adyen-checkout__button){display:inline-block;width:auto}}
.c-btn.disabled,.c-btn[disabled]{cursor:default;pointer-events:none}
@media (min-width: 576px){.button-wrapper:not(.-no-side-gap) .c-btn+.c-btn{margin-left:16px}}
@media (max-width: 767.98px){.button-wrapper .c-btn+.c-btn{margin-top:16px}}
.c-hero{position:relative}
@media (min-width: 576px) and (max-width: 767.98px){.c-hero{height:auto}}
@media (min-width: 768px) and (max-width: 991.98px){.c-hero{height:auto}}
@media (min-width: 992px) and (max-width: 1199.98px){.c-hero{height:660px}.c-hero .slick-slide{height:660px}}
@media (min-width: 1601px){.c-hero{height:960px}.c-hero .slick-slide{height:960px}}
@media (min-width: 992px){.c-hero .text-container{position:absolute;top:200px;left:0;right:0;bottom:0}}
.c-hero .c-hero-items:not(.slick-initialized) .c-hero-item:not(:first-child){display:none !important}
@media (min-width: 992px){.c-hero .c-hero-items:not(.slick-initialized) .c-hero-item{position:absolute}}
.c-hero .c-hero-items:not(.slick-initialized) .c-hero-item figure{height:450px}
@media (min-width: 576px) and (max-width: 767.98px){.c-hero .c-hero-items:not(.slick-initialized) .c-hero-item figure{height:360px}}
@media (min-width: 768px) and (max-width: 991.98px){.c-hero .c-hero-items:not(.slick-initialized) .c-hero-item figure{height:700px}}
@media (min-width: 992px) and (max-width: 1199.98px){.c-hero .c-hero-items:not(.slick-initialized) .c-hero-item figure{height:660px}}
@media (min-width: 1200px){.c-hero .c-hero-items:not(.slick-initialized) .c-hero-item figure{height:960px}}

.c-hero .c-hero-items:not(.slick-initialized){display:none !important}
.c-hero .c-hero-item{position:relative;padding-top:0}
.c-hero figure{position:relative;height:340px}
@media (min-width: 992px){.c-hero figure{position:static}}
.c-hero picture{height:100%;width:100%}
.c-hero img{position:absolute;top:0;left:0;bottom:0;height:100%;width:100%;object-fit:cover}
.c-hero .slick-slide{position:relative;overflow:hidden}
.c-hero .slick-slide>div{display:flex}
@media (min-width: 992px){.c-hero .slick-slide>div{height:100%}}
.c-hero .slick-dots{display:flex;justify-content:center;padding:0;list-style-type:none;margin:-28px 0 0 0;position:absolute;top:0;left:50%;transform:translateX(-50%)}
.c-hero .slick-dots li{margin:0}
.c-hero .slick-dots li+li{margin-left:8px}
.c-hero .slick-dots button{width:.85em;height:.85em;padding:0;border-width:1px;border-style:solid;border-radius:50%;color:transparent;cursor:pointer}
.c-hero .slick-dots li button{border-color:#999;background-color:#999}
.c-hero .slick-dots li.slick-active button{border-color:#fff;background:#fff}
@media (min-width: 992px){.c-hero .slick-dots{top:auto;margin-top:-50px}}
.c-hero article{text-align:center;padding:24px 0}
.c-hero article>*:last-child{margin-bottom:0}
@media (min-width: 768px) and (max-width: 991.98px){.c-hero article{margin:0 auto}}
@media (min-width: 992px){.c-hero article{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-content:center;color:#fff}
	.c-hero-item.align-left article{margin:0 auto 0 0;align-items:flex-start;justify-content:flex-start;text-align:left;left:40px}
	.c-hero-item.align-right article{margin:0 0 0 auto;align-items:flex-end;justify-content:flex-end;text-align:right;right:40px}
	.c-hero-item.align-center article{margin:0 auto;align-items:center;justify-content:center;text-align:center}}
.c-hero h2{font-size:42px; line-height:1.2;margin:0 0 25px;color:inherit;width:100%}
.c-hero p{font-family:'Noto Sans TC',微軟正黑體,Microsoft JhengHei,Arial,sans-serif; font-weight: 300; font-size:1.4rem;margin:0 0 30px;color:inherit;width:100%}
.c-hero .text-container{width:100%;padding-right:20px;padding-left:20px;margin-right:auto;margin-left:auto;max-width:575px}
.c-hero .text-container>article{width:100%}
.c-hero .slick-dots button{width:.75em;height:.75em}
.c-hero-item img{max-height: 960px;}
.c-hero .mobilehidden{display:block}
.c-hero .mobile{display:none}
@media (min-width: 576px){.c-hero .text-container{max-width:767px}}
@media (min-width: 768px){.c-hero .text-container{max-width:991px}}
@media (min-width: 992px){.c-hero .text-container{max-width:1199px}}
@media (min-width: 1200px){.c-hero .text-container{max-width:1680px}}
@media (min-width: 768px){.c-hero .text-container>article{flex:0 0 66.66667%;max-width:66.66667%}}
@media (min-width: 992px){.c-hero .text-container>article{flex:0 0 50%;max-width:50%}}

@media only screen and (max-width: 1600px) {
.c-hero-item img{max-height: 810px;}
.c-hero .slick-slide{height:815px}
.c-hero .mobilehidden{display:block}
.c-hero .mobile{display:none}
}
@media only screen and (max-width: 1200px) {
.c-hero .slick-slide{height:660px}
.c-hero .slick-dots{top:auto;margin-top:-50px}
.c-hero .mobilehidden{display:block}
.c-hero .mobile{display:none}
.c-hero h2{font-size:34px; line-height:1.2;margin:0 0 25px;color:inherit;width:100%}
}
@media only screen and (max-width: 980px) {
.c-hero .slick-slide{height:670px}
.c-hero .slick-dots{top:auto;margin-top:-30px}
.c-hero figure{height:470px}
.c-hero .mobilehidden{display:block}
.c-hero .mobile{display:none}
.c-hero h2{font-size:28px; line-height:1.2;margin:0 0 15px;color:inherit;width:100%}
.c-hero p{font-size:17px;margin:0 0 20px;}
}
@media only screen and (max-width: 550px) {
.c-hero .slick-slide{height:550px}
.c-hero .slick-dots{top:auto;margin-top:-30px}
.c-hero figure{height:370px}
.c-hero .mobilehidden{display:none}
.c-hero .mobile{display:block}
.c-hero h2{font-size:22px; line-height:1.2;margin:0 0 10px;color:inherit;width:100%}
.c-hero p{font-size:14px; margin:0 0 20px;}
}

.brand-row{width:100%; float: left;}
.brand-content{width:1500px;margin: 80px auto 70px;text-align: center}
.brand-box{width:1500px;margin: 100px auto 0}
.brand-title{width:100%; float:left; margin:0 0 30px 0;font-size:32px; font-weight:500;letter-spacing:0.05em;text-indent:-0.05em;}
.brand-title{opacity:0!important;-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,transform 1s;transition:opacity 1s,transform 1s,-webkit-transform 1s}
.brand-title.show{opacity:1!important;-webkit-transform:scale(1);transform:scale(1)}
.brand-suger{width:100%; float:left; margin:0 0 20px 0;font-size:26px; font-weight:500;}
.brand-suger{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.brand-suger.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.brand-subtitle{ width:70%;float:left; line-height:2em;margin: 0 15%}
.brand-subtitle{opacity: 0;-moz-transform: translateY(-30px);-ms-transform: translateY(-30px);-webkit-transform: translateY(-30px);transform: translateY(-30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.brand-subtitle.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.brandbg{width:100%; float: left;background-color: #fafafa}
.brand-info{width:100%;float: left; margin-bottom:100px; position: relative}
.brand-info img{max-width:100%; height: auto}
.sidebar-pic{width:60%;float:left; margin:0 2% 0 0;text-align:center;}
.sidebar-pic{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.sidebar-pic.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.sidebar-rightpic{width:60%; float:left; margin:0 0 0 40%;text-align:center; }
.sidebar-rightpic{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.sidebar-rightpic.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.sidebar-pic img,.sidebar-rightpic img{max-width:100%; height: auto}
.sidebar-tx{width:38%; float:left; margin:0}
.sidebar-lefttx{width:38%; float:left; margin:0;position: absolute; left:0;top:0}
.info-stx{ width:100%;float:left; margin: 0}
.info-stx h2{margin:0 0 20px;font-size:38px;font-weight:700}
.info-stx h2{opacity: 0;-moz-transform: translateY(-30px);-ms-transform: translateY(-30px);-webkit-transform: translateY(-30px);transform: translateY(-30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.info-stx h2.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.info-stx h3{font-size: 15px; letter-spacing:0.05em;color: #555;}
.info-stx h3{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.info-stx h3.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.info-stx p{font-size: 15px; letter-spacing:0.05em;margin-bottom:20px;line-height: 1.8em;text-align:justify;}
.info-stx p{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.info-stx p.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.b-pic{width:100%; float: left; margin:0 0 20px;text-align:center; }
.b-pic img{max-width:100%; height: auto}
.view{width:100%;float:left;margin:0;}
.linkbox{width:100px;margin:0 auto 0 0;background-color:#8b282d; border-radius: 20px;border: 1px solid #8b282d;font-size:12px;text-decoration:none;transition:color .2s,border .2s;cursor:pointer;display:inline-block;line-height:28px;text-align: center;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;-o-transition: 0.5s;color: #fff}
.linkbox:hover{background-color: transparent;color: #000!important;letter-spacing:.03em;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;-o-transition: 0.5s;border: 1px solid #8b282d;}

@media screen and (max-width: 1600px) {
.brand-content{width:90%;margin: 60px auto 50px}
.brand-box{width:90%;margin:80px auto 0}
.brand-info{margin-bottom:80px}
.info-stx h2{margin:0 0 15px;font-size:34px}
}
@media screen and (max-width: 1200px) {
.brand-content{width:90%;margin:50px auto 50px}
.brand-box{width:90%;margin:70px auto 0}
.brand-subtitle{ width:85%;margin: 0 7.5%}
.b-pic img{max-width:80%; height: auto;margin: 0 10%}
.info-stx h2{margin:0 0 15px;font-size:30px}
.brand-info{margin-bottom:60px}	
}
@media screen and (max-width: 980px) {
.brand-content{width:90%;margin:30px auto}
.brand-box{margin:60px auto 20px}
.brand-suger{margin:0 0 15px 0;font-size:22px}
.brand-subtitle{ width:100%;margin: 0}
.brand-title{margin:0 0 15px 0;font-size:28px}
.brand-info{margin-bottom:30px}	
.sidebar-pic{width:100%;margin:0 0 25px}
.sidebar-rightpic{width:100%; margin:0 0 25px}
.b-pic{width:48%; float: left; margin:0 3% 0 0;text-align:center}
.b-pic img{max-width:100%; height: auto;margin: 0;}
.sidebar-tx{width:100%; margin:0}
.sidebar-lefttx{width:100%; margin:0;position:static}
.info-stx{ width:49%;float:left; margin:30px 0 0 0}
.info-stx p{font-size: 15px; letter-spacing:0.05em;color: #444;margin-bottom:20px;line-height: 1.8em}
}
@media screen and (max-width: 550px) {
.brand-content{margin:0 auto}
.brand-suger{margin:0 0 10px 0;font-size:18px}
.brand-title{margin:0 0 10px 0;font-size:24px}
.brand-subtitle{line-height:1.8em}
.brand-box{margin: 40px auto 10px}
.sidebar-pic{margin:0 0 15px}
.sidebar-rightpic{margin:0 0 15px}
.b-pic{width:100%; margin:0 0 15px}
.info-stx{width:100%;margin:0}
.info-stx p{font-size: 15px; letter-spacing:0.05em;color: #444;margin-bottom:20px;line-height: 1.8em}
.brand-info{margin-bottom:40px}	
}
.img-fluid{max-width:100%;height:auto}
.mainnews{width:100%; float:left;margin:60px 0 30px; }
.news-content{width:1400px; margin: 0 auto}
.news-title{ width:98%; float:left;margin: 0 1% 50px}
.news-title h2{ font-size:34px;letter-spacing: 0.1em;margin-bottom: 20px;font-weight:500;}
.news-title p{ font-size:17px;color: #444;line-height: 1.8em}
.newsContainer{ width:100%; float: left; margin:0;font-size:0;}
.news-item{width:48%;margin: 10px 1% 60px; display:inline-block; vertical-align:top;position:relative}
.news-box {width: 100%; float: left; overflow: hidden;position: relative;margin: 0}
.news-box .news-box-img {width:42%;float: left;margin: 0 6% 0 0}
.news-box-img{opacity: 0;-moz-transform: translateX(20px);-ms-transform: translateX(20px);-webkit-transform: translateX(20px);transform: translateX(20px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.news-box-img.show {opacity: 1;-moz-transform: translateX(0);-ms-transform: translateX(0);-webkit-transform: translateX(0);transform: translateX(0);}
.news-box .news-box-img img{max-width:100%;height: auto}
.news-box .news-boxinfo{width:52%;float: left; padding:10px 0 0; box-sizing: border-box;position: absolute;top:50%;right: 0;transform: translate(0, -50%);}
.news-box .news-boxinfo h3{position:relative;overflow:hidden;display:inline-block;margin:0;font-size:24px; letter-spacing:0.05em;font-weight:400}
.news-boxinfo h3{opacity: 0;-moz-transform: translateY(-30px);-ms-transform: translateY(-30px);-webkit-transform: translateY(-30px);transform: translateY(-30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.news-boxinfo h3.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.news-box .news-boxinfo p{font-size: 15px; letter-spacing:0.05em;color: #555;margin-bottom:10px}
.news-boxinfo p{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.news-boxinfo p.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.news-box .news-boxinfo h3::after{content:" ";display:block; width: 0%;height: 2px;background-color: #000;transition: .3s .2s;}
.news-item:hover .news-boxinfo h3::after{width:100%;}
@media screen and (max-width: 1600px) {
.mainnews{margin:50px 0 20px; }
.news-content{width:87%;margin:0 auto}
.news-item{margin: 10px 1% 50px; }
}
@media screen and (max-width: 1200px) {
.mainnews{margin:40px 0 20px; }
.news-content{width:92%;margin:0 auto}
}
@media screen and (max-width: 980px) {
.mainnews{margin:35px 0 10px; }
.news-title{ width:96%; float:left;margin: 0 2% 30px}
.news-title h2{ font-size:28px;margin-bottom:15px}
.news-content{width:94%}
.news-item{width:46%;margin: 0 2% 40px}
.news-box .news-box-img {width:100%;margin: 0 0 20px}
.news-box .news-boxinfo{width:100%;padding:0;position:static;transform: translate(0, 0);}
.news-box .news-boxinfo h3{font-size:22px}
}
@media screen and (max-width: 550px) {
.mainnews{margin:25px 0 10px; }
.news-title{ width:96%; float:left;margin: 0 2% 20px}
.news-title h2{ font-size:24px;margin-bottom:10px}
.news-item{width:46%;margin: 0 2% 20px}
.news-box .news-box-img {margin: 0 0 15px}
.news-box .news-boxinfo h3{font-size:20px}
.news-box .news-boxinfo p{font-size: 15px;margin-bottom:6px}
}