.aboutintro{
    border-bottom: 5px solid var(--accent-color);
}

.aboutintro .abouttitle{
    height: 12vh;
    border-bottom: 5px solid var(--accent-color);
    display: flex;
    align-items: center;
}

.aboutintro .abouttitle h1{
    font-size: 65px;
    font-weight: 800;
    padding-top: 5px;
}

.aboutintro .aboutbrief h2{
    font-size: 40px;
    font-weight: 800;
    margin-top: 20px;
}

.aboutintro .aboutbrief .aboutstickers{
    display: flex;
    justify-content: center;
    margin: 20px 0 20px;
}

.mobilestoreimg img{
    display: none;
}

.aboutintro .aboutbrief .aboutstickers .sticker {
    width: 200px;
    height: 200px;
    margin-left: 30px;
}

.example-1 .sticker-img {
    background-image: url('./about_img/sticker1.png');
    background-size: cover;
}

.example-2 .sticker-img {
    background-image: url('./about_img/sticker2.png');
    background-size: cover;
}

.example-3 .sticker-img{
    background-image: url('./about_img/sticker3.png');
    background-size: cover;
}


.aboutintro .aboutbrief .aboutstickers img:last-child{
    margin-right: 0;
}

.aboutintro .aboutbrief p{
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 20px;
}

@media (max-width: 1024px){

    .aboutintro .abouttitle{
        padding-top: 13vh;
        height: 100%;
    }

    .aboutintro .abouttitle h1{
        font-size: 30px;
        padding: 20px 0;
        overflow: hidden;
    }

    .aboutintro .aboutbrief h2{
        font-size: 25px;
        overflow: hidden;
    }

    .aboutintro .aboutbrief p{
        font-size: 25px;
        overflow: hidden;
    }

    .aboutintro .aboutbrief .aboutstickers .sticker {
        display: none;
    }

    .mobilestoreimg img{
        display: block;
        max-width: 100%;
        border: 0;
        height: auto;
        margin-top: 30px;
    }
}

/* SECTION */
section .aboutlogo{
    border-bottom: 5px solid var(--accent-color);
}

section .aboutlogo .logotitle{
    height: 12vh;
    border-bottom: 5px solid var(--accent-color);
    display: flex;
    align-items: center;
}
section .aboutlogo .logotitle h1{
    font-size: 65px;
    font-weight: 800;
    padding-top: 5px;
}

section .aboutlogo .logobrief img{
    width: 600px;
    height: 200px;
    margin: auto;
    margin-top: 20px;

}
section .aboutlogo .logobrief p{
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 20px;
}

section .aboutcolor{
    border-bottom: 5px solid var(--accent-color);
}
section .aboutcolor .colortitle{
    height: 12vh;
    border-bottom: 5px solid var(--accent-color);
    display: flex;
    align-items: center;
}

section .aboutcolor .colortitle h1{
    font-size: 65px;
    font-weight: 800;
    padding-top: 5px;
}


@media (max-width: 1024px){

    section .aboutlogo .logotitle h1,
    section .aboutcolor .colortitle h1{
        font-size: 30px;
        font-weight: 800;
        overflow: hidden;
    }

    section .aboutlogo .logobrief p{
        font-size: 25px;
        overflow: hidden;
    }

    section .aboutlogo .logobrief img{
        max-width: 100%;
        height: auto;
    }

}

section .aboutcolor .colorwrapper{
    border-bottom: 5px solid var(--accent-color);
    display: flex;
}

section .aboutcolor .colorwrapper .colordetails{

    width: calc(85vw/2);
    height: 300px;
    border-right: 5px solid var(--accent-color);
}

section .aboutcolor .colorwrapper .colordetails span{
    display: block;
    height: calc(300px/3);
    border-bottom: 5px solid var(--accent-color);
    box-sizing: border-box;

}

section .aboutcolor .colorwrapper .colordetails span::after{
    content: '';
    display: block;
    border-bottom: 95px solid #ae5761;
    margin-top: -98px;
    width: 0;
    transition: 0.8s;
}

section .aboutcolor .colorwrapper .colordetails span:hover::after{
    width: 100%;
}

section .aboutcolor .colorwrapper .colordetails span p{
    font-size: 40px;
    font-weight: 800;
    padding: 25px;
}
section .aboutcolor .colorwrapper .colordetails span:hover p{
    color:#fff
}

section .aboutcolor .colorwrapper .colordetails span:nth-child(3){
    border-bottom: 5px solid var(--accent-color);
}

section .aboutcolor .colorwrapper .onecolor{
    width: calc(85vw/2);
    height: 300px;
    background-color: #ae5761;
}

section .aboutcolor .colordiverse .topcolor,
section .aboutcolor .colordiverse .btmcolor{
    display: flex;
}

section .aboutcolor .colordiverse .topcolor{
    border-bottom: 5px solid var(--accent-color);
}

section .aboutcolor .colordiverse p{
    font-size: 40px;
    font-weight: 800;
    padding: 25px;
}

section .aboutcolor .colordiverse .topcolor div,
section .aboutcolor .colordiverse .btmcolor div{
    width: calc(85vw/2);
    height: 300px;
    border-right: 5px solid var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

section .aboutcolor .colordiverse .topcolor div:nth-child(2),
section .aboutcolor .colordiverse .btmcolor div:nth-child(2){
    border: 0;
}

section .aboutcolor .colordiverse .topcolor div:nth-child(1){
    background-color: var(--accent-color);
    color: #fff;
}
section .aboutcolor .colordiverse .topcolor div:nth-child(2){
    background-color: #fff;
    color: #333;
}
section .aboutcolor .colordiverse .btmcolor div:nth-child(1){
    background-color: #fff;
    color: #ae5761;
}

section .aboutcolor .colordiverse .btmcolor div:nth-child(2){
    background-color: #ae5761;
    color: var(--accent-color);
}

@media (max-width: 1024px){

    section .aboutcolor .colorwrapper{
        border-bottom: 5px solid var(--accent-color);
    }
        
    section .aboutcolor .colorwrapper .colordetails{
        width: 100%;
        height: 100%;
        border-right: 0;
    }
        
    section .aboutcolor .colorwrapper .colordetails span{
        height: 50px;
        border-bottom: 5px solid var(--accent-color);
        display: flex;
        align-items: center;
        padding-left: 20px;
    }

    section .aboutcolor .colorwrapper .colordetails span p{
        font-size: 20px;
        padding: 0;
        overflow: hidden;
    }
    section .aboutcolor .colorwrapper .onecolor{
        display: none;
    }
    section .aboutcolor .colorwrapper .colordetails span::after{
        display: none;
    }
    section .aboutcolor .colorwrapper .colordetails span:hover::after{
        display: none;
    }
    section .aboutcolor .colorwrapper .colordetails span:hover p{
        color: #fff
    }
    section .aboutcolor .colorwrapper .colordetails span:hover{
        background-color: #ae5761;
    }

    section .aboutcolor .colorwrapper .colordetails span:nth-child(3){
        border-bottom: none;
    }

    section .aboutcolor .colordiverse .topcolor div,
    section .aboutcolor .colordiverse .btmcolor div{
        width: 100%;
        height: 200px;
        border-right: 5px solid var(--accent-color);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    section .aboutcolor .colordiverse p{
        font-size: 20px;
        padding: 0;
        overflow: hidden;
    }
}