div.top {
	position: absolute;
    left: 0;
    width: 96%;
    margin: 1% 2% 1% 2%;
    height: 130.7vw;
    border-radius: 3vh;
    border-style: solid;
    border-color: orange;
    border-spacing: 0.3vh;
    border-width: 0.2vh;
}

div#top0 {
	top:0;
}

div#top1 {
	top:133.3vw;
}

div#top2 {
	top:266.6vw;
}

div#top3 {
	top:399.9vw;
}

div#top4 {
	top:533.2vw;
}

div#top5 {
	top:666.5vw;
}

div#acupPic0 {
	background-image:url(../image/acup0.png);
}

div#acupPic1 {
	background-image:url(../image/acup1.png);
}

div#acupPic2 {
	background-image:url(../image/acup2.png);
}

div#acupPic3 {
	background-image:url(../image/acup3.png);
}

div#acupPic4 {
	background-image:url(../image/acup4.png);
}

div#acupPic5 {
	background-image:url(../image/acup5.png);
}

div.acupBg0 {
	background-color:#f8b62c;
}

div.acupBg1 {
	background-color:#70ad46;
}

div.acupBg2 {
	background-color:#ed1e23;
}

div.acupBg3 {
	background-color:#25ade3;
}


div.acupPic {
	position:relative;
	top:1%;
	left:0;
	width:96%;
	height:65%;
	margin:auto;
	margin:top:2%;
/*	background-image:url(../image/%E7%A5%9E%E9%96%80%E7%A9%B4.png);*/
	background-repeat: no-repeat;
	background-size:contain;
	background-position: center;
/*
	border-radius:3vh;
	border-style:solid;
	border-color:orange;
	border-spacing:0.3vh;
	border-width:0.2vh;
*/
}

/*
div#control0{
	border-color:orange;	
}

div#control1{
	border-color:orange;	
}
*/

div.ctrlBlk{
	position:relative;
	top:2%;
	height:32%;
	width:96%;
	margin:auto;
	border-top-style: solid;
    border-color: white;
    border-spacing: 0.3vh;
    border-width: 0.2vh;
/*
	border-radius:3vh;
	border-style:solid;
	border-spacing:0.3vh;
	border-width:0.2vh;
*/
	font-family:arial,sans-serif,"微軟正黑體";
	text-align:center;
}

div.playBtn {
	position:relative;
	width:19.2vh;
	height:19.2vh;
	margin:auto;
	background-image:url(../image/play-button_white.png);
}

div.playBtn.active {
	background-image:url(../image/powerbtn_stop.png);
/*
	animation: breath;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
*/
}

@keyframes breath {
    0%   {
		opacity: 1.0;
		width:19.2vh;
		height:19.2vh;
	}
    100% {
		opacity: 0.5;
		width:18vh;
		filter: blur(0.4vw);
	}
}

div.powerStus {
	position:absolute;
	bottom:0;
	left:25%;
	width:50%;
	height:15%;
	font-size:3vw;
	color:white;
}

.modeMsg,.timerMsg,.muteMsg{
	font-size:3vw;
}

.sideCtrl {
	position:absolute;
	display:block;
	top:50%;
	height:40%;
	width: 30%;
	font-size:4vw;
}

.titleText {
	position:relative;
	color:white;
	font-size:6vw;
	top:5%;
	left:5%;
	text-align:left;
}

.timerDiv {
	left:5%;
	color:white;
/*	background-color:rgba(240,240,255,0.5);*/
}

/*
.timerDiv.active {
	color:red;
}
*/

.modeDiv {
	right:5%;
	color:white;
}

/*
.modeDiv.active {
	color:red;
}
*/

div.modeBtn{
	background-image:url(../image/mode_icon.png);
}

/*
.modeDiv.active div.modeBtn{
	background-image:url(../image/mode_icon_red.png);
}
*/

div.modeBtn,div.muteIcon{
	position:relative;
	margin:auto;
}

div.timerBtn {
	background-image:url(../image/timer_icon.png);
}

/*
.timerDiv.active div.timerBtn {
	background-image:url(../image/timer_icon_red.png);
}
*/

div.timerBtn {
	position:relative;
	margin:auto;
}

div.audioDiv {
	top:10%;
	right:5%;
	color:white;
}
div.audioDiv .muteIcon {
	background-image:url(../image/muteoff.png);
}

div.audioDiv.mute .muteIcon {
	background-image:url(../image/mute.png);
}

div.audioDiv .muteMsg::after {
	content:"提醒開啟";
}

div.audioDiv.mute .muteMsg::after {
	content:"提醒關閉";
}

.ctrlBtn {
	position:absolute;
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center;
}

.ctrlBtn:active {
	opacity:0.5;
}

.ctrlBtn["disabled"="disabled"]:active {
	opacity:1.0;
}

.ctrlMask {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
}

.ctrlMask .closeBtn {
	position:absolute;
	top:2%;
	right:2%;
	width:5vh;
	height:5vh;
	background-image:url(../image/close_white.png);
}

.ctrlMask .ctrlTitle {
	position:absolute;
	top:0;
	left:10%;
	width:80%;
	height:20%;
	border-bottom-style:solid;
	border-bottom-width:0.5vw;
	border-bottom-color:rgba(255,255,255,0.8);
}

.ctrlMask .ctrlBody {
	position:absolute;
	top:20%;
	left:0;
	width:100%;
	height:80%;
}

.ctrlTitle .ctrlIcon {
	position:absolute;
	top:10%;
	left:0;
	width:100%;
	height:80%;
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center;
/*	background-image:url("../image/mode_white.png");	*/
}

/*#top .ctrlBody .cp0.cpContainer .cp-value-block::before{content:"";display:inline-block;width:0;height:100%;vertical-align:middle;}*/