.popup-bg{ background-color:rgba(0,0,0,0.6); position:fixed;top:0;left:0; width:100%; height:100%; z-index:1000;}
.main-content{width:690px; position:relative; margin:10em auto;}
.active-popup{height:510px;  display:block;}
.click-skip{ cursor:pointer;width:96px; height:28px; background-color:rgba(250,204,63,0.2); border:1px solid #facc3f; text-align:center; line-height:28px; font-size:14px; color:#facc3f; border-radius:20px; float:right;}
.click-skip span{ font-weight:bold; margin-left:8px;}
.active-popup .activecontent{ background:url(../../Image/popup/bg.png) no-repeat; width:686px;height:400px; margin-top:10px; display:inline-block;padding:105px 50px 0 34px;font-size: 14px;color: #6e4a12;}
.active-info{z-index:10; position:absolute;}
.active-info .active-title{ font-size:24px; color:#191300; font-weight:bold;
text-shadow: -.1em -.1em 0 #eca700, .1em -.1em 0 #eca700, -.1em .1em 0 #eca700, .1em .1em 0 #eca700; margin-bottom:62px;
width:240px; line-height:1.3em; max-height:2.6em; overflow:hidden; text-overflow:ellipsis;
animation: first .5s;
-moz-animation: first .5s;	/* Firefox */
-webkit-animation: first .5s;	/* Safari 和 Chrome */
-o-animation: first .5s;	/* Opera */}
@keyframes first
{
0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}
}

@-moz-keyframes first /* Firefox */
{
0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}
}

@-webkit-keyframes first /* Safari 和 Chrome */
{
0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}
}

@-o-keyframes first /* Opera */
{
0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}
}

.active-info .active-content{width: 195px; line-height: 1.6em; max-height:4.8em; overflow:hidden; text-overflow:ellipsis; margin-bottom:16px; opacity:0;
 animation: first .5s ;
-moz-animation: first .5s ;	/* Firefox */
-webkit-animation: first .5s ;	/* Safari 和 Chrome */
-o-animation: first .5s ;	/* Opera */
animation-delay:0.6s;
-webkit-animation-delay:0.6s; /* Safari 和 Chrome */
animation-fill-mode:  forwards }

.active-time{ opacity:0;
animation: first .5s ;
-moz-animation: first .5s ;	/* Firefox */
-webkit-animation: first .5s ;	/* Safari 和 Chrome */
-o-animation: first .5s ;	/* Opera */
animation-delay:1.2s;
-webkit-animation-delay:1.2s; /* Safari 和 Chrome */
animation-fill-mode:  forwards}

.active-img{  width:400px;height:238px; overflow:hidden; border:1px solid #ffc740; z-index:0; position:absolute; left:229px; top:126px;
animation: second 1.5s ;
-moz-animation: second 1.5s ;	/* Firefox */
-webkit-animation: second 1.5s ;	/* Safari 和 Chrome */
-o-animation: second 1.5s ;	/* Opera */
animation-delay:0s;
-webkit-animation-delay:0s; /* Safari 和 Chrome */
animation-fill-mode:  forwards}
@keyframes second
{
20%,40%,60%,80%,100%{-webkit-transform-origin:top center}20%{-webkit-transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg)}
}

@-moz-keyframes second /* Firefox */
{
20%,40%,60%,80%,100%{-webkit-transform-origin:top center}20%{-webkit-transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg)}
}

@-webkit-keyframes second /* Safari 和 Chrome */
{
20%,40%,60%,80%,100%{-webkit-transform-origin:top center}20%{-webkit-transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg)}
}

@-o-keyframes second /* Opera */
{
20%,40%,60%,80%,100%{-webkit-transform-origin:top center}20%{-webkit-transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg)}
}

.active-img img{ width:100%;height:100%;}
.active-popup .detail{ position:absolute;font-size: 14px;color: #6e4a12; top: 385px;right: 60px; text-decoration:underline;}
.active-popup:hover .detail{ color:#51350a; font-weight:bold;}
.active-popup :hover .flower-circle{ transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg); opacity:1}
.popup-bg .close{
	background-color: rgba(0,0,0,0.6);
    font-size: 14px;
    color: #facc3f;
    width: 27px;
    line-height: 22px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 200px;
    padding: 10px 0 10px 0;}

.popup-bg .close a{ background:url(../../Image/popup/close.png) no-repeat; width:16px;height:16px; display:inline-block; margin-top:8px}

.flower-circle
{ 
    background:url(../../Image/popup/flower.png) no-repeat; width:266px; height:257px; z-index:-5; opacity:0;
	transition: All 2s ease-in-out;
	-webkit-transition: All 2s ease-in-out;
	-moz-transition: All 2s ease-in-out;
	-o-transition: All 2s ease-in-out; position:absolute; top:-100px; left:-20px
}