@charset "UTF-8";

/*	레이아웃	*/
body{display:flex; flex-wrap:wrap; width:100%; word-break:keep-all;}
body header{flex-grow:1; flex-basis:15%; max-width:15%; min-height:900px; background:#3d3d3d; color:white;
	transition: flex-basis 0.3s ease, max-width 0.3s ease;
}
body header.invisible{flex-basis:0px; max-width:0%;}
body header.invisible > body .contents{flex-basis:100% !important; max-width:100% !important;}
body .contents{flex-grow:1; flex-basis:85%; max-width:85%; padding:50px 20px; min-height:900px; word-break:break-all; margin:auto;
	transition: flex-basis 0.3s ease, max-width 0.3s ease;
}
.top{display:block; width:100%; line-height:50px; background:#3d3d3d; color:white;}
.top ul{display:flex; float:right; width:30%;}
.top ul li{flex-grow:1; text-align: center;}
.top ul li button, body .top ul li a{display:block; width:100%; line-height:50px; color:white;}
.top ul li button:hover, body .top ul li a:hover{background:white; color:black;}
.top .top-logo{display:block; width:30%; float:left;}
.top .top-logo img{display:block; width:auto; height:50px; margin:auto;}

.btn-memu{display:none}

/*	위로 올라가기 버튼	*/
.btn-top{position:fixed; bottom:10px; right:10px; display:block; width:50px; height:50px; background:black; color:white; border-radius:50%;}


header{position:relative;}
header .menu-list{display:block; width:100%;}
header .menu-list li{display:block; width:100%;}
header .menu-list li a{display:block; width:100%; line-height:35px; padding-left:10px; color:white;}
header .menu-list li a:hover, header .menu-list li a.active{background:white; color:black;}
header .menu-list li p{text-align: center; font-weight: bold; /* border-bottom:1px solid white; padding-bottom:10px; */ background:#494949; color:white;}
header #menu-move{display:block; width:50px; height:50px; position:absolute; top:0px; right:-50px; border:1px solid #cbcbcb; font-size:25px;}

footer{display:block; width:100%; height:100px; text-align: center; background:black; align-content: center;}

input,select{display:block; width:95%;  height:30px; line-height:30px; margin:3px auto;}
input[type=radio], input[type=checkbox]{display:inline-block; width:auto;}
textarea{display:block; width:95%; height:250px; margin:2px auto;}

/*	검색 폼	*/
[name=searchForm]{display:flex; flex-wrap:wrap; width:70%; margin:30px auto;}
[name=searchForm] input, [name=searchForm] select, [name=searchForm] button{flex-grow:1; height:50px; line-height:50px; margin-right:5px; padding:0px !important;}


/*	에러페이지	*/
.error-wrap {display:block; width:100%; height:100vh; align-content: center;}
.error-content{display:block; width:90%; margin:auto;}
.error-content p{text-align: center; font-size:20px;}
.error-content span{display:block; margin:auto; text-align: center; word-break:break-all;  word-break:break-all;}
.error-content .btns{display:flex; width:50%; margin:20px auto; text-align: center;}
.error-content .btns button{flex-grow:1; margin-right:10px; border-radius:10px; line-height:40px;}
.error-content .btns button.btn-prev{background:gray; color:white;}
.error-content .btns button.btn-home{background:purple; color:white;}

/*	스크롤 바	*/
/* Chrome, Safari, Opera */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-thumb {background-color: #cbcbcb;}
/* Firefox */
::-moz-scrollbar {width: 5px;}
::-moz-scrollbar-thumb {background-color: #cbcbcb;}


/*	테이블	*/
.table{width:100%; border-collapse: collapse; margin:15px auto;}
.table th, .table td{border:1px solid black; line-height: 40px; text-align: center;}
.table th{background:black; color:white;}
.table img, .table video{display:block; max-width:100%; max-height:100%;}
.table .active, .table .active a,.table .active button{background:black; color:white;}


/*	게시판 보기/등록	*/
.board-data-wrap{display:block; width:100%; margin:30px auto;}
.board-data-wrap .board-data-item{display:flex; width:100%;}
.board-data-wrap .board-data-item .board-data-title{flex-grow:1; flex-basis:25%; background:black; color:white; text-align: center; padding:10px 0px; border-bottom:1px solid white;}
.board-data-wrap .board-data-item .board-data-value{flex-grow:1; flex-basis:75%;  word-break:break-all; padding:10px 0px; padding-left:10px; border-bottom:1px solid #cbcbcb;}
.file-list{display:block; width:100%;}
.file-list li{display:block; width:100%;}
.file-list li img{display:block; max-width:100%; margin:auto;}


/*	보기/등록	*/
.info-wrap{display:block; width:100%; margin:30px auto;}
.info-wrap .info-item{display:flex; width:100%;}
.info-wrap .info-item .info-title{flex-grow:1; flex-basis:25%; background:black; color:white; text-align: center; padding:10px 0px; border-bottom:1px solid white;}
.info-wrap .info-item .info-value{flex-grow:1; flex-basis:75%;  word-break:break-all; padding:10px 0px; padding-left:10px; border-bottom:1px solid #cbcbcb;}
.info-wrap .info-item .info-value img{max-height:300px;}


/*	버튼	*/
.btn{padding:7px 20px; color:white; border-radius:10px; align-content: center; font-size:20px; vertical-align: middle; margin:0px 5px 0px 5px;}
.btn-primary{background:#509dff;}
.btn-primary:hover{background:#3572c1;}
.btn-success{background:#0cd74c;}
.btn-success:hover{background:#15b146;}
.btn-danger{background:#db0707;}
.btn-danger:hover{background:#b51010;}
.btn-list{background:#cc18df;}
.btn-list:hover{background:#a214b1;}


/*	갤러리		*/
.gallery{display:flex; flex-wrap:wrap; width:100%;}
.gallery li{flex-grow:1; flex-basis:20%; max-width:20%; padding:10px;}
.gallery li img, .gallery li video{display:block; max-width:100%; height:100%; border-radius:15px;}

/*	탭메뉴	*/
.tab-menu{display:flex; width:70%; margin:20px auto;}
.tab-menu li{flex-grow:1; padding:10px;}
.tab-menu li button, .tab-menu li a{display:block; width:100%; line-height: 30px; text-align: center; border:1px solid black; border-radius:15px;}
.tab-menu li button.active, .tab-menu li a.active, .tab-menu li button:hover, .tab-menu li a:hover{background:black; color:white;}
.tab-content{display:none; width:100%;}
.tab-content.active{display:block;}


/*	페이징	*/
.paging{display:flex; width:100%; margin:30px auto;}
.paging li{flex-grow:1; height:40px; line-height:40px;}
.paging li button{display:block; width:80%; height:80%; margin:auto; border:1px solid black; border-radius:10px;}
.paging li button.active, .paging li button:hover{background:black; color:white;}


/*	식단표		*/
.food-list{display:block; width:80%; margin:auto;}
.food-list li{display:flex; flex-wrap:wrap; width:100%; margin-bottom:30px; box-shadow: 2px 2px #cbcbcb; border-radius: 15px;}
.food-list li .menu-date{flex-grow:1; flex-basis:100%; text-align: center; font-weight: bold; margin:10px auto;}
.food-list li .menu-item{flex-grow:1; flex-basis:50%; text-align: center; margin:10px auto;}
.food-list li .img{flex-grow:1; flex-basis:50%; align-content: center; margin:10px auto;}
.food-list li .img img{display:block; max-width:100%; height:300px; margin:auto;}
.food-list li .menu-btns{flex-grow:1; flex-basis:100%; text-align: center; margin:10px auto;}


/*	로그인	*/
[name=loginForm]{display:block; width:50%; border:1px solid #cbcbcb; border-radius:25px; margin:30px auto; padding:15px;}
[name=loginForm] input{height:40px;}
[name=loginForm] .login-btns{display:flex;}
[name=loginForm] .btn-login{display:block; width:100%; margin:10px auto; background:#9f9f9f; color:white; border-radius:10px; padding:15px 0px; font-size:17px;}
[name=loginForm] .btn-register{display:block; width:100%; text-align: center; color:gray; margin:20px auto;}
[name=loginForm] .sns-list{display:flex; width:70%; margin:20px auto;}
[name=loginForm] .sns-list li{flex-grow:1; text-align: center; height:100px;}
[name=loginForm] .sns-list li a{display:block; width:100%;}
[name=loginForm] .sns-list li a img{display:block; width:30%; margin:auto;}

/*	마이페이지	*/
.sns-info .btn{padding:3px 10px; font-size:1rem;}

/*	CKEDITOR	*/
.ck-content ul li{list-style: disc; margin-left:30px;}
.ck-content ul li ul li{list-style: circle;}

/*	회원가입 - 개인정보처리방침 */
.privacy-wrap{display:block; width:100%; height:300px; overflow-y:scroll; background:#f5f5f5; padding:20px;}
.privacy-wrap label {display:block; width:100%; text-align:right; margin-bottom:20px;}


/*	메인	*/
.main{display:block; width:100%;}
.main header{display:block; width:100%; min-height:35px; max-width:100%; position:fixed; top:0px; left:0px;}
.main header .menu-list{display:flex; width:100%;}
.main header .menu-list li{flex-grow:1; text-align: center;}
.main .contents{display:block; width:100%; max-width:100%; margin-top:50px;}

/*	메인페이지 달력	*/
.calendar-btns{display:flex; width:50%; margin:20px auto;}
.calendar-btns li{flex-grow:1;}
.calendar-btns li a, .calendar-btns li p{display:block; width:100%; text-align: center;}
.calendar-btns li p{font-weight: bold;}


/* 여자 사진보기 - 인스타 처럼 */
.insta-profiles{display:block; width:100%; overflow-x:scroll; height:150px; white-space:nowrap}
.insta-profiles .profile{display:inline-block; width:100px; height:100px; text-align: center; margin:0px 5px; font-size:13px;}
.insta-profiles .profile:hover, .insta-profiles .profile.active{background:#ffbdff}
.insta-profiles .profile img{display:block; width:100%; height:100%; border-radius:50%;}


/*	달력	*/
.calendar{display:flex; flex-wrap:wrap; width:100%;}
.calendar .day-item{flex-grow:1; flex-basis:13.5%; max-width:13.5%; color:black; text-align: center; border:1px solid black; line-height: 30px; margin:5px;
  border-radius:10px;}
.calendar .sun, .calendar .holiday{color:#f57272;}
.calendar .sat{color:#7c94d4;}
.calendar .menu-info{display:block; width:100%; line-height: 20px;}
.calendar .menu-info.on-img{cursor: pointer;}
.calendar .vacation-info{display:block; width:100%; background:black; color:white; border-bottom: 1px solid white;}
.calendar .day-str{display:block; width:100%; border-bottom:1px solid white; border-radius: 10px 10px 0px 0px;}
.calendar .day-str.today{background:black; color:white;}
.calendar .today-wrap{background:#d7e6f8;}
.calendar .anvsr-info{display:block; width:100%; background:#ee8d9d; color:white; border-bottom: 1px solid white; }
.calendar .sch-info{display:block; width:100%; background:#98d8f1; color:#000000; border-bottom: 1px solid white; }

/*  공통 목록    */
.data-list{display:block; width:80%; margin:auto;}
.data-list .items{display:flex; width:100%; padding:20px; margin:10px auto; background:#d1d1d1; border-radius:15px;}
.data-list .items button{padding:2px 5px; margin:auto;}
.data-list .items .infos{flex-grow:1; max-width:80%;}
.data-list .items .infos span{border-right:1px solid black; padding:0px 10px 0px 10px;}
.data-list .items .infos span:last-child{border:none;}
.data-list .items .infos span img{max-height:200px;}
.data-list .items .infos .title{display:block; width:100%; font-size:18px;}
.data-list .items .infos .etc{display:block; width:100%; text-align: right;}
.data-list .items .btns{flex-grow:1; max-width:20%; text-align: center; align-content: center;}


/*	BERRY	*/
.video-wrap{display:block; width:100%;}
.video-wrap .video-content{display:block; width:100%;}
.video-wrap .video-content video{display:block; width:auto; max-height:350px; margin:auto;}
.video-wrap .video-btn{display:flex; width:100%; margin:20px auto;}
.video-wrap .video-btn li{flex-grow:1; text-align: center;}
.video-wrap .video-btn li button{display:block; width:100%; line-height:35px; color:white;}
.video-wrap .video-btn li button.btn-prev, .video-wrap .video-btn li button.btn-next{background:#54b2f7;}
.video-wrap .video-btn li button.btn-full{background:#ff6eec;}
.video-wrap .video-btn li button.btn-upt{background:#53cb58;}
.video-wrap .video-btn li button.btn-del{background:#ff5858;}


@media all and (max-width:768px) {
	/*	레이아웃	*/
	body{display:block; width:100%;}
	
	.btn-memu{position:fixed; display:block; top:5px; right:5px; padding:10px 20px; background:black; color:white; border:1px solid white; border-radius:15px;
		z-index:9;}
	
	body header, body.main header{display:none;}
	body .top{position:fixed; top:0px; left:0px;}
	body header.active{display:block; position:fixed; top:50px; left:0px; width:100%; max-width:100%;}
	body header.active .top-logo{display:none;}
	body header.active .menu-list{height:700px; overflow-y:scroll;}
	body .contents, body.main .contents{max-width:100%; padding:0px;}
	
	.top{display:block; position:absolute; top:0px; left:0px;}
	.top ul{display:flex; width:80%; float:left;}
	.top ul li{flex-grow:1;}
	
	[name=searchForm]{width:100%;}
	.paging{width:100%;}

	/*	메뉴	*/
	.btn-menu{position:absolute; top:0px; right:0px; background:white; padding:10px; border:1px solid black; z-index:99;}
	header .menu-wrap, .main header .menu-wrap{position:absolute; top:0px; left:0px; width:100%; height:100vh; background:white; z-index:9;}
	header .menu-list, .main header .menu-list{display:block; width:100%;}
	header .menu-list li, .main header .menu-list li{width:100%;}
	header .menu-list.depth-1 li, .main header .menu-list.depth-1 li{padding-left:10px;}
	header .menu-list .depth-2 li, .main header .menu-list .depth-2 li{padding-left:30px;}
	header .menu-list .depth-3 li, .main header .menu-list .depth-3 li{padding-left:50px;}
	header .menu-list li a, header .menu-list li button
	, .main header .menu-list li a, .main header .menu-list li button{display:block; width:100%; height:100%; align-content: center; color:white;}
	
	
	
	/*	갤러리	*/
	.gallery li{flex-basis:50%; max-width:50%;}
	
	
	/*	로그인	*/
	[name=loginForm]{display:block; width:90%; border:1px solid #cbcbcb; border-radius:25px; margin:30px auto; padding:15px;}
	[name=loginForm] input{height:40px;}
	[name=loginForm] .login-btns{display:flex;}
	[name=loginForm] .btn-login{display:block; width:100%; margin:10px auto; background:#9f9f9f; color:white; border-radius:10px; padding:15px 0px; font-size:17px;}
	[name=loginForm] .btn-register{display:block; width:100%; text-align: center; color:gray; margin:10px auto;}
	[name=loginForm] .sns-list{display:flex;}
	[name=loginForm] .sns-list li{flex-grow:1; text-align: center; height:100px;}
	[name=loginForm] .sns-list li a{display:block; width:100%;}
	[name=loginForm] .sns-list li a img{display:block; width:50%; margin:auto;}
	
	
	/*	식단표		*/
	.food-list{width:100%;}
	.food-list li .img img{height:150px;}
	
	/*	공통 목록	*/
	.data-list{width:100%;}
	.data-list .items{display:block;}
	.data-list .items .infos{max-width:100%;}
	.data-list .items .btns{max-width:100%;}

	/*	달력	*/
	.calendar .day-item{margin:1px; font-size:13px;}
}