nn/page.css

/* reset */
html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu { margin:0; padding:0; }
header, footer, section, article, aside, nav, hgroup, address, figure, figcaption, menu, details { display:block; }
table { border-collapse:collapse; border-spacing:0; }
caption, th { text-align:left; font-weight:normal; }
html, body, fieldset, img, iframe, abbr { border:0; }
i, cite, em, var, address, dfn { font-style:normal; vertical-align:middle; }
[hidefocus], summary {
outline:0;
}
li { list-style:none; }
/*h1,h2,h3,h4,h5,h6,small{font-size:100%;}*/
sup, sub { font-size:83%; }
pre, code, kbd, samp { font-family:inherit; }
q:before, q:after { content:none; }
textarea { overflow:auto; resize:none; }
label, summary { cursor:default; }
a, button { cursor:pointer; }
input[type="text"], input[type="button"] { -webkit-appearance: none; border:0; }
select { -webkit-appearance: none; }
h1, h2, h3, h4, h5, h6, em, strong{ font-weight:normal; }
b{ font-weight:bold;}
del, ins, u, s, a, a:hover { text-decoration:none; }
body, textarea, input, button, select, keygen, legend { font:12px/1.14 "Microsoft Yahei"; color:#333; outline:0; }
body { }
a, a:hover { color:inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
img { vertical-align: middle; max-width:100%; }

/*conmon*/
.fl { float:left; }
.fr { float:right; }
.clearfix { zoom: 1 }
.clearfix:after { content: ""; display: table; clear: both; height:0; visibility:hidden; line-height: 0; font-size:0; }
.textl { text-align:left; }
.textr { text-align:right; }
.textc { text-align:center; }
.c-green { color: #06bf04 !important }
.c-red { color: #ed5050 !important }
.c-gray { color: #b2b2b2 !important }
.c-yellow { color: #ffe850 !important }
.btn { display: inline-block; background-color: #fafafa; border: 1px solid #e5e5e5; border-radius: 5px; padding: 7px 10px; text-align: center; margin: 0; color: #606060; cursor: pointer; line-height: 1.5; -webkit-appearance: none; }
.btn:hover { color: #606060 }
.btn:active { background-color: #e9e9e9; color: #999 }
.btn.disabled, .btn[disabled] { background-color: #c9c9c9 !important; background-image: none !important; border: 1px solid transparent !important; color: #fff !important }
.btn.disabled:active, .btn[disabled]:active { background-color: #c9c9c9 !important; background-image: none !important; border: 1px solid #bcbcbc !important }
.btn.btn-blue { color: #fff; background-color: #2797d1; border-color: #fff; border: 1px solid #2797d1; }
.btn.btn-block { text-align: center; width: 100%; padding: 11px 10px; line-height: 1.5; border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.icon { background-repeat:no-repeat; display:inline-block; background-size:100%; }
.fixbottom { position: fixed; z-index: 999; bottom: 0px; width:100%; display: block; overflow: hidden; }

/*swiper*/
.swiper-container { margin:0 auto; position:relative; overflow:hidden; z-index:1 }
.swiper-container-no-flexbox .swiper-slide { float:left }
.swiper-container-vertical>.swiper-wrapper { -webkit-box-orient:vertical; -moz-box-orient:vertical; -ms-flex-direction:column; -webkit-flex-direction:column; flex-direction:column }
.swiper-wrapper { position:relative; width:100%; height:100%; z-index:1; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-transition-property:-webkit-transform; -moz-transition-property:-moz-transform; -o-transition-property:-o-transform; -ms-transition-property:-ms-transform; transition-property:transform; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box }
.swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -o-transform:translate(0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) }
.swiper-container-multirow>.swiper-wrapper { -webkit-box-lines:multiple; -moz-box-lines:multiple; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap }
.swiper-container-free-mode>.swiper-wrapper { -webkit-transition-timing-function:ease-out; -moz-transition-timing-function:ease-out; -ms-transition-timing-function:ease-out; -o-transition-timing-function:ease-out; transition-timing-function:ease-out; margin:0 auto }
.swiper-slide { -webkit-flex-shrink:0; -ms-flex:0 0 auto; flex-shrink:0; width:100%; height:100%; position:relative }
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height:auto }
.swiper-container-autoheight .swiper-wrapper { -webkit-box-align:start; -ms-flex-align:start; -webkit-align-items:flex-start; align-items:flex-start; -webkit-transition-property:-webkit-transform, height; -moz-transition-property:-moz-transform; -o-transition-property:-o-transform; -ms-transition-property:-ms-transform; transition-property:transform, height }
.swiper-container .swiper-notification { position:absolute; left:0; top:0; pointer-events:none; opacity:0; z-index:-1000 }
.swiper-wp8-horizontal { -ms-touch-action:pan-y; touch-action:pan-y }
.swiper-wp8-vertical { -ms-touch-action:pan-x; touch-action:pan-x }
.swiper-button-next, .swiper-button-prev { position:absolute; top:50%; width:27px; height:44px; margin-top:-22px; z-index:10; cursor:pointer; -moz-background-size:27px 44px; -webkit-background-size:27px 44px; background-size:27px 44px; background-position:center; background-repeat:no-repeat }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity:.35; cursor:auto; pointer-events:none }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left:10px; right:auto }
.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") }
.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") }
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); right:10px; left:auto }
.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") }
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") }
.swiper-pagination { position:absolute; text-align:center; -webkit-transition:.3s;
-moz-transition:.3s;
-o-transition:.3s;
transition:.3s;
-webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); z-index:10 }
.swiper-pagination.swiper-pagination-hidden { opacity:0 }
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom:10px; left:0; width:100% }
.swiper-pagination-bullet { width:8px; height:8px; display:inline-block; border-radius:100%; background:#000; opacity:.2 }
button.swiper-pagination-bullet { border:none; margin:0; padding:0; box-shadow:none; -moz-appearance:none; -ms-appearance:none; -webkit-appearance:none; appearance:none }
.swiper-pagination-clickable .swiper-pagination-bullet { cursor:pointer }
.swiper-pagination-white .swiper-pagination-bullet { background:#fff }
.swiper-pagination-bullet-active { opacity:1; background:#007aff }
.swiper-pagination-white .swiper-pagination-bullet-active { background:#fff }
.swiper-pagination-black .swiper-pagination-bullet-active { background:#000 }
.swiper-container-vertical>.swiper-pagination-bullets { right:10px; top:50%; -webkit-transform:translate3d(0, -50%, 0); -moz-transform:translate3d(0, -50%, 0); -o-transform:translate(0, -50%); -ms-transform:translate3d(0, -50%, 0); transform:translate3d(0, -50%, 0) }
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin:5px 0; display:block }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin:0 5px }
.swiper-pagination-progress { background:rgba(0, 0, 0, .25); position:absolute }
.swiper-pagination-progress .swiper-pagination-progressbar { background:#007aff; position:absolute; left:0; top:0; width:100%; height:100%; -webkit-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); -webkit-transform-origin:left top; -moz-transform-origin:left top; -ms-transform-origin:left top; -o-transform-origin:left top; transform-origin:left top }
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar { -webkit-transform-origin:right top; -moz-transform-origin:right top; -ms-transform-origin:right top; -o-transform-origin:right top; transform-origin:right top }
.swiper-container-horizontal>.swiper-pagination-progress { width:100%; height:4px; left:0; top:0 }
.swiper-container-vertical>.swiper-pagination-progress { width:4px; height:100%; left:0; top:0 }
.swiper-pagination-progress.swiper-pagination-white { background:rgba(255, 255, 255, .5) }
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar { background:#fff }
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar { background:#000 }
.swiper-container-3d { -webkit-perspective:1200px; -moz-perspective:1200px; -o-perspective:1200px; perspective:1200px }
.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d }
.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:10 }
.swiper-container-3d .swiper-slide-shadow-left { background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image:-webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image:-moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image:-o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image:linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) }
.swiper-container-3d .swiper-slide-shadow-right { background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image:-webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image:-moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image:-o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image:linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) }
.swiper-container-3d .swiper-slide-shadow-top { background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image:-webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image:-moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image:-o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image:linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) }
.swiper-container-3d .swiper-slide-shadow-bottom { background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image:-webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image:-moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image:-o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image:linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) }
.swiper-container-coverflow .swiper-wrapper, .swiper-container-flip .swiper-wrapper { -ms-perspective:1200px }
.swiper-container-cube, .swiper-container-flip { overflow:visible }
.swiper-container-cube .swiper-slide, .swiper-container-flip .swiper-slide { pointer-events:none; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; z-index:1 }
.swiper-container-cube .swiper-slide .swiper-slide, .swiper-container-flip .swiper-slide .swiper-slide { pointer-events:none }
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active, .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events:auto }
.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top { z-index:0; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden }
.swiper-container-cube .swiper-slide { visibility:hidden; -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0; width:100%; height:100% }
.swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin:100% 0; -moz-transform-origin:100% 0; -ms-transform-origin:100% 0; transform-origin:100% 0 }
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next+.swiper-slide, .swiper-container-cube .swiper-slide-prev { pointer-events:auto; visibility:visible }
.swiper-container-cube .swiper-cube-shadow { position:absolute; left:0; bottom:0; width:100%; height:100%; background:#000; opacity:.6; -webkit-filter:blur(50px); filter:blur(50px); z-index:0 }
.swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function:ease-out; -moz-transition-timing-function:ease-out; -ms-transition-timing-function:ease-out; -o-transition-timing-function:ease-out; transition-timing-function:ease-out }
.swiper-container-fade .swiper-slide { pointer-events:none; -webkit-transition-property:opacity; -moz-transition-property:opacity; -o-transition-property:opacity; transition-property:opacity }
.swiper-container-fade .swiper-slide .swiper-slide { pointer-events:none }
.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events:auto }
.swiper-scrollbar { border-radius:10px; position:relative; -ms-touch-action:none; background:rgba(0, 0, 0, .1) }
.swiper-container-horizontal>.swiper-scrollbar { position:absolute; left:1%; bottom:3px; z-index:50; height:5px; width:98% }
.swiper-container-vertical>.swiper-scrollbar { position:absolute; right:3px; top:1%; z-index:50; width:5px; height:98% }
.swiper-scrollbar-drag { height:100%; width:100%; position:relative; background:rgba(0, 0, 0, .5); border-radius:10px; left:0; top:0 }
.swiper-scrollbar-cursor-drag { cursor:move }
.swiper-lazy-preloader { width:42px; height:42px; position:absolute; left:50%; top:50%; margin-left:-21px; margin-top:-21px; z-index:10; -webkit-transform-origin:50%; -moz-transform-origin:50%; transform-origin:50%; -webkit-animation:swiper-preloader-spin 1s steps(12, end) infinite; -moz-animation:swiper-preloader-spin 1s steps(12, end) infinite; animation:swiper-preloader-spin 1s steps(12, end) infinite }
.swiper-lazy-preloader:after { display:block; content:""; width:100%; height:100%; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position:50%; -webkit-background-size:100%; background-size:100%; background-repeat:no-repeat }
.swiper-lazy-preloader-white:after { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") }
@-webkit-keyframes swiper-preloader-spin { 100% {
-webkit-transform:rotate(360deg)
}
}
@keyframes swiper-preloader-spin { 100% {
transform:rotate(360deg)
}
}

/*switchery*/
.switchery { background-color:#fff; border:1px solid #dfdfdf; border-radius:20px; cursor:pointer; display:inline-block; height:30px; position:relative; vertical-align:middle; width:50px }
.switchery>small { background:#fff; border-radius:100%; box-shadow:0 1px 3px rgba(0, 0, 0, 0.4); height:30px; position:absolute; top:0; width:30px }

/*layui*/
.layui-m-layer { position:relative; z-index:19891014 }
.layui-m-layer * { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box }
.layui-m-layermain, .layui-m-layershade { position:fixed; left:0; top:0; width:100%; height:100% }
.layui-m-layershade { background-color:rgba(0, 0, 0, .7); pointer-events:auto }
.layui-m-layermain { display:table; font-family:Helvetica, arial, sans-serif; pointer-events:none }
.layui-m-layermain .layui-m-layersection { display:table-cell; vertical-align:middle; text-align:center }
.layui-m-layerchild { position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius:5px; box-shadow:0 0 8px rgba(0, 0, 0, .1); pointer-events:auto; -webkit-overflow-scrolling:touch; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:.2s;
animation-duration:.2s
}
@-webkit-keyframes layui-m-anim-scale { 0% {
opacity:0;
-webkit-transform:scale(.5);
transform:scale(.5)
}
100% {
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes layui-m-anim-scale { 0% {
opacity:0;
-webkit-transform:scale(.5);
transform:scale(.5)
}
100% {
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
}
.layui-m-anim-scale { animation-name:layui-m-anim-scale; -webkit-animation-name:layui-m-anim-scale }
@-webkit-keyframes layui-m-anim-up { 0% {
opacity:0;
-webkit-transform:translateY(800px);
transform:translateY(800px)
}
100% {
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes layui-m-anim-up { 0% {
opacity:0;
-webkit-transform:translateY(800px);
transform:translateY(800px)
}
100% {
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
.layui-m-anim-up { -webkit-animation-name:layui-m-anim-up; animation-name:layui-m-anim-up }
.layui-m-layer0 .layui-m-layerchild { width:90%; max-width:640px }
.layui-m-layer1 .layui-m-layerchild { border:none; border-radius:0 }
.layui-m-layer2 .layui-m-layerchild { width:auto; max-width:260px; min-width:40px; border:none; background:0 0; box-shadow:none; color:#fff }
.layui-m-layerchild h3 { padding:0 10px; height:60px; line-height:60px; font-size:16px; font-weight:400; border-radius:5px 5px 0 0; text-align:center }
.layui-m-layerbtn span, .layui-m-layerchild h3 { text-overflow:ellipsis; overflow:hidden; white-space:nowrap }
.layui-m-layercont { padding:10px; line-height:22px; text-align:center }
.layui-m-layer1 .layui-m-layercont { padding:0; text-align:left }
.layui-m-layer2 .layui-m-layercont { text-align:center; padding:0; line-height:0 }
.layui-m-layer2 .layui-m-layercont i { width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%; -webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out; animation:layui-m-anim-loading 1.4s infinite ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both }
.layui-m-layerbtn, .layui-m-layerbtn span { position:relative; text-align:center; border-radius:0 0 5px 5px }
.layui-m-layer2 .layui-m-layercont p { margin-top:20px }
@-webkit-keyframes layui-m-anim-loading { 0%, 100%, 80% {
transform:scale(0);
-webkit-transform:scale(0)
}
40% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes layui-m-anim-loading { 0%, 100%, 80% {
transform:scale(0);
-webkit-transform:scale(0)
}
40% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
.layui-m-layer2 .layui-m-layercont i:first-child { margin-left:0; -webkit-animation-delay:-.32s;
animation-delay:-.32s
}
.layui-m-layer2 .layui-m-layercont i.layui-m-layerload { -webkit-animation-delay:-.16s;
animation-delay:-.16s
}
.layui-m-layer2 .layui-m-layercont>div { line-height:22px; padding-top:7px; margin-bottom:20px; font-size:14px }
.layui-m-layerbtn { display:box; display:-moz-box; display:-webkit-box; width:100%; height:50px; line-height:50px; font-size:0; border-top:1px solid #D0D0D0; background-color:#F2F2F2 }
.layui-m-layerbtn span { display:block; -moz-box-flex:1; box-flex:1; -webkit-box-flex:1; font-size:14px; cursor:pointer }
.layui-m-layerbtn span[yes] { color:#40AFFE }
.layui-m-layerbtn span[no] { border-right:1px solid #D0D0D0; border-radius:0 0 0 5px }
.layui-m-layerbtn span:active { background-color:#F6F6F6 }
.layui-m-layerend { position:absolute; right:7px; top:10px; width:30px; height:30px; border:0; font-weight:400; background:0 0; cursor:pointer; -webkit-appearance:none; font-size:30px }
.layui-m-layerend::after, .layui-m-layerend::before {
position:absolute;
left:5px;
top:15px;
content:'';
width:18px;
height:1px;
background-color:#999;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-radius:3px
}
.layui-m-layerend::after {
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg)
}
body .layui-m-layer .layui-m-layer-footer { position:fixed; width:95%; max-width:100%; margin:0 auto; left:0; right:0; bottom:10px; background:0 0 }
.layui-m-layer-footer .layui-m-layercont { padding:20px; border-radius:5px 5px 0 0; background-color:rgba(255, 255, 255, .8) }
.layui-m-layer-footer .layui-m-layerbtn { display:block; height:auto; background:0 0; border-top:none }
.layui-m-layer-footer .layui-m-layerbtn span { background-color:rgba(255, 255, 255, .8) }
.layui-m-layer-footer .layui-m-layerbtn span[no] { color:#FD482C; border-top:1px solid #c2c2c2; border-radius:0 0 5px 5px }
.layui-m-layer-footer .layui-m-layerbtn span[yes] { margin-top:10px; border-radius:5px }
body .layui-m-layer .layui-m-layer-msg { width:auto; max-width:90%; margin:0 auto; bottom:-150px; background-color:rgba(0, 0, 0, .7); color:#fff }
.layui-m-layer-msg .layui-m-layercont { padding:10px 20px }
.layer-closed { height:40px; }
.layer-closed .btn-closed { z-index:2; top:10px; right:10px; position:absolute; width:18px; height:18px; display:block; background:url(../images/layer_closerbtn.png) no-repeat; background-size:100%; }
.layui-m-layerbtns{ text-align:center;}
.layui-m-layerbtns .btn-gray{ background-color:#e6e6e6;border-radius:0; font-size:1.4rem; color:#1a1a1a;padding: 7px 35px; margin:0 10px;}


html { font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 62.5%; }
body { margin: 0; font-size: 1.4rem; line-height: 1.5; color: #333; background-color: white; min-height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.wrap { width:100%; max-width:1200px; margin:0 auto; }
.flex { display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap }
.flex>.cell { -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1; width:0; -webkit-flex-basis:0; -ms-flex-preferred-size:0; flex-basis:0; max-width:100%; display:block; position:relative }
.flex>.cell.fixed { -webkit-box-flex:0; -webkit-flex:none; -ms-flex:none; flex:none; width:auto }
.container { position:absolute; width:100%; min-height:100%; }

/* index */
.index_top { position:relative; }
.index_top img, .ad img { width:100%; height:auto; }
.user_box { z-index:2; position:absolute; left:0; top:16%; width:92%; padding-left:8%; }
.user_avatar, .user_info { display:inline-block; float: left; }
.user_avatar { position:relative; margin-right:1.8rem; margin-top:0.2rem; }
.avatar, .avatar img { width:6.5rem; height:6.5rem; border-radius:999px; }
.user_avatar .avatar img { border:3px solid rgba(255, 255, 255, 0.2); }
.user_avatar .icon-rz { z-index:2; position:absolute; right:-3px; bottom:-3px; }
.icon-rz { width:1.4rem; height:1.4rem; background-image: url(../images/icon_rz.png); background-size:100%; }
.user_info { width:43%; color:#fff; }
.user_info li { font-size:1.2rem; line-height:1.6; }
.user_info .username { font-size:1.8rem; }
.signday { font-size:1.4rem; }
.user_info .label_yellow { margin-left:0.6rem; }
.label_yellow {
padding:0 .3rem; font-size:1.2rem; background-color:#ffd153; border-radius:5px; color:#44474d; line-height:1.0625rem; }
.signin { margin-top:0.7rem; line-height:2rem; }
.btn-signin { background:none; border:1px solid #fff!important; color:#fff; padding:0 0.9375rem; font-size:1.2rem; line-height:2rem; margin-top:-.2rem;
}
.btn-signin[disabled] { background:none!important; border:1px solid #999!important; color:#999!important; }
.bgwhite, .marginbottom15 { margin-bottom:1.2rem }
.marginbottom20 { margin-bottom:1.3rem }
.bgwhite { background-color:#fff; }
.navs li { text-align:center; }
.navs li a { display:block; padding:1.5rem 0; font-size:1.5rem; line-height:1.8; }
.navs li img { width:4.5rem; height:4.5rem; display:inline-block; }
.menus li, .list li { text-align:left; border-bottom:1px solid #adadad; display:block; }
.menus li a { display:block; font-size:1.125rem; padding:1rem; background-color:#fff; font-size:1.8rem; line-height:2.5rem; color:#404041; }
.menus li:last-child { border-bottom:0; }
.icon-left, .icon-left2 { margin-right:1rem; float:left; }
.icon-left, .icon-left img, .icon-arrowright, .icon-arrowdown { width:2.5rem; height:2.5rem; display:inline-block; }
.icon-left2, .icon-left2 img { width:3.6rem; height:3.6rem; }
.icon-arrowright { background-image:url(../images/icon_arrowright.png); background-size:100%; float:right; }
.icon-arrowdown { background-image: url(../images/icon_arrowdown.png); background-size:100%; float:right; }
.list li, .list dt, .list dd { background-color:#fff; padding:1rem; color:#333; line-height:2.5rem; border-bottom:1px solid #dbdbdb; }
.list ul { margin-bottom:0.75rem; width:100%; }
.list li { }
.list li ul { width:100%; float:left; }
.list li ul li { padding:1rem 3.5rem 1rem 4rem; background-color:#f1eded; }
.list .left, .list .right { margin:0; float:left; display:inline-block; }
.list .left { width:45%; }
.list .right { width:55%; text-align:right; color:#999; }
.list dl { padding:0 1.2rem; background-color:#fff; }
.list dt, .list dd { font-size:1.3rem; }
.list dd:last-child { border-bottom:0; }
/*gamecenter*/
.gamecenter_top { position:relative; }
.gamecenter_top img { width:100%; height:auto; }
.gamecenter_top .search_btn { z-index:22; position:absolute; right:.8rem;
top:.8rem;
width:3.5rem; height:3.5rem; overflow:hidden; }
.icon-search { width:3.5rem; height:3.5rem; background-image:url(../images/icon_search.png); }
.gamecenter_nav { margin-bottom:0; }
.gamecenter_nav li img { width:3.7rem; height:3.7rem; }
.gamecenter_nav li a { font-size:1.4rem; }
.gamecenter_tit { padding:.625rem .9375rem;
}
.gamecenter_tit, .gamecenter_tit .tit, .gamecenter_tit .more { color:#9a9a9a; font-size:1.3rem; line-height:1.5; }
.gamecenter_cell { }
.gamecenter_list {
padding:1.7rem .8rem; background-color:#fff; box-sizing:border-box; }
.gamecenter_list li { width:25%; height:auto; padding:0 .8rem;
display:inline-block; text-align:center; float:left; box-sizing:border-box; }
.gamecenter_list li a { }
.gamecenter_list li img { /*width:7.2rem; height:7.2rem; */ max-width:100%; }
.gamecenter_list li b { height:2rem; font-size:1.3rem; color:#343434; line-height:2; overflow:hidden; display:block; margin-top:.3rem;
}
.gamecenter_list li p {
padding:0 .5rem; font-size:1rem; color:#b2b2b2; line-height:1.2; height:1.2em; overflow:hidden; text-overflow: ellipsis; }
.game_list a { display:block; }
.game_list dl { position:relative; display:table; width:100%; padding:1.5rem 0; border-bottom:1px solid #dcdcdc; }
.game_list dt, .game_list dd { display: table-cell; vertical-align: top; }
.game_list .gameimg { padding-left:1.5rem; padding-right:1.3rem; }
.game_list .gameinfo { padding-right:1.6rem; }
.game_list .gameimg, .game_list .gameimg img { width:6.5rem; height:6.5rem; }
.game_list .gameinfo { }
.game_list .gamename { font-size:1.5rem; color:#333; line-height:2; }
.game_list .meta { font-size:1.2rem; color:#b2b2b2; }
.game_list .icon-arrowright4 { z-index:2; position:absolute; top:50%; right:1rem; margin-top:-.5rem;
}
.icon-arrowright4 { width:1.3rem; height:1.3rem; background-image:url(../images/icon_arrowright4.png); }
.search-box { margin:1rem 1rem 0 1rem; }
.searchinput { width:100%; height:1.5rem; display:block; text-align:center; background-color:#eee; padding:.8rem 0;
border-radius:8px; color:#646464; overflow:hidden; font-size:1.3rem; }
.gamecenter_tit2 { font-size:1.3rem; border-bottom:1px solid #eaeaea; padding:0 1rem; line-height:2.8; }
.icon-search2 { width:1.6rem; height:1.6rem; background-image:url(../images/icon_search2.png); margin-top:-.5rem;
}
.game_ranklist { }
.game_ranklist dl { width:98%; border-bottom:0; border-radius:8px; margin:2%; margin-top:.5rem;
margin-bottom:.5rem;
}
.game_ranklist dt, .game_ranklist dd { vertical-align:middle; }
.game_ranklist .gameimg { padding-left:0; }
.game_ranklist .gameimg, .game_ranklist .gameimg img { width:9rem; height:9rem; }
.game_ranklist .gameinfo { padding-right:1.5rem; }
.game_ranklist .gamename { font-size:2rem; color:#040404; }
.game_ranklist .gamemeta { position:relative; min-height:2.2rem; padding-bottom:.5rem;
padding-right:5.2rem; }
.game_ranklist .meta { display:inline-block; color:#a8a5a5; }
.game_ranklist .btn-border3 { z-index:2; position:absolute; right:0; top:0; border:1px solid #0080fc; border-radius:2px; color:#0080fc; font-size:1.4rem; line-height:2.5rem; height:2.5rem; width:5rem; text-align:center; padding:0; background-color:#fff; margin-top:-.7rem;
}
.game_ranklist .recommend { }
.game_ranklist .gamenumber { width:3.5rem; text-align:center; font-family:Arial; font-style:italic; font-weight:bold; color:#ccc; font-size:3.6rem; }
.game_ranklist .number01 { color:#d931ed; }
.game_ranklist .number02 { color:#ff6e13; }
.game_ranklist .number03 { color:#dd128e; }
.game_ranklist .number04 { color:#36d026; }
.game_ranklist .number05 { color:#2fdcd6; }
.game_ranklist .number06 { color:#2f95dc; }
.game_ranklist .starbox, .game_ranklist .sentimen { font-size:1.3rem; color:#040404; width:50%; float:left; line-height:1.5rem; }
.game_ranklist .starbox { width:60%; }
.game_ranklist .sentimen { width:40%; }
.star { color:#f4d60f; display:inline-block; font-size:1.5rem; }
.game_ranklist .sentimen { text-align:right; }
.c-yellow2 { color:#ff6e13; }
 @media only screen and (min-width:640px) and (max-width:1024px) {
 .cards_box .cards_top, .cards_box .cards_act {
margin-top:2.7rem;
}
 .cards_box2 {
min-height:30rem;
}
 .card-moreinfo {
margin-top:2.5rem;
}
}
@media only screen and (min-width:480px) and (max-width:1024px) {
 .user_box {
top:30%;
padding-left:15%;
}
 .user_avatar .avatar, .user_avatar .avatar img {
width:6.8rem;
height:6.8rem;
}
 .index_cell5 .li02 a, .index_cell5 .li03 a {
padding:0.85rem 0.625rem;
}
 .members_box .members_cell {
padding:10% 15%;
}
 .members_box .user_info {
margin-top:0.875rem;
}
 .task_list .tit, .task_list .tit2 {
width:55%;
}
 .area-selbox li {
width:10%;
}
}
@media only screen and (max-width:768px) {
}
 @media only screen and (max-width:480px) {
 .cards_box2 {
min-height:28rem;
}
}
@media only screen and (max-width:375px) {
 .index_cell5 .li02 a {
padding:0.8rem 0.5rem;
}
 .index_cell5 .li03 a {
padding:0.1rem 0.5rem;
}
 .task_list .tit, .task_list .tit2 {
width:48%;
}
 .game_ranklist .gameimg, .game_ranklist .gameimg img {
width:7.6rem;
height:7.6rem;
}
 .game_ranklist .gamename {
font-size:1.8rem;
}
 .game_ranklist .gamenumber {
width:3rem;
font-size:3rem;
}
 .game_ranklist .gameimg {
padding-right:1rem;
}
 .conments_box .fl {
width:50%;
}
 .cards_box2 {
min-height:31rem;
}
}
@media only screen and (max-width:320px) {
 .user_info {
margin-top:-0.6rem;
}
 .avatar, .avatar img {
width:5rem;
height:5rem;
}
 .user_info .username {
font-size: 1.6rem;
}
 .index_cell5 .li02 a, .index_cell5 .li03 a {
padding:0.1rem 0.5rem;
}
 .edit-form li {
font-size:1.2rem;
}
 .members_box .members_cell {
padding:5% 6%;
}
 .members_box .user_info {
margin-top:0;
}
 .task_list .tit, .task_list .tit2 {
width:42%;
}
 .sesrch-tips span {
width:14%;
}
 .sesrch-tips p {
width:86%;
}
 .gamecenter_list li b {
font-size:1.2rem;
}
 .game_list dl {
padding:1rem 0;
}
 .game_list .gameimg {
padding-left:1rem;
padding-right:1rem;
}
 .game_ranklist .gameinfo {
padding-right:1rem;
}
 .game_ranklist .gamenumber {
width:2rem;
font-size:2rem;
}
 .game_ranklist .gamename {
font-size:1.6rem;
}
 .game_ranklist .gameimg, .game_ranklist .gameimg img {
width:6rem;
height:6rem;
padding-left:0;
}
 .game_ranklist .gamemeta {
padding-right:4.2rem;
}
 .game_ranklist .btn-border3 {
width:4rem;
height:2rem;
line-height:2rem;
}
 .maintenance_note .dropdown b {
width:22%;
}
 .maintenance_note .dropdown span {
width:77%;
}
 .appointment-form .btns2 .btn {
padding:1.4rem 2.4rem;
margin:0 1rem;
}
 .conments_box .fl {
width:55%;
margin-bottom:.5rem;
}
 .imgload-pic img {
width:7rem;
height:7rem;
margin-right:.8rem;
}
 .comments-list .avatar {
margin-right:1rem;
}
 .comments-list .username {
font-size:1.4rem;
}
 .comments-list dl {
padding: 1.2rem 1rem;
}
 .comments-list .con {
font-size:1.2rem;
}
 .area-selbox li {
width:20%;
}
 .map-info .btn {
margin:0 .3rem;
}
 .cards_box2 {
min-height:31rem;
}
}