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

/* 뮤직 Style */
/* ---------------------------------------------------------------------------------------------------------- */
*, *:after, *:before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
#container { width: 100%; position: relative; border-top:1px solid #CCC; }
.main > p { text-align: center; padding: 50px 20px; }

/* 랜덤색상 */
html.color0 .og-grid li.og-expanded > a:after { border-bottom-color: #ee7a49; }
html.color1 .og-grid li.og-expanded > a:after { border-bottom-color: #f5db22; }
html.color2 .og-grid li.og-expanded > a:after { border-bottom-color: #57BC8A; }
html.color3 .og-grid li.og-expanded > a:after { border-bottom-color: #4EA8D7; }
html.color4 .og-grid li.og-expanded > a:after { border-bottom-color: #AB7DC2; }
html.color5 .og-grid li.og-expanded > a:after { border-bottom-color: #ff6486; }

html.color0 .og-expander { border-top : 4px solid #ee7a49; }
html.color1 .og-expander { border-top : 4px solid #f5db22; }
html.color2 .og-expander { border-top : 4px solid #57BC8A; }
html.color3 .og-expander { border-top : 4px solid #4EA8D7; }
html.color4 .og-expander { border-top : 4px solid #AB7DC2; }
html.color5 .og-expander { border-top : 4px solid #ff6486; }

html.color0 .og-details a:hover { border-color : #ee7a49; }
html.color1 .og-details a:hover { border-color : #f5db22; }
html.color2 .og-details a:hover { border-color : #57BC8A; }
html.color3 .og-details a:hover { border-color : #4EA8D7; }
html.color4 .og-details a:hover { border-color : #AB7DC2; }
html.color5 .og-details a:hover { border-color : #ff6486; }

/* 그리드, 클릭시 Style */
.og-grid { list-style: none; padding: 20px 20px; margin: 0 auto; text-align: center; width: 100%; }
.og-grid li { display: inline-block; margin: 10px 5px 0 5px; vertical-align: top; height: 250px; -webkit-box-shadow:0 1px 8px rgba(0,0,0,0.3); 
-moz-box-shadow:0 1px 8px rgba(0,0,0,0.3); -o-box-shadow:0 1px 8px rgba(0,0,0,0.3); box-shadow:0 1px 8px rgba(0,0,0,0.3); }
.og-grid li > a, .og-grid li > a img { border: none; outline: none; display: block; position: relative; } 
.og-grid li.og-expanded > a:after { top: auto; border: solid transparent; content: " "; height: 0; width: 0; position: absolute;
pointer-events: none; border-bottom-color: #ddd; border-width: 15px; left: 50%; margin: -20px 0 0 -15px; z-index:100; }
.og-expander { position: absolute; background: rgba(0,0,0,0.9); top: auto; left: 0; width: 100%; margin-top: 10px; text-align: left; height: 0;
overflow: hidden; -webkit-box-shadow:0 -2px 2px rgba(0,0,0,0.3); -moz-box-shadow:0 -2px 2px rgba(0,0,0,0.3); 
-o-box-shadow:0 -2px 2px rgba(0,0,0,0.3); box-shadow:0 -2px 2px rgba(0,0,0,0.3); } 
.og-expander-inner { padding: 50px 30px; height: 100%; }
.og-close { position: absolute; width: 40px; height: 40px; top: 20px; right: 20px; cursor: pointer; } 
.og-close::before, .og-close::after { content: ''; position: absolute; width: 100%; top: 50%; height: 1px; background:#999; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition:0.4s ease-out; 
-moz-transition:0.4s ease-out; -o-transition:0.4s ease-out; transition:0.4s ease-out; }
.og-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); }
.og-close:hover::before, .og-close:hover::after { background: #FFF; }
.og-fullimg, .og-details { width: 50%; float: left; height: 100%; overflow: hidden; position: relative; }
.og-details { padding: 0 40px 0 20px; }
.og-fullimg { text-align: center; }
.og-fullimg img { display: inline-block; max-height: 100%; max-width: 100%; }
.og-details h3 { font-weight: 300; font-size: 52px; padding: 40px 0 10px; margin-bottom: 10px; }
.og-details p { font-weight: 400; font-size: 16px; line-height: 22px; color:#999; }
.og-details a { font-weight: 700; font-size: 16px; color: #FFF; text-transform: uppercase; letter-spacing: 2px; padding: 10px 20px;
border: 3px solid #FFF; display: inline-block; margin: 30px 0 0; outline: none; -webkit-transition:0.4s ease-out; -moz-transition:0.4s ease-out; 
 -o-transition:0.4s ease-out; transition:0.4s ease-out; }
.og-details a::before { content: '\2192'; display: inline-block; margin-right: 10px; }
.og-details a:hover { color: #FFF; }
.og-loading { width: 20px; height: 20px; border-radius: 50%; background: #ddd; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; -webkit-animation: loader 0.5s infinite ease-in-out both;
-moz-animation: loader 0.5s infinite ease-in-out both; -o-animation: loader 0.5s infinite ease-in-out both;
animation: loader 0.5s infinite ease-in-out both; }

@-webkit-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@media screen and (max-width: 830px) {
	.og-expander h3 { font-size: 32px; }
	.og-expander p { font-size: 13px; }
	.og-expander a { font-size: 12px; }
}

@media screen and (max-width: 650px) {
	.og-fullimg { display: none; }
	.og-details { float: none; width: 100%; }
}

/* 헤더영역 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*/