@charset "utf-8";

*{padding:0; margin:0;}
html{font-size:62.5%; font-smoothing: antialiased; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body{width:100%; min-height:100%; height:100%;font-size:16px;}
audio, canvas, progress, video{display: inline-block; vertical-align: baseline;}
audio:not([controls]) {display: none; height: 0;}
[hidden], template{display: none;}
a{background-color: transparent; text-decoration:none;}
a:active, a:hover{outline: 0;}
li{list-style:none;}
b, strong{font-weight: bold;}
img{border: 0; width:100%;}
.hide{height:0; font: 0/0 a; text-shadow: none; color: transparent; overflow:hidden;} 
.cboth{height:0; font: 0/0 a; text-shadow: none; color: transparent; overflow:hidden; clear:both;} 
button{
  outline: none !important;
  -webkit-tap-highlight-color : transparent !important;
}
img{vertical-align:top;}

body		{ font-family: 'NanumSquare', sans-serif }
.normal		{ font-weight: 400 }
.bold		{ font-weight: 700 }
.bolder		{ font-weight: 800 }
.light		{ font-weight: 300 }

/*common*/
.Pcon{display:none;}
.Lcon{width:100%;height:100vh;}
body.main{background:#FFF6CB;}
body.sub{background:#FFDE05;}

.content{height:auto;min-height:calc(100% - 60px);background:#fff;margin:0 2rem;box-sizing:border-box;border-radius:1rem 1rem 0 0;padding:3rem 2rem;display:flex;justify-content: center;align-items: center;}

.white-space {white-space: nowrap;}
.overflow {overflow: hidden;}
.ellipsis {text-overflow: ellipsis;}



/*header*/
.header{background:#FFDE05;width:100%;height:6rem;text-align:center;line-height:6rem;z-index:9;}
.header p{color:#464120;font-size:3rem;font-weight:800;}
.header .head_btn{position:absolute;top:0;left:0;font-size:0;line-height:initial;}
.header a{display:inline-block;margin:1rem 0 0 1rem;}
.header .head_btn img{width:4rem;}
.header .logo{position:absolute;top:0;right:1rem;width:9.9rem;}


/*main*/
.book_list{display:flex;justify-content:center;flex-wrap:wrap;padding:2rem 0;align-content:center;}
.book_list li{width:17%;margin:1rem;text-align:center;border-radius:2rem;border:4px solid #fff;box-sizing:border-box;padding:1rem 0 0.5rem;box-shadow:0 2px 6px 2px rgba(0,0,0,0.15);}
.book_list li:nth-child(1){background:#f69099;}
.book_list li:nth-child(2){background:#1f86cf;}
.book_list li:nth-child(3){background:#ffbd59;}
.book_list li:nth-child(4){background:#39c136;}
.book_list li:nth-child(5){background:#21c2b5;}
.book_list li:nth-child(6){background:#556cd0;}
.book_list li:nth-child(7){background:#8cde4f;}
.book_list li:nth-child(8){background:#9a78d5;}
.book_list li:nth-child(9){background:#6ac5f1;}
.book_list li:nth-child(10){background:#ff9256;}
.book_list img{width:50%;}
.book_list span{font-size:1.5rem;color:#333;font-weight:800;display:block;margin-top:0.5rem;}

/*select*/
body.select .content{ min-height:calc(100% - 8rem);margin:0 2rem 2rem;border-radius:1rem;}
body.select .lv_bg{width:100%;height:auto;min-height:calc(100% - 60px) !important;}
body.b1 .lv_bg{width:100%;background:url(../../img/bg_book1.png) center bottom no-repeat;background-size:contain;position:absolute;bottom:0;}
body.b2 .lv_bg{width:100%;background:url(../../img/bg_book2.png) center bottom no-repeat;background-size:contain;position:absolute;bottom:0;}
body.b3 .lv_bg{width:100%;background:url(../../img/bg_book3.png) center bottom no-repeat;background-size:contain;position:absolute;bottom:0;}
body.b4 .lv_bg{width:100%;background:url(../../img/bg_book4.png) center bottom no-repeat;background-size:contain;position:absolute;bottom:0;}
body.b5 .lv_bg{width:100%;background:url(../../img/bg_book5.png) center bottom no-repeat;background-size:contain;position:absolute;bottom:0;}
body.b6 .lv_bg{width:100%;background:url(../../img/bg_book6.png) center bottom no-repeat;background-size:contain;position:absolute;bottom:0;}
body.b7 .lv_bg{width:100%;background:url(../../img/bg_book7.png) center bottom no-repeat;background-size:contain;position:absolute;bottom:0;}
body.b8 .lv_bg{width:100%;background:url(../../img/bg_book8.png) center bottom no-repeat;background-size:contain;position:absolute;bottom:0;}
body.b9 .lv_bg{width:100%;background:url(../../img/bg_book9.png) center bottom no-repeat;background-size:contain;position:absolute;bottom:0;}
body.b10 .lv_bg{width:100%;background:url(../../img/bg_book10.png) center bottom no-repeat;background-size:contain;position:absolute;bottom:0;}




.lf_con{margin-right:8rem;z-index:9;}
.lf_con img{width:23.4rem;}
.rt_con{z-index:9;}
.rt_con a{width:18rem;height:5rem;border-radius:5rem;color:#fff;font-size:2.7rem;display:block;text-align:center;line-height:5.5rem;font-weight:800;}
.rt_con a:nth-child(1){background:#C31339;box-shadow: 0 0.5rem 0 0 #9b0f2d;margin-bottom:2.5rem;}
.rt_con a:nth-child(1):before{content:'';display:inline-block;width:2.4rem;height:2.4rem;background:url(../../img/ico_audio.png) no-repeat;background-size:contain;margin:0 1rem -0.3rem 0;}
.rt_con a:nth-child(2){background:#2E4190;box-shadow: 0 0.5rem 0 0 #243473;}
.rt_con a:nth-child(2):before{content:'';display:inline-block;width:2.4rem;height:2.4rem;background:url(../../img/ico_video.png) no-repeat;background-size:contain;margin:0 1rem -0.3rem 0;}



/*audio*/
.audio_con{padding:0 2rem 0 0;justify-content: left;}
.audio_con .player{order:2;width:46vw;/* display:flex;flex-wrap: wrap;justify-content: center; */position:relative;max-width:23rem;margin-left:4rem;overflow:inherit;text-align:center;}
.audio_con .playlist{width:54vw;height:84vh;overflow:hidden;overflow-y:auto;border-right:1px solid #ddd;padding-top:1.5rem;box-sizing:border-box;}
.audio_con .cover{text-align:center;margin-bottom:5px;}
.audio_con .cover img{width:12rem;}
.audio_con .cover_spin {animation: rotate_image 6s linear infinite;transform-origin: 50% 50%;}
.audio_con .cover_spinoff {animation-play-state: paused;}
@keyframes rotate_image{
    100% {
        transform: rotate(360deg);
    }
}

.player .title{font-size:1.6rem;margin-top:1rem;}
.player .time_wrap{text-align:center;position:relative;overflow:hidden;color:#888;margin-top:0.5rem;}
.time_wrap .time_i{float:left;font-size:1.2rem;}
.time_wrap .time_f{float:right;font-size:1.2rem;}
.time_progress{clear:both;width:100%;}
.p_btn_wrap{display:flex;justify-content: center;align-items: center;margin-top:0.5rem;}
.player-btn {width: 4.9rem;height: 4.7rem;border: none;background: url("../../img/btn_play.png") no-repeat;background-size: contain;margin:0 1.5rem;cursor:pointer;}
.player-btn.pause {background: url("../../img/btn_pause.png") no-repeat;background-size: contain;}
.player-prev{width:4.4rem;height:4.2rem;background:url(../../img/btn_prev.png) no-repeat;background-size:contain;border:none;}
.player-next{width:4.4rem;height:4.2rem;background:url(../../img/btn_next.png) no-repeat;background-size:contain;border:none;}




.ac_header {
	padding: 0.9rem 1rem;
  border-bottom:1px solid #ddd;
	/* background-color: #ccc; */
	/* margin-top: 2px; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	position:relative;
}
.ac_header:first-child{border-top:1px solid #ddd;}

.ac_header > * {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.6rem;
}
.ac_header.is-active {
	background-color: #f1f1f1;
	color: #444;
  border-bottom:none;
  border-bottom:1px solid #ddd;
}
.ac_header.is-active h2{font-weight: 800;;}

.ac_header::after {
	content: "";
	width: 1.6rem;
	height: 0.8rem;
	display: inline-block;
	position: absolute;
	top: 1.6rem;
	right: 0.5rem;
	background:url(../../img/ico_arrow.png)no-repeat;background-size:contain;
	transform: rotate(180deg);
	opacity: 0.7;
}

.ac_header.is-active::after{
	transform: rotate(0);
	opacity:1;
}

.is-active .ac_toggle {
	background-color: #fff;
}
.is-active .ac_toggle::before {
	display: none;
}


.ac_body {
	display: none;
	/* padding: 1em; */
	/* border: 1px solid #ccc; */
	border-top: 0;
}
.ac_body.is-active {
	display: block;
  background:#f1f1f1;
  border-bottom:1px solid #ddd;
}

.ac_body li{padding:1rem 1rem 1rem 3rem;font-size:1.5rem;cursor: pointer;}
.ac_body li span{color:#666;display:block;position:relative;padding-left:2rem;}
.ac_body li span:before{content:'';display:inline-block;width:0.4rem;height:0.4rem;background:#666;border-radius:2rem;position:absolute;top:0.8rem;left:0.4rem;}
.ac_body li.active{background:#2E4190;font-weight:800;}
.ac_body li.active span{color:#fff;}
.ac_body li.active span:before{background:url(../../img/ico_list_on.png)no-repeat;width:1.2rem;height:1.2rem;background-size:contain;border-radius:0;top:0.3rem;left:0;}



/*video*/
body.video .content{/*display:block;*/display:table;width:-webkit-fill-available;}
body.video .content_wrap{display:table-cell;vertical-align:middle;}
.vid_wrap{display:flex;justify-content: center;margin:0 2rem;background:#fff;border-radius:1rem 1rem 0 0;align-items:center;}
.vid_wrap .lf_list{margin-right:2.5rem;}
.vid_wrap .lf_list ul{height:23.5rem;overflow-x:auto;}
.vid_wrap .lf_list li{background:#fff;border:1px solid #ccc;border-bottom:3px solid #ccc;border-radius:3rem;height:3.5rem;line-height:3.2rem;min-width:22rem;padding:0 1rem;box-sizing:border-box;margin-bottom:0.5rem;color:#444;font-weight:700;font-size:1.6rem;cursor:pointer;}
.vid_wrap .lf_list li:last-child{margin-bottom:0;}
.vid_wrap .lf_list li.active{background:#2E4190;color:#fff;font-weight:800;border:none;box-shadow: inset 3px 3px rgba(0,0,0,0.2);}




video { height: auto; } 
.vjs-icon-previous-item:before, .vjs-icon-next-item:before { font-size: 2em; }
.vid_wrap .rt_vid{width:63%;max-width:50rem;}
.vid_wrap .video-js{height:0;max-width:100%;width:100%;padding-bottom:56.1%;}
.video-js .vjs-picture-in-picture-control, .video-js .vjs-volume-panel{display:none;}

.vid_btn{display:none;}
.video-holder,.video-holder * {box-sizing: border-box !important}
.video-holder {background: #1b1b1b;padding: 10px}
.centered {width: 100%}
#video {border-radius: 8px}
.video-holder .vjs-big-play-button {left: 50%;width: 100px;margin-left: -50px;height: 80px;top: 50%;margin-top: -40px}

body.video .video-js .vjs-control-bar{height:5rem;}


/* CUSTOM BUTTONS */
.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .vjs-icon-play:before{content:'';display:inline-block;width:3.2rem;height:3.2rem;background:url(../../img/btn_play.png) no-repeat;background-size:contain;}


.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before, .vjs-icon-pause:before{background:url(../../img/btn_pause.png) no-repeat;background-size:contain;}


.icon-angle-left:before {/* content: "\f104"; */content:'';display:inline-block;width:3.2rem;height:3.2rem;background:url(../../img/btn_prev.png) no-repeat;background-size:contain;}


.icon-angle-right:before {content:'';display:inline-block;width:3.2rem;height:3.2rem;background:url(../../img/btn_next.png) no-repeat;background-size:contain;}


.video-js .icon-angle-right, .video-js .icon-angle-left {cursor: pointer;-webkit-box-flex: none;-moz-box-flex: none;-webkit-flex: none; -ms-flex: none;flex: none;}

.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
    content: "";display:inline-block;width:1.8rem;height:1.6rem;background:url(../../img/btn_fullscreen.png) no-repeat;background-size:contain; }

.video-js .vjs-control-bar{background:url(../../img/video_bg.png) repeat-x;background-size:contain;}






.lf_list span{display:inline-block;color:#666;margin-right:10px;}
.lf_list li.active span{color:#fff;}





@media all and (orientation:portrait) {

    html {transform: rotate(90deg);transform-origin: top right;position: absolute;top: 100%;right: 0;width: 100vh;height: 100vw; }
    /* .Lcon{height:auto;} */
    body.select .Lcon{height:100%;}
    .audio_con .playlist {width: 54vh;height: auto;overflow: hidden;overflow-y: scroll;border-right: 1px solid #ddd;box-sizing: border-box;max-height: calc(100vw - 60px);overflow-x: scroll;}
    body.video .Lcon{height:100%;}

    /* 230801 수정테스트 */
    body.main .Lcon{height:100vw;overflow-y:scroll;}
    body.main .Lcon, .book_list{background:#FFF6CB;}
    body.sub .Lcon{background:#FFDE05;}
    .book_list li{width:20%;}
    /* .book_list span{font-size:1.3rem;} */
    body.audio .content{align-items: baseline;}
    .vid_wrap .lf_list li{font-size:1.5rem;}


}
    

@media all and (min-width: 1025px) {
    html{font-size:90%;}
    /* html {width: 100%;max-width: 760px;height: 360px;margin: 0 auto;background: #e1e1e1;position: absolute;top: 50%;margin-top: -180px;left: 50%;margin-left: -380px;}
    body {font-size: 16px;width: inherit;height: inherit;} */
    .audio_con .playlist {height: -webkit-fill-available;} 
    .Lcon {width: 100%;height:calc(100vh - 6rem);}
    body.main{background:#FFF6CB;height:100vh;}
    /* body.main .Lcon{overflow:hidden;overflow-y:scroll;} */
    .content {height: calc(100% - 60px);}
    .book_list{padding:0 0;height:calc(100% - 6rem);max-width:1500px;margin:0 auto;}
    /* body.select .Lcon{height:calc(100vh - 6rem);} */
    .video-js .vjs-control{width:4rem !important;}
    .vid_wrap .lf_list ul{height:auto;}
    .book_list li{width:17%;}
    .lf_con img{width:32rem;}
    .audio_con .player{max-width:25rem;margin-left:10%;}
    .vid_wrap .lf_list li{font-size:1.5rem;margin-bottom:0.7rem;}
    
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation : portrait){
    html{font-size:90%;}

   /*  html {width: 100%;max-width: 640px;height: 360px;margin: 0 auto;background:#e1e1e1;position: fixed;top:50%;left:50%;margin-top:50%;margin-left:-25%;}
    html{transform: none;max-width:640px;top:50%;left:50%;margin-left:-320px;margin-top:-180px;width:100%;height:360px;background:#e1e1e1;}
    body {font-size: 16px;width: inherit;height: inherit;} */
    .audio_con .playlist {height: -webkit-fill-available;}
    .Lcon {width: 100%;height: inherit;}
    body.main .Lcon{overflow:hidden;overflow-y:auto;}
    /* .content {height: calc(100% - 60px);} */
    .book_list{padding:0 0;height:calc(100% - 6rem);}
}

@media all and (max-width: 360px){
   
    
}


@media (max-device-width: 667px) and (orientation: landscape) {
    html{font-size:57%;}
}

@media (max-device-width: 568px) and (orientation: landscape) {
    html{font-size:50%;}
}


@media only screen and (min-device-width: 360px) and (max-device-height: 667px) and (orientation : portrait){
    html{font-size:57%;}
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait){
    html{font-size:50%;}
}


@media (max-width: 820px) and (orientation: landscape) {
    
    
}