@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
@import url("bootstrap.css");
@import url(fontawesome5.13.0/css/all.min.css);
@import url("../../plugins/sweetalert/sweetalert2.min.css");
@import url("../../plugins/aos/aos.css");
@import url("../../plugins/pagination-master/css/style.css");
/*編輯器前台CSS套用*/
@import url("../../plugins/ckeditor5/ckeditor-styles.css");

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
:root {
	--colorBlack: #221E1F;
	--colorGray: #908e8f;
	--colorWhite: #fff;
	--colorHover: #C3996B;
	--colorFloatBg: #A87B4F;
	--colorIcon: #9A8479;
	--colorGreen:#38B549;
	--colorBlue:#00A79D;
	--colorRed:#ed4d67;
	font-size: 16px;
}
/*
背景 221E1F
按鈕 fff
hover C3996B
浮動選單 A87B4F
圖示 9A8479
 */
.cRed{
    color:var(--colorRed);
}
.cBlack{
    color:var(--colorBlack);
}
.cGray{
    color:var(--colorGray);
}
.cWhite{
    color:var(--colorWhite);
}
.cHover{
    color:var(--colorHover);
}
.cFbg{
    color:var(--colorFloatBg);
}
.cIcon{
    color:var(--colorIcon);
}
.cGreen{
    color:var(--colorGreen);
}
.cBlue{
    color:var(--colorBlue);
}


.f11{
    font-size: 0.69rem;
}
.f12{
    font-size: 0.75rem;
}
.f13{
    font-size: 0.81rem;
}
.f14{
    font-size: 0.88rem;
}
.f15{
    font-size: 0.94rem;
}
.f16{
    font-size: 1rem;
}
.f17{
    font-size: 1.06rem;
}
.f18{
    font-size: 1.13rem;
}
.f19{
    font-size: 1.19rem;
}
.f20{
    font-size: 1.25rem;
}
.f22{
    font-size: 1.38rem;
}
.f24{
    font-size: 1.5rem;
}
.f26{
    font-size: 1.63rem;
}
.f28{
    font-size: 1.75rem;
}
.f30{
    font-size: 1.88rem;
}
.f32{
    font-size: 2rem;
}
.f34{
    font-size: 2.13rem;
}
.f36{
    font-size: 2.25rem;
}
.f38{
    font-size: 2.38rem;
}
.f40{
    font-size: 2.5rem;
}
.fw100{
    font-weight: 100;
}
.fw400{
    font-weight: 400;
}
.fw500{
    font-weight: 500;
}
.fw700{
    font-weight: 700;
}
.fw800{
    font-weight: 800;
}
.fw900{
    font-weight: 900;
}
.borderColor{
	border-color:var(--colorHover) !important;
}
html { position: relative; min-height: calc(100% - 0px); }
body { 
	/* min-height: 100vh; */
	display: flex; 
	flex-direction: column;
	color:var(--colorWhite);
	background: var(--colorBlack);
	font-family: 'Century Gothic',Verdana, Geneva, sans-serif,"黑體", '微軟正黑體';
	font-size: 1rem;
	-webkit-text-size-adjust: none;
	overflow-y: scroll;
}
body, td, th { }
img { max-width: 100%; height: auto; }
#hiddle { display: none; }
.iframe_ch { display: none; }
.license-box input { display: none; }
select::-ms-expand { display: none; }
select {}
.hide{opacity: 0,display: none;}
a{
    color:var(--colorWhite);
}
a:hover,
a:focus{
	text-decoration: none;
    color:var(--colorHover);
}

.main {
	line-height: 1.8;
	flex-grow: 1; 
	position: relative;
}
.indexSlider {
	position: relative;
}
.indexSlider .swiper-container {
    overflow: hidden;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_header.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.header { 
	height: 90px; 
	position: sticky; 
	top: 0; 
	z-index: 999; 
}
.headerContainer { 
	height: 90px; 
	background: var(--colorBlack); 
	/* box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.08);  */
	position: relative; 
	z-index: 100; 
}
.headerRow { 
	height: 90px; 
	display: flex; 
	align-items: center;
}
.headerLogo { 
	min-width: 220px;
	max-width:400px;
}
.headerNav { 
	margin-right: auto; 
	display: flex;
	font-size:1.25rem;
	margin-bottom: 0;
}
.headerNavItem { 
	margin: 0px 20px; 
	position: relative; 
}

.headerNavItem:hover > a,
.headerNavItem.active > a{
	color: var(--colorHover);
}
.headerNavItem a { 
	display: block;    
    color: var(--colorWhite);
    transition: all 0.4s;
	word-break: keep-all;
}
.headerNavItem a:hover{ 
	color: var(--colorHover);
}
.headerNavRight{
	display: flex;    
    align-items: center;	
}
.headerSocial { 
	display: flex; 
	align-items: center; 
}
.headerSocialItem { 
	width: 60px;
    height: 60px;
    display: flex;
	flex-direction: column;
    text-align: center;
    transition: all 0.4s;
    align-items: center;
    justify-content: center;
}
.headerSocialItem a { 
	width: 100%;
    height: 44px;
    display: block;
    padding: 0;
    position: relative;
}
.headerSocialItem img { 
	position: absolute;
    transition: all 0.4s;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.headerSocialItem .shover{
	opacity: 0;
}
.headerSocialItem a:hover .shover{
	opacity: 1;
}

/* 子選單 */
.headerNavItem > a{
	height: 90px;
	line-height:90px;
}
.navigation-menu-second-layer{	
    margin: 0;
 	list-style: none;
 	position: absolute; 
 	top: 90px;
	background-color: rgba(255,255,255,0.95);
	display: none;
}
.headerNavItem:hover > .navigation-menu-second-layer {
	display:block;
} 
.navigation-menu-second-layer li {
	width:170px;
	margin-bottom:10px;
	float:none;
	display:list-item;
	position: relative;
}
.navigation-menu-second-layer li a{
	color:var(--colorBlack);
	font-size: 1rem;
	padding: 5px 20px;
}

/* 會員 */
.headerMember { display: flex; }
.headerMemberItem { width: 60px; height: 100%; text-align: center; transition: all 0.4s; }
.headerMemberItem.headerMemberCart a { 
	display: block;
	width: 100%;
	height: 100%;
	position: relative; 
}
.headerMemberItem.headerMemberCart span { 
	width: 20px; 
	height: 20px;
	line-height: 20px; 
	font: normal 12px 'Century Gothic', '微軟正黑體'; 
	letter-spacing: 0px; 
	text-align: center; 
	color: var(--colorBlack ); 
	display: block; 
	position: absolute; 
	bottom: -3px; 
	left: 5px;
	z-index: 2; 
}
.headerMemberItem.headerMemberCart a::after { 
	content: ''; 
	width: 20px; 
	height: 20px; 
	border-radius: 50%; 
	background: var(--colorWhite); 
	position: absolute; 
	bottom: 0; 
	left: 5px; 
	z-index: 1; 
}
.headerMemberItem img { 
	position: relative; 
	transition: all 0.4s; 
}
.headerMemberItem:hover img { 
	opacity: 1; 
}
.headerMemberItem .mlogin{
}
.mloginIcon{
	display: none;
}
.mlogin:hover{
	border-color: var(--colorWhite);
}
.mlogin:hover .mloginLine{
	background-color: var(--colorWhite);
} 
.mlogin:hover span{
	color: var(--colorWhite);
} 
.headerMemberItem.headerMemberUser .mloginkill{
	display: none;
}
.headerMemberItem.headerMemberUser .mloginIcon{
	display: block;
}
.headerMemberItem.headerMemberUser .mlogin{	
	border: none;
}
.headerMemberModal { 
	width: 300px; 
	border-radius: 15px; 
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 
	position: absolute; 
	right: 10px; 
	top: -200px; 
	z-index: 99; 
	background: #fff; 
	overflow: hidden; 
	transition: all ease-out 0.6s; 
}
.headerMemberModal.active { 
	top: 90px; 
}
.headerMemberModalInfo { 
	border-bottom: solid 1px #ddd; 
	padding: 15px 15px 10px; 
	display: flex; 
	align-items: center; 
	background: #f5f5f5; 
}
.headerMemberModalInfoImg { 
	width: 60px; 
	height: 60px; 
	margin-right: 10px; 
	border-radius: 50%; 
	overflow: hidden; 
}
.headerMemberModalInfoContent {
	color: var(--colorBlack);
}
.headerMemberModalInfoName { 
	margin-bottom: 3px; 
	letter-spacing: 1px; 
}
.headerMemberModalInfoMail { 
	letter-spacing: 0.5px; 
}
.headerMemberModalBtnContainer { 
	padding: 15px 10px 15px; 
	display: flex; 
	justify-content: center; 
}
.headerMemberModalBtnItem { 
	width: 33.33%; 
	text-align: center; 
}
.headerMemberModalBtnItem a { 
	display: block;
 }
.headerMemberModalBtnItem i { 
	font-size: 26px; 
	color: var(--colorBlack); 
	transition: all 0.4s; 
}
.headerMemberModalBtnItem:hover i { 
	color: var(--colorHover); 
}
.headerMemberModalBtnItem span { 
	margin-top: 5px; 
	font-size:13px;
	letter-spacing: 0.5px;
	color: var(--colorBlack);
	display: block;
}
.headerMemberModalBtnItem:hover span,
.headerMemberModalBtnItem:hover i{ 
	color: var(--colorHover); 
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_footer.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.footer {
	width: 100%;
	position: relative; 
	z-index: 899;
}
.footerTitle .lineHight15{
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}
.footerTitle .lineHight16{
	padding-top: 3px !important;
	padding-bottom: 1px !important;
}
.footerInfo,
.footerLinkCopy{	
	margin-left: 90px;
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> goTop <<<------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.goTopContainer { width: 100%; height: 80px; position: absolute; bottom: 210px; transform: translateY(50%); z-index: 10; }
.goTopCircle { width: 80px; height: 80px; border-radius: 50%; border: solid 1.5px #001699; background: #001699; position: relative; left: 50%; transform: translateX(-50%); transition: all 0.4s; }
.goTopCircle:hover { background: #eee; }
.goTopContent { text-align: center; position: relative; top: 50%; transform: translate(0, -50%); }
.goTopContent a { color: #fff; display: block; transition: all 0.4s; }
.goTopCircle:hover .goTopContent a { color: #001699; }
.goTopIcon { width: 22px; height: 22px; border-top: solid 3px #fff; border-right: solid 3px #fff; position: relative; left: 50%; top: 5px; transform: translateX(-50%) rotate(-45deg); transition: all 0.4s; }
.goTopCircle:hover .goTopIcon { border-color: #001699; }
.goTopText { font: normal 18px 'Marcellus', '微軟正黑體'; }



/* map video ifrmae */
.framewrapper {
	width: 100%;
    position: relative;
    padding-bottom: 75%;   /* 4:3 */
}
.framewrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.videowrapper {
	width: 100%;
    position: relative;
    padding-bottom: 56.25%;   /* 16:9 */
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* mTitle */
.mTitle{
	max-width: 300px;
	width: 300px;
	min-width: 300px;
	margin: 0 auto;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
    margin-bottom: 35px !important;
}
.lTitle{
	max-width: 84px;
	width: 84px;
	min-width: 84px;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> public <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.btn.btnBrown{
	color:var(--colorWhite);
	background: var(--colorHover);
}
.btn.btnBrown:hover,
.btn.btnBrown.active, 
.btn.btnBrown:focus{	
	background: var(--colorFloatBg);
}
.btnCustom { 
	font: normal 16px 'Century Gothic', '微軟正黑體'; 
	letter-spacing: 1px; 
	padding: 0 5px; 
	line-height: 26px; 
	position: relative; 
}
.btnCustom:hover, .btnCustom:focus, .btnCustom.active {

}
.btnCustom:disabled {

}
.btnCustom.btnOrg { font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; padding: 0 5px; line-height: 26px; position: relative; top: -2px; background: #ff9900; color: #fff; transition: all 0.6s; }
.btnCustom.btnOrg:hover, .btnCustom.btnOrg:focus, .btnCustom.btnOrg.active {opacity: 0.8;}
.btnCustom.btnOrg:disabled {opacity: 0.8;}
.btnCustom-outline { 
	height: 36px; 
	padding: 0; 
	border-radius: 5px; 
	border: solid 1px var( --colorFloatBg ); 
	background: none; 
	font: normal 16px 'Century Gothic', '微軟正黑體'; 
	line-height: 30px; 
	letter-spacing: 1px; 
	color: var( --colorFloatBg ); 
	background: var( --colorWhite );
	transition: all 0.4s; 
}
.btnCustom-outline:hover, .btnCustom-outline:focus, .btnCustom-outline.active { 
	color: var( --colorWhite ); 
	background: var( --colorFloatBg ); 
}
.btnCustom-outline:active, .btnCustom-outline:focus { 
	outline: none; box-shadow: none 
}
.btnCustom-outline:disabled, .btnCustom-outline.disabled { 
	color: var( --colorWhite );
	background: var( --colorBlack ); 
}
.btnCustom-outline.btnBlue { height: 36px; padding: 0; border-radius: 0; border: solid 1px #004a9e; background: none; font: normal 16px 'Century Gothic', '微軟正黑體'; line-height: 30px; letter-spacing: 1px; color: #004a9e; }
.btnCustom-outline.btnBlue:hover, .btnCustom-outline.btnBlue:focus, .btnCustom-outline.btnBlue.active { color: #fff; background: #004a9e; }
.btnCustom-outline.btnBlue:active, .btnCustom-outline.btnBlue:focus { outline: none; box-shadow: none }
.btnCustom-outline.btnBlue:disabled, .btnCustom-outline.disabled.btnBlue { background-color: #004a9e; color: #fff; }
.btnCustom-outline.btnWhite { border-radius: 0; border: solid 1px #fff; color: #fff; }
.btnCustom-outline.btnWhite:hover, .btnCustom-outline.btnWhite:focus { color: #002254; background: #fff; }
.btnCustom-outline.btnGray { 
	border: solid 1px var(--colorGray);
	color: var(--colorBlack); 
}
.btnCustom-outline.btnGray:hover, .btnCustom-outline.btnGray:focus { 
	color: var( --colorWhite );
	background: var(--colorGray); 
}
.btnCustom-outline.btnOrange { 
	border: solid 1px var( --colorWhite ); 
	color: var( --colorWhite ); 
	background: var( --colorHover );  
}
.btnCustom-outline.btnOrange:hover, .btnCustom-outline.btnOrange.active, .btnCustom-outline.btnOrange:focus { 
	border-color:var( --colorWhite );  
	color: #fff; 
	background: var( --colorFloatBg ); 
}
.btnCustom-outline.googleBtn, .btnCustom-outline.googleBtn:focus { border-radius: 0; border: solid 1px #dd4e41; color: #dd4e41; background: none; }
.btnCustom-outline.googleBtn:hover, .btnCustom-outline.googleBtn.active { color: #fff; background: #dd4e41; }
.btnCustom-outline.facebookBtn, .btnCustom-outline.facebookBtn:focus { border-radius: 0; border: solid 1px #3b5998; color: #3b5998; background: none; }
.btnCustom-outline.facebookBtn:hover, .btnCustom-outline.facebookBtn.active { color: #fff; background: #3b5998; }
.btnCustom-outline.lineBtn, .btnCustom-outline.lineBtn:focus { border-radius: 0; border: solid 1px #02b801; color: #02b801; background: none; }
.btnCustom-outline.lineBtn:hover, .btnCustom-outline.lineBtn.active { color: #fff; background: #02b801; }
.tableRwdContent { display: none }
.tableCustomStyle { color: #555; font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; }
.tableCustomStyle thead tr th { border-top: none; color: #fff; font: bold 18px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; background: #67aa11; }
.tableCustomStyle tbody tr td { border-top: none; font: normal 16px 'Century Gothic', '微軟正黑體'; color: #000; background: rgba(255, 255, 255, 0.6); }
.tableCustomStyle tbody tr:nth-child(2n+2) td { background: rgba(234, 242, 223, 0.6); }
.tableCustomStyle tbody tr:last-child td { border-top: none; border-bottom: double 3px #67aa11; }
.tableCustomStyle a { text-decoration: none; color: #6a9a1e; }
.tableCustomStyle a:hover { opacity: 0.6; }
.tableCustomStyle.table td.verticalAlignMmiddle{vertical-align: middle;}
.formCustomStyle { font-family: 'Century Gothic', '微軟正黑體'; }
.formCustomStyle .col-form-label { 
	padding-top: 0px; 
	padding-bottom: 0px; 
	
	letter-spacing: 1px; 
	color: var(--colorGray); 
	line-height: 36px; 
}
.memberForm .formCustomStyle .col-form-label {
	color: var(--colorWhite);
}
.formCustomStyle .form-group input.form-control, .formCustomStyle .form-group select.form-control { 
	height: 36px; 
	padding: 3px 10px; 
	border: solid 1px var(--colorIcon); 
	border-radius: 0; 
	font: 400 16px 'Century Gothic', '微軟正黑體'; 
	line-height: 20px; 
	background: #fff; 
	color: var(--colorIcon); 
}
.formCustomStyle .form-control:focus { box-shadow: none; outline: none }
.formCustomStyle .form-group input.form-control-plaintext { font: normal 16px 'Century Gothic', '微軟正黑體'; }
.formCustomStyle .form-group textarea.form-control { border-radius: 8px; border: solid 1px var( --colorGrayLight ); font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 24px; background: #fff; color: #222; }
.formCustomStyle.formCustomStyle-borderBottom .form-group input.form-control, .formCustomStyle.formCustomStyle-borderBottom .form-group select.form-control { height: 36px; padding: 3px 5px; border: none; border-bottom: solid 1px #777; border-radius: 0px; font: normal 14px 'Century Gothic', '微軟正黑體'; line-height: 24px; }
.formCustomStyle .parsley-errors-list { color: #ff9e34 }
.formCustomStyle ul.parsley-errors-list { margin-bottom: 0px; }
.formCustomStyle .fileuploader-input .fileuploader-input-button, .formCustomStyle .fileuploader-popup .fileuploader-popup-content .fileuploader-popup-button.button-success { background-color: linear-gradient(135deg, #92b50f 0, #546b00 100%); }
.formCustomStyle .fileuploader-input .fileuploader-input-caption { color: #92b50f; }
.formCustomStyle.whiteForm .col-form-label { color: #fff; }
.formCustomStyle.whiteForm .form-group input.form-control, .formCustomStyle.whiteForm .form-group select.form-control { border: solid 1px #fff; background: rgba(255, 255, 255, 0.2); color: #fff; }
.formCustomStyle.whiteForm .form-group select.form-control { background: #6f6f6f; }
.formCustomStyle.whiteForm .form-group select.form-control option { background: #777; border: #fff }
.formCustomStyle.whiteForm .form-group textarea.form-control { border: solid 1px #fff; background: rgba(255, 255, 255, 0.2); color: #fff; }
.formCustomStyle.whiteForm{}

.cursor-pointer { cursor: pointer; }
.cursor-notallowed { cursor: not-allowed; }
.tableHeaderHide { display: none }
.maxWidth-100px { max-width: 100px; }
.width-80px{width: 80px;}
.maxWidth-120px{width: 120px;}

.breadcrumb { 
	padding: 25px 1rem 0px 0; 
	margin-bottom: 10px;
	list-style: none; 
	background: none; 
	border-radius: 0rem; 
}
.breadcrumb>li { 
	float: left; 
	font-size: 14px;
}
.breadcrumb>li a { 
	color: var( --colorWhite ); 
}
.breadcrumb>li a:hover { 
	opacity: 0.8; 
}
.breadcrumb>li+li::before { 
	color: #666; 
}
.breadcrumb>.active { 
	color: var( --colorFloatBg ); 
}

.mainContainer{
	margin-top: 20px;
}
.contentContainer { 
	letter-spacing: 1px; 
	line-height: 26px;
 }
.contentContainer img { 
	max-width: 100% !important; 
	height: auto; 
}
/*共通*/
.oneLineText{
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/*.firstLetterShadow::first-letter{
	font-size: 30px; letter-spacing: 5px;text-shadow: 1.5px 1.2px 0px var(--colorWhite);
}*/
.firstLetterShadow{
	position: relative;
	padding-left: 9px;
}
.firstLetterShadow::before{
	content: '';
	width: 4px;
	height: 20px;
	background: var( --colorWhite );
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}



/* --------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> index.php <<<-------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------*/
.swiper-button-prev.sliderbtn,
.swiper-button-next.sliderbtn{
	width: 4%;
	max-width: 60px;
}

.swiper-button-prev.sliderbtn:after{
	content:"";
	width: 60px;
	height: 105px;
	background: url("/assets/images/front/arrow_prev.png") left center no-repeat;
	background-size: cover;
}
.swiper-button-next.sliderbtn:after{
	content:"";
	width: 60px;
	height: 105px;
	background: url("/assets/images/front/arrow_next.png") right center no-repeat;
	background-size: cover;
}
.swiper-button-prev.sliderbtn{
	left: 2%;
}
.swiper-button-next.sliderbtn{
	right: 2%;
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> video.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.videoIcon{
	width: 60px;
}
.videoContent{
	width: calc( 100% - 60px );
}
.videoTitle{
	line-height:1.3
}
.videoFrame{
	border-bottom: 1px dashed var(--colorWhite);
}
.videoLink{
	width: 40%;
}
.videoTxt{
	width: 60%;
}
/* 分頁 */
.pagination .page-link{	
	color: var(--colorBlack);
    background-color: var(--colorWhite);
	border-color: var(--colorWhite);
	border-radius: 0.25rem;
}
.pagination .page-link:hover, 
.page-item.active .page-link{    
    color: var(--colorWhite);
    background-color: var(--colorHover);
	border-color: var(--colorHover);
}
.pagination li.page-item {
    margin: 0 4px;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> about.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.mapSliderContainer + .swiper-pagination-bullets.swiper-pagination-horizontal{
	bottom: -37px ;
	text-align:right;
}
.my-bullet {
    display: inline-block;
    width: 10px;
    height: 10px;
    background:var(--colorGray);
    position:4relative;
    margin: 0 4px;
}
.my-bullet-active{
	background: var(--colorWhite);
	opacity: 1;
}


.pageTitleContainer { padding-bottom: 10px; border-bottom: solid 1px #ddd; position: relative; align-items: flex-end; }
.pageTitleContainer .indexTitle { line-height: 20px; }

.titleMore {width: 32px; height: 30px; padding: 7px 5px 6px; border: solid 1px var(--colorGrayDark); border-radius: 5px; text-align: center; cursor: pointer; transition: all 0.4s;}
.titleMore:hover, .titleMore.active { background: var(--colorBlack); }
.titleMore i{
	font-size: 15px;
}
.titleMore:hover i ,.titleMore.active i{
	color: var(--colorWhite);
}

.aboutTitleModal { width: 100%; max-width: 253px; height: 0; position: absolute; top: 45px; right: -3px; overflow: hidden; transition: all 0.4s; z-index: 200 }
.aboutTitleModal.active { height: auto; }
.aboutNav { width: calc(100% - 3px); padding: 10px; border: solid 1px #ddd; border-radius: 10px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); background: #fff; }
.aboutNavItem { padding: 12px 5px 8px; font: normal 16px 'Century Gothic', '微軟正黑體'; }
.aboutNavItem:not(:last-child) { border-bottom: solid 1px #eeeeee; }
.aboutNavItem a { display: block; color: var(--colorBlack); transition: all 0.4s; }
.aboutNavItem a:hover { color: var(--colorWhite); }

.articleContent2 p {
	text-align: justify;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> news.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.newsFrame{
	border-bottom: 1px dashed var(--colorWhite);
}
.newsIcon{
	width: 60px;
}
.newsDate{
	width: 85px;
}
.newsTitle,
.newsContent{
	width: calc( 100% - 155px );
}
.newsBg{
	background:var(--colorBlack) url("/assets/images/front/m_news_pic01.png") center bottom no-repeat;
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> knowledge.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.knowledgeBg{
	background:var(--colorBlack) url("/assets/images/front/know_pic02.png") right bottom no-repeat;
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> showings.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.showingsBg{
	padding-bottom: 250px;
	background:transparent url("/assets/images/front/info_pic01.jpg") left bottom no-repeat;
}
.showlist img{
	width: 46px;
}
.showlist,
.showlist th{
	border: none !important;
}
.showlist td{
	border-top: 1px dashed var(--colorWhite);
}
.showlist.table-hover tbody tr:hover {
    color: var(--colorWhite);
    background-color: #333;
}
.dashTopBorder{
	border-top: 1px dashed var(--colorWhite);
}
.dashBtmBorder{
	border-bottom: 1px dashed var(--colorWhite);
}
.dashColor{
	border-color: var(--colorHover);
}
.newsTxt{
	width: calc( 100% - 60px );
}

.showingdetailSlider {
	width: 640px;
	text-align: center;
}
.showingdetailSlider .swiper-container {
	overflow: hidden;
    text-align: center;
}
.showingdetailSlider .swiper-button-prev{
	left: 3%;
	width: 2%;
}
.showingdetailSlider .swiper-button-next{
	right: 24%;
	width: 2%;
}
.board-btn{ width: 280px; }

.rsw{ width: 60px;}

/* 電子看板 */
.boardSlider {
	position: relative;
}
.boardSlider .swiper-container {
	overflow: hidden;
}
.boardSlider .swiper-slide{
	text-align: center;
}
.board-img{
	width: 100%;
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> service.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.opentime{
	border: 1px solid var(--colorFloatBg);
}
.letterSpace1{
	letter-spacing: 0.1rem;
}
.letterSpace2{
	letter-spacing: 0.2rem;
}
.servicetable{
	border-top: 2px solid var(--colorFloatBg);
	border-bottom: 2px solid var(--colorFloatBg);
}
table.servicetable th{
	border-bottom: none;
}
.servicetable td{
	text-align:left;
	border-top: 1px solid var(--colorFloatBg);
}
.servicetable th:not(:last-child),
.servicetable td:not(:last-child) {
	border-right: 1px dashed var(--colorFloatBg);
}
.servicetable.table-hover tbody tr:hover {
    color: var(--colorWhite);
    background-color: #333;
}
.hr1{
	height: 0;
	border-bottom: 1px solid var(--colorFloatBg);
}
.hr2{
	height: 0;
	border-bottom: 2px solid var(--colorFloatBg);
}
.servicePic img{
	width: 100%;
}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> article.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.articleType { width: 180px; }
.indexArticleItemCol6{}
.indexArticleItemCol6 .indexArticleImgContainer { width: 50%; padding-bottom: 220px; }
.indexArticleItemCol6 .indexArticleContentContainer { width: 50%; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> article_detail.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.articleDetailType { margin-bottom: 15px; padding: 5px 10px; font: bold 14px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: #fff; display: inline-block; background: var(--colorBlack); }
.articleDetailTitleContainer { flex-wrap: wrap; }
.pageTitleContainer .indexTitle.articleDetailTitle { width: calc(100% - 120px); line-height: 22px; }
.articleDetailDate { width: 120px; padding: 8px 0 5px; border: solid 1px #ddd; border-radius: 8px 8px 0 0px; font: bold 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; text-align: center; color: var(--colorGrayDark); position: relative; bottom: -11px; }
.articleDetailContent { }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> brand.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.brandList { }
.brandItem { }
.brandImg { margin-bottom: 5px; overflow: hidden; }
.brandImg img { transition: all 0.4s; }
.brandItem:hover .brandImg img { transform: scale(1.15); }
.brandName { font: bold 16px 'Century Gothic', '微軟正黑體'; text-align: center; color: var(--colorBlack); transition: all 0.4s; }
.brandItem:hover .brandName { color: var(--colorWhite); }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> product.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.productTitleContainer { margin-bottom: 0; }
.productTitleContainer .indexTitle { width: calc(100% - 32px); }
.productTitleContainer .indexTitle span {	/*padding: 5px 10px;*/font: bold 17px 'Century Gothic', '微軟正黑體'; letter-spacing: 0; color: var(--colorWhite);	/*background: var(--colorBlack);*/ }
.productTitleContainer .titleMoreCube { top: 0; bottom: 0; transition: all 0.4s; }
.productTitleContainer .titleMore .titleMoreCube:nth-child(1) { transform-origin: center; }
.productTitleContainer .titleMore .titleMoreCube:nth-child(3) { transform-origin: center; }
.productTitleContainer .titleMore.active .titleMoreCube:nth-child(1) { width: 100%; top: 50%; bottom: auto; right: 0px; transform: translateY(-50%) rotate(0deg); }
.productTitleContainer .titleMore.active .titleMoreCube:nth-child(2) { opacity: 1; }
.productTitleContainer .titleMore.active .titleMoreCube:nth-child(3) { width: 100%; top: auto; bottom: 50%; right: 0px; transform: translateY(50%) rotate(0deg); }
.productNavContainer { height: 0; overflow: hidden; transition: all 0.4s; }
.productNav { padding: 0 15px 15px; background: #eee; }
.productNavContainer .formCustomStyle .col-form-label { font-weight: bold; font-size: 16px; color: var(--colorBlack); }
.productNavMainType { }
.productNavMainType select.form-control { width: 100%; max-width: 200px; }
.productNavSubType { }
.productNavSubType .btnCustom-outline { height: 36px; line-height: 34px; letter-spacing: 1px; }
.productNavSubType .btnCustom-outline:hover { background: rgba(61, 56, 52, 0.8); }
.productNavSubType .btnCustom-outline.active:hover { background: var(--colorBlack); }
.productList { margin-top: 30px; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> product_detail.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.productFrame{
	position: relative;
	overflow: hidden;
	box-shadow: 0px 0px 9px rgba(0,0,0,0.05);
}
.itemShow{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index:100 ;	
	overflow: hidden;
	display:none;
}
.itemShow.d-block.hoverFlag{
	display: none !important;
}
.itemShowClick{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index:102 ;	
	overflow: hidden;
	display:none;
}
.itemShowHover{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index:103;	
	overflow: hidden;
	display:none;
}
.productSwiper,
.thumbsSwiper{
	overflow: hidden;
}
.itemShow .img-fluid,
.productSwiper .img-fluid,
.thumbsSwiper .img-fluid{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.productSwiper {	
	width: 100%;
	height: 100%;	
}
.productSwiper .swiper-slide {	
	height: 100%;
}
.thumbsSwiper {
	height: 20%;
	box-sizing: border-box;
	padding: 10px 0;
}

.thumbsSwiper .swiper-slide {
	width: 25%;
	height: 100%;
	opacity: 0.5;
	border: 1px solid transparent;
}

.thumbsSwiper .swiper-slide-thumb-active {
	opacity: 1;
	border: 1px solid #333;
}

.productDetailA .productDetailItemName{ 
	font-size: 22px;
}
.swiper-slide .fancybox{
	display: block;
	width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fancybox .framewrapper{
	pointer-events: none;
}
.itemShowBtn.btnCustom-outline:focus{
	color: initial;
    background: initial;
}
.itemShowBtn.btnCustom-outline.active{
	color: var( --colorWhite );
    background: var( --colorBlack );
}
.productDetailProductListContainer .btnCustom-outline:disabled, 
.productDetailProductListContainer .btnCustom-outline.disabled {
    color: var( --colorGrayDark );
    background: none;
	border: solid 1px var( --colorGrayLight );
	cursor: not-allowed;
}



/* Public */
.productDetailContent { width: 96%; max-width: 500px; margin: 0 auto 20px; text-align: center; }
.productDetailFeature { margin-bottom: 3px; font: bold 15px 'Century Gothic', '微軟正黑體'; color: var(--colorWhite); }
.productDetailTitle { margin-bottom: 10px; font: bold 24px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: var(--colorBlack); }
.productDetailText { font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: #666; }
.productDetailBg { padding: 50px 0 80px; background: #efefef; }

/* Banner */
.productDetailBody .main { margin-bottom: 0 }
.productDetailBanner { position: relative; }
.productDetailBanner .breadcrumb { padding: 5px 15px 5px 40px; background: rgba(0, 0, 0, 0.8); position: absolute; top: 20px; left: 0; }
.productDetailBanner .breadcrumb>li a { color: #eee; }
.productDetailBanner .breadcrumb>li+li::before { color: #ddd; }
.productDetailBanner .bannerContentContainer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.productDetailBanner .bannerContentContainer .container { height: 100%; }
.productDetailBanner .bannerContentContainer .bannerContent { margin-right: 15px; margin-left: 15px; width: 400px; text-align: center; position: relative; top: 50%; transform: translateY(-50%); }
.productDetailBanner .bannerItem:nth-child(2n) .bannerContent { margin-left: auto; }



/* Vedio */
.productDetailVedioContainer { width: 90%; margin: 40px auto 50px; }
.productDetailVedioItem { }
.productDetailVedioEmbed { }
.productDetailVedio { }

/* ImgGroup */
.productDetailImgGroupContainer { margin-top: 0px; padding-bottom: 50px; }
.productDetailImgGroup { }
.productDetailImgGroupItem { height: 100%; border: solid 1px #ddd; border-radius: 15px; background: #f5f5f5; }
.productDetailImgGroupImg { border-radius: 15px; overflow: hidden; }
.productDetailImgGroupContent { margin-top: 10px; padding: 5px 10px 10px; font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; text-align: center; color: #333; }

/* Article */
.productDetailArticleContainer { margin-top: 30px; }
.indexArticleItemCol:only-child .indexArticleItemCol6 .indexArticleImgContainer { padding-bottom: 30%; }

/* Album */
.productDetailAlbumContainer { margin-top: 2px; }
.productDetailAlbum { width: 100%; overflow: hidden; }
.productDetailAlbumItem { margin: 0 3px; transition: all 0.6s; overflow: hidden; }
.productDetailAlbumItem a { display: block; overflow: hidden; position: relative; padding-bottom: 66.66%; }
.productDetailAlbumItem img { display: block; overflow: hidden; position: absolute; width: 100%; height: 100%; object-fit: cover; }
.productDetailAlbum:hover .productDetailAlbumItem { opacity: 0.6; }
.productDetailAlbum:hover .productDetailAlbumItem:hover { opacity: 1; }

/* ProductList */
.productDetailProductListContainer { margin-top: 30px; margin-bottom: 50px; }
.productDetailProductList { }
.productDetailProductItem { padding: 10px 5px; border-bottom: solid 1px #ddd; display: flex; flex-wrap: wrap; }
.productDetailItemImg { width: 150px; margin-right: 10px; background: #eee; }
.productDetailItemImg img { }
.productDetailItemInfoContainer { width: calc(100% - 370px); margin-right: 10px; display: flex; flex-direction: column; flex-wrap: wrap; }
.productDetailItemName { margin-bottom: 2px; font: bold 18px 'Century Gothic', '微軟正黑體'; color: var(--colorBlack); }
.productDetailItemText { margin-bottom: 10px; font: normal 14px 'Century Gothic', '微軟正黑體'; color: #666; flex-grow: 1; }
.productDetailItemPrice { width: 100%; display: flex; align-items: baseline; }
.productDetailItemPriceOri { margin-right: 20px; text-decoration: line-through; font: normal 16px 'Century Gothic', '微軟正黑體'; color: var(--colorGrayDark); }
.productDetailItemPriceSale { font: normal 24px 'Century Gothic', '微軟正黑體'; color: var(--colorWhite); }
.productDetailItemBtnContainer { width: 200px; display: flex; flex-direction: column; justify-content: space-around; }
.productDetailItemAmountContainer { }
.amountContainer { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.amountInputBox { width: 80px; }
.amountContainer .form-group { margin-bottom: 0; }
.amountContainer .form-group .form-control { height: 36px; border: solid 1px #999; border-radius: 8px; font: normal 16px 'Century Gothic', '微軟正黑體'; }
.amountContainer .form-group .form-control:focus { outline: none; box-shadow: none; }
.amountContainer .form-control:disabled, .amountContainer .form-control[readonly] { background-color: #fff; opacity: 1; }
.btnAmountDecrease, .btnAmountIncrease { width: 36px; height: 36px; border-radius: 50%; text-align: center; top: 0; }
.btnAmountDecrease i, .btnAmountIncrease i { position: relative; right: -1px; }
.btnAmountDecrease { margin-right: 10px; }
.btnAmountIncrease { margin-left: 10px; }
.productDetailItemCartBtn{}

/* Faq */
.productDetailFaqContainer { margin-top: 50px; position: relative; z-index: 1; }
.productDetailFaqContainer .faqQuestionContainer { position: relative; z-index: 1; }
.productDetailFaqContainer .faqQuestionContainer::before { background: #f5f5f5; }

/* SideInfoBtn */
.productDetailSideInfoBtnContainer { position: fixed; bottom: 100px; right: 20px; z-index: 999; }
.productDetailSideInfoBtn { }
.productDetailSideInfoBtn:not(:last-child) { margin-bottom: 10px; }
.productDetailSideInfoImg { width: 40px; position: relative; }
.productDetailSideInfoImg .usually { opacity: 1; transition: all 0.4s; }
.productDetailSideInfoImg .hover { position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.4s; }
.productDetailSideInfoImg:hover .usually { opacity: 0.1; }
.productDetailSideInfoImg:hover .hover { opacity: 1; }

/* BottomInfoBtn */
.productDetailBottomInfoBtnContainer { height: 50px; width: 100%; background: #898989; display: flex; position: fixed; bottom: 0; left: 0; z-index: 999; }
.productDetailBottomInfoBtn { width: calc(100% / 3); height: 100%; }
.productDetailBottomInfoBtn:nth-child(2) { background: #727171; }
.productDetailBottomInfoBtn:nth-child(3) { background: #595757; }
.productDetailBottomInfoBtn a { width: 100%; height: 100%; display: block; }
.productDetailBottomInfoImg { width: 30px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> cartList.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cartListContainer { 
	width: 100%; 
	margin-left: auto; 
	margin-right: auto; 
}
.cartListProductList { }

/* 購物列表 */
.cartListProductItem { 
	/* border: solid 1px #ddd; 
	border-radius: 8px;  */
	display: flex; 
	overflow: hidden; 
	position: relative; 
	/* background: #fff;  */
	padding: 10px 0;
}
.cartListProductItem.stockout, .cartListProductItem.notSell { 
	/* border-color: #ff8787; background: #ffe0e0;  */
}
.cartListProductItem.notSell { opacity: 0.6; }
.cartListProductItem.stockout::after, .cartListProductItem.notSell::after { width: 40px; height: 40px; padding-top: 5px; border-radius: 50%; font: normal 15px 'Century Gothic', '微軟正黑體'; line-height: 15px; text-align: center; color: #fff; background: rgba(236, 27, 27, 0.8); position: absolute; top: 2px; left: 2px; }
.cartListProductItem.stockout::after { content: '庫存不足'; }
.cartListProductItem.notSell::after { content: '停止販售'; }
.cartListProductItem.stockout .cartListProductDelete { color: #f31d1d; }
.cartListProductImg { 
	width: 200px; 
	height: 200px;
	background: var(--colorWhite);
	border: 2px solid var(--colorFloatBg);
	margin-right: 30px;
}
.cartListProductInfo { 
	width: calc(100% - 230px); 
	padding: 0; 
	display: flex; 
	flex-direction: column; 
}
.cartListProductName { 
	margin-bottom: 2px; 
	font-size: 24px; 
	font-weight: 900;
	color: var(--colorWhite); 
}
.cartListProductText { 
	flex-grow: 1; 
	margin-bottom: 10px; 
	font: normal 16px 'Century Gothic', '微軟正黑體'; 
	color: var(--colorGray);
}
.cartListProductPriceContainer { 
	margin-bottom: 10px; 
	display: flex; 
	align-items: baseline; 
}
.cartListProductPrice { 
	margin-bottom: 0px;
	font-size: 22px;
	color: var(--colorGray);
}
.cartListProductAmount { width: 150px; margin-left: auto; }
.cartListProductAmount.amountContainer .form-group .form-control { 
	height: 26px;
	color: var(--colorWhite);
	border: solid 1px var(--colorWhite);
	border-radius: 13px; 
	font: normal 16px 'Century Gothic', '微軟正黑體'; 
}
.cartListProductAmount.amountContainer .form-control:disabled,
 .amountContainer .form-control[readonly] { 
	 background-color: var(--colorBlack); 
	 opacity: 1; 
	}
.cartListProductAmount .btnAmountDecrease,
.cartListProductAmount .btnAmountIncrease { 
	width: 26px; 
	height: 26px; 
	border-radius: 50%; 
	text-align: center; 
	top: 0; 
	position: relative; 
	color: var(--colorWhite );
	background-color: var(--colorBlack);
    border: solid 1px var( --colorWhite );
}
.cartListProductAmount .btnCustom-outline:hover,
.cartListProductAmount .btnCustom-outline:focus,
.cartListProductAmount .btnCustom-outline.active { 	
	color: var(--colorWhite );
	background-color: var(--colorFloatBg);
    border: solid 1px var( --colorFloatBg );
}
.cartListProductAmount .btnAmountDecrease i, .cartListProductAmount .btnAmountIncrease i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15px; }
.btnAmountDecrease { margin-right: 5px; }
.btnAmountIncrease { margin-left: 5px; }
.btnAmountDecrease.disabled, .btnAmountIncrease.disabled { 
	background: var(--colorGray) !important; 
	border: solid 1px var(--colorGray) !important; 
}
.cartListProductSubTotal { font: normal 14px 'Century Gothic', '微軟正黑體'; text-align: right; }
.cartListProductSubTotal span { 
	margin-left: 5px; 
	font-size: 26px; 
	letter-spacing: 1px; 
	color: var(--colorFloatBg); 
	display: inline-block; 
}
.cartListProductDelete { position: absolute; top: 3px; right: 10px; font-size: 15px; color: #777; transition: all 0.4s; }
.cartListProductDelete:hover { color: var(--colorWhite); }
.cartListInfoContainer { 
	border: solid 1px var(--colorBlack); 
	/* border-radius: 8px;  */
	background: #e5e5e5;
	overflow: hidden; }
.cartListInfoContainer.bgWhite{background: #fff;}
.cartListInfoTitle { 
	padding: 10px 20px 5px; 
	border-bottom: solid 1px #bbb; 
	font: bold 20px 'Century Gothic', '微軟正黑體'; 
	letter-spacing: 1px; 
	background: var(--colorFloatBg); 
	color: #fff; 
}
.cartListInfoContent { 
	padding: 5px 60px 10px; 
	background: #fff;
}
.cartListInfoContent.orderInfoContent{
	padding: 5px 30px 10px;
}
.cartListInfoContent2 { 
	padding: 5px 40px 10px 80px;
	position: relative;
}
.cartListInfoContent2 .newsIcon{
	position: absolute;
    left: 10px;
    top: 34px;
}
.cartListInfoForm { }
.cartListInfoForm small { font: normal 14px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; }
.cartListInfoForm small span { font-weight: bold; color: #e5254a; }
.cartListCode{}
.cartListCode .input-group > input.form-control{
	/* border-radius: 8px 0 0 8px; */
}
.cartListCode .input-group-append{
	
}
.cartListCode .input-group-append .btn.btnCustom{
	border: solid 1px var(--colorIcon);
	border-radius: 0;
	padding: 0 18px;
	color: var(--colorIcon);
}
.cartListCode .input-group-append .btn.btnCustom:hover { 
	color: var(--colorWhite); 
	background: var(--colorFloatBg); 
}
.cartListCode .input-group-append .btn.btnCustom:focus { box-shadow:none; }
.cartListCode small{
	padding-top: 5px;
	display: inline-block;
}

.cartListCode.codeError{}
.cartListCode.codeError .input-group > input.form-control{
	border-color: #e5254a;
}
.cartListCode.codeError .input-group-append{}
.cartListCode.codeError .input-group-append .btn.btnCustom{
	border-color: #e5254a;
	color: #e5254a;
}
.cartListCode.codeError .input-group-append .btn.btnCustom:hover { color: #fff; background: #e5254a; }
.cartListCode.codeError small{
	color: #e5254a;
}

.cartListCode.codeSuccess{}
.cartListCode.codeSuccess .input-group > input.form-control{
	border-color: #28a745;
}
.cartListCode.codeSuccess .input-group-append{}
.cartListCode.codeSuccess .input-group-append .btn.btnCustom{
	border-color: #28a745;
	color: #28a745;
}
.cartListCode.codeSuccess .input-group-append .btn.btnCustom:hover { color: #fff; background: #28a745; }
.cartListCode.codeSuccess small{
	color: #28a745;
}

.cartListInfoAccountContainer { }
.cartListInfoAccountItem { margin-bottom: 10px; display: flex; justify-content: space-between; font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 26px; color: var(--colorBlack); }
.cartListInfoAccountItem:last-child .cartListInfoAccountPrice { 
	font-size: 26px; 
	color: var(--colorHover); 
}
.cartListInfoAccountItem .cartListInfoAccountPrice.discount{ color: var(--colorWhite); }
.cartListInfoAccountTitle { }
.cartListInfoAccountPrice { }

/* 訂購服務-輓聯區塊 */
.showing-select-container{
	font-size: 16px;
	margin-bottom: 20px;
}
.showing-select{
    width: 280px;
    padding: 5px 10px;
	margin-left: 10px;
    border-radius: 3px;
	border: solid 1px var(--colorIcon);
	color: var(--colorIcon);
}
.showing-select:focus{
	outline: none;
}
.showing-detail{
	width: calc(100% - 480px);
	padding-left: 30px;
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.elegiac-row{
	display: flex;
	align-items: center;
}

.elegiac-image-container{
	position: relative;
	width: 480px;
	height: 240px;
	max-width: 100%;
}
.elegiac-img{
	position: absolute;
	display: none;
	opacity: 0;
}
.elegiac-img.show{
	display: unset;
	opacity: 1;
}
.elegiac-styles{
	margin: 20px 0;
}
.elegiac-selections {
	display: flex;
}
.elegiac-inputs{
	display: flex;
	margin-bottom: 0.5rem;
}
.elegiac-option{
    width: 168px;
    padding: 5px 6px;
	border-radius: 3px;
	border: solid 1px var(--colorIcon);
	color: var(--colorIcon);
}
.required:not(:last-child),
.optional:not(:last-child) {
	margin-right: 8px;
}
.elegiac-option:focus {
    outline: none;
}
.elegiac-input{
	width: 168px;
    padding: 1px 10px;
    border-radius: 3px;
	border: solid 1px var(--colorIcon);
	color: var(--colorIcon);
}
.elegiac-input:focus{
	outline: none;
}
.required::before{
	content: "*";
	color:rgba(236, 27, 27, 0.8);
	vertical-align: sub;
	font-size: 24px;
}
.optional::before{
	content: "*";
	color: transparent;
	vertical-align: sub;
	font-size: 24px;
}

/* 預覽顯示設定 */
.preview-btn {
	color: var(--colorWhite );
    background-color: var(--colorBlack);
    border: solid 1px var( --colorWhite );
	border-radius: 3px;
	transition: all 0.4s;
}
.preview-btn:focus {
	outline: none;
}
.preview-btn:hover {
	color: var(--colorWhite );
	background-color: var(--colorFloatBg);
	border: solid 1px var( --colorFloatBg );
}
.pre-image{
}
.modal-close{
	position: absolute;
	right: 0;
    color: #000;
    border: none;
    background-color: transparent;
    line-height: 1;
    font-size: 32px;
    padding: 0 10px;
}
.modal-close:focus{
	outline: none;
}

/* accordion */
.cart-accordion-trigger {
    border: none;
    padding: 0;
    background-color: transparent;
}
.cart-accordion-trigger span{
	color: #fff;
	transition: color 0.4s;
}
.cart-accordion-trigger:hover span{
	color: var(--colorFloatBg);
}
.cart-accordion-trigger:focus{
	outline: none;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> cartInfo.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cartInfoContainer { }
.cartInfoContainer input.form-control.cursor-notallowed { background: #eee; }
.cartInfoContainer textarea { resize: none; }
.cartListInfoContainer.stickyBox { position: sticky; top: 10px; }
.cartListInfoContainer.lightContainer { border-color: var(--colorGrayDark); background: #fff; }
.lightContainer .cartListInfoTitle { padding: 10px 20px 5px; border-bottom: solid 1px #bbb; background: var(--colorGrayDark); color: #fff; }
.lightContainer .cartListInfoContent { padding: 5px 20px 10px; }
.cartInfoProductItem { border: none; border-bottom: solid 1px #ddd; border-radius: 0px; padding: 10px 0; background: #fff; }
.cartInfoProductItem .cartListProductImg { 
	width: 120px;
	height: 120px; 
}
.cartInfoProductItem .cartListProductInfo { 
	width: calc(100% - 150px); 
	padding: 0; }
.cartInfoProductItem .cartListProductName {
	color: var(--colorFloatBg);
}
.cartInfoProductItem .cartListProductText { }
.cartInfoProductItem .cartListProductPriceContainer { 
	margin-bottom: 0px; 
	flex-wrap: wrap; 
}
.cartInfoProductItem .cartListProductPrice { width: 70px; margin-bottom: 0px; color: #666; }
.cartInfoProductItem .cartListProductAmount { 
	width: 60px; 
	margin-left: 5px; 
	font: normal 14px 'Century Gothic', '微軟正黑體';
	color: var(--colorGray);
}
.cartInfoProductItem .cartListProductSubTotal { 
	flex-grow: 1; 
	color: var(--colorGray);
}
.cartInfoProductItem .cartListProductSubTotal span { }

/* 輓聯預覽設定 */
.cartListInfoContent .elegiac-image-container {
	margin: 0 auto 5px auto;
}
.elegiac-word {
	position: absolute;
	color: #000;
	font-weight: bold;
	font-family: "標楷體";
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> cartBuild.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cartBuildInfoContainer { background: #fff; }
.cartBuildText { margin-top: 10px; font: normal 16px 'Century Gothic', '微軟正黑體'; color: var(--colorBlack); }
.cartBuildText a { transition: all 0.4s; }
.cartBuildText a:hover { color: #e5254a; }
.cartBuildInfoContent .cartListInfoAccountItem:last-child .cartListInfoAccountPrice { font-size: 16px; color: var(--colorBlack); }
.cartListInfoAccountPrice.importantItem, .cartBuildInfoContent .cartListInfoAccountItem:last-child .cartListInfoAccountPrice.importantItem { font-size: 1.2em; font-weight: bold; color: #e5254a; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> login.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.memberLoginContainer { max-width: 600px; }
.loginSocialContainer { }
.loginSocialItem { 
	padding: 20px; 
	border-radius: 20px; 
	text-align: center; 
	background: var(--colorHover); 
	transition: all 0.4s; 
}
.loginSocialItem.loginSocialItemLine:hover { background: #00B900; }
.loginSocialItem.loginSocialItemFb:hover { background: #4267B2; }
.loginSocialItem.loginSocialItemGoogle:hover { background: #DB4437; }/*Y-F4B400 R-DB4437*/
.loginSocialIcon { width: 60px; margin: 0 auto 15px; opacity: 0.7; transition: all 0.4s; }
.loginSocialItem:hover .loginSocialIcon { opacity: 1; }
.loginSocialText { font: normal 18px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: #fff; }
.loginMailContainer { border: solid 1px #ddd; border-radius: 20px; background: #eee; overflow: hidden; }
.loginMailTitle { padding: 12px 15px 8px; border-bottom: solid 1px #ddd; font: bold 16px 'Century Gothic', '微軟正黑體'; color: var(--colorBlack); }
.loginMailContent { padding: 20px 15px; background: #fcfcfc; }
.loginMailContent .input-group > .form-control, .loginMailContent .input-group > .form-control-plaintext { height: 36px; padding: 3px 10px; border: solid 1px var(--colorBlack); border-radius: 8px 0 0 8px; font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 20px; color: #222; }
.loginMailContent .input-group-append .btn { padding: 0 10px; }
.loginMailSend.send .input-group > .form-control, .loginMailSend.send .input-group .btnCustom-outline { border-color: #999; }
.loginMailSend.send .input-group .btnCustom-outline { color: #999; }
.loginMailContent .form-group > input.form-control { border-color: var(--colorBlack); }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> member.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.memberInfoContainer { }
.memberRecipientContainer { }
.memberForm { padding: 0 20px; }
.memberImgContainer { width: 100%; max-width: 150px; margin: 20px auto 10px; border-radius: 10px; position: relative; overflow: hidden; }
.memberImg { border: solid 2px var(--colorBlack); border-radius: 10px; position: relative; overflow: hidden; }
.memberImgFile { width: 36px; height: 36px; position: absolute; right: 0px; bottom: 0px; z-index: 10; cursor: pointer; }
.memberImgFile:hover { }
.memberForm input.form-control.cursor-notallowed { background: #eee; }
.memberForm .custom-file { height: 100%; }
.memberForm .custom-file-input { height: 100%; padding: 3px 10px; border: solid 1px var(--colorGrayLight); border-radius: 8px; cursor: pointer; }
.memberForm .custom-file-label { height: 100%; padding: 3px 10px; margin-bottom: 0; font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 28px; text-align: center; color: var(--colorWhite); background-color: var(--colorBlack); border: none; border-radius: 8px; overflow: hidden; cursor: pointer; z-index: 10; }
.memberForm .custom-file-input:focus ~ .custom-file-label { border: none; outline: none; box-shadow: none; }
.memberForm .custom-file-label::after { height: 34px; padding: 3px 10px; line-height: 28px; color: #495057; content: "上傳"; background-color: #e9ecef; border-left: inherit; border-radius: 0 8px 8px 0; cursor: pointer; display: none; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> order.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.orderWarningText { 
	padding: 10px; 
	border-radius: 8px; 
	font: 600 17px 'Century Gothic', '微軟正黑體'; 
	letter-spacing: 1px; 
	background: var(--colorBlue); 
	color: #fff; 
}
.orderInfoContainer { background: #fff; }
.orderInfoContainer .cartListInfoTitle a { color: #fff; }
.orderInfoContent { padding-top: 10px; }
.orderInfoStatusPrice { display: flex; justify-content: space-between; align-items: flex-end; }
.orderInfoStatus { font: 400 18px 'Century Gothic', '微軟正黑體'; }
.orderInfoPrice { 
	font: 600 24px 'Century Gothic', '微軟正黑體'; 
	color: var(--colorRed); 
	letter-spacing: 1px; 
}
.orderInfoContentList { }
.orderInfoContentItem { margin-bottom: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 26px; color: var(--colorBlack); }
.orderInfoContentTitle { }
.orderInfoContentText { }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> order_detail.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.orderDetailInfoContent .orderInfoContentTitle { font-size: 14px; font-weight: bold; color: #999; }
.orderInfoContentText.width100 { width: 100%; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> faq.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.faqItem { }
.faqQuestionContainer { border-bottom: solid 1px #bbb; padding: 16px 5px 10px; display: flex; flex-wrap: wrap; align-items: flex-end; font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 20px; letter-spacing: 1px; color: var(--colorBlack); position: relative; cursor: pointer; transition: all 0.4s; }
.faqQuestionContainer::before { content: ''; width: 0; height: 100%; background: #f5f5f5; position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.4s; }
.faqQuestionContainer:hover::before, .faqItem.active .faqQuestionContainer::before { width: 100%; }
.faqQuestionNum { width: 35px; margin-right: 10px; font: 500 28px 'Baloo Tamma 2', 'Century Gothic', '微軟正黑體'; line-height: 20px; transition: all 0.4s; }
.faqItem.active .faqQuestionContainer .faqQuestionNum { color: var(--colorWhite); }
.faqQuestion { width: calc(100% - 85px); }
.faqQuestionIcon { width: 30px; height: 30px; margin-left: 10px; position: relative; transition: top, transform 0.4s; }
.faqQuestionIcon::before { content: ''; width: 30px; height: 30px; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); background: var(--colorWhite); opacity: 0.6; transition: all 0.4s; }
.faqItem:hover .faqQuestionIcon::before, .faqItem.active .faqQuestionIcon::before { opacity: 1; }
.faqQuestionIconCube { width: 18px; height: 3px; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.4s; }
.faqQuestionIconCube.vertical { width: 3px; height: 18px; background: transparent; }
.faqQuestionIconCube.vertical::after { content: ''; width: 100%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; transition: all 0.4s; }
.faqItem.active .faqQuestionIconCube.vertical::after { transform: rotate(270deg); }
.faqAnswerContainer { height: 0; overflow: hidden; transition: all 0.4s; }
.faqAnswer { padding: 20px 15px; border-left: solid 1px #ddd; border-right: solid 1px #ddd; border-bottom: solid 1px #ddd; border-radius: 0 0 15px 15px; font: normal 14px 'Century Gothic', '微軟正黑體'; line-height: 25px; background: #fff; position: relative; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> contact.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.contactMap iframe { width: 100%; height: 400px; margin-bottom: 40px; }
.contactInfoContainer { padding: 2px; border: solid 1px #001699; }
.contactInfoBorder { padding: 10px 20px; border: solid 1px #999; }
.contactInfoItem { padding: 30px 0; border-bottom: solid 1px #e0e0e0; }
.contactInfoBorder>.row .col-12:last-child .contactInfoItem { border-bottom: none; }
.contactInfoIcon { margin-bottom: 8px; text-align: center; font-size: 28px; color: #001699; }
.contactInfoText { font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; text-align: center; }
.contactFormContainer { width: 100%; height: 100%; padding: 10px 20px; border: solid 1px #eee; background: #fafafa; }
.contactTitle { margin-bottom: 20px; font: bold 20px 'Century Gothic', '微軟正黑體'; color: #001699; text-align: center; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> privacy.php / terms.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.documentContainer .contentContainer h6 { font: bold 18px 'Century Gothic', '微軟正黑體'; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_social.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.socialBtnContainer{
	position: fixed;
	bottom: 0;
	right: 0;
	margin-right: -85px;
	z-index: 999;
	background-color: var(--colorFloatBg);
	border-radius:30px 0 0 0;
	transition: all 0.8s;
}
.socialBtnContainer:before{
	content: '⇐';
	display: block;
	position: absolute;
	left: -40px;
	top: 50px;
	width: 40px;
	height: 50px;
	line-height:50px;	
	text-align: right;
	font-size:30px;
	border-radius: 25px 0 0 25px;
	background-color: var(--colorFloatBg);
}
.socialBtnContainer:hover:before, 
.socialBtnContainer:focus:before{
	opacity: 0.1;
}
.socialBtnContainer:hover, 
.socialBtnContainer:focus{
	margin-right: 0;
}
.socialBtnItem{
	width: 80px;
	height: 80px;	
	position: relative;
}

.socialBtnItem a{	
	width: 100%;
	height: 100%;
	display: block;
}
.socialBtnItemContent{
	width: 70%;
	margin: 0 auto;
	transition: all 0.4s;
}
.socialBtnItem a:hover .socialBtnItemContent{	
	width: 80%;
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> loading <<<------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
/*  前導  */
body.index{
	overflow-y:hidden;
}
body.index main{
	display:none;
}
.introContainer{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;		
	z-index: 10000;
	background-color: var(--colorBlack);
}
.introImg{
	width: 100%;
	height: 100%;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: introImgOpacity 5s infinite both; 
}
.introImg img{
	width: 100%;
	height: 100%;
	object-position: center 20%;
	object-fit: cover;
}
.introImg2{
	width: 94%;
	height: 94%;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: introImgOpacity 5.2s infinite both; 
}
.introImg2 img{
	width: 100%;
	height: 100%;
	object-position: center 20%;
	object-fit: contain;
}
@keyframes introImgOpacity {
  0% {
    opacity: 0; 
  }
  15% {
    opacity: 1; 
  }
  80% {
    opacity: 1; 
  } 
  100% {
    opacity: 0; 
  } 
}

/*  驗證信LOADING  */
.loadingContainer{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--colorBlack);
	z-index: 80;
}
.loadingContent{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.loadingImg{
	width: 70px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: loadingImgOpacity 222.5s infinite both; 

}
@keyframes loadingImgOpacity {
  50% {
    opacity: 0.6; 
  } 
  100%, 0% {
    opacity: 1; 
  } 
}
.loadingSpinner{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
}
.sk-chase {
  width: 100px;
  height: 100px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; 
  animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 15%;
  height: 15%;
  
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
  100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4);
    background-color: var(--colorBlack);
  } 100%, 0% {
    transform: scale(1.0); 
    background-color: var(--colorGray);
  } 
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> other <<<------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.colorImportant{ color: var( --colorWhite );}
.colorYellow{ color: #ff9f00; }


/* -------------->>> ie-decide.php ie瀏覽器限制 <<<----------------*/
.modal_browse { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); }
.wrap { max-width: 800px; margin: 100px auto 0 auto; font-size: 1.2em; text-transform: capitalize; line-height: 1.5; text-align: center; background: #FFF4F4; padding: 50px 30px; }
.wrap .text { text-align: left; }
.wrap a { display: block; text-transform: capitalize; }
.wrap h2 { font-size: 19px; text-decoration: underline; color: #e25600; margin: 0; }
.wrap h3 { font-size: 10px; color: #aaa; margin: 0; }
.wrap img { margin: auto; }