/* button1 */
.button1 { position: relative; display: inline-block; height: 80px; padding: 0 55px; }
.button1::before { content: ''; position: absolute; left: 0; top: 50%; transform: translate3d(0, -50%, 0); width: 80px; height: 80px; border-radius: 50%; background: var(--main-c2); transition: transform .4s; }
.button1 b { position: relative; display: block; font-family: 'poppins'; color: #333; font-size: 15px; line-height: 80px; font-weight: 700; position: relative; transition: transform .4s; }
.button1 b::after { content: '\e907'; font-family: 'xeicon'; font-size: 17px; position: absolute; right: -25px; top: 50%; transform: translate3d(0, -50%, 0); font-weight: bold; opacity: 0; transition: opacity .2s; }

.button1:hover::before { transform: translate3d(62px, -50%, 0) }
.button1:hover b { transform: translate3d(-55px, 0, 0) }
.button1:hover b::after { opacity: 1; }





@media screen and (max-width:1100px) {
    /* button1 */
    .button1 { padding: 0 50px; }
    .button1::before { width: 70px; height: 70px; }
    .button1 b::after { opacity: 0; }

    .button1:hover::before { transform: translate3d(0, -50%, 0); }
    .button1:hover b { transform: none; }
}

@media screen and (max-width: 768px) {
    /* button1 */
    .button1 { padding: 0 40px; }
    .button1::before { width: 60px; height: 60px; }
    .button1 b { font-size: 14px; }
}

@media screen and (max-width: 500px) {
    /* button1 */
    .button1 { padding: 0 25px; }
    .button1::before { width: 40px; height: 40px; }
    .button1 b { font-size: 10px; }
}