@charset "utf-8";.gate_container {
    position: absolute;
    top: 38px;
    bottom: 38px;
    left: 0;
    right: 0;
    z-index: 1
}

.gate_container.off {
    display: none !important
}

.gate_container .gate_ani {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:#f6f1dc;
}

.gate_container .gate_ani #animation_container {margin:0 auto;}

.gate_container .gate_ani .gate_ani_cover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.checkContainer:not(.word) header .checkTitle,.isActiveContainer header .title,.fishing header,.checkContainer:not(.word) main,.isActiveContainer main,.fishing main {
    visibility: hidden;
    z-index: -1
}

.checkContainer.on header .checkTitle,.isActiveContainer.on header .title,.fishing.on header,.checkContainer.on main,.isActiveContainer.on main,.fishing.on main {
    visibility: visible;
    z-index: 0
}

.gate_container .gate_title_container {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 1
}

.gate_container .gate_title_container:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    z-index: -1
}

.gate_container .gate_title_title {
    position: absolute;
    width: 100%;
    line-height: 1;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 60px;
    font-family: YGJAL
}

.gate_container .gate_btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 216px;
    height: 52px;
    opacity: 0;
    font-size: 23px;
    border-radius: 10px;
    background-color: #fee100;
    font-family: YGJAL;
    box-sizing: border-box;
    cursor: pointer
}

.gate_container .gate_btn:after {
    content: ">";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%)
}

.gate_container .gate_btn.hover {
    color: #fff;
    background-color: #f77c19
}

.gate_container .gate_title_title,.gate_container .gate_btn,.gate_container .gate_text {
    -webkit-animation: opacityOne 1s cubic-bezier(0.390,0.575,0.565,1.000) .5s forwards;
    animation: opacityOne 1s cubic-bezier(0.390,0.575,0.565,1.000) .5s forwards
}

.checkContainer .gate_container .gate_title_title {
    top: 246px;
    text-shadow: 4px 0 0 #0d7140,-4px 0 0 #0d7140,0 4px 0 #0d7140,0 -4px 0 #0d7140,3px 3px #0d7140,-3px -3px 0 #0d7140,3px -3px 0 #0d7140,-3px 3px 0 #0d7140,3px 3px 5px rgba(0,0,0,0.3)
}

.checkContainer .gate_container .gate_title_container:before {
    background: url(../../contents/images/background/bg_check.png) center bottom/contain no-repeat; background-size: cover;
}

.checkContainer .gate_container .gate_btn {
    top: 327px
}

.isActiveContainer .gate_container {
    display: flex;
    align-items: center;
    justify-content: center
}

.isActiveContainer .gate_container:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../contents/images/background/bg_isActive.png) center bottom/contain no-repeat;
    z-index: 1
}

.isActiveContainer .gate_container .gate_title_container {
    top: auto;
    display: flex;
    flex-direction: column;
    width: 660px;
    height: 500px;
    border-radius: 30px
}

.isActiveContainer .gate_container .gate_title_container:before {
    content: none
}

.isActiveContainer .gate_container .gate_title_title {
    position: static;
    margin: 50px auto 310px;
    font-size: 58px;
    text-shadow: 4px 0 0 #740092,-4px 0 0 #740092,0 4px 0 #740092,0 -4px 0 #740092,3px 3px #740092,-3px -3px 0 #740092,3px -3px 0 #740092,-3px 3px 0 #740092,3px 3px 5px rgba(0,0,0,0.3)
}

.isActiveContainer .gate_container .gate_title_title .color {
    color: #fff4ac
}

.isActiveContainer .gate_container .gate_btn {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto
}

.isActiveContainer .gate_container .gate_btn.hover {
    color: #000;
    background-color: #fff
}

@keyframes bottomToTop2 {
    0%,40% {
        transform: translateY(200px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes bottomToTop2 {
    0%,40% {
        transform: translateY(200px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

.fishing .gate_title_container .gate_title_title {
    top: 240px;
    text-shadow: #0037a3 3px 0 0,#0037a3 2.83487px .981584px 0,#0037a3 2.35766px 1.85511px 0,#0037a3 1.62091px 2.52441px 0,#0037a3 .705713px 2.91581px 0,#0037a3 -0.287171px 2.98622px 0,#0037a3 -1.24844px 2.72789px 0,#0037a3 -2.07227px 2.16926px 0,#0037a3 -2.66798px 1.37182px 0,#0037a3 -2.96998px .42336px 0,#0037a3 -2.94502px -0.571704px 0,#0037a3 -2.59586px -1.50383px 0,#0037a3 -1.96093px -2.27041px 0,#0037a3 -1.11013px -2.78704px 0,#0037a3 -0.137119px -2.99686px 0,#0037a3 .850987px -2.87677px 0,#0037a3 1.74541px -2.43999px 0,#0037a3 2.44769px -1.73459px 0,#0037a3 2.88051px -0.838247px 0
}

.fishing .gate_title_container .gate_btn {
    top: 360px
}

.fishing .gate_title_container .gate_text {
    position: absolute;
    left: 50%;
    top: 450px;
    text-align: center;
    font-size: 30px;
    opacity: 0;
    line-height: 1.3em;
    font-family: NotoB;
    padding: 15px 25px;
    background-color: rgba(255,255,255,.5);
    border-radius: 10px;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%)
}

.fishing .gate_container .fishBox {
    position: absolute;
    z-index: -1
}

.fishing .gate_container .fishBox_1 {
    top: 310px;
    left: 30px
}

.fishing .gate_container .fishBox_2 {
    top: 390px;
    left: 110px
}

.fishing .gate_container .fishBox_3 {
    top: 352px;
    left: 950px
}

.fishing .gate_container .fishBox_4 {
    top: 510px;
    left: 260px
}

.fishing .gate_container .fishBox_5 {
    top: 411px;
    left: 780px
}

.fishing .gate_container .fishBox,.fishing .gate_container .fishBox,.fishing .gate_container .fishBox {
    -webkit-animation: fishSwim_box .8s steps(4) infinite;
    -ms-animation: fishSwim_box .8s steps(4) infinite;
    animation: fishSwim_box .8s steps(4) infinite
}

.fishing .gate_container .fishBox,.fishing .gate_container .fishBox {
    -webkit-animation: fishSwim_box .7s steps(4) infinite;
    -ms-animation: fishSwim_box .7s steps(4) infinite;
    animation: fishSwim_box .7s steps(4) infinite
}

@keyframes fishSwim_box {
    0%,50%,100% {
        transform: translateY(0)
    }

    25% {
        transform: translateY(-5px)
    }

    75% {
        transform: translateY(5px)
    }
}

.fishing .gate_container .img_fish_1 {
    width: 192px;
    height: 132px;
    -webkit-animation: fish_1 .8s steps(4) infinite;
    -ms-animation: fish_1 .8s steps(4) infinite;
    animation: fish_1 .8s steps(4) infinite
}

@keyframes fish_1 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -768px 0
    }
}

@-webkit-keyframes fish_1 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -768px 0
    }
}

@-ms-keyframes fish_1 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -768px 0
    }
}