@charset "utf-8";

/*
 * CSS Document 
 * ==========================================================================
 * 版權所有 2014 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: 瑀倫 怡伶 小玉 $
 * $Date: 2014-7-9 (五) $
*/
body,
html { font-size: 16px; background: #fff; }

/* =======================  Global Set.  ==================== */
.ulSet,
.ulSet li { margin: 0; padding: 0; list-style: none; }
#gWrap { background: url(../images/bg_log.png) #fff; }

/* Header */
.header { background: url(../images/header_bg.png) repeat-x; text-align: left; font-size: 0; }
.header .container { font-size: 0; text-align: left; }
.header .links { font-size: 0; }
.header .logo { margin: 23px 20px 12px 0; width: 155px; height: 55px; display: inline-block; vertical-align: middle; }
.header .logo a { display: inline-block; width: 100%; height: 100%; margin: 0px }
.header .logo a img { max-width: 100%; }
.header .topImg { width: calc(100% - 175px - 170px); max-width: 780px; display: inline-block; vertical-align: middle; }
.header .topImg .img { display: inline-block; margin: 0 2px; width: calc(20% - 4px); text-align: center; }
.header .topImg .img img { width: 100%; }
.header .link-box { width: 170px; display: inline-block; }
.header .link-box .link { font-size: 14px; color: #000; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); margin: 0 2px; padding: 10px 0px; display: inline-block; vertical-align: top; }

/* Nav */
.header .menuBox { background: url(../images/header_bg_bar.png) repeat-x; background-size: auto 100%; border-top: 1px solid #028AD1; border-bottom: 1px solid #028AD1; text-align: center }
.header .menuBox nav { width: calc(100% - 160px); display: inline-block; vertical-align: middle; }
.header ul.nav-menu { font-size: 0; }
.header ul.nav-menu > li { position: relative; display: inline-block; vertical-align: top; }
.header ul.nav-menu > li > a { display: inline-block; padding: 7px 16px; color: #fff; text-shadow: 1px 1px 1px rgba(158, 158, 158, 1); text-align: center; border: none; text-decoration: none; font-size: 17px; margin-top: 0; }
.header ul.nav-menu > li:not(:last-child) > a { background: url(../images/nav_gap.png) right center no-repeat; }
.header ul.nav-menu > li > a:hover,
.header ul.nav-menu > li > a:active,
.header ul.nav-menu > li.current > a { text-shadow: 1px 1px 1px rgba(50, 50, 50, 1); }
.header ul.nav-sub { display: none; position: absolute; min-width: 165px; top: 37px; z-index: 99; padding: 10px 0; background: #fff; border: 1px solid #ccc; border-top: none; box-sizing: border-box; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; z-index: 9999; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); left: 50%; }
.header ul.nav-sub > li > a { text-decoration: none; display: block; font-size: 15px; padding: 6px 10px; text-decoration: none; color: #000; zoom: 1; text-align: left; }
.header ul.nav-sub > li > a:hover { background: #efefef; }
.header ul.nav-sub > li > a>span { color: #00294e; font-size: 0.9rem; }
.header ul.nav-sub > li > a:hover>span { text-decoration: underline }
.header ul.nav-sub > li > a.picBox { height: auto; width: 100%; overflow: hidden; }
.header ul.nav-sub > li > a.picBox:hover { opacity: 0.9; }
.header ul.nav-sub > li > a:hover,
.header ul.nav-sub > li > a:active,
.header ul.nav-sub > li > a.current { opacity: 0.9; }
.header .boxR { width: 160px; display: inline-block; vertical-align: middle; overflow: hidden; }
@media only screen and (max-width:1199px) {
	.header .menuBox { width: 100%; text-align: center }
}
@media (min-width:992px) {
	.header ul.nav-menu > li:hover ul.nav-sub { display: block; animation: fadeIn 0.5s ease }
	.header ul.links { display: none; }
}
@media (max-width:1199px) {
	.header { border-bottom: 2px solid #028AD1; background-position: center -25px; }
	.header .topImg { display: none }
	.header .logo { margin: 18px 20px 6px 20px; width: 130px; height: 40px }
	.header .menuBox { border: 0; }
	.header .menuBox nav { border: none; position: absolute; width: 100%; background: rgb(42, 171, 224); margin: 0; opacity: 0; top: 80px; left: 0; height: 0; overflow: hidden; transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; z-index: 999 }
	.header .menuBox nav.open { display: block; height: auto; max-height: calc(100vh - 70px); top: 66px; overflow: hidden; opacity: 1; }
	.header ul.links { font-size: 0; top: 15px; display: inline-block; position: absolute; height: 40px; width: 40px; line-height: 40px; right: 20px; }
	.header ul.links li { display: inline-block; position: relative; }
	.header ul.links li a { display: block; position: relative; width: 40px; height: 40px; background-position: center center; background-repeat: no-repeat; opacity: .7; transition: all .3s ease; -ms-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
	.header ul.links li:last-child { display: inline-block; }
	.header ul.links li a.nav-btn span { display: block; position: absolute; width: 25px; height: 3px; background: #004eaa; left: 6px; transition: all .3s linear; -ms-transition: all .3s linear; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; }
	.header ul.links li a.nav-btn span:nth-child(1) { top: 10px; }
	.header ul.links li a.nav-btn span:nth-child(2) { top: 17px; }
	.header ul.links li a.nav-btn span:nth-child(3) { top: 24px; }
	.header ul.links li a.nav-btn span:nth-child(4) { width: 30px; top: 17px; left: 6px; opacity: 0; transform: rotate(45deg) scale(0); -ms-transform: rotate(45deg) scale(0); -moz-transform: rotate(45deg) scale(0); -webkit-transform: rotate(45deg) scale(0); }
	.header ul.links li a.nav-btn span:nth-child(5) { width: 30px; top: 17px; left: 6px; opacity: 0; transform: rotate(-45deg) scale(0); }
	.header ul.links li a.nav-btn.open span:nth-child(1),
	.header ul.links li a.nav-btn.open span:nth-child(3) { left: 29px; opacity: 0; }
	.header ul.links li a.nav-btn.open span:nth-child(2) { left: 9px; opacity: 0; }
	.header ul.links li a.nav-btn.open span:nth-child(4) { opacity: 1; transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -moz-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); }
	.header ul.links li a.nav-btn.open span:nth-child(5) { opacity: 1; transform: rotate(-45deg) scale(1); -ms-transform: rotate(-45deg) scale(1); -moz-transform: rotate(-45deg) scale(1); -webkit-transform: rotate(-45deg) scale(1); }
	.header ul.nav-menu > li { display: block; width: 100%; }
	.header ul.nav-menu > li > a { height: 50px; width: 100%; margin: 0 5px; text-align: left; padding: 0 25px; margin: 0; line-height: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); background: transparent; }
	.header ul.nav-sub { position: relative; overflow: hidden; top: 0; display: none; width: 100%; height: 0; padding: 10px 30px; margin-bottom: 0; }
	.header ul.nav-sub.open-s { display: block; height: auto; top: 0; padding: 0; width: 100%; box-shadow: none; }
	.header ul.nav-sub > li { height: 40px; width: 100%; padding: 0; margin: 0; overflow: hidden; border-bottom: 1px solid #efefef; }
	.header ul.nav-sub > li.img { display: none; }
	.header ul.nav-sub > li.smallNav:after { display: none; }
	.header ul.nav-sub > li > a { text-align: left; height: 40px; line-height: 40px; text-decoration: none; padding: 0 40px; border-bottom: 1px solid rgba(255, 255, 255, .2); margin-bottom: 5px; font-size: 16px; }
	.header .boxR { position: absolute; right: 70px; top: 20px; }
	.header .boxR .link { color: #333; }
	.header .link-box { position: absolute; right: 250px; margin-top: 15px; }
}
@media (max-width:767px) {
	.header .logo { width: 110px; height: 30px; margin: 18px 0 12px; }
	.header .link-box { display: none; }
	.header .menuBox nav.open { top: 62px; }
}

/* footer */
.footer { position: relative; width: 100%; padding-top: 30px }
.footer .bg { width: 100%; bottom: 0; background: #2aabe0; }
.footer .footerBox { margin: 0 auto; position: relative; z-index: 0 }
.footer .footerBox:before { content: ''; position: absolute; width: 100%; height: 100%; background: url(../images/footer_bg.png) no-repeat center top; background-size: 100% auto; top: -30px; left: 0; z-index: -1; }
.footer .footerBox .topBox { width: 90%; border-bottom: 1px solid #1397cd; margin: 0 auto; padding: 0 0 10px; }
.footer .footerBox ul { float: left; }
.footer .footerBox ul,
.footer .footerBox li { display: inline-block; padding: 0; margin: 0 10px 0 0; }
.footer .footerBox li { margin: 0; float: left; display: block; }
.footer .footerBox li>a { color: #fff; text-decoration: none; font-size: 16px; line-height: 2 }
.footer .footerBox .topBox .emailBox { float: right; width: 230px; height: 25px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background: #fff; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2) inset; }
.footer .footerBox li>a>span { padding: 0 12px; font-weight: bold; }
.footer .footerBox .topBox .emailBox .email { border: none; width: 172px; margin: 2px 12px 3px; height: 20px; }
.footer .footerBox .topBox .emailBox .submit { border: none; background: #6ecae6; width: 21px; height: 21px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #fff; font-family: arial; font-weight: bold; text-align: center; }
.footer .footerBox .botBox { font-size: 16px; width: 90%; border-top: 1px solid #55bce6; margin: 0 auto; padding: 8px 0; color: #fff; }
.footer .footerBox .link { color: #0271aa; display: inline-block; width: 120px; margin-left: 215px; }
@media only screen and (max-width:991px) {
	.footer { width: 100%; }
	.footer .bg { width: 100%; height: auto; }
	.footer .footerBox { width: 100% }
	.footer .footerBox .topBox { width: calc(100% - 30px); text-align: center; padding-bottom: 10px }
	.footer .footerBox ul { width: 100%; margin: 0 auto 10px; float: none; }
	.footer .footerBox li { display: inline-block; float: none; }
	.footer .footerBox .topBox .emailBox { margin: 5px auto; float: none; }
	.footer .footerBox .botBox { width: calc(100% - 30px); padding: 5px 10px; text-align: center }
}
@media only screen and (max-width:767px) {
	.footer .footerBox .topBox .emailBox { width: 90%; height: 40px; border-radius: 20px; }
	.footer .footerBox .topBox .emailBox .email { height: 40px; width: calc(100% - 60px); vertical-align: middle; margin: 0 5px 0 10px; }
	.footer .footerBox .topBox .emailBox .submit { width: 36px; height: 36px; border-radius: 36px; line-height: 36px; vertical-align: middle; }
	.footer .footerBox .botBox { width: 100%; font-size: 15px; padding-bottom: 2rem; }
	.footer .footerBox:before { top: -22px; background-size: auto auto; }
}

/* =======================   Index Set.  ==================== */

/* iBanner */
#iMainWrap { width: 100%; overflow: hidden; position: relative; margin-bottom: 18px; }
#iBanWrap { width: 100%; overflow: hidden; z-index: 0; }
#iBanWrap .bx-wrapper .bx-pager { z-index: 10 }
#iBanWrap .imgList { position: relative !important; }
#iBanWrap .pic { position: relative; overflow: hidden; position: relative; padding-bottom: 17.44%; }
#iBanWrap .pic>a { display: block; }
#iBanWrap .iBanHref { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 335px; max-height: 335px; overflow: hidden; z-index: 100; }
#iBanWrap .fullBGResize { width: 100%; outline: none; position: absolute; }
#iBanWrap .slick-dots { bottom: 40px; }
.mask { position: absolute; bottom: 0px; width: 100%; width: 100%; height: 41px; margin: 0 auto; background: url(../images/ban_mask.png) no-repeat center bottom; z-index: 10;/* box-shadow: 0px 4px 4px rgba(0,0,0,0.1) inset; */ }
#iContent { position: relative; margin: 0 auto 50px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background: #fff; padding-top: 20px; padding-bottom: 20px; }
#iContent .iTi { background: url(../images/i_news_ti.png) no-repeat left 5px; font-size: 1.2em; font-weight: 500; padding-left: 35px; margin: 5px 0 10px; line-height: 53px; }
#iContent .iTi span { font-size: 0.9em; color: #B2B2B2; padding-left: 7px; display: inline-block; width: 100px; }
#iContent .iTi span.event { background: url(../images/i_new.png) right -5px no-repeat; width: 160px; }
#iContent .iTi span.hot { width: 196px; background: url(../images/i_hot.png) right -5px no-repeat; }
#iContent .slogan { font-size: 20px; color: #3294DF; }
#iContent .slogan .icon { width: 45px; height: 45px; background: url(../images/slogan_icon.png) no-repeat; background-size: contain; display: inline-block; vertical-align: middle; margin-right: 10px; }
@media (max-width:991px) {
	#iContent .slogan { width: 100%; line-height: 1.4; padding-left: 18px; }
	#iContent { padding-top: 55px; }
}
@media (max-width:767px) {
	#iContent { padding-top: 20px; }
	#iContent .slogan { font-weight: bold; padding: 6px 6px 6px 40px; margin-bottom: 10px; font-size: 17px; }
	#iContent .slogan .icon { width: 35px; height: 35px; position: absolute; left: 15px; }
	#iContent .selectbox { margin-bottom: 10px; height: 40px; line-height: 38px; }
}
#iContent .iMore { width: 67px; float: right; display: block; margin-top: -48px; position: relative; z-index: 1; }
#iContent .iMore span.txt { line-height: 27px; vertical-align: text-bottom; display: inline-block; color: #666; }
#iContent .iMore span.icon { display: inline-block; margin-left: 5px; width: 16px; height: 16px; border: 1px solid #666; background: url(../images/icon_aw3.png) center center no-repeat; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
#iContent .iMore:hover span.icon { border: 1px solid #21AEFF; background: url(../images/icon_aw3.png) center center no-repeat #efefef; }
#iContent .iMore:hover span.txt { color: #21AEFF }
#iContent .box { display: inline-block; width: calc(100%/3 - 10px); border: #d2d2d2 1px solid; box-sizing: border-box; padding: 8px 8px 20px; margin: 0 5px 20px; }
#iContent .box.noMar { margin-right: 0; }
#iContent .box .pic { background: url(../images/i_event_bg.png) no-repeat center bottom; display: block; padding-bottom: 10px; background-size: 90% auto; }
#iContent .box .pic:hover { opacity: 0.9; }
#iContent .box .pic img { width: 100%; border: 1px solid #fff; }
#iContent .box .info .date { width: 60px; float: left; padding: 15px; font-size: 1.7em; font-family: arial; font-weight: bold; text-align: center; }
#iContent .box .info .date span { display: block; font-size: 0.5em; border-top: 1px solid #ccc; padding-top: 5px; }
#iContent .box .name { display: block; float: right; width: calc(100% - 64px); margin-top: 20px; line-height: 25px; height: 50px; overflow: hidden; font-size: 1.125rem; }
#iContent .box .name:hover { color: #000; }
#iBest { margin: 0 auto; background: url(../images/i_hot_bg.png) no-repeat center bottom; padding: 20px 20px 40px; background-size: 100% auto; }
#iBest .proBox { position: relative; overflow: hidden; padding: 0 4px; }
#iBest .proBox .pic { margin: 0 auto; padding: 8px; background: #fff; border: #d2d2d2 1px solid; overflow: hidden; display: block; }
#iBest .proBox .pic img { width: 100%; max-width: 100%; height: auto; }
#iBest .proBox .sTi { overflow: hidden; display: block; text-align: center; padding: 0 5px; height: 19px; width: 90%; margin: 0 auto; text-overflow: ellipsis; white-space: nowrap; }
#iBest .proBox .hover { display: block; width: 100%; height: 100%; background: url(../images/pic_hover.png) no-repeat center center; overflow: hidden; position: absolute; top: -200px; left: 0; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
#iBest .proBox:hover .hover { top: 0; }
.slick-list { z-index: 1; }
.slick-slide a { outline: none; }

/*dots*/
.slick-dots { position: absolute; left: 50%; bottom: -50px; margin: 0; padding: 0; z-index: 2; font-size: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.slick-dots li { display: inline-block; vertical-align: middle; margin: 0 3px; }
.slick-dots li button { width: 8px; height: 8px; border-radius: 8px; padding: 0; border: 1px solid #ccc; position: relative; display: inline-block; vertical-align: middle; background: transparent; outline: none; }
.slick-dots li.slick-active button { background: #fc9e00; }
@media (max-width:1199px) {
	#iContent { padding-bottom: 50px; }
}
@media (max-width:990px) {
	#iContent { width: calc(100% - 30px); padding-bottom: 20px; margin: 0 15px 50px }
	#iBest .slick-dots { bottom: -40px }
}
@media (max-width:767px) {
	#iContent { padding-bottom: 0px; margin: 0 15px 30px }
	#iBest .slick-dots { bottom: -30px }
	#iContent .iMore span.txt { font-size: 15px; }
	#iContent .box .name { font-size: 16px; height: auto; }
}
#iBanWrap .bx-wrapper .bx-pager { bottom: 0 }
.selectbox { display: inline-block; line-height: 30px; height: 30px; }
.selectbox select { border: 1px solid #98CEEC; line-height: 26px; height: 27px; width: 175px; font-size: 14px; }
.selectbox select.tel { width: 60px; }
@media only screen and (max-width:1199px) {
	#iBest { padding-bottom: 30px; }
}
@media only screen and (max-width:992px) {
	#iBest { padding: 10px 20px 20px }
}
@media only screen and (max-width:767px) {
	#iBest { padding-bottom: 20px; }
	#iContent .box { width: 100%; margin: 0 auto 20px; padding: 8px; }
	#iContent .box .info .date { padding: 5px; }
	#iContent .box .name { margin-top: 10px; }
	#iContent .iTi { margin: 0; background-size: 20px auto; background-position: left 10px; padding-left: 25px; line-height: 44px; }
	#iContent .iTi span.event { font-size: 10px; width: 145px; }
	#iContent .iTi span.hot { font-size: 10px; width: 153px; line-height: 44px; }
	#iBest { padding: 0px 20px 35px }
}

/* 頁碼&左右箭頭共用 */
#iBanWrap .slick-arrow,
#iContent .slick-arrow { position: absolute; top: 50%; margin-top: -45px; outline: none; text-indent: -9999px; z-index: 10; cursor: pointer; padding: 0; border-radius: 45px; width: 45px; height: 45px; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); border: 0; }
#iBanWrap .slick-arrow:before,
#iContent .slick-arrow:before { content: ""; position: absolute; display: block; left: 17px; width: 12px; height: 12px; top: 18px; border-width: 0 0 2px 2px; border-style: solid; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); border-color: #000; -o-transition: all 0.5s cubic-bezier(0.5, 0, 0.3, 0.5); -webkit-transition: all 0.5s cubic-bezier(0.5, 0, 0.3, 0.5); transition: all 0.5s cubic-bezier(0.5, 0, 0.3, 0.5); }
#iBanWrap .slick-arrow.slick-prev:before,
#iContent .slick-arrow.slick-prev:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#iBanWrap .slick-arrow.slick-prev { left: 0px; }
#iContent .slick-arrow.slick-prev { left: -20px; }
#iBanWrap .slick-arrow.slick-next { right: 0px; }
#iContent .slick-arrow.slick-next { right: -20px; }
@media only screen and (max-width:767px) {
	#iBanWrap .slick-arrow { width: 40px; height: 40px; margin-top: -20px; }
	#iBanWrap .slick-arrow:before { top: 15px; left: 15px; }
}

/* =======================  Page Set.  ==================== */
.pWrap { position: relative; margin: 20px auto 30px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background: #fff; padding: 15px 15px 18px; }
.pMain { float: right; width: calc(80% - 20px - 10px); margin-right: 10px }
.pContent { overflow: hidden; min-height: 500px; }
.locatBox { margin: 20px auto 15px; padding-bottom: 11px; background: url('../images/line.png') no-repeat bottom; background-size: 100% 7px; }
.locatBox h4 { display: inline-block; font-size: 1.35em; background: url('../images/icon_dot_big.png') no-repeat left 8px; margin: 0 10px 0 0; padding: 0 0 0 3%; font-weight: bold; line-height: 25px; padding-left: 20px; }
.keywords { display: inline-block; width: 202px; margin: 0 10px; border: 1px solid #28B3EC; border-radius: 26px; padding: 0 0 0 30px; overflow: hidden; background: url('../images/search.png') 10px center no-repeat; }
.keywords .input { border: none; width: calc(100% - 50px); background: transparent; }
.keywords .searchBtn { width: 50px; height: 26px; background: url('../images/g_ti_bg.jpg') repeat-x; border: none; color: #fff; }
.locatBox .location { float: right; font-size: 15px; text-align: right; }
.locatBox .location a { color: #6D6D6D; text-decoration: none; padding: 0 5px; }
.locatBox .location a:hover { color: #000; }
.locatBox .location a.home { display: inline-block; width: 20px; height: 20px; padding: 0; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: #989898; text-align: center; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); line-height: 19px; }
.locatBox .location a.home:hover { background: #444 }
@media only screen and (max-width:991px) {
	.pWrap { width: calc(100% - 50px); padding: 20px; float: none; }
	.pMain { width: 100%; float: none; }
	.pMain .locatBox { width: auto; margin: 0; }
	.pMain .locatBox .location { margin: 0; }
	.pContent { width: 100%; min-height: auto; }
	.locatBox .location { margin-bottom: 10px; }
}
@media only screen and (max-width:767px) {
	.pWrap { width: calc(100% - 40px); margin-bottom: 25px; }
	.pMain .locatBox .location { float: none; width: 100%; text-align: left; margin: 0; line-height: 20px; font-size: 14px; }
	.locatBox h4 { margin-top: 10px; }
}
@media only screen and (max-width:640px) {
	.keywords { display: block; width: 100%; float: none; margin: 20px auto; }
}

/*  aside  */
h3 { background: url('../images/h3_ti.png') left bottom no-repeat; margin: 0 0 10px 0; padding: 20px 0 10px 0; font-size: 1.45em; }
h3 span { color: #B2B2B2; font-size: 0.6em; padding: 0 0 0 8px; }
aside { position: relative; float: left; width: 20%; margin-right: 20px; padding: 10px 25px 10px 10px; background: url(../images/aside_bg.png) top right no-repeat; }
aside ul,
aside li { margin: 0; padding: 0; font-family: '新細明體', serif; }
aside .menu { list-style: none; }
aside .menu a { text-decoration: none; color: #000; }
aside .menu>li { margin: 0; width: 143px; padding: 5px 0; }
aside .menu>li:not(:last-child) { border-bottom: 1px dotted #ccc; }
aside .menu .one { padding: 5px 0 5px 24px; margin: 0; width: 140px; padding-left: 25px; background: url(../images/icon_dot_s.png) no-repeat 5px 8px; display: block; }
aside .menu .one:hover,
aside .menu .one.on { background: url(../images/li_a_bg.png) no-repeat; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
aside .menu .second { margin-left: 13px; list-style: none; margin: 5px 0; }
aside .menu .second> li { margin: 0; width: 143px; padding: 3px 0; }
aside .menu .second .two { padding: 8px 0 8px 24px; color: #666; }
aside .menu .second .two:hover,
aside .menu .second .two.on { color: #28B3EC; }
aside .menu .third { margin-left: 46px; list-style: none; margin: 5px 0; margin-bottom: 5px; }
aside .menu .third> li { margin: 0; width: 140px; padding: 3px 0; margin-left: 42px; }
aside .menu .third .three { color: #848484; }
aside .menu .third .three.on { color: #222; }
aside .picBox { display: block; background: url(../images/def_200x140.png) center center no-repeat #F9F9F9; border: 1px solid #F2F2F2; background-size: contain; margin: 10px 0; }
aside .picBox img { width: 100%; }
aside .logoBox { position: absolute; bottom: 0; width: 161px; margin-top: 10px; height: 39px; background: url(../images/aside_logo.png); }
@media (max-width:991px) {
	h3 { margin-bottom: 10px; padding-top: 0 }
	aside { background: transparent; width: 100%; float: none; padding: 0; }
	aside .picBox { display: none; }
}

/* List Set ---------------------------------------------------------------- */
.showBox { width: 100%; text-align: right; margin-bottom: 10px; }
.iconGrid,
.iconTab {padding-left: 20px; display: inline-block; height: 15px; width: 50px; color: #A4A4A4; text-decoration: none; margin: 0px 14px 0 0; font-size: 14px; line-height: 15px; }
.iconGrid { background: url(../images/grid.png) no-repeat; }
.iconTab { background: url(../images/table.png) no-repeat; }
.iconGrid:hover,
.iconTab:hover,
.iconGrid.on,
.iconTab.on { background-position: 0 -15px; color: #000 }
#proList .proBox { position: relative; display: inline-block; vertical-align: top; width: calc(100%/3 - 24px); font-size: 16px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25); border-radius: 5px; background: #fff; box-sizing: content-box; overflow: hidden; margin: 10px; padding: 0 0 15px 0; line-height: 16px; }
#proList .proBox img { width: 100%; }
#proList .proBox .new { position: absolute; width: 55px; height: 34px; background: url(../images/icon_new.png)no-repeat; overflow: hidden; z-index: 10; }
#proList .proBox .hot { position: absolute; width: 55px; height: 34px; background: url(../images/icon_hot.png) no-repeat; overflow: hidden; z-index: 10; }
#proList .proBox .pic { display: block; width: 90%; margin: 0 auto; }
#proList .proBox .pic img { width: 100%; }
#proList .proBox .txtBox { margin-top: 15px; height: 30px; }
#proList .proBox .ti { color: #666; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #333; margin-left: 10px; font-weight: bold; line-height: 30px; display: inline-block; font-size: 16px; }
#proList .proBox .ti.center { display: block; text-align: center; margin: 5px auto; }
#proList .proBox:hover .ti { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
#proList .proBox .hover { display: block; width: 100%; height: 100%; background: url(../images/pic_hover.png) no-repeat center center; overflow: hidden; position: absolute; top: -100%; left: 0; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
#proList .proBox .small { width: 73px; margin-right: 10px; color: #666; float: right; line-height: 30px; }
#proList .proBox .txt { margin: 5px 10px; font-size: 14px; color: #666; line-height: 1.5rem;  overflow: hidden; }
#proList .proBox:hover .hover { top: -10%; }
#proList .proBox .btn { width: 80px; display: block; margin: 0px auto; padding: 2px 0; }
#proList .center { text-align: center }
@media (max-width:991px) {
	#proList .proBox .txt { font-size: 15px; }
}
@media (max-width:767px) {
	#proList .proBox { width: calc(100%/2 - 22px); }
}
@media (max-width:640px) {
	#proList .proBox { width: calc(100%/2 - 12px); margin: 5px 4px; }
	#proList .proBox .txt { height: auto; }
}
@media (max-width:400px) {
	#proList .proBox { width: calc(100% - 28px); margin-bottom: 10px; height: auto; padding: 15px 10px; }
}

/* PageNum Set ---------------------------------------------------------------- */
#pageLink { clear: both; margin: 30px 0px; text-align: center; font-family: "Century Gothic", Helvetica, Arial, PMingLiU; color: #999; overflow: hidden; }
#pageLink a { text-decoration: none; color: #333; margin-right: 5px; padding: 3px; }
#pageLink a:hover { color: #ae3784; }
#pageLink a.in { color: #EBA000; font-weight: bold; }

/* Search Box */
.searchWrap { position: relative; float: left; width: 100%; height: 35px; background: url(../images/g_ti_bg.jpg) repeat-x; -moz-border-radius: 15px 15px 0px 0px; -webkit-border-radius: 15px 15px 0px 0px 0px; border-radius: 15px 15px 0px 0px; margin-bottom: 20px }
.searchWrap .ti { float: left; width: 80px; height: 30px; margin: 0 10px 0 20px; background: url(../images/search_ti.png)0 10px no-repeat; }
.searchWrap form { float: left; margin: 8px 0 0 0; width: 570px; overflow: hidden; }
.searchWrap form select { width: 160px; height: 22px; margin: 0 7px 0 0; border: 1px solid #aaa; background: #FFF; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
.searchWrap form .key { width: 160px; height: 18px; border: 1px solid #aaa; padding: 1px 4px; margin: 0; vertical-align: top; border-right: none; outline: none; background: #fff; }
.searchWrap form .key { width: 150px; height: 22px; border: 1px solid #aaa; padding: 2px 4px; margin: 0; vertical-align: top; border-right: none; outline: none; background: #fff; }
.searchWrap form .btnSend { width: 60px; height: 22px; border: 1px solid #aaa; padding: 0; margin: 0; vertical-align: top; border-left: none; background: url(../images/icon_search.jpg) 5px 5px no-repeat #fff; text-indent: -9999px; cursor: pointer; }
@media (max-width:991px) {
	.searchWrap { width: 100%; float: none; }
	.searchWrap form { width: calc(100% - 115px) }
	.searchWrap form .key { width: 135px }
}

/* Button */
.btn { display: block; padding: 5px 30px; font-size: 16px; color: #FFF; background: url(../images/g_ti_bg.jpg) repeat-x; text-align: center; text-decoration: none; opacity: 0.8; margin: 0 auto; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); border: none; }
.btn:hover { opacity: 1; }
.btn.cart,
.btn.blue,
.btn.ship { margin: 0 10px 0 0; display: inline-block; border: 1px solid #c64730; background: #e54e0e; width: initial; padding: 2px 10px; border-radius: 5px; }
.btn.ship { background: #deba07; border: 1px solid #c99624; padding: 1px 10px; }
.btn.blue { background: #009ddb; color: #fff; border: 1px solid #0380b2; padding: 1px 10px; }
.btn.cart.center { text-align: center; margin: 30px auto 50px; float: none; display: block; }
.btn.back { width: 150px; margin-bottom: 20px; padding: 0px 30px 0px 20px; height: 36px; line-height: 36px }
@media (max-width:640px) {
	.btn.back { margin-bottom: 40px; }
}

/* =======================  Product Set.  ==================== */
.noData { margin-top: 100px }
h3 { font-weight: bold; }
.tab-wrap { text-align: center; }
.tab-wrap .tab { display: inline-block; font-size: 0; padding: 0; vertical-align: middle; }
.tab-wrap .tab>li { font-size: 16px; padding: 0; margin: 0 10px 5px 0; vertical-align: top; border-bottom: 1px dotted #ccc }
.tab-wrap .tab>li a.one { padding: 5px 0 5px 24px; color: #000; text-align: left; margin: 0; width: 140px; padding-left: 25px; background: url(../images/icon_dot_s.png) no-repeat 5px 8px; display: block; }
.tab-wrap .tab>li a.one.on { background: url(../images/li_a_bg.png) center center no-repeat #169dd4; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.tab-wrap .tab>li a.two { display: block; padding: 3px 0 3px 35px; color: #666; text-align: left; }
.tab-wrap .tab>li a.two.on { color: #27B6F1 }
.tab-wrap .tab>li a.two:hover { color: #27B6F1 }
.tab-wrap .tab>li a.one.on,
.tab-wrap .tab>li a.one:hover { background: url(../images/li_a_bg.png) no-repeat center center #169dd4; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.tab-wrap .tab>li .second> li>a { font-size: 15px; }
@media (min-width:992px) {
	.tab-wrap .tab { display: block !important; }
	.tab-wrap .toggle { display: none !important; }
}
@media (max-width:1199px) {
	.tab-wrap .tab>li a.one { width: auto; padding: 10px 30px; }
}
@media (max-width:991px) {
	.tab-wrap { margin: 0 auto 0px; }
	.tab-wrap .toggle { display: block !important; border-radius: 5px; position: relative; transition: all 0.3s ease; color: #fff; z-index: 9; text-align: center; font-size: 16px; text-align: center; cursor: pointer; width: 100%; background: #169ed5; padding: 8px; margin: 0 }
	.tab-wrap .tab { display: none; margin: 0 auto; z-index: 99; background: #fff; width: 100%; border: 1px solid #ccc; border-radius: 5px; font-size: 15px; }
	.tab-wrap .tab>li { width: 100%; margin: 0; }
	.tab-wrap .tab>li a.one { width: 100%; background: url(../images/icon_dot_s.png) no-repeat 11px 13px; }
	.tab-wrap .tab>li.current a.one,
	.tab-wrap .tab>li a.one:hover { background: url(../images/li_a_bg.png) no-repeat #169ed5; border-radius: 5px 5px 0 0; }
	.tab-wrap .tab>li .second { display: none }
	.tab-wrap .tab>li a.one.on+.second { display: block }
	.tab-wrap .tab>li.current .second { display: block }
}

#proView { position: relative; font-size: 0 }
#proView .leftBox,
#proView .rightBox { font-size: 16px; display: inline-block; vertical-align: top; margin: 0 10px; width: calc(50% - 20px); }
#proView .leftBox .picGroup { width: 100%; }
#proView .leftBox .slider-large { margin-bottom: 15px; }
#proView .leftBox .slider-large .box-video { display: block; position: relative; }
#proView .leftBox .slider-large .box-video:after { content: ''; background: url(../images/youtube.png) no-repeat center center rgba(0, 0, 0, 0.1); position: absolute; background-size: 70px auto; left: 0; top: 0; right: 0; bottom: 0; -webkit-transition: transform .25s; -o-transition: transform .25s; transition: transform .25s; }
#proView .leftBox .slider-thumb { margin-bottom: 30px; }
#proView .leftBox .btnBox { width: auto; text-align: center; margin-top: 15px; }
#proView .leftBox .btnBox a { display: inline-block; width: 101px; height: 41px; overflow: hidden; margin: 0 3px; text-indent: -9999px; }
#proView .leftBox .btnBox a.orange { background: url(../images/btn_orange.png); }
#proView .leftBox .btnBox a.yellow { background: url(../images/btn_yellow.png); }
#proView .leftBox .btnBox a.blue { background: url(../images/btn_blue.png); }
#proView .leftBox .btnBox a.green { background: url(../images/btn_green.png); }
#proView .leftBox .btnBox a.pink { background: url(../images/btn_pink.png); }
#proView .leftBox .btnBox a:hover { background-position: 0 2px; }
#proView .slick-slide img { width: 100% }
#proView .slider-thumb .slick-current { border: #27B8F4 1px solid; }
#proView .leftBox .slick-arrow { position: absolute; outline: none; text-indent: -9999px; cursor: pointer; padding: 0; bottom: -100px; border: 0; width: 50px; height: 50px; -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); z-index: 90 }
#proView .leftBox .slick-arrow.slick-prev { left: 0px; background: url(../images/left.png) no-repeat center center; }
#proView .leftBox .slick-arrow.slick-next { right: 0px; background: url(../images/right.png) no-repeat center center; }
#proView .rightBox .ti { margin-bottom: 5px; font-size: 1.3em; padding-top: 30px; font-weight: 600; padding-left: 15px; }
#proView .rightBox .txt { background: url(../images/pro_view_ti_line.png) repeat-x bottom; padding-bottom: 10px; margin-bottom: 20px; padding-left: 15px; }
#proView .rightBox .info { line-height: 2em; width: 100%; margin-left: 15px; }
#proView .rightBox .info th,
#proView .rightBox .info td { text-align: left; vertical-align: top; }
#proView .rightBox .info th { width: 90px; font-family: initial; font-weight: normal; }
#proView .rightBox .info td { width: calc(100% - 80px); color: #333; }
#proView .rightBox .btnbuy { margin: 20px 5px; display: inline-block; width: 140px; height: 36px; line-height: 36px; border: 1px solid #28B3EC; color: #0994d7; padding-left: 60px; background: url(../images/icon_cart.jpg) no-repeat 25px center; font-size: 15px; border-radius: 36px; text-decoration: none; font-family: '微軟正黑體'; font-weight: bold; }
#proView .rightBox .btnbuy:hover { background: url(../images/icon_cart_white.png) no-repeat 25px center #0994d7; color: #fff; }
#proView .rightBox .btnbuy2 { margin: 20px 5px; display: inline-block; width: 100px; height: 36px; line-height: 36px; border: 1px solid #28B3EC; color: #0994d7; padding-left: 30px; background: url(../images/icon_men.png) no-repeat 25px center; font-size: 15px; border-radius: 36px; text-decoration: none; font-family: '微軟正黑體'; font-weight: bold; text-align: center; }
#proView .rightBox .btnbuy2:hover { background: url(../images/icon_men_hover.png) no-repeat 25px center #0994d7; color: #fff; }
#proView .rightBox .btnInq { margin: 20px 5px; display: inline-block; width: 140px; height: 36px; line-height: 36px; border: 1px solid #28B3EC; color: #0994d7; padding-left: 60px; background: url(../images/icon_inq.png) no-repeat 25px center; font-size: 15px; border-radius: 36px; text-decoration: none; font-family: '微軟正黑體'; font-weight: bold; }
#proView .rightBox .btnInq:hover { background: url(../images/icon_inq_white.png) no-repeat 25px center #0994d7; color: #fff; }
#proView .nextBtn { position: absolute; right: 1px; top: 200px; display: block; width: 40px; height: 40px; border-radius: 50px; background: url('../images/i_aw_right.png') #bbb center center no-repeat; z-index: 99; }
#proView .nextBtn:hover { opacity: 0.9 }
@media (min-width:992px) {
	.slider .slick-arrow:hover { opacity: 0.8 }
	.slider .slick-arrow.slick-prev:hover { left: -5px; }
	.slider .slick-arrow.slick-next:hover { right: -5px; }
}
@media only screen and (max-width:991px) {
	#proView .rightBox .ti { padding-top: 0px; }
	#proView .rightBox .info { margin-left: 0 }
}
@media only screen and (max-width:640px) {
	#proView .nextBtn { display: none; }
	#proView .leftBox,
	#proView .rightBox { width: 100%; margin: 0 0 20px 0 }
	#proView .rightBox .info tr:last-child th { text-align: center }
	#proView .rightBox .btnbuy,
	#proView .rightBox .btnbuy2,
	#proView .rightBox .btnInq { padding-left: 30px; }
}

/* =======================  Shop Set.  ==================== */
.shop#proList .proBox:hover .ti { color: #333; text-decoration: none; }
.shopTab { width: 100%; margin: 0 auto; font-size: 14px;margin: 10px auto 0; width: 90%; }
.shopTab .btnWrap { background: none; }
.shopTab .top { color: #404040; background: #EFEFEF; border: 1px solid #CBCBCB; text-align: center; padding: 9px 3px 7px 6px; font-size: 14px; font-weight: bold; }
.shopTab tr { border-bottom: 1px dotted #ccc; }
.shopTab tr:last-child { border: none; }
.shopTab th,
.shopTab td { padding: 5px 7px; border: 1px solid rgba(0, 0, 0, 0.05); }
.shopTab td.textRight { text-align: right; }
.shopTab td select{ width: 50px;border:1px solid #E4E4E4; border-radius: 0;}
.shopTab th { text-align: center; background: #EDF7FF;}
.shopTab th:nth-child(1) { width: 40%; padding: 5px 5px 5px 10px; }
.shopTab th:nth-child(2) { width: 25%; padding: 5px; }
.shopTab th:nth-child(3) { width: 20%; padding: 5px; }
.shopTab th:nth-child(4) { width: 15%; text-align: center; padding: 5px 10px 5px 5px; }
.shopTab td:nth-child(1) { width: 40%; padding: 5px 5px 5px 10px; background: #efefef;}
.shopTab td:nth-child(2) { width: 25%; padding: 5px; }
.shopTab td:nth-child(3) { width: 20%; padding: 5px; text-align: center; }
.shopTab td:nth-child(4) { width: 15%; text-align: center; padding: 5px 10px 5px 5px; }

.shopTab .btnWrap { text-align: center }
.shopTab .btnWrap .btn { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: none; padding: 4px 8px; background: #838383; font-size: 0.9em; margin: 10px 0 0; opacity: 0.7; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; display: inline-block; }
.shopTab .btnWrap .btn.cart { background-color: #3294DF; color: #FFFFFF; }
.shopTab .btnWrap .btn.list { color: #fff; }
.shopTab .btnWrap .btn:hover { opacity: 1; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
/* =======================  Shop2 Set.  ==================== */
.shop#proList .proBox:hover .ti { color: #333; text-decoration: none; }
#proListTwo .proBox { position: relative; display: inline-block; vertical-align: top; width: calc(50% - 22px); background: #fff; box-sizing: content-box; margin: 10px 10px; padding-bottom: 20px; overflow: hidden; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25); }
#proListTwo .proBox .new { position: absolute; width: 55px; height: 34px; background: url(../images/icon_new.png)no-repeat; overflow: hidden; z-index: 10 }
#proListTwo .proBox .hot { position: absolute; width: 55px; height: 34px; background: url(../images/icon_hot.png) no-repeat; overflow: hidden; z-index: 10 }
#proListTwo .proBox .pic { display: block; }
#proListTwo .proBox .pic img { width: 100%; }
#proListTwo .proBox .txtBox { margin-top: 15px; height: 30px; }
#proListTwo .proBox .ti { color: #666; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #333; margin-left: 20px; font-weight: bold; line-height: 30px; display: inline-block; font-size: 16px; max-width: 325px; }
#proListTwo .proBox .ti.center { display: block; width: 235px; text-align: center; margin: 5px auto; }
#proListTwo .proBox:hover .ti { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
#proListTwo .proBox .hover { display: block; width: 100%; height: 80%; background: url(../images/pic_hover.png) no-repeat center center; overflow: hidden; position: absolute; top: -365px; left: 0; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
#proListTwo .proBox .small { width: 73px; margin-right: 10px; color: #666; float: right; line-height: 30px; }
#proListTwo .proBox .txt { margin-left: 10px; margin-top: 4px; font-size: 14px; color: #666; }
#proListTwo .proBox .pic:hover .hover,
#proListTwo .proBox .ti:hover .hover { top: 0 }
#proListTwo .tab { width: 750px }
#proListTwo .tab th,
#proListTwo .tab td { padding: 20px 3px 17px 6px }
#proListTwo .tab .pic { width: 130px; height: 150px; float: left }
#proListTwo .tab .ti { float: left }
#proListTwo .tab .shopTab { width: 100%; margin: 0 auto; }
#proListTwo .tab .shopTab tr .borR { border-right: 1px solid #E4E4E4; }
#proListTwo .tab .shopTab tr td:first-child { background: #efefef }
#proListTwo .tab .shopTab .btnWrap { background: none }
#proListTwo .tab .shopTab .top { color: #404040; background: #EFEFEF; border: 1px solid #CBCBCB; text-align: center; padding: 9px 3px 7px 6px; font-size: 14px; font-weight: bold; }
.btnWrapTop { float: left; width: 400px; }
.btnWrapTop .btn { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: none; padding: 4px 8px; background: #838383; font-size: 0.9em; opacity: 0.5; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; display: inline-block; }
.btnWrapTop .btn:hover { opacity: 1; }
.btnWrapTop .btn.cart { background: #3294DF; }

@media only screen and (max-width:991px) {
	.proBox .right-box .shopTab { width: 100% }
	.proBox .right-box .shopTab th { padding: 5px 5px; }
	#ship { width: calc(100% - 60px); max-width: calc(100% - 60px); height: auto; }
}
@media only screen and (max-width:767px) {
	#proListTwo .proBox { display: block; width: calc(100% - 10px); margin: 0px auto 15px }
	.proBox .right-box { padding: 15px; }
	.proBox .right-box .shopTab th { padding: 5px; }
	.proBox .right-box .shopTab th,
	.proBox .right-box .shopTab td,
	.proBox .right-box .shopTab td select { font-size: 15px; }
	.proBox .right-box .shopTab td select { width: 50px; }
	.proBox .right-box .shopTab th:nth-child(1) { width: calc(100% - 50px - 150px -50px); }
	.proBox .right-box .shopTab th:nth-child(2) { width: 150px; }
	.proBox .right-box .shopTab th:nth-child(3) { width: 50px; }
	.proBox .right-box .shopTab th:nth-child(4) { width: 50px; padding: 5px; }
	.proBox .right-box .shopTab td:nth-child(1) { width: calc(100% - 50px - 150px -50px); }
	.proBox .right-box .shopTab td:nth-child(2) { width: 150px; }
	.proBox .right-box .shopTab td:nth-child(3) { width: 50px; }
	.proBox .right-box .shopTab td:nth-child(4) { width: 50px; padding: 5px; }
}

/* =======================  Member Set.  ==================== */
.member .boxL { float: left; width: calc(50% - 40px); padding-right: 40px; margin: 0 20px; overflow: hidden; font-size: 16px; border-right: 3px dotted #E7E7E7; }
.member div.line { border-bottom: 8px #e1f0f4 solid; margin-bottom: 20px; }
.member .boxL table.loginBox { width: 100%; }
.member .boxL table.loginBox .info a { color: #666; text-decoration: none; float: right; padding-right: 10px; text-align: right; }
.member .boxL table.loginBox .info a:hover { color: #333 }
.member .boxL table.loginBox th { text-align: left; width: 80px; }
.member .boxL table.loginBox input.btnSubmit { width: 200px; display: block; margin: 20px auto 0; }
.member .boxL table.loginBox input.inText { width: 100%; }
.member .boxL table.loginBox input.inText.code { display: inline-block; width: calc(100% - 100px); }
.member .boxL table.loginBox .codeImg { display: inline-block; width: 100px; }
.member .box.logR { position: relative; float: right; width: calc(50% - 40px); margin: 0 30px 0 10px; height: 220px; padding: 20px; box-sizing: border-box; }
.member .box.logR.center { float: none; margin: 0 auto; width: 530px; }
.member .box.logR p.line { padding: 5px 0; }
.member .box.logR p.aw { background: url(../images/aw.png) no-repeat 40px center; padding-left: 50px; }
.member .box.logR .img { position: absolute; top: 19px; right: 0; width: 39%; height: 175px; background: url(../images/login_img.png) center center no-repeat; background-size: contain }
.member .box.logR a.join { position: absolute; display: block; padding: 5px 30px; color: #FFF; background: #169ED5; text-align: center; text-decoration: none; letter-spacing: 3px; opacity: 0.8; filter: alpha(opacity = 80); }
.member .box.logR a.join:hover { background-position: 15px center; opacity: 1; filter: alpha(opacity = 1); }
.member .box .joinTi { color: #3A3A3A; font-size: 2em; font-family: serif; border-bottom: 2px solid #C7C7C7; padding-bottom: 4px; width: 50%; }
@media only screen and (max-width:991px) {
	.member .boxL { padding-right: 20px; }
	.member .boxL table.loginBox th { width: 75px; }
	.member .box.logR .img { width: 40%; }
}
@media only screen and (max-width:767px) {
	.member .boxL { width: 100%; float: none; margin: 0 0 30px 0; padding: 20px; border: 0; border-bottom: 3px dotted #E7E7E7; }
	.member .boxL table.loginBox input.btnSubmit { width: 100px; display: block; margin: 0 auto; padding: 0; height: 40px; line-height: 40px; }
	.member .box.logR { width: 100%; float: none; margin: 0; height: 200px; }
	.member .box.logR a.join { height: 40px; line-height: 30px; font-size: 16px; }
	.member .box.logR p.line { font-size: 15px; }
}
@media only screen and (max-width:480px) {
	.member .box.logR.center { width: 100%; }
	.member .box .joinTi { font-size: 1.8rem; width: 100%; }
	.member .box .joinTi+ .center { padding: 20px 0; position: relative; z-index: 5 }
	.member .box.logR { width: 100%; float: none; margin: 0; height: 180px; }
	.member .box.logR .img { width: 26%; z-index: 3; top: 28px; }
}

/* 加入會員 */
.member .box { border: 10px #F0FCFF solid; box-sizing: border-box; width: 100%; padding: 5px; font-size: 15px; margin: 5px 0; }
.member table.join { width: 90%; margin: 0 auto; }
.member table.join th { width: 90px; }
.member table.join td .inText { width: 200px; }
.member table.join .blue { font-weight: bold; padding-right: 3px; font-size: 1.5em; font-family: serif; }
.member table.join .ti { padding-top: 20px; }
.member table.join .ti { font-size: 1.1em; font-family: '微軟正黑體'; }
.member table.join .L50 { padding: 0 5px 0 50px; background: url(../images/icon_aw_locat.png) no-repeat 35px 11px }
.member table.join .imgCode { display: inline-block; padding-left: 10px; vertical-align: middle; }
.member table.join .check { display: inline-block; }
.member table.join.money { border-top: #28B1E9 1px solid; border-bottom: #28B1E9 1px solid; margin: 20px auto; text-align: right; }
.member table.join.money th { width: 80%; text-align: right; font-weight: bold; }
.member table.join.money td { width: 20%; text-align: right; font-weight: bold; }
.member table.join.textRed { color: #d9001c; font-size: 14px; font-family: '微軟正黑體'; }
@media only screen and (max-width:767px) {
	.member .box { padding: 10px; }
	.member table.join { width: 100%; }
	.member table.join th { padding: 0; width: 80px; }
	.member table.join .blue { font-size: 1.35rem; }
	.member table.join td .inText { width: auto; max-width: 180px; }
}

/* 會員中心 */
.member p.center { text-align: left; padding: 41px 0; width: 100%; }

/* 追蹤清單 */
.member .linkTab { display: inline-block; width: 150px; height: 30px; line-height: 30px; color: #787878; text-decoration: none; background: url(../images/grad_bottom.png) 0 4px repeat-x #efefef; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; text-align: center; }
.member .linkTab.on { background: url(../images/g_ti_bg.jpg)0 bottom; color: #FFF; }
.member .linkTab.on:hover { color: #fff }
.member .linkTab:hover { color: #333; }
.member table a { display: block; color: #666; }
.member table a.cboxElement { color: #fff; width: 85px; height: 30px; line-height: 30px; padding: 0; margin-left: 5px; display: inline-block; font-size: 14px; }
.member table.list { width: 100%; margin: 0px auto 20px; border-top: #29AEE4 1px solid; }
.member .txtLeft { text-align: left }
.member .txtRight { text-align: right }
.member table.list th { border-bottom: #eee 5px solid; padding: 10px; }
.member table.list th:last-child { padding: 10px 4px; }
.member table.list tr { border-bottom: #eee 1px solid; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
.member table.list tr.noLine { border-bottom: none; }
.member table.list tr:hover { background: #f6fbfc; }
.member table.list tr.noLine:hover { background: none }
.member table.list tr.noLine2 { border-bottom: none; }
.member table.list td { padding: 10px; }
.member td.pic { width: 5%; }
.member td.pic a.img { text-align: center; width: 100px; margin: 0 auto; height: 85px; background: url(../images/member_list_imgbg.png) center bottom no-repeat; overflow: hidden; }
.member td.pic a.img:hover { opacity: 0.8; filter: alpha(opacity = 80); }
.member td.add a.btnAdd { position: relative; background: url(../images/icon_bag.png) no-repeat right top; width: 21px; height: 15px; margin: 0 auto; overflow: hidden; text-indent: -9999px }
.member td.add a.btnAdd .plus { position: absolute; left: -10px; top: 100px; background: url(../images/icon_plus.png); width: 8px; height: 8px; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
.member td.add a.btnAdd:hover,
.member tr:hover a.btnAdd { background-position: right bottom; }
.member td.add a.btnAdd:hover .plus,
.member tr:hover td.add a.btnAdd .plus { left: 0; top: 0; }
.member td.del { width: 10% }
.member td.del a.btnDel { background: url(../images/btn_de.png); width: 16px; height: 16px; overflow: hidden; text-indent: -9999px; margin: 0 auto; }
.member td.del a.btnDel:hover { background-position: 0 -16px; }
.member td.count { width: 13% }

/* 追蹤清單 */
.collect-list .thead { width: 100%; display: table; border-top: #29AEE4 1px solid; }
.collect-list .thead .tr-box { display: table-row; }
.collect-list .thead .tr-box .th { font-weight: bold; display: table-cell; vertical-align: middle; position: relative; border-bottom: #eee 5px solid; padding: 10px; text-align: center; }
.collect-list .thead .tr-box .th.check,
.collect-list .thead .tr-box .th.qua,
.collect-list .thead .tr-box .th.del { width: 10%; }
.collect-list .thead .tr-box .th.pic,
.collect-list .thead .tr-box .th.time,
.collect-list .thead .tr-box .th.price { width: 15% }
.collect-list .thead .tr-box .th.name { width: calc(100% - 40% - 45%) }
.collect-list .tbody { display: block; width: 100%; background: #fff; font-family: 'Roboto', "Noto Sans TC", "Noto Sans CJKtc", "Microsoft JhengHei", sans-serif; }
.collect-list .tbody .tr-box { display: table; width: 100%; position: relative; border-bottom: 1px solid #ddd; }
.collect-list .tbody .tr-box .td { display: table-cell; text-align: center; vertical-align: middle; padding: 10px; }
.collect-list .tbody .tr-box .td a { color: #666; text-decoration: underline; }
.collect-list .tbody .tr-box .td a.btnDel { font-size: 0; display: block; background: url(../images/btn_de.png); background-position: 0 0; width: 16px; height: 16px; overflow: hidden; text-indent: -9999px; margin: 0 auto; }
.collect-list .tbody .tr-box .td.check,
.collect-list .tbody .tr-box .td.qua,
.collect-list .tbody .tr-box .td.del { width: 10%; }
.collect-list .tbody .tr-box .td.pic,
.collect-list .tbody .tr-box .td.time,
.collect-list .tbody .tr-box .td.price { width: 15% }
.collect-list .tbody .tr-box .td.name { width: calc(100% - 40% - 45%); text-align: left }
.collect-list .tbody .tr-box .td.name:before { display: none; }
.collect-list .tbody .tr-box .td.name a { color: #28B1E9; text-decoration: none; display: inline-block; }
.collect-list .tbody .tr-box .td.pic a.img { text-align: center; margin: 0 auto; height: 85px; background: url(../images/member_list_imgbg.png) center bottom no-repeat; overflow: hidden; }
.collect-list .tbody .tr-box .td.pic a.img img { width: 100%; }
.collect-list .tbody .tr-box .td.pic a.img:hover { opacity: 0.8; filter: alpha(opacity = 80); }
.collect-list .btnWrap { text-align: center; margin: 20px 0 }
.collect-list .btnWrap .btn.cart { float: none; font-size: 16px; padding: 0 20px; height: 36px; line-height: 36px; }
@media (min-width:992px) {
	.collect-list .tbody .tr-box .td a.btnDel:hover { background-position: 0 -16px; }
}
@media (max-width:991px) {
	.collect-list .thead { display: none; }
	.collect-list .tbody { background: none; border-bottom: none; }
	.collect-list .tbody .tr-box { min-height: 160px; padding: 40px 0 0 120px; display: block; margin: 0 auto 15px auto; background: #fff; border: 1px solid #e1e1e1; }
	.collect-list .tbody .tr-box .td:before { content: attr(data-mtit) "："; display: inline-block; }
	.collect-list .tbody .tr-box .td { display: inline-block; width: calc(100%/2 - 4px); text-align: left; vertical-align: middle; }
	.collect-list .tbody .tr-box .td.check,
	.collect-list .tbody .tr-box .td.qua,
	.collect-list .tbody .tr-box .td.time,
	.collect-list .tbody .tr-box .td.price { width: calc(100%/3 - 4px); text-align: left }
	.collect-list .tbody .tr-box .td.name { position: absolute; left: 0; top: 0; width: 100%; height: 40px; background: #efefef; font-size: 1.1em; font-weight: bold }
	.collect-list .tbody .tr-box .td.pic { position: absolute; left: 0; top: 40px; width: 120px; }
	.collect-list .tbody .tr-box .td.pic:before { display: none; }
	.collect-list .tbody .tr-box .td.del { width: 0; height: 0; padding: 0; }
	.collect-list .tbody .tr-box .td.del:before { display: none; }
	.collect-list .tbody .tr-box .td.del .btnDel { position: absolute; right: 10px; top: 10px; }
}
@media (max-width:767px) {
	.collect-list .tbody .tr-box .td { width: calc(100%/2 - 4px); }
}
@media (max-width:640px) {
	.collect-list .tbody .tr-box .td { display: block; width: 100%; border-left: 1px solid #ddd; padding: 10px; }
	.collect-list .tbody .tr-box .td.check,
	.collect-list .tbody .tr-box .td.qua,
	.collect-list .tbody .tr-box .td.time,
	.collect-list .tbody .tr-box .td.price { display: block; width: 100%; text-align: left }
	.collect-list .tbody .tr-box .td.pic { border: 0; }
}

/* 訂單查詢 */
.order-list .thead { width: 100%; display: table; }
.order-list .thead .tr-box { display: table-row; }
.order-list .thead .tr-box .th { width: calc(100%/7); display: table-cell; vertical-align: middle; position: relative; border-bottom: #eee 5px solid; padding-top: 10px; padding-bottom: 10px; text-align: center; font-weight: bold; }
.order-list .tbody { display: block; width: 100%; background: #fff; font-family: 'Roboto', "Noto Sans TC", "Noto Sans CJKtc", "Microsoft JhengHei", sans-serif; }
.order-list .tbody .tr-box { display: table; width: 100%; position: relative; border-bottom: 1px solid #ddd; }
.order-list .tbody .tr-box .td { width: calc(100%/7); display: table-cell; text-align: center; vertical-align: middle; padding: 15px; }
.order-list .tbody .tr-box .td a { color: #666; text-decoration: underline; }
.order-list .tbody .tr-box .td:first-child { background: url(../images/icon_date.png) 20px center no-repeat; padding-left: 50px }
.order-list .tbody .tr-box .td:first-child a { color: #033761; display: inline-block; border-bottom: 1px solid #033761 }
.order-list .tbody .tr-box .td:last-child .btn-view { display: inline-block; color: #666; padding: 10px 15px; border-radius: 30px; text-align: center }
.order-list .tbody .tr-box .td:last-child .btn-view:before { content: '\f002'; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.order-list .tbody .tr-box .td:nth-child(5) a.return { margin: 0 auto; background: url(../images/icon_pen.png) left center no-repeat; padding-left: 16px; display: inline-block; }
.order-list .tbody .tr-box .td a.btnDel { font-size: 0; display: block; background: url(../images/btn_de.png); background-position: 0 0; width: 16px; height: 16px; overflow: hidden; text-indent: -9999px; margin: 0 auto; }
.order-list .tbody .tr-box .td a.btnDel:hover { background-position: 0 -16px; }
.order-list .tbody .tr-box .td:nth-child(4) .unfinished { color: #000 }
.order-list .tbody .tr-box .td:nth-child(5) .unfinished { color: #d5251f }
@media (min-width:992px) {
	.order-list .tbody .tr-box .td:first-child a:hover { color: #4bb8d7; border-bottom: 1px solid #4bb8d7 }
	.order-list .tbody .tr-box .td:last-child .btn-view:hover { color: #4bb8d7 }
}
@media (max-width:991px) {
	.order-list .thead { display: none; }
	.order-list .tbody { background: none; border-bottom: none; }
	.order-list .tbody .tr-box { min-height: 140px; padding: 0; display: block; margin: 0 auto 15px auto; background: #fff; border: 1px solid #e1e1e1; }
	.order-list .tbody .tr-box .td:before { content: attr(data-mtit) "："; display: inline-block; }
	.order-list .tbody .tr-box .td { display: inline-block; width: calc(100%/2 - 4px); text-align: left; vertical-align: middle; padding: 10px; }
	.order-list .tbody .tr-box .td:first-child { width: 100%; background: #efefef; padding: 35px 10px 10px 10px; }
	.order-list .tbody .tr-box .td:first-child span.blue { font-weight: bold; }
	.order-list .tbody .tr-box .td:first-child span.date { padding-left: 20px; margin-left: 0; line-height: 15px; display: block; background: url(../images/icon_date.png) 0px center no-repeat; background-size: 15px 15px; width: 100%; position: absolute; top: 10px; left: 10px; }
	.order-list .tbody .tr-box .td:last-child:before { display: none; }
	.order-list .tbody .tr-box .td:last-child .btnDel { position: absolute; right: 10px; top: 20px; }
}
@media (max-width:767px) {
	.order-list .tbody .tr-box .td { width: calc(100%/2 - 4px); }
}
@media (max-width:640px) {
	.order-list .tbody .tr-box .td { display: block; width: 100%; border-bottom: 1px solid #ddd; padding: 15px 15px; }
	.order-list .tbody .tr-box .td:nth-child(6) { border: 0; }
	.order-list .tbody .tr-box .td:last-child { display: none }
}

/* 付款通知*/
.payBox { width: 400px; }
.payBox .payTi { width: 100%; height: 40px; background: url(../images/pay_ti.gif) no-repeat; border-bottom: #eee 5px solid; }
.payBox table { width: 100% }

/* 我要退貨*/
.returnBox { width: 100%; }
.returnBox .returnTi { width: 100%; height: 40px; background: url(../images/return_ti.gif) no-repeat; border-bottom: #eee 5px solid; }
.returnBox .termsBox { width: 98%; height: 88px; padding: 10px; box-sizing: content-box; overflow: auto; border: 1px solid #cce6ed; }
.returnBox table { width: 100% }
.returnBox table tr.line { border-bottom: #eee 3px solid; }
.returnBox table th.ti { font-family: '微軟正黑體'; padding: 10px 10px 0 10px; font-size: 1.2em; font-weight: bold; width: 150px; background: url(../images/icon_aw_locat.png) no-repeat left 23px; }
.returnBox table td { padding: 5px 0; }
.returnBox table textarea { height: 40px; line-height: 1.3em }
.returnBox table .txtCenter { text-align: center; }

/*訂單詳細頁*/
.member .all { text-align: right; background: #ecf7fa; padding: 10px; line-height: 2; font-family: '微軟正黑體'; }
.member .total { color: #d9001c; font-size: 1.5em; text-align: right; font-weight: bold; padding: 10px; font-family: '微軟正黑體'; }
.member .number { text-align: center; width: calc(90% - 40px); border: 2px solid #28B5EF; padding: 5px 20px; box-sizing: content-box; margin: 20px auto; line-height: 1.6em }
table.infoBox { float: left; width: calc(50% - 50px); margin: 10px 25px 30px; line-height: 2em; }
table.infoBox td.ti { text-align: left; border-bottom: 1px solid #efefef; font-weight: bold; font-size: 1.4em; color: #129AC8; padding-left: 20px; }
table.infoBox td.aw { padding: 0 5px 0 10px; background: url(../images/icon_aw_locat.png) no-repeat 4px 13px; }
table.infoBox td.title { vertical-align: top }
table.infoBox td.txt { width: 250px; }
.form th.w100 { width: 100px; }
.form th.w120 { width: 120px }
table.form.invoice { width: 100% }
.form.payTable { width: calc(100% - 6%); margin: 3%; font-family: '微軟正黑體'; line-height: 2em }
.form.payTable th { width: 100%; border-bottom: 1px solid #efefef; }
.form.payTable td { width: 100%; border-bottom: 1px solid #efefef; }
@media only screen and (max-width:767px) {
	table.infoBox td.title { width: 200px; }
	table.infoBox { float: left; width: calc(100% - 20px); margin: 10px 10px 30px; }
}

/* =======================  表單共用 Set.  ==================== */

/* 表單共用 */
.form { padding: 0; margin: 0; color: #666; font-family: serif; width: 100%; }
.form th { vertical-align: top; line-height: 2.2em; padding: 5px; text-align: left; }
.form td { vertical-align: middle; padding: 5px; }
.form textarea { width: 100%; min-height: 100px; }
input { outline: none; background: none }
input[type="checkbox"] { vertical-align: sub }
input.inText { border: none; overflow: hidden; border-bottom: 1px solid #AEDEF2; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; height: 26px; }
input.inText::-webkit-input-placeholder { color: #b4b4b4; }
input.inText::-moz-placeholder { color: #b4b4b4; opacity: 1; filter: alpha(opacity=100) }
input.inText:-ms-input-placeholder { color: #b4b4b4; line-height: 26px\9; }
input.inText:-moz-placeholder { color: #b4b4b4; }
textarea { padding: 3px; border: 1px solid #cce6ed; background: none }
.select { position: relative; }
.select.inline { display: inline-block; }
.select label { display: block; float: left; width: 80px; margin-right: 5px; height: 26px; top: 30px; line-height: 26px; padding-left: 4px; border-bottom: 1px solid #cce6ed; background: url(../images/deop_aw.png) 75px center no-repeat; }
.select label.w35 { width: 30px; background-position: 25px center; }
.select label.w120 { width: 120px; background-position: 110px center; }
.select select { filter: alpha(opacity=0); position: absolute; width: 90px; height: 25px; line-height: 25px; top: 0px; left: 0; font-family: 'Century Gothic'; opacity: 0; }
.select select.w35 { width: 35px; }
.select select#year { left: 0px; }
.select select#month { left: 90px; }
.select select#day { left: 180px; }
.select select#cityarea { left: 90px; }
.select select#carCity { left: 90px; }
.select select#carContry { left: 90px; }
.select select#carCityarea { left: 180px; }
.select select#color { top: 30px; }
.select select#income { width: 120px }
.btnWrap { width: 100%; /*padding: 20px 0;*/ }
.btnWrap.center { text-align: center; }
input.btnReset { margin: 10px 0 20px; padding: 0 40px; color: #4A4A4A; border: none; line-height: 25px; opacity: 0.5; filter: alpha(opacity = 50); outline: none; background: #C7C7C7; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
input.btnSubmit { margin: 10px 0 20px; padding: 0 40px; color: #FFF; border: none; line-height: 25px; opacity: 0.8; filter: alpha(opacity = 80); outline: none; background: #929292; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
input.btnReset:hover { opacity: 1; filter: alpha(opacity = 100); color: #666 }
input.btnSubmit:hover { opacity: 1; filter: alpha(opacity = 100); }
input[type="buttom"] { transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
.blue { color: #26B7F3; }
.orange { color: orange; }

/* ========= 其他 ========= */
.h15 { height: 15px }
a.btnFaq { text-align: center; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); background: url(../images/btn.png); width: 122px; height: 31px; line-height: 31px; font-size: 17px; letter-spacing: 3px; text-decoration: none; font-weight: bold; display: inline-block; margin-right: 10px; padding: 0; }
@media only screen and (max-width:991px) {
	a.btnFaq { margin: 0 }
}
@media only screen and (max-width:767px) {
	input.inText.code { width: 50%; float: left; }
	.form.inquery .imgCode { width: 50%; overflow: hidden; float: left; }
	input.btnSubmit,
	input.btnReset { height: 40px; line-height: 40px; padding: 0; display: inline-block; width: calc(50% - 4px); }
}
@media only screen and (max-width:480px) {
	a.btnFaq { display: block; float: right; }
}

/* =======================  FAQ Set.  ==================== */
#faq .form.ask { width: 98%; margin: 0 auto; line-height: 1.5em; }
#faq .form.ask tr:hover { background: #efefef; }
#faq .form.ask tr:nth-child(odd) { background: #F3F3F3 }
#faq .form.ask th,
#faq .form.ask td { padding: 15px 5px; vertical-align: top }
#faq .form.ask th { background: url(../images/g_ti_bg.jpg) repeat-x; padding: 5px; color: #fff; }
#faq .form.ask tr th:first-child { -moz-border-radius: 10px 0 0 0; -webkit-border-radius: 10px 0 0 0; border-radius: 10px 0 0 0; }
#faq .form.ask tr th:last-child { -moz-border-radius: 0 10px 0 0; -webkit-border-radius: 0 10px 0 0; border-radius: 0 10px 0 0; }
#faq .form.ask .center { text-align: center }
#faq .form.ask .title { width: 65%; padding-left: 10px; }
#faq .form.ask td.Q,
#faq .form.ask td.A { width: 2%; font-weight: bold; padding: 10px 0 10px 20px; color: #1EB7F7; }
#faq .form.ask .title span.Q { font-weight: bold; }
#faq .form.ask .name { width: 13%; }
#faq .form.ask .date { width: 27%; padding-right: 10px; }
#faq .noBg { background: none; }
#faqBox { /* width: 600px!important; max-width: 600px!important; */  margin: 0px auto; background: #fff }
#faqBox .form.ask2 { margin: 14px auto 0; }
#faqBox .form.ask2 th { width: 120px }
#faqBox .form.ask2 .ti { text-align: center; font-size: 14px; }
#faqBox .form.ask2 tr { background: none }
#faqBox .form.ask2 .select.w350 { width: 150px; height: 30px; }
#faqBox .form.ask2 .select.w350 label { width: 150px; height: 30px; background: url(../images/deop_aw.png) 125px center no-repeat; }
#faqBox center { font-size: 17px; border-bottom: 5px solid #E3E3E3; width: 90%; margin: 0 auto; padding: 0px 0 5px; }
#faqBox .txt { padding-left: 31px; color: #979797; }
@media only screen and (max-width:767px) {
	#faqBox { width: 400px !important; max-width: 400px !important; }
}
@media only screen and (max-width:480px) {
	#faqBox { width: 95% !important; max-width: 95% !important; }
	#faqBox .txt { width: 80%; margin: 0 auto; padding: 10px 0 }
	#faqBox .form.ask2 th { width: 120px }
	#faqBox .form.ask2 td { width: calc(100% -120px) }
}

/* aq清單 */
.qa-list .thead { width: 100%; display: table; background: url(../images/g_ti_bg.jpg) repeat-x; border-radius: 10px 10px 0 0; color: #fff; font-weight: bold }
.qa-list .thead .tr-box { display: table-row; }
.qa-list .thead .tr-box .th { font-weight: bold; display: table-cell; vertical-align: middle; position: relative; padding: 10px; text-align: center; }
.qa-list .thead .tr-box .th.icon { width: 5%; }
.qa-list .thead .tr-box .th.title { width: 65%; }
.qa-list .thead .tr-box .th.name,
.qa-list .thead .tr-box .th.date { width: 15%; text-align: center }
.qa-list .tbody { display: block; width: 100%; background: #fff; }
.qa-list .tbody .tr-box { display: table; width: 100%; position: relative; }
.qa-list .tbody .tr-box:nth-child(even) { background: #F3F3F3 }
.qa-list .tbody .tr-box .td { display: table-cell; text-align: left; vertical-align: middle; padding: 15px 10px; line-height: 1.8em }
.qa-list .tbody .tr-box .td.icon { width: 5%; padding-left: 20px; color: #1EB7F7; text-align: center; font-weight: bold }
.qa-list .tbody .tr-box .td.title { width: 65%; }
.qa-list .tbody .tr-box .td.title .Q { font-weight: bold; }
.qa-list .tbody .tr-box .td.name,
.qa-list .tbody .tr-box .td.date { width: 15%; text-align: center }

/* .qa-list .tbody .tr-box:nth-child(even) .title { width: 95%; } */
.qa-list.start-list .tbody .tr-box .td.title >p>span { color: #000; font-size: 15px; display: inline-block; margin-right: 5px; }
@media (max-width:640px) {
	.qa-list .thead { display: none; }
	.qa-list .tbody { background: none; border-bottom: none; }
	.qa-list .tbody .tr-box { padding: 10px 0 15px 30px; display: block; margin: 0 auto 15px auto; background: #fff; border: 1px solid #e1e1e1; }
	.qa-list .tbody .tr-box .td { display: inline-block; text-align: left; display: block; padding: 8px; width: 100%; }
	.qa-list .tbody .tr-box .td.icon { position: absolute; left: 3px; top: 10px; width: 30px; padding: 0; font-size: 1.5em; color: #1EB7F7; text-align: center; font-weight: bold }
	.qa-list .tbody .tr-box .td:before { content: attr(data-mtit) "："; display: inline-block; font-weight: bold }
	.qa-list .tbody .tr-box .td.icon:before { display: none; }
	.qa-list .tbody .tr-box .td.title { width: 95%; }
	.qa-list .tbody .tr-box:nth-child(odd) .td.title { border-bottom: 1px solid #ddd; }
	.qa-list .tbody .tr-box:nth-child(even):before { display: none; }
	.qa-list .tbody .tr-box .td.name,
	.qa-list .tbody .tr-box .td.date { width: 100%; text-align: left; }
	.qa-list .tbody .tr-box .td.title >p>span { color: #033761; }
	.qa-list.start-list .tbody .tr-box { padding: 45px 10px 10px 10px; }
	.qa-list.start-list .tbody .tr-box .td.title { width: 100%; border: 0; padding: 0 5px; }
	.qa-list.start-list .tbody .tr-box .td.name { padding: 0 5px; }
	.qa-list.start-list .tbody .tr-box .td.date { padding: 0 5px; }
	.qa-list.start-list .tbody .tr-box .td.title >p { font-size: 15px; margin: 0; }
	.qa-list.start-list .tbody .tr-box .td.title >p>span { font-size: 14px; font-weight: bold; }
	.qa-list.start-list .tbody .tr-box .td.title:before { content: attr(data-mtit) ""; position: absolute; height: 40px; line-height: 40px; width: 100%; left: 0; top: 0; background: url(../images/g_ti_bg.jpg) repeat-x; color: #fff; text-align: center; border-radius: 10px 10px 0 0; }
	.qa-list.start-list .tbody .tr-box .td.name:before,
	.qa-list.start-list .tbody .tr-box .td.date:before { font-size: 14px; font-weight: bold; color: #000; margin-right: 5px; }
}

/* =======================  Franchisee Set.  ==================== */
#franchisee .ti { font-size: 1.5em; color: #e10c7d; margin: 0 0 10px 0; }
#franchisee .sTi { margin: 18px; width: 120px; color: #fff; padding: 5px; background: url(../images/g_ti_bg.jpg) repeat-x; text-align: center; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; }
#franchisee .franchiseeTab { width: 90%; margin: 0px auto 50px }
#franchisee .franchiseeTab li { list-style-image: url(../images/li_icon.png); margin-bottom: 10px; line-height: 2em; }
#franchisee .franchiseeTab li .strong { font-weight: bold; font-size: 1.1em }
#franchisee .franchiseeTab li.noImg { list-style-image: none }
a.btnFranchisee { text-align: center; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); background: url(../images/btn.png); width: 122px; height: 31px; line-height: 31px; font-size: 17px; letter-spacing: 3px; text-decoration: none; font-weight: bold; display: inline-block; margin-right: 0; padding: 0; }
.form.inquery { width: 100%; margin: 0 auto; }
.form.inquery .imgCode { display: inline-block; padding-left: 10px; vertical-align: middle; }
.form.inquery th { width: 16%; text-align: right; }
.form.inquery td { line-height: 30px; }
@media only screen and (max-width:767px) {
	.form.inquery th { width: 82px; }
	.form.inquery td { width: calc(100% - 82px); line-height: 32px; }
	#franchisee .ti { font-size: 1.25em; }
}
@media only screen and (max-width:640px) {
	a.btnFranchisee { display: block; }
	.form.inquery th { width: 95px; }
	.form.inquery td { width: calc(100% - 95px); }
	.form.inquery td input.inText { width: auto; max-width: 50px }
}
@media only screen and (max-width:320px) {
	a.btnFranchisee { display: block; }
	.form.inquery th { display: block; width: 100%; text-align: left }
	.form.inquery td { display: block; width: 100%; max-width: 100%; }
}

/* =======================  video Set.  ==================== */
#video .videoBox { position: relative; float: left; width: calc(100%/3 - 16px); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25); border-radius: 5px; background: #fff; box-sizing: content-box; overflow: hidden; margin: 10px 8px; padding-bottom: 20px }
#video .videoBox .pic { display: block; margin-bottom: 20px; }
#video .videoBox .pic img { width: 100%; }
#video .videoBox:hover .pic { opacity: 0.9; }
#video .videoBox .view { display: block; position: absolute; top: -150px; left: 50%; margin-left: -40px; color: #FFFFFF; overflow: hidden; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #28B1E9; text-decoration: none; padding: 3px 10px; font-size: 1.2em; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
#video .videoBox:hover .view { top: 35%; }
#video .videoBox .info { background: #fff; line-height: 1.5rem; height: 6rem; }
#video .videoBox .info .ti { width: 90%; font-size: 20px; max-height: 1.2em; display: block; font-weight: bold; color: #333; margin: 0 auto 10px; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-decoration: none; }
#video .videoBox:hover .info .ti { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
#video .videoBox .info .des { width: 90%; height: 30px; margin: 5px auto; color: #666; }
#video .videoBox .info .des .viewnum { width: 100px; height: 30px; float: left; }
#video .videoBox .info .des .question { display: block; float: right; color: #666; text-decoration: none }
#video .videoBox .info .des .question:before { content: '?'; width: 15px; height: 15px; display: inline-block; background: #E0E0E0; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; line-height: 15px; text-align: center; margin: 0 5px; font-size: 0.8em; color: #fff; font-weight: bold; }
#video .btnWant { position: absolute; top: 0; width: 65px; height: 64px; background: url(../images/btn_want.png); text-indent: -9999px; }
#video .btnWant:hover { opacity: 0.9; top: 2px; }
#video .picBox { width: 100%; position: relative; padding-bottom: 60%; }
#video .picBox iframe { width: 100%; height: 100%; position: absolute; overflow: hidden; border: none }
#video .info .info th { width: 20% }
@media only screen and (max-width:767px) {
	#video .videoBox { width: calc(100%/2 - 20px); margin: 10px 10px; }
	#video .videoBox .info .ti { font-size: 17px; }
	#video .videoBox .info .des .viewnum,
	#video .videoBox .info .des .question { width: 100%; float: none; font-size: 15px; }
}
@media only screen and (max-width:400px) {
	#video .videoBox { width: calc(100%/2 - 10px); margin: 10px 5px; }
}
@media only screen and (max-width:320px) {
	#video .videoBox { width: calc(100% - 10px); margin: 10px 5px; }
}

/* =======================  Course Set.  ==================== */
#coursr .pencil { display: inline-block; text-decoration: none; color: #333 }
a.btnShare { display: inline-block; font-size: 1.2em; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); z-index: 99; opacity: 0.9; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; background: #EBA000; padding: 7px 21px; margin-right: 10px; color: #fff; text-decoration: none; vertical-align: middle; text-align: center; }
a.btnShare:hover { opacity: 1; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); }
#coursr .formTi { text-align: center; font-size: 1.5em; border-radius: 30px; line-height: 30px; background: url(../images/line.png) center bottom no-repeat; height: 45px; margin: 0 auto 20px; }
.formTi { text-align: center; font-size: 1.5em; border-radius: 30px; line-height: 30px; background: url(../images/line.png) center bottom no-repeat; height: 45px; margin: 0 auto 20px; }
#formBox { margin: 0px auto; padding: 30px; width: 600px; border-radius: 5px; box-sizing: border-box; }
#formBox .singup { background: #000 }
#coursr .form { width: 90%; margin: 0 auto; }
#coursr .form th { padding: 5px; width: 15%; text-align: left; vertical-align: top; color: #4D383A; font-weight: 100; background: url(../images/gap.png) left 18px no-repeat; }
#coursr .form td { padding: 5px; width: 85%; }
#apply_form .form { width: 100%; }
#apply_form .form th { width: 100px; }
#apply_form .form td { width: calc(100% - 100px); }

/* 開課清單 */
.coursr-list .thead { width: 100%; display: table; background: url(../images/g_ti_bg.jpg) repeat-x; border-radius: 10px 10px 0 0; color: #fff; font-weight: bold }
.coursr-list .thead .tr-box { display: table-row; }
.coursr-list .thead .tr-box .th { font-weight: bold; display: table-cell; vertical-align: middle; position: relative; padding: 10px; text-align: center; }
.coursr-list .thead .tr-box .th.date { width: 15%; }
.coursr-list .thead .tr-box .th.name { width: 44%; text-align: left }
.coursr-list .thead .tr-box .th.date { width: 15%; }
.coursr-list .thead .tr-box .th.info { width: 13%; }
.coursr-list .thead .tr-box .th.btnbox { width: 13%; }
.coursr-list .tbody { display: block; width: 100%; background: #fff; }
.coursr-list .tbody .tr-box { display: table; width: 100%; position: relative; }
.coursr-list .tbody .tr-box:nth-child(even) { background: #F3F3F3 }
.coursr-list .tbody .tr-box .td { display: table-cell; text-align: center; vertical-align: middle; padding: 15px 10px; line-height: 1.8em }
.coursr-list .tbody .tr-box .td.date { width: 15%; }
.coursr-list .tbody .tr-box .td.name { width: 44%; text-align: left }
.coursr-list .tbody .tr-box .td.name a { color: #666; text-decoration: none; }
.coursr-list .tbody .tr-box .td.name .read-more { display: inline-block; margin-left: 8px; padding: 0 5px; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); background: url(../images/btn.png) no-repeat; border-radius: 5px; }
.coursr-list .tbody .tr-box .td.date { width: 15%; }
.coursr-list .tbody .tr-box .td.info { width: 13%; }
.coursr-list .tbody .tr-box .td.info .fa { padding: 0 10px 0 0; }
.coursr-list .tbody .tr-box .td.info .fa-external-link-square { color: #91B239 }
.coursr-list .tbody .tr-box .td.info .fa-exclamation-triangle { color: #EBA000 }
.coursr-list .tbody .tr-box .td.btnbox { width: 13%; }
@media (min-width:992px) {
	#coursr .pencil:hover,
	.coursr-list .tbody .tr-box .td.name a:hover { color: #000; text-decoration: underline; }
}
@media (max-width:991px) {
	.coursr-list .thead { display: none; }
	.coursr-list .tbody { background: none; border-bottom: none; }
	.coursr-list .tbody .tr-box { font-size: 0; padding: 40px 0px 0px 0px; display: block; margin: 0 auto 15px auto; background: #fff; border: 1px solid #e1e1e1; }
	.coursr-list .tbody .tr-box .td { font-size: 16px; text-align: left; display: inline-block; vertical-align: top; text-align: left; padding: 8px; width: 100%; border-bottom: 1px solid #ddd }
	.coursr-list .tbody .tr-box .td:before { content: attr(data-mtit) "："; display: inline-block; width: 100px; padding-right: 10px; text-align: right; font-weight: bold; font-size: 16px }
	.coursr-list .tbody .tr-box:nth-child(even) { background: #fff }
	.coursr-list .tbody .tr-box .td.date { width: 50%; }
	.coursr-list .tbody .tr-box .td.name { position: absolute; top: 0; left: 0px; background: #777; height: 40px; overflow: hidden; width: 100%; text-align: left }
	.coursr-list .tbody .tr-box .td.name:before { display: none; }
	.coursr-list .tbody .tr-box .td.name a { color: #fff; text-decoration: none; padding: 0 80px 0 10px; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
	.coursr-list .tbody .tr-box .td.name .read-more { position: absolute; right: 10px; }
	.coursr-list .tbody .tr-box .td.date { width: 50%; }
	.coursr-list .tbody .tr-box .td.info { width: 50%; border: 0; border-bottom: 1px solid #ddd; }
	.coursr-list .tbody .tr-box .td.btnbox { width: 50%; border: 0; }
	#apply_form { width: 100%; }
	#apply_form .form th { width: 80px; }
	#apply_form .form td { width: calc(100% - 80px); }
	#coursr .pencil { background: url('../images/btn.png') center center; padding: 0 15px; border-radius: 30px; height: 30px; line-height: 30px; }
}
@media (max-width:767px) {
	.coursr-list .tbody .tr-box .td.date,
	.coursr-list .tbody .tr-box .td.info,
	.coursr-list .tbody .tr-box .td.btnbox { width: 100%; }
	.coursr-list .tbody .tr-box .td.info { border-bottom: 1px solid #ddd }
	#formBox { width: 500px }
}
@media (max-width:640px) {
	#formBox { width: 480px }
}
@media (max-width:480px) {
	#formBox { width: 375px }
}
@media (max-width:375px) {
	#formBox { width: 300px }
	.coursr-list .tbody .tr-box .td.name { height: auto; }
	.coursr-list .tbody .tr-box .td.name a { white-space: unset; }
}

/* =======================  Article Set.  ==================== */
#artical { position: relative; }
.articalBox { margin: 10px auto 20px; position: relative; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4); border-radius: 5px; width: 90%; overflow: hidden; padding: 10px; box-sizing: border-box; }
.articalBox .leftBox { float: left; width: 60%; padding: 20px; background: url(../images/news_line.png) bottom repeat-x; overflow: hidden; }
.articalBox .title { font-size: 1.6em; margin-bottom: 10px; display: inline-block; color: #000; width: 100%; overflow: hidden; text-decoration: none; }
.articalBox .clearfix:after { display: table; content: " "; clear: both; }
.articalBox .txt { color: #5A5A5A; line-height: 1.6em; font-size: 15px; overflow: hidden; width: 100%; margin-top: 10px; display: block; text-decoration: none; }
.articalBox .pic { display: block; float: right; width: 40%; overflow: hidden; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
.articalBox .pic img { width: 100%; }
.articalBox:hover .pic { opacity: 0.8 }
.articalBox.two .leftBox { float: right; }
.articalBox.two .pic { float: left; }
@media only screen and (max-width:992px) {
	.articalBox { width: calc(100% - 10px); margin: 10px 5px 20px; }
}
@media only screen and (max-width:767px) {
	.articalBox .leftBox,
	.articalBox .pic { width: 50%; }
}
@media only screen and (max-width:640px) {
	.articalBox .leftBox,
	.articalBox .pic { width: 100%; }
	.articalBox .leftBox { padding: 10px 0 15px; }
}

/* =======================  News Set.  ==================== */
#newsList .box { border: #d2d2d2 1px solid; box-sizing: border-box; padding: 8px; float: left; margin: 0 10px 20px 0; width: 100%; }
#newsList .box.noMar { margin-right: 0 }
#newsList .box .pic { width: 35%; background: url(../images/i_event_bg.png) no-repeat center bottom; padding-bottom: 1%; background-size: contain; display: block; float: left; }
#newsList .box .pic:hover { opacity: 0.9 }
#newsList .box .pic img { width: 100%; border: 1px solid #fff; }
#newsList .box .info { width: 65%; display: inline-block; }
#newsList .box .info .date { width: 80px; margin-left: 15px; float: left; margin-top: 15px; font-size: 1.7em; font-family: arial; font-weight: bold; text-align: left; }
#newsList .box .info .date span { font-size: 0.5em; border-left: 1px solid #ccc; padding-left: 5px; margin-top: 10px; margin-left: 5px; }
#newsList .box .name { display: block; float: left; width: calc(100% - 95px); margin-top: 23px; height: 42px; overflow: hidden; font-size: 16px; }
#newsList .box .name:hover { color: #000 }
#newsList .box .info .txt { padding: 12px; overflow: hidden; float: left; }
@media screen and (max-width:991px) {
	#newsList .box .pic { width: 30%; }
	#newsList .box .info { width: 70%; }
}
@media screen and (max-width:640px) {
	#newsList .box { width: calc(50% - 20px); margin: 0 10px 20px; height: 290px; padding: 10px; }
	#newsList .box .pic,
	#newsList .box .name,
	#newsList .box .info { width: 100%; margin: 0 0 5px 0; }
	#newsList .box .name { font-weight: bold; height: auto; }
	#newsList .box .info .date { margin: 0 }
	#newsList .box .info .txt { height: 90px; overflow: hidden; padding: 0; }
}
@media screen and (max-width:480px) {
	#newsList .box { width: 100%; margin: 0 0 20px 0; height: auto; }
	#newsList .box .info .txt { height: auto; }
}

/* =======================  Download Set.  ==================== */
#dowList { width: 100%; }
#dowList .dowSort { width: 100%; text-align: center; padding: 10px 0; color: #fff; background: url(../images/g_ti_bg.jpg) repeat-x; margin-top: 10px; border-radius: 15px 15px 0px 0px; }
#dowList .dowSort table { width: 100%; font-size: 14px; }
#dowList .dowSort { width: 100%; text-align: center; }
#dowList .dowSort th { padding: 8px 15px; }
#dowList .dowSort tr:hover { background-color: #e0f5fd; }
#dowList .dowSort td { padding: 8px 15px; border-bottom: 1px dotted #ccc; color: #000; }
#dowList .dowSort th:nth-child(1),
#dowList .dowSort td:nth-child(1) { width: 120px; text-align: center; }
#dowList .dowSort th:nth-child(2),
#dowList .dowSort td:nth-child(2) { width: calc(100% - 120px - 80px); text-align: left }
#dowList .dowSort th:nth-child(3),
#dowList .dowSort td:nth-child(3) { width: 80px; text-align: center; }
#dowList .dowSort td i { color: #ccc; }
#dowList .dowSort td i:hover { color: #333; }
@media screen and (max-width:991px) {
	#dowList .dowSort th { padding: 0 15px; }
}
@media screen and (max-width:640px) {
	#dowList .dowSort { background: url(../images/g_ti_bg.jpg) repeat-x 0 -4px; }
	#dowList .dowSort td { padding: 8px }
	#dowList .dowSort .dowSortti th { padding: 8px; }
	#dowList .dowSort th:nth-child(1),
	#dowList .dowSort td:nth-child(1) { width: 100px; vertical-align: top }
	#dowList .dowSort th:nth-child(2),
	#dowList .dowSort td:nth-child(2) { width: calc(100% - 100px - 60px); text-align: left }
	#dowList .dowSort th:nth-child(3),
	#dowList .dowSort td:nth-child(3) { width: 60px; text-align: center; }
	#dowList .dowSort td i { font-size: 16px; }
}

/* =======================  About Set.  ==================== */
#about .bg { background: url(../images/about_img1.png) right 0px no-repeat; line-height: 2em; }
#about .ti1 { color: #28B4EE; font-size: 2em; margin: 20px 0; }
#about .ti2 { color: #28B4EE; font-size: 2em; margin: 26px 0 32px 50px; }
#about .txt1 { width: 57%; margin: 10px 0; }
#about .txt2 { margin: 20px 0; }
#about .img { margin: 5% 0 }
#about .bg2 { background: url(../images/milestone_1.png) right 0px no-repeat; line-height: 2em; }
#about iframe { max-width: 100% !important; }
#about table { width: 100% !important; max-width: 100% !important; }
#about img { max-width: 100% !important; height: auto !important; }
@media screen and (max-width:991px) {
	#about .bg { background: url(../images/about_img1.png) right 0px no-repeat; background-size: 30% }
	#about .ti1 { font-size: 1.8em; }
	#about .ti2 { font-size: 1.8em; }
	#about .txt1 { width: 70%; }
	#about .txt2 { text-shadow: 0 0 2px rgba(255, 255, 255, 1) }
}
@media screen and (max-width:767px) {
	#about iframe { height: 400px; }
	#about .bg { background-position: right 10%; }
	#about .ti1 { font-size: 1.8em; margin: 20px 0 10px 0; }
	#about .txt1 { text-shadow: 0 0 2px 2px rgba(255, 255, 255, 1) }
	#about .ti2 { font-size: 1.8em; margin: 0 0 20px 20px; }
}
@media screen and (max-width:640px) {
	#about iframe { max-width: 100% !important; height: 300px; }
	#about .bg { background-position: right 0px; }
	#about .ti1 { width: 70%; font-size: 1.3em; margin: 20px 0 10px 0; }
	#about .ti2 { width: 70%; font-size: 1.3em; margin: 0 0 50px 0px; }
	#about .txt1 { width: 100%; }
}

/* =======================  service Set.  ==================== */
#serList .top { margin: 0 auto; }
#serList .top .ti { color: #333; font-size: 16px; padding: 10px 0 5px 0; margin-bottom: 15px; width: 120px; border-bottom: 2px solid #333; text-align: center; }
#serList .top .googleMap { margin: 10px auto; }
#serList .top .googleMap iframe { width: 730px; height: 250px; overflow: hidden; border: 0 }
#serList .top .companyTab { color: #333; margin: 10px auto; line-height: 25px; }
#serList .top .companyTab th { width: 12%; vertical-align: text-top; }
#serList .top .companyTab td { width: 24%; text-align: left; }
#serList .top .companyTab1 { color: #333; margin: 10px auto; text-align: left; line-height: 25px; width: 100%; }
#serList .top .companyTab1 th { width: 12%; }
#serList .top .companyTab2 { color: #333; text-align: left; line-height: 25px; margin: 10px auto; width: 100%; }
#serList .top .companyTab2 th { text-align: center; vertical-align: text-top; }
#serList .top .companyTab2 .right { text-align: right; }
#serList .top .remind { width: 100%; margin: 20px 20%; }

/* =======================  Cart Set.  ==================== */

/* 步驟樣式 */
aside .step { list-style: none; }
aside .step a { text-decoration: none; color: #000 }
aside .step>li { margin: 0; border-bottom: 1px dotted #ccc; padding: 17px 0; color: #ccc; }
aside .step>li span { color: #D7D7D7; font-size: 1.6em; font-family: arial; }
aside .step>li.curr { color: #333 }
aside .step>li.curr span { color: #16B3F3 }
aside .step .one { padding: 5px 0 5px 24px; margin: 0; width: 140px; padding-left: 25px; background: url(../images/icon_dot_s.png) no-repeat 5px 8px; display: block; }
aside .step .one:hover,
aside .step .one.on { background: url(../images/li_a_bg.png) no-repeat; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
aside .step .second { margin-left: 13px; list-style: none; margin: 5px 0; }
aside .step .second>li { margin: 0; width: 143px; padding: 3px 0; }
aside .step .second .two { padding: 8px 0 8px 24px; color: #666; }
aside .step .second .two:hover,
aside .step .second .two.on { color: #28B3EC }
.pull-right { float: right; color: #000; }
.w100p { width: 100%; }
.textRed { color: #d9001c; }
.cartDone { padding: 15px; line-height: 2em; }
.cartDone .info { width: 85%; margin: 30px auto; line-height: 1.6em; font-size: 15px; }
a.cartLink { font-size: 16px; margin: 10px 0 20px; padding: 0 40px; color: #FFF; border: none; display: inline-block; line-height: 36px; opacity: 0.8; filter: alpha(opacity = 80); outline: none; border-radius: 3px; display: inline-block; text-decoration: none; background: url(../images/g_ti_bg.jpg) repeat-x; }
a.cartLink:hover { opacity: 1; filter: alpha(opacity = 100); }
.totalPrice { border-top: #28B1E9 1px solid; border-bottom: #28B1E9 1px solid; padding: 15px 0; text-align: right; margin: 15px 0; color: #d9001c; font-size: 16px; text-align: right; font-weight: bold; padding: 10px; font-family: '微軟正黑體'; }
.textAlign_l { text-align: left; }
.catrFloat { position: absolute; right: -45px; top: 200px; width: 40px; background: url(../images/icon_float_cart.png) no-repeat; margin-top: 20px; }
.catrFloat .num { display: block; color: #FF7900; font-size: 14px; margin-top: 51px; width: 31px; text-align: center; margin-right: 6px; font-weight: bold; font-family: arial; }
.catrFloat2 { position: fixed; right: 10px; top: 50vh; z-index: 99; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.catrFloat2 a,
.catrFloat2 button { display: block; width: 38px; padding: 10px; line-height: 1; border-radius: 5px; cursor: pointer; font-size: 15px; color: #fff; text-decoration: none; text-align: center; margin-bottom: 2px; }
.catrFloat2 .line { color: #8A8A8A; height: 40px; text-align: center; border: 1px solid #00c300; background: url('../images/icon_line.svg') center center no-repeat #00c300; font-size: 0; background-size: 80%; }
.catrFloat2 .listLink { color: #fff; text-align: center; border: 1px solid #009ddb; background: #009ddb; }
.catrFloat2 .num { display: block; text-align: center; font-weight: bold; font-family: 'Arial'; color: #fff; font-size: 14px; background: url(../images/icon_float_cart.png) center 10px no-repeat #f35a2a; width: 38px; padding: 35px 0px 10px; border-radius: 5px; border: 1px solid #e64e1f; }
.catrFloat2 .num span { display: block; width: 30px; height: 30px; line-height: 30px; margin: 0 auto; border-radius: 15px; border: 1px solid #ccc; color: #ff0; }
.catrFloat2 .btn-check { color: #fff; font-size: 15px; padding: 5px 10px; line-height: 1; }
.catrFloat2 .btnAdd { color: #fff; border: 1px solid #e64e1f; background: #f35a2a; }
.catrFloat2 .btnShip { color: #fff; border: 1px solid #009ddb; background: #009ddb; }
.catrFloat2 .btnINfo { color: #fff; border: 1px solid #009ddb; background: #009ddb; }
@media screen and (max-width:1000px) {
	.catrFloat,
	.catrFloat2 { right: 0; }
}
@media (min-width:992px) {
	.catrFloat2 .line:hover { background: url('../images/icon_line.svg') center center no-repeat #00a000; border: solid 1px #0d7d0d; background-size: 80%; }
	.catrFloat2 .num:hover,
	.catrFloat2 .btnAdd:hover,
	.catrFloat2 .listLink:hover,
	.catrFloat2 .btnShip:hover,
	.catrFloat2 .btnINfo:hover { opacity: 0.9; }
	.catrFloat2 .num:hover span { background: #fff; color: #f35a2a; }
}
@media (max-width:991px) {
	aside .step { text-align: center; font-size: 0 }
	aside .step>li { display: inline-block; width: 25%; font-size: 16px; padding: 5px 0; }
	aside .step>li:not(:last-child):after { content: '>'; font-size: 10px; display: inline-block; margin-left: 10px; }
	aside .step>li span { font-size: 1.2em }
}
@media (max-width:767px) {
	aside .step>li { width: 50%; text-align: left; }
	.catrFloat2 { top: 40% !important; padding-bottom: 60px; bottom: 0; transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); }
	.catrFloat2 .bottom-box {font-size: 0; width: 100vw; overflow: hidden; position: fixed; bottom: 0; right: 0; }
	.catrFloat2 .bottom-box>* { width: 50vw; height: 44px; line-height: 42px; padding: 0; border-radius: 0; margin: 0; display: inline-block; }
}
@media (max-width:400px) {
	aside .step { text-align: left }
	aside .step>li { width: calc(100% - 6px); margin: 0 3px; }
}

/* STEP1 */
.shop-list { width: 100%; margin: 0 auto; }
.shop-list .thead { width: 100%; display: table; border-bottom: #eee 5px solid; border-top: #29AEE4 1px solid; }
.shop-list .thead .th { display: table-cell; vertical-align: top; position: relative; height: 45px; line-height: 45px; text-align: center; padding: 0 15px; font-weight: bold; }
.shop-list .tbody .t-row { width: 100%; border-bottom: 1px solid #ddd; display: table; }
.shop-list .tbody .t-row .td { display: table-cell; text-align: center; padding: 20px 10px; line-height: 30px; vertical-align: middle; line-height: 1.8rem; color: #212121; }
.shop-list .t-ppic { width: 15% }
.shop-list .t-pname { width: 25% }
.shop-list .t-pspec { width: 12% }
.shop-list .t-pprice { width: 10% }
.shop-list .t-pqua { width: 10% }
.shop-list .t-psum { width: 10% }
.shop-list .t-punit { width: 10% }
.shop-list .t-pdel { width: 20px }
.shop-list .tbody .t-row .td.t-del { border-right: 0; }
.shop-list .tbody .t-row .td.t-del a.delete-btn { background: url(../images/btn_de.png); width: 16px; height: 16px; overflow: hidden; text-indent: -9999px; margin: 0 auto; }
.shop-list .tbody .t-row .t-ppic { border-right: 0; }
.shop-list .tbody .t-row .t-ppic .img { display: block; width: 100%; position: relative; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.shop-list .tbody .t-row .t-ppic .img img { width: 100%; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; width: 100%; }
.shop-list .tbody .t-row .t-pname { text-align: left; }
.shop-list .tbody .t-row .t-pname a { color: #28B1E9; }
.shop-list .tbody .t-row .t-pdel .delete-btn { background: url(../images/btn_de.png); width: 16px; height: 16px; overflow: hidden; text-indent: -9999px; margin: 0 auto; display: inline-block; vertical-align: top; border: none; position: relative; font-size: 0; padding: 0; color: #aaa; overflow: hidden; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.shop-list .tbody .t-row .t-pdel .delete-btn:hover { background: url(../images/btn_de.png) 0 16px; }
.shop-list .total-box { width: 19%; text-align: center; padding-top: 50px; float: right; }
.shop-list .total-box .total-price:before { content: ''; background: url('../images/icon_coin.png') center center no-repeat; background-size: auto 100%; font-size: 1.2rem; display: inline-block; width: 40px; height: 28px; padding-right: 10px; vertical-align: middle }
.shop-list .tbody .t-row .t-pqua input[type="number"] { width: 85px; height: 30px; padding-right: 0; }
@media (min-width:992px) {
	.shop-list .tbody .t-row:hover { background: #f4f4f4; }
}
@media (max-width:767px) {
	.shop-list .thead { display: none; }
	.shop-list .tbody .t-row { width: 100%; border: 1px solid #ddd; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05); padding: 10px 10px 10px 30%; position: relative; background: #fff; margin: 0 0 20px; }
	.shop-list .tbody .t-row .td { text-align: left; position: relative; display: inline-block; border-right: none; padding: 5px 10px 5px 60px }
	.shop-list .tbody .t-row .t-ppic { position: absolute; left: 0; top: 0; width: 30%; padding: 10px }
	.shop-list .tbody .t-row .t-pname { display: block; width: 100%; padding: 5px 15px 10px; margin: 0 0 10px; position: relative; }
	.shop-list .tbody .t-row .t-pname:after { content: ''; position: absolute; width: calc(100% - 30px); left: 15px; background: #ddd; bottom: 0; height: 1px; }
	.shop-list .tbody .t-row .t-pspec,
	.shop-list .tbody .t-row .t-pprice,
	.shop-list .tbody .t-row .t-pqua,
	.shop-list .tbody .t-row .t-psum,
	.shop-list .tbody .t-row .t-punit,
	.shop-list .tbody .t-row .t-pdel { display: inline-block; vertical-align: top; width: calc(100%/2); text-align: left; }
	.shop-list .total-box { width: 100%; text-align: right; padding-top: 10px; }
	.shop-list .tbody .t-row .td:before { content: ''; position: absolute; left: 15px; top: 5px; }
	.shop-list .tbody .t-row .t-pprice:before { content: '單價：'; }
	.shop-list .tbody .t-row .t-pqua:before { content: '數量：'; }
	.shop-list .tbody .t-row .t-psum:before { content: '小計：'; }
	.shop-list .tbody .t-row .t-pspec:before { content: '規格：'; }
	.shop-list .tbody .t-row .t-punit:before { content: '單位：'; }
	.shop-list .tbody .t-row .t-pdel { position: absolute; right: 0; bottom: 0; text-align: right; }
}
@media (max-width:640px) {
	.shop-list .tbody .t-row { padding: 10px 10px 10px 25%; }
	.shop-list .tbody .t-row .t-ppic { width: 25% }
	.shop-list .tbody .t-row .t-pspec,
	.shop-list .tbody .t-row .t-pprice,
	.shop-list .tbody .t-row .t-pqua,
	.shop-list .tbody .t-row .t-psum,
	.shop-list .tbody .t-row .t-punit { width: calc(100%/2); }
	.shop-list .tbody .t-row .t-ppic .img { max-width: 200px; margin: 0 auto; }
}
@media (max-width:480px) {
	.shop-list .tbody .t-row { padding: 0 0 10px 0; }
	.shop-list .tbody .t-row .t-ppic { position: relative; width: 100%; display: block; margin: 0 auto; }
	.shop-list .tbody .t-row .t-pname { padding: 5px 15px 10px; margin: 0 0 5px; }
	.shop-list .tbody .t-row .t-pspec,
	.shop-list .tbody .t-row .t-pprice,
	.shop-list .tbody .t-row .t-pqua,
	.shop-list .tbody .t-row .t-psum,
	.shop-list .tbody .t-row .t-punit { display: block; width: 100%; }
}

/* STEP2 */
@media (max-width:640px) {
	.selectbox select { width: 100%; }
}
#ship { width: 600px; height: 400px; padding: 0 30px 30px; box-sizing: border-box }
#ship .ti { font-size: 1.6em; font-weight: bold; color: #555; background: url(../images/icon_money.png) left center no-repeat; padding-left: 40px; line-height: 2.2em; border-bottom: 1px solid #efefef; }
#ship .sTi { color: #e54e0e; font-size: 1.1em; }
#ship .reset { list-style-image: url('../images/icon_dot_big.png') }
#ship .reset>li { line-height: 26px; }
#ship .reset>li>span { font-weight: bold; font-size: 1.1em; color: #17b6f6; }
#ship table { margin-top: 15px; width: 90%; }
#ship table th,
#ship table td { padding: 8px; border-bottom: 1px solid #ececec; color: #666 }
#formBox .form th { width: 70px; }
#formBox .form td { width: calc(100% - 70px); }
#formBox .imgCode { display: inline-block; }
#formBox .inText.code { width: calc(100% - 100px) }
@media (max-width:640px) {
	#formBox { padding: 15px; max-height: 75vh; overflow-y: auto }
}

/* 2021/03/10 */
.new-box { font-size: 0; padding: 3% 20px; }
.new-box .pic-box,
.new-box .txt-box { display: inline-block; vertical-align: top }
.new-box .pic-box { width: 35%; border: 5px solid #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5) }
.new-box .pic-box img { width: 100% }
.new-box .txt-box { width: 65%; font-size: 14px; padding: 0 0 0 30px; line-height: 3rem; }
.new-box .txt-box h2 { font-size: 1.2em; margin: 0 0 16px 0; display: inline-block }
.new-box .txt-box .link { color: #3294DF; float: right; font-size: 1.2rem; font-weight: bold; font-family: serif; line-height: 50px }
.new-box .txt-box h2> img { display: inline-block; margin-right: 8px; vertical-align: middle }
.new-box .txt-box h2> span { font-size: 0.9em; color: #B2B2B2; padding-left: 7px; display: inline-block; }
.new-box .txt-box p { padding: 16px 0; font-size: 16px; line-height: 2rem; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef }
.new-box .txt-box p> a { color: #3294DF }
#iContent .new-box .iMore { line-height: 50px; display: inline-block; margin-top: 0 }
@media (max-width:1199px) {
	.new-box .pic-box { width: 30% }
	.new-box .txt-box { width: 70%; padding-left: 20px }
}
@media (max-width:991px) {
	.new-box .pic-box { width: 40% }
	.new-box .txt-box { width: 60%; padding-left: 20px }
}
@media (max-width:767px) {
	.new-box { padding: 20px 0; }
	.new-box .pic-box { display: block; width: 100%; margin-bottom: 1.5rem }
	.new-box .txt-box { display: block; width: 100%; padding-left: 0px; font-size: 16px; line-height: 2rem }
	#iContent .new-box .iMore { line-height: unset }
}

/* 2022/12/07 */
/* RWD table */
.rwd-tab { width: 100%; margin: 0 auto 40px;}
.rwd-tab .th-box{ width: 100%; display: block; font-size: 0; background: #EDF7FF; }
.rwd-tab .th-box .td{ border-top:1px solid #E4E4E4; font-size: 16px; font-weight: bold; text-align: center;} 
.rwd-tab .td-box{ display: flex; font-size: 0;}
.rwd-tab .td { width: calc((100% - 25%)/3); display: inline-block; vertical-align: middle; line-height: 26px; font-size: 14px; padding: 7.5px 10px; border-bottom: 1px solid #E4E4E4; border-right: 1px solid #E4E4E4;text-align: center;}
.rwd-tab .td select{ width: 50px; border:1px solid #E4E4E4; border-radius: 0;}
.rwd-tab .td span{ font-size: 8px; color: #73a3c9;}
.rwd-tab .td .btn-delete{background: url(../images/btn_de.png); width: 16px; height: 16px; overflow: hidden; text-indent: -9999px; margin: 0 auto; display: inline-block; vertical-align: top; border: none; position: relative; font-size: 0; padding: 0; color: #aaa; overflow: hidden; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
.rwd-tab .td .delete:hover{ background: url(../images/btn_de.png) 0 16px;}
.rwd-tab .td h5{font-size: 16px; line-height: 1.5; margin: 0;}
.rwd-tab .td.title{ width: 15%; border-left:1px solid #E4E4E4;text-align: left; }
.rwd-tab .td.price{ width: 10%; }
.rwd-tab.video-rwd-tab .th-box ,
.rwd-tab.video-rwd-tab .td-box{display: table-row;}
.rwd-tab.video-rwd-tab .td{ display: table-cell; width: calc(70%/2); }
.rwd-tab.video-rwd-tab .td.pic { width: 20%; border-left:1px solid #E4E4E4; }
.rwd-tab.video-rwd-tab .td.pic img{ width: 100%;}
.rwd-tab.video-rwd-tab .td.delete { width: 10%;}
.rwd-tab.video-rwd-tab .totla-price{ padding: 15px 20px; text-align: right; background: #f5f5f5;}
.rwd-tab.video-rwd-tab .totla-price span{font-weight: bold; font-size: 20px; display: inline-block; margin-left: 20px;}
@media (max-width:991px) {
  .rwd-tab .td{ padding: 5px;}
}
@media (max-width:767px) {
  .rwd-tab .th-box{display: none;}
  .rwd-tab .td-box{ position: relative; display: flex; flex-wrap: wrap; border: 1px solid #efefef; border-bottom: 0; margin-bottom: 20px; padding: 0; }
  .rwd-tab .td{ width: 100%; border: 0; padding: 8px 8px 8px 65px;position: relative;text-align: left; border-bottom: #efefef 1px solid;}
  .rwd-tab .td:before{ content: attr(data-mtit)"：";  font-size: 15px;   display: block;  position: absolute;  left: 10px;  top: 8px;  width: 50px;  text-align: right}
  .rwd-tab .td.title{width: 100%; border: 0; background: #666; color: #fff; font-weight: bold;}
  .rwd-tab .td.title a{ background: #fff;}
  .rwd-tab .td.price{ width: 100%;}
  .rwd-tab .td.pic { width: 100%;  border: 0;}
  .rwd-tab .td.delete { border: 0; width: 30px; height: 30px; padding: 0; position: absolute; right: 0; top: 10px;}
  .rwd-tab .td.delete::before{ display: none;}
}
.flex-wrap{display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; align-items: center;}
.flex-wrap select{ margin: 0 auto 0 0 ; border-radius: 0; height: 36px; font-size: 15px; line-height: 34px; padding: 0 10px; cursor: pointer; text-align: center; position: relative; margin-bottom: 0; background: #333; color: #fff; border: 1px solid #ddd; -webkit-transition: border-radius 0.3s; -o-transition: border-radius 0.3s; transition: border-radius 0.3s;}
.flex-wrap .btn-buy-info{ margin: 0  0 0 auto;  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 50%);
  background: url(../images/btn.png);
  width: 122px;
  height: 31px;
  line-height: 31px;
  font-size: 17px;
  letter-spacing: 3px;
  text-decoration: none;
  font-weight: bold;
  display: block;
  padding: 0;
}
.flex-wrap .newest,
.flex-wrap .popular{ display: inline-block; color: #000; }
.flex-wrap .newest.current,
.flex-wrap .popular.current{ text-decoration: underline; }
.flex-wrap .newest.current:after,
.flex-wrap .popular.current:after{content: ''; display: inline-block; vertical-align: middle; border-style: solid; border-width: 6px 3px; margin-left: 3px; border-color: #000 transparent transparent transparent ; }
.flex-wrap .newest:hover,
.flex-wrap .popular:hover{ color: #26B7F3; }
#video-class .list { gap: 15px; }
#video-class .list .box { position: relative; display: flex; align-items: flex-start; border-bottom: 1px solid #ddd; padding: 15px 0px; }
#video-class .list .box .pic-box { width: 200px; aspect-ratio: 200 / 144 }
#video-class .list .box .pic-box img{ width: 100%; height: 100%; border: 4px solid #fff; aspect-ratio: 200 / 140 }
#video-class .list .box .pic-box:after{ content:''; display: block; width: 90%; margin: 0 auto; height: 4px; background: url(../images/i_event_bg.png) no-repeat center bottom;}
#video-class .list .box .txt-box { width: calc(100% - 200px - 15px); padding: 10px 20px; }
#video-class .list .box .txt-box h4 { font-weight: bold; }
#video-class .tag { color: #26B7F3; font-weight: bold; line-height: 1; }
#video-class .tag:before{ content: ''; display: inline-block; vertical-align: middle; border-style: solid; border-width: 4px 5px; border-color:  transparent transparent transparent #26B7F3; }
#video-class .list .box .txt-box .btn-info { font-size: 15px; display: inline-block; border: none; padding: 5px 20px; font-size: 16px; color: #FFF; margin: 10px 0 0; background: url(../images/g_ti_bg.jpg) repeat-x; text-align: center; text-decoration: none; opacity: 0.8;  -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; text-shadow: 1px 1px 1px rgb(0 0 0 / 20%); }
#video-class .list .box .txt-box .btn-info:hover{text-shadow: 1px 1px 1px rgba(0 0 0 / 80%);}
#video-class .list .box .txt-box .checkbox { position: absolute; right: 0; top: 15px; margin: 0; padding: 0; }
#video-class .list .box .txt-box label { padding-left: 0; }
.btn-red { text-align: center; color: #fff; text-shadow: 1px 1px 2px rgb(0 0 0 / 50%); background: url(../images/btn_red.png); width: 122px; height: 31px; line-height: 31px; font-size: 17px; letter-spacing: 3px; text-decoration: none; font-weight: bold; display: inline-block; margin-right: 0; padding: 0; }
.btn-red:hover{ color: #fff; text-decoration: none; }
#video-info { width: 800px; height: 600px;}
.h5{ font-size: 18px; font-weight: bold;}

@media (max-width:767px) {
  .flex-wrap select{width: calc(100% - 151px); }
  .flex-wrap{ justify-content: flex-start;}
  #video-class .list .box{padding: 10px; flex-wrap: wrap; border: 1px solid #ddd; margin: 8px 0;}
  #video-class .list .box .pic-box{ width: 30%; }
  #video-class .list .box .txt-box{ width: 70%;padding: 0 0 0 10px; }
  #video-class .list .box .txt-box h4{font-size: 1rem;}
  #video-class .list .box .txt-box .checkbox{ top: 10px; right: 10px;  }
  
}
.flex-wrap .cate-wrap {
  margin: 0 auto 0 0 ;
  position: relative;
  font-size: 15px;
}
.cate-wrap .toggle {
  width: 100%; margin: 0 auto; height: 36px; font-size: 15px; line-height: 34px; padding: 0 33px 0 17px; cursor: pointer; text-align: center; position: relative; margin-bottom: 0; background: #333; color: #fff; border: 1px solid #ddd; -webkit-transition: border-radius 0.3s; -o-transition: border-radius 0.3s; transition: border-radius 0.3s;
}
.cate-wrap .toggle:after{
  content: ''; display: block; position: absolute; right: 10px; top: 12px; border-style: solid; border-width:  5px 4px; border-color: #26B7F3 transparent transparent transparent ; }
  .cate-wrap .toggle.on .ul-list{ display: block; }
.cate-wrap .ul-list { font-size: 15px; list-style: none; margin: 0; padding: 0; text-align: center; position: absolute; width: 100%; display: none; left: 0; background: rgb(255, 255, 255); border: 1px solid #ddd; z-index: 99; border-top: 0;
}
.cate-wrap .ul-list li{margin: 10px 0;}
.cate-wrap .ul-list li a{ color: #000;}
.cate-wrap .ul-list li.current a{color:#26B7F3 ;}
@media (max-width:767px) {
  .flex-wrap .cate-wrap{ width: 100%;}
}

#printArea{
  width: 1000px;
  margin: 0 auto;
  padding: 30px;
}
#printArea *{
  -webkit-print-color-adjust: exact !important;
  color-adjust: exact !important;
}
#printArea table {
  border: 0;
  border-collapse: collapse;
  border-radius: 8px;
  width: 100%;
}
#printArea th {
  border: solid 1px #ddd;
  padding: 8px 15px;
  font-size: 18px;
  font-weight: bold;
}
#printArea td {
  width: 25%;
  border: solid 1px #ddd;
  text-align: center;
  padding: 8px 15px;
  color: #000;
  vertical-align: middle;
  line-height: 26px;
  font-size: 16px;
}
#printArea td.title{text-align: left; width: 22%;}
#printArea th.blue-style{background: #EDF7FF!important;; -webkit-print-color-adjust: exact !important; color-adjust: exact !important;}
#printArea td .input{ display: inline-block; width: 70px; margin: 0 10px; height: 30px; vertical-align: middle; border: 1px solid #ddd; }
@page{
  size: A4 portrait;  /* 尺寸/保留字 + 方向 */
}

@media print{
  body { 
		-webkit-print-color-adjust: exact!important;
	} 
  
  #printArea *{
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  #printArea table {
    border: 0;
    border-collapse: collapse;
    border-radius: 8px;
    width: 100%;
  }
  #printArea th {
    border: solid 1px #ddd;
    padding: 8px;
    font-size: 18px;
    font-weight: bold;
  }
  #printArea td {
    width: 25%;
    border: solid 1px #ddd;
    text-align: center;
    padding: 8px;
    color: #000;
    vertical-align: middle;
    line-height: 26px;
    font-size: 16px;
  }
  #printArea td.title{text-align: left;}
  #printArea th.blue-style{background: #EDF7FF!important;; -webkit-print-color-adjust: exact !important; color-adjust: exact !important;}
  #printArea td .input{ display: inline-block; width: 65px; height: 30px; vertical-align: middle; border: 1px solid #ddd; }

  
}


/* 防木馬