@charset "utf-8";
img, object, embed, video {max-width: 100%;border:0px;}
.ie6 img {width:100%;}
.center{
	clear: both;
	float: left;	
	display: block;
	width: 99%;
	margin-left: calc(0.5%);

}

.CenL {
	clear: none;
	float: left;
	margin: 5px 0 0 1%;
	width: 98%;
	display: block;
}
.CenR {
	clear: none;
	float: left;
	margin: 5px 0 5px 1%;	
	width:98%;
	display: block;
}

.C80 {
	clear: none;
	float: left;
	margin: 50px 0 0 10px;
	width: calc(100% - 20px);	
	display: block;
}
.C33 {
	clear: none;
	float: left;
	margin: 1%;	
	width: 98%;
}
.login{
	clear: both;
	float: left;
	padding: 0;
	margin:20px 2%;
	width: 96%;
	display: block;
	background-color: #FAFCFC;
	border-style: dashed;
	border-width: 1px;
	border-color: #999999;
}

.kwidth{
	float: left;		
	width: 98%;
	margin-top: 1px;	
	margin-left: 1%;

	}	
@media only screen and (min-width: 480px) {

.CenL {
	clear: none;
	float: left;
	margin: 5px 2% 5px 2%;
	width:96%;
	display: block;
}
.CenR {
	clear: none;
	float: left;
	margin: 5px 2% 5px 2%;	
	width:96%;
	display: block;
}

.C80 {
	clear: none;
	float: left;
	margin: 50px 0 0 10px;
	width: calc(100% - 20px);	
	display: block;
}
.C33 {
	clear: none;
	float: left;
	margin: 1%;	
	width: 47%;
}
.login{
	clear: both;
	float: left;
	padding: 0;
	margin:20px 5%;
	width: 90%;
	display: block;
	background-color: #FAFCFC;
	border-style: dashed;
	border-width: 1px;
	border-color: #999999;
}

.kwidth{
	float: left;		
	width: 98%;
	margin-top: 1px;	
	margin-left: 1%;

	}	
}
@media only screen and (min-width: 768px) {
.CenL {
	clear: none;
	float: left;
	margin: 5px 0 0 1%;
	width: 98%;
	display: block;
}
.CenR {
	clear: none;
	float: left;
	margin: 5px 0 5px 1%;	
	width:98%;
	display: block;	
}


.C80 {
	clear: none;
	float: left;
	margin: 10px 0 0 10px;
	width: calc(100% - 20px);	
	display: block;
}
.C33 {
	clear: none;
	float: left;
	margin: 1%;	
	width: 47%;
}
.login{
	clear: both;
	float: left;
	padding: 0;
	margin:20px 15%;
	width: 70%;
	display: block;
	background-color: #FAFCFC;
	border-style: dashed;
	border-width: 1px;
	border-color: #999999;
}

.kwidth{
	float: left;		
	width: 90%;
	margin-top: 1px;	
	margin-left: 5%;

	}	
}


@media only screen and (min-width: 1024px) {
.center{
	clear: both;
	float: left;	
	display: block;
	width: 99%;
	margin-left: calc(0.5%);

}	
.CenL {
	clear: none;
	float: left;
	margin: 5px 1% 5px 1%;
	width: 65%;
	display: block;
}
.CenR {
	clear: none;
	float: left;
	margin: 5px 1% 5px 0px;	
	width:32%;
	display: block;
}

.C80 {
	clear: none;
	float: left;
	margin-top: 10px;	
	margin-left: 220px;	
	width: calc(100% - 230px);	
	display: block;
}
.C33 {
	clear: none;
	float: left;
	margin: 1%;	
	width: 31%;
}
.login{
	clear: both;
	float: left;
	padding: 0;
	margin:20px 25%;
	width: 50%;
	display: block;
	background-color: #FAFCFC;
	border-style: dashed;
	border-width: 1px;
	border-color: #999999;
}


.kwidth{
	float: left;	
	width: 60%;
	margin-top: 1px;		
	margin-left: 20%;

	}

}
@media only screen and (min-width: 1280px) {
.center{
	clear: both;
	float: left;	
	display: block;
	width: 1232px;
	margin-left: calc((100% - 1232px) /2);

}	
}
.colortital{
	clear: both;
	float: left;
	width: 100%;
	display: block;
	padding: 1px 0 1px 0;
	margin: 1px 0 0 0;
	color: #FFF;
	font-size: 120%;
	border-bottom-style: dotted;
	border-bottom-color: #333333;
	text-align: center;
	line-height: 30px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #A2A200;
}

.item{
	clear: both;
	float: left;
	display: block;
	width: 100%;	
	background: -moz-linear-gradient(top, rgba(168,168,168,0.31) 0%, rgba(164,164,164,0) 14%, rgba(163,163,163,0) 17%);
background: -webkit-linear-gradient(top, rgba(168,168,168,0.31) 0%,rgba(164,164,164,0) 14%,rgba(163,163,163,0) 17%);
background: linear-gradient(to bottom, rgba(168,168,168,0.31) 0%,rgba(164,164,164,0) 14%,rgba(163,163,163,0) 17%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fa8a8a8', endColorstr='#00a3a3a3',GradientType=0 );
	border: #ccc 1px solid;
}
.item .UR img{
	width:25px;
}
.C33{
	
	background: -moz-linear-gradient(top, rgba(168,168,168,0.31) 0%, rgba(164,164,164,0) 14%, rgba(163,163,163,0) 17%);
background: -webkit-linear-gradient(top, rgba(168,168,168,0.31) 0%,rgba(164,164,164,0) 14%,rgba(163,163,163,0) 17%);
background: linear-gradient(to bottom, rgba(168,168,168,0.31) 0%,rgba(164,164,164,0) 14%,rgba(163,163,163,0) 17%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fa8a8a8', endColorstr='#00a3a3a3',GradientType=0 );
	border: #ccc 1px solid;
}
.C33 .UR img {
	width:35px;
}
.org {
	background-color: #FF6600;
	color: #FFF;
	font-size:110%;
	font-weight: bold;	
}

.Container{
	clear: both;
	float: left;
	display: block;	
	margin: 0;
	width: 100%;
	padding: 0;
  }
.center{
	padding-bottom: 10px;
	background-color: rgba(100%,100%,100%,0.6);
	background-image: url(images/c_bg.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 85%;
	*height : 1%;	
}
.line{
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin: 0;
	padding: 1px 0 1px 0;
	*height : 1%;	
}
.UL{
	clear: none;
	float: left;
	display: block;
	margin: 1px;
	width: 94px;
	background-color: #CCCCCC;
	color: #333;
	line-height: 30px;
	text-align: right;
	padding: 5px 5px 5px 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;	
	*height : 1%; 
}
.UR{
	clear: none;
	float: left;
	display: block;
	margin: 1px;
	width: calc(99% - 4px - 105px);
	line-height: 30px;
	border-bottom: #999 1px dashed;
	padding: 5px 5px 5px 0;
	*height : 1%;	
	}
.UR img{
	width: 90%;
	height:auto;
	}
.UR input[type="text"],.UR select,.UR textarea ,.UR [type="file"] ,.UR [type="password"]{
    width: calc(100% - 25px);
	padding: 6px 5px;
	}	
.SUL{
	clear: none;
	float: left;
	display: block;
	margin: 1px;
	width: 94px;
	line-height: 30px;
	text-align: right;
	padding: 5px 5px 5px 0;
	background-color: #FFCCCC;
	color: #F36;
	*height : 1%;	
}
.SUR{
	clear: none;
	float: left;
	display: block;
	margin: 1px;
	width: calc(99% - 4px - 105px);
	line-height: 30px;
	border-bottom: #999 1px dashed;
	padding: 5px 5px 5px 0;
	background-color:#F6F6F6;
	*height : 1%;	
	}
.center:after,.line:after,.UL:after,.UR:after,.SUL:after,.SUR:after{
  content : ' ';
  height : 0;
  clear : both;
  display : block;
  visibility: hidden;
}
.linetital{
	clear: both;
	float: left;
	width: 100%;
	display: block;
	padding: 1px 0 1px 0;
	margin: 1px 0 0 0;
	color:#069;
	font-size:120%;
	border-bottom-style: dotted;
	border-bottom-color: #333333;
	text-align: center;
	line-height:30px;
}


/* youtube*/
.youtubecontent{position: relative;padding-top: 10px;height: 0;overflow: hidden;padding-bottom: 56.25%;}
.youtubecontent iframe,.youtubecontent object,.youtubecontent embed {position: absolute;top: 0;left: 2%;min-width: 96%;min-height: 96%;border:0;}

.AD3_BOX{
	display: none;
    position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*border: 0px solid #ccc;*/
	background:rgba(0,0,0,0.0);
	z-index: 1004;
}
.AD3_intro {
	position: relative;
	clear: both;
	display: block;
	width: 300px;
	text-align: center;
	background-color: rgba(0,102,102,1);
	color: #FFF;	
	border: 2px solid #ccc;
	padding: 20px 10px 20px 10px;
	line-height: 22px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-moz-box-shadow: 3px 3px 5px rgba(20%,20%,40%,0.5);
	-webkit-box-shadow: 3px 3px 5px rgba(20%,20%,40%,0.5);
	box-shadow: 3px 3px 5px  rgba(20%,20%,40%,0.5);
	border-radius: 0px;
	z-index: 1005;
	*height : 1%;
} 
/*--------------FOOTER & into*/

@media only screen and (max-width: 479px) {
.fotin{
	clear: both;
	float: left;	
	display: block;
	width: calc(100% - 20px);
	margin-left: calc(0);
	margin-top: 10px;
	padding: 3px 10px 3px 10px;	
	border-top:#ccc 2px solid; 
	line-height:18px;

}
.Into img{
	width: 96%!important;height: auto!important;
	margin:20px 2%;
}
}
@media only screen and (min-width: 480px) {
.fotin{
	clear: both;
	float: left;	
	display: block;
	width: calc(100% - 20px);
	margin-left: calc(0);
	margin-top: 10px;
	padding: 3px 10px 3px 10px;	
	border-top:#ccc 2px solid; 
	line-height:18px;

}
.Into img{
	width: 96%!important;height: auto!important;
	margin:20px 2%;
}
}
@media only screen and (min-width: 768px) {
.Into img{
	width: 90%!important;height: auto!important;
	margin:20px 5%;	
}
}
@media only screen and (min-width: 1024px) {
.fotin{
	clear: both;
	float: left;	
	display: block;
	width: calc(100% - 20px);
	margin-left: calc(0);
	margin-top: 10px;
	padding: 3px 10px 3px 10px;	
	border-top:#ccc 2px solid; 
	line-height:18px;

}
.Into img{
	width: 90%!important;height: auto!important;
	margin:20px 5%;
}
}	
@media only screen and (min-width: 1280px) {
.fotin{
	clear: both;
	float: left;	
	display: block;
	width: 1232px;
	margin-left: calc((100% - 1232px) /2);
	margin-top: 10px;
	padding: 3px 0 3px 0px;	
	border-top:#ccc 2px solid; 
	line-height:18px;

}
.Into img{
	width: 80%!important;height: auto!important;
	margin:20px 10%;
}
}
@media only screen and (min-width: 1680px) {
.Into img{
	width: 70%!important;height: auto!important;
	margin:15px 15%;
}
}
@media only screen and (min-width: 1920px) {

}
.Into img{
	clear: both;
	float: left;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 3px 3px 5px rgba(20%,20%,40%,0.5);
	-webkit-box-shadow: 3px 3px 5px rgba(20%,20%,40%,0.5);
	box-shadow: 3px 3px 5px  rgba(20%,20%,40%,0.5);
}
.fotin{
	font-size:100%;
	letter-spacing:1px;
	line-height:25px;

}
.fot {
	clear: both;
	float: left;
	width: 100%;
	padding: 0;
}
.foBTM {
	clear: both;
	float: left;
	width: 100%;
	padding: 0;
	text-align: center;
	line-height: 30px;
	font-size: 95%;
	color: #333;
}
.listintro{
	clear: none;
	float: left;
	width: calc(100% - 32px);
	display: block;
	padding: 0 15px 7px 15px;
	margin: 0 0 20px 0;
	border:#663 1px solid;
	border-top:0px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: rgba(100%,100%,100%,0.6);
	font-size:105%;
	line-height: 30px;
	letter-spacing:1px;	
}
.newin{
	clear: both;
	float: left;
	display: block;
	width: calc(100% - 14px);
	padding: 7px;
}
/*-----------------------------------頁碼*/
/*頁碼 左右鍵*/
.panext{
	margin: 0 1px 0 1px;
	padding: 2px 10px 2px 10px;
	text-align: center;
	
}
.pacon{
	margin: 0 1px 0 1px;
	padding: 2px 10px 2px 10px;
	background-color: #FFFFFF;
	filter:Alpha(opacity=5);
    background-color: rgba(0,0,0,0.05);
	color: #06080A;
	text-align: center;
	text-decoration: none;
	border: 1px solid #999;	
}
.pacon:hover{
	color: #fff;
    background-color: #06C;	
} 
.paconthis{
	margin: 0 1px 0 1px;
	padding: 2px 10px 2px 10px;
	background-color: #FFF;
	filter: Alpha(opacity=5);
	color: #06080A;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	border: 1px solid #E0E0E0;
}
.IMPS{
	clear: both;
	float: left;
	display: block;
	width: calc(100% - 5px);
	color: #000;
	margin: 10px 0 10px 0;
	padding-left: 5px;
	font-size: 105%;
	line-height: 22px;
	*height : 1%;
}
.IMPS ul{
	margin:0 0 0 0px;
	padding-left:30px;
	/*list-style-type:disc;*/
	list-style: url("images/arrow_05.gif") none outside;
}
.IMPS ul li{
	text-align:left;

}