:root {
    --open-lr-box-color: #666666;
    --open-lr-box-color-2: #212121;
}

.bc-open-lr-box{border: 1px solid var(--open-lr-box-color); color: #ffffff;}
.bc-open-lr-box::before{background-color: var(--open-lr-box-color);}
.bc-open-lr-box::after{background-color: var(--open-lr-box-color);}
.bc-open-lr-box:hover{color: var(--open-lr-box-color); }

.bc-open-lr-box.sec{border: 1px solid var(--open-lr-box-color-2); color: #ffffff;}
.bc-open-lr-box.sec::before{background-color: var(--open-lr-box-color-2);}
.bc-open-lr-box.sec::after{background-color: var(--open-lr-box-color-2);}
.bc-open-lr-box.sec:hover{color: var(--open-lr-box-color-2); }

.bc-open-lr-box{cursor: pointer; position: relative; padding: 7px 0; z-index: 50;}
.bc-open-lr-box, .bc-open-lr-box::before, .bc-open-lr-box::after{transition: all 0.8s;}
.bc-open-lr-box::before{position: absolute; content: ''; width: 50%; height: 100%; top:0; left:0;}
.bc-open-lr-box::after{position: absolute; content: ''; width: 50%; height: 100%; top:0; right:0;}
.bc-open-lr-box:hover::before{width: 8px;}
.bc-open-lr-box:hover::after{width: 8px;}

.bc-open-lr-box .bc-open-lr-box-in{position: relative; text-align: center; z-index: 51;}
.bc-open-lr-box .bc-open-lr-box-in .bc-open-lr-box-in-be{display: block;}
.bc-open-lr-box .bc-open-lr-box-in .bc-open-lr-box-in-af{display: none;}
.bc-open-lr-box:hover .bc-open-lr-box-in-be{display: none;}
.bc-open-lr-box:hover .bc-open-lr-box-in-af{display: block;}