#wrapper {
	font-family: Arial, "細明體";
	margin: auto;
	width: auto;
	background-color:#787878;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#header {
	/* background-image: url(string-images/title.png); 
	background-repeat: no-repeat; */
	width:auto;
	height: 260px;
	background-color: #a39e03;
	background-image:url(multiple_images/multipletitle.png);
	background-repeat:no-repeat;
	background-position:center;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	
	font-family: Arial, "細明體";
}

#address{
	position:absolute;
	z-index:2000;
	width:auto;
	left:50px;
	top:220px;
	padding: 0px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	text-emphasis:!important;
	font-size:20px;
	font-weight:bold;
	color:#0015fc;
}


#plumb-line
{
	display:inline;
	color:#FFFFFF;

}
#btn {
	width:100%;
	height:40px;
	margin:auto;

	background-color:#8863e0;
	text-align:center;
}

.button {
    display: inline-block;
    position: relative;
    margin:10px auto;
    padding:0 14px;
	/* padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値;

第一個範例我們給了四個値，分別是上內距、右內距、下內距與左內距，每個値必須用半形空白隔開，第二個範例我們只寫了兩個値，分別是上下內距（相同値）與左右內距（相同値）、第三個範例我們給了三個値，分別是上內距、左右內距與下內距，這樣寫的話左右內距會一樣，第四個範例是簡化的寫法，四個邊的內距都一樣。 */
    text-align: center;
    text-decoration: none;
    font: bold 16px/25px Arial, "細明體";
 
    text-shadow: 3px 3px 3px #666;
 
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
 
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
 
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}
.gray {
    color: #FFFFFF;
 
    background: #888C33; /* Old browsers */
    background: -moz-linear-gradient(top,  #d3d3d3 0%, #888C33 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#888C33)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d3d3d3 0%,#888C33 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d3d3d3 0%,#888C33 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d3d3d3 0%,#888C33 100%); /* IE10+ */
    background: linear-gradient(top,  #d3d3d3 0%,#888C33 100%); /* W3C */
}
.blink {
    animation-duration: 1.1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.blink2 {
    animation-duration: 1.125s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.blink3 {
    animation-duration: 1.145s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink3 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.blink4 {
    animation-duration: 1.165s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink4 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.blink5 {
    animation-duration: 1.185s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink5 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.blink6 {
    animation-duration: 1.2s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.blink7 {
    animation-duration: 1.25s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


#content {
	margin:auto;
	/* margin: 6px 7px 8px 9px 四個邊數值順序是: 上 右 下 左(即順時針方向排列) */
	width:auto;
	background-color:#CFCFCF;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 2em;
	word-wrap:break-word; 
	color:#333333;
	/* padding: 30px; */	
}

/*
#LHCOLUMN {
    position: fixed;
	border:1px solid #666;	
	border-radius:10px 10px 10px 10px;
	-moz-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
	width:160px;
	height:auto;
    
    left:10px;
    top: 320px;
    padding: 8px 8px;
	/* padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値;

第一個範例我們給了四個値，分別是上內距、右內距、下內距與左內距，每個値必須用半形空白隔開，第二個範例我們只寫了兩個値，分別是上下內距（相同値）與左右內距（相同値）、第三個範例我們給了三個値，分別是上內距、左右內距與下內距，這樣寫的話左右內距會一樣，第四個範例是簡化的寫法，四個邊的內距都一樣。 */
/*	text-align:center;
	font-size: 15px;
	line-height:22px;
    background-color:none;
	

    color: #f5f5f5;
	text-shadow: 3px 3px 3px #666666;
    /* cursor: pointer; */
/*    z-index: 3000;
}
*/

h1 {
	width: 80%;
	border-bottom:2px dotted #cc6600;
	margin-top:20px;
	margin-bottom:10px;
	padding-top:0px;
	padding-bottom:5px;
	font-size:18px;
	font-weight:bold;
	color:#f90;
	font-family:Tahoma, Geneva, sans-serif;
	
	letter-spacing:1px;
}

.shuttlecock{
	table-layout:auto;
	width:100%;
	background-color: #FFF;
	margin:auto;
	border-radius:15px 15px 15px 15px;
	padding-top:20px;
	padding-left: 0px;
	margin-left:auto;
	margin-right:auto;
}
.shuttlecock .shuttlecock-1{
	text-align:center;
}
.shuttlecock .shuttlecock-2{
	text-align:center;
}

.racket{
	margin:auto;
	/* margin: 6px 7px 8px 9px 四個邊數值順序是: 上 右 下 左(即順時針方向排列) */
	width:100%;
	background-color:#2f32f5;
	border-radius:15px 15px 15px 15px;
	padding-top:40px;
	padding-bottom:100px;
	padding-left:50px;
	padding-right:50px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:50px;
	
	font-family:Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 2em;
	word-wrap:break-word; 
	color:#333333;
	/* padding: 30px; */;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 2em;
	word-wrap:break-word; 
	color:#333333;
	/* padding: 30px; */
}




.tank1{
	margin:auto;
	border-radius:15px 15px 15px 15px;
	/* [規則 1] 使用 border-radius 時，各角的弧形半徑參數是依順時針的順序來指定的：左上、右上、右下、左下。
	[規則 2]
若右下沒有指定，就沿用左上的設定，若左下未指定，則與右上同。簡單的說，就是沿用對角啦。如果右上沒有指定呢？那就使用左上角的設定。 */
	background-color:#fcb1b6;
	
	
	/* margin: 6px 7px 8px 9px 四個邊數值順序是: 上 右 下 左(即順時針方向排列) */
	padding:20px 0px 30px 0px;
	/* padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値; */
	
/* 	https://kknews.cc/code/z2nnxnq.html
	淺談CSS美化字體（平分字體） */
}
.tank1-1{
	margin-left:1em;
	margin-right:1em;

}
.tank2{
	margin:auto;
	border-radius:15px 15px 15px 15px;
	background-color:#fffb8c;
	padding:36px 0px 14px 0px;
	
	
/* 	https://kknews.cc/code/z2nnxnq.html
	淺談CSS美化字體（平分字體） */
}
.tank2-1{
	margin-left:1em;
	margin-right:1em;
    font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	font-weight:bold;
}

/*
.five-column {
	margin-left:10em;
	margin-right:1em;
  padding: 1em;
  -ms-column-count: 5;
  -ms-column-gap: 1em;
  -o-column-count: 5;
  -o-column-gap: 1em;
  
  -moz-column-count: 5;
  -moz-column-gap: 1em;
  -webkit-column-count: 5;
  -webkit-column-gap: 1em;
  column-count: 5;
  column-gap: 1em;
  column-rule-width: thin;
  column-rule-style: solid;
  column-rule-color: black;
}
*/

.tank3{
	margin:auto;
	border-radius:15px 15px 15px 15px;
	background-color:#e6ffb3;
	padding:30px 0px 30px 0px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;

/* 	https://kknews.cc/code/z2nnxnq.html
	淺談CSS美化字體（平分字體） */
}
.tank3-1{
	display:inline-block;
	margin-left:1em;
	margin-right:1em;
	text-align:center;
	vertical-align: middle;

}
.tank3-1 .picture {
	width:8em;
	height:3.8em;
	display:inline-block;
	margin:0px auto;
	border:1px solid; #999999;
	/* border: 邊框粗細 邊框顏色 邊框樣式 ;*/
	float:left;
}
.tank3-1 .name {
	width:9em;
	height:3.8em;
	display:inline-block;
	margin:0px auto;
	border:1px solid; #999999;
	float:left;
}
.tank3-1 .dimension {
	width:6em;
	height:3.8em;
	display:inline-block;
	margin:0px auto;
	border:1px solid; #999999;
	float:left;
}
.tank3-1 .price {
	width:5em;
	height:3.8em;
	display:inline-block;
	margin:0px auto;
	border:1px solid; #999999;
	float:left;
}
.tank3-1 .description {
	width:16em;
	height:3.8em;
	display:inline-block;
	margin:0px auto;
	border:1px solid; #999999;
	float:left;
	
}
.tank3-2{
	display:inline-block;
	vertical-align:middle;
	margin-left:15.5em;
	margin-right:1em;
	text-align:center;
	
}
.tank3-2 .picture {
	width:8em;
	height:8.2em;
	display:inline-block;
	margin:0px auto;
	border:1px solid; #999999;
	
	/* border: 邊框粗細 邊框顏色 邊框樣式 ;*/
	float:left;
}
.tank3-2 .name {
	width:9em;
	height:8.2em;
	display:inline-block;
	margin:0px auto;
	border:1px solid; #999999;
	float:left;
}
.tank3-2 .dimension {
	width:6em;
	height:8.2em;
	display:inline-block;
	margin:0px auto;
	border:1px solid; #999999;
	float:left;
}
.tank3-2 .price {
	width:5em;
	height:8.2em;
	display:inline-block;
	margin:0px auto;
	border:1px solid; #999999;
	float:left;
}
.tank3-2 .description {
	width:16em;
	height:8.2em;
	display:inline-block;
	margin:0px auto;
	border:1px solid; #999999;
	float:left;
}
.tank4{
	margin:auto;
	border-radius:15px 15px 15px 15px;
	background-color:#f2d3ae;
	padding:30px 0px 30px 0px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;

/* 	https://kknews.cc/code/z2nnxnq.html
	淺談CSS美化字體（平分字體） */
}
.tank5{
	margin:auto;
	border-radius:15px 15px 15px 15px;
	background-color:#8cfaf8;
	padding:30px 0px 30px 0px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;

/* 	https://kknews.cc/code/z2nnxnq.html
	淺談CSS美化字體（平分字體） */
}

#column0{
	/* position: absolute; 
	margin-left:0px;*/
	
	background-color:#ffffff;
	margin:auto;
	padding:0px;
	
    width:auto;
	height: auto;
}

.column1{
	position: absolute;
	z-index:3000;
	
	background-color:#adf573;
	-moz-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
    -o-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
    -ms-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
    box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
	
	width:15%;
	height:auto;
	margin-left:10px;
/*	left:0px; */
	top:340px;
	margin-right:15px;
	border-radius:15px;
	padding:0px;
	/* border:dotted;
	border-color:#0000FF; */
	text-align: center;
	text-emphasis:!important;
	font-size:20px;
	font-weight:bold;
	color:#777777;
}

.column2{
	
	/* position: absolute; */
	background-color:#ffffff;
	width:75%; /* 這裡原來是75% */
	height:auto;
	/*left:190px;
	top:340px; */
	margin-right:6px;
	margin-left:250px;
	padding:0px;
	

	text-emphasis:!important;
	font-size:20px;
	font-weight:bold;
	color: #777777;
}

.endtitle{
    position:relative;
  	margin-bottom:80px;
	margin-top:80px;
/*	line-height:140%; */
	word-wrap:break-word;
	font-size:16px;
    font-weight:bold;
    font-family:"Courier New", Courier, monospace;
	line-height: 24px;
	letter-spacing: 3px;
	
  padding:0px;
  text-align:center;
}
.endtitle:before, .endtitle:after {
  content: "";
  width: 42%;
  height: 1.5px;
  position: absolute;
  top:50%; 
}
.endtitle:before {
  background: -webkit-linear-gradient(right, #666 , #eee); 
  background: -o-linear-gradient(left, #666 , #eee); 
  background: -moz-linear-gradient(left,#666 , #eee);
  background: linear-gradient(to left, #666 , #eee); 
  left: 2px;
}
.endtitle:after {
  background: -webkit-linear-gradient(left, #666 , #eee); 
  background: -o-linear-gradient(right, #666 , #eee); 
  background: -moz-linear-gradient(right,#666 , #eee);
  background: linear-gradient(to right, #666 , #eee); 
  right: 2px;
}




#footer {
	/* background-image: url(string-images/foot_bg.png); 
	background-repeat: no-repeat; */
	width:auto;
	height:40px;
	font-size: 12px;
	line-height: 1.5em;
	color:#000000;
	padding:10px;
	margin-bottom:10px;
	
}

#gotop {
    position: fixed;
	border:  0px solid #666;
	/* width: 30px;
	height: 30px; 
    border-radius:50%; */
    right: 30px;
    bottom: 30px;
	width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 40px 25px;
    border-color: transparent transparent #ff0000 transparent;
	
	
   /* padding: 10px 10px; */
	/* padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値;

第一個範例我們給了四個値，分別是上內距、右內距、下內距與左內距，每個値必須用半形空白隔開，第二個範例我們只寫了兩個値，分別是上下內距（相同値）與左右內距（相同値）、第三個範例我們給了三個値，分別是上內距、左右內距與下內距，這樣寫的話左右內距會一樣，第四個範例是簡化的寫法，四個邊的內距都一樣。 */
 /*   text-align:center;
	font-size: 16px;
    background:#544B07;
    color: #f5f5f5;
    cursor: pointer;
    z-index: 4000; */
	
	/*
	
}
*/

}


/*==============以下是純CSS的下拉式選單=============*/



ul { /* 取消ul預設的內縮及樣式 */
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul.drop-down-menu {
        border: ;
        display: inline-block;
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 18px;
    }

    ul.drop-down-menu li {
        position: relative;
        white-space: nowrap;
        border-right: #ccc 1px solid;
    }

    ul.drop-down-menu > li:last-child {
        border-right: none;
    }

    ul.drop-down-menu > li {
        float: left; /* 只有第一層是靠左對齊*/
    }

     ul.drop-down-menu a {
        background-color:  ;
        color: #333;
        display: block;
        padding: 0 30px;
        text-decoration: none;
        line-height: 40px;

    }
    ul.drop-down-menu a:hover { /* 滑鼠滑入按鈕變色*/
        background-color: #ef5c28;
        color: #fff;
    }
    ul.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
        background-color: #ef5c28;
        color: #fff;
    }


ul.drop-down-menu ul {
        border: #ccc 1px solid;
        position: absolute;
        z-index: 99;
        left: -1px;
        top: 100%;
       min-width: 180px;
    }

    ul.drop-down-menu ul li {
        border-bottom: #ccc 1px solid;
    }

    ul.drop-down-menu ul li:last-child {
        border-bottom: none;
    }

    ul.drop-down-menu ul ul { /*第三層以後的選單出現位置與第二層不同*/
        z-index: 999;
        top: 2px; /*原來10px*/
        left: 90%;
    }

ul.drop-down-menu ul { /*隱藏次選單*/
        display: none;
    }

    ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/
        display: block;
    }