@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;}
.head-tool-main{background: #003467;padding: 0 5.25%;}
.head-tool{display: flex;justify-content: flex-end;}
.member-menu {flex: 1;}
.member-menu ul{list-style:none;padding: 0;margin: 0; display:flex;justify-content:flex-end;}
.member-menu ul li{ padding:0; margin:0; color:#ffffff; font-size:16px;}
.member-menu ul li span{font-size:14px;}
.member-menu ul li i{width: 22px; height: 22px;margin: 0 8px 0 0; display: flex;align-items: center;justify-content: center;}
.member-menu ul li a{padding:12.5px 20px; display:flex;align-items: center; color:#ffffff;position: relative;z-index: 1;}
.member-menu ul li a:after{content: "";display: block;width: 0%;height: 100%;background: #fa800a;position: absolute;top: 0;left: calc(50% - 0%);z-index: -1;transition: all 0.5s ease 0s;}
.member-menu ul li a:hover{}
.member-menu ul li a:hover:after{width: 100%;left: calc(50% - 50%);transition: all 0.5s ease 0s;}
.lang-main{position: relative;width: 120px;padding: 0 ; cursor: pointer;background: #0f5aa3; transition: all 0.5s ease 0s;}
.lang-main .lang{color: #ffffff;font-size: 16px;display: flex;align-items: center;padding: 12.5px 15px;}
.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: 50.59px;left: 0;background: #222222;z-index: 10001;}
.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;}
@media screen and (max-width:1500px){
	.head-tool-main{padding: 0 15px;}
    .head-main{padding: 0 15px;}
}
@media screen and (max-width:1024px){
    header{box-shadow: 0 0 0 0 rgba(0,0,0,0);}
	.member-menu ul li{font-size:14px;}
	.member-menu ul li:nth-child(-n+2){display: none;}
    .member-menu ul li span{font-size:12px;}
    .member-menu ul li i{width: 18px; height: 18px;margin: 0 5px 0 0;}
    .member-menu ul li a{padding:10px;}
    .lang-main{width: 90px;}
    .lang-main .lang{font-size: 14px;padding: 10px;}
    .lang-main .lang .lang-icon{width: 18px;}
    .lang-main .lang .lang-content{margin: 0 8px 0 5px;}
    .lang-main>ul{top: 42.39px;}
    .head .logo{margin: 0; position: fixed;top: 47.5px;left: 15px;width: 99.9px;}
    .header-height .head .logo{width: 99.9px;}
}
@media screen and (max-width:374px){
    .member-menu ul li a{padding:10px 6px;}
    .lang-main{width:84px;}
    .lang-main .lang{padding: 10px 6px;}
}

/** 搜尋 **/
.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: 0;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:69.98px;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: 8px;right: 50px;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:56px;opacity: 1;visibility: visible;}
    .search-slow .search-content{max-width: inherit;}
    .header-height .search-icon{top: 8px;right: 50px;}
    .header-height .search-slow{top:56px;}
}

/** 主選單與下拉 **/
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:nth-last-child(-n+2){display: none;}
.menu>li>a{color:#222222; display:block; padding:15.6px 20px; 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{justify-content: center;}
.header-height .menu>li>a{ padding:20.6px 20px 20.6px 20px; }
.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.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;}
}
@media screen and (max-width:1100px){
    .menu>li>a{padding:15.6px 15px;}
    .header-height .menu>li>a{ padding:20.6px 15px 20.6px 15px; }
}
@media screen and (max-width:1024px){
	#menu{display:none;}
	.slicknav_menu{display:block;background: #ffffff;position: fixed;top: 42.39px;left: 0;width: 100%;z-index: 10000;box-shadow: 0 0 15px 0 rgba(0,0,0,.2);}
}

/** edm輪播 **/
.edm-main{background:#f9f9f9; position:relative;padding: 189.58px 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:1024px){
    .edm-main{padding: 98.39px 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;}
.i-title-main .i-title{font-size: 40px;font-weight: 700;color: #222222;letter-spacing: 8px;}
.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 0 56.59px 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 20px 10px 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;}
.i-pro>ul>li .i-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){
    .i-pro-main{padding: 40px 15px;}
    .i-pro>ul>li{margin: 10px;width: calc(100%/3 - 20px);padding: 0 0 50px 0;}
    .i-pro>ul>li .i-pro-content{padding: 15px 15px 10px 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; }
    .i-pro>ul>li .i-pro-price{font-size: 15px;margin: 0 15px;bottom: 15px;width: calc(100% - 30px);}
}
@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 10px 10px 10px;}
    .i-pro>ul>li .i-pro-price{margin: 0 10px;bottom: 10px;width: calc(100% - 20px);}
}
@media screen and (max-width:374px){
    .i-pro>ul>li{width:100%;margin: 5px 0;}
}

/** 內頁banner **/
.inside-banner{ padding:calc(4% + 189.58px) 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: 8px;padding:5px 25px 5px 33px;border-radius: 3px; line-height: 1.6;text-shadow: 0 0 5px rgba(0,0,0,.8);}
@media screen and (max-width:1024px){
    .inside-banner{ padding:calc(20px + 98.39px) 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 0 56.59px 0;margin: 10px;width: calc(100%/4 - 20px);background: #ffffff;border: 1px #dddddd solid;position: relative;}
.pro>ul>li.request{padding:0;}
.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 20px 10px 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.request .pro-content{padding: 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);padding: 0 0 50px 0;}
    .pro>ul>li .pro-content{padding: 15px 15px 10px 15px;}
    .pro>ul>li.request .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{padding: 0 0 45px 0;}
    .pro>ul>li .pro-content{padding: 10px 10px 10px 10px;}
    .pro>ul>li.request .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:115px;}
.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){

}

/** 購物車按鈕 **/
.add-to-cart{width: auto;color:#cecece; font-size:16px; display:block;text-align:center;}
.add-to-cart a{background:#fa800a; padding:15px 25px; color:#ffffff; font-size:16px; display:block; width:100%; text-align:center;height: 55px;}
.add-to-cart a:hover{background:#003467; }
.add-to-cart a[disable]{background:#cccccc;cursor:no-drop;}
.add-to-cart a[disable]:hover{}
@media screen and (max-width:767px){
	.add-to-cart a{padding:10px 15px;height: 46px;}
}

/** 購買數量 **/
.cart-info .qtynspec{width: 200px;}
.cart-info .quantity{display:flex; justify-content:flex-end; align-items:center; font-size:16px; color:#333; padding:0;}
.cart-info .quantity-title{font-size:16px; color:#333; width: auto;margin:0 10px 0 0;}
@media screen and (max-width:767px){
	.cart-info .qtynspec{width: 160px;}
}

/** 購買數量增減模組 **/
.qtyInputBox{flex: 1; vertical-align:middle; height:55px; margin: 0 20px 0 0;}
.qtyInputBox .input-group-btn, .qtyInputBox input{display:table-cell; position:relative; float:left; top:0;}
.qtyInputBox .input-group-btn button{display:block; width:55px; height:55px; margin:0; padding:0; vertical-align:middle; border:1px solid #ccc; border-radius:0; overflow:hidden;color: #222222;}
.qtyInputBox .input-group-btn:last-child button{border-radius:0;}
.qtyInputBox button i{display:flex;align-items: center;justify-content: center; width:100%; height:100%; margin:0; padding:0;  background-color:#fff;color: #222222;}
.qtyInputBox button i:hover{background-color:#eee;}
.qtyInputBox input{margin-bottom:0; width:calc(100% - 110px); height:55px; border:0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; vertical-align:middle; padding:0 5px; text-align:center;}
.qtyInputBox button:focus, input:focus{outline:0;}
.shopping-car-content .qtyInputBox{height:40px;margin: 0 auto;max-width: 200px;}
.shopping-car-content .qtyInputBox .input-group-btn button{width:40px; height:40px;}
.shopping-car-content .qtyInputBox input{height:40px; width:calc(100% - 80px);}
@media screen and (max-width:767px){
	.qtyInputBox{height:46px; margin: 0 10px 0 0;}
    .qtyInputBox .input-group-btn button{width:46px; height:46px;}
    .qtyInputBox input{width:calc(100% - 92px); height:46px; }
    .shopping-car-content .qtyInputBox{margin: 0;max-width: inherit;}
}

/** 購買尺寸 **/
.size{margin:0; padding:7px 0; border-bottom:1px #DFDFDF solid; border-top:1px #DFDFDF solid; display:flex; align-items:center;}
.size-title{font-size:16px; color:#333; min-width:32px; margin:0 10px 0 0;}
.size ul{list-style:none; margin:0 auto; padding:0; flex:1; display:flex; flex-wrap:wrap;}
.size ul li{background:#aaaaaa; font-size:12px; color:#ffffff; margin:2px 5px 2px 0; padding:2px; cursor:pointer; min-width:25px; width:25px; text-align:center;}
.size ul li:hover{background:#000;}
.size ul li.active{background:#000;}
.size ul li.none{background:#E7E7E7;}
.size ul li.title{background:none; font-size:16px; color:#575757; width:auto;}

/** 購買規格 **/
.specification{margin:0; padding:7px 0; display:flex; justify-content:flex-end; align-items:center; width:100%;}
.specification-title{font-size:16px; color:#333; min-width:32px; margin:0 10px 0 auto;}
.specification select{min-height:30px; border:1px #ccc solid; max-width:calc(100% - 32px);}

/** 友站連結 **/
.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: inline-flex;align-items: center;justify-content: center; margin:2px 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:130px; 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;}

/** 會員登入 **/
.member-login-box{max-width:900px; margin:0 auto;}
.login-tool ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.login-tool ul li{padding:0; margin:5px; min-width:50px;}
.login-tool ul li img{width:100%;}

/** 訂單列表 **/
.order-list ul{list-style:none; padding:0; margin:0;}
.order-list ul li{padding:15px; margin:0;background: #ffffff;display: flex;align-items: center;}
.order-list ul li:nth-child(odd){background: #f3f3f3;}
.order-list ul li .order-list-content{text-align:center; margin:0;}
.order-list ul li:first-of-type{border-bottom:0; padding:10px 15px;background: #222222;color: #ffffff;align-items: flex-start;}
.order-list ul li:first-of-type .order-list-content{font-size:16px; text-align:center;}
.order-list ul li:first-of-type .order-list-content b{display:block; border-radius:0;font-weight: 400;padding:0;}
.order-list .order_number{font-size:16px; color:#222222;}
.order-list .order_date{font-size:16px; color:#222222;}
.order-list .order_total{font-size:16px; color:#222222;}
.order-list .order_status{font-size:16px; color:#222222;}
.order-list .order_details{font-size:16px; color:#222222;}
.order-list .order_details a{display:flex;align-items: center;justify-content: center; width: 35px; height: 35px; border-radius: 50px; margin: 0 auto;color:#003467; padding:5px 10px;}
.order-list ul li:hover{}
.order-list ul li:hover .order_details a{background:#003467;color: #ffffff;}
.oproject{display:none;}
.oproject-content{flex:1;}
@media screen and (max-width:767px){
	.order-list ul li .order-list-content{padding:5px 0;display: flex;align-items: center;}
	.order-list ul li:first-of-type{display:none;}
	.oproject{display:inline-block; color:#010101; width:100px; margin:0;padding: 0;}
	.oproject-content{width:100%; max-width:100%; text-align:left;padding: 0;}
    .order-list .order_details a{margin: 0;}
}

/** 訂單明細 **/
.order-detail{font-size:16px; color:#2222222; margin:0 0 20px 0;}
.order-detail h3{color:#003467; font-size:20px; padding:0; margin:30px 0 15px 0;font-weight: 500;}
.order-numbering{color:#003467; font-size:18px;margin: 0 0 20px 0;}

/** 訂單&購物車配置網格 **/
.o-col-sm, .o-col-sm-1, .o-col-sm-10, .o-col-sm-11, .o-col-sm-12, .o-col-sm-2, .o-col-sm-3, .o-col-sm-4, .o-col-sm-5, .o-col-sm-6, .o-col-sm-7, .o-col-sm-8, .o-col-sm-9, .o-col-sm-auto{position:relative; width:100%; min-height:1px; padding-right:15px; padding-left:15px;}
.o-col-sm{-ms-flex-preferred-size:0; flex-basis:0; -ms-flex-positive:1; flex-grow:1; max-width:100%;}
.o-col-sm-auto{-ms-flex:0 0 auto; flex:0 0 auto; width:auto; max-width:none;}
.o-col-sm-1{-ms-flex:0 0 8.333333%; flex:0 0 8.333333%; max-width:8.333333%;}
.o-col-sm-2{-ms-flex:0 0 16.666667%; flex:0 0 16.666667%; max-width:16.666667%;}
.o-col-sm-3{-ms-flex:0 0 25%; flex:0 0 25%; max-width:25%;}
.o-col-sm-4{-ms-flex:0 0 33.333333%; flex:0 0 33.333333%; max-width:33.333333%;}
.o-col-sm-5{-ms-flex:0 0 41.666667%; flex:0 0 41.666667%; max-width:41.666667%;}
.o-col-sm-6{-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;}
.o-col-sm-7{-ms-flex:0 0 58.333333%; flex:0 0 58.333333%; max-width:58.333333%;}
.o-col-sm-8{-ms-flex:0 0 66.666667%; flex:0 0 66.666667%; max-width:66.666667%;}
.o-col-sm-9{-ms-flex:0 0 75%; flex:0 0 75%; max-width:75%;}
.o-col-sm-10{-ms-flex:0 0 83.333333%; flex:0 0 83.333333%; max-width:83.333333%;}
.o-col-sm-11{-ms-flex:0 0 91.666667%; flex:0 0 91.666667%; max-width:91.666667%;}
.o-col-sm-12{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%;}
@media screen and (max-width:767px){
	.o-col-sm, .o-col-sm-1, .o-col-sm-10, .o-col-sm-11, .o-col-sm-12, .o-col-sm-2, .o-col-sm-3, .o-col-sm-4, .o-col-sm-5, .o-col-sm-6, .o-col-sm-7, .o-col-sm-8, .o-col-sm-9, .o-col-sm-auto{width:100%; max-width:100%; flex:inherit;}
}

/** step **/
.steps{text-align:center; padding:0;margin: 0 0 30px 0;}
.steps>ul{list-style: none;padding: 0;margin: 0;display: flex;}
.steps>ul>li{width: calc(100%/3);padding: 0;margin: 0;position: relative;z-index: 1;filter: grayscale(1) opacity(.4);}
.steps>ul>li.active{filter: grayscale(0);}
.steps>ul>li:before{content: "";display: block;width:calc(50% - 100px);height: 2px ;background: #666666;position: absolute;top:calc(50% - 1px);left:0%;z-index: -1;}
.steps>ul>li:after{content: "";display: block;width:calc(50% - 100px);height: 2px ;background: #666666;position: absolute;top:calc(50% - 1px);right:0%;z-index: -1;}
.steps>ul>li .step-numb{}
.steps>ul>li .step-numb span{font-size: 30px;font-weight: 500;}
.steps>ul>li .step-icon{max-width: 36px;margin:5px auto 10px auto;}
.steps>ul>li .step-title{font-weight: 400;}
@media screen and (max-width:1024px){
	.steps>ul>li .step-numb span{font-size: 24px;}
    .steps>ul>li .step-icon{max-width: 30px;}
}

/** 購物車第一步驟 **/
.shopping-car{margin:0 0 30px 0; padding:10px 0;}
.shopping-car ul{list-style:none; padding:0; margin:0;}
.shopping-car ul li{padding:15px 15px; margin:0;border-bottom: 1px #cccccc dashed;}
.shopping-car ul li .shopping-car-content{margin:0;}
.shopping-car ul li:first-of-type{border-bottom:0; padding:10px 15px;background: #222222;color: #ffffff;}
.shopping-car ul li:first-of-type .shopping-car-content{ text-align:center;}
.shopping-car ul li:first-of-type .shopping-car-content b{display:block;font-weight: 400;}
.shopping-car .shop-car-info{display:flex; vertical-align:middle; text-align:left; align-items:center;}
.shopping-car .shop-car-info a.pro-photo{width:70px; margin:0 15px 0 0;}
.shopping-car .shop-car-info .description{ margin:0px; color:#222222; flex:1; width:100%; text-align:left;}
.shopping-car .shop-car-info .description a{ display: block;color:#222222;}
.shopping-car .shop-car-info .description a:hover{ color:#003467;}
.shopping-car .shop-car-info .description .shop-car-info-title{ font-weight:400;}
.shopping-car .shop-car-info .description .shop-car-info-title a{ display: block;color: #222222;}
.shopping-car .shop-car-info .description .shop-car-info-title a:hover{color: #003467;}
.shopping-car .shop-car-info .description .spec{font-size:13px; color:#666;}
.shopping-car .shop-car-info-add{display:flex;  vertical-align:middle; text-align:left; align-items:center;}
.shopping-car .shop-car-info-add a.pro-photo{width:60px; margin:0 15px 0 0;}
.shopping-car .shop-car-info-add .description{ margin:0px; color:#222222; flex:1; width:100%; text-align:left;}
.shopping-car .shop-car-info-add .description .shop-car-info-title{font-weight:500;}
.shopping-car .shop-car-info-add .description .spec{font-size:13px; color:#666;}
.shopping-car .shop-car-price{display:block; height:100%; color:#222222; text-align:center;font-size: 16px;}
.shopping-car .shop-car-price .original-price{display:block; font-size:12px; text-decoration:line-through; color:#999;}
.shopping-car .shop-car-quantity{display:block;  text-align:center;font-size: 16px;}
.shopping-car .shop-car-subtotal{display:block;  color:#d50e0e; text-align:center;font-size: 16px;}
.shopping-car .shop-car-del{ vertical-align:middle; text-align:center;width: 100%;display: flex;justify-content: center;}
.shopping-car .shop-car-del a{display: flex;align-items: center;justify-content: center;margin: 0 auto;width: 40px;height: 40px; padding: 10px;border-radius: 5px; color:#003467; background: #ffffff;border: 1px #003467 solid;}
.shopping-car .shop-car-del a:hover{background: #003467;color: #ffffff;}
.shopping-car ul li.addcontainer{background-color:#eee; padding:15px ;}
.shopping-car ul li.addcontainer h1{background-color:#4697bf; margin:0 0 5px; padding:5px 10px;line-height:1.4; color:#fff; border-radius:3px;}
.shopping-car ul li.addcontainer b{color:#222222;}
.shopping-car ul li.addcontainer .shop-car-img img.pro-photo{margin:0 15px 0 0; width:90px; height:90px; padding:10px; border:1px #ccc solid;}
.shopping-car ul li.addcontainer .addc-price{font-size:18px; font-weight:500; color:#d50e0e; margin:0 3px;}
@media screen and (max-width:767px){
	.shopping-car ul li .shopping-car-content{padding:5px 0;}
	.shopping-car ul li:first-of-type{display:none;}
	.shopping-car .shop-car-price{text-align:right;}
	.shopping-car .shop-car-quantity{text-align:left; flex:1; order:1;}
	.shopping-car .shop-car-subtotal{text-align:right; flex:1; order:3; font-weight:500; font-size:18px;}
	.shopping-car .shop-car-del{order:2;justify-content: flex-end;}
	.shopping-car .shop-car-del a{margin: 0;}
    .shopping-car .shop-car-info-add{flex: initial;}
}

/** 總計 **/
.checkout-cart-summary{padding:10px 0;}
.checkout-cart-summary .subtotal{color:#222222; padding:5px; margin:0;}
.checkout-cart-summary .subtotal-name{font-weight:400; text-align:left;}
.checkout-cart-summary .subtotal-name .subtotal-quantity{font-weight:500;}
.checkout-cart-summary .subtotal-content{text-align:right;}
.checkout-cart-summary .subtotal-content input{height: 36px;padding: 5px 15px;width: calc(100% - 36px);border: 1px #dddddd solid;}
.checkout-cart-summary .total{display:flex; flex-wrap:wrap;  color:#222222; border-top:1px #dddddd solid; padding:5px; margin:10px 0 0 0;}
.checkout-cart-summary .toc{font-weight:500; color:#d50e0e; }
.discountCoupon{position:relative;}
.discountCoupon span{content:"X"; display:inline-flex;align-items: center;justify-content: center; background-color:#e4e4e4; width:36px; height:36px; margin:0; position:absolute; right:12px; top:0; font-size:12px;  text-align:center; cursor:pointer;}
.checkout-cart-summary .discountCoupon input{padding: 0 46px 0 10px;width: 100%;}
@media screen and (max-width:767px){
	.checkout-cart-summary .subtotal-name{padding:0;}
	.checkout-cart-summary .subtotal-content{padding:0;}
    .discountCoupon span{right:1px;}
}

/** 購物車第二步驟 **/
.section-body{margin:0 0 20px 0;}
.shopping-list-more{background-color:#ffffff;  text-align:center; padding:15px; display:block; width:100%; cursor:pointer; border-radius:3px; overflow:hidden;margin: 0 0 30px 0;}
.shopping-list-more i.fa.fa-question-circle{margin-left:5px; font-size:24px; color:#fa800a;}
.shopping-list-more:hover i.fa.fa-question-circle{color:#ffffff;}
.shopping-list-more:hover{background-color:#003467;color: #ffffff;}
.shopping-list-more .shopping-car{margin:20px 0 0 0;}
.shopping-list-toc{text-align:center; font-weight:500; color:#d50e0e;margin: 0 0 20px 0;}
.shopping-list-more .btn-warning{background: #fa800a;color: #ffffff;border: 0;margin: 0 5px;}

/** 頁次 **/
.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%;}
.footer{display: flex;font-size: 16px; color: #ffffff;line-height: 1.8;}
.footer .f-contact{flex: 1; background: #222222;position: relative;z-index: 1;padding: 3vw 0;}
.footer .f-contact:after{content: "";display: block;width: 200%;height: 100%;background: #222222;position: absolute;top: 0;left: -100%;z-index: -1;}
.footer .f-contact>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.footer .f-contact>ul>li{padding: 0;margin: 12px 30px 12px 0;width: calc(100%/2 - 30px);}
.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;}
.footer .f-contact .f-contact-mail{margin: 12px 0 0 0;}
.footer .f-contact .f-contact-mail a{display: inline-block; color: #ffffff;}
.footer .f-contact .f-contact-mail a:hover{color: #fa800a;}
.footer .sitemap{flex: 1; background: #333333;position: relative;z-index: 1;border-left: 1px #444444 solid;}
.footer .sitemap:after{content: "";display: block;width: 200%;height: 100%;background: #333333;position: absolute;top: 0;right: -100%;z-index: -1;}
.footer .sitemap>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;height: 100%;}
.footer .sitemap>ul>li{padding:3vw 15px;margin:0;width: calc(100%/3);border-right: 1px #444444 solid;}
.footer .sitemap>ul>li .sitemap-title{font-size: 20px; color: #ffffff;position: relative;padding: 0 0 6px 0;margin: 8px 0 14px 0}
.footer .sitemap>ul>li .sitemap-title:after{content: "";display: block;width: 36px; height: 1px;background: #ffffff;position: absolute;bottom: 0;left: 0;}
.footer .sitemap>ul>li .sitemap-content{}
.footer .sitemap>ul>li .sitemap-content>ul{list-style: none;padding: 0;margin: 0;}
.footer .sitemap>ul>li .sitemap-content>ul>li{padding: 0 0 0 22px;margin:3px 0;position: relative;}
.footer .sitemap>ul>li .sitemap-content>ul>li:after{content: "";display: block;width: 4px;height: 4px; position: absolute;top: 12px;left: 5px;background: #ffffff;}
.footer .sitemap>ul>li .sitemap-content>ul>li a{display: block; color: #ffffff;}
.footer .sitemap>ul>li .sitemap-content>ul>li 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 15px;}
    .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{flex: initial;width: 100%;padding: 30px 0; }
    .footer .f-contact:after{width: 200%;left: -50%;}
    .footer .f-contact>ul>li{margin:12px 15px;width: calc(100%/2 - 30px);}
    .footer .f-contact>ul>li .f-contact-title{font-size: 17px; }
    .footer .f-contact .f-contact-mail{margin: 12px 15px 0 15px;}
    .footer .sitemap{flex: initial;width: 100%;border-left: 0;}
    .footer .sitemap:after{width: 200%;right: -50%;}
    .footer .sitemap>ul>li{padding:30px 15px;}
    .footer .sitemap>ul>li:last-of-type{border-right: 0;}
    .footer .sitemap>ul>li .sitemap-title{font-size: 17px;}
    .copyright{font-size: 12px; }
}
@media screen and (max-width:767px){
    .footer .f-contact>ul>li{margin:10px 10px;width: calc(100%/2 - 20px);}
    .footer .f-contact .f-contact-mail{margin: 10px 10px 0 10px;}
    .footer .sitemap>ul>li{padding:30px 10px;}
    .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{margin:10px 0;width:100%;}
    .footer .f-contact .f-contact-mail{margin: 10px 0 0 0;}
    .footer .sitemap>ul>li{padding:10px 0;width: 100%;border-right: 0;border-bottom: 1px #444444 solid;}
    .footer .sitemap>ul>li:last-of-type{border-bottom: 0}
    .footer .sitemap>ul>li .sitemap-content>ul{display: flex;flex-wrap: wrap;}
    .footer .sitemap>ul>li .sitemap-content>ul>li{margin:3px;width: calc(100%/2 - 6px);}
}

/** 購物車模組 **/
#sidr-left{font-size: 14px; display:none; position:absolute; position:fixed; top:0; height:100%; z-index:999999; width:260px; overflow-y:auto;  background:#222222; color:#fff;box-shadow:inset 0 0 15px 0 rgba(0,0,0,.2);}
#sidr-left *{font-size: 14px;  color:#fff;}
#sidr-left .cart-header{padding:11px 15px;font-size: 18px;  text-align:center; position:relative;background: #fa800a;}
#sidr-left .cart-header .cross{position:absolute; top:5px; right:10px;}
#sidr-left .cart-header .fa{font:20px FontAwesome;}
#sidr-left .ng-hide{padding:15px; text-align:center;}
#sidr-left .cart-items{padding:15px;}
#sidr-left .cart-item{margin:10px 0; display:flex;}
#sidr-left .cart-item .product-link{width:45px;}
#sidr-left .cart-item .product-link img{width:100%;}
#sidr-left .cart-item .cart-item-content{flex:1; margin:0 10px;}
#sidr-left .cart-item .cart-item-content .title{font-size:13px;}
#sidr-left .cart-item .cart-item-content .ng-scope{font-size:13px;}
#sidr-left .cart-item .cart-item-content .price-details{font-size:13px;}
#sidr-left .cart-item .cart-item-content .ng-binding{font-size:13px;}
#sidr-left .cart-item a.remove{width:30px; font-size:14px; color:#ddd; font-family:Arial, "Microsoft JhengHei";}
#sidr-left .cart-item a.remove:hover{color:#c0392b;}
#sidr-left .cart-chkt-btn{width:100%; display:block; padding:15px;}
#sidr-left .cart-chkt-btn button{width:100%; font-size:15px; padding:10px 15px;  text-align:center; background-color:#ffffff; border-radius:3px;border: 0;color: #222222;}
#sidr-left .cart-chkt-btn button:hover{background-color:#fa800a;color: #ffffff;}
.modal-backdrop{position:fixed; top:0; right:0; bottom:0; left: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;}
}
