﻿
/*
Design by TEMPLATED
http://templated.co
Released for free under the Creative Commons Attribution License
*/
.top{height:25%;padding-bottom:10%;}
.bottom{}
.floor_even{font-size:250%;background-color:FloralWhite  ;width:100%; font-weight: bold;border:solid;border-color:pink;}
.floor_odd{font-size:250%;background-color:FloralWhite  ;width:100%; font-weight: bold;border:solid;border-color:pink;}
#content_table tr td table tr td table tr td{border:ridge;font-size:120%;}
body {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #3B3B3B;
}

h1, h2, h3 ,h4{
	margin: 0px;
	padding: 0px;
	letter-spacing: 0px;
	text-transform: none;
	font-family: 'Arvo', serif;
	font-weight: normal;
	color: #0285CE;
	font-weight: bold;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 2.4em;
}

h3 {
	font-size: 1.3em;
}
h4 {
	font-size: 1.2em;
	color: black;
}
p, ol {
	font-size: 18px;
	margin-top: 0;
	line-height: 120%;
	
}

ul, ol {
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/





ul { /* 取消ul預設的內縮及樣式 */
        margin: 0;
        padding: 0;
        list-style: none;
        font-weight: bold;
        font-family: 'Arvo', serif;
    }

ul.drop-down-menu {
        border: #ccc 0px solid;
        display: inline-block;
        font-size: 16px;
        
    }

    ul.drop-down-menu li {
        position: relative;
        white-space: nowrap;
        border-right: #ccc 0px solid;
        
    }

    ul.drop-down-menu > li:last-child {
        border-right: none;
    }

    ul.drop-down-menu > li {
        float: left; /* 只有第一層是靠左對齊*/
    }

     ul.drop-down-menu a {
     	border-radius: 10px 10px 0px 0px;
        background-color: #E0E0E0;
        color: #333;
        display: block;
        padding: 0 30px;
        margin-bottom: -3px;
        text-decoration: none;
        line-height: 35px;
    }
    #at_rop-down-menu a {
    	border-radius: 10px 10px 0px 0px;
        background-color: #ADADAD;
        color: #333;
        display: block;
        padding: 0 30px;
        text-decoration: none;
        line-height: 35px;
    }
    #at_rop-down-menu a:hover {
    	border-radius: 10px 10px 0px 0px;
        background-color: #ef5c00;
        color: #ffffff;
        display: block;
        padding: 0 30px;
        text-decoration: none;
        line-height: 35px;
    }


    
    ul.drop-down-menu a:hover { /* 滑鼠滑入按鈕變色*/
        background-color: #ef5c00;
        color: #0000ff;
    }
    ul.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
        background-color: #ef5c28;
        color: #ffffff;
    }

	/*第二層*/
    ul.drop-down-menu-2-level a {
     	border-radius: 10px;
        background-color: #E0E0E0;
        color: #333;
        display: block;
        padding: 0 30px;
        margin: 0px;
        text-decoration: none;
        line-height: 35px;
        border-top: #C0C0C0 1px solid;
        border-bottom: #C0C0C0 1px solid;
    }
    #at_rop-down-menu-2-level a {
    	border-radius: 10px;
        background-color: #ADADAD;
        color: #333;
        display: block;
        padding: 0 30px;
        text-decoration: none;
        line-height: 35px;
    }
    #at_rop-down-menu-2-level a:hover {
    	border-radius: 10px;
        background-color: #ef5c00;
        color: #ffffff;
        display: block;
        padding: 0 30px;
        text-decoration: none;
        line-height: 35px;
    }


ul.drop-down-menu ul {
        border: #ccc 0px solid;
        position: absolute;
        z-index: 99;
        left: -1px;
        top: 100%;
       	min-width: 100%;
       	text-align: center;
    }

    ul.drop-down-menu ul li {
    	border-radius: 10px;
        border-bottom: #ccc 1px solid;
    }
    ul.drop-down-menu ul li a {
        background-color: #F5F5F5;
    }


    ul.drop-down-menu ul li:last-child {
        border-bottom: none;
    }

    ul.drop-down-menu ul ul { /*第三層以後的選單出現位置與第二層不同*/
        z-index: 999;
        top: 10px;
        left: 90%;
    }


ul.drop-down-menu ul { /*隱藏次選單*/
        display: none;
    }

    ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/
        display: block;
    }










/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

a {
	
	text-decoration: none;
	color: #0285E6;
}

a:hover {
	text-decoration: underline;
}

/* Header */

#header-wrapper {
}

#header {
	clear: both;
	width: 1200px;
	margin: 0px auto;
	}
.row-3 {
	padding: 0px 0px 0px 0px
	}
.site-nav {
	background:url(../images/.gif) no-repeat left top;
	width:100%;
	overflow:hidden
	}
.site-nav li {
	display:inline;
	}
.site-nav li a {
	display:block;
	float:left;
	background:url(./images/menu_buttom1.png) repeat right top;
	height:55px;
	line-height:55px;
	color:#000000;
	text-decoration:none;
	text-transform: none;
	text-align:center;
	font-family:Microsoft JhengHei;
	font-weight:bolder;
	font-size:20px;
	padding: 0 18px;
	border-style:solid;
	border-width:1px;
	border-color:#ffffff;
	}
.site-nav li a:hover {color:#c72d00; background:url(./images/menu_buttom2.png) repeat right top}
.site-nav li a:active {color:#c72d00; background:url(./images/menu_buttom3.png) repeat right top}


/* Logo */

#logo {
	margin: 0px;
	padding: 30px 0px;
	color: #000000;
}

#logo h1, #logo p {
	margin: 0;
	padding: 0;
}

#logo h1 {
	margin: 0px;
	padding: 0px;
	text-transform: lowercase;
	font-size: 3.8em;
	color: #323030;
}

#logo h1 span {
	color: #0285CE;
}

#logo p {
	margin: 0px;
	padding: 0px;
	text-transform: uppercase;
	font-family: 'Arvo', serif;
	color: #3B3B3B;
}

#logo p a {
	color: #3B3B3B;
}

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #323030;
}

/* Search */

#search {
	width: 320px;
	height: 60px;
	padding: 0px;
}

#search form {
	margin: 0px;
	padding: 0px;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search-text {
	width: 250px;
	outline: none;
	background: #F5F0E7;
	border: 1px solid #D7D0C0;
	padding: 10px;
	text-transform: lowercase;
	font: normal 14px Arial, Helvetica, sans-serif;
	color: #454545;
}

#search-submit {
	width: 62px;
	height: 22px;
	display: none;
	border: none;
	color: #FFFFFF;
}

/* Menu */

#menu-wrapper {
	overflow: hidden;
	width: 200px;
	height: 100%;
	background: ;
}

#menu {
	border-radius: 10px;
	width: 200px;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

#menu ul {
	border-radius: 10px;
	margin: 0;
	padding: 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	border-radius: 10px;
	float: none;
}

#menu a {
	border-radius: 10px;
	width: 210px;
	display: block;
	letter-spacing: 1px;
	line-height: 28px;
	padding: 8px 0px;
	margin: 5px 1px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Arvo', serif;
	font-size: 23px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
	background: #0093FF;
}
#hightlight_menu_a a{
	border-radius: 10px;
	width: 200px;
	display: block;
	letter-spacing: 1px;
	line-height: 25px;
	padding: 8px 0px;
	margin: 5px 1px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Arvo', serif;
	font-size: 20px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
	background: #BF0060;
}
#menu a:hover{
	background: #007500;
	text-decoration: none;
	color: #FFFFFF;
}

#current_page_item a {
	background: #0193CC;
	color: #FFFFFF;
}
#sub_current_page_item a{
	background: #0193CC;
	color: #FFFFFF;
}
/*content_menu*/
#content_menu{
	width: 100%;
	height: 32px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	background: #FFFFFF;
}
#content_menu  a {
	margin-bottom: 0px;
	align: center;
	border-radius: 10px 10px 0px 0px;
	width: 180px;
	display: block;
	letter-spacing: 1px;
	line-height: 30px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	text-align: center;
	text-transform: none;
	font-family: 'Arvo', serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	border: none;
	background: #E0E0E0;
}

#in_content_menu a{
	margin-bottom: 0px;
	align: center;
	border-radius: 10px 10px 0px 0px;
	width: 180px;
	display: block;
	letter-spacing: 1px;
	line-height: 30px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	text-align: center;
	text-transform: none;
	font-family: 'Arvo', serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	border: none;
	background: #ADADAD;
}

#content_menu_mini  a {
	margin-bottom: 0px;
	align: center;
	border-radius: 10px 10px 0px 0px;
	width: 180px;
	display: block;
	letter-spacing: 1px;
	line-height: 30px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Arvo', serif;
	font-size: 15px;
	font-weight: bold;
	color: #000000;
	border: none;
	background: #E0E0E0;
}
#in_content_menu_mini a{
	margin-bottom: 0px;
	align: center;
	border-radius: 10px 10px 0px 0px;
	width: 180px;
	display: block;
	letter-spacing: 1px;
	line-height: 30px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Arvo', serif;
	font-size: 15px;
	font-weight: bold;
	color: #000000;
	border: none;
	background: #ADADAD;
}

#content_menu a:hover{
	margin-bottom: 0px;
	background: #007500;
	text-decoration: none;
	color: #FFFFFF;
}
/*sub_menu*/
#sub_menu{
	width: 100%;
	/* height: 200px; */
	margin-top: 0px;
	margin-right: 0px;
	background: #FFFFFF;
}
#sub_menu  a {
	align: center;
	border-radius: 10px;
	width: 236px;
	display: block;
	letter-spacing: 1px;
	line-height: 30px;
	padding: 0px 0px 0px 0px;
	margin: 1px 1px 0px 0px;
	text-decoration: none;
	text-align: center;
	text-transform: capitalize;
	font-family: 'Arvo', serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	border: none;
	background: #E0E0E0;
}

#in_sub_menu a{
	align: center;
	border-radius: 10px;
	width: 236px;
	display: block;
	letter-spacing: 1px;
	line-height: 30px;
	padding: 0px 0px 0px 0px;
	margin: 1px 1px 0px 0px;
	text-decoration: none;
	text-align: center;
	text-transform: capitalize;
	font-family: 'Arvo', serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	border: none;
	background: #ADADAD;
}

#sub_menu a:hover{
	background: #007500;
	text-decoration: none;
	color: #FFFFFF;
}
/* bg */

#bg {
	background: #BEBEBE	;
}
#b_bg {
	background: #000079;
	align: center;
	width: 1230px;
	margin: 0px auto;
}
#f_bg {
	background: white;
	align: center;
	width: 1200px;
	margin: 0px auto;
}
/* Page */

#page {
	
	overflow: hidden;
	width: 1200px;
	margin: 0px auto;
	padding: 8px 0px;
}
/* menu_link */

#menu_link{
	float: left;
	width: 1200px;
	height: 50px;
	border-style: none;
	border-width: 2px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style-type:none;
}
#menu_link ul{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
#menu_link ul li{
	float: left;
	height: 50px;
	list-style-type:none;
	border-style: none;
	border-width: 1px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
/* sidebar_content */
#sidebar_content {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	float: left;
	width: 200px;

	border-style: solid;
	/*border-width: 2px;*/
	background-color: lightblue;
}

/* content_table */

#content_table {
	padding: 0px 0px 0px 2px;
	margin: 0px 0px 0px 0px;
	float: left;
}

#content_table tr td{

}
/* Content */
#content {
	border-radius: 10px;
	padding: 5px 30px 5px 30px;
	margin: 0px 15px 0px 15px;
	float: left;
	width: 900px;
	border-style: solid;
	border-width: 2px;
}
.separate_line {
	margin-top: 0px;
	border-bottom: 2px solid #272727;
}

.post {
	margin-bottom: 10px;
	border-bottom: 1px dashed #D8D8D8;
}

.post-bgtop {
}

.post-bgbtm {
}

.post .title {
	height: 38px;
	margin-bottom: 0px;
	padding: 0px 0 0 0px;
	font-size: 32px;
}

.post .title a {
	border: none;
	color: #0285CE;
}

.post .meta {
	margin-bottom: 30px;
	padding: 5px 0px 15px 0px;
	text-align: left;
	font-weight: normal;
}

.post .meta .date {
	float: left;
}

.post .meta .posted {
	float: right;
}

.post .meta a {
}

.post .entry {
	padding: 0px 0px 20px 0px;
	padding-bottom: 20px;
	text-align: justify;
}

.links {
	height: 30px;
	padding: 30px 0px 0px 0px;
	font-size: 14px;
	font-weight: normal;
	color: #1C1C1C;
}

/* Sidebar */

#sidebar {
	float: none;
	height: 100%;
	width: 200px;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	color: #3B3B3B;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin: 0;
	padding: 0;
}

#sidebar li ul {
	margin: 0px 0px;
	padding-bottom: 0px;
}

#sidebar li li {
	border-bottom: 1px dashed #D8D8D8;
	margin: 0px 0px;
	padding: 5px 0px;
	border-left: none;
}

#sidebar li li a {
	color: #3B3B3B;
}

#sidebar li li span {
	display: block;
	padding: 0;
	font-size: 11px;
	font-style: italic;
}

#sidebar h2 {
	padding-bottom: 20px;
	font-size: 1.8em;
	color: #0285CE;
}

#sidebar p {
	margin: 0px 0px 40px 0px;
	padding: 0px;
	text-align: justify;
}

#sidebar a {
	border: none;
}
/*
#sidebar a:hover {
	text-decoration: underline;
}*/

/* Calendar */

#calendar {
}

#calendar_wrap {
	padding: 20px;
}

#calendar table {
	width: 100%;
}

#calendar tbody td {
	text-align: center;
}

#calendar #next {
	text-align: right;
}

/* Footer */

#footer {
	width: 1200px;
	height: 240px;
	margin: 0 auto;
	padding: 0px 0 15px 0;
	background: #E9E9E9;
	border-top: 5px solid #D8D8D8;
	font-family: 'Arvo', serif;
}

#footer p {
	margin: 0;
	padding-top: 20px;
	padding-left: 0%;
	line-height: normal;
	font-size: 12px;
	letter-spacing: 2px;
	text-align: center;
	color: #4F4F4F;
}

#footer a {
	color: #8A8A8A;
}

#banner {
	width: 1200px;
	margin: 0px auto;
}

/* building space*/
.abgne_product_arrow_silder {
	width: 900px;
	height: 560px;
	position: relative;
	border: 1px solid #ccc;
	overflow: hidden;
}
.abgne_product_arrow_silder ul, .abgne_product_arrow_silder ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.abgne_product_arrow_silder ul li {
	position: absolute;
	z-index: 1;
}
.abgne_product_arrow_silder ul li.selected {
	z-index: 99;
}
.prev {
	background:url(./images/prev.png) no-repeat;
	width: 95px;
	height: 115px;
	position: absolute;
	left: -48px;	/* ???典椰??*/
	top: 220px;	/* (?憛?-??擃? / 2 */
	z-index: 100;
}
.next {
	background:url(./images/next.png) no-repeat;
	width: 95px;
	height: 115px;
	position: absolute;
	right: -48px;	/* ???典??*/
	top: 220px;	/* (?憛?-??擃? / 2 */
	z-index:100;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*escape */

@import url('https://fonts.googleapis.com/css?family=Roboto:300');

escape {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

escape:first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 20s infinite;
}

escape:last-of-type {
  width:0px;
  animation: reveal 20s infinite;
}

escape:last-of-type span {
  margin-left:-55px;
  animation: slidein 20s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    90% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-850px; }
    10% { margin-left:-850px; }
    20% { margin-left:0px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    10% {opacity:1;width:0px;}
    20% {width:540px;}
    90% {opacity:1;}
    100% {opacity:0;width:540px;}
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*Shiney Buttom*/

@keyframes sheen {
  0% {
    transform: skewY(-45deg) translateX(0);
  }
  100% {
    transform: skewY(-45deg) translateX(12.5em);
  }
}
.wrapper {
  display: block;
  position: absolute;
}

.button {
  padding: 0.75em 2em;
  text-align: center;
  text-decoration: none;
  color: #2194E0;
  border: 2px solid #2194E0;
  font-size: 24px;
  display: inline-block;
  border-radius: 0.3em;
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;  
  text-transform:capitalize;
}
.button:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  height: 100%;
  width: 3em;
  display: block;
  position: absolute;
  top: 0;
  left: -4.5em;
  transform: skewX(-45deg) translateX(0);
  transition: none;
}
.button:hover {
  background-color: #2194E0;
  color: #fff;
  border-bottom: 4px solid #1977b5;
}
.button:hover:before {
  transform: skewX(-45deg) translateX(40em);
  transition: all 0.8s ease-in-out;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*Snow*/

body { background-color:#AEAEAE; }
#snow{
	background: none;
	font-family: Androgyne;
	background-image: url(./images/s1.png), url(./images/s2.png), url(./images/s3.png);
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:1;
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 300s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  20% {background-position: 6000px 6000px, 1200px 2400px, -1200px 1800px;}/*Windy*/
  40% {background-position: 6000px 12000px, 2400px 4800px, -1200px 3600px;}/*No-Windy*/
  60% {background-position: 12000px 18000px, 3600px 7200px, -2400px 5400px;}/*Windy*/
  80% {background-position: 12000px 24000px, 4800px 9600px, -2400px 7200px;}/*No-Windy*/
  100% {background-position: 18000px 30000px, 6000px 12000px, -3600px 9000px;}/*Windy*/
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  100% {background-position: 4000px 10000px, 2000px 4000px, 100px 3000px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  100% {background-position: 5000px 10000px, 2000px 4000px, -1000px 3000px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  100% {background-position: 5000px 10000px, 2000px 4000px, -1000px 3000px;}
}	

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
