@charset "utf-8";

.m-btn{width: 1024px;margin: auto;}
.m-btn > a{float: left;position: relative;width: 425px;height: 60px;/*padding-right: 120px;*/background: #8761C8;color: #fff;font-size: 24px;text-align: center;line-height: 60px;box-sizing: border-box;}
.m-btn > a:nth-child(1){margin-right: 168px;}
.m-btn > a:before,.m-btn > a:after{content: '';position: absolute;width: 0;height: 1px;background: #8761C8;transition: all .2s ease-out;}
.m-btn > a:before{left: 0;top: 0;}
.m-btn > a:after{right: 0;bottom: 0;}
.m-btn > a span.m-btn-rq{display: block;/*width: 400px;height: 60px;*//*text-align: right;*/}
.m-btn > a span.m-btn-rq:before,.m-btn > a span.m-btn-rq:after{content: '';position: absolute;width: 1px;height: 0;background: #8761C8;transition: all .2s ease-out;}
.m-btn > a span.m-btn-rq:before{left: 0;bottom: 0;}
.m-btn > a span.m-btn-rq:after{right: 0;top: 0;}
.m-btn > a span.m-btn-rq span{display: block;position: absolute;top: 0;right: 72px;bottom: 0;width: 36px;height: 1px;margin: auto;background: #fff;}
.m-btn > a span.long span{right: 25px;}
.m-btn > a:hover{padding-right: 40px;color: #8761C8;background: #fff;}
.m-btn > a:hover span.m-btn-rq span{width: 58px;background: #8761C8;}
.m-btn > a:hover:before{width: 425px;transition-delay: .1s;}
.m-btn > a:hover:after{width: 425px;transition-delay: .3s;}
.m-btn > a:hover span.m-btn-rq:before{height: 60px;transition-delay: .4s;}
.m-btn > a:hover span.m-btn-rq:after{height: 60px;transition-delay: .2s;}