@import url("user-editor.css");
/* ---==header==-- */
.index-header >.header-wrapper{
    width: 100%;
    height: 100%;
    float: left;
    display: block;
    background: transparent;
    position: relative;
}
.index-header >.header-wrapper>.header-inner{
    max-width: 1370px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
}
.index-header >.header-wrapper>.header-inner::after{
    content: '';
    clear: both;
    display: block;
}
.index-header >.header-wrapper>.header-inner>.yuelogo-box{
    float: left;
    width: 276px;
    height: auto;
    padding: 28px 75px;
}
.index-header >.header-wrapper>.header-inner>.yuelogo-box>img{
    float: left;
    max-width: 100%;
    height: auto;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper{
    float: left;
    width: calc(100% - 276px);
    height: auto;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner{
    float: left;
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
}

.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.nav-box{
    float: left;
    width: calc(100% - 350px);
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.nav-box>.nav-list{
    float: left;
    width: calc(100% / 6);
    height: auto;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.nav-box>.nav-list>a{
    float: left;
    width: 100%;
    height: auto;
    padding: 28px 0px;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.nav-box>.nav-list>a>h1{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    font-size: 17px;
    font-weight: bold;
    color: rgba(255,255,255,1);
    text-align: center;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.nav-box>.nav-list>a:hover>h1{
    color: rgba(255,255,255,0);
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.nav-box>.nav-list>a>h1::before{
    content: attr(data-group);
    float: left;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 17px;
    font-weight: bold;
    color: rgba(71,71,71,0);
    text-align: center;
    font-weight: bold;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.nav-box>.nav-list>a:hover>h1::before{
    color: rgba(71,71,71,1);
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.search-box{
    float: left;
    max-width: 185px;
    height: 116px;
    padding: 0 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.search-box>.search-inner{
    float: left;
    width: 45px;
    height:auto;
    border-radius: 50%;
    overflow: hidden;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.search-box>.search-inner>.header-search{
    float: left;
    width: 100%;
    height:45px;
    position: relative;
    display: block;
    background: rgb(71,71,71);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.search-box>.search-inner:hover>.header-search{
    background: rgb(230, 230, 230);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.search-box>.search-inner>.header-search>span{
    width: 17px;
    height:17px;
    position: absolute;
    top: 21px;
    left: 21px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    display: block;
    background: transparent;
    border: 2px solid #fff;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.search-box>.search-inner>.header-search>span>i{
    width: 7px;
    height:2px;
    position: absolute;
    top: 15px;
    left: 15px;
    transform: translate(-50%,-50%) rotate(45deg);
    display: block;
    background: #fff;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.search-box>.search-inner:hover>.header-search>span{
    border: 2px solid rgb(71, 71, 71);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-header >.header-wrapper>.header-inner>.nav-wrapper>.nav-inner>.search-box>.search-inner:hover>.header-search>span>i{
    background: rgb(71, 71, 71);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
/* --==mobile-header==-- */
.mobile-header{
    display: none;
    background: rgba(254, 254, 255, 0.00);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    z-index: 10;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.mobile-header::after{
   content: '';
   display: block;
   clear: both;
}
.mobile-header>.yuelogo-box{
    float: left;
    width: 115px;
    height: auto;
}
.mobile-header>.yuelogo-box>img{
    float: left;
    width: 100%;
    height: auto;
}
.mobile-header>.menu {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    right: -100vw;
    -webkit-transoform: translateX(0);
    transform: translateX(0);
    transition: all .3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;

}
.menu::after {
    content: '';
    display: block;
    clear: both;
}
.hub-show .menu {
    -webkit-transoform: translateX(-100vw);
    transform: translate(-100vw);
}
.menu >.menu-inner {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.menu >.menu-inner>.nav-box{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.menu >.menu-inner>.nav-box li {
    width: 100%;
    height: auto;
   
}
.menu >.menu-inner>.nav-box li a {
    padding: 15px;
    float: left;
    width: 100%;
    transition: all .3s;
}
.menu >.menu-inner>.nav-box li >a>h1 {
    width: 100%;
    height: auto;
    color: rgba(255, 255, 255,1);
    text-align: center;
    position: relative;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.2s ease;
    font-size: 18px;
}
.menu >.menu-inner>.nav-box li a >h1::before{
    content: attr(data-group);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: rgba(255, 255, 255,0.00);
    text-align: center;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.2s ease;
    font-size: 18px;
}
.menu >.menu-inner>.nav-box li a:hover >h1{
    color: rgba(255, 255, 255,0);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.menu >.menu-inner>.nav-box li a:hover >h1::before{
    color: rgba(255, 255, 255,1);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.hub_btn {
    display: block;
    float: right;
}
.hub_btn {
    background-color: rgba(112, 112, 112, 0.35);
    width: 50px;
    height: 50px;
    padding: 1em;
    text-align: center;
}
.hub_inner {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
}
.hub_inner span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    margin: auto;
    transition: all .3s ease;
}
.hub_inner span:nth-of-type(1) {
    top: 0;
}
.hub_inner span:nth-of-type(2) {
    top: 6px;
}
.hub_inner span:nth-of-type(3) {
    top: 12px;
}
.hub_btn.is-active .hub_inner span:nth-of-type(1) {
    -webkit-transform: translate(0px, 6px) rotate(45deg);
    transform: translate(0px, 6px) rotate(45deg);
}
.hub_btn.is-active .hub_inner span:nth-of-type(2) {
    opacity: 0;
}
.hub_btn.is-active .hub_inner span:nth-of-type(3) {
    -webkit-transform: translate(0px, -6px) rotate(-45deg);
    transform: translate(0px, -6px) rotate(-45deg);
}
.menu >.menu-inner>.search-box{
    float: right;
    max-width: 185px;
    height: 52px;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu >.menu-inner>.search-box>.search-inner{
    float: left;
    width: 45px;
    height:auto;
    border-radius: 50%;
    overflow: hidden;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu >.menu-inner>.search-box>.search-inner>.header-search{
    float: left;
    width: 100%;
    height:45px;
    position: relative;
    display: block;
    background: rgb(71,71,71);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.menu >.menu-inner>.search-box>.search-inner:hover>.header-search{
    background: rgb(230, 230, 230);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.menu >.menu-inner>.search-box>.search-inner>.header-search>span{
    width: 17px;
    height:17px;
    position: absolute;
    top: 21px;
    left: 21px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    display: block;
    background: transparent;
    border: 2px solid #fff;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.menu >.menu-inner>.search-box>.search-inner>.header-search>span>i{
    width: 7px;
    height:2px;
    position: absolute;
    top: 15px;
    left: 15px;
    transform: translate(-50%,-50%) rotate(45deg);
    display: block;
    background: #fff;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.menu >.menu-inner>.search-box>.search-inner:hover>.header-search>span{
    border: 2px solid rgb(71, 71, 71);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.menu >.menu-inner>.search-box>.search-inner:hover>.header-search>span>i{
    background: rgb(71, 71, 71);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
/* --==searchbox==-- */
.search-lightbox-wrapper{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.85);
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.search-lightbox-wrapper.is-close{
   visibility: hidden;
   background: rgba(0, 0, 0, 0.0);

}
.search-lightbox-wrapper>.search-lightbox-inner{
   width: 40%;
   /* min-width: 320px; */
   height: auto;
   display: block;
   padding: 30px;
   background: #fff;
   position: relative;
  
}
.search-lightbox-wrapper>.search-lightbox-inner::after{
    content: '';
    display: block;
    clear: both;
 }
 .search-lightbox-inner.is-close{
    display: none;
}
.search-lightbox-inner>.cancelbox{
    display: block;
    position: absolute;
    top: -20px;
    right: -20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
}

.search-lightbox-inner>.cancelbox>a{
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    background: rgb(231, 231, 231);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.search-lightbox-inner>.cancelbox:hover>a{
    transform: rotate(360deg);
    background: rgb(71, 71, 71);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
 }
.search-lightbox-inner>.cancelbox>a>span{
    float: left;
    width: 20px;
    height: 2px;
    background: rgb(71, 71, 71);
    position: absolute;
    top: 48%;
    left: 30%;
    transform: translate(-50%,-50%);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.search-lightbox-inner>.cancelbox>a>span:nth-child(1){
  transform: rotate(45deg);
}
.search-lightbox-inner>.cancelbox>a>span:nth-child(2){
    transform: rotate(-45deg);
}
.search-lightbox-inner>.cancelbox:hover>a>span{
    background: #fff;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.search-lightbox-wrapper>.search-lightbox-inner>.index_ser_form{
    float: left;
    width: 100%;
    height: auto;
}
.search-lightbox-wrapper>.search-lightbox-inner>.index_ser_form>.searchbox{
    float: left;
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: space-evenly;
    -moz-box-align: center;
    align-items: center;
}
.search-lightbox-wrapper>.search-lightbox-inner>.index_ser_form>.searchbox>.men_serbar {
    width: 70%;
    height: 45px;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: space-evenly;
    -moz-box-align: center;
    align-items: center;
}
.search-lightbox-wrapper>.search-lightbox-inner>.index_ser_form>.searchbox>.men_ser {
    width: 10%;
    height: 45px;
    float: left;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: space-evenly;
    -moz-box-align: center;
    align-items: center;
}
input.reset,
input.reset:focus {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}
input.search-content,
input.search-content:focus{
    float: left;
    width: 100%;
    height: 100%;
    padding:10px 15px;
    border: 1px solid #aaa;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
input.search-content:focus{
    border-radius: 8px;
    background:rgb(241, 241, 241);
}
input.search-submit,
input.search-submit:focus{
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    text-align: center;
    color: #fff;
    background: rgb(71,71,71);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
input.search-submit:hover{
    background: rgb(94, 94, 94);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
/* --==banner==-- */
.banner-wrapper,
.banner-wrapper >.banner-inner{
    float: left;
    width: 100%;
    height: auto;
}
.banner-wrapper >.banner-inner>.banner-box{
    float: left;
    width: 100%;
    height: auto;
}
.banner-wrapper >.banner-inner>.banner-box .bannerlist,
.banner-wrapper >.banner-inner>.banner-box .bannerlist>a,
.banner-wrapper >.banner-inner>.banner-box .bannerlist>a,img{
    float: left;
    width: 100%;
    height: auto;
}
/* --==INDEX-NEWS==-- */
.index-news-wrapper{
    float: left;
    width: 100%;
    height: auto;
    padding: 50px 0;
}
.index-news-wrapper>.index-news-fadeline{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.index-news-wrapper>.index-news-fadeline>::after{
    content: '';
    width: calc((100vw - 1370px) / 2);
    height: 1px;
    display: block;
    background: rgb(127,127,127);
    position: absolute;
    bottom: 0;
    right:0;
}
.index-news-wrapper> .index-news-fadeline> .index-news-inner{
    float: left;
    max-width: 1370px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}
.index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-title{
    float: left;
    max-width: 450px;
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-title>.index-news-title-list{
    float: left;
    width: 105px;
    height: 105px;
    display: block;
    padding: 15px;
    border: 1px solid rgb(127,127,127);
    border-radius: 50%;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-title>.index-news-title-list{
    float: left;
    width: 105px;
    height: 105px;
    display: block;
    padding: 15px;
    border: 1px solid rgb(127,127,127);
    border-radius: 50%;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-title>.index-news-title-list>h1{
    float: left;
    width: 100%;
    height: auto;
    color: rgba(127,127,127,1);
    text-align: center;
    position: relative;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-title>.index-news-title-list:hover{
    background: rgb(71, 71, 71);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-title>.index-news-title-list:hover>h1{
    color: rgba(127,127,127,0);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-title>.index-news-title-list>h1::before{
    content: attr(data-group);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    float: left;
    width: 100%;
    height: auto;
    color: rgba(255,255,255,0);
    text-align: center;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-title>.index-news-title-list:hover>h1::before{
    color: rgba(255,255,255,1);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-box-wrapper{
    float: left;
    width: calc(100% - 450px);
    height: auto;
    border-bottom: 1px solid rgb(127,127,127);
}

.index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-box-wrapper>.index-news-boxinner{
    float: left;
    width: 100%;
    height: auto;
}
.index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-box-wrapper>.index-news-boxinner>.index-news-box{
    float: left;
    width: 100%;
    height: auto;
    padding: 40px 0 60px;
}
.index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-box-wrapper>.index-news-boxinner>.index-news-box .index-newslist{
    float: left;
    width: 100%;
    height: auto;
}
.index-news-box-wrapper>.index-news-boxinner>.index-news-box .index-newslist>a{
    float: left;
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: flex-start;
    -moz-box-align: center;
    align-items: center;
    color: rgb(71, 71, 71);
}
.index-news-box-wrapper>.index-news-boxinner>.index-news-box .index-newslist>a >span{
    float: left;
    width: 110px;
    height: auto;
    margin: 0 45px 0 0;
}
.index-news-box-wrapper>.index-news-boxinner>.index-news-box .index-newslist>a >p{
    float: left;
    width: calc(100% - 155px);
    height: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-news-box-wrapper>.index-news-boxinner>.index-news-box .index-newslist>a:hover>p{
    color: rgb(156, 156, 156);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
/* --==index  about==-- */
.index-about-wrapper{
    float: left;
    width: 100%;
    height: auto;
    padding: 80px 0 ;
    margin-bottom: 110px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.index-about-wrapper >.index-about-inner{
    max-width: 1370px;
    width: 100%;
    height: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.index-about-wrapper >.index-about-inner>.about-img,
.index-about-wrapper >.index-about-inner>.about-content{
    float: left;
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.index-about-wrapper >.index-about-inner>.about-img{
    padding: 15px 35px 15px 110px;
}
.index-about-wrapper >.index-about-inner>.about-content{
    padding: 0 80px;
}
.index-about-wrapper >.index-about-inner>.about-img >img{
    width:100%;
    height: auto;
}
.index-about-wrapper >.index-about-inner>.about-content>.about-title{
   float: left;
   width: 100%;
   height: auto;
   margin-bottom: 60px;
}
.index-about-wrapper >.index-about-inner>.about-content>.about-title>h1,
.index-about-wrapper >.index-about-inner>.about-content>.about-title>h2{
    float: left;
    width: 100%;
    height: auto;
    color: rgb(108,108,108);
    font-weight: bold;
    padding: 5px 0;
 }
 .index-about-wrapper >.index-about-inner>.about-content>.about-title>h1{
     font-size: 22px;
 }
 .index-about-wrapper >.index-about-inner>.about-content>.about-title>h2{
    font-size: 18px;
}
.index-about-wrapper >.index-about-inner>.about-content>.about-content-box{
    float: left;
    width: 100%;
    height: auto;
}
.index-about-wrapper >.index-about-inner>.about-content>.about-content-box>.about-main-content{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    padding: 30px;
}
.index-about-wrapper >.index-about-inner>.about-content>.about-content-box>.about-main-content>.about-cont{
    float: left;
    width: 100%;
    height: auto;
    line-height: 33px;
    font-size: 15px;
}
.more{
    float: left;
    width: 100%;
    padding: 15px 30px;
}
.more.center{
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.more >a{
    padding: 15px 30px;
    color: #fff;
    background: rgb(71, 71, 71);
    padding: 5px 30px;
    border-radius: 20px;
    line-height: 30px;
    font-weight: lighter;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.more >a:hover{
    background: rgb(127,127,127);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
/* -==index-special==-- */
.index-special-wrapper{
    float: left;
    width: 100%;
    height: auto;
    padding: 60px 0;
    margin-bottom:40px;
}
.greybox,
.greybox1{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    -webkit-transform: skew(0deg, -10deg);
    transform: skew(0deg, -10deg);
    background: rgb(247,247,247);

}
.greybox1{
  padding: 30px 0;

}
.greybox{
    max-height: 700px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.index-special-inner{
    max-width: 1370px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    background: transparent;
    -webkit-transform: skew(0deg, 10deg);
    transform: skew(0,10deg);
}
.index-special-inner>.special-box{
    float: left;
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: space-evenly;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.index-special-inner>.special-box>.special-list{
    float: left;
    width: 35%;
    height: auto;
    padding: 30px;
}
.index-special-inner>.special-box>.special-list >a{
    float: left;
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.index-special-inner>.special-box>.special-list >a>.special-img{
    float: left;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-radius: 10px;
}
.index-special-inner>.special-box>.special-list >a>.special-img::after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-special-inner>.special-box>.special-list >a:hover>.special-img::after{
    background: rgba(0, 0, 0, 0.35);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-special-inner>.special-box>.special-list >a>.special-img>img{
    float: left;
    width: 100%;
    height: auto;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-special-inner>.special-box>.special-list >a:hover>.special-img>img{
    float: left;
    width: 100%;
    height: auto;
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -webkit-transition:all 1.5s ease;
    transition: all 1.5s ease;
}


.index-special-inner>.special-box>.special-list >a>.special-content{
    float: left;
    width: 100%;
    height: auto;
}
.index-special-inner>.special-box>.special-list >a>.special-content>h1{
    float: left;
    width: 100%;
    height: auto;
    padding: 3px;
    font-weight: bold;
    color: rgb(41,41,41); 
    font-size: 18px;
    text-align: center;
}
.index-special-inner>.special-box>.special-list >a:hover>.special-content>h1{
    color: rgb(0, 0, 0);   
}
.index-special-inner>.special-box>.special-list >a>.special-content>p{
    float: left;
    width: 100%;
    height: auto;
    padding: 3px;
    font-size: 16px;
    color: rgb(108,108,108);
    text-align: center;
    line-height: 25px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}
/* --==products==-- */
.index-products-wrapper{
    float: left;
    width: 100%;
    height: auto;
    padding: 80px 0;
}
.index-products-wrapper>.index-products-inner{
    max-width: 1370px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    padding: 0 110px;
}
.index-products-wrapper>.index-products-inner::after{
    content: '';
    display: block;
    clear: both;
}
.index-products-wrapper>.index-products-inner>.inedx-products-titlebox{
    float: left;
    width: 100%;
    height: auto;
    padding: 20px 0;
}
.index-products-wrapper>.index-products-inner>.inedx-products-titlebox>.inedx-products-titlebox-inner{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
}
.inedx-products-titlebox>.inedx-products-titlebox-inner>.inedx-products-title{
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap

}
.inedx-products-titlebox>.inedx-products-titlebox-inner>.inedx-products-title >li{
    width: 100%;
    height: auto;
    padding: 3px 0;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}
.inedx-products-titlebox>.inedx-products-titlebox-inner>.inedx-products-title >li>h1{
    width: 100%;
    height: auto;
    font-weight: bold;
    color: rgb(128,128,128);
    font-size: 22px;
}
.inedx-products-titlebox>.inedx-products-titlebox-inner>.inedx-products-title >li>h2{
    width: 100%;
    height: auto;
    color:rgb(108,108,108);
}
.dash-line{
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 975px;
    width: 100%;
    height: 1px;
    display: block;
    background: rgb(108,108,108);
}
.index-products-content{
    float: left;
    width: 100%;
    height: auto;
}
.index-products-content>.index-products-content-inner{
    float: left;
    width: 100%;
    height: auto;
}
.index-products-content>.index-products-content-inner>.index-products-contentbox{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    padding: 85px 0 ;
}
.index-products-contentbox .index-products-contentlist{
    float: left;
    width: calc(100% / 3 - 20px);
    height: auto;
    margin: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
}
.index-products-contentbox .index-products-contentlist>.contentlist-inner{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
}
.index-products-contentbox .index-products-contentlist>.contentlist-inner>.contentlist-img{
    float: left;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.index-products-contentbox .index-products-contentlist>.contentlist-inner>.contentlist-img>img{
    float: left;
    width: 100%;
    height: auto;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-products-contentbox .index-products-contentlist:hover>.contentlist-inner>.contentlist-img>img{ 
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -webkit-transition:all 1.5s ease;
    transition: all 1.5s ease;
}

.index-products-contentbox .index-products-contentlist>.contentlist-inner>.contentlist-proname{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(127,139,148,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.index-products-contentbox .index-products-contentlist:hover>.contentlist-inner>.contentlist-proname{
    opacity: 1;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.index-products-contentbox .index-products-contentlist>.contentlist-inner>.contentlist-proname>p{
    width: 100%;
    height: auto;
    text-align: center;
    color: rgb(255, 255, 255);
    padding: 0 30%;
}
/* --==index-customized==-- */
.index-customized-wrapper{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom:40px;
}
.index-customized-inner{
    max-width: 1370px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    background: transparent;
    -webkit-transform: skew(0deg, 10deg);
    transform: skew(0,10deg);
}
.index-customized-inner::after{
    content: '';
    display: block;
    clear: both;
}
.index-customized-inner>.index-customized-titlebox{
    float: left;
    width: 100%;
    height: auto;
    padding: 15px 0 40px 0;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.index-customized-inner>.index-customized-titlebox>h1,
.index-customized-inner>.index-customized-titlebox>h2{
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
    color: rgb(108,108,108);
    font-size: 22px;
    font-weight: bold;
}
.index-customized-inner>.index-customized-titlebox>h2{
    margin-bottom: 0px;
    font-size: 18px;
}
.index-customized-inner>.index-customized-titlebox{
    float: left;
    width: 100%;
    height: auto;
    padding: 15px 0 40px 0;
}
.index-customized-inner>.customized-box,
.pro-right-box-inner>.customized-box{
    float: left;
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: space-evenly;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.index-customized-inner>.customized-box>.customized-boxlist,
.pro-right-box-inner>.customized-box>.customized-boxlist{
    width: calc(100% / 4 - 20px);
    height: auto;
    margin: 10px;
}
.index-customized-inner>.customized-box>.customized-boxlist >.customized-info{
    float: left;
    width: 100%;
    height: auto;
}
.customized-box>.customized-boxlist >.customized-info>.customized-infoimg{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}
.customized-box>.customized-boxlist >.customized-info>.customized-infoimg>img{
    float: left;
    width: 100%;
    height: auto;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.customized-box>.customized-boxlist >.customized-info:hover>.customized-infoimg>img{
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -webkit-transition:all 1.5s ease;
    transition: all 1.5s ease;
}

.customized-box>.customized-boxlist >.customized-info>.customized-infoimg>.customized-pro-number{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(127,139,148,0.65);
    opacity: 0;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.customized-box>.customized-boxlist >.customized-info:hover>.customized-infoimg>.customized-pro-number{
    opacity: 1;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.customized-box>.customized-boxlist >.customized-info>.customized-infoimg>.customized-pro-number>p{
    width: 100%;
    height: auto;
    color: #fff;
    text-align: center;
}
.customized-box>.customized-boxlist >.customized-info>.customized-pro-title{
    float: left;
    width: 100%;
    height: auto;
    padding: 10px 0;
}
.customized-box>.customized-boxlist >.customized-info>.customized-pro-title >li{
    float: left;
    width: 100%;
    height: auto;
    padding: 12px 0;
    color: rgb(108,108,108);
}
.customized-box>.customized-boxlist >.customized-info:hover>.customized-pro-title >li.customized-pro-prize{
    color: rgb(133,101,32);
}
/* --==index-shopping==-- */
.index-shopping-wrapper{
    float: left;
    width: 100%;
    height: auto;
    padding: 60px 0;
}
.index-shopping-wrapper>.index-shopping-inner{
    max-width: 1370px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
}
.index-shopping-inner::after{
    content: '';
    display: block;
    clear: both;
}
.index-shopping-wrapper>.index-shopping-inner>.shopping-box{
    float: left;
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list{
    width: 50%;
    height: auto;
}
.index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list>a{
    float: left;
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list>a>img{
    float: left;
    width: 100%;
    height: auto;
    -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
}
.index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list>a:hover>img{
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -webkit-transition:all 1.5s ease;
    transition: all 1.5s ease;
}

.index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list>a>.index-shoppinggo{
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
}
.index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list>a:hover>.index-shoppinggo{
    background: rgba(91,86, 90,0.70);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
 }
.index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list>a>.index-shoppinggo>h1{
    text-align: center;
    font-weight: bold;
    color: rgba(255,255,255,1);
    letter-spacing: 2px;
    font-size: 35px;
    position: relative;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
 }
 .index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list>a:hover>.index-shoppinggo>h1{
    color: rgba(255,255,255,0);
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
 }
 .shop-logo{
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
     visibility: visible;
     opacity: 0;
 }
 .shop-logo>img{
    float: left;
    width: 100px;
    height: auto;
}
.index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list>a:hover>.shop-logo:hover{
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    visibility: visible;
    opacity: 1;
}
 /* .index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list>a>.index-shoppinggo>h1::before{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    opacity: 0;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
 } */
 /* .index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list>a>.index-shoppinggo>h1.index-shoppy::before{
    background-image: url(../images/icon/shoppy.svg);
    width: 70px;
    height: 70px;
 }
 .index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list>a>.index-shoppinggo>h1.index-pchome::before{
    background-image: url(../images/icon/pchome.svg);
    width: 200px;
    height: 70px;
 } */
 /* .index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list>a:hover>.index-shoppinggo>h1::before{
    opacity: 1;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
 } */
 /* --==footer==-- */
 .footer-inner{
    max-width: 1370px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 
 }
 .footer-inner{
    max-width: 1370px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 
 }
 .footer-inner>.footer-logo{
     width: 100%;
     height: auto;
     display: -webkit-inline-flex;
     display: inline-flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; 
 }
 .footer-inner>.footer-logo>img{
    max-width: 110px;
    width: 100%;
    height: auto;
}
.footer-inner>.footer-map{
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.footer-inner>.footer-map>.map-list{
    width: fit-content;
    height: auto;
    padding: 15px;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.footer-inner>.footer-map>.map-list>a{
   color: rgb(155,155,155);
   font-weight: bold;
   -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.footer-inner>.footer-map>.map-list:hover>a{
    color: rgb(71, 71, 71);
    -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
 }
 .footer-inner>.footer-infobox{
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
 }
 .footer-inner>.footer-infobox>.footer-info{
    padding: 15px 10px;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
 }
 .footer-inner>.footer-infobox>.footer-info>i{
    width: 25px;
    height: 25px;
    display: inline-block;
    background: rgb(155,155,155);
    color: #fff;
    text-align: center;
    line-height: 25px;
    font-size: 13px;
    border-radius: 50%;
    margin: 0 10px;
 }
.footer-inner>.footer-infobox>.footer-info>i .line{
    width: 25px;
    height: 25px;
    display: flex;
  justify-content: center;
  align-items: center;
 }
.footer-inner>.footer-infobox>.footer-info>i img{
    width: 18px;
    height: 18px;
 }
 .footer-inner>.footer-infobox>.footer-info>span,
 .footer-inner>.footer-infobox>.footer-info>a{
    display: inline-block;
    color: rgb(155,155,155);
    font-size: 17px;
    font-weight: bold;
 }
 .footer-inner>.footer-infobox>.footer-info>a:hover{
    color: rgb(104, 104, 104);
 }
 .footer-inner>.footer-communitybox{
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0 15px;
 }
 .footer-inner>.footer-communitybox>.footer-community{
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
 }
 .footer-inner>.footer-communitybox>.footer-community>a{
    width: fit-content;
    height: auto;
 }
 .footer-inner>.footer-communitybox>.footer-community>a>i{
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
 }
 .footer-inner>.footer-communitybox>.footer-community>a:hover>i{
    -moz-transform:translateY(-5px);
    -webkit-transform:translateY(-5px);
    -o-transform:translateY(-5px);
    -ms-transform:translateY(-5px);
    transform:translateY(-5px);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
 }
 .footer-inner>.footer-communitybox>.footer-community>a>i.fa-facebook-official{
    width: fit-content;
    height: auto;
    font-size: 38px;
    color: rgb(155,155,155);
 }
 .footer-inner>.footer-communitybox>.footer-community>a>i.fa-instagram{
    width: fit-content;
    width: 33px;
    height: 33px;
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    display: inline-block;
    background: rgb(155,155,155);
    color: #fff;
    border-radius: 3px;
 }
 .footer-inner>.copy-rightbox{
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
 }
 .footer-inner>.copy-rightbox>li{
    width: fit-content;
    height: auto;
    margin: 0 10px;
    font-size: 16px;
    color: rgb(155,155,155);
 }
 .footer-inner>.copy-rightbox>li:nth-child(1){
    padding: 0 15px; 
    border-right: 1px solid rgb(155,155,155);
 }
 .footer-inner>.copy-rightbox>li>a{
    color: rgb(155,155,155);
 }
 .footer-inner>.copy-rightbox>li>a:hover{
    text-decoration: underline;
 }
/* --==about==-- */
.titlebanner{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
} 
.titlebanner >img{
    float: left;
    width: 100%;
    height: auto;
}
.titlebanner>.titlebox{
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translate(-50%,70%);
} 
.titlebox{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
} 
.titlebox>.titleboxinner{
    width: 100%;
    height: auto;
    padding: 40px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.titlebox>.titleboxinner>h1{
    width: 100%;
    height: auto;
    font-size: 34px;
    color: rgb(70, 70, 70);
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
    position: relative;
}
.titlebox>.titleboxinner>h1::after{
    content: attr(data-group);
    margin: 0 10px;
    width: 100%;
    height: auto;
    font-size: 18px;
    color: rgb(70, 70, 70);
    font-weight: normal;
    letter-spacing: 1px;
}
/* --==bread ==-- */
.bread-wrapper{
    float: left;
    width: 100%;
    height: auto;
    padding: 20px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.bread-wrapper>.bread-inner{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.bread-wrapper>.bread-inner>.bread-box{
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.20);
    padding: 5px;
}
.bread-wrapper>.bread-inner>.bread-box>.bread{
    padding: 0px 15px;
    border-right: 1px solid rgb(148, 148, 148);
    display: flex;
    justify-content: center;
    align-items: center;
    -moz-transform-origin:bottom;
    -moz-transform:skewX(-20deg);
    -webkit-transform-origin:bottom;
    -webkit-transform:skewX(-20deg);
    -o-transform-origin:bottom;
    -o-transform:skewX(-20deg);
    -ms-transform-origin:bottom;
    -ms-transform:skewX(-20deg);
    transform-origin:bottom;
    transform:skewX(-20deg);
}
.bread-wrapper>.bread-inner>.bread-box>.bread:nth-last-child(1){
    border-right: none;
}
.bread-wrapper>.bread-inner>.bread-box>.bread>a{
    font-size: 12px;
    color: rgb(214, 214, 214);
    -moz-transform-origin:bottom;
    -moz-transform:skewX(20deg);
    -webkit-transform-origin:bottom;
    -webkit-transform:skewX(20deg);
    -o-transform-origin:bottom;
    -o-transform:skewX(20deg);
    -ms-transform-origin:bottom;
    -ms-transform:skewX(20deg);
    transform-origin:bottom;
    transform:skewX(20deg);
}
.bread-wrapper>.bread-inner>.bread-box>.bread.active>a{
    color: rgb(255, 255, 255);
    font-weight: bold;
}
/* aboutlist */
.aboutlist-wrapper{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.aboutlist-wrapper>.aboutlist-box{
    width: 100%;
    height: auto;
    padding: 40px 5px;
    border-top: 1px solid rgb(108,108,108);
    border-bottom: 1px solid rgb(108,108,108);
    display: flex;
    justify-content: center;
    align-items: center;
}
.aboutlist-wrapper>.aboutlist-box>.aboutlist{
    padding: 6px 15px;
    position: relative;
}
.aboutlist-wrapper>.aboutlist-box>.aboutlist.active{
    border-bottom: 2px solid rgb(108,108,108);
}
.aboutlist-wrapper>.aboutlist-box>.aboutlist.active::after{
    content:'';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 7px 0 7px;
    border-color: rgb(108,108,108) transparent transparent transparent;

}
.aboutlist-wrapper>.aboutlist-box>.aboutlist>a{
   color: rgb(108,108,108);
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
}
.aboutlist-wrapper>.aboutlist-box>.aboutlist:hover>a{
    color: rgb(155, 155, 155);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
 }
.user-content{
    float: left;
    width: 100%;
    height: auto;
    padding:  0;
    overflow: hidden;
}
.user-content>.user-content-inner{
    float: left;
    width: 100%;
    height: auto;
    padding: 60px 40px;
}
.user-content>.user-content-inner>.user-inner{
    float: left;
    width: 100%;
    height: auto;
    background: #fff;
    padding: 40px;
}
/* --==contact==-- */
.contact-wrapper{
    float: left;
    width: 100%;
    height: auto;
    padding: 60px 0;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-wrapper >.contact-inner{
    max-width: 1370px;
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-wrapper >.contact-inner>.contactbox{
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
.contact-wrapper >.contact-inner>.contactbox >li{
    width: 50%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 40px;
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box{
    padding: 0 120px;
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.office-name{
    width: 100%;
    height: auto;
    padding: 20px 0;
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.office-name>h1{
    float: left;
    height: auto;
    font-size: 22px;
    font-weight: bold;
    color: rgb(102, 102, 102);
    position: relative;
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.office-name>h1::after{
    content: '';
    display: block;
    float: left;
    width: 80px;
    height: 3px;
    position: absolute;
    bottom: -10px;
    right: -30px;
    background: rgb(102, 102, 102);
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.contact-info{
    width: 100%;
    height: auto;
    padding: 30px 0;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.contact-info>li.info-list{
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
    
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.contact-info>li.info-list>span{
    width: fit-content;
    height: auto;
    margin-right: 10px;
    color: rgb(94, 94, 94);
    font-size: 17px;
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.contact-info>li.info-list>span:first-child{
   position: relative;
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.contact-info>li.info-list>span:first-child::before{
    content: '';
    width: 23px;
    height: 23px;
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 0 10px 0 0;
    vertical-align: middle;
 }
 .contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.contact-info>li.info-list>span.bill::before{
    background-image: url(../images/icon/bill.svg);
 }
 .contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.contact-info>li.info-list>span.phone::before{
    background-image: url(../images/icon/telephone.svg);
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.contact-info>li.info-list>span.fax::before{
    background-image: url(../images/icon/fax.svg);
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.contact-info>li.info-list>span.addr::before{
    background-image: url(../images/icon/addr.svg);
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.addrmap>li{
    float: left;
    width: 100%;
    height: auto;
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.addrmap>li>iframe{
    float: left;
}
.contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.addrmap{
    width: 100%;
    height: auto;
}
.contact-form-box>.form-box{
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-form-box>.form-box >form{
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.code-box{
    float: left; 
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.form-group{
    float: left; 
    width: 100%; 
    margin: 15px 0; 
    position: relative;
}
.code-box>.form-group{
    width: calc(100% - 100px);
    height: auto;
}
.code-box>img{
    float: left; 
    width: 100px;
    height: auto;
}
.code-box >a.code-reset{
    font-size: 12px;
    color: rgb(161, 161, 161);
    letter-spacing: 1px;
}
.form-group1{ 
    width: 40%; 
    position: relative;
    margin: 25px 5px;
}
input.form-control{
    width: 100%;
    border-bottom: 1px solid rgb(230, 230, 230); 
    padding: 15px 0; 
    transition: 0.4s;
} 
input.form-control:focus{
    padding: 15px; 
}
input.form-check,
input.form-check:focus{
    width: 100%;
    padding: 15px 0; 
    transition: 0.4s;
    background: rgb(108,108,108);
    color: #fff;
    font-size: 16px;
    letter-spacing: 2px;
    border-radius: 10px;
}
input.form-check:hover{
    /* border-radius: 15px 0px 15px 0px; */
    background: rgb(139, 139, 139);
    transition: 0.4s;
}
textarea.form-control{
    width: 100%;
    border-bottom: 1px solid rgb(230, 230, 230); 
    padding: 15px 0; 
    transition: 0.4s;
    resize: none;
    height: 150px;
} 
textarea.form-control:focus{
    padding: 15px; 
}
.form-control ~ .focus-border:before,
.form-control ~ .focus-border:after{
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    height: 2px; 
    background-color: rgb(129, 129, 129); 
    transition: 0.3s;
}
.form-control ~ .focus-border:after{
    top: auto; 
    bottom: 0; 
    left: auto; 
    right: 0;
}
.form-control ~ .focus-border i:before,
.form-control ~ .focus-border i:after{
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 2px; 
    height: 0; 
    background-color: rgb(129, 129, 129); 
    transition: 0.4s;
}
.form-control ~ .focus-border i:after{
    left: auto; 
    right: 0; 
    top: auto; 
    bottom: 0;
}
.form-control:focus ~ .focus-border:before,
.form-control:focus ~ .focus-border:after{
    width: 100%; 
    transition: 0.3s;
}
.form-control:focus ~ .focus-border i:before,
.form-control:focus ~ .focus-border i:after{
    height: 100%; 
    transition: 0.4s;
}
/* --==shop==-- */
.map-box-wrapper{
    float: left;
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.map-box-wrapper>.map-box{
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    -ms-flex-wrap: wrap;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px 0;
}
.map-box-wrapper>.map-box>ul{
    width: 40%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    -ms-flex-wrap: wrap;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0 20px;
}
.map-box-wrapper>.map-box>ul.map-content{
    width: 60%;
}
.map-box-wrapper>.map-box>ul.mapimg{
    position: relative;
    overflow: hidden;
    padding: 0 0px;
    cursor: pointer;
}
.map-box-wrapper>.map-box>ul.mapimg>img{
    width: 100%;
    height: auto;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.map-box-wrapper>.map-box>ul.mapimg>iframe{
    width: 100%;
    height: 270px;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.map-box-wrapper>.map-box>ul.mapimg:hover>img{
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -webkit-transition:all 1.5s ease;
    transition: all 1.5s ease;
}

.map-box-wrapper>.map-box>ul.mapimg>li.place-name{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity: 0;
}
.map-box-wrapper>.map-box>ul.mapimg:hover>li.place-name{
    opacity: 1;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.map-box-wrapper>.map-box>ul.mapimg>li.place-name>h1{
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
.map-box-wrapper>.map-box>ul>li{
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    align-items: flex-start;
    flex-wrap: wrap;
}
.map-box-wrapper>.map-box>ul>li.map-title{
    color: rgb(75, 75, 75);
    font-size: 22px;
    font-weight: bold;
    padding: 0 0 15px;
    border-bottom: 1px solid rgb(109, 109, 109);
}
.map-box-wrapper>.map-box>ul>li.map-info-box{
    padding: 15px 0;
}
.map-box-wrapper>.map-box>ul>li.map-info-box>.map-infobox-inner{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    align-items: flex-start;
    flex-wrap: wrap;
}
.map-box-wrapper>.map-box>ul>li.map-info-box>.map-infobox-inner>li{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 0;
}
.map-box-wrapper>.map-box>ul>li.map-info-box>.map-infobox-inner>li>i{
   margin: 0 5px;
   color: rgb(100, 100, 100);
}
.map-box-wrapper>.map-box>ul>li.map-info-box>.map-infobox-inner>li>i+span,
.map-box-wrapper>.map-box>ul>li.map-info-box>.map-infobox-inner>li>i+a{
    color: rgb(139, 139, 139);
}
.map-box-wrapper>.map-box>ul>li.map-info-box>.map-infobox-inner>li:hover>i.fa-home+a{
    color: rgb(133,101,32);
}
/* --==map-lightbox==-- */
/* .viewmap{
    cursor: pointer;
} */
.map-lightbox-wrapper{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.85);
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.map-lightbox-wrapper.is-close{
   visibility: hidden;
   background: rgba(0, 0, 0, 0.0);

}
.map-lightbox-wrapper>.map-lightbox-inner {
   width: 60%;
   height: auto;
   display: block;
   padding: 30px;
   background: #fff;
   position: relative;
  
}
.map-lightbox-wrapper>.map-lightbox-inner::after{
    content: '';
    display: block;
    clear: both;
 }
 .map-lightbox-inner.is-close{
    display: none;
}
.map-lightbox-inner>.cancelbox{
    display: block;
    position: absolute;
    top: -20px;
    right: -20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
}

.map-lightbox-inner>.cancelbox>a{
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    background: rgb(231, 231, 231);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.map-lightbox-inner>.cancelbox:hover>a{
    transform: rotate(360deg);
    background: rgb(71, 71, 71);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
 }
 .map-lightbox-inner>.cancelbox>a>span{
    float: left;
    width: 20px;
    height: 2px;
    background: rgb(71, 71, 71);
    position: absolute;
    top: 48%;
    left: 30%;
    transform: translate(-50%,-50%);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.map-lightbox-inner>.cancelbox>a>span:nth-child(1){
  transform: rotate(45deg);
}
.map-lightbox-inner>.cancelbox>a>span:nth-child(2){
    transform: rotate(-45deg);
}
.map-lightbox-inner>.cancelbox:hover>a>span{
    background: #fff;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.search-lightbox-wrapper>.search-lightbox-inner>iframe{
    float: left;
    width: 100%;
    height: auto;
}
/* --==page-change==-- */
.page-change-box{
    float: left;
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}
.page-change-box>li{
    width: fit-content;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.page-change-box>li>a{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    background: rgb(145, 145, 145);
    margin: 0 3px;
}
.page-change-box>li>a.btn-active{
    background: rgb(105, 105, 105);
}
/* --==news==-- */
.news-wrapper{
    float: left;
    width: 100%;
    height: auto;
    padding: 40px;
}
.news-wrapper>.news-inner{
    float: left;
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: space-evenly;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.news-wrapper>.news-inner>.news-box{
    width: calc(100% / 3 - 60px);
    height: auto;
    border: 1px solid rgb(221, 221, 221);
    margin: 20px;
}
.news-wrapper>.news-inner>.news-box>a{
    float: left;
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.news-wrapper>.news-inner>.news-box>a>.news-img{
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}
.news-wrapper>.news-inner>.news-box>a>.news-img>img{
    float: left;
    width: 100%;
    height: auto;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.news-wrapper>.news-inner>.news-box>a:hover>.news-img>img{
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -webkit-transition:all 1.5s ease;
    transition: all 1.5s ease;
}
.news-wrapper>.news-inner>.news-box>a>.news-img>.view-more{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
}
.news-wrapper>.news-inner>.news-box>a>.news-img>.view-more>h1{
    text-align: center;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 20px;
   
}
.news-wrapper>.news-inner>.news-box>a:hover>.news-img>.view-more{
    opacity: 1;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.news-wrapper>.news-inner>.news-box>a>.news-content{
    width: 100%;
    height: auto;
    padding: 15px;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.news-wrapper>.news-inner>.news-box>a>.news-content>h1.news-title{
    width: 100%;
    height: auto;
    text-align: center;
    color: rgb(105, 105, 105);
    font-weight: bold;
    font-size: 19px;
    padding: 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-wrapper>.news-inner>.news-box>a>.news-content>.title-time{
    width: 100%;
    height: auto;
    text-align: center;
    color: rgb(105, 105, 105);
    font-weight: bold;
    font-size: 18px;
    padding: 5px 0;
}
.news-wrapper>.news-inner>.news-box>a>.news-content>.title-time{
    width: 100%;
    height: auto;
    padding: 5px 0;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.news-wrapper>.news-inner>.news-box>a>.news-content>.title-time>i,
.news-wrapper>.news-inner>.news-box>a>.news-content>.title-time>i+span{
   margin: 0 3px;
   font-size: 14px;
}
.news-wrapper>.news-inner>.news-box>a>.news-content>.news-words{
    width: 100%;
    height: auto;
    padding: 5px 0;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.news-wrapper>.news-inner>.news-box>a>.news-content>.news-words>p{
    width: 100%;
    height: auto;
    color: rgb(109, 109, 109);
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.news-wrapper>.newsdetail-inner{
    float: left;
    width: 100%;
    height: auto;
    padding: 30px;
    background: rgb(255, 255, 255);
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.news-wrapper>.newsdetail-inner>.news-title{
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 0 20px;
    border-bottom: 1px solid rgb(100, 100, 100);
}
.news-wrapper>.newsdetail-inner>.news-title>h1{
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: rgb(108,108,108);
    padding: 0 0 20px;
}
.news-wrapper>.newsdetail-inner>.news-title>.time{
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
}
.news-wrapper>.newsdetail-inner>.news-title>.time>span{
    color: rgb(156, 156, 156);
    font-size: 12px;
}
.news-wrapper>.newsdetail-inner>.newsdetail-content{
    width: 100%;
    height: auto;
    padding: 30px 0;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.upper-page{
    width: 100%;
    padding: 30px 0 20px;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.upper-page >a{
    padding: 15px 25px ;
    background:rgb(102, 102, 102);
    color: #fff;
    text-align: center;
    border-radius: 10px;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.upper-page >a:hover{
    background:rgb(124, 124, 124);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
/* --==products==-- */
.pro-all{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}
.pro-all >.pro-inner{
    max-width: 1370px;
    width: 100%;
    height: auto;
    padding: 0 20px;
    position: relative;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: space-evenly;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.pro-all >.pro-inner>.pro-left-box{
    width: 20%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.pro-right-box{
    width: 80%;
    height: auto;
    padding: 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pro-left-box>.items-title{
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pro-left-box>.items-title >h1{
    font-size: 22px;
    font-weight: bold;
    color: rgb(71, 71, 71);
    padding: 15px 20px;
    letter-spacing: 2px;
    border-bottom: 3px solid rgb(71, 71, 71);
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr ;
    position: relative;
}
.pro-left-box>.items-title >h1::after{
    content: attr(data-group);
    font-size: 13px;
    position: absolute;
    bottom: 0px;
    right: -22px;
    font-weight: bold;
    color: rgb(161, 161, 161);
    padding: 15px;
    letter-spacing: 2px;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
}
.pro-left-box>.prolist{
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 20px 0;
}
.pro-left-box>.prolist>.pro-all-title,
.mobile-prolist>.pro-all-title{
    width: 100%;
    height: auto;
}
.pro-left-box>.prolist>.pro-all-title>a,
.mobile-prolist>.pro-all-title>a{
    float: left;
    width: 100%;
    height: auto;
    padding: 15px 20px;
    text-align: center;
    color: rgb(255, 255, 255);
    background: rgb(71, 71, 71);
}
.mobile-prolist>.pro-all-title>a{
    background:rgb(139, 139, 139);
}
.accordion {
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	position: relative;
	overflow: hidden;
}

.accordion>.accord-title {
    width: 100%;
	border-bottom: 1px solid #d8d8d8;
    position: relative;
    display: -webkit-inline-flex;
    display: inline-flex;
    align-items: center;
    color: rgb(102, 102, 102);
}
.accordion>.accord-title>h1{
    width: 100%;
    text-align: center;
	padding: 20px;
}
.accord-title .icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
.accord-content {
    width: 100%;
    /* display: none; */
    height: auto;
	background: rgb(247, 247, 247);
	padding: 10px 20px;
}
.accord-content {
    width: 100%;
    /* display: none; */
    height: auto;
	background: rgb(247, 247, 247);
	padding: 10px 20px;
}
.accord-content>.pro-item-list{
    width: 100%;
    /* display: none; */
    height: auto;
}
.accord-content>.pro-item-list>a{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    color:rgb(119, 119, 119);
    padding: 10px;
}
.accord-content.active>.pro-item-list>a.active{
   color:rgb(75, 75, 75);
}
.accord-content>.pro-item-list>a:hover{
    color:rgb(75, 75, 75);
}
/* -==mobile list ==--*/
.pro-left-box>.mobile-prolist-box{
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 20px 0;
    position: relative;
    overflow: hidden;
    display: none;;
}
.pro-left-box>.mobile-prolist-box>.pro-item-title{
    width: 100%;
    height: auto;
    cursor: pointer;
}

.pro-left-box>.mobile-prolist-box>.pro-item-title>h3{
    float: left;
    width: 100%;
    height: auto;
    padding: 15px 20px;
    text-align: center;
    color: rgb(255, 255, 255);
    background: rgb(71, 71, 71);
}
.mobile-prolist{
    display: none;
}
.mobile-prolist.is-active{
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
/* --==pro-detail==-- */
.pro-detail-wrapper,
.page-content-inner{
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.page-content-inner{
    padding: 40px;
    background:rgb(250, 250, 250);
}
.pro-detail-wrapper>.pro-detail-inner{
    width: 100%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.pro-detail-wrapper>.pro-detail-inner>.pro-detail-left,
.pro-detail-wrapper>.pro-detail-inner>.pro-detail-right{
    width: 50%;
    height: auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.pro-detail-wrapper>.pro-detail-inner>.pro-detail-left>.pro-slick-box{
    width: 100%;
    height: auto;
}
.pro-detail-wrapper>.pro-detail-inner>.pro-detail-left>.pro-slick-box{
    width: 100%;
    height: auto;
    padding: 0 60px;
}
.pro-detail-left>.pro-slick-box>.pro-slick-inner{
    float: left;
    width: 100%;
    height: auto;
    padding: 0 20px;
}
.pro-detail-left>.pro-slick-box>.pro-slick-inner .pro-slick-list{
    float: left;
    width: 100%;
    height: auto;
    border: 1px solid rgb(211, 211, 211);
    border-radius: 10px;
    overflow: hidden;
}
.pro-detail-left>.pro-slick-box>.pro-slick-inner .pro-slick-list>img{
    float: left;
    width: 100%;
    height: auto;
}
.pro-detail-left>.pro-slick-box>.pro-slick-navi{
    float: left;
    width: 100%;
    height: auto;
    padding:15px 20px;
    
}
.pro-detail-left>.pro-slick-box>.pro-slick-navi .pro-slicknav-list{
    float: left;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 10px;
    border: 1px solid rgb(211, 211, 211);
    border-radius: 10px;
    overflow: hidden;
}
.pro-detail-left>.pro-slick-box>.pro-slick-navi .pro-slicknav-list>img{
    float: left;
    width: 100%;
    height: auto;
}
.pro-detail-right>.pro-detail-title{
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    padding: 0 0 40px;
    border-bottom: 1px solid rgb(100, 100, 100);
}
.pro-detail-right>.pro-detail-title>h1{
    float: left;
    width: 100%;
    height: auto;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    color: rgb(100, 100, 100);
    position: relative;
}
.pro-detail-right>.pro-detail-title>h1::after{
    content: attr(data-group);
    position: absolute;
    left: 0;
    bottom: -27px;
    font-size: 16px;
    font-weight: normal;
    color: rgb(160, 160, 160);
}
.pro-detail-right>.pro-detail-title>a{
    position: absolute;
    right:5px;
    bottom: -40px;
    font-size: 16px;
    font-weight: normal;
}
.pro-detail-right>.pro-detail-title>a>i{
    float: left;
    font-size: 35px;
    font-weight: normal;
    color: rgb(148, 148, 148);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.pro-detail-right>.pro-detail-title>a:hover>i{
    color: rgb(122, 122, 122);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.pro-detail-right>.pro-detail-info-box{
    width: 100%;
    height: auto;
    padding: 20px 0;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.pro-detail-right>.pro-detail-info-box>.pro-detail-intro{
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.pro-detail-right>.pro-detail-info-box>.pro-detail-intro>.pro-info-title{
    width: 100%;
    height: auto;
    margin-bottom: 5px;
}
.pro-detail-right>.pro-detail-info-box>.pro-detail-intro>.pro-info-title>h1{
    float: left;
    width: 100%;
    height: auto;
    color: rgb(71, 71, 71);
    font-size: 18px;
    font-weight: bold;
}
.pro-detail-right>.pro-detail-info-box>.pro-detail-intro>.pro-info-intro{
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}
.pro-detail-right>.pro-detail-info-box>.pro-detail-intro>.pro-info-intro>li{
    width: 100%;
    height: auto;
}
.pro-detail-right>.pro-detail-info-box>.pro-detail-intro>.pro-info-intro>li>p{
    float: left;
    width: 100%;
    height: auto;
    color: rgb(100, 100, 100);
}
.pro-detail-intro>.pro-size-info{
    width: 100%;
    height: auto;
    padding: 10px 0;
}
.pro-detail-intro>.pro-size-info>p{
    float: left;
    width: 100%;
    height: auto;
    color: rgb(100, 100, 100);
}
.pro-info-prize{
    width: 100%;
    height: auto;
    padding: 20px 0;
    border-top: 1px solid rgb(100, 100, 100);
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.pro-info-prize>h1{
    width: 40%;
    height: auto;
    color: #f00;
    font-weight: bold;
    font-size: 22px;
}
.pro-info-prize>.go-shopping{
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.pro-info-prize>.go-shopping>li{
    width: 46%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 15px 0;
    margin: 0 5px;
}
.pro-info-prize>.go-shopping>li>a{
    max-width: 250px;
    width: 100%;
    padding: 15px 0px;
    text-align: center;
    background: rgb(141, 141, 141);
    color: #fff;
    border-radius: 10px;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.pro-info-prize>.go-shopping>li>a:hover{
    background: rgb(112, 112, 112);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.pro-info-prize>.go-shopping>li>p{
   width: 100%;
   height: auto;
   text-align: center;
   color: rgb(58, 58, 58);
}
.page-content-inner>.pro-detail-maincontent{
    width: 100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.page-content-inner>.pro-detail-maincontent>.pro-detail-maincontent-titlebox{
    width: 100%;
    height: auto;
}
.page-content-inner>.pro-detail-maincontent>.pro-detail-maincontent-titlebox>h1{
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 22px;
    color: rgb(100, 100, 100);
    font-weight: bold;
    position: relative;
    margin-bottom: 40px;
}
.page-content-inner>.pro-detail-maincontent>.pro-detail-maincontent-titlebox>h1::after{
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background: rgb(100, 100, 100);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
}
/* gotop */
.gotop{
    position: absolute;
    top: 0px;
    right: 15px;
    float: right;
    width: 50px;
    height: auto;
    padding: 10px;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color: rgb(192, 174, 141);
    background: rgb(105, 105, 105);
    border-radius: 3px;
} 
.gotop >img{
    float: right;
    width: 20px;
    height: auto;
 }
 .gotop:hover{
    color: rgb(243, 232, 211);
    -moz-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  
 }
 .gotop >span{
    float: right;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    line-height: 15px;
    padding: 3px 0 0;
 }


@media only screen and (max-width: 1178px) {
     header.index-header{
         display: none;
     }
     .mobile-header.mobile-header{
         display: block;
     }
     .contact-wrapper >.contact-inner>.contactbox >li.contact-info-box{
        padding: 0 80px;
    }
    .search-lightbox-wrapper>.search-lightbox-inner{
        width: 60%;
     }
     .pro-detail-wrapper>.pro-detail-inner>.pro-detail-left>.pro-slick-box {
        padding: 0 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px){
    .index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-title{
        max-width: 300px;
        width: 100%;
    }
    .index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-box-wrapper{
        width: calc(100% - 300px);
    }
  
    .index-about-wrapper{
        padding: 0;
        margin-bottom: 0px;
    }
    .index-about-wrapper >.index-about-inner>.about-img,
    .index-about-wrapper >.index-about-inner>.about-content{
        width: 100%;
    }
    .index-about-wrapper >.index-about-inner>.about-img{
        padding: 0 80px;
    }
    .index-about-wrapper >.index-about-inner>.about-content {
        padding: 40px 80px;
    }
    .index-special-wrapper {
        margin-bottom: 0px;
    }
    .index-special-inner>.special-box>.special-list {
        padding: 30px 0;
    }
    .index-products-wrapper {
        padding: 40px 0;
    }
    .index-customized-inner>.customized-box>.customized-boxlist {
        width: calc(100% / 2 - 20px);
    }
    .index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list {
        width: 100%;
    }
    .footer-inner>.footer-infobox>.footer-info {
        width: 100%;
    }
    .contact-wrapper >.contact-inner>.contactbox >li.contact-info-box{
        padding: 0 25px;
    }
    /* news */
    .news-wrapper>.news-inner>.news-box {
        width: calc(100% / 2 - 20px);
        margin: 10px;
    }
    /* products */
    .pro-right-box {
        padding: 0px 15px;
    }
    .pro-right-box-inner>.customized-box>.customized-boxlist{
        width: calc(100% / 2 - 20px);
    }
    /* .pro-detail-wrapper>.pro-detail-inner>.pro-detail-left, .pro-detail-wrapper>.pro-detail-inner>.pro-detail-right {
        width: 100%;
    }
    .pro-detail-wrapper>.pro-detail-inner>.pro-detail-left>.pro-slick-box {
        padding: 0 50px;
    } */
}
/*--== mobile ==--*/
@media only screen and (max-width: 767px) {
    .index-news-wrapper {
        padding: 30px 0;
    }
    article.main-content {
        padding: 0;
    }
    .search-lightbox-wrapper>.search-lightbox-inner{
        width: 80%;
     }
    .search-lightbox-wrapper>.search-lightbox-inner>.index_ser_form>.searchbox>.men_ser {
        width: 20%;
    }
    .index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-title>.index-news-title-list {
        width: 80px;
        height: 80px;
    }
    .index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-box-wrapper {
        width: 100%;
    }
    .index-news-wrapper>.index-news-fadeline>.index-news-inner>.index-news-box-wrapper>.index-news-boxinner>.index-news-box {
        padding: 30px 0;
    }
    .index-news-box-wrapper>.index-news-boxinner>.index-news-box .index-newslist>a >span{
       display: none;
    }
    .index-news-box-wrapper>.index-news-boxinner>.index-news-box .index-newslist>a >p{
        width: 100%;
    }
    .index-about-wrapper{
        padding: 30px 0 0;
        margin-bottom: 0px;
    }
    .index-about-wrapper >.index-about-inner>.about-img,
    .index-about-wrapper >.index-about-inner>.about-content{
        width: 100%;
    }
    .index-about-wrapper >.index-about-inner>.about-img{
        padding: 0;
    }
    .index-about-wrapper >.index-about-inner>.about-content {
        padding: 20px;
    }
    .index-about-wrapper >.index-about-inner>.about-content>.about-title{
        margin-bottom: 20px;
     }
    .index-about-wrapper >.index-about-inner>.about-content>.about-title>h1,
    .index-about-wrapper >.index-about-inner>.about-content>.about-title>h2{
        text-align: center;
    }
    .index-about-wrapper >.index-about-inner>.about-content>.about-content-box>.about-main-content>.about-cont{
        line-height: 23px;
        font-size: 14px;
    }
    .index-about-wrapper >.index-about-inner>.about-content>.about-content-box>.about-main-content{
        padding: 30px 20px;
    }
    .index-special-wrapper{
        margin-bottom:0;
    }
    .greybox{
        max-height:none;
    }
    .index-special-inner>.special-box>.special-list{
        float: left;
        width: 100%;
        height: auto;
        padding: 30px;
    }
    .index-products-wrapper{
        padding: 0;
    }
    .index-products-wrapper>.index-products-inner{
        padding: 0 15px;
    }
    .index-customized-inner>.customized-box>.customized-boxlist{
        width: 100%;
    }
    .index-shopping-wrapper{
        padding: 40px 0;
    }
    .index-shopping-wrapper>.index-shopping-inner>.shopping-box>.shopping-list{
        width: 100%;
    }
    .footer-inner>.footer-map>.map-list{
        width: 50%;
        padding: 12px;
    }
    .footer-inner>.footer-infobox>.footer-info>span{
        font-size: 15px;
     }
    .footer-inner>.footer-infobox>.footer-info{
        padding: 15px 10px;
        width: 100%;
     }
     .footer-inner>.copy-rightbox>li{
        width: 100%;
        text-align: center;
        font-size: 12px
     }
     .bread-wrapper {
       display: none;
    }
    .titlebox>.titleboxinner {
        padding: 20px 0 0;
    }
    .titlebox>.titleboxinner>h1 {
        font-size: 25px;
    }
    .titlebox>.titleboxinner>h1::after {
        font-size: 14px;
    }
    .aboutlist-wrapper>.aboutlist-box {
        padding: 25px 5px;
        flex-wrap: wrap;
    }
    .user-content>.user-content-inner {
        padding: 40px 20px;
    }
    .user-content>.user-content-inner>.user-inner {
        padding: 20px 15px;
    }
    /* contact */
    .contact-wrapper {
        padding: 25px 0;
    }
    .contact-wrapper >.contact-inner>.contactbox >li{
        width: 100%;
        padding: 0 20px;
    }
    .contact-wrapper >.contact-inner>.contactbox >li.contact-info-box {
        padding: 0px 20px;
    }
    .contact-wrapper >.contact-inner>.contactbox >li.contact-info-box>.contact-info>li.info-list>span {
        font-size: 14px;
    }
    /* sales */
    .map-box-wrapper>.map-box>ul{
        width: 100%;
        height: auto;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        -ms-flex-wrap: wrap;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 0;
    }
    .map-box-wrapper>.map-box>ul.map-content{
        width: 100%;
    }
    .map-box-wrapper>.map-box>ul.mapimg {
        margin-bottom: 15px;
    }
    .map-box-wrapper>.map-box>ul>li.map-title {
        font-size: 18px;
    }
    .map-lightbox-wrapper>.map-lightbox-inner {
        width: 80%;
        padding: 10px;
    }
    .aboutlist-wrapper>.aboutlist-box.fourth {
        padding: 5px 5px;
        flex-wrap: wrap;
    }
    .aboutlist-wrapper>.aboutlist-box.fourth>.aboutlist {
        width: 50%;
        text-align: center;
    }
    /* news */
    .news-wrapper {
        padding: 20px 15px;
    }
    .news-wrapper>.news-inner>.news-box {
        width: 100%;
        margin: 10px 0;
    }
    .news-wrapper>.newsdetail-inner {
        padding: 30px 20px;
    }
    /* products */
    .pro-all {
        padding: 20px 0;
    }
    .pro-left-box>.prolist{
      display: none;
    }
    .pro-right-box-inner>.customized-box>.customized-boxlist{
        width: calc(100% - 20px);
    }
    .pro-all >.pro-inner>.pro-left-box{
        width: 100%;
        height: auto;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .pro-right-box{
        width: 100%;
        height: auto;
        padding: 0 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pro-left-box>.mobile-prolist-box{
        display: -webkit-flex;
        display: flex;
    }
    .pro-detail-wrapper>.pro-detail-inner>.pro-detail-left,
    .pro-detail-wrapper>.pro-detail-inner>.pro-detail-right{
    width: 100%;
    }
    .pro-detail-wrapper>.pro-detail-inner>.pro-detail-left>.pro-slick-box {
        width: 100%;
        height: auto;
        padding: 0;
    }
    .pro-detail-right>.pro-detail-title>h1 {
        font-size: 20px;
    }
    .pro-info-prize {
        padding: 20px 0 0;
    }
    .pro-info-prize>.go-shopping>li {
        padding: 15px 0;
    }
    .pro-info-prize>.go-shopping>li>a {
        font-size: 14px;
        padding: 10px 0;
    }
    
    .page-content-inner {
        padding: 20px 10px;
    }
    .paddb30{
        padding-bottom: 30px;
    }
    .footer-inner>.copy-rightbox>li:nth-child(1) {
        border-right: none;
    }
}
@media only screen and (max-width: 320px){
    .news-wrapper>.newsdetail-inner {
        padding: 30px 15px;
    }
    .pro-info-prize>h1 {
        font-size: 20px;
    }
    .pro-info-prize>.go-shopping>li>a {
        font-size: 12px;
    }
}