.boxWithoutEffect{position:relative;height:77vh;width:87vw;margin:0 auto}.boxWithoutEffect .top,.boxWithoutEffect .bottom,.boxWithoutEffect .left,.boxWithoutEffect .right{position:absolute;background:#fff}.boxWithoutEffect .top{top:0;left:0;height:1px;right:0}.boxWithoutEffect .bottom{bottom:0;right:0;height:1px;left:0}.boxWithoutEffect .left{bottom:0;left:0;width:1px;top:0}.boxWithoutEffect .right{top:0;right:0;width:1px;bottom:0}.box{position:absolute;height:67vh;width:87vw;margin:10px auto 0}.boxWithoutEffect{position:relative;height:67vh;width:87vw;margin:10px auto 0}.box .top,.box .bottom,.box .left,.box .right{position:absolute;-webkit-animation:8s linear;-moz-animation:8s linear;-o-animation:8s linear;animation:8s linear;-webkit-animation-timing-function:ease-in-out;-moz-animation-timing-function:ease-in-out;-o-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:.5}.box .top{top:0;left:0;height:1px;-webkit-animation-name:top;-moz-animation-name:top;-o-animation-name:top;animation-name:top}@-webkit-keyframes top{0%{width:0}25%{width:0;background:#fff}38%{width:100%;background:#fff}50%{background:#fff}62%{background:#fff}75%{width:100%;background:#fff}88%{background:#fff}100%{right:0;width:100%;background:#fff}}@-moz-keyframes top{0%{width:0}25%{width:0;background:#fff}38%{width:100%;background:#fff}50%{background:#fff}62%{background:#fff}75%{width:100%;background:#fff}88%{background:#fff}100%{right:0;width:100%;background:#fff}}@-o-keyframes top{0%{width:0;}25%{width:0;background:white;}38%{width:100%;background:white;}50%{background:white;}62%{background:white;}75%{width:100%;background:white;}88%{background:white;}100%{right:0;width:100%;background:white;}}@keyframes top{0%{width:0}25%{width:0;background:#fff}38%{width:100%;background:#fff}50%{background:#fff}62%{background:#fff}75%{width:100%;background:#fff}88%{background:#fff}100%{right:0;width:100%;background:#fff}}.box .bottom{bottom:0;right:0;height:1px;-webkit-animation-name:bottom;-moz-animation-name:bottom;-o-animation-name:bottom;animation-name:bottom}@-webkit-keyframes bottom{0%{width:0}12%{width:100%;background:#fff}25%{background:#fff}38%{background:#fff}50%{width:100%;background:#fff}62%{left:0;width:100%;background:#fff}75%{width:100%;background:#fff}100%{left:0;width:100%;background:#fff}}@-moz-keyframes bottom{0%{width:0}12%{width:100%;background:#fff}25%{background:#fff}38%{background:#fff}50%{width:100%;background:#fff}62%{left:0;width:100%;background:#fff}75%{width:100%;background:#fff}100%{left:0;width:100%;background:#fff}}@-o-keyframes bottom{0%{width:0;}12%{width:100%;background:white;}25%{background:white;}38%{background:white;}50%{width:100%;background:white;}62%{left:0;width:100%;background:white;}75%{width:100%;background:white;}100%{left:0;width:100%;background:white;}}@keyframes bottom{0%{width:0}12%{width:100%;background:#fff}25%{background:#fff}38%{background:#fff}50%{width:100%;background:#fff}62%{left:0;width:100%;background:#fff}75%{width:100%;background:#fff}100%{left:0;width:100%;background:#fff}}.box .left{bottom:0;left:0;width:1px;-webkit-animation-name:left;-moz-animation-name:left;-o-animation-name:left;animation-name:left}@-webkit-keyframes left{0%{height:0}12%{height:0;background:#fff}25%{height:100%;background:#fff}38%{background:#fff}50%{background:#fff}62%{height:100%;background:#fff}75%{height:100%;background:#fff}88%{background:#fff}100%{top:auto;bottom:0;height:100%;background:#fff}}@-moz-keyframes left{0%{height:0}12%{height:0;background:#fff}25%{height:100%;background:#fff}38%{background:#fff}50%{background:#fff}62%{height:100%;background:#fff}75%{height:100%;background:#fff}88%{background:#fff}100%{top:auto;bottom:0;height:100%;background:#fff}}@-o-keyframes left{0%{height:0;}12%{height:0;background:white;}25%{height:100%;background:white;}38%{background:white;}50%{background:white;}62%{height:100%;background:white;}75%{height:100%;background:white;}88%{background:white;}100%{top:auto;bottom:0;height:100%;background:white;}}@keyframes left{0%{height:0}12%{height:0;background:#fff}25%{height:100%;background:#fff}38%{background:#fff}50%{background:#fff}62%{height:100%;background:#fff}75%{height:100%;background:#fff}88%{background:#fff}100%{top:auto;bottom:0;height:100%;background:#fff}}.box .right{top:0;right:0;width:1px;-webkit-animation-name:right;-moz-animation-name:right;-o-animation-name:right;animation-name:right}@-webkit-keyframes right{0%{height:0}38%{height:0;background:#fff}50%{height:100%;background:#fff}62%{background:#fff}75%{background:#fff}88%{height:100%;background:#fff}100%{top:auto;bottom:0;height:100%;background:#fff}}@-moz-keyframes right{0%{height:0}38%{height:0;background:#fff}50%{height:100%;background:#fff}62%{background:#fff}75%{background:#fff}88%{height:100%;background:#fff}100%{top:auto;bottom:0;height:100%;background:#fff}}@-o-keyframes right{0%{height:0;}38%{height:0;background:white;}50%{height:100%;background:white;}62%{background:white;}75%{background:white;}88%{height:100%;background:white;}100%{top:auto;bottom:0;height:100%;background:white;}}@keyframes right{0%{height:0}38%{height:0;background:#fff}50%{height:100%;background:#fff}62%{background:#fff}75%{background:#fff}88%{height:100%;background:#fff}100%{top:auto;bottom:0;height:100%;background:#fff}}@media only screen and (min-width:1224px){.box{margin:50px auto 0}.boxWithoutEffect{margin:50px auto 0}}@media only screen and (min-width:1824px){.box{margin:65px auto 0}.boxWithoutEffect{margin:65px auto 0}}