/*** reset ***/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
a{text-decoration:none;color:#333;outline:none;}

/*** clearfix ***/
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: '.';clear: both;height: 0;}
* html .clearfix {zoom: 1;}
*:first-child+html .clearfix {zoom: 1;}


html{height:100%;}
body{font-family:"trebuchet MS", Arial, sans-serif;background:#000;font-size:15px;color:#333;}
a{color:#555;text-decoration:none;}
.container{width:100%;height:100%;position:absolute;}
.sl-slider-wrapper {width: 800px;height: 400px;margin: 0 auto;position: relative;overflow: hidden;}
.sl-slider {position: absolute;top: 0;left: 0;}
.sl-slide, .sl-slides-wrapper, .sl-slide-inner{position: absolute;width: 100%;height: 100%;top: 0;left: 0;} 
.sl-slide {z-index: 1;}
.sl-content-slice {overflow: hidden;position: absolute;background: #fff;opacity : 1;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}
.sl-slide-horizontal .sl-content-slice {width: 100%;height: 50%;left: -200px;
	-webkit-transform: translateY(0%) scale(1);
	-moz-transform: translateY(0%) scale(1);
	-o-transform: translateY(0%) scale(1);
	-ms-transform: translateY(0%) scale(1);
	transform: translateY(0%) scale(1);
}
.sl-slide-horizontal .sl-content-slice:first-child {top: -200px;padding: 200px 200px 0px 200px;}
.sl-slide-horizontal .sl-content-slice:nth-child(2) {top: 50%;padding: 0px 200px 200px 200px;}
.sl-slide-vertical .sl-content-slice {width: 50%;height: 100%;top: -200px;
	-webkit-transform: translateX(0%) scale(1);
	-moz-transform: translateX(0%) scale(1);
	-o-transform: translateX(0%) scale(1);
	-ms-transform: translateX(0%) scale(1);
	transform: translateX(0%) scale(1);
}
.sl-slide-vertical .sl-content-slice:first-child {left: -200px;padding: 200px 0px 200px 200px;}
.sl-slide-vertical .sl-content-slice:nth-child(2) {left: 50%;padding: 200px 200px 200px 0px;}
.sl-content-wrapper {position: absolute;}
.sl-content {width: 100%;height: 100%;background: #000;}
.sl-slide-horizontal .sl-slide-inner {background: #ddd;}
.sl-slide-vertical .sl-slide-inner {background: #ccc;}
.demo-1 .sl-slider-wrapper {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}

/* 上一頁 & 下一頁 */
.nav-arrows span {display:block;width: 72px;height: 72px;margin-top:-36px;position:absolute;top:50%;z-index:2000;text-indent: -9999px;cursor: pointer;background-image:url(../images/nav-arrow.png);}
.nav-arrows span.nav-arrow-prev {left:2%;background-position:left bottom;}
.nav-arrows span.nav-arrow-prev:hover {background-position:right bottom;}
.nav-arrows span.nav-arrow-next {right:2%;background-position:left top;}
.nav-arrows span.nav-arrow-next:hover {background-position:right top;}

/* 中央下方小圓點 */
.nav-dots{text-align:center;position:absolute;bottom:2%;height:30px;width:100%;left:0;z-index:1000;}
.nav-dots span{display:inline-block;position:relative;width:17px;height:17px;border-radius:50%;margin:5px;background:rgba(255,255,255,0.6);cursor: pointer;box-shadow:0 0 0 1px rgba(0,0,0,0.2);}
.nav-dots span:hover{background:rgba(255,255,255,0.8);}
.nav-dots span.nav-dot-current:after {content: "";position: absolute;width: 9px;height: 9px;top: 4px;left: 4px;border-radius: 50%;
	background: rgba(0,0,0,0.8);}

#header{position:absolute;top:0;z-index:100;width:100%;text-align:center;height:40px;line-height:40px;background:#222;background:rgba(0,0,0,0.5);color:#777;color:rgba(255,255,255,0.8);font-size:13px;text-shadow:0 0 1px rgba(0,0,0,0.8);}
#header ul{float:right;margin-right:10px;}
#header ul li{float:left;margin-right:10px;}
#header a{color:#555;color:rgba(255,255,255,0.8);}
#header a:hover{color:#FFF;}
#app-store{position:absolute;bottom:20px;right:20px;z-index:1000;}
.sl-slide-inner h2{font-family:"trebuchet MS", 微軟正黑體;font-weight:normal;color:rgba(255,255,255,0.9);font-size:40px;}
.circle{font-size:60px;color:#FFF;color:rgba(255,255,255,0.3);font-weight:normal;font-family:"trebuchet MS", 微軟正黑體;width:270px;height:270px;border-radius:50%;border:7px solid #FFF;border:7px solid rgba(255,255,255,0.3);text-align:center;position:absolute;right:20px;top:20px;z-index:10;filter:alpha(opacity=20);}
.circle h3{margin-top:65px;line-height:50px;}
.circle h3 span{font-size:50px;display:block;white-space:nowrap;}
.circle h3 strong{font-size:50px;display:block;white-space:nowrap;}
#icon{float:left;margin:0 20px 20px 0;}
.content{position:absolute;left:50%;top:50%;width:708px;height:400px;background:#222;background:rgba(0,0,0,0.7);padding:40px;margin:-250px 0 0 -404px;border-radius:20px 0 0 20px;overflow-y:auto;overflow-x:hidden;}
.content h4{font-family:"trebuchet MS", 微軟正黑體;font-weight:normal;color:#FFF;text-shadow: 0 0 1px #000;font-size:24px;margin-bottom:5px;}
.content h5{color:#CCC;margin-bottom:5px;font-size:24px;font-family:"trebuchet MS", 微軟正黑體;}
.text{margin:110px 0 40px 0;}
.text h6{color:#EEE;font-size:20px;margin-bottom:5px;font-weight:bold;}
.content p{font-size:16px;line-height:25px;margin-bottom:15px;color:#EEE;padding:0;text-shadow:0 0 1px #000;letter-spacing:1px;}
.p-left{float:left;width:329px;}
.p-right{float:right;width:329px;}
.btn-div{background:#000;background:rgba(0,0,0,0.5);padding:7px;width:150px;border-radius:5px;}
a.btn{display:block;padding:8px 0;width:150px;text-align:center;background:#DDD;background:rgba(255,255,255,0.8);border-radius:5px;color:#000;text-shadow:0 1px 0 rgba(255,255,255,0.7);box-shadow:0 2px 4px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.7) inset;}
a.btn:hover{background:#EEE;background:rgba(255,255,255,0.9);}
.logo{position:absolute;left:40px;top:40px;}
hr{border:none;border-top:1px solid rgba(255,255,255,0.2);}

.content::-webkit-scrollbar{width:10px;}
.content::-webkit-scrollbar-track{background:rgba(0,0,0,0.5);}
.content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);}

.bg-3 .text div{margin-bottom:30px;}
.bg-3 .text div h3, .bg-3 .text div p{float:left;width:320px;}
.bg-3 .text img{float:left;margin-left:10px;}

.bg-4 .btn-div{margin-bottom:10px;}
.bg-5 h2 span{font-size:26px;margin-left:5px;}
.bg-6 ul li{margin-bottom:20px;}
.bg-6 ul li img{width:200px;padding:5px;background:#FFF;float:left;margin-right:20px;}
.bg-6 ul li div{}
.bg-6 ul li div h3{font-size:26px;color:#FFF;margin-bottom:10px;}
.bg-6 ul li div h3 span{font-size:13px;color:#CCC;background:rgba(0,0,0,0.5);border-radius:5px;padding:5px 13px;}

.bg-7 ul{margin-bottom:20px;}
.bg-7 ul li{float:left;margin-right:10px;width:330px;}
.bg-7 ul li a{display:block;}
.bg-7 ul li a img{margin-right:10px;float:left;}
.bg-7 ul li a h6{float:left;font-size:16px;}
.bg-7 ul li a span{color:#CCC;}

/* Custom background colors for slides in first demo */
.demo-1 .bg-1 .sl-slide-inner, .demo-1 .bg-1 .sl-content-slice{background:url(../images/1.jpg) center center no-repeat;}
.demo-1 .bg-2 .sl-slide-inner, .demo-1 .bg-2 .sl-content-slice{background:url(../images/2.jpg) center center no-repeat;}
.demo-1 .bg-3 .sl-slide-inner, .demo-1 .bg-3 .sl-content-slice{background:url(../images/3.jpg) center center no-repeat;}
.demo-1 .bg-4 .sl-slide-inner, .demo-1 .bg-4 .sl-content-slice{background:url(../images/4.jpg) center center no-repeat;}
.demo-1 .bg-5 .sl-slide-inner, .demo-1 .bg-5 .sl-content-slice{background:url(../images/5.jpg) center center no-repeat;}
.demo-1 .bg-6 .sl-slide-inner, .demo-1 .bg-6 .sl-content-slice{background:url(../images/6.jpg) center center no-repeat;}
.demo-1 .bg-7 .sl-slide-inner, .demo-1 .bg-7 .sl-content-slice{background:url(../images/7.jpg) center center no-repeat;}

/* Animations for content elements */
.sl-trans-elems .circle{
	-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}
.sl-trans-elems h2{
	-webkit-animation: moveUp 1s ease-in-out both;
	-moz-animation: moveUp 1s ease-in-out both;
	-o-animation: moveUp 1s ease-in-out both;
	-ms-animation: moveUp 1s ease-in-out both;
	animation: moveUp 1s ease-in-out both;
}
.sl-trans-elems p{
	-webkit-animation: fadeIn 0.5s linear 0.5s both;
	-moz-animation: fadeIn 0.5s linear 0.5s both;
	-o-animation: fadeIn 0.5s linear 0.5s both;
	-ms-animation: fadeIn 0.5s linear 0.5s both;
	animation: fadeIn 0.5s linear 0.5s both;
}
.sl-trans-back-elems .circle{
	-webkit-animation: scaleDown 1s ease-in-out both;
	-moz-animation: scaleDown 1s ease-in-out both;
	-o-animation: scaleDown 1s ease-in-out both;
	-ms-animation: scaleDown 1s ease-in-out both;
	animation: scaleDown 1s ease-in-out both;
}
.sl-trans-back-elems h2{
	-webkit-animation: fadeOut 1s ease-in-out both;
	-moz-animation: fadeOut 1s ease-in-out both;
	-o-animation: fadeOut 1s ease-in-out both;
	-ms-animation: fadeOut 1s ease-in-out both;
	animation: fadeOut 1s ease-in-out both;
}
.sl-trans-back-elems p{
	-webkit-animation: fadeOut 1s linear both;
	-moz-animation: fadeOut 1s linear both;
	-o-animation: fadeOut 1s linear both;
	-ms-animation: fadeOut 1s linear both;
	animation: fadeOut 1s linear both;
}
@-webkit-keyframes roll{
	0% {-webkit-transform: translateX(500px) rotate(360deg);}
	100% {-webkit-transform: translateX(0px) rotate(0deg);}
}
@-moz-keyframes roll{
	0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-o-keyframes roll{
	0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-ms-keyframes roll{
	0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@keyframes roll{
	0% {transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-webkit-keyframes moveUp{
	0% {-webkit-transform: translateY(40px);}
	100% {-webkit-transform: translateY(0px);}
}
@-moz-keyframes moveUp{
	0% {-moz-transform: translateY(40px);}
	100% {-moz-transform: translateY(0px);}
}
@-o-keyframes moveUp{
	0% {-o-transform: translateY(40px);}
	100% {-o-transform: translateY(0px);}
}
@-ms-keyframes moveUp{
	0% {-ms-transform: translateY(40px);}
	100% {-ms-transform: translateY(0px);}
}
@keyframes moveUp{
	0% {transform: translateY(40px);}
	100% {transform: translateY(0px);}
}
@-webkit-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-o-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-ms-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes scaleDown{
	0% {-webkit-transform: scale(1);}
	100% {-webkit-transform: scale(0.5);}
}
@-moz-keyframes scaleDown{
	0% {-moz-transform: scale(1);}
	100% {-moz-transform: scale(0.5);}
}
@-o-keyframes scaleDown{
	0% {-o-transform: scale(1);}
	100% {-o-transform: scale(0.5);}
}
@-ms-keyframes scaleDown{
	0% {-ms-transform: scale(1);}
	100% {-ms-transform: scale(0.5);}
}
@keyframes scaleDown{
	0% {transform: scale(1);}
	100% {transform: scale(0.5);}
}
@-webkit-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-moz-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-o-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-ms-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}


/* Media Queries for custom slider */
@media screen and (max-width: 660px) {
	.demo-1 .circle {
		width: 130px;
		height: 130px;
		margin-left: -65px;
		margin-bottom: 50px;
	}
	.demo-1 [data-icon]:after {
		width: 110px;
		height: 110px;
		line-height: 110px;
		font-size: 40px;
		margin: -55px 0 0 -55px;
	}
	.demo-1 .sl-slide p {
		margin-bottom: -120px;
	}
	.demo-1 .sl-slide h2 {
		line-height: 22px;
		font-size: 18px;
		margin-bottom: -40px;
		letter-spacing: 8px;
	}
	.demo-1 .sl-slide p:before {
		line-height: 10px;
		width: 40px;
		height: 40px;
		font-size: 120px;
		left: -45px;
	}
}


#sample-video{-webkit-filter: grayscale(70%);display:block;text-align:center;margin:25px 0;}
#sample-video:hover{-webkit-filter: grayscale(0%);}

/* lightbox - 完整章節大綱 */
#menu{width:708px;height:400px;overflow-y:auto;padding:30px 30px 0 30px;line-height:26px;}
#menu-title{font-size:30px;color:#AAA;margin-bottom:20px;}
.menu-box{float:left;width:310px;margin:0 30px 30px 0;}
#menu h2{font-size:20px;margin-bottom:5px;font-weight:bold;}
#menu h3{font-size:16px;color:#666;}
#menu h4{font-size:13px;color:#999;margin-left:36px;}
#menu hr{border-top:1px solid #CCC;margin:10px 0;}

body.mobile #fancybox-content{
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

/* English Language Adjustments */
html[lang^="en"] body {
    font-family: "Trebuchet MS", Arial, sans-serif;
}

html[lang^="en"] .circle h3 span,
html[lang^="en"] .circle h3 strong {
    font-size: 30px; /* Reduced from 50px to fit "About APP", "Outline" etc. */
    white-space: normal;
    line-height: 1.2;
}

html[lang^="en"] .circle {
    /* Adjust padding mainly if needed, but font size reduction should suffice */
}

/* Adjust circle content vertical alignment if text wraps */
html[lang^="en"] .circle h3 {
    margin-top: 55px; /* Slight adjustment */
}