/*html5*/
article,
aside,
dialog,
footer,
header,
section,
footer,
nav,
figure,
menu {
    display: block
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}


/* base */

html,
body,
ul,
li,
dl,
dt,
dd,
form,
image {
    margin: 0;
    border: 0;
    padding: 0;
    list-style: none;
}

img {
    border: 0;
}

a {
    color: #3f3f3f;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #fc8200;
}

a,
a:hover {
    text-decoration: none;
    outline: none;
    /* for Firefox */
    hlbr: expression(this.onFocus=this.blur());
    cursor: pointer;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
select,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
    font-family: '微軟正黑體', 'Microsoft JhengHei', Arial, sans-serif !important;
    color: #333;
    font-size: 1rem;
    -webkit-text-size-adjust: none;
    /*解決Chrome 12px以下字級*/
}

input::-ms-clear {
    display: none;
}

input::-ms-reveal {
    display: none;
}

h1 {
    color: #0e8162 ;
    font-size: 20px;
}

h2 {
    font-size: 16px;
}

h3 {
    font-size: 15px;
}

.structure ol {
    margin-left: 20px;
}

.structure ol li {
    line-height: 1.7em;
    list-style: decimal;
}

.structure ol li ol li {
    line-height: 1.7em;
    list-style: disc;
}

.wrapper {
    min-width: initial;
}

.wsize {
    min-width: initial;
    max-width: 1440px;
    margin: 0px auto;
    position: relative;
    height: 100%;
    padding: 0 10px;
}

.content_info {
    padding: 0 0 10px;
    display: block;
    width: 100%;

}



.box_style {
    width: 100%;
    padding: 10px 5px 10px 5px;
    display: inline-block;
    background: #fff;
    position: relative;
    border: none;
    /*
    border: 1px solid #e3e3e3;
    border-top: none;
    border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    -moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    -webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    */  
    /*
    margin:0px auto;
    max-width: 1024px;
    */  
    min-height: 73vh;
}


/*登入前-更多金融資訊 box_style*/

.index_box_style {
    width: 100%;
    padding: 10px;
    display: inline-block;
    background: #fff;
    position: relative;
    border-top: none;
}

#content {
    position: relative;
}

.row {
    width: 100%;
    display: inline-block;
}

.col {
    float: left;
    display: inline-block;
}

.full_width {
    width: 100%;
}

.clearfix {
    clear: both;
}

.btn_box {
    display: flex;
    justify-content: space-between;
    /*table-layout: fixed;*/
}

button:focus {
    outline: 0;
}

/* header_bgStyle */

.header_bgStyle {
    overflow: hidden;
    height: 27px;
    top: 0;
}

.header_bgStyle span:after {
    content: "";
    display: inline-block;
    background: #188464 url(../img/nav_right_bg.gif) repeat-y 12px top;
    height: 100%;
    position: absolute;
    left: 100%;
    width: 300%;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
/*header*/

.header {
    background-color: #fff;
    color: #008647;
    border-bottom: #008647 5px solid;
    
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

#header {
    height: 100px;
    /*overflow: hidden;*/
    margin-top: -10px
}


/*logo_area*/

#header .logo_area {
    display: inline-block;
    margin: 0px 0 0;
    float: left;
    min-width: 250px;
}

#header .logo_area a {
    display: inline-block;
}

#header .logo_area .logo_a img {
    display: inline-block;
    width: 240px;
    height: 82px;
    margin-top: 10px;
}

#header .logo_area .logo_b img {
    display: inline-block;
    width: 662px;
    height: 82px;
    margin-left: 10px;
    position: absolute;
    right:0px;
    top: 10px;
}

#header .logo_area_c {
    display: inline-block;
    margin: 0px 0px 0px -20px;
    min-width: 250px;
}

#header .logo_area_c a {
    display: inline-block;
}

#header .logo_area_c .logo_a img {
    display: inline-block;
    width: 240px;
    height: 82px;
    margin-top: 10px;
}

/*gnav*/

#header .gnav {
    float: right;
    padding: 0;
    list-style-type: none;
    top: 0px;
    position: relative;
    background: #188464;
    padding-left: 7px;
    height: 27px;
    padding-right: 0;
    right: -10px;
    padding-right: 7px
}

#header .gnav:before {
    content: "";
    display: inline-block;
    background: url(../img/nav_left_bg.png) no-repeat right top;
    height: 27px;
    position: absolute;
    right: 100%;
    width: 15px;
}


/*#header .gnav:after {
    content: "";
    display: inline-block;
    background: #188464 url(../img/nav_right_bg.gif) repeat-y 12px top;
    height: 100%;
    position: absolute;
    left: 100%;
    width: 300%;
}*/

#header .gnav li {
    float: left;
    padding: 4px 4px 6px 0px;
    list-style-type: none;
    color: #fff;
    font-size: 13px;
    margin-right: 4px;
    position: relative;
}

#header .gnav li a {
    color: #fff;
}

#header .gnav li a:hover {
    text-decoration: underline;
}

#header .gnav li a.language_btn i {
    margin-left: 5px
}


/*welcome*/

#header .welcome_id {
    color: #156d52;
    margin-right: 15px;
}

#header .welcome {
    color: #ef8209;
    font-size: 14px;
    font-weight: 700;
    float: right;
    padding: 4px;
    margin-right: 15px;
}


/*func_area*/

#header .func_area {
    display: inline-block;
    position: absolute;
    right: 8px;
    top: 40px;
    padding-right: 3px;
}

#header .func_area .auto_signout {
    float: left;
    background: #efefef;
    height: 26px;
    line-height: 1.7em;
    padding-left: 5px;
    border: 1px #dddddd solid;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    overflow: hidden;
    margin-right: 10px;
    position: relative;
    top: 2px
}

#header .func_area .auto_signout span {
    color: #888888;
    font-size: 12px;
}

#header .func_area .auto_signout a {
    background: #f3f3f3 url(../img/func_area_btn_bg.gif) repeat-x top;
    border-left: 1px #dddddd solid;
    color: #1b8a69;
    padding: 5px 7px 5px;
    float: right;
    margin-left: 5px;
}

#header .func_area .auto_signout a:hover {
    color: #fff;
    background: #148364;
}

#header .func_area .btn_logout {
    display: inline-block;
    background: #f0810b;
    width: 88px;
    height: 30px;
    text-align: center;
    color: #fff;
    line-height: 1.9em;
    font-size: 16px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    float: left;
}

#header .func_area .btn_logout:hover {
    background: #e76f00;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header .time_area {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 80px
}

#header .time_area p {
    color: #777;
    font-size: 12px;
}

#header .time_area p .taiwan_time {
    display: inline-block;
    margin-right: 10px
}


/*contact*/

#contact {
    background: #f1f1f1;
    padding: 15px 0 20px;
    border-top: #e1e1e1 1px solid;
    display: inline-block;
    float: left;
    width: 100%;
}


/*footer*/

.footer {
    clear: both !important;
    background-color: #008647;
    color: #fff !important;
}

#footer {
    height: 90px;
    overflow: hidden;
    text-align: center;
}

#footer .consumer_hotline {
    display: inline-block;
    width: 100%;
    /*background: #2ea200 url(../img/consumer_hotline_bg.gif) repeat-y left top;*/
    background-color: #008000;
    height: 40px;
    color: #ffff00;
    line-height: 2.8em;
}

#footer .consumer_hotline i {
    color: #81b8a7;
    margin-right: 8px;
    font-size: 26px;
    position: relative;
    top: 5px;
}

#footer .index_copyRight {
    display: inline-block;
    padding: 5px 0 0 0;
    font-size: 12px;
    color: #333;
}

#footer .declar {
    padding: 3px 0 0 0;
    font-size: 12px;
    text-align: center;
    color: #333;
}

#footer .footer_nav {
    display: inline-block;
    margin: 0 0 0 0px;
    float: none ;
}

#footer .footer_nav li {
    float: left;
    font-size: 12px;
    color: #333;
}

#footer .footer_nav li a {
    font-size: 12px;
    color: #545454;
    margin: 0 10px
}

#footer .footer_nav li a:hover {
    text-decoration: underline;
}


/*important_announcement*/

#important_announcement {
    display: inline-block;
    background: #ef8209;
    width: 100%;
    text-align: center;
    height: 35px;
}

#important_announcement ul li {
    height: 35px;
}

#important_announcement a {
    color: #fff;
    font-size: 15px;
    padding: 5px;
    height: 35px;
    line-height: 25px;
    vertical-align: middle;
    display: inline-block;
}

#important_announcement a:hover {
    text-decoration: underline;
}

#important_announcement a i {
    font-size: 22px;
    margin-right: 10px;
    position: relative;
    /*  top: 2px;*/
}


/*menu_area*/

#menu_area {
    display: inline-block;
    background: url(../img/menu_bg.gif) repeat top;
    min-height: 45px;
    width: 100%
}


/*contact*/

.record_side {
    float: left;
    margin: 0px -100% 0px 0px;
    position: relative;
    width: 198px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 1;
    overflow: hidden;
    padding-bottom: 5px;
}

.record_side.close {
    width: 0px;
    /*margin-left: -198px;*/
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.main_container {
    margin: 0px 0px 0px 213px;
    position: relative;
    z-index: 101;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.main_container.close {
    margin: 0
}


/*record_side*/

.record_side .record_box {
    display: inline-block;
    width: 198px;
    border-bottom: 6px #148364 solid;
}

.record_side .record_box > div {
    background: #e6e6e6 url(../img/record_tab_bg.gif) repeat-x top;
    border: 1px #d3d3d3 solid;
    border-bottom: none;
    width: 97px;
    height: 38px;
    box-shadow: inset 0px 1px 0px 0px #fff;
    border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    display: inline-block;
    float: left;
    margin-right: 4px;
    font-size: 15px;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
}

.record_side .record_box > div:hover {
    color: #148364;
}

.record_side .record_box .tab_common {
    margin-right: 0
}

.record_side .record_box > div.on {
    background: #148364;
    border-color: #148364;
    color: #fff;
    box-shadow: none;
}

.record_side .record_info {
    clear: both;
    margin: 0;
    padding: 10px;
    border: 1px solid #e3e3e3;
    border-top: none;
    background: #fff;
    border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    overflow: hidden;
    -moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    -webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    width: 198px;
    display: none;
}

.record_side .record_info.on {
    display: inline-block;
}

.record_side .record_info ul {
    display: inline-block;
    border: 1px #dcdcdc solid;
    border-bottom: none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    width: 100%;
    overflow: hidden;
}

.record_side .record_info ul li {
    display: inline-block;
    float: left;
    width: 100%;
    background: #f1f1f1;
    border-bottom: 1px #dcdcdc solid;
    border-top: 1px #fff solid;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.record_side .record_info ul li:hover {
    background: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.record_side .record_info ul li a {
    color: #333;
    font-size: 15px;
    padding: 9px 12px;
    width: 100%;
    display: inline-block;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.record_side .record_info ul li a:hover {
    color: #148364;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.record_side .record_info a.tb_btn_setup {
    border-radius: 3px !important;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #333 !important;
    font-size: 14px !important;
    padding: 5px 12px 6px !important;
    text-decoration: none !important;
    text-shadow: none;
    margin: 5px 0 1px!important;
    display: inline-block;
    min-width: 28px;
    background: #ffffff url(../img/tb_btn_bg.gif) repeat-x bottom !important;
    border: 1px #dddddd solid !important;
    text-shadow: none;
    -webkit-transition: all 0.40s ease-in-out;
    -moz-transition: all 0.40s ease-in-out;
    -ms-transition: all 0.40s ease-in-out;
    -o-transition: all 0.40s ease-in-out;
    width: 100%;
}

.record_side .record_info a.tb_btn_setup:hover {
    color: #fff !important;
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
    background: #098c6a !important;
    border: #098c6a 1px solid !important;
}

.record_side .record_info a.tb_btn_setup .fa {
    display: inline-block;
    position: relative;
    font-size: 15px;
    padding: 3px 0px;
    position: relative;
    top: 0px;
    color: #1a795c;
    margin-right: 5px;
    background-image: none;
    text-indent: 0;
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
}

.record_side .record_info a.tb_btn_setup:hover .fa,
.record_side .record_info button.tb_btn_setup:hover .fa {
    color: #fff
}


/*side_bar_close*/

.side_bar_close {
    display: inline-block;
    width: 20px;
    height: 22px;
    background: #007b5a;
    border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    position: absolute;
    top: 58px;
    left: 197px;
    z-index: 102;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


/* 收合按鈕移動 */

.side_bar_close.open {
    top: 49px
}

@-moz-document url-prefix() {
    .side_bar_close.open {
        top: 54px
    }
}

.side_bar_close.open {
    left: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.side_bar_close i {
    color: #fff;
    padding: 6px;
    font-size: 12px;
    font-weight: 300
}


/*path*/

#crumb {
    color: #969696;
    font-size: 14px;
    text-align: left;
    display: block;
    margin: 0;
    padding: 15px 0 13px 15px;
    border: 1px solid #e3e3e3;
    border-bottom: none;
    background: #fff;
    border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    overflow: hidden;
    /*-moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    -webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);*/
}


#index_crumb {
    color: #969696;
    font-size: 14px;
    text-align: left;
    display: block;
    margin: 0;
    padding: 15px 0 13px 15px;
    border-bottom: none;
    background: #fff;
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    overflow: hidden;
}

#path {
    min-width: 300px;
    margin: 0;
    float: left;
    padding: 0;
}

#path dt {
    float: left;
    color: #545454;
    display: block;
    padding: 0 0 0 3px;
}

#path dt:before {
    content: ">";
}

#path dt:first-child:before {
    content: normal;
}

/* 選單 li 之樣式 */

ul.navigation {
    display: inline-block;
    position: relative;
    width: 100%;
    top: 0px;
}

ul.navigation li {
    float: left;
}


/* 選單 li 裡面連結之樣式 */

ul.navigation li a {
    display: block;
    padding: 0;
    background: none;
    color: #333333;
    letter-spacing: 1px
}

ul.navigation > li {
    height: 45px;
    padding-bottom: 1px;
}


/* 特定在第一層，以左邊灰線分隔 */

ul.navigation > li > a {
    padding: 12px 20px;
    border: none;
    background: none;
    height: 46px;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 1px;
    position: relative;
    z-index: 100;
    font-weight: 700;
}

ul.navigation > li > a.active {
    background: url(../img/menu_active_bg.gif) repeat-x top;
    color: #148364
}

ul.navigation > li > a:hover,
ul.navigation > li > a.on {
    color: #fff;
    background: url(../img/menu_hover_bg.png) repeat-x top;
}

ul.navigation > li > a.on:after {
    content: "";
    width: 0px;
    height: 0px;
    border: 7px solid;
    opacity: 1;
    position: absolute;
    overflow: hidden;
    bottom: -1px;
    z-index: 100;
    border-color: transparent transparent #fff transparent;
    left: 45%;
}


/* 特定在第一層 > 第二層或以後下拉部分之樣式 */

ul.navigation ul {
    display: none;
    float: left;
    position: absolute;
    left: 0;
    margin: 0;
    z-index: 103;
}

ul.navigation ul.fir_nav {
    display: none;
    width: 100%;
    height: 410px;
    background: #fff url(../img/menu_map_bg.png) no-repeat 95% 30%;
    border-bottom: 2px #318d70 solid;
    overflow-y: auto;
    -moz-box-shadow: 0px 3px 3px 0px rgba(100, 100, 100, 0.2);
    -webkit-box-shadow: 0px 3px 3px 0px rgba(100, 100, 100, 0.2);
    box-shadow: 0px 3px 3px 0px rgba(100, 100, 100, 0.2);
    padding: 0px 0px 20px 25px;
    /*border-top: 1px #E1E1E1 solid*/
    /*margin-top: 1px*/
}

ul.navigation ul.fir_nav.on {
    display: block;
}

ul.navigation ul.fir_nav li {
    display: inline-block;
    width: 25%;
    padding-left: 20px;
    padding-right: 20px;
}

ul.navigation ul.fir_nav a {
    display: inline-block;
    width: 100%;
    font-size: 18px;
    color: #80ff00;
    padding: 5px 0 10px 5px;
    margin-top: 15px;
    letter-spacing: 2px;
    font-weight: 700;
    position: relative;
}

ul.navigation ul.fir_nav a i.ics {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: -30px;
    top: 2px;
    background-size: 100%;
}



ul.navigation ul.fir_nav li:hover > ul.sec_nav {
    display: block;
    width: 100%;
}


/* 特定在第二層或以後下拉部分 li 之樣式 */

ul.navigation ul li {
    float: left;
}


/* 特定在第二層或以後下拉部分 li （最後一項不要底線）之樣式 */

ul.navigation ul li:last-child {
    border-bottom: none;
}


/* 第二層或以後選單 li 之樣式 */

ul.navigation ul.sec_nav {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
}

ul.navigation ul.sec_nav li {
    float: left;
    clear: both;
    width: 100%;
    border-bottom: 1px #eee solid;
    padding: 0;
}

ul.navigation ul.sec_nav a {
    width: 100%;
    display: inline-block;
    padding: 7px 5px;
    color: #666;
    font-size: 14px;
    position: relative;
    margin: 0;
    font-weight: normal;
}

ul.navigation ul.sec_nav a:hover {
    background: #eee;
}


/* 第三層或以後選單 li 之樣式 */

ul.navigation ul.tre_nav {
    position: relative;
    width: 100%;
}

ul.navigation ul.tre_nav.on {
    display: block;
}

ul.navigation ul.tre_nav li {
    border: none;
    float: left;
    width: 100%;
}

ul.navigation ul.tre_nav a {
    padding: 6px 5px 6px 13px;
    border: none;
}


/* 箭頭 */

ul.navigation ul.sec_nav li a i {
    float: right;
    position: absolute;
    font-size: 20px;
    top: 6px;
    right: 12px;
    color: #80ff00;
}


/*index_infobox*/

.index_infobox {
    display: inline-block;
    width: 100%;
    background: #fff url(../img/index_info_kv.jpg) no-repeat top right;
    position: relative;
    background-size: cover;
    height: 260px;
    border: 1px solid #e3e3e3;
    border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    -moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    -webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    margin-bottom: 15px;
}

.index_infobox .index_info_area {
    display: inline-block;
    position: absolute;
    left: 36px;
    top: 18px;
}

.index_infobox .index_info_area .welcome {
    padding: 18px 25px;
    background: rgba(0, 0, 0, 0.7);
}

.index_infobox .index_info_area .welcome h1 {
    color: #c2cc15;
    font-size: 30px;
    margin-bottom: 5px;
    font-weight: 300;
}

.index_infobox .index_info_area .welcome h1 b {
    color: #f8ab11;
    font-weight: 700;
    margin-left: 18px;
}

.index_infobox .index_info_area .welcome p {
    color: #fff;
    font-size: 16px;
}

.index_infobox .index_info_area .index_info_box {
    padding: 15px 25px 25px;
    background: rgba(0, 0, 0, 0.6);
}

.index_infobox .index_info_area .index_info_box span {
    color: #fff;
    font-size: 13px;
    line-height: 20px
}

.index_infobox .index_info_area .index_info_box span.time_title {
    text-align: right;
    float: left;
}

a.message_remind i {
    color: #80ff80;
    font-size: 50px;
    position: relative;
    margin: 15px auto 0;
    display: inline-block;
    padding-bottom: 5px
}

a.message_remind i span {
    background: #f04000 none repeat scroll 0 0;
    border-radius: 15px;
    color: #fff;
    font-size: 15px;
    height: 25px;
    line-height: 1.7em;
    position: absolute;
    right: -10px;
    top: -5px;
    min-width: 25px;
    padding: 0 5px;
    font-family: Arial, sans-serif !important;
}

a.message_remind i.icon-ic_todolist {
    font-size: 92px;
    height: 60px
}

a.message_remind i.icon-ic_todolist:before {
    position: relative;
    top: -15px;
}

a.message_remind i.icon-ic_todolist span {
    right: -5px;
}

.message_info .slidernav {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.message_info .slidernav a {
    font-size: 30px;
    position: absolute;
    color: #333
}

.message_info .slidernav .previous {
    left: 25px;
    top: 50%;
}

.message_info .slidernav .next {
    right: 25px;
    top: 50%;
}

.pop_info .announcement_info {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
}

.pop_info .announcement_info ul,
.pop_info .announcement_info ol {
    display: inline-block;
    width: 100%;
}

.pop_info .announcement_info ul li {
    display: inline-block;
    float: left;
    width: 100%;
    border-bottom: 1px solid #e8ebec;
    padding: 10px 0 15px;
}

.pop_info .announcement_info ol li {
    display: list-item;
    float: left;
    width: 100%;
    border-bottom: 1px solid #e8ebec;
    padding: 10px 0 15px;
    list-style-type: decimal;
    list-style-position: inside;
}


/* IE8 hack */

@media \0screen {
    .record_side.close {
        display: none;
    }
    .content_info {
        background: white;
    }
    ul.navigation ul.on.fir_nav {
        margin-top: 1px
    }
}

.wsize_onepage {
    min-width: initial;
    max-width: 100%;
    margin: 0px auto;
    position: relative;
    /*min-height: 499px;*/
}

#header.up-header {
    height: 102px;
    background: url(../img/up_header_bg.gif) repeat-x;
    background-position: 20% 20%;
}

.warningBox ul.decimal li {
    list-style-type: decimal;
}

#contact .contact_pw {
    display: inline-block;
    border: 1px solid #e3e3e3;
    background: #fff;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    -webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
}

.contact_pw {
    min-width: 992px;
    max-width: 992px;
    margin: 0 auto;
}

.contact_center {
    text-align: center;
}


/* ERROR */

.error_info {
    margin: 0 30px;
    min-height: 320px;
    text-align: center;
    margin-bottom: 0px;
}

.error_info1 {
    margin: 0 30px;
    text-align: center;
    margin-bottom: 0px;
}

.error_box {
    display: inline-block;
    margin: 30px auto 30px;
    padding: 10px;
    text-align: left;
    border: 1px solid #dde3e3;
    border-top: 3px solid #444;
    width: 100%;
    position: relative;
}

.error_box1 {
    display: inline-block;
    margin: 30px auto 30px;
    padding: 10px;
    text-align: left;
    border: 1px solid #dde3e3;
    /* border-top: 3px solid #444;*/
    width: 100%;
    position: relative;
    background-color: #FFFEF7;
}

.content_info .error_box {
    margin: 0 5px 5px;
    display: block;
    width: auto;
}

.error_box .btnBox {}

.er_txtbox {
    padding-left: 0px;
    padding-bottom: 20px;
}

.error_box h1 {
    font-size: 20px;
    font-weight: bold;
    margin: 14px 0 10px;
}

.error_box p {
    font-size: 16px;
    font-weight: bold;
    padding-right: 25px;
}

.error_box .bicon {
    margin-top: 6px;
    margin-left: 7px;
    margin-right: 8px;
}

i.icon_system_message {
    background: url(../img/ic_change_pw.png);
}

.error_box .logout_time {
    color: #EB133A;
    position: absolute;
    right: 0px;
    text-align: right;
    display: inline-block;
    top: -25px;
}

.er_txtbox p {
    padding: 8px 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4em;
}

.index_info_group i,
.bicon {
    float: left;
    display: inline-block;
    width: 41px;
    height: 36px;
    background-size: 100% !important;
}

.warningBox p {
    font-size: 14px;
    padding: 8px 0px 6px 25px;
}


.logouterr {
    width: 58%;
    margin: 0 auto;
}

.error_txt {
    color: #d00f24;
    text-align: left;
    font-size: 16px;
    /*
    padding: 8px 0px 6px 25px;*/
    line-height: 1.8em;
}

.er_txtbox h3.title_sub {
    display: block;
    font-size: 16px;
    padding: 20px 10px;
    position: relative;
    color: #bf311a;
    margin-left: 0;
    text-align: left;
    line-height: normal !important;
    margin-bottom: 5px;
}


/* IE8 hack */

@media \0screen {
    /* 歡迎區域 */
    .index_infobox .index_info_area .welcome {
        background: url(../img/black_bg_op07.png) repeat;
    }
    .index_infobox .index_info_area .index_info_box {
        background: url(../img/black_bg_op06.png) repeat;
    }
    .record_side .record_box .tab_common {
        width: 96px;
    }
    /*POPUP 關閉紐*/
    .pop_close,
    .columntoggler_titlebox .ui-commandlink.ui-widget.tb_btn.tb_btn_s.icon_only.icon_close.close {
        background: url(../img/jquery/col_icon-del.png) no-repeat !important;
    }
    .pop_close:hover,
    .ui-commandlink.ui-widget.tb_btn.tb_btn_s.icon_only.icon_close.close:hover {
        background: url(../img/jquery/col_icon-del-over.png) no-repeat !important;
    }
}


/*公告訊息*/

#important_announcement .flexslider {
    background: none;
    border: none;
    margin: none;
}

#important_announcement .flexslider .flex-control-nav {
    bottom: 20px;
}


/*更多資訊*/

.more_info_side {
    float: left;
    margin: 0px -100% 0px 0px;
    position: relative;
    width: 198px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 1;
    overflow: hidden;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    /*   height: 600px;
    overflow-y: scroll;*/
}

.more_info_side .title {
    display: inline-block;
    width: 198px;
    padding: 10px 0;
    background: url("../img/btn_bg.gif") 50% 100% repeat-x rgb(26, 136, 104) !important;
    border-radius: 6px 6px 0 0;
}

.more_info_side .title > div {
    padding: 0px 0px 0px 10px;
    color: #fff;
    border-radius: inherit;
}

.more_info_side .info_container {
    background: #fff;
}

.more_info_side .info_container ul.nav_first > li > a {
    display: inline-block;
    padding: 10px 0;
}

.more_info_side .info_container ul.nav_sec li {
    padding: 10px 0;
    border-bottom: 1px #eee solid;
}

.list_title {
    display: inline-block;
    width: 100%;
    border-bottom: 1px #eee solid;
}

.more_info_side .info_container ul.nav_first li a {
    display: inline-block;
    padding-left: 20px;
}

.more_info_side .info_container ul.nav_first > li > span > a {
    font-size: 14px;
    color: #80ff80;
    font-weight: bolder;
    padding: 10px 0 10px 10px;
}

#info_mainFrame {
    background: #fff;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
}


/*--------更多資訊-end---------*/

.notice_memo {
    padding: 10px 0;
}

.rt {
    text-align: right;
}
.lt {
    text-align: left;
}
.ct {
    text-align: center;
}

.vertical-middle {
	vertical-align: middle !important;
}

.vertical-top {
	vertical-align: top !important;
} 

.vm {
	margin-top: 5px !important;
} 

.chkbox-valign {
    float: left;
    margin-right: 2px;
    position: relative;
    top: 3px;
}

.icon_btn {
    height: 18px !important;
    width: 18px !important;
}

.remind_txt {
    color: #d00f24;
    text-align: left;
    font-size: 14px;
    /* padding: 8px 0px 6px 25px;*/
    line-height: 1.8em;
}
.red {
	color: #bf311a !important;
}

.weightBold {
	font-weight: bold !important;
}

.wideRed {
	color: #bf311a !important;
	font-weight: bold !important;
}
.orange {
	color: #c25406 !important;
}
.yellow {
	color: yellow !important;
}
.green {
	color: green !important;
}
.blue {
	color: #2565C5 !important;
}
.wideBlue {
	color: #2565C5 !important;
	font-weight: bold !important;
}
.white {
	color: white !important;
}
.black {
	color: black !important;
}

.gray {
	color: gray !important;
}

.lightgray {
	color: #bebebe !important;
}

.wid_60px {
    min-width: 60px !important;
}

.wid_90px {
    min-width: 90px !important;
}

.wid_120px {
    min-width: 120px !important;
}

.wid_150px {
    min-width: 150px !important;
}

.wid_200px {
    min-width: 200px !important;
}

.img-max-100 {
    max-width: 100%;
    max-height: 100%;
}

.lh_18em {
    line-height: 1.8em !important;
}

.fs-08rem {
	font-size: 0.8rem !important;
}

.fs-09rem {
	font-size: 0.9rem !important;
}

.fs-36px {
	font-size: 36px !important;
}

.fs-32px {
	font-size: 32px !important;
}

.fs-22px {
	font-size: 22px !important;
}

.fs-20px {
	font-size: 20px !important;
}

.fs-18px {
	font-size: 18px !important;
}

.fs-16px {
	font-size: 16px !important;
}

.fs-14px {
	font-size: 14px !important;
}

.fs-12px {
	font-size: 12px !important;
}

.fs-10px {
	font-size: 10px !important;
}

.div-tb {
    display: table;
    width: 100%
}

.div-tb .tr {
    display: table-row
}

.div-tb .tr .td {
    display: table-cell;
    vertical-align: top;
    vertical-align: middle;
    padding: 3px
}

.pre-wrap {
	white-space:pre-wrap;
}

.invisible {
    display: none;
}

.table-center {
  margin-left: auto;
  margin-right: auto;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-underline {
    text-decoration: underline;
}
/* 英文顯示大寫 */
.text-uppercase {
    text-transform: uppercase;
}
/* 英文顯示小寫 */
.text-lowercase {
    text-transform: lowercase;
}
/* 英文顯示弟一個字大寫 */
.text-capitalize {
    text-transform: capitalize;
}

.float-right {
    float: right;
}

.div-center {
	margin:0 auto;
	_margin:0px auto;
	*margin:0px auto;
}

.vtop {
    vertical-align: top !important;
}

.vmid {
    vertical-align: middle !important;
}

.h30 {
    height: 30px;
}

.h40 {
    height: 40px;
}

.fix-wid {
    width: 300px;
}

.w90 {
    width: 90px;
}

.w20 {
    width: 20px;
}

.w30 {
    width: 30px;
}

.w50 {
    width: 50px;
}

.w60 {
    width: 60px !important;
}

.w70 {
    width: 70px;
}

.w80 {
    width: 80px;
}

.w100 {
    width: 100px;
}

.w300 {
    width: 300px !important;
}

.w330 {
    width: 330px;
}

.w340 {
    width: 340px;
}

.w400 {
    width: 400px;
}

.w600 {
    width: 600px;
}

.w2em {
	width: 2em;
}

.w3em {
	width: 3em;
}

.w4em {
	width: 4em;
}

.w5em {
	width: 5em;
}

.w90vw {
    width: 90vw !important;
}

.max_w300 {
    max-width: 300px;
}

.max_w330 {
    max-width: 330px;
}

.max_w400 {
    max-width: 400px;
}

.max_w640 {
    max-width: 640px;
}

.max_w800 {
    max-width: 800px;
}

.max_w900 {
    max-width: 900px;
}

.max_w1000 {
    max-width: 1000px;
}

.max_w1200 {
    max-width: 1200px;
}

.max_w1400 {
    max-width: 1400px;
}

.max_w85vw {
    max-width: 85vw !important;
}

.min_w300 {
    min-width: 300px;
}

.min_w330 {
    min-width: 330px;
}

.min_w900 {
    min-width: 900px;
}

.min_h320 {
    min-height: 320px;
}

.min_h100vh {
    min-height: 100vh !important;
}

.max_h100vh {
    max-height: 100vh !important;
}

.max_h95h {
    max-height: 95vh !important;
}

.max_h90h {
    max-height: 90vh !important;
}

.mb_0px {
    margin-bottom: 0px !important;
}

.mb_5px {
    margin-bottom: 5px !important;
}

.mb_10px {
    margin-bottom: 10px !important;
}

.mb_15px {
    margin-bottom: 15px !important;
}

.mt_5px {
    margin-top: 5px !important;
}

.mt_10px {
    margin-top: 10px !important;
}

.mt_15px {
    margin-top: 15px !important;
}

.mt_30px {
    margin-top: 30px !important;
}

.pl_10px {
    padding-left: 10px !important;
}	  

.pr_10px {
    padding-right: 10px !important;
}  

.inline-block {
	display: inline-block;
}

@media (max-width: 320px) {
	.w340 {
		width: 300px;
	}
}

.mt0 {
    margin-top: 0px !important;
}

.w10_per {
    width: 10%;
}

.w20_per {
    width: 20%;
}

.w33_per {
    width: 33%;
}

.wid_3per {
    width: 3%;
}

.wid_47per {
    width: 47%;
}

.w80_per {
    width: 80%;
}

.w90_per {
    width: 90%;
}

.margin_top20 {
    margin-top: 20px !important;
}

.border_0 {
    border: 0px !important;
}

div.row span.left {  
	float: left;  
	text-align: left;
	width: 49%;  
}

div.row span.right {  
	float: right;  
	text-align: right;  
	width: 49%;  
}

a.link1 {
    color: #006400;
    text-decoration: none;
}

a.link1:hover {
    text-decoration: underline !important;
    color: #fc8200;
}

.link2Button {
    padding: 4px 10px 4px 10px !important;
    border-radius: 5px;
	color: #007300 !important;
	border: 1px solid #d4ccb0 !important; 
    margin: 0 5px 0px 1px !important;
}

.link2Button:hover {
	color: #ffffff !important;
}

.hmenu {
    width: 100%;
	overflow: auto;
	margin-top: -7px;
    /*background-color: #10aa56;*/
    background-color: #f8f9fa !important;
    background: #f5f5f5 !important;
    border-bottom: #008647 5px solid;
	/*
    min-width: 910px;
	*/
}

.hmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.hmenu ul li {
    float: left;
}

.hmenu ul li a {
    display: block;
    /*
    color: #ffffa4;
    background-color: #10aa56;
    */
    font-weight: 600;
    color: #008200;
    text-align: center;
    padding: 15px;
    margin: 1px;
    text-decoration: none;
}

.hmenu ul li a:hover {
	color: #32b58a !important;
	/*
    color: white !important;
    background-color: #006f37 !important;
    */
}

.hmenu ul li a:focus {
    /*padding: 11px !important;*/
	outline: none !important;
	/*border: 5px dotted #ff8000 !important;*/
	color: #32b58a !important;
	/*
    color: white !important;
    background-color: #006f37 !important;
    */
}

.hmenu ul li a.currentTask {
    display: block;
	/*
    color: white !important;
    background-color: #006f37 !important;
    */
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

.hmenu .nav-btn {
	/*margin-top: 0px;
    padding-top: 2px;*/
    color: #008200;
	/*
    color: #ffffa4;
    background-color: #10aa56;
    */
    text-decoration: none;
}

.hmenu .nav-btn i {
	margin-top: 2px;
    /*padding-top: 2px;*/
}

.hmenu .nav-btn:hover {
	color: #32b58a !important;
	/*
    color: white !important;
    */
    /*background-color: #006f37 !important;*/
}

@media (min-width: 770px) {
	.hmenu .nav-bar {
		display: none;
	}
	.hmenu .rwdmenu {
		display: block !important;
		margin-left: auto;
		margin-right: auto;
	}
	/*
	.hmenu ul li{ 
		float: left;
		margin-left:15px;
		padding-left: 15px;
		line-height: 3.3em;
		border-bottom: solid 1px #333;
	}
	*/
}

@media (max-width: 770px) {
	.hmenu .nav-bar {
    	text-align: right;
		height: 51px;
		padding: 3px 12px 3px 12px;
	}
	.hmenu ul {
		display: none;
	}
	.hmenu ul li {
	    width: 100%;
	    /*
	    border-top: solid 1px white;
	    */
	    border-top: #008647 1px solid;
	}
	.hmenu ul li a {
	    text-align: left;
	}
	.hmenu ul li a.currentTask {
	    text-align: left;
	}
}

.footer-line ul {
	display: inline-block;
    list-style-type: none;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.footer-line ul li {
    float: left;
}
 
.left-inner {
	padding-left: 25px;
}
 
.text-indent-1 {
	text-indent: 1em;
}
 
.text-indent-2 {
	text-indent: 2em;
}
 
.text-hanging {
	text-indent: -1em;
	padding-left: 1em;
}

.list-style-position-inside {
	list-style-position: inside !important;
}

.list-style-decimal {
	list-style: decimal !important;
}

.list-style-upper-alpha {
	list-style: upper-alpha !important;
}

.list-style-lower-alpha {
	list-style: lower-alpha !important;
}

.list-style-none {
	list-style: none !important;
}

.list-style-disc {
	list-style: disc !important;
}

.list-style-circle {
	list-style: circle !important;
}

.list-style-square {
	list-style: square !important;
}

.list-style-lower-roman {
	list-style: lower-roman !important;
}

.list-style-upper-roman {
	list-style: upper-roman !important;
}

.list-style-cjk {
	list-style-type: cjk-ideographic !important;
}

.line-break-loose {
	line-break: loose;
}

.line-break-normal {
	line-break: normal;
}

.line-break-strict {
	line-break: strict;
}

.line-break-anywhere {
	line-break: anywhere;
}

.textarea-full-width {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
}

#header .logo_right {
    display: inline-block;
    margin: 5px 0 0;
    float: right;
    min-width: 56px;
}

.result-header {
    border: 1px solid #eeeeee;
    background: #e5e5e5;
    color: #333333;
    font-weight: bold;
}

/* 電子名片 */
.vcard-bgcolor {
  background-color: #e5fffd !important;
}

.vcard_rbtn {
    color: #fff !important;
    font-size: 18px !important;
    text-decoration: none !important;
    text-shadow: none;
    margin: 0 0px 0px 0px !important;
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
    background: #00cbc6 !important;
    border: none !important;
    border-radius: 0px 0px 6px 6px !important;
}

.vcard_rbtn:hover {
    color: #00cbc6 !important;
    -webkit-transition: all 0.40s ease-in-out;
    -moz-transition: all 0.40s ease-in-out;
    -ms-transition: all 0.40s ease-in-out;
    -o-transition: all 0.40s ease-in-out;
    background: #ffffff url(../img/tb_btn_bg.gif) repeat-x bottom !important;
    border: none !important;
}

.vcard-font {
    font-family: NotoSansTCRegular !important;
}

.vcard-content {
    /*padding: 0px 10px 0px 10px;*/
    background: #fff;
    border: 1px solid #e3e3e3;
    border-top: none;
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    -webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    /*box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);*/
    box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.23);
}
.vcard-content-margin {
	margin: 0px 10px 0px 10px;
}

.vcard-footer {
    height: 32px;
    line-height: 32px;
    font-family: sans-serif !important;
	font-size: 22px !important;
    color: #ffffff;
    text-align: center;
    overflow: hidden;
	background: -webkit-linear-gradient(left, #c0cf36, #24993e);
	background: -o-linear-gradient(right, #c0cf36, #24993e);
	background: -moz-linear-gradient(right, #c0cf36, #24993e);
	background: linear-gradient(to right, #c0cf36, #24993e);
}
/* 電子名片 - 線上申辦專區選單 */
.apply-service-title {
	color: #000;	
	font-weight: bold;
}
.apply-service-items {
	display:block;
    /*width: 280px;*/
	text-align: center; 
	margin:0 auto 0 auto; 
}

.apply-service-items ul {
    list-style-type: none;
    border: none;
    margin: 0;
    padding: 0;
    /*width: 280px;*/   
    /*background-color: #fff;*/
}

.apply-service-items ul li {
    margin-top: 10px;
    /*border-bottom: 1px solid #7d7d7d;*/
}

.apply-service-items ul li:last-child  {
    /*border-bottom: none;*/
}

.apply-service-items ul li a {
    display: block;
    height: 42px;
    text-decoration: none;
	font-weight: bold; 
	border: 1px solid #009300; 
	/*border: 1px solid #e3e3e3; */
	background: #fafaf4 url("../img/jquery/ui-bg_highlight-hard_100_fafaf4_1x100.png") 50% 50% repeat-x; 
	color: #007300 !important;
	/*color: #333 !important;*/
    /*font-family: "微軟正黑", "Microsoft JhengHei", Arial, sans-serif !important;*/
    text-shadow: none !important;
    margin: 0 5px 0px 1px !important;
    padding-top: 8px;
    border-radius: 5px;
    /*box-shadow: none !important;*/
    box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    -webkit-transition: all 0.40s ease-in-out;
    -moz-transition: all 0.40s ease-in-out;
    -ms-transition: all 0.40s ease-in-out;
    -o-transition: all 0.40s ease-in-out;
}
/*
.apply-service-items ul li a:hover {
	font-weight: bold; 
	border: 1px solid #327E04 !important; 
	background: #009300 url("../img/jquery/ui-bg_highlight-hard_15_009300_1x100.png") 50% 50% repeat-x; 
	color: #ffffff !important;
    box-shadow: none !important;
    -webkit-transition: all 0.40s ease-in-out;
    -moz-transition: all 0.40s ease-in-out;
    -ms-transition: all 0.40s ease-in-out;
    -o-transition: all 0.40s ease-in-out;
}
*/
/** 自訂button icon範例 */
.icon-dsa {
	background-image: url('../img/TI01.png') !important;;
}

/** RWD begin */
.main-bg {
	/*background: #edfaee url(../img/mainBg.gif) repeat-x top;*/
	background: #eff5f1; /* fallback for old browsers */
    /* background: -webkit-linear-gradient(to top, #daf1da, #45b649); */ /* Chrome 10-25, Safari 5.1-6 */
    /* background: linear-gradient(to top, #daf1da, #45b649); */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	margin: 0 auto;
    /*margin-top: -8px !important;*/
}

.main-content {
    padding: 0px 10px 0px 10px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-top: none;
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    -webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
    box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.1);
}

@media (min-width:533px) {
	.l-d-none {
		display: none;
	}
	.credit-remind {
		width:400px;
		margin:0px auto;
	}
	.main-content {
	    padding: 0px 20px 0px 20px;
	}
	.rwd-table {
		border: 1px solid #cccccc;
	    border-bottom: none;
	}
	.rwd-table .rwd-field:last-of-type .rwd-field-input {
  		margin-bottom: 10px;
	}
	.rwd-field {
	 	display: table;
	    width: 100%;
	    border-bottom: 1px solid #cccccc;
	}
	.rwd-field .rwd-field-txt {
	    display: inline-block;
	    *display: inline;
	    *zoom: 1;
	    display: table-cell;
	    background: #f1f1f1;
	    vertical-align: top;
	    font-weight: 700;
	    text-align: right;
	    width: 200px;
	    height: 12px;
	    padding: 18px 4px 15px 4px;
	}
	.rwd-field .rwd-field-box {
	    display: table-cell;
	    vertical-align: top;
	}
	.rwd-field .rwd-field-output {
	    display: table-cell;
	    vertical-align: middle;
	    padding-left: 10px;
	}
	.rwd-field .rwd-field-input {
	    display: inline-block;
	    *display: inline;
	    *zoom: 1;
	    margin-left: 10px;
	    padding-top: 10px;
	}
	/*
	.rwd-field .rwd-field-input > input {
	  width: 222px;
	}
	*/
	.rwd-field .rwd-field-input .rwd-field-input {
	    margin-left: 0;
	    padding-top: 0;
	}
}

@media (max-width: 532px) {
	.s-d-none {
		display: none;
	}
	.credit-remind {
		width:100%;
		margin:0px auto;
    	word-break: break-all;
	}
	.rwd-field {
  		*zoom: 1;
  		clear: both;
	}
	.rwd-field:before, .rwd-field:after {
	    content: " ";
	    display: table;
	}
	.rwd-field:after {
	    clear: both;
	}
	.rwd-field:not(:last-of-type) {
	    margin-bottom: 20px;
	}
	.rwd-field .rwd-field-txt {
		font-weight: 550;
	    font-size: 18px;
	    margin-bottom: 10px;
	}
	/*
	.rwd-field .rwd-field-input input {
	  width: 95.5%;
	}
	.rwd-field .rwd-field-input textarea {
	  width: 90%;
	}
	*/
	#header .logo_area {
		width:100%;
	    text-align:center;
	}
	.footer-line ul li {
	    float: none;
	}
	
	input, textarea {
		font-size: initial !important;
	}
}
@media (max-width: 767px) {
	.header .hd { text-align: center; }
}

@media (min-width: 1200px) {
	.container { max-width: 1140px; }	
} 

@media (min-width: 1170px) {
	.container { width: 1170px; }
}
/*
@media (min-width: 992px) {
	.container { max-width: 960px; }	
} 

@media (min-width: 768px) {
	.container { max-width: 720px; }	
} 

@media (min-width: 576px) {
	.container { max-width: 540px; }	
} 
*/
/** RWD end */
@media print {
  div {
    break-inside: auto;
  }
  .box_style {
    display: table;
  }
  .warningBox {
    display: table;
  }
}

/** 鑫世界商務卡紅利商品兌換 begin */
.ui-datagrid-content .card {
    background: var(--surface-e);
    padding: 2rem;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    border-radius: 4px;
    margin-bottom: 2rem;
    border: 1px solid #dddddd;
}

.product .product-name {
    font-size: 1rem;
    font-weight: 700
}

.product .product-description {
    margin: 0 0 1rem 0
}

.product .product-category-icon {
    vertical-align: middle;
    margin-right: .5rem
}

.product .product-category {
    font-weight: 600;
    vertical-align: middle
}

.product .product-list-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 1rem
}

.product .product-list-item.border-1 {
    border-bottom: 1px solid var(--surface-d)
}

.product .product-list-item img {
    width: 150px;
    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
    margin-right: 2rem
}

.product .product-list-item .product-list-detail {
    flex: 1 1 0;
    -ms-flex: 1 1 0
}

.product .product-list-item .ui-rating {
    margin: 0 0 .5rem 0
}

.product .product-list-item .product-price {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: .5rem;
    align-self: flex-end
}

.product .product-list-item .product-list-action {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.product .product-list-item .ui-button {
    margin-bottom: .5rem
}

.product .product-grid-item.border-1 {
    border: 1px solid var(--surface-d)
}

.product .product-grid-item .product-grid-item-top,.product .product-grid-item .product-grid-item-bottom {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.product .product-grid-item img {
    width: 75%;
    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
    margin: 0 0 2rem 0
}

.product .product-grid-item .ui-rating {
    margin: 0 0 1rem 0
}

.product .product-grid-item .product-grid-item-content {
    text-align: center
}

.product .product-grid-item .product-price {
    font-size: 1.5rem;
    font-weight: 600
}

@media screen and (max-width: 576px) {
    .product .product-list-item {
        -ms-flex-direction:column;
        flex-direction: column;
        -ms-flex-align: center;
        align-items: center
    }

    .product .product-list-item img {
        width: 75%;
        margin: 0 0 2rem 0
    }

    .product .product-list-item .product-list-detail {
        text-align: center
    }

    .product .product-list-item .product-price {
        align-self: center
    }

    .product .product-list-item .product-list-action {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .product .product-list-item .product-list-action {
        margin-top: 2rem;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: center;
        align-items: center;
        width: 100%
    }
}
/** 鑫世界商務卡紅利商品兌換 end */