.env-course .t2{ background-image: url(../images/bg1.jpg);}
.env-course .t2::after, .env-course .t2::before{ background:#75ba61;}

.menu-22 .menu-ph span{ background: #fff;}

/* .footer-1{ background-color: #F2FFE1;} */
@media  only screen and (min-width: 1150px){

    .env-header .logo .a2{ display: none;}
    .env-header .logo a{opacity: 1;}
    .env-search img.i2{ display: block;}
    .env-search img.i1{ display: none;}
    .env-header .logo{ height: 100px;}
    .env-header .env-menu-box .w{ background-image: linear-gradient(to right,#333,#444); 
        color: #fff; position: absolute; left: auto; right: 0; top: calc(100vw * 0.33); width: 64.45%; border-radius: 0;}
    .env-header .env-menu-box .w a{ color: #fff;}
  
    .env-header .env-menu-box ul{ margin: 0 1em;}
    
    .scrollbody .env-header{ background: #333;}
    .scrollbody .env-header::after{ content: ''; position: absolute; left: 0; top: 0; height: 10px; width: 660px; background: #53B535;}
    .scrollbody .env-header .logo .a2{ display: none;}
    .scrollbody .env-header .logo a{opacity: 1; }
    .scrollbody .env-header .logo .a1{ top: 55%;}

    .scrollbody .env-header .env-menu-box .w{ position: relative; top: 0;}

}
.vision-vr .w{ padding: 10% 0 2%; display: block;}
body{ background: #FEFFFA;}
.vision-banner{ position: relative;}
.vision-banner img{ width: 100%; height: auto;}
.vision-banner .box{ position: absolute; z-index: 3; color: #fff;  left: 0; top: 50%; transform: translateY(-50%); width: 100%;}
.vision-banner .w .p2{ margin-top: 1em; width: 50%;}
.vision-banner .w h2{ line-height: 1.2; position: relative; padding: 20px; border: 1px solid #333; display: inline-block;}
.vision-banner .w i{ position: absolute; width: 10px; height: 10px; background: #fff;}
.vision-banner .w i.i1{ left: -5px; top: -5px;} 
.vision-banner .w i.i2{ right: -5px; top: -5px;} 
.vision-banner .w i.i3{ left: -5px; bottom: -5px;} 
.vision-banner .w i.i4{ right: -5px; bottom: -5px;}
.vision-banner .w p{ margin: 20px; width: 55%; margin-bottom: 3em;}


.env2-banner{ background-position: left center;}
.env_intor1{padding: 6% 0 3%;}
.vision-abt .w{ margin-bottom: 9%; min-height: 223px; display: flex; align-items: center; justify-content: center;}
.vision-abt .w em{ font-size: 200%;}
.env_intor2 li{ width: 25%;}



body{ background: #FEFFFA;}
.env_intor3_ul .txt{ position: relative; z-index: 5;}
.env_intor3_ul .txt dl{ width: 90%; margin: 0 0 0 -5em;}
.env_intor3_ul .txt dt{  padding: 1em 0; text-align: right; background: none;}
.env_intor3_ul .txt dd{ background: #FEFFFA; border: 1px solid #000; padding: 2em;}
.env_intor3_ul li:nth-child(2n) .txt dl{ margin: 0 -5em 0 auto;}
.env_intor3_ul li:nth-child(2n) .txt dt{ text-align: left;}


.visi-bk1 .env-title{ padding: 6% 0 3%;}
.visi-bk1 .box{ position: relative;}
.visi-bk1 .left { width: 50%;  float: left; margin-right: 3%; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.1);}
.visi-bk1 .left .img_ratio{ padding-top: 61.16%;}
.visi-bk1 .left dd{ padding: 1em;}
.visi-bk1 .right{ overflow: hidden;}
.visi-bk1 .right .top h2{ margin-top: 1em;}
.visi-bk1 .right .date{ margin: 0.5em 0 1em;}
.visi-bk1 .right ul{ margin: 0 -20px;  width: 50%; position: absolute; right: 0; bottom: 0;}
.visi-bk1 .right li{ float: left; width: 33.33%;}
.visi-bk1 .right li .w{ background: linear-gradient(225deg, #00BB7E 0%, #17FFB2 100%);
    box-shadow: 0px 4px 60px 1px rgba(104, 169, 147, 0.2); display: block; margin: 0 20px; padding: 1em; color: #fff;}
    .visi-bk1 .right li:nth-child(2) .w{background: linear-gradient(45deg, #EF4C55 0%, #FF929A 100%);}
    .visi-bk1 .right li:nth-child(3) .w{background: linear-gradient(225deg, #17D5FF 0%, #21B1D1 100%);}
    .visi-bk1 .right li .w h2{ margin-bottom: 1em;}
.visi-bk2 .t{    margin: 7% 0 2% 0;}
.visi-bk2 li{ float: left; width: 46%;}
.visi-bk2 li:nth-child(4n-1),
.visi-bk2 li:nth-child(4n-2){ width: 27%;}
.visi-bk2 ul{ margin: 0 -20px;  padding: 0% 0 4%;}
.visi-bk2 li .w{ display: block; margin: 0 20px 40px; position: relative;}
.visi-bk2 li .w .p{ position: absolute; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.3); color: #fff; padding:0.5em 1em; z-index: 3; text-align: center;}
.visi-bk2 li .img_ratio{ padding-top: 50%;}
.visi-bk2 li:nth-child(4n-1) .img_ratio,
.visi-bk2 li:nth-child(4n-2) .img_ratio{ padding-top: 187%;}
.visi-bk2 li:nth-child(4n) { margin-top: -24.25%;}

.visi-bk3 .box{ background: #F5F5F5; margin-top: 2em; display: flex; align-items:  center; position: relative; border-top: 5px solid #F5F5F5 ;}
.visi-bk3 .box::after{ content: ''; position: absolute; left: 0; top: 0; width: 60%;  height: 5px; background: url(../images/22.jpg); background-size: 100% 100%;}
.visi-bk3 .left{ flex: 1; position: relative; }
.visi-bk3 .right{  width: 40%; position: relative;}
.visi-bk3 .right::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: url(../images/22.jpg); background-size: 100% 100%;}
.visi-bk3 .right .img_ratio{ padding-top: 81%;}
.visi-bk3 .pbox{ padding: 2em; width: 80%;}
.visi-bk3 .pbox .p1{ margin-bottom: 2em;}
.visi-bk3 .pbox .p2{ margin: 1em 0 3em;}
.visi-bk3 .pbox .p2 span{ display: inline-block; margin-right: 1em; margin-bottom: 0.5em;}
.visi-bk3 .pbox .p3 span{ display: inline-block; margin: 0 1em 1em 0; padding: 0 20px;line-height: 1.2;   position: relative;}
.visi-bk3 .pbox .p3 span i{ display: inline-block; position: relative; z-index: 2;}
.visi-bk3 .pbox .p3 span::after{ content: ''; position: absolute; left: 10px; bottom: -0.1em; right: 10px; background: #FFE797; height: 0.8em;}

.visi-bk4 ul{ margin: 0 -20px;  }
.visi-bk4 .env-title{ text-align: center; padding: 8% 0 3%;}
.visi-bk4 li{ float: left; width: 33.33%;}
.visi-bk4 li .img_ratio{ padding-top: 118%;}
.visi-bk4 li:nth-child(4n) .img_ratio,
.visi-bk4 li:nth-child(4n-1) .img_ratio{ padding-top: 54.5%;}
.visi-bk4 li .w{ display: block; margin: 0 20px 0; position: relative;}
.visi-bk4 li:nth-child(3){ margin-bottom: 2.82%;}
.visi-bk4 li .txt{ background: #FAE293; text-align: center; z-index: 2; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; transition: 0.5s all; opacity: 0;}
.visi-bk4 li .txt .t1{ height: 60%; justify-content: center;}
.visi-bk4 li .w:hover .txt{ opacity: 1;}
@media only screen and (max-width: 1450px) {
   
}

@media only screen and (max-width: 1150px) {
    .env-header .logo{background-image:linear-gradient(to right,#489a3e,#53B535)}


}

@media only screen and (max-width: 750px) {
    .env_intor2 li{ width: auto; float: none;}
    .env_intor2 li .w{ width: auto; margin: 2em 1em 0;}
    .vision-vr img{ width: 50%;}
    .env_intor3_ul .txt dl,
    .env_intor3_ul li:nth-child(2n) .txt dl{ margin: 1em 1em 0; }
    .env_intor3_ul li:nth-child(2n) .txt dt, .env_intor3_ul .txt dt{background: none;}

    .vision-banner .box{ position: relative; top: 0; transform: none; margin-top:-6em;  }
    .vision-banner .w h2{ font-size: 2rem;}
    .vision-banner .w i{ }
    .vision-banner .w p{  width: auto; color: #333;  text-align: justify;}

    .visi-bk1 .left{ width: auto; margin: 0 0 2em ; float: none;}
    .visi-bk1 .right ul{ position: relative; width: auto; margin: 3em -5px 0;}
    .visi-bk1 .right ul .w{ margin: 0 5px;}

    .visi-bk2 li{ width: 100%;}
    .visi-bk2 li:nth-child(4n-1), .visi-bk2 li:nth-child(4n-2){ width: 50%;}
    .visi-bk2 li:nth-child(4n){ margin: 0;}
    .visi-bk2 ul{ margin: 0 10px;}
    .visi-bk2 li .w{ margin: 0 10px 20px;}

    .visi-bk3 .box{ flex-direction: column;}
    .visi-bk3 .right{ width: 100%;}
    .visi-bk3 .box::after{ width: 100%;}
    .visi-bk3 .pbox{ padding: 1em;}

    .visi-bk4 ul{ margin: 0 10px;}
    .visi-bk4 li{ width: 50%;}
    .visi-bk4 li:nth-child(4n),
    .visi-bk4 li:nth-child(4n-1){ width: 100%;}
    .visi-bk4 li .w{ margin: 0 10px 20px;}


}