#loading { display: none; }
#loading article { position: fixed; width: 100%; height: 100%; background-image: url(/images/46/img_bg.jpg); display: block; bottom: 0; left: 0; text-align: center; z-index: 9999; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#loading article.hide { opacity: 0; background: none; z-index: -999; bottom: -100%; }
#loading article.hide img { opacity: 0; -webkit-transform: translateY(0px); transform: translateY(0px); }
#loading article img { text-align: center; width: 140px; margin: 20% auto 40px; -webkit-transform: translateY(10px); transform: translateY(10px); }
#loading2 { display: inline-block; width: 35px; height: 35px; border: 1px solid #eee; border-radius: 50%; border-top-color: #bdad84; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; margin: 10px auto; }
#loading article.hide:before, #loading article.hide:after { content: ''; pointer-events: none; position: fixed; z-index: 99; bottom: 0; right: 0; height: 0; width: 100%; background: #fff; -webkit-animation: pageTransition 1s; animation: pageTransition 1s; }
#loading article.hide:after { z-index: 98; -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; background: #fff; -webkit-animation: pageTransition 1.5s; animation: pageTransition 1.5s; }

@keyframes spin { to { transform: rotate(360deg); } }
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
@keyframes pageTransition { 0% { height: 100%; } 100% { height: 0; } }
@-webkit-keyframes pageTransition { 0% { height: 100%; } 100% { height: 0; } }

@media screen and (max-width:1024px) {
	#loading article img { margin-top: 30%; }
}
@media screen and (max-width:768px) {
	#loading article img { margin-top: 45%; width: 190px; }
	#loading2 { width: 30px; height: 30px; }
}