@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_phone_menu.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.headerRwdContainer { }
.rwdTopContainer { 
	height: 70px; 
	width: 100%;
	box-shadow: 1px 1px 5px rgba(10, 5, 0, 0.5); 
	padding: 0 0px; 
	position:fixed; 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: start; 
	align-items: center; 
	top: 0; 
	z-index: 999;
	background: var(--colorBlack);
}
.rwdMenuLogo { 
	width: calc(100% - 108px);
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rwdMenuLogo a{
	width: 100%;
    height: 100%;
    text-align: center; 
}
.rwdMenuLogo img{
	max-height: 70px;
}
/* .rwdMenuIcon { width: 24px; height: 26px; margin-left: 20px; text-align: center; cursor: pointer; font-size: 48px; line-height: 50px; color: #d09c51; position: relative; } */
/* .rwdMenuIconLine { width: 100%; height: 2px; background: #555; position: absolute; transition: all 0.6s; }
.rwdMenuIconLine.line1 { top: 5px; left: 0; transform-origin: left top; }
.rwdMenuIconLine.line2 { left: 0; top: 50%; transform: translate(0, -50%); }
.rwdMenuIconLine.line3 { bottom: 5px; left: 0; transform-origin: left bottom; }
.rwdMenuIcon.active .rwdMenuIconLine.line1 { top: 0; width: 34px; transform: rotate(45deg); }
.rwdMenuIcon.active .rwdMenuIconLine.line2 { opacity: 0 }
.rwdMenuIcon.active .rwdMenuIconLine.line3 { bottom: 0; width: 34px; transform: rotate(-45deg); } */
.rwdMenuIcon {
	cursor: pointer;
	padding-left: 10px;
    font-weight: bold;
}
.rwdMenuCart{
	width: 44px; 
	height:44px; 
	margin-right: 15px; 
	text-align: center; 
	position: relative;
}
.rwdMenuCart 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: 0;
	z-index: 2; 
}
.rwdMenuCart::after { 
	content: ''; 
	width: 20px; 
	height: 20px; 
	border-radius: 50%; 
	background: var(--colorWhite);
	position: absolute; 
	bottom: 0; 
	left: 0; 
	z-index: 1; 
}
.rwdHeaderNavContainer {
	width: 100%;
	padding: 20px 100px;
	background: var(--colorBlack);
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 70px;
	left: -100%;
	bottom: 0;
	z-index: 900;
	transition: all 0.6s;
	overflow-y: scroll;
}

.rwdHeaderNavContainer.active {
	left: 0;
}
.rwdHeaderNavMember{
	width: 70%;
	margin: 0 auto;
}
.rwdHeaderNavMemberItem{
	height: 65px;	
	border-radius: 30px 0 30px 0;
	text-align: center;
	background: var(--colorFloatBg);	
}
.rwdHeaderNavMemberItem a{
	height: 100%;	
	display: flex;
	justify-content: center;
	align-items: center;
}
.rwdHeaderNavMemberItem span{
	font-size: 1.25rem;
}
.rwdHeaderNavManu{
	margin-bottom: 20px;
}

.rwdHeaderNavManuList{
	width: 70%;
	margin: 0 auto;
	padding: 10px 20px 20px;
	height: auto;
	min-height: 100px;
	border: solid 1px var(--colorBlack);
	border-radius: 50px 0 50px 0;
	text-align: center;
	background: var(--colorFloatBg);

}
.rwdHeaderNavManuItem{
	padding: 10px 0;
	font-size: 1.25rem;
	line-height: 30px;
}
.rwdHeaderNavManuItem:not(:last-child){
	border-bottom: solid 1px var(--colorBlack);
}
.rwdHeaderNavManuItem a{
	color: var( --colorWhite );	
    background-size: 15px 21px;
	word-break: keep-all;
}

.rwdHeaderNavFooter{
	display: flex;
	justify-content: center;
}
.rwdHeaderNavFooterItem{
	width: 60px;
	margin: 20px 10px 0;
}
.rwdHeaderNavFooterItem a { 
	width: 100%;
    height: 60px;
    display: block;
    padding: 0;
    position: relative;
}
.rwdHeaderNavFooterItem img { 
	position: absolute;
    transition: all 0.4s;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.rwdHeaderNavFooterItem .shover{
	opacity: 0;
}
.rwdHeaderNavFooterItem a:hover .shover{
	opacity: 1;
}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_footer.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> RWD<<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1210px) {
   
}

@media screen and (max-width:1199px) {
	.headerSocialItem{
		max-width: 44px;
	}	
	.headerNav { letter-spacing: 1px; }
	.headerNavItem { margin: 0px 12px; }
	.headerNavItem:not(:last-child)::after { right: -11px; }	

	.showingdetailSlider .swiper-button-prev{
		left: 5%;
	}
	.showingdetailSlider .swiper-button-next{ right: 10%; }
	.rwd-tbs {
		padding: 0.75rem 0 !important;
	}
	.elegiac-option,
	.elegiac-input {
		width: 160px;
	}
	
}
@media screen and (max-width:1070px) {
	.headerSocialItem{
		max-width: 40px;
	}	
	.headerMemberItem {
		width: 42px;	
	}
	

}
@media screen and (max-width:1050px) {
	.headerNavItem { margin: 0px 3px; }
	.headerNavItem:not(:last-child)::after { right: -6px; }
	
}
@media screen and (max-width:1020px) {
	.headerSocialItem{
		max-width: 36px;
	}
}

@media screen and (max-width:991px) {
	body {
		margin-top: 70px;
	}
	.showlist{
		width: 650px;
	}
	.articleContent{
		width: 100%;
		text-align:center;
	}
	.indexArticleItemFirst .indexArticleImgContainer { width: 35%; padding-bottom: 160px; }
	/*.indexArticleItemFirst .indexArticleDate { bottom: 20px; top: auto; }*/
	.indexArticleItemFirst .indexArticleContentContainer { width: 65%; }
	.indexArticleItemFirst .indexArticleContentText { height: 48px; -webkit-line-clamp: 2; }

	.indexArticleItemCol6 .indexArticleImgContainer { width: 35%; padding-bottom: 160px; }
	.indexArticleItemCol6 .indexArticleContentContainer { width: 65%; }

	.articleDetailTitleContainer { border-bottom: none }
	.pageTitleContainer .indexTitle.articleDetailTitle { width: calc(100% - 0px); line-height: 26px; }
	.articleDetailDate { width: auto; margin-top: 5px; padding: 0; border: none; border-radius: 0; font: bold 16px 'Century Gothic', '微軟正黑體'; text-align: left; bottom: 0px; }
	.productDetailArticleContainer .indexArticleItemCol6 .indexArticleImgContainer,
	.indexArticleItemCol:only-child .indexArticleItemCol6 .indexArticleImgContainer
	 { width: 50%; padding-bottom: 200px; }
	.productDetailArticleContainer .indexArticleItemCol6 .indexArticleContentContainer { width: 50%; }
	
	.loginSocialItem.loginSocialItemLine { background: #00B900; }
	.loginSocialItem.loginSocialItemFb { background: #4267B2; }
	.loginSocialItem.loginSocialItemGoogle { background: #DB4437; }/*Y-F4B400 R-DB4437*/
	.loginSocialIcon { opacity: 1 }
	.productDetailBody { padding-bottom: 50px; }
	
	.showing-select-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.elegiac-row{ flex-direction: column; }
	.elegiac-image-container{ order: 2; }
	.showing-detail {
		width: 90%;
		margin-bottom: 20px;
		order: 1;
		align-items: center;
		padding-left: 0;
	}
	.elegiac-styles { text-align: center; }
	.elegiac-opt-container{ text-align: center; }
	.rwd-tbs {
		font-size: 16px;
		padding: 0.75rem 0 !important;
	}
	.showingdetailSlider .swiper-button-next{ right: -2%; }
}

@media screen and (max-width:768px) {
	.newsContent{
		width: 100%;
	}	
	.knowledgeBg{
		background-image:none;
	}
	.videoLink,
	.videoTxt{
		width: 100%;
		margin: 10px 0;
	}
	.cartListInfoContent.orderInfoContent,
	.cartListInfoContainer .cartListInfoContent{
		padding: 5px 20px 10px;
	}
	.rwdHeaderNavContainer { padding: 20px 40px; }
	.bannerImgFull { display: none }
	.bannerImgPhone { display: block; }
	.bannerContent { margin-left: calc(10% - 15px); margin-right: calc(10% - 15px); width: 100%; max-width: 80%; /*top: 15%; transform: translateY(0%);*/ }

	.ms-slide:nth-child(2n) .bannerContent { margin-left: calc(10% - 15px); }
	.bannerSliderContent{
		top: 15% !important;
		transform: translateY(0%) !important;
	}
	.productDetailItemImg { width: 100%; max-width: 400px; margin: 0 auto 20px;}
	.productDetailItemInfoContainer { width: calc(100% - 210px);}
	.productDetailBanner .bannerContentContainer .bannerContent {  margin-left: auto; margin-right: auto; max-width: 80%; top: 15%; transform: translateY(0%); }

	.showingdetailSlider .swiper-button-prev{ top: 44%; }
	.showingdetailSlider .swiper-button-next { right: -1%; top: 44%; }
	.elegiac-option, .elegiac-input{ width: 150px; }
	.required:not(:last-child), .optional:not(:last-child) {
		margin: 0;
	}
	.showingdetailSlider{ width: 480px; }
	.board-btn{ margin-top: 10px; }
	.dashTopBorder.rwd-dashTopBorder{ border-top: 0; }
} 


@media screen and (max-width:575px) {
	.rwdHeaderNavContainer { padding: 20px 10px; }
	.bannerSliderContent{
		top: 8% !important;
	}
	.productDetailBanner .bannerContentContainer .bannerContent{
		top: 8%;
	}
	.articleTitleContainer { }
	.articleTitleContainer .indexTitle { margin-bottom: 10px; width: 100%; }
	.productDetailBanner .breadcrumb { padding-left: 25px; top: 10px; }
	.productDetailBanner .bannerContent { top: 10%; }
	.productDetailArticleContainer .indexArticleItemCol6 .indexArticleImgContainer,
	.indexArticleItemCol:only-child .indexArticleItemCol6 .indexArticleImgContainer { width: 35%; padding-bottom: 160px; }
	.productDetailArticleContainer .indexArticleItemCol6 .indexArticleContentContainer { width: 65%; }
	.productDetailProductItem{justify-content: center;}
	.productDetailItemInfoContainer { width: calc(100% - 0px); margin-right: 0; margin-bottom: 20px;}
	.productDetailItemPrice{
		justify-content: space-between;
	}
	.productDetailItemBtnContainer{min-height: 100px;}
	.loginSocialItem { padding: 15px; border-radius: 15px; }
	.loginSocialItem a { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
	.loginSocialIcon { width: 36px; margin: 0 0 0; }
	.loginSocialText { width: 150px; }
	.loginMailContainer { border-radius: 15px; }
	.cartListProductItem { flex-wrap: wrap; margin: 0 auto; }
	.cartListProductImg { 
		width: 100%;
		height: auto;
		margin-right: 0;
		text-align: center; 
		background: #eee; 
	}
	.cartListProductImg img { max-width: 200px; margin: 0 auto; }
	.cartListProductInfo { width: calc(100% - 0px); padding: 10px; display: flex; flex-direction: column; }
	.cartInfoProductItem { max-width: 100%; }
	.cartInfoProductItem .cartListProductImg { display: none; }
	.cartInfoProductItem .cartListProductInfo { width: calc(100% - 0px); }
	.cartBuildInfoContent .cartListInfoAccountTitle { font-size: 14px; letter-spacing: 0; color: var(--colorGrayDark); font-weight: bold; }
	.cartBuildInfoContent .cartListInfoAccountPrice { letter-spacing: 0.5px; }
	
	.showingdetailSlider .swiper-button-next { right: 5%; }
	.iconUnderline { width: 35px; }

	.elegiac-option,
	.elegiac-input{ width: 90%; }
	.elegiac-selections,
	.elegiac-inputs { flex-direction: column; }
}

@media screen and (max-width:520px) {
	.showingdetailSlider{ width: 380px; }
	.rsw{ width: 38px; }
}

@media screen and (max-width:480px) {
	.elegiac-image-container{
		width: 320px;
		height: 160px;
	}
}

@media screen and (max-width: 425px) {
	.showingdetailSlider .swiper-button-next {right: 1%;}
}

@media screen and (max-width:400px) {
	.rwdHeaderNavMemberItem i { margin-right: 5px; font-size: 20px; }
	.rwdHeaderNavMemberItem span { font: normal 14px 'Century Gothic', '微軟正黑體'; letter-spacing: 0px; }
	.productDetailBanner .breadcrumb { padding-left: 10px; top: 10px; }
	.productDetailBanner .breadcrumb>li { font-size: 12px; letter-spacing: 0; }
	.cartInfoProductItem .cartListProductPrice, .cartInfoProductItem .cartListProductAmount { width: 50%; }
	.cartInfoProductItem .cartListProductAmount { margin-left: 0; text-align: right; }
	.cartInfoProductItem .cartListProductSubTotal { margin-top: 10px; width: 100%; }	
	.footerInfo,
	.footerLinkCopy{	
		margin-left: 0;
	}
	.footerTitle{
		flex-direction: column;
	}
	.footerItem div{
		text-align: center;
		margin-bottom: 8px;
	}
	.footerName{
		border-left: 1px solid;
	}
	.showingdetailSlider .swiper-button-next { right: 2%; }
	.showingdetailSlider{ width: 320px; }
	.rsw{ width:16px; }
}
@media screen and (max-width:360px) {

}