.slider{
    width: 400px;
    height: 380px;
    position: relative;
    margin: 0 auto;
    overflow: hidden; /* 현재 슬라이드 오른쪽에 위치한 나머지 슬라이드 들이 보이지 않도록 가림 */
}
.slider input[type=radio]{
    display: none;
}

ul.imgs{
    padding: 0;
    margin: 0;
    list-style: none;    
}
ul.imgs li{
    position: absolute;
    left: 400;
    transition-delay: 1s; /* 새 슬라이드가 이동해 오는 동안 이전 슬라이드 이미지가 배경이 보이도록 지연 */

    padding: 0;
    margin: 0;
}

.bullets{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    z-index: 2;
}
.bullets label{
    display: inline-block;
    border-radius: 50%;
    background-color: rgba(1,1,1,0.55);
    width: 17px;
    height: 17px;
    cursor: pointer;
}
/* 현재 선택된 불릿 배경 흰색으로 구분 표시 */
.slider input[type=radio]:nth-child(1):checked~.bullets>label:nth-child(1){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(2):checked~.bullets>label:nth-child(2){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(3):checked~.bullets>label:nth-child(3){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(4):checked~.bullets>label:nth-child(4){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(5):checked~.bullets>label:nth-child(5){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(6):checked~.bullets>label:nth-child(6){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(7):checked~.bullets>label:nth-child(7){
    background-color: #fff;
}

.slider input[type=radio]:nth-child(1):checked~ul.imgs>li:nth-child(1){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(2):checked~ul.imgs>li:nth-child(2){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(3):checked~ul.imgs>li:nth-child(3){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(4):checked~ul.imgs>li:nth-child(4){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(5):checked~ul.imgs>li:nth-child(5){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(6):checked~ul.imgs>li:nth-child(6){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(7):checked~ul.imgs>li:nth-child(7){
    left: 0;
    transition: 0.5s;
    z-index:1;
}

.slider input[type=radio]:nth-child(11):checked~.bullets>label:nth-child(11){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(12):checked~.bullets>label:nth-child(12){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(13):checked~.bullets>label:nth-child(13){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(14):checked~.bullets>label:nth-child(14){
    background-color: #fff;
}	
.slider input[type=radio]:nth-child(11):checked~ul.imgs>li:nth-child(11){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(12):checked~ul.imgs>li:nth-child(12){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(13):checked~ul.imgs>li:nth-child(13){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(14):checked~ul.imgs>li:nth-child(14){
    left: 0;
    transition: 0.5s;
    z-index:1;
}

.slider input[type=radio]:nth-child(21):checked~.bullets>label:nth-child(21){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(22):checked~.bullets>label:nth-child(22){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(23):checked~.bullets>label:nth-child(23){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(24):checked~.bullets>label:nth-child(24){
    background-color: #fff;
}	
.slider input[type=radio]:nth-child(21):checked~ul.imgs>li:nth-child(21){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(22):checked~ul.imgs>li:nth-child(22){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(23):checked~ul.imgs>li:nth-child(23){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(24):checked~ul.imgs>li:nth-child(24){
    left: 0;
    transition: 0.5s;
    z-index:1;
}

.slider input[type=radio]:nth-child(31):checked~.bullets>label:nth-child(31){
    background-color: #fff;
}
.slider input[type=radio]:nth-child(32):checked~.bullets>label:nth-child(32){
    background-color: #fff;
}

.slider input[type=radio]:nth-child(31):checked~ul.imgs>li:nth-child(31){
    left: 0;
    transition: 0.5s;
    z-index:1;
}
.slider input[type=radio]:nth-child(32):checked~ul.imgs>li:nth-child(32){
    left: 0;
    transition: 0.5s;
    z-index:1;
}