﻿#switcher {width:200px;height:50px;background:rgba(0,0,0,.20);position:fixed;left:50%;bottom:10px;z-index:99;backdrop-filter:blur(20px);border-radius:40px;margin-left: -100px;}
#switcher ul{display: flex;padding: 0 20px;justify-content: space-between; }
#switcher li {float:left;display:inline-block;position:relative;cursor:pointer;text-align:center;}
#switcher li h2{width:60px;padding:5px 0;position:absolute;left:-10px;top:-42px;font-size:12px;background:#3396FB;color:#fff;border-radius:3px;visibility:hidden;transition:0.3s ease-out;overflow:visible;opacity:0;}
#switcher li h2:after{height:0;width:0;border-color:#3396FB transparent transparent transparent;border-style:solid;border-width:5px;left:42%;top:auto;bottom:-10px;}
#switcher li:hover h2{visibility:hidden;top:-32px;opacity:1;}
#switcher li.active h2{visibility:visible;top:-32px;opacity:1;}
#switcher li i{width:30px;height:30px;display:inline-block;background:url("../self_ico.png") no-repeat -184px 2px;}
#switcher li:nth-child(4){margin-left:10px;margin-top:10px;}
#switcher li:nth-child(1) h2{display:none;}
#switcher li:last-child a{width:30px;height:30px;display:inline-block;background:url("../buy.png") no-repeat 0 -30px;background-size:20px;margin:12px 0 0 13px;}

.icon1,.icon2,.icon3,.icon4,.icon5 {background:url(../self_ico.png) no-repeat;margin:6px 0 0 10px;width:38px;height:38px;}
.icon1 {background-position:6px 6px;}
.icon2 {background-position:-31px 6px;}
.icon3 {background-position:-69px 6px;}
.icon4 {background-position:-107px 6px;}
.icon5 {background-position:-143px 6px;}
.icon1.active {background-position:6px -30px;}
.icon2.active {background-position:-31px -30px;}
.icon3.active {background-position:-69px -30px;}
.icon4.active {background-position:-107px -30px;}
.icon5.active {background-position:-143px -30px;}

#iframe_box {height:calc(100% - 60px);overflow:visible;position:relative;margin-bottom:60px;}
.Mobile {width:414px !important;height:736px !important;margin:0 auto;display:table;padding:50px 8px 2px 10px;background:url(../self_bg.png) no-repeat 0 37px;}
.Mobile iframe {height:736px !important;margin-bottom:40px;}
.Ipad_sp {height:738px !important;margin:0 auto;display:table;padding:48px 18px 8px 44px;width:1024px;background:url(../self_bg.png) no-repeat 0 -1886px;}
.Ipad_sp iframe {height:738px !important;margin-bottom:40px;}

@-webkit-keyframes swing{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 swing{20%,40%,60%,80%,100%{-moz-transform-origin:top center}20%{-moz-transform:rotate(15deg)}40%{-moz-transform:rotate(-10deg)}60%{-moz-transform:rotate(5deg)}80%{-moz-transform:rotate(-5deg)}100%{-moz-transform:rotate(0deg)}}

.wap{
	position: fixed;
	left: 10px;
	bottom: 20px;
	width: 100px;
	border: solid 1px #0052D9;
	border-radius: 6px;
	padding-bottom: 15px;
	z-index: 999;
}
.wap img{
	border-radius: 6px;
}
.wap h2{
	font-size: 12px;
	position: absolute;
	left: -5px;
	bottom: -15px;
	width: calc(100% + 10px);
	background: #0052D9;
	color: #fff;
	line-height: 30px;
	text-align: center;
	border-radius: 6px;
}


