@charset "utf-8";
/*@import "reset.css";*/
@font-face {
	font-family: 'wegoluck_icons';
	src: url('../Fonts/wegoluck_icons.eot');
	src: url('../Fonts/wegoluck_icons.eot') format('embedded-opentype'),  url('../Fonts/wegoluck_icons.ttf') format('truetype'),  url('../Fonts/wegoluck_icons.woff') format('woff'),  url('../Fonts/wegoluck_icons.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*------ Common Setting ------*/
* {
    -webkit-box-sizing: inherit !important;
    -moz-box-sizing: inherit !important;
    box-sizing: inherit !important;
}
body {
	font-family: "Microsoft JhengHei", "Heiti TC", "WenQuanYi Zen Hei", "Arial";
	margin: 0;
	font-size: 15px;
	color: #333;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Microsoft JhengHei", "Heiti TC", "WenQuanYi Zen Hei", "Arial";
	font-weight: bold;
}
h1, h2, h3, h4 {
	margin: 0 0 20px;
}
h5, h6 {
	margin: 0 0 10px;
}
h1 {
	font-size: 36px;
}
h2 {
	font-size: 30px;
}
h3 {
	font-size: 24px;
}
h4 {
	font-size: 18px;
}
h5 {
	font-size: 15px;
}
h6 {
	font-size: 18px;
}
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #CCC;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
}
.clearfix {
 *display: inline-block;
	/*height: 1%;*/
}
.clear {
	clear: both;
}
.float_left {
	float: left !important;
}
.float_right {
	float: right !important;
}
.align_left {
	text-align: left !important;
}
.align_right {
	text-align: right !important;
}
.align_center {
	text-align: center !important;
}
.valign_bottom {
	position: absolute;
	bottom: 1em;
}
.hide {
	display: none !important;
}
.half {
    width: 50%;
    float: left;
}
.highlight {
    color: #C00 !important;
    font-weight: bold !important;
}
.disable {
    color: #999;
}
.wrong_text {
    font-weight: bold;
    color: #ff2800 !important;
}
input.disable {
    background: #eee;
    color: #999;
}
input.disable [placeholder] {
    color: #aaa;
}
input.larger[type=checkbox] {
    width: 1.2em;
    height: 1.2em;
}
input.wrong_status, select.wrong_status {
    background: rgba(255,40,0,0.1);
    border: 1px solid #ff2800 !important;
    font-weight: bold;
    color: #ff2800 !important;
}
input.full_text {
    min-width: 400px;
}
label + label {
    margin-left: 2em;
}
textarea {
    width: 90%;
}

/*------ All icons ------*/
i {
    font-weight: normal !important;
}
i:before {
    margin-right: 0.3em;
    font-family: 'wegoluck_icons';
    font-style: normal;
}
i.fa:before {
   font: normal normal normal 14px/1 FontAwesome;
   margin: 0;
}

/* 商品管理 */
i.icon_pdcManage {
    background-image: url(../../images/menu/icon_pdcManage.svg);
}
/* 數位履歷 */
i.icon_videoCatalog {
    background-image: url(../../images/menu/icon_videoCatalog.svg);
}
/* 寄倉管理 */
i.icon_shipManage {
    background-image: url(../../images/menu/icon_shipManage.svg);
}
/* 供應鏈管理 */
i.icon_chainManage {
    background-image: url(../../images/menu/icon_chainManage.svg);
}
/* 船期管理 (已不使用) */
i.icon_dateManage {
    background-image: url(../../images/menu/icon_dateManage.svg);
}
/* 價格管理 */
i.icon_priceManage {
    background-image: url(../../images/menu/icon_priceManage.svg);
}
/* 營收管理 */
i.icon_revenueManage {
    background-image: url(../../images/menu/icon_revenueManage.svg);
}
/* 存退貨管理 */
i.icon_stockManage {
    background-image: url(../../images/menu/icon_stockManage.svg);
}
/* 行銷管理  */
i.icon_marketingManage {
    background-image: url(../../images/menu/icon_marketingManage.svg);
}
/* 通知與詢問 (已不使用) */
i.icon_notice {
    background-image: url(../../images/menu/icon_notice.svg);
}
/* 帳務管理 */
i.icon_accoutManage {
    background-image: url(../../images/menu/icon_accoutManage.svg);
}
/* 帳號與通知 */
i.icon_memberManage {
    background-image: url(../../images/menu/icon_memberManage.svg);
}
i.forget:before {
    content: "\e918";
}
i.resend:before {
    content: "\e917";
}
i.facebook:before {
    content: "\e929";
}
i.line:before {
    content: "\e914";
}
i.telephone:before {
    content: "\e916";
}
i.email:before {
    content: "\e915";
}
i.logistics:before {
    content: "\e923";
}
i.analysis:before {
    content: "\e91d";
}
i.video:before {
    content: "\e922";
}
i.global:before {
    content: "\e91e";
}
i.service:before {
    content: "\e921";
}
i.service_small:before {
    content: "\e903";
}
i.list:before {
    content: "\e91f";
}
i.price:before {
    content: "\e920";
}
i.money:before {
    content: "\e91c";
}
i.box:before {
    content: "\e900";
}
i.shipper:before {
    content: "\e90e";
} 
i.platform:before {
    content: "\e901";
}
i.percent:before {
    content: "\e902";
}

/*------ Container ------*/
/* 共用內容區外層 */
.container {
	width: 1120px !important;
	margin: 0 auto;
	position: relative;
}
.container a {
    color: #069;
    text-decoration: underline;
    cursor: pointer;
}
.container a:hover {
    color: #09C;
    transition: 0.3s all;
    -webkit-transition: 0.3s all;
    -moz-ransition: 0.3s all;
}
.container input, .container select, .container textarea {
	width: auto;
	border-radius: 3px;
	border: 1px solid #BBB;
	box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
}
.container input, .container select {
    padding: 0.3em;
    margin: 0.3em;
}
.container textarea {
    padding: 10px;
    line-height: 1.2em;
}
.container input[type="radio"] {
    box-shadow: none;
}
.container input, .container select {
	font-size: 13px;
    line-height: 1em;
}
.container input[readonly] {
	border: none;
    box-shadow: none;
}

/* 首頁內容區 */
.main_content, .page_content {
	min-height: 320px;
	line-height: 1.5em;
}
.main_content {
	padding: 40px 0;
}
.main_content > h3 {
	padding-bottom: 0.5em;
	border-bottom: 1px solid #ccc;
	color: #980000;
}

/* 內頁內容區 */
.page_content {
	padding: 0 0 40px;
}
.page_content > h3,
.page_content > div > h3 {
	margin: 0 0 30px;
	font-size: 20px;
	font-weight: bold;
	color: #980000;
}
.page_content > h3:before,
.page_content > div > h3:before {
	background: #980000;
	width: 0.4em;
	height: 1em;
	margin-right: 0.5em;
	display: inline-block;
	float: left;
	content: "";
}

/* 大段落 */
.section {
	margin: 0 auto 30px;
}
.page_content > .section:last-child {
	margin: 0 auto;
}
.section.separateBorder {
	padding-bottom: 30px;
	border-bottom: 1px solid #CCC;
}
.section_title {
	padding-bottom: 5px;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
	font-size: 16px;
	font-weight: bold;
}
.section.separateBorder:last-child,
.section.separateBorder > .section_title {
	padding-bottom: 0;
    border-bottom: none;
}

/* 小段落 */
.paragraph, p {
	margin: 0 auto 20px;
    font-weight: normal;
}
.paragraph:last-child, p:last-child {
	margin: 0 auto;
}
.paragraph_title {
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: bold;
	color: #000;
}

/* 多欄式區塊群組 */
.blockGroup {
    margin: 0 auto;
    border-collapse: collapse;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.blockGroup > div {
	background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
	line-height: 1.5em;
    text-align: left;
    position: relative;
}
/* 多欄式區塊群組-三欄 */
.blockGroup.three > div {
    width: calc(32% - 32px);
	padding: 15px;
}
/* 多欄式區塊群組-四欄 */
.blockGroup.four > div {
    width: calc(23.5% - 22px);
	padding: 10px;
}
/* 多欄式區塊群組-五欄 */
.blockGroup.five > div {
    width: calc(19.2% - 22px);
    padding: 10px;
}
/* 多欄式區塊群組-六欄 */
.blockGroup.six > div {
    width: calc(15.8% - 22px);
    padding: 10px;
}
.blockGroup.three > div,
.blockGroup.four > div {
    margin: 0 2% 20px 0;
}
.blockGroup.five > div,
.blockGroup.six > div {
    margin: 0 1% 20px 0;
}
.blockGroup.three > div:nth-child(3n),
.blockGroup.four > div:nth-child(4n),
.blockGroup.five > div:nth-child(5n),
.blockGroup.six > div:nth-child(6n) {
    margin: 0 0 20px 0;
}

/* 表單群組 */
.formGroup {
	margin: 10px 0;
	text-align: left;
}
.formData {
	width: 100%;
	display: table;
	float: left;
}
.formData > div {
	display: table-cell;
	padding-bottom: 5px;
	text-align: left;
	vertical-align: top;
}
.formData .formTitle {
	width: 180px;
	font-weight: bold;
	text-align: right;
	color: #069;
}
.formData .formText {
	padding-left: 5px;
	text-align: left;
}

/* 搜尋列 */
.searchGroup button.search,
.searchGroup a.button.search {
    margin: 0.3em 10px 0.3em 0;
    padding: 0.3em 0.8em;
    font-size: 13px;
    line-height: 1.5em;
}
.searchGroup button.search:before,
.searchGroup a.button.search:before {
    margin-right: 0.3em;
    font-family: 'wegoluck_icons';
    font-style: normal;
    content: "\e925";
}
.searchGroup input#SearchText {
	width: 200px;
}
.searchGroup .other_checkbox {
	display: inline-block;
}

/* 單行搜尋列 */
.searchGroup > select /* for舊版寫法 */,
.searchGroup .searchBar {
    float: left;
}
.searchGroup .searchBar button.search,
.searchGroup .searchBar a.button.search {
    border-radius: 0 5px 5px 0;
    float: left;
}
.searchGroup .searchBar select,
.searchGroup .searchBar input {
    line-height: 1.5em;
    float: left;
}
.searchGroup .searchBar input {
    border-radius: 5px 0 0 5px;
}
.searchGroup .searchBar input[type="checkbox"] {
    float: none;
    margin-left: 1em;
}
.searchGroup .searchBar input + button.search,
.searchGroup .searchBar input + a.button.search {
    margin-left: -5px;
}
.searchGroup .searchBar + button {
    margin: 0.3em 0;
}

/* 多行搜尋列 */
.searchGroup .searchData.float_left {
    float: none !important;
	display: inline-block;
	vertical-align: middle;
}
.searchGroup .searchData.float_left + .searchData.float_left {
    margin-left: 0.5em;
}
.searchGroup .searchData input + button {
	padding: 0.3em 0.8em 0.4em;
    margin-left: -0.7em;
	border-radius: 0 5px 5px 0;
    line-height: 1em;
}

/* 提示說明區塊 */
.point_block {
    width: calc(100% - 40px);
    background: #f5ebeb;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}
.point_block .point_block {
    width: initial;
    padding: 20px 0;
}
/* 左右排列 */
.point_block.horizontal {
    display: table;
}
.point_block.horizontal > div {
    display: table-cell;
}
/* 上下排列 */
.point_block.vertical {
    display:block;
}
.point_block .point_title {
    font-size: 16px;
    font-weight: bold;
}
.point_block.horizontal .point_title {
    min-width: 7em;
    border-right: 1px solid #BBB;
    padding-right: 0.5em;
}
.point_block.vertical .point_title {
    border-bottom: 1px solid #BBB;
    padding-bottom: 0.5em;
}
.point_block .point_title img {
    width: auto !important;
    height: 24px;
	padding-right: 5px;
    float: left;
}
/* 僅有標題，無內文 */
.point_block.vertical.onlyTitle .point_title {
    border-bottom: none;
    padding-bottom: 0;
}
.point_block .point_text {
    font-size: 15px;
    font-weight: normal;
}
.point_block.vertical .point_text {
    padding-top:1em;
}
.point_block.horizontal .point_title + .point_text {
    padding-left: 1em;
}
.point_block .point_text ul,
.point_block .point_text ol {
    margin: 0;
	padding: 0 0 0 1.5em;
}
.point_block .point_text ul > li,
.point_block .point_text ol > li {
    margin-bottom: 0.5em;
}
.point_block .point_text ul > li:last-child,
.point_block .point_text ol > li:last-child {
    margin-bottom: 0;
}
.point_block .point_text ul > li > ul > li:first-child,
.point_block .point_text ol > li > ul > li:first-child,
.point_block .point_text ul > li > ul > li:first-child,
.point_block .point_text ol > li > ul > li:first-child {
    margin-top: 0.5em;
}
.point_block .point_text ul > li > ul > li,
.point_block .point_text ol > li > ul > li {
    list-style: disc;
}
.point_block .point_text ul > li > ol > li,
.point_block .point_text ol > li > ol > li {
    list-style: lower-alpha;
}

/* 小幫手區塊(有問號圖) */
.helper_block {
	color: #C00 !important;
	display: inline-block;
    cursor: pointer;
}
.helper_block:before {
	background: url(../../images/icon_help.png);
    width: 24px;
    height: 24px;
    margin-right: 0.5em;
    display: inline-block;
    float: left;
    content: "";
}
.helper_block + div {
	width: 240px;
    background-color: #f5ebeb;
    padding: 10px;
	margin-top: 5px;
    margin-left: 30px;
    border:1px solid #eeafaf;
    border-radius: 5px;
    box-shadow: 3px 3px 5px rgba(0,0,0,.2);
    line-height: 1.5em;
    font-weight: normal;
    color: #333;
    text-align: left;
    position: absolute;
	left: 0;
	z-index: 10;
    display: none;
}

/* 小幫手區塊(無問號圖) */
.helper_block.noImage {
    color: inherit !important;
}
.helper_block.noImage:before {
    display: none;
}
.helper_block.noImage + div {
    width: calc(100% - 20px);
    margin: 5px 10px 0;
}

/* 條列用數字方塊 */
ol.sequence_list > li {
    margin: 0.8em auto;
    list-style: none;
    font-size: 15px;
    text-indent: -1.8em;
}

.sequence_number {
    background: #2a98cb;
    width: 1em;
    height: 1em;
    padding: 0.2em;
    margin-right: 0.5em;
    color: #FFF;
    line-height: 1em;
    text-align: center;
    text-indent: initial;
    display: inline-block;
}

/* 勾選樣式條列區塊 */
ul.check_list {
    padding: 0 !important;
}
ul.check_list li {
    list-style: none !important;
    font-weight: bold !important;
    padding-left: 1.5em !important;
    text-indent: -1.5em !important;
}
ul.check_list li:before {
    margin-right: 0.5em;
    color:#43a946;
    font-family: 'wegoluck_icons';
    content: "\e928";
}

/* 註解字 */
.annotation {
    margin: 0 0.3em;
    color: #888;
    font-size: 13px;
    line-height: 1.5em;
}

/* 備註字 */
.remark_text {
    margin-bottom: 0.5em;
}
.remark_text > img {
    padding-right: 5px;
    float: left;
}

/* 關鍵字 */
.keyword {
	background: #3aace4;
	padding: 0.3em 0.5em;
	margin: 0 0.2em;
	border: 1px solid #2b9dd3;
	border-radius: 5px;
	color: #fff;
	line-height: 1em;
	position: relative;
}
.keyword a.close {
	background: #eee;
	width: 1em;
    padding: 0 0.15em 0.3em;
	border: 1px solid #ccc;
	border-radius: 50%;
	font-size: 12px;
	line-height: 1em;
	coloR: #333;
	text-align: center;
	text-decoration: none;
	position: absolute;
	top: -8px;
	right: -8px;
	z-index: 20;
}
.keyword a.close:before {
	content: "x";
}
.keyword a.close:hover {
	transform: scale(1.1);
}

/* 必填欄位 */
.required_field {
    font-size: 13px;
    font-weight: bold;
    color: #C00;
}
.page_content > h3 + .required_field,
.page_content > div > h3 + .required_field {
    margin: -20px 0 20px;
}

/* 序號欄位 */
.serialNumber_block {
    background: #EEE;
    border-radius: 5px;
    padding: 20px 20px 45px;
    margin-left: 1em;
    display: inline-block;
    position: relative;
}
.serialNumber_block .serialNumber_input > input {
    background: #f6f6f6;
    width: 1em;
    padding: 0.2em;
    margin: 0.2em 0.1em;
    border: 1px solid #BBB;
    border-radius: 5px;
    font-size: 1.3em;
    line-height: 1.5em;
    text-align: center;
    display: inline-block;
}
.serialNumber_block .serialNumber_point {
    position: absolute;
    bottom: 10px;
    text-align: center;
    border-top: 3px solid #CCC;
}

/* 上傳檔案欄位 */
.upload_block input[type=file] {
    margin: 0;
}

/* 商標圖片欄位 */
.pdc_brand {
    width: 120px;
    height: 120px;
    border: 5px solid #ddd;
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}
.pdc_brand > div {
    width: inherit;
    height: inherit;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.pdc_brand > div img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    margin: auto;
}

/* 錯誤/正確範例說明區塊 */
.sample_block {
    background: #EEE;
    margin: 10px 0;
    padding: 0.3em 0.8em;
    text-indent: 0;
    border-radius: 5px;
    display: inline-block;
}
.sample_text {
    text-indent: 0;
    font-weight: bold;
    display: inline-block;
}
.sample_text + .sample_text {
    margin-left: 2em;
}
.sample_text.correct {color: #43a946;}
.sample_text.wrong {color: #C00;}
.sample_text.correct:before,
.sample_text.wrong:before {
    margin-right: 0.5em;
    font-family: 'wegoluck_icons';
}
.sample_text.wrong:before {content: "\e927";}
.sample_text.correct:before {content: "\e928";}

/*------ Buttons按鈕 ------*/
/* 通用按鈕(預設灰)*/
button, a.button, .button {
    background: #ddd;
    padding: 0.4em 0.8em;
    margin: 0 0.2em;
    border: 1px solid #bbb;
    border-radius: 5px;
    font-family: "Microsoft JhengHei", "Heiti TC", "WenQuanYi Zen Hei", "Arial";
    font-size: 15px;
    color: #333 !important;
    line-height: 1.5em;
    text-decoration: none !important;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}
button:hover, a.button:hover, .button:hover {
	background: #ccc;
}
button.small, a.button.small, .button.small {
    padding: 0.3em 0.8em;
    font-size: 13px;
    line-height: 1.5em;
}
/* 通用按鈕(藍) */
button.blue, a.button.blue, .button.blue {
	background: #3aace4;
	border: 1px solid #2b9dd3;
	color: #fff !important;
}
button.blue:hover, a.button.blue:hover, .button.blue:hover {
	background: #2b9dd3;
}
/* 通用按鈕(橘) */
button.orange, a.button.orange, .button.orange {
	background: #f39800;
	border: 1px solid #f37200;
	color: #fff !important;
}
button.orange:hover, a.button.orange:hover, .button.orange:hover {
	background: #f38900 !important;
}
/* 通用按鈕(紅) */
button.red, a.button.red, .button.red {
	background: rgba(255,255,255,.9);
	border: 1px solid #C00;
	color: #C00 !important;
}
button.red:hover, a.button.red:hover, .button.red:hover {
	background: rgba(255,255,255,1) !important;
}
/* 通用按鈕(淺) */
button.light, a.button.light, .button.light {
	background: #b4e1fa;
	border: 1px solid #6cc3f0;
	font-size: 13px;
}
button.light:hover, a.button.light:hover, .button.light:hover {
	background: #9bd6f8 !important;
}
/* 表單用預訂按鈕 */
a.button.booking {
	position: relative;
}
a.button.booking:hover {
	box-shadow: 0 3px 5px rgba(0,0,0,.3);
	transform: translateY(-2px);
}
a.button.booking:after {
    background: url(../../images/pointer.png);
    width: 20px;
    height: 24px;
    position: absolute;
    right: -5px;
    bottom: -8px;
	content: "";
}
/* 表單用預訂按鈕(淡橘) */
a.button.booking.light_orange {
	background: -webkit-linear-gradient(#fff,#ffddb8);
	background: -moz-linear-gradient(#fff,#ffddb8);
	background: linear-gradient(#fff,#ffddb8);
	border: 1px solid #f39800;
}
/* 表單用預訂按鈕(淡藍) */
a.button.booking.light_blue {
	background: -webkit-linear-gradient(#fff,#ace4ff);
	background: -moz-linear-gradient(#fff,#ace4ff);
	background: linear-gradient(#fff,#ace4ff);
	border: 1px solid #3aace4;
}
/* 登入按鈕loading */
button.loading:after {
	content: url(../../images/button_loading.gif);
	width: 18px;
	height: 18px;
	margin-left: 5px;
	display: inline-block;
}
/* 回頂端按鈕 */
a.btn_top {
    background: #9c070d;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    float: right;
    text-decoration: none;
    padding: 5px;
    font-weight: normal;
    font-size: 13px;
    white-space: nowrap;
    line-height: 1em;
}
a.btn_top:hover {
    background: #f39700;
    color: #fff;
}
a.btn_top:before {
    content: "\e92a";
    margin-right: 0.3em;
    font-family: 'wegoluck_icons';
}
a.btn_top:after {
    content:"回上方";
    position: relative;
    top: -1px;
}
/* 內容區右上角按鈕列 */
.page_content .rightTop {
    text-align: right;
}
.page_content .rightTop button,
.page_content .rightTop a.button {
    margin: 0.2em 0.1em;
    font-size: 13px;
}
/* 刪除小按鈕 */
a.btn_delete {
    width: 1em;
    height: 1em;
    background: rgba(180,0,0,.9);
    padding: 0.2em;
    border-radius: 50%;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    color: #FFF;
    line-height: 1em;
    display: inline-block;
}
a.btn_delete:hover {
    background: rgba(180,0,0,1);
    color: #FFF !important;
}
a.btn_delete:after {
    content: "╳";
}
div > a.btn_delete {
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 1;
}

/*------ 頁面切換列 ------*/
.pagebar {
    margin: 30px auto;
    text-align: center;
    display: block;
}
.pagebar a {
    letter-spacing: -0.2em;
    display: inline-block;
}
.pagebar a.prev {
	margin: 0 0.5em 0 0;
}
.pagebar a.next {
	margin: 0 0 0 0.5em;
}

/*------ 通用 Table ------*/
.common_form {
	width: 100%;
	margin: 20px 0;
	border: 1px solid #ccc;
	border-collapse: collapse;
}
.section_title + div > .common_form,
.formGroup + div > .common_form {
	margin: 10px 0;
}
.common_form th, .common_form td {
	border: 1px solid #ccc;
	word-break: break-all;
	text-align: center;
}
.common_form th {
	background: #EEE;
    padding: 10px;
    font-weight: bold; 
	vertical-align: middle;
}
.common_form td {
	background: #FFF;
	padding: 20px;
    vertical-align: top;
}
.common_form tr:nth-of-type(odd) td {
	background: #f3f3f3;
}
.common_form tr th + td {
	padding: 10px;
}

/*------ 商品列表 Table ------*/
.pdc_list h4 {
	color: #980000;
}
.pdc_form {
    width: 100%;
    margin: 20px 0;
    line-height: 1.2em;
}
.pdc_form th, .pdc_form td {
	padding: 10px;
	vertical-align: middle;
	text-align: center;
    word-break: break-word;
}
.pdc_form th {
	background: #EEE;
	font-weight: bold;
}
.pdc_form td {
    background: #fff;
    border-bottom: 1px solid #CCC;
}
.pdc_form tr:nth-of-type(odd) td {
	background: #f3f3f3;
}
.common_form td button,
.common_form td a.button,
.pdc_form td button,
.pdc_form td a.button {
    margin: 0.2em 0.1em;
    font-size: 13px;
}
.pdc_form td ul {
    margin-left: -1em;
}
.pdc_form td ul li {
    text-align: left;
    margin-bottom: 0.2em;
}
.pdc_form tr.total td {
	background: #FFF;
    border-bottom: 0;
}
.pdc_form tr.total td > b {
	margin-bottom: 0.2em;
	color: #069;
	display: block;
}

/*------ 可收合/展開列 Table ------*/
.collapse_row {
    cursor: pointer;
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Likely future */
}
.collapse_row.active i.fa.fa-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.2s linear;
}
.collapse_row.active i.fa.fa-chevron-down:before  {
    margin: inherit;
}
.pdc_form tr.collapse_row td {
    background: #FFF;
}
.pdc_form tr.collapse_detail {
    display: none;
}
.pdc_form tr.collapse_detail td {
    background: #f6f6f6;
    border-bottom: none;
}
.pdc_form tr.collapse_detail td[colspan] {
    text-align: right;
}
.pdc_form tr.collapse_detail ~ tr.total td {
    background: #f5ebeb;
}
.pdc_form .fa.fa-trash {
    color: #C00;
}
.pdc_form .fa.fa-trash:hover {
    color: #e52020;
}
.pdc_form .fa.fa-trash:before {
    font-size: 20px;
}

/*------ Table欄位 highlight ------*/
th.cell_highlight,
td.cell_highlight {
    font-weight: bold;
    color: #C00;
}
th.cell_highlight {
    background: #ecd2d2 !important;
}
td.cell_highlight {
    background: #f5ebeb !important;
}

/*------ 商品縮圖 ------*/
.pdc_thumb {
    width: 100px;
    height: auto;
    /*background: url(../../images/pdc_default.jpg) center no-repeat;*/
    background-size: 100% auto;
    border: 1px solid #ccc;
    margin: 0 auto;
}
/*.pdc_thumb.noBackground {
    background: none;
}*/
.pdc_thumb img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    margin: auto;
}
.pdcThumb_block {
	width: 100%;
    display: table;
}
.pdcThumb_block > .pdc_thumb {
    display: table-cell;
}
.pdcThumb_block > .pdc_text {
    display:table-cell;
    padding: 0 10px;
    text-align: left;
    vertical-align: middle;
}

/*------ 商品預覽圖與商品資訊 ------*/
.pdc_preview {
    width: 120px;
    height: 120px;
    line-height: 0;
    border: 1px solid #ccc;
    display: table;
}
.pdc_preview > div {
    width: inherit;
    height: inherit;
    background: #FFF;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.pdc_preview > div img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    margin: auto;
}
.pdc_preview + .pdc_info {
	width: calc(100% - 142px);
    padding-left: 20px;
    float: left;
}
.pdc_info > ul {
    padding: 0 !important;
    margin: 0 !important;
}
.pdc_info > ul > li {
    list-style: none;
    margin-bottom: 0.2em;
}

/*------ 商品照片圖 ------*/
.pdc_pictures {
    border: none !important;
    text-align: center !important;
    float: none !important;
    display: inline-block !important;
    vertical-align: top;
}
/* 解決去除float 改為inline-block屬性後的間距問題 */
.blockGroup.three > div.pdc_pictures,
.blockGroup.four > div.pdc_pictures {
    margin: 0 1.8% 10px 0;
}
.blockGroup.five div.pdc_pictures,
.blockGroup.six div.pdc_pictures {
    margin: 0 0.8% 10px 0;
}
.blockGroup.three > div.pdc_pictures:nth-child(3n),
.blockGroup.four > div.pdc_pictures:nth-child(4n),
.blockGroup.five > div.pdc_pictures:nth-child(5n),
.blockGroup.six div.pdc_pictures:nth-child(6n) {
    margin: 0 0 10px 0;
}
.pdc_pictures img {
    width: calc(100% - 10px);
    border: 5px solid #eee;
    outline: 1px solid #ccc;
    vertical-align: middle;
}
.pdc_pictures a {
    display: inline-block;
}
.pdc_pictures a:hover img {
    border: 5px solid #ddd;
}
.pdc_pictures a.active img {
    border: 5px solid #f39800;
    outline: 1px solid #f37200;
}
.pdc_pictures img + h5, 
.pdc_pictures img ~ button {
    margin-top: 10px;
}

/*------ Tabs頁籤列 ------*/
.tab_bar {
    height: 36px;
    border-bottom: 1px solid #CCC;
    margin-bottom: 20px;
}
.tab_bar ul {
	margin: 0;
	padding: 0;
}
.tab_bar ul li {
    margin-right: 5px;
	list-style: none;
	float: left;
}
.tab_bar ul li a {
    background-image: -webkit-linear-gradient(#f6f6f6, #DDD);
    background-image: -moz-linear-gradient(#f6f6f6, #DDD);
    background-image: linear-gradient(#f6f6f6, #DDD);
    padding: 10px 2em;
	margin-top: -1px;
    border-top: 1px solid #CCC;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-radius: 5px 5px 0 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 1em;
    text-decoration: none;
    color: #333;
    display: inline-block;
}
.tab_bar ul li:hover a {
    background-image: -webkit-linear-gradient(#e6e6e6, #CCC);
    background-image: -moz-linear-gradient(#e6e6e6, #CCC);
    background-image: linear-gradient(#e6e6e6, #CCC);
    color: #333;
}
.tab_bar ul li.active a {
    background-image: -webkit-linear-gradient(#b91212, #a00f0f);
    background-image: -moz-linear-gradient(#b91212, #a00f0f);
    background-image: linear-gradient(#b91212, #a00f0f);
    color: #FFF;
}

/*------ Steps步驟列 ------*/
.stepbar {
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 5px 5px 0 0;
}
.stepbar a {
	width: auto;
	min-width: 110px;
	padding: 0.6em 0 0.6em 2em;
	color: #333;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	float: left;
	position: relative;
}
.stepbar a:first-child {
	border-radius: 5px 0 0 0;
}
.stepbar a:before {
	width: 0px;
	height: 0px;
	border-width: 20px;
	border-style: solid;
	border-color: transparent transparent transparent #eee;
	position: absolute;
	top: 0;
	right: -40px;
	z-index: 2;
	content: "";
}
.stepbar a:after {
	width: 0px;
	height: 0px;
	border-width: 20px;
	border-style: solid;
	border-color: transparent transparent transparent #bbb;
	position: absolute;
	top: 0;
	right: -41px;
	z-index: 1;
	content: "";
}
.stepbar a.active {
	background: #980000;
	color: #fff;
}
.stepbar a.active:before {
	border-color: transparent transparent transparent #980000;
}
.stepbar a:hover {
	background: #d6d6d6;
    color: #980000;
}
.stepbar a:hover:before {
	border-color: transparent transparent transparent #d6d6d6;
	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-ransition: 0.3s all;
}
.stepbar a.active:hover {
	background: #b41e1e;
    color: #FFF;
}
.stepbar a.active:hover:before {
	border-color: transparent transparent transparent #b41e1e;
}
.stepbar_content {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #CCC;
    border-radius: 0 0 5px 5px;
    border-top: none;
}
.stepbar_content .section {
    margin-bottom: 50px;
}
.stepbar_content .section:last-child {
    margin-bottom: 0;
}
.stepbar_content .paragraph_title:before {
    width: 5px;
    height: 12px;
    background: #2b9dd3;
    margin-top: 5px;
    margin-right: 5px;
    display: inline-block;
    content: "";
}
.stepbar_content .paragraph > div:not(.paragraph_title) {
    margin-left: 10px;
}
.stepbar_content .common_form td {
    padding: 10px;
}
.stepbar_content > ul > li {
    margin: 0 0 0.5em -1em;
}
.stepbar_content > ul > li > ul {
    margin-top: 0.5em;
}
.stepbar_content > ul > li > ul > li {
    margin: 0 0 0 -1em;
}
/* 步驟列 大段落標題樣式 */
.stepbar_content .stepbar_title {
    margin: 0 -20px 20px;
    border-bottom: 1px solid #CCC;
}
.stepbar_content .stepbar_title h4 {
    background: #2b9dd3;
    padding: 0.4em 4em 0.4em 20px;
    margin: 0;
    font-size: 16px;
    color: #FFF;
    float: left;
    position: relative;
}
.stepbar_content .stepbar_title h4 + a {
    margin-left: 1em;
}
.stepbar_content .stepbar_title h4 + a.button {
    background: #FFF;
    border: 1px solid #3aace4;
    margin-left: 1em;
    padding: 0.1em 0.6em 0.2em;
    font-size: 13px;
    line-height: inherit;
    color: #3aace4 !important;
    float: left;
}
.stepbar_content .stepbar_title h4 + a.button:hover {
    background: #3aace4 !important;
    color: #FFF !important;
}

/*----- RWD Youtube/Vimeo ----- */
.video_container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video_container iframe, .video_container object, .video_container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*----- 下載圖示 ----- */
.download_item {
    background-repeat: no-repeat;
    background-position: top center;
    min-width: 5em;
    width: 36px;
    padding: 45px 0 0 0;
    margin: 5px 0;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}
.download_item.disable,
.download_item.disable:hover {
    color: #999;
	text-decoration: none;
	cursor: default;
}
.download_item.PDF {
    background-image: url(../../images/icon_pdf.png);
}
.download_item.PDF.disable {
    background-image: url(../../images/icon_pdf_unclick.png);
}
.download_item.CSV {
    background-image: url(../../images/icon_csv.png);
}
.download_item.CSV.disable {
    background-image: url(../../images/icon_csv_unclick.png);
}
.download_item.video {
    background-image: url(../../images/icon_video.png);
}
.download_item.video.disable {
    background-image: url(../../images/icon_video_unclick.png);
}
.download_item.small {
	background-position: left center;
	background-size: 1.2em auto;
	min-width: auto;
	width: auto;
	padding: 0.1em 0.2em 0.1em 1.4em;
    margin: 5px 2px;
}
.upload_list .download_item {
    text-align: left;
    display: block;
}

/*----- 平台/運營服務百分比 ----- */
.percent_block {
    padding: 0.2em 0.5em;
    margin: 0.2em;
    border: 1px solid #39C;
    border-radius: 5px;
    font-size: 13px;
    color: #39C;
    display: inline-block;
}
.percent_block.highlight {
    border: 1px solid #F60;
    color: #F60 !important;
}

/*----- FAQ ----- */
ol.questions {
    margin: 0 0 0 20px;
    padding: 0;
}
ol.questions li, ol.questions li > ul > li {
	margin: 0;
	padding: 0.5em 0 0.5em 10px;
	list-style: none;
	text-indent: -1.9em;
	text-align: left;
}
ol.questions li a {
    color: #666;
}
ol.questions li a:hover {
    color: #f39700;
}
.qa_mainclass {
	background: #EEE;
	padding: 0.5em 1em;
	font-size: 18px;
	font-weight: bold;
	color: #000;
}
.qa_subclass {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}
.qa_list {
    padding: 20px;
    border-bottom: 1px solid #CCC;
}
div .qa_list:last-child {
    padding: 20px 20px 0;
    border-bottom: none;
}
.qa_list .question {
    padding-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #2a98cb;
}
.qa_list .answer {
    padding: 1em 0 1em 2em;
    font-size: 15px;
    font-weight: normal;
    color: #333;
}
.qa_list .answer .common_form {
    margin: 20px auto 0;
}
.qa_list .answer .common_form tr th {
    padding: 5px;
    font-size: 16px;
}
.qa_list .answer .common_form tr td {
    padding: 10px;
    vertical-align: middle;
}
.qa_list .answer ul,
.qa_list .answer ol {
    margin: 0 0 0 -1em;
}
.qa_list .answer ul li,
.qa_list .answer ol li {
    margin-bottom: 1em;
}
.qa_list .answer > ul > li {
    list-style: lower-alpha;
}
.qa_list .answer > ul > li > ul,
.qa_list .answer > ol > li > ul,
.qa_list .answer > ul > li > ol,
.qa_list .answer > ol > li > ol {
    margin: 1em 0 0 -1em;
}
.qa_list .answer > ul > li > ul > li,
.qa_list .answer > ol > li > ul > li {
    list-style: disc;
}
.qa_list .answer img {
    width: auto;
    max-width: 90%;
    margin: 20px 0;
    vertical-align: top;
    display: inherit;
}
.qa_list .answer .common_form tr td > ul,
.qa_list .answer .common_form tr td > ol {
    padding: 0 0 0 1.5em;
    margin: 0;
}
.qa_list .answer .common_form tr td > ul > li {
    list-style: disc;
}
.qa_list .answer .common_form tr td > ul > li > ul,
.qa_list .answer .common_form tr td > ul > li > ol,
.qa_list .answer .common_form tr td > ol > li > ul,
.qa_list .answer .common_form tr td > ol > li > ol {
    margin-left: -1.5em;
}
.qa_list .qa_table {
    border-bottom: 1px solid #CCC;
    display: table;
}
.qa_list .answer img .qa_list .qa_table .qa_image,
.qa_list .qa_table .question {
    display: table-cell;
    vertical-align: middle;
}
.qa_list .qa_table .qa_image {
    width: 30%;
    padding: 10px 0;
}
.qa_list .qa_table .qa_image img {
    width: auto;
    margin: 0 auto;
    display: inline-block;
}
.qa_list .qa_table .question {
    width: calc(70% - 2em);
}

/*------ 範例說明框 ------*/
.example-box {
    padding: 1.2em;
    background-color: #fcf0d6;
    margin-top: 1em;
}
.ex-boxA, .ex-boxQ {
    margin: 10px 0 10px 1.8em;
    position: relative;
}
.ex-boxQ:before, .ex-boxA:before {
    display: inline-block;
    position: absolute;
    left: -1.8em;
}
.ex-boxQ:before {
    content: "Q : ";
}
.ex-boxA:before {
    content: "A : ";
}

/*------ 商品編號 ------*/
.product_number + .product_number {
	margin-top: 0.5em;
	display: block;
}
.product_number.SKU::before {
	content: "Sale SKU: ";
	color: #069;
	font-weight: bold;
}

/*------ 公告框線區塊 ------*/
.bulletin {
    border-radius: 3px;
    padding: 40px;
    border: 1px solid #ccc;
}
.bulletin_title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}