:root{--main-color:#622F7E}
:root{--gray:#666}
:root{--golden:rgb(198,167,92)}

/* general */
.no-bdr{border:none !important}
.content p>img{display: inline-table;}
.img-card{    border-radius: 10px;
  -webkit-box-shadow: 0 10px 30px 0 rgb(185 182 235 / 40%);
  box-shadow: 0 10px 30px 0 rgb(185 182 235 / 50%);}
.white{color:#fff}
.yellow{color:yellow}
.yellow:hover{color:white}
a:hover{color:#999}
a:hover p{ color: #999;}
a .txt{color:#999}
.block{display: block;}
.position-inherit{position: inherit;}
.ho-shadow:hover{box-shadow: 0 10px 30px 0 rgb(185 182 235 / 50%);}
.date .iconfont{font-size: 36px;}
.clock::before {content:"\e635"; font-family: iconfont; font-size: 14px;}
.calender::before {content:"\e655"; font-family: iconfont; font-size: 16px; }
/* header */
.shadowed{box-shadow: 4px 19px 73px #b4b4b46b;}
.header{height: 80px; }
nav {display: flex; justify-content:space-between; align-items: center;}
nav .logo{display: inline-block; max-width: 25%;}
nav .logo img{width: 100%;height: auto;}
header{z-index: 999;}
.nav>ul>li>a{position: relative;}
.text-sm p{font-size: 0.875rem}

.nav>ul>li:hover>a::after{left: 0; right:0; width: 100%; }
.nav ul li a{display: inline-block; padding: 1em; font-size: 16px;}
.nav ul li a:hover{color: var(--golden);}
.nav ul li .sub{background: white;z-index: 999;}

.contr{background-color:rgba(85, 51, 102,0.6); color:#fff; position: relative;}
.contr .msk{background-color: var(--gray); opacity: 0.9; }
.lined{border: 1px solid #fff;}
.flex-center{justify-content: center;}

.g-list .card{ height: 40em;}
.g-list .col-6 .card img{min-height: 100%;}

.number{ background: #333;}
.number dl{ text-align: center; color: #fff;}
.sub .img{float: right;}
.sub .img img{ width: 220px; height: 165px;}

.search{padding-top: 1em; }
input::-webkit-input-placeholder{color:#999}
.search form{position: relative;}
.search .hd-search .search-txt{border: 1px solid #ccc; padding: 0 2.5em 0 1em; height: 2.5em;  line-height: 1.8em; background: #fff;}
.search .iconfont{ font-size: 20px; color: #666; position: absolute; right: .5em;}
.ofh{overflow: hidden;}
/* nav */
nav{padding: .5rem 0;}

  
  button.iconfont{border: none; background: transparent;}
  /*search*/
  .searchview{position: fixed; top: 0; width: 100%; height: 100%; z-index: 998; background: rgba(100,100,100,0.5);display: none;}

  /*gallery*/
.album-list .active a{background: var(--main-color); color: #fff;}

.header{display: flex; flex-flow: nowrap; }
.swiper-container { width: 100%; }
/* general */
.row{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;}
.col-2{ width: 16.666667%;-ms-flex: 0 0 16.666667%;  flex: 0 0 16.666667%;  max-width: 16.666667%;}
.col-4{max-width: 33.333333%;position: relative;    width: 33.333333%;    padding-right: 15px;    padding-left: 15px; flex: 0 0 33.333333%;}
.col-6{width: 50% !important;flex: 0 0 50%;}
.col-8{width: 66.66666667% !important; max-width:66.66666667%;}
.botn-space{ margin-bottom: 1.5em;}  
.swiper-slide>img{max-width: 100%;}
.shadow-sm{box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;}
.shadow-md{box-shadow: 0 1rem 2rem rgba(0,0,0,.175)!important;}
.shadow-ho{box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; transition: box-shadow .1s ease-in-out; overflow: hidden;}
.shadow-ho:hover{box-shadow: 0 1rem 2rem rgba(0,0,0,.175)!important;}
.shadow-nho{box-shadow: none;transition: box-shadow .1s ease-in-out;}
.shadow-nho:hover{ box-shadow: 0 1rem 2rem rgba(0,0,0,.175)!important;}

/* card general */
.card-header{display: flex; flex-direction: row; justify-content: space-between;}
.border-none{border: none; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);}
.card-header{padding: .75rem 1.25rem;}

.card{ flex: 1 1 auto;    min-height: 1px; border-radius: 0.125rem; border:1px solid #eee; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;transition: box-shadow .1s ease-in-out; }
.card:hover{box-shadow: 0 1rem 2rem rgba(0,0,0,.175)!important;}
.card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 1px; padding: 1.25rem;  }
.card-body a{font-size: 14px;}
.card-info h3 a{font-size: 15px; color: #666; line-height: 1.6;}
.card-info p a{ color: #999; line-height: 1.6; font-size: 14px;}

.card .date-box{border: 1px solid #ccc; width: 6em; height: 6em; padding: .6em; margin-left: 1.8em; margin-top: .3em;}
.card .date-box  dt{ font-size: 15px; height: 50%; text-align: center;}
.card .date-box  dd{font-size: 13px; height: 50%; text-align: center;}

/* slide */
.slide-img{ width: 100vw; background-size:auto; background-repeat: no-repeat;}
.slide-img a{display: block;width:100%;height: 100%;}
.slide-img a img{width: 100%; height: auto;}
.slide-item{width: 100%;height: 100%; overflow: hidden;}
.slide-img{height: 100%;width: 100%;}

/* image zoom */
.card .img-zoom{overflow: hidden;}
.img-zoom img{transition: .5s;}
.img-zoom img:hover{ transform: scale(1.1) ;-webkit-transform:scale(1.1);-ms-transform:scale(1.1)}

/* cards */
.card-slide{width: 100%;    margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; margin-top: 1em;}
.card-slide .swiper-slide{width: 60%;}
/* 卡片内列表 */
.card-list li  a.caimg{display: block; float: left; margin-right: 1em; }
.card-list .caimg img{ height: 6em;}
.card-list li:not(:first-child){height: 2.4em;}
.card-list li h3{ font-size: 18px;}
.card-list li a{line-height:1.8;}
.h25{height: 25em;}
.card-list li a {display: flex; align-items: center; justify-content: space-between;}
.card-list li a h4{font-weight: normal; font-size: 14px;}
.card-list li:first-of-type{height: 7.7em;}
.card-list li:first-of-type a{display: block;}
/* friendlink */
.row li a img{max-width: 100%;}


/* Flash style */
.bling { display: block; position: relative; margin: 0 auto; }
.bling:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: -20px; overflow: hidden; background:linear-gradient( left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100% ); background: -moz-linear-gradient( left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100% ); background: -webkit-linear-gradient( left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100% ); background: -o-linear-gradient( left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-25deg); -webkit-transform: skewX(-25deg); -moz-transform: skewX(-25deg); }
.bling:hover:before { left: 250%; transition: left 1s ease 0s; }

/* brands */
.brands li img{ height: 5em;}

/* footer section */
footer{ background: var(--main-color); padding-top: 1.5em; color: white;}
footer h2{font-size: 18px; color: white;}
footer a,footer p{color:#fff}
.co-nav{display: flex; justify-content: space-between;}
.co-nav li a{ display: block; line-height: 2em; font-size: 14px;}
.co-nav li a:hover{color: #eee;}


.icp{text-align: center; line-height: 4em; color: #ccc; }
.icp p{ font-size: 14px;}

footer h2{line-height: 2em;}
footer h3{font-size: 16px; line-height: 2em;}
footer p{line-height: 2em; font-size: 16px;}
footer .icon {font-size: 36px;}
footer .icon:hover{ color: #eee;}
footer .qr{ background: #fff;  transition: all .2s ease;  width: 8em;}
footer .follow ul li:hover .qr{opacity: 1;}
footer .follow a{display: block; text-align: center;}
footer .follow ul li{display: block; }
footer .qr img{width: 100%;}
footer .base{background: rgba(0,0,0,.5);}
footer .base p{ line-height: 3em;} 

.capital{margin-top: -5em; background: #fff; padding: 2em; height: 10em;}
.capital h2{font-size:20px; font-weight: normal; color: var(--main-color);  padding-left: 15px; line-height: 1.6;}
.capital h4{font-size: 14px; font-weight: normal; padding: 5px 0 0 15px; color: #999;}


/*.breadcrumb{ display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: .75rem 1rem;  list-style: none; background: transparent; border-radius: .25rem; }*/
/*.breadcrumb li a{font-size: 14px;}*/
/*.breadcrumb li:first-child a::before { content: "\e9db"; font-family: "iconfont" !important; font-size: 14px;  font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;  padding-right: .2em;}*/

/*breadc*/
.breadcrumb li a{font-size: 14px; color: #666; padding-left: .2rem; height: 100%; display: block}
.breadcrumb li a::before{font-family: "iconfont" !important; content: "\e638"; font-size: 14px;}
.breadcrumb li:first-child a::before {content: "\e9db";font-family: "iconfont" !important;font-size: 14px;font-style: normal;padding-right: .2rem;}


/* product */
.banner-img{ background-size:cover; height: 25vw;}
.img-show .swiper-container { width: 100%;  margin-left: auto; margin-right: auto; }
.swiper-slide { background-size: cover; background-position: center; }
.img-show .images img{width: 100%; height: auto;}
.images { height: 80%; width: 100%; }

.product .card .img-zoom a{display: block;overflow: hidden; height: 15em;}
.product .card a img{ width: 100%; height: auto;}
.product .card-body{padding: .5em; text-align: center;}


.thumb-list .thumbs { height: 20%; box-sizing: border-box; padding: 10px 0; width: 80%; }

.thumbs .swiper-slide { height: 100%; opacity: 0.4; }

.thumbs .swiper-slide-thumb-active { opacity: 1; }
.thumb-list{position: relative;}
.swiper-button-white{top: 50%; color: #ccc;}
.swiper-button-prev{left: 10px;}
.swiper-button-prev{right: 0;}
.info h2{line-height:2;font-size: 18px; color:var(--main-color);}
.detail h2{line-height: 2;}
.pro-detail p{font-size: 14px; color: #666; line-height: 1.8;}
.detail h2 span { color: #f60; font-size: 18px;}
.detail h2{border-bottom: 2px solid #f60; width: 100%;}
.content{ padding: 2em; color: #666; font-size: 14px;}

/* side-nav  */
.sub-index h2{ font-size: 2em; font-weight: bold; line-height: 1.8; background: var(--golden); padding: 1em 1em 3.9em 1em;}
.sub-index h2 span{font-weight: normal; font-size: 16px;}
.sub-index{width: 100%;}
.sub-index ul{width: 80%; background: #fff; margin-top: -2.5em; margin-left: 15%; padding: .5em 0 10em 0;}
.sub-index ul li{ padding: .5em 1em;}
.sub-index ul li.active a{color:var(--main-color)}
.sub-index ul li a{display: block; height: 2em; line-height: 2em; font-size: 16px;  border-bottom: 1px dashed #ccc;}
.sub-index ul li a::after{content: "\e638"; font-family: "iconfont" !important; font-size: 14px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: right;color: #ccc;}
/* pager */
.pager{padding-left: 0; margin: 17px 0; list-style: none; text-align: center;}
.pagination{display: inline-block; padding-left: 0; margin: 17px 0; border-radius: 3px;}
.pager li{    margin: 0 .4em; display: inline-block;}
.pager li > a, .pager li > span { background: none; border: 1px solid #e6e6e6; border-radius: 0.25em; padding: .5em .93em; font-size: 14px; }
.pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-bottom-left-radius: 3px; border-top-left-radius: 3px; }
.pager .disabled > a, .pager .disabled > a:hover, .pager .disabled > a:focus, .pager .disabled > span { color: #777777; background-color: #fff; cursor: not-allowed; }

.pager li > a:hover, .pager li > a:focus { text-decoration: none; background-color: #eeeeee; }

/* article */
.article h1{text-align: center; font-size: 24px; line-height: 2; color: var(--main-color);}
.article .info{ line-height: 2; font-size: 13px; text-align: center;}
.article .info span{ display: inline-block; padding: 0 2em; color: #999;}
.article .content{ padding: 1em;}
.content p{margin-top: 1em;}
.content img{max-width: 100%; display: inline-block; margin: 1em;}

.trans-y{transition: all 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);}
.trans-y:hover{transform:translateY(-5px) ; transition: all 0.3s ease;}
.fw-nm{font-weight: normal;}
.card .img-magnify a{position: relative; overflow: hidden; display: block;}
.card .img-magnify a::after{ content:"\e698" ; display: flex; background: rgba(0,0,0,.175); width: 100%; height: 100%; position: absolute;top: 20em;font-family: "iconfont" !important; font-size: 24px; text-align: center;justify-content: center; align-items: center; color: #fff; transition:all .3s ease ;}
.card:hover .img-magnify a::after{top: 0;}

.blk{line-height: 2em;}
.blk h3{font-size: 18px; line-height: 2; color:#666;width: 100%;}
.blk p{ line-height: 1.6; color: #666; font-size: 14px;}

.w100{display: block; width: 100%;}

.msg h3{font-size: 18px; line-height: 2; color:#666;width: 100%;}
.msg textarea{width: 100%; border: 1px solid #ccc; border-radius: 5px; padding: .5em;}
.captcha{height: 1.6em; width: 8em;}
.msg input[type=text]{ border: 1px solid #ccc; padding: 0 .5em; height: 2em;}
.msg{padding-left: 15px;padding-right: 15px;}

.banner-img{ background-size:cover; height: 25vw;}
.swiper-container {width: 100%;height: 300px;margin-left: auto;margin-right: auto;}
.swiper-slide {background-size: cover;background-position: center;}
.images {height: 80%;width: 100%;}
.thumbs {height: 20%;box-sizing: border-box;padding: 10px 0;width: 80%;}
.thumbs .swiper-slide {height: 100%;opacity: 0.4;}
.thumbs .swiper-slide-thumb-active {opacity: 1;}
.thumb-list{position: relative;}
.swiper-button-white{top: 50%; color: #ccc;}
.swiper-button-prev{left: 2em; color: rgba(255,255,255,.5); }
.swiper-button-next{right: 2em; color: rgba(255,255,255,.5);}
.info h2{line-height:2;font-size: 24px; color:var(--main-color);}
.swiper-button-prev:hover,.swiper-button-next:hover{color: #fff;}
.detail h2{line-height: 2;}
.pro-detail p{font-size: 14px; color: #666; line-height: 1.8;}  
.detail h2 span { color: #f60; font-size: 18px;}
.detail h2{border-bottom: 2px solid #f60; width: 100%;}

/* index general */
.index h1{ font-size: 32px; line-height: 2; text-align: center; padding-top: 1.5em; font-weight:500; color: #666;}
.index h1 span{color: var(--main-color);}
.index h3{font-size: 18px; line-height: 2; font-weight: 500; color: #666; padding-bottom: 1.5em; }
.index p{ color: #666; text-indent: 2em;padding: .2em; line-height: 1.8; font-size: 14px;}


div.more{text-align: center;}
.more a.lnkbox{ border: 1px solid var(--main-color); padding: .5em 1.5em; color: var(--main-color);}
.more a.lnkbox:hover{color: #999;}

/* gallery */
.gallery .img-magnify a{height: 14.5em; }
.gallery .img-magnify a span{display: block;height:14.3em; overflow: hidden; padding: .2em;}
.about img{max-width: 100%;}
.fixed-info{position: absolute; width: 100%; color: #fff; bottom: 0; background: rgba(50,50,50,.5);}


/*number*/
.number .container{ padding-top: 5em; padding-bottom: 5em;}
.number .num{font-size: 28px; line-height: 2;}

/* icons */
.icons .row li img{ width: 100%; }

.words h2{font-size: 28px; color: #fff; font-weight: 500; width: fit-content; margin: 0 auto;}
.words h2 span{padding:.3em .3em; display: inline-block;}
.mx-5{margin: 0 3em 0 3em;}

/* testimonial */
.testimonial .card-testimonial{position: relative; padding: 2em;}
.testimonial .card-avatar{ width: 80px; position: absolute; left: 50%; top: -41px; transform: translateX(-50%);}
.testimonial img{ border-radius: 50%; width: 100%;}
.card-description{padding: 2em;}
.inner-icon{    left: 50%;  position: relative;  top: 42px; transform: translateX(-50%); text-align: center;}
.testimonial .table{margin-bottom: 0;}
.card-testimonial .inner-icon i::after { content: '\e67b'; font-family: "iconfont" !important; color: #b4b4b4; font-size: 39px; padding: 17px 20px 17px 20px; background: #ffff; border-radius: 50%; box-shadow: 4px 19px 73px #b4b4b46b; }
.cardslide-container{overflow-x:hidden; }
.tabhd ul{display: flex; border-bottom: 3px solid #eee;}
.tabhd ul li{margin-bottom: -3px;}
.tabhd ul li a{font-size: 18px; padding: .4em .5em; display: block; border-bottom:3px solid #eee ; }
.tabhd ul li a:hover,.tabhd ul li.active a{border-bottom:3px solid var(--main-color);}
.testimonial  .swiper-wrapper{margin-bottom: 3em;}
.cardslide{position: relative; overflow: visible;}
.card-testimonial h5{font-weight: normal; color: #999; line-height: 1.6; font-size: 14px; height: 10em;}
.card-testimonial h4{font-weight: normal; color: #777777;}


.news img{ max-width: 100%; width: 100%;}
.news dl dt{position: relative;color: #fff; overflow: hidden;}
.news dl dt .time-box{ position: absolute; top: 0; padding: .5em 1.5em; background: var(--main-color); color: #fff;}
.time-box i{ font-size: 36px; display: block;}
.time-box span{display: block; font-size: 12px;}
.index dl dd h3{ padding-bottom: 0; color: #333; padding-top: .3em;}
.index dl dd p{text-indent: 0; color: #666;}

.index .list .time-box{ display: inline-block;}
.index .list .title{display: inline-block; width: calc(100% - 4.5em);}
.index .list .title h3{padding-bottom: 0; line-height: 1.8; color: #333; font-size: 14px;}
.title p{text-indent: 0; color:#666; font-size: 12px; padding: 0;}
.index .list ul li{border-bottom: 1px solid #ccc; padding-bottom: .5em; padding-top: .5em;}
.title{padding-left: 1.5em;}

/*video player*/
.video-box{position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;font-size: 24px;z-index: 99999;display: none;}
.video-bg {position: absolute;height: 100%;width: 100%;background: #000;opacity: .9;}
.video-box .video-container {width: 800px;max-height: 90vh;max-width: 100%;background: #000000;overflow: hidden;opacity: 1;}
.f-center {position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.video-close{position: absolute; bottom: 20%; left: calc(50% + 10px); color:#fff; cursor:pointer}
video{max-width: 100% !important; width: 800px;}

.play{ cursor: pointer; border: 3px solid #fff;height: 80px; width: 80px; border-radius: 40px; position: absolute; top:calc(50% - 40px);left:calc(50% - 40px); background: rgba(255,255,255,.3)}
.play:hover{box-shadow:0 0 10px #fff}
.play:after{content: "";position: absolute;font-size: 0;margin:0 auto;left: 22px;top: 17px;width: 0;height: 0;border-left: 35px solid #fff;border-top: 20px solid transparent;border-right: 35px solid transparent;border-bottom: 20px solid transparent;}
.hover-mask{width: calc(100% - 30px);height: 100%; position: absolute;top: 0; border-radius: 10px;}
.hover-mask:hover{ background: rgba(0,0,0,.3) ;}
/*video player end*/

/*magnifier*/
.basic-info .row{width: 100%}
#magnifier {position: relative;width: 400px;}
.small-box {position: relative;width: 400px;height: 400px;margin-bottom: 20px;border: 1px solid #eee;overflow: hidden}
.small-box table td{width: 400px;height: 400px;}
.small-box img {width: auto;height: auto;max-height: 400px;max-width: 400px;}
.small-box .hover {display: none;position: absolute;left: 0;top: 0;width: 200px;height: 200px;border: 1px solid #aaa;background: #0099ff;opacity: .5;filter: alpha(opacity: 50);cursor: move;}
.thumbnail-box {position: relative;width: 100%;}
.thumbnail-box .btn {position: absolute;top: 50%;width: 22px;height: 32px;margin-top: -16px;}
.thumbnail-box .btn-prev {left: 0;background: url(../img/btn_prev.png) no-repeat;}
.thumbnail-box .btn-prev.btn_prev_disabled{background: url(../img/btn_prev_disabled.png) no-repeat;cursor: not-allowed;}
.thumbnail-box .btn-next {right: 0;background: url(../img/btn_next.png) no-repeat;}
.thumbnail-box .btn-next.btn_next_disabled{background: url(../img/btn_next_disabled.png) no-repeat;cursor: not-allowed;}
.thumbnail-box .list {overflow: hidden;width: 330px;margin: 0 auto;}
.thumbnail-box .wrapper {width: 100000px;}
.thumbnail-box .list .item {float: left;margin: 0 10px;}
.thumbnail-box .list .item-cur {}
.thumbnail-box .list .item img {border: 2px solid #a9a9a9;width: 54px;height: 54px;}
.thumbnail-box .list .item-cur img {border: 2px solid #e53e41;}
.big-box {display: none;overflow: hidden;position: absolute;left: 401px;top: 0;z-index:1;width: 480px;height: 480px;border: 1px solid #e4e4e4;}
.big-box img {display: block;}

/* magnifier end */

/*pagenation*/
.pagination {text-align: center; margin-top: 3rem; width: 100%;}
ul.pagination  li{display:inline-block;margin-left:1rem; margin-bottom: 1rem;}
ul.pagination  li a,ul.pagination  li span{display:block; border:1px solid var(--main-color); height:2rem; line-height:2rem; width:2rem;text-align:center; border-radius:5px;}
ul.pagination  li.active span{ color:#ccc;border-color:#ccc;}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus,
.pagination > .active > span:focus { z-index: 3; color: #fff; background-color: var(--main-color); border-color: var(--main-color); cursor: default; }