@import url("style.css");
.width70{ max-width: 68%;}
.hei90{width:100%;}
#K152{ display: none;}
.down66{ width: 100%; height: 0px; position: relative;}
.down66 p{ position: absolute; right: 0; top: -76px;}
.down66 p a{ max-width:400px; height: 66px; line-height: 66px; display: inline-block; text-align: right; padding-right: 80px; background:url(../img/down.jpg) no-repeat right center; color: #666; text-decoration: none;}
.down66 p a:hover{ color: #666;}

.banner{width:100%; height:4.50rem; overflow: hidden;position: relative;}
@media screen and (min-width: 0px) and (max-width: 1200px) {
    .banner{min-height: 285px;}
}
.banner .ny-menu{ width:100%; height: 50px; line-height:50px; background: url(../img/hei60.png) repeat-x; position:absolute; bottom:0; z-index: 20;}
.banner .ny-menu ul{ margin:auto;display:table;text-align:center;}
.banner .ny-menu ul li{ display:table-cell; font-size:16px; position:relative;}
.banner .ny-menu ul li a{ color:#fff; display:inline-block; padding:0 15px; margin:0 15px;}
.banner .ny-menu ul li em{ width:2px; height:16px; background:#fff; display:inline-block; position:absolute; top:17px; margin-left:-1px;}
.banner .ny-menu ul li a:hover{ background:#0063b5; color:#fff;}
.banner-png{ margin-top: 1.30rem; height:1.55rem; overflow:hidden; background:url(../img/png.png) no-repeat left top; position:relative; z-index: 20}
.banner-png h1{ color:#fff; font-size:45px; height:0.54rem; line-height:0.54rem; font-weight:normal; position:absolute; left:13px;}
.banner-png h3{ color:#fff; font-size:0.26rem; line-height: 0.28rem; position:absolute; left:13px; top: 0.65rem; font-weight: normal;}
.banner-png h1{animation:myfirst 0.8s;-moz-animation:myfirst 0.8s;-webkit-animation:myfirst 0.8s;-o-animation:myfirst 0.8s;}
.banner-png h3{animation:zfirst 0.5s;-moz-animation:zfirst 0.5s;-webkit-animation:zfirst 0.5s;-o-animation:zfirst 0.5s;}


.main{}
.weizhi{ height: 100px;line-height: 100px;color: #ccc;}
.weizhi a{color:#005ba6;}
.weizhi font{ color: #999;}

.product{width: 100%; height: 500px;}
.product .pro-left{width: 500px; height: 375px; float: left;background: #f00}
.product .pro-left img{width: 100%;}
.product .pro-right{margin-left: 50px; float: left;width: 650px;}
.product .pro-right h1{}
.product .pro-right p{font-size: 16px; line-height: 25px;margin: 15px 0;max-height: 50px; overflow: hidden;}
.product .pro-right .parameters{margin-top: 35px;}
.product .pro-right .parameters h3{margin: 15px 0;}
.product .pro-right .parameters table{width: 100%;border-collapse: collapse;}
.product .pro-right .parameters td{border: solid 1px #ddd;padding:8px;}
.product .pro-right .but{ margin-top: 30px;}
.product .pro-right .but a{ padding: 10px 20px; display: inline-block; margin-left: 15px;background:#005ba6;border-radius:50px;float: right;}
.product .pro-right .but a:hover{background: #222; color: #fff; cursor: pointer;}


.content{ font-size: 16px; line-height: 25px; color: #222;}
.content video{ background: #f4f2f2;}
.content p{ margin: 10px 0;}
.content a{ color: #A0D400;text-decoration: underline;}
.content a:hover{ color:#89BE44; }
.content img{ max-width:100%; display:inline;}
.content .h1{ font-size:40px; margin-bottom: 22px; color:#89BE44;}
.content table{width: 100%; border-collapse:collapse;}
.content table td{}
.content .table td{padding: 5px; border-bottom: solid 1px #ddd;}
.content .content-img{ margin: 50px 0;}
.content .content-img img{ width:100%;}

.job{ margin: 0.5rem auto 2rem auto;}
.job table{ width: 100%; border-collapse: collapse;}
.job table .tr td{ border-bottom: solid 1px #333; color: #000; font-size:0.24rem; cursor: default;}
.job table td{ padding: 15px 0; color: #444; font-weight: normal; font-size: 0.16rem; line-height: 0.25rem; border-bottom: solid 1px #666; vertical-align: top; cursor: pointer;}


.infolist{ overflow: hidden;}
.infolist .h1{ font-size: 40px;color:#89BE44; margin: 0 0 50px 0;}
.infolist ul{ width: 110%;}
.infolist ul li{ width: 380px; height: 515px; margin-bottom: 30px; margin-right: 30px; background: #f5f5f5; float: left; overflow: hidden; position: relative;}
.infolist ul li a{ display:block;}
.infolist ul li .pic{ width: 380px; height: 260px; overflow: hidden;transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
.infolist ul li .pic img{ width: 100%; height: 100%;}
.infolist ul li:hover .pic{transform: scale(1.02);-moz-transform: scale(1.02);-webkit-transform: scale(1.02);-o-transform: scale(1.02);-ms-transform: scale(1.02);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.02, M12=0, M21=0, M22=1.02, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.02, M12=0, M21=0, M22=1.02, SizingMethod='auto expand');
    background-position:center;	}
.infolist ul li .txt{ margin: 20px;}
.infolist ul li .txt h3{ font-size: 20px; margin-bottom: 10px;line-height: 22px;max-height: 66px; overflow: hidden;}
.infolist ul li .txt p{ font-size: 16px; height: 88px; margin: 10px 0 27px 0; line-height: 22px; color: #595757; overflow: hidden;}
.infolist ul li .txt span{ color: #000; font-size: 18px; position: absolute; bottom: 15px;}
.infolist ul li:hover .txt p,.infolist ul li:hover .txt h3{ color: #000;}


.books{ height: 697px; margin: 50px auto; background: url(../img/txt4.png) no-repeat;}
.books table{ margin: auto;}
.books table td{ vertical-align: top; padding-bottom: 20px;}
.books input{ width: 450px; height: 45px; border: solid 1px #808080; font-size: 18px; background: #f7f8f8 url(../img/book_ico.png) no-repeat;text-indent: 190px;}
.books input.uname{ background-position: 0 3px;}
.books input.phone{ background-position: 0 -47px;}
.books input.email{ background-position: 3px -100px;}
.books input.company{ background-position: 0 -155px;}
.books input.title{ background-position: 0 -205px;padding:0 0 0 0;text-align: inherit;}
.books input.apps{ background-position: 0 -248px;}
.books input.colors{ background-position: 0 -297px;}
.books input.prots{ background-position: 0 -345px;}
.books input.appl{ background-position: 0 -390px; text-indent: 210px;}
.books input.myfile{ background-position: 0 -440px;}
.books input.myfile2{background: #f7f8f8 url(../img/book_ico3.png) no-repeat; text-indent: 50px;}

.books textarea{ padding: 10px; width: 465px; height:313px; line-height: 28px; border: solid 1px #808080; background: #f7f8f8 url(../img/message.png) no-repeat left top; font-size: 18px; text-indent: 160px;}
.books h2{ font-size: 34px; line-height: 120px; padding-top: 40px; color: #005ba6; text-align: center;}
.books .bookBut{ padding-top: 55px; text-align: center;}
.books .bookBut button{ width: 140px; height: 45px; background: #005ba6; color:#fff; border: none; border-radius: 20px; font-size: 18px;}

.shaix-a{ padding-bottom: 20px; margin-bottom: 50px; border-bottom: solid 1px #ddd; overflow: hidden;}
.shaix-a ul{ width: 102%;}
.shaix-a ul li{ width: 170px; height: 150px; margin-left:2px; float:left; text-align: center; background:url(../img/7x.png) no-repeat right 32px;}
.shaix-a ul li a{ display: block;}
.shaix-a ul li .pic{ width: 120px; height: 120px; margin: auto; position: relative;}
.shaix-a ul li .pic img{ width: 100%; height: 100%;}
.shaix-a ul li .pic em{ width: 120px; height: 120px; line-height: 120px; position: absolute; left: 0; top: 0; display: none; color: #fff; font-weight: bold; font-style: normal;}
.shaix-a ul li h3,.shaix-a ul li h4{ width: 100px; height: 30px; font-size: 18px; font-weight: normal; margin:-10px auto 0 auto;}
.shaix-a ul li:hover .pic em{ display: block;}
.shaix-a ul li:hover h3{ display: none;}

.shaix-a ul li.no7 h3{  display: block;}
.shaix-a ul li.no7 .pic em{ display: none;}

.shaix-b{ width: 719px; margin: auto; padding-bottom: 80px; overflow: hidden;}
.shaix-b ul{ width: 720px; margin: auto;}
.shaix-b ul li{ width: 240px;  float: left; text-align: center; background:url(../img/7x.png) no-repeat right 30px;}
.shaix-b ul li .pic{ width: 115px; height: 115px; margin: auto; border: solid 2px #222; border-radius: 50%; display: inline-block; position: relative;}
.shaix-b ul li .pic img{ width: 100%; height: 100%;border-radius: 50%;}
.shaix-b ul li .pic em{ width:100%; font-weight: bold; font-size: 18px; border-radius: 50%; display:none; z-index: 2; position: absolute;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%); font-style: normal; color: #fff;}
.shaix-b ul li .pic b{ width: 100%; height: 100%; display: none;border: solid 2px #222;  border-radius: 50%; position: absolute; left: -2px; top:-2px; background: url(../img/hei70.png); z-index: 1;}
.shaix-b ul li a{ display: block;}
.shaix-b ul li h3{ line-height: 30px; font-size: 18px; font-weight: normal;}
.shaix-b ul li:hover .pic em,.shaix-b ul li:hover .pic b{ display: inline-block;}
.shaix-b ul li:hover h3{ display: none;}


.product{ overflow: hidden;}
.product ul{ width: 110%;}
.product ul li{ width: 370px; height: 750px; margin-right: 45px; float: left; font-size: 20px; line-height: 28px; color: #595757;font-family:Verdana;}
.product ul li h3{ height: 50px; padding: 10px 0; font-size: 26px; color: #231815;}
.product ul li .pic{ width: 370px; height: 220px; background: #efefef url(../img/yuan1.png) no-repeat center;}
.product ul li table{ width: 100%; margin: 10px auto; border-collapse: collapse;}
.product ul li table td{ min-width: 54px;}
.product ul li table img{ width: 54px; height: 54px; margin-top: 5px; margin-bottom: 5px;}



.sustainability-info{ margin-top: 140px; margin-bottom: 165px; background:#f7f8f8; }
.sustainability-info:hover .info-img{box-shadow:0px 0px 20px 5px #ccc;}
.sustainability-info:hover .info-img b span{ color: #88be44;}
.sustainability-info img{ display: block;}
.sustainability-info .info-img{ width: 550px; height: 485px; margin-top: -90px; position: relative;}
.sustainability-info .info-img b{ width: 100%; height: 100%; display: block; position: absolute; bottom: 0; background: url(../img/jianbian2.png) repeat-x bottom center;}
.sustainability-info .info-img b span{ margin-top: 425px; display: block; color: #fff; font-size: 32px; margin-left: 28px;}
.sustainability-info .info-txt{ margin-top: 50px;}

.strategy-ul{ padding-bottom: 3rem;  margin-top: 50px;}
.strategy-ul ul{}
.strategy-ul ul li{ height: 310px; background: #f7f8f8; margin-top: 35px;}
.strategy-ul ul li:hover{box-shadow:0px 0px 20px 5px #ddd;}
.strategy-ul ul li .str-left{ width: 534px; height: 310px; float:left; position: relative; color: #fff;}
.strategy-ul ul li .str-left img{ width: 100%; height: 100%;}
.strategy-ul ul li .str-left h3{ height: 85px; position: absolute; top:100px; left: 40px; border-bottom: solid 2px #fff;}
.strategy-ul ul li .str-left h3 strong{ display: block; height: 50px; font-size: 53px;}
.strategy-ul ul li .str-left h3 b{ display: block; height: 25px; font-size: 25px;}
.strategy-ul ul li .str-left h4{ position: absolute; top:200px; left: 40px; font-size: 32px;}
.strategy-ul ul li .str-right{ width: 586px; height: 250px; padding: 30px 40px; float: right; font-size: 20px; line-height: 25px;}

.origin{ padding: 50px 0; background: #f7f8f8;}
.origin .origin-ul{ text-align: center; margin-top: 65px;}
.origin .origin-ul .ul{ display: inline-table; text-align: center; margin-left: -70px;}
.origin .origin-ul .ul li{ display: table-cell; position: relative;}
.origin .origin-ul .ul li .pic{ width: 197px; height: 197px;}
.origin .origin-ul .ul li .pic img{  width: 100%; height: 100%;}
.origin .origin-ul .ul li a{width: 197px; height: 197px; border-radius: 50%;  display: block; margin: 0 60px;}
.origin .origin-ul .ul li a span{ position: absolute; left: 185px; top: 140px; text-align: left; display: inline-block; font-size: 24px; font-weight: bold;}
.origin .origin-ul .ul li:hover a{box-shadow:0px 0px 20px 5px #ccc;}

.mission{ height: 800px;}
.mission ul{ height:240px;}
.mission ul li{ width: 280px; height: 225px; padding: 15px 50px 0 50px; background: #efefef; display:inline-block; text-align: center; float: left;}
.mission ul li img{ margin:auto;}
.mission ul li h3{ font-size: 30px;}
.mission ul li p{ font-size: 24px; line-height: 24px;}
.mission ul li.mri2{ margin: 0 30px;}
.mission ul li:hover{box-shadow:0px 0px 20px 5px #ccc; cursor: default;}

.events-dl{ width: 110%; margin-top: 34px;}
.events-dl dl{ width: 265px; height: 202px; padding: 25px 0 0 20px; float: left; background: #efefef; margin: 0 20px 20px 0;}
.events-dl dl:hover{ background: #89BE44; color: #fff; cursor: default;}
.events-dl dl:hover dt{background: url(../img/xian1.png) no-repeat left bottom;}
.events-dl dl dt{ font-size: 24px; height: 42px; margin-bottom: 10px; background: url(../img/xian2.png) no-repeat left bottom;}
.events-dl dl dd{ font-size: 16px; line-height: 22px;}
.events-dl dl dd b{ width: 55px; display: inline-block; font-weight: normal;}

.events-book{ height: 835px; margin: 60px auto; background: url(../img/book.jpg) no-repeat center; position: relative;}
.events-book .book-input{ position: absolute;left:360px; top: 300px; }
.events-book .book-input p{ height: 70px;}
.events-book .book-input p input{ width: 212px; height: 40px; background:none; font-size: 14px; border: none;}
.events-book .book-txt{ position: absolute; right: 177px; top: 360px;}
.events-book .book-txt textarea{ width: 345px; height: 250px; background:none; font-size: 16px; border: none;}
.events-book .book-but{ position:absolute; bottom: 90px; left: 50%; margin-left: -70px;}
.events-book .book-but button{ width: 140px; height: 45px; background: #80998f; color: #fff; border: none; font-size: 18px; border-radius: 30px;}

.events-year{ height:25px; border: solid 1px #888; position:absolute; right: 0; top: 9px; background: #888 url(../img/event3.png) no-repeat right top;border-radius: 12px; overflow: hidden;}
.events-year ul{}
.events-year ul li{ width: 88px; height:25px; line-height:25px; text-indent: 15px; font-size: 12px; color: #fff;}
.events-year ul li a{ display: block; text-decoration: none; text-indent: 15px; background: #ddd; color: #222;}
.events-year:hover{ height: inherit;}



.food-list{ height: 280px; overflow: hidden; margin-bottom: 120px;}
.food-list ul{ width: 104%;}
.food-list ul li{ width: 280px; height: 280px; position: relative; float: left; margin-right: 26px; overflow: hidden;}
.food-list ul li b{ width: 100%; height: 100%; position: absolute; color: #fff; left:0; bottom: 0; background: url(../img/jianbian.png) repeat-x left bottom;}
.food-list ul li span{ color: #fff; position: absolute; top: 200px; display: block; font-size: 24px; margin-left: 20px; z-index: 100;font-family:Verdana;}
.food-list ul li span em{ font-size: 14px; font-style: normal;font-family:Verdana; line-height: 16px; display: block; margin-top: 5px;}
.food-list ul li .conb{ width: 100%; height: 0; position: absolute; bottom: 0; background:url(../img/hei60.png); color: #fff; overflow: hidden;transition: all 0.2s ease;-moz-transition: all 0.2s ease;-ms-transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-o-transition: all 0.2s ease;}
.food-list ul li .conb h3{ font-size: 24px; margin-top: 25px; margin-left: 18px;font-family:Verdana;}
.food-list ul li .conb p{ font-size: 14px; margin-top: 10px; margin-left: 18px; width: 90%;font-family:Verdana;}
.food-list ul li img{ width: 100%; height: 100%;}
.food-list ul li:hover .conb{ height: 100%;}
.food-list ul li:hover b,.food-list ul li:hover span{ display: none;}

.rosemary{ overflow: hidden;}
.rosemary table{ width: 100%; height: 415px; border-collapse: collapse;}
.rosemary table .rs01{ width: 600px; height: 415px;}
.rosemary table .rs01 img{ width: 100%; height: 100%; display: block;}
.rosemary table .rs02{ width: 600px; background: url(../img/proico.png) no-repeat left top;}
.rosemary table .rs02 .rosemary-tit{ width: 500px; height: 305px; overflow: hidden; margin-top:  65px; margin-left: 60px; color: #fff;}
.rosemary table .rs02 .rosemary-tit a{ color: #fff;}
.rosemary table .rs02 .rosemary-tit h3{ height: 30px; line-height: 30px; font-size: 36px;}
.rosemary table .rs02 .rosemary-tit p{ line-height:30px;}
.rosemary table .rs02 .down{ margin-top: 15px;}
.rosemary table .rs02 .down a{ float: right; font-size: 16px; height: 48px; line-height: 48px; margin-right: 25px; padding-right: 50px; color: #fff; text-decoration: none; display: inline-block; background: url(../img/down.png) no-repeat right center}

.content-ul{ margin-bottom: 6rem; background: #f7f8f8; padding: 80px 0; text-align: center;}
.content-ul .ul{ margin: auto; display: inline-table; text-align: center;}
.content-ul .ul li{width: 270px; height: 270px; border-radius: 50%; display: table-cell;}
.content-ul .ul li a{ width: 270px; height: 163px; text-decoration: none; padding-top: 107px; margin: 0 15px; display:inline-block; line-height: 24px;  background: #8BBE44; border-radius: 50%; color: #fff; font-size: 24px; font-weight: bold;}
.content-ul .ul li a:hover{ color: #fff; text-decoration: none; background:#9fb776 url(../img/yuan.png) no-repeat; background-size: 100% 100%;}
.content-ul .ul li:hover a{box-shadow:0px 0px 20px 5px #ccc;}

.type-ul{ padding-bottom: 60px; padding-top: 20px;}
.type-ul ul{ height: 90px;}
.type-ul ul li{ width: 170px; height: 90px; float: left; margin-right: 2px; text-align: center; position: relative;}
.type-ul ul li img{ width: 100%; height: 100%;}
.type-ul ul li h3{ width: 100%; font-size: 16px; font-weight: normal; height: 28px; line-height: 28px; position: absolute;}
.type-ul ul li h3 strong{ font-weight: normal;}
.type-ul ul li.ty-ul-01 img{ display: none;}
.type-ul ul li.ty-ul-01 h3{ height: 90px; background: #88be44; bottom:0; left: 0;}
.type-ul ul li.ty-ul-01 h3 strong{ width: 100px; height:40px; line-height: 20px; color: #fff; font-weight: bold; display: block; margin:25px auto 0 auto;}
.type-ul ul li:hover h3{ height: 90px; line-height: 90px; bottom: 0; left: 0; background: url(../img/hei70.png); color: #fff;}

.news-type{ margin-bottom: 200px; margin-top: 50px;}
.news-type table{ width:100%;border-collapse:collapse; background: #f00}
.news-type table .td01,.news-type table .td02{ position: relative;}
.news-type table .td01{ width: 300px;}
.news-type .ty-01{ width: 270px; height: 45px; line-height: 45px; font-size: 16px; border: solid 2px #8BBE44;  overflow: hidden;position: absolute;}
.news-type .ty-01 ul{ width: 100%; height: 100%; }
.news-type .ty-01 ul li{ background: #fff; text-indent: 25px; font-weight: bold;background: url(../img/sjx.png) no-repeat right top;}
.news-type .ty-01 ul li a{ display: block; text-indent: 25px; background: #efefef; font-weight: normal;}
.news-type .ty-01 ul li a:hover{ background: #8BBE44; color: #fff;}
.news-type .ty-01:hover{ height: inherit;}
.news-type .ty-01:hover ul li{ background: url(../img/sjx2.png) no-repeat right top;}

.news-type .ty-02{ position: absolute; right: -30px; top: -20px;}
.news-type .ty-02 ul{ width: 100%; height: 90px;}
.news-type .ty-02 ul li{ width: 90px; margin: 0 30px; position: relative; float: left; display: block;}
.news-type .ty-02 ul li a{ display: block;}
.news-type .ty-02 ul li .pic{ width: 90px; height: 90px; border-radius: 50%; text-align: center; position: absolute; left: 0; top: 0; z-index: 20; border-radius: 50%;position:absolute;transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
.news-type .ty-02 ul li .pic b{ width: 90px; height: 60px; padding-top: 30px; font-size: 14px; font-weight:normal; display:none;border-radius: 50%; background: url(../img/hei70.png); color: #fff;position:absolute; z-index: 22; left: 0; top: 0;}
.news-type .ty-02 ul li .pic img{ width:90px; height: 90px; border-radius: 50%;}
.news-type .ty-02 ul li h3{ width:90px; height: 30px; margin-top: 100px; text-align: center; font-size: 16px; font-weight: normal;}
.news-type .ty-02 ul li a{ display: inline-block;}
.news-type .ty-02 ul li:hover h3{ display: none}

.news-type .ty-02 ul li .pic:hover{
    transform: scale(1.5);-moz-transform: scale(1.5);-webkit-transform: scale(1.5);-o-transform: scale(1.5);-ms-transform: scale(1.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
    background-position:center;}
.news-type .ty-02 ul li .pic:hover h3{ display: none;}
.news-type .ty-02 ul li .pic:hover b{ display: block;}

.page{ height:100px; margin-top: 50px; text-align: center; position: relative;}
.page ul.pagination{ text-align: center; position: absolute; left: 50%; top: 50%;transform: translateX(-50%) translateY(-50%);}
.page ul.pagination li{ width: 15px; height: 15px; line-height: 15px; margin: 0 5px; float: left; background: #d0d0d0; border-radius: 50px; display: inline-block;}
.page ul.pagination li a{ display:inline-block; color: #cfcfcf;}
.page ul.pagination li.active{ background: #8d8d8f;color: #8d8d8f;}
.page ul.pagination li:first-child{ display: none;}
.page ul.pagination li:last-child{ display: none;}

.updown{ margin-top: 1rem; margin-bottom: 20px; text-align: center;}
.updown a{ width: 40px; height: 40px; line-height: 40px; color: #fff; display: inline-block; margin: 0 1px; background: #727171; font-size: 20px;}
.updown a:hover{ background: #8BBE44;}

.last{ font-size: 18px; text-align: center; color:#8BBE44; font-size: 14px;}
.last p{ line-height: 20px;}
.last a{ text-decoration: underline;}

@keyframes myfirst
{0%   {filter:alpha(opacity:0);opacity: 0; left:53px;}100% {filter:alpha(opacity:1);opacity: 1; left:13px;}}
@-moz-keyframes myfirst /* Firefox */
{0%   {filter:alpha(opacity:0);opacity: 0; left:53px;}100% {filter:alpha(opacity:1);opacity: 1; left:13px;}}
@-webkit-keyframes myfirst /* Safari and Chrome */
{0%   {filter:alpha(opacity:0);opacity: 0; left:53px;}100% {filter:alpha(opacity:1);opacity: 1; left:13px;}}
@-o-keyframes myfirst /* Opera */
{0%   {filter:alpha(opacity:0);opacity: 0; left:53px;}100% {filter:alpha(opacity:1);opacity: 1; left:13px;}}

@keyframes zfirst
{0%   {filter:alpha(opacity:0);opacity: 0; left:63px;}100% {filter:alpha(opacity:1);opacity: 1; left:13px;}}
@-moz-keyframes zfirst /* Firefox */
{0%   {filter:alpha(opacity:0);opacity: 0; left:63px;}100% {filter:alpha(opacity:1);opacity: 1; left:13px;}}
@-webkit-keyframes zfirst /* Safari and Chrome */
{0%   {filter:alpha(opacity:0);opacity: 0; left:63px;}100% {filter:alpha(opacity:1);opacity: 1; left:13px;}}
@-o-keyframes zfirst /* Opera */
{0%   {filter:alpha(opacity:0);opacity: 0; left:63px;}100% {filter:alpha(opacity:1);opacity: 1; left:13px;}}

@media screen and (min-width: 0px) and (max-width: 1200px) {
    .infolist ul{ width: 102%;}
    .infolist ul li{width: calc(50% - 30px);}
    .infolist ul li .pic{width: 100%;}
    .content img{width: 100%;}
}