@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');


.nanumGothic { font-family: 'Nanum Gothic', '맑은 고딕', 'Malgun Gothic', '돋움', dotum, sans-serif; font-size: 14px;  }

html, body a { text-decoration: none; }
figure figcaption {display: block; overflow: hidden; text-indent: -9999px; font-size: 0px; }

/*transition*/
.fade-enter-active, .fade-leave-active {
  transition: opacity .75s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.wrapper header nav a span { display: inline-block; overflow: hidden; text-indent: -9999px; }

header { position: relative; }

.language {
  position: absolute;
  top: 36px; left: 693px;
}
.language span {
  display: inline-block;
  border:solid 1px #909090;
  width: 56px; height: 18px;
  box-sizing: border-box;
  text-align: center;
  line-height: 16px;
  font-size: 9px;
  background: #000;
  color: #fff;
  cursor: pointer;
}
.language ul {
  border:solid 1px #909090;
  border-top: none;
  background: #000;
  display: none;
}
.language ul.on {
  display: block;
}
.language ul li {
  height: 23px; line-height: 23px;
  text-align: center;
}
.language ul li a {
  font-size: 9px;
  color: #fff;
}
.language ul li.on a {
  color: #747474;
}


@media screen and (min-width: 0px) and (max-width: 750px) {
  html, body { width:  100%; height: 100%; background: #000000; box-sizing: border-box; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

  .wrapper { display: block; max-width: 750px; min-width: 360px; margin: 0 auto; }

  header { position: relative; width: 100%; height: 75px; padding: 28px 16px 15px 23px; box-sizing: border-box; }

  .pianista-logo { display: inline-block; width: 72px; height: 28px; }
  .pianista-logo img { width: 72px; height: 28px; }

  .wrapper { font-family: 'Nanum Gothic', '맑은 고딕', 'Malgun Gothic', '돋움', dotum, sans-serif; font-size: 14px;  }

  .language {
    position: absolute;
    top: 36px; left: auto;
    right: 24px;
  }

  .wrapper header { border-bottom: solid 1px #473c30; }
  .wrapper header nav { position: absolute; right: 13px; top: 38px; z-index: 1; }
  .wrapper header nav a { position: relative; display: inline-block; color: #fff; float: left; padding: 0 3px 0 4px; }
  .wrapper header nav a:last-child:after { display: none; }
  .wrapper header nav a span { display: inline-block; }

  .wrapper header nav a.en span { /*width:53px; height: 19px;*/ width:31px; height: 10px; background: url('../images/mobile/common/nav_en_off.png') center center no-repeat; background-size: 100% auto; }
  .wrapper header nav a.en.on span { width:31px; height: 10px; background: url('../images/mobile/common/nav_en_on.png') center center no-repeat; background-size: 100% auto; }
  .wrapper header nav a.ch span { /*width:62px; height: 19px;*/ width:37px; height: 10px; background: url('../images/mobile/common/nav_ch_off.png') center center no-repeat; background-size: 100% auto; }
  .wrapper header nav a.ch.on span { width:37px; height: 10px; background: url('../images/mobile/common/nav_ch_on.png') center center no-repeat; background-size: 100% auto;}
  .wrapper header nav a.jp span { /*width:80px; height: 19px;*/ width:47px; height: 10px; background: url('../images/mobile/common/nav_jp_off.png') center center no-repeat; background-size: 100% auto; }
  .wrapper header nav a.jp.on span { width:47px; height: 10px; background: url('../images/mobile/common/nav_jp_on.png') center center no-repeat; background-size: 100% auto}
  .wrapper header nav a.kr span { /*width:74px; height: 19px;*/ width:43px; height: 10px; background: url('../images/mobile/common/nav_kr_off.png') center center no-repeat; background-size: 100% auto; }
  .wrapper header nav a.kr.on span { width:43px; height: 10px; background: url('../images/mobile/common/nav_kr_on.png') center center no-repeat; background-size: 100% auto;}

  .wrap .box { width: 100%; height: auto; box-sizing:border-box; }
  .wrap .box em { display: block; }

  .wrap .box.main { padding: 10% 0px 7.5% 0px; }
  .wrap .box.main .pianista-ns-information { padding-top: 17%; }

  /* 비디오 */
  .wrap .box.video { padding: 0 0 35.5% 0; }
  .wrap .box.video em { padding-bottom: 6%; }
  .wrap .box.video .video-stream { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }
  .wrap .box.video .video-stream iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
  .wrap .box img { width: 100%; }

  .wrap .box.contents { padding: 0 0 41.5% 0; }
  .wrap .box.contents em { padding-bottom: 6.7%; }
  .wrap .box.contents article { padding-top: 10% }
  .wrap .box.contents article .pianista-ns-information.song { padding-bottom: 6%; }
  .wrap .box.contents article .pianista-ns-information.composer { padding-bottom: 12%; }
  .wrap .box.contents article .pianista-ns-information.audio { padding-bottom: 15%; }
  .wrap .box.contents article .pianista-ns-information.global {}

  .wrap .box.nintendo { padding: 0 0 24.0% 0; }
  .wrap .box.nintendo em { padding-bottom: 6.7%; }
  .wrap .box.nintendo article { padding-top: 10% }
  .wrap .box.nintendo article .pianista-ns-information.matinee { padding-bottom: 24%; }
  .wrap .box.nintendo article .pianista-ns-information.concours { padding-bottom: 23%; }
  .wrap .box.nintendo article .pianista-ns-information.ensemble { padding-bottom: 18%; }
  .wrap .box.nintendo article .pianista-ns-information.skin {}

  .wrap .box.global { padding: 0 0 50.0% 0; }
  .wrap .box.global em { padding-bottom: 6.7%; }
  .wrap .box.global article { padding-top: 5% }

  .wrap .box.eshop { }
  .wrap .box.eshop em { }
  .wrap .box.eshop article { padding: 40% 0 7% 0; }

  .eshop_btn_wrap { text-align: center; }
  .eshop_btn_wrap a { display: inline-block; width: 20%; height: auto; }
  .eshop_btn_wrap a img { width: 100%; height: 100%; }

  footer { position: relative; height: 105px; box-sizing: border-box; padding: 22px 16px 10px 22px; border-top:solid 1px #473c30; font-size: 11px; }
  footer > a { display: block; margin: 0 0 11px 0; }
  footer address { position: relative; }
  footer address * { color: #808080; }
  footer address p { width:85px; height:13px; background: url('../images/mobile/common/pianistacompany.png') 0 0 no-repeat; background-size: 85px 13px; overflow: hidden; text-indent: -9999px; }
  footer address ul { position: relative; top: 5px; left:0px; clear:both; background: url('../images/mobile/common/footer_navigation.png') 0 0 no-repeat; background-size: 165px 10px; }
  footer address ul:after { content:""; display:block; clear:both; }
  footer address ul li { position: relative; float: left; }
  footer address ul li.about a { display: inline-block; width: 52px; height: 10px; }
  footer address ul li.games a { display: inline-block; width: 114px; height: 10px;  }
  footer address ul li:last-child:after { display: none; }
  footer address ul li a { overflow: hidden; text-indent: -9999px; }
  footer .sns { display: inline-block; position: absolute; top:63px; right: 0px; width: 90px; height: 33px;  }
  footer .sns a { display: inline-block; float: left; margin-left: 10px; }
  footer .sns a img {display: inline-block; width: 25px; height: 25px;  }

}


@media screen and (min-width: 751px) {
  html, body { width:  100%; height: 100%; background: #000000; box-sizing: border-box; }

  .wrapper { display: block; max-width: 1024px; min-width: 750px; margin: 0 auto; }

  header {
    position: relative; width: 100%; height: 75px; padding: 31px 0px 15px 0px; box-sizing: border-box;
    max-width: 750px; margin: 0 auto;
  }

  .pianista-logo { display: inline-block; width: 72px; height: 28px; }
  .pianista-logo img { width: 72px; height: 28px; }

  .wrapper { font-family: 'Nanum Gothic', '맑은 고딕', 'Malgun Gothic', '돋움', dotum, sans-serif; font-size: 14px;  }

  .wrapper header {  }
  .wrapper header nav { position: absolute; right: -10px; top: 38px; z-index: 1; }
  .wrapper header nav a { position: relative; display: inline-block; color: #fff; float: left; padding: 0 2px 0 3px; }
  .wrapper header nav a:last-child:after { display: none; }
  .wrapper header nav a span { display: inline-block; }

  .wrapper header nav a.en span { /*width:53px; height: 19px;*/ width:36px; height: 18px; background: url('../images/pc/common/nav_en_off.png') center center no-repeat; background-size: 100% auto; }
  .wrapper header nav a.en.on span { width:36px; height: 18px; background: url('../images/pc/common/nav_en_on.png') center center no-repeat; background-size: 100% auto; }
  .wrapper header nav a.ch span { /*width:62px; height: 19px;*/ width:43px; height: 18px; background: url('../images/pc/common/nav_ch_off.png') center center no-repeat; background-size: 100% auto; }
  .wrapper header nav a.ch.on span { width:43px; height: 18px; background: url('../images/pc/common/nav_ch_on.png') center center no-repeat; background-size: 100% auto;}
  .wrapper header nav a.jp span { /*width:80px; height: 19px;*/ width:55px; height: 18px; background: url('../images/pc/common/nav_jp_off.png') center center no-repeat; background-size: 100% auto; }
  .wrapper header nav a.jp.on span { width:55px; height: 18px; background: url('../images/pc/common/nav_jp_on.png') center center no-repeat; background-size: 100% auto}
  .wrapper header nav a.kr span { /*width:74px; height: 19px;*/ width:50px; height: 18px; background: url('../images/pc/common/nav_kr_off.png') center center no-repeat; background-size: 100% auto; }
  .wrapper header nav a.kr.on span { width:50px; height: 18px; background: url('../images/pc/common/nav_kr_on.png') center center no-repeat; background-size: 100% auto;}

  .wrap { border-top: solid 1px #473c30; border-bottom: solid 1px #473c30; width: 1024px; }

  .wrap .box { width: 100%; height: auto; box-sizing:border-box; }
  .wrap .box em { display: block;  padding-bottom: 125px; }

  .wrap .box.main { padding-top: 83px; }
  .wrap .box.main .pianista-ns-information {  }

  /* 비디오 */
  .wrap .box.video { padding: 0 0 300px 0; }
  .wrap .box.video em { padding-bottom: 6%; }
  .wrap .box.video .video-stream { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; max-width: 750px; margin:0 auto; }
  .wrap .box.video .video-stream iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
  .wrap .box img { width: 100%; }

  .wrap .box.contents { }
  .wrap .box.contents em {  }
  .wrap .box.contents article {  }
  .wrap .box.contents article .pianista-ns-information.song { }
  .wrap .box.contents article .pianista-ns-information.composer { }
  .wrap .box.contents article .pianista-ns-information.audio { }
  .wrap .box.contents article .pianista-ns-information.global {}

  .wrap .box.nintendo { }
  .wrap .box.nintendo em { }
  .wrap .box.nintendo article { }
  .wrap .box.nintendo article .pianista-ns-information.matinee { margin-bottom: 175px; }
  .wrap .box.nintendo article .pianista-ns-information.concours { margin-bottom: 174px; }
  .wrap .box.nintendo article .pianista-ns-information.ensemble { margin-bottom: 138px; }
  .wrap .box.nintendo article .pianista-ns-information.skin { margin-bottom: 198px; }

  .wrap .box.global { padding-bottom: 210px; }
  .wrap .box.global em { padding-bottom: 105px; }
  .wrap .box.global article { }

  .wrap .box.eshop { }
  .wrap .box.eshop em { padding-bottom: 0px; }
  .wrap .box.eshop article { }
  .wrap .box.eshop img { vertical-align: top; }

  .eshop_btn_wrap { margin-bottom: 265px; text-align: center; }
  .eshop_btn_wrap a { display: inline-block; width: 112px; height: 38px; }
  .eshop_btn_wrap a img { width: 100%; height: 100%; }

  footer { position: relative; height: 105px; max-width: 750px; margin:0 auto; box-sizing: border-box; padding: 19px 0px 10px 0px; font-size: 11px; }
  footer > a { display: block; margin: 0 0 11px 0; }
  footer address { position: relative; }
  footer address * { color: #808080; }
  footer address p { width:85px; height:13px; background: url('../images/mobile/common/pianistacompany.png') 0 0 no-repeat; background-size: 85px 13px; overflow: hidden; text-indent: -9999px; }
  footer address ul { position: relative; top: 5px; left:0px; clear:both; background: url('../images/mobile/common/footer_navigation.png') 0 0 no-repeat; background-size: 165px 10px; }
  footer address ul:after { content:""; display:block; clear:both; }
  footer address ul li { position: relative; float: left; }
  footer address ul li.about a { display: inline-block; width: 52px; height: 10px; }
  footer address ul li.games a { display: inline-block; width: 114px; height: 10px; }
  footer address ul li:last-child:after { display: none; }
  footer address ul li a { overflow: hidden; text-indent: -9999px; }
  footer .sns { display: inline-block; position: absolute; top:60px; right: 0px; width: 70px; height: 33px;  }
  footer .sns a { display: inline-block; float: left; margin-left: 10px; }
  footer .sns a img {display: inline-block; width: 25px; height: 25px;  }
}