div img{	width: 100%;display: block;	}
table{width: 100%;}
ol,ul{    padding-left: 1.5em;margin: 0;    display: inline-block;}
h1,h2,h3,h4,h5,h6{font-family: CGuLiHK-Bold-B5pc-H, CGuLiHK"Microsoft JhengHei","微軟正黑體","Heiti tc",  Arial, "新細明體", "PMingLiU", "細明體", "MingLiU", Helvetica, sans-serif;    font-weight: 700;}
.font-no-w{font-weight: normal;}
/* a{text-decoration: none;} */
.padding-100{padding-bottom: 100px!important;}
/*換行*/
.word-break{-ms-word-break: keep-all; word-break: keep-all;}
/*直式文字*/
.text_ver{writing-mode: tb-rl;direction: ltr;-webkit-writing-mode: vertical-lr;writing-mode: vertical-lr; }
.flexBox{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    -ms-align-items: stretch;
    align-items: stretch;
}
.flexBox>div{min-height: 1em;}
.flexBox>div>div{height: 100%;}
.flexBox.aingn-center{-ms-align-items: center;align-items: center;}
#page section{max-width: 1000px;margin:auto;}
@media screen and (min-width:1000px){
.show-medium{display: none;}
}
@media screen and (min-width:600px){
.show-small{display: none;}
.padding-lr{padding: 0.75em 2em;}
}
@media screen and (min-width:350px){
.show-tiny{display: none;}
}
/*-----------------------------------------顏色、背景-----------------------------------------*/
body{background: #dbb584;color: #6a3906}
#ban{background:url('../images/index-bg.png')top center no-repeat;background-size: 100% 100%;}
/*-------------------------------------END-顏色-----------------------------------------*/
/*-----------------------------------------按鈕-----------------------------------------*/
/*底部滑動橫條*/
#bottom{
    position: fixed;
    bottom: 0;
    width: 100%;
    min-height: 2em;
    z-index: 10000;
    text-align: center!important;
    /* background-color: rgba(255,255,255,0.5); */
}
#goTop{position: absolute;top:-2em;right: 1em;width: 3em;height: 3em;padding: 0.5em;}
@media screen and (max-width:601px){
#bottom>div>a{    padding: 2%;    line-height: 1.2;}
}
/*側邊line@群組*/
.ask {
    color: #fff;
    background: #31B387;
    background: url('../images/index-btn.png');
    background-size: 100% 100%;
    line-height: 1;
    position: fixed;
    top:45vh;    right: 0.5em;
    padding: 0.75em;
    border-radius: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    outline: 0;
    line-height: 1.25;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    /* overflow: hidden; */
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
-webkit-filter:hue-rotate(110deg)brightness(110%);
-o-filter:hue-rotate(110deg)brightness(110%);
filter:hue-rotate(110deg)brightness(110%);
}

#SidebarL{padding-bottom: 1em;}
#SidebarL::-webkit-scrollbar {    display: none;}
#SidebarL>h5,#SidebarL a{padding-left: 1em;}
/*按鈕*/
.go_btn,.more_btn,#askLine{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    outline: 0;
    line-height: 1.25;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    /* overflow: hidden; */
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}

.go_btn{
    display: inline-block;
    color: white;
    background: url('../images/index-btn.png');
    background-size: 100% 100%;
    width: 4em;
    padding: 1em;
    margin: 0.2em 0.1em;
    line-height: 1;
    border-radius: 100%;
    font-weight: 800;
}
@media screen and (min-width:1000px){
.go_btn{font-size: 30px}
}
.more_btn:hover,.go_btn:hover,#page #a01 td h6:hover{
box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.5), 0 0.3em 0.75em 0 rgba(0,0,0,0.2); 
-webkit-filter:hue-rotate(-20deg)brightness(160%);
-o-filter:hue-rotate(-20deg)brightness(160%);
filter:hue-rotate(-20deg)brightness(160%);
}
.more_btn {
    display: inline-block;
    margin: 0 auto 1em;
    padding: 0.25em 2em;
    background: #7f4f21;
    color: white;
    position: relative;
}

.more_btn span{
    display: inline-block;
    color: white;
    background: url(../images/index-btn-icon.png);
    background-size: 100% 100%;
    width: 3em;
    height: 1.5em;
    position: absolute;
    right: -1.5em;
    top: 0.5em;
    z-index: 1;

    animation-name: stretchLeft;
    -webkit-animation-name: stretchLeft;    

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    

    transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%; 
    animation-iteration-count: infinite;
}

@keyframes stretchLeft {
    0% {
        transform: scaleX(0.3);
    }
    40% {
        transform: scaleX(1.02);
    }
    60% {
        transform: scaleX(0.98);
    }
    80% {
        transform: scaleX(1.01);
    }
    100% {
        transform: scaleX(0.98);
    }               
    80% {
        transform: scaleX(1.01);
    }
    100% {
        transform: scaleX(1);
    }                           
}

@-webkit-keyframes stretchLeft {
    0% {
        -webkit-transform: scaleX(0.3);
    }
    40% {
        -webkit-transform: scaleX(1.02);
    }
    60% {
        -webkit-transform: scaleX(0.98);
    }
    80% {
        -webkit-transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(0.98);
    }               
    80% {
        -webkit-transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(1);
    }       
}
/*-------------------------------------END-按鈕-----------------------------------------*/
/*----------------------------------------- BAN區塊-----------------------------------------*/
#page #ban section{
    height: 85vh;
    max-height: 994px;
    background: url('../images/index-ban-s.png')center top no-repeat;
    background-size: 100% 100%;
}
@media screen and (min-width:601px){
#page #ban section{
    height: 50vw;
    max-height: 463px;
    background: url(../images/index-ban-l.png)center top no-repeat;
    background-size: 100% 100%;
}
}
#page #btns { margin-top: 1em;    }
#page #btns .btn{background: #40220f;color:white;}
/*-------------------------------------END-BAN區塊-----------------------------------------*/
#page h1.title{
    color: white;
    background: url(../images/index-title.png)center center no-repeat;
    background-size: 116% 100%;
    padding: 2em 0.5em;
    line-height: 1;
    position: relative;
    z-index: 1;
}

@media screen and (min-width:601px){
#page h1.title{
    background: url('../images/index-01-title.png')center top no-repeat;
    background-size: 100% 100%;
    color: rgba(255, 255, 255, 0);
    padding: 2em 0;
    margin: auto;
    min-height: 4.5em;
    max-width: 1000px
}
#page #a02 h1.title{background-image: url('../images/index-02-title.png')}
#page #a03 h1.title{background-image: url('../images/index-03-title.png')}
#page #a04 h1.title{background-image: url('../images/index-04-title.png')}
#page #a05 h1.title{background-image: url('../images/index-05-title.png')}
}
/*----------------------------------------- 區塊a01 -----------------------------------------*/
#a01 {color: black;}
#a01 section .title {
    background: url(../images/index-01-1.png)center center no-repeat;
    background-size: 100% 100%;
    text-align: center;
    color: white;
    padding: 0.25em;
    max-width: 5em;
}
#a01 section .rest {
    margin-bottom: 0.75em;
    padding: 0.5em 0.25em;
}
@media screen and (max-width:601px){
#a01  {font-size: 0.8em}
#page #a01 h1.title span{color: yellow;}
#page #a01 h1.title{padding: 3em 0;
    background-size: 120% 125%;
    background-position: -0.6em;
    z-index: 0;
}
#a01 section .rest {
    clear: both;
    padding-left: 0.5em;
}
}
/*-------------------------------------END- 區塊a01 -----------------------------------------*/
/*----------------------------------------- 區塊a02 -----------------------------------------*/
#page #a02 h1.title{margin-bottom:-2em;}
#page #a02 .news{
    background: url('../images/index-02-1.png')center top no-repeat;
    background-size: 100% 100%;
    padding: 7em 2em 4em;
    max-width: 1280px;
    margin: auto;
    margin-top: -9em;
}
#page #a02 .news p{
max-width: 34.5em;
line-height: 1.25em;
text-align: left;
}
#page #a02 .flexBox>*{
    background: url('../images/index-02-3.png')center center no-repeat;
    background-size: 100% 100%;
    padding: 1em;
    color: white;
    margin: 0.25em 0.5em;
}
@media screen and (max-width:901px){
#page #a02 .news{
    background-size: cover;}

#page #a02 .flexBox>*{
    font-size: 1.25em;
}
}
/*-------------------------------------END- 區塊a02 -----------------------------------------*/
/*----------------------------------------- 區塊a03 -----------------------------------------*/
#page #a03 h1.title{margin-bottom:-2em;}
#page #a03 h2 {
color: #e60012;
    background: url('../images/index-03-1.png')center bottom no-repeat;
    background-size: 15em 0.5em;
}
#page #a03 div svg{
    max-width: 650px;
}
/*-------------------------------------END- 區塊a03 -----------------------------------------*/
/*-------------------------------------END- 區塊a04 -----------------------------------------*/
#page #a04 .row-padding{color: white;background: url('../images/index-04-2.png')center center no-repeat;}
#page #a04 .row-padding span.text-yellow{
    background: black;
    line-height: 1;
    border-radius: 100%;
    padding: 0.25em 0.5em;
    margin-top: -2em;
    margin-left: -1em;
    vertical-align:text-top;
}
@media screen and (max-width:601px){
#page #a04 .row-padding{padding:0;    background-size: cover;}
#page #a04 .name {
    width: 20em;
    height: 15em;
    background: url(../images/index-04-1.png)top -2.5em left -7em no-repeat;
    background-size: 20em 15em;
    padding: 2em 1em;
    text-align: left;
}
#page #a04 .row-padding:nth-child(even) .name {
    text-align: right;
    float: right;
    background-position: top -2.5em right;
    padding-right: 5em;
    margin-bottom: -2em;
}
#page #a04 .s12 {
    background: url(../images/index-04-2.png)center center no-repeat;
    background-size: cover;
    text-align: left;
    padding: 0em 2em 2.5em 2em;
    margin-top: -5em;
    text-shadow: 0 0 1em black;
    text-indent: 2em;
}
}
@media screen and (min-width:601px){
#page #a04 .row-padding{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -o-flex-wrap: nowrap;
    flex-wrap: nowrap;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    background-position:top 1.5em left 3em;
    background-size: 150% 80%;
    margin-top: -4em;
    color: white;
}
#page #a04 .name {
    width: 30em;
    height: 15em;
    margin: 0;
    margin-left: -1em;
    background: url(../images/index-04-1.png)top center no-repeat;
    background-size: 100% 100%;
    padding: 4.5em 0 0 2em;
}
#page #a04 .s12 {
    background: url('../images/index-04-2.png')center center no-repeat;
    background-size: 100% 100%;
    text-align: left;
}
}
/*-------------------------------------END- 區塊a04 -----------------------------------------*/

/*-------------------------------------END- 區塊a05 -----------------------------------------*/
/*-------------------------------------END- 區塊a05 -----------------------------------------*/
/*----------------------------------------- 區塊 buttones -----------------------------------------*/

#page #buttones{}
/*-------------------------------------END- 區塊 buttones -----------------------------------------*/