/*Game_All subMenu CSS3*/
input#s1, input#s2, input#s3, 
input#s4, input#s5, input#s6,
input#s2-0, input#s7 {
    position: absolute;left: 0;top: 0;opacity:0; 
}
#gSubnav {clear: left;}
#gSubnav ul {display:block;width:800px;height:auto;margin:0 auto;}
#dNavi #gSubnav li a,
#dNavi #gSubnav li a:hover,#dNavi #gSubnav li a:active,
#dNavi #gSubnav li a.active {padding:0;}
#gSubnav li a label, #gSubnav li a:hover label, #gSubnav li a:active label, #gSubnav li a.active label {display: block;padding: 2px 10px;width: auto;height: auto;color: #fff9d4;text-shadow: 0 0 5px #000;-moz-text-shadow: 0 0 5px #fff;-webkit-text-shadow: 0 0 5px #fff;float: left;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;background: none;cursor: pointer;}
.subItem {position:relative;top:10px;width:91%;height:0px;overflow:hidden;border: 1px solid #fff9d4;border-radius:5px;margin:0 auto;padding:0px;opacity:0;filter: alpha(opacity=0);transition:all .5s; }
.subItem ul { width: 100%!important;}

#gSubnav.menu01 li a.is-active,
input#s1:checked ~ #gSubnav.menu01 .s1 a,
input#s2:checked ~ #gSubnav.menu01 .s2 a,
input#s3:checked ~ #gSubnav.menu01 .s3 a,
input#s4:checked ~ #gSubnav.menu01 .s4 a,
input#s5:checked ~ #gSubnav.menu01 .s5 a,
input#s6:checked ~ #gSubnav.menu01 .s6 a,
input#s7:checked ~ #gSubnav.menu01 .s7 a {
    background: #483d00;
    border: 1px solid #ffea00;
}


input#s1:checked ~ #gSubnav.menu02 .s1,
input#s2:checked ~ #gSubnav.menu02 .s2,
input#s3:checked ~ #gSubnav.menu02 .s3,
input#s4:checked ~ #gSubnav.menu02 .s4,
input#s5:checked ~ #gSubnav.menu02 .s5,
input#s6:checked ~ #gSubnav.menu02 .s6,
input#s7:checked ~ #gSubnav.menu02 .s7 {
    background: #483d00;
    border: 1px solid #ffea00;
}

input#s1:checked ~ .sub1, input#s2:checked ~ .sub2, input#s3:checked ~ .sub3,
input#s4:checked ~ .sub4, input#s5:checked ~ .sub5, input#s6:checked ~ .sub6,
input#s7:checked ~ .sub7 {
    opacity: 1;
    filter: alpha(opacity=100);
    padding: 10px;
    height: auto;
    margin-bottom: 15px;
}
input#s2:checked ~ .sub2 {margin-top: -2px;}
input#s3:checked ~ .sub3 {margin-top: -4px;}
input#s4:checked ~ .sub4 {margin-top: -6px;}
input#s5:checked ~ .sub5 {margin-top: -8px;}
input#s6:checked ~ .sub6 {margin-top: -10px;}
input#s7:checked ~ .sub7 {margin-top: -12px;}

.arrow {
    top: auto;
    bottom: -7px;
    left: -10px;
    right: 0;
    margin: auto;
    position: absolute;
    display:block;z-index:10;
    border-bottom:1px solid #404040;
    width:0px;height:0px;opacity:0;
}
.arrow:after {content: '';position: absolute;top: 2px;left:-1px;opacity:1;filter: alpha(opacity=100);border-top: 0px solid #040404;border-right: 11px solid transparent;border-bottom: 11px solid #040404;border-left: 11px solid transparent; transition: all .5s;}
.arrow:before {content: '';position: absolute;top: 0px;left:0px;opacity:1;filter: alpha(opacity=100);border-top: 0px solid #fff9d4;border-right: 10px solid transparent;border-bottom: 10px solid #fff9d4;border-left: 10px solid transparent; transition: all .5s;}

input#s1:checked ~ #gSubnav.menu01 li.s1 .arrow,
input#s2:checked ~ #gSubnav.menu01 li.s2 .arrow,
input#s3:checked ~ #gSubnav.menu01 li.s3 .arrow,
input#s4:checked ~ #gSubnav.menu01 li.s4 .arrow,
input#s5:checked ~ #gSubnav.menu01 li.s5 .arrow,
input#s6:checked ~ #gSubnav.menu01 li.s6 .arrow,
input#s7:checked ~ #gSubnav.menu01 li.s7 .arrow {
    opacity: 1;
}

input#s1:checked ~ #gSubnav.menu02 li:nth-child(1) .arrow,
input#s2:checked ~ #gSubnav.menu02 li:nth-child(2) .arrow,
input#s3:checked ~ #gSubnav.menu02 li:nth-child(3) .arrow,
input#s4:checked ~ #gSubnav.menu02 li:nth-child(4) .arrow,
input#s5:checked ~ #gSubnav.menu02 li:nth-child(5) .arrow,
input#s6:checked ~ #gSubnav.menu02 li:nth-child(6) .arrow,
input#s7:checked ~ #gSubnav.menu02 li:nth-child(7) .arrow {
    opacity: 1;
}



.tipIcon {
        position: relative;
        /*width: 14px;
        height: 14px;
        background:url('../_img/Danger.png') bottom center no-repeat;
        margin-left:10px;
        float: right;
        margin-top:4px;
        animation: dropdown .3s 0s 10 ease-in-out forwards;*/
        width:30px;
        margin-left:10px;
        float: right;
        color:#f36;
        animation: subcolor 1s 0s infinite forwards;
    }

/*.tipIcon:hover {transform:scale(1.4);}*/

    @keyframes dropdown {
        0% {margin-top:-3px; }
        2% {margin-top:-5px; }
        98% { margin-top:7px;}
        100% {margin-top:4px;}
    }

    .subItem li a .newtip {float:left; margin-right:5px;color:#f36; animation: subcolor 1s 0s infinite forwards;}
    @keyframes subcolor {
        0% {color:#b6ff00;}
        25% {color:#00ffff}
        50% {color:#ffd800}
        75% {color:#ff6a00}
        100% {color:#f36;}
    }