@charset "utf-8";

/* color */

:root {
    --main-text: #282A2D;
    --main-color: #276EF1;
    --blue-bg: #EDF5FF;
    --sub-text: #909090;
    --gray-bg: #F7F8FB;
    --navy-color: #2E4C84;
    --sub-blue: #4E82E2;
    --hover-color: #194597;
    --gra01-blue: linear-gradient(180deg, #FFFFFF 0%, #D2E2FF 100%);
    --sub-red: #f26038
}

/* all_exchanges */

.container.exchanges {
    width: 100%;
}

/* section01 */

.application .sec01 {
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
    padding: 7rem 0;
}

.application .sec01 .sub_txt {
    font-size: 1.6rem;
    color: var(--sub-text);
}

.application .sec01 .boxs {
    display: flex;
    align-items: flex-start;
    gap: 4.2rem;
}

.application .sec01 .box {
    max-width: 37.2rem;
    width: 100%;
    height: 47.1rem;
}

.application .sec01 .bi_box .top_logo {
    width: 100%;
    height: 18.5rem;
    border-radius: 20px 20px 0 0;
    background: url(../img/img-exchange01.svg) center no-repeat;
}
.application .sec01 .bit_box .top_logo {
    width: 100%;
    height: 18.5rem;
    border-radius: 20px 20px 0 0;
    background: url(../img/img-exchange02.svg) center no-repeat;
}
.application .sec01 .btb_box .top_logo {
    width: 100%;
    height: 18.5rem;
    border-radius: 20px 20px 0 0;
    background: url(../img/img-exchange03.svg) center no-repeat;
}
.application .sec01 .mexc_box .top_logo {
    width: 100%;
    height: 18.5rem;
    border-radius: 20px 20px 0 0;
    background: url(../img/img-exchange04.svg) center no-repeat;
}
.application .sec01 .bing_box .top_logo {
    width: 100%;
    height: 18.5rem;
    border-radius: 20px 20px 0 0;
    background: url(../img/img-exchange05.svg) center no-repeat;
}

.application .sec01 .small_title {
    font-size: 1.6rem;
    width: 100%;
    height: 6rem;
    background-color: #EFF0F5;
    padding: 2.2rem 0 2.2rem 2.2rem;
}

.application .sec01 .box_con {
    padding: 2.2rem 2.2rem 3.2rem;
}

.application .sec01 .big_title {
    font-size: 2rem;
    margin-bottom: 2.2rem;
}
.application .sec01 .big_title .red,
.application .sec01 .big_title .sub_blue {
    font-weight: 800;
}

.application .sec01 .progress_bar {
    position: relative;
    max-width: 32.8rem;
    width: 100%;
    height: 0.2rem;
    background-color: #E1E4EE;
    margin-bottom: 2.2rem;
}

.application .sec01 .progress_bar .red_bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 0.3rem;
    background-color: #E03D3D;
}

.application .sec01 .progress_bar .blue_bar0 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 81%;
    height: 0.3rem;
    background-color: var(--sub-blue);
}

.application .sec01 .progress_bar .blue_bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 84%;
    height: 0.3rem;
    background-color: var(--sub-blue);
}

.application .sec01 .progress_bar .blue_bar1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 88%;
    height: 0.3rem;
    background-color: var(--sub-blue);
}

.application .sec01 .progress_bar .blue_bar2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 94%;
    height: 0.3rem;
    background-color: var(--sub-blue);
}

.application .sec01 .progress_bar .blue_bar3 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 96%;
    height: 0.3rem;
    background-color: var(--sub-blue);
}

.application .sec01 .red_box .progress_bar .progress_num {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 4.4rem;
    height: 2.1rem;
    border-radius: 20px;
    border: 1px solid #E03D3D;
    background-color: #fff;
    font-size: 1.2rem;
    text-align: center;
    padding: 0.4rem 0;
    color: #E03D3D;
}
.application .sec01 .blue_box .progress_bar .progress_num {
    position: absolute;
    right: 4rem;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 4.4rem;
    height: 2.1rem;
    border-radius: 20px;
    border: 1px solid var(--sub-blue);
    background-color: #fff;
    font-size: 1.2rem;
    text-align: center;
    padding: 0.4rem 0;
    color: var(--sub-blue);
}

.application .sec01 .blue_box .progress_bar .progress_num1 {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 4.4rem;
    height: 2.1rem;
    border-radius: 20px;
    border: 1px solid var(--sub-red);
    background-color: #fff;
    font-size: 1.2rem;
    text-align: center;
    padding: 0.4rem 0;
    color: var(--sub-red);
}

.application .sec01 .red_box .info_box {
    display: inline-block;
    height: 3.6rem;
    border-radius: 30px;
    background-color: #FAF0F0;
    font-size: 1.4rem;
    color: #E03D3D;
    padding: 1.1rem 2rem;
    text-align: center;
    margin-bottom: 2.2rem;
}
.application .sec01 .blue_box .info_box {
    display: inline-block;
    height: 3.6rem;
    border-radius: 30px;
    background-color: var(--blue-bg);
    font-size: 1.4rem;
    color: var(--sub-blue);
    padding: 1.1rem 2rem;
    text-align: center;
    margin-bottom: 2.2rem;
}

/* section03 */

.application .sec03 {
    width: 100%;
    padding: 5.6rem 0;
    background-color: var(--gray-bg);
}

.application .sec03 p {
    font-size: 2.2rem;
    text-align: center;
}

.application .sec03 .check_blue_btn {
    display: block;
    margin: 0 auto;
}

/* 모바일 */

@media (max-width:1199px) {
    .application .pc {
        display: none;
    }

    .application .mobile {
        display: block;
    }

    /* section02 */

    .application .sec02 {
        width: 100%;
        padding: 5rem 1.6rem;
        /* height: 86.6rem; */
    }

    .application .sec02 h5,
    .application .sec02 .sub_txt {
        text-align: center;
    }

    .application .sec02 .sub_txt {
        font-size: 1.6rem;
        color: var(--sub-text);
    }

    .application .sec02 .box {
        height: 26.4rem;
        box-shadow: 0px 5px 20px rgba(40, 42, 45, 0.1) !important;
    }

    .application .sec02 .logo_area {
        position: relative;
        width: 100%;
        height: 5rem;
        box-shadow: inset 0px -1px 0px #E1E4EE;
        padding: 1.3rem 1.6rem;
    }

    .application .sec02 .red_box .logo_area::after {
        display: block;
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 0.2rem;
        background-color: #E03D3D;
    }
    .application .sec02 .blue_box .logo_area::after {
        display: block;
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 50%;
        height: 0.2rem;
        background-color: var(--sub-blue);
    }

    .application .sec02 .box_con {
        padding: 1.8rem 1.6rem 2.8rem;
    }

    .application .sec02 .progress_info {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        margin-bottom: 1.8rem;
    }

    .application .sec02 .red_box .progress_span,
    .application .sec02 .red_box .info_span {
        height: 3.2rem;
        border-radius: 30px;
        background-color: #FAF0F0;
        font-size: 1.4rem;
        color: #E03D3D;
        padding: 0.9rem 2rem;
    }
    .application .sec02 .blue_box .progress_span,
    .application .sec02 .blue_box .info_span {
        height: 3.2rem;
        border-radius: 30px;
        background-color: var(--blue-bg);
        font-size: 1.4rem;
        color: var(--sub-blue);
        padding: 0.9rem 2rem;
    }

    .application .sec02 .percent {
        font-size: 1.8rem;
        line-height: 2.7rem;
        margin-bottom: 0.6rem;
    }
    .application .sec02 .percent .red,
    .application .sec02 .percent .sub_blue {
        font-weight: 800;
    }

    .application .sec02 .small_txt {
        font-size: 1.4rem;
        line-height: 2.1rem;
        font-weight: 400;
        margin-bottom: 1.8rem;
    }

    .application .sec02 .exchange_red_btn {
        max-width: 100%;
        height: 4.6rem;
    }
    .application .sec02 .exchange_blue_btn {
        max-width: 100%;
        height: 4.6rem;
    }

    .application .sec02 .logo_area img {
        height: 2.4rem;
    }
}

@media (max-width:768px) {
    /* section03 */

    .application .sec03 {
        height: 21.2rem;
        padding: 5rem 0;
    }

    .application .sec03 p {
        font-size: 1.6rem;
    }
}