.gift-box {
    margin-left: 16px;
    position: relative;
    width: 30px;
    height: 30px;
}
.sp-header-mob .gift-box {
    order: -1;
}
.gift-box-icon {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1Ljk3MTEgMTQuMjI1TDIyLjkzMzYgMTMuMTE4N0MyMi44Mzk4IDEzLjA4MTIgMjIuNzI3MyAxMy4wNjI1IDIyLjYxNDkgMTMuMDYyNUgzLjE1MjM1QzIuNjI3MjggMTMuMDYyNSAyLjIxNDg0IDEzLjQ3NDkgMi4yMTQ4NCAxNFYyNy4xODc1QzIuMjE0ODQgMjguNzQzNyAzLjQ3MTAzIDMwIDUuMDI3MzUgMzBIMjMuNzc3NEMyNS4zMzM3IDMwIDI2LjU4OTkgMjguNzQzNyAyNi41ODk5IDI3LjE4NzVWMTUuMTA2MkMyNi41ODk5IDE0LjcxMjUgMjYuMzQ2MSAxNC4zNTYyIDI1Ljk3MTEgMTQuMjI1WiIgZmlsbD0iIzA0NzdDQiIvPgo8cGF0aCBkPSJNMjYuNTg5OSAxNS4xMDYyVjI3LjE4NzVDMjYuNTg5OSAyOC43NDM3IDI1LjMzMzcgMzAgMjMuNzc3NCAzMEgxNC40MDIzVjEzLjA2MjVIMjIuNjE0OUMyMi43Mjc0IDEzLjA2MjUgMjIuODM5OSAxMy4wODEyIDIyLjkzMzUgMTMuMTE4N0wyNi4wMDAxIDEzLjVDMjYuMzc1MSAxMy42MzEyIDI2LjU4OTkgMTQuNzEyNSAyNi41ODk5IDE1LjEwNjJaIiBmaWxsPSIjMDQ2OEIwIi8+CjxwYXRoIGQ9Ik0xMS41ODk4IDEzLjA2MjVWMzBIMTcuMjE0OVYxMy4wNjI1SDExLjU4OThaIiBmaWxsPSIjRkNCRjI5Ii8+CjxwYXRoIGQ9Ik0xNy4yMTQ4IDEzLjA2MjVIMTQuNDAyM1YzMEgxNy4yMTQ4VjEzLjA2MjVaIiBmaWxsPSIjRkU5OTIzIi8+CjxwYXRoIGQ9Ik0yMS45NjkgMi4zMjk3MUMyMS4yMzg2IDEuMjE3NDQgMjAuMDE3NSAwLjU4MDQ3MSAxOC42ODkxIDAuNjE5NDY3QzE3LjM4NDIgMC42Njk5MTYgMTYuMjIxNSAxLjM4NjY5IDE1LjYxMjggMi41NjE3NkwxNC4yNjA5IDUuMDc5OTJMMTIuODk0NCAyLjUyMjY2QzEyLjI2MSAxLjM1NTYxIDExLjExMTUgMC41OTMxMjUgOS43Nzk2NSAwLjUxMzk2M0M5LjUyMzkzIDAuNTA2MTc0IDkuMjc0NTggMC41MTYwOSA5LjAzNzkgMC41NjEyOTZDOC4wMjA1MSAwLjcwNzc1OSA3LjExNDQ5IDEuMjcyNDUgNi41Mzc0OCAyLjE1NzI5QzUuNzY1NDcgMy4zMTE0IDUuNzAwNjUgNC44MDkwNyA2LjM0MjEzIDYuMDUyODZDNy4wMDA5NyA3LjI5MDQ3IDguMjYxOTYgOC4wOTI1MSA5LjY0Mzc2IDguMDk0MDNMMTEuNzUyIDguMTEzNDNMMTQuMzU0MyA4LjE1NDUxQzE0LjM3MTUgOC4xNDgzMiAxNC4zNzE1IDguMTQ4MzIgMTQuMzcxNSA4LjE0ODMyTDE4Ljg5MDYgOC4yMTc3NEMxOS4zMzc2IDguMjE2NTcgMTkuNzc2NSA4LjEzODYgMjAuMTcyOCA3Ljk5NjE4QzIxLjAxNzEgNy42OTI3MyAyMS43Mjk5IDcuMDc3ODEgMjIuMTY5MSA2LjI0MjYzQzIyLjgxNjggNS4wMTM2NCAyMi43NDIxIDMuNTA2MyAyMS45NjkgMi4zMjk3MVoiIGZpbGw9IiNGRTk5MjMiLz4KPHBhdGggZD0iTTIwLjE3MjcgNy45OTY0QzIxLjAxNyA3LjY5Mjk3IDIxLjcyOTkgNy4wNzgwMiAyMi4xNjkgNi4yNDI4NUMyMi44MTY5IDUuMDEzODQgMjIuNzQyMSAzLjUwNjQ5IDIxLjk2OSAyLjMyOTg3QzIxLjIzODUgMS4yMTc2MiAyMC4wMTc0IDAuNTgwNjI4IDE4LjY4OSAwLjYxOTYyNEMxNy4zODQyIDAuNjcwMDczIDE2LjIyMTUgMS4zODY4NSAxNS42MTI3IDIuNTYxOTFMMTQuMjYwOCA1LjA4MDA3TDE0LjM3MTQgOC4xNDg1M0wxOC44OTA1IDguMjE3OTZDMTkuMzM3NiA4LjIxNjc2IDE5Ljc3NjUgOC4xMzg4IDIwLjE3MjcgNy45OTY0WiIgZmlsbD0iI0ZFODgyMSIvPgo8cGF0aCBkPSJNMjguMTA2OCA5LjE3NjgxTDI4LjEyNzMgMTIuOTE1MkMyOC4xMTYzIDEzLjMxNzYgMjcuODY1IDEzLjY0NyAyNy41MjA0IDEzLjc3MDhDMjcuNDE3IDEzLjgwOCAyNy4zMDczIDEzLjgyNzUgMjcuMjA4NSAxMy44MjMyTDE3LjEwODUgMTMuNzA3MkwxNS4zMTU4IDExLjI2MzJMMTMuMzM5NiAxMi41MzEyTDExLjYwMjkgMTMuNjUzNUwxLjUwMjgyIDEzLjUzNzVDMC45OTE0NTUgMTMuNTIyMSAwLjU4MzYwNiAxMy4wOTA4IDAuNTgwMDg3IDEyLjU5MzlMMC41NzY4NCA4Ljg0OTVDMC41NTk4NjEgOC4wOTg0OSAwLjg1MjA3NyA3LjM5NTYyIDEuMzY0NTcgNi44NzI3OUMxLjg3NzA3IDYuMzQ5OTcgMi41NzA3NCA2LjA2MDc3IDMuMzE0MjUgNi4wNzI1MUwxMS4wNTA1IDYuMTYxMzVMMTEuNTc5MiA2LjE3MDU0QzExLjU3OTIgNi4xNzA1NCAxNC42ODI4IDguOTYwMzQgMTQuNzM0NiA4Ljk0MTc0QzE0Ljc2OTEgOC45MjkzNCAxNS4zNTc3IDguMjM5NjIgMTUuOTM1NSA3LjU3MzY1QzE2LjUxMzIgNi45MDc4MSAxNy4wODQ3IDYuMjI0MyAxNy4wODQ3IDYuMjI0M0wyNS4zMzIyIDYuMzI4NTlDMjYuMDc1NyA2LjM0MDMzIDI2Ljc3MDIgNi42NDg2OSAyNy4yOTEzIDcuMTc4NjdDMjcuODEyNiA3LjcwODU0IDI4LjEwNyA4LjQxOTY4IDI4LjEwNjggOS4xNzY4MVoiIGZpbGw9IiMxQzhFRTAiLz4KPHBhdGggZD0iTTI4LjEyNyAxMi45MTUxTDI4LjEwNjUgOS4xNzY3NkMyOC4xMDY3IDguNDE5NjQgMjcuODEyMyA3LjcwODQ5IDI3LjI5MSA3LjE3ODYzQzI2Ljc2OTkgNi42NDg2NCAyNi4wNzU0IDYuMzQwMjggMjUuMzMxOSA2LjMyODU0TDE3LjA4NDQgNi4yMjQyNkMxNy4wODQ0IDYuMjI0MjYgMTYuNTEyOCA2LjkwNzc3IDE1LjkzNTIgNy41NzM2MUMxNS4zNTc0IDguMjM5NTcgMTQuNzY4OCA4LjkyOTI5IDE0LjczNDIgOC45NDE3TDE1LjMxNTUgMTEuMjYzMkwxNy4xMDgxIDEzLjcwNzJMMjcuMjA4MiAxMy44MjMyQzI3LjMwNyAxMy44Mjc1IDI3LjQxNjcgMTMuODA4IDI3LjUyMDEgMTMuNzcwOEMyNy44NjQ3IDEzLjY0NyAyOC4xMTU5IDEzLjMxNzYgMjguMTI3IDEyLjkxNTFaIiBmaWxsPSIjMDU1NzkyIi8+CjxwYXRoIGQ9Ik0xMS41Nzg4IDYuMTcwNjFMMTEuNTgyNyA3LjY0MzU2TDExLjYwMjYgMTMuNjUzNkwxMy43NTE1IDEzLjY3ODNMMTYuMTkwNiAxMy42OTg0TDE3LjEwODEgMTMuNzA3M0wxNy4wODQ0IDYuMjI0MzNMMTEuNTc4OCA2LjE3MDYxWiIgZmlsbD0iI0ZDQkYyOSIvPgo8cGF0aCBkPSJNMTcuMTg5MyA2LjIyNDM2TDE3LjIxMyAxMy43MDczTDE2LjE5MDYgMTMuNjk4M0wxNC40MTM5IDEzLjY5ODNMMTQuNDEzOSA3LjQ5OTk5TDE0LjQxMzkgNi4yMjQzNkwxNy4xODkzIDYuMjI0MzZaIiBmaWxsPSIjRkU5OTIzIi8+Cjwvc3ZnPgo=);
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    display: block;
    cursor: pointer;
    position: absolute;
    padding-bottom: 55px;
}

@media screen and (min-width: 1300px) {
    .gift-box {
        width: 23px;
        height: 23px;
    }

    .gift-box-icon {
        width: 23px;
        height: 23px;
    }
}

.gift-box-icon:hover + .gift-box-content {
    visibility: visible;
    opacity: 1;
    transition:visibility 0.5s linear,opacity 0.5s linear;
}

.gift-box-content:hover {
    visibility: visible;
    opacity: 1;
}

.gift-box-icon:after {
    content: attr(data-count);
    position: absolute;
    display: flex;
    font-size: 7px;
    width: 12px;
    height: 12px;
    background-color: #FE9923;
    border-radius: 100%;
    right: -4px;
    border: 1px solid #143554;
    top: 8px;
    color: #313441;
    justify-content: center;
    align-items: center;
}

.gift-box-content {
    position: absolute;
    width: 320px;
    border-radius: 10px;
    background: #162941;
    padding: 24px 16px;
    left: -240px;
    top: 72px;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
}

.gift-box-content:before {
    content: "";
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAzOCAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjM4OTcgMS4wNjg1MUMxOC43ODk3IDAuNTM0NTI3IDE5LjU5MDUgMC41MzQ1MjkgMTkuOTkwNCAxLjA2ODUxTDM3LjQxOTcgMjQuMzM3MUMzNy45MTM2IDI0Ljk5NjQgMzcuNDQzMSAyNS45MzY2IDM2LjYxOTMgMjUuOTM2NkgxLjc2MDhDMC45MzcwMzIgMjUuOTM2NiAwLjQ2NjU3MiAyNC45OTY0IDAuOTYwNDI4IDI0LjMzNzFMMTguMzg5NyAxLjA2ODUxWiIgZmlsbD0iIzE2Mjk0MSIvPgo8L3N2Zz4K);
    background-repeat: no-repeat;
    display: block;
    width: 45px;
    height: 35px;
    position: absolute;
    top: -25px;
    right: 40px;
}

.gift-box-content-title {
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px;
    margin-bottom: 16px;
}

.gift-box-item .title:after {
    content: '';
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxOSAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjY1NDQgOS43NDA5NEw4Ljk3MzQ1IDE1LjI4NjhDNy41MDE1NyAxNi41MDczIDUuMjcwNTEgMTUuNDYyNiA1LjI3MDUxIDEzLjU0ODhWMi40NTIxOUM1LjI3MDUxIDAuNTM4NDQgNy41MDE1NyAtMC41MDg2ODUgOC45NzM0NSAwLjcxNDE5TDE1LjY1NDQgNi4yNjI1N0MxNi43NDMxIDcuMTY1NzUgMTYuNzQ1NSA4LjgzNTM4IDE1LjY1NDQgOS43NDA5NFoiIGZpbGw9IiM0MDk0RTQiLz4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfYl85MDVfMTEzNjcpIj4KPHBhdGggZD0iTTExLjY1NDQgOS43NDA5NEw0Ljk3MzQ1IDE1LjI4NjhDMy41MDE1NyAxNi41MDczIDEuMjcwNTEgMTUuNDYyNiAxLjI3MDUxIDEzLjU0ODhWMi40NTIxOUMxLjI3MDUxIDAuNTM4NDQgMy41MDE1NyAtMC41MDg2ODUgNC45NzM0NSAwLjcxNDE5TDExLjY1NDQgNi4yNjI1N0MxMi43NDMxIDcuMTY1NzUgMTIuNzQ1NSA4LjgzNTM4IDExLjY1NDQgOS43NDA5NFoiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuMzciLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9iXzkwNV8xMTM2NyIgeD0iLTIzLjEyODkiIHk9Ii0yNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUdhdXNzaWFuQmx1ciBpbj0iQmFja2dyb3VuZEltYWdlRml4IiBzdGREZXZpYXRpb249IjEyIi8+CjxmZUNvbXBvc2l0ZSBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0iaW4iIHJlc3VsdD0iZWZmZWN0MV9iYWNrZ3JvdW5kQmx1cl85MDVfMTEzNjciLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2JhY2tncm91bmRCbHVyXzkwNV8xMTM2NyIgcmVzdWx0PSJzaGFwZSIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K);
    background-repeat: no-repeat;
    display: block;
    width: 18px;
    height: 16px;
}

.gift-box-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gift-box-item {
    border-radius: 10px;
    background: #E6EDF9;
    padding: 16px;
    display: flex;
    justify-content: flex-start;
    text-align: left;
}

.gift-box-item .text {
    margin-left: 30px;
}

.gift-box-item:hover {
    text-decoration: none;
}

.gift-box-item .logo {
    width: 59px;
    height: 51px;
    border-radius: 4px;
    position: relative;
}

.gift-box-item .logo img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.gift-box-item .title {
    color: #14253B;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
}

.gift-box-item .bonus {
    color: #4094E4;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    max-width: 185px;
}
.gift-box-item .country-icon {
    position: absolute;
    top: 0;
    right: -10px;
}

.gift-box-item .country-icon:after {
    content: '';
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxNCAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzkwNV8xMTM2MikiPgo8cGF0aCBkPSJNMTMuMzE0NCAxLjA5MDI1QzEzLjE5NSAxLjAxODc2IDEzLjA2MTYgMC45Njk2NzUgMTIuOTIxNyAwLjk0NTc5NEMxMi43ODE4IDAuOTIxOTEyIDEyLjYzODIgMC45MjM3MDUgMTIuNDk5MSAwLjk1MTA2OUMxMi4zNiAwLjk3ODQzMyAxMi4yMjggMS4wMzA4MyAxMi4xMTA4IDEuMTA1MjdDMTEuOTkzNiAxLjE3OTcxIDExLjg5MzUgMS4yNzQ3NCAxMS44MTYxIDEuMzg0OTJMNS43NDU4MiAxMC4wMjE5TDIuNzg1NDMgNy40OTUyNUMyLjY4MDk5IDcuNDA2MSAyLjU1ODU0IDcuMzM2ODIgMi40MjUwOSA3LjI5MTM2QzIuMjkxNjQgNy4yNDU4OSAyLjE0OTc5IDcuMjI1MTQgMi4wMDc2NCA3LjIzMDI3QzEuNzIwNTcgNy4yNDA2NSAxLjQ0OTcyIDcuMzU1ODcgMS4yNTQ2OCA3LjU1MDU4QzEuMDU5NjQgNy43NDUzIDAuOTU2Mzg2IDguMDAzNTUgMC45Njc2MjcgOC4yNjg1NEMwLjk3ODg2OSA4LjUzMzUzIDEuMTAzNjkgOC43ODM1NSAxLjMxNDYzIDguOTYzNThMNS4yMDE2MyAxMi4yODA5QzUuMjAxNjMgMTIuMjgwOSA1LjMxMzIxIDEyLjM2OTYgNS4zNjQ4NSAxMi40MDA2QzUuNDg0MTkgMTIuNDcyMSA1LjYxNzY0IDEyLjUyMTMgNS43NTc1NiAxMi41NDUyQzUuODk3NDggMTIuNTY5MSA2LjA0MTEzIDEyLjU2NzMgNi4xODAzMSAxMi41Mzk5QzYuMzE5NDkgMTIuNTEyNiA2LjQ1MTQ2IDEyLjQ2MDEgNi41Njg2OCAxMi4zODU3QzYuNjg1ODkgMTIuMzExMiA2Ljc4NjA3IDEyLjIxNjEgNi44NjM0NiAxMi4xMDU5TDEzLjYzMzYgMi40NzMyNUMxMy43MTEgMi4zNjMxIDEzLjc2NDIgMi4yMzk5NSAxMy43OTAxIDIuMTEwODJDMTMuODE1OSAxLjk4MTcgMTMuODE0IDEuODQ5MTQgMTMuNzg0NCAxLjcyMDdDMTMuNzU0NyAxLjU5MjI3IDEzLjY5NzkgMS40NzA0OSAxMy42MTczIDEuMzYyMzJDMTMuNTM2NyAxLjI1NDE0IDEzLjQzMzcgMS4xNjE2OSAxMy4zMTQ0IDEuMDkwMjVaIiBmaWxsPSIjMzRBMjAwIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfOTA1XzExMzYyIj4KPHJlY3Qgd2lkdGg9IjEzIiBoZWlnaHQ9IjEyIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC44NzEwOTQgMC42MzExNDkpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);
    display: block;
    width: 13px;
    height: 12px;
    background-repeat: no-repeat;
    position: absolute;
    top: 10px;
    right: -5px;
}

.gift-box-item .country-icon img {
    width: 24px;
    height: 24px;
    display: block;
    border-radius: 100%;
    border: 1px solid #fff;
}

@media screen and (max-width: 480px) {
    .gift-box {
        position: initial;
    }

    .gift-box-content {
        width: calc(100% - 40px);
        right: 0;
        left: 20px;
    }

    .gift-box-item .bonus {
        max-width: 100%;
    }
}