@charset "utf-8";

html, body{
    height: 100%;
}

#wrap{
    width:100%;
    margin: 0 auto;
}
#container{
    overflow:hidden;
}


/*banner s*/
#banner{
    height:350px;
    background:url(../images/introduce/banner.jpg) no-repeat center 0/cover;
}


/*cont1 s*/
#cont1{
    position:relative;
    height:3625px;
    background:url(../images/introduce/cont1_bg.jpg) no-repeat center 0/cover;
}

#cont1 .ttl{
    padding:190px 0 0 0;
    opacity:0;
    transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
}
#cont1 .ttl img{
    float:right;
}
#cont1 .ttl.On{
    opacity:1;
    padding:140px 0 0 0;
}

#cont1 .img1{
    margin:120px 0 0 0;
    opacity:0;
    transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
}
#cont1 .img1 img{
    width:100%;
}
#cont1 .img1.On{
    opacity:1;
    margin:70px 0 0 0;
}

#cont1 .img2{
    margin:120px 0 0 0;
    opacity:0;
    transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
}
#cont1 .img2 .left{
    float:left;
    width:534px;
}
#cont1 .img2 .left img:first-child{
    margin:60px 0 100px 60px;
}
#cont1 .img2 .left img:last-child{
    width:100%;
}
#cont1 .img2 .right{
    float:right;
    width:600px;
}
#cont1 .img2 .right img{
    width:100%;
}
#cont1 .img2.On{
    opacity:1;
    margin:70px 0 0 0;
}

#cont1 .img3{
    margin:120px 0 0 0;
    opacity:0;
    transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
}
#cont1 .img3 img{
    width:100%;
}
#cont1 .img3.On{
    opacity:1;
    margin:70px 0 0 0;
}

#cont1 .img4{
    margin:120px 0 0 0;
    opacity:0;
    transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
}
#cont1 .img4 .left{
    float:left;
    width:600px;
}
#cont1 .img4 .left img{
    width:100%;
}
#cont1 .img4 .right{
    float:right;
}
#cont1 .img4 .right img{
    margin:120px 0 0 60px;
}
#cont1 .img4.On{
    opacity:1;
    margin:70px 0 0 0;
}
/*cont1 e*/