@charset "UTF-8";

    html,
    body {
        font-family: 微軟正黑體, "Arial";
        background-color: #000;
    }
    
    .count {
        float: left;
        margin-right: 5px;
        color: #fff;
        font-size: 62px;
        text-align: right;
    }
    
    .item,
    .boxes {
        cursor: pointer;
        margin: 0 -15px;
    }
    
    .item {
        background-color: rgba(255, 255, 255, 0.5);
        color: #fff;
	padding: 15px;
        height: 60vmin;
    }
    
    .boxes:before,
    .boxes:after {
        content: '';
        position: absolute;
        left: 30px;
        right: 30px;
        top: 30px;
        bottom: 30px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        transition: all .5s;
    }
    
    .boxes:before {
        border-right: none;
        border-left: none;
        border-bottom: none;
        transform: scale(0, 1);
    }
    
    .boxes:after {
        border-top: none;
        border-bottom: none;
        transform: scale(1, 0);
    }
    
    .boxes:hover:before,
    .boxes:hover:after {
        transform: scale(1, 1);
    }
    
    .boxes:hover .btn:before,
    .boxes:hover .btn:after {
        width: calc((100% - 180px)/2);
    }
    
    .boxes:hover .btn span {
        opacity: 1;
    }
    
    .boxes img {
	display: block;
        opacity: 0.5;
    }
    
    .boxes:hover img {
        opacity: 1.0;
    }

    .boxes .textBox {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
        width: 100%;
        text-align: center;
        color: #fff;
    }
    
    .boxes .textBox b {
        position: relative;
        display: block;
        font-size: 3.0rem;
        letter-spacing: .1em;
        font-weight: bold;
    }
    
    .boxes .textBox b:after {
        content: '';
        display: block;
        margin: 5px auto;
        width: 326px;
        height: 1px;
        background: rgba(255, 255, 255, 0.3);
    }
    
    .boxes .textBox em {
        display: block;
        font-size: 12px;
        font-weight: 300;
        letter-spacing: .11em;
        text-transform: uppercase;
    }
    
    .boxes .btn {
        position: absolute;
        left: 0;
        bottom: 25px;
        z-index: 99;
        width: 100%;
        text-align: center;
    }
    
    .boxes .btn:before,
    .boxes .btn:after {
        content: '';
        position: absolute;
        bottom: 5px;
        width: 0;
        height: 1px;
        background: rgba(255, 255, 255, 0.5);
        transition: all .5s;
    }
    
    .boxes .btn:before {
        left: 30px;
    }
    
    .boxes .btn:after {
        right: 30px;
    }
    
    .boxes .btn span {
        display: block;
        color: rgba(255, 255, 255, 0.7);
        opacity: 0;
        transition: all .9s;
    }