:root {
  --font-family-title: "Microsoft Yahei","微软雅黑", Tahoma, Helvetica, Arial, sans-serif;
  --font-family-content: "Microsoft Yahei","微软雅黑", Tahoma, Helvetica, Arial, sans-serif;
  --color-html-text: #333333;
  --color-html-bg: #FFF;
  --color-primary:  rgb(115, 84, 125);
  --color-primary-9: rgba(115, 84, 125, 0.8);
  --color-secondary: #43396B;
  --color-white: #FFF; 
  --color-primary-text: #FFFFFF;
  --color-secondary-text: #3C3C3C;
}

html, body{
  color:var(--color-html-text);
  background-color: var(--color-html-bg);
  font-family: var(--font-family-content);
}

header{

}
footer{
  margin-top:25px;
  margin-bottom: 120px;
}
.footer-content{
  padding-top:20px;
  background-color: var(--color-secondary);
  color: var(--color-primary-text);
}
.footer-content ul{
  margin-top:5px;
  margin-bottom:25px;
}
.footer-content ul li{
  padding:4px 8px 4px 8px;
}
.footer-content .title{
  padding: 12px 12px 6px 4px;
  color: var(--color-primary-text);
}
.footer-content p{
  padding: 0 0 0 4px;
  color: var(--color-primary-text);
}
.footer-content a{
  color:var(--color-primary-text);
  text-decoration: none;
}

.btn{
  background-color: var(--color-secondary);
  color: var(--color-primary-text);
}
.btn:hover{
  background-color: var(--color-primary);
  color: var(--color-primary-text);
}

a{
  color:var(--color-secondary);
  text-decoration: none;
}
a:hover{
  color:var(--color-primary-text);
  background-color:var(--color-primary);
  text-decoration: none;
}


input[type="text"]:focus,
.custom-select:focus{
  border-color: var(--color-primary);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px var(--color-secondary);
  outline: 0 none;
}

::selection {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
::-moz-selection {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

p {
  line-height: 1.55;
  color: #333;
  font-size: 400;
}

.div-primary-top{
  border-top: solid 8px var(--color-secondary);
  background-color: var(--color-primary);
}
.div-primary{
  background-color: var(--color-primary-9);
  color: var(--color-primary-text);
  -webkit-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.15);
}
.navbar-brand{
  font-size: 24px;
  color:var(--color-primary-text) !important;
}
a.navbar-brand:hover{
  color:var(--color-primary-text) !important;
  background: none !important;
}
.nav-item{
  list-style-type: disc;
  margin:0;
  padding:0;
  margin: 0 18px 0 8px;
  
}
.nav-item a{
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.dropdown-menu{
  background-color: var(--color-primary) !important;
}
.nav-link, a.dropdown-item{
  color:var(--color-primary-text) !important;
  text-decoration: none;
  background-color: var(--color-primary) !important;
  border-radius: 8px;
}
a.dropdown-item:hover{
  color:var(--color-primary-text) !important;
  text-decoration: none;
  background: var(--color-secondary) !important;
}
.navbar-nav a{
  color:var(--color-primary);
  text-decoration: none;
}
.navbar-nav a:hover{
  color:var(--color-primary-text) !important;
  text-decoration: none;
  background: var(--color-secondary) !important;
  border-radius: 8px;
}
.navbar-nav a.active{
  color:var(--color-primary-text) !important;
  text-decoration: none;
  background: var(--color-secondary) !important;
  border-radius: 8px;
}
.card-header{
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 18px;
}

.ul-list-product{
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  border: solid 0px #000;
}
.ul-list-product li{
  margin: 8px 0 12px 0;
  border-bottom: solid 0px #CCC;
}

.loop-index{
  margin-top:5px;
  margin-bottom:5px;
}
.loop-index .item{
  border: solid 1px #CCC;
  border-radius: 5px;
}
.loop-index .li-div-img{
  border: solid 0px #CCC;
  padding:2px;
}
.loop-index .li-div-descp{
  font-size: 14px;
  border-bottom: solid 0px #CCC;
  padding:6px;
}
.loop-index .card-price{
  border: solid 0px #CCC;
}

.li-product{
  margin:0;
  padding:0px;
  margin-bottom:4px;
}
.li-product-category{
  margin:4px 0 4px 0;
}
.li-div{
  padding:0;
  margin:4px;
  border-bottom: solid 1px #CCC;
}
.li-div-img{
  vertical-align: top;
  padding: 0;
  margin:0;
  border: solid 1px #CCC;
}
.li-div-descp{
  border: solid 0px #000;
  margin: 0;
  padding:5px 4px 0 4px;
}
.card-price{
  font-size: 14px;
  font-weight: bold;
  color:var(--color-primary);
  margin-top: 15px;
}

.body-top-pro-list-content{
  min-height:125px;
}

.loadtime{
  font-size: 12px;
}

.the-page-content{
  overflow-wrap: break-word;
  word-break: break-word;
}
.the-page-content h1{
  color:var(--color-primary);
  padding-bottom: 10px;
}


.the-navi-guide{
  margin-left:0;
  padding-left:0;
  list-style: none;
  border:solid 0px #000;
  width: 100%;
  text-align: left;
  margin-bottom:18px;
  padding-top:12px;
  padding-left:15px;
  padding-right: 15px;
  padding-bottom:14px;
  border-bottom:solid 1px #CCC;
}
.the-navi-guide li{
  display: inline-flex;
  font-size: 14px;
  color:#333;
  padding:0px;
}
.the-navi-guide li::before {
  font-size: 10px;
  font-weight: bold; content: ">>";
  margin-right: 6px;
  margin-left: 0;
  vertical-align: middle;
  border:solid 0px #000;
  margin-bottom: 2px;
  display: flex;
  margin-top: 4px;
}
.the-navi-guide li:first-child::before { 
  display: none;
}
.the-navi-guide li:first-child{
  background-color: var(--bg-color-second);
  color: var(--text-color-second);
  padding:5px 0 5px 0;
}

.sticky-top{
  top:10px;
}
.sticky-sidebar-right{
  position: sticky;
  top: 0;
  z-index: 100;
}
.sticky-banner-bottom{
  border-top:#EEEEEE solid 1px;
  position: fixed;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1030;
}
.close-sticky-banner-bottom{
  position: absolute;
  right:0;
  top:0;
  padding:0;
  margin:0;
  padding-right: 10px;
  padding-left: 5px;
  border:solid 1px #CCC;
}


@media (max-width: 575.98px) { 
  .div-primary-top{
    padding:4px 12px 14px 12px;
  }
  .div-primary{
    padding-bottom: 14px;
  }
  .navbar-collapse{
    margin-top:15px;
    margin-left:20px;
  }
  .body-top-pro-list-content{
    min-height: inherit;
    border:solid 1px #000;
  }
  .sticky-sidebar-right{
    position: relative;
    padding-left:0;
  }

}

@media (max-width: 991.98px) { 
  .sticky-sidebar-right{
    position: relative;
    padding-left:0;
  }
}