body {position: relative; font-family: "Microsoft JhengHei", serif;}
html, body, #topContents, #topContents .outsideWrap {height: 100%; -webkit-font-smoothing: antialiased;}
h1, h2, h3, h4 {font-family: "Ryumin Bold KL", serif;}
.ua-desktop-windows body {font-family: sans-serif;}
#globalHeader .headerWrap {width: auto;}
.wrapper {padding: 25px 0 15px;}
#main {margin-bottom: 0;}
#main * {box-sizing: border-box;}
#siteName {padding-left: 27px;}
#topContents h1 {padding: 0;}
#main p {margin: 0; padding: 0;}
.frame-bordered {padding-bottom: 30px;}
.relatedLink {margin-top: 40px;}
/*.wideImage {margin-top: 25px;}*/

#main h2 {font-size: 30px; text-align: left;}
#main h3 {font-size: 22px; text-align: left; margin-bottom: 15px;}
#main h4 {font-size: 18px; text-align: left;}
#contentSection1 h2 {font-size: 26px;}
#main p {font-size: 14px; line-height: 2.5;}
#main p.lead {line-height: 2.3;}
#main .col2_1 .figure {float: right; margin-left: 40px;}
#main .col2_1 img {float: none; margin-right: 0; width: 100%;}

#main .detail {overflow: hidden;}
#globalHeader {position: absolute; top: 0; left: 0; background: transparent;}

/*#topContents {background: url(/img/feature/sleep2016aw/main.jpg) no-repeat center center; height: 100%; background-size: cover; position: relative;}*/
#topContents {width: 100%; height: 100%; background: url(/img/feature/sleep2016aw/main.jpg) no-repeat center center; background-size: cover; position: absolute; left :0; top: 0; z-index: 1; opacity: 0;}
#topContents h1 {opacity: 0; margin: 0; text-align: right; /*padding-right: 27px;*/ position: absolute; top: 88%; right: 10px; /*-webkit-transform: translate(0, -50%); transform: translate(0, -50%);*/}

#topContents.ww .outsideWrap {background: none;}
.fade-layer {background-color: #000; height: 100%; position: relative;}

#contentSection1 .col2_1 .figure {width: 30%;}
#contentSection2 .col2_1 .figure {width: 22%;}

#contentSection3-1 .arrow, #contentSection3-2 .arrow {background-image: url(/img/feature/sleep2016aw/arrow_down_gr.png)}
#contentSection3-3 .arrow, #contentSection3-4 .arrow {background-image: url(/img/feature/sleep2016aw/arrow_down_w.png);}
#contentSection3-3, #contentSection3-4 {background-repeat: no-repeat; background-position: center top; color: #fff; background-attachment: fixed; padding-bottom: 4%;}
#contentSection3-3 {background-image: url(/img/feature/sleep2016aw/sleepbody.jpg); background-size: cover;}
#contentSection3-4 {background-image: url(/img/feature/sleep2016aw/goodsleep.jpg); background-size: cover;}
#contentSection3-3 li, #contentSection3-4 li {border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(255,255,255,0.6);}
#contentSection3-3 li p, #contentSection3-4 li p {color: #333;}
#contentSection3-1 .clock {background-image: url(/img/feature/sleep2016aw/clock.png); background-position: -1px 0; width: 68px;}
#contentSection3-2 .clock {background-image: url(/img/feature/sleep2016aw/clock.png); background-position: 1px -128px; width: 70px;}
#contentSection3-3 .clock {background-image: url(/img/feature/sleep2016aw/clock_w.png); background-position: -124px 1px; width: 72px;}
#contentSection3-4 .clock {background-image: url(/img/feature/sleep2016aw/clock_w.png); background-position: -124px -128px; width: 72px;}

#main .itemLink {margin-top: 10px; line-height: 2.5;}
#main .itemLink a {text-decoration: underline;}
div[id^="contentSection3"], div[id^="contentSection3"] .wrapper {overflow: visible;}
div[id^="contentSection3"] .clock {display: block; float: left; height: 70px; background-size: 196px 198px; background-repeat: no-repeat; margin-right: 15px;}
div[id^="contentSection3"] h3 {max-width: 800px; margin-left: auto; margin-right: auto; line-height: 70px;}
div[id^="contentSection3"] h3+div {margin: 10px auto 85px; max-width: 800px;}
#main div[id^="contentSection3"] h4+div {display: none; margin-bottom: 0; background-color: rgba(255,255,255,0.75); padding: 20px; /*border: 1px solid #eee;*/}
div[id^="contentSection3"] .arrow {background-color: transparent; background-position: center center; background-repeat: no-repeat; background-size: 20px 10px; display: block; float: right; height: 120px; width: 20px;}
div[id^="contentSection3"] figure {width: 60%; margin: 20px auto 15px; }
div[id^="contentSection3"] figure img {width: 100%; height: auto; margin: 0; float: none;}
div[id^="contentSection3"] h4 {cursor: pointer; margin: 0; height: 120px; line-height: 120px; padding: 0 20px;  background-repeat: no-repeat; background-position: 95% center; background-size: 30px 15px;}
div[id^="contentSection3"] ul {max-width: 650px; margin: 20px auto 0;}
div[id^="contentSection3"] li {border-bottom: 1px solid #ccc; padding: 0;}
/*div[id^="contentSection3"] li.open {border-bottom: none;}*/

#contentSection4 {padding-top: 20px;}
#contentSection4 h2 {font-size: 26px;}
#contentSection4 > p {margin: 10px auto 40px; max-width: 800px;}

#contentSection5 .wrapper {padding-top: 0; margin-bottom: 30px;}
#contentSection5 h3 {margin-top: 0; font-size: 20px;}
#contentSection5 ul.col4 {margin-right: 0;}
#contentSection5 .col4 > li {width: 46%; margin: 30px 0 10px 0;}
#contentSection5 .col4 > li:nth-child(2n) {margin: 30px 0 10px 8%;}
#contentSection5 .col4 li ul {margin-top: 10px;}
#contentSection5 .col4 li li {display: block; width: 100%; margin-bottom: 5px;}
#contentSection5 .col4 img {width: 70%; display: block; margin: 0 auto;}
#contentSection5 .col4 h4 {margin: 0; font-size: 12px; font-weight: normal;}
#contentSection5 .col4 h4+p {font-size: 12px;}
#contentSection5 .col4 p {line-height: 1.7;}	

#contentAside1 {background-color: #f7f7f7;}
#contentAside1 .col2_1 .figure {width: 46%;}
#contentAside1 .detail {width: 48%; float: left;}
#contentAside1 .relatedLink {clear: both;}

#copyright {text-align: center; margin-bottom: 30px;}
.copyright {float: none; padding: 0;}
footer {background-color: #fff;}
aside.share {margin: 0; padding: 50px 0 20px;}
.campaignLink {padding-top: 50px; text-align: center;}

@media screen and (max-width : 768px){
	#siteName {text-align: left; padding-left: 0;}
	#siteName a {padding: 10px 10px 10px 27px; margin-top: 14px;}
	#siteName img {width: 130px; padding: 0;}
}

@media screen and (max-width : 767px){

	#topContents h1 {font-size: 26px;}
	#main h2 {font-size: 24px;}
	#main h3 {font-size: 18px;}
	#main h4 {font-size: 15px;}
	#contentSection1 h2 {font-size: 21px;}
	#main p.lead {line-height: 2;}
	#main p {line-height: 2;}
	.wrapper {padding: 0 0 50px;}

	div[id^="contentSection"] {background-color: #fff;}

	#contentSection1 .figure {display: none;}
	#contentSection1 p br {display: none;}
	#contentSection2 .frame-bordered {border: none; padding: 0; margin-top: 25px;}
	#main .col2_1 .figure {float: none; margin: 0 auto; width: 50%;}
	#contentSection2 .col2_1 .figure {width: 50%; margin-bottom: 20px;}
	#contentSection2 .relatedLink {text-align: right;}

	#main div[id^="contentSection3"] h4+p {top: 65px;}
	div[id^="contentSection3"] h4 {cursor: pointer; margin: 0; height: 65px; line-height: 65px; background-size: 20px 10px;}
	div[id^="contentSection3"] h3+div {margin: 10px auto;}
	div[id^="contentSection3"] .clock {float: none; margin: 0 auto;}
	div[id^="contentSection3"] .arrow {height: 65px;}
	#contentSection3-3, #contentSection3-4 {background-attachment: scroll;}

	#contentSection5 {background-color: #f9f9f9;}
	#contentSection5 .wrapper {width: auto; margin-left: 4%; margin-bottom: 0;}
	#contentSection5 .col4  {overflow-y: hidden; overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch;}
	#contentSection5 .col4 * {white-space: normal;}
	#contentSection5 .wrapper .col4 > li {width: 80%; background-color: #fff; padding: 20px; margin: 30px 15px 0 0;}
	#contentSection5 .col4 img {width: 80%; display: block; margin: 0 auto;}
	#contentSection5 .col4 h4, #contentSection5 .col4 h4+p {display: inline;}

	#contentAside1 {background: #fff; padding-top: 20px;}
	#contentAside1 .col2_1 .figure {width: 100%;}
	#contentAside1 .detail {width: 100%; float: none; margin-bottom: 30px;}
	#contentAside1 .relatedLink {text-align: center;}

	.campaignLink {padding-top: 0;}

}