/************************/
/* Expansion Grid */
.expansion-grid {
	display: flex;
	flex-wrap: wrap;
    position: relative;
    list-style: none;
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
    /* overflow: hidden; */
	}
.expansion-grid .txt{
	font-size: 15px;
	color: #cf2e2a;
    /* margin-top: 10px; */
    padding: 4px 15px;
    border: 1px solid #cf2e2a;
    border-radius: 40px;
    line-height: 1.6em;
    display: inline-block;
}

.expansion-grid  > li.grid {
	
    position: static;
    float: right;
	width: 28%;
	margin: 2%;
	}
.expansion-grid li.grid:hover {

	}
.expansion-grid li.grid.active {
    border-radius: 0px;
    box-sizing: border-box;
	}
@media only screen and (max-width: 992px) {
	.expansion-grid .txt{
		border-radius: 15px;
	}
}
@media only screen and (max-width: 768px) {
.expansion-grid  > li.grid {
	width: 48%;
	}
}		
@media only screen and (max-width: 480px) {
	
}
/************************/
/* expansion-grid-switch */
.expansion-grid-switch .pic,
.expansion-grid-switch .txt,
.expansion-grid-switch {
	position: relative;
	display: inline-block;
	float: left;
	width: 100%;
	}


.expansion-grid-switch {
    font-size: 16px;
    line-height: 1.6em;
    font-weight: 700;
	font-family: 'Microsoft JhengHei','Microsoft YaHei',Arial, Helvetica, sans-serif;
	text-align: content;
	
	color: #000000;
	border: 0px solid #ffffff;
	/*
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;	
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.4);
	*/
	background: #ffffff;
	}
.expansion-grid-switch a {
	color: #2f2522;
	}

.expansion-grid-switch .pic,
.expansion-grid-switch .txt {
	padding: 15px 0px;
	text-align: center;
	z-index: 4;
	}
.expansion-grid-switch .pic img {
	display: inline-block;	
	width: 100%;
	border-radius: 8px;	
}
.expansion-grid li.grid .expansion-grid-switch span.triangle { 	
    
	display: inline-block;
	width: 20px;
	height: 20px;
	
	vertical-align: text-bottom;
	
	transform: rotate(-90deg);
	background-image: url('../images/triangle.svg');
	background-repeat: no-repeat; 
	background-position: center; 

	background-size: auto 20px;
	-moz-background-size: auto 20px;
	-webkit-background-size: auto 20px;
	-o-background-size: auto 20px;
	z-index: 1;
	}

.expansion-grid li.grid.active .expansion-grid-switch span.triangle {
	transform: rotate(90deg);
} 		

		
.expansion-grid-switch .txt {
	background: #fff;
	/* border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px; */
	}
/* .expansion-grid-switch span:after{
    position: absolute;
    content: '';
	width: 0;
    right: 10px;
    bottom: 10px;
    } */
	
.expansion-grid li.grid.active .txt,
.expansion-grid-switch:hover .txt {
	color: #ffffff;
	background-color: #cf2e2a;
}

.expansion-grid li.grid.active .h-show,
.expansion-grid-switch:hover .h-show{
	color: #cf2e2a;
	background-color: #fff;
}
/************************/
.expansion-grid-reveal {
    position: absolute;
	/*width: 100%;*/
    min-height: 50px;
	display: none;	
	right: 6px;
    left: 6px;
    z-index: 1;
    padding: 30px 40px;
	padding-bottom: 40px;
	margin-top: 280px;	
	/* mmargin-top: 254px;		*/
	/* margin-top: 104px;		*/
	/* margin-bottom: -180px; */
	
    font-size: 18px;
    line-height: 1.6em;
	color: #000000;
	text-align: left;
	background-color: #EEE;
   /* background-color: #f4f4f4;*/
	
    -o-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -webkit-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}
.expansion-grid-reveal .h2 {
	font-weight: 600;
	font-size: 30px;
	padding-bottom: 20px;
	border-bottom: 0px solid #ffffff;
	}
.expansion-grid-reveal .tt,	
.expansion-grid-reveal .b_time,
.expansion-grid-reveal .b_info { 
	position: relative;
	display: inline-block;
	float: left;
	width: 100%;
	}
.expansion-grid-reveal .b_time,
.expansion-grid-reveal .b_info { 
	padding-bottom: 20px;
	}
.expansion-grid-reveal table.bt_01 .top { 
	padding: 10px 5px;
	}	
.expansion-grid-reveal .b_info .top { 
	background-color: #e5e5e5;
	border-top: 1px solid #999b9e;
	border-bottom: 1px solid #999b9e;
	}	

.expansion-grid-reveal .b_time .top { 
	border-bottom: 1px dashed #df0000;
	}

/* .expansion-grid-reveal .b_right .b_info table tr td {
	width: 33.3%;
	line-height: 1.5em;
} */

.expansion-grid-reveal .b_right .b_info table tr td {
	width: 20%;
}

.expansion-grid-reveal .b_right .b_info table tr td:nth-child(1),
.expansion-grid-reveal .b_right .b_info table tr td:nth-child(2) {
	width: 16%;
}

/* .expansion-grid-reveal .b_right .b_info table tr td:last-child {
	width: 28%;
} */

.expansion-grid-reveal .b_info .card-number {
	display: inline-block;
	font-size: 16px;
}



.expansion-grid-reveal .b_time span.triangle { 	
    position: absolute;
	display: inline-block;
	width: 20px;
	height: 20px;
	top: 49%;
	right: 18%;
	background-image: url('../images/triangle.svg');
	background-repeat: no-repeat; 
	background-position: center; 

	background-size: auto 20px;
	-moz-background-size: auto 20px;
	-webkit-background-size: auto 20px;
	-o-background-size: auto 20px;
	z-index: 1;
	}
	
.expansion-grid-reveal .b_time .top span {
	position: relative;
	display: block;
	left: 49%;
	bottom: -15px;
	width: 10px;
	height: 10px;
	border-radius: 20px;
	background: #e81735;
	z-index: 1;
	}
	
.expansion-grid-reveal .tt {
	margin: 10px 0px;
	padding: 0px 10px;
	
	font-size: 20px;
	font-weight: 600;
	border-left: 5px solid #cf2e2a;
	}

.expansion-grid .active .expansion-grid-reveal{
    z-index: 5;
    display: inline-block;
}

@media screen and (max-width: 992px) {
.expansion-grid-reveal {
	margin-top: 90px;
	margin-bottom: 0px;
	}
.expansion-grid-reveal .b_time span.triangle { 
	right: 8%;	
	}
}
@media only screen and (max-width: 768px) {
.expansion-grid-reveal {
	margin-top: 90px;
	margin-bottom: 0px;
	}
.expansion-grid-reveal .h3,
.expansion-grid-reveal .h2 {
	text-align: center;
	width: 100%;
	}
}		
@media only screen and (max-width: 640px) {
.expansion-grid-reveal {
	margin-top: 90px;
	margin-bottom: 0px;
	}

}		
@media only screen and (max-width: 480px) {
	.expansion-grid-reveal {
		padding: 30px 10px;
		margin-top: 90px;
		margin-bottom: 0px;
		font-size: 16px;
	}
	.expansion-grid-reveal .b_time span.triangle { 
		top: 40%;
		right: -2%;	
	}	
	.expansion-grid-reveal .h2 {
		font-size: 24px;
	}
	.expansion-grid-reveal .h3 {
		font-size: 20px;
	}
	.expansion-grid-reveal .number-wrap .card-number{
		font-size: 15px;
	}
}

/************************/
.expansion-grid-reveal button.close{
    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    width: 20px;
    height: 20px;
    background-color: transparent;
    outline: none;
    cursor: pointer;
}
.expansion-grid-reveal button.close:before,
.expansion-grid-reveal button.close:after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    margin: auto;
    background-color: #000000;
}
.expansion-grid-reveal button.close:before{
    -ms-transform: rotate( 45deg );
    -webkit-transform: rotate( 45deg );
    transform: rotate( 45deg );
}
.expansion-grid-reveal button.close:after{
    -ms-transform: rotate( -45deg );
    -webkit-transform: rotate( -45deg );
    transform: rotate( -45deg );
}