@charset "utf-8";

.header_black #header { height:55px; background:#fff; box-shadow:0 0 25px 15px rgba(0,0,0,0.08); }
.header_black #header h1 { height:40px; overflow:hidden; }
.header_black #header h1 img { display:none !important; }
.header_black #header h1 .mobile_view { display:block !important; width:217px; margin-top:-18px; }
.header_black #header .top_right .header_top_btn li a { color:#1f1f1f; }
.header_black #header .top_right .header_top_btn li.current a:after { background:#1f1f1f; }


#contents { }


.main_visual { position:relative; }
.main_visual .visual_pop { position:absolute; top:50%; left:50%; margin:-135px 0 0 -440px; color:#fff; }
.main_visual .visual_pop .txt01 { font-size:32px; }
.main_visual .visual_pop .txt02 { margin-bottom:15px; line-height:68px; font-size:60px; font-weight:bold; letter-spacing:-2px; }
.main_visual .visual_pop .store a { display:inline-block; margin-right:8px; vertical-align:top; /*border:1px solid #bcbcbc;*/ }



#popup_yt_play { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999; }
#popup_yt_play .bg { width:100%; height:100%; display:table; background:rgba(0,0,0,0.7); }
#popup_yt_play .bg .inner { width:100%; height:100%; display:table-cell; vertical-align:middle; text-align:center; }
#popup_yt_play .bg .inner p { display:inline-block; position:relative; max-width:92%; }
#popup_yt_play .bg .inner p span { display:inline-block; width:36px; line-height:36px; font-size:24px; font-weight:bold; color:#fff; border:2px solid #fff; border-radius:30px; position:absolute; top:-45px; right:-45px; cursor:pointer; }
#popup_yt_play .bg .inner iframe { width:1120px; height:630px; max-width:100%; max-height:85%; }




#contents section.gray { background:#f6f6f6; }
.main_section { width:1070px; margin:0 auto; padding:70px 0 85px 0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; position:relative; }	




.section_tit { margin-bottom:25px; line-height:62px; font-size:50px; font-weight:500; color:#484848; letter-spacing:-2px; }
.main_text { line-height:33px; font-size:25px; font-weight:100; color:#484848; }
.box { margin:50px auto 0; }

.motion_top { position:relative; top:100px; filter:alpha(opacity=0); opacity:0; -moz-opacity:0; }
.motion_left { position:relative; left:100px; filter:alpha(opacity=0); opacity:0; -moz-opacity:0; }
.motion_inner { position:relative; right:-100px; filter:alpha(opacity=0); opacity:0; -moz-opacity:0; }
.motion_zoom { filter:alpha(opacity=0); opacity:0; -moz-opacity:0; }

.active .motion_zoom {
	animation:0.7s zoomin 0.2s 1 ease-out forwards;
	-webkit-animation:0.7s zoomin 0.2s 1 ease-out forwards;
	-moz-animation:0.7s zoomin 0.2s 1 ease-out forwards;
	-o-animation:0.7s zoomin 0.2s 1 ease-out forwards;
}

.active .motion_T_01 {
	animation:0.7s fadein 0.2s 1 ease-out forwards;
	-webkit-animation:0.7s fadein 0.2s 1 ease-out forwards;
	-moz-animation:0.7s fadein 0.2s 1 ease-out forwards;
	-o-animation:0.7s fadein 0.2s 1 ease-out forwards;
}
.active .motion_T_02 {
	animation:0.7s fadein 0.4s 1 ease-out forwards;
	-webkit-animation:0.7s fadein 0.4s 1 ease-out forwards;
	-moz-animation:0.7s fadein 0.4s 1 ease-out forwards;
	-o-animation:0.7s fadein 0.4s 1 ease-out forwards;
}
.active .motion_T_03 {
	animation:0.6s fadein 0.6s 1 ease-out forwards;
	-webkit-animation:0.6s fadein 0.6s 1 ease-out forwards;
	-moz-animation:0.6s fadein 0.6s 1 ease-out forwards;
	-o-animation:0.6s fadein 0.6s 1 ease-out forwards;
}
.active .motion_T_04 {
	animation:0.5s fadein 0.8s 1 ease-out forwards;
	-webkit-animation:0.5s fadein 0.8s 1 ease-out forwards;
	-moz-animation:0.5s fadein 0.8s 1 ease-out forwards;
	-o-animation:0.5s fadein 0.8s 1 ease-out forwards;
}

.active .motion_L_01 {
	animation:0.7s fadein_L 0.2s 1 ease-out forwards;
	-webkit-animation:0.7s fadein_L 0.2s 1 ease-out forwards;
	-moz-animation:0.7s fadein_L 0.2s 1 ease-out forwards;
	-o-animation:0.7s fadein_L 0.2s 1 ease-out forwards;
}
.active .motion_L_02 {
	animation:0.7s fadein_L 0.4s 1 ease-out forwards;
	-webkit-animation:0.7s fadein_L 0.4s 1 ease-out forwards;
	-moz-animation:0.7s fadein_L 0.4s 1 ease-out forwards;
	-o-animation:0.7s fadein_L 0.4s 1 ease-out forwards;
}
.active .motion_L_03 {
	animation:0.6s fadein_L 0.6s 1 ease-out forwards;
	-webkit-animation:0.6s fadein_L 0.6s 1 ease-out forwards;
	-moz-animation:0.6s fadein_L 0.6s 1 ease-out forwards;
	-o-animation:0.6s fadein_L 0.6s 1 ease-out forwards;
}
.active .motion_L_04 {
	animation:0.5s fadein_L 0.8s 1 ease-out forwards;
	-webkit-animation:0.5s fadein_L 0.8s 1 ease-out forwards;
	-moz-animation:0.5s fadein_L 0.8s 1 ease-out forwards;
	-o-animation:0.5s fadein_L 0.8s 1 ease-out forwards;
}

.active .overTab_con.on .motion_inner {
	animation:0.3s fadein_R 0.1s 1 ease-out forwards;
	-webkit-animation:0.3s fadein_R 0.1s 1 ease-out forwards;
	-moz-animation:0.3s fadein_R 0.1s 1 ease-out forwards;
	-o-animation:0.3s fadein_R 0.1s 1 ease-out forwards;
}

.active .overTab_con.on .motion_device {
	animation:0.3s fadein_R 0s 1 ease-out forwards;
	-webkit-animation:0.3s fadein_R 0s 1 ease-out forwards;
	-moz-animation:0.3s fadein_R 0s 1 ease-out forwards;
	-o-animation:0.3s fadein_R 0s 1 ease-out forwards;
}



.overTab_list { margin-top:60px; }
.overTab_list li { display:inline-block; margin-right:28px; cursor:pointer; }
.overTab_list li span { display:inline-block; padding:4px 3px; line-height:24px; font-size:20px; color:#232323; }
.overTab_list li.on { border-bottom:2px solid #191716; }
.overTab_list li.on span { font-weight:bold; }
.overTab_con { display:none; clear:both; padding-top:45px; }
.overTab_con.on { display:block; }
.overTab_con p { max-width:45%; line-height:30px; font-size:20px; font-weight:100; color:#515151; word-break:keep-all; }



#section01 .play_img { position:relative; top:100px; margin-bottom:20px; text-align:center; }
#section01 .play_img span { display:block; padding-top:8px; font-size:30px; color:#ed3737; }
#section01 .main_text p { margin-bottom:60px; }
#section01 .main_text strong { font-weight:500; }
#section01 .main_text .text_img { }
#section01 .main_text .text_img img { vertical-align:middle; margin-top:-10px; }
#section01 .enjoy { width:110%; margin-left:-5%; text-align:center; }
#section01 .enjoy .each { display:inline-block; vertical-align:top; margin:0 35px; color:#1b1b1b; }
#section01 .enjoy .each dt { display:block; padding-top:25px; font-size:28px; }
#section01 .enjoy .each dd { display:block; padding-top:20px; line-height:28px; font-size:22px; font-weight:100; color:#484848; letter-spacing:-1px; }
#section01 .box { text-align:center; }

#section02 .howto { position:relative; height:320px; }
#section02 .howto .dart_board { position:absolute; top:-100px; right:0; }
#section02 .howto .tab_img { position:absolute; bottom:-85px; right:0; }
#section02 .howto .tab_img .monitor { display:block; position:absolute; top:11px; left:52px; height:214px; background:#000; }
#section02 .howto .tab_img .monitor .play { margin-top:5px; }

#section03 .infos { position:relative; height:320px; }
#section03 .infos .device_site { position:absolute; bottom:-50px; right:0; }
#section03 .infos .device_site2 { z-index:10; }
#section03 .tab_inner.notebook { width:441px; height:248px; top:-9px; right:82px; }
#section03 .tab_inner.phone { width:94px; height:170px; bottom:16px; right:7px; z-index:20; }
#section03 .overTab_con { position:relative; height:200px; }
#section03 .overTab_con .red_btn { position:absolute; bottom:0; left:0; }

#section04  { padding-bottom:0; text-align:center; }
#section04 .overTab_list li { margin:0 14px; }
#section04 .overTab_con { min-height:120px; } 
#section04 .overTab_con p { max-width:100%; }
#section04 .tab_inner.phone { width:302px; height:401px; bottom:0; left:50%; margin-left:-151px; }


#section05 .right { position:absolute; top:170px; right:0; width:50%; }
#section05 .right .tree img { display:inline-block; vertical-align:top; margin-right:12px; }
#section05 .right .txt span { display:block; color:#484848; }
#section05 .right .txt span.big { padding-left:7px; line-height:57px; font-size:45px; margin:15px 0; }
#section05 .right .txt span.eu_big { padding-left:7px; line-height:52px; font-size:30px; margin:15px 0; }
#section05 .right .txt span.mid { padding-left:15px; line-height:42px; font-size:30px; }
#section05 .right .txt span.eu_mid { padding-left:15px; line-height:36px; font-size:22px; }
#section05 .right .partner { margin:25px 0 0 25px; }
#section05 .right .btn { margin:35px 0 0 25px; }
#section05 .right .btn a,
a.red_btn { display:inline-block; padding:10px 30px; background:#d61518; border-radius:50px; }
#section05 .right .btn a span,
a.red_btn span { display:inline-block; line-height:28px; font-size:22px; color:#fff; padding:0 30px; }

.tab_inner { position:absolute; display:block; overflow:hidden; }
.tab_inner span { position:absolute; top:0; left:0; z-index:1; width:100%; }
.tab_inner span.motion_device.off { z-index:2; }
.tab_inner span.motion_device.on {
	left:100%; z-index:5;
	animation:0.4s move_R 0s 1 ease-out forwards;
	-webkit-animation:0.4s move_R 0s 1 ease-out forwards;
	-moz-animation:0.4s move_R 0s 1 ease-out forwards;
	-o-animation:0.4s move_R 0s 1 ease-out forwards;
}



.mobile_br { display:none; }
.pc_br {  }


/* 모바일 __________________________________________________ */

@media (max-width:768px){

	.header_black #header { height:50px !important; box-shadow:0 0 5px 0 rgba(0,0,0,0.15); }
	.header_black #header h1 .mobile_view { width:auto; margin-top:0; }

	.main_visual .visual_pop { position:absolute; top:20px; left:5%; width:90%; margin:0; text-align:center; z-index:10; }
	.basic .main_visual .visual_pop {  }

.main_visual .visual_pop .txt01 { font-size:17px; }
.main_visual .visual_pop .txt02 { margin:7px 0 0 0; line-height:32px; font-size:24px; }

	.main_visual .visual_pop .store { position:fixed; top:auto; margin:0; text-align:center; bottom:6%; left:12%; width:76%; border-radius:3px; overflow:hidden; z-index:999; }
	.main_visual .visual_pop .store a { width:100%; margin:0; line-height:48px; font-size:24px; color:#fff; background:#d61518; }

	#popup_yt_play .bg .inner p { width:92%; }
	#popup_yt_play .bg .inner p span { top:-36px; right:0; width:28px; line-height:28px; }
	#popup_yt_play .bg .inner iframe { width:100%; height:400px; }


	.downFix .visual_pop .store {
		border-radius:0;
		animation:0.3s downFix 0.1s 1 ease-out forwards;
		-webkit-animation:0.3s downFix 0.1s 1 ease-out forwards;
		-moz-animation:0.3s downFix 0.1s 1 ease-out forwards;
		-o-animation:0.3s downFix 0.1s 1 ease-out forwards;
	}
	.downFixOff .visual_pop .store {
		bottom:0; left:0; width:100%;
		animation:0.3s downFixOff 0.1s 1 ease-out forwards;
		-webkit-animation:0.3s downFixOff 0.1s 1 ease-out forwards;
		-moz-animation:0.3s downFixOff 0.1s 1 ease-out forwards;
		-o-animation:0.3s downFixOff 0.1s 1 ease-out forwards;
	}


	.main_section { width:100%; padding:35px 10px; text-align:center; }	

	.section_tit { margin-bottom:15px; line-height:36px; font-size:24px; }
	.main_text { line-height:24px; font-size:18px; }
	.box { margin:25px auto 0; }

	.motion_top { position:relative; top:40px; filter:alpha(opacity=0); opacity:0; -moz-opacity:0; }
	.motion_left { position:relative; left:auto; top:40px; filter:alpha(opacity=0); opacity:0; -moz-opacity:0; }


	.overTab_list { margin-top:35px; }
	.overTab_list li { margin:0 2px; }
	.overTab_list li span { padding:2px 1px; line-height:16px; font-size:14px; letter-spacing:-2px; }
	.overTab_con { padding-top:25px; }
	.overTab_con p { max-width:100%; line-height:20px; font-size:14px; }


	#section01 { padding-top:250px; margin-top:-215px; } /* 기본 padding:35px 10px; */
	#section01 .play_img { top:50px; width:30%; margin:0 auto 15px auto;  }
	#section01 .play_img span { font-size:18px; }
	#section01 .main_text p { margin-bottom:30px; }
	#section01 .main_text .text_img img { vertical-align:middle; margin-top:-10px; }
	#section01 .enjoy { width:75%; margin:0 auto; }
	#section01 .enjoy .each { display:block; margin:25px 0 0 0; }
	#section01 .enjoy .each dt { padding-top:12px; font-size:18px; }
	#section01 .enjoy .each dd { padding-top:6px; line-height:20px; font-size:16px; }
	#section01 .box { text-align:center; }

	#section02 { padding-bottom:0; }
	#section02 .howto { position:relative; height:auto; }
	#section02 .howto .dart_board,
	#section02 .howto .tab_img { position:relative; top:0; right:0; margin-top:15px; }
	#section02 .howto .dart_board img,
	#section02 .howto .tab_img img { max-width:85%; }
	#section02 .howto .dart_board img { margin-bottom:20px; }
	#section02 .howto .tab_img .monitor { top:2%; left:17%; width:66%; height:41%; background:#000; }
	#section02 .howto .tab_img .monitor img { width:100%; max-width:100%; }
	#section02 .howto .tab_img .monitor .play { margin-top:5px; }



	#section03 .infos { position:relative; height:auto; }
	#section03 .infos .device_site { position:static; bottom:0; right:0; }
	#section03 .infos .device_site img { width:300px; }
	#section03 .infos .device_site2 { position:absolute; bottom:auto; top:50px; right:50%; margin-right:-152px; }
	#section03 .infos .device_site2 img { width:80px; }
	#section03 .tab_inner.notebook { width:223px; height:126px; top:13px; right:auto; left:50%; margin-left:-115px; }
	#section03 .tab_inner.phone { width:72px; height:131px; bottom:auto; top:62px; right:50%; margin-right:-148px; z-index:20; }
	#section03 .overTab_con { position:relative; height:auto; }
	#section03 .overTab_con .red_btn { position:static; margin-top:30px; }

	#section04  { padding-bottom:0; text-align:center; }
	#section04 .overTab_list li { margin:0 2px; }
	#section04 .overTab_con p { max-width:100%; }
	#section04 .phone img { width:300px; }
	#section04 .tab_inner.phone { width:270px; height:359px; bottom:0; left:50%; margin-left:-135px; }

	#section05 .right { position:static; top:0; right:0; width:100%; margin-top:20px; }
	#section05 .right .tree img { width:36%; margin:0 2%; }
	#section05 .right .txt span.big { padding:0; line-height:36px; font-size:24px; margin:12px 0; }
	#section05 .right .txt span.mid { padding:0; line-height:24px; font-size:18px; }
	#section05 .right .partner { margin:17px 0; }
	#section05 .right .btn { margin:15px 0 0 0; }
	#section05 .right .btn a,
	a.red_btn { padding:7px 20px; }
	#section05 .right .btn a span,
	a.red_btn span { line-height:24px; font-size:18px; padding:0 20px; }



	.active .motion_T_01 {
		animation:0.7s fadein 0.2s 1 ease-out forwards;
		-webkit-animation:0.7s fadein 0.2s 1 ease-out forwards;
		-moz-animation:0.7s fadein 0.2s 1 ease-out forwards;
		-o-animation:0.7s fadein 0.2s 1 ease-out forwards;
	}
	.active .motion_T_02 {
		animation:0.7s fadein 0.4s 1 ease-out forwards;
		-webkit-animation:0.7s fadein 0.4s 1 ease-out forwards;
		-moz-animation:0.7s fadein 0.4s 1 ease-out forwards;
		-o-animation:0.7s fadein 0.4s 1 ease-out forwards;
	}
	.active .motion_T_03 {
		animation:0.6s fadein 0.6s 1 ease-out forwards;
		-webkit-animation:0.6s fadein 0.6s 1 ease-out forwards;
		-moz-animation:0.6s fadein 0.6s 1 ease-out forwards;
		-o-animation:0.6s fadein 0.6s 1 ease-out forwards;
	}
	.active .motion_T_04 {
		animation:0.5s fadein 0.8s 1 ease-out forwards;
		-webkit-animation:0.5s fadein 0.8s 1 ease-out forwards;
		-moz-animation:0.5s fadein 0.8s 1 ease-out forwards;
		-o-animation:0.5s fadein 0.8s 1 ease-out forwards;
	}

	.active .motion_L_01 {
		animation:0.7s fadein 0.2s 1 ease-out forwards;
		-webkit-animation:0.7s fadein 0.2s 1 ease-out forwards;
		-moz-animation:0.7s fadein 0.2s 1 ease-out forwards;
		-o-animation:0.7s fadein 0.2s 1 ease-out forwards;
	}
	.active .motion_L_02 {
		animation:0.7s fadein 0.4s 1 ease-out forwards;
		-webkit-animation:0.7s fadein 0.4s 1 ease-out forwards;
		-moz-animation:0.7s fadein 0.4s 1 ease-out forwards;
		-o-animation:0.7s fadein 0.4s 1 ease-out forwards;
	}
	.active .motion_L_03 {
		animation:0.6s fadein 0.6s 1 ease-out forwards;
		-webkit-animation:0.6s fadein 0.6s 1 ease-out forwards;
		-moz-animation:0.6s fadein 0.6s 1 ease-out forwards;
		-o-animation:0.6s fadein 0.6s 1 ease-out forwards;
	}
	.active .motion_L_04 {
		animation:0.5s fadein 0.8s 1 ease-out forwards;
		-webkit-animation:0.5s fadein 0.8s 1 ease-out forwards;
		-moz-animation:0.5s fadein 0.8s 1 ease-out forwards;
		-o-animation:0.5s fadein 0.8s 1 ease-out forwards;
	}

	.mobile_br { display:block; }
	.pc_br { display:none; }


	#footer { padding-bottom:68px !important; }

}






/* keyframes ____________________ */
@keyframes zoomin{
	0%{
		transform:translate(0,0) scale(0.5,0.5);
		-ms-transform:translate(0,0) scale(0.5,0.5);
		filter:alpha(opacity=0); opacity:0;
	}
	100%{
		transform:translate(0,0) scale(1,1);
		-ms-transform:translate(0,0) scale(1,1);
		filter:alpha(opacity=1); opacity:1;
	}
}
@-webkit-keyframes zoomin{
	0%{
		-webkit-transform:translate(0,0) scale(0.5,0.5);
		filter:alpha(opacity=0); opacity:0;
	}
	100%{
		-webkit-transform:translate(0,0) scale(1,1);
		filter:alpha(opacity=1); opacity:1;
	}
}
@-moz-keyframes zoomin{
	0%{
		-moz-transform:translate(0,0) scale(0.5,0.5);
		filter:alpha(opacity=0); opacity:0;
	}
	100%{
		-moz-transform:translate(0,0) scale(1,1);
		filter:alpha(opacity=1); opacity:1;
	}
}
@-o-keyframes zoomin{
	0%{
		-o-transform:translate(0,0) scale(0.5,0.5);
		filter:alpha(opacity=0); opacity:0;
	}
	100%{
		-o-transform:translate(0,0) scale(1,1);
		filter:alpha(opacity=1); opacity:1;
	}
}

@keyframes fadein{
	0%{
		filter:alpha(opacity=0); opacity:0;
		top:100px;
	}
	100%{
		filter:alpha(opacity=100); opacity:1;
		top:0;
	}
}
@-webkit-keyframes fadein{
	0%{
		filter:alpha(opacity=0); opacity:0;
		top:100px;
	}
	100%{
		filter:alpha(opacity=100); opacity:1;
		top:0;
	}
}
@-moz-keyframes fadein{
	0%{
		filter:alpha(opacity=0); -moz-opacity:0;
		top:100px;
	}
	100%{
		filter:alpha(opacity=100); -moz-opacity:1;
		top:0;
	}
}
@-o-keyframes fadein{
	0%{
		filter:alpha(opacity=0); opacity:0;
		top:100px;
	}
	100%{
		filter:alpha(opacity=100); opacity:1;
		top:0;
	}
}

@keyframes fadein_L{
	0%{
		filter:alpha(opacity=0); opacity:0;
		left:100px;
	}
	100%{
		filter:alpha(opacity=100); opacity:1;
		left:0;
	}
}
@-webkit-keyframes fadein_L{
	0%{
		filter:alpha(opacity=0); opacity:0;
		left:100px;
	}
	100%{
		filter:alpha(opacity=100); opacity:1;
		left:0;
	}
}
@-moz-keyframes fadein_L{
	0%{
		filter:alpha(opacity=0); -moz-opacity:0;
		left:100px;
	}
	100%{
		filter:alpha(opacity=100); -moz-opacity:1;
		left:0;
	}
}
@-o-keyframes fadein_L{
	0%{
		filter:alpha(opacity=0); opacity:0;
		left:100px;
	}
	100%{
		filter:alpha(opacity=100); opacity:1;
		left:0;
	}
}

@keyframes fadein_R{
	0%{
		filter:alpha(opacity=0); opacity:0;
		right:-100px;
	}
	100%{
		filter:alpha(opacity=100); opacity:1;
		right:0;
	}
}
@-webkit-keyframes fadein_R{
	0%{
		filter:alpha(opacity=0); opacity:0;
		right:-100px;
	}
	100%{
		filter:alpha(opacity=100); opacity:1;
		right:0;
	}
}
@-moz-keyframes fadein_R{
	0%{
		filter:alpha(opacity=0); -moz-opacity:0;
		right:-100px;
	}
	100%{
		filter:alpha(opacity=100); -moz-opacity:1;
		right:0;
	}
}
@-o-keyframes fadein_R{
	0%{
		filter:alpha(opacity=0); opacity:0;
		right:-100px;
	}
	100%{
		filter:alpha(opacity=100); opacity:1;
		right:0;
	}
}

@keyframes move_R{
	0%{
		left:100%;
	}
	100%{
		left:0;
	}
}
@-webkit-keyframes move_R{
	0%{
		left:100%;
	}
	100%{
		filter:alpha(opacity=100); opacity:1;
		left:0;
	}
}
@-moz-keyframes move_R{
	0%{
		left:100%;
	}
	100%{
		left:0;
	}
}
@-o-keyframes move_R{
	0%{
		left:100%;
	}
	100%{
		left:0;
	}
}

@keyframes fadeout{
	0%{
		filter:alpha(opacity=100); opacity:1;
		top:0;
	}
	100%{
		filter:alpha(opacity=0); opacity:0;
		top:100px;
	}
}
@-webkit-keyframes fadeout{
	0%{
		filter:alpha(opacity=100); opacity:1;
		top:0;
	}
	100%{
		filter:alpha(opacity=0); opacity:0;
		top:100px;
	}
}
@-moz-keyframes fadeout{
	0%{
		filter:alpha(opacity=100); -moz-opacity:1;
		top:0;
	}
	100%{
		filter:alpha(opacity=0); -moz-opacity:0;
		top:100px;
	}
}
@-o-keyframes fadeout{
	0%{
		filter:alpha(opacity=100); opacity:1;
		top:0;
	}
	100%{
		filter:alpha(opacity=0); opacity:0;
		top:100px;
	}
}

@keyframes slideout{
	0%{
		left:0;
	}
	100%{
		left:100%;
	}
}
@-webkit-keyframes slideout{
	0%{
		left:0;
	}
	100%{
		left:100%;
	}
}
@-moz-keyframes slideout{
	0%{
		left:0;
	}
	100%{
		left:100%;
	}
}
@-o-keyframes slideout{
	0%{
		left:0;
	}
	100%{
		left:100%;
	}
}

@keyframes swipeout {
	100%{
		left:300%;
	}
}

@-webkit-keyframes swipeout {
	100%{
		left:300%;
	}
}

@-moz-keyframes swipeout {
	100%{
		left:300%;
	}
}

@-o-keyframes swipeout {
	100%{
		left:300%;
	}
}

@keyframes slidedown{
	0%{
		transform:translate(-50%,-60%);
		-ms-transform:translate(-50%,-60%);
		filter:alpha(opacity=0); opacity:0;
	}
	100%{
		transform:translate(-50%,-50%);
		-ms-transform:translate(-50%,-50%);
		filter:alpha(opacity=100); opacity:1;
	}
}
@-webkit-keyframes slidedown{
	0%{
		transform:translate(-50%,-60%);
		-ms-transform:translate(-50%,-60%);
		filter:alpha(opacity=0); opacity:0;
	}
	100%{
		transform:translate(-50%,-50%);
		-ms-transform:translate(-50%,-50%);
		filter:alpha(opacity=100); opacity:1;
	}
}
@-moz-keyframes slidedown{
	0%{
		transform:translate(-50%,-60%);
		-ms-transform:translate(-50%,-60%);
		filter:alpha(opacity=0); opacity:0; -moz-opacity:0;
	}
	100%{
		transform:translate(-50%,-50%);
		-ms-transform:translate(-50%,-50%);
		filter:alpha(opacity=100); opacity:1; -moz-opacity:1;
	}
}
@-o-keyframes slidedown{
	0%{
		transform:translate(-50%,-60%);
		-ms-transform:translate(-50%,-60%);
		filter:alpha(opacity=0); opacity:0;
	}
	100%{
		transform:translate(-50%,-50%);
		-ms-transform:translate(-50%,-50%);
		filter:alpha(opacity=100); opacity:1;
	}
}

@keyframes bounce {
	0% {
		top:2%;
	}
	20%{
		top:6%;
	}
	100% {
		top:2%;
	}
}

@-webkit-keyframes bounce {
	0% {
		top:2%;
	}
	20%{
		top:6%;
	}
	100% {
		top:2%;
	}
}

@-moz-keyframes bounce {
	0% {
		top:2%;
	}
	20%{
		top:6%;
	}
	100% {
		top:2%;
	}
}

@-o-keyframes bounce {
	0% {
		top:2%;
	}
	20%{
		top:6%;
	}
	100% {
		top:2%;
	}
}



@keyframes downFix{
	0%{
		left:12%;
		bottom:6%;
		width:76%;
	}
	100%{
		left:0;
		bottom:0;
		width:100%;
	}
}
@-webkit-keyframes downFix{
	0%{
		left:12%;
		bottom:6%;
		width:76%;
	}
	100%{
		left:0;
		bottom:0;
		width:100%;
	}
}
@-moz-keyframes downFix{
	0%{
		left:12%;
		bottom:6%;
		width:76%;
	}
	100%{
		left:0;
		bottom:0;
		width:100%;
	}
}
@-o-keyframes downFix{
	0%{
		left:12%;
		bottom:6%;
		width:76%;
	}
	100%{
		left:0;
		bottom:0;
		width:100%;
	}
}



@keyframes downFixOff{
	0%{
		left:0;
		bottom:0;
		width:100%;		
	}
	100%{
		left:12%;
		bottom:6%;
		width:76%;		
	}
}
@-webkit-keyframes downFixOff{
	0%{
		left:0;
		bottom:0;
		width:100%;		
	}
	100%{
		left:12%;
		bottom:6%;
		width:76%;		
	}
}
@-moz-keyframes downFixOff{
	0%{
		left:0;
		bottom:0;
		width:100%;		
	}
	100%{
		left:12%;
		bottom:6%;
		width:76%;		
	}
}
@-o-keyframes downFixOff{
	0%{
		left:0;
		bottom:0;
		width:100%;		
	}
	100%{
		left:12%;
		bottom:6%;
		width:76%;		
	}
}