@charset "utf-8";
@import url("../../css/accesskey-zones.css?t=20260511");
body.bg {
    background: url(../images/bg.png);
    width: 100%;
}

#sb-site,
.sb-site-container {
    background-color: transparent;
}

.sb-slidebar {
    background-color: rgba(255, 255, 255, 0.9);
}

.sb-slidebar.sb-active {
    /*display: block;
    width: 100%;*/
}

.header {
    width: 100%;
    background: url(../images/header_colorbar.png) center 0 repeat-x;
    float: left;
}

.rwd-header {
    display: none;
}

.header-misc {
    width: 100%;
    max-width: 1200px;
    font-size: 0.813rem;
    margin: 0 auto;
    overflow: hidden;
}

.header-misc-logo {
    float: left;
    display: block;
    height: 30px;
    margin: 4px 0;
}

.header-misc-nav {
    float: right;
    margin: 8px 0;
}

.header-misc-nav li {
    list-style: none;
    float: left;
    margin: 0 7px;
}

.header-misc-nav li a {
    color: #333;
    background: #fff;
    display: block;
    padding: 2px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-decoration: none;
}

.header-misc-nav li a:hover {
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
}

.header-top-bg {
    background: url(../images/wavetop.png) center 15px repeat-x;
    / float: left;
    width: 100%;
}


/*---nav----*/

.header-inner {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 65px;
    /*overflow: hidden;*/
}

a.header-logo {
    float: left;
    padding-right: 20px;
    width: 23.5%;
    margin-top: 98px;
}

a.header-logo img {
    width: 100%;
}

.main-nav {
    float: left;
    width: 66%;
    text-align: center;
    margin-bottom: 59px;
}

.main-nav ul li {
    float: left;
}

.main-nav a {
    display: block;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: bolder;
}

.main-nav a:hover {
    color: #F6F6EC;
}

#nav-1,
#nav-2,
#nav-3,
#nav-4,
.nav-5,
.nav-6,
.nav-7,
.nav-8
{
	display: inline-block;
	vertical-align: top;
}

#nav-1 {	
    background: url(../images/cloud_1.png) 7px 0 no-repeat;
    width: 182px;
    height: 55px;
    padding: 35px 0px 0 0px;
    margin-top: 40px;
}

#nav-2 {	
    background: url(../images/cloud_2.png) center 0 no-repeat;
    width: 180px;
    height: 49px;
    padding-top: 43px;
    margin: 45px 0 0 1.5%;
}

#nav-3 {
    background: url(../images/cloud_3.png) center 0 no-repeat;
    width: 132px;
    height: 20px;
    padding: 59px 37px 60px 37px;
    margin-top: 28px;
}

#nav-4 {	
    background: url(../images/cloud_4.png) 0 0 no-repeat;
    width: 156px;
    height: 51px;
    padding-top: 34px;
    margin: 50px 0 0 1.5%;

}

.nav-5 {
    background: url(../images/cloud_5.png) center 0 no-repeat;
    width: 84px;
    height: 20px;
    padding: 31px 45px 27px 45px;
}

.nav-6 {
    background: url(../images/cloud_6.png) center 0 no-repeat;
    width: 125px;
    /* height: 20px; */
    padding: 36px 16px 36px 18px;
}

.nav-7 {
    background: url(../images/cloud_7.png) center 0 no-repeat;
    width: 140px;
    /* height: 20px; */
    padding: 33px 33px 23px 28px;
    margin-top: 9px;
}

.nav-8 {
    background: url(../images/cloud_8.png) center 0 no-repeat;
    width: 140px;
    /* height: 20px; */
    padding: 33px 33px 23px 28px;
    margin-top: 9px;
}





#sun {
    position: absolute;
    right: -34px;
    width: 12.5%;
    top: 189px;
}

#sun img {
    width: 100%;
}

.rwd-nav-wrap {
    width: 100%;
    margin: 20px 0 0 0;
}

.rwd-nav-row {
    width: 90%;
    margin: 0 5%;
    padding: 17px 0 15px 0;
    border-bottom: 1px solid #333;
}

.rwd-nav-row:first-child {
    border-top: 1px solid #333;
}

.rwd-nav-row a {
    display: block;
    text-decoration: none;
    color: #333;
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
}

.rwd-misc-nav a {
    color: #333;
    text-decoration: none;
}

.rwd-misc-nav {
    margin: 3px 5% 0 5%;
    font-size: 1.125rem;
}

.rwd-misc-nav li {
    text-align: center;
    padding: 15px 0;
    border-bottom: 1px dotted #999;
}


/*----index content----*/

.index_content {
    float: left;
    position: relative;
    display: block;
    width: 100%;
    /*background: url(../images/index_bg.png) center top no-repeat;*/
}

.index_character_back {
    position: relative;
    width: 1016px;
    margin: 20px auto 20px auto;
    overflow: hidden;
}

.index_character_back .boy {
    width: 120px;
    float: left;
    position: absolute;
    top: 0;
    left: 146px;
    z-index: 10;
}

.index_character_back .dog {
    width: 86px;
    float: left;
    position: absolute;
    top: 110px;
    left: 50px;
    z-index: 9;
}

.index_character_back .postcar {
    width: 199px;
    float: right;
    margin-top: 38px;
}

.index_character_fornt {
    width: 92%;
    max-width: 1258px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 70px;
}

.family {
    float: left;
    width: 32%;
    max-width: 444px;
    margin-right: 2%;
}

.postman {
    float: left;
    width: 32%;
    max-width: 410px;
    margin-right: 2%;
}

.littledove {
    float: left;
    width: 9%;
    max-width: 120px;
    position: absolute;
    z-index: 9;
    bottom: 0;
    right: 26%;
}

.partner {
    float: left;
    width: 32%;
    max-width: 415px;
}

.boy img,
.dog img,
.postcar img,
.family img,
.postman img,
.littledove img,
.partner img {
    width: 100%;
}


/*-----index exhibition-----*/

.index_exhibition {
    float: left;
    position: relative;
    width: 100%;
    padding: 20px 0;
    background: #7bd5aa;
    top: 93px;
}

.bg_top {
    width: 10%;
    position: absolute;
    z-index: 1;
    bottom: 31px;
    left: -14px;
}

.bg_bottom {
    width: 9%;
    position: absolute;
    z-index: 1;
    right: 15px;
    bottom: 27px;
}

.bg_top img,
.bg_bottom img {
    width: 100%;
}

.title a {
    display: block;
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
    position: absolute;
    bottom: 39px;
    text-align: center;
    width: 100%;
}

.cont_tit {
    position: relative;
}

.index_exhibition_unit {
    color: #fff;
    position: absolute;
    z-index: 10;
    text-align: center;
    width: 14%;
    margin: 0 5.5%;
    top: -117px;
    font-size: 120%;
}

.index_exhibition_unit img {
    width: 100%;
}

.index_exhibition_unit strong {
    position: absolute;
    text-align: center;
    display: block;
    z-index: 15;
    width: 100%;
    bottom: 22%;
    margin-left: 2%;
    font-size: 1.25rem;
}

.index_exhibition_list {
    width: 80%;
    margin: 0 10%;
    float: left;
    text-align: center;
}

.index_exhibition_list .cont_infor {
	width: 33%;
    display: inline-block;
    vertical-align: top;
    margin: 5% 5% 3% 5%;
}

.exhibition {
    box-shadow: 4px 4px 3px rgba(20%, 20%, 40%, 0.5);
    width: 100%;
    border-radius: 20px;
    float: left;
    position: relative;
}

.exhibition_pic img {
    width: 100%;
    border-radius: 20px;
}

.exhibition_cont {
    position: absolute;
    width: 100%;
    bottom: 1px;
}

.exhibition_cont a {
    text-decoration: none;
    color: #5e5e5d;
}

.exhibition_cont a p {
    padding: 7% 14%;
    font-size: 1rem;
    background: url(../images/exhibition_more.png) 5% 50% no-repeat rgba(255, 255, 255, 0.9);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.exhibition_cont a:hover p {
    background: url(../images/exhibition_more.png)5% 50% no-repeat rgba(255, 255, 255, 1);
}

.rwd_index_exhibition_unit {
    background: url(../images/rwd_woodboard.png) no-repeat;
    background-size: contain;
    width: 100%;
    height: 54px;
    color: #fff;
    text-align: center;
    font-size: 1.25rem;
    display: none;
    float: left;
    padding-top: 6%;
}


/*-----footer-----*/

footer {
    position: relative;
    width: 100%;
    float: left;
}

.header-bottom-bg {
    background: url(../images/wavebot.png) center 8px repeat-x;
    height: 47px;
}

.footer-content {
    float: left;
    width: 100%;
    background: #cdcdc5;
    padding: 10px 0;
    line-height: 24px;
}

.footer-wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    font-size: 0.813rem;
    padding: 0 2%;
    text-align: center;
}

.footer-info span {
    margin-right: 20px;
}

span.copyright {
    /* 無障礙：相對單位 rem（原 14.3px，以 16px=1rem 換算） */
    font-size: 0.89375rem;
    font-weight: bolder;
}

.footer-social {
    float: right;
    width: 160px;
    display: none;
}

.footer-info {
    float: left;
    width: 100%;
}

.footer-social li {
    float: left;
    width: 27px;
    height: 27px;
    margin-left: 10px;
}

.footer-social li a {
    display: block;
    width: 27px;
    height: 27px;
    text-indent: -9999px;
}

.footer-social li .icon1 {
    background: url(../images/footer_icon1.png) 0 0 no-repeat;
}

.footer-social li .icon2 {
    background: url(../images/footer_icon2.png) 0 0 no-repeat;
}

.footer-social li .icon3 {
    background: url(../images/footer_icon3.png) 0 0 no-repeat;
}

.pagination {
    text-align: center;
    display: block;
    margin: 30px 0px 30px 0px;
    float: left;
    width: 100%
}

.pagination a {
    padding: 5px 10px;
    color: #333;
    margin: 2px;
    border: 1px solid #777;
    text-decoration: none;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

.pagination a:hover {
    color: #ffffff;
    background: #ccc;
}

.pagination a.disable {
    color: #999999;
    border: 1px solid #bbb;
}

.pagination a.disable:hover {
    color: #999999;
    background: transparent;
}

.pagination a.current {
    color: #ffffff;
    background: #999;
}

.page-control {
    text-align: center;
    display: block;
    margin: 25px 0 30px 0;
    padding-top: 6px;
    float: left;
    width: 100%
}

.page-control a {
    color: #333;
}

.page-control .back {
    padding: 5px 10px;
    margin: 0 9px;
    background: #aaa;
    color: #fff;
    text-decoration: none;
}

.page-control .prev {
    background: url(../images/arr_prev_small.png) left 0 no-repeat;
    padding-left: 27px;
    width: auto;
    display: block;
    text-align: left;
    float: left;
    line-height: 25px;
    margin-top: -6px;
}

.page-control .next {
    background: url(../images/arr_next_small.png) right 0 no-repeat;
    padding-right: 27px;
    width: auto;
    display: block;
    text-align: right;
    float: right;
    line-height: 25px;
    margin-top: -25px;
}

.page-control .back-btn {
    width: 300px;
    margin: 0 auto;
    margin-top: 3%;
}

.page-control .back-btn a {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: url(../images/page_but.png) center top no-repeat;
    padding: 72px 35%;
    background-size: 50%;
}


.index_wrapper1 {
    margin: 0 auto;
    width: 100%;
    background: url(../images/index_bg.png) center top no-repeat;
    display: inline-block;
    /* margin-bottom: 39px; */
    padding-bottom: 364px;
    margin-top: 29px;
}

.index_wrapper2 {
    margin: 0 auto;
    max-width: 1280px;
}

.index_wrapper3 {
    margin: 0 auto;
    max-width: 1400px;
}
/*--*/
.last-date {
    float: left;
    width: 70%;
    text-align: right;
    margin: 32px 15% 0 15%;
  
    
}