/*

  Template Name: Furnish - Minimalist Furniture Template

  Description: Minimalist Furniture Template

  Author: Hastech

  Version: 1.0



*/

/*================================================

[  Table of contents  ]

================================================

  01. General

  02. Header Section

  03. Home Slider Section

  04. Banner Section

  05. Product Section

      5.1 Grid Product

      5.2 List Product

      5.3 SIngle Product Details

  06. Testimonial Section

  07. Blog Section

  08. Service Section

  09. Footer Section

  10. Shope Page

  11. Cart Page

  12. Wishlist Page

  13. Checkout Page

  14. Contact Page

  15. Login & Register Page

  16. Comment Style



======================================

[ End table content ]

======================================*/



/*************************

  1.General

*************************/





body {

  background: #fff;

  font-family: 'Roboto', sans-serif;

  font-weight: 400;

  font-style: normal;

  font-size: 16px;

  line-height: 26px;

}

:root {

  font-size: 16px; /* ��׼ֵ */

}

@media (max-width: 768px) {

  :root { font-size: 14px; }

}

@media (max-width: 480px) {

  :root { font-size: 12px; }

}

img{

  max-width: 100%;

  -webkit-transition: all 0.3s ease-out 0s;

  transition: all 0.3s ease-out 0s;

}

*::before,

*::after,

a,

button,

span,

input,

textarea,

.btn {

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}

.btn {

  border-radius: 0px;

  font-size: 14px;

  padding: 0px 15px;

  height: 30px;

  line-height: 30px;

}

a:focus,

.btn:focus {

  text-decoration: none;

  outline: none;

}

a:focus,

a:hover {

  color: #3c78ff;

  text-decoration: none;

}

a,

button,

input {

  outline: medium none;

  color: #666666;

}

.uppercase { 

  text-transform: uppercase

}

.capitalize { 

  text-transform: capitalize

}

h1,

h2,

h3,

h4,

h5,

h6 {

  color: #282828;

  margin-top: 0px;

  font-style: normal;

  font-weight: 400;

}

h1 a,

h2 a,

h3 a,

h4 a,

h5 a,

h6 a { 

  color: inherit 

}

ul {

  margin: 0px;

  padding: 0px;

}

li { 

  list-style: none; 

}

p {

  font-size: 16px;

  font-weight: 400;

  line-height: 26px;

  color: #999999;

  margin-bottom: 15px;

}

input:focus, textarea:focus {

    box-shadow: 0;

    outline: 0;

}

/*-- Placeholder Opacity --*/

::-webkit-input-placeholder {

    opacity: 1 !important;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

}

:-moz-placeholder {

    opacity: 1 !important;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

}

::-moz-placeholder {

    opacity: 1 !important;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

}

:-ms-input-placeholder {

    opacity: 1 !important;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

}



/*-- Common Classes --*/

.fix {

    overflow:hidden

}

.float-left {

    float:left;

}

.float-right {

    float:right;

}



.tlt * {

  -webkit-transition: none 0s ease 0s ;

  transition: none 0s ease 0s ;

}

.white{color:#fff;}



/*-- Margin Top --*/

.mt-5 {

    margin-top: 5px;

}

.mt-10 {

    margin-top: 10px;

}

.mt-15 {

    margin-top: 15px;

}

.mt-20 {

    margin-top: 20px;

}

.mt-25 {

    margin-top: 25px;

}

.mt-30 {

    margin-top: 30px;

}

.mt-35 {

    margin-top: 35px;

}

.mt-40 {

    margin-top: 40px;

}

.mt-45 {

    margin-top: 45px;

}

.mt-50 {

    margin-top: 50px;

}

.mt-55 {

    margin-top: 55px;

}

.mt-60 {

    margin-top: 60px;

}

.mt-65 {

    margin-top: 65px;

}

.mt-70 {

    margin-top: 70px;

}

.mt-75 {

    margin-top: 75px;

}

.mt-80 {

    margin-top: 80px;

}

.mt-85 {

    margin-top: 85px;

}

.mt-90 {

    margin-top: 90px;

}

.mt-95 {

    margin-top: 95px;

}

.mt-100 {

    margin-top: 100px;

}

.mt-105 {

    margin-top: 105px;

}

.mt-110 {

    margin-top: 110px;

}

.mt-115 {

    margin-top: 115px;

}

.mt-120 {

    margin-top: 120px;

}

.mt-125 {

    margin-top: 125px;

}

.mt-130 {

    margin-top: 130px;

}

.mt-135 {

    margin-top: 135px;

}

.mt-140 {

    margin-top: 140px;

}

.mt-145 {

    margin-top: 145px;

}

.mt-150 {

    margin-top: 150px;

}



/*-- Margin Bottom --*/

.mb-5 {

    margin-bottom: 5px;

}

.mb-10 {

    margin-bottom: 10px;

}

.mb-15 {

    margin-bottom: 15px;

}

.mb-20 {

    margin-bottom: 20px;

}

.mb-25 {

    margin-bottom: 25px;

}

.mb-30 {

    margin-bottom: 30px;

}

.mb-35 {

    margin-bottom: 35px;

}

.mb-40 {

    margin-bottom: 40px;

}

.mb-45 {

    margin-bottom: 45px;

}

.mb-50 {

    margin-bottom: 50px;

}

.mb-55 {

    margin-bottom: 55px;

}

.mb-60 {

    margin-bottom: 60px;

}

.mb-65 {

    margin-bottom: 65px;

}

.mb-70 {

    margin-bottom: 70px;

}

.mb-75 {

    margin-bottom: 75px;

}

.mb-80 {

    margin-bottom: 80px;

}

.mb-85 {

    margin-bottom: 85px;

}

.mb-90 {

    margin-bottom: 90px;

}

.mb-95 {

    margin-bottom: 95px;

}

.mb-100 {

    margin-bottom: 100px;

}

.mb-105 {

    margin-bottom: 105px;

}

.mb-110 {

    margin-bottom: 110px;

}

.mb-115 {

    margin-bottom: 115px;

}

.mb-120 {

    margin-bottom: 120px;

}

.mb-125 {

    margin-bottom: 125px;

}

.mb-130 {

    margin-bottom: 130px;

}

.mb-135 {

    margin-bottom: 135px;

}

.mb-140 {

    margin-bottom: 140px;

}

.mb-145 {

    margin-bottom: 145px;

}

.mb-150 {

    margin-bottom: 150px;

}



/*-- Padding Top --*/

.pt-5 {

    padding-top: 5px;

}

.pt-10 {

    padding-top: 10px;

}

.pt-15 {

    padding-top: 15px;

}

.pt-20 {

    padding-top: 20px;

}

.pt-25 {

    padding-top: 25px;

}

.pt-30 {

    padding-top: 30px;

}

.pt-35 {

    padding-top: 35px;

}

.pt-40 {

    padding-top: 40px;

}

.pt-45 {

    padding-top: 45px;

}

.pt-50 {

    padding-top: 50px;

}

.pt-55 {

    padding-top: 55px;

}

.pt-60 {

    padding-top: 60px;

}

.pt-65 {

    padding-top: 65px;

}

.pt-70 {

    padding-top: 70px;

}

.pt-75 {

    padding-top: 75px;

}

.pt-80 {

    padding-top: 80px;

}

.pt-85 {

    padding-top: 85px;

}

.pt-90 {

    padding-top: 90px;

}

.pt-95 {

    padding-top: 95px;

}

.pt-100 {

    padding-top: 100px;

}

.pt-105 {

    padding-top: 105px;

}

.pt-110 {

    padding-top: 110px;

}

.pt-115 {

    padding-top: 115px;

}

.pt-120 {

    padding-top: 120px;

}

.pt-125 {

    padding-top: 125px;

}

.pt-130 {

    padding-top: 130px;

}

.pt-135 {

    padding-top: 135px;

}

.pt-140 {

    padding-top: 140px;

}

.pt-145 {

    padding-top: 145px;

}

.pt-150 {

    padding-top: 150px;

}



/*-- Padding Bottom --*/

.pb-5 {

    padding-bottom: 5px;

}

.pb-10 {

    padding-bottom: 10px;

}

.pb-15 {

    padding-bottom: 15px;

}

.pb-20 {

    padding-bottom: 20px;

}

.pb-25 {

    padding-bottom: 25px;

}

.pb-30 {

    padding-bottom: 30px;

}

.pb-35 {

    padding-bottom: 35px;

}

.pb-40 {

    padding-bottom: 40px;

}

.pb-45 {

    padding-bottom: 45px;

}

.pb-50 {

    padding-bottom: 50px;

}

.pb-55 {

    padding-bottom: 55px;

}

.pb-60 {

    padding-bottom: 60px;

}

.pb-65 {

    padding-bottom: 65px;

}

.pb-70 {

    padding-bottom: 70px;

}

.pb-75 {

    padding-bottom: 75px;

}

.pb-80 {

    padding-bottom: 80px;

}

.pb-85 {

    padding-bottom: 85px;

}

.pb-90 {

    padding-bottom: 90px;

}

.pb-95 {

    padding-bottom: 95px;

}

.pb-100 {

    padding-bottom: 100px;

}

.pb-105 {

    padding-bottom: 105px;

}

.pb-110 {

    padding-bottom: 110px;

}

.pb-115 {

    padding-bottom: 115px;

}

.pb-120 {

    padding-bottom: 120px;

}

.pb-125 {

    padding-bottom: 125px;

}

.pb-130 {

    padding-bottom: 130px;

}

.pb-135 {

    padding-bottom: 135px;

}

.pb-140 {

    padding-bottom: 140px;

}

.pb-145 {

    padding-bottom: 145px;

}

.pb-150 {

    padding-bottom: 150px;

}

.greybg{background:#f8f8f8;}

.blackbg{background:#000;}

.darkgrey{color:#666;}



/*-- Collapse Panel --*/





.panel-group {}

.panel-group .panel {

  border: 1px solid #ddd;

  border-radius: 0;

  box-shadow: none;

}

.panel-group .panel + .panel {

  margin-top: 15px;

}

.panel-group .panel .panel-heading {

  background-color: transparent;

  padding: 0;

}

.panel-group .panel .panel-heading .panel-title {}

.panel-group .panel .panel-heading .panel-title a {

  display: block;

  padding: 11px 15px;

}

.panel-group .panel .panel-heading .panel-title a.collapsed {}

.panel-group .panel .panel-collapse {}

.panel-group .panel .panel-collapse .panel-body {}

.panel-group .panel .panel-collapse .panel-body p {}

/*-- Section --*/

.section {

    float: left;

    width: 100%;

}

.no-border {

  border: medium none !important;

}

/*-- Overlay --*/

.overlay {

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

  z-index: 1;

}

.overlay::before {

  background-color: #000;

  content: "";

  height: 100%;

  left: 0;

  opacity: 0.6;

  position: absolute;

  top: 0;

  width: 100%;

}

/*-- Scroll Up --*/

#scrollUp {

  background-color: transparent;

  border: 2px solid #3c78ff;

  border-radius: 50%;

  bottom: 28px;

  color: #3c78ff;

  height: 40px;

  position: fixed;

  right: 30px;

  text-align: center;

  width: 40px;

}

#scrollUp i {

  display: block;

  font-size: 24px;

  line-height: 35px;

}

#scrollUp:hover {

  background-color: #3c78ff;

  color: #fff;

}

/*-- Section Title --*/

.section-title {}

.section-title h4 {

  color: #666;

  font-size: 16px;

  margin-bottom: 15px;

  text-transform: uppercase;

}

.section-title h2 {

 font-size: clamp(24px, 4.7vw, 48px); 

  padding-bottom:1rem;

  margin: 0;

  font-weight:500;

  text-transform: uppercase;

}

.section-title-case h2{ font-size: 36px; }

.section-title p {

 font-size: 20px; 

  line-height:2rem;

  margin-bottom: 20px;

    color: #666;

  text-transform: uppercase;

}

.section-title-about h2 {

 font-size: clamp(24px, 4.7vw, 48px); 

  padding-bottom:1rem;

  margin: 0;

  font-weight:500;

  text-transform: uppercase;

}

.section-title-about p {

 font-size: 20px; 

  line-height:2rem;

  margin-bottom: 20px;

    color: rgba(255,255,255,0.6);

  text-transform: uppercase;

  width:80%;margin:0 auto;



}

/*-- Page Pagination --*/

.page-pagination {}

.page-pagination ul {

  display: inline-block;

}

.page-pagination ul li {

  display: block;

  float: left;

  margin: 0 3px;

}

.page-pagination ul li a {

  background-color: #f6f6f6;

  display: block;

  height: 36px;

  /*line-height: 36px;*/

  width: 36px;

}

.page-pagination ul li a i {

  display: block;

  font-size: 20px;

  line-height: 36px;

}

.page-pagination ul li.active span {

  background-color: #3c78ff;

  color: #fff;

}



/*-- Page Banner Section --*/

.page-banner-section {margin-top:82px;

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  padding: 150px 0 200px;

}

.page-banner-content {}

.page-banner-content h2 {

  font-size: 48px;

  font-weight: 600;

  margin-bottom: 20px;

  text-transform: uppercase;

}

.page-banner-content h3 {

  font-size:30px;

  font-weight: 400;

  color:#fff;

  margin-bottom: 20px;

  text-transform: uppercase;

}

.page-banner-content .darkgrey{color:#666;}

.page-banner-content p {

  font-size: 20px;

  max-width:600px;

  font-weight: 400;

  line-height:150%;

  color:#dbe1e5;

  margin-bottom: 15px;

  text-transform: uppercase;

}

/*-- Page Breadcrumb --*/

.page-banner-content .breadcrumb {

  background-color: transparent;

  margin: 0;

  padding: 0;

}

.page-banner-content .breadcrumb li {

  color: #666;

  text-transform: uppercase;

}

.page-banner-content .breadcrumb > li + li::before {

  color: #666;

}

.page-banner-content .breadcrumb li a {}

.page-banner-content .breadcrumb li:hover a {

  color: #3c78ff;

}

.page-banner-content .breadcrumb li.active {

  color: #3c78ff;

}



/*-- Product Slider --*/

.product-slider {

  float: left;

  width: 100%;

}

/*-- Product Slider Arrow --*/

.product-slider .slick-arrow {

  background-color: transparent;

  border: medium none;

  color: #666;

  height: 38px;

  margin-top: -18px;

  opacity: 0;

  padding: 0;

  position: absolute;

  top: 50%;

  z-index: -99;

}

.product-slider:hover .slick-arrow {

  opacity: 1;

  z-index: 99;

}

.product-slider .slick-arrow:hover {

  color: #3c78ff;

}

.product-slider .arrow-prev {

  left: -50px;

}

.product-slider .arrow-next {

  right: -50px;

}

.product-slider:hover .arrow-prev {

  left: -7px;

}

.product-slider:hover .arrow-next {

  right: -7px;

}

.product-slider .slick-arrow i {

  display: block;

  font-size: 44px;

  line-height: 38px;

}





/* -----------------------------------

  02. Header Section

--------------------------------------*/

.header-section {

  float: left;

  position: relative;

  width: 100%;

  z-index: 99999;

}

.header-transparent {

  position: absolute;

  z-index: 99999;

  left: 0;

  right: 0;

  top: 0;

  padding: 0 60px;

}

.header-section.stick {

  -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;

          animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;

  background-color: #fff;

  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);

  position: fixed;

}

.header-section.stick a{color:#333;}

.header-section.stick{}

.header-section.stick-1 a{color:#333;}

.header-section.stick{}

/*-- Header Logo --*/

.header-logo {

  padding: 20px 0;

}

.header-logo a{height:40px;width:180px;display:block;background:url(../images/logo.svg) no-repeat center left;background-size:180px ;}

.header-section.stick .header-logo a{height:40px;width:180px;display:block;background:url(../images/logo_black.svg) no-repeat center left;background-size:180px ;}

.header-section.stick-1 .header-logo a{height:40px;width:180px;display:block;background:url(../images/logo_black.svg) no-repeat center left;background-size:180px ;}

.header-section.stick .search-toggle{color:#333;}

.header-section.stick-1  .search-toggle{color:#333;}



/*-- Main Menu --*/

.main-menu {}

.main-menu.menu-right {}

.main-menu > ul {

  display: inline-block;

  vertical-align: top;

}

.main-menu > ul > li {

  display: block;

  float: left;

  margin: 0 15px;

}

.main-menu > ul > li > a {

  color: #fff;

  display: block;

  font-weight: 500;

  line-height: 30px;

  padding: 25px 0;

  text-transform: uppercase;

}

.main-menu > ul > li:hover > a, .main-menu > ul > li.active > a {

  color: #3c78ff; border-bottom:2px solid #0070ff;

}



/*-- Sub Menu --*/

.sub-menu {

  background-color: #fff;

  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);

  margin-top: 30px;

  opacity: 0;

  padding: 10px 20px;

  position: absolute;

  text-align: left;

  top: 100%;

  -webkit-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;

  visibility: hidden;

  width: 220px;

  z-index: -999;

}

.main-menu > ul > li:hover > .sub-menu {

  margin-top: 0;

  opacity: 1;

  visibility: visible;

  z-index: 9999;

}

.sub-menu li {

  margin: 3px 0;

}

.sub-menu li a {

  display: block;

  font-size: 14px;

  text-transform: capitalize;

}

.sub-menu li:hover a {

  color: #3c78ff;

  padding-left: 5px; 

}

.sub-menu li.active a {

  color: #3c78ff;



}

/*-- Mega Menu --*/

.mega-menu {

  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);

  margin-top: 30px;

  width:100%;
    left:0;right:0;

  display: none;

  position: absolute;

  text-align: left;

  top: 100%;

  -webkit-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;
}

.menu-wrap{background:#fff;width:100%;left:0;position: fixed;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);}

.menu-wrap ul{width:1400px;margin:0 auto;padding:30px 0;}

.main-menu > ul > li:hover > .mega-menu {

  margin-top: 0;

    display: block !important;
  z-index: 9999;

}

.mega-menu > li {

  display: block;

  float: left;

  width: 33.3333%;

}

.mega-menu > li > a {

  color: #282828;

  display: block;

  font-size: 16px;

  font-weight: 500;

  margin-bottom: 15px;

  text-transform: uppercase;

}

.mega-menu > li > a:hover {

  color: #3c78ff;

  padding-left: 5px;

}

.mega-menu > li ul {}

.mega-menu > li ul li {

  margin: 3px 0;

}

.mega-menu > li ul li a {

  display: block;

  font-size: 14px;

  text-transform: capitalize;

}

.mega-menu > li ul li:hover a {

  color: #3c78ff;

  padding-left: 5px;

}

/* ��Ʒ�����˵� */

#dropmenu-product-nav{width:1360px;margin:0 auto;display:flex;justify-content:space-between;}

.product_nav{width:20%;float:left;}



.product_nav ul{color:#5c5c5c;overflow:hidden;width:100%;}

.product_nav ul li{height:50px;line-height:50px;width:100%;display:flex; cursor:pointer;  transition: all 0.3s ease;background-image: none; /* ��ȷ����ʾͼ�� */

    background-position: center right; /* �̶���ʼλ�� */

     }

.product_nav ul li h2{font-size:20px;line-height:50px;margin-left:10px;}

.product_nav ul li a{color:#000000;font-size:20px;text-decoration:none;height:50px;line-height:50px; transition: all .5s; background-position: 0s; /* ����λ�ù��� */ }

.product_nav ul li:active{font-weight:bold;}

.product_nav ul li:hover h2{text-decoration:none;color:#000;font-weight:bold;}

.product_nav ul li:hover{background:url(../images/arrow-left.svg) no-repeat center right;background-size:auto 20px;}

.icon_normal,.icon_hover{width:30px;text-align:center;  transition: all 0.3s ease;}

.icon_normal img,.icon_hover img{height:20px;text-align:center;}

.icon_hover{display:none;height:20px;}

.product_nav ul .on{background:url(../images/arrow-left.svg) no-repeat center right;background-size:auto 20px;}

.product_nav ul .on h2{color:#000000;font-weight:bold;}

.product_nav ul .on .icon_hover{display:block;}

.product_nav ul .on .icon_normal{display:none;}

.product_nav_content{width:75%;margin-top:30px;overflow:hidden;}

.cat_pannel{width:100%;}







/*��������λ��Ʒ����л���ʽ*/

.cate_nav li.on,.cate_nav li.on a{color:#000;font-size:20px;}



.product-item-menubox {

width:100%;

margin-bottom:2rem;

}

.product-item-menubox ul{

margin:0px;width:100%;

padding:0px;

display:flex;gap:2rem;

justify-content:space-between;

border-bottom:1px solid #d3d3d3;

}

.product-item-menubox li{

float:left;

display:block;

cursor:pointer;

font-size: clamp(14px, 4.7vw, 18px);

height: clamp(35px, 37.5vw, 45px);

line-height:clamp(35px, 37.5vw, 45px);

text-align:center;

color:#5c5c5c;

}

.product-item-menubox li.hover{

padding:0px;

color:#000;

font-weight:600;

 font-size: clamp(14px, 4.7vw, 18px);

line-height:clamp(35px, 37.5vw, 45px);

}

.Contentbox{

clear:both;

margin-top:0px;

border-top:none;



}

.topnav-product-list ul{padding:0;width:100%;display: grid;
  grid-template-columns: repeat(4, 1fr);
    grid-template-rows:2;
  gap: 20px;}

.topnav-product-list ul li{text-align:center;margin-bottom:10px;}

.topnav-product-list ul li span{background:#f5f6f7;display:block;border-radius:5px;}

.topnav-product-list ul li span img{width:100%;}

.topnav-product-list ul li h2{font-size:14px;color:#666;}

.topnav-product-list ul li h3{font-size:18px;color:#080808;margin:10px 0 5px 0;font-weight:bold;}

.product-all img{height:20px;}



.product-all a{margin:10px auto;display:flex;justify-content:center;align-items:center;gap:10px;width:230px;height:45px;}

.product-all a{border:#666666 1px solid;border-radius:5px;}

.product-all a:hover{border:#3c78ff 1px solid;border-radius:5px;background:#3c78ff;color:#fff;}

.product-all a:hover svg path {

  fill: #fff; /* ���������ɫΪ��ɫ */

}





.topnav-custom-item ul{display:flex;gap:4rem;}

.topnav-custom-item ul li{width:150px;height:150px;border-radius:5px;border:1px solid #e8e8e8;transition:all .5s;}

.topnav-custom-item ul li span{text-align:center;margin:0 auto;padding-top:1.5rem;height:30px;margin-bottom:15px;}
.topnav-custom-item ul li span img{height:30px;}

.topnav-custom-item ul li h3{font-size:16px;}

.custom-ico{display:block;width:40px;}

.topnav-custom-item ul li:hover svg path {

  fill: #fff; /* ���������ɫΪ��ɫ */

}

.topnav-custom-item ul li:hover{background:#3c78ff;color:#fff;}

.topnav-custom-item ul li:hover h3{color:#fff;}

.topnav-custom-item ul li a{display:grid;grid-template-columns:1;gap:2rem;padding:15px 0;align-items:center;justify-content:center;}













.product-sub-menu ul{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}

.product-sub-menu ul li{font-size:18px;line-height:50px;color:#080808;transition:all .5s;display:block;text-indent:10px;}

.product-sub-menu ul li a{display:block;padding:0 40px 0 40px;  background-image: none; /* ��ȷ����ʾͼ�� */

    background-position: 2rem center; /* �̶���ʼλ�� */

    transition: all .5s;background-position:0s; /* ����λ�ù��� */}

.product-sub-menu ul li a:hover{color:#fff;font-weight:bold;border-radius:50vh;display:block;background:url(../images/circle.svg) #3c78ff no-repeat  2rem center;background-size:12px 12px;}

.product-sub-menu ul li.on a{font-weight:bold;border-radius:50vh;background:#3c78ff;color:#fff;background:url(../images/circle.svg) #3c78ff no-repeat  2rem center;background-size:12px 12px;}





/*-- Mobile Menu --*/

.mean-bar {

  background-color: transparent;

  min-height: auto;

  padding: 0;

  z-index: 9;

}

/*-- Menu Open/Close Button --*/

a.meanmenu-reveal {

  font-size: 30px;

  height: auto;

  line-height: 1;

  padding: 0;

  top: -65px;

  width: auto;

}

a.meanmenu-reveal i {

  display: block;

  font-size: 30px;

  line-height: 30px;

  width: 30px;

}

/*-- Mobile Menu Nav --*/

.mean-nav {

  background-color: #ffffff;

  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);

  margin: 0;

}

.mean-nav a.mean-expand {

  border: medium none;

  font-size: 18px !important;

  height: 36px;

  line-height: 36px;

  padding: 0 !important;

  text-align: center;

  width: 36px;

}

.mean-nav a.mean-clicked {

  font-size: 22px !important;

}

.mean-nav > ul {

  float: left;

  padding: 15px 0;

}

.mean-nav > ul > li {}

.mean-nav > ul > li > a {

  border-color: transparent;

  padding: 6px 25px;

}

.mean-nav > ul > li > a:hover {

  color: #3c78ff;

}



/*-- Mobile Sub & Mega menu --*/

.mean-nav .sub-menu, .mean-nav .mega-menu {

  box-shadow: none;

  float: left;

  opacity: 1;

  position: static;

  -webkit-transition: none 0s ease 0s ;

  transition: none 0s ease 0s ;

  visibility: visible;

  z-index: 1;

}

.mean-nav ul li li {

  margin: 0;

  padding: 0 25px;

}

.mean-nav ul li li a, .mean-nav ul li li li a, .mean-nav ul li li li li a {

  border: medium none;

  color: #666;

  font-size: 12px;

  font-weight: 400;

  opacity: 1;

  padding: 3px 15px;

  text-transform: uppercase;

}

.mean-nav ul li li:hover a {

  padding: 3px 15px;

}



/*-- Header Options --*/

.header-option-btns {}



/*-- Header Search --*/

.header-search {

  padding: 20px 10px;

  -webkit-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}

.header-search .search-toggle {

  background-color: transparent;

  border: medium none;

  color: #fff;

  display: block;

  height: 30px;

  padding: 0;

}

.header-search .search-toggle a{color:#333;}

.header-search .search-toggle i {

  display: block;

  font-size: 24px;

  line-height: 30px;

}



/*-- Search Modal --*/

.search-modal {

  background-color: #fff;

  z-index: 999999;

  cursor: url(img/icon/close.png), auto;

}

.header-search-form {

  left: 50%;

  max-width: 1170px;

  padding: 50px;

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%) translateX(-50%);

  -ms-transform: translateY(-50%) translateX(-50%);

  transform: translateY(-50%) translateX(-50%);

  width: 100%;

}

.header-search-form form {

    position: relative;

}

.header-search-form form input {

  border: medium none;

  color: #999;

  font-size: 60px;

  padding: 0;

  width: 100%;

}

.header-search-form form button {

  background-color: transparent;

  border: medium none;

  color: #999;

  height: 60px;

  position: absolute;

  right: 0;

  top: 0;

}

.header-search-form form button i {

  display: block;

  font-size: 36px;

  line-height: 60px;

}

.header-search-form form button:hover {

  color: #3c78ff;

}



/*-- Header Account --*/

.header-account {}

.header-account > ul {}

.header-account > ul > li {

  padding: 20px 0;

  position: relative;



}

.header-account > ul > li > a {

  display: block;

  line-height: 30px;

  padding: 0 10px;

  color:#fff;

}

.header-account > ul > li > a i {

  display: block;

  font-size: 24px;

  line-height: 30px;

}

.header-account > ul > li.open > a {

  color: #3c78ff;

}

/*-- Account Dropdown --*/

.header-account > ul > li ul {

  border: medium none;

  border-radius: 0;

  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);

  display: block;

  left: auto;

  margin-top: 30px;

  opacity: 0;

  padding: 15px 0;

  right: 0;

  -webkit-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

  visibility: hidden;

  z-index: -99999;

}

.header-account > ul > li.open ul {

  margin-top: 0;

  opacity: 1;

  visibility: visible;

  z-index: 999;

}

.header-account > ul > li ul li {}

.header-account > ul > li ul li a {

  color: #999999;

  font-size: 14px;

  font-weight: 500;

  line-height: 24px;

  padding: 2px 20px;

}

.header-account > ul > li ul li a:hover {

  background-color: transparent;

  color: #3c78ff;

  padding-left: 25px;

}



/*-- Header Cart --*/

.header-cart {

  padding: 20px 0;

  position: relative;

}

.header-cart .cart-toggle {

  display: block;

  padding: 0 10px;

  position: relative;

}

.header-cart .cart-toggle i {

  display: block;

  font-size: 24px;

  line-height: 30px;

}

.header-cart .cart-toggle span {

  background-color: #3c78ff;

  border-radius: 50%;

  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

  color: #fff;

  font-size: 12px;

  font-weight: 500;

  height: 17px;

  line-height: 16px;

  position: absolute;

  right: 0;

  text-align: center;

  top: 0;

  width: 17px;

}



/*-- Mini Cart Brife --*/

.mini-cart-brief {

  border: medium none;

  border-radius: 0;

  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);

  display: block;

  left: auto;

  margin-top: 30px;

  opacity: 0;

  padding: 20px;

  right: 0;

  -webkit-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

  visibility: hidden;

  width: 320px;

  z-index: -99999;

}

.open .mini-cart-brief  {

  margin-top: 0;

  opacity: 1;

  visibility: visible;

  z-index: 999;

}



/*-- Mini Cart Items --*/

.mini-cart-brief .cart-items {

  border-bottom: 1px solid #eee;

  margin: 0 -20px 20px;

  padding: 0 20px 15px;

}

.mini-cart-brief .cart-items p {

  margin: 0;

  font-size: 14px;

}

.mini-cart-brief .cart-items p span {

  color: #ffac00;

}





/* -----------------------------------

  03. Home Slider Section

--------------------------------------*/

.home-slider-section {

  position: relative;

}

/*-- Home Slider --*/

#home-slider {}

#home-slider img {}

/*-- Nivo Slider Caption --*/

.nivo-caption, .hero-static-caption {

  background-color: transparent;

  bottom: auto;

  box-sizing: border-box;

left: 0;

  padding: 0;

  position: absolute;

  top: 25%;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

  width: 100%;

  z-index: 8;

}

/*-- Hero Video Content --*/

.hero-video-caption {

  background-color: rgba(240, 240, 240, 0.8);

  padding: 250px 0;

}

/*-- Slider Content --*/

.hero-slider-content {}

.hero-slider-content h4 {

  font-weight: 500;

  margin-bottom: 15px;

  text-transform: uppercase;

  color:rgba(255,255,255,0.6);

}

.hero-slider-content h1 {

  font-size: 48px;

  font-weight: 500;

  margin-bottom: 15px;

  margin-left: -3px;

  text-transform: uppercase;

  color:#fff;

}

.hero-slider-content p {

  color: Rgba(255,255,255,0.6);

  line-height: 28px;

  margin-bottom: 30px;

  font-size:20px;

  padding: 0;

}

.hero-slider-content a {

  background-color: #0070ff;

  color: #fff;

  display: inline-block;

  font-size: 13px;

  font-weight: 500;

  height: 40px;

  border-radius:50vh;

  line-height: 24px;

  padding: 8px 30px;

  text-transform: uppercase;

}

.hero-slider-content a:hover {

  background-color: #000;

}



/*-- Slider Content 2 --*/

.hero-slider-content-2 {}

.hero-slider-content-2 h1 {

  font-size: 36px;

  font-weight: 700;

  margin-bottom: 30px;

  margin-left: -3px;

  text-transform: uppercase;

}

.hero-slider-content-2 h1 span {

  font-size: 60px;

  text-transform: uppercase;

  display: block;

}

.hero-slider-content-2 a {

  background-color: #282828;

  color: #fff;

  display: inline-block;

  font-size: 13px;

  font-weight: 500;

  height: 40px;

  line-height: 24px;

  padding: 8px 30px;

  text-transform: uppercase;

}

.hero-slider-content-2 a:hover {

  background-color: #3c78ff;

}



/*-- Nivo Direction Nav --*/

.nivo-directionNav {}

.nivo-directionNav a {

  display: block;

  height: 40px;

  margin-top: -20px;

  text-align: center;

  top: 50%;

}

.nivo-directionNav a i {

  display: block;

  font-size: 48px;

  line-height: 40px;

}

.nivo-prevNav {

  left: 50px;

}

.nivo-nextNav {

  right: 50px;

}





/* -----------------------------------

  04. Banner Section

--------------------------------------*/

.banner-section {display: flex;justify-content: center;}



.banner_bg{position:relative;}

.banner_content{position: absolute;z-index:4;text-align:center;display:flex;}

.banner-two{overflow:hidden;}

.banner-two ul{display:flex;justify-content:space-between;gap:10px;flex: 1;}

.banner-two ul li{width:100%;text-align:center;display:flex;justify-content: center;overflow:hidden;}

.banner-two-item-content{position:absolute;z-index:4;text-align:center;margin:0 auto;}

.banner-two-item-bg{}



.banner-two-item-content h4 {

  font-weight: 600;

  margin-bottom: 15px;

    font-size:18px;

  text-transform: uppercase;

  color:rgba(255,255,255,0.6);

}

.banner-two-item-content h1 {

  font-size: 36px;

  font-weight: 500;

  margin-bottom: 15px;

  margin-left: -3px;

  text-transform: uppercase;

  color:#fff;

}

.banner-two-item-content p {

  color: Rgba(255,255,255,0.6);

  line-height: 28px;

  margin-bottom: 30px;

  font-size:20px;

  padding: 0;

}

.banner-two-item-content a {

  background-color: #0070ff;

  color: #fff;

  display: inline-block;

  font-size: 13px;

  font-weight: 500;

  height: 40px;

  border-radius:50vh;

  line-height: 24px;

  padding: 8px 30px;

  text-transform: uppercase;

}

.banner-two-item-content a:hover {

  background-color: #000;

}





/* -----------------------------------

  05. Home Company Section

--------------------------------------*/

.home-company-section {}

.home-company-item{display:flex;justify-content:space-between;}

.company-building{border-radius:10px;overflow:hidden;margin-right:50px;}

.company-building img{width:100%;}

.home-company-profile{font-size:14px;text-indent:2em;text-align:justify;}



.home-company-date ul{display:grid;grid-template-columns:repeat(3, 1fr);column-gap:20px;row-gap:10px;}

.home-company-date ul li h2{ font-size:48px;float:left;display:block;margin-bottom:0px;font-weight:600;background: -webkit-linear-gradient(top, #6796ff, #3c78ff);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  text-fill-color: transparent; /* ��׼��������������Ҫ�����֧�� */}

.home-company-date ul li h3{float:left;margin-top:15px;margin-left:5px;font-weight:normal;font-size:24px;color:#666666;}

.home-company-date ul li p{ color:#080808;  font-size: 14px;display:block;clear:both;padding:0;}

.home-company-date  a{ margin:0 auto;

  color: #333333;

  display: inline-block;

  font-size: 13px;

  height: 40px;

  border-radius:5px;

  border:1px solid #666666;

  line-height: 24px;

  padding: 8px 30px;

  text-transform: uppercase;}

.home-company-date  a:hover{  background-color: #0070ff;color:#fff;border:1px solid #0070ff; }



.zs-section{background:url(../images/zs-bg.jpg) no-repeat top center;height:970px;background-size:auto 100%;background-position:cover;}

.Menubox_zs {

width:100%;

margin-bottom:2rem;

}

.Menubox_zs ul{

margin:0px;width:100%;

padding:0px;

display:flex;gap:2rem;

justify-content:center;

}

.Menubox_zs li{

width:calc(100% / 4 - 30px);

float:left;

display:block;

cursor:pointer;

font-size: clamp(14px, 4.7vw, 18px);

padding:10px 30px;



text-align:center;

color:rgba(255,255,255,0.8);

}

.Menubox_zs li span{font-size:36px;font-weight:bold;padding:0;}

.Menubox_zs li.hover{

color:#fff;

padding:10px 30px;

background:#3c78ff;

font-weight:normal;

 font-size: clamp(14px, 4.7vw, 18px);

}

.Menubox_zs li.hover span{font-size:36px;font-weight:bold;}



.gd{width:90%;margin:50px auto;}

.zs-slider .col-xs-12{padding:0px 15px;}

.zs-img {

  margin-bottom: 15px;

  overflow: hidden;

  position: relative;padding:20px;

overflow:hidden;

text-align:center;

}

.zs-img p{color:#fff;margin-top:10px;}

.zs-img .image {

  display: block;

  position: relative;

}

.zs-img .image::before {

  background-color: #000;

  content: "";

  height: 100%;

  left: 0;

  opacity: 0;

  position: absolute;

  top: 0;

  width: 100%;

}

.zs-item:hover .zs-img .image::before {

  opacity: 0.3;

}

.zs-img .image img {

  width: 100%;

}



.produce-center{display:grid;gap: 20px 50px; /* ��20px����15px */ justify-content:space-between;grid-template-columns: 55% auto;margin-bottom:10rem;}

  /* �����еĸ߶ȣ�3�У�ÿһ�и߶�Ϊ (�����߶� - �������߶� - �����߿�߶�) / 3 */

.produce-center .big-img{ grid-row: 1 / 3; /* ���һ�к͵ڶ��� */border-radius:5px;overflow:hidden;}

.produce-center .title{padding:0;}

.produce-center .title h2{margin-bottom:15px;font-size:2.5rem;}

.produce-center .title p{font-size:1.2rem;color:#555;line-height:180%;}

.produce-center .text{font-size:1rem;color:#666;line-height:180%;text-align:justify;padding:0;}

.produce-center .text p{text-indent:2rem;}

.produce-center .equipment h3,.produce-center  .activity h3{font-size:1.5rem;margin-bottom:1.5rem;}

.produce-center .equipment ul{display:flex;gap:1rem;width:100%;}

.produce-center .activity ul{display:flex;flex-wrap:nowrap;gap:1rem;}





.yf-center{display:grid;gap: 20px 50px; /* ��20px����15px */ justify-content:space-between;grid-template-columns:auto 55% ;margin-bottom:10rem;}

  /* �����еĸ߶ȣ�3�У�ÿһ�и߶�Ϊ (�����߶� - �������߶� - �����߿�߶�) / 3 */

.yf-center .big-img{ grid-area: 1 / 2 / 3 / 3;border-radius:5px;overflow:hidden;}

.yf-center .title{padding:0;}

.yf-center .title h2{margin-bottom:15px;font-size:2.5rem;}

.yf-center .title p{font-size:1.2rem;color:#555;line-height:180%;}

.yf-center .text{font-size:1rem;color:#666;line-height:180%;text-align:justify;padding:0;}

.yf-center .text p{text-indent:2rem;}

.yf-center .equipment h3,.yf-center .activity h3{font-size:1.5rem;margin-bottom:1.5rem;}

.yf-center .equipment ul{display:flex;gap:1rem;width:100%;}

.yf-center .activity ul{display:flex;flex-wrap:nowrap;gap:1rem;}

/* -----------------------------------

  06. Home-Solution Section

--------------------------------------*/

.home-solution-section {

    background: #f1f3f8;

}

/*-- Home-solution-slider Slider --*/

.home-solution-slider {

  padding: 0 30px;

}

/*-- Solution-list --*/

.solution-wrap{padding:0 20px;overflow:hidden;}

.home-solution-list{border-radius:10px;overflow:hidden;position:relative;}

.home-solution-list-bg {overflow:hidden;background:#000;border-radius:10px;}

.home-solution-list-bg {width:100%;}

.home-solution-list-bg img:hover{opacity:.6;}

.home-solution-list-content{position:absolute;z-index:4;margin:3rem 2rem;}

.home-solution-list-content h2{color:#fff;font-size:24px;font-weight:500;}

.home-solution-list-content p{color:rgba(255,255,255,0.6);font-size:14px;}

.home-solution-list a{ 

  color: #fff;

  display: inline-block;

  font-size: 12px;

  height: 40px;

  border-radius:10px;

  border:1px solid rgba(255,255,255,0.5);

  padding: 5px 25px;

  text-transform: uppercase;}

.home-solution-list a:hover{  background-color: #0070ff;color:#fff;border:1px solid #0070ff; }

.morelink{margin:2rem auto;text-align:center;}

.morelink a{ 

  color: #333;

  display: inline-block;

  font-size: 18px;

height: clamp(30px, 37.5vw, 60px);

  width: clamp(130px, 37.5vw, 260px);

  line-height: clamp(30px, 37.5vw, 60px);

  border-radius:10px;

  border:1px solid #afb0b4;

  text-transform: uppercase;}

  

 .morelink a:hover{  background-color: #0070ff;color:#fff;border:1px solid #0070ff; }

 

/*-- Testimonial Slider Arrow --*/

.home-solution-slider .slick-arrow {

  background-color: transparent;

  border: medium none;

  color: #d7d7d7;

  height: 30px;

  margin-top: -15px;

  padding: 0;

  position: absolute;

  top: 50%;

}

.home-solution-slider .slick-arrow:hover {

  color: #3c78ff;

}

.home-solution-slider .arrow-prev {

  left: 0;

}

.home-solution-slider .arrow-next {

  right: 0;

}

.home-solution-slider .slick-arrow i {

  display: block;

  font-size: 36px;

  line-height: 30px;

}



/* -----------------------------------

   Home News

--------------------------------------*/



/*ѡ�1*/

#Tab1{

width:100%;

margin:0px;

padding:0px;

margin:0 auto;}



/*�˵�class*/

.Menubox {

width:100%;

margin-bottom:3rem;

}

.Menubox ul{

margin:0px;

padding:0px;

display:flex;gap:2rem;

border-bottom:1px solid #d3d3d3;

}

.Menubox li{

float:left;

display:block;

cursor:pointer;

font-size: clamp(18px, 4.7vw, 24px);

height: clamp(30px, 37.5vw, 60px);

line-height:clamp(30px, 37.5vw, 60px);

text-align:center;

color:#5c5c5c;

}

.Menubox li.hover{

padding:0px;

border-bottom:2px solid #3c78ff;

color:#3c78ff;

font-weight:bold;

 font-size: clamp(18px, 4.7vw, 24px);

line-height:clamp(30px, 37.5vw, 60px);

}

.Contentbox{

clear:both;

margin-top:0px;

border-top:none;



}







/* -----------------------------------

  07. Home News Section

--------------------------------------*/

.home-news-section {}

.two-column {}

.two-column > div:nth-child(2n+1) {

    clear: both;

}



/*-- Blog Item --*/

.home-news ul{display:flex;margin:10px;width:100%;justify-content:space-between; }

.home-news ul li{padding:2rem;transition: box-shadow 0.3s ease-in-out;transition:all 0.3s;width:calc(100% / 3 - 50px);
}
.home-news ul li:hover{background-color: #ffffff;  box-shadow: 0px 5px 10px 8px rgba(0,0,0,0.15);border-radius:3px;}

.home-news-img{overflow:hidden;border-radius:10px;}

.home-news-img img{width:100%;}

.home-news-desc h2{font-size:clamp(16px, 4.7vw, 24px);line-height:150%;color:#333;text-align:left;}

.home-news ul li:hover h2{color:#000;}

.home-news-desc p{font-size:14px;color:#777777;height:60px;line-height:20px;overflow:hidden;width:100%;}

.home-news-more{display:flex;justify-content:space-between;align-items: center; }

.home-news-more .date{font-size:14px;color:#666;}

.home-news-more a{font-size:12px;color:#666;

color: #666666;

  display: inline-block;

  padding:3px 10px;

   border-radius:5px;

  border:1px solid #afb0b4;

  text-transform: uppercase;}

.home-news-more a:hover{  background-color: #0070ff;color:#fff;border:1px solid #0070ff; }





.home-news-img img::before {

  color: #fff;

  content: "\e641";

  font-family: "Pe-icon-7-stroke";

  font-size: 30px;

  left: 50%;

  opacity: 0;

  position: absolute;

  top: 50%;

  -webkit-transform: translateX(-50%) translateY(-50%);

  -ms-transform: translateX(-50%) translateY(-50%);

  transform: translateX(-50%) translateY(-50%);

  z-index: 2;

}

.home-news-img:hover img::before {

  opacity: 1;

}

.home-news-img img::after {

  background-color: #000;

  content: "";

  height: 100%;

  left: 0;

  opacity: 0;

  position: absolute;

  right: 0;

  width: 100%;

}

.home-news-img:hover img::after {

  opacity: 0.5;

}

.home-news-img img {

  width: 100%;

}







.blog-item .blog-dsc {}

.blog-item .blog-dsc .date {

  color: #3c78ff;

  display: block;

  font-size: 16px;

  font-weight: 500;

  line-height: 20px;

  margin-bottom: 10px;

}

.blog-item .blog-dsc .title {

  display: block;

  font-size: 18px;

  line-height: 28px;

  margin-bottom: 15px;

}

.blog-item .blog-dsc .title a {}

.blog-item .blog-dsc .author {

  display: block;

  font-size: 14px;

  line-height: 20px;

}

.blog-item .blog-dsc .author a {

  color: #333;

}

.blog-item .blog-dsc .author a:hover {

  color: #3c78ff;

}



/*-- Single Blog Post --*/

.single-blog-post {}

.single-blog-post .blog-img {

  margin-bottom: 20px;

}

.single-blog-post .blog-img img {}

.single-blog-post .blog-info {}

.single-blog-post .blog-info .title {

  font-size: 24px;

  margin-bottom: 15px;

}

.single-blog-post .blog-info .blog-meta {

  display: block;

  float: left;

  margin-bottom: 10px;

  width: 100%;

}

.single-blog-post .blog-info .blog-meta span {

  display: block;

  float: left;

  margin-right: 15px;

}

.single-blog-post .blog-info .blog-meta span a {

  display: block;

  font-size: 14px;

  padding-left: 2px;

}

.single-blog-post .blog-info .blog-meta span a i {

  display: block;

  float: left;

  line-height: 26px;

  margin-right: 6px;

}

.single-blog-post .blog-info p {}

.single-blog-post .blog-info blockquote {

  border-color: #3c78ff;

}

.single-blog-post .blog-info blockquote p {}









/* -----------------------------------

  08. Service Section

--------------------------------------*/

.home-service-section {

 background:#f1f3f8;

}

.home-services ul{display:flex;justify-content: center; gap:10%; }

.home-services ul li img{width:70px;height:70px;margin-bottom:25px;}

.home-services ul li{text-align:center;width:30%;}

.home-services ul li h2{color: #252525;margin-bottom:25px;

  font-size: 24px;

  font-weight: 500;

  line-height: 20px;

  text-transform: uppercase;}

.home-services ul li p{color: #252525;

  font-size: 18px;

  text-transform: uppercase;}





/* -----------------------------------

  09. Footer Section

--------------------------------------*/



/*-- Footer Top Section --*/

.footer-top-section {

  background-color: #282828;

}



/*-- Footer Widget --*/

.footer-menu{ display: flex; justify-content: space-around; /* ƽ���ֲ����� */

  flex-wrap: wrap; /* ��������� */}

.footer-menu > div {

  flex: 1 1 auto; /* ÿ����������ռ��1�ݿռ䣬���������Զ�������С */

  min-width: 100px; /* ��������� */

 gap:1rem;

}

.footer-widget {}

.footer-widget.link-widget {

 

}



/*-- Footer Widget Title --*/

.widget-title {

  color: #ffffff;

  font-size: 18px;

  font-weight: 600;

  line-height: 14px;

  margin-bottom: 30px;

  text-transform: uppercase;

}



/*-- Footer Widget Paragraph --*/

.footer-widget p {

  color: #ddd;

  font-size: 14px;

}

.footer-widget p strong {

  float: left;

  width: 65px;

}

.footer-widget p span {

  display: block;

  overflow: hidden;

}

.footer-widget p a {

  color: #ddd;

  display: inline-block;

  overflow: hidden;

}

.footer-widget p a:hover {

  color: #3c78ff;

}

/*-- Footer Widget Links --*/

.footer-widget ul {}

.footer-widget ul li {

  margin-bottom: 5px;font-size:14px;

}



.footer-widget ul li a {

  color: #999999;

  display: block;

}

.footer-widget ul li a:hover {

  color: #fff;

}

.footer-info{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;border-top: 1px solid #444444;border-bottom: 1px solid #444444;}

.footer-contact h4{margin-bottom:25px;}
.footer-contact h4 img{width:160px;}

.footer-contact ul li{color:#999999;font-size:14px;text-indent:1.5rem;margin:5px 0px;}

.footer-add{background:url(../images/footer-add.svg) no-repeat center left;background-size:15px;}

.footer-tel{background:url(../images/footer-tel.svg) no-repeat center left;background-size:15px;}

.footer-mobile{background:url(../images/footer-mobile.svg) no-repeat center left;background-size:15px;}

.footer-contact ul li .white{color:#fff;}

.footer-hotline{color:#999999;text-align:right;margin-bottom:20px;}

.footer-hotline h4{font-size:14px;color:#999999;}

.footer-hotline h1{color:#999999;font-weight:700;background: -webkit-linear-gradient(top, #6796ff, #3c78ff);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  text-fill-color: transparent; /* ��׼��������������Ҫ�����֧�� */}







/*-- Footer Social --*/

.footer-social-info {text-align:right;color:#999999;}

.footer-social-info  h4{font-size:14px;color:#999999;}

.footer-social-info{margin-top:20px;z-index:888;}

.footer-social-info ul{display:flex;flex-direction:row;  justify-content:flex-end;margin-top:20px;gap:20px;}





.exttb{ display:none;}

.headpic{ height:28px; overflow:hidden; }

.headpic img{ width:100%; height:100%;}

.part01-weibo{ height:28px; float:left;z-index:0; display:inline; }

.grp-weibo{padding:3px; height:180px;width:160px; margin-top:-220px; margin-left:-70px;position:absolute; z-index:10; text-align:center; display:none;}

.table_c_tbody_b{ display:block;}

.barrow{ display:block; background:url(../images/tit_info_mb.png) no-repeat 30px 0; width:100%; height:7px; position:absolute;top:-7px;}



.footer-gzh{float:right;text-align:center;}

.footer-gzh p{font-size:14px;line-height:180%;color:#999;margin-top:10px;}





.footer-social-info a {

  color: #ddd;

  display: inline-block;

  margin-right: 15px;

}

.footer-social-info a:hover {

  color: #3c78ff;

}

.footer-social-info a i {

  display: block;

  font-size: 16px;

  line-height: 17px;

}



/*-- Footer Bottom Section --*/

.footer-bottom-section {



}

.copyright{display:flex;justify-content:space-between;}

.copyright p {

  color: #999;

  font-size: 14px;

  margin-bottom: 0;

}

.copyright p a {

  color: #fff;

}

.copyright p a:hover {

  color: #3c78ff;

}



.footer-friendlink{border-bottom: 1px solid #444444;}

.footer-friendlink dl{display:flex;gap:15px;align-items:center;font-size:14px;flex-wrap:wrap;}

.footer-friendlink dl dt{color:#fff;}







/* -----------------------------------

   ��Ʒ�б�ҳ

--------------------------------------*/

.product-section {}



/* -----

      5.1 Grid Product

------------------------------*/

/*-- Product Item --*/

.product-item {}

.product-item ul{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}

.product-item  ul li{font-size:18px;color:#080808;}

.product-item  ul li:hover{font-weight:bold;}

.product-item  ul li a:active{font-weight:bold;}

.product-list-banner{background:#1c1b25;border-radius:10px;overflow:hidden;display:flex; flex-wrap: no-wrap;justify-content:space-between;}

.product-item-img{width:60%;}

.product-item-img img{width:100%;}

.product-item-content{width: calc(40% - 10px); /* ��ȥһЩ��϶ */ padding:3rem 2rem;}

.product-item-content h2{font-size:30px;color:#fff;margin-bottom:20px;}

.product-item-content p{font-size:14px;}

.product-item-content a{

  color: #999999;

  font-size: 12px;

  line-height:;

  padding:8px 20px;

  border-radius:4px;

  margin:10px 0;

  border:1px solid #999999;

  text-transform: uppercase;}

.product-item-content a:hover{  background-color: #0070ff;color:#fff;border:1px solid #0070ff; }



.product-list{border-bottom:1px solid #d8d8d8;}

.product-list ul{padding:0;width:100%;display:flex;justify-content:space-between;gap:10px;flex-wrap: wrap; }
.product-list ul:after{
    content: '';
    width:calc(100% / 3 - 30px);
}
.product-list ul li{text-align:left;margin-bottom:20px;width:calc(100% / 3 - 30px);}

.product-list ul li span{display:block;border-radius:10px;overflow:hidden;}
.productbg{background:#f5f6f7}
.productbg1{background:#fff;}
.product-list ul li p{font-size:12px;display:block;  line-height:140%;}

.product-list ul li span img{width:100%;display:block;overflow:hidden;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

	transition: opacity 0.35s, transform 0.35s;

	-webkit-transform: scale(1);

	transform: scale(1);}

	

.product-list ul li:hover img{	opacity: 1;	-webkit-transform: scale(1.12);	transform: scale(1.12);}	

.product-list ul li h2{font-size:16px;color:#666;padding-bottom:10px;  margin-bottom:20px;}

.product-list ul li h3{font-size:24px;color:#080808;margin:20px 0 15px 0;font-weight:bold;}

.product-list ul li h5 a{ 

  color: #999999;

  font-size: 12px;

  line-height:;

  padding:8px 20px;

  border-radius:4px;

  margin:10px 0;

  border:1px solid #999999;

  text-transform: uppercase;}



.product-list ul li h5 a:hover{  background-color: #0070ff;color:#fff;border:1px solid #0070ff; }

.product-pt-wrap{display:flex;justify-content:space-between;border-bottom:1px solid #d8d8d8;}

.product-pt-item{width:calc(100% / 2 - 30px);position:relative;background:#000;overflow:hidden;border-radius:10px;}

.product-pt-content{position:absolute;z-index:4;margin: 2rem;}

.product-pt-content h2{font-size:30px;color:#fff;margin-bottom:20px;padding:0;}

.product-pt-content p{color:#fff;font-size:14px;margin-bottom:20px;}

.product-pt-content span a{

  color: #fff;

  font-size: 12px;

  line-height:;

  padding:8px 20px;

  border-radius:50vh;

  margin:10px 0;

  border:1px solid #fff;

  text-transform: uppercase;}

.product-pt-content span a:hover{  background-color: #0070ff;color:#fff;border:1px solid #0070ff; }

.product-pt-img{opacity:1;transition:all .5s;}

.product-pt-img:hover{opacity:0.5;}





.product-pt-img{border-radius:10px;overflow:hidden;width:100%;}

.product-custom-item ul{display:flex;justify-content:space-between;}

.product-custom-item ul li{width:calc(100% / 3 - 20px);display:flex;gap:2rem;padding:15px 0;align-items:center;justify-content:center;border:1px solid #adadad;border-radius:10px;transition:all .5s;}

.product-custom-item ul li h3{font-size:18px;padding-top:10px;}
.product-custom-item ul li span{height:30px;width:30px;}
.product-custom-item ul li span img{height:100%;text-align:center;}
.custom-ico{display:block;height:30px;}

.product-custom-item ul li:hover svg path {

  fill: #fff; /* ���������ɫΪ��ɫ */

}

.product-custom-item ul li:hover{background:#3c78ff;color:#fff;}

.product-custom-item ul li:hover h3{color:#fff;}

.product-custom-item ul li a:hover {color:#fff;}





.product-sub-menu ul{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}

.product-sub-menu ul li{font-size:18px;line-height:50px;color:#080808;transition:all .5s;display:block;text-indent:10px;}

.product-sub-menu ul li a{display:block;padding:0 40px 0 40px;  background-image: none; /* ��ȷ����ʾͼ�� */

    background-position: 2rem center; /* �̶���ʼλ�� */

    transition: all .5s;background-position:0s; /* ����λ�ù��� */}

.product-sub-menu ul li a:hover{color:#fff;font-weight:bold;border-radius:50vh;display:block;background:url(../images/circle.svg) #3c78ff no-repeat  2rem center;background-size:12px 12px;}

.product-sub-menu ul li.on a{font-weight:bold;border-radius:50vh;background:#3c78ff;color:#fff;background:url(../images/circle.svg) #3c78ff no-repeat  2rem center;background-size:12px 12px;}



/*-- Product Image --*/

.product-img {

  margin-bottom: 15px;

  overflow: hidden;

  position: relative;

  background:#f5f6f7;

  border-radius:10px;overflow:hidden;

}

.product-img .image {

  display: block;

  position: relative;

}

.product-img .image::before {

  background-color: #000;

  content: "";

  height: 100%;

  left: 0;

  opacity: 0;

  position: absolute;

  top: 0;

  width: 100%;

}

.product-item:hover .product-img .image::before {

  opacity: 0.3;

}

.product-img .image img {

  width: 100%;

}

/*-- Product Add to Cart --*/

.product-img .add-to-cart {

  background-color: #282828;

  color: #fff;

  display: block;

  font-size: 13px;

  font-weight: 600;

  height: 40px;

  left: 50%;

  line-height: 24px;

  margin-left: -70px;

  margin-top: -20px;

  opacity: 0;

  padding: 9px 20px;

  position: absolute;

  text-transform: uppercase;

  top: 50%;

  width: 140px;

}

.product-img .add-to-cart:hover {

  background-color: #3c78ff;

}

.product-item:hover .add-to-cart {

  opacity: 1;

}

/*-- Product Action Button --*/

.product-img .action-btn {

  bottom: -40px;

  left: 0;

  position: absolute;

  -webkit-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

  width: 100%;

}

.product-item:hover .action-btn {

  bottom: 0;

}

.product-img .action-btn a {

  background-color: #282828;

  border-left: 1px solid #555;

  color: #fff;

  display: block;

  float: left;

  height: 40px;

  width: 33.3333%;

}

.product-img .action-btn a:first-child {

  border-left: 0px solid #555;

}

.product-img .action-btn a i {

  display: block;

  font-size: 22px;

  line-height: 40px;

}

.product-img .action-btn a:hover {

  background-color: #3c78ff;

}

/*-- Product Info --*/

.product-info {}

.product-info p{font-size:12px;display:block;  line-height:140%;}

.product-info h2{font-size:16px;color:#666;padding-bottom:10px;  margin-bottom:20px;}

.product-info h3{font-size:24px;color:#080808;margin:20px 0 15px 0;font-weight:bold;}

.product-info h5 a{ 

  color: #999999;

  font-size: 12px;

  line-height:;

  padding:8px 20px;

  border-radius:4px;

  margin:10px 0;

  border:1px solid #999999;

  text-transform: uppercase;}



.product-info h5 a:hover{  background-color: #0070ff;color:#fff;border:1px solid #0070ff; }



/* -----

      5.2 List Product

------------------------------*/

/*-- List Product Item --*/

.list-product-item {}



/*-- List Product Image --*/

.list-product-img {

  float: left;

  margin-right: 30px;

  width: 250px;

}

.list-product-img .image {

  display: block;

  position: relative;

}

.list-product-img .image img {

  width: 100%;

}

/*-- List Product Info --*/

.list-product-info {

  padding-top: 20px;

}

.list-product-info .title {

  display: block;

  font-size: 30px;

  margin-bottom: 20px;

  text-transform: capitalize;

}

.list-product-info .title a {}

.list-product-info .price {

  display: block;

  font-size: 20px;

  line-height: 24px;

  margin-bottom: 15px;

}

.list-product-info .price span {

  display: inline-block;

  line-height: 18px;

  margin: 0 10px 0 0;

  padding: 0;

}

.list-product-info .price .new {}

.list-product-info .price .old {

  color: #999;

  text-decoration: line-through;

}

.list-product-info p {

  margin-bottom: 20px;

}

/*-- List Action Button --*/

.list-action-btn {

  width: 100%;

}

.list-action-btn a {

  background-color: #444444;

  color: #fff;

  display: block;

  float: left;

  height: 40px;

  margin-left: 10px;

  text-align: center;

  width: 40px;

}

.list-action-btn a i {

  display: block;

  font-size: 22px;

  line-height: 40px;

}

.list-action-btn .add-to-cart {

  font-size: 13px;

  font-weight: 600;

  height: 40px;

  line-height: 24px;

  margin: 0;

  padding: 9px 20px;

  text-transform: uppercase;

  width: 140px;

}

.list-action-btn a:hover {

  background-color: #3c78ff;

}



/* -----

      5.3 SIngle Product Details

------------------------------*/

/*-- Product Large Image Tab --*/

.pro-large-img {}

.pro-large-img img {

  width: 100%;

}

/*-- Product Thumbnail Image Slider --*/

.pro-thumb-img-slider {

  margin: 0 -5px;

}

.pro-thumb-img-slider .slick-slide {

  padding: 0 5px;

}

.pro-thumb-img-slider a {

  display: block;

  background:#f5f6f7;

}

.pro-thumb-img-slider a img {

  width: 100%;

}

/*-- Product Thumbnail Image Slider Arrow --*/

.pro-thumb-img-slider .slick-arrow {

  background-color: transparent;

  border: 2px solid #aaa;

  color: #aaa;

  height: 30px;

  margin-top: -15px;

  opacity: 0;

  padding: 0;

  position: absolute;

  top: 50%;

  width: 30px;

  z-index: 9;

}

.pro-thumb-img-slider .slick-arrow i {

  display: block;

  line-height: 26px;

}

.pro-thumb-img-slider .arrow-prev {

  left: -10px;

}

.pro-thumb-img-slider .arrow-next {

  right: -10px;

}

.pro-thumb-img-slider:hover .slick-arrow {

  opacity: 1;

}

.pro-thumb-img-slider .slick-arrow:hover {

  border-color: #3c78ff;

  color: #3c78ff;

}

/*-- Product Details --*/

.product-view-top{height:70px;line-height:70px;display:flex;justify-content:space-between;}

.product-view-top .title{display:flex;gap:10px;}

.product-view-top p{line-height:70px;}

.product-view-top .model{font-size:18px;font-weight:bold;color:#333;}

.product-view-top .name{font-size:18px;color:#555;}

.product-view-top .buy a{background:#000;color:#fff;font-size:14px;padding:8px 20px;border-radius:50vh;}

.product-view-top .buy a:hover{background:#3c78ff;color:#fff;}

.product-view-banner{height:680px;width:100%;background-size:auto 100%;background-position:top center;}





.product-adv-img{margin-right:50px;overflow:hidden;}

.product-slider .col-xs-12{padding:0px 15px;}

.product-details {}

.product-details .title {

  display: block;

  font-size: 36px;

  margin-bottom: 10px;

  font-weight:600;

  text-transform: capitalize;

}

.product-details .model {

  display: block;

  font-size: 24px;

  margin-bottom: 30px;

  font-weight:600;

  text-transform: capitalize;

}

.product-details .features h2{

  display: block;

  font-size: 16px;

  padding-bottom:10px;

  font-weight:600;

    border-bottom: 1px solid #ebebeb;

  text-transform: capitalize;

}

.product-details .features p{font-size:14px;color:#777;}

.product-details .download {display:block;font-size:16px;text-align:center;text-indent:5px;color:#333;}

.product-details .download a{font-size:16px;color:#333;display:block;width:200px;border-radius:50vh;border:1px solid #999;padding:10px 20px;}

.product-details .download a:hover{color:#fff;background:#3c78ff;border:1px solid #3c78ff;}

.product-details .download a:hover svg path {

  fill: #fff; /* ���������ɫΪ��ɫ */

}



/*-- Info Tab List --*/

.pro-info-tab-list {

  border-bottom: 1px solid #ddd;

}

.pro-info-tab-list li {

  bottom: -1px;

  display: block;

  float: left;

  margin-right: 3rem;

  position: relative;

  z-index: 2;

}

.pro-info-tab-list li a {

  border-bottom: 2px solid transparent;

  color: #282828;

  display: block;

  font-size: 18px;

  font-weight: 500;

  line-height: 14px;

  padding-bottom: 15px;

  text-transform: uppercase;

}

.pro-info-tab-list li.active a {

color:#000;font-weight:bold;

  border-bottom: 2px solid #3c78ff;

}

/*-- Info Tab Content --*/

.pro-info-tab {

  padding-top: 20px;

}

.pro-info-tab a {

  background-color: #282828;

  border: 0 none;

  color: #fff;

  display: inline-block;

  font-size: 13px;

  font-weight: 400;

  margin: 0;

  padding: 10px 15px;

  text-shadow: none;

  text-transform: uppercase;

}

.table-data-sheet {

  background: #fff none repeat scroll 0 0;

  border-bottom: 1px solid #ebebeb;

  margin: 0 0 20px;

  width: 100%;

}

.table-data-sheet tr {

  border-top: 1px solid #ebebeb;

}

.table-data-sheet tr td {

  padding: 10px 20px 11px;

}

.table-data-sheet tr td:first-child {

  border-right: 1px solid #ebebeb;

  color: #333;

  font-weight: 700;

  width: 30%;

}

.table-data-sheet tr.even {

  background-color: #fdfdfd;

}









/*-- Availability --*/

.product-details .availability {

  margin-bottom: 15px;

}

.product-details .availability strong {

  display: block;

  float: left;

  font-weight: 500;

  margin-right: 15px;

  text-transform: capitalize;

}

.product-details .availability span {

  display: block;

  font-size: 14px;

  overflow: hidden;

}

.product-details .availability span i {}

.product-details .availability span.in i {

  color: #50B948;

}

.product-details .availability span.out i {

  color: #FF0000;

}

.product-details .short-desc {

  margin-bottom: 15px;

}

.product-details .short-desc p {

  color: #666;

  font-size: 15px;

}

/*-- Color --*/

.product-details .color-list {

  margin-bottom: 15px;

}

.product-details .color-list button {

  border: 2px solid #eee;

  border-radius: 50%;

  display: block;

  float: left;

  height: 30px;

  margin-bottom: 15px;

  margin-right: 10px;

  padding: 0;

  width: 30px;

}

.product-details .color-list button i {

  color: #fff;

  display: block;

  font-size: 12px;

  line-height: 26px;

  opacity: 0;

}

.product-details .color-list button.active i {

  opacity: 1;

}

/*-- Usefull Links --*/

.product-details .usefull-link {

  margin-bottom: 15px;

}

.product-details .usefull-link li {

  display: block;

  float: left;

  margin-bottom: 15px;

  margin-right: 20px;

}

.product-details .usefull-link li a {

  display: block;

}

.product-details .usefull-link li a i {

  display: block;

  float: left;

  font-size: 24px;

  line-height: 26px;

  margin-right: 5px;

}

/*-- Quantity & cart Button --*/

.product-details .quantity-cart {

  margin-bottom: 15px;

}

.product-details .quantity-cart .add-to-cart {

  background-color: #444444;

  border: medium none;

  color: #fff;

  display: block;

  font-size: 13px;

  font-weight: 600;

  height: 36px;

  line-height: 24px;

  margin-bottom: 15px;

  padding: 6px 20px;

  text-align: center;

  text-transform: uppercase;

  width: 140px;

}

.product-details .quantity-cart .add-to-cart:hover {

  background-color: #3c78ff;

}

/*-- Info Tab Content --*/

.pro-info-tab {

  padding-top: 20px;

}

.pro-info-tab a {

  background-color: #282828;

  border: 0 none;

  color: #fff;

  display: inline-block;

  font-size: 13px;

  font-weight: 400;

  margin: 0;

  padding: 10px 15px;

  text-shadow: none;

  text-transform: uppercase;

}

.table-data-sheet {

  background: #fff none repeat scroll 0 0;

  border-bottom: 1px solid #ebebeb;

  margin: 0 0 20px;

  width: 100%;

}

.table-data-sheet tr {

  border-top: 1px solid #ebebeb;

}

.table-data-sheet tr td {

  padding: 10px 20px 11px;

}

.table-data-sheet tr td:first-child {

  border-right: 1px solid #ebebeb;

  color: #333;

  font-weight: 700;

  width: 30%;

}

.table-data-sheet tr.even {

  background-color: #fdfdfd;

}















/* -----------------------------------

  10. ���� Page

--------------------------------------*/

.case-sub-menu{background:#fff;border-radius:10px;overflow:hidden;}

.case-sub-menu ul{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;flex: 1;flex-grow: 1;

  flex-basis: 0%;}

.case-sub-menu ul li{font-size:18px;line-height:60px;color:#080808;transition:all .5s;display:block;text-indent:10px;}

.case-sub-menu ul li a{display:block;padding:0 40px 0 40px;  background:url(../images/circle-grey.svg) no-repeat  2rem center;background-size:12px 12px;

    transition: all .5s;background-position:0s; /* ����λ�ù��� */}

.case-sub-menu ul li a:hover{color:#fff;font-weight:bold;display:block;background:url(../images/circle.svg) #3c78ff no-repeat  2rem center;background-size:12px 12px;}

.case-sub-menu ul li.on a{font-weight:bold;background:#3c78ff;color:#fff;background:url(../images/circle.svg) #3c78ff no-repeat  2rem center;background-size:12px 12px;}



.case-list{}

.case-list ul{padding:0;width:100%;display:flex;justify-content:space-between;gap:10px;flex-wrap: wrap; }
.case-list ul:after{
content:"";
width:calc(100% / 3 - 30px);
}
.case-list ul li{text-align:left;margin-bottom:20px;width:calc(100% / 3 - 30px);background:#fff;border-radius:10px;overflow:hidden;transition:all .3s;}

.case-list ul li .case-list-content{margin:10px 20px;padding-bottom:20px;}

.case-list ul li span{display:block;overflow:hidden;}

.case-list ul li p{font-size:12px;display:block;line-height:25px;height:50px;overflow:hidden;}

.case-list ul li span img{width:100%;display:block;overflow:hidden;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

	transition: opacity 0.35s, transform 0.35s;

	-webkit-transform: scale(1);

	transform: scale(1);}

	

.case-list ul li:hover img{	opacity: 1;	-webkit-transform: scale(1.12);	transform: scale(1.12);}	

.case-list ul li h2{font-size:16px;color:#666;padding-bottom:10px; margin-bottom:20px;}

.case-list ul li h3{font-size:24px;color:#080808;margin:20px 0 15px 0;}

.case-list ul li h5 a{ 

  color: #999999;

  font-size: 12px;

  line-height:;

  padding:8px 20px;

  border-radius:4px;

  border:1px solid #999999;

  text-transform: uppercase;}



.case-list ul li h5 a:hover{  background-color: #0070ff;color:#fff;border:1px solid #0070ff; }

.case-list ul li .case-feature ul{display:flex;justify-content:left;flex-wrap:wrap;margin-bottom:20px;}

.case-list ul li .case-feature ul li{height:25px;margin:0;line-height:25px;width:auto;font-size:14px;background:url(../images/circle-blue.svg) no-repeat center left;background-size:12px 12px;text-indent:1.5rem;}

.case-list ul li:hover{  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);}
.case-feature ul li:hover{box-shadow:none;}


.case-background{display:flex;gap:40px;background:#f8f8f8;border-radius:10px;overflow:hidden;}

.case-project-background-img img{width:100%;}

.case-project-background-text{text-align:left;margin:40px;}

.case-project-background-text h2{margin-bottom:25px;font-size:36px;}

.case-project-background-text span{font-size:14px;display:block;margin-bottom:15px;}

.case-project-background-text p{font-size:16px;color:#333333;line-height:180%;}

.case-background .case-contact{ display:flex;align-items:center;gap:10px; margin-top:40px;}

.case-background .case-contact a{  color: #fff; text-transform: uppercase; font-size: 16px;  width:160px;  padding:8px 20px;   background:#3c78ff; border:1px solid #3c78ff;  border-radius:4px;}

.case-background .case-contact img{width:30px;height:30px;margin-right:15px;}

.case-background .case-contact a:hover{  background-color: #000;border:1px solid #000; }





.case-2-plan ul{display:flex;justify-content:space-between;}

.case-2-plan ul li{background:#fff;border-radius:10px;width:calc(100% / 4 - 30px);padding:40px 40px 0px 20px;transition:all .3s;}

.case-2-plan ul li span{width:100px;height:100px;border-radius:100vh;background:#3c78ff;display:block;margin:30px auto;display:flex;align-items:center;justify-content:center;}

.case-2-plan ul li span img{width:50%;text-align:center;}

.case-2-plan ul li h3{margin-bottom:20px;font-weight:600;font-size:18px;}

.case-2-plan ul li p{text-align:left;color:#666;margin:20px;}



.case-2-plan ul li:hover{  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);}



.case-3-effect ul {display:flex;justify-content:space-between;}

.case-3-effect ul li{background:#f1f3f8;border-radius:10px;width:calc(100% / 3 - 30px);padding:0px;transition:all .3s;overflow:hidden;}

.case-3-effect ul li h3{width:100%;height:50px;background:#3c78ff;display:block;display:flex;align-items:center;gap:20px;color:#fff;justify-content:center;}

.case-3-effect ul li h3 img{width:20px;height:20px;}

.case-3-effect ul li .effect-bg{padding:20px;text-align:left;font-size:14px;color:#666;}

.case-3-effect ul li .effect-bg p{color:#666;}



.case-3-effect ul li:hover{  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);}


.case-4-plan ul{display:flex;justify-content:space-between;}

.case-4-plan ul li{background:#fff;width:calc(100% / 4 - 30px);padding:0px 0px 40px 0px;transition:all .3s;border-radius:5px;overflow:hidden;}

.case-4-plan ul li span{width:100%;display:block;margin-bottom:20px;}

.case-4-plan ul li span img{width:100%;text-align:center;}

.case-4-plan ul li h3{font-weight:600;margin:0 20px;font-size:18px;}

.case-4-plan ul li p{text-align:left;color:#666;margin:20px;}



.case-4-plan ul li:hover{  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);}




/*-- ����������ƽ̨ --*/

.zq-scene{background:#fff;border-radius:5px;box-shadow:0 0 15px rgba(0,0,0,0.1);}

.zq-scene ul{display:grid;gap:30px; grid-template-columns:repeat(4,1fr);justify-content:space-between;padding:50px;}

.zq-scene ul li{text-align:left;background:url(../images/zq-icon-1.svg) no-repeat center left;background-size:20px 20px;padding-left:30px;font-size:20px;}



.zq-difficulty ul{display:grid;gap:30px; grid-template-columns:repeat(4,1fr);justify-content:space-between;��grid-template-rows: 1fr 1fr; height: 100%; /* ȷ���������㹻�ĸ߶� */}

.zq-difficulty ul li{background:#fff;border-radius:10px;padding:30px 15px;transition:all .3s;width:100%;}

.zq-difficulty ul li span{width:80px;height:80px;border-radius:100vh;background:#3c78ff;display:block;margin:30px auto;display:flex;align-items:center;justify-content:center;}

.zq-difficulty ul li span img{width:50%;text-align:center;}

.zq-difficulty ul li h3{margin-bottom:20px;font-weight:600;font-size:20px;}

.zq-difficulty ul li p{text-align:left;color:#666;margin:20px;}



.zq-3{display:grid;gap:30px; grid-template-columns:repeat(3,1fr);justify-content:space-between;}



.zq-3-main{position: relative;  grid-row: 1 / 3; /* ���һ�к͵ڶ��� */padding:40px;border-radius:5px;text-align:left;background:#e5e9ff;overflow:hidden;}

.zq-3-main .text{position: relative; font-size:16px;line-height:180%;color:#666;z-index:3;}

.zq-3-main .bgimg{position: absolute;z-index:1;right:0;bottom:0;display:flex;justify-content:right;width: 100%;  backgound:#333; padding:0;         }

.zq-3-main .bgimg img{width:60%;text-align:right;}



.zq-3-sub{position: relative;text-align:left;padding:40px; border-radius:5px;background:#f1f3f8;overflow:hidden;}

.zq-3-sub .text h3{background:url(../images/zq-icon-2.svg) no-repeat center left;background-size:20px 20px;padding-left:2rem;font-size:20px;margin-bottom:20px;}

.zq-3-sub .text p{font-size:14px;}

.zq-3-sub .text{z-index:3;max-width:100%;}

.zq-3-sub .bgimg{position:absolute;z-index:1;width:100%;bottom:0;right:0;display:flex;justify-content:right;}

.zq-3-sub .bgimg img{width:40%;text-align:right;}



.tabs {display:flex;

  z-index: 15px;

  background: #FFFFFF;

  width: 100%;

  border-radius: 4px;

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);

  box-sizing: border-box;

  margin:0px auto;

  overflow: hidden;

}

.tabs-header {
    width:18.6%;
  background: #1453a2;

  overflow: hidden;

}

.tabs-header ul {width:100%;padding-left:15px;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -webkit-flex-direction: row;

      -ms-flex-direction: row;

          flex-direction: row;

  -webkit-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

          flex-wrap: wrap;

}

.tabs-header li {width:100%;

text-indent:1rem;

  -webkit-transition: 0.3s ease;

          transition: 0.3s ease;

text-align:left;

height:60px;line-height:60px;



}

.tabs-header li:before{

color:rgba(255,255,255,0);	content: "\f105";

		font-family: fontawesome;float:right;margin-right:20px;}



.tabs-header li:hover::before {

 color:rgba(255,255,255,1); /* ��ͣ��Ϊ��ɫ */        }

.tabs-header li a:hover

{background:#074088;color:#fff;}

.tabs-header a {

  z-index: 1;

  display: block;

  box-sizing: border-box;

color:rgba(255,255,255,0.7);

  font-weight: 500;

  text-decoration: none;

  text-transform: uppercase;

}

.tabs-header a.active{color:#fff;}

.tabs-nav {

  position: absolute;

  top: 0;

  right: 0;

  background: #4285F4;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;

  height: 100%;

  padding: 0 10px;

  color: #FFFFFF;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

}

.tabs-nav:before {

  content: '';

  z-index: 1;

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  box-shadow: 0 0 20px 10px #4285F4;

}

.tabs-nav i {

  border-radius: 100%;

  cursor: pointer;

}

.tabs-content {

height:706px;

width:81.4%;

  position: relative;

  -webkit-transition: 0.3s ease;

          transition: 0.3s ease;

  overflow: hidden;

}

.tabs-content:after {

  content: '';

  position: absolute;

  bottom: -1px;

  left: 0;

  display: block;

  width: 100%;

  height: 1px;

  box-shadow: 0 0 20px 10px #FFFFFF;

}

.tabs-content .tab {

  display: none;

 

}

.tabs-content .tab.active {

  display: block;

}

.tabs-content .content span {display:block;width:100%;z-index:1;

  position:relative;

 

}

.tabs-content .content p{display:block;width:100%;z-index:1;background-image: linear-gradient(to bottom, rgba(0,0,0,0),  rgba(0,0,0,1));

  position:absolute;z-index:2;bottom:-20px;text-align:left;padding:20px;color:rgba(255,255,255,0.8);}





.yc-process ul{display:grid;grid-template-columns:23% 3% 23% 3% 23% 3% 23%;justify-content:between-space;}

.yclc-arrow{background:url(../images/yclc-arrow.svg) no-repeat center 90% ;background-size:20px auto;}

.yclc-img{margin-bottom:1.5rem;}

.yclc-content h3{font-size:1.3rem;}

.yclc-content p{font-size:14px;}

/*-- ��������� --*/



.page-search-content {margin:0 auto;text-align:center;}

.page-search-content h2 {

  font-size: 48px;

  font-weight: 400;

  margin-bottom: 20px;

  text-transform: uppercase;

}

.page-search-content p {

  font-size: 18px;

  font-weight: 400;

  color:rgba(255,255,255,1);

  margin-bottom: 15px;

  text-transform: uppercase;

}

.d1 input, .d1 button {

  outline: none;

  background: transparent;

}

.d1 input {

  width: 100%;

  height: 42px;

  padding-left: 15px;

  background:#fff;

  border-radius:5px;

}

.d1 button {

  border: none;

  height: 42px;

  width: 42px;

  position: absolute;

  top: 0;

  right: 0;

  cursor: pointer;

}

.d1 button:before {

  content: "\f002";

  font-family: FontAwesome;

  font-size: 16px;

  color: #666666;

}

.d1 input:focus {

  border-color: #fff

}



.page-search form {

  position: relative;

  width: 400px;

  margin: 0 auto;

}



.installation-list{border-bottom:1px solid #d8d8d8;display:grid;grid-template-columns:70% auto;gap:2rem;}
.installation-title{grid-area: 1 / 1 / 2 / 3;font-size:18px;font-weight:600;line-height:150%;margin:0px;}
.installation-title:before {
  content: "\f15c";
  font-family: FontAwesome;
  font-size: 18px;margin-right:5px;
  border:1px solid #fff;
  color: #666666;

}
.installation-text{gird-area: 2 / 1 / 3 / 3;color:#999999;font-size:14px;}
.installation-content{grid-area: 2 / 2 / 3 / 3;}
.installation-list .installation-content{display:Flex;justify-content:center;align-items:center;gap:2rem;}
.installation-list .installation-content .text{flex:1;color:#999999;font-size:14px;padding-right:10%;}
.installation-list .installation-content .video{text-align:center;}
.installation-list .installation-content .video span{width:60px;margin:10px auto;height:60px;display:flex;align-:center;justify-content:center;border-radius:50vh;background:#333;text-align:center;}
.installation-list .installation-content .video span img,.installation-list .installation-content .document span img{width:50%;}
.installation-list .installation-content .video:hover span,.installation-list .installation-content .document:hover span{background:#3b77ff;}
.installation-list .installation-content .video p:hover,.installation-list .installation-content .document p:hover{color:#3b77ff;}
.installation-list .installation-content .video p a,.installation-list .installation-content .video p a{color:#333;}
.installation-list .installation-content .document{text-align:center;}
.installation-list .installation-content .document span{width:60px;margin:10px auto;height:60px;display:flex;align-:center;justify-content:center;border-radius:50vh;background:#333;text-align:center;}


.manual-list{display:grid;grid-template-columns:70% auto;justify-content:space-between;align-items:center;border:1px solid #d8d8d8;padding:3rem;border-radius:5px;transition:all .3s;}
.manual-list:hover{  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);}
.manual-list h2{grid-area: 1 / 1 / span 1 / span 2;font-size:18px;font-weight:600;line-height:180%;}
.manual-list h2:before {  content: "\f15c";  font-family: FontAwesome;  font-size: 18px;margin-right:5px;  color: #666666;}
.manual-item{grid-area: 3 / 1 / 3 / 2;font-size:14px;}
.manual-content{grid-area: 2 / 1 / 3 / 2;color:#999;font-size:14px;}
.manual-download{grid-area: 2 / 2 / span 2 / span 1;}
.manual-list .content p{color:#999;font-size:14px;}
.manual-download .down{display:flex;justify-content:center;align-items:center;padding:5px 10px;border-radius:50vh;border:1px solid #d8d8d8;gap:20px;font-size:14px;margin:10px 0;}
.manual-download .down i{font-size:16px;}
.manual-download .img{width:180px;}
.manual-download .down:hover  i{color:#fff;font-size:16px;}
.manual-download .down:hover {background:#3c78ff;}
.manual-download .down a{display:block;}
.manual-download .down a:hover{color:#fff;display:block;}



#accordion .panel{

		border: none;

		box-shadow: none;

		border-radius: 0;

		margin: 0 0 15px 10px;border:none;

	}

	#accordion .panel-heading{

		padding: 0;

		border-radius: 30px;

			

	}

	#accordion .panel-title a{

		display: block;

		padding: 12px 20px 12px 20px;

		font-size: 18px;

		color: #333;

		background:#fbfbfb;

		position: relative;

		transition: all 0.3s ease 0s;

	}

	#accordion .panel-title a.collapsed{

		background: #fff;

		color: #0d345d;

		border-bottom: 1px solid #e7e7e7;

	}

	#accordion .panel-title a:after,

	#accordion .panel-title a.collapsed:after{

		content: "\f107";

		font-family: fontawesome;

		width: 55px;

		height: 55px;

		line-height: 55px;

		font-size: 20px;

		color: #000;

		text-align: center;

		position: absolute;

		top: -5px;

		right: 0px;

		transition: all 0.3s ease 0s;

	}

	#accordion .panel-title a.collapsed:after{

		content: "\f105";

		color: #000;

		box-shadow: none;

	}

	#accordion .panel-body{

		padding: 20px 25px 10px 9px;

		

		background: transparent;

		font-size: 12px;

		color: #8c8c8c;

		line-height: 25px;

		border-top: none;

		position: relative;

	}

	#accordion .panel-body p{

		padding-left: 25px;		font-size: 14px;

		

	}



/*-- �ƹ��  --*/

.promotion-video-home{display:flex;justify-content:space-between;align-items:center;gap:20px;}

.promotion-video-home-item{border-radius:10px;border:1px solid #f0f0f0;background:#fff;display:flex;flex-wrap:wrap;justify-content:center;flex-basis:calc(100% / 4 - 50px); padding:80px 50px;min-width:0;transition:all .3s;}

.promotion-video-home-item span{display:block;width:100%;margin-bottom:20px;}

.promotion-video-home-item span img{height:50px;}

.promotion-video-home-item h3{font-size:24px;color:#000;font-weight:500;margin:10px 0;}

.promotion-video-home-item p{font-size:12px;color:#999;margin:10px 0;  white-space: nowrap;

        text-overflow: ellipsis;

        overflow: hidden;width:100%;box-sizing: border-box;}

.promotion-video-home-item a:before{color:#3c78ff;	content: "\f101";

		font-family: fontawesome;float:right;margin:0 10px;}

.promotion-video-home-item a:after{color:#000;	

		font-family: fontawesome;float:right;margin:0 10px;}



.promotion-video-home-item a{color:#3c78ff;font-size:14px;}

.promotion-video-home-item:hover{color:#000;  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

}

.promotion-article-home{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:5px;overflow:hidden;}

.promotion-article-adv{ background:#999999;}

.article-adv-img{ position:relative;  z-index: 1;overflow:hidden;width:100%;}

.article-adv-img img{width:100%;}

.article-adv-img:hover img{transform: scale(1.2); /* �Ŵ���120% */}

.article-adv-content{position: absolute;z-index:3;bottom:-10px;color:#fff;text-align:left;padding:10px 20px;width:100%;

  background-image: linear-gradient(to bottom, rgba(0,0,0,0),  rgba(0,0,0,1));

}

.article-adv-content h2{color:#fff;font-size:18px;white-space: nowrap;

        text-overflow: ellipsis;

        overflow: hidden;}

.article-adv-content p{color:rgba(255,255,255,0.7);font-size:14px;white-space: nowrap;

        text-overflow: ellipsis;

        overflow: hidden;}



.promotion-article-content{text-align:left;margin:30px 30px 0px 0;}

.article-home-content{margin-bottom:15px;}

.article-home-content h2{font-size:18px;font-weight:bold;}

.article-home-content p{font-size:14px;padding:0;margin:0; white-space: nowrap;

        text-overflow: ellipsis;width:80%;box-sizing: border-box;

        overflow: hidden;}

.promotion-article-content a{display:block;width:70px;font-size:12px;color:#3c78ff;}

.promotion-article-content a:before{color:#3c78ff;content: "\f101";

		font-family: fontawesome;float:right;}

.promotion-article-content a:after{color:#000;	

		font-family: fontawesome;float:right;}

.Menubox_article {

width:100%;

margin-bottom:2rem;

}

.Menubox_article ul{

margin:0px;width:100%;

padding:0px;

display:flex;gap:2rem;

justify-content:center;

}

.Menubox_article li{

float:left;

display:block;

cursor:pointer;

font-size: clamp(14px, 4.7vw, 18px);

height: clamp(35px, 37.5vw, 45px);

line-height:clamp(35px, 37.5vw, 45px);

text-align:center;

color:#000;

}

.Menubox_article li.hover{

border-radius:50vh;

color:#fff;padding:0 25px;

background:#3c78ff;

font-weight:normal;

 font-size: clamp(14px, 4.7vw, 18px);

line-height:clamp(35px, 37.5vw, 45px);

}

.Contentbox{

clear:both;

margin-top:0px;

border-top:none;



}



.video_list{width:100%;margin:0 auto;padding-bottom:50px;overflow:hidden;}

.video_list ul{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;}

.video_list ul li{width:100%;margin-bottom:15px;}

.video_cover{width:100%;border-radius:5px;position:relative;height:280px;overflow:hidden;}

.video_cover_img{position:absolute;z-index:1;background:rgba(0,0,0,1)}

.video_cover_img img{transition:0.6s;opacity:1;}

.video_list ul li h2{font-size:18px;margin:15px 0;font-weight:normal;text-align:left;}

.video_list ul li p{font-size:14px;margin:0px 0;text-align:left;}

.video_cover:hover .video_cover_img img{opacity:0.5; cursor:pointer;}

		

			

.video_cover h4{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9;width:50px;height:50px;transition:0.6s;}

.video_cover h4 img{width:100%;}

.video_cover:hover h4{top:46%;left:50%;transform:translate(-50%,-46%);}





.article_list{width:100%;margin:0 auto;padding-bottom:50px;overflow:hidden;}

.article_list ul{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;}

.article_list ul li{width:100%;margin-bottom:15px;background:#fff;transition:all .5s;border-radius:5px;}

.article_content{margin:25px;}

.article_cover{width:100%;border-radius:5px 5px 0 0;position:relative;height:280px;overflow:hidden;}

.article_cover_img{position:absolute;z-index:1;background:rgba(0,0,0,1)}

.article_cover_img img{transition:0.6s;opacity:1;}

.article_list ul li h2{font-size:18px;margin:15px 0;font-weight:normal;text-align:left;}

.article_list ul li p{font-size:14px;margin:0px 0;text-align:left;}

.article_cover:hover .article_cover_img img{transform: scale(1.1); /* �Ŵ���120% */cursor:pointer;}

.article_list ul li:hover {box-shadow:0 0 15px rgba(0,0,0,0.2);}



.article-header{margin-top:82px;}

.article-view-position ul{display:flex;font-size:14px;color:#999;line-height:60px;gap:10px;width:100%;}

.article-view-position ul li a{color:#fff;}

.article-view-position ul li a:hover{color:#3c78ff;}

.article-view-wrap{display:flex;justify-content:space-between;gap:60px;}

.article-view{width:75%;border-bottom:1px solid #e3e3e3;padding-bottom:20px;}

.article-view .title{border-bottom:1px solid #e3e3e3;}

.article-view .title h2{color:#000;font-size:36px;margin-bottom:20px;}

.article-view .title p{color:#999;font-size:16px;margin-bottom:20px;display:flex;gap:20px;}

.article-view .content{margin:40px 0;color:#666;}

.article-view .content img{margin-bottom:10px;}

.article-tj{width:20%;margin:0 auto;padding-bottom:20px;overflow:hidden;}

.article-tj h2{font-size:24px;color:#000;margin-bottom:30px;}

.article-tj ul{display:flex;gap:20px;flex-wrap:wrap;}

.article-tj ul li{width:100%;margin-bottom:15px;background:#fff;transition:all .5s;border-radius:5px;}

.article-tj-content{margin:0px;}

.article-tj-cover{z-index:1;background:rgba(0,0,0,1)}

.article-tj-cover img{transition:0.6s;opacity:1;}

.article-tj ul li h2{font-size:18px;margin:10px 0;font-weight:normal;text-align:left;line-height:180%;}

.article-tj ul li p{font-size:14px;margin:10px 0;text-align:left;line-height:150%;}

.article-tj-cover:hover .article-tj-cover img{transform: scale(1.1); /* �Ŵ���120% */cursor:pointer;}



/*-- ��ϵ����--*/



.contact-item{font-size:36px;margin-bottom:50px;}

.contact-content ul{display:flex;flex-wrap:wrap;gap:50px;}

.contact-content ul li{display:flex;gap:50px;align-items:center;width:100%;}

.contact-tel,.contact-email,.contact-address{width:50px;height:50px;background:#f6f6f6;text-algin:center;border-radius:50vh;display:flex;justify-content:center;align-items:center;}

.contact-tel:before {

  content: "\f095";

  font-family: FontAwesome;

  font-size: 24px;

  color: #666666;

}

.contact-email:before {

  content: "\f0e0";

  font-family: FontAwesome;

  font-size: 20px;

  color: #666666;

}

.contact-address:before {

  content: "\f21d";

  font-family: FontAwesome;

  font-size: 24px;

  color: #666666;

}

.contact-tel-content{display:grid;grid-template-row:2;gap:20px;width:70%;}

.contact-tel-content h3{font-size:36px;font-weight:bold;}

.contact-wx ul{display:flex;gap:50px;flex-wrap:nowrap;}

.contact-wx ul li{display:grid;grid-template-row:2;justify-content:center;align-items:center;gap:10px;}

.contact-wx ul li span{margin:0 auto;padding:0;text-align:center;}

.contact-wx ul li p{font-size:14px;}

.contact-email-content{font-size:24px;font-weight:bold;line-height:180%;}

.contact-address-content{font-size:24px;color:#333;}

.contact-map img{max-width:100%;}

.contact-map{margin-top:30px;}





.faq{

 	width: 100%;

 	padding: 48px 0;

 	background: #fff;

	border-radius: 20px;

 }

.faq>ul{

	width: 100%;

	padding: 0;



}



.faq>ul>li{

	border-bottom: 1px solid rgb(216,216,216);

	padding: 2rem;

	border-radius:5px;

	margin-bottom:1rem;

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	justify-content: space-between;

	cursor: pointer;

}

.faq>ul>li>.faq-item{

	font-size:20px;text-align:left;display:flex;gap:5rem;align-items:center;

}

.faq>ul>li>.faq-item>h3{padding:0;margin:0;font-size:20px;}

.faq>ul>li>.faq-item>.rmb{background:url(../images/rmb-icon.svg) no-repeat center left;background-size:20px 20px;padding-left:30px;

}

.faq>ul>li>span{

	margin-right: 10px;

	width: 15px;

	height: 15px;

	background: url(../images/arrow-left-black.svg)no-repeat center center;background-size:auto 8x ;}

.faq>ul>li.on>span{

	background: url(../images/arrow-down-black.svg)no-repeat center center;}

/*.faq .faq2>ul>li.on>span{

	background: url(../image/j2.png)no-repeat center center;

}*/

.faq>ul>li>ol{

	width: 100%;

	display: none;border-top:1px solid #dddddd;

	margin-top:2rem;padding-top:2rem;padding-left:0;

}

.faq>ul>li.on>ol{

	display: block;

}



.faq>ul>li.on{

background:#f7f8f9;

}



.faq-content-item{

	font-size: 16px;font-weight:bold;

	line-height: 1.6;margin-bottom:1rem;

	color: #333;

}

.faq-content-text{

	font-size: 14px;

	line-height: 1.6;margin-bottom:1rem;

	color: rgb(153,153,153);

}









.job{

 	width: 100%;

 	padding: 48px 0;

 	background: #fff;

	border-radius: 20px;

 }

.job>ul{

	width: 100%;

	padding: 0;



}



.job>ul>li{

	border: 1px solid rgb(216,216,216);

	padding: 2rem;

	border-radius:5px;

	margin-bottom:1rem;

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	justify-content: space-between;

	cursor: pointer;

}

.job>ul>li>.job-item{

	font-size: 24px;text-align:left;display:flex;gap:5rem;align-items:center;

}

.job>ul>li>.job-item>h3{padding:0;margin:0;}

.job>ul>li>.job-item>.rmb{background:url(../images/rmb-icon.svg) no-repeat center left;background-size:20px 20px;padding-left:30px;

}

.job>ul>li>span{

	margin-right: 10px;

	width: 15px;

	height: 15px;

	background: url(../images/arrow-left-black.svg)no-repeat center center;background-size:auto 8x ;}

.job>ul>li.on>span{

	background: url(../images/arrow-down-black.svg)no-repeat center center;}

/*.faq .faq2>ul>li.on>span{

	background: url(../image/j2.png)no-repeat center center;

}*/

.job>ul>li>ol{

	width: 100%;

	display: none;border-top:1px solid #dddddd;

	margin-top:2rem;padding-left:0;

}

.job>ul>li.on>ol{

	display: block;

}



.job>ul>li.on{

background:#f7f8f9;

}



.job-content-item{

	font-size: 16px;font-weight:bold;

	line-height: 1.6;margin-bottom:1rem;

	color: #333;

}

.job-content-text{

	font-size: 14px;

	line-height: 1.6;margin-bottom:1rem;

	color: rgb(153,153,153);

}

.job>ul>li>ol p{



}

/*������*/







/*-- ���menu --*/

.single-sidebar {

  float: left;

  width: 100%;

}

.sidebar-title {

  font-size: 24px;

  font-weight: 500;

  line-height: 25px;

  font-weight:600;

  margin-bottom: 35px;

  text-transform: uppercase;

}









/*-- Search Sidebar --*/

.sidebar-search {

  float: left;

  position: relative;

  width: 100%;

}

.sidebar-search input {

  border: 1px solid #ddd;

  color: #999;

  display: block;

  float: left;

  font-size: 16px;

  height: 40px;

  padding: 7px 12px;

  width: 100%;

}

.sidebar-search .submit {

  background-color: #3c78ff;

  border: medium none;

  color: #fff;

  height: 40px;

  padding: 0;

  position: absolute;

  right: 0;

  top: 0;

  width: 40px;

}

.sidebar-search .submit i {

  display: block;

  font-size: 20px;

  line-height: 40px;

}

/*-- Post Sidebar --*/

.post-sidebar {}

.post-sidebar .post {

  float: left;

  margin-top: 10px;

  width: 100%;

}

.post-sidebar .post + .post {

  margin-top: 15px;

}

.post-sidebar .post .image {

  display: block;

  float: left;

  margin-right: 15px;

  position: relative;

  width: 80px;

}

.post-sidebar .post .image::before {

  color: #fff;

  content: "\f0c1";

  font-family: "Fontawesome";

  font-size: 18px;

  height: 30px;

  left: 50%;

  line-height: 30px;

  margin-left: -15px;

  margin-top: -15px;

  opacity: 0;

  position: absolute;

  text-align: center;

  top: 50%;

  width: 30px;

  z-index: 2;

}

.post-sidebar .post .image::after {

  background-color: #3c78ff;

  bottom: 0;

  content: "";

  left: 0;

  opacity: 0;

  position: absolute;

  right: 0;

  top: 0;

}

.post-sidebar .post .image:hover::before {

  opacity: 1;

}

.post-sidebar .post .image:hover::after {

  opacity: 0.7;

}

.post-sidebar .post .image img {

  width: 100%;

}

.post-sidebar .post .content {}

.post-sidebar .post .content .title {

  font-size: 15px;

  margin-top: 5px;

}

.post-sidebar .post .content .title a {}

.post-sidebar .post .content .author {

  display: block;

  font-size: 14px;

  line-height: 20px;

}

.post-sidebar .post .content .author a {}

/*-- Category Sidebar --*/

.category-sidebar {}

.category-sidebar li {

  display: block;

  padding: 6px 0;

}

.category-sidebar li a {

  display: block;

  font-size: 18px;

}

.category-sidebar li a::before {

  content: "\f105";

  display: block;

  float: right;

  font-family: FontAwesome;

  font-size: 15px;

  margin-right: 10px;

}

.category-sidebar li a:hover {



}

/*-- Archive Sidebar --*/

.archive-sidebar {}

.archive-sidebar li {

  border-bottom: 1px solid #ddd;

  display: block;

  padding: 6px 0;

}

.archive-sidebar li a {

  display: block;

  font-size: 14px;

}

.archive-sidebar li a::before {

  content: "\f105";

  display: block;

  float: left;

  font-family: FontAwesome;

  font-size: 15px;

  margin-right: 10px;

}

.archive-sidebar li a:hover {

  padding-left: 10px;

}

/*-- Pricing Range Sidebar --*/

#price-range {

  background-color: #eee;

  border: medium none;

  border-radius: 0;

  float: left;

  height: 4px;

  margin-top: 29px;

  width: 100%;

}

#price-range .ui-slider-range {

  background-color: #3c78ff;

  border-radius: 0;

}

#price-range .ui-slider-handle {

  background-color: #3c78ff;

  border: medium none;

  border-radius: 50%;

  height: 10px;

  top: -3px;

  -webkit-transition: none 0s ease 0s ;

  transition: none 0s ease 0s ;

  width: 10px;

}

#price-range .ui-slider-handle:focus {

  color: inherit;

}

#price-range .ui-slider-handle span {

  font-size: 12px;

  font-weight: 600;

  left: 50%;

  line-height: 16px;

  position: absolute;

  top: -18px;

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

}

/*-- Color Sidebar --*/

.color-sidebar {}

.color-sidebar li {

  border-bottom: 1px solid #ddd;

  display: block;

  padding: 6px 0;

}

.color-sidebar li a {

  display: block;

  overflow: hidden;

}

.color-sidebar li a i {

  border-radius: 50%;

  display: block;

  float: left;

  height: 10px;

  margin: 9px 10px 0 0;

  width: 10px;

}

.color-sidebar li a span {

  font-size: 14px;

  text-transform: capitalize;

}

.color-sidebar li a:hover {

  color: #444444;

}

/*-- Tag Sidebar --*/

.tag-cloud {}

.tag-cloud a {

  border: 1px solid #ddd;

  display: block;

  float: left;

  font-size: 13px;

  height: 28px;

  line-height: 26px;

  margin-right: 10px;

  margin-top: 10px;

  padding: 0 5px;

  text-transform: capitalize;

}

.tag-cloud a:hover {

  border: 1px solid #3c78ff;

  color: #3c78ff;

}





/* -----------------------------------

  11. Cart Page

--------------------------------------*/

/*-- Cart Table --*/

.cart-table {}

.cart-table table {

  border-color: #ddd;

  border-radius: 0;

  border-style: solid;

  border-width: 1px 0 0 1px;

  margin: 0;

  text-align: center;

  width: 100%;

}

/*-- Cart Table Head --*/

.cart-table table thead {}

.cart-table table thead tr {}

.cart-table table thead tr th {

  border-bottom: 1px solid #ddd;

  border-right: 1px solid #ddd;

  border-top: medium none;

  font-weight: 500;

  padding: 10px;

  text-align: center;

  text-transform: uppercase;

  vertical-align: middle;

  white-space: nowrap;

}

/*-- Cart Table Body --*/

.cart-table table tbody {}

.cart-table table tbody tr {}

.cart-table table tbody tr td {

  border-bottom: 1px solid #ddd;

  border-right: 1px solid #ddd;

  padding: 10px;

  vertical-align: middle;

}

/*-- Cart Table Thumbnail --*/

.cart-table table tbody tr td.pro-thumbnail {

  width: 130px;

}

.cart-table table tbody tr td.pro-thumbnail a {

  display: block;

  min-width: 100px;

}

.cart-table table tbody tr td.pro-thumbnail a img {

  width: 100%;

}

/*-- Cart Table Title --*/

.cart-table table tbody tr td.pro-title {

  width: 270px;

}

.cart-table table tbody tr td.pro-title a {

  display: block;

  min-width: 220px;

}

/*-- Cart Table Price --*/

.cart-table table tbody tr td.pro-price {

  width: 130px;

}

.cart-table table tbody tr td.pro-price .amount {}

/*-- Cart Table Quantity --*/

.cart-table table tbody tr td.pro-quantity {

  width: 180px;

}

.cart-table table tbody tr td.pro-quantity .product-quantity {

  display: inline-block;

  float: none;

  margin: 0;

}

/*-- Cart Table Subtotal --*/

.cart-table table tbody tr td.pro-subtotal {

  width: 120px;

}

/*-- Cart Table Remove --*/

.cart-table table tbody tr td.pro-remove {

  width: 150px;

}

.cart-table table tbody tr td.pro-remove a {

  font-size: 25px;

}



/*-- Cart Buttons --*/

.cart-buttons {

    overflow: hidden;

}

.cart-buttons input, .cart-buttons a {

  background-color: #282828;

  border: medium none;

  color: #fff;

  display: block;

  float: left;

  font-size: 13px;

  font-weight: 600;

  height: 40px;

  line-height: 24px;

  margin-bottom: 10px;

  margin-right: 15px;

  padding: 8px 25px;

  text-transform: uppercase;

}

.cart-buttons input:hover, .cart-buttons a:hover {

  background-color: #3c78ff;

}

/*-- Cart Coupon --*/

.cart-coupon {

  overflow: hidden;

}

.cart-coupon h4 {

  font-size: 18px;

  font-weight: 500;

  line-height: 13px;

  margin-bottom: 15px;

  text-transform: uppercase;

}

.cart-coupon p {

  font-size: 14px;

  line-height: 24px;

}

.cart-coupon input[type="text"] {

  border: 1px solid #ddd;

  float: left;

  font-size: 14px;

  height: 40px;

  max-width: 100%;

  padding: 7px 15px;

  width: 200px;

}

.cart-coupon input[type="submit"] {

  background-color: #282828;

  border: medium none;

  color: #fff;

  display: block;

  float: left;

  font-size: 13px;

  font-weight: 600;

  height: 40px;

  line-height: 24px;

  margin-right: 15px;

  padding: 8px 25px;

  text-transform: uppercase;

}

.cart-coupon input[type="submit"]:hover {

  background-color: #3c78ff;

}

/*-- Cart Total --*/

.cart-total {

  text-align: right;

}

.cart-total h3 {

  border-bottom: 1px solid #ddd;

  font-size: 24px;

  line-height: 18px;

  margin-bottom: 30px;

  padding-bottom: 10px;

  text-transform: uppercase;

}



.cart-total table {

  border: medium none;

  float: right;

  margin: 0;

  text-align: right;

}

.cart-total table tr {}

.cart-total table tr.cart-subtotal {}

.cart-total table tr.order-total {}

.cart-total table tr th {

  font-size: 14px;

  font-weight: 700;

  padding: 0 0 12px;

  text-align: left;

  text-transform: uppercase;

  vertical-align: top;

  width: 120px;

}

.cart-total table tr td {

  font-size: 13px;

  font-weight: 500;

  padding: 0 0 12px;

  vertical-align: top;

}

.cart-total table tr td .amount {

  color: #3c78ff;

  display: block;

}

.cart-total table tr.order-total th, .cart-total table tr.order-total td {

  font-size: 20px;

  padding: 0;

  text-transform: uppercase;

}

.cart-total .proceed-to-checkout {}

.cart-total .proceed-to-checkout a {

  background-color: #3c78ff;

  border: medium none;

  color: #fff;

  display: inline-block;

  font-size: 13px;

  font-weight: 600;

  height: 40px;

  line-height: 24px;

  padding: 8px 25px;

  text-transform: uppercase;

}

.cart-total .proceed-to-checkout a:hover {

  background-color: #282828;

}





/* -----------------------------------

  12. Wishlist Page

--------------------------------------*/

/*-- Wishlist Table --*/

.wishlist-table {}

.wishlist-table table {

  border-color: #ddd;

  border-radius: 0;

  border-style: solid;

  border-width: 1px 0 0 1px;

  margin: 0;

  text-align: center;

  width: 100%;

}

/*-- Cart Table Head --*/

.wishlist-table table thead {}

.wishlist-table table thead tr {}

.wishlist-table table thead tr th {

  border-bottom: 1px solid #ddd;

  border-right: 1px solid #ddd;

  border-top: medium none;

  font-weight: 400;

  padding: 10px;

  text-align: center;

  vertical-align: middle;

  white-space: nowrap;

}

/*-- Cart Table Body --*/

.wishlist-table table tbody {}

.wishlist-table table tbody tr {}

.wishlist-table table tbody tr td {

  border-bottom: 1px solid #ddd;

  border-right: 1px solid #ddd;

  padding: 10px;

  vertical-align: middle;

}

/*-- Cart Table Thumbnail --*/

.wishlist-table table tbody tr td.pro-thumbnail {

  width: 130px;

}

.wishlist-table table tbody tr td.pro-thumbnail a {

  display: block;

  min-width: 100px;

}

.wishlist-table table tbody tr td.pro-thumbnail a img {

  width: 100%;

}

/*-- Cart Table Title --*/

.wishlist-table table tbody tr td.pro-title {

  width: 270px;

}

.wishlist-table table tbody tr td.pro-title a {

  display: block;

  min-width: 220px;

}

/*-- Cart Table Price --*/

.wishlist-table table tbody tr td.pro-price {

  width: 130px;

}

.wishlist-table table tbody tr td.pro-price .amount {}

/*-- Cart Table Quantity --*/

.wishlist-table table tbody tr td.pro-stock-stauts {

  width: 180px;

}

.wishlist-table table tbody tr td.pro-stock-stauts span {

  text-transform: capitalize;

}

.wishlist-table table tbody tr td.pro-stock-stauts span.in-stock {

  color: #3c78ff;

}

.wishlist-table table tbody tr td.pro-stock-stauts span.out-stock {

  color: #ff0000;

}

/*-- Cart Table Add to Cart --*/

.wishlist-table table tbody tr td.pro-add-to-cart {

  width: 220px;

}

.wishlist-table table tbody tr td.pro-add-to-cart a {

  background-color: #282828;

  border: medium none;

  color: #fff;

  display: inline-block;

  font-size: 13px;

  font-weight: 600;

  height: 40px;

  line-height: 24px;

  min-width: 180px;

  padding: 8px 25px;

  text-transform: uppercase;

}

.wishlist-table table tbody tr td.pro-add-to-cart a:hover {

  background-color: #3c78ff;

}

/*-- Cart Table Remove --*/

.wishlist-table table tbody tr td.pro-remove {

  width: 40px;

}

.wishlist-table table tbody tr td.pro-remove a {

  font-size: 25px;

}





/* -----------------------------------

  13. Checkout Page

--------------------------------------*/

/*-- Customer Login --*/

.customer-login {}

.customer-login h3 {

    background-color: #f7f6f7;

    border-top: 3px solid #3c78ff;

    color: #515151;

    font-size: 14px;

    font-weight: 400;

    list-style: outside none none !important;

    margin: 0;

    padding: 1em 2em 1em 3.5em !important;

    position: relative;

    width: auto;

}

.customer-login h3::before {

    color: #1e85be;

    content: "\f114";

    display: inline-block;

    font-family: fontawesome;

    left: 1.5em;

    position: absolute;

    top: 1em;

}

.customer-login h3 a {}

/*-- Customer Login Wrapper --*/

.checkout-login-wrapper {

  border: 1px solid #ddd;

  float: left;

  padding: 30px 15px;

  width: 100%;

}

.checkout-login-wrapper p {

  padding: 0 15px;

}

/*-- Customer Login Form --*/

.checkout-login-wrapper form {}

.checkout-login-wrapper form label {

  display: block;

  font-weight: 400;

  line-height: 18px;

  margin-bottom: 10px;

  overflow: hidden;

}

.checkout-login-wrapper form label span.required {

  color: #ff0000;

}

.checkout-login-wrapper form input[type="text"], .checkout-login-wrapper form input[type="password"] {

  border: 1px solid #ddd;

  display: block;

  height: 40px;

  padding: 7px 15px;

  width: 100%;

}

.checkout-login-wrapper form input[type="submit"] {

  background-color: #282828;

  border: medium none;

  color: #fff;

  float: left;

  font-weight: 500;

  height: 40px;

  margin-right: 30px;

  padding: 5px 25px;

  text-transform: uppercase;

}

.checkout-login-wrapper form input[type="submit"]:hover {

  background-color: #3c78ff;

}

.checkout-login-wrapper form input[type="checkbox"] {

  float: left;

  margin-right: 10px;

  margin-top: 3px;

}

.checkout-login-wrapper form .remember-me-box {

  margin-bottom: 0;

  margin-top: 11px;

}

.checkout-login-wrapper form a {

  display: inline-block;

  font-size: 14px;

  line-height: 18px;

}

/*-- Checkout Form --*/

.checkout-form {}

.checkout-form h3 {

  border-bottom: 1px solid #ddd;

  font-size: 24px;

  line-height: 17px;

  margin: 0 0 30px;

  padding-bottom: 10px;

  text-transform: uppercase;

  width: 100%;

}

.checkout-form h3 label {

  font-size: 18px;

  margin: 0;

}

/*-- Label --*/

.checkout-form label {

  display: block;

  font-weight: 400;

  line-height: 18px;

  margin-bottom: 10px;

  overflow: hidden;

}

.checkout-form label span {}

.checkout-form label span.required {

  color: #ff0000;

}

/*-- Input [ Text & Email & Password ] --*/

.checkout-form input[type="text"], .checkout-form input[type="email"], .checkout-form input[type="password"] {

  border: 1px solid #ddd;

  display: block;

  height: 40px;

  padding: 7px 15px;

  width: 100%;

}

/*-- Input [ Checkbox ] --*/

.checkout-form input[type="checkbox"] {

  float: left;

  margin-right: 10px;

  margin-top: 3px;

}

.checkout-form input[type="checkbox"] + label {

  font-weight: 500;

  margin-bottom: 0;

}

/*-- Select --*/

.checkout-form select {

  -moz-appearance: none;

  -webkit-appearance: none;

  appearance: none;

  background: rgba(0, 0, 0, 0) url("../image/select-arrow-down.png") no-repeat scroll right 5px center;

  border: 1px solid #ddd;

  height: 40px;

  padding: 7px 15px;

  text-transform: capitalize;

  width: 100%;

}

.checkout-form select option {

  padding: 5px 15px;

}

/*-- TextArea --*/

.checkout-form textarea {

  border: 1px solid #ddd;

  color: #999;

  height: 120px;

  padding: 5px 15px;

  resize: none;

  width: 100%;

}

/*-- Coupon Form --*/

.coupon-form {

  border: 1px solid #ddd;

  display: block;

  padding: 30px;

}

.coupon-form h3 {

  margin-bottom: 20px;

}

.coupon-form p {}

.coupon-form input[type="text"] {

  float: left;

  width: 200px;

}

.coupon-form input[type="submit"] {

  background-color: #282828;

  border: medium none;

  color: #fff;

  font-weight: 500;

  height: 40px;

  padding: 5px 25px;

  text-transform: uppercase;

}

.coupon-form input[type="submit"]:hover {

  background-color: #3c78ff;

}



/* -----------------------------------

  14. Contact Page

--------------------------------------*/

/*-- Contact Info --*/

.contact-info {}

.contact-info h3 {

  font-size: 24px;

  font-weight: 500;

  line-height: 18px;

  margin-bottom: 30px;

  text-transform: uppercase;

}

.contact-info p {

  color: #666;

  font-size: 14px;

}

.contact-info p i {

  display: block;

  float: left;

  font-size: 18px;

  line-height: 26px;

  margin-bottom: 10px;

  margin-right: 10px;

}

.contact-info p span {

  display: block;

  overflow: hidden;

}

.contact-info p a {

  display: block;

  overflow: hidden;

}

/*-- Contact SOcial --*/

.contact-social {

  display: block;

  float: left;

  margin-top: 20px;

  width: 100%;

}

.contact-social a {

  display: block;

  float: left;

  margin-right: 15px;

  padding: 0 3px;

}

.contact-social a i {

  display: block;

  line-height: 20px;

}

.contact-social a:hover {}



/*-- Contact FOrm --*/

.contact-form {}

.contact-form h3 {

  font-size: 24px;

  font-weight: 500;

  line-height: 18px;

  margin-bottom: 30px;

  text-transform: uppercase;

}

.contact-form form {}

.contact-form form label {

  display: block;

  font-size: 14px;

  font-weight: 400;

  line-height: 14px;

  margin-bottom: 10px;

  text-transform: capitalize;

}

.contact-form form input[type="text"], .contact-form form input[type="email"] {

  border: 1px solid #ddd;

  height: 40px;

  padding: 7px 15px;

  width: 100%;

}

.contact-form form textarea {

  border: 1px solid #ddd;

  display: block;

  height: 100px;

  padding: 7px 15px;

  width: 100%;

}

.contact-form form input[type="submit"] {

  background-color: #282828;

  border: medium none;

  color: #fff;

  height: 40px;

  margin: 0;

  padding: 7px 50px;

  text-transform: uppercase;

  width: auto;

}

.contact-form form input[type="submit"]:hover {

  background-color: #3c78ff;

}



/*-- Contact Map --*/

#contact-map {

  height: 400px;

  width: 100%;

}





/* -----------------------------------

  15. Login & Register Page

--------------------------------------*/

.login-reg-form {

  border: 1px solid #ddd;

  padding: 40px;

}

.login-reg-form form label {

  display: block;

  font-weight: 400;

  line-height: 18px;

  margin-bottom: 10px;

  overflow: hidden;

}

.login-reg-form form label.inline {

  margin: 10px 0 0;

}

.login-reg-form form label .required {

  color: #ff0000;

}

.login-reg-form form input[type="text"], .login-reg-form form input[type="email"], .login-reg-form form input[type="password"] {

  border: 1px solid #ddd;

  display: block;

  height: 40px;

  padding: 7px 15px;

  width: 100%;

}

.login-reg-form form select {

  -moz-appearance: none;

  -webkit-appearance: none;

  appearance: none;

  background: rgba(0, 0, 0, 0) url("../image/select-arrow-down.png") no-repeat scroll right 5px center;

  border: 1px solid #ddd;

  height: 40px;

  padding: 7px 15px;

  text-transform: capitalize;

  width: 100%;

}

.login-reg-form form select option {

  padding: 5px 15px;

}

.login-reg-form form input[type="checkbox"] {

  float: left;

  margin-right: 10px;

  margin-top: 3px;

}

.login-reg-form form input[type="submit"] {

  background-color: #282828;

  border: medium none;

  color: #fff;

  float: left;

  height: 40px;

  margin: 0 15px 0 0;

  padding: 7px 50px;

  text-transform: uppercase;

  width: auto;

}

.login-reg-form form input[type="submit"]:hover {

  background-color: #3c78ff;

}

.login-reg-form form a {

  color: #3c78ff;

}





/* -----------------------------------

  16. Comment Style

--------------------------------------*/

/*-- Comment Wrapper --*/

.comment-wrapper {}

.comment-wrapper h3 {

  color: #666666;

  display: block;

  font-size: 24px;

  line-height: 18px;

  margin-bottom: 45px;

}



/*-- Comment List --*/

.comment-list {}

.comment-list li {}

.comment-list li ul {

  margin-left: 100px;

}

.comment-list li ul li{}



/*-- Single Comment --*/

.single-comment {

  margin-bottom: 45px;

  padding-right: 30px;

}

.single-comment .image {

  border-radius: 50%;

  display: block;

  height: 90px;

  margin-right: 20px;

  width: 90px;

}

.single-comment .image img {

  border-radius: 50%;

  width: 100%;

}

.single-comment .content {}

.single-comment .content .head {

  margin-bottom: 10px;

}

.single-comment .content .head .author-time {

  float: left;

}

.single-comment .content .head .author-time h4 {

  color: #666666;

  font-size: 18px;

  font-weight: 500;

  line-height: 14px;

  margin-bottom: 7px;

}

.single-comment .content .head .author-time span {

  color: #999999;

  display: block;

  font-size: 12px;

  font-weight: 500;

  line-height: 14px;

}

.single-comment .content .head a {

  color: #3c78ff;

  display: block;

  float: right;

  font-size: 14px;

  font-weight: 400;

  margin-top: 5px;

}

.single-comment .content p {}



/*-- Comment Form --*/

.comment-form {}

.comment-form form {}

.comment-form form label {

  display: block;

  font-size: 14px;

  font-weight: 400;

  line-height: 14px;

  margin-bottom: 10px;

  text-transform: capitalize;

}

.comment-form form input {

  border: 1px solid #ddd;

  float: left;

  height: 40px;

  margin-bottom: 20px;

  padding: 7px 15px;

  width: 100%;

}

.comment-form form textarea {

  border: 1px solid #ddd;

  float: left;

  height: 120px;

  margin-bottom: 20px;

  padding: 7px 15px;

  width: 100%;

}

.comment-form form input[type="submit"] {

  background-color: #282828;

  border: medium none;

  color: #fff;

  height: 40px;

  margin: 0;

  padding: 7px 40px;

  text-transform: uppercase;

  width: auto;

}

.comment-form form input[type="submit"]:hover {

  background-color: #3c78ff;

}





@media (min-width: 768px) {

    .hidden-above-sm {

        display: none !important;

    }

}