
.popup-01 {
position:absolute;
display:block;
margin-top:130px;
margin-left:-900px;
width:850px;
max-width:854px;
height:auto;
transform:translate(-50%);
animation-delay:0.5s;
animation:12s popup;
animation-iteration-count:2;
cursor:pointer;
z-index:9999999;
} 

@keyframes popup {
0% {opacity:0;margin-left:-900px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-900px;}
100% {opacity:0;margin-left:-900px;}
}




@media only screen and (max-width: 1800px) {



}



/* 1680 x 1050 */
@media only screen and (max-width: 1700px) {

.popup-01 {
display:block;
margin-top:130px;
margin-left:-850px;
transform:translate(-50%);
width:800px;
} 

@keyframes popup {
0% {opacity:0;margin-left:-850px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-850px;}
100% {opacity:0;margin-left:-850px;}
}

}



/* 1600 x 900 */
@media only screen and (max-width: 1600px) {



}



/* 1536 x 864 */
@media only screen and (max-width: 1550px) {

.popup-01 {
display:block;
margin-top:125px;
margin-left:-800px;
transform:translate(-50%);
width:750px;
} 

@keyframes popup {
0% {opacity:0;margin-left:-800px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-800px;}
100% {opacity:0;margin-left:-800px;}
}

}




/* 1440 x 900 */
@media only screen and (max-width: 1460px) {



}




/* 1366 x 768 & 1366 x 760 */
@media only screen and (max-width: 1390px) {

.popup-01 {
display:block;
margin-top:120px;
margin-left:-750px;
transform:translate(-50%);
width:700px;
} 

@keyframes popup {
0% {opacity:0;margin-left:-750px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-750px;}
100% {opacity:0;margin-left:-750px;}
}

}




/* 1280 x 800 */
@media only screen and (max-width: 1300px) {


}





@media only screen and (max-width: 1200px) {

.popup-01 {
display:block;
margin-top:105px;
margin-left:-650px;
transform:translate(-50%);
width:600px;
} 

@keyframes popup {
0% {opacity:0;margin-left:-650px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-650px;}
100% {opacity:0;margin-left:-650px;}
}

}




@media only screen and (max-width: 1100px) {



}





/* 1024 x 768 */
@media only screen and (max-width: 1050px) {

.popup-01 {
display:block;
margin-top:100px;
margin-left:-600px;
transform:translate(-50%);
width:500px;
} 

@keyframes popup {
0% {opacity:0;margin-left:-600px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-600px;}
100% {opacity:0;margin-left:-600px;}
}

}




/* 960 x 600 */
@media only screen and (max-width: 980px) {



}




@media only screen and (max-width: 900px) {



}




/* 800 x 1280 & 768 x 1024 */
@media only screen and (max-width: 810px) { 

.popup-01 {
display:block;
margin-top:100px;
margin-left:-550px;
transform:translate(-50%);
width:450px;
} 

@keyframes popup {
0% {opacity:0;margin-left:-550px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-550px;}
100% {opacity:0;margin-left:-550px;}
}


}





@media only screen and (max-width: 700px) {

.popup-01 {
margin-top:100px;
margin-left:-550px;
transform:translate(-50%);
width:450px;
} 

@keyframes popup {
0% {opacity:0;margin-left:-550px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-550px;}
100% {opacity:0;margin-left:-550px;}
}


}





/* 600 x 960 */
@media only screen and (max-width: 620px) {

.popup-01 {
margin-top:100px;
margin-left:-550px;
transform:translate(-50%);
width:500px;
} 

@keyframes popup {
0% {opacity:0;margin-left:-550px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-550px;}
100% {opacity:0;margin-left:-550px;}
}


}




@media only screen and (max-width: 550px) {

.popup-01 {
margin-top:95px;
margin-left:-500px;
transform:translate(-50%);
width:400px;
} 

@keyframes popup {
0% {opacity:0;margin-left:-500px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-500px;}
100% {opacity:0;margin-left:-500px;}
}

}




/* 480 x 853 */
@media only screen and (max-width: 500px) {



}




/* 412 x 732 & 414 x 736 (iPhone) */
@media only screen and (max-width: 430px) {

.popup-01 {
margin-top:75px;
margin-left:-400px;
transform:translate(-50%);
width:360px;
} 

@keyframes popup {
0% {opacity:0;margin-left:-400px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-400px;}
100% {opacity:0;margin-left:-400px;}
}

}




/* 360 x 740 & 375 x 812 */
@media only screen and (max-width: 380px) {

.popup-01 {
margin-top:65px;
margin-left:-360px;
transform:translate(-50%);
width:300px;
animation:11s popup;
} 

@keyframes popup {
0% {opacity:0;margin-left:-360px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-360px;}
100% {opacity:0;margin-left:-360px;}
}

}




/* 320 x 568 */
@media only screen and (max-width: 330px) {

.popup-01 {
margin-top:62px;
margin-left:-300px;
transform:translate(-50%);
width:250px;
animation:10s popup;
} 

@keyframes popup {
0% {opacity:0;margin-left:-300px;}
20% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
80% {opacity:1.00;margin-left:50%;transform: translate(-50%);}
90% {opacity:0;margin-left:-300px;}
100% {opacity:0;margin-left:-300px;}
}

}


}




@media only screen and (max-width: 300px) {



}










