﻿/*.clearfloat:after{content:".";display:block;height:0;visibility:hidden}
.clearfloat{display:block}
.container-stlye{background:#999;width:100%;margin:0 auto;padding:0;display:block;}*/
.mp_MainWd{
    float: left;
    width: 100%;
}
.leftbar {
    width: 20%;
    vertical-align: top;
    text-align: left;
    /*padding-left: 40px;*/
}
.topbar {
    padding: 0 0 20px 30px;
    text-align: left;
    vertical-align: top;
    width: 93%;
}
.topbarCt {
    max-height: 400px;
}
.ckptopbar {
    padding: 10px 0 0 0;
    vertical-align: top;
}
.MainContainer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
.MainContainer table{
    margin: 0 auto;
}
.MainContainer table tr td{
    padding: 15px;
}
#MainWebMenu {
    text-align: center;
}

#MainWebMenu li {
    position: relative;
    width: 140px;
    display: inline-block;
    text-decoration: none;
    height: 32px;
    line-height: 32px
}

#MainWebMenu li ul {
    display: none;
    background: #747474;
    padding: 0;
}
#pdMenu {
    width: 100%;
    margin: -28px 0 auto;
    padding: 0;
    text-align: center;
}
.webMenu {
    background: #FAFAF5;
    color: #000;
    cursor: pointer;
}
.webMenu a {
    color: #1B365C;
    font-weight: bold;
    font-size: 17.5px;
}
#MainPdMenu {
    text-align: center;
}

#MainPdMenu li {
    display: inline-block;
    position: relative;
    width: 160px;
    border-bottom: solid 1px #ccc;
}

#MainPdMenu li a {
    color: white;
    display: inline-block;
    /*padding: 0 14px;*/
    text-decoration: none;
    height: 32px;
    line-height: 32px;
    width:100%;
}

#MainPdMenu > li > a:hover {
    background: #8f7c6a;
    color: #fff;
    text-decoration: none;
    height: 32px;
    line-height: 32px
}

#MainPdMenu li ul {
    display: none;
    background: #FAFAF5;
    padding: 0;
    position: absolute;
}

#MainPdMenu li:hover .subMenu {
    display: block;
    top: 32px;
    left: 0;
    z-index: 100;
    width: 160px;
}

#MainPdMenu li ul li {
    margin-right: 0;
    width: 160px;
}
#MainPdMenu li ul li a {
    color: #1B365C;
    display: block;
    height: auto;
}
#MainPdMenu li ul li a:hover {
    background: #8f7c6a;
    color: #fff;
    text-decoration: none
}
.WebMenuZ {
    z-index: 1;
    background-color: inherit;
    color: #333;
}
#subMenu li {
    float: left;
    display: block;
    position: relative;
}

#subMenu li a {
    color: #000;
    letter-spacing: 1.3px;
    height: 32px;
    line-height: 32px;
    display: inline-block;
    padding: 0 14px;
}
/*mobilePdmenu  手機商品選單----*/
#pdMenuM ul {
    margin: 0;
    padding: 0;
    width: 100%;
}

#pdMenuM li {
    list-style: none;
    font-size: 16px;
}

.col-sm-4 {
padding: 15px;
}
.col-xs-12 {
    width: 100%;
    float: left;
}

.colspilt{
    padding-bottom: 30px; 
}
/*.msmPoint {
    background: url('../image/others/pointDown.PNG') no-repeat right;
}*/

.msmPoint:hover, .msmPoint a:hover {
/*background: url('../image/others/pointDownF.PNG') no-repeat right;*/
}

/*.open {
background: url('../image/others/pointTop.PNG') no-repeat right;
}

.open:hover, .open a:hover {
background: url('../image/others/pointTopF.PNG') no-repeat right;
}*/

.mPdmain {
    padding: 0px 0px 0px 47px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    font-size: 15px;
}

.mPdmain a {
    color: #000;
    font-weight: normal;
}

.webMenuM {
    padding: 0px 0px 0px 30px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    font-size: 15px;
}
.webMenuMLink {
    color: #1B365C;
    font-weight: bold;
}
#pdMenu {
padding: 0px;
margin: 0px auto;
width: 100%;
text-align: center;
}
#pdMenuM {
margin: 0;
padding: 0;
}

ul.MainPdMenu, ul.MainPdMenu ul { /* 取消ul預設的內縮及樣式 */
margin: 0;
padding: 0;
list-style: none;
}

ul.MainPdMenu {
display: inline-block;
font-size: 18px;
}

ul.MainPdMenu li {
position: relative;
/*white-space: nowrap;*/ /*控制選單排列方式*/
width: 108px;
min-width: 108px;
top: 5px;
}

ul.MainPdMenu > li:last-child {
border-right: none;
}

ul.MainPdMenu > li {
float: left; /* 只有第一層是靠左對齊*/
}

ul.MainPdMenu a {
color: #000;
display: block;
padding: 0px;
text-decoration: none;
line-height: 30px;
}

ul.MainPdMenu a:hover { /* 滑鼠滑入按鈕變色*/
    color: #000;
}

ul.MainPdMenu ul li > a { /* 滑鼠移入次選單上層按鈕保持變色*/
color: #000;
}

ul.MainPdMenu ul li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
/*background-color: #f89090;*/
color: #337ab7;
font-weight: bold;
}

ul.MainPdMenu ul {
border: #ccc 1px solid;
background-color: #FAFAF5;
position: absolute;
z-index: 999;
left: -1px;
/*width: 100%;*/
max-width: 210px;
min-width: 210px;
font-size: 15px;
}

ul.MainPdMenu ul li {
    margin: 0;
    padding: 0;
    width: 100%;
}

    ul.MainPdMenu ul li a {
        line-height: 30px;
    }

    ul.MainPdMenu ul li:last-child {
        border-bottom: none;
    }

ul.MainPdMenu ul ul { /*第三層以後的選單出現位置與第二層不同*/
    z-index: 999;
    /*top: 10px;*/
    left: 90%;
}

ul.MainPdMenu ul { /*隱藏次選單*/
display: none;
left: 0px;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}

ul.MainPdMenu li:hover > ul { /* 滑鼠滑入展開次選單*/
display: block;
opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
left: -1px;
/*border-right: 5px;*/
}

ul.MainPdMenu li:hover > ul ul { /* 滑鼠滑入之後、次選單之後的選單依舊隱藏*/
    left: 0px;
}

ul.MainPdMenu ul li:hover > ul { /* 第二層之後的選單展開位置*/
left: 90%;
}

/*mobilePdmenu  手機商品選單-----------------------------------------------------------------*/
#pdMenuM {
width: 100%;
}

#pdMenuM ul {
margin: 0;
padding: 0;
}

#pdMenuM li {
list-style: none;
}

.mPdmain {
padding: 0px 0px 0px 52px;
height: 40px;
line-height: 40px;
cursor: pointer;
font-size: 15px;
}

.mPdmain a {
color: #999;
font-weight: normal;
}

.mPdmain:hover, .mPdmain div:hover, .mPdmain a:hover {
    color: #000;
    font-weight: bold;
    /*background-color: #312a22;*/
}

.mPdmain3 {
    display: block;
    padding: 5px 10px 0px 65px;
    background-color: #886e54;
    font-size: 15px;
    color: #ddd;
    border-right: solid 10px #886e54;
}

.mPdmain3:hover {
    background-color: #312a22;
    border-right: solid 10px #312a22;
    color: #fff;
}
ul.mPdsubs li a {
    color: #fff;
}
.mPdmain4 a {
    display: block;
    padding: 5px 10px 0px 80px;
    background-color: #6b473c;
    font-size: 15px;
    color: #ddd;
    border-right: solid 10px #6b473c;
}
.mPdmain4 a:hover {
    background-color: #312a22;
    border-right: solid 10px #312a22;
    color: #fff;
}
.slider {
box-sizing: border-box;
}

.slider h3 {
font-size: 35px;
line-height: 45px;
margin-top: 30px;
margin-bottom: 50px;
color: #000;
text-align: center;
font-weight: 700;
}

.sli-carousel {
/*margin-bottom: 70px;*/
padding: 0 4%;
display: block;
/*width: 100%;*/
position: relative;
}

.sli-carousel-in {
position: relative;
}

.sli-stage-out {
    height: 400px;
    overflow: hidden;
}
.AsSli-stage-out {
    /*height: 500px;*/
    overflow: hidden;
}

.sli-stage {
    /*width: 1900px;*/
    /*height: 310px;*/
    transform: translate3d(0px, 0px, 0px);
}

.sli-item {
/*max-width: 240px;*/
width: 260px;
height: 300px;
float: left;
text-align: center;
}
.AsSli-item {
    width: 260px;
    float: left;
    text-align: center;
}
.sli-itemblock {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 20px;
    font-weight: 600;
}

.item {
    padding: 0 10% 0 0;
}
.as-item {
    padding: 0 10% 40px 0;
}

.sli-content {
align-items: center;
height: 100%;
width: 100%;
text-align: center;
float: left;
position: relative;
opacity: 1;
}

.img-control {
    height: 300px;
    /*display: table;*/
    overflow: hidden;
}
.Asimg-control {
    overflow: hidden;
    height: 220px;
}

.img-control_brower {
height: 250px;
/*display: table;*/
overflow: hidden;
}

.img-control_brower > a > img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}

.img-control > a > img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    /*width: 100%;
    height: 100%;*/
}

.sli-nav {
font-size: 50px;
color: #999;
line-height: 60px;
}

.sli-prev {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
    font-size: 60px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    left: 4%;
    z-index: 11;
}

.sli-next {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
    font-size: 60px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    right: 4%;
    z-index: 11;
}

.sli-prev:hover {
color: #000000;
transition: color 0.5s;
}

.sli-next:hover {
    color: #000000;
    transition: color 0.5s;
}
.sp-sli-prev {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
    position: absolute;
    top: 35%;
    margin-top: -25px;
    left: 4%;
    z-index: 11;
}
.sp-sli-next {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
    position: absolute;
    top: 35%;
    margin-top: -25px;
    right: 4%;
    z-index: 11;
}
.sp-sli-prev:hover {
    color: #000000;
    transition: color 0.5s;
}

.sp-sli-next:hover {
    color: #000000;
    transition: color 0.5s;
}

.as-sli-next {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
    font-size: 40px;
    position: absolute;
    top: 45%;
    margin-top: -25px;
    right: 0;
    z-index: 11;
}
.as-sli-prev {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
    font-size: 40px;
    position: absolute;
    top: 45%;
    margin-top: -25px;
    left: 0;
    z-index: 11;
}
.as-sli-prev:hover {
    color: #000000;
    transition: color 0.5s;
}

.as-sli-next:hover {
    color: #000000;
    transition: color 0.5s;
}

.fa-angle-left {
    cursor: pointer;
    content: "\f104";
}

.fa-angle-right {
    cursor: pointer;
    content: "\f105";
}

.butt-content-center {
display: flex;
align-items: flex-end;
justify-content: center;
}

.UserWebPage_about {
position: relative;
margin-bottom: 80px;
display: flex;
align-items: center;
justify-content: center;
}

.about_butt {
padding: 10px 25px;
position: absolute;
background-color: #000000;
color: #fff;
}

.about_butt:hover {
text-decoration: none;
color: #337ab7;
}
.search-pages {
    background-color: #FAFAF5;
    outline: 0;
    z-index: 2;
    color: #000;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.5;
    border: 0;
}

.search-pages:hover {
    transition: .5s;
    text-decoration: underline;
}

.search-pages-select {
    background-color: #FAFAF5 !important;
    outline: 0;
    z-index: 2;
    color: #000;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: underline;
    border: 0;
}
.breadcrumb_top {
    background-color: #FAFAF5;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}
.breadcrumb_top > li {
    display: inline-block;
}

.breadcrumb_top > li > a:hover {
    color: #999;
    transition: 0.5s;
}

.breadcrumb_top > li > a {
    font-weight: 600;
    font-size: 18px;
    color: #1B365C;
}

.breadcrumb_top > li > span {
    font-weight: 600;
    font-size: 18px;
    color: #1B365C;
}
.breadcrumb_left {
    padding-left: 20px;
}

#breadcrumb_leftMenu {
    padding-left: 0;
}
#breadcrumb_leftMenu ul {
    padding-left: 20px;
}

#breadcrumb_leftMenu li {
    list-style: none;
    font-weight: 600;
    color: #1B365C;
}
#breadcrumb_leftMenu li a {
    font-weight: 600;
    color: #1B365C;
}
#breadcrumb_leftMenu li.left_sub {
    line-height: 2;
    font-size: 20px;
    cursor: pointer;
}
#breadcrumb_leftMenu li.left_sub a {
    display:block;
    width: 100%;
    height: 100%;
}
#breadcrumb_leftMenu li.left_sub > div:hover a {
    color: #15486D;
    transition: 0.5s;
}
#breadcrumb_leftMenu li.left_sub2 {
    line-height: 2;
    font-size: 18px;
    display: none;
}
#breadcrumb_leftMenu li.left_sub2 a {
    display:block;
    width: 100%;
    height: 100%;
}
#breadcrumb_leftMenu li.left_sub2 > div:hover a {
    color: #15486D;
    transition: 0.5s;
}
#breadcrumb_leftMenu li.left_sub3 {
    line-height: 2;
    font-size: 18px;
    display: none;
}
#breadcrumb_leftMenu li.left_sub3 a {
    display:block;
    width: 100%;
    height: 100%;
}
#breadcrumb_leftMenu li.left_sub3:hover a {
    color: #15486D;
    transition: 0.5s;
}
.leftMenuTitle {
    width: 80%;
    display: inline-block;
}
.leftMenuBtn {
    width: 20%;
    display: inline-block;
    text-align: center;
}
.leftMenuBtn:hover {
    color: #ff9e00;
}
.breadcrumb_left > li {
    font-weight: 600;
    display: block;
    color: #1B365C;
}
.breadcrumb_left > li.left_main > a {
    font-weight: 600;
    color: #1B365C;
}
.breadcrumb_left > li.left_main > a:hover {
    color: #666;
    transition: 0.5s;
}
.breadcrumb_left > li.left_sub > a {
    font-weight: 600;
    color: #666;
}
.breadcrumb_left > li.left_sub > a:hover {
    color: #999;
    transition: 0.5s;
}
.breadcrumb_left > li.left_sub2 > a {
    font-weight: 600;
    color: #666;
}
.breadcrumb_left > li.left_sub2 > a:hover {
    color: #999;
    transition: 0.5s;
}
.breadcrumb_left > li.left_sub3 > a {
    font-weight: 600;
    color: #666;
}
.breadcrumb_left > li.left_sub3 > a:hover {
    color: #999;
    transition: 0.5s;
}
.breadcrumb_lScrollDiv {
    height: 1720px;
    overflow-y: scroll;
    background-color: #f2f3f5;
}
.breadcrumb_lScrollDiv::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    background-color: #FAFAF5;
    border-radius: 3px;
}
.breadcrumb_lScrollDiv::-webkit-scrollbar {
    width: 6px;
    background-color: #FAFAF5;
}

.breadcrumb_lScrollDiv::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #666;
}
.left_top {
    /*line-height: 2.5;*/
    font-size: 30px;
}
.breadcrumb_left > li.left_top > a {
    font-weight: 600;
    color: #1B365C;
}
.left_main {
    line-height: 2;
    font-size: 26px;
}
.PdBrowCenter {
    text-align: -webkit-center;
    vertical-align: top;
}
.PdmainAction_img{
    width: 100%;
}
.pdBrowsort_td {
    vertical-align: top;
    padding-right: 20px;
    text-align: right;
}
.pdBrowsort {
    font-weight: 500;
    border-radius: 0px;
    border: 1px solid #666;
    color: #000;
}
.sli-content > a {
    font-weight: 600;
    color: #212529;
    font-size: 18px;
    line-height: 26px;
}
.sli-content > a:hover {
    color: #999;
    text-decoration: none;
}
.pdBorwDiv {
    padding: 0px 135px;
}
.pdBrowText {
    margin-bottom: 0;
    font-weight: bold;
    font-size: 14px;
}