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

body
{
	/* background-image:url(../images/index/bg.png); */
	font-size: 15px;
	font-family: Microsoft JhengHei, Verdana, Arial, Helvetica, sans-serif !important;
	line-height: 1.7;
	color: #666666;
	margin:0px;
	padding:0px;
}

a, a:link, a:visited, a:active, a:hover
{
	color: #666666;
    text-decoration: none;
}

img
{
	border: 0px;
}

pre
{
	white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
	
	/* 覆蓋瀏覽器預設 */
	padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
	color: inherit;
}

.contImgControl img
{
	max-width:100%;
}

#fixedBtnDiv
{
	position: fixed;
	right: 10px;
	bottom: 100px;
	
	width: 50px;
	z-index: 100000;
}
#ruleBtn, .ruleBtn
{
	position: relative;
	padding-top:6px;
	
	line-height:1.2;
	background:#c8c9c7;
	border:2px solid #FFF;
	color:#FFF;
	font-size:13px;
	
	width: 50px;
	height: 50px;
	
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	
	-moz-box-shadow:-1px 1px 5px #e5e5e5;
	-webkit-box-shadow:-1px 1px 5px #e5e5e5;
	box-shadow:-1px 1px 5px #e5e5e5;
	
	transition: all .15s ease-in-out;
}
.ruleBtn:hover, .ruleBtn:focus
{
	background:#a2a3a1;
}
.ruleBtn_v1
{
	position: relative;
	padding-top:6px;
	
	line-height:1.2;
	background:#DFC2C3;
	border:2px solid #FFF;
	color:#FFF;
	font-size:13px;
	
	width: 50px;
	height: 50px;
	
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	
	-moz-box-shadow:-1px 1px 5px #e5e5e5;
	-webkit-box-shadow:-1px 1px 5px #e5e5e5;
	box-shadow:-1px 1px 5px #e5e5e5;
	
	transition: all .15s ease-in-out;
}
.ruleBtn_v1:hover, .ruleBtn_v1:focus
{
	background:#f3d5d6;
}
/*-------- 20200408 add start-------------*/
.btn_badge {
    position: absolute;
    top: -1px;
    right: 3px;
    width:10px;
	height:10px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    line-height: 1;
    background: #db756d;
    color: #fff;
    font-size: 12px;
    -webkit-font-smoothing: auto;
	
	animation-iteration-count: infinite;
	animation-direction: alternate;

	-webkit-animation-name: blink; /* Chrome, Safari, Opera */
	-webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	animation-name: blink;
	animation-duration: 1s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes blink {
	from {background-color: #db756d;}
	to {background-color: #db756d;}
}

/* Standard syntax */
@keyframes blink {
	from {background-color: #db756d;}
	to {background-color: #db756d;}
}

/*-------- 20200408 add end-------------*/

#topLineBgDiv
{
	position: relative;
	width: 100%;
	min-height: 42px;
	line-height:40px;
	text-align: center;
	z-index: 1;
	background-color: #c8c9c7;
}

#sliderDiv
{
	position:relative;
	width:100%;
	background-color:#CCC;
}

#pageBtnDiv
{
	position:absolute;
	right:30px;
	top:4vw;
	width:300px;
	height:300px;
	z-index:99999;
}

#pageDiv
{
	position:relative;
	width:100%;
	background-color:#FEFEFE;
}

#marqueeDiv
{
	position:relative;
	width:100%;
	background-color:#FEFEFE;
}

#conDiv
{
	position:relative;
	width:100%;
	background-color:#FEFEFE;
}

#footerDiv
{
	position:relative;
	width: 100%;
	color:#242424;
	background-color: #c8c9c7;
	
	height:65px;
	padding:2px 0;
}


.footerDiv
{
	position:fixed;
	bottom:0px;
	z-index:999999;
	width: 100%;
	color:#242424;
	background-color: #c8c9c7;
	
	padding:5px 0;
	
	-moz-box-shadow:1px -1px 5px #DDD;
	-webkit-box-shadow:1px -1px 5px #DDD;
	box-shadow:1px -1px 5px #FFF;
	
}
.mb_footerbtn
{
	text-align:center;
	padding:10px 5px;
	letter-spacing:2px;
	line-height:1.5;
	border-radius: 4px;
	
	transition: all .15s ease-in-out;
}
.mb_footerbtn:hover
{
	background-color:#a2a3a1;
}


/*
#copyrightDiv
{
	position:relative;
	color:#999;
	background-color: #333;
}
*/
#bottomLineDiv
{
	position:relative;
	background-color: #00c3be;
	height:5px;	
	border-top: 1px solid #FFF;
}

/* page btn */
#pageBtn01,#pageBtn02,#pageBtn03,#pageBtn04,#pageBtnR01,#pageBtnR02,#pageBtnR03,#pageBtnR04
{
	cursor:pointer;
}

#pageBtnR01, #pageBtnR02, #pageBtnR03, #pageBtnR04
{
	width:75px;
	height:75px;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	
	background:#00c3be;
	color:#FFF;
}

.linkLine a span
{
	color:#FFF;
}

.menuLiDiv
{
	font-size:16px;
	font-weight:600;
	line-height:2;
	white-space:nowrap;
	margin:0px 6px;
	letter-spacing:2px;
}


/* form field style */
.formStyle
{
	border-left:0px;
	border-right:0px;
	border-top:0px;
	background-color:transparent;
	-webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
}
.formStyle::-webkit-input-placeholder
{
	color:#CCC;
}
.formStyle:-moz-placeholder
{
	color:#CCC;
}
.formStyle::-moz-placeholder
{
	color:#CCC;
}
.formStyle:-ms-input-placeholder
{
	color:#CCC;
}
.formStyle:-moz-placeholder
{
	color:#CCC;
}
.genderTag
{
	display:inline-block;
	background-color:#DDD;
	color:#FFF;
	padding:5px;
	cursor:pointer;
}
.tagFocus
{
	background-color:#DFC2C3;
	color:#FFF;
}



/* cover tabs css */
.tabs
{
	margin-bottom:0;
	border:1px solid #DDD !important;
}

.tabs li
{
	width:50%;
	font-size:22px;
	text-align:center;
}

.tabs li.active
{
	border-bottom:2px solid #FD787C;
}

.tabs .active a
{
	color: #666 !important;
}

.toggle_border
{
	border:1px solid #DDD !important;
}

.prodAreaTitle
{
	position:relative;
	width:100%;
	background:#333;
	color:#FFF;
	font-size: 20px;
	padding:10px;
}


.prodTitle
{
	height:75px;
	font-weight:bold;
	font-size:16px;
	overflow:hidden;
}



.cs-title
{
	width: 380px !important;
}

.goLink
{
	color: #0066CC !important;
}

.goLink:hover
{
	text-decoration: underline !important;
}

.paddingBtm10px
{
	padding-bottom: 10px;
}

.marginTop10px
{
	margin-top: 10px;
}
.marginTop20px
{
	margin-top: 20px;
}

.marginTop30px
{
	margin-top: 30px;
}

.marginBtm10px
{
	margin-bottom: 10px;
}

.marginBtm20px
{
	margin-bottom: 20px;
}

.marginBtm30px
{
	margin-bottom: 30px;
}

.marginBtm50px
{
	margin-bottom: 50px;
}

.paddingTop10px
{
	padding-top: 10px;
}
.paddingBtm10px
{
	padding-bottom: 10px;
}
.paddingLeft10px
{
	padding-left: 10px;
}
.paddingRight10px
{
	padding-right: 10px;
}

/* news start */
.mainColorBg
{
	background-color: #800000;
	background: #800000;
}

.mainColorFont
{
	color: #800000;
}

.subColorBg
{
	background-color: #333;
	background: #333;
}

.subColorFont
{
	color: #333;
}
.newsDiv:hover
{
	background-color: rgba( 255 , 207 , 207 , 0.2 );
	cursor:pointer;
}

/* news end */

/* page */
.pageDiv
{
	border:1px solid #DFC2C3;
	color: #DFC2C3;
	border-radius:5px;
	width:25px;
	height:25px;
	display:inline-block;
	margin:1%;
	line-height:23px;
}

.pageDiv span
{
	line-height:23px;
}

.actPage
{
	border:1px solid #DFC2C3;
	background-color: #DFC2C3;
	color: #FFF;
	border-radius:5px;
	width:25px;
	height:25px;
	line-height: 23px;
	display:inline-block;
	margin:1%;
}
/* page */

.titleHr
{
	border:0;
	
	height:1px;
	width:10%;
	background-color: #CCC;
	margin-top:1%;
}

.msgDiv
{
	border:1px solid #CCC;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.subTitleBg
{
	width:100%;
	padding:1%;
	color:#FFF;
	text-align:center;
	
	background-color: #ec6954;
	
	border:1px solid #CCC;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.subTitleBg:hover
{
	color:#FFF;
}

.qT
{
	width: 100%;
	background-color: #1b7db3;
	color: #FFF;
	
	cursor: pointer;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.aT
{
	width: 100%;
	background-color: rgba( 255 , 255 , 255 , 0.7 );
	padding:1%;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.prodDiv:hover .mask
{
	border-top:5px solid #ec6954;
	border-bottom:5px solid #ec6954;
	
	background-color: rgba( 0 , 0 , 0 , 0.7 );
}
.prodDiv:hover .moreBtn
{
	display:block;
}

.prodConImg
{
	width:100%;
	padding:5% 5% 5% 5%;
	background-color: #FFF;
	
	-moz-box-shadow:1px 1px 5px #CCC;
	-webkit-box-shadow:1px 1px 5px #CCC;
	box-shadow:1px 1px 5px #CCC;
}






.backBtn
{
	width:50px;
	height:30px;
	background-color: rgba( 35 , 120 , 170 , 0.5 );
	color: #FFF;
	line-height: 30px;
	text-align:center;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.searchDiv
{
	background-color: rgba( 255 , 255 , 255 , 0.6 );
	
	padding:3% 0 3% 0;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.srchBtn
{
	width:34px;
	height:34px;
	background-color:#CCC;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.moreBtn
{
	position:relative;
	display:none;
	background-color: #ec6954;
	width:70px;
	height:70px;
	color: #FFF;
	margin: 15% 0 0 30%;
	padding-top:10px;
	
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
}

.word-break
{
	word-wrap:break-word;
	overflow-wrap:break-word;
	word-break: break-all;
}

.radius
{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.radius10px
{
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.focusPage-s
{
	font-weight:bolder;
	background-color:#FFF;
}
.focusPage-b
{
	font-weight:bolder;
}


/* product content img */
.prodCon img
{
	max-width:100%;
	height:unset !important;
}
.prodCon dl, .prodCon iframe
{
	max-width:100% !important;
}


/*-------- 20200408 add start-------------*/
.message_list
{
	cursor:pointer;
	padding:15px 5px;
	border-bottom:1px solid #f6f6f6;
}
.message_list_read, .message_list:hover
{
	background-color:#f4f4f4;
}
.messlist_con
{
	width:calc( 100% - 85px );
	display: inline-block;
}
.backup_btn
{
	width:80px;
	display: inline-block;
	background-color: #fff3f4;
	font-size:13px;
	color:#DFC2C3;
	padding:3px;
	line-height: 1.7;
	
	cursor:pointer;
	text-align:center;
	
	transition: all .15s ease-in-out;
}
.backup_btn:hover, .backup_btn:focus
{
	color:#fff;
	background-color: #DFC2C3;
}
.receive_btn
{
	width:80px;
	display: inline-block;
	background-color: #DFC2C3;
	font-size:13px;
	color:#fff;
	padding:3px;
	line-height: 1.7;
	
	cursor:pointer;
	text-align:center;
	
	transition: all .15s ease-in-out;
}
.receive_btn:hover, .receive_btn:focus
{
	background-color: #b89c9d;
}
.receive_btn_ok
{
	width:80px;
	display: inline-block;
	background-color: #e6c8c9;
	font-size:13px;
	color:#fff;
	padding:3px;
	line-height: 1.7;
	
	cursor:pointer;
	text-align:center;
	
}
.receive_btn_ok:hover, .receive_btn_ok:focus
{
	background-color: #dfc2c3;
}
.receive_btn_notok
{
	width:80px;
	display: inline-block;
	background-color: #c3c3c3;
	font-size:13px;
	color:#fff;
	padding:3px;
	line-height: 1.7;
	
	cursor:pointer;
	text-align:center;
	
	transition: all .15s ease-in-out;
}
.receive_btn_notok:hover, .receive_btn_notok:focus
{
	background-color: #b2b2b2;
}
.receive_btn_md
{
	width:100px;
	font-size:15px;
}

.currency_block
{
	font-size:12px;
	display:none;
	position:fixed;
	top:5%;
	left:calc( 50% - 50px );
	z-index:9999999;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
	background-color:#fff4e1;
	border:1px solid #f9dfb3;
	min-width:50px;
	text-align:center;
	padding:5px;
	color:#624410;
	
	letter-spacing:2px;
}
.message_list_page
{
	display: flex;
	flex-wrap: wrap;
	
	justify-content: center;
    align-items: center;
	padding:20px 10px;
}

.mlp_prev, .mlp_next, .mlp_no
{
	cursor:pointer;
	color:#e6c8c9;
	font-size:12px;
	padding:1px;
	margin:2px;
	border:1px solid #e6c8c9;
}
.mlp_have_data
{
	transition: all .15s ease-in-out;
}
.mlp_have_data:hover, .mlp_have_data:focus, .mlp_active
{
	color:#fff;
	background-color:#e6c8c9;
}
.mlp_no_data
{
	color:#f6f6f6;
	border:1px solid #f6f6f6;
}
.mlp_no
{
	padding:1px 5px;
}

.is_hidden
{
	display:none;
}
/*-----------簽到表 start---------------*/
.modal-content_modify_v1
{
	border-width:0px;
}
.modal-header_modify_v1
{
	border-width:0px;
	padding:0px;
	min-height:30px;
	background-color:#eccfd0;
	
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.modal-header_modify_v1 .close
{
	font-size:30px;
	margin-top:-23px !important;
	margin-right:5px;
	outline:none;
}
.modal-body_modify_v1
{
	padding:0px;
}
.push_con_header
{
	position:relative;
	
	background: #dfc2c3;

	
	height:100px;
	overflow:hidden;
}
.push_con_fonts
{
	color:#b89c9d;
	text-align:center;
	font-size:23px;
	padding-top:10px;
	padding-bottom:5px;
	
	z-index:10;
}
.push_con_sblock
{
	width:120px;
	font-size:14px;
	text-align:center;
	border-radius:20px;
	padding:5px;
	margin:0 auto;
	background-color:#b89c9d;
	color:#fff;
	
	z-index:10;
	letter-spacing:2px;
}

.img_block
{
	position:absolute;
	top:20px;
	right:10px;
	
	-moz-transform:rotate(30deg);
	  -webkit-transform:rotate(30deg);
	  -o-transform:rotate(30deg);
	  -ms-transform:rotate(30deg);
	  transform:rotate(30deg);
}
.img_block1
{
	position:absolute;
	top:-10%;
	right:10%;
	
	-moz-transform:rotate(180deg);
	  -webkit-transform:rotate(180deg);
	  -o-transform:rotate(180deg);
	  -ms-transform:rotate(180deg);
	  transform:rotate(180deg);
}
.img_block2
{
	position:absolute;
	bottom:-11%;
	left:10%;
	
	-moz-transform:rotate(-20deg);
	  -webkit-transform:rotate(-20deg);
	  -o-transform:rotate(-20deg);
	  -ms-transform:rotate(-20deg);
	  transform:rotate(-20deg);
}
.img_block3
{
	position:absolute;
	top:5%;
	left:12%;
	
	-moz-transform:rotate(30deg);
	  -webkit-transform:rotate(30deg);
	  -o-transform:rotate(30deg);
	  -ms-transform:rotate(30deg);
	  transform:rotate(30deg);
}

.push_main_con
{
	display: flex;
	flex-wrap: wrap;
	
	justify-content: center;
    align-items: center;
	padding:20px 10px;
}

.push_main_list
{
	margin:5px;
	border:2px solid #dfc2c3;
	font-size:12px;
	padding:5px;
	padding-top:11px;
	width:60px;
	height:60px;
	border-radius:50%;
	text-align:center;
	
	letter-spacing:1.5px;
}
.push_main_con_fonts
{
	font-size:12px;
	text-align:center;
	
	letter-spacing:1.5px;
}
.pml_is_ok
{
	background-color:#e6c8c9;
	color:#fff;
}

.push_main_conbottom
{
	padding:20px 10px;
}
.pmc_title
{
	font-size:15px;
	color:#cbafb0;
	margin-bottom:10px;
}
.pmc_con
{
	color:#757575;
	font-size:13px;
	letter-spacing:2px;
	line-height:1.5;
}

.pmc_no_login a
{
	color: #cbafb0;
	transition: all .15s ease-in-out;
}
.pmc_no_login a:hover, .pmc_no_login a:focus
{
	color: #DFC2C3;
}
/*-----------簽到表 end---------------*/
/*-------- 20200408 add end-------------*/


.logo4_style
{
	height:55px;
}
@media screen and (max-width: 767px)
{
	.logo4_style
	{
		margin-top:0px !important;
	}
}


.flex_carttitle
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	justify-content: space-between;
    align-items: center;
}

.page_flex
{
	display: flex;
	flex-wrap: wrap;
	
	justify-content: center;
    align-items: center;
}

.hidden_div
{
	display:none;
}

.class-slider-con {
    margin: 0 auto;
    padding: 0 15px;
}

.slick-track {
    display: flex !important;
    justify-content: center; /* 讓內容置中 */
	margin-left:20px !important;
}

.slick-slide {
    text-align: center;
}

.slick-slide div {
    display: inline-block;
	min-width:60px;
}


/* 容器：水平滑動選單 */
.class_menu_v2div {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS 滑動順暢 */
  padding: 10px 0px;
  gap: 10px;
  background: #fff;
  scrollbar-width: none; /* Firefox 隱藏滾動條 */
  -ms-overflow-style: none;  /* IE 隱藏滾動條 */
  
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
}

/* 隱藏滾動條（Chrome / Safari） */
.class_menu_v2div::-webkit-scrollbar {
  display: none;
}

/* 每個選單項目 */
.class_menu_v2div a {
  text-decoration: none;
  flex: 0 0 auto; /* 關鍵：寬度由內容決定，不壓縮 */
}

.class_menu_v2div a div {
  padding: 2px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap; /* 文字不換行 */
  transition: all 0.2s ease;
  min-width: fit-content;
  text-align: center;
}

/* 懸停效果 */
.class_menu_v2div a:hover div {
  background: #e0e0e0;
  transform: translateY(-1px);
}