@media screen and (min-width: 768px) {
	.sr-only-lg {
		border: 0 !important;
		clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
		-webkit-clip-path: inset(50%) !important;
			clip-path: inset(50%) !important;  /* 2 */
		height: 1px !important;
		margin: -1px !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: absolute !important;
		width: 1px !important;
		white-space: nowrap !important;            /* 3 */
	}
	.taiwan-anime.finished .mouse {
		opacity: 1;
		transition: opacity 0.6s ease 2.5s;
		display: none;
	}
}
@media screen and (max-width: 1400px) {
	body {
		font-size: 0.875rem;
	}
	.post-img {
		width: 400px;
	}
	.post-title {
		font-size: 23px;
	}
	.taiwan-text {
		max-width: 120px;
	}
	.toptext {
		max-width: 600px;
	}
	.circle-text.t-xlarge {
		font-size: 30px;
	}
	.circle-text {
		width: 110px;
		height: 110px;
	    margin: 0 0.25em 10px 0.25em;
	    border-width: 4px;
	}
	.circle-text-lg {
		width: 120px;
		height: 120px;
	}
	.circle-text-xlg {
		width: 130px;
		height: 130px;
	}
	.bgline::before {
		width: 105%;
	    top: 63px;

	}
}

@media screen and (max-width: 768px) {
	.hide-mid {
		display: none;
	}
	.show-mid {
		display: block;
	}
	.grid-2fr-mid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}
	.toptext {
		padding-right: 4em;
		padding-left: 4em;
	}
	.post {
		flex-direction: column;
	}
	.post .ml-2 {
		margin-left: 0;
	}
	.post-img {
		width: 100%;
		margin-bottom: .5em;
	}
	.post-year {
		display: flex;
		align-items: flex-end;
	}
	.post .mb-3 {
		margin-bottom: 0;
	}
	.post-excerpt {
		max-width: none;
		display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    max-width: 600px;
	}
	.post h6 span {
		margin-left: 0.25em;
	}
	.post-title {
		margin-bottom: 0.25em;
		font-size: 24px;
		line-height: 1.5;
	}
	.circle-text {
		width: 100px;
		height: 100px;
		font-size: 32px;
		margin: 0 0.2em 10px 0.2em;
	}
	.circle-text-lg {
		width: 120px;
		height: 120px;
	}
	.circle-text-xlg {
		width: 120px;
		height: 120px;
	}
	.circle-text.t-large {
		font-size: 30px;
	}
	.circle-text.t-xlarge {
		font-size: 40px;
	}
	.grid-3fr {
		grid-gap: 1em 2em;
	}
	.slick-arrow.slick-prev {
		left: -10px;
		right: auto;
	}
	.slick-arrow.slick-next {
		right: -10px;
		left: auto;
	}

	
}
@media screen and (max-width: 1400px) {
	.slick-arrow.slick-prev {
		left: -40px;
	}
	.slick-arrow.slick-next {
		right: -40px;
	}
}
@media screen and (max-width: 768px) {

	.hide-sm {
		display: none;
	}
	.show-sm {
		display: block;
	}
	.block-sm {
		display: block;
	}
	.show-sm.col {
		display: inline-block;
	}


	.relative-sm {
		position: relative;
	}
	.flex-column-sm {
		flex-direction: column;
	}
	.flex-column-reverse-sm {
		flex-direction: column-reverse;
	}

	.flex-space-sm {
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	.t-xxlarge { font-size: 46px; /* 30px */ }
	.t-large { font-size: 1.444445em; /* 26px */ }
	.t-midlarge { font-size: 1.25em; /* 22px */ }
	.t-mid, .t-mid-sm { font-size: 1.125em; /* 18px */ }
	.t-small { font-size: 0.89em; /* 16px */ }
	.t-xsmall { font-size: 0.72em; /* 14px */ }

	.text-center-sm {
		text-align: center;
	}
	.text-left-sm {
		text-align: left;
	}
	.w100-sm {
		width: 100%;
	}
	.ml-0-sm {
		margin-left: 0;
	}
	.mt-0-sm {
		margin-top: 0;
	}
	.mt-1-sm {
		margin-top: 3em;
	}
	.mb-0-sm {
		margin-bottom: 0;
	}
	.mb-1-sm {
		margin-bottom: 1em;
	}
	.mb-2-sm {
		margin-bottom: 5em;
	}
	.ml-2-sm { margin-left: 2em; }
	.mr-0-sm { margin-right: 0; }
	.pb-2-sm {padding-bottom: 1.5em;}
	.pl-0-sm {
		padding-left: 0;
	}

	.max-w-auto-sm {
		max-width: none;
	}

	.grid-2fr-sm {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-gap: 2em 1em;
	}
	.w100-sm {
		width: 100%;
	}
	#scroll-x-wrap {
		display: blcok;
		overflow-x: hidden;
		overflow-y: auto;
		flex-grow: 1;
		width: 100vw;
	}
	body {
		display: block;
		overflow-x: hidden;
		overflow-y: auto;
		font-size: 1.125rem;
	}
	header {
		min-width: 100vw;
		width: 100vw;

	}
	.header {
	    padding: 2em 2em 1em 2em;
	    height: auto;
	}
	main {
		display: block;
	}
	section {
		min-width: auto;
		width: auto;
		min-height: auto;
		max-width: 100vw;
	}
	.container {
		width: 100%;
		padding: 3em 1em 3em 1em;
		min-height: auto;
	}

	.post {
		display: block;
		width: 100%;
	}
	.post-img {
		max-width: 100%;
		width: 100%;
		padding-top: 70%;
	}
	.img-contain {
		padding-top: 30%;
	}
	.post-slick {
	}
	.post-excerpt {
		-webkit-line-clamp: 4;
		display: none;
	}
	.slick-track {
		display: flex;
		align-items: flex-end;
		max-width: 600vw;
	}
	.slick-arrow {
		position: absolute;
	}
	.slick-arrow::after {
		border-color: #fff;
	}
	.slick-list {
		max-width: 100vw;
		overflow: hidden;
	}
	.slick-arrow.slick-prev {
		left: 5px;
		right: auto;
	}
	.slick-arrow.slick-next {
		right: 6px;
		left: auto;
	}

	.slick-dots {
	    top: -12px;
	    bottom: auto;
	}
	.video-slick .slick-arrow {
		bottom: 0px;
		top: 30px;
		margin: auto;
	}
	.video-slick .slick-dots {
		top: auto;
    	bottom: 0px;
	}

	.navtop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		padding: 16px 2em 4px 1em;
		background: transparent;
		z-index: 999;
		transition: all 0.2s ease;
	}

	#rock-1 {
		background-size: 50% auto;
	}
	#rock-2 {
		display: none;
		background-size: 60% auto;
	}
	.super {
	    max-width: 100px;
	    left: calc(50% - 140px);
	    bottom: 1em;
	}
	.header.detachedHide {
	}
	.header.detached .navtop {
		box-shadow: 0 0 4px rgba(0, 0, 0, .2);
		background: #f8f8f8;
		padding: 3px 2em 0px 1em;
	}
	.header.detached.show {
	}
	#headerlogo {
		padding-top: 12px;
	}

	/*#headerlogo {
		opacity: 1;
		pointer-events: auto;
	}*/

	.ruler {
		display: none;
	    left: auto;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    height: auto;
	    width: 27px;
	    background: url(../img/ruler_verti.png) repeat-y;
	    background-size: 20px auto;
	    background-position: 11px;
	    opacity: 0.15;
	}

	.sectitle {
		letter-spacing: 3px;
		margin-bottom: 1.5em;
	}
	.fixed-title {
		display: none;
	}

	.video-wrap {
		padding-top: 66%;
	}

	
	.taiwan-anime {
		margin-top: 3em;
		margin-bottom: 0;
    	height: 60vh;
    	justify-content: flex-start;
	}
	.taiwan-imgs {
		max-height: 80vh;
		margin-top: 20px;
	}
	.taiwan-text {
		left: 0;
	    top: -3em;
	    right: 0;
	    margin: 0 auto;
	    padding: 7px 8px 5px 10px;
	    max-width: 140px;
	}
	/*.taiwan-anime.finished .taiwan-imgs {
		opacity: 0;
		transition: opacity 0.4s ease 0s;
	}
	.toptext-mobile {
		position: absolute;
		transition: opacity 0.4s ease 0.5s;
		opacity: 0;
		padding: 0;
	}
	.taiwan-anime.finished .toptext-mobile {
		opacity: 1;
	}*/
	.taiwan-anime.finished .mouse {
		opacity: 1;
		transition: opacity 0.4s ease 0s;
	}

	/*.taiwan-anime.finished #tw_shadow { transition-delay: 0s;}*/
	.toptext p {
		line-height: 1.65;
	}
	.ad-tag {
	    opacity: 0.8;
	}
	
}