.section [id*="slide"] {display:none;}
	
/* 슬라이드 영역 - max-width 크기를 조절해주면 됩니다*/
.section .slidewrap {max-height: 100%; margin:0 auto;overflow:hidden;position:relative;}
.section .slidelist {white-space:nowrap;font-size:0;}
.section .slidelist > li {display:inline-block;vertical-align:middle;width:100%;transition:all .5s;}
.section .slidelist > li > a {display:block;position:relative;}

/* 좌우로 넘기는 LABEL버튼에 대한 스타일 */
.section .slide-control {position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;}
.section .slide-control label {position:absolute;z-index:1;top:50%;transform:translateY(-50%);padding:50px;cursor:pointer;}
.section .slide-control .left {left:30px;background:url('./img/left.png') center center / 100% no-repeat;}
.section .slide-control .right {right:30px;background:url('./img/right.png') center center / 100% no-repeat;}
.section .slide-control [class*="control"] {display:none;}

/* INPUT이 체크되면 변화값이 li까지 전달되는 스타일 */
.section [id="slide01"]:checked ~ .slidewrap .slidelist > li {transform:translateX(0%);}
.section [id="slide02"]:checked ~ .slidewrap .slidelist > li {transform:translateX(-100%);}
.section [id="slide03"]:checked ~ .slidewrap .slidelist > li {transform:translateX(-200%);}
	
/*  INPUT이 체크되면 변화값이 좌우 슬라이드 버튼을 담고 있는 div 까지 전달되는 스타일 */
.section [id="slide01"]:checked ~ .slidewrap .control01 {display:block;}
.section [id="slide02"]:checked ~ .slidewrap .control02 {display:block;}
.section [id="slide03"]:checked ~ .slidewrap .control03 {display:block;}