#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .h2title_box {font-size: 15px;}
section .title_box {padding-bottom: 3vw;font-size: 40px;font-size: max(2.8 * (1vw + 1vh) / 2, 28px);}
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
section .container {padding-right: 0;padding-left: 0;margin-right: auto;margin-left: auto;display: flex;flex-direction: column;align-items: center;width: 90%;}
section .container .pageh1 {position: relative;font-size: 1rem;max-width: 700px;margin: 0 auto;color: #aaaaaa;text-shadow: 0 2px 10px rgba(0,0,0,0.8);font-weight: 400;text-align: center;}

/*values-section*/
#values-section { margin-top: -100px; position: relative; z-index: 10; padding: 0 20px; }
#values-section .grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
#values-section .value-card {position: relative;background: rgba(15,15,15,0.5);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);padding: 40px 30px;border-radius: 8px;border: 1px solid rgb(255 255 255 / 25%);border-top: 2px solid rgb(124 255 190 / 50%);box-shadow: 0 15px 40px rgba(0,0,0,0.6),inset 0 0 20px rgba(255,255,255,0.02);transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);}
#values-section .value-card:hover {border-top-color: #7CFFBE;transform: translateY(-10px);box-shadow: 0 20px 50px rgba(0,0,0,0.8),0 0 30px rgba(42,66,130,0.2),inset 0 0 20px rgba(42,66,130,0.1);}
#values-section .card-label { font-size: 0.8rem; color: #5c88ff; font-weight: bold; text-transform: uppercase; margin-bottom: 10px; letter-spacing: 2px; }
#values-section .card-title { font-size: 1.5rem; font-weight: 900; color: #ffffff; margin-bottom: 15px; letter-spacing: -0.5px; }
#values-section .card-desc { font-size: 0.95rem; color: #aaaaaa; line-height: 1.6; }

/*about-section*/
#about-section {padding: 120px 0;position: relative;overflow: hidden;background-image: url(/images/44/indexabout_bg.png);background-position: 50% 100%;background-size: cover;}
#about-section::before { content: ''; position: absolute; top: 30%; right: -10%; width: 50vw; height: 50vw; background: radial-gradient(circle,rgba(42,66,130,0.08) 0%,transparent 70%); border-radius: 50%; pointer-events: none; z-index: 1; }
#about-section .about-header { text-align: center; margin-bottom: 80px; position: relative; z-index: 2; }
#about-section .about-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 50px; align-items: center; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
#about-section .col-text { padding-right: 20px; }
#about-section .about-desc {font-size: 1.05rem;color: #aaaaaa;line-height: 1.8;margin: 30px 0 40px;font-weight: 500;}
#about-section .col-image { position: relative; }
#about-section .image-wrapper { position: relative; z-index: 2; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.1); }
#about-section .image-wrapper img {width: 100%;display: block;opa;opacity: 1;transition: all 0.5s ease;filter: contrast(1.1) brightness(0.9);}
#about-section .image-wrapper:hover img { opacity: 1; transform: scale(1.03); filter: contrast(1.2) brightness(1); }
#about-section .image-decor {position: absolute;bottom: -30px;left: -30px;width: 80%;height: 80%;background: repeating-linear-gradient(-45deg, #757575, #4d4d4d 3px, transparent 3px, transparent 12px);z-index: 1;border-radius: 4px;opacity: 0.8;box-shadow: 0 0 20px rgba(20,30,56,0.5);}
#about-section .col-list { padding-left: 20px; }
#about-section .feature-item {margin-bottom: 30px;background: rgb(124 255 190 / 5%);padding: 20px;border-radius: 8px;border-left: 3px solid #7CFFBE;transition: background 0.3s ease;}
#about-section .feature-item:hover { background: rgba(255,255,255,0.05); }
#about-section .feature-title { display: flex; align-items: center; font-size: 1.2rem; font-weight: 900; color: #ffffff; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1.5px; text-shadow: 0 0 10px rgba(42,66,130,0.4); }
#about-section .feature-title::before {content: '';display: block;width: 8px;height: 8px;background-color: #7CFFBE;margin-right: 12px;box-shadow: 0 0 10px #7CFFBE,0 0 5px #ffffff;transform: rotate(45deg);}
#about-section .feature-desc { font-size: 0.9rem; color: #aaaaaa; line-height: 1.6; }

#solutions-section {padding: 100px 0;background: linear-gradient(0deg, #11171d, #000000);text-align: center;border-top: 1px solid rgba(255,255,255,0.05);position: relative;}
#solutions-section .container{display:flex;flex-direction: column;align-items: center;width: 90%;max-width: 100%;}
#solutions-section .main-title { text-align: center; max-width: 700px; margin: 0 auto 60px; }
#solutions-section .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; text-align: left; position: relative; z-index: 2; }
#solutions-section .solution-card {background: rgba(15,15,15,0.6);backdrop-filter: blur(10px);border: 1px solid rgb(255 255 255 / 25%);transition: all 0.3s ease;overflow: hidden;border-radius: 8px;}
#solutions-section .solution-card:hover {border-color: #7CFFBE;box-shadow: 0 15px 40px rgba(20,30,56,0.4),inset 0 0 15px rgba(20,30,56,0.2);transform: translateY(-5px);}
#solutions-section .card-img {width: 100%;height: 220px;object-fit: cover;border-bottom: 1px solid rgb(255 255 255 / 25%);opacity: 0.8;filter: grayscale(50%) contrast(1.2);transition: all 0.4s ease;}
#solutions-section .solution-card:hover .card-img { opacity: 1; filter: grayscale(0%) contrast(1.1); border-bottom-color: #2a4282; }
#solutions-section .card-body { padding: 35px 30px; }
#solutions-section .sol-title { font-size: 1.4rem; font-weight: 900; color: #ffffff; margin: 10px 0 20px; letter-spacing: -0.5px; }
#solutions-section .sol-list { list-style: none; margin-bottom: 25px; }
#solutions-section .sol-list li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 0.95rem; color: #aaaaaa; }
#solutions-section .sol-list li::before {content: '>';position: absolute;left: 0;color: #7CFFBE;font-size: 1rem;top: 0px;font-family: monospace;font-weight: bold;text-shadow: 0 0 5px #3ea371;}
#solutions-section .sol-tag { display: inline-block; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 8px 15px; font-size: 0.85rem; color: #dddddd; border-radius: 4px; font-weight: bold; letter-spacing: 1px; }
		

#services-section {padding: 100px 0;position: relative;background: linear-gradient(0deg, #0b0f12, #11171d);}
#services-section .grid {display: grid;grid-template-columns: repeat(2,1fr);gap: 40px;margin: 50px 0;}
#services-section .service-card {border: 1px solid rgba(255,255,255,0.25);padding: 50px;position: relative;transition: all 0.3s ease;background: rgba(20,20,20,0.4);backdrop-filter: blur(8px);border-radius: 8px;display: flex;flex-direction: column;gap: 30px;}

#services-section .service-card:hover {background: rgba(30,30,30,0.6);border-color: rgba(255,255,255,0.15);box-shadow: 0 10px 40px rgba(0,0,0,0.6);border: 1px solid #7CFFBE;}

#services-section .srv-title { font-size: 1.8rem; font-weight: 900; color: #ffffff; margin: 10px 0 20px; letter-spacing: -0.5px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
#services-section .srv-desc { font-size: 1rem; color: #aaaaaa; line-height: 1.7; margin-bottom: 20px; }
		

/* === Execution Pipeline (Process + Ecosystem) === */
#execution-pipeline { padding: 120px 0; background: radial-gradient(ellipse at bottom left,rgba(20,30,56,0.2) 0%,transparent 60%); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; }
#execution-pipeline .layout-wrapper {display: flex;gap: 80px;align-items: flex-start;flex-direction: unset;}
/* (Sticky Sidebar) */
#execution-pipeline .sticky-sidebar {position: sticky;top: 130px;width: 50%;padding-bottom: 40px;display: flex;flex-direction: column;}
#execution-pipeline .sidebar-desc { font-size: 1.1rem; color: #aaaaaa; line-height: 1.8; margin-bottom: 40px; }
#execution-pipeline .ecosystem-block {margin-top: 40px;padding-top: 40px;border-top: 1px solid rgba(255,255,255,0.25);}
#execution-pipeline .eco-title { font-size: 0.9rem; color: #8bb0ff; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; margin-bottom: 25px; display: flex; align-items: center; }
#execution-pipeline .eco-title::before { content: ''; display: inline-block; width: 30px; height: 1px; background: #5c88ff; margin-right: 15px; box-shadow: 0 0 8px #5c88ff; }
#execution-pipeline .logos-container { display: flex; flex-direction: column; gap: 15px; }
#execution-pipeline .logo-item {background: rgba(10,15,28,0.5);border: 1px solid rgb(124 255 190 / 25%);padding: 20px 30px;border-radius: 8px;font-weight: 900;color: #888888;font-size: 1.2rem;letter-spacing: 2px;transition: all 0.3s ease;backdrop-filter: blur(5px);text-align: center;}
#execution-pipeline .logo-item:hover {background: rgba(42,66,130,0.3);border-color: #7CFFBE;color: #ffffff;box-shadow: 0 5px 20px rgba(20,30,56,0.8),inset 0 0 10px rgba(92,136,255,0.2);transform: translateX(5px);}
#execution-pipeline .main-title{
    text-align: left;
}
#execution-pipeline .section-tag{
}
/* (Scrolling Timeline) */
#execution-pipeline .scrolling-content {width: 50%;display: flex;flex-direction: column;gap: 40px;position: relative;padding-left: 50px;margin-top: 20px;}
#execution-pipeline .scrolling-content::before {content: '';position: absolute;left: 0;top: 0;width: 2px;height: 100%;background: linear-gradient(to bottom, transparent, #7CFFBE 15%, #54ad81 85%, transparent);opacity: 0.5;}
#execution-pipeline .process-step {background: rgba(15,15,15,0.6);backdrop-filter: blur(10px);border: 1px solid rgb(255 255 255 / 25%);padding: 40px;border-radius: 8px;position: relative;transition: all 0.4s ease;}
#execution-pipeline .process-step::before {content: '';position: absolute;left: -56px;top: 45px;width: 14px;height: 14px;border-radius: 50%;background: #050505;border: 2px solid #7CFFBE;z-index: 2;transition: all 0.3s ease;}
#execution-pipeline .process-step::after { content: ''; position: absolute; left: -50px; top: 52px; width: 50px; height: 1px; background: rgba(92,136,255,0.2); z-index: 1; transition: all 0.3s ease; }
#execution-pipeline .process-step:hover {transform: translateX(10px);border-color: rgb(124 255 190 / 35%);box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), inset 5px 0 0 #7CFFBE;background: rgba(20,30,56,0.4);}
#execution-pipeline .process-step:hover::before {background: #7CFFBE;border-color: #ffffff;box-shadow: 0 0 15px #7CFFBE;}
#execution-pipeline .process-step:hover::after {background: #7CFFBE;box-shadow: 0 0 8px #7CFFBE;}
#execution-pipeline .step-num { font-size: 3rem; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(92,136,255,0.3); margin-bottom: 10px; font-family: 'Courier New',Courier,monospace; transition: all 0.3s; }
#execution-pipeline .process-step:hover .step-num { color: #5c88ff; -webkit-text-stroke: 0px; text-shadow: 0 0 15px rgba(92,136,255,0.6); }
#execution-pipeline .step-title { font-size: 1.4rem; font-weight: 900; margin-bottom: 15px; color: #ffffff; letter-spacing: 0.5px; transition: color 0.3s; }
#execution-pipeline .step-desc { font-size: 1rem; color: #aaaaaa; line-height: 1.6; }



/* product_area */
#product_area .title_box {width: 85%;margin: 0 auto;}

/* product_list */
#product_list li{background:#fff;margin: 0 5px;}
#product_list li .clip img {aspect-ratio:4/3}
#product_list li .info_box {padding: 30px;}
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 { height: auto; font-size: 20px; }
#product_list li .info_box p {height: auto;font-weight: 300;font-size: 14px;color: #9b9b9b;-webkit-line-clamp: 4;}
#product_list li .info_box article{font-size: 14px;margin-top: 20px;font-weight: 600;}
#product_list li:hover .info_box h3, #product_list li:hover .info_box article{color:var(--primary)}
#product_list li .info_box article svg{fill:var(--primary);width: 14px;height: 14px;margin-left: 10px;}
#product_list .slick-prev{background:var(--primary);left: -100px;border-radius: 50px;width: 50px;height: 50px;}
#product_list .slick-prev:before{content:url(/images/44/arrow2.png);}
#product_list .slick-next{background:var(--primary);right: -100px;border-radius: 50px;width: 50px;height: 50px;}
#product_list .slick-next:before{content:url(/images/44/arrow.png);}


/* news_area */
#news_area li{margin:0 10px;}
#news_area li .img_box , #book_area li .img_box {background-color: #f9f9f9;}
#news_area li .info_box {margin: 20px 25px;}
#news_area li .time {width: 75px;font-weight: 400;font-size: 13px;color: #9b9b9b;}
#news_area li .more_btn { margin-left: 10px; padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#news_area li h3 { margin-top: 10px; height: 60px; line-height: 150%; font-size: 20px; -webkit-line-clamp: 2; }
#news_area li p.tt {margin-top: 10px;height: auto;line-height: 150%;font-size: 15px;-webkit-line-clamp: 2;color: #9b9b9b;}
#news_area li .info_box article{font-size: 14px;margin-top: 20px;font-weight: 600;}
#news_area li .info_box article svg{fill:var(--primary);width: 14px;height: 14px;margin-left: 10px;}
#news_area li:hover .info_box article svg{margin-left:20px;}
#news_area li:hover .info_box article{color:var(--primary)}

/* book_area */
#book_area li{margin: 0 20px 20px;box-shadow: 0 5px 10px rgb(0 0 0 / 10%);position: relative;}
#book_area li .img_box img{aspect-ratio:4/3}
#book_area li h3 {margin: 20px 30px;height: 60px;font-size: 18px;-webkit-line-clamp: 2;}
#book_area li:hover h3{color:var(--primary)}
#book_area .slick-prev{background:var(--primary);left: -100px;border-radius: 50px;width: 50px;height: 50px;}
#book_area .slick-prev:before{content:url(/images/44/arrow2.png);}
#book_area .slick-next{background:var(--primary);right: -100px;border-radius: 50px;width: 50px;height: 50px;}
#book_area .slick-next:before{content:url(/images/44/arrow.png);}

/* photo_area */
#photo_area{border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;padding: 3vw 0;}
#photo_area .title_box{padding-bottom: 1vw;}
#photo_area li{margin: 20px 15px;box-shadow: 0 0 15px rgb(0 0 0 / 15%);padding: 20px 0;}

/* esg_area */
#esg_area .workframe{display:grid;grid-template-columns: 45% 50%;justify-content: space-between;align-items: center;}
#esg_area h3{padding-bottom: 0;}
#esg_area p{font-size:20px;font-weight: 500;margin-bottom: 30px;}
#esg_area a{background:var(--primary);display: inline-block;margin-top: 30px;color: white;padding: 15px 30px;}

@media screen and (max-width: 1460px) {

	#book_area .slick-prev{left: -50px;}
	#book_area .slick-next{right: -50px;}
}
@media screen and (max-width: 1280px) {
	#product_area .title_box{width:95%;}
	#product_list .slick-next, #product_list .slick-prev, #book_area .slick-next, #book_area .slick-prev{display: none !important;!i;!;}
}
@media screen and (max-width: 1024px) {
	#about-section .about-grid { grid-template-columns: 1fr; gap: 60px; text-align: center; }
    #about-section .col-text, #about-section .col-list { padding: 0; }
    #about-section .image-decor { bottom: -15px; left: -15px; width: 50%; }
    #about-section .feature-title { justify-content: center; }
    #about-section .feature-item {border-left: none;border-bottom: 3px solid #2a4282;background: rgb(20 24 36 / 71%);}
	 #solutions-section .grid { grid-template-columns: repeat(2, 1fr); }
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
	#execution-pipeline .layout-wrapper {flex-direction: column;gap: 40px;width: 90%;}
    #execution-pipeline .sticky-sidebar { position: relative; top: 0; width: 100%; padding-bottom: 20px; }
    #execution-pipeline .scrolling-content {width: 100%;padding-left: 30px;margin-top: 0;}
    #execution-pipeline .scrolling-content::before { left: 0; }
    #execution-pipeline .process-step::before { left: -36px; }
    #execution-pipeline .process-step::after { left: -30px; width: 30px; }
    #execution-pipeline .logos-container { flex-direction: row; flex-wrap: wrap; }
    #execution-pipeline .logo-item { flex: 1; min-width: 200px; }
}
@media screen and (max-width: 980px) {
    #esg_area .workframe{display:flex;flex-direction: column;gap: 50px;}
	section .title_box{padding-bottom: 5vw;}
	#about_info .contentbuilder{display:grid;grid-template-columns: 1fr;gap: 50px;}
	#about_info .contentbuilder >div{max-width:100%;text-align: center;}
	section {padding: 10vw 0;}

}
@media screen and (max-width:768px) {
  section { padding: 12vw 0; }
  #services-section { padding: 40px 0; }
  #solutions-section { padding: 40px 0; }
  #execution-pipeline { padding: 40px 0; }
  #values-section { margin-top: -60px; }
  #values-section .grid { grid-template-columns: 1fr; }
  #solutions-section .grid { grid-template-columns: 1fr; }
  #services-section .grid { grid-template-columns: 1fr; }
  #execution-pipeline .scrolling-content { padding-left: 16px; }
  #about-section { padding: 60px 0; }
  #solutions-section .sol-title { font-size: 1.25rem; }
  #solutions-section .card-body { padding: 30px 20px; }
  #about-section .col-image { width: min(300px,90%); margin: 0 auto; }
  #services-section .service-card { padding: 20px; }
  #execution-pipeline .process-step { padding: 20px; width: 81%; border: #787878 1px solid; transform: translateX(10px); border-color: rgba(92,136,255,0.3); box-shadow: 0 15px 40px rgba(0,0,0,0.8),inset 5px 0 0 #5c88ff; background: rgba(20,30,56,0.4); }
  #execution-pipeline .process-step::before { background: #5c88ff; border-color: #ffffff; box-shadow: 0 0 15px #5c88ff; }
  #execution-pipeline .step-num { color: #5c88ff; -webkit-text-stroke: 0px; text-shadow: 0 0 15px rgba(92,136,255,0.6); }
  #execution-pipeline .process-step::after { background: #5c88ff; box-shadow: 0 0 8px #5c88ff; }
}
@media screen and (max-width:550px) {
  #product_list li .clip img { height: auto; }
  #news_area li .row { margin: auto; width: 280px; }
}
@media screen and (max-width:480px) {
  #book_area li.row { margin: auto; width: 250px; }
}