.top-image {
    height: 570px;
    background-color: var(--redPorpose);
    text-align:center;
    position:relative;
}

.top-image-slide {
    position: absolute;
    bottom: 0px;
    left: 50%;
    -moz-transform: translateY(40%) translateX(-50%);
    -ms-transform: translateY(40%)translateX(-50%);
    -o-transform: translateY(40%)translateX(-50%);
    -webkit-transform: translateY(40%)translateX(-50%);
    transform: translateY(40%) translateX(-50%);
}

.top-image-slide img
{
    width:296px;
    height:341px;
}

    .top-image-slide div {
        width: 190px;
    }

.top-image .logo-image {
    width: 234px;
}



.purpose-detail-container {
    max-width: 630px;
    margin: 0 auto;
}

.magazine-photo {
    width: 328px;
    min-width: 328px;
    height: 328px;
    background-position: center;
    background-size: cover;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    border-radius: 32px;
    position: relative;
    margin-bottom: 30px;
}

.magazine-photo-container {
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    border-radius: 32px;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: transparent linear-gradient(0deg, #16151500 20%, #161515 100%) 0% 0% no-repeat padding-box;
}

.magazine-text-container {
    margin-left: 27px;
}

.magazine-text-content {
    height: 138px;
    overflow: hidden;
}

.magazine-user-photo {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 54px;
    height: 54px;
    -moz-border-radius: 500px;
    -webkit-border-radius: 500px;
    border-radius: 500px;
    border: solid 2px var(--grayMiddle);
    background-position: center;
    background-size: cover;
}

.magazine-user-name {
    position: absolute;
    top: 18px;
    left: 86px;
    height: 54px;
}

.magazine-emoji {
    position: absolute;
    bottom: 18px;
    right: 18px;
    font-size: 35px;
}

.magazine-left {
    padding-right: 61px;
}

.magazine-right {
    padding-left: 61px;
}

.max-h-70 {
    max-height: 70px;
    overflow-y: hidden;
}

.max-h-40 {
    max-height: 40px;
    overflow-y: hidden;
}

.com-btn-type {
    border: solid 1px var(--mainBlack);
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    border-radius: 24px;
    padding-left: 25px;
    padding-right: 25px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    margin-left: 18px;
    cursor: pointer;
}

    .com-btn-type[data-sel='1'] {
        background-color: var(--mainBlack);
        color: white;
    }

.com-btn-type-first {
    margin-left: 0px;
}

.purpose-box
{
    position:relative;
    width:100%;
    padding-bottom:50%;
    height:0;
    margin-bottom:36px;
}

.purpose-box-content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    
    background-color:#161515;
    background-position:bottom;
    background-size:cover;

    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    border-radius: 35px;
}

.purpose-btn {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;  
}

    .purpose-btn div {
        padding: 6px 27px 6px 27px;
        background-color: white;
        -moz-border-radius: 35px;
        -webkit-border-radius: 35px;
        border-radius: 35px;
    }

    .purpose-text {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 80px;
        
    }

        .purpose-text div {
            padding: 6px 27px 6px 27px;
            background-color: white;
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius: 15px;
        }

.purpose-back-title
{
    background-image:url("/images/purpose.png");  
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}

    .purpose-back-title div {
        padding-top:15px;
        height: 130px;
    }

.proof-box
{
    width:350px;
}