/*======================================================*/
html, body, header, hgorup, section, nav, aside, footer, div, span, ol, li, figure, figurecaption, img, h1, h2, h3, h4, h5, h6, p, strong, form, tbody, table, tr, td
{
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
}
/*======================================================*/
html, body, header, hgorup, section, nav, aside, footer, div, span, ul, ol, li, img, p, strong, form, tbody, table, tr, td, label, input, textarea, button, select
{
 font-family: '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial;
 font-size: 12pt;
 color: #333333;
}
/*======================================================*/
body
{
 background-color: #cccccc;
 /*background-image: url("../Bg/Bg01.gif");*/
 background-attachment: fixed;
 overflow-y: scroll;
}
/*======================================================*/
input,select
{
 vertical-align: middle;
}
/*======================================================*/
ul
{ 
 margin: 0;
 padding-left: 12pt;
}
/*======================================================*/
nav ul
{

}
/*======================================================*/
a:link
{
 text-decoration: none;
 color: #a56525;
}
/*======================================================*/
a:hover, a:focus
{
 text-decoration: underline; /* 底線 */
 color: #666666;
}
/*======================================================*/
a:visited
{
 text-decoration: none;
 color: #800000;
}
/*======================================================*/
.TEST a:link
{
 color: #eeeeee;
}
.TEST a:hover, .TEST a:focus
{
 color: #ffffff;
}
.TEST a:visited
{
 color: #cccccc;
}
/*======================================================*/
input, textarea, select
{
 border: 1px solid #666666;
 border-radius: 3px;
 padding-left: 5px;
 box-sizing: border-box;
}
/*======================================================*/
button, .ButtonStyle
{
 background-color: #dddddd;
 border: 1px solid #666666; 
 border-radius: 3px;
 color: #333333;
 padding: 5px;
 cursor: pointer;
 vertical-align: middle;
}
/*======================================================*/
table
{
 border: 1px solid #666666; 
}
th
{
 border: 1px solid #666666;
 padding: 0 3px;
 text-align: center;
}
td
{ 
 border: 1px solid #666666;
 padding: 0 3px;
}
/*======================================================*/
.MarginVCenter
{
 margin-left: auto;
 margin-right: auto;
}
/*======================================================*/
.OLClass
{
 list-style-type: decimal-leading-zero;
 margin-left: 17pt;
}
.OLClass li
{
 margin-bottom: 15pt; 
}
/*======================================================*/
.TopBlock
{
 z-index: 99;
 position: fixed;
 width: 100%;
 height: 50px;
 top: 0px;
 background-color: #555555;
 border-bottom-color: #333333;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 box-shadow:0px 0px 5px #000000;
}
.TCBlock
{
 position: absolute;
 width: 100%;
 max-width: 1250px;
 min-width: 1000px;
 left: 0;
 right: 0;
 margin: auto;
}
/*======================================================*/
.CenterBlock
{
 z-index: 4;
 position: absolute;
 width: 100%;
 max-width: 1250px; 
 min-width: 1000px;
 left: 0;
 right: 0;
 margin-top: 50px;
 margin-left: auto;
 margin-right: auto;
}
.Absolute.CenterBlock
{
 height: calc(100% - 50px);
}
/*======================================================*/
.LeftBlock
{
 z-index: 3;
 float: left;
 width: 250px;
 left: 0;
 background-color: #AAAAAA;
 text-align: center;
 box-sizing: border-box;
}
.Absolute.LeftBlock
{
 position: absolute;
 height: 100%;
 top: 0;
 bottom: 0;
}
.LeftBlock_DIV_T
{
 position: relative;
 width: 95%;
 color: #ffffff;
 background-color: #666666;
 margin: 0 auto;
 padding: 3px;
 border: 1px solid #333333;
 box-sizing: border-box;
 font-weight: bold;
 border-bottom-width:0px;
 overflow-x: hidden;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
}
.LeftBlock_DIV_D
{
 position: relative;
 width: 95%;
 color: #ffffff;
 background-color: #666666;
 margin: 0 auto 15pt auto;
 padding: 5px;
 border: 1px solid #333333;
 box-sizing: border-box;
 overflow-x: hidden;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
}
.NoTitle.LeftBlock_DIV_D
{
 border-radius: 5px;
}
.LeftBlock_DIV_T label, .LeftBlock_DIV_D label
{
 color: #ffffff;
}
.LeftBlock_DIV_D ul
{
 margin-bottom: 3px;
}
.LeftBlock_DIV_D strong
{
 color: #e9ce63;
}
/*======================================================*/
.RightBlock
{
 z-index: 1;
 float: right;
 width: calc(100% - 250px);
 max-width: 1000px;
 min-width: calc(1000px - 250px);
 right: 0;
 background-color: #eeeeee;
 box-sizing: border-box;
}
.Absolute.RightBlock
{
 position: absolute;
 height: 100%;
 top: 0;
 bottom: 0;
}
/*======================================================*/
.BottomBlock
{
 z-index:2;
 clear: both;
 width: 100%;
 padding:15px;
 background-color:#666666;
 text-align:center;
 box-sizing: border-box;
 border-top-color:#333333;
 border-top-style:solid;
 border-top-width:3px;
}
/*======================================================*/
.FloatMenu
{
 visibility: visible;
 opacity: 1;
 position: fixed;
 width: 50px;
 height: 50px;
 right: 15pt;
 bottom: 15pt;
 background-color: #ffffff;
 border: 1px solid #999999;
 border-radius: 5px;
 box-shadow: 0 0 3px #cccccc;
 transition: all 0.4s ease-in;
 text-align: center;
 z-index: 99;
 cursor: pointer;
}
.closed.FloatMenu
{
 visibility: hidden;
 opacity: 0;
}
/*======================================================*/
.FHDWidth
{
 width: 1250px;
}
/*======================================================*/
@mxedia(max-width: 1024px)
{
 .TCBlock{width: 1000px;}
 .CenterBlock{width: 100%;}
 .Absolute.CenterBlock{width: 100%; left: 0;}
 .LeftBlock{display: none;}
 .RightBlock{float:none; left: 0; right: 0; margin-left: auto; margin-right: auto;}
 .Absolute.RightBlock{left: 0; right:0;}
 .BottomBlock{width: 1000px; margin-left: auto; margin-right: auto;}
 .FloatMenu{left: calc(50% + 1000px/2 - 50px - 6px);}
}
/*======================================================*/
@media(min-width: 1920px)
{
 .FHDWidth{width: 100%;}
}
/*======================================================*/
.Closed.CLS_LightBox_FG
{
 visibility:hidden;
 opacity:0;
}
.CLS_LightBox_FG
{
 visibility:visible;
 opacity:1;
 position:fixed;
 width:100%;
 height:100%;
 transition:all 0.3s ease-in;
 text-align:center;
 cursor: zoom-out;
 z-index:999;
}
/*======================================================*/
.Closed.CLS_LightBox_BG
{
 visibility:hidden;
 opacity:0;
}
.CLS_LightBox_BG
{
 visibility:visible;
 opacity:0.85;
 position:fixed;
 width:100%;
 height:100%;
 background-color:#000000;
 transition:all 0.3s ease-in;
 text-align:center;
 z-index:999;
}
/*======================================================*/
.Closed.CLS_LoginBox
{
 visibility:hidden;
 opacity:0;
}
.CLS_LoginBox
{
 visibility:visible;
 opacity:1;
 position:fixed;
 width:350px;
 height:150px;
 padding:6px;
 margin-left:-180px;
 margin-top:-75px;
 top:50%;
 left:50%;
 background-color:#FFFFFF;
 border:1px solid #CCCCCC;
 border-radius:5px;
 box-shadow:0 0 3px #CCCCCC;
 transition:all 0.3s ease-in;
 text-align:center;
 z-index:999;
}
/*======================================================*/
.Closed.CLS_LoginBox_BG
{
 visibility:hidden;
 opacity:0;
}
.CLS_LoginBox_BG
{
 visibility:visible;
 opacity:0.75;
 position:fixed;
 width:100%;
 height:100%;
 background-color:#000000;
 transition:all 0.3s ease-in;
 z-index:998;
}
/*======================================================*/
.MenuList li
{
 display: inline-block;
 float: left;
 height: 50px;
 line-height: 20px;
 text-align: center;
 padding:4px 8px;
 box-sizing: border-box;
 background-color: #555555;
 border:1px solid #666666;
}
/*======================================================*/
.VItemClass
{
 height: 400px;
}
.VItemClass li
{
 float: left;
 width:250px;
 height:400px;
 margin-bottom:10px;
 padding:5px;
 overflow:hidden;
 box-sizing: border-box;
 background-color:#FFFFFF;
 border:solid 1px #000000;
 border-radius:8px;
 box-shadow:1px 1px 3px rgba(0,0,0,0.5);
}
/*======================================================*/
.CLS_INFO_LIST
{
 padding: 0px;
}
.CLS_INFO_LIST li
{
 display: block;
}
.CLS_INFO_LIST header, .CLS_INFO_LIST a, .CLS_INFO_LIST footer
{
 display: block;
 width: 100%;
 margin-bottom: 5px;
 padding: 5px;
 overflow: hidden;
 color: #a56525;
 font-weight: bold;
 box-sizing: border-box;
 background-color: #ffffff;
 border: solid 1px #999999;
 border-radius: 5px;
 box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
}
.CLS_INFO_LIST div
{
 color: #a56525;
}

.CLS_INFO_LIST div:hover, .CLS_INFO_LIST div:focus
{
 color: #666666;
 text-decoration: underline; /* 底線 */
}
.CLS_INFO_LIST div:visited
{
 color: #800000;
}

.CLS_INFO_LIST a:hover, .CLS_INFO_LIST a:focus
{
 border: solid 1px #333333;
 box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.CLS_INFO_LIST a:visited
{
 color: #800000;
}

.CLS_INFO_LIST span
{
 border-radius: 5px;
}
.xCLS_INFO_LIST a:nth-child(2n+1)
{
 margin-right: 2%;
}
/*======================================================*/
.CLS_HITEM
{
 padding: 0px;
}
.CLS_HITEM li
{
 text-align: center;
 display: inline-block;
 width: 19%;
 margin-right: 0.6%;
}
.CLS_HITEM header, .CLS_HITEM a, .CLS_HITEM footer
{
 display: block;
 width: 100%;
 margin-bottom: 5px;
 padding: 5px;
 overflow: hidden;
 color: #a56525;
 font-weight: bold;
 box-sizing: border-box;
 background-color: #ffffff;
 border: solid 1px #999999;
 border-radius: 5px;
 box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
}
.CLS_HITEM div
{
 width: 100%;
 height: calc(960px / 5 * 6 / 5);
 overflow: hidden;
 background-color: rgb(51, 51, 51);
 border: 1px solid rgb(102, 102, 102);
 box-sizing: border-box;
 background-position: center top;
 background-size: cover;
 cursor: pointer;
}
.CLS_HITEM a:hover, .CLS_HITEM a:focus
{
 color: #666666;
 text-decoration: underline; /* 底線 */
 border: solid 1px #333333;
 box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.CLS_HITEM span
{
 border-radius: 5px;
}
/*======================================================*/
 .DataTable {border-collapse:collapse;border-color:#AAAAAA;width:100%;}    
 .DataTitleTD {background-color:#333333;color:#FFFFFF;text-decoration:none;text-align:left;font-weight:bold;border-width:1px;border-style:solid;border-color:#000000;}
 .DataImage {text-align:center;vertical-align:middle;}
 .DataDescription {padding:5px;}
 .DataLeftTD {background-color:#666666;color:#FFFFFF;text-decoration:none;text-align:right;padding-right:5px;border-color:#FFFFFF;}
 .DataRightTD a:link {display:block;background-color:#EEEEEE;color:$(link.color);text-align:left;padding-left:2px;border-color:#FFFFFF;}
 .DataRightTD a:visited {background-color:#EEEEEE;color:$(link.visited.color);text-align:left;padding-left:3px;border-color:#FFFFFF;}
 .DataRightTD a:hover {background-color:#DDDDDD;color:$(link.hover.color);text-decoration:underline;text-align:left;padding-left:3px;border-color:#FFFFFF;}
/*======================================================*/
.ArticleImage
{
 cursor: zoom-in;
 border: 1px solid #999999;
 border-radius: 5px;
 box-shadow:1px 1px 3px rgba(0,0,0,0.5);
 display: block;
 margin: auto;
}
.ArticleImage_Caption
{
 width: 100%;
 text-align: center;
 margin-top: 5px;
}
.ArticleLinkImage
{
 border: 1px solid #999999;
 border-radius: 5px;
 box-shadow:1px 1px 3px rgba(0,0,0,0.5);
 display: block;
 margin: auto;
}
/*======================================================*/