@charset "UTF-8";
a,
a img,
address,
b,
blockquote,
body,
code,
dd,
div,
dl,
dt,
font,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
iframe,
img,
label,
li,
map,
ol,
p,
samp,
span,
strong,
table,
td,
th,
tr,
ul {
	padding: 0;
	margin: 0;
	border: 0;
	font-weight: normal;
	font-family:'PingFang SC','Microsoft YaHei','Hiragino Sans GB','Helvetica','Tahoma','Arial','SimSun','Heiti','sans-serif';
	list-style: none;
}

body,
html {
	position: relative;
	height: 100%;
}

body {
	background: #fff;
	font: normal 12px/22px "Source Han Sans CN";
}

img {
	border: 0;
}

a {
	text-decoration: none;
	color: #000;
}

.clearfix:after{content:"." ;display: block;height: 0;clear:both;visibility: hidden;}
.clearfix{ zoom:1;}
.clear {
	clear: both;
}

div, li, ul {
	box-sizing: border-box;
}

.fl {
	float: left;
}

.fr {
	float: right;
}
div{
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6{
	line-height: 1;
}



   .float-sidebar {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background-color: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 8px 0 0 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      padding: 0px 0;
      z-index: 999;
    }
    
    .sidebar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px 10px;
      cursor: pointer;
      transition: all 0.3s ease;
	    position: relative;
    }
    .sidebar-item:hover {
      background-color: #e9ffe9;
    }
    
    .sidebar-icon {
      width: 28px;
      height: 28px;
      margin-bottom: 5px;

    }

    .icon-service { background-image: url("https://stark-attachment.pxo.cn/img/202605271642590190520.png");
	 background-size: 100%;
	 }

    .icon-consult { background-image: url("https://stark-attachment.pxo.cn/img/202605271643080181950.png"); 
	background-size: 100%;}
	
    .icon-coupon { background-image: url("https://stark-attachment.pxo.cn/img/202605271643060106442.png"); 
	background-size: 100%;}


    .sidebar-text {
      font-size: 14px;
      color: #333;
	  text-align: center;
    }
 
	.sidebar-item:hover .sidebar-text{
		color: rgba(73, 162, 97, 1);
	}
	  
	    .hover-tooltip {
	      position: absolute;
	      right: 60px; 
	      top: 50%;
	      transform: translateY(-50%);
	      padding: 8px 12px;
	      border-radius: 4px;
	      width: 180px;
	      white-space: nowrap;
	      opacity: 0;
	      visibility: hidden;
	      transition: all 0.3s ease;
	      z-index: 998;
	    }
	
	    .sidebar-item:hover .hover-tooltip {
	      opacity: 1;
	      visibility: visible;
	      right: 60px; 
	    }
		
		.sidebar-item3 .hover-tooltip{
			   top:40px;
		}
		.sidebar-item2 .hover-tooltip img{
			   left:5px;
			   position: relative;
			   
		}
		.sidebar-item3 .hover-tooltip img{
			   left:5px;
			   position: relative;
			   
		}
		.sidebar-item4 .hover-tooltip{
			   top:-12%;
		}
:root {
  --green: #49a261;
  --green-soft: rgba(73, 162, 97, .10);
  --text: #1e1e1e;
  --muted: #707070;
  --line: #e9ecea;
  --shadow: 0 8px 26px rgba(25, 49, 33, .10);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
button { font: inherit; }
.container { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.header{
	width: 100%;
	height: 60px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;        
  background: #fff; 
}
.header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header-placeholder {
  display: none;
  height: 60px;
}
.header.fixed + .header-placeholder {
  display: block;
}
.header_top{
	width: 1200px;
	margin: 0 auto ;
	align-items: center;
	display: flex;
	justify-content: space-between;
	    height: 60px;
}
.header_top .header_left img{
	width: 147px;
    
}

.header_top .header_right ul{
    display: flex;
}
.header_top .header_right ul li{
	margin-left: 70px;
	height: 60px;
	line-height: 60px;
}
.header_top .header_right ul li a{
	cursor: pointer;
	font-weight: 400;
	font-size: 16px;
	color: #1E1E1E;
	position: relative;
}
.header_right ul li a.active,.header_right ul li a:hover {
	font-size: 16px;
	color: #49A261;
}
.header_right ul li a.active:after,.header_right ul li a:hover:after{
    position: absolute;
    bottom: -12px;
    width: 76px;
	margin-left: -38px;
    left: 50%;
    height: 3px;
    content: '';
    background: #49A261;
    border-radius: 20px;}
	.header_right li[class^="dropdown"] > ul > li a:hover:After {
	display: none;
	
	}

.header_right li{
	position: relative;
}

.header_right li[class^="dropdown"] > ul {
  display: none;
  position: absolute;
  top: 60px;
  left: -43px;
  background: #fff;
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 160px;
  z-index: 1000;
}

.header_right li[class^="dropdown"]:hover > ul {
  display: block;
}

.header_right li[class^="dropdown"] > ul > li {
  list-style: none;
  margin: 0 auto 0;
  height: 36px;
}


.header_right li[class^="dropdown"] > ul > li + li {
  margin-top: 8px;
}


.header_right li[class^="dropdown"] > ul > li a {
  display: block;
  padding: 8px 16px;
  color: #333;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}


.header_right li[class^="dropdown"] > ul > li a:hover {
  background: rgba(0,0,0,0.05);
  border-radius: 8px;
}

/* Header */
.site-header { height: 64px; background: #fff; border-bottom: 1px solid #f3f3f3; }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.logo { display: block; flex: 0 0 auto; object-fit: contain; }
.main-nav { height: 100%; display: flex; align-items: stretch; gap: 46px; }
.nav-link {
  height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--text); font-size: 16px; white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--green); }
.nav-link.active { font-weight: 600; border-bottom: 3px solid var(--green); }
.nav-dropdown { position: relative; height: 100%; }
.product-menu {
  position: absolute; z-index: 30; top: 64px; left: 50%; width: 190px; padding: 8px 0;
  border-radius: 10px; background: #fff; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: .16s ease;
}
.nav-dropdown:hover .product-menu, .nav-dropdown:focus-within .product-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.product-menu button {
  width: 100%; height: 40px; border: 0; background: #fff; cursor: pointer; color: var(--text);font-size: 14px;
}
.product-menu button:hover, .product-menu button:focus-visible { color: var(--green); background: #f7fbf8; outline: 0; }

/* Hero: full width, max 1920 */
.hero {
  width: min(100%, 1920px); margin: 0 auto; display: grid; overflow: hidden; background: var(--green);
}
.hero > * { grid-area: 1 / 1; }
.hero img { width: 100%; aspect-ratio: 1920 / 700; object-fit: cover; display: block; }
.hero-copy { align-self: center; width: min(1360px, 72%); margin-inline: auto; color: #fff; }
.hero-copy h1 { margin: 0; font-size: clamp(42px, 5.2vw, 100px); line-height: 1.2; letter-spacing: .04em; }

/* Product tabs */
.quickbar { position: sticky; z-index: 20; top: 0; background: rgba(255,255,255,.96); box-shadow: 0 3px 12px rgba(0,0,0,.08); backdrop-filter: blur(10px); }
.quickbar-inner { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 28px; overflow-x: auto; }
.quick-item {font-size: 16px; flex: 0 0 auto; height: 56px; padding: 0 4px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; }
.quick-item:hover, .quick-item.active { color: var(--green); }
.quick-item.active { border-bottom-color: var(--green); }

/* Product content */
.product-panel { display: none; }
.product-panel.active-panel { display: block; }
.product-content { padding-block: 64px 90px; }
.section-heading p { margin: 0 0 2px; color: #aaa; font-size: 18px; }
.section-heading h2 { margin: 0; padding-left: 18px; border-left: 5px solid var(--green); font-size: 46px; line-height: 1.35; }
.section-heading.spaced { margin-top: 62px; }
.intro-banner {
  margin-top: 30px; min-height: 100px; padding: 18px 28px; border-radius: var(--radius);
  display: flex; align-items: center; gap: 28px; color: #fff; background: var(--green);
}
.intro-banner img { flex: 0 0 auto; max-width: 76px; max-height: 76px; object-fit: contain; }
.intro-banner h3 { margin: 0 0 6px; font-size: 25px; }
.intro-banner p { margin: 0; line-height: 1.7;font-size: 15px; }
.feature-group { margin-top: 42px; }
.group-title { margin: 0 0 22px; color: var(--green); font-size: 30px; font-weight: 500; text-align: center; }
.card-grid { display: grid; gap: 22px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card, .service-card, .framework-card, .wide-card, .list-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.soft .card, .soft .list-card { background: var(--green-soft); }
.card { min-height: 180px; padding: 28px 20px; transition: transform .18s ease, box-shadow .18s ease; }
.card:hover, .service-card:hover, .framework-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h4, .list-card h4, .framework-card h4 { margin: 0 0 16px; font-size: 22px; font-weight: 500; text-align: center; }
.card p, .list-card p, .framework-card p {font-size: 16px; margin: 0; color: var(--muted); line-height: 1.75;text-align: justify; }
.wide-card { padding: 30px 42px; color: var(--muted); font-size: 20px; line-height: 1.8; text-align: center; }
.list-grid { display: grid; gap: 14px; }
.list-card { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 20px; padding: 18px 24px; }
.list-card h4 { margin: 0; text-align: left; }

/* Dream school */
.solution-summary { margin: 28px 0 0; color: #444; line-height: 1.9; }
.service-grid { margin-top: 30px; }
.service-card { padding: 28px 30px; border-color: rgba(73,162,97,.45); }
.service-card > span { color: #9bc7aa; font-size: 15px; }
.service-card h3 { margin: 4px 0 18px; color: var(--green); font-size: 30px; }
.service-card p { margin: 10px 0; color: #444; line-height: 1.75; }
.service-card strong { color: var(--green); font-weight: 500; }
.framework-section { margin-top: 54px; }
.framework-goal { width: fit-content; margin: 0 auto 28px; padding: 14px 26px; border-radius: 999px; color: #fff; background: var(--green); font-size: 20px; }
.framework-card { padding: 24px 20px; }
.framework-card img { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto 14px; }
.framework-card ul { margin: 16px 0 0; padding-left: 20px; color: #555; line-height: 1.9; }

/* CTA + footer */
.closing-section { padding-top: 20px; }
.consultation-box { margin-bottom: 80px; padding: 72px 30px; background: var(--green-soft); text-align: center; }
.consultation-box h2 { margin: 0 0 16px; font-size: 34px; }
.consultation-box p { margin: 0 0 38px; color: #666; font-size: 20px; }
.consultation-button { min-width: 220px; height: 58px; border: 0; border-radius: 999px; background: var(--green); color: #fff; cursor: pointer; font-size: 20px; }
.site-footer { background: #2c2c2c; color: #fff; }
.footer-inner { min-height: 320px; padding-block: 50px; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 70px; align-items: start; }
.footer-qr { max-width: 172px; height: auto; justify-self: center; }
.site-footer h3 { margin: 0 0 14px; color: var(--green); font-size: 16px; }
.site-footer ul { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 2; }

/* Modal */
.consultation-modal { position: fixed; z-index: 100; inset: 0; display: none; place-items: center; padding: 24px; background: rgba(0,0,0,.52); }
.consultation-modal.open { display: grid; }
.popup-content { display: grid; width: min(828px, 94vw); }
.popup-content > * { grid-area: 1 / 1; }
.popup-content img { width: 100%; height: auto; display: block; }
.popup-close { justify-self: end; align-self: start; margin: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.3); color: #fff; cursor: pointer; font-size: 30px; line-height: 1; }

@media (max-width: 1100px) {
  .main-nav { gap: 24px; }
  .cols-6 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-inner { gap: 30px; }
}

@media (max-width: 760px) {
  .site-header { height: auto; }
  .header-inner { min-height: 64px; }
  .main-nav { gap: 18px; overflow-x: auto; }
  .main-nav .nav-link:not(.active) { display: none; }
  .hero-copy { width: 84%; }
  .quickbar-inner { justify-content: flex-start; }
  .product-content { padding-block: 42px 64px; }
  .section-heading h2 { font-size: 34px; }
  .section-heading.spaced { margin-top: 44px; }
  .intro-banner { align-items: flex-start; gap: 18px; }
  .group-title { font-size: 25px; text-align: left; }
  .cols-2, .cols-3, .cols-4, .cols-6 { grid-template-columns: 1fr; }
  .card { min-height: auto; }
  .list-card { grid-template-columns: 1fr; gap: 8px; }
  .list-card h4 { text-align: left; }
  .framework-goal { width: 100%; border-radius: 12px; text-align: center; }
  .consultation-box { width: calc(100% - 32px); padding: 48px 20px; margin-bottom: 48px; }
  .consultation-box h2 { font-size: 28px; }
  .consultation-box p { font-size: 17px; }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-qr { grid-column: 1 / -1; }
}


   .float-sidebar {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background-color: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 8px 0 0 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      padding: 0px 0;
      z-index: 999;
    }
    
    .sidebar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px 10px;
      cursor: pointer;
      transition: all 0.3s ease;
	    position: relative;
    }
    .sidebar-item:hover {
      background-color: #e9ffe9;
    }
    
    .sidebar-icon {
      width: 28px;
      height: 28px;
      margin-bottom: 5px;

    }

    .icon-service { background-image: url("https://stark-attachment.pxo.cn/img/202605271642590190520.png");
	 background-size: 100%;
	 }

    .icon-consult { background-image: url("https://stark-attachment.pxo.cn/img/202605271643080181950.png"); 
	background-size: 100%;}
	
    .icon-coupon { background-image: url("https://stark-attachment.pxo.cn/img/202605271643060106442.png"); 
	background-size: 100%;}


    .sidebar-text {
      font-size: 14px;
      color: #333;
	  text-align: center;
    }
 
	.sidebar-item:hover .sidebar-text{
		color: rgba(73, 162, 97, 1);
	}
	  .float-sidebar img{
		  width: 100%;
	  }
	    .hover-tooltip {
	      position: absolute;
	      right: 60px; 
	      top: 50%;
	      transform: translateY(-50%);
	      padding: 8px 12px;
	      border-radius: 4px;
	      width: 180px;
	      white-space: nowrap;
	      opacity: 0;
	      visibility: hidden;
	      transition: all 0.3s ease;
	      z-index: 998;
	    }
	
	    .sidebar-item:hover .hover-tooltip {
	      opacity: 1;
	      visibility: visible;
	      right: 60px; 
	    }
		
		.sidebar-item3 .hover-tooltip{
			   top:40px;
		}
		.sidebar-item2 .hover-tooltip img{
			   left:5px;
			   position: relative;
			   
		}
		.sidebar-item3 .hover-tooltip img{
			   left:5px;
			   position: relative;
			   
		}
		.sidebar-item4 .hover-tooltip{
			   top:-12%;
		}
.footer{
	height: 355px;
	background: #2C2C2C;
	padding-top:1px ;
}

.footer .footer_cont{
	width: 1200px;
	margin: 40px auto 0;
}

.footer_top{
	height: 195px;
	margin-top: 50px;
	border-bottom: 2px solid rgba(255,255,255,0.2);
}
.footer_left{
	float: left;
	width: 344px;
	height: 145px;

}
.footer_left img{
	width:172px;
	height: 160px;
	margin-left: 100px;
}
.footer_right{
	float: left;
	
}
.footer_right ul{
	float: left;
	margin-left: 160px;
}
.footer_right ul li h3{
	font-weight: 500;
	font-size: 16px;
	color: #49A261;
}

.footer_right ul li:nth-child(2){
	margin-top: 16px;
}
.footer_right ul li a{
	font-weight: 400;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 26px;
}
.footer_bottom{
	width: 650px;
	margin: 36px auto 0;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.footer_bottom_left p{
	line-height: 26px;
}
.footer_bottom_left p a{
	font-weight: 400;
	font-size: 12px;
	color: #B3B3B3;
}
.footer_bottom_left{
		display: inline-block;
		width: 400px;
}
.footer_bottom_right{
	display: inline-block;
	    width: 184px;
}
.footer_bottom_right img {
    width: 184px;
    height: 47px;
}