@charset "UTF-8";

/* CSS Document */

/*====================================

    wrap

====================================*/

.wrap {
    width: 100%;
    height: 100vh;
    position: relative;
}

/*====================================

    .frame

====================================*/

.wrap .frame_top,
.wrap .frame_right,
.wrap .frame_bottom,
.wrap .frame_left {
    position: absolute;
    z-index: 1;
}
.wrap .frame_top {
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: url(/images/frame_top.svg) no-repeat top left;
    background-size: cover;
}
.wrap .frame_right {
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    background: url(/images/frame_right.svg) no-repeat top right;
    background-size: cover;
}
.wrap .frame_bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: url(/images/frame_bottom.svg) no-repeat bottom left;
    background-size: cover;
}
.wrap .frame_left {
    top: 0;
    left: 0;
    width: 120px;
    height: 100%;
    background: url(/images/frame_left.svg) no-repeat top left;
    background-size: cover;
}

/*====================================

    ul

====================================*/

.wrap .inner ul {
    width: 100%;
    height: 100vh;
}
.wrap .inner ul li {
    float: left;
    width: 50%;
    height: 100%;
    display: table;
}
.wrap .inner ul li .cell {
    display: table-cell;
    vertical-align: middle;
}
.wrap .inner ul li .cell a {
    display: inline-block;
    background: rgb(255,255,255,1);
    width: 70%;
    text-decoration: none;
    color: #000;
    padding: 30px;
    border: 4px solid #fff;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}
.wrap .inner ul li .cell a .ph {
    padding: 0 30px;
}
.wrap .inner ul li .cell a p {
    font-size: 90%;
    line-height: 1.5em;
    margin-bottom: 20px;
}
.wrap .inner ul li .cell a span {
    display: block;
    margin: 0 auto;
    width: 80px;
}
.wrap .inner ul li .cell a span img {
    width: 100%;
}
.wrap .inner ul li .cell_fish {
    text-align: right;
    background: url(../images/fab_bg.jpg) center center;
    background-size: cover;
    padding-right: 10%;
}
.wrap .inner ul li .cell_fish:hover a {
    border: 4px solid #1a7fbf;
}
.wrap .inner ul li .cell_rhino {
    text-align: left;
    background: url(../images/rab_bg.jpg) center center;
    background-size: cover;
    padding-left: 10%;
}
.wrap .inner ul li .cell_rhino:hover a {
    border: 4px solid #f7031d;
}