/* CSS Document */
	html { height:100%; }
	body { overflow-y:hidden;max-width: 1600px;margin: 0 auto;height: 100%; }
	section { width:100%; min-height:100vh; background: url("../img/bg.jpg"); transform: scale(1, 1); top: 0px; left: 0px; overflow: hidden;}	
	header { position: relative; background-color: #33336e; width: 100%; height: 68px; text-align: center; }
	header>div { position: relative; width: 80%; height: 100%; max-width: 1280px; text-align: center; margin: 0 auto; }	
	header .list { position: absolute; cursor: pointer; display: block; font-size: 40px; line-height: 40px; padding: 13px 0; left: 0;}
	header h1 { max-width: 65%; display: block; font: 500 30px/60px 'Noto Sans', sans-serif; color: #dedbfd; height: 100%; text-align: center; margin: 0 auto; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
	header .series { position: absolute; cursor: pointer; display: block; font-size: 40px; line-height: 40px; padding: 13px 0; right: 0; top: 0; background: transparent; border: none; }
    header .series img { vertical-align: inherit; }
	#view { margin:0 10% 0; } 
	.slick-slide img { max-width: 100%; max-height: 100%; width: 100%; }
	.btn { margin-left: 91%; } 
	.fas { font-size:26px;color:#fff; }
	.clearfix:before, .clearfix:after { display: table; content: ' ';}
	.clearfix:after {clear: both;}


	/*팝업 공통*/
	.Relative{ position: fixed;width: 100%;height: 100%;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.8);z-index: 999999;overflow: hidden;}
	.Relative .close{position:absolute; width:30px; height:30px; top:30px; right:20px; cursor:pointer; z-index:9999;}
	.Relative > div{border-radius: 10px;box-shadow: 1px 2px 3px 3px rgba(0,0,0,0.3);margin: 0 auto;position: absolute;background: #33336e;padding: 10px 20px; width: 95%;
    padding: 10px;}
	.Relative > div h1{padding: 15px 0 10px 0; text-align: center; color: #FFF; font-size: 30px;}

	/* 독서리스트 */
	#RS > div{ max-width: 850px; height: auto; top: 50%; transform: translate(0, -50%); box-sizing: border-box; position: relative; max-height: 80%; overflow: hidden; }
	.Relcont{ position: relative; height: 90%; max-height: 505px; overflow: auto; width: 100%; background: #FFF; box-sizing: border-box; padding: 10px 0; }
	.Relcont ul:after{content:''; display:block; clear:both;}
/*	.Relcont ul{width:100%; background:#FFF; box-sizing:border-box; padding:20px 0 10px;} */
	.Relcont ul > li{width: 25%; float: left; text-align: center; padding: 0 10px; padding-bottom: 30px; color: #33336e; box-sizing: border-box; max-height: 240px; text-overflow: ellipsis; overflow: hidden;}
	.Relcont ul > li img { height: 180px; max-width: 150px; border: 1px solid #ededed; padding: 5% 10%; box-sizing: border-box; display: block; margin: 0 auto; }
	
	/*오디오*/
	#Audio > div{max-width: 480px; width: 90%; max-height: 200px; box-sizing: border-box;top: 50%;left: 50%;transform: translate(-50%, -60%);}
	#Aidbox{background:#FFF; text-align:center; padding:20px; border-radius:10px;}
	#Aidbox audio{width:90%; margin:0 auto; display:block;}

	/*비디오*/
	#Video > div{width:80%; max-width:850px; max-height:730px; height:70%; overflow:hidden; top:10%; left:0; position:relative; margin:0 auto;}
	#Vidbox{height:85%;}
	
	@media only screen and (min-width:1800px){
		.audio{top:15%;}.video{top:23%;}
	}

	@media only screen and (max-width:1080px){
		.audio{top:14%;}.video{top:25%;}
        .Relcont ul li img{width: 170px;max-width: initial;}
	}
	
	@media screen and (max-width: 1024px){/*PC 작은 모니터*/
		.btn,.slick-arrow{width:45px !important; height:45px !important; background-size:contain !important; }
        .view-button { top: 15%; }
        .view-button span { font-size: 0; }
	}
    @media screen and (max-width: 912px){
        :root { font-size: 80%; }
        header h1 { max-width: 50%; }
    }
	@media only screen and (max-width:768px){/*테블릿 사이즈*/
        header { display: none; }
		header h1 { font-size:26px; max-width: 50%; }
		.btn { margin-right:0 !important;display:none!important; }.audio{top:10% !important;}.video{top:18% !important;}
		.series, .list { display:none!important;}
		#container {min-height: 470px; height: 100%;}
		#view { width: 100%; margin: 0 auto;display: block; height: calc(100% - 5rem); }
		#mob { display:block !important;  bottom:0; width: 100%; background-color: #F1F1F1; text-align: center;position: absolute;z-index: 999999999999999;}
		#mob>button span { color:#a3ac1c; display: block;font-size: 15px;line-height: 17px;text-align: center;     padding-bottom: 0.1rem; } 
		#mob>button img { width:34%;top:10px;}
		#mob>button { border:none; width: 19%; background-color:#F1F1F1; padding:0.25rem 0;}

		.slick-prev,.slick-next{width: 50px; height: 50px; font-size: 0!important; top: 50%!important; opacity:0.8;}
		.slick-prev{ background: url("../img/m_LT.png") no-repeat 100%/cover!important; left: 0!important;}
		.slick-next{ background: url("../img/m_RT.png") no-repeat 100%/cover!important; right: 0!important;}
		.slick-slide img{margin: 0 auto;}
			
		#Relhead{text-align: center;}

		#Relbox{max-height:80%; width:80%; height:70%;}
		#Relcont{display:flex; align-content: flex-start; flex-wrap: wrap; width:98%; height:90%; margin-top:2rem;  max-height:80%; overflow:auto; text-align:center; position:relative; justify-content: center; }
		#Relcont div{width:38%}
		#Relbox h1{font-size:26px;}


		/*popup*/
		.Relative > div{padding-top:0;}
		.Relative > div h1{height:2em; box-sizing:border-box; padding:0; line-height:2em; font-size:26px;}
		.Relative .close{width:1.5em; height:1.5em; top:15px;}

		#RS > div{ width:95%;  }
		
		.Relcont ul li{ display: block; width: 50%; padding: 0 10px 20px 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0 auto; text-align: center; max-height: 240px;}
        .Relcont ul li img {display: block; margin: 0 auto; max-width: 220px; margin-bottom: 10px; box-sizing: border-box;     max-width: 100%; }

		
		 #Video > div{position:relative; width:95%; left:0; margin:0 auto; box-sizing:border-box;}
		#Audio > div h1, #Video > div h1{height:2.3em;}
		#Aidbox{padding:15px 5%;}

		#Vidbox{height:80%;}
	}

	@media only screen and  (orientation: landscape) and (max-width:768px){ 
		header{height:50px; }
		header h1{line-height:42px !important; font-size:20px;}
		#mob{padding:0.2rem 0 !important;}
		#mob>button {width:10%;}
		#view{height:calc(100% - 50px)!important; padding-bottom:3rem!important;}
		#Relcont {width: 70%!important; margin-left:15% !important;}

		#mob>button{height:3.5rem; padding:0.25rem 0;}

	} 
	

	@media screen and (max-width: 480px){/*모바일 사이즈*/
        #mob>button { width: 19%; }	
        .Relcont ul li { max-height: 240px; overflow: hidden; white-space: normal;}
        .Relcont { max-height: 380px; }
        
	}
	@media screen and (max-width: 320px){/*모바일 iPhone5*/
		header h1{font-size:26px;}
		#Relhead h1{font-size:26px; }

	}