/* ============================================
   板鸭之家 App 下载落地页（手机版 + 电脑版合并）
   断点：<768px 显示手机版布局，≥768px 显示电脑版布局
   ============================================ */

/* ---------- 基础重置 ---------- */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    color: #666;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img {
    border: 0;
    max-width: 100%;
}

a {
    text-decoration: none;
}

p {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- rem 基准字号：随视口宽度缩放 ---------- */
html {
    font-size: 62.5%;
}

@media screen and (min-width: 320px) { html { font-size: 312.5%; } }
@media screen and (min-width: 360px) { html { font-size: 351.5625%; } }
@media screen and (min-width: 375px) { html { font-size: 366.211%; } }
@media screen and (min-width: 400px) { html { font-size: 390.625%; } }
@media screen and (min-width: 414px) { html { font-size: 404.2969%; } }
@media screen and (min-width: 440px) { html { font-size: 429.6875%; } }
@media screen and (min-width: 480px) { html { font-size: 468.75%; } }
@media screen and (min-width: 520px) { html { font-size: 507.8125%; } }
@media screen and (min-width: 540px) { html { font-size: 527.34375%; } }
@media screen and (min-width: 560px) { html { font-size: 546.875%; } }
@media screen and (min-width: 600px) { html { font-size: 585.9375%; } }
@media screen and (min-width: 640px) { html { font-size: 625%; } }
@media screen and (min-width: 680px) { html { font-size: 664.0625%; } }
@media screen and (min-width: 720px) { html { font-size: 703.125%; } }
@media screen and (min-width: 760px) { html { font-size: 742.1875%; } }

@media screen and (min-width: 768px) {
    /* 电脑版：768px~1440px 之间字号随视口宽度连续缩放 */
    html { font-size: clamp(118px, 11.02vw + 33.43px, 192px); }
}

/* ============================================
   手机版布局（默认显示）
   ============================================ */

.layout-mobile {
    height: 100%;
    width: 100%;
}

.layout-mobile section {
    text-align: center;
    overflow: hidden;
    position: relative;
}

.layout-mobile .app-logo .logo {
    margin: 1rem auto 0;
    position: relative;
}

.layout-mobile .app-logo .logo img.fg {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.35rem;
    border: 1px solid #ddd;
    padding: 4px;
}

.layout-mobile .app-intro {
    text-align: center;
    margin-top: 0.24rem;
}

.layout-mobile .app-intro .h1 {
    font-size: 0.4rem;
    line-height: 0;
    font-weight: normal;
    color: #111111;
}

.layout-mobile .app-intro .h2 {
    font-size: 0.3rem;
    line-height: 1.45;
    font-weight: 400;
    white-space: pre-line;
    color: #969696;
    margin-top: 0.4rem;
}

.layout-mobile .download {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin: 0.504rem 0 0.8rem;
}

.layout-mobile .btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.11rem;
    width: 3.1rem;
    padding: 0.25rem 0;
    border: 1px solid transparent;
    border-radius: 0.2rem;
    line-height: 1;
    font-size: 0.28rem;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.layout-mobile .btn-download.android {
    color: #3ddc84;
    border-color: #3ddc84;
}

.layout-mobile .btn-download.android:active {
    color: #fff;
    background-color: #3ddc84;
}

.layout-mobile .btn-download.apple {
    color: #1d1d1f;
    border-color: #1d1d1f;
}

.layout-mobile .btn-download.apple:active {
    color: #fff;
    background-color: #1d1d1f;
}

.layout-mobile .btn-download i {
    font-size: 0.32rem;
    line-height: 1;
}

.layout-mobile .app-screenshot {
    margin: 0 auto;
    padding-bottom: 1.2rem;
}

.layout-mobile .app-screenshot img.cover {
    width: 3.6rem;
    position: relative;
    z-index: 1;
}

.layout-mobile .app-screenshot .bg {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.tips {
    width: 90%;
    margin: 0 auto;
    padding: 10px 20px 20px;
    line-height: 2;
    color: #bbb;
    font-size: 15px;
    text-align: center;
}

.tips a {
    color: #999;
    text-decoration: none;
}

/* ============================================
   微信内打开提示
   ============================================ */

.wechat-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
}

.wechat-overlay.show {
    display: block;
}

.wechat-dialog {
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background: #fff;
}

.wechat-dialog h1 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #292929;
}

.wechat-dialog div {
    color: #494949;
}

.wechat-highlight {
    color: #1da053;
}

.wechat-arrow {
    position: absolute;
    top: 30px;
    right: -10px;
    width: 150px;
    height: 60px;
    border: 2px dashed rgba(0, 0, 0, 0);
    border-radius: 50%;
    border-bottom-color: #000;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.wechat-arrow:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid;
    bottom: -2px;
    right: 2px;
    border-left-color: rgba(0, 0, 0, 0);
    border-top-color: rgba(0, 0, 0, 0);
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
}

/* ============================================
   电脑版布局（≥768px 显示）
   ============================================ */

.layout-desktop {
    display: none;
}

@media screen and (min-width: 768px) {
    .layout-mobile {
        display: none;
    }
    .layout-desktop:not([hidden]) {
        display: block;
    }
}

.layout-desktop section {
    text-align: center;
    box-sizing: border-box;
    background: #fff;
    position: relative;
    padding: 0;
    /*margin-top: 1.33rem;*/
}

.layout-desktop section .content {
    margin: 0 auto;
    height: 102%;
    position: inherit;
}

.layout-desktop section .content > * {
    position: relative;
    z-index: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 0 100%;
    -moz-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
}

.layout-desktop section .content .childpic {
    height: 80%;
    display: block;
    margin: 0 auto;
}

.layout-desktop section .content .bg {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    height: 102%;
}

.layout-desktop section .tit {
    margin-bottom: 0.1rem;
    font-size: 0.24rem;
    line-height: 1.2;
    color: #54b747;
}

.layout-desktop section .con {
    font-size: 0.12rem;
    line-height: 1.5;
    letter-spacing: 0;
    color: #969696;
    margin-bottom: 0.52rem;
}

.layout-desktop section.first {
    position: relative;
    margin-top: 0.15rem;
}

.layout-desktop section.first .content {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    left: -5%;
    justify-content: center;
}

.layout-desktop section.first .cover {
    height: 100%;
    flex: unset;
    transform: translateY(18px);
}

.layout-desktop section.first .intro {
    position: relative;
    top: -10%;
    margin-left: 5%;
    height: 2rem;
    width: 42%;
    box-sizing: border-box;
    white-space: nowrap;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0;
    -moz-flex: 0;
    -ms-flex: 0;
    flex: 0;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-align-content: center;
    -moz-align-content: center;
    align-content: center;
    -ms-flex-line-pack: center;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column;
}

.layout-desktop section.first .intro p {
    white-space: nowrap;
}

.layout-desktop section.first .tit {
    margin-bottom: 0;
    font-size: 0.14rem;
    white-space: nowrap;
    color: #292929;
}

.layout-desktop section.first .tit span {
    font-size: 0.15rem;
}

.layout-desktop section.first .con {
    font-size: 0.1rem;
    line-height: 0.18rem;
    margin-bottom: 0.083rem;
    white-space: nowrap;
}

.layout-desktop section.first .info {
    margin-bottom: 0.15rem;
}

.layout-desktop section.first .logo {
    width: 0.65rem;
    margin-bottom: 0.083rem;
    display: block;
    border-radius: 0.14rem;
    border: 1px solid #ddd;
    padding: 4px;
}

.layout-desktop section:last-child .content {
    -webkit-align-content: flex-start;
    -moz-align-content: flex-start;
    align-content: flex-start;
    -ms-flex-line-pack: start;
}

.layout-desktop .active .tit {
    -webkit-animation: fadeInDown 1s linear both;
    -moz-animation: fadeInDown 1s linear both;
    animation: fadeInDown 1s linear both;
}

.layout-desktop .active .con {
    -webkit-animation: fadeInDown 1s linear both;
    -moz-animation: fadeInDown 1s linear both;
    animation: fadeInDown 1s linear both;
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.layout-desktop .pin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.14rem;
    color: #9b9b9b;
    font-size: 0.09rem;
    margin-bottom: 0.02rem;
}

.layout-desktop .qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
}

.layout-desktop .qr-item p {
    line-height: 1;
}

.layout-desktop .qr-item canvas,
.layout-desktop .qr-item img {
    width: 0.8rem;
    height: 0.8rem;
}

.layout-desktop .download {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    white-space: nowrap;
    margin-top: 0.12rem;
    min-width: max-content;
}

.layout-desktop .btn-download {
    display: inline-flex;
    align-items: center;
    gap: 0.06rem;
    padding: 0.075rem 0.13rem;
    border: 1px solid transparent;
    border-radius: 0.08rem;
    color: #fff;
    font-size: 0.105rem;
    line-height: 1;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.layout-desktop .btn-download.android {
    color: #3ddc84;
    border-color: #3ddc84;
}

.layout-desktop .btn-download.android:hover {
    color: #fff;
    background-color: #3ddc84;
}

.layout-desktop .btn-download.apple {
    color: #1d1d1f;
    border-color: #1d1d1f;
}

.layout-desktop .btn-download.apple:hover {
    color: #fff;
    background-color: #1d1d1f;
}

.layout-desktop .btn-download i {
    font-size: 0.14rem;
    line-height: 1;
}

.layout-desktop .copyright .btn-download {
    padding: 0.075rem 0.13rem;
    font-size: 0.105rem;
}

.layout-desktop .copyright .btn-download i {
    font-size: 0.14rem;
}

.layout-desktop .copyright {
    width: 100%;
    /*padding-top: 0.5rem;*/
    padding-bottom: 0.12rem;
    color: #a7a7a7;
    font-size: 0.08rem;
}

.layout-desktop .copyright p {
	padding: 60px 0 0 0;
	color: #bbb;
	font-size: 14px;
}

.returntop {
    display: none;
    height: 0.22rem;
    width: 0.23rem;
    background: url(../img/backtop.png) no-repeat;
    background-size: auto 100%;
    position: fixed;
    bottom: 0.2rem;
    right: 0.3rem;
    cursor: pointer;
    z-index: 10;
}

/* ---------- 入场动画 ---------- */
@-webkit-keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); }
    100% { opacity: 1; -webkit-transform: none; transform: none; }
}

@-moz-keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); }
    100% { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); }
    100% { opacity: 1; -webkit-transform: none; transform: none; }
}