@charset "utf-8";
@import url("https://fonts.googleapis.com/earlyaccess/notosanskr.css");

/* reset */
html {
  overflow-y: scroll;
  font-size: 10px;
}
body {
  margin: 0;
  padding: 0;
  font-size: 0.75em;
  font-family: "Noto Sans KR", sans-serif;
}
html,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
img {
  margin: 0;
  padding: 0;
  border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  font-family: "Noto Sans KR", sans-serif;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ol,
li,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}
legend {
  position: absolute;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  text-indent: -9999em;
  overflow: hidden;
}
label,
input,
button,
select,
img {
  vertical-align: middle;
}
input,
button {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 1em;
}
button {
  cursor: pointer;
}
textarea,
select {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 1em;
}
select {
  margin: 0;
}
p {
  margin: 0;
  padding: 0;
  word-break: break-all;
}
hr {
  display: none;
}
pre {
  overflow-x: scroll;
  font-size: 1.1em;
}
a {
  color: #000;
  text-decoration: none;
}

*,
:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {background: #f4f6fa;}

#main_screen {width: 950px; margin: 0 auto;}

.header {width: 100%; padding: 20px 40px; height: 90px; background: #fff; display: inline-block;border-radius: 0 0 20px 20px; border: 1px solid #eceef2;}
.header .title {float: left; font-size: 20px;padding-top: 5px; font-weight: 700;}
.header .title .company {padding-right: 5px;font-weight: 300;}
.header .logo {float: right;}
.header .logo img {width: 32%;float: right;}

.book_info_area {width: 100%; padding: 40px;}
.book_info_area .book_img {display: inline-block;}
.book_info_area .book_img img {width: 80%;}
.book_info_area .book_info_txt {display: inline-block;margin-left: 40px;vertical-align: bottom;}
.book_info_area .book_info_txt .book_name {font-size: 20px; font-weight: 700; margin-bottom: 20px;}
.book_info_area .book_info_txt .site_pyun {font-size: 15px;}
.book_info_area .book_info_txt .site_url {font-size: 15px;}
.book_info_area .book_info_txt .phone_num {font-size: 16px;}

.list_area {width: 100%; background: #fff; border-radius: 20px 20px; border: 1px solid #eceef2;}
.list_area .list_line {display: block; padding: 20px 26px;font-size: 18px;border-bottom: 1px solid #ddd;}
.list_area .list_line:last-child {border-bottom: 0;}
.list_area .list_line div {display: inline-block;}
.list_area .list_line .play_num {margin-right: 10px;}
.list_area .list_line .play_btn {float: right; width: 22px; margin-top: 6px;}
.list_area .list_line .play_btn img {float: right;}
.list_area .list_line .play_time {font-size: 12px; color: #bbb;}
.list_area .play_btn img {width: 100%;}

.bt_icon {padding: 40px; text-align: center;}
.bt_icon a {margin: 0 8px;}
.bt_icon a img {width: 10%;}
.bt_icon1 {padding: 40px; text-align: center;}
.bt_icon1 a {margin: 0 8px;}
.bt_icon1 a img {width: 25%;}

.viewer {background: #1c2d49;}
.song_view {margin: 0 auto; width: 950px;}
.song_view .movie {margin: 20px auto 0; width: 90%; }
.song_view iframe {height: 500px; margin: 0 auto;}

.song_view .movie .mov-list ul li {float: left; margin-right: 38.3px; width: 15%; margin-right: 2%;}
.song_view .movie .mov-list ul li a {font-size: 14px; padding: 9px 20px;border: 1px solid #fff;color: #fff; width: 100%;display: block; text-align: center;}
.song_view .movie .mov-list ul li:last-child {float: right;margin-right: 0;}
.song_view .movie .mov-list ul li:last-child a {background: #364e75; color: #fff; border: 1px solid #fff;}
.song_view .movie .mov-list {display: inline-block; width: 100%; margin-top: 15px; margin-bottom: 15px;}

@media (min-width: 320px) and (max-width: 600px) {
  .main_screen {width: 95%; margin: 0 auto;} 

  .header {padding: 10px 20px; height: 50px;}
  .header .title {font-size: 14px; padding-top: 2px;}
  .header .logo img {width: 22%;}
  .header .logo {width: 42%;}

  .book_info_area {padding: 10%;text-align: center;}
  .book_info_area .book_img {text-align: center; }
  .book_info_area .book_info_txt {width: 100%; text-align: center;margin-top: 30px; margin-left: 0;}

  .song_view .movie {position: absolute; top: 0;left: 0;right: 0;bottom:0;margin: 30px auto 0;}
  .song_view .movie .mov-list {margin-top: 30px;}
  .song_view .movie .mov-list ul li {width: 30%; margin-right: 5%; margin-bottom: 4%;}
  .song_view .movie .mov-list ul li:nth-child(3n) {margin-right: 0;}
  .song_view .movie .mov-list ul li a {font-size: 12px; padding: 5% 23%;width: 100%; display: inline-block;text-align: center;}
  .song_view iframe {height: 190px;}

  .song_name a { font-size: 17px;margin-bottom: 10px; display: inline-block;}
  .list_area .list_line .play_btn {margin-top: 6px;}

  .bt_icon {padding: 20px;}
  .bt_icon a img {width: 10%;}

  .list_area .list_line .play_num {margin-right: 0px;}
  .list_area .list_line {padding:20px 26px 14px;}
}

@media (min-width: 481px) and (max-width: 767px) {

  .song_view {width: 100%;}
  .song_view .movie {margin: 30px auto 0;}
  .song_view iframe {height: 240px;}
  .song_view .movie .mov-list {margin-top: 17px;}
  .song_view .movie .mov-list ul li {width: 16%; margin-right: 0.8%; margin-bottom: 4%;}
  .song_view .movie .mov-list ul li a {font-size: 12px; padding: 5%; width: 100%; display: inline-block;text-align: center;}

  .song_name a { font-size: 13px;margin-bottom: 10px; display: inline-block;}
  .list_area .list_line .play_btn {margin-top: 6px;}

  .bt_icon {padding: 20px;}
  .bt_icon a img {width: 10%;}

  .list_area .list_line .play_num {margin-right: 2px;}
  .list_area .list_line {padding:20px 26px 14px;}
}