@charset "utf-8";
*{margin: 0;padding: 0}
*:focus { outline: none; }/*黃框消除*/
*{-webkit-text-size-adjust:none;}/*字體尺寸限制解除*/
a{text-decoration:none;cursor: pointer}
img {border:0px;} /*圖片超連結邊框消除*/
i{font-style: normal;}
em{font-style: normal;}
li{ list-style:none;display:inline-block;}
html { margin: 0; padding: 0; height: 100%; }
.boxfly{position: absolute; left:-9999em; top:-9999em;}
.fred{color:#cf1a2b; font-weight:bold;}
.fgold{color:#fea100; font-weight:bold;}
.fgray{color: #666;}
.fpur{ color:#8232a4;}
.pc_version_non{ display:none;}	
.bg01{ background:#5d5147;}
.bg02{ background:#aeaeae;}
.bg03{ background:#db8888;}

/*▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ 電腦版 ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒*/

body {	margin: 0px; padding: 0; width: 100%; height: 100%;	font-family: Century Gothic,"微軟正黑體";}
.copyR{ background:#000; color:#fff; text-align:center; font-size:90%; padding:5px 0; width:100%; float:left; margin-top:20px;}


/**/
.wrapper{ display:block; width:960px; margin:0 auto;}
#gotop {display: none;    position: fixed;    padding: 10px 15px;cursor: pointer;margin: 50px 0px 0px 580px;left: 50%;z-index: 9;   bottom: 0px;}


#eventnote{font-size: 1%; color: #194728;}
.event_note{ width:100%; margin: 1% 0 0 0 ; font-size:15px; line-height:24px; color:#fff; text-align: left; float:left;    padding:0;  box-sizing: border-box; letter-spacing: 0.1em; margin-bottom: 2%;    background: #5253f9; padding-bottom: 2%;    border-radius: 50px 50px 0 0;}


/*活動*/

.event_note01  .gift01{
    background: url(../images/gift01.png) 100% bottom no-repeat;
    width: 1076px;
    height: 743px
}

.event_note01  .gift01 img{
    display: none;
}


.event_note01 {
    width: 100%;
    margin: 0 0 0 0;
    font-size: 15px;
    line-height: 24px;
    color: #fff;
    text-align: left;
    float: left;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 0.1em;
    margin-bottom: 2%;
    background: #006665;
    padding-bottom: 2%;
    padding: 1% 3% 3% 3%;
	}
	
.event_note01 > ul li img {	width: 100%;}
	
.event_note01 > ul li {
	
	float: left;
	display: block;
    width: 100%;
	
	}


/*▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ 手機版 ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒*/


@media screen and (max-width: 750px){
#kuai3header{ width:100% !important; margin: 0px auto; z-index:9999; position:fixed;}
#kuai3header .words{ width:100% !important;}
#kuai3header .words .font{ display:none !important;}
.pc_version_non{ display:block;}	
body {	margin: 0px; padding: 0; width: 100%; height: 100%; background-image: none;  }
.copyR{ padding-bottom: 55px; margin-top: 3%; font-size: 80%;}

.wrapper{ display:block; width:100%; margin:0 auto;}


	
/*主標品*/


	
/*M版本((下方))按鈕*/
.fix_btn{ display:block; width:100%; height:50px; position:fixed; bottom:0; z-index:88; clear:both; box-shadow:1px 5px 10px 5px #0b3159;}
.fix_btn .btn1{ width: 54%;  height: 45px; float: left; background-color: #000;  text-align: center;  box-sizing: border-box;  font-size: 15px; color: #fff; padding-top: 5px; border-radius: 2px;  margin-right: 1px;  margin-left: 2px; box-shadow: 0px 1px 5px 0px #6c6c6c; line-height: 30px; border:2px solid #ccc;}
.fix_btn .btn2{ width: 15%; background-color: #555; color: #fff; }
.fix_btn .btn3{ width: 27%;  background-color: #006abe; color: #fff; }
.fix_btn .btnbox{ height: 45px; float: left;  text-align: center;  box-sizing: border-box;  font-size: 100%; padding-top: 5px; border-radius: 2px;  margin-right: 1px;  margin-left: 2px; box-shadow: 0px 1px 5px 0px #0b3159; line-height: 35px;}

	
.event_note > p{margin-left:11%;text-indent: -10%; font-size:100%;}
.event_note > b{ padding: 3%; margin-bottom: 3%;}	
.event_note > b > span{ font-size: 180%; letter-spacing: 0; }	
.event_note > ul li{ margin-left: 11%;}
.event_note span {width:100%; height:auto; background:none;}
.event_note span > a{ width:100%; height: auto; display: block; margin: 5% 0; }
.event_note span > img{ width:100%; display: block;}
	
	
.event_note01 {
    width: 100%;
    margin: 0 0 0 0;
    font-size: 15px;
    line-height: 24px;
    color: #fff;
    text-align: left;
    float: left;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 0.1em;
    margin-bottom: 2%;
    background: #006665;
    padding-bottom: 2%;
    padding: 2% 2% 2% 2%;
}

.event_note01 > ul li img {	width: 100%;	}
	
.event_note01 > ul li {
	
    list-style: none;
    display: inline-block;	
	}
	
}


/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 排品區 ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/

.list_M{width:100%; float: left; padding: 0.5%; margin-bottom: 25px;  position:relative; display:block; box-sizing: border-box; padding-top:0.5%;}

.list_M02{width:100%; float: left;  margin-bottom: 0px;  position:relative; display:block; box-sizing: border-box;}

.list_M .box{ display:inline-block; width:100%; padding:10px 5px 5px 5px; }

/*強打2品*/
.list_M .hotpro_wrapper { width:100%; height:auto; margin:0 auto; display:block; position:relative;overflow:hidden;}
.list_M .hotprobox{width:48%;height:180px;float:left;margin:0.5% 1%;background-color:#fff;position:relative;}
.list_M .hotprobox a{
    display: flex;
    flex-wrap: nowrap;
    position: relative;
}
.list_M .hotpro_pic { display: block;  width: 180px; height: 180px;  overflow: hidden; float: left; /*margin: 6px 4% 9px 1%;*/ text-align: center;position: relative;}

.list_M .hotpro_pic img { max-width:100%; /*object-fit: contain;*/}

.list_M .hotpromain .box_price_2{display:block;text-align:right;width:100%;box-sizing: border-box;position: absolute;bottom: 0;left: 0;}
.list_M .hotpromain .box_price_2 strong{display: block;font-size: 32px;overflow: hidden;padding: 0 5px 10px;}
.list_M .hotpromain .box_price_2 strong i{ font-size:13px; letter-spacing:0; font-style:normal; }
.list_M .hotpromain .box_price_2 strong i:after{ content: "NT$"; }
.list_M .hotpromain li .box_price_2 strong em{ display: block; font-size: 10px; position: absolute; bottom: 6px; left: 81px; color: #8d8d8d; font-weight: lighter; text-decoration: line-through; letter-spacing: 1px; font-style: normal;}
.list_M .hotpromain .box_price_2 .icon_pro_2{display: block;background: url(../images/label.png) 0 0 no-repeat;width: 70px;height: 40px;z-index: 5;font-size: 22px;box-sizing: border-box;color: #fff;line-height: 40px;text-align:center;padding-right: 7px;position: absolute;bottom: 10px;left: 0;}

.list_M .hotproboxL .icon_number{ display:block; background:url(../images/label_2.png) 0 0 no-repeat; width:141px; height:45px; position:absolute;  bottom: 14px; left: 0px; font-size:15px; }
.list_M .hotproboxR .icon_number{ display:block; background:url(../images/icon_last_num.png) 0 0 no-repeat; width:141px; height:45px; position:absolute;  bottom: 14px; left: 0px; font-size:15px; }
.list_M .icon_number span{  font-size: 2em; line-height: 45px; font-weight: bolder; padding-left: 7px; padding-right: 7px; color:#b80000;}


/*文字區*/
.list_M .hotpromain {width: calc(100% - 180px);/*height:230px;float:left;*/overflow:hidden;background: #e5e5e5;position: relative;}
/*.list_M .hotpromain .hotpro_sale{ width: 89%; height: 23px; font-size: 16px; color: #F00; line-height: 24px;text-align: left; overflow: hidden; display: block; margin-bottom: 5px;}*/
.list_M .hotpromain .hotpro_name{display: flex;width: calc(100% - 10px);max-width: 100%;height: 72px;font-size: 18px;color: #000;background-color: #e5e5e5;text-align:center;align-items: center;justify-content: center;overflow: hidden;padding: 0 5px;}
.list_M .hotpromain .h4{width: calc(100% - 20px);max-width: 100%;font-size: 18px;font-weight: bold;color: #c00012;background-color: #e5e5e5;text-align: center;overflow: hidden;display: -webkit-box;text-overflow : ellipsis;-webkit-line-clamp: 2; /*6行*/-webkit-box-orient: vertical;padding: 0 10px;}

.list_M .hotpromain .hotpro_price1{width: 32%; height: 20px;font-size: 14px;color: #999;line-height: 1.1em;text-align:left;overflow: hidden;display: block; float:left; margin-top:20px; text-decoration:line-through;}
.list_M .hotpromain .hotpro_price2{width: 65%; height: 30px;font-size: 0.8em;color: #e60012;line-height: 1.1em; text-align:right;overflow: hidden;display: block; float:left; margin:4px 0 2px 0;}
.list_M .hotpromain .hotpro_price2 span{font-size: 250%; line-height: 1.1em; font-weight:bold; margin-left:2px;}
.list_M .hotpromain .hotpro_price3{width: 65%; height: 30px;font-size: 1.9em;color: #8232a4;line-height: 1.1em; text-align:right;overflow: hidden;display: block; float:left; margin:4px 0 2px 0; font-weight: bold;}


/*商品區塊*/
.list_M .list_special{width:100%;float: left;text-align: center; padding:0.3% 0 0 1%; display:block; }
.list_M .list_special_three{width:100%;float: left;text-align: center; padding:0.3% 0 0 1%; display:block; }
.list_M .list_special ul li{ width: 24%;position:relative; text-align: center; margin:0 8px 8px 0;  background: #FFF; float:left; box-sizing: border-box;-moz-border-radius: 5px; /*-webkit-border-radius: 5px;*/ list-style: none; transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s;}
.list_M .list_special_three ul li{ width: 32%;position:relative; text-align: center; margin:0 8px 8px 0;  background: #FFF; float:left; box-sizing: border-box;-moz-border-radius: 5px; /*-webkit-border-radius: 5px;*/ list-style: none; transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s;}
.list_M .list_special .item_img{width: 98%; margin:1% 1% 10px 1%; background:#fff;}
.list_M .list_special_three .item_img{width: 98%; margin:1% 1% 10px 1%; background:#fff;}
.list_M .list_special .item_img img{ width: 220px; height: 220px;  margin: 0px auto; display: block; object-fit: contain}
.list_M .list_special_three .item_img img{ width: 220px; height: 220px;  margin: 0px auto; display: block; object-fit: contain}
.list_M .list_special ul li .icon_02{ display:block; z-index:10; background:url(../images/tag02.png) 0 0 no-repeat; width:61px; height:106px; position:absolute; top: -5px; left: 11px;}
.list_M .list_special_three ul li .icon_02{ display:block; z-index:10; background:url(../images/tag02.png) 0 0 no-repeat; width:61px; height:106px; position:absolute; top: -5px; left: 11px;}
.list_M .list_special h4 {font-size: 18px; color:#c00012; line-height:30px; overflow:hidden; height:30px; width:100%; box-sizing:border-box; display: block; float: left; padding:0 5px;}
.list_M .list_special_three h4 {font-size: 18px; color:#c00012; line-height:40px; overflow:hidden; height:40px; width:100%; box-sizing:border-box; display: block; float: left; padding:0 5px;}
.list_M .list_special storg{ display:flex; font-size: 18px; height: 60px; overflow: hidden; color: #000; padding:0px 5px; background:#e5e5e5; align-items: center; justify-content: center;}
.list_M .list_special_three storg{ display:flex; font-size: 18px; height: 60px; overflow: hidden; color: #000; padding:0px 5px; background:#e5e5e5; align-items: center; justify-content: center;}
.list_M .list_special .item_topic{ display:flex; width: 100%; height: 60px; max-width: 100%; background-color: #e5e5e5; align-items: center; justify-content: center; color: #000; font-size: 18px; /*padding: 0px 5px;*/}
.list_M .list_special_three .item_topic{ display:flex; width: 100%; height: 60px; max-width: 100%; background-color: #e5e5e5; align-items: center; justify-content: center; color: #000; font-size: 18px; }
.list_M .list_special p{width: 100%; /*padding: 3px 0 3px 0;*/ display:block; /*font-size: 15px;*/ line-height: 30px; /*padding-top:5px;*/ float:left;}
.list_M .list_special_three p{width: 100%; display:block; line-height: 30px; float:left;}
.list_M .list_special .item_text05 { line-height:20px;}
.list_M .list_special_three .item_text05 { line-height:20px;}
.list_M .list_special .item_text05 span{font-size: 25px;}
.list_M .list_special_three .item_text05 span{font-size: 25px;}

/*熱銷排行榜 價格區塊*/
.list_M .list_special .box_price{ display:block; text-align:right; width:100%; position:relative; box-sizing: border-box; padding: 0 3px 0 0;}
.list_M .list_special_three .box_price{ display:block; text-align:right; width:100%; position:relative; box-sizing: border-box; padding: 0 6px 0 0;}
.list_M .list_special .box_price strong{  display: block; font-size: 32px; height: 60px;  /*text-align: left;*/  line-height: 60px;  /*padding-right: 55px;*/ /*padding-left: 50%;*/  overflow: hidden;}
.list_M .list_special_three .box_price strong{  display: block; font-size: 32px; height: 60px;  line-height: 60px;  overflow: hidden;}
.list_M .list_special .box_price strong i{ font-size:13px; letter-spacing:0; font-style:normal; }
.list_M .list_special_three .box_price strong i{ font-size:13px; letter-spacing:0; font-style:normal; }
.list_M .list_special .box_price strong i:after{ content: "NT$"; }
.list_M .list_special_three .box_price strong i:after{ content: "NT$"; }


.list_M .list_special li .box_price strong em{ display: block; font-size: 10px; position: absolute; bottom: 6px; left: 81px; color: #8d8d8d; font-weight: lighter; text-decoration: line-through; letter-spacing: 1px; font-style: normal;}
.list_M .list_special_three li .box_price strong em{ display: block; font-size: 10px; position: absolute; bottom: 6px; left: 81px; color: #8d8d8d; font-weight: lighter; text-decoration: line-through; letter-spacing: 1px; font-style: normal;}
.list_M .list_special .box_price .icon_pro{ display: block;  background: url(../images/label.png) 0 0 no-repeat; width: 70px; height: 40px; position: absolute;  z-index: 5; font-size: 22px;  box-sizing: border-box; color: #fff; line-height: 40px; bottom: 10px; text-align:center;  padding-right: 7px;}
.list_M .list_special_three .box_price .icon_pro{ display: block;  background: url(../images/label.png) 0 0 no-repeat; width: 70px; height: 40px; position: absolute;  z-index: 5; font-size: 22px;  box-sizing: border-box; color: #fff; line-height: 40px; bottom: 10px; text-align:center;  padding-right: 7px;}
.list_M .list_special .box_price .icon_pro span{ font-size:28px;}
.list_M .list_special_three .box_price .icon_pro span{ font-size:28px;}

.list_M .list_special ul li:hover{ box-shadow: 0px 0px 3px 3px rgba(150,93,12,0.8); transform: translateY(0.2em);}
.list_M .list_special_three ul li:hover{ box-shadow: 0px 0px 3px 3px rgba(150,93,12,0.8); transform: translateY(0.2em);}
.list_M .list_special ul li:hover .box_price strong:before{box-shadow:none; background:#cb390c; color:#fff7bd; transform: translateY(0.2em);}
.list_M .list_special_three ul li:hover .box_price strong:before{box-shadow:none; background:#cb390c; color:#fff7bd; transform: translateY(0.2em);}
.list_M .list_special ul li:hover storg { background: #154cc9; color:#FFF;}
.list_M .list_special_three ul li:hover storg { background: #154cc9; color:#FFF;}




/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 排品區02((2大4小)) 手機版 ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/
@media screen and (max-width: 750px){
    .list_M02 img{
    width: 100%;
}    
/*強打2品*/
.list_M{width:100%; float: left; padding:0; position:relative; display:block;}
.list_M .hotpro_wrapper { width:98%; height:auto; display:block; position:relative; overflow:hidden; margin:3% 5px -2% 5px;}
.list_M .hotproboxL{ width:97%; height:204px; float:left; background-color:#fff; margin:0 auto 0 1%;}
.list_M .hotproboxR{ width:97%; height:204px; float:left; background-color:#fff;border-radius:5px; margin:2% 1%;}
.list_M .hotpro_pic {width: 50%;height: 190px;overflow: hidden;display: block;float: left; margin: 6px;}
.list_M .hotpro_pic img {max-width: 100%;}
.list_M .hotprobox{
    width: 98%;
    height: auto;
}
.list_M .list_special_three{padding: 0;}
.list_M .list_special_three >ul{}
.list_M .list_special_three ul li{
    width: calc(100% - 16px);
    float: none;
    margin: 8px auto 0;
}

/*文字區*/
.list_M .hotpro_pic{
    width: 200px;
    height: auto;
}
.list_M .hotpromain {width: calc(100% - 200px);overflow:hidden;}
/*.list_M .hotpromain .hotpro_sale{width: 98%; height: 30px;font-size: 0.8em;color: #F00;line-height: 15px; text-align: left;overflow: hidden;display: block; margin:3% 0 0 0;}*/
.list_M .hotpromain .hotpro_name{color: #333;overflow: hidden;margin: 10px 0;width: calc(100% - 20px);padding: 0 10px;align-self: center;display: flex;}
.list_M .hotpromain .hotpro_info{width: 98%; height: 45px;font-size: 12px;color: #7e7e7e;line-height: 15px;overflow: hidden;display: none; margin:0;}
.list_M .hotpromain .hotpro_price1{ display:none;}
.list_M .hotpromain .hotpro_price2{width: 100%; height: auto;font-size: 13px;color: #C71F5C;line-height: 1em; overflow: hidden;display: block; float:left; margin-bottom:5px;}
.list_M .hotpromain .hotpro_price2 span{font-size: 2.3em;color: #C71F5C;line-height: 30px; font-weight:bold; margin-left:2px; display: inline-block;}
.list_M .hotpromain .hotpro_price3{ width: 100%;height: auto; }

	
/*活動*/
	
	
.event_note01  .gift01 {
	background: none;
    width: 100%;
	height: auto;

	margin: 0 0 5px 0;
}
	
.event_note01  .gift01 img{
    display: block;
	width: 100%;
}
	

/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 新增影片＆商品區 ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/
@media screen and (max-width: 750px){
.notebox01{ border:5px solid #ccbaff; }
.movie1 { width: 100%;}
.notebox01 ul{width: 100%; }	
.notebox01 ul li:nth-child(1) {width: 100%;left: 0px;}
.notebox01 ul li img {width: 100%;display: block;}
	
	
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 燦坤綁定禮 ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/


/*商品區塊*/
.list_M .list_special{ margin-bottom: 0; box-sizing: border-box; padding-bottom: 1%; }
.list_M .list_special ul li{ width: 48%;  position: relative; text-align: center;  margin: 5px 3px; background: #FFF;  float: left;  box-sizing: border-box; transition: none;}
.list_M .list_special .item_img{width: 98%; margin:1% 1% 0 1%; background:#fff;}
.list_M .list_special .item_img img{ width: 120px; height: 120px;  margin: 5px auto; display: block;}
.list_M .list_special .box_price .icon_pro{bottom: 10px;}
.list_M .list_special .box_price strong:before{display: block;  width: 90%; height: 26px; float: none;  border-radius: 58px; color: white; font-size: 16px; text-align: center; line-height: 28px; letter-spacing: 1px;    bottom: -77px; }
.list_M .list_special .box_price strong{  position: static;  margin-top: 0;  padding-right: 0; text-align: right;  float: left; width: 100%;  line-height: 60px;  overflow: visible; padding-left: 0;}
.list_M .list_special .box_price strong i{ width: 100%; }
.list_M .list_special li .box_price strong em{ width: 100%; right: 0;  height: 15px; position: static; margin-bottom: 2%; line-height: 20px;}
.list_M .list_special h4 {font-size: 13px; font-weight: normal; float: none;}
.list_M .list_special .box_price{overflow: hidden;}
	
}
}
@media screen and (max-width: 480px){
    .list_M .hotpro_pic{
    width: 120px;
    align-items: center;
    display: flex;
}
    .list_M .hotpromain{
    width: calc(100% - 120px);
    padding-bottom: 70px;
}
.list_M .list_special .box_price strong{font-size: 25px;}
}