/* 捕魚 */

/* Wrap */
.fish-wrap {
    position: var(--fish-wrap-position);
    height: var(--fish-wrap-height);
    min-height: var(--fish-wrap-min-height);
    background-color: var(--fish-wrap-background-color);
    padding-bottom: var(--fish-wrap-padding-bottom);
}

/* Menu */
.fish-wrap .fish-menu {
    background-color: var(--fish-menu-background-color);
    position: relative;
    top: var(--fish-menu-top);
    width: 1232px;
    margin: 0 auto 0;
    padding: var(--fish-menu-padding);
    z-index: 2;
}

/* List */
.fish-wrap .fish-menu .fishList {
    float: left;
    position: relative;
    width: 25%;
}
.fish-wrap .fish-menu .fishList .fishItem {
    width: 297px;
    height: 230px;
    margin-top: 10px;
    position: relative;
}
.fish-wrap .fish-menu .fishList .fishItem .fishBox {
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, .7);
    border: 1px solid #dac48c;
    position: absolute;
    overflow: hidden;
    -webkit-animation: fadeIn 300ms ease;
    -moz-animation: fadeIn 300ms ease;
    -ms-animation: fadeIn 300ms ease;
    z-index: 1;
}
.fish-wrap .fish-menu .fishList .fishItem .fishBox a {
    margin: -20px auto;
    text-decoration: none;
    text-align: center;
    position: relative;
    top: 50%;
    display: block;
    width: 130px;
    height: 45px;
    border-radius: 10px;
    background: rgb(0, 157, 4);
    background: -moz-linear-gradient(top, rgba(0, 157, 4, 1) 0%, rgba(12, 213, 17, 1) 62%, rgba(14, 220, 19, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 157, 4, 1) 0%, rgba(12, 213, 17, 1) 62%, rgba(14, 220, 19, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 157, 4, 1) 0%, rgba(12, 213, 17, 1) 62%, rgba(14, 220, 19, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009d04', endColorstr='#0edc13', GradientType=0);
    box-shadow: 0px 5px 0 0px #007f03;
    border-bottom: 1px solid #47ff4c;
    color: #fff;
    font-size: 18px;
    line-height: 45px;
}
.fish-wrap .fish-menu .fishList .fishItem .fishBox a:hover {
    background: rgb(14, 220, 19);
    background: -moz-linear-gradient(top, rgba(14, 220, 19, 1) 0%, rgba(12, 213, 17, 1) 38%, rgba(0, 157, 4, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(14, 220, 19, 1) 0%, rgba(12, 213, 17, 1) 38%, rgba(0, 157, 4, 1) 100%);
    background: linear-gradient(to bottom, rgba(14, 220, 19, 1) 0%, rgba(12, 213, 17, 1) 38%, rgba(0, 157, 4, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0edc13', endColorstr='#009d04', GradientType=0);
}
.fish-wrap .fish-menu .fishList .fishItem .fishBox a:active {
    height: 42px;
    margin-top: -15px;
    box-shadow: 0px 3px 0 0px #007f03;
}
.fish-wrap .fish-menu .fishList .fishItem:hover .fishBox {
    display: block;
}

/* Ratio */
.fishItem .fish-ratio {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Canvas */
.fish-canvas {
    z-index: 1;
    position: var(--fish-canvas-position);
    display: var(--fish-canvas-display);
}

/* AD */
.fish-pic-warp {
    display: var(--fish-pic-warp-display);
    height: 234px;
    margin-right: 10px;
}
.fish-pic-warp .fish-slider {
    display: inline-block;
}
.fish-pic-warp .fish-slider .carousel-inner {
    height: auto;
}
.fish-pic-warp .fish-list-small {
    display: inline-block;
    position: relative;
    top: -4px;
    right: -4px;
    width: 297px;
    height: 234px;
}
.fish-list-small .fish-gif-container {
    background: url("../../../images/GameF/fish-gif-container.png") 0 0 no-repeat;
    position: absolute;
    width: 297px;
    height: 232px;
}
.fish-list-small .fish-gif {
    background: url("../../../images/GameF/fish-gif.gif") 0 0 no-repeat;
    position: absolute;
    top: 50px;
    left: 23px;
    width: 181px;
    height: 112px;
}