/* CSS Document */
.navbar-inverse {
	/* background-color: #992cde; */
	background-color: var(--main_color);
	border-color: var(--main_color);
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
	color: #fff;
	background-color: var(--main_color);
}

.navbar-fixed-top{    -webkit-box-shadow: 0px 7px 7px 0px rgba(0,0,0,0.4);     -moz-box-shadow: 0px 7px 7px 0px rgba(0,0,0,0.4);     box-shadow: 0px 7px 7px 0px rgba(0,0,0,0.4); z-index: 10001;}
.header_logo img{     width: 100% !important; max-height:62px  !important;}	
.table01{ background:#333;}
.table01 tr{ background:#ffffff;}
.table01 tr:first-child{ background:#dfdfdf;}
.table01 td:first-child{ display:none;}
.table01 td{ padding-right:5px;}

.footer .three_img{ display:block;}
.footer .three_img a{ width:33.333333%; float:left; }
.starter-template{ /*padding-top:80px;*/ text-align:center;overflow: hidden;}
.btn-purple{ background:var(--main_color); color:#FFF; padding:10px; font-size:20px;}
.btn-purple:hover{ background:var(--main_color); color:#FFF;}

.finished_show_div h2{ cursor:pointer; line-height: 1.6; padding: 0 15px;}
.blur{filter:blur(5px);}
.zipcode
{
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  margin-top:10px;
}


.countdown_div span#countdown .countdown-row{  display: flex; flex-wrap:wrap; }
.countdown_div span#countdown .countdown-row .countdown-section{ width:25% !important;}
.error{ color:#F00;}
.footer{ text-align:center; padding-bottom:50px; margin-top:30px; padding:0; }
.footer .footer_info{ color: #fff; font-size: 16px; text-align: center; padding: 15px;}
.footer img{ margin-top:15px;}
.color01{ color:#ff0000;}
.color02{ color:blue;}
#captcha_img_div img{ width:150px; margin-bottom:10px;}

.sell_div {/*background-color: #ffffff;  padding: 1em;  margin:20px 0 15px 0;   border:2px solid #dfdfdf;*/ /*box-shadow: 0px 0px 5px #686765;*/}
.sell_div form{border:1px solid var(--main_color); padding: 25px; margin: 15px 0;}
.sell_div h2{color:var(--main_color); font-size:28px;}
.sell_div h2:before{content:""; float:left; display:block; width:30px; height:30px; border-radius: 50%;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;   margin-right:10px;background:url(../images/front/header_icon01.png) center  no-repeat var(--main_color); background-size:60%; }
.bmi_div h2{ color:var(--main_color);}
.bmi_div  h2:before{content:""; float:left; display:block; width:30px; height:30px; border-radius: 50%;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;   margin-right:10px;background:url(../images/front/header_icon02.png) center  no-repeat var(--main_color); background-size:60%; }
.bmi_div h3{ color:#006cff;}

.order_div h2{ color:var(--main_color); padding:0 15px;}
.order_div h2:before{content:""; float:left; display:block; width:30px; height:30px; border-radius: 50%;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;   margin-right:10px;background:url(../images/front/header_icon03.png) center  no-repeat var(--main_color); background-size:60%; }
.order_div h3{padding:0 15px;}

.attention_div{ font-size:16px;padding:0 15px;}
.order_line_div{ margin:15px 0;padding:0 15px;}
.order_line_div a{ background: #0acb00; color: #FFF;  padding: 10px;  font-size: 16px; text-align:center;border-radius: 4px; text-decoration:none;    display: flex;  align-items: center;  justify-content: center;}
.order_line_div a i{ display:inline-block; width:30px; height:30px; background:url(../images/front/icon_line_big01.png) center no-repeat; background-size:110%; margin-right:5px;}

.tab_bmi {
  color: #424242;
  background-color: #f5f5f5;
  font-size: 0.85em;
  border: 1px solid var(--main_color);
  border-collapse: collapse;
  width: 100%;
}
.tab_bmi th {
  background-color: var(--main_color);
  color: #000000;
  font-weight: bold;
  padding: 0.2em 0.4em;
  border: 1px solid var(--main_color);
}
.tab_bmi td {
  border: 1px solid var(--main_color);
  padding: 0.2em 0.4em;
}
.tab_bmi tr:hover{ background:#FFF;}
.computing_result{  border: 1px solid #ff4f4f; padding:20px; background:#fad8d8; margin-bottom:15px;}
.computing_result h4{  color: #ff4f4f;}

#privacy_info_div{  margin: 0 auto; margin-top: 15px;  border: 1px solid #ff4f4f; padding:20px; background:#fad8d8; margin-bottom:15px;}


.detail_div{
		-ms-word-break: break-all;
		/* Be VERY careful with this, breaks normal words wh_erever */
		word-break: break-all;
		
		/* Non standard for webkit */
		word-break: break-word;
		
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
		text-align:left;
}
.bmi_lucky_draw .control-label.col-sm-2.color_purple{ text-align:center;}


/*==========================首頁slide show======================*/

.cbp-fwslider {
	position: relative;
	margin: 0 0 10px;
	overflow: hidden;
	padding: 0px 0 30px;
	background:url(/ezfiles/69/1069/img/slide_show_bg.png) repeat-x;	
	height:600px;
}

.cbp-fwslider ul {
	margin: 0;
	padding: 0;
	white-space: nowrap;
	list-style-type: none;
}

.cbp-fwslider ul li {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	transform: translateZ(0);
	float: left;
	display: block;
	margin: 0;
	padding: 0;
}

.cbp-fwslider ul li > a,
.cbp-fwslider ul li > div {
	display: block;
	text-align: center;
	outline: none;
}

.cbp-fwslider ul li > a img {
	border: none;
	display: block;
	margin: 0 auto;
	/*max-width: 75%;*/
}

.cbp-fwslider nav span {
	position: absolute;
	top: 50%;
	width: 50px;
	height: 100px;	
	color: #969696;
	font-size: 50px;
	text-align: center;
	margin-top: -50px;
	line-height: 100px;
	cursor: pointer;
	font-weight: normal;
}

.cbp-fwslider nav span:hover {
	color:var(--main_color);
}

.cbp-fwslider nav span.cbp-fwnext {
	right: 0px;
}

.cbp-fwslider nav span.cbp-fwprev {
	left: 0px;
}

.cbp-fwdots {
	position: absolute;
	bottom: 0px;
	white-space: nowrap;
	text-align: center;
	width: 100%;
}

.cbp-fwdots span {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #ddd;
	margin: 4px;
	border-radius: 50%;
	cursor: pointer;
}

.cbp-fwdots span:hover {
	background: #999;
}

.cbp-fwdots span.cbp-fwcurrent {
	background: var(--main_color);
	box-shadow: 0 0 0 0px var(--main_color);
	-webkit-transition: box-shadow 0.2s ease-in-out;
	-moz-transition: box-shadow 0.2s ease-in-out;
	transition: box-shadow 0.2s ease-in-out;
}

.order_error{ margin-top:20px; font-size:18px; color:#F00; text-align:center; border:1px solid #F00; background:#ffe9ec; padding:10px;}
.facebook_share_btn{ text-decoration:none; background:#3b5998; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFF; font-size:24px; text-align:center; padding:5px 20px; display:inline-block;  }
.facebook_share_btn:hover{background:#97acd7; color:#FFF;text-decoration:none;}
.line_share_btn{ text-decoration:none; background:#00cf2e; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFF; font-size:24px; text-align:center; padding:5px 20px; display:inline-block;  }
.line_share_btn:hover{background:#bee8c7; color:#FFF;text-decoration:none;}
.share_btn{ text-decoration:none;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFF; font-size:24px; text-align:center; padding:5px 20px; display:inline-block;  }
.facebook_message_div{ position:fixed; right:10px; bottom:70px; display:none;}
.btnFb a{ display:inline-block; width:60px; height:60px;}
.close_div span{ display:inline-block; cursor:pointer;}
.remark{
	display: block;

}
.line_share_div .line_share_btn{
	font-size: 30px;
	font-weight: 700;
}
.customize-info{
	padding:0 15px;
}
/*
#btnCart{width: 60px; height: 60px; position: fixed; bottom: 5px; right: 5px; display: block; z-index: 10000;}
#btnFb{width: 60px; height: 60px; position: fixed; bottom: 5px; right: 70px; display: block; z-index: 10000;}
#btnLine{width: 60px; height: 60px; position: fixed; bottom: 5px; right: 135px; display: block; z-index: 10000;}
*/
.navbar-toggle{ margin-top:0; margin-right:0; top:20px; right:10px; position:absolute; z-index: 99;}
.navbar-collapse.in{ 
	margin:0;
    width: calc(100% - 20vw + 1px);
    position: fixed;
    right: 0;
    top: 0;
    max-height: 100vh;
    height: 100vh;
   	background: var(--main_color);
	padding:0;
}
.navbar-collapse.in:before{
	content:'';
	position:fixed;
	width:20vw;
	left:0;
	top:0;
	height:100vh;
	background:rgba(0,0,0,0.5);
}
.navbar-collapse.in .navbar-nav{ margin:0;}
.navbar-collapse .btn_close{ display:none; margin-left: 15px;  margin-top: 15px; margin-bottom:10px;}
.navbar-collapse.in .btn_close{ display:block;}
.order_list_div{ margin-bottom:15px;}

.popup_credit_card { display:none; position: fixed; top: 0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); flex-wrap: wrap; align-items: center; justify-content: center;}
.popup_credit_card.active{ display: flex;}
.popup_credit_card .box{ max-width: 500px; border-radius: 5px; background: rgba(255,255,255,1); text-align: center; padding: 30px;}
.popup_credit_card .box input[type="submit"]{ margin-top: 30px; background: var(--main_color); padding: 10px 40px; border: none; color: #fff; border-radius: 100px;}
.form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline{ padding-top: 0;}
label.radio-inline{ line-height: 20px;}

.form-horizontal .control-label{ padding-top: 5px;}

.step_div{ text-align: center;}
.step_div .outer{ display: inline-flex; flex-wrap:wrap; max-width: 640px; margin: 0 auto;}
.step_div .outer .item{ width: calc(100% / 3); text-align: center; position: relative;}
.step_div .outer .item.active:before{
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 2px;
	background-color: var(--main_color);
}
.step_div .outer .item b{ margin: 15px; display: inline-flex;align-items: center; justify-content: center; border-radius: 100px; width: 100px; height: 100px; background-color: #dfdfdf; color: #000000; text-align: center; padding: 8px 15px; }
.step_div .outer .item.active b{background: var(--main_color); color: #fff; }

.product_name{ text-align: center;}
.product_name h2{ display: inline-block; color: var(--main_color); font-size: 48px; font-weight: 600;}

.half_div{ position: relative;}
.open_div{ display: none; position: absolute; left: 0; bottom: 0; width: 100%; text-align: center;}
.half_div.active{ height: 150px; overflow: hidden;}
.half_div.active .open_div{ display: block;}
.half_div.active .open_div:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height:150px;
	z-index: 1;
	background: rgba(255,255,255,0);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 76%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(76%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 76%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 76%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 76%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 76%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
}


.half_div.active .open_div button#btn_open_div{ width: 30px; height: 15px; z-index: 2; text-align: center; position: relative; border-radius: none; border: none; background: transparent;}
.half_div.active .open_div button#btn_open_div:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 15px;
	border-color: var(--main_color) transparent transparent transparent;

}
.inline-flex{ display: inline-flex; align-items: center;flex-wrap: wrap;}
.inline-flex.vertify_show{ justify-content: space-between;}
#phone{width: 100%;}
.vertify_show #phone{  width: calc(100% - 135px - 170px);}
.btn_phone_vertify{ border-radius: 100px; border: none; background-color: var(--main_color); color: #fff; min-width: 100px;  text-align: center; margin-left: 10px; padding: 3px 10px;}
.input_phone_vertify{ width: 160px; margin-left: 10px;display: inline-block;}
#phone_vertify_random{ display: none;}

.county{ margin-right: 10px;}
.header_logo_div{ text-align: center; position: relative; z-index: 10; padding-top: 20px;}
.header_logo_div .navbar-brand.header_logo{ float: none; display: inline-block; height: auto;}
.header_logo_div .navbar-brand.header_logo img{
	width: auto !important;
  height: 120px !important;
	max-height: 120px !important;
}
.header_img{ height: 450px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 2;}

.add_border{/*border:1px solid var(--main_color); padding: 25px;*/ background: rgba(255,255,255,0.8);  max-width: 1240px; margin: 0 auto; margin-top: -250px;position: relative; z-index: 3;}
.add_space{margin:  0;    display: flex;}
.add_space img{ width: 100%;}

.top_img img{ width: 100%;}
#goods_div input{ margin-right: 5px;}
.detail_div{ padding: 0 15px; line-height: 1.6;display: inline-block; font-size: 15px;  }
.msg_total{ color: var(--main_color); margin-top: 10px;}
.navi_div{
	
	color: #555;
}
.navi_div .nav_ul{
	margin: 0 ;
	padding: 0;
	list-style: none;
	text-align: center;
}
.navi_div .nav_ul li{
 display: inline-block;
 background: none;
}	
.navi_div .nav_ul li a{
	display: inline-block;
	padding: 10px;
}
.navi_div .nav_ul li a:hover{
	text-decoration: none;
}
.float-icon-div{
	position: fixed;
	right: 5px;
	bottom: 0;
	z-index: 10000;
}
.float-icon-div .icon-div{
	display: inline-block;
	width: 60px;
	height: 60px;
}
.float-icon-div .icon-div a{
	display: block;
}
.float-icon-div .icon-div a img{
	width: 100%;
}
.finish-page .header_img{
	height: fit-content;
}
@media (min-width: 1200px)
{
	.container {    width: 1500px; padding-left:0; padding-right:0;}
	.container img{ max-width:100%;}
}
@media (max-width:1500px){
	.container {    width: 100%;}	
}
@media (max-width:1260px){
	.sell_div form{margin: 0 15px;}
}
@media (max-width:1240px){
	.add_border{ /*margin: 0 15px;*/ margin-top: -18vw;}
	.sell_div form{border: none; padding: 0;margin: 0; padding: 15px;}
	
}
@media (max-width:1024px){
	.starter-template img{ width:100%;}
	.footer img{ width:100%;}
	.add_border{ margin-top: -25vw;}
	.header_img{
		height: 48vw;
	}
}
@media (max-width:912px){
	.header_img{
		height: 40vw;
	}
	.add_border{
		margin-top: -15vw;
	}
}
@media (max-width:768px){
	.starter-template{ text-align:center;}
	.footer{ font-size:13px;}
	.header_logo img{    width: 100%;}	
	.header_logo{ margin-left:10px;}
	.sell_div { /*padding: 0.5em;*/   } 
	.add_border{
		margin-top: -25vw;
	}
	.container{ padding-left:0px; padding-right:0px;}
	.navbar .container{ padding-left:5px; padding-right:5px;}
	.form-horizontal .form-group {
   	 margin-right: 0px;
    	margin-left: 0px; 
	}
	.order_div h3{ font-size:20px;}
	.order_list_div{ margin:0 15px; font-size:15px;}
	.footer {  margin-top: 20px;}
	.payway_method{	display: block; margin: 10px 0 !important;}	
	.header_logo_div{	text-align: left;	}
	.header_logo_div .navbar-brand.header_logo img {
    width: auto !important;
    height: 60px !important;
    max-height: 60px !important;
	}
	.header_logo{
		margin-left: 0;
	}
	.inline-flex{
		display: block;
	}
	.navi_div{ position: absolute; right: 15px;    top: 50px;}
	.navi_div .nav_ul li a{
		font-size: 14px;
		padding: 10px 5px;
	}
	.float-icon-div{
		width: 60px;
		bottom: 30px;
	}
}
@media (max-width:750px){
	.vertify_show #phone{ width: 100%;    margin-bottom: 15px;}

}
@media (min-width: 768px) {


.navi_active:before{
	/*content:"";
	position: absolute;   
	top:70px;
	left:25px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: var(--main_color) transparent transparent transparent;*/
	
}
.navi01{ background:url(../images/front/header_icon01.png) center 7px no-repeat; }
.navi02{ background:url(../images/front/header_icon02.png) center 7px no-repeat;}
.navi03{ background:url(../images/front/header_icon03.png) center 7px no-repeat;}
.navi04{ background:url(../images/front/header_icon04.png) center 7px no-repeat;}
.navi05{ background:url(../images/front/header_icon05.png) center 7px no-repeat;}
.navi06{ background:url(../images/front/header_icon06.png) center 7px no-repeat; background-size: 34px auto;}

.nav.navbar-nav .navi01 a{ padding-top:33px; padding-bottom:0px; }
.nav.navbar-nav .navi02 a{ padding-top:33px; padding-bottom:0px; }
.nav.navbar-nav .navi03 a{ padding-top:33px; padding-bottom:0px; }
.nav.navbar-nav .navi04 a{ padding-top:33px; padding-bottom:0px; }
.nav.navbar-nav .navi05 a{ padding-top:33px; padding-bottom:0px; }
.nav.navbar-nav .navi06 a{ padding-top:33px; padding-bottom:0px; }

.nav.navbar-nav  .navi01 a:hover{ background:url(../images/front/header_icon01.png) center 7px no-repeat var(--main_color); }
.nav.navbar-nav  .navi02 a:hover{ background:url(../images/front/header_icon02.png) center 7px no-repeat var(--main_color); }
.nav.navbar-nav  .navi03 a:hover{ background:url(../images/front/header_icon03.png) center 7px no-repeat var(--main_color); }
.nav.navbar-nav  .navi04 a:hover{ background:url(../images/front/header_icon04.png) center 7px no-repeat var(--main_color); }
.nav.navbar-nav  .navi05 a:hover{ background:url(../images/front/header_icon05.png) center 7px no-repeat var(--main_color); }
.nav.navbar-nav  .navi06 a:hover{ background:url(../images/front/header_icon06.png) center 7px no-repeat var(--main_color);background-size: 34px auto; }

#navbar .active.navi_active.navi01 a{background:url(../images/front/header_icon01.png) center 7px no-repeat var(--main_color);}
#navbar .active.navi_active.navi02 a{background:url(../images/front/header_icon02.png) center 7px no-repeat var(--main_color);}
#navbar .active.navi_active.navi03 a{background:url(../images/front/header_icon03.png) center 7px no-repeat var(--main_color);}
#navbar .active.navi_active.navi04 a{background:url(../images/front/header_icon04.png) center 7px no-repeat var(--main_color);}
#navbar .active.navi_active.navi05 a{background:url(../images/front/header_icon05.png) center 7px no-repeat var(--main_color);}
#navbar .active.navi_active.navi06 a{background:url(../images/front/header_icon06.png) center 7px no-repeat var(--main_color);background-size: 34px auto;}


}

@media (max-width: 640px) {
	#is-countdown{ min-width:100% ;}
	.order_list_div{ overflow-x:auto;}
	.order_list_div table{ width:768px;}
	.vertify_show #phone{/*width: calc(100% - 110px );*/}
	.header_logo_div{
		padding-top: 10px;
	}
	.input_phone_vertify {
		/*width: 100%;
		margin-left: 0px;
		margin-top: 15px;*/
	}
	.product_name h2{ font-size: 24px;}
	.detail_div h3{ font-size:17px;}

	.step_div .outer .item b{ font-size: 17px; width: 70px; height: 70px;padding: 8px;}
	#goods_div{ font-size: 16px;}
	.form-horizontal .control-label{ font-size: 16px;}
	.col-sm-10{ font-size: 16px;}
	#privacy_info_div{ font-size: 16px;}
	.add_border{
		border: none;
		padding: 0;
		margin: 0;
		margin-top: -20vw;
	}
	#privacy_info_div{
		margin: 15px 0;
	}
	.header_img{
		/*height: 100px;*/
		height: 40vw;
		background-position: center top;
	}
	.navi_div{
		top: 40px;
	}
}
@media (max-width: 480px) {
	footer .footer_info{ font-size:15px;}
}