* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

a{ text-decoration:none;}

body {

    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;

    line-height: 1.6;

    color: #333;

    background-color: #f5f5f5;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



.container1 {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 90px;

}



/* Header */

.header {

    background-color: #fff;

    padding-bottom:5px;

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

    position: relative;

    z-index: 100;

}

.header-bg{

    background-color: #b01f24;

    color: #fff !important;

    padding: 12px 0;

    text-align: center;

}

.header-bgol{

    background-color: #1d4ccf;

    color: #fff !important;

    padding: 12px 0;

    text-align: center;

    color: #fff;

}



.header-content {

    text-align: center;

}



.company-name {

	margin:0px auto;

    font-size: 24px;

    font-weight: 500;

    letter-spacing: 1px;

    width: 1200px;

	padding:0px 20px;

	text-align:left;

	display:block;

}



/* Hero Section */

.hero {

    height: 576px;

    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);

    background-image: url(images/icoo5.jpg);

    background-size: cover;

    background-position: center;

    background-blend-mode: overlay;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}

.herocol {

    height: 576px;

    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);

    background-image: url(images/icoo6.jpg);

    background-size: cover;

    background-position: center;

    background-blend-mode: overlay;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}





.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(30, 60, 114, 0.7);

    display: flex;

    align-items: center;

    justify-content: center;

}



.hero-content {

    text-align: center;

    color: white;

    z-index: 2;

    width: 1200px;

	padding:0px 20px;

}



.hero-title {

    font-size: 61px;

    font-weight: 400;

    margin-bottom: 20px;

    letter-spacing: 7px;

    text-align: left;

}



.hero-subtitle {

    font-size: 22px;

    font-weight: 300;

    opacity: 0.9;

    letter-spacing: 1px;

    text-align: left;

}



/* About Section */

.about {

    padding: 80px 0;

    background-color: #fff;

}



.section-title {

    text-align: center;

    font-size: 32px;

    color: #333;

    margin-bottom: 60px;

    position: relative;

    font-weight: 400;

}





.about-content {

    display: grid;

    grid-template-columns: 1fr 362px;

    gap: 57px;

    align-items: start;

}





.about-contentzs {

    display: grid;

    grid-template-columns: 1fr 551px;

    gap: 0px;

    align-items: start;



}





.about-text {

    font-size: 16px;

    line-height: 2.3;

    color: #666;

    text-indent: 2em;

}



.about-p p{padding-bottom: 18px;}





.about-text p {

    margin-bottom: 0px;

    text-align: justify;

}





.about-textop {

    font-size: 16px;

    line-height: 2.3;

    color: #666;

    text-indent: 2em;

}



.about-textop p {

    margin-bottom: 0px;

    text-align: justify;

}





.about-image {

    position: relative;

}



.about-image img {

    width: 100%;

    object-fit: cover;

    border-radius: 8px;

    height: 647px;

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

}





.about-imagezs {

    position: relative;

}



.about-imagezs img {

    width: 100%;

    object-fit: cover;

    border-radius: 8px;

    height: 745px;

}













.about-imageor {

    position: relative;

}



.about-imageor img {

    width: 100%;

    object-fit: cover;

    border-radius: 8px;

    height: 617px;

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

}





/* Services Section */

.services {

    padding: 80px 0;

    background-color: #efefef;

    background-image: url(images/icoo4.png);

}



.serviceszs {

    padding: 80px 0;

    background-color: #efefef;

}







.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 40px;

    margin-top: 60px;

}



.services-gridzs {

    display: grid;

    grid-template-columns: 30% 30% 40%;

    gap: 40px;

    margin-top: 60px;

}





.service-item {

    background: white;

    padding: 40px 25px;

    border-radius: 10px;

    text-align: center;

    box-shadow: 0 5px 20px rgba(0,0,0,0.08);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.service-item:hover {

    transform: translateY(-5px);

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

}





.service-item1 {

    background: white;

    padding: 40px 30px;

    border-radius: 10px;

    text-align: center;

    box-shadow: 0 5px 20px rgba(0,0,0,0.08);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.service-item1:hover {

    transform: translateY(-5px);

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

}







.service-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 25px;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

}



.service-title {

    font-size: 20px;

    color: #333;

    margin-bottom: 7px;

    font-weight: 500;

}



.service-h3{width:80px;height:3px;background:#fa5454;margin:0px auto;margin-bottom:20px;}



.service-description {

    color: #666;

    line-height: 1.6;

    font-size: 15px;

}



.value-list {

    text-align: left;

}



.value-list p {

    margin-bottom: 12px;

    font-size: 14px;

    line-height: 1.6;

}



.value-list strong {

    color: #000000;

}



/* Footer */

.footer {

    background-color: #333;

    color: #ccc;

    padding: 30px 0;

    text-align: center;

}



.footer-text {

    font-size: 14px;

    opacity: 0.8;

}

/******/
.herad_1{width:100%;height:42px; background:url(images/top1_bj.jpg) repeat-x;}
.top1{width:1200px;height:42px;margin:0px auto; position:relative;}
.top1 .top1_fuceng{ position:absolute; top:42px; right:0px;width:143px;height:auto;background:#fff;box-shadow: 3px 8px 5px 0px rgba(0, 0, 0, 0.2); text-align:center; border-radius:0px 0px 10px 10px; z-index:999;}
.top1 .top1_fuceng a{ color:#333333;text-align:center;font-size:14px;padding:15px 0px;float:none;font-size:13px;border-top:1px solid #dddddd;}
.top1 .top1_fuceng a:hover{ text-align:center;font-size:13px;color:#1d4ccf;}

.top1 a,.top1 p{ display:block; float:right;color:#fff;cursor: pointer;}
.top1 a img,.top1 p img{ vertical-align:middle;}




/* Responsive Design */

@media (max-width: 768px) {

    .hero-title {

        font-size: 36px;

    }

    

    .hero-subtitle {

        font-size: 16px;

    }

    

    .about-content {

        grid-template-columns: 1fr;

        gap: 20px;

    }

	

	.services-grid{margin-top:15px;}

    



      .about-contentzs{

        grid-template-columns: 1fr;

        gap: 40px;

    }





    .services-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    



    .services-gridzs {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    







    .section-title {

        font-size: 28px;

	     margin-bottom: 20px;



    }

    





    .about, .services {

        padding: 20px 0;

    }

	

	

	.company-name {

	margin:0px auto;

    font-size: 24px;

    font-weight: 500;

    letter-spacing: 1px;

    width: 100%;

	padding:0px 20px;

	text-align:left;

	display:block;

}



.about-image{height:300px;}

.about-image img{height:300px;}



.hero {

    height: 300px;

    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);

    background-image: url(images/icoo5.jpg);

    background-size: cover;

    background-position: center;

    background-blend-mode: overlay;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}

	
 .top1{width:100%;}
  .top1 a{margin-right:20px;font-size:13px;}
	

}



@media (max-width: 480px) {

    .hero {

        height: 300px;

    }

    

    .hero-title {

        font-size: 28px;

    }

    

    .hero-subtitle {

        font-size: 14px;

    }

    

    .company-name {

        font-size: 20px;

    }

    

    .service-item {

        padding: 30px 20px;

    }



     .top1{width:100%;}
  .top1 a{margin-right:20px;font-size:13px;}

}