﻿#protect1 { padding: 50px 0;background: url(../images/protect_bj1.png) no-repeat center bottom;}
#protect1 .box { width:560px;height: 575px;background: url(../images/protect_bj2.png) no-repeat;margin: 0 auto;position: relative;}
#protect1 .box .p1 { position: absolute;top: 355px;left: 70px;}
#protect1 .box .p2 { position: absolute;top: 20px;left: 295px;}
#protect1 .box .p3 { position: absolute;top: 138px;left: 130px;}
#protect1 .box .p4 { position: absolute;top: 263px;left: 390px;}
#protect1 .box div span { width: 60px;height: 60px;background: rgba(238,238,238,0.7) url(../images/spri01.png) no-repeat center center;border-radius: 50%;text-align: center;display: inline-block;}
#protect1 .box div i { display: block;color: #333;}
#protect1 .box .p2 span { background:  rgba(238,238,238,0.7) url(../images/spri02.png) no-repeat center center;;}
#protect1 .box .p3 span { background:  rgba(238,238,238,0.7) url(../images/spri03.png) no-repeat center center;;}
#protect1 .box .p4 span { background:  rgba(238,238,238,0.7) url(../images/spri04.png) no-repeat center center;;}
#protect1 .box s { width: 17px;height: 17px;background: #fff;border: 1px solid #004a9a;border-radius: 50%;display: inline-block;position: absolute;-webkit-animation: autoPlay 1s infinite;
-o-animation: autoPlay 1s infinite;
animation: autoPlay 1s infinite;}
#protect1 .box .s1 { top: 105px;left: 320px;}
#protect1 .box .s2 { top: 230px;left: 145px;}
#protect1 .box .s3 { top: 445px;left: 96px;}
#protect1 .box .s4 { top: 360px;left: 390px;}
#protect1 .box em { width: 11px;height: 11px;background: #004e9a;border-radius: 50%;position: absolute;cursor: pointer;}
#protect1 .box .em1 { top: 109px;left: 324px;}
#protect1 .box .em2 { top: 234px;left: 149px;}
#protect1 .box .em3 { top:  449px;left: 100px;}
#protect1 .box .em4 { top:  364px;left: 394px;}

@-webkit-keyframes autoPlay {
    0% { transform: scale(0); }
    50% { transform: scale(1); }
    100% { transform: scale(0); }
}
@-moz-keyframes autoPlay {
    0% { transform: scale(0); }
    50% { transform: scale(1); }
    100% { transform: scale(0); }
}
@-ms-keyframes autoPlay {
    0% { transform: scale(0); }
    50% { transform: scale(1); }
    100% { transform: scale(0); }
}
@-o-keyframes autoPlay {
    0% { transform: scale(0); }
    50% { transform: scale(1); }
    100% { transform: scale(0); }
}
@keyframes autoPlay {
    0% { transform: scale(0); }
    50% { transform: scale(1); }
    100% { transform: scale(0); }
}

#protect1 .box .boxl { width: 408px;height: 86px;background: url(../images/protect1.png) no-repeat center bottom;position: absolute;opacity: 0;}
#protect1 .box .boxr { width: 474px;height: 92px;background: url(../images/protect2.png) no-repeat center bottom;position: absolute;opacity: 0;}
#protect1 .box .l1 { top: 156px;left: -260px; }
#protect1 .box .l2 { top: 371px;left: -308px;}
#protect1 .box .l3 { top: 28px;left: 333px;}
#protect1 .box .l4 { top: 282px;left: 405px;}
#protect1 .box .boxl p { width: 334px;height: 38px;background: #f1f1f1;padding: 10px;color: #333;}
#protect1 .box .boxr p { width:405px;height: 38px;background: #f1f1f1;padding: 10px;float: right;color: #333;}

#protect1 .box .l1.ani,#protect1 .box .l2.ani,#protect1 .box .l3.anis,#protect1 .box .l4.anis,#eye1 .squar.anis { opacity: 1!important;}
#protect1 .box .l1.ani p,#protect1 .box .l2.ani p{ -webkit-animation: rotateR .3s 1;-o-animation: rotateR .3s 1;animation: rotateR .3s 1;}
#protect1 .box .l3.anis p,#protect1 .box .l4.anis p,#eye1 .left .squar.anis p { -webkit-animation: rotateL .3s 1;
-o-animation: rotateL .3s 1;
animation: rotateL .3s 1;}

@-webkit-keyframes rotateR {
    from{ transform: translateX(-40px);opacity:0;}
}
@-moz-keyframes rotateR {
    from{ transform: translateX(-40px);opacity:0;}
    
}
@-ms-keyframes rotateR {
    from{ transform: translateX(-40px);opacity:0;}
    
}
@-o-keyframes rotateR {
    from{ transform: translateX(-40px);opacity:0;}
    
}
@keyframes rotateR {
    from{ transform: translateX(-40px);opacity:0;}
    
}















#protect2 { padding: 50px 0;background: #eee;}
#protect2 .pic {background: url(../images/deskPic06.jpg) no-repeat 50% 50%;overflow:hidden;position: relative;height: 388px;margin-top:0;}
#protect2 .pic ol { margin: 0 37px;overflow: hidden;position: absolute;top: 0;padding: 20px;list-style: none;}
#protect2 .pic ol li { float: left;width: 223px;height: 262px;background: url(../images/protect_bj3.png) no-repeat;position: relative;border-radius: 5px;transition: all .2s;margin-top: 35px;}
#protect2 .pic ol li:hover { background: url(../images/protect_bj3_2.png) no-repeat;}
#protect2 .pic ol li+li { margin-left: 20px;}
#protect2 .pic ol li s{ height: 6px;width: 6px;border: 2px solid #333;position: absolute;right:10px;top: 10px;border-radius: 50%;}


#protect2 .pic ol li h2 { margin: 5px 0;margin-bottom: 5px;font-size: 18px;color: #fff;text-align: center;margin-top: 145px;position: relative;margin-bottom: 20px;}
#protect2 .pic ol li h2:after { content: '';width: 6px;height: 10px;background: url(../images/rain.png) no-repeat;position: absolute;bottom: -15px;left: 50%;margin-left: -3px;display: none;}
#protect2 .pic ol li:hover h2:after {display: block;}
#protect2 .pic ol li p { margin: 0 5px;text-align: center;color: #fff;font-size: 12px;line-height: 22px;}
#protect2 .pic ol li.cli4 { box-shadow: 1px 4px 10px rgba(0,0,0,.4);transform: translateY(-5px);}
#protect2 .pic ol li.cli4 s { background: #004a9a;}
#protect2 .pic ol li h1{ background: #000;width: 95px;height: 98px;background: url(../images/protect3.png) no-repeat;position: absolute;top: 17px;left: 69px;}
#protect2 .pic ol li:nth-child(2) h1{background: url(../images/protect4.png) no-repeat;}
#protect2 .pic ol li:nth-child(3) h1{background: url(../images/protect5.png) no-repeat;}
#protect2 .pic ol li:nth-child(4) h1{background: url(../images/protect6.png) no-repeat;}
#protect2 .pic ol li:nth-child(1).cli4 h1{background: url(../images/protect3_2.png) no-repeat;}
#protect2 .pic ol li:nth-child(2).cli4 h1{background: url(../images/protect4_2.png) no-repeat;}
#protect2 .pic ol li:nth-child(3).cli4 h1{background: url(../images/protect5_2.png) no-repeat;}
#protect2 .pic ol li:nth-child(4).cli4 h1{background: url(../images/protect6_2.png) no-repeat;}
#protect2 .pic h5 { font-size: 16px;text-align: center;margin-top: 30px;font-weight: 600;}
#protect2 .pic ol { overflow: hidden;padding-left: 20px;}
#protect2 .pic .text { position: absolute;bottom: 32px;left: 29%;color: #333;}
#protect2 .pic ol li { float: left;margin-right: 30px;font-size: 12px;}


#protect3 {padding: 70px 0;background: #f7f7f7;}
#protect3 .part1 { width: 1080px;height: 348px;background: url(../images/area_bj06.png) no-repeat center center;margin: 0 auto;margin-top: 20px;}
#protect3 .part2 { background:#eee url(../images/protect_bj4.png) no-repeat center top;padding-top: 60px;position: relative;padding-bottom: 30px;}
#protect3 .part2 .circle { position: absolute;width: 18px;height: 32px;top: -8px;left: 50%;margin-left: -9px;text-align: center;line-height: 10px;}
#protect3 .part2 .circle span { width: 8px;height: 8px;background: #004e9a;border-radius: 50%;display: inline-block;-webkit-animation: autoScale 1s infinite;
-o-animation: autoScale 1s infinite;
animation: autoScale 1s infinite;}
#protect3 .part2 .circle .s2 { transform: scale(0.8);animation-delay: .2s;}
#protect3 .part2 .circle .s3 { transform: scale(0.6);animation-delay: .6s;}

@-webkit-keyframes autoScale {
    0%{ transform: scale(0);}
    50%{ transform: scale(1);}
   100%{ transform: scale(0);}
}
@-moz-keyframes autoScale {
    0%{ transform: scale(0);}
    50%{ transform: scale(1);}
   100%{ transform: scale(0);}
}
@-ms-keyframes autoScale {
    0%{ transform: scale(0);}
    50%{ transform: scale(1);}
   100%{ transform: scale(0);}
}
@-o-keyframes autoScale {
    0%{ transform: scale(0);}
    50%{ transform: scale(1);}
   100%{ transform: scale(0);}
}
@keyframes autoScale {
    0%{ transform: scale(0);}
    50%{ transform: scale(1);}
   100%{ transform: scale(0);}
}





#protect3 .part2 ul { display:flex;padding: 0 150px;}
#protect3 .part2 ul li{flex: 1;text-align: center;}
#protect3 .part2 ul li span { background: url(../images/pro_spri1.png) no-repeat 0 -50px;width: 25px;height: 25px;display: block;margin: 0 auto;margin-bottom: 10px;}
#protect3 .part2 ul li:nth-child(2) span {width: 21px;height: 26px; background: url(../images/pro_spri1.png) no-repeat -41px -50px;} 
#protect3 .part2 ul li:nth-child(3) span { background: url(../images/pro_spri1.png) no-repeat -76px -56px;vertical-align: bottom;} 

#protect3 .part2 ul li.cli { color: #004e9a;}
#protect3 .part2 ul .n1.cli span { background-position: 0 -82px;}
#protect3 .part2 ul .n2.cli span { background-position: -41px -82px;}
#protect3 .part2 ul .n3.cli span { background-position: -76px -88px;}

#protect3 .part2 .box { margin-top: 15px;display: none;}
#protect3 .part2 .box.show { display: block;}
#protect3 .part2 .box ol { overflow-y: hidden;list-style: none;padding: 20px 0;}
#protect3 .part2 .box ol li{ width: 265px;height: 350px;float: left;background: url(../images/protect_bj5.png) no-repeat;margin: 0 55px;position: relative;transition: all .3s;}
#protect3 .part2 .box ol li:first-child { margin-left: 100px;}
#protect3 .part2 .box ol li span { width: 150px;height: 150px;background: url(../images/protect_bj6.png) no-repeat;position: absolute;top: 30px;left: 57px;transition: all .5s;}
#protect3 .part2 .box ol li i { width: 108px;height: 108px;background: rgba(255,255,255,.3);position: absolute;top: 52px;left: 78px;border-radius: 50%;text-align: center;}
#protect3 .part2 .box ol li i s { width: 52px;height: 49px;background: url(../images/pro_spri1.png) no-repeat 0 -123px;display: inline-block;vertical-align: middle;margin-top: 28px;}
#protect3 .part2 .box ol li:nth-child(2) i s { background: url(../images/pro_spri1.png) no-repeat -62px -123px;}
#protect3 .part2 .box ol li:nth-child(3) i s {width: 54px;height: 52px; background: url(../images/pro_spri1.png) no-repeat -119px -123px;}
#protect3 .part2 .box ol li h3 { font-size: 16px;color: #fff;margin-top: 190px;text-align: center;position: relative;}
#protect3 .part2 .box ol li h3:after { content: '';width: 20px;height: 2px;background: #fff;position: absolute;bottom: -10px;left: 50%;margin-left: -10px;}
#protect3 .part2 .box ol li p { padding: 15px;margin-top: 5px;color: #fff;font-size: 12px;text-align: justify;}

#protect3 .part2 .box ol li:hover { box-shadow: 0 0 25px rgba(0,0,0,0.6);}
#protect3 .part2 .box ol li:hover span { -webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
     -o-transform: rotate(360deg);
        transform: rotate(360deg);}

#protect3 .part2 .box2 ol li:nth-child(1) i s { width: 52px;height: 52px;background: url(../images/pro_spri1.png) no-repeat 0 -190px;}
#protect3 .part2 .box2 ol li:nth-child(2) i s { width: 50px;height: 48px;background: url(../images/pro_spri1.png) no-repeat -62px -190px;}
#protect3 .part2 .box2 ol li:nth-child(3) i s { width: 50px;height: 50px;background: url(../images/pro_spri1.png) no-repeat -119px -190px;}


#protect3 .part2 .box3 ol li { background: url(../images/protect_bj5_2.png) no-repeat;}
#protect3 .part2 .box3 ol li .pic { width: 215px;height: 145px;border-radius: 6px;margin: 25px;overflow: hidden;position: relative;}
#protect3 .part2 .box3 ol li .pic img { width: 100%;}
#protect3 .part2 .box3 ol li .pic p { width: 215px;height: 145px;background: rgba(0,0,0,0.7);position: absolute;top: 0;left: 0;margin-top: 0;padding: 0;line-height: 185px;text-align: center;opacity: 0;transition: all .3s;}
#protect3 .part2 .box3 ol li .pic em { width: 25px;height: 25px;background: url(../images/check.png) no-repeat;position: absolute;top: 50px;left: 50%;margin-left: -12px;}
#protect3 .part2 .box3 ol li:hover p { opacity:1;}
#protect3 .part2 .box3 ol li h3 { margin-top: 10px;}
.olay { background: rgba(0,0,0,0.6);position: fixed;top: 0;left: 0;z-index: 2016;display: none;}
.olay.show,.bigpic img.show,.bigpic.show { display: block;}
.bigpic { border-radius: 8px;position: fixed;top: 20px;z-index: 2017;display: none;width: 100%;}
.bigpic .container { position: relative;}
.bigpic img { display: block;border: 20px solid #fff;border-radius: 8px;display:none;max-width: 1160px;background: #fff;margin: 0 auto;}
.bigpic .close {width: 35px;height: 35px;background: url(../images/close.png) no-repeat;cursor: pointer;position: absolute;top: -5px;right: -5px;}



#protect4,#eye3 {padding: 80px 0 50px 0;background: #fff;}
#protect4 ul,#eye3 ul {margin-top: 0;overflow: hidden;padding: 10px 0 5px 0;}
#protect4 ul li,#eye3 ul li {width: 18%;height: auto;float: left;transition: all .2s;margin: 0 1%;padding: 20px 0;}
#protect4 ul li h1,#eye3 ul li h1 {text-align: center;line-height: 22px;}
#protect4 ul li h1 s {width: 110px;display: inline-block;margin-top: 10px;}

#protect4 ul li h2,#eye3 ul li h2 {text-align: center;font-size: 18px;font-weight: 600;line-height: 22px;margin: 20px 10px;color: #79a22e;}
#protect4 ul li p,#eye3 ul li p {position: relative;margin: 0 20px;text-align: center;line-height: 1.75;color: #424242;}
#protect4 ul li:hover,#eye3 ul li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.4);}


#protect5{padding: 80px 0 50px 0;background: #fff;}
#protect5 ul{margin-top: 0;overflow: hidden;padding: 10px 0 5px 0;}
#protect5 ul li{width: 29.3333%;height: auto;float: left;transition: all .2s;margin: 0 2%;padding: 20px 0;}
#protect5 ul li h1{text-align: center;line-height: 22px;}
#protect5 ul li h1 s {width: 310px;display: inline-block;margin-top: 10px;}

#protect5 ul li h2{text-align: center;font-size: 18px;font-weight: 600;line-height: 22px;margin: 30px 10px -10px 10px;color: #79a22e;}
#protect5 ul li p{position: relative;margin: 14px 40px 0 40px;text-align: center;line-height: 1.8;color: #424242;}
#protect5 ul li:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.4);}



.a561 {
	font-size: 30px;
	font-weight: 400;
	color: #2c2c2c;
	line-height: 1.4;
	margin-bottom: 18px;
}

.pink-line{
        width: 26px;
        height: 1px;
        background: #333;
        margin-bottom: 25px;
        margin-left: 1px;
    }
	
	.c-lower-contents {
	line-height: 2;
	margin: 0 auto;
}


.electric_meter { background: #f7f7f7; padding-bottom: 70px; height: auto; overflow: hidden; }
.electric_box { padding: 20px 0 0; }
.electric_box h2 { padding: 65px 0 55px 0; font-size: 32px; text-align: center; clear: both; }
.electric_box ul {margin: 0 -20px;padding-top: 10px;}
.electric_box ul li {float: left;margin: 0 20px 10px 20px;width: 373px;border-radius: 5px;box-shadow: rgba(153,153,153,.3) 0px 0px 5px;}
.electric_box ul li img {width: 373px;height: 230px;border-radius: 5px 5px 0 0;}
.electric_box ul li a span { display: none; background: rgba(0,0,0,.5); text-align: center; position: absolute; top: 0; left: 0; width: 400px; height: 240px; border-radius: 5px 5px 0 0; }
.electric_box ul li a span img { width: 74px; height: 74px; top: -50%; margin-top: 80px; -webkit-transition: 0.6s; -webkit-transition: -webkit-transform 0.6s ease-out; transition: transform 0.6s ease-out; -moz-transition: -moz-transform 0.6s ease-out; }
.electric_box ul li p {text-align: center;background: #fff;border-radius: 0 0 5px 5px;height: 70px;line-height: 70px;font-size: 18px;}
.electric_box ul li a { display: block; position: relative; transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; }
.electric_box ul li a:hover { box-shadow: rgba(153,153,153,.2) 1px 5px 15px; transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; }
.electric_box ul li a span:hover img { transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); }


.electric_box1 { padding: 20px 0 0; }
.electric_box1 h2 { padding: 65px 0 55px 0; font-size: 32px; text-align: center; clear: both; }
.electric_box1 ul {margin: 0 -20px;padding-top: 10px;}
.electric_box1 ul li {float: left;margin: 0 20px 10px 20px;width: 270px;border-radius: 5px;box-shadow: rgba(153,153,153,.3) 0px 0px 5px;}
.electric_box1 ul li img {width: 270px;height: 166px;border-radius: 5px 5px 0 0;}
.electric_box1 ul li a span { display: none; background: rgba(0,0,0,.5); text-align: center; position: absolute; top: 0; left: 0; width: 400px; height: 240px; border-radius: 5px 5px 0 0; }
.electric_box1 ul li a span img { width: 74px; height: 74px; top: -50%; margin-top: 80px; -webkit-transition: 0.6s; -webkit-transition: -webkit-transform 0.6s ease-out; transition: transform 0.6s ease-out; -moz-transition: -moz-transform 0.6s ease-out; }
.electric_box1 ul li p {text-align: center;background: #fff;border-radius: 0 0 5px 5px;height: 60px;line-height: 60px;font-size: 18px;}
.electric_box1 ul li a { display: block; position: relative; transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; }
.electric_box1 ul li a:hover { box-shadow: rgba(153,153,153,.2) 1px 5px 15px; transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; }
.electric_box1 ul li a span:hover img { transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); }

.program_pro { background: #e3e3e3; }
.p_composition ul { margin: 0 -3px; }
.p_composition ul li { width: 320px; margin: 0 3px 35px 3px; box-shadow: none; }
.p_composition ul li img { width: 320px; height: 320px; border-radius: 5px 5px 0 0; }
.p_composition ul li a span { width: 320px; height: 320px; }
.p_composition ul li a span img { margin-top: 110px; -webkit-transition: 0.6s; -webkit-transition: -webkit-transform 0.6s ease-out; transition: transform 0.6s ease-out; -moz-transition: -moz-transform 0.6s ease-out; }
.p_composition ul li p { height: 100px; padding: 24px 0 0; line-height: 24px; font-size: 18px; }
.p_composition ul li p b { display: block; }

.gsgs04{font-size:18px; font-weight:900}