.exchange-widget {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    background: var(--color-blue);
    border-radius: 4px;
}

    .exchange-widget .exchange-widget-box {
        max-width:100%;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 12px 16px;
        background-color: var(--color-white);
        border-radius: 4px;
    }

    .exchange-widget .exchange-title {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 12px;
    }

        .exchange-widget .exchange-title span {
            margin-right: 12px;
            font-size: 16px;
            font-weight: bold;
            color: var(--color-primary);
            white-space: wrap;
        }

    .exchange-widget i {
        padding: 0 6px;
        height: 22px;
        display: flex;
        align-items: center;
        font-size: 11px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        line-height: 1.4;
        white-space: nowrap;
    }

        .exchange-widget i:after {
            content: '';
            display: inline-block;
            width: 10px;
            height: 13px;
            margin-left: 5px;
            background-repeat: no-repeat;
            background-position: center center;
        }

    .exchange-widget .up i {
        color: var(--color-green);
        background-color: rgba(61, 180, 114, 0.1);
    }

    .exchange-widget .down i {
        color: var(--color-red);
        background-color: rgba(213, 19, 23, 0.1);
    }

    .exchange-widget .up i:after {
        background-image: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.63318 4.35982C8.17595 5.01114 7.7128 6 6.86496 6L1.13504 6C0.287204 6 -0.175952 5.01114 0.36682 4.35982L3.23178 0.921864C3.63158 0.44211 4.36843 0.442111 4.76822 0.921865L7.63318 4.35982Z' fill='%233DB472'/></svg>");
    }

    .exchange-widget .down i:after {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        background-image: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.63318 4.35982C8.17595 5.01114 7.7128 6 6.86496 6L1.13504 6C0.287204 6 -0.175952 5.01114 0.36682 4.35982L3.23178 0.921864C3.63158 0.44211 4.36843 0.442111 4.76822 0.921865L7.63318 4.35982Z' fill='%23D51317'/></svg>");
    }

    .exchange-widget .exchange-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .exchange-widget .exchange-item span {
            display: block;
            margin-bottom: 5px;
            font-size: 11px;
            font-weight: bold;
            color: rgb(6 40 73 / 40%);
        }

        .exchange-widget .exchange-item p {
            font-size: 17px;
            font-weight: bold;
            color: var(--color-primary);
            white-space: nowrap;
        }

    .exchange-widget .up .exchange-item p {
        color: var(--color-green);
    }

    .exchange-widget .down .exchange-item p {
        color: var(--color-red);
    }

    .exchange-widget .exchange-widget-box.second .exchange-item:nth-child(3),
.exchange-widget .exchange-widget-box.second .exchange-item.hour {border-color: transparent;}
.exchange-widget .exchange-widget-box.second{justify-content: flex-end;contain: layout;align-items: flex-start;padding-bottom: 40px;}
.exchange-widget .exchange-widget-box.second .exchange-item{border-right: 1px solid #EAEAF3;padding-right: 10px;}
.exchange-widget .exchange-widget-box .exchange-item.hour{ bottom: 6px; right: 0; position: absolute; flex: 0; padding: 4px 8px; height: 24px;}
.exchange-widget .exchange-widget-box .exchange-item.hour p {display: flex;gap:4px;font-size: 14px;}
.exchange-widget .exchange-widget-box .exchange-item.hour p:before{background-repeat: no-repeat; background-position: center; background-size: contain; width: 14px; height: 14px; content: " "; flex-shrink: 0;
background-image: url("data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.86667 9.8L9.8 8.86667L7.33333 6.4V3.33333H6V6.93333L8.86667 9.8ZM6.66667 13.3333C5.74444 13.3333 4.87778 13.1583 4.06667 12.8083C3.25556 12.4583 2.55 11.9833 1.95 11.3833C1.35 10.7833 0.875 10.0778 0.525 9.26667C0.175 8.45555 0 7.58889 0 6.66667C0 5.74444 0.175 4.87778 0.525 4.06667C0.875 3.25556 1.35 2.55 1.95 1.95C2.55 1.35 3.25556 0.875 4.06667 0.525C4.87778 0.175 5.74444 0 6.66667 0C7.58889 0 8.45555 0.175 9.26667 0.525C10.0778 0.875 10.7833 1.35 11.3833 1.95C11.9833 2.55 12.4583 3.25556 12.8083 4.06667C13.1583 4.87778 13.3333 5.74444 13.3333 6.66667C13.3333 7.58889 13.1583 8.45555 12.8083 9.26667C12.4583 10.0778 11.9833 10.7833 11.3833 11.3833C10.7833 11.9833 10.0778 12.4583 9.26667 12.8083C8.45555 13.1583 7.58889 13.3333 6.66667 13.3333ZM6.66667 12C8.14444 12 9.40278 11.4806 10.4417 10.4417C11.4806 9.40278 12 8.14444 12 6.66667C12 5.18889 11.4806 3.93056 10.4417 2.89167C9.40278 1.85278 8.14444 1.33333 6.66667 1.33333C5.18889 1.33333 3.93056 1.85278 2.89167 2.89167C1.85278 3.93056 1.33333 5.18889 1.33333 6.66667C1.33333 8.14444 1.85278 9.40278 2.89167 10.4417C3.93056 11.4806 5.18889 12 6.66667 12Z' fill='black'/%3e%3c/svg%3e");}

    .exchange-widget.type-04 {
        padding: 8px;
        gap: 8px;
        flex-direction: row;
    }

        .exchange-widget.type-04 .exchange-widget-box {
            flex: inherit;
            width: calc(50% - 4px);
            padding: 8px;
        }

        .exchange-widget.type-04 .exchange-title {
            margin-bottom: 3px;
        }

            .exchange-widget.type-04 .exchange-title span {
                margin-right: 5px;
                font-size: 12px;
            }

            .exchange-widget.type-04 .exchange-title i {
                height: 14px;
                padding: 0 3px;
                font-size: 12px;
            }

        .exchange-widget.type-04 .exchange-item span {
            font-size: 12px;
        }

        .exchange-widget.type-04 .down .exchange-item p, .exchange-widget.type-04 .up .exchange-item p {
            font-size: 14px;
        }

    .exchange-widget.type-05 .exchange-widget-box {
        flex: inherit;
    }

    .exchange-widget.type-05 .exchange-item {
        flex: inherit;
        width: calc(50% - 5px);
        padding-right: 10px;
    }

    .exchange-widget.type-05 .exchange-widget-box:last-child .exchange-item {
        width: calc(50% - 7px);
    }

        .exchange-widget.type-05 .exchange-widget-box:last-child .exchange-item:last-child {
            width: 100%;
            border-top: 1px solid rgba(6, 40, 73, 0.06);
            padding-top: 20px;
        }

            .exchange-widget.type-05 .exchange-widget-box:last-child .exchange-item:last-child span {
                color: #9ba9b6;
                font-size: 11px;
                text-align: right;
            }

                .exchange-widget.type-05 .exchange-widget-box:last-child .exchange-item:last-child span strong {
                    color: var(--color-primary);
                }

 .exchange-widget.type-06 .value p{font-weight: 700;font-size: 24px;line-height: 100%;}
.exchange-widget.type-06 .exchange-widget-box .exchange-item .value p{font-weight: 700;font-size: 24px;}
@media (min-width:576px) {
    .exchange-widget {
        flex-direction: row;
    }

        .exchange-widget.type-03, .exchange-widget.type-05 {
            flex-direction: column;
        }
}

@media (min-width: 768px) {
    .exchange-widget.type-06 .exchange-widget-box.second {
        gap: 20px;
        padding-bottom: 0;
    }
}

@media (min-width:1200px) {
    .exchange-widget.type-06 .exchange-widget-box.second {
        gap: 10px
    }

    .exchange-widget.type-02 .exchange-widget-box:first-child {
        flex-basis: 0;
    }
}

@media (min-width:1440px) {
    .exchange-widget.type-04 .exchange-widget-box {
        width: calc(33.33% - 5.4px);
    }

    .exchange-widget.type-05 .exchange-widget-box:last-child .exchange-item {
        width: calc(33.33% - 7px);
    }
}