@font-face{
font-family: 'Poppins';
src: url('/fonts/Poppins/Poppins.ttf'),
     url('/fonts/Poppins/Poppins.eot'); /* IE9+ */
}
@font-face{
font-family: 'Poppins-Bold';
src: url('/fonts/Poppins-Bold/Poppins-Bold.ttf'),
     url('/fonts/Poppins-Bold/Poppins-Bold.eot'); /* IE9+ */
}

*{margin: 0;padding: 0;}
body{background-image: url('../images/banner.jpg');background-repeat: no-repeat;background-size: cover;background-position: center top;font: 14px/1.4 'Segoe UI',Arial,verdana,Tahoma,Helvetica,sans-serif; color:#000000;}

.container{width: 1340px;margin: 0 auto;padding: 100px 50px;}
.top{display: flex;align-items: center;}
.logo{width: 64px;height: 64px;background-image: url('../images/logo.png');background-repeat: no-repeat;background-position: center center;background-color: #ffffff;border-radius: 32px;margin-right: 20px;flex-shrink: 0;}
.top h1{font-size: 40px;font-family: 'Poppins';font-weight: 900;letter-spacing: 1px;color: #2B92DC;}
.top h1>span{font-family: 'Poppins-Bold';}

.sites{margin: 70px auto 0;background-color: #ffffff;border: 1px solid #F2F2F2;border-radius: 16px;padding: 20px;}
.sites ul{display: grid;list-style-type: none;justify-content: center;grid-template-columns: repeat(auto-fill,129px);}
.sites li{text-align: center;margin: 30px 0;}
.sites a{text-decoration: none;}
.sites a:hover,ul.sites>a:active{text-decoration: none;}
.sites img{border-radius: 10px;width: 64px;height: 64px;border: 1px solid #E0E0E0;box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.2);}
.sites span{display: block;padding-top: 10px;font-size: 17px;font-weight: 600;color: #000000;}

.ad{margin: 70px auto 0;background-color: #ffffff;border-radius: 16px;width: 100%;border: 1px solid rgba(0, 0, 0, 0.15);overflow: hidden;}
.ad a{line-height: 0;}
.ad img{width: 100%;display: block;}

.supported{margin: 70px auto 0;background-color: #ffffff;border: 1px solid #F2F2F2;border-radius: 16px;padding: 20px 30px;}
.supported .title{font-size: 17px;color: rgba(0, 0, 0, 0.5);margin-bottom: 20px;font-weight: 600;}
.letter{display: flex;flex-wrap: wrap;list-style-type: none;padding-bottom: 20px;border-bottom: 1px solid #E0E0E0;}
.letter>li{width: 26px;height: 26px;line-height: 26px;font-size: 22px;font-weight: 600;text-align: center;transition: all .2s;border-radius: 4px;cursor: pointer;margin-right: 5px;margin-bottom: 5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.letter>li.num{width: 38px;flex-shrink: 0;}
.letter>li:hover{background-color: #2F80ED;color: #ffffff;}

.list{margin-top: 20px;padding-left: 19px;height: 230px;overflow-y: auto;overflow-x: visible;position: relative;}
.list>div{border-left: 2px dashed #C0C0C0;}
.list li{list-style-type: none;position: relative;padding-left: 30px;margin-bottom: 20px;}
.list li>span{transition: background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position: absolute;width: 26px;height: 26px;line-height: 26px;font-size: 22px;font-weight: 600;text-align: center;transition: all .2s;border-radius: 4px;left: -14px;background-color: #FFFFFF;}
.list li>span.on{background-color: #E1E2E4;}
.list li>a{display: inline-block;height: 20px;line-height: 20px;border-radius: 4px;font-size: 17px;font-family: 'SF Pro Display';color: #333333;padding: 3px 10px;background-color: #E1E2E4;margin-right: 5px;margin-bottom: 10px;text-decoration: none;}
.list li>a:hover{color: #2F80ED;text-decoration: underline;}

#num>span{width: 38px;left: -20px;}
#num>a{margin-bottom: 0;}

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
.list::-webkit-scrollbar{
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: #f5f5f5;
}
/*定义滑块，内阴影及圆角*/
.list::-webkit-scrollbar-thumb{
    /*width: 10px;*/
    height: 20px;
    border-radius: 3px;
    background-color: #BDBDBD;
}

@media screen and (max-width: 450px){
	.top h1{font-size: 28px;}
}

@media screen and (max-width: 1440px){
	.container{width: auto;}
}