@charset "utf-8";

#maincon {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
/*    background-color: black;*/
    overflow: hidden;
}
#maincon>div>div>div{
    text-indent:-9999px;
}
#maincon>div{
    height: 100%;
    overflow: hidden;
    transition: width 1s ease,left 1s ease;
}


#areaa {
    width: 33.333%;
    position: fixed;
    left: 0px;
    z-index: 4;
    background-color: black;
    
}
#areaa>div>.base{
    background-image: url(../images/bg01.jpg);
}

#areab {
    width: 50%;
    position: fixed;
    left: 25%;
    z-index: 2;
    background-color: black;
}
#areab>div>.base{
    background-image: url(../images/bg02.jpg);
}
#areac {
    width: 33.333%;
    position: fixed;
    right: 0%;
    z-index: 4;
    background-color: black;
}
#areac>div>.base{
    background-image: url(../images/bg03.jpg);
}


#maincon.aopen>#areaa,#maincon.copen>#areac{
    width: 70%;
}
#maincon.bopen>#areab{
    width: 90%;
}

#maincon>div>div{
    width: 100%;
    height: 100%;
}
#maincon.aopen>div#areab>div,
#maincon.aopen>div#areac>div,
#maincon.bopen>div#areaa>div,
#maincon.bopen>div#areac>div,
#maincon.copen>div#areaa>div,
#maincon.copen>div#areab>div{
    opacity: 0.5;
    transition: opacity 0.5s ease 0.3s;
}
#maincon.aopen>div#areaa>div,
#maincon.bopen>div#areab>div,
#maincon.copen>div#areac>div{
    opacity: 1;
    transition: opacity 0.3s ease;

}


#maincon>div>div>div.base{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}




#maincon.aopen>#areac,
#maincon.bopen>#areaa,
#maincon.bopen>#areac,
#maincon.copen>#areaa{
    width: 15%;
}
#maincon.aopen>#areab,
#maincon.copen>#areab{
    width: 50%;
}

#maincon.aopen>#areab{left: 52.5%;}
#maincon.copen>#areab{left: -2.5%;}
#maincon.bopen>#areab{left: 5%;}


#maincon>div>div>div:first-child{
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    width: 228px;
    height: 228px;
    position: relative;
    left: 50%;
    top: 30%;
    margin-top: -114px;
    margin-left: -114px;
    float: left;
/*    transition: top 0.2s,width 0.6s 0.4s,margin-left 0.5s 0.6s,background-position 0.5s 0.6s;*/
    transition: top 1s,width 0.9s,margin-left 1s,background-position 1s;
}

#areaa>div>div:first-child{
        background-image: url(../images/button01.png);
}

#areaa.active>div>div:first-child:hover{
        background-image: url(../images/button01_on.png);
}

#areab>div>div:first-child{
        background-image: url(../images/button02.png);
}
#areab.active>div>div:first-child:hover{
        background-image: url(../images/button02_on.png);
}

#areac>div>div:first-child{
        background-image: url(../images/button03.png);
}
#areac.active>div>div:first-child:hover{
        background-image: url(../images/button03_on.png);
}





#maincon.aopen>div>div>div:first-child,
#maincon.bopen>div>div>div:first-child,
#maincon.copen>div>div>div:first-child{
    top:40%;
}
#maincon.aopen>div#areaa>div>div:first-child{
    top:30%;
    width: 590px;
    margin-left: -295px;
/*    background-position: 50% 50%;*/
}
#maincon.bopen>div#areab>div>div:first-child{
    top:30%;
    width: 600px;
    margin-left: -300px;
/*    background-position: 50% 50%;*/
}
#maincon.copen>div#areac>div>div:first-child{
    top:30%;
    width: 520px;
    margin-left: -260px;
/*    background-position: 50% 50%;*/
}

.rightmarg {
    position: fixed;
    height: 100%;
    width: 10px;
    right: 0px;
    top: 0px;
    z-index: 9999;
}

.leftmarg {
    position: fixed;
    height: 100%;
    width: 10px;
    left: 0px;
    top: 0px;
    z-index: 9999;
}