set-trend-world.scss 3.99 KB
.set-trend-world {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;

    .back {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #000;
        opacity: 0.65;
    }

    .set-content {
        width: 540px;
        height: auto;
        margin-top: 205px;
        margin-left: -270px;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 50%;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        padding-bottom: 35px;

        .banner {
            width: 100%;
            height: 240px;
        }

        .title {
            height: 50px;
            width: 334px;
            background-image: url("img/activity/expand-new/popup-title.png");
            background-size: 100%;
            background-repeat: no-repeat;
            margin: 20px 100px;
        }

        .trend-world-area {
            width: 496px;
            height: 65px;
            background-color: #d2d2d2;
            border-radius: 10px;
            margin-left: 22px;
            color: #fff;
            border: none;
            resize: none;
            line-height: 65px;
            text-align: center;
            font-size: 22px;
            font-weight: 700;
        }

        .explain-title {
            line-height: 60px;
            text-align: center;
            display: inline-block;
            width: 100%;
            font-size: 25px;
            font-weight: 700;
        }

        .explain-main {
            text-align: left;
            width: 430px;
            margin-left: 55px;
            line-height: 36px;
            margin-bottom: 20px;
            height: 0;
            overflow: hidden;
            font-size: 21px;
            font-weight: 700;

            .hide-explain {
                display: block;
                margin: 0 auto;
                width: 21px;
                height: 26px;
                background-image: url("img/activity/expand-new/up.png");
                background-size: 100%;
                background-repeat: no-repeat;
            }
        }

        .show-explain {
            text-align: center;
            color: #949494;

            .down {
                display: block;
                margin: 0 auto;
                width: 21px;
                height: 26px;
                background-image: url("img/activity/expand-new/down.png");
                background-size: 100%;
                background-repeat: no-repeat;
            }
        }

        .btn {
            height: 80px;
            width: 240px;
            margin-left: 20px;
            float: left;
            line-height: 80px;
            text-align: center;
            color: #fff;
            border-radius: 10px;
        }

        .withhold {
            background-color: #252525;
        }

        .set-world {
            background-color: #e00c0b;
        }
    }
}

.set-trend-hide {
    display: none;
}

.dialog-wrapper {
    z-index: 5;

    .dialog-box {
        border-radius: 8px;
    }

    .dialog-content {
        padding: 64px 60px 40px;
    }
}

.my-page {
    .set-content {
        width: 460px;
        margin-top: 134px;
        margin-left: -224px;
        padding-bottom: 29px;

        .banner {
            height: 204px;
        }

        .title {
            height: 43px;
            width: 284px;
            margin: 17px 85px;
        }

        .trend-world-area {
            width: 422px;
            height: 55px;
            margin-left: 18px;
            line-height: 55px;
        }

        .explain-main {
            width: 400px;
            margin-left: 30px;
            line-height: 34px;
            margin-bottom: 17px;

            .hide-explain {
                width: 18px;
                height: 22px;
            }
        }

        .btn {
            height: 58px;
            width: 204px;
            margin-left: 17px;
            line-height: 58px;
        }
    }
}