@charset "utf-8";

/* CSS Document */



*{box-sizing: border-box;margin: 0;padding: 0;font-family: 微軟正黑體;}



html{width: 100%;height: auto;}



img{width: 100%;border: none;display: block;}	

	

body{

  width: 100%;

  height: auto;

  position: relative;

  background-repeat:no-repeat;

  background-position:bottom;

}

	

footer{

  width: 100%;

  padding: 20px;

  text-align: center;

  font-size: 12px;

  color: #ffffff;

  background: #000000;

  margin-top: 100px;

}



a {

    text-decoration:none;

}



.alink{

    width: 100%;

    height: 100%;

}



#bgtop1{

    display: block;

    position: absolute;

    z-index: -1;

    width: 100%;

    height: 2500px;

    top: 0;

    background-image: url(../img/bg.png) ;

    /*background-color: #cfebdc;*/

    background-position: center top;

    background-repeat: no-repeat;

    border-top: 0px solid #fff;

}

#bgtop2{

    position: absolute;

    z-index: -45;

    width: 100%;

    height: 100%;

	top:0;

	left: 0;

    background-image: url(../img/background2.jpg);

	background-repeat: repeat-y;

	background-position: center top;

	pointer-events: none;

}





.page-header{

  display: block;

  position: relative;

  width: 100%;

  min-width: 320px;

  height: auto;

  background-size: cover;

  background-position:center center;

}



.page-header-image{

  display: block;

  width: 100%;

  min-width: 325px;

}





.page-header-coverbar{

    display: block;

    position: relative;

    width: 100%;

    height: 120px;

    z-index: 30;

    top: 0px;

    background-color: #fff6f7;

    box-shadow: 0px -3px 3px 0px rgba(255, 213, 211, 0.1);

}

	

.page-header-coverbar-flo{

	display: block;

    position: absolute;

    width: 12%;

    height: auto;

    z-index: 30;

    top: -175%;

    left: 12%;

}



.page-header-coverbar > img{

	position:absolute;

	bottom: -1px;

}



.page-main{

  display: block;

  position: relative;

  width: 100%;

  min-width: 320px;

  min-height: 625px;

  margin: 0px auto;

  margin-bottom: 80px;

}



.title{

	display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    max-width: 850px;

    height: auto;

    margin: 0 auto;

}

	

.shop-list{

	display:block;

	width:100%;

	max-width:1250px;

	height:auto;

	min-height: 150px;

	margin: 0px auto;

	margin-top: 0px;

	background-image: url(../img/title-box_mid.png);

	padding: 10px 0 20px;

    background-position: center bottom;

    background-repeat: repeat-y;

    background-size: contain;

	

}



.shop-list2{

	display:block;

	width:100%;

	max-width:1250px;

	height:auto;

	min-height: 150px;

	margin: 0px auto;

	margin-top: 0px;

	background-image: url(../img/title-box2_mid.png);

	padding: 10px 0 20px;

    background-position: center bottom;

    background-repeat: repeat-y;

    background-size: contain;

	

}



.shop-list3{

	display:block;

	width:100%;

	max-width:1250px;

	height:auto;

	min-height: 150px;

	margin: 0px auto;

	margin-top: 0px;

	background-image: url(../img/title-box3_mid.png);

	padding: 10px 0 20px;

    background-position: center bottom;

    background-repeat: repeat-y;

    background-size: contain;

	

}



.shop-list4{

	display:block;

	width:100%;

	max-width:1250px;

	height:auto;

	min-height: 150px;

	margin: 0px auto;

	margin-top: 0px;

	background-image: url(../img/title-box4_mid.png);

	padding: 10px 0 20px;

    background-position: center bottom;

    background-repeat: repeat-y;

    background-size: contain;	

}



.shop-list5{

	display:block;

	width:100%;

	max-width:1250px;

	height:auto;

	min-height: 150px;

	margin: 0px auto;

	margin-top: 0px;

	background-image: url(../img/title-box5_mid.png);

	padding: 10px 0 20px;

    background-position: center bottom;

    background-repeat: repeat-y;

    background-size: contain;	

}



.shop-list6{

	display:block;

	width:100%;

	max-width:1250px;

	height:auto;

	min-height: 150px;

	margin: 0px auto;

	margin-top: 0px;

	background-image: url(../img/title-box_mid.png);

	padding: 10px 0 20px;

    background-position: center bottom;

    background-repeat: repeat-y;

    background-size: contain;	

}



.shop-list7{

	display:block;

	width:100%;

	max-width:1250px;

	height:auto;

	min-height: 150px;

	margin: 0px auto;

	margin-top: 0px;

	background-image: url(../img/title-box2_mid.png);

	padding: 10px 0 20px;

    background-position: center bottom;

    background-repeat: repeat-y;

    background-size: contain;	

}



.shop-list::after,.shop-list2::after,.shop-list3::after,.shop-list4::after,.shop-list5::after,.shop-list6::after,.shop-list7::after{

	content:" ";

	display:table;

	clear: both;

}

	

.shop-list ul,.shop-list2 ul,.shop-list3 ul,.shop-list4 ul,.shop-list5 ul,.shop-list6 ul,.shop-list7 ul{

	display: block;

	text-align: center;

    padding: 0px 0px 0px 13px;

}

.shop-list li,.shop-list2 li,.shop-list3 li,.shop-list4 li,.shop-list5 li,.shop-list6 li,.shop-list7 li{

    display: inline-block;

    position: relative;

    margin: 0px 10px 15px 0px;

    padding: 19px 12px;

    width: 275px;

    height: auto;

	min-height: 164px;

    list-style: none outside none;

    background: #fff;

	border: 1px solid #e5e5e5;

	vertical-align: top;

	

	

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    -ms-transition: all 0.2s ease;

    -o-transition: all 0.2s ease;

    transition: all 0.2s ease;

}



.shop-list li:hover,.shop-list2 li:hover,.shop-list3 li:hover,.shop-list4 li:hover,.shop-list5 li:hover,.shop-list6 li:hover,.shop-list7 li:hover{

	transform: translateY(-6px);

    box-shadow: 4px 4px 6px -2px #c7c7c773	

}



.shop-list li:hover > .shop_type{

	background:#5386e2;

}



.shop-list2 li:hover > .shop_type{

	background:#5386e2;

}



.shop-list-top {

    display: block;

    position: relative;

    width: 100%;

    max-width: 1250px;

    height: 60px;

    margin: 0px auto;

    padding: 0 10px;

    background-image: url(../img/title-box_mid.png);

	background-color:#FFF;

    background-position: center bottom;

    background-repeat: no-repeat;

    pointer-events: none;

    background-size: contain;

}



.shop-list-bottom {

    display: block;

    position: relative;

    width: 100%;

    max-width: 1250px;

    height: 175px;

    margin: 0px auto;

	margin-top: 0px;

    padding: 0;

    

	background-color:transparent;

    background-position: center top;

    background-repeat: no-repeat;

    pointer-events: none;

    background-size: contain;

}



.shop_img{

	display: flex;

	justify-content: center;

	align-items: center;

	margin: 0;

	width: 100%;

	height: auto;

	overflow: hidden;

}



.shop_img img{

	width: auto;

    height: 75px;

}



.s-tittle{

	display: flex;

    justify-content: center;

    align-items: flex-end;

    width: 100%;

	min-width:325px;

	max-width: 1250px;

    height: auto;

    margin: 10px auto 40px auto;

	margin-bottom: 0;

    background-color: transparent;

    color: #FFF;

	font-weight: 700;

    font-size: 42px;

    border-radius: 22px 22px 0 0;

}





.shop_name{

	display: flex;

    justify-content: center;

    align-items: center;

	

    width: 100%;

	height:40px;

	margin: 1%;

    margin-top: 17px;

    font-size: 17px;

    font-weight: 700;

    text-align: center;

    color: #1F1F1F;

}



.shop_Price	{

	display: block;

    justify-content: center;

    align-items: flex-end;

    width: 100%;

    height: auto;

    margin: 4px 0;

}



.shop_Price > p {

	display: block;

	width: 100%;

    font-size: 22px;

    font-weight: 300;

    text-align: left;

    color: #CCC;

    text-decoration: line-through;	

}



.shop_Price > p2 {

	display: block;

	width: 100%;

	text-align: left;

	font-size: 22px;

	color: #ff003b;

}





/*Animetion*/



#header-float{

	display: block;

    height: auto;

    width: 34.5%;

    position: absolute;

    z-index: 10;

    top: 8%;

    right: 8%;

	animation-name: banner-float;

	animation-duration:2s;

	animation-iteration-count:infinite;

	animation-timing-function:ease-in-out;

	

}





@keyframes banner-float{

	0%{

		top:8%;

	}

	

	50%{

		top:6.9%;

	}

	

	100%{

		top:8%;

	}

}