style2.css

@import url('https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
* {
    margin: 0;      /* 마진값 초기화 */
    padding: 0;     /* 패딩값 초기화 */
    box-sizing: border-box;         /* 박스영역은 테리지 지정 */
}

a {
    text-decoration: none;
}
ul {
    list-style-type:none;
}


body {
    overflow-x: hidden;
    background-color: #f8f7f8;

}

#container {
    margin: 0 auto;     /* 화면 중앙에 배치 */  
    width: 100%;      /* 너비 지정 */

}

/* 헤더 영역 */

header {
    width: 100%;
    height: 80px;
    background-color: #bbd8db;
}


/* 로고 영역 */

#logo {
       width: 250px;
    height: 70px;
    line-height:70px;
    padding-left:20px;
}
#logo h1 {
    font-family: 'Oleo Script Swash Caps', cursive;
    font-weight: 300;
    font-size:35px;
    color:#fcfbfc;
    text-shadow: 0 -3px #bbb;

}



/* 이미지 슬라이드 쇼 영역 */
#slideShow {
    clear: both;        /* 플로팅 해제 */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 이미지 체크박스 */

#side-menu #collapsible {
    display: none;

}
#side-menu input[type=checkbox]+label {
    top : 85px;
    right: 0px;
    padding-right: 50px;
    padding-bottom: 100px;
    background-image: url('./img/menu.png');
    background-size: 50px 50px;
    background-repeat: no-repeat;
    cursor:pointer;
    position:fixed; 
    transition: all .35s;
    z-index: 10;
    
}

#side-menu input[type=checkbox]:checked+label {
    background-image: url('./img/cancel.png');
    background-size: 50px 50px;
    position:fixed; 
    transition: all .35s;
    right: 350px;
    z-index: 10;
}
#side-menu input[type=checkbox]+label > span {
    font-weight: bold;
}

/* + : 인접요소 선택자 . 사용 이유는 전과 후를 연달아 선택해서 전과 후에 변화값을 주기위해*/
#side-menu input[type=checkbox]:checked+label+div {
    right:0;     /*포지션 지정.. sidebar가 -400에 있다가 0으로 바껴서 보이게 된다*/
}



/* 사이드바 */
div[class="sidebar"] { /* .sidebar .... []: 속성 선택자*/
    top : 80px;
    width:350px;
    height:95%;
    background: #ccc;
   position:fixed;        /*스크롤해도 그 위치에 고정시키기 */  
     right: -350px;          /* sidebar의 넓이값인데 가릴때는 안보이게! */
    z-index: 1;            /*변화하는 값에 우선순위지정*/
    transition: all .35s;
    opacity: 0.8;
}   


 /*  검색창  */
div[class="sidebar"] > div[class="search"] {
    position: relative;
    width: 100%;
    border-bottom: 5px double  rgb(113, 111, 111);

}

#search-list {
    margin: 20px 0px 20px 30px;
    width: 75%;
    border: 1px solid #bbb;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 14px;
    position: center;
}
 

#side-menu #searchBtn {
    display: none;

}

#side-menu input[type=button]+label {
    background-image: url('./img/search.png');
    background-size: 29px 34px;
    background-repeat: no-repeat;
    cursor:pointer;
    position:absolute; 
    top: 18px;
    right: 14px;
    margin: 0;
    padding-right: 35px;
    padding-bottom: 35px;
}

#side-menu input[type=button]:active+label {
    background-image: url('./img/search.png');
    background-size: 29px 34px;
    background-repeat: no-repeat;
    cursor:pointer;
    position:absolute; 
    top: 18px;
    right: 14px;
    margin: 0;
    padding-right: 35px;
    padding-bottom: 35px;
    transform: scale(0.8);
}






/* 탭(카테고리) 메뉴 */
.tab-menu {
    width: 100%;
}

#tab_list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.tab-cate {
    display: block;
    text-align: center;
    padding: 18px 16px;
    text-decoration: none;
    background-color: #87c6c9;
    border-bottom: 2px solid  rgb(113, 111, 111);
    font-weight: bold;
}

.tab-radio input[type="radio"] {
    display: none;
}

.tab-radio input[type="radio"]+label:hover {

    background-color: rgb(113, 111, 111);
    color: #c3e3e4;
    cursor: pointer;
}


.tab-radio input[type="radio"]+label {
    display: block;
    text-align: center;
    padding: 18px 16px;
    text-decoration: none;
    border-bottom: 2px solid  rgb(113, 111, 111);
    background-color: #eee;

}

.tab-radio input[type="radio"]:checked+label {
    display: block;
    text-align: center;
    color: red;
    padding: 18px 16px;
    text-decoration: none;
    border-bottom: 2px solid rgb(113, 111, 111);
    background-color: #c3e3e4;

}

/* 탭(현재/예정) 메뉴 */

.tab_list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}


.tab_check input[type="radio"] {
    display: none;
}

.tab_check input[type="radio"]+label:hover {

    background-color: rgb(113, 111, 111);
    color: #c3e3e4;
    cursor: pointer;

}


.tab_check input[type="radio"]+label {
    display: block;
    text-align: center;
    padding: 18px 16px;
    text-decoration: none;
    border-bottom: 2px solid  rgb(113, 111, 111);
    background-color: #eee;
}

.tab_check input[type="radio"]:checked+label {
    display: block;
    text-align: center;
    color: red;
    padding: 18px 16px;
    text-decoration: none;
    border-bottom: 2px solid  rgb(113, 111, 111);
    background-color: #c3e3e4;

}

/* 이동 버튼 */

#list-btn {
    margin: 20px 0px 20px 230px;
    width: 30%;
    border: 2px solid rgb(113, 111, 111);
    border-radius: 30px;
    padding: 7px 10px;
    font-size: 14px;
     box-shadow: 3px 3px 3px rgb(113, 111, 111);
     transition-duration: 0.2s;
     cursor: pointer;

}

#list-btn:active {
    background-color: #87c6c9;
    box-shadow:none;

}


/* 목록 수 표시 생성 */

#num-search {
    position:relative;
    left:70px;
    top :15px;
    font-size: 20px;
}



/* 목록 생성 */

#menuList{
    display:flex;
    flex-wrap:wrap;
    width: 100%;
    margin: 30px auto;
    border-top: 1px solid rgba(0,0,0,0.25);
    white-space: nowrap;

}

.show-list {
    border-radius: 10px;
    margin: 15px 0px 0px 53px;
    width: 220px;
    height: 270px;
    background-color: #c3e3e4;
    transition: all 0.3s cubic-bezier(0.42,0.0,0.58,1.0);


}
.show-list:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    transform: translateY(-10px);
}

.show-list > .clt-img {
    box-sizing: border-box;
    width: 210px;
    height: 180px;
    margin: 5px 4px;
    border-radius: 10px;
    overflow: hidden;


}

.show-list > .clt-title {
 
  white-space: pre-wrap;
    box-sizing:border-box;
    width: 210px;
    height: 75px;
    margin: 15px 4px;

}




/* 라이트박스 컨테이너 */
#lightbox.active{
	position: fixed; overflow: hidden;
	background: rgb(84, 83, 83);
	width: 800px; height: 540px;
	left: 50%; margin-left: -400px;
	top: 50%; margin-top: -250px;
	box-sizing: border-box; padding: 30px;
	z-index: 99; display: block;
}
#lightbox{ display: none; }
#lightbox h1, #lightbox p{ 
	color: white; text-align: center;
	margin-bottom: 10px;
}

/*인포 박스*/

#info a{
    color: rgb(95, 175, 255);
}
#info a:active{
    color: red;
}


/* 이미지 박스 */
figure{ 
	width: 800px; height: 250px;
	position: absolute;
	margin: 10px 0px 0px 160px;
	overflow: hidden;
}
figure img{
    width: 400px; height: 340px;
	display: none;
 	position: absolute;
}
figure img.active{ display: block; }

/* 창닫기 버튼 */
.btn-close{
	position: absolute;
	top: 0px; right: 0px;
	padding: 10px;
	color: white; font-size: large;
}
.btn-close:hover{ background-color: #666; }


/* 라이트 박스 배경 처리 */
#block{ 
	position: fixed;
	width: 100%; height: 100%;
	top: 0; bottom: 0; left: 0; right: 0;
	background: #111;
	opacity: 0.5; z-index: 9;
	display: none;
}
#block.active{ display: block;}