﻿/*****************************************************************************

 *@reset.css

  *(css初始化) 

*****************************************************************************/




article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display:block;
}
div,p,dl,dd,a,b,u,em,input,textarea,button,option,select,form,label,span,td,li,body,ul,ol,i,h1,h2,h3,h4,h5,h6{
    padding:0;
    margin:0;
    font-family:'Microsoft YaHei',Helvetica,Arial,sans-serif;
}
body{font-size:12px;}
* { margin: 0; padding: 0; -webkit-text-size-adjust: none }
td { text-align: left }
img { border: 0; vertical-align: top }
ul, li, ol, ul { list-style: none }
h1, h2, h3, h4, h5, h6 { font-size: 12px; font-weight: normal; overflow: hidden; }
a { color: #333; text-decoration: none }
a:visited {; text-decoration: none }
a:hover { color: #444; text-decoration: underline; }
a:active { color: #444 }
input, button, textarea, select { color: #797779 }
/*****************************************************************************

 *@gird.css

  *(基础效果:特定宽度、间距、颜色、字号)

*****************************************************************************/







.fl { float: left }
.fr { float: right }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0; font-size: 0 }
.clearfix { *zoom:1
}
.rel { position: relative }
.abs { position: absolute }
.blue { color: #0B72A4 }
strong { font-weight: 700 }
.p5 { padding: 5px }
.p10 { padding: 10px }
.p15 { padding: 15px }
.p20 { padding: 20px }
.p25 { padding: 25px }
.p30 { padding: 30px }
.p35 { padding: 35px }
.p40 { padding: 40px }
.pt5 { padding-top: 5px }
.pt10 { padding-top: 10px }
.pt15 { padding-top: 15px }
.pt20 { padding-top: 20px }
.pt25 { padding-top: 25px }
.pt30 { padding-top: 30px }
.pt35 { padding-top: 35px }
.pt40 { padding-top: 40px }
.pr5 { padding-right: 5px }
.pr10 { padding-right: 10px }
.pr15 { padding-right: 15px }
.pr20 { padding-right: 20px }
.pr25 { padding-right: 25px }
.pr30 { padding-right: 30px }
.pr35 { padding-right: 35px }
.pr40 { padding-right: 40px }
.pb5 { padding-bottom: 5px }
.pb10 { padding-bottom: 10px }
.pb15 { padding-bottom: 15px }
.pb20 { padding-bottom: 20px }
.pb25 { padding-bottom: 25px }
.pb30 { padding-bottom: 30px }
.pb35 { padding-bottom: 35px }
.pb40 { padding-bottom: 40px }
.pl5 { padding-left: 5px }
.pl10 { padding-left: 10px }
.pl15 { padding-left: 15px }
.pl20 { padding-left: 20px }
.pl25 { padding-left: 25px }
.pl30 { padding-left: 30px }
.pl35 { padding-left: 35px }
.pl40 { padding-left: 40px }
.m5 { margin: 5px }
.m10 { margin: 10px }
.m15 { margin: 15px }
.m20 { margin: 20px }
.m25 { margin: 25px }
.m30 { margin: 30px }
.m35 { margin: 35px }
.m40 { margin: 40px }
.mt5 { margin-top: 5px }
.mt10 { margin-top: 10px }
.mt15 { margin-top: 15px }
.mt20 { margin-top: 20px }
.mt25 { margin-top: 25px }
.mt30 { margin-top: 30px }
.mt35 { margin-top: 35px }
.mt40 { margin-top: 40px }
.mr5 { margin-right: 5px }
.mr10 { margin-right: 10px }
.mr15 { margin-right: 15px }
.mr20 { margin-right: 20px }
.mr25 { margin-right: 25px }
.mr30 { margin-right: 30px }
.mr35 { margin-right: 35px }
.mr40 { margin-right: 40px }
.mb5 { margin-bottom: 5px }
.mb10 { margin-bottom: 10px }
.mb15 { margin-bottom: 15px }
.mb20 { margin-bottom: 20px }
.mb25 { margin-bottom: 25px }
.mb30 { margin-bottom: 30px }
.mb35 { margin-bottom: 35px }
.mb40 { margin-bottom: 40px }
.ml5 { margin-left: 5px }
.ml10 { margin-left: 10px }
.ml15 { margin-left: 15px }
.ml20 { margin-left: 20px }
.ml25 { margin-left: 25px }
.ml30 { margin-left: 30px }
.ml35 { margin-left: 35px }
.ml40 { margin-left: 40px }
.col_1 { width: 10px }
.col_2 { width: 20px }
.col_3 { width: 30px }
.col_4 { width: 40px }
.col_5 { width: 50px }
.col_6 { width: 60px }
.col_7 { width: 70px }
.col_8 { width: 80px }
.col_9 { width: 90px }
.col_10 { width: 100px }
.col_11 { width: 110px }
.col_12 { width: 120px }
.col_13 { width: 130px }
.col_14 { width: 140px }
.col_15 { width: 150px }
.col_16 { width: 160px }
.col_17 { width: 170px }
.col_18 { width: 180px }
.col_19 { width: 190px }
.col_20 { width: 200px }
.col_21 { width: 210px }
.col_22 { width: 220px }
.col_23 { width: 230px }
.col_24 { width: 240px }
.col_25 { width: 250px }
.col_26 { width: 260px }
.col_27 { width: 270px }
.col_28 { width: 280px }
.col_29 { width: 290px }
.col_30 { width: 300px }
.col_31 { width: 310px }
.col_32 { width: 320px }
.col_33 { width: 330px }
.col_34 { width: 340px }
.col_35 { width: 350px }
.col_36 { width: 360px }
.col_37 { width: 370px }
.col_38 { width: 380px }
.col_39 { width: 390px }
.col_40 { width: 400px }
.col_41 { width: 410px }
.col_42 { width: 420px }
.col_43 { width: 430px }
.col_44 { width: 440px }
.col_45 { width: 450px }
.col_46 { width: 460px }
.col_47 { width: 470px }
.col_48 { width: 480px }
.col_49 { width: 490px }
.col_50 { width: 500px }
.col_51 { width: 510px }
.col_52 { width: 520px }
.col_53 { width: 530px }
.col_54 { width: 540px }
.col_55 { width: 550px }
.col_56 { width: 560px }
.col_57 { width: 570px }
.col_58 { width: 580px }
.col_59 { width: 590px }
.col_60 { width: 600px }
.col_61 { width: 610px }
.col_62 { width: 620px }
.col_63 { width: 630px }
.col_64 { width: 640px }
.col_65 { width: 650px }
.col_66 { width: 660px }
.col_67 { width: 670px }
.col_68 { width: 680px }
.col_69 { width: 690px }
.col_70 { width: 700px }
.col_71 { width: 710px }
.col_72 { width: 720px }
.col_73 { width: 730px }
.col_74 { width: 740px }
.col_75 { width: 750px }
.col_76 { width: 760px }
.col_77 { width: 770px }
.col_78 { width: 780px }
.col_79 { width: 790px }
.col_80 { width: 800px }
.col_81 { width: 810px }
.col_82 { width: 820px }
.col_83 { width: 830px }
.col_84 { width: 840px }
.col_85 { width: 850px }
.col_86 { width: 860px }
.col_87 { width: 870px }
.col_88 { width: 880px }
.col_89 { width: 890px }
.col_90 { width: 900px }
.col_91 { width: 910px }
.col_92 { width: 920px }
.col_93 { width: 930px }
.col_94 { width: 940px }
.col_95 { width: 950px }
.col_96 { width: 960px }
.col_97 { width: 970px }
.col_98 { width: 980px }
.col_99 { width: 990px }
.col_100 { width: 1000px }
.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12, .col_13, .col_14, .col_15, .col_16, .col_17, .col_18, .col_19, .col_20, .col_21, .col_22, .col_23, .col_24, .col_25, .col_26, .col_27, .col_28, .col_29, .col_30, .col_31, .col_32, .col_33, .col_34, .col_35, .col_36, .col_37, .col_38, .col_39, .col_40, .col_41, .col_42, .col_43, .col_44, .col_45, .col_46, .col_47, .col_48, .col_49, .col_50, .col_51, .col_52, .col_53, .col_54, .col_55, .col_56, .col_57, .col_58, .col_59, .col_60, .col_61, .col_62, .col_63, .col_64, .col_65, .col_66, .col_67, .col_68, .col_69, .col_70, .col_71, .col_72, .col_73, .col_74, .col_75, .col_76, .col_77, .col_78, .col_79, .col_80, .col_81, .col_82, .col_83, .col_84, .col_85, .col_86, .col_87, .col_88, .col_89, .col_90, .col_91, .col_92, .col_93, .col_95, .col_95, .col_96, .col_97, .col_98, .col_99, .col_100 { display: inline; float: left }
.oh { overflow: hidden }
/*全站公用*/

.wrap { margin-left: auto; margin-right: auto; width:1240px  }
.topwhitebkg { background: #fff; overflow: hidden }
.bg_white { background: #fff; }
.bg_f6 { background: #f6f6f6; }
.bd_e0 { border: 1px solid #e0e0e0; }
.bdt_e0 { border-top: 1px solid #e0e0e0; }
.ul_s1 li, .ul_s2 li, .ul_s3 li, .ul_s5 li, .dszz dt { background: url(../Img/imgs.png) 0 0 no-repeat; }
.ul_s4 li { background: url(../Img/dsimg.png) 0 0 no-repeat; }
.ul_s1 .space { background: none; }
.tt { margin-bottom: 10px }
.txtinput { border: 1px solid #e0e0e0; height: 28px; padding: 0 5px; }
.box1 .tt {    height: 46px;
    line-height: 46px;
    border-bottom: 2px solid #e9e9e9;
    width: 100%;
    margin: 0px 0 10px 0;
    position: relative;}
.box1 .tt h2 { 
font-weight: bold;
    font-size:20px;
    color: #333;
    border-bottom: 2px solid #db4700;
    height: 55px;
    line-height: 55px;
    position: absolute;
    box-sizing: border-box;
    bottom: -1px;
}
.box1 .tt h2 a{    font-size:20px;
    color: #333;
    font-weight: bold;
}}
.box1 .more, .box1 .more:hover { color: #fff; padding-right: 15px }
.more1, .more1:hover { display: inline-block; padding: 0 5px; background: #4ba669; font-size: 12px; color: #fff; text-decoration: none; text-align: center; border-radius: 5px; height: 18px; line-height: 18px; }
.box2 .tt { border-top: 3px solid #da2920; height: 32px; line-height: 32px; }
.box2 .tt h2 { color: #333; font: bold 16px/30px "microsoft yahei", heiti; }
.box2 .more, .box1 .more:hover { color: #ccb17a; }
.box3 { border: 1px solid #e0e0e0; padding: 5px 15px 20px 15px }
.box3 .tt h2 { color: #333; font: bold 16px/30px "microsoft yahei", heiti; }
.box3 .more, .box1 .more:hover { color: #ccb17a; }
.box4 .tt h2 { color: #333; font: bold 16px/30px "microsoft yahei", heiti; }
.ul_ft12 li { height: 24px; line-height: 24px; overflow: hidden; }
.ul_s1 li, .dszz dt { padding-left: 20px; background-position: -280px 4px; height: 24px; line-height: 24px; }
.ul_s2 li { padding-left: 15px; background-position: -280px -15px; height: 24px; line-height: 24px; }
.ul_s3 li { padding-left: 20px; background-position: -285px -78px; height: 24px; line-height: 24px; }
.ul_s4 li { padding-left: 24px; background-position: -712px -133px; height: 24px; line-height: 24px; }
.ul_s5 li { padding-left: 24px; background-position: -275px -42px; height: 24px; line-height: 24px; }
.ul_ft12 li span { color: #369; padding-right: 5px; }
.ul_ft12 li span a { color: #369; }
.ul_ft14 li { font-size:18px; height:34px; line-height:34px; overflow: hidden; margin-bottom: 5px; }
.ul_ft12 li em, .ul_ft14 li em { display: block; float: right; font-style: normal; color: #999; font-size: 12px; text-align: right; width: 90px; }
ul.imglist li { float: left }
ul.imglist li img { margin-bottom: 5px; }
ul.imglist li p { overflow: hidden; text-align: center; height: 20px; line-height: 20px; cursor: pointer; }
ul.imglist li a { color: #333; }
.pictxt .l { float: left; }
.pictxt .l p { height: 22px; line-height: 22px; overflow: hidden; }
.pictxt .r { float: none; overflow: hidden; }
.pictxt .r p { color: #999; }
.more { float: right; }
.topnews h3 { font: bold 22px/26px "microsoft yahei", heiti; height: 26px; }
.topnews p { line-height: 20px; height: 60px; overflow: hidden; color: #999; }
.topnews .ul_ft14 li { margin-bottom: 2px; }
/*tabs1*/



.tabs1 { background: #f6f6f6; overflow: hidden; }
.tabs1 .hd { border-bottom: 1px solid #e0e0e0; height: 36px; }
.tabs1 .hd li { position: relative; height: 34px; line-height: 34px; text-align: center; float: left; font: normal 14px/34px "Microsoft YaHei"; _font-weight: bold; cursor: pointer; padding: 0 10px; }
.tabs1 .hd li.on { border-bottom: 2px solid #6c3; font-weight: bold; background: #fafafa; height: 35px; }
.tabs1 .bd { padding: 15px 20px; }
/*tabs2*/



.tabs2 { border-top: 2px solid #4ba669; }
.tabs2 .hd { overflow: hidden; background: #f6f6f6; border-left: 1px solid #ddd; }
.tabs2 .hd li { position: relative; margin-left: -1px; height: 37px; line-height: 37px; text-align: center; float: left; border: 1px solid #e0e0e0; border-top: 0; font: normal 14px/37px "Microsoft YaHei"; _font-weight: bold; cursor: pointer; padding: 0 10px; }
.tabs2 .hd li.on { background: #fff; border-bottom: 1px solid #fff; color: #333; font-weight: bold; }
/*通用页面*/



.sitetop { background: url(../Img/sitetop.jpg?v=1.0) top center no-repeat #fff; height: 290px; }
.container { background: url(../Img/bkg.jpg) top center repeat-y #faf2db; }
/*导航*/

.navbar{background: #da2920;} 
.navbarbkg { background: #da2920; width: 1280px; margin: 0 auto }
.nav { height:62px; line-height:62px; position: relative; z-index: 1; }
.nav a { color: #fff; }
.nav .nLi { float: left; position: relative; display: inline; padding-right: 2px;width:150px; }
.nav .nLi h3 { float: left;width:142px;text-align: center;}
.nav .nLi h3 a { display: block; padding: 0 10px; font-size:20px; font-weight: bold; }
.nav .nLi h3 a:hover { text-decoration: none }
.nav .sub { display: none; width: 140px; left: 0; top:62px; position: absolute; background: #fff; line-height: 26px; padding: 5px 0; border: 1px solid #b30900; border-top: 0;}
.nav .sub li { zoom: 1; }
.nav .sub a { display: block; padding: 0 10px; color: #333; font-size:16px; text-align:center; line-height: 35px;height: 35px;
}}
.nav .sub a:hover { background: #b30900; color: #fff; text-decoration: none }
.nav .on h3 a { background: #b30900; color: #fff; }
.bread { font-size:20px; color: #aaa; padding:20px 0 20px 15px }/*导航面包条*/
.bread a { margin: 0 5px; }
.bread span { margin: 0 5px; color: #000; }
/**/

.contbox { background: #fff; width: 1280px; margin: 0 auto; }
/*头部图片轮显*/

.top_slide { height: 380px; overflow: hidden; position: relative; width:560px; }
.top_slide .hd { bottom: 46px; height: 16px; overflow: hidden; position: absolute; right: 10px; z-index: 1; opacity: 0.8 }
.top_slide .hd ul { float: left; overflow: hidden }
.top_slide .hd ul li { background: #696969; cursor: pointer; float: left; height: 16px; line-height: 16px; margin-left: 5px; text-align: center; width: 16px; color: #fff; }
.top_slide .hd ul li.on { background: #da2920; color: #fff; }
.top_slide .bd { height: 100%; position: relative; z-index: 0 }
.top_slide .bd li { vertical-align: middle }
.top_slide .bd img { /*display: block;会导致ie6第一张轮显图下沉30px左右。所以屏蔽之*/ height: 380px; width:560px; }
.top_slide .tg_text { position: absolute; bottom: 0px; width:560px; height:42px; line-height:42px; background: none no-repeat #000; opacity: 0.8; overflow: hidden; }
.top_slide .tg_text p { padding: 0 10px; color: #fff; font-size: 18px }
#footer_all { padding: 40px 0 20px; text-align: center; border-top: 1px solid #dae7f2; background: #f5fbff; }
#footer_all a { color: #999; }
/*翻页*/

.page_all { font-family: "arial"; margin: 20px 0; padding: 6px; text-align: center }
.page_all a { color: #444; margin: 2px; padding: 5px 8px; text-decoration: none; border: 1px solid #e0e0e0; }
.page_all a:hover { background: #da2920; color: #fff; text-decoration: none; border: 1px solid #da2920; }
.page_all a:active { border: 1px solid #C33; color: #000000 }
.page_all span.current { background: #da2920; border: none; color: #fff; font-weight: bold; margin: 2px; padding: 5px 8px; border: 1px solid #da2920; }
.page_all span.disabled { background: #f4f4f4; color: #CECECE; margin: 2px; padding: 5px 8px }
.page_all span.info { padding-right: 5px }
.sub_rows .tt h2 { font: bold 16px/40px "microsoft yahei", heiti; }

.newsmain_all { background: #fff; }
.newshd { margin-bottom: 30px; }
.newshd h1, .newshd h2 { font-family: "microsoft yahei", simhei; font-size: 30px; color: #2a2a2a; border-bottom: 1px solid #e0e0e0; padding-bottom: 20px; text-align: center; line-height: 36px; }
.bds { width: 140px; }
.auth_date { color: #a0a0a0; }
.auth_date span { padding-right: 10px; }
.newsmain_all .cont, .newsmain_all .cont p { font-size: 16px; line-height: 24px; padding: 5px 0; }
.newsmain_all .cont img { display: block; max-width: 600px; width:expression(document.body.clientWidth > 600? "600px": "auto" );/*for ie6*/
margin: 15px auto; }
.sitemsg { padding: 50px 100px; text-align: center; background: #fff; margin: 20px 0; border: 1px solid #eee }
.sitemsg h2 { font: 20px/28px "microsoft yahei", heiti; color: #369; }
.sitemsg p { padding: 20px 0; color: #999; font-size: 14px; }
/*县区党史*/

.xqds { padding: 10px }
.xqds a { display: inline-block; margin: 5px 12px; font-size: 14px; }
/*历史今天*/

.htoday { height: 240px; overflow: hidden }
.htoday .l { width: 310px; }
.htoday .l img { width: 280px; height: 190px }
.htoday h3 { color: #b30900; font: 18px/22px "microsoft yahei", heiti; text-align: center; margin: 10px 0 }
.htoday p { line-height: 22px; max-height: 110px; overflow: hidden; margin-bottom: 15px; font-size: 14px }
/*每月大事记*/


.mydsj {padding-right: 10px;}
.mydsj li{overflow: hidden; white-space: nowrap;}
.mydsj a { display: inline-block; margin:5px 5px 0 0; font-size:18px;}
/*最新公告*/

.zxgg li em { font-style: normal; color: #b30900; float: left; width: auto; margin-right: 5px }
/*红色旅游*/

.glhsly .tt { background: #e0e0e0; height: 32px; line-height: 32px; margin-bottom: 10px }
.glhsly .tt h2 { color: #333; font: bold 16px/32px "microsoft yahei", heiti; padding-left: 20px }
/*专题链接*/

.ztlj img { width: 280px; height: 60px; border: 0; margin-bottom: 10px }
/*详情页*/

.newsmain_all { background: #fff; }
.newshd { margin-bottom: 30px; }
.newshd h1, .newshd h2 { font-family: "microsoft yahei", simhei; font-size: 30px; color: #2a2a2a; border-bottom: 1px solid #e0e0e0; padding-bottom: 20px; text-align: center; line-height: 36px; }
.bds { width: 140px; }
.auth_date { color: #a0a0a0; }
.auth_date span { padding-right: 10px; }
.newsmain_all .cont p { font-size: 16px; line-height: 24px; padding: 15px 0; }
.newsmain_all .cont img { display: block; max-width: 600px; width:expression(document.body.clientWidth > 600? "600px": "auto" );/*for ie6*/
margin: 15px auto; }
.description { border: 1px solid #DDD; color: #666; padding: 15px 20px; text-align: justify; text-justify: inter-ideograph; font-size: 14px; margin-left: 10px; margin-top: 10px; margin-bottom: 15px; line-height: 28px; }
.bkfwd { margin-top: 40px; }
.bkfwd li { font-size: 14px; height: 18px; line-height: 20px; overflow: hidden; margin: 5px 0; padding-left: 20px; background: url(../Img/imgs.png) 0 0 no-repeat; background-position: -285px -85px; }
/*景点轮显*/

.hslylx { overflow: hidden; position: relative; }
.hslylx .bd { padding: 10px; }
.hslylx .bd ul { overflow: hidden; }
.hslylx .bd ul li { float: left; margin: 0 8px; overflow: hidden; text-align: center; }
.hslylx .bd ul li .pic { text-align: center; }
.hslylx .bd ul li .pic img { background: #fff; border: 1px solid #ccc; display: block; height: 160px; padding: 2px; width: 204px; }
.hslylx .bd ul li .pic a:hover img { border-color: #999; }
.hslylx .bd ul li .title { line-height: 24px; }
.gmyz .imglist { overflow: hidden; margin-left: -20px }
.gmyz .imglist li { margin: 0 0 20px 20px;text-align:center }
.gmyz .imglist li img { width:200px; height:180px }
/*党史视频*/

.video-group{margin-top:20px;}
.video-group .group-main{padding-top:20px;}
.video-group .group-main ul{font-size:0;}
.video-group .group-main li{display:inline-block;width:360px;vertical-align:top;margin:0 46px 30px 0;}
.video-group .group-main img{display:block;width:100%;height:100%;-webkit-transition:transform .2s ease-out;-moz-transition:transform .2s ease-out;-ms-transition:transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;}
.video-group .video-cover a{position:relative;display:block;height:240px;border-radius:8px;overflow:hidden;}
.video-group .video-cover a:after{position:absolute;bottom:12px;left:16px;width:50px;height:50px;content:'';background:url(../Img/play_icon.png) no-repeat;}
.video-group .video-title{font-size:0;text-align:center;padding-top:14px;}
.video-group .video-title a{display:inline-block;line-height:30px;font-size:18px;color:#333;}

.dssp img { width: 250px; height: 180px; }
/*党史讲堂*/

.dsjt h5 { color: #666; margin: 5px 0 }
/*党史著作*/

/*党史著作*/

.dszz ul { overflow: hidden; margin-left: -30px }
.dszz li { float: left; margin-left: 30px; width: 180px; margin-bottom: 10px }
.gzdt { overflow: hidden }
.gzdt .l { width: 310px;  }
.gzdt .l p { font: bold 16px/22px "microsoft yahei", heiti; text-align: center; margin: 10px 0 }
.gzdt .l img { width:310px; height:210px }

.gzdt .hd{ height:30px; line-height:30px; padding:0 10px 0 20px;  position:relative; }
.gzdt .hd ul{ float:left; position:absolute; left:70px; top:-1px; height:32px;   }
.gzdt .hd ul li{ float:left; padding:0 15px; cursor:pointer; color: #fff;    font: bold 16px/32px "microsoft yahei", heiti; }
.gzdt .hd ul li.on{ height: 28px;    border-bottom: 4px solid #da9120;    background: #ececec;    color: #ff0000; }
.gzdt .bd ul{ padding:0 15px;  zoom:1;  }
.gzdt .bd li{ height:34px; line-height:34px;   }
.gzdt .bd li .date{ float:right; color:#999;  }
		
/*底部*/

.footer { width:100%; background: #da2920; padding: 15px 0; text-align: center; color: #fff; min-height: 60px }
.footer p { line-height: 200% }
.footer a { color: #FFF }

.prism-player{margin:0 auto}

.fixed-qrcode-layer{position:fixed;left:0;top:50%;z-index:10001;width:240px;height:400px;margin-top:-100px;}
.fixed-qrcode-layer img{display:block;width:100%;height:100%;}
.fixed-qrcode-layer-animation{-webkit-animation:qrcodeAni 2s;animation:qrcodeAni 2s;}
@-webkit-keyframes qrcodeAni{
    0%{
        opacity:0;
        -webkit-transform:translate3d(0,-100%,0);
    }
    70%{
        left:50%;
        width:240px;
        height:400px;
        margin:-150px 0 0 -150px;
        opacity:1;
        -webkit-transform:none;
    }
}
@keyframes qrcodeAni{
    0% {
        opacity:0;
        transform:translate3d(0,-100%,0);
    }
    70% {
        left:50%;
        width:240px;
        height:400px;
        margin:-150px 0 0 -150px;
        opacity:1;
        transform:none;
    }
}