* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body { font-family: "STHeitiTC-Light", "Helvetica", "Helvetica Neue", "PingFang TC", "PingFangTC-Regular", "Microsoft JhengHei", "微軟正黑體", "Arial", sans-serif;
background-color: #64C896; background-image: url(../images/bg.png);
background-repeat: repeat-x;
background-attachment: fixed; margin: 0px; padding: 0px; }
img { border: 0px; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

.headline { height: 120px; }
.headline_phone { height: 50px; }

#navimgf { width:24px; height:24px; background: url(../images/dailly_gui.png) 190px 0px; }
#navimge { width:24px; height:24px; background: url(../images/dailly_gui.png) 190px -25px; }
#navimgt { width:24px; height:24px; background: url(../images/dailly_gui.png) 190px -50px; }
#navimgg { width:24px; height:24px; background: url(../images/dailly_gui.png) 140px -25px; }
#navimg1 { width:24px; height:24px; background: url(../images/dailly_gui.png) 190px -25px; }
#navimg2 { width:24px; height:24px; background: url(../images/dailly_gui.png) 190px -50px; }
#navimg3 { width:24px; height:24px; background: url(../images/dailly_gui.png) 190px -75px; }
#navimg4 { width:24px; height:24px; background: url(../images/dailly_gui.png) 165px 0px; }
#navimg5 { width:24px; height:24px; background: url(../images/dailly_gui.png) 165px -25px; }
#navimg6 { width:24px; height:24px; background: url(../images/dailly_gui.png) 165px -50px; }
#navimg7 { width:24px; height:24px; background: url(../images/dailly_gui.png) 165px -75px; }

.nav { clear: left; position: relative; z-index: 20; background-color: rgba(100, 200, 150, 0.4); text-align: center; border-radius: 48px; }
.nav ul { margin: 0; padding: 0; }
.nav li { display: inline-block; list-style: none; }
.nav li img { vertical-align: middle; }
.nav li a { display: block; color: black; font-size: 16px; }
.nav li:hover { background-color: white; border-radius: 24px 24px 0px 0px; animation: fade-in 0.3s 0s ease-in-out forwards; }
.nav li:hover ul { display: block; }
.nav li ul { display: none; position: absolute; left: 0; width: 100%; background-color: white; border-radius: 12px 12px 24px 24px; box-shadow: 0px 14px 14px rgba(0, 0, 0, 0.3); }
.nav li ul a { padding: 28px 14px; }
.nav li li { display: inline-block; }
.nav li li:hover { background-color: rgba(100, 200, 150, 0.5); border-radius: 12px; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

#searchPanel { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 30; padding-bottom: 100px; padding-top: 100px; }
#memberPanel { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 30; padding-bottom: 100px; padding-top: 100px; }
#memberPanel_adv a { display: inline-block; padding: 14px; color: white; }
#memberPanel_adv a:hover { background-color: black; animation: fade-in 0.3s 0s ease-in-out forwards; }
.inputArea { border: 0px; padding: 12px; background: #ff8; border-radius: 20px; }
.inputSubmit { padding: 12px; background: #08f; border-radius: 20px; color: white; font-size: small; }
.textArea { border: 1px solid #ffc; padding: 5px 5px 3px 5px; background: #ff8; vertical-align: top; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.searchlabel { font-weight: bold; text-shadow: 0px 0px 5px #FFFFFF; }
.tShadowFFF { text-shadow: 0px 0px 5px #FFF, 0px 0px 5px #FFF; }
.tShadow000 { text-shadow: 0px 0px 5px #000, 0px 0px 5px #000; }
.sheetmusicpreview { }

.translucentblock { background-color: rgba(40, 120, 80, 0.9); }
.translucentblock_light { background-color: rgba(100, 200, 150, 0.6); }
.darkcolor { background-color: #329664; }
.seccolor { background-color: #4BAF7D; }

.titleblock { background: linear-gradient(to bottom, #FFFFFF, #B4E0CA); border: 0; color: #333333; padding: 16px; border-radius: 24px 24px 0px 0px; }
.titleblock a { }
.contentblock { background: #FFFFFF; border: 0; padding: 16px; border-radius: 0px 0px 24px 24px; }
.contentblock a { }
.areablock { background: #FFFFFF; border: 0; padding: 16px; border-radius: 24px; }
.areablock a { }
.secondaryblock { background-color: #FFFF80; color: black; padding: 16px; border-radius: 24px; }

.adblock { background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0)); overflow: hidden; }

.buttonEnabled { color: white; padding: 12px; border-radius: 12px; font-weight: bold; text-shadow:0px 2px 5px #000000; background: linear-gradient(to bottom, #f29800 0%, #cc4200 100%); }
.buttonPink { color: white; padding: 12px; border-radius: 12px; font-weight: bold; text-shadow:0px 2px 5px #000000; background: linear-gradient(to bottom, #ff7f94 0%, #d1455c 100%); }
.buttonSpecial { color: white; padding: 12px; border-radius: 12px; font-weight: bold; text-shadow:0px 2px 5px #000000; background: linear-gradient(to bottom, #e900f2 0%, #8600cc 100%); }
.buttonFacebook { color: white; padding: 12px; border-radius: 12px; font-weight: bold; text-shadow:0px 2px 5px #000000; background: linear-gradient(to bottom, #5b81cc 0%, #39507f 100%); }
.buttonDisabled { color: #AAA; padding: 12px; border-radius: 12px; font-weight: bold; text-shadow:0px 2px 5px #000000; background: #444; }

.autoNewLine { word-break: break-all; }
.time { font-size: small; color: #888; }
.pagetype span { font-size: 175%; }

#copyright { text-align: center; background-color: rgba(0, 0, 0, 0.3); color: #B0E0C8; margin-top: 0px; font-size: small; margin: 48px 0px 0px; }
#copyright a { color: #B0E0C8; }
#copyright .cr1 { display: inline-block; margin: 50px 30px 10px 30px; }
#copyright .cr2 { display: inline-block; margin: 0px 30px 0px 30px; }
#copyright .cr3 { display: inline-block; margin: 0px 30px 20px 30px; }
#copyright .cr4 { display: inline-block; margin: 0px 30px 60px 30px; }

#nav { background-color: #FFFFA0; }

@media screen and ( min-width: 428px ) { #memberPanel_adv a { width: 100%; } }

@media screen and ( min-width: 450px ) { .content { margin: 24px; } }
@media screen and ( max-width: 449px ) { .content { margin: 0px; } }

@media screen and ( min-width: 640px )
{
	.pagetype { margin: 16px 32px 16px; }
	.titleblock { margin: 16px 32px 0px 32px; }
	.contentblock { margin: 0px 32px 16px 32px; }
	.areablock { margin: 16px 32px 16px; }
	.secondaryblock { margin: 16px 32px 16px; }

	.nav { margin: 16px 32px 32px; }
	.nav .phonehidden { display: block; }
	.nav li a { padding: 24px; }
	.phonehiddenib { display: inline-block; }
	.headline { display: block; }
	.headline_phone { display: none; }
	.mobileblock { display: none; }
	.table { display: table; }
	.tr { display: table-row; }
	.td50 { display: table-cell; width: 50%; }
	.blt { margin: 0px 8px 0px 16px; }
	.blc { margin: 0px 8px 0px 16px; }
	.brt { margin: 0px 16px 0px 8px; }
	.brc { margin: 0px 16px 0px 8px; }
	.buttonEnabled { font-size: 24px; }
	.buttonPink { font-size: 24px; }
	.buttonSpecial { font-size: 24px; }
	.buttonFacebook { font-size: 24px; }
	.buttonDisabled { font-size: 24px; }
}
@media screen and ( max-width: 639px )
{
	.pagetype { margin: 16px; }
	.titleblock { margin: 16px 16px 0px 16px; }
	.contentblock { margin: 0px 16px 16px 16px; }
	.areablock { margin: 16px; }
	.secondaryblock { margin: 16px; }

	.nav { margin: 16px; }
	.nav .phonehidden { display: none; }
	.nav li a { padding: 24px 16px; }
	.phonehiddenib { display: none; }
	.headline { display: none; }
	.headline_phone { display: block; }
	.mobileblock { display: block; }
	.buttonEnabled { font-size: 100%; }
	.buttonPink { font-size: 100%; }
	.buttonSpecial { font-size: 100%; }
	.buttonFacebook { font-size: 100%; }
	.buttonDisabled { font-size: 100%; }
}

@media screen and ( min-width: 1920px )
{
	#adb1 { display: inline-block; width: 24%; height: 600px; } #adbc1 { margin: 16px 0px 0px 16px; width: calc(100% - 16px); height: 100%; }
	#adb2 { display: inline-block; width: 24%; height: 600px; } #adbc2 { margin: 16px 16px 0px 0px; width: calc(100% - 16px); height: 100%; }
	#mainblock { display: inline-block; width: 52%; }
}
@media screen and ( min-width: 1600px ) and (max-width: 1919px)
{
	#adb1 { display: inline-block; width: 426px; height: 600px; } #adbc1 { margin: 16px 0px 0px 16px; width: calc(100% - 16px); height: 100%; }
	#adb2 { display: inline-block; width: 426px; height: 600px; } #adbc2 { margin: 16px 16px 0px 0px; width: calc(100% - 16px); height: 100%; }
	#mainblock { display: inline-block; width: calc(100% - 852px); }
}
@media screen and ( min-width: 1280px ) and (max-width: 1599px)
{
	#adb1 { display: inline-block; width: 300px; height: 600px; } #adbc1 { margin: 16px 0px 0px 16px; width: calc(100% - 16px); height: 100%; }
	#adb2 { display: inline-block; width: 300px; height: 600px; } #adbc2 { margin: 16px 16px 0px 0px; width: calc(100% - 16px); height: 100%; }
	#mainblock { display: inline-block; width: calc(100% - 600px); }
}
@media screen and ( min-width: 1024px ) and (max-width: 1279px)
{
	#adb1 { display: inline-block; width: 176px; height: 600px; } #adbc1 { margin: 16px 0px 0px 16px; width: calc(100% - 16px); height: 100%; }
	#adb2 { display: inline-block; width: 176px; height: 600px; } #adbc2 { margin: 16px 16px 0px 0px; width: calc(100% - 16px); height: 100%; }
	#mainblock { display: inline-block; width: calc(100% - 352px); }
}
@media screen and ( min-width: 640px ) and (max-width: 1023px)
{
	#adb1 { display: block; width: 100%; height: 90px; } #adbc1 { position: relative; z-index: -54; margin: 16px; width: calc(100% - 32px); height: 100%; }
	#adb2 { display: block; width: 100%; height: 106px; } #adbc2 { margin: 16px; width: calc(100% - 32px); height: calc(100% - 16px); }
	#mainblock { display: block; }
}
@media screen and ( max-width: 639px )
{
	#adb1 { display: block; width: 100%; height: 60px; } #adbc1 { position: relative; z-index: -54; margin: 16px; width: calc(100% - 32px); height: 100%; }
	#adb2 { display: block; width: 100%; height: 76px; } #adbc2 { margin: 16px; width: calc(100% - 32px); height: calc(100% - 16px); }
	#mainblock { display: block; }
}