@charset "utf-8";

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

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

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

/** font **/
@import url(Noto+Sans+TC-Roboto.css);
@import url(Varela+Round.css);

*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html{width:100%; height:auto;}
body{background:#f9f9f9; margin:0; padding:0; width:100%; height:auto; font-size:18px;line-height: 1.6;font-family:"Roboto", "Noto Sans TC", sans-serif;word-break: break-word;letter-spacing: .5px; 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;min-width: 600px;}
@media screen and (max-width:1024px){
    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;}

/** 手機選單、選單 色塊-變色 **/
.b-color, .slicknav_menu{}
.slicknav_icon-bar{background-color:#222222;}
.b-color>li:hover, .b-color>li>ul>li>a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover{background:#003467;color: #ffffff;}
.border-color{border-left:7px #A0A0A0 solid;}
.slicknav_nav .slicknav_arrow{font-family:Arial;position: absolute;top: 17px; right: 15px; font-size: 12px;}

/** 浮動icon **/
.float-icon{position: fixed;width: 60px; height: auto;bottom: calc(10% + 60px);right: 0;z-index: 10000;transition: all 0.5s ease 0s;}
.float-icon ul{list-style: none;padding: 0;margin: 0;display: block;}
.float-icon ul li{padding: 0;margin:0;display: block;width: 60px; height: 60px;}
.float-icon ul li img{filter: brightness(0) invert(1);transition: all 0.5s ease 0s;}
.float-icon ul li a{display: block;width: 60px; height: 60px;background: #003467;padding: 12px;border-bottom: 1px #ffffff solid;transition: all 0.5s ease 0s;}
.float-icon ul li:last-of-type a{border-bottom:0;}
.float-icon ul li a:hover{background: #ffffff;box-shadow: 0 0 10px 0 rgba(0,0,0,.2);position: relative;z-index: 2;transition: all 0.5s ease 0s;}
.float-icon ul li a:hover img{filter: brightness(1);transition: all 0.5s ease 0s;}
@media screen and (max-width:1024px){
	.float-icon{width: 46px;bottom: calc(8% + 46px);}
    .float-icon ul li{width: 46px; height: 46px;}
    .float-icon ul li a{width: 46px; height: 46px;padding: 10px;}
}

/** 上版 **/
header{background:#ffffff;box-shadow: 0 0 15px 0 rgba(0,0,0,.2);position: fixed;top: 0;left: 0;width: 100%;z-index: 10000;border-top: 6px #003467 solid;}
.head-tool{display: flex;justify-content: flex-end;align-items: center;}
.lang-main{position: relative;width: 120px;padding: 0 ; cursor: pointer;background: #0f5aa3; transition: all 0.5s ease 0s;margin: 0 0 0 10px;border-radius: 3px;}
.lang-main .lang{color: #ffffff;font-size: 16px;display: flex;align-items: center;justify-content: center; padding: 9.21px 15px;width: 120px;}
.lang-main .lang .lang-icon{width: 22px;display: flex;align-items: center;justify-content: center;}
.lang-main .lang .lang-content{width: auto;margin: 0 10px;}
.lang-main .lang .lang-arrow{width: 10px;}
.lang-main>ul{list-style: none;padding: 0;margin: 0; width: 100%; display: none;position: absolute;top: 44px;left: 0;background: #222222;z-index: 10001;border-radius: 3px;overflow: hidden;}
.lang-main>ul>li{border-bottom: 1px #ffffff solid;padding: 0;margin: 0;text-align: center;font-size: 15px;}
.lang-main>ul>li:last-of-type{border-bottom:0;}
.lang-main>ul>li a{display: block;padding: 8px 18px;color: #ffffff;}
.lang-main>ul>li a:hover{background:#003467;}
.head-main{padding: 0 5.25%;}
.head{display: flex;align-items: center;position: relative;}
.head .logo{width: 222px; height:auto;margin: 0 4% 0 0;transition: all .5s ease 0s;}
.head .logo a{color:#000000;}
.head .logo img{width:100%; height:auto;}
.search-menu{flex: 1;}
.header-height .head .logo{width: 110px;transition: all .5s ease 0s;}
.header-height .lang-main{position: absolute;top: 13px;right: 0;z-index: 10000;transition: all .5s ease 0s;}
@media screen and (max-width:1500px){
    .head-main{padding: 0 15px;}
}
@media screen and (max-width:1200px){
    .head .logo{margin: 0 20px 0 0;}
}
@media screen and (max-width:1024px){
    header{box-shadow: 0 0 0 0 rgba(0,0,0,0);border-top: 0;}
    .lang-main{width: 90px;position: absolute;top: 14px;right: 50px;}
    .lang-main .lang{font-size: 14px;padding:8.81px 10px;width: 90px;height: 40px;}
    .lang-main .lang .lang-icon{width: 18px;}
    .lang-main .lang .lang-content{margin: 0 8px 0 5px;}
    .lang-main>ul{top: 40px;}
    .head .logo{margin: 0; position: fixed;top: 12px;left: 15px;width: 99.9px;}
    .header-height .head .logo{width: 99.9px;}
    .header-height .lang-main{top: 14px;right: 50px;}
}
@media screen and (max-width:374px){
    .lang-main{width:84px;}
    .lang-main .lang{padding: 8.81px 6px;width:84px;}
}

/** 搜尋 **/
.search-icon{width: 44px; height: 44px; background:#003467;border-radius: 3px;padding: 10px;display: flex;align-items: center;justify-content: center;cursor: pointer;display: none;transition: all .5s ease 0s;}
.search-icon img{width:22px; height: 22px;}
.search-icon .search-open{display:flex;}
.search-icon .search-close{display:none;}
.show-search-icon .search-open{display: none;}
.show-search-icon .search-close{display: flex;}
.show-search-icon .search-close img{}
.search-content-main{padding: 0; background: rgba(0,0,0,0);width: 100%;position: inherit;top:inherit;left: inherit;border:0;opacity: 1;visibility: visible;transition: all .5s ease 0s;z-index: 9999;display: flex;justify-content: flex-end;margin:17px 0;}
.search-content-main:after{display: none;}
.search-content{width: 100%;max-width: 800px; border-radius: 3px;overflow: hidden;}
.search{display: flex;}
.search-input{flex: 1;}
.search-input input[type="text"]{border: 0; background:#eeeeee;padding: 9px 20px;width: 100%;min-height: 44px;color: #222222;font-size: 16px;transition: all .5s ease 0s;}
.search-input input[type="text"]:focus{}
.search-btn{width: 44px;}
.search-btn a{display: flex;align-content: center;justify-content: center;border: 0;border-left: 0; width: 100%;padding: 10px;background:#003467 ;min-height: 44px;transition: all 0.5s ease 0s;}
.search-btn a:hover{transition: all 0.3s ease 0s;}
.search-input input::-webkit-input-placeholder{color:#999999;transition: all .5s ease 0s;}
.search-input input::-moz-placeholder{color:#999999;transition: all .5s ease 0s;}
.search-input input:-ms-input-placeholder{color:#999999;transition: all .5s ease 0s;}
.search-input input:-moz-placeholder{color:#999999;transition: all .5s ease 0s;}
.header-height .search-icon{display: flex;position: absolute;top: 13px;right: 130px;z-index: 10000;transition: all .5s ease 0s;}
.header-height .search-content-main{padding: 15px 0;position: absolute;top:0;left: 0;opacity: 0;visibility: hidden;margin: 0;overflow: inherit; transition: all .5s ease 0s;}
.header-height .search-content-main:after{content: "";display: block; background: #ffffff;width: 300%;height: 100%;position: absolute;top: 0;left: -100%;z-index: -1;border-bottom: 1px #eeeeee solid;border-top: 1px #eeeeee solid;}
.header-height .search-slow{top:70px;opacity: 1;visibility: visible;transition: all .5s ease 0s;}
.header-height .search-slow .search-content{max-width: inherit;}
@media screen and (max-width:1024px){
    .search-icon{display: flex;position: absolute;top: 14px;right: 150px;z-index: 10000;width: 40px; height: 40px;padding: 8px;}
    .search-icon img{width:20px; height: 20px;}
    .search-content-main{padding: 10px 0;position: absolute;top:0;left: 0;opacity: 0;visibility: hidden;margin: 0;overflow: inherit; transition: all .5s ease 0s;}
    .search-content-main:after{content: "";display: block; background: #ffffff;width: 300%;height: 100%;position: absolute;top: 0;left: -100%;z-index: -1;border-bottom: 1px #eeeeee solid;border-top: 1px #eeeeee solid;}
    .search-slow{top:62px;opacity: 1;visibility: visible;}
    .search-slow .search-content{max-width: inherit;}
    .header-height .search-icon{top: 14px;right: 150px;}
    .header-height .search-slow{top:62px;}
}
@media screen and (max-width:374px){
    .search-icon{right: 144px;}
    .header-height .search-icon{right: 144px;}
}

/** 主選單與下拉 **/
nav{border-top: 1px #eeeeee solid;}
.menu{padding:0; list-style:none; position:relative; margin:0; display:flex;}
.menu>li{width: auto;color:#222222;  text-align:center;  cursor:pointer; padding:0; margin:0;}
.menu>li>a{color:#222222; display:block; padding:15.6px 16px; margin:0;position: relative;z-index: 1;}
.menu>li>a:after{content: "";display: block;width: 100%;height: 0;background: #003467;position: absolute;top: 0;left: 0;z-index: -1; transition: all .5s ease 0s;}
.menu>li>a:hover{color: #ffffff;}
.menu>li>a:hover:after{height: 100%;transition: all .5s ease 0s;}
.menu>li.sub>ul.sub-menu{background:#ffffff; display:none; position:static; z-index:999; margin:0; padding:0; border-radius:0; overflow:hidden;max-height: calc(50vh - 190px);overflow-y: auto;border: 1px #dddddd solid;font-family: "Varela Round", "Noto Sans TC", sans-serif;}
.menu>li.sub:hover ul.sub-menu{position:absolute; display:flex;flex-wrap: wrap; width:100%; left:calc(50% - 50%); top:59.98px;}
.menu>li.sub>ul.sub-menu>li{display:block;border-right: 1px #dddddd solid;font-size: 16px;width: calc(100%/4);}
.menu>li.sub>ul.sub-menu>li:nth-child(4n){border-right: 0;}
.menu>li.sub>ul.sub-menu>li>a{display:flex;align-items: center;justify-content: center; color:#666666; padding:15px 10px; margin:0;height: 100%;}
.menu>li.sub>ul.sub-menu>li>a:hover{background: #003467;color: #ffffff;}
.header-height nav{margin: 0 64px 0 0;border-top:0;}
.header-height .menu>li>a{ padding:20.6px 16px; }
.header-height .menu>li.sub>ul.sub-menu{max-height: calc(50vh - 121px);}
.header-height .menu>li.sub:hover ul.sub-menu{top:69.98px;}
@media screen and (max-width:1200px){
    .menu>li{font-size: 17px;}
    .menu>li>a{padding:16.41px 12px;}
    .menu>li.sub:hover ul.sub-menu{top:60px;}
    .menu>li.sub>ul.sub-menu>li{width: calc(100%/3);}
    .menu>li.sub>ul.sub-menu>li:nth-child(4n){border-right: 1px #dddddd solid;}
    .menu>li.sub>ul.sub-menu>li:nth-child(3n){border-right: 0;}
    .header-height .menu>li>a{ padding:21.41px 12px 21.41px 12px; }
    .header-height .menu>li.sub:hover ul.sub-menu{top:70px;}
}
@media screen and (max-width:1100px){
    .menu>li>a{padding:16.41px 8px;}
    .header-height .menu>li>a{ padding:21.41px 8px 21.41px 8px; }
}
@media screen and (max-width:1024px){
    nav{border-top: 0;}
	#menu{display:none;}
	.slicknav_menu{display:block;background: #ffffff;position: fixed;top: 0px;left: 0;width: 100%;z-index: 10000;box-shadow: 0 0 15px 0 rgba(0,0,0,.2);border-top: 6px #003467 solid;}
}

/** edm輪播 **/
.edm-main{background:#f9f9f9; position:relative;padding: 144.98px 0 0 0;}
.edm-main img{ width:100%;height: 100%; max-width: 100%;max-height: 100%;object-position: center;object-fit: cover;}
.edm{}
.edm .swiper-horizontal>.swiper-pagination-bullets, .edm .swiper-pagination-bullets.swiper-pagination-horizontal, .edm .swiper-pagination-custom, .edm .swiper-pagination-fraction{bottom: 4%;}
.edm-photo {position: relative;width: 100%;padding-top: 41.66666%; overflow: hidden;}
.edm-photo iframe,.edm-photo img,.youtube-container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.edm-photo img {display: block;}
@media screen and (max-width:1200px){
    .edm-main{padding: 145px 0 0 0;}
}
@media screen and (max-width:1024px){
    .edm-main{padding: 62px 0 0 0;}
}

/** 配置 **/
.warpper{}
.main{}
.photo-main{overflow: hidden;}
.photo{background-color:#ffffff;background-position: center center;background-repeat: no-repeat;background-size: contain;transform:scale(1);transition: all .5s ease 0s;}
.i-title-main{text-align: center;margin: 0 0 25px 0;text-transform: uppercase;}
.i-title-main .i-title{font-size: 40px;font-weight: 700;color: #222222;letter-spacing: 2px;}
.i-title-main .i-title span{color: #003467;}
.more{display: flex;justify-content: center;margin: 4.5% 0 0 0;}
.more a{display: flex;align-items: center;justify-content: center; color: #222222;background: #eeeeee;padding: 5px 15px;position: relative;width: 260px; height: 68px;}
.more a:before{content: "";width: 8px; height: 8px; background: #003467;position: absolute;top: calc(50% - 4px);left: -4px;transition: all .5s ease 0s;}
.more a:after{content: "";width: 8px; height: 8px; background: #003467;position: absolute;top: calc(50% - 4px);right: -4px;transition: all .5s ease 0s;}
.more a:hover{color: #003467;}
.more a:hover:before{height: 4px;top: calc(50% - 2px); width: 10%;transition: all .5s ease 0s;}
.more a:hover:after{height: 4px; top: calc(50% - 2px);width: 10%;transition: all .5s ease 0s;}
@media screen and (max-width:1024px){
    .i-title-main{margin: 0 0 15px 0;}
    .i-title-main .i-title{font-size: 34px;}
    .more{margin: 20px 0 0 0;}
    .more a{width: 200px; height: 60px;}
    .more a:before{width: 6px; height: 6px; top: calc(50% - 3px);left: -3px;}
    .more a:after{width: 6px; height: 6px; top: calc(50% - 3px);right: -3px;}
    .more a:hover:before{height: 2px;top: calc(50% - 1px);}
    .more a:hover:after{height: 2px; top: calc(50% - 1px);}
}

/** 首頁最新消息 **/
.i-news-main{padding: 5% 15px;}
.i-news{max-width: 1267px;margin: 0 auto;}
.i-news>ul{list-style: none;padding: 0;margin: 0;}
.i-news>ul>li{padding: 0;margin: 0;width: 100%;border-bottom: 1px #dddddd solid;}
.i-news>ul>li a{display: flex;align-items: center; padding: 15px;}
.i-news>ul>li a:hover{background: #eeeeee;}
.i-news>ul>li .i-news-date{width: 150px;background: #003467;font-size: 16px; color: #ffffff;border-radius: 3px; padding: 5px 10px;text-transform: uppercase;display: flex;align-items: center;justify-content: center;}
.i-news>ul>li h3{flex: 1;margin: 0 4%;font-size: 20px; color: #333333;font-weight: 400;line-height: 1.6;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.i-news>ul>li .i-news-more{width: 50px;height: 50px; display: flex;align-items: center;justify-content: center; border: 1px #999999 solid;border-radius: 50px; padding: 17.5px;background: #ffffff;transition: all .5s ease 0s;}
.i-news>ul>li .i-news-more img{filter: grayscale(1) opacity(.6);transition: all .5s ease 0s;}
.i-news>ul>li:hover .i-news-more {border: 1px #003467 solid;transition: all .5s ease 0s;}
.i-news>ul>li:hover .i-news-more img{filter: grayscale(0);transition: all .5s ease 0s;}
@media screen and (max-width:1024px){
    .i-news-main{padding: 40px 15px;}
    .i-news>ul>li .i-news-date{width: 140px;font-size: 15px; }
    .i-news>ul>li h3{font-size: 18px;margin: 0 20px;}
    .i-news>ul>li .i-news-more{width: 44px;height: 44px;padding: 16px;}
}
@media screen and (max-width:767px){
    .i-news>ul>li a{flex-wrap: wrap;}
    .i-news>ul>li .i-news-date{margin: 0 0 10px 0;}
    .i-news>ul>li h3{flex:initial;width: calc(100% - 44px - 20px);margin: 0 20px 0 0;-webkit-line-clamp: 2;}
}

/** 首頁合作品牌 **/
.i-brand-main{padding:0;background: #ffffff;}
.i-brand{}
.i-brand>ul{list-style: none;padding: 0;margin:20px 0 0 0;display: flex;flex-wrap: wrap;}
.i-brand>ul>li{padding: 0;margin: 0;width: calc(100%/10);}
.i-brand>ul>li a{display: block;position: relative;}
.i-brand>ul>li a:hover{}

/** 首頁產品介紹 **/
.i-pro-main{padding: 5% 15px;background:#003467 url("../images/pro_bg.png")no-repeat center;background-size: cover;}
.i-pro-main .i-title-main .i-title{color: #ffffff;}
.i-pro{max-width: 1536px;margin: 0 auto;}
.i-pro>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: center;}
.i-pro>ul>li{padding: 0;margin: 10px;width: calc(100%/5 - 20px);background: #f9f9f9;border: 1px #dddddd solid;position: relative;}
.i-pro>ul>li:hover{border: 1px #003467 solid;}
.i-pro>ul>li .photo-main{position: relative;}
.i-pro>ul>li button.i-pro-cart-btn{position: absolute;bottom: -44.8px;left: 0; background: #003467;font-size: 18px; text-align: center;border: 0;color: #ffffff;width: 100%;padding: 8px 15px;transition: all .5s ease 0s;}
.i-pro>ul>li button.i-pro-cart-btn:hover{background: #fa800a;}
.i-pro>ul>li:hover button.i-pro-cart-btn{bottom: 0;transition: all .5s ease 0s;}
.i-pro>ul>li .i-pro-content{padding: 20px;text-align: center;}
.i-pro>ul>li .i-pro-content h3{padding: 0;margin: 0;font-size: 18px; color: #222222;line-height: 1.6;font-weight: 400;}
.i-pro>ul>li .i-pro-content .i-pro-info{font-size: 16px; color: #666666;margin: 4px 0 0 0;letter-spacing: 0;}
.cart-message {width: 250px; display: none;position: fixed;bottom:50%;right: 50%;transform: translateX(50%) translateY(50%);background-color: rgba(0,0,0,.8);color:#ffffff;padding: 15px;border-radius: 3px;z-index: 10000;}
.cart-message .cart-message-content {display: flex;justify-content: center;}
.cart-message .cart-message-content i{width: 50px;height: 50px;display:flex;align-items: center;justify-content: center; margin: 0 10px 0 0;background: #fa800a;padding: 10px;border-radius: 50px;}
.cart-message .cart-message-content i img{width:30px;height: 30px;}
.cart-message .cart-message-content .cart-message-info{width: auto; padding: 10px 0;display:flex;align-items: center;}
@media screen and (max-width:1024px){
    .i-pro-main{padding: 40px 15px;}
    .i-pro>ul>li{margin: 10px;width: calc(100%/3 - 20px);}
    .i-pro>ul>li .i-pro-content{padding: 15px;}
    .i-pro>ul>li .i-pro-content h3{font-size: 17px;}
    .i-pro>ul>li .i-pro-content .i-pro-info{font-size: 15px; }
}
@media screen and (max-width:767px){
    .i-pro>ul>li{width: calc(100%/2 - 10px);margin: 5px;}
}
@media screen and (max-width:575px){
    .i-pro>ul>li{padding: 0 0 45px 0;}
    .i-pro>ul>li .i-pro-content{padding: 10px;}
}
@media screen and (max-width:374px){
    .i-pro>ul>li{width:100%;margin: 5px 0;}
}

/** 內頁banner **/
.inside-banner{ padding:calc(4% + 144.98px) 0 4% 0;position: relative;}
.inside-banner:before{content: "";display: block;width: 1px; height: 15%;background: #ffffff;position: absolute;bottom: 0;left: calc(50% - .5px);}
.inside-banner:after{content: "";display: block;width: 100%;height: 100%;background: rgba(0,0,0,.2);position: absolute;top: 0;left: 0;z-index: 1; }
.inside-banner .banner-title-main{max-width: 1536px;margin: 0 auto; font-size:36px; color:#ffffff; padding:0;text-align: center;position: relative;z-index: 2;}
.inside-banner .banner-title-main a{display: block;}
.inside-banner .banner-title{font-size: 40px;font-weight: 700;color: #ffffff;margin: 0;letter-spacing: 2px;padding:5px 25px 5px 33px;border-radius: 3px; line-height: 1.6;text-shadow: 0 0 5px rgba(0,0,0,.8);text-transform: uppercase;}
@media screen and (max-width:1200px){
    .inside-banner{ padding:calc(4% + 145px) 0 4% 0;}
}
@media screen and (max-width:1024px){
    .inside-banner{ padding:calc(20px + 62px) 0 20px 0;}
    .inside-banner:before{height: 20px;}
    .inside-banner .banner-title{font-size: 34px;}
}

/** Breadcrumb **/
nav[aria-label="breadcrumb"]{padding: 10px 15px;font-size: 14px;background: #ffffff;}
.breadcrumb{display:flex; flex-wrap:wrap; width:100%; max-width: 1536px;margin: 0 auto;  padding:0; list-style:none; background-color:transparent; border-radius:0;}
.breadcrumb-item{padding-left:0.5rem;}
.breadcrumb-item + .breadcrumb-item::before{display:inline-block; padding-right:0.5rem;color: #444444; content:"/";}
.breadcrumb-item a{display: inline-block;text-decoration:none; color: #444444;}
.breadcrumb-item a:hover{color:#003467; text-decoration:none;}
.breadcrumb-item.active{color: #444444;}
.fa-home{color:#003467;}

/** 內頁架構 **/
.content-body{max-width:1536px; margin:0 auto; padding:40px 3px;}
.content-body02{max-width: 1267px;}
.page-title{font-size:28px; color:#222222; padding:8.5px 0; margin:0 0 20px 0;position: relative;line-height: 1.5;}
.page-title:after{content: "";display: block;width: 56px; height: 1px ;background: #222222;position: absolute;bottom: 0;left: 0;}
.page-main{ color:#222222;}
.page-main a{display: inline-block;color:#222222;text-decoration: underline;}
.page-main a:hover{color: #fa800a;}
.font-title001{font-size:22px;background:#003467;color: #ffffff; font-weight: 400;margin:30px 0 20px 0;padding: 8px 20px;border-radius: 3px;line-height: 1.6;display: table;}
.font-title001 span{font-size:20px;display: inline-block;}
.font-title001:first-of-type{margin:0 0 20px 0;}
.font001{font-size: 22px;color: #003467;font-weight: 500;padding: 0;margin: 30px 0 15px 0;line-height: 1.6;position: relative;}
.font001:first-of-type{margin:0 0 15px 0;}
.font002{font-size:18px;background: #0f5aa3; color:#ffffff;font-weight: 500;padding:5px 15px;border-radius: 3px;display: table;margin:25px 0 10px 0;line-height: 1.6;}
.font002 span{font-size:30px;}
.font003{font-size:20px; color:#003467;font-weight: 500;padding: 0;margin:30px 0 15px 0;line-height: 1.6;}
.font004{font-size:20px; color:#003467;font-weight: 500; margin:20px 0 10px 0;padding: 0 0 0 20px;line-height: 1.6;position: relative;}
.font004:before{content: "";display: block;width: 10px; height: 10px; background:#003467;border-radius: 20px;position: absolute;top: 11px;left: 1px;border: 2px #ffffff solid;box-shadow: 0 0 0 1px #003467;}
@media screen and (max-width:1024px){
    .page-title{font-size:22px; }
    .page-title:after{width: 44px; }
    .font-title001{font-size:20px; }
    .font001{font-size:18px; }
    .font002{font-size:16px;}
    .font002 span{font-size:24px;}
    .font003{font-size:17px;}
    .font004{font-size:18px;}
    .font004:before{top: 8px;}
}

/** 左邊分類 **/
.left-menu-title{font-size: 30px ;color: #222222;font-weight: 700;padding: 0;margin:0 0 15px 0;line-height: 1.4;}
.in-left-menu>ul{margin:0; padding:0; list-style:none;}
.in-left-menu>ul>li{border-bottom:1px #dddddd solid; font-size:18px; color:#222222; padding:0;position: relative;}
.in-left-menu>ul>li>a{color:#222222;display:block; padding:15px 45px 15px 15px; position: relative;}
.in-left-menu>ul>li>a:after{content: "";display: block;width: 30px; height: 30px;background:  #003467 url("../images/arrow-right.svg")no-repeat center center;background-size: 8px; position: absolute;top: 13px;right: 30px;border-radius: 100px;opacity: 0;visibility: hidden; transition: all 0.5s ease 0s;}
.in-left-menu>ul>li>a:hover:not(.current){color: #003467;}
.in-left-menu>ul>li>a:hover:not(.current):after{right: 0px;opacity: 1;visibility: visible;transition: all 0.5s ease 0s;}
.in-left-menu>ul>li>.current{color: #fa800a ;position: relative;}
.in-left-menu>ul>li>.current:after{content: "";display: block;width: 30px; height: 30px;background: #fa800a  url("../images/arrow-right.svg")no-repeat center center;background-size: 8px; position: absolute;top: 13px;right: 0;border-radius: 100px;opacity: 1;visibility: visible;}
.in-left-menu>ul>li ul{margin:0; padding:0; list-style:none;background: #ffffff;}
.in-left-menu>ul>li ul li{border-bottom:1px #cccccc dotted; padding:0;margin: 0; position: relative;}
.in-left-menu>ul>li ul li:last-of-type{border-bottom:0;}
.in-left-menu>ul>li ul li:before{content: "";display: block;width: 4px; height: 4px; background: #444444;position: absolute;top: 20px;left: 20px;}
.in-left-menu>ul>li ul li a{font-size:16px; color:#444444; display:block;padding:10px 15px 10px 35px;}
.in-left-menu>ul>li ul li a:hover{background:#003467;color: #ffffff;}
.in-left-menu>ul>li ul li:hover:before{background: #ffffff;}
.in-left-menu>ul>li>ul>li ul{margin:0 ; padding:0; list-style:none;background: #ebf1f7;}
.in-left-menu>ul>li>ul>li ul li{border-bottom:1px #cccccc dotted; padding:0;margin: 0; position: relative;}
.in-left-menu>ul>li>ul>li ul li:last-of-type{border-bottom:0;}
.in-left-menu>ul>li>ul>li ul li:before{content: "";display: block;width: 6px; height: 1px; background: #666666;position: absolute;top: 20px;left: 20px;}
.in-left-menu>ul>li>ul>li ul li a{font-size:15px; color:#666666; display:block;padding:10px 15px 10px 35px;}
.in-left-menu>ul>li>ul>li ul li a:hover{background: none; color:#003467;}
.in-left-menu>ul>li>ul>li ul li:hover:before{ background: #003467;}
.left-beautify img{width:100%; height:auto; margin-top:0px;}
.m_classLink{display:none;}
/* 只有當有子菜單時，這個 class 才會被添加 */
/*
.in-left-menu>ul>li.has-children .arrow {display: inline-block; position: absolute;top: 9px;right:15px;z-index: 1;color: #003467;font-size: 20px;}
.in-left-menu>ul>li>ul>li.has-children .arrow {top: 17px;}
.in-left-menu>ul>li.has-children:hover .arrow{color: #003467;}
.m_classLink ul li.has-children .arrow {display: inline-block; margin-left: 5px; position: absolute;top: 18px;right:15px;color: #222222;font-size: 10px;}
.m_classLink ul li>ul>li.has-children .arrow {top: 16px;}
*/
@media screen and (max-width:991px){
	.classBox{padding:0;}
	ul.classLink{display:none;}
	.m_classLink{display:block; position:relative; background-color:#ffffff; border:1px solid #003467;}
	.m_classLink a.main{display:block; background:none; font-size:16px; color:#222222; position:relative; padding:10px 60.59px 10px 15px;}
	.m_classLink a.main i{display:block; font-size:16px; background:#003467; width:45.59px; height:100%; text-align:center; color:#FFF; line-height:45.59px; position:absolute; right:0; top:0;}
	.m_classLink a.main b{font-weight: 400;}
	.m_classLink ul{display:none; margin:0; padding:0; list-style:none; width:100%; background:#FFF; border:1px solid #003467; position:absolute; left:0; top:100%; z-index:99; box-sizing:border-box;}
	.m_classLink ul li{margin:0; padding:0;}
	.m_classLink ul li a{display:block; padding:10px 15px; border-top:1px solid #003467; font-family:"Microsoft JhengHei", "新細明體", sans-serif; font-size:16px; color:#222;}
	.m_classLink ul li:first-child a{border:none;}
	.m_classLink ul li a:hover{background:#f3f3f3;color: #003467;;}
	.m_classLink ul li ul{display:block; margin:0; padding:0; list-style:none; width:100%;border:0; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;background: #f9f9f9;}
    .m_classLink ul li ul>li{}
    .m_classLink ul li ul>li a{border-top:1px dashed #444444;font-size:15px; color:#444444;}
    .m_classLink ul li ul>li a:hover{background:#003467;color: #ffffff;}
    .m_classLink ul li ul>li ul{margin: 0;width:100%;background: #ebf1f7;}
    .m_classLink ul li ul>li ul li{position: relative;}
    .m_classLink ul li ul>li ul li:before{content: "";display: block;width: 6px; height: 1px; background: #666666;position: absolute;top: 20px;left: 0;}
    .m_classLink ul li ul>li ul li a{font-size:14px; color:#666666;}
    .m_classLink ul li ul>li ul li a:hover{background: none; color:#003467;}
	.left-menu-title{display:none;}
    .in-left-menu{padding: 0 0 20px 0;}
	.left-beautify{display:none;}
}

/** 最新消息 **/
.news{max-width: 1267px;margin: 0 auto;}
.news>ul{list-style: none;padding: 0;margin: 0;}
.news>ul>li{padding: 0;margin: 0;width: 100%;border-bottom: 1px #dddddd solid;}
.news>ul>li a{display: flex; align-items: center; padding: 15px;}
.news>ul>li a:hover{background: #eeeeee;}
.news>ul>li .photo-main{width: 240px;}
.news>ul>li .news-content{flex: 1;margin: 0 4%;}
.news>ul>li .news-content .news-date{width: 150px;background: #003467;font-size: 16px; color: #ffffff;border-radius: 3px; padding: 5px 10px;text-transform: uppercase;display: flex;align-items: center;justify-content: center;}
.news>ul>li .news-content h3{margin:15px 0 10px 0;font-size: 20px; color: #333333;font-weight: 400;line-height: 1.6;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.news>ul>li .news-content .news-info{margin: 0;font-size: 18px; color: #666666;font-weight: 400;line-height: 1.6;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.news>ul>li .news-more{width: 50px;height: 50px; display: flex;align-items: center;justify-content: center; border: 1px #999999 solid;border-radius: 50px; padding: 17.5px;background: #ffffff;transition: all .5s ease 0s;}
.news>ul>li .news-more img{filter: grayscale(1) opacity(.6);transition: all .5s ease 0s;}
.news>ul>li:hover .news-more {border: 1px #003467 solid;transition: all .5s ease 0s;}
.news>ul>li:hover .news-more img{filter: grayscale(0);transition: all .5s ease 0s;}
.news-detail-date{background: #003467;font-size: 16px; color: #ffffff;border-radius: 3px; padding: 5px 10px;text-transform: uppercase;display: table;margin: 20px 0;}
@media screen and (max-width:1024px){
    .news>ul>li .photo-main{width: 220px;}
    .news>ul>li .news-content{margin: 0 20px;}
    .news>ul>li .news-content .news-date{width: 140px;font-size: 15px; }
    .news>ul>li .news-content h3{font-size: 18px;}
    .news>ul>li .news-content .news-info{font-size: 16px; }
    .news>ul>li .news-more{width: 44px;height: 44px;padding: 16px;}
}
@media screen and (max-width:767px){
    .news>ul{display: flex;flex-wrap: wrap;}
    .news>ul>li{width: calc(100%/2);}
    .news>ul>li a{display: block;padding: 10px;}
    .news>ul>li .photo-main{width: 100%;}
    .news>ul>li .news-content{flex: initial;width: 100%;margin: 15px 0;}
    .news>ul>li .news-content h3{-webkit-line-clamp: 2;}
    .news>ul>li .news-more{display: none;}
}
@media screen and (max-width:575px){
    .news>ul>li{width:100%;}
}

/** 型錄下載 **/
.download{}
.download>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.download>ul>li{padding: 0;margin: 15px;width: calc(100%/4 - 30px);}
.download>ul>li .photo-main{border: 1px #dddddd solid;}
.download>ul>li a{display: block;}
.download>ul>li a:hover{}
.download>ul>li:hover .photo{transform:scale(1.1);transition: all .5s ease 0s;}
.download>ul>li .download-content{padding:15px 0 0 0;margin:0; position: relative;}
.download>ul>li .download-content:before{content: "";display: block;width: 40px; height: 3px; background: #003467;position: absolute;top: -2px; left:0;transition: all .5s ease 0s;}
.download>ul>li .download-content h3{padding: 0;margin: 0;font-size: 18px; color: #222222;line-height: 1.6;font-weight: 400;}
.download>ul>li:hover .download-content:before{background: #fa800a; width: 100%;transition: all .5s ease 0s;}
@media screen and (max-width:1024px){
    .download>ul>li{margin: 10px;width: calc(100%/3 - 20px);}
    .download>ul>li .download-content h3{font-size: 17px;}
}
@media screen and (max-width:767px){
    .download>ul>li{margin: 5px;width: calc(100%/2 - 10px);}
}
@media screen and (max-width:575px){
    .download>ul>li{margin: 5px 0;width:100%;}
}

/** 品牌 **/
.pro-brand{max-width: 1536px;margin: 0 auto;}
.pro-brand>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.pro-brand>ul>li{padding: 0;margin: 10px;width: calc(100%/2 - 20px);background: #ffffff;border: 1px #dddddd solid;position: relative;display: flex;}
.pro-brand>ul>li:hover{border: 1px #003467 solid;}
.pro-brand>ul>li .photo-main{position: relative;flex: 1;}
.pro-brand>ul>li .photo-main a{display: flex;align-items: center;justify-content: center;height: 100%;}
.pro-brand>ul>li .pro-brand-content{flex: 1.4; padding: 20px;border-left: 1px #dddddd solid;position: relative;display: flex;flex-direction: column;justify-content: center;}
.pro-brand>ul>li .pro-brand-content:before{content: "";display: block;height: 40px; width: 3px; background: #003467;position: absolute;top: calc(50% - 20px); left:-2px ;}
.pro-brand>ul>li .pro-brand-content a{display: flex;flex-direction: column;justify-content: center;height: 100%;}
.pro-brand>ul>li .pro-brand-content h3{padding: 0;margin: 0;font-size: 18px; color: #222222;line-height: 1.6;font-weight: 400;}
.pro-brand>ul>li .pro-brand-content .pro-brand-info{font-size: 16px; color: #666666;margin: 4px 0 0 0;letter-spacing: 0;}
.cart-message {width: 250px; display: none;position: fixed;bottom:50%;right: 50%;transform: translateX(50%) translateY(50%);background-color: rgba(0,0,0,.8);color:#ffffff;padding: 15px;border-radius: 3px;z-index: 10000;}
.cart-message .cart-message-content {display: flex;justify-content: center;}
.cart-message .cart-message-content i{width: 50px;height: 50px;display:flex;align-items: center;justify-content: center; margin: 0 10px 0 0;background: #fa800a;padding: 10px;border-radius: 50px;}
.cart-message .cart-message-content i img{width:30px;height: 30px;}
.cart-message .cart-message-content .cart-message-info{width: auto; padding: 10px 0;display:flex;align-items: center;}
@media screen and (max-width:1024px){
    .pro-brand>ul>li .pro-brand-content{padding: 15px;}
    .pro-brand>ul>li .pro-brand-content h3{font-size: 17px;}
    .pro-brand>ul>li .pro-brand-content .pro-brand-info{font-size: 15px; }
}
@media screen and (max-width:767px){
    .pro-brand>ul>li{width: calc(100%/2 - 10px);margin: 5px;}
}
@media screen and (max-width:575px){
    .pro-brand>ul>li{width:100%;margin: 5px 0;}
}

/** 品牌明細 **/
.pro-brand-detaile-box{display:flex; flex-wrap:wrap; margin:0 0 30px 0;}
.pro-brand-detaile-photo-box{width:calc(40% - 25px); margin:0 25px 0 0;}
.pro-brand-detaile-photo-box img{width:100%;}
.pro-brand-detaile-photo-box .mySwiper{margin: 10px 0 0 0;}
.pro-brand-detaile-photo-box .mySwiper .swiper-slide{background:#ffffff;}
.pro-brand-detaile-photo-box .mySwiper .swiper-slide img{filter: opacity(.5);}
.pro-brand-detaile-photo-box .mySwiper .swiper-slide-thumb-active img{filter: opacity(1);}
.pro-brand-detaile-spe-box{width:60%; position:relative;}
.pro-brand-detaile-spe-box.request{padding-bottom:70px;}
.pro-brand-detaile .pro-photo-box{background:#fff; width:100%; margin:0; padding:0;}
.pro-brand-detaile .pro-photo-box img{width:100%; height:auto;}
@media screen and (max-width:767px){
	.pro-brand-detaile-box{display:block;}
	.pro-brand-detaile-photo-box{width:100%; margin:0 0 15px 0;}
	.pro-brand-detaile-spe-box{width:100%; padding-bottom:0;}
    .pro-brand-detaile-spe-box.request{padding-bottom:0;}
}

/** 產品搜尋 **/
.pro-search-info{ color:#003467; border-bottom:1px #CCC dotted; margin-bottom:20px; text-align:center; padding-bottom:15px;}

/** 產品列表介紹 **/
.pro{max-width: 1536px;margin: 0 auto;}
.pro>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.pro>ul>li{padding:0;margin: 10px;width: calc(100%/4 - 20px);background: #ffffff;border: 1px #dddddd solid;position: relative;}
.pro>ul>li:hover{border: 1px #003467 solid;}
.pro>ul>li .photo-main{position: relative;}
.pro>ul>li button.pro-cart-btn{position: absolute;bottom: -44.8px;left: 0; background: #003467;font-size: 18px; text-align: center;border: 0;color: #ffffff;width: 100%;padding: 8px 15px;transition: all .5s ease 0s;}
.pro>ul>li button.pro-cart-btn:hover{background: #fa800a;}
.pro>ul>li:hover button.pro-cart-btn{bottom: 0;transition: all .5s ease 0s;}
.pro>ul>li .pro-content{padding: 20px;text-align: center;border-top: 1px #dddddd solid;position: relative;}
.pro>ul>li .pro-content:before{content: "";display: block;width: 40px; height: 3px; background: #003467;position: absolute;top: -2px; left: calc(50% - 20px);}
.pro>ul>li .pro-content h3{padding: 0;margin: 0;font-size: 18px; color: #222222;line-height: 1.6;font-weight: 400;}
.pro>ul>li .pro-content .pro-info{font-size: 16px; color: #666666;margin: 4px 0 0 0;letter-spacing: 0;}
.pro>ul>li .pro-price{font-size: 16px; color: #d50e0e;border-top: 1px #dddddd solid;padding: 10px 0 0 0;margin: 0 20px;position: absolute;bottom: 20px;left: 0;width: calc(100% - 40px);text-align: center;}
.cart-message {width: 250px; display: none;position: fixed;bottom:50%;right: 50%;transform: translateX(50%) translateY(50%);background-color: rgba(0,0,0,.8);color:#ffffff;padding: 15px;border-radius: 3px;z-index: 10000;}
.cart-message .cart-message-content {display: flex;justify-content: center;}
.cart-message .cart-message-content i{width: 50px;height: 50px;display:flex;align-items: center;justify-content: center; margin: 0 10px 0 0;background: #fa800a;padding: 10px;border-radius: 50px;}
.cart-message .cart-message-content i img{width:30px;height: 30px;}
.cart-message .cart-message-content .cart-message-info{width: auto; padding: 10px 0;display:flex;align-items: center;}
@media screen and (max-width:1024px){
    .pro>ul>li{margin: 10px;width: calc(100%/3 - 20px);}
    .pro>ul>li .pro-content{padding: 15px;}
    .pro>ul>li .pro-content h3{font-size: 17px;}
    .pro>ul>li .pro-content .pro-info{font-size: 15px; }
    .pro>ul>li .pro-price{font-size: 15px;margin: 0 15px;bottom: 15px;width: calc(100% - 30px);}
}
@media screen and (max-width:767px){
    .pro>ul>li{width: calc(100%/2 - 10px);margin: 5px;}
}
@media screen and (max-width:575px){
    .pro>ul>li .pro-content{padding: 10px;}
    .pro>ul>li .pro-price{margin: 0 10px;bottom: 10px;width: calc(100% - 20px);}
}
@media screen and (max-width:374px){
    .pro>ul>li{width:100%;margin: 5px 0;}
}

/** 產品明細 **/
.pro-detaile-title{font-size:20px; color:#ffffff;background: #003467; padding:5px 15px; margin:0 0 15px 0; font-weight:400;line-height: 1.6;}
.pro-note{display: block;font-size: 18px; color: #666666; margin:0 0 15px 0;padding: 0; }
.pro-detaile-box{display:flex; flex-wrap:wrap; margin:0 0 30px 0;}
.pro-detaile-photo-box{width:calc(40% - 25px); margin:0 25px 0 0;}
.pro-detaile-photo-box img{width:100%;}
.pro-detaile-photo-box .mySwiper{margin: 10px 0 0 0;}
.pro-detaile-photo-box .mySwiper .swiper-slide{background:#ffffff;}
.pro-detaile-photo-box .mySwiper .swiper-slide img{filter: opacity(.5);}
.pro-detaile-photo-box .mySwiper .swiper-slide-thumb-active img{filter: opacity(1);}
.pro-detaile-spe-box{width:60%; position:relative; padding-bottom:0;}
.pro-detaile-spe-box.request{padding-bottom:70px;}
.pro-detaile .pro-photo-box{background:#fff; width:100%; margin:0; padding:0;}
.pro-detaile .pro-photo-box img{width:100%; height:auto;}
.pro-list-time{background:url(../images/time.png) left center no-repeat; font-size:12px; color:#968c69; padding-left:20px;}
.pro-specification{ color:#222222; position:relative;}
.cart-info{position:absolute; width:100%; bottom:0;margin: 15px 0 0 0;}
.cart-info .price{font-size:22px; font-weight:bold; color:#d50e0e; vertical-align:middle; display:block;margin:0 0 10px 0;}
.cart-info .price.origin{font-size:smaller; color:#666; text-decoration:line-through;}
.cart-info .price.special{font-size:smaller; color:#000;}
h3.pro-introduce{background:#999; font-weight:normal; border-left:5px #111111 solid; padding:8px 10px; font-size:20px; color:#fff; margin:25px 0 15px 0;}
.pro-content{ color:#222222; clear:both;}
.numb-cart{display: flex;}
.category-tag{border-top: 1px #dddddd dashed;padding: 15px 0 0 0;margin: 15px 0 0 0;}
.category{font-size:14px; color:#666666;margin: 0 0 5px 0;}
.category a{display: inline-block;color:#666666;}
.category a:hover{color:#222222;text-decoration: underline;}
.tag{font-size:14px; color:#666666;margin: 0 0 5px 0;}
.tag a{display: inline-block;color:#666666;}
.tag a:hover{color:#222222;text-decoration: underline;}
@media screen and (max-width:767px){
	.pro-detaile-box{display:block;}
	.pro-detaile-photo-box{width:100%; margin:0 0 15px 0;}
	.pro-detaile-spe-box{width:100%; padding-bottom:0;}
    .pro-detaile-spe-box.request{padding-bottom:0;}
	.cart-info{position:inherit; bottom:inherit;}
}

/** 頁籤 **/
.index-brand{ margin:0 auto 30px auto; max-width:1260px;}
#brand{ height:auto; width:100%; }
#brand ul{  list-style:none;  height:auto; margin:0;  padding:0;display: flex;align-items: flex-end;}
#brand ul li{ text-align:center; cursor:pointer; width: calc(100%/2); font-size:18px;  padding:10px 15px;background: #ffffff; color:#222222;display:flex; align-items:center; justify-content:center;}
#brand ul li:nth-child(5){ }
#brand ul li img{vertical-align:text-bottom; }
#brand ul li:hover{ color:#222222; background:#ccc;} 
#brand ul li.active{ color:#ffffff; font-size:18px; border-bottom:0; background:#003467; padding:15px 15px;}
#brand-info{ color:#222222;width:100%; padding: 20px 0; }
#brand-info>.box{  width:auto;  height:auto;  display:none;}

/** 文檔 **/
.document{margin: 0 0 30px 0 ;}
.document:last-of-type{margin: 0 ;}
.document>ul{list-style: none;padding: 0;margin: 0;}
.document>ul>li{width: 100%;padding: 0; margin: 0;display: block;background: #ffffff;}
.document>ul>li:nth-child(even){background: #eeeeee;}
.document>ul>li a{display: flex;flex-wrap: wrap; color: #222222;border-bottom: 1px #dddddd solid;padding: 5px;}
.document>ul>li a:hover{background: #ffffff; box-shadow:0 0 15px 0 rgba(0,0,0,.1);position: relative;z-index: 1;}
.document>ul>li .document-title{flex: 2;padding:5px;}
.document>ul>li .document-content{flex: 1.5;padding:5px;}
.document>ul>li .document-note{flex: 1;text-align: center;padding:5px;}
@media screen and (max-width:767px){
	.document>ul>li .document-title{flex: initial;width: 50%;text-align: center;border-bottom: 1px #cccccc dashed;}
    .document>ul>li .document-content{flex: initial;width: 50%;text-align: center;border-bottom: 1px #cccccc dashed;}
}
@media screen and (max-width:575px){
	.document>ul>li .document-title{width: 100%;}
    .document>ul>li .document-content{width: 100%;}
}

/** 相關產品 **/
.related-pro{margin: 30px 0 0 0 ;}
@media screen and (max-width:1024px){
    .related-pro .pro>ul>li{margin: 10px;width: calc(100%/4 - 20px);}
}
@media screen and (max-width:767px){
    .related-pro .pro>ul>li{width: calc(100%/2 - 10px);margin: 5px;}
}
@media screen and (max-width:575px){

}

/** 友站連結 **/
.brand{}
.brand>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.brand>ul>li{padding: 0;margin: 15px;width: calc(100%/6 - 30px);}
.brand>ul>li a{display: block;border: 1px #dddddd solid;position: relative;}
.brand>ul>li a:before{content: "";display: block;width: 0px; height: 0px; border-top: 0px #003467 solid;border-left: 0px #003467 solid;position: absolute;top: -1px;left: -1px; transition: all 0.5s ease 0s;}
.brand>ul>li a:after{content: "";display: block;width:0px; height: 0px; border-bottom:0px #003467 solid;border-right:0px #003467 solid;position: absolute;bottom: -1px;right: -1px; transition: all 0.5s ease 0s;}
.brand>ul>li a:hover{}
.brand>ul>li a:hover:before{width: calc(100% + 2px); height:calc(100% + 2px); border-top: 1px #003467 solid;border-left: 1px #003467 solid;transition: all 0.5s ease 0s;}
.brand>ul>li a:hover:after{width:calc(100% + 2px); height:calc(100% + 2px); border-bottom: 1px #003467 solid;border-right: 1px #003467 solid;transition: all 0.5s ease 0s;}
@media screen and (max-width:1024px){
	.brand>ul>li{margin: 10px;width: calc(100%/4 - 20px);}
}
@media screen and (max-width:767px){
	.brand>ul>li{margin: 5px;width: calc(100%/3 - 10px);}
}
@media screen and (max-width:575px){
	.brand>ul>li{width: calc(100%/2 - 10px);}
}

/** 聯絡我們 **/
.contact-body{margin: 0 0 30px 0;}
.contact-note{padding:10px 0; color:#900;}
.contact{margin: 0 0 30px 0;}
.contact>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.contact>ul>li{padding: 0;width:calc(100%/2 - 10px);margin:15px 20px 15px 0;display: flex;}
.contact>ul>li:nth-child(even){margin: 15px 0;}
.contact>ul>li .contact-content{flex: 1;}
.contact>ul>li .contact-content .contact-title{width: 100%;font-size: 20px;color: #003467;font-weight: 500;position: relative;padding: 0 0 10px 0;margin: 0 0 15px 0;}
.contact>ul>li .contact-content .contact-title:after{content: "";display: block;width: 40px; height: 2px; background: #003467;position: absolute;bottom: 0;left: 0;}
.contact>ul>li .contact-content>ul{list-style: none;padding: 0;margin: 0;}
.contact>ul>li .contact-content>ul>li{padding: 0;margin: 0;}
.contact>ul>li .contact-content>ul>li a{display: inline-block;color: #222222;}
.contact>ul>li .contact-content>ul>li a:hover{color: #fa800a;}
.contact-mail{background: #ffffff;margin: 0 0 15px 0;padding: 15px; text-align: center;}
.contact-mail a{display: inline-block;color: #222222;}
.contact-mail a:hover{color: #fa800a;}
.googlemap {flex: 1.4; position: relative;padding-bottom: 20%;padding-top: 30px;height: 0;overflow: hidden;}
.googlemap iframe {position: absolute;top:0;left: 0;width: 100%;height: 100%;}
.contact>ul>li .contact-content>ul>li .googlemap-icon{display: flex;align-items: center;margin:5px 0 10px 0;font-size: 14px;letter-spacing: 0;}
.contact>ul>li .contact-content>ul>li .googlemap-icon i{width: 18px;height: 18px;margin: 0 4px 0 0; display: flex;align-items: center;justify-content: center;}
.contact>ul>li .contact-content>ul>li .googlemap-icon i img{width: 18px;height: 18px; filter: brightness(100);}
.contact>ul>li .contact-content>ul>li .googlemap-icon a{display:inline-flex;align-items: center;padding: 4px 10px;border-radius: 5px;background: #0f5aa3;color: #ffffff;border: 1px #0f5aa3 solid;}
.contact>ul>li .contact-content>ul>li .googlemap-icon a:hover{background: #ffffff;color: #0f5aa3;}
.contact>ul>li .contact-content>ul>li .googlemap-icon a:hover i img{filter: brightness(1);}
@media screen and (max-width:1024px){
    .contact>ul>li .contact-content .contact-title{font-size: 18px;}
    .contact>ul>li .contact-content .contact-title:after{width: 36px; }
    .googlemap {padding-bottom: 20%;}
    .contact>ul>li .contact-content>ul>li .googlemap-icon{display:block;width: 100%;}
}
@media screen and (max-width:767px){
    .contact>ul>li{display: block;width:100%;margin:10px 0;}
    .contact>ul>li .contact-content{flex:initial;width: 100%;}
	.googlemap {flex:initial;width: 100%; padding-bottom:40%;}
    .contact>ul>li .contact-content>ul>li .googlemap-icon{display: inline-flex;width: auto;}
}
@media screen and (max-width:575px){
    .contact>ul>li .contact-content>ul>li .googlemap-icon{display:block;width: 100%;}
}

/** 表單欄位 **/
.form-box{margin: 0 0 30px 0;}
label{min-width: 100px;}
.form-box input, .form-box img{vertical-align:middle;}
.star{color: #d50e0e;font-size: 13px;padding: 0 5px;}
.opinion-main{display:flex; }
.opinion{flex: 1; display:flex; flex-wrap:wrap; margin:0;padding: 20px 0; border-radius:0; overflow:hidden;border-bottom: 1px #dddddd solid;}
.opinion-left01{ width:140px; padding:5px 15px; font-weight:400; color:#222222; display:flex; align-items:center;}
.input-main-style01{background: #ffffff; flex:1; width:100%; border:0; margin:0; padding:10px 15px; color:#222222; min-height:48.8px;}
.input-main-style02{background: #ffffff; flex:1; width:100%; border:0; margin:0; padding:10px 15px; color:#222222; min-height:48.8px;}
.input-main-style03{background: #ffffff; width:100%; border:0; margin:5px 0 0 0; padding:10px 15px; color:#222222;min-height:48.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:#ffffff; flex: 1; padding:10px 15px; border:0; color:#222222; min-height:48.8px;}
.select-style{background:#8a6e0c;  color:#ffffff; line-height:20px; padding:10px 10px; border:0;}
.input-style01{background:#f4f8fb; flex:1; width:100%; border:0; margin:0; padding:10px 15px;  color:#222222; min-height:48.8px;}
input:disabled{background-color:#fff; color:#999999; cursor:no-drop;}
.btn.openlink{margin:3px 0; padding:0 10px; text-align:center;font-weight:bold; background-color:#2d7fb9; color:#fff; border-radius:5px;}
.btn.openlink:hover{background-color:#ffbe00;}
img.code{width:100px; height:48.8px; margin:0; vertical-align:middle; display:inline-block;}
.pay-main{padding:0;color: #333333;border-radius:0;margin: 15px 0 ;}
.input-main-style01:focus, .input-main-style02:focus, .input-main-style03:focus, .input-main-select select:focus{box-shadow: 0 0 0 1px #003467 inset;}
@media screen and (max-width:767px){
    .opinion-main{display:block; }
	.opinion{display:block;width: 100%;padding: 15px 0;}
	.opinion-left01{width:100%;}
	.input-main-style02{width:calc(100% - 108px); display:inline-block;}
}

/** 按鈕 **/
.cart-btn{padding:0; text-align:center; margin-top:30px; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center;}
.cart-btn i{margin: 0 8px 0 0;}
.btn-send{}
a.btn-send{background: #fa800a; padding:10px 20px; text-align:center;  color:#ffffff;max-width: 150px; width:calc(50% - 20px); margin:0 0 0 10px;border-radius: 3px;border: 0;}
a.btn-send:hover{background:#003467;}
a.btn-reset{background:#595757; padding:10px 20px; text-align:center; color:#ffffff;max-width: 150px; width:calc(50% - 20px); margin:0 0 0 10px; border-radius: 3px;border: 0;}
a.btn-reset:hover{background:#222222;}
a.btn-send-over{background:#7ea2c5; padding:10px 20px; text-align:center; color:#ffffff;max-width: 150px; width:calc(50% - 20px);margin:5px; border-radius: 3px;border: 0;}
a.btn-send-over:hover{background:#96b9dc; border:2px solid #96b9dc;}
a.btn-forget{ text-align:center; color:#003467; width:auto; margin:0 0 0 10px; border-radius: 0px;font-size: 14px;}
a.btn-forget:hover{text-decoration: underline;}
@media screen and (max-width:767px){
	a.btn-send{max-width:inherit;margin: 0 5px;width:calc(50% - 10px);}
    a.btn-reset{max-width:inherit;margin: 0 5px;width:calc(50% - 10px);}
    a.btn-send-over{max-width:inherit;margin: 0 5px;width:calc(50% - 10px);} 
}
    
/** 送出訊息 **/
.jump-window-box{max-width:600px; margin:0 auto; border:1px #dddddd solid; padding:20px;background: #ffffff; border-radius:3px;}

/** 頁次 **/
.page{font-size: 15px; color:#222222; text-align:center; clear:both; margin:30px 0 0 0;}
.page a{background:#222222; color:#fff; padding:4px 15px;border-radius: 3px; display: inline-block;margin: 10px 0;}
.page a:hover{background:#003467; color:#fff;}
.page br{display:none;}
@media screen and (max-width:767px){
	.page br{display:block;}
}

/** 下版 **/
footer{overflow: hidden;}
.f-logo-icon-main{background: #ffffff;padding: 10px 5.25%;}
.f-logo-icon{display: flex;align-items: center;}
.f-logo-icon .f-logo-main{width: auto;display: flex;align-items: flex-end;}
.f-logo-icon .f-logo-main .f-logo{width: 110px;margin: 0 18px 0 0;}
.f-logo-icon .f-logo-main .f-logo-font{flex: 1;font-size: 20px;color: #222222;line-height: 1.1;letter-spacing: 8px;}
.f-logo-icon .f-logo-main .f-logo-font span{display: block;width: 100%;font-size: 13px; color: #666666;letter-spacing: 2.1px;margin: 5px 0 0 0;}
.f-logo-icon .f-community{flex: 1;}
.f-logo-icon .f-community>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: flex-end;}
.f-logo-icon .f-community>ul>li{padding: 0;margin: 5px;width: 50px;}
.f-logo-icon .f-community>ul>li img{filter: brightness(0) invert(1);transition: all .5s ease 0s;}
.f-logo-icon .f-community>ul>li a{background: #003467; display: flex;align-items: center;justify-content: center;width: 50px; height: 50px; border-radius: 3px; overflow: hidden;padding: 10px;}
.f-logo-icon .f-community>ul>li:nth-child(1) a{background: #00b900;transition: all .5s ease 0s;}
.f-logo-icon .f-community>ul>li:nth-child(2) a{background: #3a589e;transition: all .5s ease 0s;}
.f-logo-icon .f-community>ul>li:nth-child(3) a{background: #e22a29;transition: all .5s ease 0s;}
.f-logo-icon .f-community>ul>li a:hover{box-shadow: 0 0 0 1px #003467;background: #ffffff;}
.f-logo-icon .f-community>ul>li:nth-child(1) a:hover{box-shadow: 0 0 0 1px #00b900;transition: all .5s ease 0s;}
.f-logo-icon .f-community>ul>li:nth-child(2) a:hover{box-shadow: 0 0 0 1px #3a589e;transition: all .5s ease 0s;}
.f-logo-icon .f-community>ul>li:nth-child(3) a:hover{box-shadow: 0 0 0 1px #e22a29;transition: all .5s ease 0s;}
.f-logo-icon .f-community>ul>li a:hover img{filter: brightness(1);transition: all .5s ease 0s;}
.footer-main{padding: 0 5.25%; background: #222222;}
.footer{display: block;font-size: 16px; color: #ffffff;line-height: 1.8;}
.footer .f-contact{width: 100%;position: relative;z-index: 1;padding:0;}
.footer .f-contact>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.footer .f-contact>ul>li{padding:3vw 15px;margin:0;width: calc(100%/4);border-right: 1px #444444 solid;}
.footer .f-contact>ul>li:nth-child(even){background: #333333;}
.footer .f-contact>ul>li:nth-child(4n){border-right: 0;}
.footer .f-contact>ul>li .f-contact-title{font-size: 18px; color: #ffffff;position: relative;padding: 0 0 6px 0;margin: 0 0 14px 0;}
.footer .f-contact>ul>li .f-contact-title:after{content: "";display: block;width: 36px; height: 1px;background: #ffffff;position: absolute;bottom: 0;left: 0;}
.footer .f-contact>ul>li .f-contact-content{}
.footer .f-contact>ul>li .f-contact-content span{display: inline-block;padding: 0 15px 0 0;}
.footer .f-contact>ul>li .f-contact-content span:first-of-type{display: block;padding: 0 ;width: 100%;}
.footer .f-contact>ul>li .f-contact-content a{display: inline-block; color: #ffffff;}
.footer .f-contact>ul>li .f-contact-content a:hover{color: #fa800a;}
.copyright-main{background: #000000;padding: 14px 5.25%;border-top: 1px #444444 solid;}
.copyright{font-size: 16px; color: #ffffff;text-align: center;}
.copyright span{display: inline-block; padding: 0 0 0 15px;}
.copyright span a{display: inline-block; color: #ffffff;}
.copyright span a:hover{color: #fa800a;}
@media screen and (max-width:1500px){
    .f-logo-icon-main{padding: 10px 15px;}
    .footer-main{padding: 0;}
    .copyright-main{padding: 14px 15px;}
}
@media screen and (max-width:1024px){
    .f-logo-icon .f-logo-main .f-logo{width: 100px;margin: 0 10px 0 0;}
    .f-logo-icon .f-logo-main .f-logo-font{font-size: 18px;letter-spacing: 3px;}
    .f-logo-icon .f-logo-main .f-logo-font span{font-size: 12px; letter-spacing: .5px;}
    .f-logo-icon .f-community>ul>li{width: 44px;}
    .f-logo-icon .f-community>ul>li a{width: 44px; height: 44px;padding: 8px;}
    .footer{display: block;font-size: 15px;}
    .footer .f-contact>ul>li{padding:30px 15px;width: calc(100%/2);}
    .footer .f-contact>ul>li:nth-child(even){background: none;}
    .footer .f-contact>ul>li:nth-child(4n-2),.footer .f-contact>ul>li:nth-child(4n-1){background: #333333;}
    .footer .f-contact>ul>li:nth-child(4n){border-right: 1px #444444 solid;}
    .footer .f-contact>ul>li:nth-child(2n){border-right: 0;}
    .footer .f-contact>ul>li .f-contact-title{font-size: 17px; }
    .copyright{font-size: 12px; }
}
@media screen and (max-width:767px){
    .copyright span{display: block; padding: 0;width: 100%;}
}
@media screen and (max-width:575px){
    .f-logo-icon{display:block;}
    .f-logo-icon .f-logo-main{width: auto;display: block;margin: 0 0 15px 0;}
    .f-logo-icon .f-logo-main .f-logo{width: 110px;margin: 0 auto 10px auto;}
    .f-logo-icon .f-logo-main .f-logo-font{flex:initial;width: 100%;text-align: center;}
    .f-logo-icon .f-community{flex: initial;width: 100%;}
    .f-logo-icon .f-community>ul{justify-content:center;}
    .footer .f-contact>ul>li{padding:20px 15px;width:100%;border-right: 0;border-bottom: 1px #444444 solid;}
    .footer .f-contact>ul>li:last-of-type{border-bottom: 0;}
    .footer .f-contact>ul>li:nth-child(4n-2),.footer .f-contact>ul>li:nth-child(4n-1){background: none;}
    .footer .f-contact>ul>li:nth-child(even){background: #333333;}
    .footer .f-contact>ul>li:nth-child(4n){border-right: 0;}
}

/** top **/
#scrollUp {border-top: 1px #ffffff solid;width:60px; height:60px; bottom: 10%;right:0;background:#fa800a url("../images/top-icon.svg")no-repeat center top 14px;background-size: 13px;font-size: 16px; color: #ffffff; text-transform: uppercase;padding: 28px 0 0 0;text-align: center;}
@media screen and (max-width:1024px){
    #scrollUp { bottom: 8%;width: 46px; height: 46px;background:#fa800a url("../images/top-icon.svg")no-repeat center top 8px;background-size: 12px;font-size: 13px;padding: 20px 0 0 0;}
}