console
(function (doc, win) {
var docEl = doc.documentElement,
fz=100,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth,clientHeight = docEl.clientHeight;
if(clientHeight<clientWidth){fz=50}
if (clientWidth>=1000) {
clientWidth = 1000;
};
if (!clientWidth) return;
docEl.style.fontSize = fz * (clientWidth / 750) + 'px';
window.localStorage.expSize = docEl.style.fontSize
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
function swpInit() {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: false,
paginationClickable: true,
initialSlide: 0,
onSlideChangeEnd: function (swiper) {
if (swiper.activeIndex >= $('.swiper-slide').length - 1) {
setTimeout(function () {
}, 10000);
}
}
});
}
$('.swiper').show();
swpInit();
var isWx = (/micromessenger/i).test(navigator.userAgent),goClickNum=0;
function gogo(){
if(isWx){
goClickNum+=1;
switch(goClickNum){
case 1:
alert("请点微信右上角菜单--“在浏览器中打开”继续体验吧。");
break;
case 2:
alert("给你带来不便真是抱歉，其实这都是微信设置的障碍。");
break;
case 3:
alert("您既然坚持，那就跳转吧，下面如果看到白页请按微信提示继续");
setTimeout(function(){location.href="https://utale.me/tales"},2000)
break;
}
}else{
location.href="https://utale.me/tales"
}
}
<div class="swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="//okr0x0ulp.bkt.clouddn.com/map1.svg" class="img"/>
<div class="con">
<h4>时间+地点+人物=故事</h4>
<p>将所有历史【故事】记录到它发生的时间和地点，</p>
<p>让人们更方便地了解当地悠久的历史及美丽的传说。</p>
</div>
</div>
<div class="swiper-slide">
<div class="ico ico1"></div>
<div class="ico ico2"></div>
<div class="ico ico3"></div>
<div class="ico ico4"></div>
<div class="line line1"></div>
<div class="line line2"></div>
<div class="con">
<h4>历史不容掩盖，但内容可以分级</h4>
<p>首创众评分级制度，</p>
<p>让内容更科学地为不同人群及场合区分呈现。</p>
</div>
</div>
<div class="swiper-slide">
<div class="usrs"></div>
<div class="usr"></div>
<div class="con">
<h4>基于地理位置的人物图谱</h4>
<p>人人可编织的血缘关系网，</p>
<p>让你知道遥远的他也许和你很近。</p>
</div>
</div>
<div class="swiper-slide">
<div class="mobs">
<div class="mob mob1">
<ul>
<li>
<div class="ic"></div>
<h3>海蒂</h3>
<p>距您300m</p>
</li>
<li>
<div class="ic"></div>
<h3>冰与火之歌</h3>
<p>距您500m</p>
</li>
<li>
<div class="ic"></div>
<h3>五十度灰</h3>
<p>距您550m</p>
</li>
<li>
<div class="ic"></div>
<h3>与神同行</h3>
<p>距您1.6km</p>
</li>
<li>
<div class="ic"></div>
<h3>红海行动</h3>
<p>距您23km</p>
</li>
</ul>
</div>
<div class="mob mob2">
<ul>
<li>
<p class="io0"></p>
</li>
<li>
<p class="io1"></p>
</li>
<li>
<p class="io2"></p>
</li>
<li>
<p class="io3"></p>
</li>
<li>
<p class="io4"></p>
</li>
</ul>
</div>
</div>
<div class="con">
<h4>随时随地随兴聊</h4>
<p>电影、诗歌、厨艺、运动……</p>
<p>到哪里都可与相同爱好的伙伴相聚畅聊。</p>
</div>
</div>
<div class="swiper-slide">
<div class="app_icon" onclick="gogo()"></div><a href="http://downloadpkg.apicloud.com/app/download?path=http://7zq76v.com1.z0.glb.clouddn.com/56eaf68bff2705fa8891e3f81ee4a392_d" class="codeimg">
<p>APP下载（安卓beta）</p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABfCAYAAACOTBv1AAAMbUlEQVR4nO2c4ZXjOA6EEcKEoBA6g2YoyuA6AyOEyWCViRFCZ3AKYTKY+8PqBksASdme9d5b13t4XkrkpwJMau1hyyIiv28Mk6NwLpPW81rbpcNiZklY7KfI0ccjcmMWZDfwvxiv4v8Dij8rJOcNjpIt9bjKOMmR4RKMOesrY5xhQTbJ9HoVv6MZFmSTTK+0+D9F5OrC6uvaMVZqYAzan2Rsqf+91eO/av+fgbGSxEZ+vIfMV8T2WqXNFb49a7b4YHH9ohyn72HqEhrN2swYpMT2rNFKBFPpeM8Xs0d+zviCHzBPsR5RfJ7x0Ju0s9Xqq9bjH9KugKu73jWJtY5VaVfAj3p87YyFv8wPx5vLhX1BJk8u/uxszVhngpMEC+oxR356GrHY199WfK1xqQGttb0HRi7yfe/fHcNfzwcYWx1rxFL3moX35Zn+nNficvrHFv8AHbCmjJFuYY0EpibnS+c6zCi1rRO+0uKvEs8awGHIwzA70DdjwShir8dXN4YZEMZuib/NMS9JeF/er8/t7CqCL8+I+vsc0+KPVOT8PR9SyWfDSCZtkpmvXoxYt/gb+Yp0KP57jTJ4xScUi2BVYP2o7bfa1jpuJ8YPN4YZkEmb5FLPL7Vd6vlftS/6/3ZtMLfaXomhxNhO+PqQufq9S1D8s2HOABcf7UIGlZIEo3QYnCSYYIAJxrN83RJfs+Js+G9sOIZ3Fu03dz5K8rP2XwMGr0j+towxa20XYkYMtP8jxxXgfRkxe8X/KbfX8KFiY5BJXPzeKsqiJNcuE2NHLPiCH88c5fh0vYp/UrNGNTA0m5wN+tkNfmZYmeAH/nQiR1aWIxhgwo9nHiCv4j+x+JnYGBQZzFhsjBWx2B8nq3TcAhZrNLHAtOPQoR/r8NM6vYr/xOLPJgmDJeg7KnqW5Awj88WCLwvGjtTzM5sjfIGl5KvHeBV/MlhGvsBS8hUyrtJuYiA+6/GdYNi0+AjGgAVhM+WTGDD4GbBYOP5R+/4I+nhfvQ0QBPpgy3SXY+6FImOt5Au57dJuSXrmweAolJItnb4sk7j4FrBYoxnfU+YPLEvOmxw1YkF6gnl4Z3mmIVTiTeYoeIYhSa3tRdpZWoKxCFx/o+vjda2MNzrux3KA9atec6Pz6wSLi49VpMk1wfR3hi/d+o72AgyTePVAPplsFVlyXjuMTMxiXzOse3L80kXibbKtHgdc5ftepvK9eYELatBeyJjJcbPi4vpHjAv12R1Lnb+FOL4IYEDwkxU/Yl0oOMeV+npfnOOXn9HshTF1SYuc+3cPTpbDXN+MiWTAUpnXaBXNsGZXlRKzSCdHlXbG+ZmvEs/8i4j8FRhBG+/sUo+bM6BBrGReg7ZKuxnvk/OrKApmrsRFjszyTPTlHNEHuaKP9+frFvm5654/YhgZukVgZCuyF7PqsaDsfCEG/JUZP1YDnwCwLbYQ1G/TId6l3az4TYxNvme9Z0LRNiILmxbwh+TWerz36QvCNYq025yQ0jifK4R2livuCPBXOn4OYjAgMGbBmNHMK8RQGu8NjgR/PcbZlQkpnbeOj1HO8Bf5OgizYpN2Vqu0m9+bHDeEbRD4PL9Ku22HGb/KcRVx4HqY4ewj+sbNyeIa2er2PkzarVLWKGel3PzKPGg0G7S2i0y8k5MCywIfjwyW0XkN+twrlTa30vHzKv6DpXKi+Gys/EFDSoasM2a2wGAUyZPkCWYyX/zsuoX66QnPB8EQQx8hGNPaLvIvLz4bhaER1AJjrIw1o8wX3yrO+Jq9tUJFgoKR4IuZU4xX8Z9YfDaWRc/YLIsZPYOpUZJSf+v0PXsL6ym7hd3EfBX/icUvFPx1fZd8M+VKgeMfxFK65lvAwvUztlF77yTJY7PcNsp9Ta4V5Yjt1l+TzKtMyKT/Ts5EIZbSNUowBrr1mtZhZLnN+DobPWYqbIeN3kkfUdGLtH+fX6T9Gn9NmDxLEZitvL2JiJ5s5D4Qb+zvEj9r7De9sxw5NhkXP10BFlwognllMyyTSn4fzBjwVRJmucEHmJwjWN7fLFtlXPwD4yLxc0gwCNhS+62BMZX4TVql3dwA04h5cawLxS5t8Yu023Xd5BI/nCtYizvGdWE2WEtto4/SNb0/5fN+OXkxDBALxmYyORbGM0pyPgr4y3zNFB9+SqcPMyFuM4t99VgH6F8Sz1LAFjlu/fFshVbpryYLjEW3O5V45qscZ/4ux5k1WkVQkXZr0HvmXH2OKvnMX6R95jiq03DGeQOsbMaZ9FeT1XbpXHfEgsCw4NxoFbEvXpkRKxMYSr7C3N4l3gLk2GT8dB0Cx/0nFD9mq8ejZ7IQWfHxPBUCTHza8c9k+bE+8Emu1POLtBtG0a+OQJwj1wO5ae3/Rsym+KOi/x3RSxKyG7iZwCq1rVSwMuFrFErjStDncOBT2tmx1/Ze29hU9u+kSVsck3im7cE5k3a7DjMK59DeaAz8zBQ/Wgl+RW4Sz9aeL84NgRy19o/+JDItfiGDMKTSzgYPg7IZx6yeMmahfirzxZ9dRT1/o9yYAX9W2yXy9yr+E4vP8EJwDQZ56BljGSMyljEzXxb0GTGYpR0/zMzqlckzU6MMU+kXzo9lWTL2VfyTBnuwLGDMpL8ke34y1j0x8nXLBAMTDDBLJ9dX8QNfTy/+PUlmyozNLG8OMHSib5ZbeaCvjBXpi/kq/hOLX6TdxDBpn7LLwv9tJJ+DsDEDpsr3P4hdZW4zBdfInhEDM/pbTfYDWT2PLUD21XuCcFT8hVjR33seJkUGy1QiCMmIqfW41rZNGMv8gAGm93OvL0TP36heYPUYKZRhq8xvoCNWaWfrUllLbeOr95sbw8YwdpP2CUcwwPwh+SpivUl/FSGQs2fgHK9IbJlizH+lLb7PEYwvzb6TZ4IZmXwy2ay1k0zpsFgq8X3a+8rY7EelzcN6rIvkP2N4cXBA96RvFhdpf4TOM5fg2jAIX9Ca+AJT6fVC/X3AzyrthtGVGFvgJ6qXZyIHo/O+/5dGMw2dPXRWYBRigFkC5uwKYF9RZEz4sc7YUdyT45dUjrPlIu3zrn527HLcQOdZms0O/DeMLsn1kYBPck0Yha7jg3NkP8jR3yIyFvvKcjRpix/lyPU6/c5bMJbbpbbZEKt0GBAYRe4XWByZP6/ZVcSsEoxtDPVirwOiH/wEjNujpxF7z2RxGwz/aeddjtt4/ldHWGBlTy4ip4jBvrj4/BOPyNV/ouOx01LJ/+89ikIMJQaYEhhjBvvprUjWLav6rC/2N8NKtUj8NKL/RmkUOI4tSbz7MKS1jdkAZrSKjBj808AcnoXgpNnfHhz3q8n7YFaRVgv5wzdc/6wxs1KpxLM1vHcNjDELipgZ2xJGj8W+shXZC9Y9OU6LYR7yKv6Dij+6OMNmZNJP0u5gwg8zZ4qe5QZW5Gs0GcrAT8Q8bfCMRsa6hgZM+GHm/1XxR1A2WALwiAXBWI+VsdlPFmGSA7EvyPuDZjxMT9ZX8Z9Y/EcoKxhkZEhlfnkzuyQeSoeZCb6yCTbjj6XEvIVxSq/if0vlRPGvSdjg9WcAKxIXB5sXKu0ThHh+CsyrY3Gbi79K/ByVT5ZzgrC9ucr3Ro0vPjZm1mAsFx8s/iLJxQ83U2bvYb176+wyYmO3RCGW1nbp+GJ/NmBBYEYrccTiOkWsw6wdBf5ZwSeJczzT+GdzVdqZFv2cb3bdT2mTXKTdRkRy/mlELj6Or86H96XSrsQtyI0LiFXNP+eLgJ9o2/X0zR9JWnAum6Um/Xt+kbEPMEpy3jNmV0/mq7e6Rz6Z0YsDbJV4Ww6GkaQ3dpH2SUJ1cZF8YwaMIkcfYEIYsyX+tolk4WkhpslxY8T79+fA8sf9q2dGPB/pPSwyLnLbvTULMEow9ixraqaRmKl0vudr5o0e6k8Wf63jdjdG5TizfBviNvti1pZ41sQXr0iV+J+HM18cYHG9FmlXhl/Nf7T4zFQ6HrEysa+MFfkY5cisW5Qxe77+aPGx8TH6OUb/BGEW0S+FvMvx044PjM1yxGaKki9+7QU+5WTbiCsdNzf2jxY/Yz0y2Fcv2Fepbb3j+mCwwLTg3JcfNsbvIGKlJD00m3Fb7Td6GjF6shHB7E/pz7Aei31l30oR/ud8R8XHKl+IiVXtN+XBPN6HBioyLj4bg3kdMCMfo5mm5GeGlTE4zPU5myMzPesAnVV5gLGM+a8t/tk4Y4yThMESjMmYtySZsSFmQfBlchSzwChB34jZ+HgV/0nF/x/17+5Bfa6vwwAAAABJRU5ErkJggg=="/></a>
<div class="con">
<h4>发现并记录精彩故事</h4>
<div onclick="gogo()" class="btn btn-block btn-lv">现在开始</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
*{margin:0; box-sizing:border-box}
ul{padding:0;list-style:none}
h5 {font-size:.2rem;}
h6 {font-size:.16rem;}
@font-face {
font-family: 'FangSong';
src: url("http://okr0x0ulp.bkt.clouddn.com/FangSong.ttf");
}
.btn {
display: inline-block;
text-align: center;
color: #fff;
font-style: normal;
cursor: pointer;
text-decoration: none;
padding: 0 0.16rem;
border-radius: 3px;
font-size: 0.28rem;
min-width: 2rem;
height: 0.7rem;
line-height: 0.7rem;
white-space: nowrap;
background: #1480db;
-webkit-tap-highlight-color: #80be1d;
}
.btn.btn-block {
font-size: 0.32rem;
height: 0.8rem;
line-height: 0.8rem;
border-radius: 5px;
margin: 0.1rem auto;
display: table;
width: 6rem;
}
.swiper {
color: #fff;
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.swiper .swiper-slide {
overflow: hidden;
line-height: 1.6;
background: #80be1d;
}
.swiper .swiper-slide:nth-child(1) .con {
box-shadow: 0 -1rem 1rem #80be1d;
}
.swiper .swiper-slide:nth-child(2) {
background: #1480db;
}
.swiper .swiper-slide:nth-child(2) .con {
background: #1480db;
box-shadow: 0 -1rem 1rem #1480db;
}
.swiper .swiper-slide:nth-child(5) {
background: #002578;
}
.swiper .swiper-slide:nth-child(5) .con {
background: #002578;
}
.swiper .swiper-slide:nth-child(3) {
background: #f1982e;
}
.swiper .swiper-slide:nth-child(3) .con {
background: #f1982e;
}
.swiper .swiper-slide:nth-child(4) {
background: #ef4356;
}
.swiper .swiper-slide:nth-child(4) .con {
background: #ef4356;
}
.swiper .swiper-slide:nth-child(5) .con h4 {
transition: all 0.5s 0.5s;
}
.swiper .swiper-slide .con {
position: absolute;
background: #80be1d;
z-index: 5;
width: 100%;
bottom: 0;
height: 3.6rem;
padding: 0 0.1rem;
}
.swiper .swiper-slide .con p {
min-height: 0.36rem;
font-family: "FangSong";
font-size: 0.3rem;
transition: all 0.5s 2.5s;
}
.swiper .swiper-slide .con h4 {
transition: all 0.5s 2s;
font-size: 0.4rem;
font-weight: 200;
height: 1.2rem;
}
.swiper .swiper-slide .con p,
.swiper .swiper-slide .con h4 {
opacity: 0;
}
.swiper .app_icon,
.swiper .codeimg {
position: absolute;
left: 50%;
}
.swiper .app_icon {
width: 2rem;
margin-left: -1rem;
height: 2rem;
background: url("//okr0x0ulp.bkt.clouddn.com/app_icon.png") no-repeat center;
background-size: contain;
top: 5%;
}
.swiper .app_icon:before {
content: 'utale.me';
position: absolute;
color: #e5e9f8;
width: 100%;
left: 0;
bottom: -0.4rem;
font-family: Verdana;
letter-spacing: 0.1rem;
font-size: 0.2rem;
padding-left: 0.05rem;
opacity: 0.7;
}
.swiper .codeimg {
top: 40%;
width: 2.4rem;
margin-left: -1.2rem;
background: #fff;
padding: 0.15rem 0.2rem;
color: #999;
font-size: 0.2rem;
text-decoration: none;
}
.swiper .codeimg p {
height: 0.5rem;
}
.swiper .codeimg img {
width: 100%;
border: 0;
}
.swiper .swiper-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
text-align: center;
}
.swiper .swiper-container .swiper-pagination-bullet {
background: #fff;
}
.swiper .swiper-container .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
opacity: 0.3;
}
.swiper .img {
position: fixed;
width: 7.5rem;
top: 5rem;
left: 50%;
opacity: 0;
}
.swiper .ico,
.swiper .line {
position: absolute;
top: 4rem;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.swiper .ico {
width: 3rem;
height: 3rem;
background: url("//okr0x0ulp.bkt.clouddn.com/lv_ico_1.svg") no-repeat center;
background-size: contain;
}
.swiper .ico1 {
transition: all 0.2s;
z-index: 4;
}
.swiper .ico2 {
transition: all 0.2s 0.1s;
background-image: url("//okr0x0ulp.bkt.clouddn.com/lv_ico_2.svg");
z-index: 3;
}
.swiper .ico3 {
transition: all 0.2s 0.3s;
background-image: url("//okr0x0ulp.bkt.clouddn.com/lv_ico_3.svg");
z-index: 2;
}
.swiper .ico4 {
transition: all 0.2s 0.5s;
background-image: url("//okr0x0ulp.bkt.clouddn.com/lv_ico_4.svg");
}
.swiper .line {
width: 2px;
height: 1px;
background: #fff;
opacity:.2;
transition: all 0.5s 1s;
}
.swiper .usrs {
width: 100%;
height: 70%;
background: url("//okr0x0ulp.bkt.clouddn.com/map2.svg") no-repeat center;
position: absolute;
}
.swiper .usr {
width: 0.8rem;
height: 0.8rem;
background: url("//okr0x0ulp.bkt.clouddn.com/map_usr.svg") no-repeat center;
background-size: contain;
position: absolute;
top: 30%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
transition: all ease-out 0.7s 0.3s;
}
.swiper .mobs {
width: 7.5rem;
margin: 15% auto;
position: relative;
}
.swiper .mob {
background: #fff;
border-radius: 0.3rem;
border: 0.1rem solid #c2404b;
position: absolute;
text-align: left;
padding: 0.2rem 0;
}
.swiper .mob1 {
width: 2.2rem;
height: 3.4rem;
left: 1.4rem;
top: 2.5rem;
z-index: 2;
}
.swiper .mob1 li {
padding: 0.05rem;
padding-left: 0.6rem;
position: relative;
background: #eee;
margin: 0.05rem;
height: 0.5rem;
opacity: 0;
transition: all 0.6s;
}
.swiper .mob1 li:nth-child(2) {
transition: all 0.5s 0.4s;
}
.swiper .mob1 li:nth-child(2) .ic {
background: #1480db;
}
.swiper .mob1 li:nth-child(3) {
transition: all 0.4s 0.7s;
}
.swiper .mob1 li:nth-child(3) .ic {
background: #f1982e;
}
.swiper .mob1 li:nth-child(4) {
transition: all 0.3s 0.9s;
}
.swiper .mob1 li:nth-child(4) .ic {
background: #ef4356;
}
.swiper .mob1 li:nth-child(5) {
transition: all 0.3s 1s;
}
.swiper .mob1 li:nth-child(5) .ic {
background: #8f4326;
}
.swiper .mob1 .ic {
position: absolute;
width: 0.4rem;
height: 0.4rem;
background: #80be1d;
left: 0.05rem;
}
.swiper .mob1 h3 {
font-size: 0.14rem;
color: #555;
}
.swiper .mob1 p {
font-size: 0.1rem;
color: #999;
}
.swiper .mob2 {
width: 3.4rem;
height: 5.6rem;
right: 1.4rem;
overflow: hidden;
}
.swiper .mob2 li {
padding: 0.1rem 0.2rem;
height: 1rem;
}
.swiper .mob2 li p {
background: #eee;
height: 0.7rem;
width: 1px;
border-radius: 0.1rem;
opacity: 0;
}
.swiper .mob2 li:nth-child(2n) p {
background: #d0ffb9;
float: right;
}
.swiper .mob2 li .io0 {
transition: all 0.3s;
}
.swiper .mob2 li .io1 {
transition: all 0.3s 0.4s;
}
.swiper .mob2 li .io2 {
transition: all 0.3s 0.6s;
}
.swiper .mob2 li .io3 {
transition: all 0.3s 1.2s;
}
.swiper .mob2 li .io4 {
transition: all 0.3s 1.4s;
}
@media screen and (max-width: 320px) {
.swiper {
padding-top: 15%;
}
.swiper .swiper-slide .con {
padding: 0 0.6rem;
height: 4rem;
}
}
@-webkit-keyframes fr_img {
0%, 10% {
opacity: 0;
-webkit-transform: scale(1, 1) translate(-30%, -30%);
}
70% {
opacity: 0.7;
-webkit-transform: scale(2.5, 2.5) translate(-22%, -20%);
}
100% {
opacity: 0.8;
-webkit-transform: scale(2.6, 2.6) translate(-25%, -20%);
}
}
.swiper .swiper-slide-active .con p,
.swiper .swiper-slide-active .con h4 {
opacity: 1;
}
.swiper .swiper-slide-active .img {
opacity: 0.9;
-webkit-transform: scale(2.6, 2.6) translate(-25%, -20%);
-webkit-animation: fr_img ease-out 1.4s;
}
.swiper .swiper-slide-active .ico1 {
-webkit-transform: scale(0.8, 0.8) translate(-125%, -125%);
}
.swiper .swiper-slide-active .ico2 {
-webkit-transform: scale(0.8, 0.8) translate(0%, -125%);
}
.swiper .swiper-slide-active .ico3 {
-webkit-transform: scale(0.8, 0.8) translate(-125%, 0%);
}
.swiper .swiper-slide-active .ico4 {
-webkit-transform: scale(0.8, 0.8) translate(0%, 0%);
}
.swiper .swiper-slide-active .line1 {
width: 8rem;
}
.swiper .swiper-slide-active .line2 {
height: 8rem;
}
.swiper .swiper-slide-active .usr {
opacity: 1;
width: 80%;
height: 60%;
}
.swiper .swiper-slide-active .mob1 li {
opacity: 1;
}
.swiper .swiper-slide-active .mob2 li p {
opacity: 1;
}
.swiper .swiper-slide-active .mob2 li .io0 {
width: 90%;
}
.swiper .swiper-slide-active .mob2 li .io1 {
width: 75%;
}
.swiper .swiper-slide-active .mob2 li .io2 {
width: 65%;
}
.swiper .swiper-slide-active .mob2 li .io3 {
width: 60%;
}
.swiper .swiper-slide-active .mob2 li .io4 {
width: 80%;
}