﻿.launch-main {
    margin: 0;
    padding: 0;
    min-width: 100%;
    min-height: 100%;
    background-image: linear-gradient(to bottom, #46cddb, #fff);
}

.launch-main .launch-container {
    position: relative;
    width: 90%;
    margin: 0 5%;
    z-index: 1000;
}

.launch-main .launch-container:after {
    padding-top: 100%;
    content: "";
    display: block;
}

/* 背景圖維持置中 */
.launch-main .launch-container .background-image {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

/* 兩個按鈕的共同樣式 */
.launch-main .launch-container .button {
    position: absolute;
    /* ⭐ 改用 top 來抓在手機底部附近 */
    top: 96%;                  /* 位置大約在手機下緣，可依實際畫面微調 75~82% */
    left: 46%;
    transform: translate(-50%, -50%);
    width: auto;               /* 讓按鈕依圖片寬度 */
    display: none;             /* JS 決定顯示哪一個 */
}

/* 圖片大小控制在「像按鈕」的尺寸 */
.launch-main .launch-container .button img {
    width: 200px;              /* 你覺得太大就改 180 或 160 */
    max-width: 70vw;           /* 小手機自動縮 */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    cursor: pointer;
}

/* LOGO 保持原本設定即可 */
.launch-main .launch-container .product-logo {
    position: absolute;
    width: 100%;
    height: 24px;
}

.launch-main .launch-container .product-logo:after {
    padding-top: 100%;
    content: "";
    display: block;
}

.launch-main .launch-container .product-logo img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    cursor: pointer;
}


/* ====== launch bar 共用樣式 ====== */

.launch-warn {
    width: 100%;
    background: -webkit-linear-gradient(left,#4D98E9,#5166F5);
    background: -o-linear-gradient(right,#4D98E9,#5166F5);
    background: -moz-linear-gradient(right,#4D98E9,#5166F5);
    background: linear-gradient(to right,#4D98E9,#5166F5);
    z-index: 1000;
    display: none;              /* 一開始隱藏，JS 再 show() */
    color: #fff;
    font-size: 14px;
}

/* 容器：讓內容垂直置中，看起來不會扁 */
.launch-warn .launch-warn-container {
    width: 100%;
    min-height: 56px;           /* 高度拉高一點 */
    display: table;
}

.launch-warn .col {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

/* 左邊 X 區塊 */
.launch-warn .launch-warn-close {
    width: 40px;
    text-align: center;
    cursor: pointer;
    font-size: 22px;          /* X 的大小 */
    line-height: 1;
    color: #fff;              /* 白色 X */
}

/* 如果你想要圓圈框起來，可以加這段，想簡單就可以拿掉 */
.launch-warn .launch-warn-close {
    display: table-cell;
    vertical-align: middle;
}

/* 中間白線 */
.launch-warn .launch-warn-dividing-line {
    background-color: rgba(255,255,255,.7);
    height: 100%;
    font-size: 1px;
    width: 1px;
}

/* 右邊內容區 */
.launch-warn .launch-warn-content {
    padding: 6px 8px;
    text-align: left;
}

.launch-warn .launch-warn-content .launch-warn-content-table {
    width: 100%;
    display: table;
}

.launch-warn .launch-warn-content .launch-warn-content-table .logo {
    width: 10%;
}

.launch-warn .launch-warn-content .launch-warn-content-table .logo img {
    height: 32px;
    margin: 0 6px 0 2px;
}

.launch-warn .launch-warn-content .launch-warn-content-table .content {
    width: 60%;
    text-align: left;
}

/* Open 按鈕容器 */
.launch-warn .launch-warn-content .launch-warn-content-table .button {
    width: 30%;
    text-align: right;
}

/* Open 實際按鈕 */
.launch-warn .launch-open-btn {
    display: inline-block;
    padding: 6px 18px;
    margin-right: 6px;
    -webkit-border-radius: 42px;
    border-radius: 42px;
    border: 1px #C9C9C9 solid;
    background-color: #fff;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
}

/* ====== 手機模式：懸浮底部 ====== */
@media (max-width: 992px) {
    .launch-warn {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

/* 桌機下強制不顯示（雙重保險） */
@media (min-width: 993px) {
    .launch-warn {
        display: none !important;
    }
}
