@charset "utf-8";

body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button,textarea, p, blockquote, th, td {margin: 0;padding: 0;}
fieldset, img {border: 0;}
img {vertical-align: middle;}
:focus {outline: 0;}
address, caption, cite, code, dfn,em, th, var, optgroup {font-style: normal;font-weight: normal;}
h1, h2, h3, h4, h5, h6{font-weight: normal; font-size: 100%;}
strong,b{font-weight: 700;}
abbr, acronym {border: 0;font-variant: normal;}
input, button, textarea,
select, optgroup, option {font-family: inherit;font-size: inherit;font-style: inherit;	font-weight: inherit;}
code, kbd, samp, tt {font-size: 100%;}
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner{border:none;padding:0;}
input[type="number"] { -moz-appearance: textfield; }
input::-webkit-clear-button,
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; display: none； }
input::-webkit-input-placeholder{color:#ddd;}
input:focus::-webkit-input-placeholder{color:#f5f5f5;}
textarea::-webkit-input-placeholder{color:#ddd;}
textarea:focus::-webkit-input-placeholder{color:#f5f5f5;}
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;);-webkits-user-modify:read-write-plaintext-only;}
a{ -webkit-touch-callout: none; }
a, img {-webkit-touch-callout:none; }
ol, ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}
caption, th {text-align: left;}
sup, sub {font-size: 100%;}
:link, :visited , ins {text-decoration: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
.clearfix:after,.clearfix:before,.form-group:after,.form-group:before,.row:after,.row:before{display:table;content:" ";}
.clearfix:after,.form-group:after,.row:after{clear:both;}
.hide{ display:none; }
.hidden{display:none !important;}
.show{display: block !important;}
.fl{float:left;}
.fr{float:right;}
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}
html{ font-size: 100px;}
@media (max-device-width:321px){html{font-size: 85.7142857px;}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:120px;}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:150px;}}
@media screen and (min-width:720px) and (max-width:799px){html{font-size:200px;}}
@media screen and (min-width:800px){html{font-size:225px}}
html, body{
    width: 100%;
    height: 100%;
    scroll-behavior:smooth;
	-webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
            user-select: none;
}
body {
	color: #333;
	font-size: .14rem;
	line-height: 1.428571428571429;
	font-family: -apple-system-font,Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;
    background-color: #fff;
    -webkit-overflow-scrolling: touch; 
            overflow-scrolling: touch;
}
a{ text-decoration: none; color: #666; }
a:hover,a:active{ color: #dd282d; text-decoration: none; }
a:focus { outline: 0 none;}
.text-primary{ color: #dd282d; }

/* Hx */
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{ font-weight: 400; margin: 0; }
.h1,h1{ font-size: .32rem; }
.h2,h2{ font-size: .24rem; }
.h3,h3{ font-size: .18rem; }
.h4,h4{ font-size: .16rem; }
.h5,h5{ font-size: .14rem; }
.h6,h6{ font-size: .12rem; }
.small,small{ font-size: 90%; }

/* blur */
.blurs{ filter: blur(3px); -webkit-filter: blur(3px); }

.btn{
	position: relative;
	display: block;
	line-height: .2rem;
	padding: .12rem;
	font-size: .16rem;
	text-align: center;
	color: #fff;
	cursor: pointer;
	background-color: transparent;
	border-radius: 1rem;    
}
	button.btn,input.btn{
		width: 100%;
		border: 0 none;
		outline: 0;
		-webkit-appearance: none;
				appearance: none;
	}
	button.btn:focus,input.btn:focus{ outline: 0; }
	button.btn-inline,input.btn-inline{ width: auto; }
    .btn:hover,.btn:active{ opacity: .85; box-shadow: none!important; color: #fff; }
	.btn + .btn{ margin-top: .15rem; }
    
	
	.btn-android:not(.btn-disabled):active{ background: #0085fe; }
	.btn-android{
		background-color: #00aaff;
		background: -webkit-linear-gradient(to right, #00aaff 0%, #0085fe 100%);
		background: linear-gradient(to right,  #00aaff 0%, #0085fe 100%);
        box-shadow: 0 .03rem .15rem rgba(0,133,254,.3);
	}
	.btn-ios:not(.btn-disabled):active{ background: #20d071; }
	.btn-ios{ 
        background-color: #42ec6e;
		background: -webkit-linear-gradient(to right, #42ec6e 0%, #20d071 100%);
		background: linear-gradient(to right,  #42ec6e 0%, #20d071 100%);
        box-shadow: 0 .03rem .15rem rgba(32,208,113,.3);
    }
    .btn-url:not(.btn-disabled):active{ background: #fb922f; }
    .btn-url{ 
        background-color: #fbba2f;
        background: -webkit-linear-gradient(to right, #fbba2f 0%, #fb922f 100%);
        background: linear-gradient(to right, #fbba2f 0%, #fb922f 100%);
        box-shadow: 0 .03rem .15rem rgba(251,146,47,.3);
    }



/* header */
.header{
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0;
    z-index: 10; 
    padding: .1rem .16rem 0 .16rem;
    height: .5rem;
    display: flex;
    align-items: center;
    background-color: rgba(255,255,255,.95);
    -webkit-backdrop-filter: blur(5px);    
            backdrop-filter: blur(5px);  
}
    .header::after{ 
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        color: #eee;
        border-bottom: 1px solid #eee;
        -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
        -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
    }

    /* h1 */
    .header h1{ font-size: .14rem; font-weight: 700; }
    .header h1 a{ display: block; color: #333; }
    .header h1 img{height: .24rem; margin: -.05rem .04rem 0 0; }

    /* tabs */
    .header .tabs{ 
        height: .4rem;
        font-size: 0;
        flex: 1;
        white-space: nowrap;
        text-align: right;
        overflow: hidden;
    }
        .header .tabs > a{  
            display: inline-block;
            vertical-align: middle;
            position: relative;
            line-height: .2rem;
            padding: .1rem;
            font-size: .14rem;
            font-weight: 700;
            color: #999;
            transition: .3s;
        }
        .header .tabs > a::after{ 
            content: "";
            position: absolute;
            left: 50%;
            bottom: 1px;
            width: .12rem;
            height: .03rem;
            border-radius: .3rem;
            opacity: 0;
            background-color: #212121;
            transition: opacity .3s;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
        }
        .header .tabs > a.active{ font-weight: 700; color: #212121; }
        .header .tabs > a.active::after{ opacity: 1; }
        .header .tabs .primary{ 
            display: block;
            color: #dd282d; 
            -webkit-transition: all .3s ease;
                    transition: all .3s ease;
            -webkit-animation: breathe 2s infinite;
                    animation: breathe 2s infinite;
        }
        .header .mode{
            width: .42rem;
            height: .20rem;
            overflow: hidden;
            margin-left: .1rem; 
            cursor: pointer;
            border-radius: .5rem;
            box-shadow: 0 0 0 .02rem #fff;
        }
        .header .mode img{ display: block; width: .42rem; height: .20rem; }
        .header .mode img.img-dark{ display: none; }    
        .header .mode-dark img.img-light{ display: none; }  
        .header .mode-dark img.img-dark{ display: block; }    
        .header .mode-dark{
            box-shadow: 0 0 0 .02rem rgba(0,0,0,.3);
        }


/* urlgroup */
.urlgroup{ width: 100%; overflow: hidden; margin-top: .5rem; padding: .08rem; }
.urlgroup > li{ position: relative; float: left; width: 25%; overflow: hidden; padding: .08rem; }
.urlgroup > li > a{ 
    position: relative;
    display: block; 
    text-align: center; 
    padding: .1rem 0; 
    font-size: .12rem; 
    border-radius: .05rem;
}
    .urlgroup > li > a > img{ display: block; margin: auto; width: .36rem; height: .36rem; margin-bottom: .04rem; }
    .urlgroup > li > a > .title{ display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .urlgroup > li > .urltype{ display: none; }
    .urlgroup > li > a::after{
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        color: #eee;
        border: 1px solid #eee;
        border-radius: .2rem;
        -webkit-transform-origin: 0 0%;
                transform-origin: 0 0%;
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
    } 


/* close */
.close{
	-webkit-user-select: none;
			user-select: none;
	-webkit-appearance: none;
			appearance: none;
	position: absolute;
	display: block;
	width: .3rem;
	height: .3rem;
	overflow: hidden;
	border: 0 none;
    font-size: 0;
	background-color: transparent;
	border-radius: 50%;
	outline: none;
}
	.close::before,
	.close::after {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		background-color: #999;
		-webkit-transform: translate(-50%,-50%) rotate(45deg);
				transform: translate(-50%,-50%) rotate(45deg);
		-webkit-transform-origin: center center;
				transform-origin: center center;
	}
	.close::before{ height: 2px; width: 50%; }
	.close::after { height: 50%; width: 2px; }
	.close:active { opacity: .8; }

/* backdrop */
.backdrop{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	z-index: 99;
    width: 100%;
    height: 100%;
    pointer-events: none;
    backface-visibility: hidden;
    background-color: rgba(249,248,248,.75);
    opacity: 0;
    transition: opacity .3s;
    -webkit-backdrop-filter: blur(5px);    
            backdrop-filter: blur(5px);   
}
    .backdrop.in{ opacity: 1; pointer-events: auto; }

/* modal */
.modal{
    display: block;
    position: fixed;
	top: 50%;
	left: .16rem;
	right: .16rem;
    z-index: 1000;
    overflow: hidden;
	opacity: 0;
    pointer-events: none;
    background-color: #fff;
    border-radius: .16rem;
    transition: all .3s;
    transition: transform .3s, opacity .3s;
	-webkit-backface-visibility: hidden;
    		backface-visibility: hidden;
    -webkit-transform: translateY(-50%) scale(1.2);
        	transform: translateY(-50%) scale(1.2);
}
    .modal::after{
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        color: #eee;
        border: 1px solid #eee;
        border-radius: .32rem;
        -webkit-transform-origin: 0 0%;
                transform-origin: 0 0%;
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
    } 
    .modal.in{
        pointer-events: auto;
		opacity: 1;
        -webkit-backface-visibility: visible;
    		    backface-visibility: visible;
		-webkit-transform: translateY(-50%) scale(1);
        		transform: translateY(-50%) scale(1);
    }
	.modal-close{
		position: absolute;
		top: 50%;
		right: .12rem;
		z-index: 9;
		width: .24rem;
		height: .24rem;
        background-color: #f9f8f8;
        border-radius: 50%;
        -webkit-transform: translateY(-50%);
        		transform: translateY(-50%);
	}
	.modal-close::before{ height: .02rem; }
	.modal-close::after { width: .02rem; }
	.modal-body{ padding: 0; position: relative; z-index: 9;}
    .modal-title{ font-size: .18rem; }
	.modal-header{
		position: relative;
		text-align: center;
		font-size: .14rem;
		color: #212121;
		padding: .15rem .2rem;
		line-height: .2rem;
	}
		.modal-header::after{
			content: " ";
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			height: 1px;
			color: rgba(255,255,255,.1);
			border-bottom: 1px solid rgba(255,255,255,.1);
			-webkit-transform-origin: 0 100%;
					transform-origin: 0 100%;
			-webkit-transform: scaleY(0.5);
					transform: scaleY(0.5);
		}
		
/* modal-url */
.modal-url{ display: flex; align-items: center; padding: 0 .11rem .16rem .11rem; }
.modal-url .btn{ 
    flex: 1;
    border-radius: .1rem;
    margin: 0 .05rem;
    text-align: center;
    padding: .16rem 0 .12rem 0;
    font-size: .14rem;
}
.modal-url .btn::before{
    content: "";
    display: block;
    margin: auto;
    width: .32rem;
    height: .32rem;
    margin-bottom: .08rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: .32rem .32rem;
}
    .modal-url .btn-android::before{ background-image: url(../images/andriod.png); }
    .modal-url .btn-ios::before    { background-image: url(../images/ios.png); }
    .modal-url .btn-url::before    { background-image: url(../images/link.png); }

/* modal-ad */
.modal-tips{
    display: block;
    margin: 0 .16rem .16rem .16rem;
    text-align: center;
    padding: .1rem 0;
    border-radius: .1rem;
    color: #212121;
    background-color: #f9f8f8;
}

/* modal-text */
.modal-text{ text-align: center; margin-bottom: .16rem; }

/* downapp-fixed */
.downapp-fixed{ height: .8rem; }
.downapp{ 
    position: fixed; 
    left: .16rem; 
    right: .16rem; 
    bottom: .16rem; 
    padding: .14rem .14rem;
    line-height: .18rem;
    display: flex;
    align-items: center;
    border-radius: .16rem;
    background-color: rgba(249,248,248,.95);
    -webkit-backdrop-filter: blur(5px);    
            backdrop-filter: blur(5px);  
}
    .downapp .icon{ width: .36rem; height: .36rem; }
    .downapp .text{ flex: 1; padding-left: .1rem; }
    .downapp .btn-group{ }
    .downapp .btn-group .btn{ display: inline-block; padding: .07rem .15rem; font-size: .14rem; margin: 0 0 0 .1rem; }
    

@-webkit-keyframes breathe {
    0% {
        -webkit-transform: scale(1);
    }
    60% {
        -webkit-transform: scale(1.3);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes breathe {
    0% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

/* dark */
.dark{ background-color: #1a1a1c; color: rgba(255,255,255,.75); }
.dark a{ color: rgba(255,255,255,.75); }
.dark .header{ background-color: rgba(32,32,32,.95); }
.dark .header:after{ content: none; display: none; }
.dark .header h1 a { color: rgba(255,255,255,.75); }
.dark .header .tabs > a{ color: rgba(255,255,255,.75); }
.dark .header .tabs > a.active{ color: #fff; }
.dark .header .tabs .primary{ color: #e66c70; }
.dark .header .tabs > a::after{ background-color: rgba(255,255,255,.75); }
.dark .urlgroup > li > a{ background-color: #202020; }
.dark .urlgroup > li > a::after{ content: none; display: none; }
.dark .downapp{ background-color: rgba(32,32,32,.95);  }
.dark .backdrop{ background-color: rgba(26,26,28,.75); }
.dark .modal{ background-color: rgba(48,48,48,.95); }
.dark .modal:after{ content: none; display: none; }
.dark .modal-header{ color: #fff; }
.dark .modal-header::after{ content: none; display: none; }
.dark .modal-close{ background-color: rgba(64,64,64,.95); }
.dark .modal-tips{ background-color: #202020; color: rgba(255,255,255,.75); }
.dark .text-primary{ color: #fff; }