<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>이미지 슬라이드</title>
<style>
* {margin:0;padding:0; font-family: Arial, Helvetica, sans-serif;}
.section {}
.section input[id*="slide"] {display:none;}
.section .slide-wrap {max-width:1200px;max-height: 760px; margin:0 auto;}
.section .slidelist {white-space:nowrap;font-size:0;overflow:hidden;}
.section .slidelist > li {display:inline-block;vertical-align:middle;width:100vw;transition:all .5s;}
.section .slidelist > li > a {display:block;position:relative;}
.section .slidelist > li > a img {width:100vw; height: 100vh; object-fit: cover;}
.section .slidelist label {position:absolute;z-index:10;top:50%;transform:translateY(-50%);padding:50px;cursor:pointer; width: 10%;}
.section .slidelist .left {padding: 20px;left:10px;background:url('<https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F5b7AL%2FbtqYLyw3Un7%2Fo3zNUFSSieJghanP2Hm1Wk%2Fimg.png>') center center / 2.5vw no-repeat;}
.section .slidelist .right {padding: 20px;right:10px;background:url('<https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVNSIt%2FbtqYxpvhOsD%2FRAiM5KtxiIM54U1a3jCcP1%2Fimg.png>') center center / 2.5vw no-repeat;}
.section .slidelist .textbox {position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);line-height:1.6;text-align:center;}
.section .slidelist .textbox h3 {font-size:3vw;color:rgb(255, 158, 46);opacity:0;transform:translateY(30px);transition:all .5s;background-color: rgba(0, 0, 0, 0.55);padding: 15px 15px 0 15px;border-radius: 15px 15px 0 0;}
.section .slidelist .textbox p {font-size:2.5vw;color:rgb(212, 179, 141);opacity:0;transform:translateY(30px);transition:all .5s;background-color: rgba(0, 0, 0, 0.55); padding: 0 15px 15px 15px;border-radius: 0 0 15px 15px;}
.section input[id="slide01"]:checked ~ .slide-wrap .slidelist > li {transform:translateX(0%);}
.section input[id="slide02"]:checked ~ .slide-wrap .slidelist > li {transform:translateX(-100%);}
.section input[id="slide03"]:checked ~ .slide-wrap .slidelist > li {transform:translateX(-200%);}
.section input[id="slide01"]:checked ~ .slide-wrap li:nth-child(1) .textbox h3 {opacity:1;transform:translateY(0);transition-delay:.2s;}
.section input[id="slide01"]:checked ~ .slide-wrap li:nth-child(1) .textbox p {opacity:1;transform:translateY(0);transition-delay:.4s;}
.section input[id="slide02"]:checked ~ .slide-wrap li:nth-child(2) .textbox h3 {opacity:1;transform:translateY(0);transition-delay:.2s;}
.section input[id="slide02"]:checked ~ .slide-wrap li:nth-child(2) .textbox p {opacity:1;transform:translateY(0);transition-delay:.4s;}
.section input[id="slide03"]:checked ~ .slide-wrap li:nth-child(3) .textbox h3 {opacity:1;transform:translateY(0);transition-delay:.2s;}
.section input[id="slide03"]:checked ~ .slide-wrap li:nth-child(3) .textbox p {opacity:1;transform:translateY(0);transition-delay:.4s;}
</style>
</head>
<body>
<div class="section">
<input type="radio" name="slide" id="slide01" checked>
<input type="radio" name="slide" id="slide02">
<input type="radio" name="slide" id="slide03">
<div class="slide-wrap">
<ul class="slidelist">
<li>
<a>
<label for="slide03" class="left"></label>
<div class="textbox">
<h3>42 스터디 페이지</h3>
<p>42서울 과제들을 공부하며
<br>알게된 내용들을 함께 정리하는 공간</p>
<i></i>
</div>
<img src="<https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F7Rt66%2FbtqYLyX8cDI%2Fia4efrLTxvzw1wQyE2VJ8k%2Fimg.png>">
<label for="slide02" class="right"></label>
</a>
</li>
<li>
<a>
<label for="slide01" class="left"></label>
<div class="textbox">
<h3>알고리즘 페이지</h3>
<p>알고리즘 문제를 해결하고 풀이을 공유하는 공간</p>
</div>
<img src="<https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHfRls%2FbtqYB535KvY%2FwhR6XKi39EyfHwjYUKJJMK%2Fimg.png>">
<label for="slide03" class="right"></label>
</a>
</li>
<li>
<a>
<label for="slide02" class="left"></label>
<div class="textbox">
<h3>끄적끄적 페이지</h3>
<p>개별적으로 공부한 내용을 정리 및 공유하고<br> 다른 스터디원들의 지식들을 배울 수 있는 공간</p>
</div>
<img src="<https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuFtSb%2FbtqYIj8g8Ob%2F1yYRiSsOHKssKqXaHsH2w1%2Fimg.png>">
<label for="slide01" class="right"></label>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>