/*基本*/
a { color: #212529; text-decoration: none; }
    a:hover { color: #0a58ca; }
.text-center { text-align: center; }
.text-right { text-align: right; }

html { font-size: 14px; height: 100%; padding: 0; margin: 0; position: relative; font-family: 'Microsoft YaHei' }
body { padding: 0; margin: 0; /*height: 100%; display: flex; flex-direction: column;*/ }
header { /*border-bottom: 1px solid #dee2e6;*/ min-height: 60px; display: flex; background-color: transparent; position: absolute; width: 100%; }
    header nav { margin: 0; display: flex; justify-content: space-between; }

    header .brand { height: 100px; line-height: 100px; font-size: 1.25rem; color: #fff; }

    header nav ul { height: 100px; list-style: none; padding: 0; margin: 0; display: flex; align-items: stretch; }
        header nav ul li { display: block; }
            header nav ul li a { padding: 0 20px; height: 100px; line-height: 100px; color: #fff; }

    header nav .navbar-left { flex: 1; }

    header .layui-nav.navbar-right { background-color: transparent; color: white; }
        header .layui-nav.navbar-right .layui-nav-item a { color: #333; height: 40px; line-height: 40px; }
        header .layui-nav.navbar-right .layui-nav-item > a { color: white; height: 100px; line-height: 100px; font-size: 16px; }

main { /*flex: 1;*/ }
footer { width: 100%; min-height: 60px; white-space: nowrap; border-top: 1px solid #e5e5e5; display: flex; align-items: center; }

.container { margin: 0 auto; }

/*错误页面*/
.error-page { flex: 1; display: flex; justify-content: center; align-items: center; }
.error-container { position: relative; }
    .error-container .error-info { text-align: center; }

@-webkit-keyframes rotation {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

.rotation { position: absolute; width: 72px; height: 88px; left: 30px; bottom: 200px; -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite; transform-origin: 217% 6%; -moz-transform-origin: 217% 6%; -webkit-transform-origin: 217% 6%; -o-transform-origin: 217% 6%; }


/*宽度自适应*/
@media (min-width: 992px) {
    .container { width: 960px; }
}

@media (min-width: 1200px) {
    .container { width: 1140px; }
}

@media (min-width: 1400px) {
    .container { width: 1320px; }
}

.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }


header { }
.sticky { position: fixed; z-index: 9999; background-color: rgba(255, 255, 255, 0.8); --tw-bg-opacity: 0.8; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); }

.login { padding: 12px 24px; font-size: 16px; background-color: rgba(255, 255, 255, 0.3); border-radius: 8px; }
    .login:hover { background-color: rgba(255, 255, 255, 1); color: black; transition-duration: 300ms; }

.sticky .login { background-color: rgba(48, 86, 211, 1); color: white; }

#home { height: 600px; background-color: rgb(48, 86, 211); padding-top: 160px; }
.top-content-container { color: white; padding-top: 100px; font-size: 36px; }
    .top-content-container .sub { font-size: 20px; color: rgba(228, 228, 228,1); margin-top: 20px; line-height: 25px; }


.features-container { padding-top: 120px; padding-bottom: 70px; }
    .features-container h1 { font-size: 34px; text-align: center; margin-bottom: 40px; }
    .features-container .single-feature { margin-bottom: 10px; padding: 40px 30px; transition: all .3s ease-out 0s; border-radius: 5px }
        .features-container .single-feature:hover { box-shadow: 8px 8px 25px rgba(222,222,222,.5) }
            .features-container .single-feature:hover .feature-icon { background-color: #0fc4a5 }
        .features-container .single-feature .feature-icon { width: 84px; height: 84px; border-radius: 50%; position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; background: #6875e9; color: #fff; font-size: 40px; transition: all .3s ease-out 0s }
            .features-container .single-feature .feature-icon .layui-icon { font-size: 40px; }
        .features-container .single-feature .feature-content h4 { margin-bottom: 15px; font-weight: 500; font-size: 20px; }
        .features-container .single-feature .feature-content p { font-size: 15px }

.feature1-container { background-color: rgb(243 244 254); padding-top: 120px; padding-bottom: 120px; }
    .feature1-container .content-container { color: rgba(0,0,0,.7); padding-top: 100px; font-size: 36px; }
        .feature1-container .content-container .sub { font-size: 20px; margin-top: 20px; line-height: 25px; }

.feature2-container { padding-top: 120px; padding-bottom: 120px; }
    .feature2-container .content-container { color: rgba(0,0,0,.7); padding-top: 100px; font-size: 36px; }
        .feature2-container .content-container .sub { font-size: 20px; margin-top: 20px; line-height: 25px; }

.contact-container { padding-top: 120px; padding-bottom: 120px; position: relative; }
    .contact-container .bg { width: 100%; height: 50%; position: absolute; top: 0; z-index: -1; background-color: rgb(243 244 254); }
    .contact-container .form-container { padding: 60px; box-shadow: 0px 60px 120px -20px #ebeffd; background-color: white; border-radius: 8px; }
        .contact-container .form-container h3 { font-size: 30px; text-align: center; margin-bottom: 32px }
        .contact-container .form-container .mb-6 { margin-bottom: 24px }
        .contact-container .form-container label { display: block; font-size: 14px; color: rgba(0,0,0,.7); }
        .contact-container .form-container input { display: block; width: 100%; border-width: 0; padding-top: 16px; padding-bottom: 16px; font-size: 16px; border-bottom: 1px rgb(241 241 241) solid; }
        .contact-container .form-container textarea { width: 100%; border-width: 0; padding-top: 16px; padding-bottom: 16px; font-size: 16px; border-bottom: 1px rgb(241 241 241) solid; }
        .contact-container .form-container button { padding: 12px 24px; font-size: 16px; border-radius: 8px; background-color: rgba(48, 86, 211, 1); color: white; border-width: 0; }

    .contact-container .content-container .top { font-size: 35px; font-weight: bold; margin-top: 180px; margin-bottom: 150px; }
    .contact-container .content-container .bottom { display: flex; justify-content: space-between; padding: 0 15px; }
        .contact-container .content-container .bottom .single-content { display: flex; width: 330px; }
            .contact-container .content-container .bottom .single-content .layui-icon { font-size: 32px; color: rgba(48, 86, 211, 1); }
            .contact-container .content-container .bottom .single-content .title { font-size: 20px; font-weight: bold; margin-bottom: 24px; }
            .contact-container .content-container .bottom .single-content .content { color: rgb(99 115 129); font-size: 16px; margin-bottom: 5px; }