/*https://www.gseen.com/online_tools/zip_format/css_zip  https://www.bootcss.com/  https://css.xunwa.cn/*/
@charset "UTF-8";
:root {
    --base-body-size: 16;
    --defaultcolor:#c2191d;
    --primary-color: #ff5256;
    --primary-color-rgb: 0, 102, 204;
    --secondary-color: #00a8ff;
    --accent-color: #ff6b6b;
    --dark-color: #1a1a2e;
    --light-color: #f8f9fa;
    --yellow-color: #ffc107;
    --golden-color: #f3782a;
    --cursorbg: #25384a;
    --cursorbg-rgb: 206, 174, 146;
    --red-rgb: 194, 25, 29;
    --white: #fff;
    --white-rgb: 255,255,255;
    --black: #000;
    --black-rgb: 0,0,0;
    --grey:#eee;
    --grey-rgb:238,238,238;
    --grey-txt:#666;
    --grey-txt-rgb:102,102,102;
    --green: #bbf737;
    --green-rgb: 187, 247, 55;
    --footerwords:#00a8ff;
    --footerwords-rgb:0, 102, 204;
    --gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --bodybg:#fff;
    --fontfamily: "Exo 2", "Arial", "Helvetica", "sans-serif";
    --fontsize:16px;
}
* {margin:0;padding:0;box-sizing:border-box;}
.text-truncate-2 {text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;}
.text-truncate-3 {text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;}
.text-truncate-4 {text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;}
/* Picture Box*/
.picturebox,.picturebgbox {position:relative;z-index:1;overflow:hidden;}
.picturebox .pic {position:relative;width:100%;height:0;padding-bottom:100%;overflow:hidden;}
.picturebox .pic img {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);width:100%;transition:all 2s ease .5s;}
.picturebox:hover .pic img {transform:translate(-50%,-50%) scale(1.2);}
.picturebox.without:hover .pic img {transform:translate(-50%,-50%) scale(1.0);}
.picturebox{position:relative;z-index:1;overflow:hidden;}
.picturebox .bximg {width: 100%;aspect-ratio: 1 / 1;object-fit: cover;transform:scale(1);transition:all 2s ease .5s;}
.picturebox:hover .bximg {transform:scale(1.2);}
.picturebox.without:hover .bximg {transform:scale(1.0);}
/* masking*/
.picturebox .pic .masking {display:none;position:absolute;z-index:1000;width:100%;height:100%;text-align:center;line-height:100%;background:var(--bg);color:var(--white);font-size:2.5rem;}
.picturebox:hover .pic .masking {display:flex;align-items:center;justify-content:center;}
.picturebgbox .pic {position:relative;z-index:1;width:100%;height:0;padding-bottom:100%;overflow:hidden;transform:scale(1);transition:all 2s ease .5s;}
.picturebgbox:hover .pic {transform:scale(1.2);}
.picturebgbox.without:hover .pic {transform:scale(1.0);}

.topMarquee .topMarqueeWrapper .topMarqueeMoving{display:flex;align-items:center;gap:50px}
.topMarquee .topMarqueeWrapper .topMarqueeMoving span{font-size:1rem;line-height:2rem;color:var(--defaultcolor);position:relative;display:flex;align-items:center;gap:50px;white-space:nowrap;transform:translateX(0);white-space:nowrap;animation:marquee 20s linear infinite}
.topMarquee .topMarqueeWrapper .topMarqueeMoving span::after{content:"";width:70px;height:1px;background-image:url(../images/line1.png);background-repeat:no-repeat;background-size:contain;background-position:center}
.topMarquee .topMarqueeWrapper .topMarqueeMoving:hover span{animation-play-state:paused;}
@keyframes marquee {0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
/*--------------------------------------------------------------
# Custom Cursor
--------------------------------------------------------------*/
.custom-cursor__cursor {width: 25px;height: 25px;border-radius: 100%;border: 1px solid var(--cursorbg);-webkit-transition: all 200ms ease-out;transition: all 200ms ease-out;position: fixed;pointer-events: none;left: 0;top: 0;-webkit-transform: translate(calc(-50% + 5px), -50%);transform: translate(calc(-50% + 5px), -50%);z-index: 999991;}
.custom-cursor__cursor-two { width: 10px;height: 10px;border-radius: 100%;background-color: var(--cursorbg);opacity: .3;position: fixed;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);pointer-events: none;-webkit-transition: width .3s, height .3s, opacity .3s;transition: width .3s, height .3s, opacity .3s;z-index: 999991;}
.custom-cursor__hover {background-color: var(--cursorbg); opacity: 0.4;}
.custom-cursor__innerhover {width: 25px;height: 25px;opacity: .4;}


body {font-family:var(--fontfamily);color:var(--dark-color);overflow-x:hidden; background:var(--bodybg);font-size:0.875rem;}
a{color:var(--dark-color);text-decoration:none;font-size:0.875rem;}
a:focus,a:hover{color:var(--defaultcolor);text-decoration:none;transition:.3s all}
p{margin-bottom: 0;}
ul{margin:0;padding:0}
ul li{list-style:none}
img{max-width:100%;height:auto}
/* Preloader*/
.loader-wrapper{position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;transition:0.8s 1s ease;z-index:99999}
.loader{position:relative;display:block;z-index:201;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;transition:all 1s 1s ease;border:3px solid transparent;border-top-color:var(--yellow-color);-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;-o-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}
.loader:before{position:absolute;content:'';top:6px;left:6px;right:6px;bottom:6px;border-radius:50%;border:3px solid transparent;border-left-color:var(--green);-webkit-animation:spin 2s linear infinite;-moz-animation:spin 2s linear infinite;-o-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
.loader:after{position:absolute;content:'';top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-right-color:var(--white);-webkit-animation:spin 2.5s linear infinite;-moz-animation:spin 2.5s linear infinite;-o-animation:spin 2.5s linear infinite;animation:spin 2.5s linear infinite}
 @-webkit-keyframes spin {
    0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}
}
@-moz-keyframes spin {
    0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}
}
@keyframes spin {
    0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}
}
.loader-wrapper .loder-section{position:fixed;top:0;width:50%;height:100%;background:rgba(var(--black-rgb),0.95);z-index:2}
.loader-wrapper .loder-section.left-section{left:0;transition:1s 1.4s ease}
.loader-wrapper .loder-section.right-section{right:0;transition:1s 1.4s ease}
.loaded .loder-section.left-section{left:-100%}
.loaded .loder-section.right-section{right:-100%}
.loaded .loader-wrapper{visibility:hidden}
.loaded .loader{top:-100%;opacity:0}

/* Scroll to Top Button*/
#scrollTopBtn {position:fixed;bottom:2rem;right:2rem;width:3rem;height:3rem;background:var(--gradient);color:var(--white);border:none;border-radius:50%;font-size:1.25rem;cursor:pointer;opacity:0;visibility:hidden;transition:all 0.3s ease;z-index:1000;box-shadow:0 4px 15px rgba(var(--primary-rgb),0.3);display:flex;align-items:center;justify-content:center;}
#scrollTopBtn.show {opacity:1;visibility:visible;}
#scrollTopBtn:hover {background:var(--primary-color);transform:translateY(-5px);box-shadow:0 8px 25px rgba(var(--primary-rgb),0.4);}
#progress{height:4rem;width:4rem;border-radius:50%;position:fixed;bottom:2rem;right:2rem;box-shadow:0 0 10px rgba(0, 0, 0, 0.2);display:grid;place-items:center;z-index:99999;cursor:pointer}
.progress.hide{display:none !important;transition:0.5s !important}
#progress-value{display:block;height:calc(100% - 15px);width:calc(100% - 15px);background-color:var(--white);border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:1rem;color:var(--primary-color)}
/* Navigation*/
.navbar {background:var(--white);box-shadow:0 2px 10px rgba(var(--black-rgb),0.1);transition:all 0.3s ease;padding:0 0;}
/*.navbar.scrolled {padding:10px 0;backdrop-filter:blur(10px);background:rgba(var(--white-rgb),0.95);}*/
.navbar-brand img{max-height:6rem;}
.nav-link {color:var(--dark-color) !important;font-weight:500;margin:0 0;transition:color 0.3s ease;position:relative; line-height: 6rem;padding-left:1.375rem!important;padding-right:1.375rem!important; font-size:0.875rem;}
@media (max-width:1601px){
.nav-link{padding-left:0.75rem!important;padding-right:0.75rem!important;}
}
@media (max-width:1441px){
.nav-link{padding-left:0.25rem!important;padding-right:0.25rem!important;}
}
@media (max-width:1201px){
.nav-link{padding-left:0.125rem!important;padding-right:0.125rem!important;}
}
@media (max-width:991px){
.nav-link{padding-left:0rem!important;padding-right:0rem!important;}
}
.nav-link::before {content:'';position:absolute;width:0;height:2px;bottom:0;left:0;background:var(--primary-color);transition:width 0.3s ease;}
.nav-link:hover::before,.nav-link.active::before {width:100%;}
.nav-link:hover {color:var(--primary-color) !important;}
/*
.dropdown-menu {transition: opacity 0.2s ease, transform 0.2s ease;opacity: 0;transform: translateY(-10px);display: none;border-radius:0;border:none;margin:0;padding:0 0;}
.dropdown-menu.show { opacity: 1;transform: translateY(0);display: block;}
.navbar .dropdown ul.dropdown-menu li {width:100%;padding:0 0;position:relative;background:var(--cprimary);border-top:1px solid var(--grey);}
.navbar .dropdown ul.dropdown-menu li a {text-transform:none;padding-left:0;padding-right:2rem; line-height: 2.5rem;}
.navbar .dropdown ul.dropdown-menu li .active:hover,.navbar .dropdown ul.dropdown-menu li a:hover,.navbar .dropdown ul.dropdown-menu li:hover>a {color:var(--black);background:var(--huangse);}*/

.navbar .dropdown ul {display:block;position:absolute;left:0;top:100%;margin:0;padding:0 0;z-index:999; display: none;visibility:hidden;transition:.3s;border-radius:0;border:none;min-width:100%;width:auto;}
.navbar .dropdown ul a {text-transform:none;padding-left:0;padding-right:2rem; line-height: 2.5rem;margin:0 0;}
.navbar .dropdown ul li {width:100%;padding:0 0;position:relative;background:var(--cprimary);border-top:1px solid var(--grey);}
.navbar .dropdown ul a i{padding:0 0;line-height:2rem;}
.navbar .dropdown ul .active:hover,.navbar .dropdown ul a:hover,.navbar .dropdown ul li:hover>a {color:var(--black);background:var(--huangse);}
.navbar .dropdown ul.show { display: block;top:100%;visibility:visible;}
.navbar .dropdown .dropdown ul {top:0;left:calc(100% - 30px);visibility:hidden;}
.navbar .dropdown .dropdown>ul.show  {display: block;top:0;left:100%;visibility:visible;}

.navbar-toggler,.navbar-toggler.collapsed{border: none;}
.navbar-toggler:focus{box-shadow:none;}
.navbar-toggler:hover .icon-bars,.navbar-toggler:focus .icon-bars{ background-color:var(--primary-color);}
.navbar-toggler:focus { cursor: pointer; z-index: 999999;}
.navbar-toggler .icon-bars { display: block; margin: 0.375rem 0; width: 1.75rem; height: 0.125rem; background-color: var(--primary-color);-webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; z-index: 999999;}
.navbar-toggler .top {-webkit-transform: translateY(8px) rotateZ(45deg);-moz-transform: translateY(8px) rotateZ(45deg);-ms-transform: translateY(8px) rotateZ(45deg);-o-transform: translateY(8px) rotateZ(45deg);transform: translateY(8px) rotateZ(45deg);}
.navbar-toggler .bottom {-webkit-transform: translateY(-8px) rotateZ(-45deg);-moz-transform: translateY(-8px) rotateZ(-45deg);-ms-transform: translateY(-8px) rotateZ(-45deg);-o-transform: translateY(-8px) rotateZ(-45deg);transform: translateY(-8px) rotateZ(-45deg);}
.navbar-toggler .middle {width: 0;}
.navbar-toggler.collapsed .top {-webkit-transform: translateY(0) rotateZ(0);-moz-transform: translateY(0) rotateZ(0);-ms-transform: translateY(0) rotateZ(0g);-o-transform: translateY(0) rotateZ(0g);transform: translateY(0) rotateZ(0);}
.navbar-toggler.collapsed .bottom {-webkit-transform: translateY(0) rotateZ(0);-moz-transform: translateY(0) rotateZ(0);-ms-transform: translateY(0) rotateZ(0);-o-transform: translateY(0) rotateZ(-45deg);transform: translateY(0) rotateZ(0);}
.navbar-toggler.collapsed .middle {width: 100%;}

.cartnumber{position: absolute; font-size: 0.75rem; top:0; right:0; background: var(--primary-color); color: var(--white); border-radius: 50%; width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center;}

.searchbox{width: 100%;height: 100%;position: fixed;top: 0; left: 0;z-index: 9999 !important;overflow: hidden;-ms-touch-action: none;touch-action: none;-webkit-text-size-adjust: 100%;-moz-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-size-adjust: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;outline: 0; background: rgba(var(--black-rgb),0.9);}
.searchclose{ position: absolute; right: 2rem; top: 2rem;}
.searchclose button{ color: var(--white); font-size: 2.5rem; width: 3rem; line-height: 3rem; text-align: center; display:block;}
.searchclose button:hover{ color: var(--white);}
.searchbox .form-control{ background:var(--white); border:none;border-radius: 1rem 0 0 1rem; font-size: 0.875rem;padding: 0.375rem 0;margin-bottom:0;}
.searchbox .input-group-text{ background: var(--white); border:none;border-radius: 0 1rem 1rem  0;margin-bottom:0;}
.searchbox .input-group-text i{ font-size: 1.5rem;}

.searchkeywords span,.searchkeywords a{color: var(--white);}
.cart-post {display:flex;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid var(--grey);}
.cart-post:last-child {margin-bottom:0;padding-bottom:0;border-bottom:none;}
.cart-post-img {width:70px;height:70px;border-radius:10px;overflow:hidden;margin-right:15px;flex-shrink:0;}
.cart-post-img img {width:100%;height:100%;object-fit:cover;}
.cart-post-content .title {font-size:1rem;font-weight:600;line-height:1.4;}
.cart-post-content .title a {color:var(--dark-color);text-decoration:none;transition:all 0.3s ease;}
.cart-post-content .title a:hover {color:var(--primary-color);}
.cart-post-content .prices {color:var(--grey-txt);}
.cart-post-content .prices .quantity .form-control{ width: 4rem;}
.cart-total span{font-weight: bold;}
.cart-btn button{ margin-right:0.25rem;}
.cart-btn button:last-child{ margin-right:0; margin-left:0.25rem;}

.quantity-btn .btn:disabled{ border: none;}

/* bannerflash */
#bannerflash .carousel-control-prev,#bannerflash .carousel-control-next { width: 3rem; z-index: 5; opacity: 0; margin: 0 1.5rem;}
#bannerflash:hover .carousel-control-prev,#bannerflash:hover .carousel-control-next{ opacity: 1;}
#bannerflash .carousel-control-next-icon,#bannerflash .carousel-control-prev-icon{background:0 0;font-size:1.25rem;line-height:0;background:none;border-radius:50px;transition:.3s;color:var(--white);width:3rem;height:3rem; border:1px solid var(--white);display:flex;align-items:center;justify-content:center}
#bannerflash .carousel-control-next-icon:hover,#bannerflash .carousel-control-prev-icon:hover{background:var(--defaultcolor);color:var(--whitetm); border-color:var(--defaultcolor);}
#bannerflash .carousel-indicators{margin-bottom: 2rem;}
#bannerflash .carousel-indicators [data-bs-target]{ height: 6px; border-radius: 6px; width: 30px; overflow: hidden; display: inline-block; border-top: 0; border-bottom: 0;}
#bannerflash .carousel-indicators [data-bs-target].active{ background-color: var(--defaultcolor);}
#bannerflash .pic::after{content: "";display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(var(--black-rgb).5);z-index: 2; width: 100%; height: 100%;background: url(../images/subbannermask.png);}
#bannerflash .carousel-item .pic img{transform:scale(1.05);transition:all 2s ease .5s;}
#bannerflash .carousel-item.active .pic img{transform:scale(1);}
#bannerflash .txt{position:absolute; left:0; top:0; width: 100%; height: 100%; z-index: 10;color: var(--white);}
#bannerflash .txt .title{font-size: 3rem;font-weight: bold;line-height: 3rem; }
#bannerflash .txt .desc{font-size: 1.5rem;}
/* banners */
.banners{position:relative;overflow:hidden}
.banners .bannerpc,.banners .bannerwap{min-height: 6rem;position:relative;}
.banners .pic{overflow:hidden;position:relative;z-index:1}
.banners .pic::after{content: "";display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(var(--black-rgb).5);z-index: 2; width: 100%; height: 100%;background: url(../images/subbannermask.png);}
.banners .pic img{animation:bannerimg 2s;opacity:1}
.banners .bannerpc .txt{position:absolute;left:0;bottom:10%;height:80%;z-index:90; color: var(--white);}
.banners .bannerpc .txt .breadcrumb{ color: var(--white); font-size: 1rem;}
.banners .bannerpc .txt .breadcrumb i{font-style: normal; padding: 0 0.5rem;}
.banners .bannerpc .txt .breadcrumb a{ color: var(--white);font-size: 1rem;}
.banners .bannerpc .txt .breadcrumb a:hover{ text-decoration: underline;}
.banners .bannerpc .txt .cattitle{font-size:3.75rem;font-family: var(--titlefamily);color: var(--white);}
.banners .bannerwap .txt{position:absolute;left:0;bottom:0;height:100%;z-index:90;color: var(--white);}
.banners .bannerwap .txt .cateinfo h3{font-size:1.5rem}
.banners .bannerwap .txt .cateinfo p{font-size:1rem}

/*menuTree*/
.menuTree ul{display:none;}
.menuTree li{line-height:3rem;color:var(--lvse); display:block;position:relative;}
.menuTree li:after{ position:absolute;content: "";display: block;height:1px;width:100%;border-bottom: 1px dashed var(--footerwords);left: 0; top: 2.9375rem;}
.menuTree li a{line-height:3rem;height:3rem;overflow:hidden; position:relative;color:var(--words);white-space:nowrap;text-overflow:ellipsis;word-break:break-all;border-bottom:1px dashed var(--footerwords);padding:0 0.25rem;}
.menuTree li a::before{ display: inline-block;content: ""; height: 1rem; width: 1rem; border: 1px solid var(--words); margin-right: 0.75rem;}
.menuTree ul li a.active::before{ background-color: var(--words);}
.menuTree li i{ display:block; float:right; color:var(--words); font-size:24px; width: 20px; height: 45px; line-height: 45px; text-align: center; font-style: normal; position: absolute; top: 0; right: 10px; cursor: pointer;}
.menuTree li.parent>i.parent::after{content: "+"; display: block;}
.menuTree li.parent.expanded>i.parent::after{content: "-"; display: block;}
.menuTree ul li ul li a{line-height:3rem;height:3rem;overflow:hidden;color:var(--words);white-space:nowrap;text-overflow:ellipsis;word-break: break-all; display:block;padding:0 0.25rem 0 2rem;}
.menuTree ul li ul li a:hover,.menuTree ul li a.active{color:var(--words);/*text-decoration:underline;*/}
.menuTree ul li ul li ul li a{padding:0 0.25rem 0 3rem;}
.menuTree ul li ul li ul li ul li a{padding:0 0.25rem 0 3rem;}

/* Hero Section */
.hero {background: var(--gradient);color: var(--white);overflow: hidden;}
.hero::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,101.3C1248,85,1344,75,1392,69.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;background-size: cover;}
.hero-content {position: relative;z-index: 1;}
.hero h1 {font-size: 3.5rem;font-weight: bold;margin-bottom: 20px;animation: fadeInUp 1s ease;}
.hero p {font-size: 1.3rem;margin-bottom: 30px;animation: fadeInUp 1.2s ease;}
.hero-pic::after{content: "";display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);z-index: 2; width: 100%; height: 100%;background: url(../images/subbannermask.png);}
.hero-txt{height: 500px;}
.btn-custom {background:var(--white);color:var(--primary-color);font-size:0.875rem;font-weight:600;border:none;border-radius:50px;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.1);position:relative;overflow:hidden;z-index:1;}
.btn-custom::before {content:'';position:absolute;top:0;left:0;width:0%;height:100%;background:var(--gradient);transition:all 0.3s ease;z-index:-1;}
.btn-custom:hover::before {width:100%;}
.btn-custom:hover {color:var(--white);transform:translateY(-3px);box-shadow:0 10px 25px rgba(var(--black-rgb),0.2);}

.btn-outline-custom{border:2px solid var(--primary-color);color:var(--primary-color);background:transparent;border-radius:50px;font-weight:600;transition:all 0.3s ease;flex:1;text-align:center;text-decoration:none;display:inline-block}
.btn-outline-custom:hover{background:var(--primary-color);color:white}

/* Section Styles*/
.section-title {font-size:1.875rem;color:var(--dark-color);}
.section-title span{color:var(--defaultcolor);}
.section-subtitle {color:var(--grey-txt);font-size:1.1rem;}

/* Services Section*/
.services-card {border: 1px solid #e3e3e3;background: #FFF;transition: all 0.3s ease 0s; cursor: pointer;}
.services-card .pic {height: 81px;padding-top: 40px;background: url(../images/service1.png) center no-repeat;transition: all 0.3s ease 0s;}
.services-card .pic.img_2 {background-image: url(../images/service2.png);}
.services-card .pic.img_3 {background-image: url(../images/service3.png);}
.services-card .pic.img_4 {background-image: url(../images/service4.png);}
.services-card h3 {color:var(--black);font-weight: normal;}
.services-card p {color: #999999;}
.services-card.active {border: 1px solid var(--defaultcolor);background: var(--defaultcolor);}
.services-card.active h3, .services-card.active p {color: var(--white);}
.services-card.active .pic {background-image: url(../images/service1_h.png);}
.services-card.active .pic.img_2 {background-image: url(../images/service2_h.png);}
.services-card.active .pic.img_3 {background-image: url(../images/service3_h.png);}
.services-card.active .pic.img_4 {background-image: url(../images/service4_h.png);}

.ushi {background: #f7f7f7;}
.ushi .ushi_ad {width: 100%;height: 256px;background: url(../images/ushi_ad.jpg) center no-repeat;}
.ushi-txt h4{color: #d1d1d1; font-size:1.5rem;font-weight: 300;}
.ushi-txt h3{line-height: 4rem;font-size:2.5rem;font-weight: 500;}
.ushi-txt h5{font-size: 1.5rem;color: #333;font-weight: 300;}
.ushi-txt .description ul li{ line-height: 2rem;}
.inabout {background: url(../images/about_bg.jpg) center no-repeat fixed;background-size: cover;}
.incontact{background: #f9f9f9;}
.inbolg .inbolgtitle span{font-size: 1.5rem; line-height: 1.5rem;}
.inbolg .inbolgtitle a{border: 1px solid #b2b1b2;}
.inbolg .inbolgtitle a:hover{color: var(--primary-color); border-color: var(--primary-color);}
/* Gallery Section*/
.gallery-card {background:var(--white);overflow:hidden;box-shadow:0 5px 20px rgba(var(--black-rgb),0.08);transition:all 0.3s ease; border: 1px solid var(--white);}
.gallery-card:hover {border-color:var(--primary-color);}
.gallery-caption .price{font-size: 1rem; color: var(--primary-color);}
/*.gallery-item {box-shadow:0 5px 15px rgba(var(--black-rgb),0.1);}*/
.gallery-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(var(--primary-color-rgb),0.8);display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity 0.3s ease;}
.gallery-pic:hover .gallery-overlay {opacity:1;}
.gallery-pic .gallery-overlay i {font-size:3rem;color:var(--white);transform:scale(0.8);transition:transform 0.3s ease;}
.gallery-pic:hover .gallery-overlay i {transform:scale(1);}
.gallery-caption-title a{font-size: 1rem;}
.blog-card-industry {border-top: 1px dashed #e4e3e3;}
.blog-card-industry span{ color: var(--primary-color);}
.gallery-btn a{background: #626262; color: var(--white);}
.gallery-btn a.active,.gallery-btn a:hover{background: var(--primary-color);}
.gallery-btn a.active:hover{background: #626262;}
.gallery-button button.btn-custom{background:var(--secondary-color); color:var(--white);}
/* Testimonials*/
.testimonials-card {background:var(--white);border-radius:15px;padding:40px;box-shadow:0 5px 20px rgba(var(--black-rgb),0.08);text-align:center;margin:20px;transition:all 0.3s ease;position:relative;}
.testimonials-card:hover {transform:translateY(-5px);box-shadow:0 10px 25px rgba(var(--black-rgb),0.15);}
.testimonials-img {width:6rem;height:6rem;border-radius:50%;background:var(--primary-color);transition:all 0.3s ease;}
.testimonials-card:hover .testimonials-img {background:var(--secondary-color);transform:scale(1.1);}
.stars i{color:var(--grey-txt);}
.stars i.active{color:var(--yellow-color);}
.testimonials .swiper{position:static;}
.testimonials .swiper .swiper-button-next,.testimonials .swiper .swiper-button-prev {background:none;border-radius:50%;width:3rem;height:3rem;transition:all 0.3s ease; color:var(--primary-color); right:-2rem; z-index: 9999; margin-top:1.5rem;}
.testimonials .swiper .swiper-button-prev{right:auto; left:-2rem;}
.testimonials .swiper .swiper-button-next:after,.testimonials .swiper .swiper-button-prev:after{ padding:0.5rem; font-size:2rem;}
.testimonials .swiper .swiper-pagination{bottom:-1rem;}

.website-title .title{line-height: 3.5rem;font-size: 3rem;}
.website-title .title span{color: var(--golden-color);}
.website-title .subtitle{font-size: 1.875rem; line-height: 2.5rem;}
.process{background: url(../images/jzlc_bg.jpg) center bottom no-repeat #f6f6f6;}

.domain-item{background-color: #f7fcff;}
.domain-item.active{background-color: #e5f6fd;}

.features-item{ min-height: 9rem;}
.features-item .txt h3{ font-size: 1.125rem;}

.markeringwebsiteul h3{color: var(--golden-color); font-size: 1.75rem;}
.markeringwebsiteul ul li{background: url(../images/dui1.jpg) no-repeat left center;font-size:1.25rem;}

.website-title .title{line-height: 3.5rem;font-size: 3rem;}
.website-title .title span{color: var(--golden-color);}
.website-title .subtitle{font-size: 1.875rem; line-height: 2.5rem;}

.markering-title .title{line-height: 3.5rem;font-size: 3rem;}
.markering-title .title span{color: var(--golden-color);}
.markering-title .subtitle{font-size: 1.875rem; line-height: 2.5rem;}
.markering-title .subtitle span{color: var(--golden-color);}

.makemoney-content .txt{font-size: 1.25rem; line-height: 2;}
.makemoney-content .txt span{color: var(--golden-color);}
.makemoney-content .txt h3{font-size: 1.5rem; line-height: 2;}
.makemoney-content .txt h3 span{ font-size: 1.5rem;}

.markering-ad{background: url(../images/yingxiao_img8.jpg) center top no-repeat; background-size: cover;}
.markering-ad .title{font-size: 1.875rem;}
.markering-ad-a a{background: url(../images/yingxiao_img9.png) 54px center no-repeat; font-size: 1.75rem; border: 1px solid var(--white); border-radius: 1rem;}

.dali-item span {display: block;width: 152px;height: 152px;margin: 0 auto;margin-bottom: 25px;transition: all 0.3s;}
.dali-item span.bgs1 {background: url(../images/yingxiao_pic1.png) center center no-repeat;}
.dali-item:hover span.bgs1 {background: url(../images/yingxiao_pic1_on.png) center center no-repeat;}
.dali-item span.bgs2 {background: url(../images/yingxiao_pic2.png) center center no-repeat;}
.dali-item:hover span.bgs2 {background: url(../images/yingxiao_pic2_on.png) center center no-repeat;}
.dali-item span.bgs3 {background: url(../images/yingxiao_pic3.png) center center no-repeat;}
.dali-item:hover span.bgs3 {background: url(../images/yingxiao_pic3_on.png) center center no-repeat;}
.dali-item span.bgs4 {background: url(../images/yingxiao_pic4.png) center center no-repeat;}
.dali-item:hover span.bgs4 {background: url(../images/yingxiao_pic4_on.png) center center no-repeat;}
.dali-item span.bgs5 {background: url(../images/yingxiao_pic5.png) center center no-repeat;}
.dali-item:hover span.bgs5 {background: url(../images/yingxiao_pic5_on.png) center center no-repeat;}

.tiexinbg{background: url(../images/yingxiao_img9_bg.jpg) center top no-repeat;line-height: 3rem; font-size: 1rem;}

.makemoney-btn a{ color: var(--white); background-color: var(--golden-color); border-radius: 2rem; border: 1px solid var(--golden-color); font-size: 1.25rem; line-height: 1.8;}
.makemoney-btn a:hover{background: var(--white); color: var(--golden-color);}

.hosting-title .title{line-height: 1.5;font-size: 1.75rem;}
.hosting-title .title span{color: var(--golden-color);}
.hosting-title .subtitle{font-size: 1rem; line-height: 1.5;}
.hosting-title .subtitle span{color: var(--golden-color);}

.hostinghold-list{background: url(../images/areyou-img.jpg) no-repeat center top; padding-top: 115px;}
.hostinghold-item{ min-height: 93px; font-size: 1.25rem; width: 224px; display: inline-block;color: #7a7a7a;}
.hostinghold-item:hover{color: var(--golden-color);}

.hostingjoblist{background: url(../images/ico4.gif) repeat-x left bottom;}
.hostingjoblist ul li { padding-left: 1.125rem; background: url(../images/ico3.gif) no-repeat 0 15px;color: #222222; line-height: 2.5rem; font-size: 1.125rem;}
.hostingjobtxt{color: var(--golden-color); font-size: 1.5rem; line-height: 3rem;}
.hosting-team{background: url(../images/ico55.gif) no-repeat top left; min-height: 489px; max-width: 327px;}
.hosting-team::before{background: url(../images/ico2.gif) no-repeat left top; content: ""; display: block; position: absolute; top: 175px; left: -59px; width: 59px; height: 164px; z-index: 10;}
.hosting-team-txtp{ font-size: 1.5rem;}
.hosting-team-txth4{ font-size: 1.5rem;}
.hosting-team-txth3{ font-size: 2.25rem;}

.webnixi{background: #f08300 url(../images/nixi.jpg) no-repeat center top;min-height: 191px;}

.hostingtuoguan-title{background: url(../images/ico-tuo2.png) no-repeat top center;}
.hostingtuoguan-title h3{font-size: 2.5rem;}
.hostingtuoguan-title p{ font-size: 1.25rem;}
.hostingtuoguan-item h3{ font-size: 1.25rem; font-weight: 300; color: var(--golden-color);}
.hostingadvantage-line{background: url(../images/tl_s.jpg) no-repeat center bottom; height: 2rem;}
.hostingadvantage-txt ul li{border-bottom: 1px dashed #ccc; overflow: hidden; line-height: 2.5rem;}
.hostingadvantage-txt ul li b{ width: 2.5rem; font-size: 1.25rem; color: var(--golden-color); float: left;}
.hostingadvantage-txt ul li p{ width: calc(100% - 2.5rem); float:right;}

.website-contact{background: var(--golden-color);}
.website-contact::before{content: ""; display: block; position: absolute; top: -1.5rem; left: 50%;width: 3rem; height: 3rem; margin-left: -1.5rem; border-radius: 50%; background-color: var(--white);}
.website-contact .title{font-size: 1rem;}
.website-contact .line{width: 100%;height: 3rem; background: url(../images/call_pic.png) no-repeat center;}
.website-contact .txt{font-size: 2.25rem;}
/* Contact Section*/
.contact-form {background:var(--white);border-radius:15px;padding:40px;box-shadow:0 5px 20px rgba(var(--black-rgb),0.08);transition:all 0.3s ease;}
.contact-form:hover {box-shadow:0 10px 30px rgba(var(--black-rgb),0.1);}
.formtable .form-control {border-radius:10px;padding:12px;border:2px solid #eee;transition:all 0.3s ease;}
.formtable .form-control:focus {border-color:var(--primary-color);box-shadow:0 0 0 0.2rem rgba(var(--primary-color-rgb),0.25);}
.contact .map-container {border-radius:15px;overflow:hidden;height:100%;min-height:400px;background:var(--light-color);display:flex;justify-content:center;align-items:center;box-shadow:0 5px 20px rgba(var(--black-rgb),0.08);transition:all 0.3s ease;}
.contact .map-container:hover {box-shadow:0 10px 30px rgba(var(--black-rgb),0.1);}
.contact .map-container .map-txt i{color:var(--primary-color);}

.sitemap-box ul li{box-shadow: 0 0 10px rgba(55, 55, 55, 0.1); margin-bottom: 1.5rem;}
.sitemap-box ul li a{ color: var(--white);background-color: var(--primary-color);display: block; line-height: 3rem; padding: 0.5rem 1.5rem; font-weight: 600;}
.sitemap-box ul li ul li{box-shadow:none;margin-bottom:0; padding: 0 1rem;}
.sitemap-box ul li ul li a{ background: none;color: var(--defaultcolor); padding: 0.5rem 0.5rem;font-weight: 100;}

/* Footer*/
footer {background:var(--dark-color);color:var(--white);position:relative;overflow:hidden;}
footer a{color:var(--white);}
.friendlink{border-top: 1px solid #444343;}
.footer-bottom {border-top:1px solid rgba(var(--white-rgb),0.1);}
/* Animations*/
@keyframes fadeInUp {from {opacity:0;transform:translateY(30px);}
to {opacity:1;transform:translateY(0);}
;}
@keyframes pulse {0% {transform:scale(1);}
50% {transform:scale(1.05);}
100% {transform:scale(1);}
;}
.pulse {animation:pulse 2s infinite;}
/* Floating Elements*/
.floating-elements {position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;z-index:0;}
.floating-element {position:absolute;background:rgba(var(--white-rgb),0.1);border-radius:50%;animation:float 6s ease-in-out infinite;}
@keyframes float {0% {transform:translateY(0) rotate(0deg);}
50% {transform:translateY(-20px) rotate(180deg);}
100% {transform:translateY(0) rotate(360deg);}
;}

.summary-card {background-color:var(--light-color);border-radius:10px;padding:25px;margin-bottom:30px;box-shadow:0 5px 15px rgba(var(--black-rgb),0.05);}
.summary-title {font-weight:700;margin-bottom:15px;color:var(--secondary-color);border-bottom:1px solid var(--grey);padding-bottom:10px;}
.summary-item {display:flex;justify-content:space-between;margin-bottom:10px;}
.summary-total {font-weight:700;font-size:1.3rem;color:var(--primary-color);border-top:1px solid var(--grey);padding-top:10px;margin-top:15px;}
.time-slot {display:inline-block;padding:10px 15px;background-color:var(--light-color);border-radius:8px;margin:5px;cursor:pointer;transition:all 0.3s ease;border:1px solid var(--grey);}
.time-slot:hover {background-color:var(--grey);}
.time-slot.selected {background-color:var(--primary-color);color:var(--white);border-color:var(--primary-color);}

.booking-form-container {background-color:var(--white);border-radius:15px;box-shadow:0 10px 30px rgba(var(--black-rgb),0.1);padding:40px;margin-top:-80px;position:relative;z-index:10;}

.page-title {font-size:1.5rem;text-align:center;color:var(--dark-color);}
.page-title::after {content:'';position:absolute;width:80px;height:4px;background:var(--gradient);bottom:-10px;left:50%;transform:translateX(-50%);border-radius:2px;}
.page-subtitle {color:var(--grey-txt);font-size:1rem;}

/* Sidebar*/
.position-sidebar{border-bottom: 1px solid #eee;}
.left-sidebar{position:-webkit-sticky;position: sticky; top: 5rem; }
.sidebar-widget {background:var(--white);border-radius:15px;box-shadow:0 5px 20px rgba(var(--black-rgb),0.08);}
.widget-title {font-size:1.5rem;font-weight:bold;color:var(--dark-color);position:relative;}
.widget-title::after {content:'';position:absolute;bottom:0;left:0;width:50px;height:3px;background:var(--gradient);border-radius:2px;}
.widget-title i{ font-size: 1.5rem;}

/* Search Widget*/
.search-form {position:relative;}
.search-form input {width:100%;padding:12px 50px 12px 15px;border:2px solid var(--grey);border-radius:50px;outline:none;transition:all 0.3s ease;}
.search-form input:focus {border-color:var(--primary-color);}
.search-form button {position:absolute;right:5px;top:5px;background:var(--gradient);color:var(--white);border:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;}
.search-form button:hover {background:var(--primary-color);transform:scale(1.05);}

/* Categories Widget*/
.categories-list {list-style:none;padding:0;margin:0;}
.categories-list li a {color:var(--dark-color);text-decoration:none;display:flex;justify-content:space-between;align-items:center;transition:all 0.3s ease;background: #e2e2e2; line-height: 2.125rem; margin-left: 1rem; padding: 0 1rem;}
.categories-list li.active a,.categories-list a:hover {color:var(--white); background-color: var(--defaultcolor);}
.categories-list li span {display: none;}

/* Recent Posts Widget*/
.recent-post {display:flex;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid var(--grey);}
.recent-post:last-child {margin-bottom:0;padding-bottom:0;border-bottom:none;}
.recent-post-img {width:70px;height:70px;border-radius:10px;overflow:hidden;margin-right:15px;flex-shrink:0;}
.recent-post-img img {width:100%;height:100%;object-fit:cover;}
.recent-post-content h4 {font-size:0.95rem;font-weight:600;margin-bottom:5px;line-height:1.4;}
.recent-post-content h4 a {color:var(--dark-color);text-decoration:none;transition:all 0.3s ease;}
.recent-post-content h4 a:hover {color:var(--primary-color);}
.recent-post-content span {font-size:0.8rem;color:var(--grey-txt);}

.ranking-post i{ background: var(--yellow-color); font-style: normal; width: 1.5rem; color: var(--white); font-size: 0.75rem;}

/* Tags Widget*/
.tags-list {display:flex;flex-wrap:wrap;gap:10px;}
.tags-list a {background:var(--light-color);color:var(--dark-color);padding:5px 12px;border-radius:20px;font-size:0.85rem;text-decoration:none;transition:all 0.3s ease;}
.tags-list a:hover {background:var(--gradient);color:var(--white);}

/* newsletter-form*/
.newsletter-form {display:flex;margin-top:15px;}
.newsletter-form input {flex:1;border:1px solid var(--primary-color);padding:10px 15px;border-radius:5px 0 0 5px;outline:none;width:100%;}
.newsletter-form button {background:var(--primary-color);color:var(--white);border:none;padding:10px 15px;border-radius:0 5px 5px 0;cursor:pointer;transition:background 0.3s ease;}
.newsletter-form button:hover {background:var(--secondary-color);}
.newsletter-form .btn-custom:hover{transform:translateY(0);}

.extfield-list .extfield-item span:after{content:":"; padding:0 0.5rem;}
.extfield-list .extfield-item a{ line-height:2rem; padding:0.25rem 1.5rem; display:inline-block; border-radius:0.25rem;}
.extfield-list .extfield-item a.active{background:var(--primary-color); color:var(--white);}

/* Blog Posts*/
.blog-card {background:var(--white);border-radius:15px;overflow:hidden;box-shadow:0 5px 20px rgba(var(--black-rgb),0.08);transition:all 0.3s ease;border:1px solid var(--white);}
.blog-card:hover {border-color:rgba(var(--grey-txt-rgb),0.3);}
.blog-item{ overflow: hidden;}
.blog-card-date h3{ font-size: 2.5rem;}
.blog-card-date p{font-size: 1rem;}
.blog-card-content::after{content: '';position:absolute;top:0;left:15%;width:1px;height:100%;background:var(--grey);}
.blog-card-meta {display:flex;align-items:center;font-size:0.9rem;color:var(--grey-txt);}
.blog-card-meta span {margin-right:1rem;display:flex;align-items:center;}
.blog-card-meta i {margin-right:5px;color:var(--primary-color);}
.blog-card-title {font-size:1rem;color:var(--dark-color);line-height:1.4;}
.blog-card-excerpt {color:var(--grey-txt);line-height:1.6;}
.blog-card-category span{ color: var(--primary-color);}

.project-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top, rgba(var(--primary-color-rgb),0.8), transparent);display:flex;align-items:flex-end;opacity:0;transition:opacity 0.3s}
.blog-pic:hover .project-overlay {opacity: 1;}

.job-card {background:var(--white);border-radius:15px;box-shadow:0 5px 20px rgba(var(--black-rgb),0.08);transition:all 0.3s ease;height:100%;transform:translateY(0px);position:relative;overflow:hidden;}
.job-card:hover {transform:translateY(-10px);box-shadow:0 15px 40px rgba(var(--primary-color-rgb),0.2);}
.job-item{ overflow: hidden;}
.job-card-content {padding:25px;}
.job-card-meta {display:flex;align-items:center;font-size:0.9rem;color:var(--grey-txt);}
.job-card-meta span {margin-right:1rem;display:flex;align-items:center;}
.job-card-meta i {margin-right:5px;color:var(--primary-color);}
.job-card-title {font-size:1.5rem;font-weight:bold;color:var(--dark-color);line-height:1.4;}
.job-card-excerpt {color:var(--grey-txt);line-height:1.6;}
.job-card-category span{background:var(--gradient);color:var(--white);border-radius:20px;font-size:0.8rem;font-weight:600;}

/* detail Content*/
.detail-title {font-size:1.5rem;font-weight:bold;color:var(--dark-color);line-height:1.4;}
.detail-meta {font-size:1rem;color:var(--grey-txt);}
.detail-meta span {margin-right:20px;display:flex;align-items:center;margin-bottom:10px;}
.detail-meta i {margin-right:8px;color:var(--primary-color);}
/* Blog Content*/
.blog-category {display:inline-block;background:var(--gradient);color:var(--white);padding:6px 15px;border-radius:20px;font-size:0.9rem;font-weight:600;margin-bottom:10px;}
.blog-detail-image {border-radius:15px;overflow:hidden;box-shadow:0 10px 30px rgba(var(--black-rgb),0.1);}
.blog-detail-image img {width:100%;height:auto;display:block;}
.blog-body{line-height:1.8;}
.info-box {background:var(--light-color);border-radius:10px;padding:25px;margin:30px 0;border-left:4px solid var(--primary-color);}
.info-box h4 {font-size:1.2rem;font-weight:bold;margin-bottom:10px;color:var(--dark-color);display:flex;align-items:center;}
.info-box h4 i {margin-right:10px;color:var(--primary-color);}

/* Author Section*/
.author-section {background:var(--white);border-radius:15px;padding:30px;margin:50px 0;box-shadow:0 5px 20px rgba(var(--black-rgb),0.08);display:flex;align-items:center;}
.author-avatar {width:100px;height:100px;border-radius:50%;overflow:hidden;margin-right:25px;flex-shrink:0;}
.author-avatar img {width:100%;height:100%;object-fit:cover;}
.author-info h3 {font-size:1.5rem;font-weight:bold;margin-bottom:5px;color:var(--dark-color);}
.author-info .author-title {color:var(--primary-color);font-weight:600;margin-bottom:10px;}
.author-info p {margin-bottom:0;color:var(--grey-txt);}

/* Share Section*/
.share-section {border-top:1px solid var(--grey);border-bottom:1px solid var(--grey)e;}
.share-label {font-weight:600;margin-right:15px;color:var(--dark-color);}
.share-buttons {display:flex;gap:10px;}
.share-btn {display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--white);transition:all 0.3s ease;}
.share-btn.facebook {background:#3b5998;}
.share-btn.twitter {background:#1da1f2;}
.share-btn.linkedin {background:#0077b5;}
.share-btn.pinterest {background:#bd081c;}
.share-btn:hover {transform:translateY(-3px);box-shadow:0 5px 15px rgba(var(--black-rgb),0.2);}

/* Comments Section*/
.comments-section h3 {font-size:1.6rem;font-weight:bold;color:var(--dark-color);position:relative;}
.comments-section h3::after {content:'';position:absolute;bottom:0;left:0;width:4rem;height:3px;background:var(--gradient);border-radius:2px;}
.comment {display:flex;border-bottom:1px solid var(--grey);}
.comment:last-child {border-bottom:none;}
.comment-avatar {width:4rem;height:4rem;border-radius:50%;overflow:hidden;margin-right:1.5rem;flex-shrink:0;}
.comment-avatar img {width:100%;height:100%;object-fit:cover;}
.comment-content h4 {font-size:1.1rem;font-weight:bold;color:var(--dark-color);}
.comment-meta {font-size:0.9rem;color:var(--grey-txt);}
.comment-content p {margin-bottom:0;color:var(--grey-txt);}
.comment-box {background:var(--white);border-radius:15px;box-shadow:0 5px 20px rgba(var(--black-rgb),0.08);margin-top:40px;}
.comment-title {font-size:1.5rem;font-weight:bold;color:var(--dark-color);}
.comment-box .form-control {border-radius:10px;padding:12px;border:2px solid var(--grey);transition:all 0.3s ease;}
.comment-box .form-control:focus {border-color:var(--primary-color);box-shadow:0 0 0 0.2rem rgba(var(--primary-color-rgb),0.25);}

/* product*/
.jqueryzoom {border:1px solid var(--grey-txt); }
img.cloudzoom-gallery{cursor:pointer;}
img.cloudzoom-gallery-active{opacity: .5}
.cloudzoom-lens{border:3px solid var(--grey-txt);width: 180px !important;height:180px !important;box-shadow:-0px -0px 10px rgba(var(--black-rgb), 0.40);cursor:crosshair;background:var(--white);z-index:10}
.cloudzoom-zoom{border:1px solid var(--grey-txt);width:500px;height:200px;box-shadow:-0px -0px 10px rgba(var(--black-rgb), 0.40)}
.cloudzoom-zoom-inside{border:none;box-shadow:none}
.cloudzoom-caption{display:none;text-align:left;background-color:var(--black);color:var(--white);font-weight:bold;padding:10px;}
.cloudzoom-blank{background-image:url(../images/blank.png)}
.cloudzoom-ajax-loader{background-image:url(../images/ajax-loader.gif);width:32px;height:32px}
.myimglist.swiper{position:static}
.myimglist .swiper-button-next,.myimglist .swiper-button-prev{color:var(--defaultcolor);}
.myimglist .swiper-button-next{right:-1.5rem;}
.myimglist .swiper-button-prev{left:-1.5rem;}
.myimglist .swiper-button-next:after,.myimglist .swiper-button-prev:after{font-size:1rem;width:0.5rem}

.producttitle,.productcolor{border-bottom: 1px solid var(--grey);}
.productcolor .title{ font-size: 1.125rem;}
.producttitle .modelno{ font-size: 1.875rem; line-height: 120%;}
.producttitle .title{ font-size: 1.875rem; line-height: 120%;}
.producttitle .subtitle{ font-size: 1.875rem; line-height: 120%;}
.product-color a{ width: 1.5rem; height: 1.5rem; margin: 4px; padding: 2px;border: 1px dashed var(--white); background: var(--white);}
.product-color a.active{border-color: var(--defaultcolor);}
.product-color a span{ display: block; width: 100%; height: 100%; padding: 0.125rem;}
.product-attr a{ border: 1px solid var(--grey-txt); color: var(--grey-txt);}
.product-attr a.active{border: 1px dashed var(--defaultcolor); color: var(--defaultcolor); }
.detail-tabs-title{ border-bottom: 1px solid var(--grey);}
.detail-tabs-title a{line-height: 3rem; text-decoration: none;color: var(--black); font-size: 1rem; font-weight: 600; background-color:var(--grey) ;border-radius: 0.5rem 0.5rem 0 0;}
.detail-tabs-title a.active{ background-color:var(--primary-color); color: var(--white);}
/* Related Posts*/
.related-posts h3 {font-size:1.5rem;font-weight:bold;color:var(--dark-color);position:relative;}
.related-posts h3::after {content:'';position:absolute;bottom:0;left:0;width:4rem;height:3px;background:var(--gradient);border-radius:2px;}
.related-list .swiper{position:static;}
.related-list .swiper .swiper-button-next,.related-list .swiper .swiper-button-prev {background:none;border-radius:50%;width:2rem;height:2rem;transition:all 0.3s ease; color:var(--primary-color); right:-2rem; z-index: 99; margin-top:1rem;}
.related-list .swiper .swiper-button-prev{right:auto; left:-2rem;}
.related-list .swiper .swiper-button-next:after,.related-list .swiper .swiper-button-prev:after{ padding:0.5rem; font-size:1.5rem;}
.related-list .swiper .swiper-pagination{bottom:-1rem;}

/* faqs*/
.search-box{max-width:600px;margin:0 auto 50px}
.search-box .form-control{border-radius:50px;padding:15px 25px;border:2px solid var(--light-color);box-shadow:0 5px 15px rgba(var(--black-rgb),0.05)}
.search-box .form-control:focus{border-color:var(--primary-color);box-shadow:0 5px 15px rgba(var(--primary-color-rgb),0.1)}
.contact-prompt{background:var(--light-color);border-radius:15px;}
.faq-title {color: var(--primary-color);border-bottom: 2px solid var(--light-color);}
.quick-links {gap: 15px;}
.quick-link {background: white;border: 2px solid var(--light-color);border-radius: 50px;font-weight: 600;color: var(--dark-color);text-decoration: none;transition: all 0.3s ease;}
.quick-link:hover {border-color: var(--primary-color);color: var(--primary-color);transform: translateY(-3px);}
.accordion-body{padding:20px;background-color:var(--light-color);border-radius:0 0 10px 10px}
.accordion-button{font-weight:600;padding:20px;border:none;background-color:white;box-shadow:0 2px 10px rgba(var(--black-rgb),0.05);margin-bottom:10px;border-radius:10px !important}
.accordion-button:not(.collapsed){background-color:var(--primary-color);color:white;box-shadow:0 5px 15px rgba(var(--black-rgb),0.1)}
.accordion-button:focus{box-shadow:0 0 0 0.25rem rgba(var(--primary-color-rgb),0.25)}

/* substation*/
.substation .title{position:relative;height:2rem;padding:0;margin:1rem 0;text-align:left;font:bold 22px/42px "Microsoft yahei";color:var(--lightWords)}
.substation .title a{position:absolute;right:10px;top:0;height:36px;width:100px;text-align:center;display:block;background: var(--huangse);color: var(--white);line-height:36px;font-size:14px;font-weight:700}
.substation .title a:hover{text-decoration:none;background:var(--huanse);color:var(--white)}
.substation .substationlist{border:1px solid var(--cprimary);padding:15px;margin:15px 0}
.substation .substationlist dl{padding:10px 0;line-height:24px;overflow:hidden;border-bottom:1px dashed var(--cprimary)}
.substation .substationlist dl dt{float:left;font-family:arial;font-weight:700;font-size:18px;width:35px;padding-left:25px;color:var(--lightWords);display:table-cell}
.substation .substationlist dl dd{margin:0 0 0 55px;padding-left:15px;border-left:1px dashed  var(--qianhuise)}
.substation .substationlist dl dd a{padding:1px 12px 1px 12px;white-space:nowrap;float:left;display:block;line-height:30px}
.substation .substationlist dl dd a:hover{text-decoration:none;background:var(--huangse);color:var(--white)}
.substation .substationfooter{text-align:center;border-top:2px solid var(--huangse);padding-top:10px}
.substation .substationfooter .substationfootermenu ul li{display:inline-block;line-height:30px}
.substation .substationfooter .substationfootermenu ul li a{display:block;padding:0 15px}
.substation .substationfooter .copyright{text-align:center;padding:10px 0}
.hotsubstation span::after{content:":"}

/*sitemaplist*/
.sitemaplist ul{display:block}
.sitemaplist ul:after{clear:both;content:"";display:table}
.sitemaplist ul li{padding-left:0.75rem}
.sitemaplist ul li a{line-height:2.25rem;padding:0 1rem;color:var(--black);font-weight:600;font-size:1.5rem}
.sitemaplist ul li a:hover{text-decoration:underline;padding:0 0.25rem 0 1.5rem;color:var(--aprimary)}
.sitemaplist ul li ul li{float:left}
.sitemaplist ul li ul li.xj{float:none;width:100%;overflow:hidden}
.sitemaplist ul li ul li a{font-weight:400;font-size:1rem}

/*compare*/
.comparesModel,.showCompareItemsModel{ display: none;transition:all .5s;}
.comparesModel.active,.showCompareItemsModel.active{display: block;}
.comparesModel{ background: var(--companrebg);}
.comparelist-item{ background-color: var(--white); border-radius: 0.5rem;}
.comparelist-menu ul li a{ background-color: var(--black); line-height: 2rem; color: var(--white);}
.comparelist-menu ul li a i{ color: var(--huangse);}
.comparesModel .close{ color: var(--white); font-size: 1rem;}
.comparesModel .singleclose{color: var(--huangse); font-size: 0.875rem;}
.showCompareItemsModel-item{ z-index: 10000; background-color: var(--companrebgtm);}
.showCompareItemsModel-bg{ background-color: var(--white); border-radius: 0.5rem;}
/*cart*/
.cartlist .cartlistli{ border-bottom: 1px dashed var(--huise);}
.cartlist .cartlistli .cartlist-item .title a{ font-size: 1.125rem; line-height: 2rem; color: var(--black);}
.cartlist .cartlistli .cartlist-item .title a:hover{ color: var(--lanse);}
.cartlist .cartlistli .cartlist-item .subtitle{ line-height: 120%;}
.cartlist .cartlistli .cartlist-item .price{ color: var(--huangse);}
.cartlist .cartlistli .cartlist-item .count a{ background: none; font-weight: 600; border: none; font-size: 1.5rem;}
.cartlist .cartlistli .cartlist-item .count input{ border: none; border-bottom: 1px solid var(--huise); background: none; width: 3rem;}
.cartlist .cartlistli .cartlist-item .cartclose{font-size: 1.25rem; color: var(--huangse);}
.cartlist .total{ font-size: 1rem;}
.cartlist .total span:after{content: ":"; display: inline-block;}
.cartlist .total input{ border: none; background: none;width:auto;min-width:3rem;box-sizing: border-box;flex: 1;}
.noproduct{ font-size: 1.5rem; line-height: 150%;}

.pagination li{ margin: 0 0.25rem;}

/*map*/
#map_canvas img,.google-maps img{max-width:none!important;}
#map_canvas label,.google-maps label{max-width:none!important}
#map_canvas .map {min-height: 500px;z-index: 1;height: 100%;}
#map_canvas .custom-info{ min-width: 15rem; border: 1px solid #CCC;}
#map_canvas .BMap_bubble_title{position: relative; margin-bottom: 0.5rem;}
#map_canvas .BMap_bubble_title::after{content:" "; display: block; position: absolute;bottom:0;left:-1rem; right:-1rem;width: calc(100% + 2rem);height: 1px; background: #ccc;}

div.info-top {position: relative;background: none repeat scroll 0 0 #F9F9F9;border-bottom: 1px solid #CCC;border-radius: 5px 5px 0 0;}
div.info-top div {display: inline-block;color: #333333;font-size: 14px;font-weight: bold;line-height: 31px;padding: 0 10px;}
div.info-top img {position: absolute;top: 10px;right: 10px;transition-duration: 0.25s;}
div.info-top img:hover {box-shadow: 0px 0px 5px #000;}
div.info-middle {font-size: 12px;padding: 10px 6px;line-height: 20px;}
div.info-bottom {height: 0px;width: 100%; clear: both; text-align: center;}
div.info-bottom img { position: relative; z-index: 104;}
div.info-middle img {float: left; margin-right: 6px;}

.comparesModel,.showCompareItemsModel{ display: none;transition:all .5s; }
.comparesModel.active,.showCompareItemsModel.active{display: block;}
.comparesModel{ background: rgba(var(--black-rgb),0.8);}
.comparelist-item{ background-color: var(--white); border-radius: 0.5rem;}
.comparelist-menu ul li a{ background-color: var(--black); line-height: 2rem; color: var(--white);}
.comparelist-menu ul li a i{ color: var(--hongse);}
.comparesModel .close{ color: var(--white); font-size: 1rem;}
.comparesModel .singleclose{color: var(--hongse); font-size: 0.875rem;}
.showCompareItemsModel-item{ z-index: 10000; background: rgba(var(--black-rgb),0.8);}
.showCompareItemsModel-bg{ background-color: var(--white); border-radius: 0.5rem;}
.compareItemslist-item ul li{ padding:0.5rem;border-top:1px solid var(--qianhuise); }
.compareItemslist-item .compareItemslist-item-li{ height:6rem; line-height:1.5rem;text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;}
.compareItemslist-item ul li:first-child .compareItemslist-item-li{border-top:none;}

#output canvas{ display:block!important;}
.outputp{ height:1rem; line-height:1rem; font-size:0.75rem; color: var(--black); text-align:center;}

@media (max-width:991px){
    .blog-content{overflow-x: hidden;}
    #preloader{display: none!important;}
    .custom-cursor__cursor,.custom-cursor__cursor-two{display: none!important;}
    .navbar-brand{ max-width: 50%;}
    .nav-link{ line-height: 2.5rem; display: flex ; align-items: center; justify-content:space-between; margin: 0 0;}
    .navbar .dropdown ul.dropdown-menu,.navbar .dropdown .dropdown ul.dropdown-menu {position: relative;visibility: visible;}
    #bannerflash .carousel-control-next-icon,#bannerflash .carousel-control-prev-icon{font-size:0.75rem;width:1.5rem;height:1.5rem;}
    #bannerflash .txt .title{font-size: 1.5rem; line-height: 2rem;}
    #bannerflash .txt .desc{font-size: 1rem;}
    .hero h1{font-size: 1.25rem;}
    .hero-txt{height:300px;}
    .testimonials .swiper{position:relative;}
    .testimonials .swiper .swiper-button-next, .testimonials .swiper .swiper-button-prev{display:none;}
    .categories-list{ display: none;}
    .categories-list.show{ display: block;}
    .pagination li:first-child,form.jumpto {display: none!important;}
}