/* 공통 CSS */
/* ---------------------------------------------------------------------------------------------------------- */
@import url(reset.css);
@import url(common.css);    

/* 갤러리 CSS */
/* ---------------------------------------------------------------------------------------------------------- */
#container { border-top:1px solid #CCC; }
#container .info a { position:relative; color:#FFF; font:bold 16px/45px Calibri, Candara, "Gill Sans", "Gill Sans MT", sans-serif; }
#container .info p { position:absolute; bottom:0; width:100%; height:50px;
 background: #191919; } 
#container .info li .line-color { position:absolute; top:-1; left:0; width:0%; height:100%; z-index:10; }
#container .info li:hover .line-color { width:100%; -webkit-transition:0.5s linear; -moz-transition:0.5s linear; 
-o-transition:0.5s linear; transition:0.5s linear; }
#container .info li:hover img { 
-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
-o-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); 
-webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; 
-o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; }

#flb-lightbox-image { -webkit-box-shadow:0 2px 10px rgba(0,0,0,0.9); -moz-box-shadow:0 2px 10px rgba(0,0,0,0.9);
-o-box-shadow:0 2px 10px rgba(0,0,0,0.9); box-shadow:0 2px 10px rgba(0,0,0,0.9); }
#flb-lightbox-text { -webkit-box-shadow:0 -2px 10px rgba(0,0,0,0.9); -moz-box-shadow:0 -2px 10px rgba(0,0,0,0.9);
-o-box-shadow:0 -2px 10px rgba(0,0,0,0.9); box-shadow:0 -2px 10px rgba(0,0,0,0.9); }

/* 랜덤 이미지 하버효과 CSS */
html.color0 #container .line-color{ border-bottom: 4px solid #ee7a49; }
html.color1 #container .line-color{ border-bottom: 4px solid #f5db22; }
html.color2 #container .line-color{ border-bottom: 4px solid #57BC8A; }
html.color3 #container .line-color{ border-bottom: 4px solid #4EA8D7; }
html.color4 #container .line-color{ border-bottom: 4px solid #AB7DC2; }
html.color5 #container .line-color{ border-bottom: 4px solid #ff6486; }
/* 플립라이트박스 글자색 */
html.color0 #flb-back-pic, html.color0 #flb-next-pic { color: #ee7a49; }
html.color1 #flb-back-pic, html.color1 #flb-next-pic { color: #f5db22; }
html.color2 #flb-back-pic, html.color2 #flb-next-pic { color: #57BC8A; }
html.color3 #flb-back-pic, html.color3 #flb-next-pic { color: #4EA8D7; }
html.color4 #flb-back-pic, html.color4 #flb-next-pic { color: #AB7DC2; }
html.color5 #flb-back-pic, html.color5 #flb-next-pic { color: #ff6486; }
/* 플립라이트박스 텍스트 상자 보더 */
html.color0 #flb-lightbox-text{ border-top: 4px solid #ee7a49; }
html.color1 #flb-lightbox-text{ border-top: 4px solid #f5db22; }
html.color2 #flb-lightbox-text{ border-top: 4px solid #57BC8A; }
html.color3 #flb-lightbox-text{ border-top: 4px solid #4EA8D7; }
html.color4 #flb-lightbox-text{ border-top: 4px solid #AB7DC2; }
html.color5 #flb-lightbox-text{ border-top: 4px solid #ff6486; }

/* 마손니 그리드 CSS */
/* ---------------------------------------------------------------------------------------------------------- */
*, *:after, *:before { -webkit-box-size:border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
.grid { max-width: 68em; list-style: none; margin: 20px auto; padding: 0; }
.grid li { display: block; float: left; padding: 7px; width: 25%; opacity: 0; }
.grid li.shown, .no-js .grid li, .no-cssanimations .grid li { opacity: 1; }
.grid li a, .grid li img {outline: none; border: none; display: block; max-width: 100%; }
/* 나타나는 효과  */
.grid.effect { -webkit-perspective: 1300px; perspective: 1300px; }
.grid.effect li.animate { -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
-webkit-transform: scale(0.4); transform: scale(0.4); -webkit-animation: popUp .8s ease-in forwards;
animation: popUp .8s ease-in forwards; }

@-webkit-keyframes helix {
	0% { }
	100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}

@keyframes helix {
	0% { }
	100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
}

@-webkit-keyframes popUp {
	0% { }
	70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(1); opacity: 1; }
}

@keyframes popUp {
	0% { }
	70% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: .8; 
	-webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

@media screen and (max-width: 740px) {
	.grid li { width: 50%; }
}/*/mediaquery*/

@media screen and (max-width: 480px) {
	.grid li { width: 100%; }
}/*/mediaquery*/

@media screen and (max-width: 320px) {
	.grid {	padding: 10px 0px 100px 10px; }
	.grid li { width: 100%; min-width: 310px; }
}/*/mediaquery*/


/* 헤더영역 fix CSS */
@media screen and (min-width: 320px) {
	header nav ul { height:70px !important; }
	header #menu-btn { height:59px !important; }
}/*/mediaquery*/
@media screen and (min-width: 480px) {
	header nav ul { height:50px !important; }
	header #menu-btn2 { height:59px !important; }
}/*/mediaquery*/
@media screen and (min-width: 740px) {
	header { height:59px !important; }
	header nav ul { height:45px !important; }
}/*/mediaquery*/
@media screen and (min-width: 1025px) {
	header { height:88px !important; }
	header nav ul { height:80px !important; }
}/*/mediaquery*/