@charset "utf-8";
/*  */
body{font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;font-size:2.2vmin;line-height:1.8;color:#252525;touch-action:pan-x;background:#333;-webkit-overflow-scrolling:touch;}
a{text-decoration:none;}
p{line-height:1.5;color:#252525;}

/*  */
:root{--mxwidth:540px;}

#loadingBox{display:flex;align-items:center;justify-content:center;width:100%;max-width:750px;height:100vh;margin:0 auto;background:linear-gradient(#f5f5f5, #c5c5c5);}
.loading{width:34vmin;height:auto;margin-top:-25%;text-align:center;}
.loadingImg{position:absolute;top:20%;left:20%;width:60%;}
.snlogo{width:38%;margin:0 auto;}
.logoText{width:80%;margin:5% auto 10%;}
#loadingText{width:100%;}

.mxwidth{perspective:800vmin;display:none;flex-direction:column;align-items:center;justify-content:center;max-width:var(--mxwidth);height:100%;margin:0 auto;}
.disable{pointer-events:none;}
/*  */

#thumb{width:100%;}
#thumb .mCSB_container{display:flex;}
#thumb .mCSB_container > img{width:19vmin;max-width:calc(var(--mxwidth) / 5 - 1vmin);margin-right:1vmin;}
#thumb .mCSB_container > img.active{border-bottom:3px solid #de4614;}
#thumb .mCSB_horizontal.mCSB_inside > .mCSB_container{margin-bottom:4%;}

/* cursor right to left */
@keyframes RTL{to{transform:translateX(-100%) rotate(-10deg);}}
.intorIcon{position:absolute;bottom:30vh;left:60%;z-index:3;width:15%;max-width:100px;animation:RTL linear infinite both 2s;}
/* default */
#pages{position:relative;z-index:2;width:100%;margin-bottom:3%;overflow:hidden;}

/* pages2 */
#pages2{position:relative;z-index:2;width:90%;margin-bottom:3%;overflow:hidden;}
.pageEnd{position:absolute;top:6.4%;left:-100%;width:100%;transform:rotateY(180deg);transform-origin:right;}
.pageEnd .bef{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;background:#d9eefe;}
.pageEnd img{position:relative;z-index:2;}
.pagecur{animation:pagecur 2s 500ms both;}
.pageEnd.pagecur .bef{animation:zindex 1s 1s both;}

@keyframes pagecur{0%{left:-100%;transform:rotateY(180deg);}
  70%{left:-90%;transform:rotateY(0deg);}
  to{left:0%;transform:rotateY(0deg);}}

@keyframes zindex{to{z-index:1;}}
/*  */