@import url('mainbanner-flexslider.css');
@charset 'utf-8';

/*place*/
article
{
    display: inline; /*防止IE6双边距*/
    float: left;

    width: 100%;
} article section
{
    width: 100%;
    margin: auto;
} section h3
{
    font-weight: 500;

    float: left;
    clear: both;

    width: 100%;
    margin: 1.0em auto .6em;
    padding: 10px 15px;

    color: #252525;
    border-radius: 2px;
    background: #f7f7f7;
}

section h4 span
{
    font-weight: 600;

    float: left;

    width: 100%;
    margin-top: 25px;
    margin-right: 10px;
    margin-bottom: 0;
    margin-left: auto;
    padding: 0 5px;

    text-align: left;

    color: #666;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #fff;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #fff;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: #efefef;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #fff;
}

section h3.second
{
    background: none;
}


article h2
{
    font-size: 1.5em;
    font-weight: 700;

    display: block;
    float: right;

    width: 60%;
    margin-top: 5px;
    padding: 14px 0 10px;

    text-align: center;

    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #f80;

    -o-border-radius: 5px;
}
article h2 span
{
    /*display: inline;*/
    font-size: 1.7em;
    font-weight: 700;
    line-height: .8em;

    vertical-align: middle;

    color: #fff;
}

section p
{
    font-size: .95em;
    line-height: 200%;

    margin: 1% auto;
}
section ul
{
    clear: both;

    width: 100%;
    margin: 10px auto;

    list-style-type: disc;
}

span.small
{
    font-size: .85em;
    font-weight: 500;

    vertical-align: inherit;
}
.btn_a
{
    display: inline-block;

    padding-right: 10px;
    padding-left: 10px;

    white-space: nowrap;

    color: #333;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #dcdcdc;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #dcdcdc;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #dcdcdc;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #dcdcdc;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-image-source: none;
    border-image-slice: 100% 100% 100% 100%;
    border-image-width: 1 1 1 1;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    background-color: #ededed;
    background-image: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position-x: 0;
    background-position-y: 0;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    box-shadow: 1px 1px 0 0 #fff inset;
    text-shadow: 1px 1px 0 #fff;

    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    text-decoration-color: currentcolor;
    text-decoration-line: none;
    text-decoration-style: solid;
}
.map img
{
    margin-right: 5px;
    margin-bottom: 2px;

    vertical-align: middle;
}
.btn_a:hover
{
    background-color: #dfdfdf;
    background-image: linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position-x: 0;
    background-position-y: 0;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
}
.btn_a:active
{
    position: relative;
    top: 1px;
}

/*----------------------
input info
-----------------------*/


.info
{
    clear: both;
    overflow: hidden;

    width: 100%;
    margin: 0 auto;
}
.info p
{
    font-size: 18px;
    font-weight: 500;
    line-height: 240%;

    display: block;
    overflow: hidden;

    margin: 15px 0 0;

    text-align: left;

    color: #252525;
}
.info p input
{
    margin-right: 10px;
}
.info input,
.info select
{
    font-family: '微軟正黑體', '新細明體', Arial, sans-serif;

    height: 40px;
    margin-bottom: 5px;
    padding: 7px 10px 5px;

    letter-spacing: .1em;

    border: 1px solid #999;
    border-radius: 4px;
    width: 80%;
}

button#searchArea img
{
    display: inline-block;

    margin-right: 5px;
    margin-bottom: 5px;

    vertical-align: middle;
}
button#searchArea
{
    line-height: 2.25;

    display: inline-block;

    height: 40px;
    padding: 0 16px;
    margin-left:5px;
    letter-spacing: .1em;
}

input,
select
{
    display: inline-block !important;

    /*width: 80% ;*/
    margin-left: 0;

    vertical-align: middle;

    color: #252525;
}

/* Channel button */
.channel_buttons
{
    clear: both;/*overflow:hidden;*/

    width: 100%;
    margin: 0 auto ;
}
.channel_buttons ul li
{
    float: left;

    width: 25%;
    margin: 0 auto;

    text-align: left;
}

.channel_buttons ul li .north
{
    font-size: 1.8em;
    font-weight: 500;
    line-height: 35px;

    position: relative;

    display: block;

    margin: 10px 10px;
    padding-top: 18px;
    padding-bottom: 60px;
    padding-left: 20px;

    letter-spacing: .04em;

    color: #252525;
    border: 1px solid #ccc;
    background: url(../images/north.png) left bottom no-repeat,-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #fbfafa));
    background: url(../images/north.png) left bottom no-repeat,-webkit-linear-gradient(top, #fff, #fafafa);
    background: url(../images/north.png) left bottom no-repeat,-moz-linear-gradient(top, #fff, #fafafa);
    background: url(../images/north.png) left bottom no-repeat,-o-linear-gradient(top, #fff, #fafafa);
    background: url(../images/north.png) left bottom no-repeat,-ms-linear-gradient(top, #fff, #fafafa);
    background: url(../images/north.png) left bottom no-repeat,linear-gradient(top, #fff, #fafafa);
    box-shadow: 0 1px #d1d1d1;
    text-shadow: 1px 1px 0 #fff;
}
.channel_buttons ul li .central
{
    font-size: 1.8em;
    font-weight: 500;
    line-height: 35px;

    position: relative;

    display: block;

    margin: 10px 10px;
    padding-top: 18px;
    padding-bottom: 60px;
    padding-left: 20px;

    letter-spacing: .04em;

    color: #252525;
    border: 1px solid #ccc;
    background: url(../images/central.png) left bottom no-repeat,-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #fbfafa));
    background: url(../images/central.png) left bottom no-repeat,-webkit-linear-gradient(top, #fff, #fafafa);
    background: url(../images/central.png) left bottom no-repeat,-moz-linear-gradient(top, #fff, #fafafa);
    background: url(../images/central.png) left bottom no-repeat,-o-linear-gradient(top, #fff, #fafafa);
    background: url(../images/central.png) left bottom no-repeat,-ms-linear-gradient(top, #fff, #fafafa);
    background: url(../images/central.png) left bottom no-repeat,linear-gradient(top, #fff, #fafafa);
    box-shadow: 0 1px #d1d1d1;
    text-shadow: 1px 1px 0 #fff;
}
.channel_buttons ul li .south
{
    font-size: 1.8em;
    font-weight: 500;
    line-height: 35px;

    position: relative;

    display: block;

    margin: 10px 10px;
    padding-top: 18px;
    padding-bottom: 60px;
    padding-left: 20px;

    letter-spacing: .04em;

    color: #252525;
    border: 1px solid #ccc;
    background: url(../images/south.png) left bottom no-repeat,-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #fbfafa));
    background: url(../images/south.png) left bottom no-repeat,-webkit-linear-gradient(top, #fff, #fafafa);
    background: url(../images/south.png) left bottom no-repeat,-moz-linear-gradient(top, #fff, #fafafa);
    background: url(../images/south.png) left bottom no-repeat,-o-linear-gradient(top, #fff, #fafafa);
    background: url(../images/south.png) left bottom no-repeat,-ms-linear-gradient(top, #fff, #fafafa);
    background: url(../images/south.png) left bottom no-repeat,linear-gradient(top, #fff, #fafafa);
    box-shadow: 0 1px #d1d1d1;
    text-shadow: 1px 1px 0 #fff;
}
.channel_buttons li a:hover
{
    border: 1px solid #f80;
}
.channel_buttons a:active
{
    top: 3px;

    background-image:         linear-gradient(bottom, #ededed 0%, #f7f4f6 100%);
    background-image:      -o-linear-gradient(bottom, #ededed 0%, #f7f4f6 100%);
    background-image:    -moz-linear-gradient(bottom,#ededed 0%, #f7f4f6 100%);
    background-image: -webkit-linear-gradient(bottom, #ededed 0%, #f7f4f6 100%);
    background-image:     -ms-linear-gradient(bottom,#ededed 0%, #f7f4f6 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0,#ededed),
    color-stop(1,#f7f4f6)
    );
}

.channel_buttons ul li span.en1
{
    font-size: .54em;
    font-weight: 400;
    line-height: .9;

    display: block;
    clear: both;

    width: 100%;
    padding-left: 2px;

    text-align: left;
    letter-spacing: .04em;

    color: #999;
}


/*channel_buttons*/

.channel_buttons li a
{
    transition-delay: 0s;
    transition-timing-function: ease;
    transition-duration: .2s;
    transition-property: all;
}
.channel_buttons li a::before
{
    position: absolute;
    right: 0;
    bottom: 0;

    display: block;

    width: 45px;
    height: 45px;

    content: '';

    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #f3a105 50.1%);
}
.channel_buttons li a:hover::before
{
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #f80 50.1%);
}
.channel_buttons li a::after
{
    font-family: 'FontAwesome';

    position: absolute;
    right: 9px;
    bottom: 1px;

    content: url(../images/icon_arrow_w.png);
    transition-delay: 0s;
    transition-timing-function: ease;
    transition-duration: .2s;
    transition-property: all;

    text-shadow: none;
}
.channel_buttons li a:hover::after
{
    right: 5px;
}
@media screen and (max-width: 736px)
{
    .info p
    {
    margin-top: 10;

    text-align: left;
}
.channel_buttons ul li
{
    width: 50%;
}
.info input,
.info select
{
    width: 100%;
    margin-left: 0;
}
button#searchArea
{
    width: 100%;
    margin-left:0;
    letter-spacing: 0.2em;
    margin-top:1%;
}
}
@media screen and (max-width: 540px)
{
    .channel_buttons ul li
    {
    width: 100%;
}
.channel_buttons ul li a
{
    width: 100%;
}

.channel_buttons ul li .north
{
    font-size: 1.6em;
    line-height: 0;

    margin: 8px auto;
    padding-top: 26px;
    padding-bottom: 44px;

    background: url(../images/north.png) right bottom -2px no-repeat,-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #fbfafa));
    background: url(../images/north.png) right bottom -2px no-repeat,-webkit-linear-gradient(top, #fff, #fafafa);
    background: url(../images/north.png) right bottom -2px no-repeat,-moz-linear-gradient(top, #fff, #fafafa);
    background: url(../images/north.png) right bottom -2px no-repeat,-o-linear-gradient(top, #fff, #fafafa);
    background: url(../images/north.png) right bottom -2px no-repeat,-ms-linear-gradient(top, #fff, #fafafa);
    background: url(../images/north.png) right bottom -2px no-repeat,linear-gradient(top, #fff, #fafafa);
}
.channel_buttons ul li .central
{
    font-size: 1.6em;
    line-height: 0;

    margin: 8px auto;
    padding-top: 26px;
    padding-bottom: 44px;

    background: url(../images/central.png) right 18px bottom -2px no-repeat,-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #fbfafa));
    background: url(../images/central.png) right 18px bottom -2px no-repeat,-webkit-linear-gradient(top, #fff, #fafafa);
    background: url(../images/central.png) right 18px bottom -2px no-repeat,-moz-linear-gradient(top, #fff, #fafafa);
    background: url(../images/central.png) right 18px bottom -2px no-repeat,-o-linear-gradient(top, #fff, #fafafa);
    background: url(../images/central.png) right 18px bottom -2px no-repeat,-ms-linear-gradient(top, #fff, #fafafa);
    background: url(../images/central.png) right 18px bottom -2px no-repeat,linear-gradient(top, #fff, #fafafa);
}
.channel_buttons ul li .south
{
    font-size: 1.6em;
    line-height: 0;

    margin: 8px auto;
    padding-top: 26px;
    padding-bottom: 44px;

    background: url(../images/south.png) right bottom -2px no-repeat,-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #fbfafa));
    background: url(../images/south.png) right bottom -2px no-repeat,-webkit-linear-gradient(top, #fff, #fafafa);
    background: url(../images/south.png) right bottom -2px no-repeat,-moz-linear-gradient(top, #fff, #fafafa);
    background: url(../images/south.png) right bottom -2px no-repeat,-o-linear-gradient(top, #fff, #fafafa);
    background: url(../images/south.png) right bottom -2px no-repeat,-ms-linear-gradient(top, #fff, #fafafa);
    background: url(../images/south.png) right bottom -2px no-repeat,linear-gradient(top, #fff, #fafafa);
}
.channel_buttons ul li span.en1
{
    font-size: .66em;

    display: inline;

    margin-left: 8px; /*clear: none;*/

    text-align: left;
    vertical-align: middle;
}
.channel_buttons li a::after
{
    bottom: 2px;
}

span.small
{
    font-size: .8em;
    line-height: 140%;
}
}

/* notice  */

.notice
{
    font-size: 1.4em;
    font-weight: 500;

    float: left;
    clear: both;

    letter-spacing: 1px;

    color: #252525;
}


.notice img
{
    margin: 3px 5px 5px 0;

    vertical-align: middle;
}



@media screen and (max-width: 736px)
{
    /*section h3 {margin-top: 6em;}*/
    .notice
    {
        width: 100%;
        margin: -20px auto .8px;

        text-align: center;
    }
    article h2
    {
        font-size: 1.4em;
        line-height: 140%;

        width: 100%;
        padding: 14px 0 10px;
    }
    article h2 span
    {
        vertical-align: sub;
    }
}

@media screen and (max-width: 540px)
{
    /*section h3 {margin-top: 8em;}*/
    .notice
    {
        font-size: 1em;

        padding-top: 20px;

        letter-spacing: 0;
    }
    .notice img
    {
        max-width: 30px;
    }
    article h2
    {
        padding: 14px 0 10px;
    }
    article h2 span
    {
        display: block;

        margin: 6px auto 5px;
    }
}


/*table*/
#demo-table td.store
{
    text-align: left;
}
#demo-table td.small
{
    text-align: left;
}
#demo-table td.mobile
{
    width: 19%;
}
#demo-table th
{
    font-size: 110%;

    text-align: center;
    vertical-align: middle;

    color: #4a454a;
    color: #525252;
    border: 1px solid #e9e8e8;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VjZWNlYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #fbfafa));
    background: -webkit-linear-gradient(top, #fff, #fbfafa);
    background:    -moz-linear-gradient(top, #fff, #fbfafa);
    background:      -o-linear-gradient(top, #fff, #fbfafa);
    background:     -ms-linear-gradient(top, #fff, #fbfafa);
    background:         linear-gradient(top, #fff, #fbfafa);
}


#demo-table
{
    float: left;

    margin: 5px 0;
}
#demo-table,
.css-table
{
    width: 99.9%;
    margin-bottom: 20px;

    border-collapse: collapse;

    background-color: #fff;
}
#demo-table td,
#demo-table th,
.css-table .td,
.css-table .th
{
    line-height: 220%;

    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;

    text-align: center;
}
#demo-table td,
.css-table .td
{
    color: #666;
    /*border-bottom: 1px  dashed #e9e9e9;*/
    border: 1px solid #e9e8e8;
    border-image-source: none;
    border-image-slice: 100% 100% 100% 100%;
    border-image-width: 1 1 1 1;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
}
#demo-table th,
.css-table .th
{
    text-align: center;

    color: #333;
    background-color: #efefef;
}
.css-table
{
    display: none;
}
.css-table .thead
{
    display: table-header-group;
}
.css-table .tbody
{
    display: table-row-group;
}
.css-table .tr
{
    display: table-row;
}
.css-table .th,
.css-table .td
{
    display: table-cell;
}

@media only screen and (max-width: 736px)
{
    #demo-table
    {
        margin: -5px auto;
    }
    #demo-table td,
    #demo-table th,
    .css-table .td,
    .css-table .th
    {
        text-align: left;
        vertical-align: middle;
    }
    #demo-table td.mobile
    {
        width: 100%;
    }

    .break-table
    {
        background-color: rgba(0, 0, 0, 0) !important;
    }
    .break-table,
    .break-table thead,
    .break-table tbody,
    .break-table th,
    .break-table td,
    .break-table tr
    {
        display: block;
    }
    .break-table thead tr
    {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .break-table tr
    {
        clear: both;

        margin: 10px 0;

        border: 1px solid #ccc;
        border-image-source: none;
        border-image-slice: 100% 100% 100% 100%;
        border-image-width: 1 1 1 1;
        border-image-outset: 0 0 0 0;
        border-image-repeat: stretch stretch;
        background-color: #fff;
    }
    .break-table td
    {
        position: relative;

        padding-left: 20% !important;

        text-align: left;
        white-space: normal;

        border-top-width: medium !important;
        border-top-style: none !important;
        border-top-color: currentcolor !important;
        border-right-width: medium !important;
        border-right-style: none !important;
        border-right-color: currentcolor !important;
        border-bottom-width: 1px !important;
        border-bottom-style: solid !important;
        border-bottom-color: #eee !important;
        border-left-width: medium !important;
        border-left-style: none !important;
        border-left-color: currentcolor !important;
        border-image-source: none !important;
        border-image-slice: 100% 100% 100% 100% !important;
        border-image-width: 1 1 1 1 !important;
        border-image-outset: 0 0 0 0 !important;
        border-image-repeat: stretch stretch !important;

        -moz-border-bottom-colors: none !important;
        -moz-border-left-colors: none !important;
        -moz-border-right-colors: none !important;
        -moz-border-top-colors: none !important;
    }

    .break-table td::before
    {
        font-weight: bold;

        position: absolute;
        top: 0;
        left: 0;

        width: 15%;
        padding: 10px 0 10px 10px;

        text-align: left;
        white-space: nowrap;

        color: #252525;
    }

    .break-table  td.store
    {
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VjZWNlYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #fbfafa));
        background: -webkit-linear-gradient(top, #fff, #fbfafa);
        background:    -moz-linear-gradient(top, #fff, #fbfafa);
        background:      -o-linear-gradient(top, #fff, #fbfafa);
        background:     -ms-linear-gradient(top, #fff, #fbfafa);
        background:         linear-gradient(top, #fff, #fbfafa);
    }
    td.store
    {
        font-size: 1.25em;
        font-weight: 600;
    }
    .break-table td::before
    {
        content: attr(data-title);
    }
    .break-table td.store::before
    {
        font-size: .85em;
    }
    .css-table .th,
    .css-table .td
    {
        display: block;

        width: 100%;
    }
}