.official-box{
    margin:35px 0;
    background:#eef8f3;
    border:1px solid #d6eadf;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}



.official-header{
    background:linear-gradient(135deg,#198754,#157347);
    color:#fff;
    padding:18px 22px;
    font-size:24px;
    font-weight:700;
    text-align:center;
    position:relative;
}

.official-header::bef6ore{
    content:"????";
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    font-size:28px;
}



.official-notice{
    padding:25px;
    text-align:center;
    font-size:19px;
    color:#374151;
    line-height:2;
}



.official-links{
    padding:0 20px 25px;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.official-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:18px;

    background:linear-gradient(135deg,#198754,#157347);

    color:#fff;
    text-decoration:none;
    font-size:21px;
    font-weight:700;

    border-radius:16px;

    transition:.25s;
    box-shadow:0 8px 18px rgba(25,135,84,.28);
}

.official-link:nth-child(even){

    background:linear-gradient(135deg,#8fd3b6,#74c69d);
    color:#173b2d;

}

.official-link:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 24px rgba(0,0,0,.18);

}

.official-link::be2fore{

    content:"????";

    font-size:24px;

}

.official-link::af5ter{

    content:"↗";

    margin-right:auto;

    font-size:22px;

}


.videos-box{
    margin:35px 0;
    background:#fff8ef;
    border:1px solid #ffe2b8;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.videos-header{
    background:linear-gradient(135deg,#ff8a00,#ff6b00);
    color:#fff;
    padding:18px 22px;
    text-align:center;
    font-size:24px;
    font-weight:700;
    position:relative;
}

.videos-header::bef4ore{

    content:"????";

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    font-size:28px;

}

.videos-notice{

    padding:25px;

    text-align:center;

    color:#555;

    line-height:2;

    font-size:18px;

}

.videos-links{

    padding:0 20px 25px;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.video-link{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:18px;

    background:linear-gradient(135deg,#ff8a00,#ff6b00);

    color:#fff;

    text-decoration:none;

    font-size:21px;

    font-weight:700;

    border-radius:16px;

    transition:.25s;

    box-shadow:0 8px 18px rgba(255,107,0,.25);

}

.video-link:nth-child(even){

    background:linear-gradient(135deg,#ffd166,#ffb703);

    color:#6b3b00;

}

.video-link:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 24px rgba(0,0,0,.18);

}

.video-link::before{

    content:"▶";

    font-size:24px;

}

.video-link::after{

    content:"↗";

    margin-right:auto;

    font-size:22px;

}