/*general*/
body{
	margin:0;
	padding:0;
	font-family: 'Microsoft JhengHei', 'Microsoft YaHei';
	font-size: 100%;
}

h1, h4{
	font-weight: normal;
}

a {
	text-decoration: none;
}

img{
	vertical-align: top;
	border:0;
}

.top img{
	vertical-align: bottom;
}

.inner{
	max-width:1000px;
	width:100%;
	position:relative;
	margin:auto;
}

.clear{
	clear:both;
}

/*header*/
#header{
	height:181px;
	background-color:#80c9d5;
}

#header img{
	vertical-align: initial;
}

#header #c_website,
#header #c_mobile{
	position: absolute;
    bottom: -4px;
}

#trigger{
	width: 35px;
    height: 27px;
    background-image: url(../images/trigger.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 49px;
    display: none;
    left: 30px;
    cursor:pointer;
    z-index:99;
}

#logo{
	margin-top: 25px;
	margin-left: 10px;
	margin-right: 50px;
}

#c_mobile{
	display:none;
	width:180px;
}

#login,#login1, #login2{
	position:absolute;
	right:0px;
	list-style: none;
}

#login{
	top:50px;
}

#login1{
	top:30px;
}

#login2{
	top:60px;
    margin-top: 0px;
}

.login li{
	position:relative;
	display:inline-block;
	padding-right: 20px;
	margin-right: 10px;
}

.login li:after{
	content:"";
	width:6px;
	height:28px;
	display:block;
	position:absolute;
	right:0;
	top:0;
	background-image: url("../images/grid.png");
	background-repeat: no-repeat;
}

.login li:last-child:after{
	display:none;
}

.login a{
	color:#fff;
}

#house{
	top: 4px;
    position: relative;
}

/*nav*/
#nav{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

#nav li{
	display:inline-block;
	margin:0 19px;
}

#nav a{
	color:#6d6e71;
	position:relative;
	display:block;
	width:130px;
	height:40px;
	text-align: center;
	font-size:1.125em;
	margin-top: 10px;
}

#nav .nav_1.active a{
	color:#e8562c;
}

#nav .nav_2.active a{
	color:#ed9000;
}

#nav .nav_3.active a{
	color:#0b9b65;
}

#nav .nav_4.active a{
	color:#0099be;
}

#nav .nav_5.active a{
	color:#6d38b9;
}

#nav .nav_6.active a{
	color:#d5157e;
}

.nav_7.active .select{
	display:block;
}

#nav a:after{
	content:"";
	display:block;	position:absolute;
	width:124px;
	height:9px;
	left:50%;
	margin-left: -50px;
	background-repeat: no-repeat;
	background-position: top center;
}

#nav .nav_1 a:after{
	background-image: url("../images/underline1.png");
}

#nav .nav_2 a:after{
	background-image: url("../images/underline2.png");
}

#nav .nav_3 a:after{
	background-image: url("../images/underline3.png");
}

#nav .nav_4 a:after{
	background-image: url("../images/underline4.png");
}

#nav .nav_5 a:after{
	background-image: url("../images/underline5.png");
}

#nav .nav_6 a:after{
	background-image: url("../images/underline6.png");
}


#nav li.active a:after{
	background-position: bottom center;
}

#nav_mb{
	position: fixed;
    top: 0;
    left: -60%;
    background-color: #fff;
    z-index: 999;
    padding-right: 20px;
    height: 100%;
    padding-left: 20px;
    transition:left 0.4s;
	word-break: break-all;
}

@media only screen and (max-width:1000px){
	#nav_mb{
		width: 35%;
		left:-60%;
	}
}

@media only screen and (max-width:625px){
	#nav_mb{
		width: 250px;
		left:-300px;
	}
}

#nav_mb.active{
	left:0;
}

#nav_mb ul{
	list-style: none;
	margin: 0;
	padding:0;
}

/*#nav_mb ul.top{
	margin:30px 0;
}*/


#nav_mb ul.top li{
	position:relative;
	display:block;
	padding-right: 20px;
}

.division {
    display: inline-block;
    content: "";
    width: 6px;
    height: 28px;
    position: relative;
    bottom: -8px;
    background-image: url(../images/grid_blue.png);
    background-repeat: no-repeat;
    margin: 0 10px;
}


#nav_mb ul.top li:last-child{
	margin-right: 0;
}

#nav_mb ul.top li:last-child:after{
	display:none;
}

#nav_mb .top a{
	color:#1a9dc4;
	line-height: 1;
}

#nav_mb .bottom a{
	color:#6d6e71;
	position:relative;
	display:block;
	height:40px;
	font-size:1.125em;
	margin-top: 10px;
	text-indent: 14px;
}

#nav_mb .bottom a:after{
	content:"";
	display:block;
	position:absolute;
	width:124px;
	height:9px;
	background-repeat: no-repeat;
	background-position: top center;
}


#nav_mb .nav_1.active a{
	color:#e8562c;
}

#nav_mb .nav_2.active a{
	color:#ed9000;
}

#nav_mb .nav_3.active a{
	color:#0b9b65;
}

#nav_mb .nav_4.active a{
	color:#0099be;
}

#nav_mb .nav_5.active a{
	color:#6d38b9;
}

#nav_mb .nav_6.active a{
	color:#d5157e;
}

#nav_mb .nav_13.active a{
	color:#e53e0d;
}

#nav_mb .nav_1 a:after{
	background-image: url("../images/underline1.png");
}

#nav_mb .nav_2 a:after{
	background-image: url("../images/underline2.png");
}

#nav_mb .nav_3 a:after{
	background-image: url("../images/underline3.png");
}

#nav_mb .nav_4 a:after{
	background-image: url("../images/underline4.png");
}

#nav_mb .nav_5 a:after{
	background-image: url("../images/underline5.png");
}

#nav_mb .nav_6 a:after{
	background-image: url("../images/underline6.png");
}

#nav_mb .nav_13 a:after{
	background-image: url("../images/underline7.png");
}

#nav_mb .bottom li.active a:after{
	background-position: bottom center;
}

#nav_mb #close{
    position: absolute;
    right: -30px;
    width: 30px;
    height: 30px;
    background-color: #333;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 0.75;
    cursor: pointer;
    font-weight: bold;
    display:none;
}

#nav_mb.active #close{
	display: block;
}

#overlay, #myOverlay{
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-color: rgba(0,0,0,0.5);
	z-index:99;
}

/*content*/
#content{
	background-image:url("../images/background.jpg");
	background-repeat-y: repeat;
	background-position: top center;
}

#content .inner{
	background-image:url("../images/leftSideBackground.jpg");
	background-repeat: repeat-y;
	background-position: top left;
}

#content .leftSide{
    position: relative;
    display: inline-block;
    float: left;
    width: 164px;
    min-width: 100px;
    min-height: 810px;
    margin: 0;
    padding: 0;
    padding-bottom: 20px;
    list-style: none;
    margin-right: 30px;
    background-image:url("../images/leftSideBackground.jpg");
    background-repeat-y:repeat;
   	z-index: 2;
   	background-size: contain;
}

#content .leftSide li:first-child{
	margin-top: 15px;
}

#content .leftSide img{
	width:81.25%;
}

#content .rightSide{
	display: inline-block;
	width:77%;
	padding-bottom: 180px;
}

/* Book */
.book{
	position:relative;
}

.book h4{
	color:#fff;
	background-color: #df5785;
	padding:5px;
	border-radius:5px;
	display:inline-block;
	margin:10px 0;
}
.book .chapter{
	list-style: none;
	margin:0;
	padding:10px;
	box-sizing: border-box;
	background-color:#fffadd;
	border-radius:10px;
	text-align: center;
}

.book .chapter li{
	display:inline-block;
	width:calc(25% - 3px);
	margin:10px 0;
	cursor:pointer;
	vertical-align: top;
}

.book .chapter li.active a{
	color:#df5785;
}

.book .chapter li a:after{
	content: "";
    display: none;
    background-image: url(../images/underline6.png);
    background-size: cover;
    width: 120px;
    height: 10px;
    position: absolute;
    background-position: bottom center;
}

.book .chapter li.active a:after{
	display: block;
}

.book .chapter li,
.book .chapter li a{
	text-align: left;
	color:#333;
	position:relative;
}

.book .button{
    background-image: url(../images/chapter.png);
    background-repeat: no-repeat;
    background-position:top center;
    width: 90px;
    height: 34px;
    line-height: 2.1;
    text-indent: 20px;
    color: #df5785;
    cursor: pointer;
    position:absolute;
    top:0;
    right:0;
    margin:10px 0;
}

.parts > p{
	padding:10px;
}

.items{
	list-style: none;
	margin:0;
	padding:0;
	color: #58595A;
}

.items a{
	color: #58595A;
}

.items li{
	display:inline-block;
	width:48%;
	margin: 10px 0;
	padding-right: 2%;
	cursor:pointer;
    word-break:break-all;
    vertical-align: top;
}

#swf{
	display:none;
}

.book a{
	/* color: #333333; */
	color: #58595A;
}

/* parts */
.group-parts>.parts p{
	color: #FFFFFF;
	background:#e27e9b;
	text-align: left;
}

.group-parts>.parts:nth-child(2) p{
	background:#46b5d0; 
}

.group-parts>.parts:nth-child(3) p{
	background:#e178c8;
}

.group-parts>.parts:nth-child(5) p{
	background:#926bcb;
}

.group-parts>.parts:nth-child(4) p{
	background:#efb460;
}

/* user_info */
.info_err{
	color:red;
}

/*footer*/
#footer{
	background-image:url("../images/grass.png");
	background-repeat: no-repeat;
	background-position:bottom center;
	position: relative;
	height:131px;
	width:100%;
	margin-top: -10px;
	z-index:90;
}

#footer .inner{
	position:absolute;
	max-width:1000px;
	left:50%;
	margin-left: -500px;
	margin-top: -130px;
}

#footer img {
	position:absolute;
}
#f1{
	left: 50px;
    top: 40px;
}
#f2{
	left:290px;
	top:-20px;
}
#f3{
	left:620px;
	top:-50px;
}

#f4{
	left:800px;
	top:0;
}

/*copyRight*/

#copyRight{
	color: #4b7000;
    position: absolute;
	left: 50%;
    transform: translateX(-50%);
    top: 70px;
}

#tagsTrigger{
	background-image:url("../images/tagsTrigger.png");
	background-repeat:no-repeat;
	background-position:top center;
	width:51px;
	height:120px;
	cursor:pointer;
	position: absolute;
    top: 170px;
    left: 0;
    z-index: 99;
    display:none;
    transition:left 0.4s;
}

#userLogin label{
	margin-right: 10px;
}

#userLogin .column,
#userLogin .column,
#userLogin .column:-webkit-autofill{
	border:1px solid #333;
	background-color: #fff !important;
	outline:none;
}

#userLogin input#username,#userLogin input#password{
	width: 200px;
}

#userLogin input[type=submit]{
	cursor:pointer;
}

#swf{
	width:954px;
	height:767px;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:999;
}


@media only screen and (max-width:1000px){
	#trigger{
		display:block;
	}
	#header{
		height:146px;
	}

	#logo{
		margin-left: 10%;
		width:250px;
	}

	.login, #nav{
		display:none;
	}

	#content, #content .leftSide{
		height:auto;
	}

	#content .inner{
		background-image:none;
	}

	#content .leftSide{
		margin-right: 10px;
	    left: -164px;
	    transition:left 0.4s;
	    position: absolute;
	    height: 100%;
	}

	#content .leftSide.active{
		left:0;
	}

	#tagsTrigger{
		display:block;
	}

	#tagsTrigger.active{
		left:164px;
		background-position: bottom center;
	}

	#content .rightSide{
		width:calc(100% - 80px);
		margin-left: 60px;
		margin-right:20px;
		min-height:700px;
	    margin-bottom: 30px;
	}

	/* Login */
	#userLogin input#username,#userLogin input#password{
		width: 100%;
	}


	/* Book */
	.book .chapter li{
		width:calc(50% - 3px);
	}

	.book .chapter li a{
		display: block;
		padding-left: 1.5em;
		text-indent: -1.5em;
	}

	.items li{
		display: block;
		width:100%;
	}
	.book .chapter li a:after{
		left:0px;
	}

	#c_website{
		display:none;
	}

	#c_mobile{
		display:inline-block;
	}

	#footer .inner{
	    left:0;
	    margin: 0;
	    margin-top: -13%;
	}

	#footer img {
	    width: 17%;
	}

	#f1 {
	    left: 5%;
	    top: 40px;
	}

	#f2 {
	    left: 26%;
	    top: -35px;
	}

	#f3 {
	    left: 57%;
	    top: -50px;
	}

	#f4 {
	    left: 77%;
	    top: -16px;
	}
}

@media only screen and (max-width:570px){
	#c_mobile{
		display:none;
	}

	#logo{
	    display: block;
	    margin: 0px auto;
	    padding-top: 15px;
	    width: 250px;
	}

	#f1 {
	    left: 5%;
	    top: 15px;
	}

	#f2 {
	    left: 26%;
	    top: -20px;
	}

	#f3 {
	    left: 57%;
	    top: -40px;
	}
	
	#f4 {
	    left: 77%;
	    top: -6px;
	}
}

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}


/*page*/
h1{
    font-size: 1.6em;
    text-indent: 5px;
    height: 25px;
    line-height: 1;
    margin-top: 30px;
}

h4{
	margin-bottom: 0;
	font-size:1.3em;
	color:#008fd1;
}

ul{
	margin-top: 5px;
}