@charset "utf-8";

/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575px) {
	div.banner {
		background: url(../images/layout/m-bg-page-banner.jpg) 50% bottom no-repeat;
		background-size: cover;
		text-align: center;
	}
	div.banner>img:first-child {
		max-width: 100vw;
		margin-right: 0;
		margin-bottom: 2rem;
	}
	div.banner>img:last-child {max-width: 100vw}
	div.title>h1 {font-size: 3.15rem}
	dl.organizer>dd img {max-width: 80%}
	dl.organizer>dd>dl>dd {text-align: center}
	dl.organizer>dd>dl>dd p {font-size: 1.25rem}
	table.show_info {display: none}
	div.m_show_info {display: block}
	dl.news>dd{border-bottom: #53aca7 1px dashed; border-right: NONE}
	dl.news>dd:last-child {border: none}
	div.troupe {padding: 1.5rem 1rem}
	dl.artist_info {min-height: inherit}
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767px) {
	div.banner {
		background: url(../images/layout/m-bg-page-banner.jpg) 50% top no-repeat;
		background-size: cover;
		text-align: center;
		
	}
	div.banner>img:first-child {max-width: 200px; margin-right: 1rem}
	div.banner>img:last-child {max-width: 300px}
	div.title>h1 {font-size: 3.15rem}
	dl.organizer>dd img {max-width: 80%}
	dl.organizer>dd>dl>dd {text-align: center}
	dl.organizer>dd>dl>dd p {font-size: 1.25rem}
	table.show_info {display: none}
	div.m_show_info {display: block}
	dl.news>dd{border-bottom: #53aca7 1px dashed; border-right: NONE}
	dl.news>dd:last-child {border: none}
	div.troupe {padding: 1.5rem 1rem}
	dl.artist_info {min-height: inherit}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991px) {
	div.a_btn>button {width: 100%; margin-bottom: 1rem}
	dl.artist_info {min-height: 450px}

	div.banner>img:first-child, div.banner>img:last-child {max-width: 100vw}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199px) {
	table.show_info {display: block}
	div.m_show_info {display: none}
	dl.artist>dd>.bsw>.bbox{
		height: 405px;
	}

}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	table.show_info {display: block}
	div.m_show_info {display: none}
}


/*Mobile Phones Portrait*/
@media screen and (max-device-width: 360px) and (orientation: portrait) {
}

/*Mobile Phones Landscape*/
@media screen and (max-device-width: 640px) and (orientation: landscape) {}

/*ios use*/
/*iPhone 4 only Portrait or Landscape 基本上不用太理這支*/
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation: portrait) {
}

@media only screen and (min-device-width: 320px)  and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation: landscape) {
}

/*iPhone 5 Portrait or Landscape*/
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) and (orientation : portrait) {
}

@media (device-height: 320px) and (device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation : landscape) {
}

/*iPhone 6 plus Portrait or Landscape*/
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
	dl.eRecord>dd {max-width: 66%}
}

@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
}

/*iPhone 6 Portrait or Landscape*/
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
}

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
}

/*ipad*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}