@charset "UTF-8";



/*   diva03 섹션 시작. */
.diva03 { 
    width:100%;  
    position: relative;
    padding-block:var(--space-section-y);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
}

.diva03-title { 
    font-size:var(--wb-font-h3); 
    font-weight:var(--wb-font-weight-black); 
    text-align: center; 
    margin-bottom: var(--space-section-title);
}
.diva03-sub-text01 { 
    font-size:var(--wb-font-text); 
    font-weight:var(--wb-font-weight-regular);  
    text-align: center; 
}


.diva03-visual {
    position: relative;
    width:100%;
    min-height: clamp(42rem, 48vw, 68rem);
    margin-top:6rem;
    overflow: hidden;

}

.diva03-visual__img { 
    position: absolute;
    inset: 0;
    z-index: 1;

}

.diva03-visual__img img { 
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}

.diva03-visual__mobile { 
    display:none; 
}

.diva03-visual__hero { 
    width:min(92%, 1000px); 
    position: absolute;
    z-index: 100;
    top: 50%; 
    left: 50%; 
    transform: translate3d(-50%, -50%, 0);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size:var(--wb-font-h2); 
    font-weight:var(--wb-font-weight-black); 
    color:var(--wb-font-hero-color);
    line-height: 1;

}


.diva03-title02 { 
    width:min(92%, 1000px); 
    margin-inline:auto;
    margin-top:6rem;
    margin-bottom: var(--space-section-content);

    font-size:var(--wb-font-h3); 
    font-weight:var(--wb-font-weight-black); 
    line-height:var(--wb-line-title);
    text-align: center; 
    z-index: 100;
}

.diva03-sub-text02 { 
    width:min(92%, 1000px);
    margin-inline:auto;

    font-size:var(--wb-font-text); 
    font-weight:var(--wb-font-weight-regular); 
    line-height:var(--wb-line-text);
    text-align: center;
    z-index: 100;
}










/* ================responsive web design area ==============
============================================================ */
@media screen and ( max-width:550px ) {
    .diva03-visual__hero{
        text-align: center;
    }

}


@media screen and ( max-width:450px ) {
    .diva03-visual__mobile {
        display: block;
    }
    .diva03-visual__img{
        display: none;
    }

    .diva03-visual{
        min-height: clamp(26rem, 40vw, 50rem);
    }

    .diva03-visual__hero{
        text-align: center;
        width:min(80%, 1000px);
    }

    .diva03-sub-text01{
        width:min(92%, 640px);
        line-height: 1.4;
    }

}