@charset "utf-8";
/*-----------------------for both-----------------------*/
.hidden-content {
	display: none;
	max-width: 800px;
}
.btbBrochure {
	background-color: #70351c;
	padding: 15px 70px 15px 30px;
	border-radius: 50px;
	font-size: 25px;
	background-image: url(../images/event/ticket/click.svg);
	background-size: 40px 40px;
	background-position: right 20px center;
	background-repeat: no-repeat;
	line-height: 120%;
}
.btbBrochure:hover {
    background-color: #c8965a;
    background-image: url(../images/event/ticket/click.svg);
	background-size: 40px 40px;
	background-position: right 20px center;
	background-repeat: no-repeat;
}
/*-----------------------evnetTicList-----------------------*/
#evnetTicList li a div {
	margin: 10px 0;
	font-size: 17px;
	color: #333;
}
#evnetTicList li a h5 span, #buyList li h5 span {
	display: inline-block;
	background-color: #fff;
	padding: 5px 15px;
	border-radius: 30px;
	cursor: pointer;
}
#evnetTicList li:first-child a {
	background-image: url(../images/event/ticket/store.svg);
	background-color: #FCE5BE;
	color: #90713E;
}
#evnetTicList li:nth-child(2) a {
	background-image: url(../images/event/ticket/coffee.svg);
	background-color: #FCE3D3;
	color: #C2683A;
}
#evnetTicList li:nth-child(3) a {
	background-image: url(../images/event/ticket/map.svg);
	background-color: #E8D0CC;
	color: #714F42;
}
#evnetTicList li:nth-child(4) a {
	background-image: url(../images/event/ticket/gift.svg);
	background-color: #EBE4E1;
	color: #98766A;
}
#evnetTicList li:nth-child(5) a {
	background-image: url(../images/event/ticket/hourglass.svg);
	background-color: #FAD9DA;
	color: #D16E74;
}
#evnetTicList li:nth-child(6) a {
	background-image: url(../images/event/ticket/discount.svg);
	background-color: #eee;
	color: #333;
}
/*------------------ effectList -----------------*/
.effectList li:first-child {
	background-color: #FDEED0;
	color: #B6871E;
	background-image: url(../images/event/ticket/public.svg);
}
.effectList li:nth-child(2) {
	background-color: #FDECE8;
	color: #EA9A88;
	background-image: url(../images/event/ticket/salse.svg);
}
.effectList li:nth-child(3) {
	background-color: #E0F1F1;
	color: #67C3C1;
	background-image: url(../images/event/ticket/love.svg);
}
.effectList li:last-child {
	background-color: #F8E6F0;
	color: #CC79AE;
	background-image: url(../images/event/ticket/brand.svg);
}
/*------------------ flow -----------------*/
#flow li:first-child {
	background-image: url(../images/event/ticket/flowApply.svg);
}
#flow li:nth-child(2) {
	background-image: url(../images/event/ticket/flowMail.svg);
}
#flow li:nth-child(3) {
	background-image: url(../images/event/ticket/flowBox.svg);
}
#flow li:nth-child(4) {
	background-image: url(../images/event/ticket/flowMap.svg);
}
#flow li:nth-child(5) {
	background-image: url(../images/event/ticket/flowCoffee.svg);
}
#flow li:last-child {
	background-image: url(../images/event/ticket/flowCoin.svg);
}
#flow li.gift1 {
 background-image: url(../images/event/ticket/陶作坊.jpg);
}
#flow li.gift2 {
	background-image: url(../images/event/ticket/stick.jpg);
}
/*------------------ buyflow -----------------*/
#buyflow li:first-child {
	background-image: url(../images/event/ticket/buyTicket.svg);
}
#buyflow li:nth-child(2) {
	background-image: url(../images/event/ticket/buyBox.svg);
}
#buyflow li:nth-child(3) {
	background-image: url(../images/event/ticket/coffee.svg);
}
#buyflow li:last-child {
	background-image: url(../images/event/ticket/gift.svg);
}
#buyflow li.coBrandApply {
	background-image: url(../images/event/ticket/coBrandApply.svg);
}
#buyflow li.coBrandSent {
	background-image: url(../images/event/ticket/coBrandSent.svg);
}
#buyflow li.coBrandBox {
	background-image: url(../images/event/ticket/coBrandBox.svg);
}
#buyflow li.coBrandSale {
	background-image: url(../images/event/ticket/coBrandSale.svg);
}
#buyflow li p.italic {
	font-size: 14px;
}
/*------------------ buyList -----------------*/
#buyList li:first-child {
	background-image: url(../images/event/ticket/coffee.png);
}
#buyList li:nth-child(2) {
	background-image: url(../images/event/ticket/discount.png);
}
#buyList li:nth-child(3) {
	background-image: url(../images/event/ticket/cart.png);
}
#buyList li:nth-child(4) {
	background-image: url(../images/event/ticket/map.png);
}
#buyList li:nth-child(5) {
	background-image: url(../images/event/ticket/ticket.png);
}
#buyList li:last-child {
	background-image: url(../images/event/ticket/bag.png);
}
/*------------------ eventTitle h4 -----------------*/
h4.eventTitle {
	text-align: center;
	position: relative;
}
h4.eventTitle span {
	display: inline-block;
	border-radius: 50px;
	padding: 8px 25px;
	color: #fff;
	font-size: 21px;
	font-weight: normal;
	background-color: #B6871E;
	z-index: 10;
	position: inherit;
}
h4.eventTitle div {
	width: 100%;
	height: 3px;
	background-color: #B6871E;
	position: absolute;
	top: 49%;
	z-index: 0;
}
h4.pink span, h4.pink div {
	background-color: #D16E74;
}
/*-----------------------lightbox-----------------------*/
.lightbox {
	display: none;
	font-family: "Segoe UI", "微軟正黑體", sans-serif;
	border: 5px solid #663C08;
}
p.address, p.tel, p.time, p.url {
	background-image: url(../images/venue.svg);
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: left center;
	padding-left: 24px;
	width: auto;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin: 2px 0;
}
p.tel {
	background-image: url(../images/tel.svg);
}
p.time {
	background-image: url(../images/time.svg);
}
p.url {
	background-image: url(../images/link.svg);
}
/*-----------------------checkbox buttons-----------------------*/
.ck-button li {
    margin-right:3%;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
	width:31%;
}
.ck-button li:last-child {
    margin-right:0;
}
.ck-button li:hover {
    background-color: #c8965a;
    color:#fff;
}
.ck-button li label {
    float:left;
    width:100%;
}
.ck-button li label span {
    text-align:center;
    display:block;
	padding:5px;
}
.ck-button li label input {
    position:absolute;
    left:-20px;
}
.ck-button li input:checked + span {
    background-color: #c8965a;
    color:#fff;
}
/*-----------------------for PC-----------------------*/
@media screen and (min-width:801px) {
.eventLfont {
	font-size: 19px;
}
/*-----------------------evnetTicList-----------------------*/
#evnetTicList {
	overflow: auto;
}
#evnetTicList li {
	width: 32%;
	margin: 0 2% 2% 0;
	float: left;
}
#evnetTicList li:nth-child(3n) {
	margin: 0;
}
#evnetTicList li a {
	display: block;
	padding: 20px 20px 20px 130px;
	border-radius: 100px;
	background-position: left 30px center;
	background-size: 80px 80px;
	background-repeat: no-repeat;
	text-decoration: none;
	transition: all 0.3s ease-out;
}
#evnetTicList li a:hover {
	opacity: 0.8;
	box-shadow: 0 1px 6px rgba(32, 33, 36, 0.4);
	transition: all 0.3s ease-out;
}
/*----------TicMenu------------*/
#TicMenu {
	overflow: auto;
}
#TicMenu li {
	width: 15%;
	float: left;
	text-align: center;
	margin-right: 2%;
}
#TicMenu li:nth-child(6) {
	margin-right: 0;
}
#TicMenu li a {
	display: block;
	background: #eee;
	border-radius: 30px;
	line-height: 40px;
	font-size: 17px;
	color: #333;
	text-decoration: none;
	opacity: 0.5;
}
#TicMenu li.selected a {
	opacity: 1;
	background-color: #663C08;
	color: #fff;
}
#TicMenu li:hover a {
	opacity: 1;
}
/*----------info------------*/
.info {
	overflow: auto;
}
.info li {
	width: 48%;
	float: left;
	margin: 0 4% 2% 0;
	text-align: center;
}
.info li:nth-child(even) {
	margin-right: 0;
}
/*------------------ effectList -----------------*/
.effectList {
	overflow: auto;
}
.effectList li {
	text-align: center;
	float: left;
	width: 23.5%;
	margin: 0 2% 0 0;
	background-position: top 20px center;
	background-repeat: no-repeat;
	background-size: 100px 100px;
	border-radius: 20px;
	padding: 140px 20px 20px 20px;
}
.effectList li h2 {
	margin-bottom: 10px;
}
.effectList li p {
	font-size: 17px;
	color: #333;
}
.effectList li:last-child {
	margin-right: 0;
}
/*-----------------------flow-----------------------*/
#flow {
	overflow: auto;
}
#flow li {
	width: 32%;
	height: 100px;
	margin: 0 2% 4% 0;
	float: left;
	padding-left: 110px;
	background-position: left center;
	background-size: 100px 100px;
	background-repeat: no-repeat;
	position: relative;
	/*垂直致中*/
	display: flex;
	justify-content: center;
	flex-direction: column;
}
#flow li:nth-child(3n) {
	margin: 0;
}
#flow li h2 {
	color: #B6871E;
	margin-bottom: 8px;
	font-weight: normal;
	font-size: 21px;
}
#flow li h4 {
	margin-bottom: 5px;
	font-size: 16px;
}
#flow li span {
	width: 30px;
	height: 30px;
	display: block;
	position: absolute;
	top: 50%;
	right: -15px;
	margin-top: -15px;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../images/event/ticket/arrow.svg);
}
/*-----------------------buyList-----------------------*/
#buyList {
	overflow: auto;
}
#buyList li:nth-child(3n) {
	margin: 0;
}
#buyList li {
	width: 32.6%;
	margin: 0 1% 1% 0;
	float: left;
	height: 180px;
	/*垂直致中*/
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 0 20px 0 140px;
	border-radius: 10px;
	background-position: left 30px center;
	background-size: 80px 80px;
	background-repeat: no-repeat;
	text-decoration: none;
	background-color: #FCE5BE;
}
#buyList li p {
	margin: 10px 0;
}
/*-----------------------buyflow-----------------------*/
#buyflow {
	overflow: auto;
	text-align: center;
}
#buyflow li {
	width: 22%;
	margin: 0 3% 0 0;
	float: left;
	display: block;
	padding-top: 120px;
	background-position: top center;
	background-size: 100px 100px;
	background-repeat: no-repeat;
	position: relative;
}
#buyflow li:last-child {
	margin: 0;
}
#buyflow li h2 {
	color: #B6871E;
	margin-bottom: 8px;
	font-weight: normal;
	font-size: 21px;
}
#buyflow li h2.pink {
	color: #D16E74
}
#buyflow li h2 i {
	font-size: 50px;
}
#buyflow li p {
	font-size: 17px;
}
#buyflow li span {
	width: 30px;
	height: 30px;
	display: block;
	position: absolute;
	top: 50%;
	right: -30px;
	margin-top: -15px;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../images/event/ticket/arrow.svg);
}
/*-----------------------shopList-----------------------*/
#shopList li {
	float: left;
	width: 18.4%;
	margin: 0 2% 2% 0;
	font-size: 14px;
}
#shopList li:nth-child(5n) {
	margin: 0;
}
#shopList li a {
	display: block;
	color: #333;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
	text-decoration: none;
}
#shopList li .left {
	position: relative;
}
#shopList li .left .hoverDesc {
	color: rgba(255,255,255,0);
	background-color: rgba(0, 0, 0, 0);
	background-image: url(../images/zoom.svg);
	background-repeat: no-repeat;
	background-size: 40% auto;
	background-position: center center;
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	transition: all 0.3s ease-out;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}
#shopList li:hover .left .hoverDesc {
	transition: all 0.3s ease-out;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 1;
}
#shopList li h4 {
	font-size: 15px;
	margin: 10px 0 5px 0;
	height: 38px;
	overflow: hidden;
	line-height: 130%;
	color: #70351C;
}
#shopList li:hover {
	box-shadow: 0 1px 6px rgba(32, 33, 36, 0.35);
	transition: all 0.3s ease-out;
}
.shopSearch {
	width: 50%;
	margin: 0 auto;
}
/*-----------------lightbox---------------*/
.lightbox {
	padding: 25px;
}
.lightbox div.lightboxL {
	float: left;
	width: 250px;
}
.lightbox div.lightboxR {
	width: auto;
	margin-left: 270px;
}
}

/*------------------for mobile------------------------*/
@media screen and (max-width:800px) {
/*-----------------------evnetTicList-----------------------*/
#evnetTicList li {
	margin: 0 0 2% 0;
}
#evnetTicList li:last-child {
	margin: 0;
}
#evnetTicList li a {
	display: block;
	padding: 20px 20px 20px 100px;
	border-radius: 10px;
	background-position: left 20px center;
	background-size: 60px 60px;
	background-repeat: no-repeat;
	text-decoration: none;
}
/*----------TicMenu------------*/
#TicMenu {
	overflow: auto;
}
#TicMenu li {
	width: 32%;
	float: left;
	text-align: center;
	margin: 0 2% 2% 0;
}
#TicMenu li:nth-child(3n) {
	margin-right: 0;
}
#TicMenu li:nth-child(1n+4) {
	margin-bottom: 0;
}
#TicMenu li a {
	display: block;
	background: #eee;
	border-radius: 30px;
	line-height: 30px;
	color: #333;
	text-decoration: none;
	opacity: 0.5;
}
#TicMenu li.selected a {
	opacity: 1;
	background-color: #663C08;
	color: #fff;
}
/*------------------ eventTitle h4 -----------------*/
h4.eventTitle span {
	font-size: 19px;
}
/*----------info------------*/
.info li {
	margin-bottom: 20px;
}
/*------------------ effectList -----------------*/
.effectList {
	overflow: auto;
}
.effectList li {
	text-align: center;
	float: left;
	width: 49%;
	margin: 0 2% 2% 0;
	background-position: top 20px center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
	border-radius: 20px;
	padding: 120px 15px 15px 15px;
}
.effectList li h2 {
	margin-bottom: 10px;
}
.effectList li p {
	color: #333;
}
.effectList li:nth-child(even) {
	margin-right: 0;
}
/*------------------ flow -----------------*/
#flow li {
	margin-bottom: 30px;
	min-height: 100px;
	display: block;
	padding-left: 110px;
	background-position: left center;
	background-size: 100px 100px;
	background-repeat: no-repeat;
}
#flow li h2 {
	color: #B6871E;
	margin-bottom: 8px;
	font-weight: normal;
	font-size: 21px;
}
#flow li h4 {
	margin-bottom: 5px;
	font-size: 16px;
}
/*-----------------------buyList-----------------------*/
#buyList li:last-child {
	margin: 0;
}
#buyList li {
	display: block;
	margin-bottom: 10px;
	padding: 15px 15px 15px 100px;
	border-radius: 10px;
	background-position: left 15px center;
	background-size: 60px 60px;
	background-repeat: no-repeat;
	text-decoration: none;
	background-color: #FCE5BE;
}
#buyList li p {
	margin: 10px 0;
}
/*-----------------------buyflow-----------------------*/
#buyflow li {
	display: block;
	margin-bottom: 60px;
	padding-left: 80px;
	background-position: left center;
	background-size: 60px 60px;
	background-repeat: no-repeat;
	position: relative;
}
#buyflow li:last-child {
	margin: 0;
}
#buyflow li h2 {
	color: #B6871E;
	margin-bottom: 8px;
	font-weight: normal;
	font-size: 19px;
}
#buyflow li h2.pink {
	color: #D16E74
}
#buyflow li h2 i {
	font-size: 40px;
}
#buyflow li span {
	width: 30px;
	height: 30px;
	display: block;
	position: absolute;
	left: 50%;
	bottom: -40px;
	margin-left: -15px;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../images/event/ticket/arrowM.svg);
}
/*-----------------------shopList-----------------------*/
#shopList li {
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
	overflow: auto;
}
#shopList li:last-child {
	margin: 0;
}
#shopList li a {
	display: block;
	color: #333;
	text-decoration: none;
}
#shopList li div.left {
	width: 100px;
	float: left;
}
#shopList li div.right {
	width: auto;
	height: 100px;
	margin-left: 110px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
#shopList li h4 {
	margin-bottom: 8px;
	color: #70351C;
}
/*-----------------------lightbox-----------------------*/
.lightbox {
	padding: 15px;
	width: 100%
}
.lightbox div.lightboxL {
	width: 100%;
	margin: 0 auto 15px auto;
}
}