@charset "utf-8";

/** bootstrap **/
@import url(bootstrap.css);

/** 文字icon **/
@import url(font-awesome.min.css);

/** 手機選單 **/
@import url(slicknav.css) screen and (max-width:1100px);

/** edm **/
@import url(edm.css);

/** font **/
@import url(Noto+Sans+TC.css);
@import url(Questrial.css);

*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html{width:100%; height:auto;}
body{background:#ffffff; margin:0; padding:0; width:100%; height:auto; font-size:18px;line-height: 1.6;font-family: 'Questrial', 'Noto Sans TC', sans-serif;word-break: break-word;letter-spacing: 1px; overflow-y: scroll;}
a,a:hover{text-decoration:none;transition: all 0.5s ease 0s;cursor: pointer;}
img{border:0; vertical-align:middle; max-width:100%;}
input{vertical-align:middle;border-radius: 0; }
input:focus, select:focus, textarea:focus, button:focus{outline:0;}
/** 取消ios按鈕樣式 **/
input[type="button"], input[type="submit"], input[type="reset"], button[type="button"], button[type="submit"], button[type="reset"], a[type="button"], a[type="submit"], a[type="reset"], textarea{border-radius: 0; -webkit-appearance: none;-moz-appearance: none;appearance: none;}
.slicknav_menu{display:none;}
table{border-collapse:inherit;}
@media screen and (max-width:767px){
    body{font-size:16px;}
}
    
/** 表單預設文字顏色設定 **/
::-webkit-input-placeholder{color:#999999;}
::-moz-placeholder{color:#999999;}
:-ms-input-placeholder{color:#999999;}
input:-moz-placeholder{color:#999999;}
#field2::-webkit-input-placeholder{color:#999999;}
#field3::-webkit-input-placeholder{color:#999999; background:lightgreen; text-transform:uppercase;}
#field4::-webkit-input-placeholder{font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999999;}
#field2::-moz-placeholder{color:#999999;}
#field3::-moz-placeholder{color:#999999; background:lightgreen; text-transform:uppercase;}
#field4::-moz-placeholder{font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999999;}
.writing-mode-vertical{writing-mode:tb-lr; -ms-writing-mode:tb-lr; -webkit-writing-mode:vertical-lr; -moz-writing-mode:vertical-lr; -ms-writing-mode:vertical-lr; writing-mode:vertical-lr;}

/** 手機選單、選單 色塊-變色 **/
.b-color, .slicknav_menu{}
.slicknav_icon-bar{background-color:#000000;}
.b-color>li:hover, .b-color>li>ul>li>a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover{background:#000000;}
.border-color{border-left:7px #A0A0A0 solid;}
.slicknav_nav .slicknav_arrow{font-family:Arial;}

/** 浮動icon **/
.float-icon-main{position: fixed;width: 60px; height: auto;bottom: 140px;right: 0px;z-index: 10000;}
.float-icon{}
.float-icon ul{list-style: none;padding: 4px;margin: 0;display: block;box-shadow: 0 0 15px 0 rgba(0,0,0,.2);background: #ffffff;}
.float-icon ul li{padding: 0;margin:1px;display: block;width: 50px; height: 50px;}
.float-icon ul li a{display: flex;align-items: center;justify-content: center; width: 50px; height: 50px;background: #f3f3f3;padding: 9px;}
.float-icon ul li a:hover{background: #cd0013;}
.float-icon ul li a:hover img{filter:grayscale(100) invert(100) brightness(100);}
@media screen and (max-width:767px){
	.float-icon-main{width:50px;bottom: 70px;}
    .float-icon ul li{width: 40px; height: 40px;}
    .float-icon ul li a{width: 40px; height: 40px;padding: 8px;}
}

/** 上版 **/
header{position: fixed;width: 100%;top: 0;left: 0;z-index:10000; background:#ffffff;border-bottom: 1px #cd0013 solid;padding: 0 0 0 3.29%;}
.head-main{ margin:0; padding:0; position:relative;display: flex;align-items: center;}
.head-main .logo{width: 182px; height:auto;margin: 0; transition: all 0.5s ease 0s;}
.head-main .logo a{display: block;}
.head-main .logo img{width:100%; height:auto;}
.head-main .logo-name{width: auto;font-size: 46px;color: #000000;margin: 10px 30px 0 10px;font-weight: 600;line-height: 1;transition: all 0.5s ease 0s;}
.head-main .logo-name a{display: block;color: #000000;}
.head-main .logo-name a:hover{color: #000000;}
.head-main .head-tel{width: 210px;display: flex;align-items: flex-end;margin: 0 20px;padding: 8px 0 0 0;}
.head-main .head-tel .head-tel-icon{width: 30px;margin: 0 15px 0 0;padding: 10px 0;}
.head-main .head-tel .head-tel-info{flex: 1;line-height: 1.4;}
.head-main .head-tel .head-tel-info .head-tel-name{font-size: 16px;color: #000000;font-weight: 500;}
.head-main .head-tel .head-tel-info .head-tel-content{font-size: 22px; color: #cd0013;font-style: italic;}
.head-main .head-tel .head-tel-info .head-tel-content a{color: #cd0013;}
.head-main .head-tel .head-tel-info .head-tel-content a:hover{}
.head-main .head-line{width: 162px;}
.head-main .head-line>ul{list-style: none;padding: 0;margin: 0;display: flex;}
.head-main .head-line>ul>li{padding: 0;margin:0;border-right: 1px #ffffff solid;width: calc(100%/2);text-align: center;}
.head-main .head-line>ul>li:last-of-type{border-right: 0}
.head-main .head-line>ul>li .head-line-icon{width: 24px; margin: 0 auto;filter:grayscale(100) invert(100) brightness(100);}
.head-main .head-line>ul>li .head-line-id{font-weight: 300;color: #ffffff;font-size: 14px;letter-spacing: 0px;}
.head-main .head-line>ul>li a{display: block;background: #cd0013;padding:24.41px 8px;transition: all 0.5s ease 0s;}
.head-main .head-line>ul>li a:hover{background: #000000;}
.header-height .head-main .logo{width:140px;transition: all 0.5s ease 0s;}
.header-height .head-main .logo-name{font-size: 36px;transition: all 0.5s ease 0s;}
.header-height .head-main .head-line>ul>li a{padding:6.81px 8px;transition: all 0.5s ease 0s;}
@media screen and (max-width:1300px){
    header{padding: 0 0 0 15px;}
    .head-main .logo-name{margin: 10px 15px 0 10px;}
    .head-main .head-tel{margin: 0 10px;width: 200px;}
}
@media screen and (max-width:1200px){
    .head-main .logo{width: 134px;}
    .head-main .logo-name{font-size: 34px;margin: 10px 10px 0 10px;}
    .header-height .head-main .logo{width:134px;} 
    .header-height .head-main .logo-name{font-size: 34px;}
}
@media screen and (max-width:1100px){
    header{border-bottom: 0;}
    .head-main .logo{width:104px;position: fixed;top: 7px;left: 10px;z-index: 10000;}
    .head-main .logo-name{font-size: 26px;margin:0;position: fixed;top:13px;left: 120px;z-index: 10000;}
    .head-main .head-tel{width: 165px;position: fixed;top: 0;right: 290px;padding:6px 0 0 0;}
    .head-main .head-tel .head-tel-icon{width: 24px;padding: 5px 0;}
    .head-main .head-tel .head-tel-info{line-height: 1.2;}
    .head-main .head-tel .head-tel-info .head-tel-name{font-size: 14px;}
    .head-main .head-tel .head-tel-info .head-tel-content{font-size: 18px;}
    .head-main .head-line{width: 230px;position: fixed;top: 0;right: 60px;}
    .head-main .head-line>ul>li{text-align: left;}
    .head-main .head-line>ul>li .head-line-icon{width: 22px;margin: 0 5px 0 0;}
    .head-main .head-line>ul>li .head-line-id{flex: 1;}
    .head-main .head-line>ul>li a{padding:9.1px 8px;display: flex;align-items: center;}
    .header-height .head-main .logo{width:104px;}
    .header-height .head-main .logo-name{font-size: 26px;}
    .header-height .head-main .head-line>ul>li a{padding:9.1px 8px;}
}
@media screen and (max-width:767px){
    header{margin: 48px 0 0 0;position: inherit;top: inherit;left: inherit;}
    .head-main .head-tel{position: inherit;top: inherit;right: inherit;}
    .head-main .head-line{position: inherit;top: inherit;right: inherit;}
}
@media screen and (max-width:575px){
    .head-main .head-tel {width: 150px; margin: 0 10px 0 0;}
    .head-main .head-tel .head-tel-icon{width: 20px;padding:3px 0;margin: 0 8px 0 0;}
    .head-main .head-tel .head-tel-info .head-tel-name{font-size: 13px;}
    .head-main .head-tel .head-tel-info .head-tel-content{font-size: 16px;}
    .head-main .head-line{width: 145px;}
    .head-main .head-line>ul>li {text-align: center;}
    .head-main .head-line>ul>li .head-line-icon{width: 20px;margin: 0 auto;}
    .head-main .head-line>ul>li .head-line-id{font-size: 12px;flex: initial;width: 100%;}
    .head-main .head-line>ul>li a{display: block;padding:2px 8px;}
    .header-height .head-main .head-line>ul>li a{padding:2px 8px;}
}

/** 主選單與下拉 **/
nav{flex: 1;}
.menu{max-width:1280px; padding:0; list-style:none; position:relative; margin:0 auto; display:flex;}
.menu>li{color:#222222; font-size:18px; text-align:center; position:relative; cursor:pointer; padding:0; margin:0;}
.menu>li>a{color:#222222; display:block; padding:35.6px 15px; margin:0;position: relative;transition: all 0.5s ease 0s;}
.menu>li:before{content: "";display: block;width: 40px; height: 4px;background: #cd0013;position: absolute;bottom:-4px;left: calc(50% - 20px);transition: all 0.3s ease 0s;opacity: 0;visibility: hidden;}
.menu>li>a:hover{color: #cd0013;}
.menu>li:hover:before{bottom: 0;transition: all 0.3s ease 0s;opacity: 1;visibility: visible;}
.menu>li.sub>ul.sub-menu{background:#ffffff;; display:none; position:static; z-index:999; margin:0; padding:0;border: 1px #cd0013 solid;overflow:hidden;}
.menu>li.sub:hover ul.sub-menu{position:absolute; display:block; width:100%; left:0; top:100px;}
.menu>li.sub>ul.sub-menu>li{display:block; font-size: 16px;text-align: center;}
.menu>li.sub>ul.sub-menu>li>a{display:block; color:#222222; padding:10px 10px; margin:0;}
.menu>li.sub>ul.sub-menu>li>a:hover{background:#cd0013;color: #ffffff;}
.header-height .menu>li>a{ padding:18px 15px; transition: all 0.5s ease 0s;}
@media screen and (max-width:1300px){
    .menu>li>a{ padding:35.6px 10px;}
    .header-height .menu>li>a{ padding:18px 10px;}
}
@media screen and (max-width:1100px){
	#menu{display:none;}
	.slicknav_menu{display:block;position: fixed;width: 100%;top: 0;left: 0;z-index: 10000; background:#ffffff;border-bottom: 1px #cd0013 solid;}
}

/** edm輪播 **/
.edm-main{background:#ffffff; max-width:100%; margin:0 auto; position:relative;padding: 101px 0 0 0;}
.edm-main img{vertical-align:middle; width:100%; height:auto; position:absolute;}
.edm{position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1920px; height: 632px; overflow: hidden; visibility: hidden;}
.edm-loading-main{position: absolute; top: 0px; left: 0px;}
.edm-loading{filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;}
.edm-loading-photo{position:absolute;display:block;background:url(../images/loading.gif) no-repeat center center;top:0px;left:0px;width:100%;height:100%;}
.edm-photo{cursor: default; position: relative; top: 0px; left: 0px; width: 1920px; height: 632px; overflow: hidden;}
.edm-navigator{width:76px;height:5px;}
@media screen and (max-width:1100px){
    .edm-main{padding: 0;}
}

/** 配置 **/
.warpper{overflow: hidden;}
.main{}

/** 首頁基本資料 **/
.i-about-main{padding: 0 15px;}
.i-about-main .i-about{max-width: 1280px; margin: 0 auto;display: flex;}
.i-about .i-about-photo{flex: 1;position: relative;z-index: 1;display: flex;flex-wrap: wrap; align-items: center;}
.i-about .i-about-photo:after{content: "";display: block;width: 150%;height: 72%;background:#cd0013;position: absolute;top: calc(50% - 36%);left: -100%;z-index: -1;}
.i-about .i-about-photo img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
.i-about .i-about-info-main{flex: 1.64;margin: 0 0 0 5.5vw;padding: 30px 0;display: flex;flex-wrap: wrap; align-items: center;}
.i-about .i-about-info-main .i-message{width: 100%;}
.i-about .i-about-info-main .i-message .marquee{color: #000000;border: 1px #cd0013 solid;border-radius: 10px;display: flex;overflow: hidden;margin: 0;width: 100%;}
.i-about .i-about-info-main .i-message .marquee .marquee-icon{background: #cd0013;min-width: 64px; width: 64px;display: flex;align-items: center;justify-content: center;padding: 5px 15px;}
.i-about .i-about-info-main .i-message .marquee .marquee-content{flex: 1;padding:8px 20px 5px 20px;display: flex;align-items: center;background: #ffffff;}
.i-about .i-about-info-main .i-message .i-news{margin:0;}
.i-about .i-about-info-main .i-message .i-news .i-news-title{display: flex;align-items: flex-end; padding:10px 0;margin: 20px 0;border-bottom: 1px #cd0013 solid;}
.i-about .i-about-info-main .i-message .i-news .i-news-title h2{flex: 1; padding: 0;margin: 0;line-height: 1.4;font-size: 24px; color: #000000;font-weight:500;}
.i-about .i-about-info-main .i-message .i-news .i-news-title .i-news-more{display: flex;align-items: center;justify-content: flex-end;color: #222222;font-size: 14px;text-transform: uppercase;margin: 0 0 0 15px;}
.i-about .i-about-info-main .i-message .i-news .i-news-title .i-news-more a{display: block; color: #cd0013;padding: 6px 0; border-radius: 0px;}
.i-about .i-about-info-main .i-message .i-news .i-news-title .i-news-more a:hover{background: #cd0013;color: #ffffff;padding: 6px 15px;border-radius: 5px;}
.i-about .i-about-info-main .i-message .i-news>ul{ list-style:none;padding: 0;margin: 0 ;}
.i-about .i-about-info-main .i-message .i-news>ul>li{padding: 0px; margin:0;}
.i-about .i-about-info-main .i-message .i-news>ul>li a{display: block; padding:3px 15px 3px 20px; color: #000;position: relative;}
.i-about .i-about-info-main .i-message .i-news>ul>li a:before{content: "";display: block;width: 5px; height: 5px; background: #cd0013;position: absolute;top: 13px;left: 0;}
.i-about .i-about-info-main .i-message .i-news>ul>li a:hover{color: #cd0013;}
.i-about .i-about-info-main .i-about-info{width: 100%;}
.i-about .i-about-info-main .i-about-info .i-about-title{display: flex;align-items: flex-end; padding:10px 0;margin: 20px 0;border-bottom: 1px #cd0013 solid;}
.i-about .i-about-info-main .i-about-info .i-about-title h2{width: auto;padding: 0;margin: 0;line-height: 1.4;font-size: 24px; color: #000000;font-weight:500;}
.i-about .i-about-info-main .i-about-info .i-about-title .i-about-number{flex: 1;text-align: right;font-size: 16px; color: #666666;}
.i-about .i-about-info-main .i-about-info .i-about-content{color: #000000;}
.i-about .i-about-info-main .i-about-info .i-about-content>ul{list-style: none;padding: 0;margin: 0;}
.i-about .i-about-info-main .i-about-info .i-about-content>ul>li{padding: 0;margin: 20px 0;display: flex;}
.i-about .i-about-info-main .i-about-info .i-about-content>ul>li .i-about-icon{width: 26px;margin: 0 12px 0 0;}
.i-about .i-about-info-main .i-about-info .i-about-content>ul>li .i-about-dep{flex: 1;}
.i-about .i-about-info-main .i-about-info .i-about-content>ul>li a{display: inline-block;color: #000000;}
.i-about .i-about-info-main .i-about-info .i-about-content>ul>li a:hover{color: #cd0013;}
.i-about .i-about-info-main .i-about-info .i-about-note{font-size: 20px; color: #ffffff;border-radius: 10px; background: url("../images/about_bg.jpg")no-repeat center top;background-size: cover;padding: 20px; text-align: center;margin: 30px 0 0 0;}
.i-about-font001{color: #cd0013;font-size: 14px;display: inline-block;}
.i-about-font002{color: #666666;font-size: 14px;display: inline-block;}
@media screen and (max-width:767px){
    .i-about-main .i-about{display: block;}
    .i-about .i-about-photo{flex: initial;width: 100%;max-width: 500px;margin: 0 auto;display:none;}
    .i-about .i-about-info-main{flex:initial;width: 100%; margin:0;display: flex;flex-direction: column-reverse;}
    .i-about .i-about-info-main .i-message{margin: 30px 0 0 0;}
    .i-about .i-about-info-main .i-message .i-news{margin: 15px 0 0 0;}
    .i-about .i-about-info-main .i-message .i-news .i-news-title{padding:0 0 10px 0;margin:0 0 20px 0;}
    .i-about .i-about-info-main .i-message .i-news .i-news-title h2{font-size: 20px;}
    .i-about .i-about-info-main .i-message .i-news .i-news-title .i-news-more{font-size: 13px;}
    .i-about .i-about-info-main .i-about-info .i-about-title { padding:0 0 10px 0;margin:0 0 20px 0;}
    .i-about .i-about-info-main .i-about-info .i-about-title h2{font-size: 20px;}
    .i-about .i-about-info-main .i-about-info .i-about-title .i-about-number{font-size: 14px;}
    .i-about .i-about-info-main .i-about-info .i-about-note{font-size: 18px;}
}
@media screen and (max-width:575px){
    .i-about .i-about-info-main .i-about-info .i-about-title{display:block;}
    .i-about .i-about-info-main .i-about-info .i-about-title h2{width:100%;margin: 0 0 5px 0;}
    .i-about .i-about-info-main .i-about-info .i-about-title .i-about-number{flex:initial;width: 100%;text-align: left;}
    .i-about .i-about-info-main .i-about-info .i-about-note{margin: 20px 0 0 0;}
}

/** 內頁banner **/
.inside-banner{background:url("../images/banner.jpg")no-repeat center center;background-size: cover; padding:calc(2vw + 120px) 15px calc(2vw + 20px) 15px;position: relative;}
.inside-banner:before{content: "";display: block;width: 10%;height: 100%;background: rgba(255,255,255,.3);position: absolute;top: 0;left: 20%;transform: skewX(-45deg);}
.inside-banner:after{content: "";display: block;width: 55%;height: 100%;background: rgba(205,0,19,.4);position: absolute;top: 0;left: -30%;transform: skewX(-45deg);}
.inside-banner .banner-title{max-width:1280px; font-size:36px; color:#ffffff; margin:0 auto; position: relative;z-index: 1;padding:10px 0;}
.inside-banner .banner-title:after{content: "";display: block;width: 100px;height: 4px;background: #ffffff;position: absolute;bottom: 0;left: 0;box-shadow: 1px 1px 4px 0 rgba(0,0,0,.7);}
.inside-banner .banner-title .main-title{font-weight: 500;line-height: 1.4;letter-spacing: 8px;font-size:36px; color:#ffffff;padding:0;margin: 0; text-shadow: 1px 1px 4px rgba(0,0,0,.7);}
@media screen and (max-width:1100px){
    .inside-banner{padding:calc(2vw + 68px) 15px calc(2vw + 20px) 15px;}
}
@media screen and (max-width:767px){
    .inside-banner{padding:calc(2vw + 20px) 15px calc(2vw + 20px) 15px;}
    .inside-banner .banner-title h1{letter-spacing: 4px;font-size:30px; }
}

/** Breadcrumb **/
nav[aria-label="breadcrumb"]{margin:15px 0 0 0;position: relative;z-index: 1;font-size: 14px;text-shadow: 1px 1px 4px rgba(0,0,0,.7);;font-weight: 500;line-height: 1.4;}
.inside-banner .banner-title:after{content: "";display: block;width: 100px;height: 4px;background: #ffffff;position: absolute;bottom: 0;left: 0;box-shadow: 1px 1px 4px 0 rgba(0,0,0,.7);}
.breadcrumb{display:flex; flex-wrap:wrap; width:100%; max-width:1280px; margin:0 auto; padding:0; list-style:none; background-color:transparent; border-radius:0;}
.breadcrumb-item{padding-left:0;}
.breadcrumb-item + .breadcrumb-item::before{display:inline-block; padding-right:0.5rem; color:#ffffff; content:" - ";}
.breadcrumb-item a{font-weight:400; text-decoration:none; color:#ffffff;}
.breadcrumb-item a:hover{color:#ffec91; text-decoration:none;}
.breadcrumb-item.active{color:#ffffff;font-weight:400;}

/** 內頁架構 **/
.content-body{max-width:1280px; margin:0 auto; background:#ffffff; padding:3.5vw 0;}
.page-title{width: auto;padding:0;margin: 0 0 20px 0;line-height: 1.4;font-size: 24px; color: #000000;font-weight:500;display: flex;}
.page-title i{display: block;width: 40px;height: 40px;min-width: 40px; margin: -5px 8px 0 0;}
.page-main{padding:0; font-size:18px; color:#222222;}
.page-main a{color:#222222;}
.page-main a:hover{color:#cd0013;}
.page-main ul, .page-main ol{margin: 0;}
.page-main ol{list-style: decimal-leading-zero;}
.page-main ul li, .page-main ol li{margin:5px 0;}
@media screen and (max-width:767px){
    .content-body{padding:30px 0;}
    .page-title{font-size: 20px;}
	.page-main{font-size:16px; }
}

/** 基本資料 **/
.about-info{}
.about-info .about-title{display: flex;align-items: flex-end; padding:0 0 10px 0;margin:0 0 20px 0;border-bottom: 1px #cd0013 solid;}
.about-info .about-title h2{width: auto;padding: 0;margin: 0;line-height: 1.4;font-size: 24px; color: #000000;font-weight:500;}
.about-info .about-title .about-number{flex: 1;text-align: right;font-size: 16px; color: #666666;}
.about-info .about-content{color: #000000;}
.about-info .about-content>ul{list-style: none;padding: 0;margin: 0;}
.about-info .about-content>ul>li{padding: 0;margin: 20px 0;display: flex;}
.about-info .about-content>ul>li .about-icon{width: 26px;margin: 0 12px 0 0;}
.about-info .about-content>ul>li .about-dep{flex: 1;}
.about-info .about-content>ul>li a{display: inline-block;color: #000000;}
.about-info .about-content>ul>li a:hover{color: #cd0013;}
.about-info .about-note{font-size: 20px; color: #ffffff;border-radius: 10px; background: url("../images/about_bg.jpg")no-repeat center top;background-size: cover;padding: 20px; text-align: center;margin: 30px 0 0 0;}
.about-font001{color: #cd0013;font-size: 14px;display: inline-block;}
.about-font002{color: #666666;font-size: 14px;display: inline-block;}
@media screen and (max-width:767px){
    .about-info{margin: 0 0 30px 0;}
    .about-info .about-title h2{font-size: 20px;}
    .about-info .about-title .about-number{font-size: 14px;}
    .about-info .about-note{font-size: 18px;}
}
@media screen and (max-width:575px){
    .about-info .about-title{display:block;}
    .about-info .about-title h2{width:100%;margin: 0 0 5px 0;}
    .about-info .about-title .about-number{flex:initial;width: 100%;text-align: left;}
    .about-info .about-note{margin: 20px 0 0 0;}
}

/** 最新消息 **/
.news{}
.news>ul{margin:0; padding:0; list-style:none;display: block;}
.news>ul>li{clear:both;padding: 0;margin: 0;}
.news>ul>li a{color:#222222; display:flex; padding:15px 15px;background: #ffffff;}
.about-news>ul>li a{display:block;padding:10px 15px;}
.news>ul>li:nth-child(even) a{background: #f3f3f3;}
.news>ul>li a:hover{position: relative;z-index: 1;box-shadow:0 0 0 1px #cd0013, 0 0 10px 0 rgba(0,0,0,.2);}
.news>ul>li .news-date{width:150px; color:#cd0013; font-size:14px; margin:0 20px 0 0;text-transform: uppercase;display: flex;align-items: center;border-right: 1px #cd0013 solid;padding: 0 15px 0 0;}
.about-news>ul>li .news-date{width:100%; margin:0 0 10px 0;padding: 0; border-right: 0;}
.news>ul>li .news-date i{width:20px;height: 20px; margin: 0 8px 0 0;display: flex;align-items: center;justify-content: center;}
.news>ul>li .news-content{flex: 1; width:100%; font-size:16px; color:#222222; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.about-news>ul>li .news-content{width:100%;}
.news-more{font-size: 13px;text-transform: uppercase;text-align: center;display: flex;justify-content: flex-end;margin: 20px 0 0 0;}
.news-more a{display:table;background: #cd0013;color: #ffffff;border-radius: 30px;padding: 5px 15px;}
.news-more a:hover{background: #000000;}
.news-detail-date{background:#cd0013;color: #ffffff; font-size:14px; margin:0 0 20px 0;text-transform: uppercase;display:inline-flex;align-items: center;border-right: 1px #cd0013 solid;padding: 0 15px 0 0;padding: 6px 15px;border-radius: 5px; font-style: italic;}
.news-detail-date i{width:24px;height: 24px; margin: 0 8px 0 0;display: flex;align-items: center;justify-content: center;filter:grayscale(100) invert(100) brightness(100);}
@media screen and (max-width:767px){
	.news>ul>li a{display:block;padding:10px 15px;}
    .news>ul>li .news-date{width:100%; margin:0 0 10px 0;padding: 0; border-right: 0;}
    .news>ul>li .news-content{width:100%;}
}

/** 永豐特色 **/
.feature{}
.feature>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;border: 1px #dddddd solid;}
.feature>ul>li{padding: 25px;margin:0;width: calc(100%/3);border-right: 1px #dddddd solid;border-top: 1px #dddddd solid;}
.feature>ul>li:nth-child(-n+3){border-top: 0;}
.feature>ul>li:nth-child(3n){border-right: 0;}
.feature>ul>li .feature-num{color: #cd0013;padding:0;margin:-28px 0 0 0;display: table;font-size: 50px; border-top: 5px #cd0013 solid;text-align: center;}
.feature>ul>li .feature-info{}
.feature>ul>li .feature-info h3{padding: 0;margin: 0 0 15px 0;line-height: 1.4;font-size: 20px; color: #000000;font-weight:500;}
.feature>ul>li .feature-info .feature-content{font-size: 16px;color: #222222;}
@media screen and (max-width:767px){
    .feature>ul>li{padding: 20px;width: calc(100%/2);}
    .feature>ul>li:nth-child(-n+3){border-top:  1px #dddddd solid;}
    .feature>ul>li:nth-child(-n+2){border-top: 0;}
    .feature>ul>li:nth-child(3n){border-right:  1px #dddddd solid;}
    .feature>ul>li:nth-child(2n){border-right: 0;}
	.feature>ul>li .feature-num{font-size: 40px;margin:-23px 0 0 0;}
    .feature>ul>li .feature-info h3{font-size: 18px;}
}
@media screen and (max-width:575px){
    .feature>ul>li{padding: 15px;width: calc(100%/1);}
    .feature>ul>li:nth-child(-n+2){border-top:  1px #dddddd solid;}
    .feature>ul>li:nth-child(-n+1){border-top: 0;}
    .feature>ul>li{border-right: 0;}
    .feature>ul>li:nth-child(3n){border-right: 0;}
	.feature>ul>li .feature-num{margin:-18px 0 0 0;}
}

/** 開戶資訊 **/
.open{}
.open>ul{list-style: none;padding: 0;margin: 0;display: block;}
.open>ul>li{padding:15px 0;margin: 0;display: flex;}
.open>ul>li .open-num{width: 66px; height: 66px; border-radius: 100px;background: #cd0013;color: #ffffff;padding: 5px;font-size: 36px;display: flex;align-items: center;justify-content: center;}
.open>ul>li .open-info{flex: 1;padding:20px 30px; position: relative;}
.open>ul>li .open-info:after{content: "";display: block;width: 3px; height: 100%;background: #cd0013;position: absolute;top: 0;left: -33px;}
.open>ul>li .open-info h3{padding: 0;margin: 0 0 15px 0;line-height: 1.4;font-size: 20px; color: #000000;font-weight:500;}
.open>ul>li .open-info .open-content{font-size: 16px;color: #222222;}
.open>ul>li .open-info .open-btn{font-size: 16px;text-transform: uppercase;text-align: center;margin:15px 0 25px 0;}
.open>ul>li .open-info .open-btn i{width: 20px; height: 20px;margin: 0 8px 0 0;}
.open>ul>li .open-info .open-btn a{color: #cd0013;border-radius: 30px;padding: 0;display: flex;}
.open>ul>li .open-info .open-btn a:hover{text-decoration: underline;}
.open>ul>li .open-info .open-note{font-size: 15px;color: #333333;padding:25px 0;margin: 20px 0;position: relative;z-index: 1;}
.open>ul>li .open-info .open-note:after{content: "";display: block;width: 300%;height: 100%;background:rgba(205,0,19,.06);position: absolute;top: 0;left: -100%;z-index: -1;}
.open>ul>li .open-info .open-note h4{padding: 0;margin: 0 0 15px 0;line-height: 1.4;font-size: 17px; color: #222222;font-weight:500;}
.open>ul>li .open-info .open-note>ol{}
.open>ul>li .open-info .open-note>ol>li{}
.open>ul>li .open-icon{width: 140px;position: relative;z-index: 1;height: 100%;padding:20px 10px;}
.open>ul>li .open-icon:after{content: "";display: block;width:80px;height: 80px;background:#f3f3f3;position: absolute;top: 14%;left: 0;z-index: -1;}
@media screen and (max-width:767px){
    .open>ul>li .open-num{width: 60px; height: 60px;font-size: 30px;}
    .open>ul>li .open-info{padding:20px 0 20px 15px; }
    .open>ul>li .open-info h3{font-size: 18px;}
    .open>ul>li .open-info .open-note h4{font-size: 16px;}
    .open>ul>li .open-icon{display: none;}
}

/** 聯絡我們 **/
.contact-body{}
.contact-note{padding:5px 15px; font-weight:400; font-size:14px;background:#cd0013;color: #ffffff;display: table;border-radius: 5px; margin: 0 0 10px 0;}
.contact-dep{padding:30px 0;background: #fff5f5;text-align: center; color: #222222;margin:-3.5vw 0 3.5vw 0;position: relative;z-index: 1;}
.contact-dep:after{content: "";display: block;width: 300%;height: 100%;background: #fff5f5;position: absolute;top: 0;left: -100%;z-index: -1;}
.contact-dep a{color: #222222;}
.star{color: #cd0013;padding: 0 5px;}
@media screen and (max-width:767px){
	.contact-dep{padding: 15px 0; margin:-30px 0 30px 0;}
}

/** 線上開戶 **/
.onlineopen-content{display: flex;}
.onlineopen-content .onlineopen-content-left{flex: 1;margin: 0 3vw 0 0;}
.onlineopen-content .onlineopen-content-right{flex: 1;margin: 0 0 0 3vw;}
.onlineopen-btn{font-size: 18px;text-transform: uppercase;text-align: center;margin:15px 0;}
.onlineopen-btn i{width: 20px; height: 20px;margin: 0 0 0 8px ;}
.onlineopen-btn a{background: #cd0013;padding:5px 15px;border-radius: 5px; display:table;color: #ffffff;}
.onlineopen-btn a:hover{background: #000000;color: #ffffff;}
@media screen and (max-width:767px){
    .onlineopen-content{display:block;}
    .onlineopen-content .onlineopen-content-left{flex: initial;width: 100%; margin: 0 0 50px 0;}
    .onlineopen-content .onlineopen-content-right{flex: initial;width: 100%;margin:0;}
    .onlineopen-btn{font-size: 16px;}
}

/** 表單欄位 **/
label{min-width: 80px;}
.form-box input, .form-box img{vertical-align:middle;}
.opinion-main{display:flex;}
.opinion{flex: 1; display:flex; flex-wrap:wrap; margin:10px 0;overflow:hidden;height: 100%;}
.opinion-left01{width:100%; padding:8px 0; display:flex; align-items:center;}
.input-main-style01{background: #f9f9f9 ;flex:1; width:100%; border:1px #f9f9f9 solid; margin:0; padding:8px 15px; color: #222222; min-height:46.8px;}
.input-main-style02{background: #f9f9f9 ; flex:1; width:100%; border:1px #f9f9f9 solid; margin:0; padding:8px 15px;color: #222222;min-height:46.8px;}
.input-main-style03{background: #f9f9f9 ; flex:1; width:100%; border:1px #f9f9f9 solid; margin:5px 0 0 0; padding:8px 15px;  color: #222222; min-height:46.8px;}
.input-main-select{background:none; flex:1; width:100%; border:0; margin:0; padding:0;  color: #222222; display:flex; flex-wrap:wrap;}
.input-main-select select{background: #f9f9f9 ; width:calc(50% - 2.5px); margin-right:5px; padding:8px 15px; line-height:1.8; border:0; color: #222222; min-height:46.8px;}
.input-main-select select:nth-child(2){margin-right:0;}
.select-style{background:#8a6e0c; color:#ffffff; line-height:20px;padding:8px 15px; border:0;}
.input-style01{background: #f9f9f9 ; flex:1; width:100%; border:0; margin:0;padding:8px 15px; color: #222222; min-height:46.8px;}
input:disabled{background-color:#fff; color:#2d7fb9; cursor:no-drop;}
.btn.openlink{margin:3px 0; padding:0 10px; text-align:center; line-height:1.5; font-weight:bold; background-color:#2d7fb9; color:#fff; border-radius:5px;}
.btn.openlink:hover{background-color:#ffbe00;}
img.code{width:100px; height:46.8px; margin:0; vertical-align:middle; display:inline-block;}
.form-note{font-size: 14px; color: #666666;width: 100%;margin: 8px 0 0 0;}
.input-main-style01:focus,.input-main-style02:focus,.input-main-style03:focus,.input-main-select select:focus{background: #ffffff;border: 1px #cd0013 solid;}
@media screen and (max-width:767px){
	.opinion-main{display:block;}
	.opinion{display:block;}
	.opinion-left01{width:100%;}
	.input-main-style02{width:calc(100% - 108px); display:inline-block;}
}

/** 按鈕 **/
.cart-btn{ text-align:center; margin-top:30px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }
.cart-btn i{margin: 0 8px 0 0;}
.btn-send{font-size:16px;}
a.btn-send{background: #cd0013; padding:6px 20px; text-align:center; font-size:16px; color:#ffffff; min-width:100px; margin:5px; border-radius: 5px;}
a.btn-send:hover{background:#000000;color:#ffffff;}
a.btn-reset{background:#666666; padding:6px 20px; text-align:center; font-size:16px; color:#ffffff; min-width:100px; margin:5px;border-radius: 5px;}
a.btn-reset:hover{background:#222222; color:#ffffff; }
a.btn-send-over{background:#7ea2c5; padding:6px 20px; text-align:center; font-size:16px; color:#fff; min-width:100px; margin:5px; border-radius: 5px;}
a.btn-send-over:hover{background:#96b9dc; border:2px solid #96b9dc;}
a.btn-forget{padding:0; text-align:center; font-size:14px; color:#cd0013; margin:0 0 0 15px;}
a.btn-forget:hover{text-decoration: underline;}
@media screen and (max-width:767px){
	a.btn-send{padding:6px 15px; width:calc(50% - 10px);margin:5px;}
	a.btn-reset{padding:6px 15px; width:calc(50% - 10px);margin:5px;}
	a.btn-send-over{padding:6px 15px; width:calc(50% - 10px);margin:5px;}
}

/** 送出訊息 **/
.jump-window-box{max-width:500px; margin:0 auto; border:1px #ccc solid; padding:20px; border-radius:5px;}

/** 頁次 **/
.page{font-size:14px ; color:#222222; text-align:center; clear:both; margin:30px 0 0 0;}
.page a{background:#cd0013; color:#ffffff; padding:4px 10px;display: inline-block;margin: 5px 0;}
.page a:hover{background:#000000; color:#ffffff;}
.page br{display:none;}
@media screen and (max-width:640px){
	.page br{display:block;}
}

/** 下版 **/
.f-note-main{background: #f3f3f3 url("../images/note_bg.png");padding: 3.5vw 15px;}
.f-note{max-width:1280px; margin:0 auto;}
.f-note .f-note-title{font-size: 15px; color: #cd0013;margin: 0 0 15px 0;font-weight: 500;}
.f-note .f-note-info{font-size: 14px; color: #000000;font-weight: 500;}
.f-note .f-note-info>ol{list-style: decimal-leading-zero;padding: 0;margin: 0 0 0 36px;}
.f-note .f-note-info>ol>li{padding: 0;margin:8px 0;}
footer{background:#000000;color: #ffffff;padding: 0 15px;}
footer .footer{max-width:1280px; margin:0 auto;}
footer .footer .f-logo-info{display: flex;padding: 3.5vw 0 ;}
footer .footer .f-logo-info .f-logo{width: 153px;margin: 10px 0 ;}
footer .footer .f-logo-info .f-logo-name{width: auto;font-size: 40px;color: #ffffff;margin: 20px 6vw 0 10px;font-weight: 600;line-height: 1;}
footer .footer .f-logo-info .f-info{flex: 1;}
footer .footer .f-logo-info .f-info>ul{list-style: none;padding: 0;margin: 0;}
footer .footer .f-logo-info .f-info>ul>li{padding: 0;margin:10px 0;display: flex;font-size: 15px; color: #ffffff;}
footer .footer .f-logo-info .f-info>ul>li .f-icon{display: flex;align-items: center;justify-content: center;width: 30px;height: 30px; background: #ffffff; padding: 6px;margin: 0 15px 0 0;border-radius: 30px;}
footer .footer .f-logo-info .f-info>ul>li .f-icon img{filter:brightness(0);}
footer .footer .f-logo-info .f-info>ul>li .f-content{flex: 1;padding: 3px 0;}
footer .footer .f-logo-info .f-info>ul>li .f-content a{display: inline-block; color: #ffffff;}
footer .footer .f-logo-info .f-info>ul>li .f-content a:hover{color: #cd0013;}
footer .footer .f-logo-info .f-info>ul>li .f-content span{font-size: 13px;display: inline-block;}
footer .footer .f-number-copyright{border-top: 1px #999999 solid;display: flex;padding:8px 0;align-items: center;}
footer .footer .f-number-copyright .f-number{font-size: 14px;flex: 1;margin: 0 15px 0 0;}
footer .footer .f-number-copyright .copyright{font-size: 12px; color: #999999;line-height: 1.2;width: auto;text-align: right;}
footer .footer .f-number-copyright .copyright a{display: block;color: #999999;}
footer .footer .f-number-copyright .copyright a:hover{color: #cd0013;}
@media screen and (max-width:1100px){
	footer .footer .f-logo-info{flex-wrap: wrap;}
    footer .footer .f-logo-info .f-logo{width: 130px;margin: 0 0 20px 0;}
    footer .footer .f-logo-info .f-logo-name{font-size: 30px;margin: 10px 0 20px 10px;}
    footer .footer .f-logo-info .f-info{flex: initial;width: 100%;}
    footer .footer .f-number-copyright{display: block;text-align:center;}
    footer .footer .f-number-copyright .f-number{flex: initial;width: 100%; margin: 0 0 5px 0;}
    footer .footer .f-number-copyright .copyright{text-align:center;display: flex;justify-content: center;}
    footer .footer .f-number-copyright .copyright a{padding:  0 0 0 10px;}
}
@media screen and (max-width:767px){
    .f-note-main{padding: 30px 15px;}
    footer .footer .f-logo-info{padding:30px 0 ;}
}

/** top **/
#scrollUp {bottom: 80px;right: 0;background: url("../images/top-icon.svg") no-repeat top 12px center;background-size: 18px; font-size: 14px; color: #cd0013;padding: 30px 15px 8px 15px;display: block;width: 60px;height: 60px;text-align: center;text-transform: uppercase;letter-spacing: 0px;font-weight: bold;}
#scrollUp:hover{background:  url("../images/top-icon.svg") no-repeat top 12px center;background-size: 18px;}
@media screen and (max-width:767px){
	#scrollUp {bottom: 20px;background:  url("../images/top-icon.svg") no-repeat top 10px center;background-size: 14px; padding: 25px 12px 6px 12px; font-size: 12px;width:50px;height:50px;}
    #scrollUp:hover{background:  url("../images/top-icon.svg") no-repeat top 10px center;background-size:14px;}
}