/* 初始化样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 字体设置 */
body {
    font-family: "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
    font-size: 16px;
    color: #333;
    background-image: url(http://www.figma.net.cn/assets/images/bg.png);
    position: relative;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
}

p{
    color:#6a6a6a;
}

/* 链接样式 */
a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #666;
}

/* 列表样式 */
ul,
ol {
    list-style: none;
}

/* 表单样式 */
input,
textarea,
button,
select {
    font-family: inherit;
    font-size: inherit;
    outline: none;
    border: none;
}

/* 图片样式 */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* 清除浮动 */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

@-webkit-keyframes MoveUpDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-30px);
    }
}

@keyframes MoveUpDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-30px);
    }
}

@-webkit-keyframes MoveLeftRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-10px);
    }
}

@keyframes MoveLeftRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-10px);
    }
}

header{
    padding:30px 0;
}

header nav{
    max-width: 1200px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo{
    display:flex;
    align-items: center;
}

header .logo img{
    width:40px;
}

header .logo span{
    font-size:18px;
    margin-left:10px;
    color:#000;
}

.banner{
    text-align: center;
    padding-bottom:60px;
}

.banner h3{
    font-size:50px;
    padding-top:30px;
    padding-bottom:20px;
}

.banner .banner-button-group{
    display: inline-block;
        position: relative;
        margin:50px 0;
        padding-bottom:30px;
}


.banner .banner-button-group a{
  
     background:#f42290;
    color:#fff;
    border-radius:10px;
    padding:20px 30px;
    font-weight:600;
    margin:0 5px;
    transition: transform .6s ease;
    display: inline-block;
}

.banner .banner-button-group a:first-child{
     background:#2254f4;
}

.banner .banner-button-group a img{
    width:30px;
    margin-top:-5px;
}

.banner .banner-button-group a:hover{
     background: #d21d7a;
    cursor:pointer;
    transform: scale(1.05);
}

.banner .banner-button-group a:first-child:hover {
  
     background: #2651ec;
    cursor: pointer;
    transform: scale(1.05);
}

.banner .banner-image{
    width:1200px;
    margin:0 auto;
}

.banner .banner-image img{
    border-radius:10px;
}

.section{
    background:#fff;
}

.section .container{
    max-width:1200px;
    margin:0 auto;
}

.intro{
    display:flex;
    padding-top:150px;
    max-width: 1200px;
    margin:0 auto;
    padding-bottom:150px;
}

.intro-left{
    width:50%;
}

.intro-left .about-image-card .main-img{
    margin-left: 48px;
    position:relative;
}

.about-image-card .main-img .first{
    top: -50px;
        z-index: 10;
        animation: MoveUpDown 2s linear infinite alternate;
            transition: all 0.5s ease-out;
        position:absolute;
}

.about-image-card .main-img .first img{
        border-radius: 24px;
}

.about-image-card .main-img .second img {
    border-radius: 24px;
    width:300px;
}

.about-image-card .main-img .second{
    right:0;
        bottom: -48px;
            border-radius: 24px;
            box-shadow: 12px 12px 50px 0px rgba(175, 186, 221, 0.2);
            position: absolute;
            animation: MoveLeftRight 2s linear infinite alternate;
}

.about-image-card .main-img .center{
    width: 245px;
        height: 245px;
        background: linear-gradient(180deg, rgba(189, 184, 254, 0.5) 0%, rgba(189, 184, 254, 0) 100%);
        top: 0;
        left: 0;
        transform: translate(50%, 50%);
        border-radius: 50%;
        position:absolute;
}

.intro-right{
    flex:1;
    padding-left:50px;
}

.intro-right h2{
    font-size:35px;
    margin-bottom:20px;
}

.intro-right .intro-right-special{
    padding-top:50px;
}

.intro-right .intro-right-special-item{
    display:flex;
    align-items: center;
    margin-bottom:40px;
}

.intro-right .intro-right-special-item .intro-right-special-icon{
    width:60px;
    height:60px;
    background:#5458d22f;
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius:50%;
}

.intro-right .intro-right-special-item:last-child .intro-right-special-icon{
    background: #ff685444;
}

.intro-right .intro-right-special-item .intro-right-special-icon img{
    width:40px;
}

.intro-right .intro-right-special-item .intro-right-special-info{
    margin-left:10px;
    width:300px;
}

.intro-right .intro-right-special-item .intro-right-special-info p{
    font-size:15px;
}

.edit-section{
    background:#f8f4ff;
}

.edit{
    display:flex;
}

.edit .edit-left{
    width:50%;
}

.edit .edit-left h2{
    font-size: 35px;
        margin-bottom: 20px;
}

.edit .edit-left .edit-left-content{
    width: 400px;
    padding-top:200px;
    padding-bottom:200px;
}

.edit .edit-right{
    position:relative;
        flex: 1;
}

.edit .edit-right .img1{
    border-radius: 10px;
    position:absolute;
    z-index: 2;
    right: 10px;
    top:110px;
}

.edit .edit-right .img2 {
    border-radius: 10px;
    position: absolute;
    z-index: 2;
right: 375px;
    top: 138px;
}

.edit .edit-right .img3{
    position:absolute;
    border-radius: 10px;
    top: 165px;
        left: 70px;
        z-index: 2;
        width: 360px;
        animation: MoveUpDown 2s linear infinite alternate;
            transition: all 0.5s ease-out;
}

.edit-item-list{
    margin-top:60px;
}

.edit-item{
    display:flex;
    align-items: center;
    margin-bottom:20px;
}

.edit-item img{
    width:50px;
}

.edit-item span{
    font-size:18px;
    margin-left:10px;
}

.language{
    display:flex;
    padding-top:80px;
    padding-bottom:80px;
}

.language-left{
    width: 50%;
}

.language-left img{
    border: 2px solid #ddd;
        border-radius: 20px;
        animation: MoveLeftRight 2s linear infinite alternate;
}

.language-right{
    flex:1;
    padding-top:200px;
}

.language-right h2 {
    font-size: 35px;
    margin-bottom: 20px;
}

.download{
    text-align: center;
    background:#2254f4;
    color:#fff;
    padding:50px 0;
}

.download h1{
    font-size:35px;
    margin-bottom:20px;
}

.download .download-button img{
    width:60px;
    margin-top:-5px;
}

.download .download-button span{
    color:#fff;
    font-weight:600;
    margin-left:10px;
    font-size:18px;
}

.download .download-button a{
    border:1px solid #fff;
    display:inline-block;
    border-radius:10px;
    padding:10px 20px;
    margin:0 10px;
}

footer{
    background:#fff;
}

footer p{
    text-align: center;
    font-size:14px;
    padding:10px 0;
}