@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&family=Yeon+Sung&display=swap');
html, body{margin:0;padding:0;height:100%;font-family: "Noto Sans KR", sans-serif;font-size:12px;}
ul, li, p, input, form, dl, dt, dd{margin:0;padding:0;list-style:none;}
a{text-decoration:none;color:#000;}
img{vertical-align:top;}
.wrap{width:100%;height:100%;}
.header{width:100%;border-bottom:1px solid #ccc;}
.headersect{width:100%;max-width:1200px;height:60px;margin:0 auto;}
.headersect:after{display:block;content:'';clear:both;}
.logo{float:left;}
.logo > img{height:50px;}
.slogun{position:absolute;left:50%;top:12px;transform:translateX(-50%);font-size:22px;font-weight:bold;font-family:"Noto Sans KR", sans-serif;}
.smenu{float:right;margin:15px 10px 0 0;visibility:visible;opacity:1;}
.smenu > li{float:left;padding:0 20px;}
.smenu > li p{font-size:14px;border-top:1px solid #fff;transition:all 0.3s;}
.smenu > li > a:hover p{font-weight:bold;border-top:1px solid #000;}
.tmenu{display:none;}
.closemenu{display:none;}
.bbg2{display:none;position:fixed;left:0;top:0;z-index:10;width:100%;height:100%;visibility:hidden;opacity:0;background-color:rgba(0,0,0,0.8);transition:all 0.3s;}

.bestcontents{width:100%;padding:20px 0 20px 0;background-color:#bbae8b;background-image:url('./pattern.png');background-repeat:repeat;}
.bestcontents > .title{width:100%;max-width:1200px;margin:20px auto;font-size:28px;font-weight:bold;font-style:italic;letter-spacing:-2px;color:#4b2910;}
.bestbooklist{/*display:flex;flex-wrap:wrap;justify-content: space-around;*/width:100%;max-width:1200px;margin:0 auto;background:url('./bar.png') repeat-y 0 0;}
.bestbooklist:after{display:block;content:'';clear:both;}
.bestbooklist > li{float:left;position:relative;width:20%;margin:0 0 80px 0;}
.bestbooklist > li.mv{width:40%;}
.bestbooklist > li.mv > a{width:280px;}
.bestbooklist > li.mv > a > p{width:280px;}
.bestbooklist > li > a{position:relative;display:block;width:140px;margin:0 auto;text-decoration:none;color:#fff;}
.bestbooklist > li > a > img{width:100%;}
.bestbooklist > li > a > p{position:absolute;bottom:0;width:140px;height:40px;line-height:40px;text-align:center;background-color:rgba(0,0,0,0.8);}
.bestbooklist > li > a > div{position:absolute;visibility:hidden;opacity:0;left:50%;top:0;transform:translateX(-50%);width:100px;padding:10px 0;background-color:#ee8b0b;
	font-size:15px;text-align:center;color:#fff;border-radius:10px;border:1px solid #fcd090;box-shadow:0 0 10px rgba(0,0,0,0.3);transition:all 0.3s;}
.bestbooklist > li > a:hover > div{visibility:visible;opacity:1;top:-20px;}

.contents{width:100%;margin:0;}
.categorysect{width:100%;border-bottom:1px solid #ccc;background-color:#f7f7f7;}
.category{width:100%;max-width:1200px;border-left:1px solid #ccc;margin:0 auto;overflow:auto;}
.category:after{display:block;content:'';clear:both;}
.tabs{width:1200px;}
.category li{float:left;border-right:1px solid #ccc;transition:all 0.3s;}
.category li.active{font-weight:bold;background-color:#f09818;}
.category li.active p{color:#fff;}
.category li p{font-size:16px;padding:20px 30px;}
.booksect{width:calc(100% - 40px);max-width:calc(1200px - 40px);margin:50px auto;padding:0 20px;}
.booklist{/*display:flex;flex-wrap:wrap;justify-content:space-around;*/}
.booklist:after{display:block;content:'';clear:both;}
.booklist > li{float:left;width:calc(100% / 6);margin:0 0 40px 0;}
.booklist > li > a{position:relative;display:block;width:170px;height:170px;margin:0 auto;border:1px solid #d5d5d5;transition:all 0.3s;}
.booklist > li > a:hover{box-shadow:0 0 10px rgba(0,0,0,0.3);}
.booklist > li > a > img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:137px;}
.booklist > li > .info{width:172px;margin:0 auto;}
.booklist > li > .info > .title{letter-spacing:-0.5px;}
.info > .title{margin-top:4px;font-size:14px;font-weight:bold;}
.info > .date{color:#ccc;}
.info > .navi{color:#b2b2b2;}

.footer{width:100%;border-top:1px solid #ccc;padding:40px 0;background-color:#f7f7f7;}
.footer > p{width:100%;max-width:1200px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;}

.movie{position:fixed;width:100%;height:100%;z-index:20;display:none;}
.movie video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;max-width:1200px;}
.movie .bbg{width:100%;height:100%;background-color:rgba(0,0,0,0.9);}
.closebtn{position:absolute;top:40px;right:40px;}
.booklist > li > a > img.movieimg{height:90px;}

.subcontent{width:100%;max-width:1200px;margin:0 auto;}
.subcontent:after{display:block;content:'';clear:both;}
.lnb{float:left;width:249px;height:1900px;border-right:1px solid #ccc;}
.lnb ul{margin-top:40px;}
.lnb ul > li{border-bottom:2px solid #f2b100;}
.lnb ul > li p{font-size:18px;font-weight:bold;padding:10px 25px;}
.rcont{float:right;width:calc(100% - 250px)}
.snavi{width:calc(100% - 20px);line-height:40px;text-align:right;border-bottom:1px solid #ccc;padding-right:20px;}
.detailcont{width:calc(100% - 80px);margin:20px 0 0 0;padding:0 40px;}
.detailcont dl{margin:0 0 50px 0;}
.detailcont dt{font-size:20px;font-weight:bold;color:#476b8f;padding:0 0 0 25px;background:url('../common/bolit.png') no-repeat 0 7px;}
.detailcont dd{padding:20px 25px;overflow:auto;}
.detailcont dd > p{font-size:15px;line-height:30px;}

.overview {width: 100%;min-width:600px;margin:0 0 40px 0;padding:0;position:relative;border-spacing:0;}
.overview caption{text-align:left;margin:0 0 10px 0;}
.overview th {border-top: 2px solid #474747;border-bottom: 1px solid #444444;padding: 10px;text-align: center;font-size:16px;background-color:#f6f7f9;}
.overview td {border-bottom: 1px solid #444444;padding: 10px;text-align: center;color:#57585a;font-size:14px;}

.mainvideo{width:100%;max-width:1200px;height:400px;text-align:center;margin:0 auto;background-color:#000;}
.mainvideo > video{height:100%;}
.maintxt{font-family:"Noto Sans KR", sans-serif;width:calc(100% - 40px);max-width:calc(1200px - 40px);padding:0 20px;margin:40px auto 40px auto;font-size:18px;line-height:180%;}
.ttsect{width:100%;max-width:1200px;margin:20px auto 40px auto;}
.ttabs{border-left:1px solid #81734d;}
.ttabs:after{display:block;content:'';clear:both;}
.ttabs li{float:left;font-size:14px;font-weight:bold;width:200px;line-height:40px;text-align:center;border-right:1px solid #81734d;border-top:1px solid #81734d;border-bottom:1px solid #81734d;cursor:pointer;background-color:rgba(255,255,255,0.5);}
.ttabs li.active{background-color:rgba(75,41,16,0.8);}
.ttabs li.active a{color:#fff;}

@media(max-width:1100px){
.bestbooklist{background:url('./bar.png') repeat-y center 0;}
.booklist > li{width:calc(100% / 5);}
}

@media(max-width:910px){
.booklist > li{width:calc(100% / 4);}
}

@media(max-width:750px){
.booklist > li{width:calc(100% / 3);}
}

@media(max-width:670px){
.bestbooklist > li, .bestbooklist > li.mv{width:50%;}
.mainvideo{height:300px}
.mainvideo > video{width:100%;}
.ttabs li{width:calc(50% - 1px);}
.smenu{position:fixed;float:none;margin:0;right:-200px;width:200px;height:100%;background-color:#fff;transition:all 0.3s;z-index:20;visibility:hidden;padding-top:50px;}
.smenu > li{float:none;width:100%;line-height:40px;}
.tmenu{display:inline;position:absolute;right:10px;top:10px;}
.tmenu a{display:block;width:40px;height:35px;text-align:center;padding-top:5px;}
.closemenu{display:inline;position:absolute;right:15px;top:15px;}
.bbg2{display:inline;}
}

@media(max-width:610px){
.booklist > li{width:calc(100% / 2);}
}

@media(max-width:419px){
.logo{float:none;position:absolute;left:50%;top:0;transform:translateX(-50%);}
.bestcontents > .title{text-align:center;}
.bestbooklist > li{width:calc(100% / 2);}
.bestbooklist > li.mv{width:100%;}
.booklist > li{width:calc(100% / 2);}
.lnb{display:none;}
.rcont{float:none;width:calc(100% - 0px)}
}

@media(max-width:400px){
.booklist > li{width:calc(100% / 1);}
}



.appinfo{position:fixed;left:50px;top:30px;width:calc(100% - 104px);max-width:520px;padding:0;border:1px solid #81734d;background-color:#fff;z-index:53;box-shadow:0 3px 5px 1px rgba(0,0,0,.3);}
.appinfo2{position:fixed;left:50px;top:30px;width:calc(100% - 104px);max-width:500px;padding:0;border:1px solid #81734d;background-color:#fff;z-index:53;box-shadow:0 3px 5px 1px rgba(0,0,0,.3);}
.apptitle{width:100%;height:30px;font-size:14px;background-color:#62452b;}
.appinfo a, .appinfo2 a{text-decoration:none;color:#000;}
.apptitle > p{float:left;font-size:14px;line-height:30px;color:#fff;margin-left:10px;}
.apptitle > a{float:right;display:block;width:30px;height:calc(30px - 6px);padding-top:6px;text-align:center;cursor:pointer;}
.appcont{padding:30px;font-size:15px;max-height:400px;overflow:auto;line-height:160%;}
.pputil{width:calc(100% - 10px);height:30px;text-align:center;line-height:30px;padding:0 0 0 10px;font-size:14px;background-color:#f7f7f7;}


.ppinfo{display:block; width:100%; height:150px; border:2px solid #ccc; border-radius:10px;}
.todaycloseyn{float:left; display:block;width:30%;height:25px;text-align:center;border:1px solid #ccc; text-decoration:none;color:#000;padding:0; cursor:pointer; line-height:25px; /*margin-left:10%*/ border-radius:10px; background-color:#c4cf46; color:#fff; font-weight:600;}
.abtn{display:block;width:45%;height:40px;line-height:40px;background-color:#d4d4d4;border:1px solid #ccc;margin:0 auto;text-align:center;padding:0;color:#000;font-weight:bold;border-radius:5px;transition:all 0.2s;}
.abtn:hover{color:#fff;background-color:#404040;}
#btn_close{width:1px; height:1px; background:none;}

#appinfo_m.appinfo a{display:block;width:48%;height:25px;margin-top:30px;text-align:center;border:1px solid #ccc;border-radius:5px;text-decoration:none;color:#000;padding:45px 0 0 0;}
#appinfo_m.appinfo .androiddown{float:left;background:url('./images/ico-android.png');background-repeat:no-repeat;background-size:30px 30px;background-position:center 8px;}
#appinfo_m.appinfo .iosdown{float:right;background:url('./images/ico-ios.png');background-repeat:no-repeat;background-size:30px 30px;background-position:center 8px;}
#appinfo_m.appinfo .closebtn{width:100%;height:40px;line-height:40px;margin-top:30px;background-color:#f7f7f7;padding:0;}

@media(max-width:400px){
.appinfo, .appinfo2{left:50%;transform:translateX(-50%);}
}