.bt-readmore{
    box-sizing: border-box;
    position:  relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    height: 3.125vw;
    border: solid 1.5px #2e4565;
    border-radius: 2.0833333vw;
    padding: 0 1.145833333vw;
    min-width: 8.75vw;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.0416666vw;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.7;
    letter-spacing: normal;
    text-decoration: none; 
    text-align: left;
    color: #2e4565;
}

.animation1_btn {
    color: #2e4565;
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    background: linear-gradient(to top, #2e4565 50%, #e4dfd2 50%);
    background-size: 100% 250%;
    background-position: left 0%;
    transition: all 0.6s ease;
}

.animation1_btn:hover {
    background-position: 0% 90%;
    color: #e4dfd2;
}

.plus_icon{
    width: 0.833vw;
    height: 0.833vw;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    min-width: 8px;
    min-height: 8px;
    margin-left: .520833333vw;
}

.plus_icon_hover{
    position: absolute;
    right: 1.145833333vw;
    width: 0.833vw;
    height: 0.833vw;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    min-width: 8px;
    min-height: 8px;
}

.bt-readmore:hover .plus_icon{
    opacity: 0;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.bt-readmore:hover .plus_icon_hover{
    opacity: 1;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}


.animation2_btn {
    color: #efeee4;
    border: solid 1.5px #efeee4;
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    background: linear-gradient(to top, #efeee4 50%, #2e4565 50%);
    background-size: 100% 250%;
    background-position: left 0%;
    transition: all 0.6s ease;
}

.animation2_btn:hover {
    background-position: 0% 90%;
    color: #2e4565;
}


/*watch more button*/

.bt-watchmore{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    width: 5.34vw;
    height: 3.125vw;
    border: solid 1.5px #2e4565;
    border-radius: 35px;
    padding: 0 1vw 0;
    color: #2e4565;
    font-size: 1.041666666vw;
}

.watch_text {
    font-size: 1.041666666vw;
}

.watch_space {
    min-width: 2.046875vw;
    min-height: 1px;
}


.watch_icon{
    margin-left: 10px;
    width: 2.046875vw;
    height: 1.536458333vw;
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

.watch_icon_hover{
    transform: translateX(-100%);
    width: 2.046875vw;
    height: 1.536458333vw;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.bt-watchmore:hover .watch_icon{
    opacity: 0;
}

.bt-watchmore:hover .watch_icon_hover{
    opacity: 1;
}

@media (max-width:960px) {
    .bt-readmore {
        min-width: 90.43px;
        min-height: 30px;
        padding: 0 11.008px;
        border-radius: 20px;
        font-size: 10px;
    }

    .watch_icon{
        margin-left: 3.8px;
        width: 19.65px;
        height: 14.75px;
    }

    .watch_space {
        min-width: 19.65px;
    }
    
    .watch_icon_hover{
        display: none;
    }

    .bt-watchmore {
        width: 70.5px;
        height: 30px;
        font-size: 10px;
    }

    .plus_icon_hover {
        right: 11.008px;
    }

    .watch_text {
        font-size: 10px;
    }

    .work_respon {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .bt-readmore {
        width: 127px;
        height: 42px;
        min-width: 127px;
        min-height: 42px;
        padding: 0 18px;
        border-radius: 21px;
        font-size: 14px;
    }

    .plus_icon_hover {
        right: 18px;
    }

    .plus_icon, .plus_icon_hover {
        width: 12px;
        height: 12px;
    }

    .bt-watchmore {
        justify-content: center;
        width: 30.13vw;
        height: 11.2vw;
        font-size: 3.733vw;
    }

    .watch_icon {
        width: 7.2vw;
        height: 5.33vw;
        margin-left: 2.67vw;
    }

    .hover-part {
        width: 0;
    }
}