html {
   box-sizing:border-box;
    max-width:1300px;
     max-height:690px;
     margin:0 auto;
}
body {
    box-sizing:border-box;
    padding: 0px 0px;
    font-family: "Open Sans", sans-serif;
    /*font-size: 1em;*/
    background: #000000;
    margin: 0 auto;/*div를 화면 중앙에 정렬*/

    border:1px solid #5f5f5f;
}

a {
    outline: none;
   }               
a:link {
    text-decoration: none;
    color: #cccccc;
   }
/*a:visited {
   text-decoration: none;
    color: #cccccc;
     }*/
a:active {
    text-decoration: none;
     color: #cccccc;
    }
/*a:hover {
    float:left;
     text-decoration: none;
     color: #cccccc;
    }*/
a {outline: none;}


.logoimg {
    display: inline-block;
     height: 100px; 
    width: 624px;
    background: #ffcc22;
}

.top_login {
    display: inline-block;
      float: right;
	font-weight: bold;
	color:#5f5f5f;
	font-size: 0.8em;
    background: #ffcc22;

}
.container_header {
      box-sizing:border-box;
    width: 1298px;
    margin: 0px 0px; 
    padding: 0px;
    font-family: "Open Sans", sans-serif;
    /*font-size: 1em;*/
    background: #ffcc22;
    margin:0 auto; 
   
}
.head {
     background: #ffcc22;
}
.main {
background-color:#222222;
width:1300px;
}
#wrapper{
    box-sizing:border-box;
    flex-item-align:center;
   min-height: 700px;
  padding-bottom:50px;
  background-color:#333333;
position:relative;
overflow:scroll;
}
.index_centertop {
    text-shadow: 1px 1px 0px #333;
    text-align: center; 
    color:#ffcc22;
    font-weight:600;
    font-size:20px;
   
}
.index_center {
     text-align: center; 
    width: 600px; 
    height:745px;
     margin: auto;
      background-image:url("http://mctssh.synology.me/web_images/winbreak.JPG");
      background-size:cover;
       
}
/*.index_center::before
{
 content:"";
 opacity:0.5;
 position:absolute;
 top:146px;
left:310px;
right:310px;
bottom:0px;
background-color: #000;
}*/
.index_center_text {
 color:#fff;
 text-align:center;
 line-height:200px;
 position:relative;
 font-size:20px;

}



#footer {
    height:50px;
  position : relative;
  transform : translateY(-100%);
  border:1px solid #5f5f5f;
}
.footer_left {
    box-sizing:border-box;
    display: inline-block;
    padding:15px 0;
   background-color:#222222;
  width:1248px;
      font-size:14px;
      color:#aaa;
       margin:0 auto;
        height:50px;
      text-align:center;
        float: left;
}

.face {
    display: inline-block;
    height:50px;
    width:48px;
    background-color: #5f5f5f;
      float: right;
}
.guitar_Wrapper{
      flex-item-align:center;
   height: 720px;
  padding-bottom:50px;
  background-color:#333333;
    overflow:auto;
}
.guitarmenu_left {
    display:inline-flexbox;
    float:left;
    width:400px;
    font-size:16px;
    border-right:1px solid #777777;
    background-color:#5f5f5f;
}

.submenu_title {
    text-align: center;
    color: #ffcc22; 
    font-size: 16px; 
    font-weight: 600;
    height:20px;
    padding:5px 0px;
}
    .submenu_title > a {

    }

.guitarmenu_level {
    width: 400px; 
    color: #ffcc22; 
    border-bottom: 1px solid #777777;
    border-collapse: collapse;
    font-size: 14px; 
    height:20px;
    text-shadow: 1px 1px 0px #333;
}
.sub_list {
    border-bottom:solid;
    border-bottom-color:#777;
    border-bottom-width:1px;
  }
.guitarmenu_right {
    background-color:#333333;
}
.content_right {
    float:right;
    box-sizing:border-box;
 background-color:#333333;
 width:895px;
 height:745px;
overflow:scroll;

 
}
.content_right::-webkit-scrollbar {
    width: 8px;
    background-color: #333;
  }
.level_content {
 float:right;
 box-sizing:border-box;
 background-color:#333333;
 width:895px;
 height:720px;
 overflow:auto;
 }
.level_content::-webkit-scrollbar {
 width: 8px;
 background-color: #333;
}


.title_left {
    box-sizing:border-box;
    display:inline-flexbox;
   float:left;
      background: #4f4f4f;
    width: 400px; /*400으로 고정*/
    height:750px;
 
 margin:0 auto;
    border-right-style:solid;
    border-right-color:#333;
    border-bottom-width:1px;
}
.title_left::-webkit-scrollbar {
    width: 8px;
    background-color: #333;
  }

.title_left2 {
    box-sizing:border-box;
    display:inline-flexbox;
   float:left;
      background: #5f5f5f;
    width: 800px; /*800으로 고정*/
    height:270px;
 
 margin:0 auto;
    border-right-style:solid;
    border-right-color:#777;
    border-bottom-width:1px;
}
.title_left2::-webkit-scrollbar {
    width: 8px;
    background-color: #333;
  }



.title_name {
   
    color: #ffcc22; 
    border : 2px solid #7f7f7f;
    border-collapse: collapse;
    font-size: 16px; 
    height:24px;
    font-weight:600;
    text-shadow: 1px 1px 0px #333;
    line-height:24px;
    text-align:center;
  
    
}

.title_name_sub {
    color: #ffcc22; 
    border : 1px solid #777777;
    border-collapse: collapse;
    font-size: 14px; 
    height:24px;
    font-weight:600;
    text-shadow: 1px 1px 0px #333;
    line-height:24px;
    text-align:center;
    width:395px
   
}

#releaseYear {
   margin-left:auto;
   margin-right:auto; 
    width:390px;
border:1px solid #333333;
color:#dddddd;
font-size:12px;
 text-shadow: 1px 1px 0px #333;
 text-align:center;
    line-height:24px;
}
#releaseYear td {
    text-align:center;
    }
#releaseYear  a {
        color:#dddddd;
    }
#Series {
   margin-left:auto;
   margin-right:auto; 
    width:390px;
border:1px solid #333333;
color:#dddddd;
font-size:12px;
 text-shadow: 1px 1px 0px #333;
 text-align:center;
    line-height:24px;
}
#Series td {
    text-align:center;
    border-bottom : 1px solid #777777;
    }
#Series  a {
        color:#dddddd;
    }
.poptitle_total {
   
    color: #ffcc22; 
     border-bottom : 1px solid #7f7f7f;
      font-size: 12px; 
       height:20px;
       font-weight:500;
       text-shadow: 1px 1px 0px #333;
    text-align:center;
    padding-top:4px;
}
.button_update {
      box-sizing:border-box;
     width: 400px; 
    text-align:center;
     padding-top:4px;
      font-size: 12px; 
       border-bottom : 1px solid #ffcc22;
}
.abc_select {

    display:inline-flexbox;
     margin: 5px 10px ;
     width: 380px; 
    text-shadow: 1PX 1PX 0 #333333; 
    font-weight: 700;
    Color:#ffcc22;
}
.poptitle_list {
  width:400px;
    height:630px;
    overflow:auto;
   box-sizing:border-box;
}

/*스크롤바꾸미기*/
.poptitle_list::-webkit-scrollbar {
    width: 8px;
    background-color: #333;
  }

.classicRecord_list {
  width:400px;
    height:700px;
    overflow:auto;
   box-sizing:border-box;
}

/*스크롤바꾸미기*/
.classicRecord_list::-webkit-scrollbar {
    width: 5px;
    background-color: #777;
  }


.poptitle_left_Song_Musician_Release {

box-sizing:border-box;
 width: 400px; 
 border-bottom: 1px solid #7f7f7f; 
 border-top: 1px solid #7f7f7f; 
 border-collapse: collapse; 
 font-size: 22px; 
 margin: 5px auto;
 text-shadow:1px 1px 1px #333;
}
.popdetail_left_sacroll {
      height:650px;
    overflow:auto;
}
.popdetail_left_sacroll::-webkit-scrollbar {
    width: 8px;
    background-color:#333;
  }
.popdetail_left_sacroll2 {
      
    overflow:auto;
    background-color:#4f4f4f;
}
/*.popdetail_left_sacroll2::-webkit-scrollbar {
    width: 8px;
    background-color: #333;
  }*/
.popdetail_left_sacroll3 {
      height:600px;
    overflow:auto;
    background-color:#4f4f4f;
}
.popdetail_left_sacroll3::-webkit-scrollbar {
    width: 8px;
    background-color: #333;
  }



.accordion {
    font-size: 14px; 
    font-weight: bolder; 
    color: #ffcc22; 
    font-family: '맑은 고딕';
    margin:5px;
    background-color:#5f5f5f;
}
#movie_list {
    border-bottom: 1px solid #333333;
    margin-left:10px;
    /*height:150px;
    overflow:auto;*/
}
/*#movie_list::-webkit-scrollbar {
    width: 8px;
    background-color: #ffcc22;
  }*/
#music_list {
    border-bottom: 1px solid #333333;
    width:390px;
     /*height:150px;
    overflow:auto;*/
    margin-left:10px;
}
/*#music_list::-webkit-scrollbar {
    width: 8px;
    background-color: #ffcc22;
  }*/
#sheet_list {
     border-bottom: 1px solid #333333;
    margin-left:10px;
}
#learn_list
 {
     border-bottom: 1px solid #333333;
    margin-left:10px;
}
.pop_content {
    float:right;
    display:inline-block;
    height:auto;
    width:895px; 
     background-color:#444444;
  
}
.classic_content {
    float:right;
    display:inline-block;
    height:auto;
    width:890px; 
     background-color:#444444;
  
}
.song_Explain {
}
#explain {
      box-sizing:border-box;
    width:895px;
    margin: 0 auto;
    padding: 10px;
    line-height:130%;
}
.content_Movie {
   display:flexbox;
      width:895px;
    margin: 0 auto;
     height:700px auto;
     flex-align:center;
     text-align:center;
 }
.content_Song {
    width:895px;
    box-sizing:border-box;
     margin: 0 auto;
}
.pop_content_Song {
      width:395px;
    box-sizing:border-box;
     margin: 0 auto;
}
.content_sheet {
    box-sizing:border-box;
width: 850px; 
margin: 0;
background-color: #5f5f5f;
}
.content_recordlist {
 box-sizing:border-box;
width: 850px; 
 margin: 0 auto;
background-color: #5f5f5f;
}
.musician_Explain {
    display:flexbox;
     margin:auto;
}
.musician_Pic {

    height: 400px;
  margin: auto;
}

.classicComposer_list {
    width:400px;
    height:600px;
    box-sizing:border-box;
}
스크롤바꾸미기
.classicComposer_list::-webkit-scrollbar {
    width: 8px;
    background-color: #ffcc22;
  }

.guitarSubmenu1_list {
    width:400px;
    height:550px; 
    overflow: scroll;
   box-sizing:border-box;
}
.guitarSubmenu1_list::-webkit-scrollbar {
    width: 8px;
    background-color: #333333;
  }
.guitarSubmenu2_list {
    width:400px;
    height:520px; 
    overflow: scroll;
   box-sizing:border-box;
}
.guitarSubmenu2_list::-webkit-scrollbar {
    width: 8px;
    background-color: #333333;
  }
.guitarSubmenu3_list {
    width:400px;
    height:480px; 
    overflow: scroll;
   box-sizing:border-box;
}
.guitarSubmenu3_list::-webkit-scrollbar {
    width: 8px;
    background-color: #333333;
  }
.classic_workname {
    width:380px;
    color:#ffcc22;
    padding:10px 20px;
    line-height:15px;
    font-size:16px;
    font-weight:600;
    text-align:center;
}
.classic_musicianname {
    padding: 0 20px;
    box-sizing: border-box;
    color: #dddddd;
    line-height: 15px;
    font-size:14px;
}    
.composer_register{
    margin:0 auto; 
    color:#dddddd;
     text-align:center;
      line-height: 20px;
}
.composer_register_Left {
   display:block;
     width:500px;
    color:#dddddd;
     text-align:left;
      line-height: 20px;
        text-align:center;
}
.composer_register_Right {
    display:inline-block;
    width:400px;
    color:#dddddd;
     text-align:center;
      line-height: 20px;
}
.composer_register_Button {
    width:500px;
     color:#aaaaaa;
     text-align:center;
      line-height: 20px;
}
.Movie_Explain {
    font-size:14px;
    text-shadow: 1px 1px 1px #333;
    color:#aaa;
    line-height: 20px;
    width:800px
}
.album_Years {
    text-align:center;
     font-size:22px;
     font-weight:600;
    text-shadow: 1px 1px 1px #333;
    color:#ffcc22;
     width:820px;
    
      border: 1px solid #ffcc22;
}

#AlbumImg {
    width:155px;
     height:155px;
}

#AlbumImg:hover {
  position;left:450px;
       width:150px;
    height:auto;
   
    transition: all 1.5s;
     transform:scale(2.0) translateX(50px);
}
#AlbumImg2 {
    width:50px;
     height:50px;
}
#AlbumImg2:hover {
  position:inherit; left:300px;
       width:300px;
    height:auto;
   
    transition: all 1.5s;
     transform:scale(2.0) translateX(10px);
}

#PopMusicanImage:hover {
    transition: 1s ease-out;
    opacity : 0.3;
}
#PopMusicanImage:not(:hover) {
    transition: 1s ease-out;
}