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

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
} 

/* 뮤직 Style */
/* ---------------------------------------------------------------------------------------------------------- */
/* 3D글자 영역 */
#intro h1 { position:relative; float:left; width:50%; margin:70px 0 0 50px; 
font-family: Arial, Helvetica, sans-serif; font-weight:bold; color:#000; text-align:left; }
#intro h1:after { content: ""; position: absolute; bottom: 0px; left: 0px; width:90px;
height: 3px; }
#intro p { margin-left:190px; color:#000; text-align:left; }
#intro p:before { content:"\f030"; font-family:'FontAwesome'; }
.word, .char { display: inline-block; }
.char { position: relative; }

/* 랜덤색상 */
html.color0  #intro img, html.color0 #intro h1:after { background: #ee7a49; }
html.color1  #intro img, html.color1 #intro h1:after { background: #f5db22; }
html.color2  #intro img, html.color2 #intro h1:after { background: #57BC8A; }
html.color3  #intro img, html.color3 #intro h1:after { background: #4EA8D7; }
html.color4  #intro img, html.color4 #intro h1:after { background: #AB7DC2; }
html.color5  #intro img, html.color5 #intro h1:after { background: #ff6486; }

@media screen and (min-width: 320px) {
#intro { width:90%; margin:80px auto; }
#intro h1 { width:100%; margin:0 0 20px 0; font-size:25px; }
#intro img { width:60%; margin:0 auto; }
#intro p { clear:both; width:100%; margin-left:0; font-size: 13px; }
.main-picture { display:none; } 
#back-top { display: none !important; }
}/*/mediaquery*/
@media screen and (min-width: 480px) {
#intro { width:90%; margin:80px auto; }
#intro h1 { width:90%; font-size:30px; margin-bottom:20px; margin-left:0; }
#intro img { width:40%; margin:0 auto; }
#intro p { clear:both; float:left; margin-left:0; font-size: 15px; }
.main-picture { display:none; } 
#back-top { display: none !important; }
}/*/mediaquery*/
@media screen and (min-width: 740px) {
#intro { width:90%; margin:120px auto; height:565px; }
#intro img { float:left; width:25%; margin:0 30px 40px 0; }
#intro h1 { float:left; width:55%; margin:50px auto; font-size:35px; }
#intro p { float:left; width:55%; margin:0 auto; font-size: 17px; }
.main-picture { display:none; } 
#back-top { display: none !important; }
footer { display:none !important; }
}/*/mediaquery*/
@media screen and (min-width: 1025px) {
#intro { float:left; width:50%; margin:180px auto; height:540px; }
#intro img { float:left; width:20%; }
#intro h1 { float:left; width:58%; margin:50px 0 20px 0; font-size:35px; }
#intro p { float:left !important; width:100%; margin:o auto; }
#intro h1 { font-size:40px; }
.main-picture { display:block; margin:100px auto; } 
}/*/mediaquery*/