body{margin:0px; padding:0px; border:0px;}
.border{background: red; height: 100px;}
.border2{background: blue; height: 100px;}
.border3{background: green; height: 100px;}
.border4{background: yellow; height: 100px;}
.height500{height: 500px;}




/*Container PC Size(1200px~1920px)*/

.width100 {width:100%;}
.width1200px{width:1200px; margin:0 auto;}
.width980px{width:980px; margin:0 auto;}

/*Container Tablet Size1(981~1199px)*/

@media all and (min-width: 981px) and (max-width: 1199px){

	.width100 {width:100%;}
	.width1200px{width:100%; margin:0 auto;}
	.width980px{width:980px; margin:0 auto;}
}

/*Container Tablet Size2(481~980px)*/

@media all and (min-width: 481px) and (max-width:980px){
	.width100 {width:100%;}
	.width1200px{width:100%; margin:0 auto;}
	.width980px{width:100%; margin:0 auto;}	
}

/*Container Mobile Size(1~481px)*/
@media all and (min-width: 1px) and (max-width:480px){
	.width100 {width:100%;}
	.width1200px{width:100%;}
	.width980px{width:100%;}
}

/*Box PC Size(1200px~1920px)*/

.box1{width:100%;}

.box21{width:50%; float:left;}
.box22{width:50%; float:left;}

.box31{width:33.3%; float:left;}
.box32{width:33.3%; float:left;}
.box33{width:33.3%; float:left;}

.box41{width:25%; float:left;}
.box42{width:25%; float:left;}
.box43{width:25%; float:left;}
.box44{width:25%; float:left;}

.box51{width:20%; float:left;}
.box52{width:20%; float:left;}
.box53{width:20%; float:left;}
.box54{width:20%; float:left;}
.box55{width:20%; float:left;}

.box61{width:16.6%; float:left;}
.box62{width:16.6%; float:left;}
.box63{width:16.6%; float:left;}
.box64{width:16.6%; float:left;}
.box65{width:16.6%; float:left;}
.box66{width:16.6%; float:left;}

.box71{width:14.285%; float:left;}
.box72{width:14.285%; float:left;}
.box73{width:14.285%; float:left;}
.box74{width:14.285%; float:left;}
.box75{width:14.285%; float:left;}
.box76{width:14.285%; float:left;}
.box77{width:14.285%; float:left;}

.box81{width:12.5%; float:left;}
.box82{width:12.5%; float:left;}
.box83{width:12.5%; float:left;}
.box84{width:12.5%; float:left;}
.box85{width:12.5%; float:left;}
.box86{width:12.5%; float:left;}
.box87{width:12.5%; float:left;}
.box88{width:12.5%; float:left;}

/* Box Tablet Size 481px~1199px*/
@media all and (min-width: 481px) and (max-width:1199px){

.box41{width:50%;}
.box42{width:50%;}
.box43{width:50%;}
.box44{width:50%;}

.box51{width:50%;}
.box52{width:50%;}
.box53{width:33.333%;}
.box54{width:33.333%;}
.box55{width:33.333%;}

.box61{width:33.3%;}
.box62{width:33.3%;}
.box63{width:33.3%;}
.box64{width:33.3%;}
.box65{width:33.3%;}
.box66{width:33.3%;}


.box71{width:25%;}
.box72{width:25%;}
.box73{width:25%;}
.box74{width:25%;}
.box75{width:33.3%;}
.box76{width:33.3%;}
.box77{width:33.3%;}

.box81{width:25%;}
.box82{width:25%;}
.box83{width:25%;}
.box84{width:25%;}
.box85{width:25%;}
.box86{width:25%;}
.box87{width:25%;}
.box88{width:25%;}

}

@media all and (min-width: 1px) and (max-width:480px){

.box21{width:100%;}
.box22{width:100%;}

.box31{width:100%;}
.box32{width:100%;}	
.box33{width:100%;}	

.box41{width:50%;}
.box42{width:50%;}	
.box43{width:50%;}	
.box44{width:50%;}

.box51{width:100%;}
.box52{width:100%;}
.box53{width:100%;}
.box54{width:100%;}
.box55{width:100%;}

.box61{width:50%;}
.box62{width:50%;}
.box63{width:50%;}
.box64{width:50%;}
.box65{width:50%;}
.box66{width:50%;}

.box71{width:100%;}
.box72{width:50%;}
.box73{width:50%;}
.box74{width:50%;}
.box75{width:50%;}
.box76{width:50%;}
.box77{width:50%;}

.box81{width:50%;}
.box82{width:50%;}
.box83{width:50%;}
.box84{width:50%;}
.box85{width:50%;}
.box86{width:50%;}
.box87{width:50%;}
.box88{width:50%;}

}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -ms-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  }

  @-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
   -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
    -ms-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
   -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
    -ms-transform: translateX(0);
  transform: translateX(0);
  }
  }