@charset "utf-8";
/* CSS Document */
body { margin: 0px; font-weight: normal; font-family: Arial, Helvetica, sans-serif, "微軟正黑體"; background-color: #eeeeee; }
ul,li{margin:0;padding:0;font-weight:normal;}
li{list-style-type:none;margin: 0px;padding: 0px;}
input,form{margin:0;}
a {text-decoration: none;}
a:hover {}
a img {	border-top-width: 0px;	border-right-width: 0px;	border-bottom-width: 0px;
	border-left-width: 0px;	border-top-style: none;	border-right-style: none;
	border-bottom-style: none;	border-left-style: none;}
h1,h2,h3,h4,h5,h6{ margin: 0px; padding: 0px; font-weight: normal; }


.abox_00 { float: left; width: 100%; background-color: rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); position: fixed; top: 0px; z-index: 10; }
.abox_01 { width: 95%; margin-right: auto; margin-left: auto; position: relative; }
.abox_02 { float: right; opacity: 0.2; padding-top: 2px; padding-bottom: 2px; text-align: right; }
.abox_03 {
    float: left;
    font-size: 13px;
    margin-top: 2px;
    color: #CCC;
    position: absolute;
}

.abox_03 a {
    color: #000;
    margin-right: 4px;
    margin-left: 4px;
    padding: 2px;
    background-color: #FFF;
    border-radius: 44px;
    width: 28px;
    height: 22px;
    display: block;
    text-align: center;
    float: left;
    padding-top: 6px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.abox_03 a:hover  { color: #FFF; background-color: #000; }
.abox_04 {}
.abox_05 {}

.work_01 {
    float: left;
    width: 100%;
    padding-bottom: 150px;
    margin-top: 70px;
}

.work_02 { width: 95%; margin-right: auto; margin-left: auto; }
.work_03 {
    float: left;
    width: 33%;
    box-sizing: border-box;
    padding: 15px;
	height: 305px;
}



@media all and (max-width : 768px) { .work_03 { width: 50%;  } }
@media all and (max-width : 480px) { .work_03 { width: 100%;  } }


.work_04 { float: left; width: 100%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); border-radius: 5px; overflow: hidden; height: 250px; background-color: #FFF; max-width: 380px;}
.work_04 > ul { padding: 10px; }
.work_04 img { width: 100%; opacity: 0.3 ; }
.work_04:hover { 

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fff089+0,ffde00+100 */
background: #fff089; /* Old browsers */
background: -moz-linear-gradient(top,  #fff089 0%, #ffde00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fff089 0%,#ffde00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fff089 0%,#ffde00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff089', endColorstr='#ffde00',GradientType=0 ); /* IE6-9 */

 }

.work_04:hover img { opacity: 1; }
.work_05 { text-align: center; float: left; width: 97%; padding-top: 8px; font-size: 15px; font-weight: bold; }

.work_05 a { border-radius: 3px; color: #FFF; background-color: #F00; padding: 3px; font-size: 13px; margin-left: 5px; font-weight: normal; }
.work_05 a:hover { color: #000; background-color: #FFDE00; }

.work_06 { float: left; width: 100%; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #FFDE00; font-size: 50px; font-weight: bold; color: #000; padding-bottom: 10px; text-align: center; 
}
.work_06-1 { font-size: 10px; font-weight: normal; color: #999; }

.work_07 { text-align: center; float: left; width: 100%; font-size: 25px; color: #999; margin-top: 20px; margin-bottom: 8px; border-radius: 10px; padding-top: 5px; padding-bottom: 5px; background-color: #D9D9D9; }
.work_08 { position: absolute; background-color: #FFF; height: 10px; width: 100%; top: 50px; }
.work_09 { font-weight: normal; font-size: 10px; color: #999; }

.btm_01 { background-image: url(image/btm.png); background-repeat: repeat-x; height: 137px; position: fixed; width: 100%; bottom: -70px; float: left; }
.btm_02 { width: 95%; margin-right: auto; margin-left: auto; position: relative; }
.btm_03 { position: absolute; float: left; top: -74px; }
.btm_04 {
    position: absolute;
    right: 0;
}

.btm_05 {}
.btm_05 a {
    display: block;
    color: #000;
    background-color: #FFF;
    border-radius: 50px;
    width: 50px;
    text-align: center;
    height: 50px;
    font-family: "微軟正黑體";
    font-weight: bold;
    float: left;
    box-shadow: 0 0 10px #656565;
    margin-left: 10px;
}


.btm_05 a > ul { padding-top: 15px; }
.btm_05 a:hover { color: #FFF; background-color: #000; }