/* new css */
@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+KR:200,300,400,500,600,700,900&display=swap');

/*-- font --*/

/*NanumSquare*/
@font-face {
    font-family: 'squarer';
    font-style: normal;
    font-weight: 100;
    src: url(font/NanumSquareRoundL.eot);
    src: url(font/NanumSquareRoundL.eot?#iefix) format('embedded-opentype'),
    url(font/NanumSquareRoundL.woff2) format('woff2'),
    url(font/NanumSquareRoundL.woff) format('woff'),
    url(font/NanumSquareRoundL.otf) format('opentype');
}

@font-face {
    font-family: 'squarer';
    font-style: normal;
    font-weight: 300;
    src: url(font/NanumSquareRoundR.eot);
    src: url(font/NanumSquareRoundR.eot?#iefix) format('embedded-opentype'),
    url(font/NanumSquareRoundR.woff2) format('woff2'),
    url(font/NanumSquareRoundR.woff) format('woff'),
    url(font/NanumSquareRoundR.otf) format('opentype');
}

@font-face {
    font-family: 'squarer';
    font-style: normal;
    font-weight: 500;
    src: url(font/NanumSquareRoundB.eot);
    src: url(font/NanumSquareRoundB.eot?#iefix) format('embedded-opentype'),
    url(font/NanumSquareRoundB.woff2) format('woff2'),
    url(font/NanumSquareRoundB.woff) format('woff'),
    url(font/NanumSquareRoundB.otf) format('opentype');
}

@font-face {
    font-family: 'squarer';
    font-style: normal;
    font-weight: 700;
    src: url(font/NanumSquareRoundEB.eot);
    src: url(font/NanumSquareRoundEB.eot?#iefix) format('embedded-opentype'),
    url(font/NanumSquareRoundEB.woff2) format('woff2'),
    url(font/NanumSquareRoundEB.woff) format('woff'),
    url(font/NanumSquareRoundEB.otf) format('opentype');
}

@font-face {
    font-family: 'square';
    font-style: normal;
    font-weight: 100;
    src: url(font/NanumSquareL.eot);
    src: url(font/NanumSquareL.eot?#iefix) format('embedded-opentype'),
    url(font/NanumSquareL.woff2) format('woff2'),
    url(font/NanumSquareL.woff) format('woff'),
    url(font/NanumSquareL.otf) format('opentype');
}

@font-face {
    font-family: 'square';
    font-style: normal;
    font-weight: 300;
    src: url(font/NanumSquareR.eot);
    src: url(font/NanumSquareR.eot?#iefix) format('embedded-opentype'),
    url(font/NanumSquareR.woff2) format('woff2'),
    url(font/NanumSquareR.woff) format('woff'),
    url(font/NanumSquareR.otf) format('opentype');
}

@font-face {
    font-family: 'square';
    font-style: normal;
    font-weight: 500;
    src: url(font/NanumSquareB.eot);
    src: url(font/NanumSquareB.eot?#iefix) format('embedded-opentype'),
    url(font/NanumSquareB.woff2) format('woff2'),
    url(font/NanumSquareB.woff) format('woff'),
    url(font/NanumSquareB.otf) format('opentype');
}

@font-face {
    font-family: 'square';
    font-style: normal;
    font-weight: 700;
    src: url(font/NanumSquareEB.eot);
    src: url(font/NanumSquareEB.eot?#iefix) format('embedded-opentype'),
    url(font/NanumSquareEB.woff2) format('woff2'),
    url(font/NanumSquareEB.woff) format('woff'),
    url(font/NanumSquareEB.otf) format('opentype');
}


/*NotoSans*/
@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 100;
    src: url(font/NotoSans-Thin.eot);
    src: url(font/NotoSans-Thin.eot?#iefix) format('embedded-opentype'),
    url(font/NotoSans-Thin.woff2) format('woff2'),
    url(font/NotoSans-Thin.woff) format('woff'),
    url(font/NotoSans-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 200;
    src: url(font/NotoSans-Light.eot);
    src: url(font/NotoSans-Light.eot?#iefix) format('embedded-opentype'),
    url(font/NotoSans-Light.woff2) format('woff2'),
    url(font/NotoSans-Light.woff) format('woff'),
    url(font/NotoSans-Light.otf) format('opentype');
}


@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 300;
    src: url(font/NotoSans-DemiLight.eot);
    src: url(font/NotoSans-DemiLight.eot?#iefix) format('embedded-opentype'),
    url(font/NotoSans-DemiLight.woff2) format('woff2'),
    url(font/NotoSans-DemiLight.woff) format('woff'),
    url(font/NotoSans-DemiLight.otf) format('opentype');
}


@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 400;
    src: url(font/NotoSans-Regular.eot);
    src: url(font/NotoSans-Regular.eot?#iefix) format('embedded-opentype'),
    url(font/NotoSans-Regular.woff2) format('woff2'),
    url(font/NotoSans-Regular.woff) format('woff'),
    url(font/NotoSans-Regular.otf) format('opentype');
}


@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 500;
    src: url(font/NotoSans-Medium.eot);
    src: url(font/NotoSans-Medium.eot?#iefix) format('embedded-opentype'),
    url(font/NotoSans-Medium.woff2) format('woff2'),
    url(font/NotoSans-Medium.woff) format('woff'),
    url(font/NotoSans-Medium.otf) format('opentype');
}


@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 600;
    src: url(font/NotoSans-Bold.eot);
    src: url(font/NotoSans-Bold.eot?#iefix) format('embedded-opentype'),
    url(font/NotoSans-Bold.woff2) format('woff2'),
    url(font/NotoSans-Bold.woff) format('woff'),
    url(font/NotoSans-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 700;
    src: url(font/NotoSans-Black.eot);
    src: url(font/NotoSans-Black.eot?#iefix) format('embedded-opentype'),
    url(font/NotoSans-Black.woff2) format('woff2'),
    url(font/NotoSans-Black.woff) format('woff'),
    url(font/NotoSans-Black.otf) format('opentype');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
 {
    font-family:'square',나눔바른고딕, NanumBarunGothic, 나눔바른고딕OTF, NanumBarunGothicOTF, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto+Sans',  'notokr-demilight',  '맑은 고딕', 'Malgun Gothic', 'Helvetica Neue', Helvetica, Dotum, '돋움', sans-serif !important;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
 }


._menuBarPup ul li {line-height: 200%; margin-left:60px;}
.title_area {line-height: 180%;}
.title_area .line {width: 20%; height:2px; background-color: #fff; display: block; margin: 0 auto;}
/* new css end */



body{
    margin: 0px;
    width: 1200px;
    height: 800px;
}
#contents-frm{
    margin: 0px;
    padding: 0px;
    width: 1200px;
    height: 675px;
    border-width: 0px;
}
#_viewPort{
    height: 720px;
}
._player{
    position: relative;
/*    background:url('./img/bg_player.png') no-repeat; */
    background-size: 100% 100%;
    width: 1200px;
    height: 70px;
}
._helpPup{
    position: absolute; 
    width: 1200px; 
    height: 720px; 
    top: 0px; 
    left: 0px; 
    background: url('./img/pup_help.png') 0% 0% / 100% no-repeat; display: none;
}
.sound-slider-bg{
    position: absolute;
    background: #dc5a5b;
    width: 45px;
    height: 160px;
    left: 1068px;
    top: -160px;
    opacity : 0.9;
    border-radius: 10px 10px 0 0;
    display: none;
}
#slider-vertical{
    height: 128px;
    background: #2f2f2f;
    position: absolute;
    top: -140px;
    left: 1086px;
    width: 8px;
}
._helpPupBtn{
    position: absolute;
    left: 0px;
    width: 6.5%;
    height: 675px;
    bottom: 0px;
}
._contentsRtBtn{
    position: absolute;
    left: 6.5%;
    width: 4.5%;
    height: 100%;
    bottom: 0px;
}
._contentsPlayAndStopBtn{
    position: absolute;
    left: 11%;
    width: 4.5%;
    height: 100%;
    bottom: 0px;
}
._contentsPlayAndStopBtn img{
    position: relative;
    top: 22%;
    left: 3%;
    width: 78%;
    height: 65%;
    display: none;
}
._seekBar{
    position: absolute;
    left: 18%;
    width: 27%;
    height: 100%;
    bottom: 0px;
}
._seekBar .graph{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 20%;
    bottom: 40%;
    background-color: #dc5a5b;
    border-radius: 3px;
    z-index: 3;
}
._seekBar .mask{
    position: absolute;
    right: 0px;
    width: 100%;
    height: 20%;
    bottom: 40%;
    background-color: #2f2f2f;
    border-radius: 3px;
    z-index: 4;
}
.time1{
    position: absolute;
    left: 45%;
    width: 7%;
    height: 100%;
    bottom: 0px;
}
.playerText{
    margin: 25px 0px;
    color: white;
}
.time2{
    position: absolute;
    left: 49.5%;
    width: 7%;
    height: 100%;
    bottom: 0px;
}
._prevBtn{
    position: absolute;
    left: 64%;
    width: 4.5%;
    height: 70px;
    bottom: 0px;
}
._nextBtn{
    position: absolute;
    left: 76.7%;
    width: 4.5%;
    height: 100%;
    bottom: 0px;
}
._presPageNo{
    position: absolute;
    top: 2px;
    left: 68%;
    width: 5%;
    height: 100%;
    bottom: 0px;
    color: white;
    font-size: 1.5rem;
    text-align: center;
}
._presPageNo div{
    margin: 38% 0px;
}
._totPageNo{
    position: absolute;
    top: 2px;
    left: 73.5%;
    width: 3%;
    height: 100%;
    bottom: 0px;
    color: white;
    font-size: 1.5rem;
}
._totPageNo div{
    margin: 62% 0px;
}
._soundBtn{
    position: absolute;
    left: 89%;
    width: 4.5%;
    height: 100%;
    bottom: 0px;
    color: white;
    font-size: large;
}
._fullScreenBtn{
    position: absolute;
    left: 89%;
    width: 5%;
    height: 100%;
    bottom: 15px;
    color: white;
    font-size: large;
    display: none;
}
._menuBarBtn{
    position: absolute;
    left: 93.5%;
    width: 5%;
    height: 100%;
    bottom: 0px;
    color: white;
    font-size: large;
}
._menuBarPup{
    position: absolute;background: url('./img/lyrPupMenu.png') no-repeat;
    background-size: 100% 675px;
    width: 400px;
    top: 0px;left: 800px;
    height: 720px;
    color: white;
    font-size: larger;
    font-family: inherit; 
    display: none;
}
._thnkPup{
    position: absolute;background: url('./img/thnkpup.png') no-repeat;
    background-size: 100%;
    width: 1200px;
    top: 0px;left: 0px;height: 675px;color: white;font-size: larger;
    font-family: inherit; display: none;
}
#_beforeNextPup{
    position: absolute;
    background-size: 100%;
    width: 1200px;
    top: 0px;left: 0px;height: 675px;color: white;font-size: larger;
    font-family: inherit; display: none;
}
._section1{
    background: url('./img/section1.png') no-repeat;
}
._section2{
    background: url('./img/section2.png') no-repeat;
}
._section3{
    background: url('./img/section3.png') no-repeat;
}
._section4{
    background: url('./img/section4.png') no-repeat;
}
._section5{
    background: url('./img/section5.png') no-repeat;
}
._section6{
    background: url('./img/section6.png') no-repeat;
}
._section7{
    background: url('./img/section7.png') no-repeat;
}
._section8{
    background: url('./img/section8.png') no-repeat;
}
._section9{
    background: url('./img/section9.png') no-repeat;
}
._section10{
    background: url('./img/section10.png') no-repeat;
}
._section11{
    background: url('./img/section11.png') no-repeat;
}
._section12{
    background: url('./img/section12.png') no-repeat;
}
._section13{
    background: url('./img/section13.png') no-repeat;
}