@charset "utf-8";

/*---------------------------------------------------*/
.section{padding:clamp(30px, 4.6875vw, 90px) 0;}
.section h2{font-size:clamp(24px, 2.19vw, 42px);color:#0c0c10;font-weight: bold;text-align:center;margin-bottom: 15px;text-align: left;text-transform: uppercase;}
.section h2 span.section-blue{color: #02519e;}
.section h2 span.section-yellow{color: #f0cb35;}
.section p{font-size: clamp(14px, 0.83vw, 16px);color: #0c0c10;line-height: 24px;}

@media screen and (max-width:991px){
.section h2{line-height: 28px;}
.section p{line-height: 20px;}
}

.index-advantages h2{text-align:center;}
.index-advantages p{text-align:center;}

.index-advantages .list{margin:clamp(30px, 2.604167vw, 50px) 0 0;position:relative;}

.index-advantages ul{grid-template-columns: repeat(4, 1fr);display: grid;gap: 20px;}
.index-advantages ul li{}
.index-advantages ul li img{width:100%;transition: all .3s;}

@media screen and (min-width:992px){
.index-advantages ul li:hover img{transform:scale(1.02);}
}


@media screen and (max-width:991px){
.index-advantages ul{grid-template-columns: repeat(2, 1fr);gap: 15px;}
}

.index-pic{background: #0e70d1;padding: 30px 10px;}
.index-pic1{background:#083c8f;padding: 30px 10px;}
.index-pic ul,.index-pic1 ul{grid-template-columns: repeat(5, 1fr);display: grid;gap: 10px;}
.index-pic ul li,.index-pic1 ul li{overflow: hidden;text-align: center;}
.index-pic ul li img,.index-pic1 ul li img{width:100%;aspect-ratio: 1 / 1;object-fit: cover;border-radius: 10px;}
.index-pic ul li a,.index-pic1 ul li a{display: inline-block;color: #0e70d1;background: #fff;padding: 10px 25px;border-radius: 5px;margin-top: 15px;font-weight: 500;font-size: clamp(14px, 0.94vw, 18px); text-decoration: none;position: relative;overflow: hidden;border: 1px solid #0e70d1;transition: all 0.3s ease;}
.index-pic ul li a::before ,.index-pic1 ul li a::before {content: "";position: absolute;top: 0;left: -100%;width: 50%;height: 100%;background: linear-gradient( to right,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);transform: skewX(-25deg);transition: left 0.6s ease;}
.index-pic1 ul li a{color: #083c8f;border: 1px solid #083c8f;}


@media screen and (min-width:992px){
.index-pic ul li a:hover ,.index-pic1 ul li a:hover {background: #000;color: #fff;}
.index-pic ul li a:hover::before ,.index-pic1 ul li a:hover::before {left: 120%;}
}

@media screen and (max-width:991px){
.index-pic ul,.index-pic1 ul{grid-template-columns: repeat(3, 1fr);}
}

@media screen and (max-width:576px){
.index-pic ul,.index-pic1 ul{grid-template-columns: repeat(2, 1fr);}
.index-pic ul li a ,.index-pic1 ul li a {padding: 8px 18px;}    
}

                              
                              
.index-process p{text-align:center;}
.index-process h2{text-align:center;position:relative;padding-bottom: 20px;}
.index-process h2:before{content:'';position:absolute;left:50%;bottom:0;width:min(520px,70%);height:3px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(255,255,255,.45) 0 38%,transparent 38% 62%,rgba(255,255,255,.45) 62% 100%);z-index:0;}
.index-process h2:after{content:'';position:absolute;left:50%;bottom:-4px;width:250px;height:11px;transform:translateX(-50%);background: linear-gradient(90deg, #fff 0 46%, transparent 46% 54%, #ffd400 54% 100%);clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);z-index:1}


.index-process .list{margin:clamp(30px, 2.604167vw, 50px) 0 0;position:relative;}

.index-process ul{grid-template-columns: repeat(6, 1fr);display: grid;gap: 20px;}
.index-process ul li{position:relative;overflow:visible}
.index-process ul li img{width:100%;transition: all .3s;aspect-ratio: 3 / 4;object-fit: cover;border-top-right-radius: 60px;margin-bottom: 10px;position: relative;}
.index-process ul li h5{color: #fff;font-size: clamp(16px, 1.25vw, 24px);font-weight: bold;}
.index-process ul li span{color: #fff;font-size: clamp(15px, 0.94vw, 18px);margin: 5px 0;display: block;}
.index-process ul li p{color: #fff;font-size: clamp(14px, 0.78vw, 15px);text-align: left;line-height: 20px;}

.index-process ul li:before{content:attr(data-num);position:absolute;top: -10px;right: -6px;z-index: 0;width:46px;height:46px;border-radius:50%;color: #ffffff87;font-size: clamp(36px, 2.81vw, 54px);font-weight:bold;font-style:italic;line-height:44px;text-align:center;backdrop-filter:blur(2px);transition:transform .3s ease,background .3s ease,color .3s ease,border-color .3s ease}
.index-process ul li:hover:before{transform:scale(1.12) rotate(-6deg);color:#fff;border-color:#ffd400}

@media screen and (min-width:992px){
.index-process ul li:hover img{transform:scale(1.02);}
}


@media screen and (max-width:991px){
.index-process ul{grid-template-columns: repeat(3, 1fr);gap: 15px;}
}                              


@media screen and (max-width:576px){
.index-process ul{grid-template-columns: repeat(2, 1fr);gap: 10px;}
.index-process h2:after {bottom: -2px;height: 8px;}  
}                              
                               
     
.index-category h2,.index-category1 h2{text-align:center;}        
.index-category ul,.index-category1 ul{margin-top:clamp(30px, 2.08vw, 40px);grid-template-columns: repeat(4, 1fr);display: grid;gap: 20px;}  

@media screen and (max-width:991px){
.index-category ul,.index-category1 ul{grid-template-columns: repeat(2, 1fr);gap: 15px;}
}  
                          
                          



.index-cert h2,.index-cert p{text-align:center;}
.index-cert img{width:100%;margin-top:clamp(30px, 2.60vw, 50px)}

@media screen and (max-width: 768px) {
.index-cert {padding-right: 20px;padding-left: 20px;}
}

@media screen and (max-width: 576px) {
.index-cert {padding-right: 12px;padding-left: 12px;}
}

.index-exhibition h2,.index-exhibition p{text-align:center;}                                       
.index-exhibition ul {list-style: none;padding: 0;}
.exh-row-top {display: grid;grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1.5fr;gap: 6px;margin: clamp(30px, 2.60vw, 50px) 0 0;}
.exh-row-bottom {display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 6px;}
.index-exhibition li {overflow: hidden;min-height: 150px;border-radius: 10px;}
.index-exhibition li > a {display: block; height: 100%;}
.index-exhibition li img {width: 100%;height: 100%;min-height: 150px;object-fit: cover;display: block;transition: transform .5s ease;}
.index-exhibition li a:hover img {transform: scale(1.06);}
.exh-card {background: #083c8f;color: #fff;padding: 20px 25px;display: flex;flex-direction: column;justify-content: center;/* gap: 15px; */min-height: 150px;}
.exh-item {display: flex;align-items: center;gap: 12px;border-bottom: 1px solid #fff;padding: 15px 0;}
.exh-item:nth-child(3){border: none;}
.exh-item .ico {flex: 0 0 50px;width: 50px;height: 50px;line-height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: rgba(255, 255, 255, .12);color: #fff;}
.exh-item .ico img{min-height: 35px;height: 35px;object-fit: contain;}
.exh-item h4 {font-size: clamp(14px, 0.78vw, 15px);font-weight: 700;margin: 0 0 3px;color: #fff;line-height: 1.2;}
.exh-item p {font-size: 12px;margin: 0;color: #d5e2ef;line-height: 1.35;text-align: left;}

@media (max-width: 1200px) {
  .exh-row-top {grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr;}
}

@media (max-width: 991px) {
  .exh-row-top, .exh-row-bottom {grid-template-columns: 1fr 1fr; gap: 6px;}
  .exh-row-top .exh-card {grid-column: 1 / -1;}
  .index-exhibition li, .index-exhibition li img, .exh-card {min-height: 130px;}
}                                       

@media (max-width: 576px) {
  .exh-row-top .exh-card {padding: 15px 15px;}
  .exh-item {padding: 10px 0;}
}