*{box-sizing:border-box}
html,body,.wrap{width: 100%;height: 100%;  }
body{margin:0;padding:0;box-sizing:border-box;}
img{display:inline-block;vertical-align:top;}

/*-----------------*/
.right_wrap{
  background:#1e85d0;
  height:100%;width:40%;
  z-index:100;position:fixed;top:0%;right:-300px;
  transform:skewX(-18deg);box-shadow: -2px -2px 10px #000;
}
.right_wrap>*{transform:skewX(18deg);position:absolute;}

 h1{left:30px;bottom:150px;}
.filter{left:150px;bottom:50px;text-align:center;}
.filter li{float:left;}
.filter li a{color:#fff;font-size:15px;padding:15px;display:block;}
.filter li:hover a{color:#000;
border-bottom:1px solid #093d63;
border-top:1px solid #093d63;
color:#093d63;

}
.right_wrap span{
  /* top:98px; */
  bottom:-100px;
  left:175px;
}
.right_wrap span img{width: 120%;}

/*  */
.wrap{width:1600px;float:left;height:100%;background:#000;overflow:hidden;}

/* w,h=정의 4*2*/
.item{width:400px;height:200px;float:left;padding:8px;}

.inner_box{height:100%;width:100%;cursor:pointer;}
.inner_box>p{
  text-align:center;
  color:#fff;font-size:30px;
  font-family:'Satisfy', cursive;
  font-family: 'Julius Sans One', sans-serif;
  padding-bottom:10px;padding-top:70px;}

.inner_box>span{font-size:12px;color:#fff;padding-left:80px}

/* w,h=정의
1.8*8
2.8*4
3.8*2
4.4*8
5.4*6
6.4*4
7.6*2
 */

.w88{width:800px;height:800px;}
.w84{width:800px;height:400px;}
.w82{width:800px;height:200px;}
.w48{width:400px;height:800px;}
.w46{width:400px;height:600px;}
.w44{width:400px;height:400px;}
.w62{width:600px;height:200px;}

.item:nth-child(13)>div>span{padding-left:300px;}
.item>div{background-repeat:no-repeat;background-size:cover;background-color:#093d63;}
.item:nth-child(1)>div{background-image:url(../img/01_off.jpg);}
.item:nth-child(3)>div{background-image:url(../img/23_off.jpg);}
.item:nth-child(4)>div{background-image:url(../img/02_off.jpg);}
.item:nth-child(6)>div{background-image:url(../img/06_off.jpg);}
.item:nth-child(7)>div{background-image:url(../img/totoro.gif);background-position:bottom;}
.item:nth-child(8)>div{background-image:url(../img/08_off.jpg);}
.item:nth-child(10)>div{background-image:url(../img/10_off.jpg);}
.item:nth-child(11)>div{background-image:url(../img/11_off.jpg);}
.item:nth-child(12)>div{background-image:url(../img/12_off.jpg)}
.item:nth-child(14)>div{background-image:url(../img/14_off.jpg);}
.item:nth-child(15)>div{background-image:url(../img/15_off.jpg);}
.item:nth-child(16)>div{background-image:url(../img/16_off.jpg);}
.item:nth-child(17)>div{background-image:url(../img/17_off.jpg);}
.item:nth-child(18)>div{background-image:url(../img/18_off.jpg);}
.item:nth-child(19)>div{background-image:url(../img/19_off.jpg);}
.item:nth-child(20)>div{background-image:url(../img/20_off.jpg);}
.item:nth-child(22)>div{background-image:url(../img/22_off.jpg);}
.item:nth-child(23)>div{background-image:url(../img/06.gif);}
.item:nth-child(24)>div{background-image:url(../img/03.gif);}
.item:nth-child(25)>div{background-image:url(../img/02.gif);background-position:center;}
.item:nth-child(26)>div{background-image:url(../img/18.gif);background-position:center;}
.item:nth-child(27)>div{background-image:url(../img/07_off.jpg);}

/*-------------------------- hover--------------------------------- */
.item:hover>div{background-repeat:no-repeat;background-size:cover;background-color:#32a9ff;}
.item:nth-child(1):hover>div{background-image:url(../img/01_on.jpg);}
.item:nth-child(3):hover>div{background-image:url(../img/23_on.jpg);}
.item:nth-child(4):hover>div{background-image:url(../img/02_on.jpg);}
.item:nth-child(6):hover>div{background-image:url(../img/06_on.jpg);}
.item:nth-child(8):hover>div{background-image:url(../img/08_on.jpg);}
.item:nth-child(10):hover>div{background-image:url(../img/10_on.jpg);}
.item:nth-child(11):hover>div{background-image:url(../img/11_on.jpg);}
.item:nth-child(12):hover>div{background-image:url(../img/12_on.jpg);}
.item:nth-child(14):hover>div{background-image:url(../img/14_on.jpg);}
.item:nth-child(15):hover>div{background-image:url(../img/15_on.jpg);}
.item:nth-child(16):hover>div{background-image:url(../img/16_on.jpg);}
.item:nth-child(17):hover>div{background-image:url(../img/17_on.jpg);}
.item:nth-child(18):hover>div{background-image:url(../img/18_on.jpg);}
.item:nth-child(19):hover>div{background-image:url(../img/19_on.jpg);}
.item:nth-child(20):hover>div{background-image:url(../img/20_on.jpg);}
.item:nth-child(22):hover>div{background-image:url(../img/22_on.jpg);}
.item:nth-child(27):hover>div{background-image:url(../img/07_on.jpg);}