/*
 * @Author: Doris.Lee 
 * @Date: 2022-07-24 11:04:12 
 * @Last Modified by: Doris.Lee
 * @Last Modified time: 2022-07-31 22:33:58
 */

@charset "utf-8";

/* reset */

/* *, *:before, *:after { -webkit-transition: .5s; transition: .5s; } */
body { font-size: 14px; font-family: Microsoft YaHei, Arial, Helvetica, sans-serif; color: #333; line-height: 1.5; }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { padding: 0; margin: 0; }
input, select, button, textarea { font-size: 100%; font-family: inherit; outline: none; }
ol, ul, li { list-style: none; }
img { border: 0; }
a { text-decoration: none; color: #333; }
a:hover { text-decoration: underline; color: #f00; }
table { border-spacing: 0; border-collapse: collapse; }
small, .small { font-size: 12px; }
big, .big { font-size: 18px; }
:focus { outline: 0; }
::-webkit-scrollbar{display:none}
*{margin:0;-ms-overflow-style:none;overflow:-moz-scrollbars-none;}

/* common */
.clearfix:after, .area:after { display: block; height: 0; clear: both; content: ""; }
.clearfix, .area { zoom: 1; }
.clear { height: 0; overflow: hidden; clear: both; font-size: 0; }

/* float */
.fl, .left { float: left; }
.fr, .right { float: right; }

/* text-align */
.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }

/* postion */
.po-r { position: relative; }
.po-a { position: absolute; }

/* display */
.hide { display: none; }
.block { display: block; }
.hidden { overflow: hidden; }
:focus { outline: none; }

/* img-load */
.img-load .image, img.img-load,
.img-load img { display: block; overflow: hidden; background-color: #f5f5f5; }
.J_lazyImg { margin: 0 auto; background-color: #f5f5f5; }

/* img-zoom */
.img-zoom .image { position: relative; display: block; overflow: hidden; background-color: #f5f5f5; }
.img-zoom .image:hover img { -webkit-transform: scale(1.15); transform: scale(1.15); }
.img-zoom .image img { display: block; width: 100%; height: 100%; }

/* img-view */
.img-view .image { position: relative; }
.img-view .image:hover s { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: #000; opacity: 0; filter: alpha(opacity=0); }
.img-view .image:hover s { opacity: .5; filter: alpha(opacity=50); }
.img-view .image i { position: absolute; top: 50%; left: -15%; z-index: 2; display: block; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; background: url("../images/view_icon.png") no-repeat; }
.img-view .image:hover i { left: 50%; }

/* img-hover */
.img-hover:hover { opacity: .8; filter: alpha(opacity=80); }

/* transition */
.trans-none, .trans-none ul { -webkit-transition: none; transition: none; }
.trans-add, .trans-add ul { -webkit-transition: .5s; transition: .5s; }

/******************************** wap ********************************/
/* border */
.bt, .bb { position: relative; }
.bt:before, .bb:after { position: absolute; left: 0; right: 0; content: ""; height: .1rem; background-color: #e2e2e2; -webkit-transform: scaleY(.5); }
.bt:before { top: 0; -webkit-transform-origin: 100% 0; }
.bb:after { bottom: 0; -webkit-transform-origin: 0 100%; }

/* background */
.active { background-color: rgba(0, 0, 0, .1); }

img.img-load, .img-load img { background-color: #f5f5f5; object-fit: cover; }
img.img-cover, .img-cover img { object-fit: cover; }

/* backtop */
.backtop { position: fixed; right: 1rem; bottom: 5rem; z-index: 20; display: none; width: 4rem; height: 4rem; background-image: none; background-color: #000; border-radius: 50%; opacity: .5; }
.backtop:after { position: absolute; top: 50%; left: 50%; display: block; width: 1.2rem; height: 1.2rem; overflow: hidden; margin-top: -.3rem; margin-left: -.6rem; content: ""; border: .1rem solid #fff; border-right: transparent; border-bottom: transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.backtop.active { opacity: 1; }

/* loading */
.loading { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background-color: #fff; }
.loading .line, .loading .line .cur { height: .25rem; }
.loading .line { background-color: #dbdbdb; }
.loading .line .cur { width: 0; background-color: #07c062; -webkit-transition: 100ms; transition: 100ms; }
.loading .wrap { position: absolute; top: 50%; left: 50%; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.loading .icon { width: 2.5rem; height: 2.5rem; margin: 0 auto; background: url("../images/loading_icon.png") no-repeat center; background-size: 100% auto; -webkit-animation: rotate 1.2s infinite linear; animation: rotate 1.2s infinite linear; }
@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(0); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes rotate {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}
.loading .canvas { margin: 0 auto; width: 6rem; height: 6rem; }
.loading .text { width: 12rem; height: 3rem; margin-top: .8rem; background: url("../images/loading_text.gif") no-repeat center; background-size: 100% auto; }
.loading .btn { display: none; margin-top: 2rem; margin-right: .5rem; padding: 1rem 1.5rem; color: #3b7ff6; border: .1rem solid #3b7ff6; border-radius: .5rem; }
.loading .btn.active { color: #fff; background-color: #3b7ff6; }

/* alert */
.alert { position: fixed; top: 50%; right: 10%; left: 10%; z-index: 70; text-align: center; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
.alert span { display: inline-block; padding: 1.2rem 2rem; font-size: 1.5rem; line-height: 1.5; color: #fff; border-radius: .5rem; background: #333; -webkit-box-shadow: inset 0 0 .1rem #424242, 0 .1rem .3rem rgba(0, 0, 0, .65); box-shadow: inset 0 0 .1rem #424242, 0 .1rem .3rem rgba(0, 0, 0, .65); text-shadow: 0 .1rem .1rem #9d9d9d; }

/* tips */
.tips { position: fixed; top: 0; left: 0; z-index: 51; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .75); }
.tips .inner { position: relative; top: 50%; left: 50%; width: 86%; min-width: 276px; padding: 1.5rem 1.2rem 2rem; font-size: 1.6rem; line-height: 1.5; color: #13142c; text-align: center; border-radius: .6rem; background-color: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.tips .text { padding: 2rem 0; line-height: 1.6; text-align: center; }
.tips .text p { margin: .3rem 0; color: #2e96df; }
.tips .btn a { display: inline-block; padding: .6rem 2rem; color: #2e96df; cursor: pointer; border: .1rem solid #2e96df; border-radius: .6rem; }
.tips .btn a.active { color: #fff; background-color: #2e96df; }
.tips .close { position: absolute; top: 0; right: 0; display: inline-block; width: 4rem; height: 4rem; overflow: hidden; color: #2e96df; cursor: pointer; border-top-right-radius: .5rem; }
.tips .close:after, .tips .close:before { position: absolute; top: 1.8rem; left: 50%; display: block; width: 1.6rem; height: .1rem; margin-left: -.8rem; content: ""; background-color: #2e96df; }
.tips .close:before { -webkit-transform: rotate(225deg); transform: rotate(225deg); }
.tips .close:after { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); }

/* pops */
.pops { position: fixed; top: 1rem; right: 1rem; z-index: 9999; width: 80%; max-width: 640px; max-height: 90%; }

/* mask */
.mask { position: fixed; top: 0; left: 0; z-index: 9998; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); }