@charset "utf-8";

/* 작성자 : 이영란 */
/* 최종작성일 : 2021-08-20 */
/* 버전 : v1.1 */

/*-------------------------------------------------------DESKTOP-------------------------------------------------------*/
@media all and (max-width: 1700px) {
	
	/* SORT */
	.sort .btSort { display: block; }
	
	
	/* FACET */
	/* article.facet { position: fixed; top: 0 !important; bottom: 0; left: 0; right: 0; margin-right: 0; z-index: 500; display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
	article.facet .wrap { display: block; width: 400px; height: auto; background-color: #fff; margin: auto; }
	article.facet .tit { display: block; }
	article.facet .btns { display: block; }
	
	article.facet.on { display: flex; }
	 */
	
	/* golist */
	.golist01{
		right: 150px;
	}
	
	
}
@media all and (max-width: 1200px) {
	
	/* golist */
	.golist01{
		right: 30px;
		bottom: 20px;
	}
	
	/* bx-slider */
	.bx-pager { right: 20px; margin-right: 0; }
	.bx-pager-item { width: 15px; height: 15px; }
	.bx-pager-link { width: 10px; height: 10px; border-radius: 5px; }
	
	

	
	
	/* TAP */
	/* .tap.index li { padding-right: 20px; }
	.tap.index li::after { right: -40px; }
	.tap.index li i { padding-left: 20px; }
	
	 */

	/* 도서상세 */
	/* article.detail .inner > .btns { position: static; margin-top: 20px; } */
	article.detail .inner > .btns .btTxt { display: inline-block; margin: 0 5px; }
	article.detail .inner > .btns .btTxt ~ .btTxt { margin: 0 5px; }
	
	
	/* 게시판 카테고리 */
	article.category { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 600; background-color: #fff; margin-top: 0; }
	article.category .tit { display: block; }
	article.category .tap { display: flex; }
	article.category .m { height: 35px; line-height: 35px; color: #000; border-bottom: 1px solid #e1e1e1; background-color: #fff; }
	article.category .drop { display: none; height: auto; border: 0; background-color: #f9f9f9; border-bottom: 1px solid #e1e1e1; padding: 10px 0; margin: 0; }
	article.category .drop li { font-size: 14px; }
	article.category .drop li:hover { background-color: #f0f0f0; }
	article.category .btDrop.on ~ .m { color: #f4792a; }
	article.category .btDrop.on ~ .drop { display: block; }
	article.category .bbs > li { display: block; width: 100%; }
	article.category .bbs > li .btDrop { display: block; }
	article.category .bbs > li:nth-of-type(8n) .drop { border-right: 1px solid #e1e1e1; }


	


	/****************************** CONTENTS ******************************/	
	
	/* 메인 */
	section.main .visual > .inner { left: 0; right: 0; padding: 0; margin-left: 0; }
	section.main .visual .banner .btBnr { bottom: 50px; }
	
	
	section.main .content.curation .tapCon .inner { overflow: hidden; height: auto; padding: 50px 20px; }
	
	/******************** 소통하기 ********************/
	section.commu .sort { padding-bottom: 10px; }
	section.commu .btns { overflow: visible; }
	section.commu .btns .btSearch { position: fixed; bottom: 50px; left: 20px; z-index: 300; display: inline-block; width: 60px; height: 60px; border-radius: 50%; background: #fff url("/resources/img/talks/bt_filter_ic.png") no-repeat center 50%; background-size: 30px; box-shadow: 0 5px 10px rgba(0,0,0,0.3); }
	section.commu .btns .btWrite { position: fixed; bottom: 50px; right: 20px; z-index: 300; }
	
	
	/* 진로독서 > 진로검사 */
	section.career.test .title { padding: 20px 0; }
	section.career.test .title .inner { display: block; height: auto; background-size: 80px; padding: 0 10px 0 90px; }
	section.career.test .title h3 { display: block; height: auto; padding: 0; }
	section.career.test .title h3 em { display: inline-block; padding: 0; }
	section.career.test .title .txt { display: block; font-size: 12px; line-height: 150%; padding: 0; border: 0; }

	section.career.test .content::before { display: none; }
	section.career.test .content .inner { padding: 0; }
	section.career.test .enneagram { position: static; width: 100%; height: auto; padding-bottom: 10px; }
	section.career.test .enneagram ul { display: block; width: auto; height: auto; background: none; margin: 20px auto; }
	section.career.test .enneagram ul::before { display: none; }
	section.career.test .enneagram li { position: static; display: inline-block; margin: 0 5px; }
	section.career.test .enneagram li:nth-of-type(9) { margin-left: 0; }
	section.career.test .enneagram li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.5); cursor: pointer; }
	section.career.test .enneagram li.on { color: #fff; background-color: #707070; }

	section.career.test .scroll .btPrev { display: block; }
	section.career.test .scroll .btNext { display: block; }
	section.career.test .scroll ul > li { width: 100%; }


	/* 메인 내 토론방 */

	.my_debate_room .left {
		width: 49%;
		margin-right: 2%;
	}

	.debate_making{
		width: 38%;
		margin-right: 2%;
	}

	.debate_making .sj {
		font-size: 18px;
	}

	.debate_making .txt{
		font-size: 15px;
	}

	.debate_making .icon{
		height: 115px;
	}

	.debate_playing{
		width: 60%;
	}

	.debate_playing .sj{
		font-size: 18px;
	}

	.debate_playing .txt{
		font-size: 15px;
	}

	.debate_playing .icon{
		width: 105px;
	}

	.debate_completion{
		width: 60%;
	}

	.debate_completion .sj{
		font-size: 18px;
	}

	.debate_completion .txt{
		font-size: 15px;
	}
	

	.debate_completion .icon{
		width: 105px;
	}

	.my_debate_room .right{
		width: 49%;
	}

	.debate_recent .txt_box{
		padding: 25px 15px;
	}

	/* 이달의 북앤토픽 */

	section.main .content.curation .scroll{
		margin-right: 15px;
	}

	.shuffle{
		width: 52%;
	}

	.shuffle .book {
		width: 230px;
	}

	/* 메인 토론도서 리스트 */


	.main .list.one li{
		max-width: 186px;
		width: auto;
		margin: 0;
		margin-right: 60px;
	}

	.main .list.one ul > li:last-child {
		margin-right: 0px;
	}
	

	/* 토론방 둘러보기 */

	.main .debate_room_box{
		overflow-x: scroll;
	}

	.main .debate_room_wrap{
		min-width: 1200px;
	}

	.bnt_month li img {
		width: 100%;
		height: 300px;
	}

	/* 북앤토픽 라이브러리 */

	.bnt_month.lib li img {
		width: 100%;
		height: 240px;
	}

		/* 메인 북앤토픽 */

		.main .bnt_month{
			overflow-x: scroll;
		}


		.main .bnt_month.lib li img {
			height: 239px;
		}

		/* 드롭박스 */

		article.detail .dropBox{
			right: 10px;
		}

		/* 내토론방 */
		.step_wrap > .mdr_box {
			width: 400px;
			height: 290px;
			margin-right: 20px;
		}

		.step_wrap > .bnt_box.detail.case2.mdr {
			width: calc(100% - 420px);
			height: 290px;
		}
		.shuffle li.on {
			margin-left: -115px;
		}
		.bnt_box .left .shuffle .book {
			width: 170px;
			height: 230px;
		}

		.bnt_box .left .shuffle.exp li.on {
			margin-top: -12px;
		}



		.step_wrap > .bnt_box.detail.case2.mdr .left .shuffle li.on .book .pic {
			width: 170px;
			height: 230px;
			overflow: hidden;
		}
		.step_wrap > .bnt_box.detail.case2.mdr .left .shuffle li.on .book {
			transform: scale(0.95);
			margin-top: -30px;
		}

		.bnt_box.detail.case2 .right h3 {
			margin-top: 15px;
		}


		.bnt_box.detail.case2 .right{
			padding-right: 10px;
		}

		.bnt_box.detail.case2.mdr .right .bkt_book_detail .book .intro {
			bottom: 55px;
		}

		.bnt_box.detail.case2.mdr .left{
			width: 200px;
		}
		
		.bnt_box.detail.case2.mdr .right{
			width: calc(100% - 200px);
		}
		
		.mdr_search_box .field.date .input ~ .input {
			margin-left: 6%;
		}

		.field.date .input ~ .input {
			margin-left: 4%;
		}

		.date .right .field.date::before {
			left: 212px;
		}

		.date .right .field.date .check {
			margin-left: 14px;
		}

		.popBox.debate_room	.field.date .input ~ .input {
			margin-left: 6%;
		}

		.popBox.debate_room .search_right .field.date::before {
			position: absolute;
			left: 47%;
			top: 7px;
			content: "~";
			display: block;
			width: 6%;
			height: 30px;
			line-height: 30px;
			color: #000;
			font-size: 14px;
			text-align: center;
		}

		.popBox.debate_room .field.date .input {
			width: 47%;
		}

		.step_wrap .bk_search .search .find{
			width: 810px;
		}

		.contents_book_box li {
			width: 16%;
			/* min-width: 200px; */
			height: 250px;
			margin-right: 5%;
			background: #ececec;
			margin-bottom: 2%;
		}

		
}
/*-------------------------------------------------------TABLET & MOBILE WIDE-------------------------------------------------------*/
@media all and (max-width: 960px) {

	
	.sub .tap.mobile li{
		height : 40px;
		line-height: 40px;
	}
	
	.tap.mobile.index li.on{
		height: 50px;
		line-height: 50px;
	}

	.cl-mobile-select > label{
		color: #55a014 !important;
	}

	.debate_sj .more{
		margin-left: 10px;
	}


	.mobile_popup{
		display: block;
	}

	.al_box.on .al_box_tab{
		display: none;
	}

	
	nav.gnb .m.on {
		border-color: #6eb92c;
		font-weight: 400;
	}


	.mHide { display: none !important; }
	
	.container { padding-top: 87px; }

	section.main .content.curation {
		margin: 50px 0;
	}

	.title .btMore {
		margin-left: 20px;
	}
	
	/* BT_WRITE */
	.btWrite { position: fixed; right: 12px; bottom: 50px; z-index: 400; display: block; min-width: auto; width: 60px; height: 60px; text-indent: -9999px; border-radius: 50%; background: #f4792a url("/resources/img/talks/ico_pen.png") no-repeat center 50%; box-shadow: 0 5px 10px rgba(0,0,0,0.3); }

	/* BT_TIP */
	.btTip { width: 30px; height: 30px; background-size: 10px; }

	/* BT_MORE */
	.btMore i { height: 30px; line-height: 30px; font-size: 14px; }
	
	/* BT_LIST */
	/* .btList { border-radius: 15px; background-color: #e2e2e2; }
	.btList i:first-of-type { margin-right: 0; } */
	
	
	/* CHECKBOX : ONOFF */
	/* .check.onoff label { padding-right: 55px; }
	.check.onoff label::before { width: 50px; }
	.check.onoff label::after { right: 20px; content: ""; width: 30px; text-indent: -9999px; border-radius: 50%; }
	.check.onoff input:checked ~ label::after { content: ""; } */
	
	
	/* KEY */
	.key { font-size: 14px; line-height: 120%; }
	.key::after { width: 14px; height: 14px; }
	
	/* FIELD */
	/* .field.date::before { left: 45%; width: 10%; } */
	.field.date .input { width: 45%; }
	/* .field.date .input ~ .input { margin-left: 10%; } */
	.field.date .btns.set { float: none; width: 100%; margin-left: 0;}

	/* BOOK */
	.book { width: 140px; }
	/* .book .pic { height: 200px; } */
	.book .pic .btns { bottom: 0; left: 0; right: 0; top: 0; opacity: 1; }
	.book .pic .btns .btCard { width: 100%; height: 100%; background: none; margin: 0; }
	.book .pic .btns .btView { display: none; }
	.book .tit { height: 40px; font-size: 16px; line-height: 20px; margin-top: 10px; }
	.book .btBlank { display: block; }



	.main .list.one li {
		margin-right: 10px;
	}
	
	/* CATE */
	.cate .tit { font-size: 16px; }
	.cate .tit b { font-size: 20px; }
	
	/* CARD */
	.card { width: 300px; height: 300px; }
	.card .txt { font-size: 14px; }
	
	/* SHUFFLE */
	.shuffle { display: block; width: 100%; height: 380px; }
	.shuffle .book { width: 200px; }
	.shuffle li.on { margin-left: -115px; width: 230px; }
	.shuffle li.on .book { width: 230px; }
	.shuffle li.on .book .pic {
		height: 230px;
	}
	.book .pic {
		height: 230px;
	}
	
	/* RENT */
	.rent { font-size: 14px; }
	.rent .btTxt { height: 35px; line-height: 35px; font-size: 14px; padding: 0; }
	
	.path { display: none; }
	
	/* REPORT */
	.report .tit { font-size: 20px; padding: 25px 0; }
	.report .pic { height: 120px; }
	.report .pic img { height: 120px; }
	.report .pic .wrap { font-size: 12px; line-height: 150%; padding: 10px 15px; }
	.report .pic .wrap strong { font-size: 16px; }
	
	
	/* TITLE */
	.title { padding-bottom: 20px; }
	.title::before { margin-bottom: 20px; }
	.title .tap { float: none; display: block; width: 100%; text-align: right; margin: 0; margin-top: 20px; }
	.title .tap.rd { margin-top: 10px; }
	.title .tap ~ .btMore { position: absolute; right: 0; bottom: 75px; }
	.title::after{
		margin-top: 0;
	}
	.title.exp{
		padding-bottom: 0;
	}
	.title.exp2{
		padding-bottom: 0;
	}


	
	/* STEP */
	.step li { font-size: 18px; line-height: 18px; letter-spacing: -1px; }
	.step li b { display: block; font-size: 12px; letter-spacing: 0; padding-top: 10px; }
	
	/* TAP */
	.tapScroll .btNext,
	.tapScroll .btPrev { display: none; }
	
	/* SORT */
	.sort .total { line-height: 20px; padding: 10px 55px 10px 0;  font-size: 16px;}
	.sort ul { padding-top: 10px; }
	.sort .btns .btTxt { min-width: 80px; height: 30px; line-height: 30px; padding: 0 15px; }
	
	/* SEARCH */
	.search .find { height: 45px; margin: 23px 0; width: 90%;}
	.search .find .input { height: 45px; line-height: 45px; padding: 0 50px 0 110px; }
	.search .find input::placeholder{font-size: 16px;}
	.search .find .btFind { right: 15px; background-size: 25px; }
	.search .find .btFilter { width: 60px; height: 45px; background-size: 30px; }
	.search .find .btFilter ~ .input { width: calc(100% - 70px); }
	.search .find .btFilter ~ .btFind { right: 75px; }
	.search .find .btSearch { width: 70px; height: 45px; border-radius: 23px; background-size: 30px; }
	.search .find .btSearch ~ .btFind { right: 85px; }
	.search .find .btSearch ~ .input { width: calc(100% - 80px); }
	/* .search .month { overflow-x: scroll; white-space: nowrap; padding: 20px 10px 5px 10px; } */
	.search .month::-webkit-scrollbar { width: 0; display: none !important; }
	.search .month a { font-size: 16px; }
	.inner.pdNone { padding: 0; }
	.inner.pdNone .title{
		padding: 0 12px;
		padding-top: 20px;
	}
	.search .inner.mpd{
		padding: 0 12px;
	}
	.search .tap.full { display: block; overflow: hidden; overflow-x: scroll; -ms-overflow-style: none; height: 55px; white-space: nowrap; width: 100%; }
	.search .tap.full::-webkit-scrollbar { width: 0; display: none !important; }
	/* .search .tap.full li { float: none; } */
	.search .tap.full li span { padding-right: 10px;  }

	.popup.search .tap.full{
		height: 40px;
	}

	.popup.search .tap.full.ca li{
		width: 33.333%;
	}

	.search .find .select{
		font-size: 16px;
		left:-15px;
	}

	.search .find .select .select_inbox {
		width: 90px;
	}

	.popup.mSearch .search .find .input {
		padding: 0 50px 0 20px;
	}

	.popup.mSearch .search .find .input::placeholder{
		font-size: 14px;
	}

	.search .find .input::placeholder{
		font-size: 14px;
	}
	
	/* GRID */
	.grid.mo { margin-top: 10px; }
	.grid.mo ul > li { padding: 5px 10px; }
	.grid.mo ul > li.on { background: #f1f1f1; }
	/* .grid.mo ul > li:hover { background: none; } */
	.grid.mo ul > li.answer { padding: 20px; }
	.grid.mo ul > li.answer .btns { display: block; }
	
	.grid.bd ul > li { margin-bottom: 50px; }
	
	.grid.mo.box ul { border-top: 1px solid #e2e2e2; }
	.grid.mo.box ul > li .td.xs,
	.grid.mo.box ul > li .td.sm,
	.grid.mo.box ul > li .td.md,
	.grid.mo.box ul > li .td.lg,
	.grid.mo.box ul > li .td.xl { width: auto; }
	.grid.mo.box .row { display: block; overflow: hidden; height: auto; padding-right: 35px; }
	.grid.mo.box .th { display: none; }
	.grid.mo.box .td { display: inline-block; height: auto; text-align: left; margin-right: 10px; }
	.grid.mo.box .td.num { width: auto; height: auto; font-weight: 500; padding-top: 5px; }
	.grid.mo.box .td.tit { display: block; width: 100%; line-height: 150%; font-weight: 500; padding-top: 10px; margin: 0; }
	.grid.mo.box .td.tit ~ .td { height: 30px; line-height: 30px; color: #a1a1a1; font-size: 14px; }
	.grid.mo.box .td.con { display: block; float: left; width: calc(100% - 35px); margin: 0; }
	.grid.mo.box .td.day {  width: auto; height: auto !important; line-height: 100% !important; font-size: 14px !important; margin: 0; }
	.grid.mo.box .td.now { padding-left: 10px; width: auto; margin: 0; }
	.grid.mo.box .td.btn { position: absolute; right: 0; bottom: 0; width: 35px !important; height: 35px !important; margin: 0; }
	.grid.mo.box .td.chk { position: absolute; right: 0; top: 50%; margin-top: -15px; width: 30px !important; height: 30px !important; margin-right: 0; }
	.grid.mo.box .td .mT { display: inline-block; padding-right: 3px; }
	.grid.mo.box .td br { display: none; }
	.grid.mo.box .re { position: absolute; right: 0; top: 50%; margin-top: -16px; text-align: center; padding-left: 0; }
	.grid.mo.box .re .mT { display: block; color: #a1a1a1; font-weight: 300; padding: 0; }
	
	.grid .report { margin-top: 0; }
	.grid .report .tit { font-size: 18px; border-bottom: 1px solid #ececec; }
	.grid .report .tit em { float: none; display: block; color: #898989; padding: 10px 0; }
	.grid .report .pic { position: static; width: 100%; margin: 10px 0; }
	.grid .report .con { height: 120px; line-height: 20px; padding-right: 0; }
	.grid .report .re { height: 40px; line-height: 40px; text-align: left; border-top: 1px solid #ececec; background-position: left 50%; background-size: 30px; padding-left: 40px; }
	

	.grid.mo .td.tit .number{
		position: absolute;
		right: 7px;
		top: 10px;
	}

	.grid.mo.box .number .mT{
		padding-right: 0;
		position: absolute;
		top: 22px;
		right: -8px;
		color: #4a5e9c;
		font-size: 14px;
		font-weight: 300x;
	}

	.td.tit .file {
		position: absolute;
		margin-left: 0px;
	}

	.grid.box.mo .row {
		display: block;
		overflow: hidden;
		height: auto;
		padding-right: 35px;
	}

	.grid.box.mo .td.tit {
		display: block;
		width: 100% !important;
		line-height: 150%;
		font-weight: 500;
		padding-top: 10px;
		margin: 0;
	}

	.grid.box.mo .comment_list .td.tit {
		padding-top: 5px;
	}

	.grid.box.mo .comment_list .td.con {
		width: 700px;
	}

	.grid.box.mo .comment_list .td.day {
		margin-top: 5px;
		width: auto;
	}

	.grid.box.mo .comment_list .td.btn {
		position: absolute;
		right: 0;
		top: auto;
	}

	.grid.box.mo .comment_list  .td.tit ~ .td {
		height: 30px;
		line-height: 30px;
		color: #a1a1a1;
		font-size: 14px;
	}

	.grid.box.mo .comment_list  .td.day {
		position: absolute;
		top: 0;
		right: 0;
		width: auto;
		height: auto !important;
		line-height: 100% !important;
		font-size: 14px !important;
		margin: 0;
	}

	.grid.box.mo .comment_list  .td.tit.pl20{
		padding-left: 0px !important;
		color: #323232;
		font-weight: 400;
	}

	.grid.mo .comment_list li .td.xl{
		position: absolute;
		right: 0;
		top: 0;
		width: 145px;
		margin-right: 0;
	}

	.grid.mo .comment_list li .td.btn{
		position: absolute;
		right: 0;
		bottom: 5px;
		margin-right: 0;
		width: 35px;
	}


	.grid.box.mo .td {
		display: inline-block;
		height: auto;
		text-align: left;
		margin-right: 10px;
	}
	
	/* LIST */
	/* .list { padding-top: 10px; }
	.list ul > li { width: 19%; margin: 0 4%; margin-bottom: 30px; }
	.list ul > li:nth-of-type(5n + 1) { margin: 0 4%; margin-bottom: 30px; }
	.list ul > li:nth-of-type(5n) { margin: 0 4%; margin-bottom: 30px; }
	.list ul > li:nth-of-type(4n + 1) { margin-left: 0; }
	.list ul > li:nth-of-type(4n) { margin-right: 0; }
	
	.list.on ul > li:nth-of-type(5n + 1) { margin: 0; margin-bottom: 30px; }
	.list.on ul > li:nth-of-type(5n) { margin: 0; margin-bottom: 30px; }
	.list.on ul > li > .btns { display: none; }
	.list.on ul > li > .btns ~ .book { padding-right: 0; }
	.list.on ul > li > .btns ~ .book .con { right: 0; }
	.list.on .book .pic { width: 140px; margin-right: 20px; }
	.list.on .book .tit { font-size: 20px; }
	.list.on .book .word { display: none; }
	.list.on .book .con { position: static; margin-top: 10px; }
	.list.on .book .btns { position: static; text-align: right; padding-top: 10px; } */
	
	/* NO DATA */
	.noData .btTxt { display: none; }

	/* SCROLL */
	.scroll { margin-top: 0; }
	.scroll .btNext,
	.scroll .btPrev { display: none; }
	
	.scroll > ul > li .book { width: 180px; }
	.scroll > ul > li .cate { width: 250px; height: 250px; }
	.scroll > ul > li .cate .pic { height: 170px; }
	.scroll > ul > li .cate .txt { height: calc(100% - 170px); font-size: 16px; }
	.scroll > ul > li .card { width: 300px; }

	.scroll.one { width: auto; }
	.scroll.one > ul > li { width: auto; margin-left: 10px; }
	.scroll.one > ul > li:first-of-type { margin: 0; }

	.scroll.three > ul > li { width: auto; margin-left: 10px; }
	.scroll.three > ul > li:nth-of-type(3n - 1) { margin: 0; margin-left: 10px; }
	.scroll.three > ul > li:first-of-type { margin: 0; }

	.scroll.four > ul > li { width: auto; margin: 0; margin-left: 10px; }
	.scroll.four > ul > li:nth-of-type(4n + 1) { margin: 0; margin-left: 10px; }
	.scroll.four > ul > li:nth-of-type(4n) { margin: 0; margin-left: 10px; }
	.scroll.four > ul > li:first-of-type { margin: 0; }

	.scroll.five > ul > li { width: auto; margin: 0; margin-left: 10px; }
	.scroll.five > ul > li:nth-of-type(5n + 1) { margin: 0; margin-left: 10px; }
	.scroll.five > ul > li:nth-of-type(5n) { margin: 0; margin-left: 10px; }
	.scroll.five > ul > li:first-of-type { margin: 0; }
	
	
	/* PAGES */
	.pages .btMore { display: inline-block; background-color: #6eb92c; }
	.pages .btMore i { color: #fff; }
	.pages .btMore i::before { border-top: 2px solid #fff; border-right: 2px solid #fff; }
	.pages .pg { display: none; }
	.pages .pgBtn { display: none; }

	/* article.popup.search .pages .pg { display: inline-block; }
	article.popup.search .pages .pgBtn { display: inline-block; }

	article.popup.search .pages .btMore{display: none;} */

	.pages {
		padding-top: 30px;
	}
	
	/* BAND BANNER */
	.bandBnr .inner { background-position: 10px 50%; padding-bottom: 20px; }
	.bandBnr .txt { padding: 20px 0 10px 0; }
	.bandBnr .btMore { position: static; }
	
	
	/* WRITE */
	.write { margin-top: 20px; }
	.write .textarea { height: 200px; }
	.write dt { display: block; float: none; width: 100%; padding-bottom: 0; }
	.write dd { display: block; float: none; width: 100%; border: 0; padding-top: 0; }
	.write .involve { width: calc(100% - 120px); }
	
	
	/* REPLY */
	.comment { position: relative; display: block; overflow: hidden; font-size: 0; text-align: center; }
	.comment .t { font-size: 16px; }
	.comment .t em { font-size: 12px; }
	.comment .btns .btTxt { min-width: 60px; height: 30px; line-height: 30px; font-size: 14px; padding: 0 10px; }
	.comment .txt { height: 20px; line-height: 20px; font-size: 12px; }
	.comment ~ .comment { padding-top: 0; }
	
	.comment.box > .btTxt { bottom: 20px; }
	
	/* BTNS */
	.btns .field .select { display: none; }
	.btns .field .input { width: 100%; }
	
	.pop_bt.make {
		width: 110px;
		background: #6eb92c url(/resources/img/talks/search_detail.png) left+10px center no-repeat;
		background-size: 20px;
		padding-left: 25px;
	}
	
	/* VIEWER */
	.viewer { padding-top: 40px; }
	.viewer > .tit { display: block; overflow: hidden; color: #000; font-size: 20px; text-align: left; border-top: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; padding: 20px 0 10px 0; }
	.viewer > .tit .info { display: block; font-size: 0; text-align: right; padding-top: 20px; }
	.viewer > .tit .info li { display: inline-block; color: #000; font-size: 14px; padding-left: 0px; }
	.viewer > .tit .info li:nth-of-type(1) { padding-right: 10px; }
	.viewer > .tit .info li:nth-of-type(2) { display: block; text-align: left; padding-right: 10px; }
	.viewer > .tit .info li:nth-of-type(2) ~ li { color: #959595; padding: 0; padding-right: 20px; float: left;  }
	.viewer > .tit .btns ~ .info { padding-bottom: 60px; }
	.viewer > .con { display: block; overflow: hidden; color: #000; font-size: 14px; text-align: left; padding: 20px 0; }
	.viewer .detail .book .pic { margin-bottom: 20px; }
	.viewer .detail .dropBox ~ .btns { position: static; text-align: left; padding: 10px; padding-top: 0; }
	.viewer .detail .dropBox ~ .btns .btTxt { display: inline-block; margin: 0; background-color: rgba(0,0,0,0.1); }
	.viewer .detail .dropBox ~ .btns .btTxt ~ .btTxt { margin-top: 0; margin-left: 10px; }
	.viewer .btCategory { margin: 0; }
	.viewer h4 { margin-top: 30px; }
	
	/* SLIDER */
	.step_wrap >  .slider { width: 300px; height: 300px; margin: 30px auto; }
	.bx-wrapper {
		position: relative;
		width: 300px !important;
		height: 300px !important;
	}

	.bx-wrapper .bx-viewport {
		display: block;
		width: 300px !important;
		height: 300px !important;
	}

	.slider .bx-prev {
		left: -50px;
		margin-left: 0;
		background-image: url(/resources/img/talks/bt_prev_view.png);
		background-size: 25px;
	}

	.slider .bx-next {
		right: -50px;
		margin-right: 0;
		background-image: url(/resources/img/talks/bt_next_view.png);
		background-size: 25px;
	}

	/****************************** RAYOUT ******************************/

	/* HEADING */

	/* HEADING : SITE */
	h1 { width: 165px; height: 35px; background-position: center 50%; }
	
	/* HEADING : CATEGORY */
	h3 { font-size: 24px; letter-spacing: -2px; }

	/* HEADING : PAGE */
	h4 { font-size: 20px; letter-spacing: -1px; }

	/* HEADING : PARAGRAPH */
	h5 { color: #0069b5; font-size: 20px; font-weight: bold; line-height: 100%; padding: 0 0 10px 20px; }

	/* HEADING : POPUP */
	h6 { font-size: 18px; }


	/* GNB */
	nav.gnb .m { font-size: 20px; }
	nav.gnb li { text-align: center; }


	/* HEADER */
	header { position: fixed; }
	header .inner {  transition: all 0.1s;     padding: 10px 12px 0 12px; }
	header h1 { float: none; display: block; margin: 5px auto 0 auto; transition: all 0.1s; }
	header h2 { display: none; }
	header .btMy { display: block; position: absolute; top: 7px; left: 10px; transition: all 0.1s; }
	header .btFinder { display: block; position: absolute; top: 10px; right: 80px; transition: all 0.1s; width: 40px; height: 40px; background-size: auto 23px;}
	header .find { display: none; }
	header .btUser { display: none; }
	header .gnb { float: none; width: 100%; margin: 10px 0 0 0; }
	header .btMenu,
	header .btEbook { display: none; }


	header.fix h1 { height: 25px; margin-top: 0; }
	header.fix .gnb { margin-top: 15px; }
	header.fix .btMy { top: 0; }
	header.fix .btFinder { top: 5px; }

	header.fix .al_box {
		top: 5px;
	}

	nav.gnb .m_gnb{
		display: block;
		margin-right: 20px;
		border: 1px solid #6eb92c;
		border-radius: 20px;
		padding: 0 15px;
		height: 35px;
    	line-height: 34px;
    	margin-top: 5px;
	}

	nav.gnb ul{
		width: 70%;
	}

	.al_box.num{
		position: absolute;
		background-size: auto 24px;
	}

	.al_box{
		top: 10px;
		right: 20px;
		width: 40px;
		height: 40px;
	}

	.al_box.num .al {
		width: 22px;
		height: 22px;
		right: -8px;
		bottom: -2px;
	}
	
	.al_box .al p {
		line-height: 22px;
	}

	/* FOOTER */
	footer { display: none; }
	
	
	/* FACET */
	/* article.facet { overflow: auto; padding: 20px; }
	article.facet .wrap { width: 100%; } */
	
	
	/* 게시판검색 */
	article.finder { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 500; display: none; width: 100%; height: 100%; background-color: #fff; margin: 0; }
	article.finder .tit { display: block; }
	article.finder dl { border: 0; padding: 20px; }
	article.finder dt { display: block; float: none; width: 100%; }
	article.finder dd { text-align: center; padding: 0; margin: 0; }
	article.finder dd .select { width: 100%; margin: 0; margin-bottom: 10px; }
	article.finder dd .select:last-of-type { width: 100%; margin: 0; margin-bottom: 30px; }
	article.finder dd .btTxt.ss { position: static; }
	
	
	/* 도서상세 */
	article.detail { background-color: #ececec; margin: 0; }
	article.detail .inner { padding: 0; }
	article.detail .inner > .btns { background-color: #e2e2e2; padding: 5px 0; margin: 0; margin-bottom: 10px; position: static; width: 100%;  }
	article.detail .inner > .btns .pop_bt{background: none; width: 33.333%; height: 100%; float: left !important; display: block; margin: 0; padding: 0; color: #000; position: relative; overflow: unset; font-size: 18px;}
	article.detail .inner > .btns .pop_bt::after{
		position: absolute;
		content: "";
		width: 1px;
		height: 90%;
		background: #b4b4b4;
		top: 3px;
		right: 0px;
	}
	article.detail .inner > .btns .pop_bt:last-child:after{
		display: none;
	}

	/* article.detail .inner > .btns .btTxt { display: inline-block; background-color: #e2e2e2; margin: 0; }
	article.detail .inner > .btns .btTxt ~ .btTxt { margin: 0; } */

	article.detail .book { padding: 20px 12px; }
	article.detail .book .tit { position: relative; left: auto; font-size: 22px; width: 100%; }
	article.detail .book .txt { display: none;}
	/* article.detail .book .info { display: block; position: static; margin-bottom: 20px; } */
	article.detail .book .intro { left: unset; right: 20px; bottom: 0px; }
	article.detail .book .intro dt,
	article.detail .book .intro dd { display: none; }
	article.detail .book .intro dd.drop { display: inline-block; font-size: 0;  width: 70px; right: 0; bottom: 0px;  }
	article.detail .book .intro dd.drop::before { content: "책소개"; width: 100%; height: 100%; color: #000; font-size: 14px; line-height: 40px; border-radius: 0; background: none; padding-left: 10px; }
	article.detail .book .intro dd.drop::after { bottom: 50%; margin-bottom: -1px; border-top-color: #000; border-right-color: #000; }
	article.detail .book .intro dd.drop.on::after { bottom: 50%; margin-bottom: -6px; }
	article.detail .book .pic { display: block; width: 180px; margin: 0 auto; }
	article.detail .dropBox { top: calc(100% - 66px); left: 10px; right: 10px; }
	article.detail .tap { display: flex; padding: 0 12px; }

	article.detail .tap li.on span { background: #6eb92c; }
	article.detail .tap ~ .select { display: block; }
	
	
	article.units { display: none; }
	
	
	article.reply .grid.box .td.con { padding: 5px 0; }

	.pop_bt.making{
		position: absolute;
		width: 130px;
		left: 50%;
		transform: translate(-50%);
		bottom: 30px;
	}
	

	/****************************** POPUP ******************************/
	
	/* 팝업 */

	article.popup.alert .popBox{width: auto; min-height: 200px; height: auto; max-width: 550px; min-width: 310px;}

	article.popup.alert .popBox .btns{position: unset; float: right; width: auto; transform: unset;}

	article.popup.alert .popBox .msg {
		font-size: 18px;
	}

	article.popup .popBox { width: 100%; height: 100%; min-width: unset; max-width: unset; }
	
	article.popup .popBox .msg { font-size: 14px; }

	article.popup.search .popBox .msg { font-size: 18px; }

	article.popup .popBox .msg{padding: 20px 0;}

	article.popup.search .search .find{margin: 5px 0;}
	
	/* 맞춤도서 */
	article.popup.custom .popBox { width: 100%; padding: 0; }
	article.popup.custom .popBox .tit .btTxt i { text-indent: -9999px; }
	article.popup.custom .popBox .msg br { display: block; }
	article.popup.custom .popBox .item { width: 90px; }
	
	article.popup.custom.step1 .popBox .item { width: 90px; height: 90px; line-height: 90px; }
	
	article.popup.custom .popBox .con {
		height: 100%;
	}

	article.popup.custom .popBox .con.exp {
		background: rgba(0,0,0,0.5);
		position: relative;
		max-height: unset;
	}

	article.popup.custom .popBox .con.exp div{
		width: 275px;
		height: 275px;
		background: #fff;
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
		line-height: 275px;
		color: #888888;
		font-size: 20px;
	}


	article.popup .popBox .btns {
		bottom: 20px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 330px;
	}

	article.popup.custom.code2 .popBox .debate_room_wrap .txt{
		font-size: 14px;
	}

	/* 팝업 : 상세검색 */
	article.popup.search > .wrap { padding: 0; }
	article.popup > .wrap{ vertical-align: baseline;}

	article.popup.alert > .wrap{ vertical-align:middle;}
	article.popup.search .popBox { width: 100%; padding: 0; }
	article.popup.search .popBox dl { padding: 0 15px; }
	article.popup.search .popBox dt { font-size: 16px; }
	article.popup.search .popBox dt em { font-size: 12px; }
	/* article.popup.search .popBox dd .field { width: calc(100% - 65px); } */
	/* article.popup.search .popBox dd .field .select { width: 30%; } */
	/* article.popup.search .popBox dd .field .input { width: 70%; } */
	/* article.popup.search .popBox dd .field ~ .select { width: 60px; } */
	article.popup.search .popBox .btTxt { height: 40px; line-height: 40px; font-size: 18px; border-radius: 20px; }
	article.popup.search .popBox .btns { text-align: center; padding-bottom: 20px; }
	
	article.popup.custom .popBox.debate_room{
		width: 100%;
	}
	/* 모바일용 검색 */
	article.popup.mSearch > .wrap { padding: 0; }


	/****************************** CONTENTS ******************************/
	
	section.sub .inform { display: none; }
	
	section.sub.view .inner { position: static; }
	section.sub.view .inner .units ~ .content { width: 100%; margin-left: 0; }

	
	section.sub.view .openbook { background-size: 100%; padding-top: 0; margin-bottom: 0; }
	section.sub.view .openbook ul { width: 170px; height: 228px; border-radius: 0 10px 10px 0; background-color: #e8e8e8; padding-top: 60px; vertical-align: top; margin: 0 10px; margin-top: 50px; }
	section.sub.view .openbook .polygon { display: block; width: 80px; height: 180px; margin: auto; margin-top: 100px; }
	section.sub.view .openbook .polygon span { font-size: 14px; }
	section.sub.view .openbook .polygon span.p1 { bottom: 110%; }
	section.sub.view .openbook .polygon span.p6 { top: 110%; }
	

	/* LOGIN */
	section.login { margin: 0; }
	section.login h1 { margin: 0 auto; }
	section.login h2 { display: none; }
	section.login .hello { display: block; }
	section.login .input { display: block; margin-bottom: 10px; }
	section.login .input.id { background: #f5f5f5; padding-left: 10px; }
	section.login .input.pw { background: #f5f5f5; padding-left: 10px; }
	section.login .check.fl { display: inline-block; margin-bottom: 10px; }
	section.login .btn { margin: 0; }
	section.login .btn ~ .check { display: none; }
	section.login .content { padding: 40px 0 50px 0; }

	/* MAIN */
	section.main .banner .slideBnr li { background: none; }
	section.main .banner .inner { height: auto; }
	section.main .banner img { display: block; width: 100%; }
	
	section.main > .btBnr { top: 105px; }
	section.main .visual { height: 400px; }
	section.main .visual .banner strong { font-size: 50px; letter-spacing: -2px; }
	section.main .visual .tap.index li { padding-left: 15px; }
	section.main .visual .tap.index li::after { left: -45px; }
	section.main .visual .tap.index li span { font-size: 16px; padding-left: 0; padding-right: 15px; }
	section.main .visual .tapCon .inner { padding: 0; }
	section.main .visual .scroll ul { padding: 0 12px; }
	
	section.main .content.interest .bg .title h4 { display: block; padding-right: 0; }
	section.main .content.interest .bg .title h4::before { display: none; }
	
	section.main .content.curation .title { padding-bottom: 0; }
	section.main .content.curation .title .tap { display: flex; float: none; width: 100%; }
	section.main .content.curation .title .tap li { flex: 1; min-width: auto; }
	section.main .content.curation .title .tap li:nth-of-type(1).on { background-color: #7da7d9; }
	section.main .content.curation .title .tap li:nth-of-type(2).on { background-color: #8fc786; }
	section.main .content.curation .title .tap li:nth-of-type(3).on { background-color: #f6989d; }
	section.main .content.curation .title .tap li:nth-of-type(4).on { background-color: #a8a8a8; }
	section.main .content.curation .tapCon .inner { padding: 0; }
	section.main .content.curation > .tapCon { margin-top: 0; }
	section.main .content.curation > .tapCon.view2 { background-color: #ececec; }
	section.main .content.curation > .tapCon.view2 .shuffle { background-color: #8fc786; }
	section.main .content.curation > .tapCon.view3 { background-color: #ececec; }
	section.main .content.curation > .tapCon.view3 .shuffle { background-color: #f6989d; }
	section.main .content.curation > .tapCon.view4 { background-color: #ececec; }
	section.main .content.curation > .tapCon.view4 .shuffle { background-color: #a8a8a8; }
	section.main .content.curation .scroll { float: none; width: 100%; height: 100%; border-radius: 0; background: none; box-shadow: none; padding: 10px 0; }
	section.main .content.curation .scroll ul > li { padding: 12px; margin: 0; }
	section.main .content.curation .scroll .card { width: 250px; height: 250px; border-radius: 10px; background-color: #fff; padding: 10px; box-shadow: 0 5px 5px rgba(0,0,0,0.1); }
	
	
	/* 전자책 모아보기 *
	section.collage .search .inner { background-color: #fff; padding-top: 30px; }
	
	/* 우리학교 인기도서 */
	section.popular .title h3 { display: block; float: none; }
	section.popular .title .count { display: inline-block; }
	section.popular .pages .btMore { display: inline-block; background-color: #3e71ad; padding: 0 30px; }
	section.popular .pages .btMore i { color: #fff; padding-right: 20px; }
	section.popular .pages .btMore i::before { border-top: 2px solid #fff; border-right: 2px solid #fff; }
	section.popular .pages .pg,
	section.popular .pages .pgBtn { display: none; }
	
	/* 통합검색  */
	/* section.result .search .inner { background-color: #fff; padding-top: 30px; }
	section.result .inner > .btMore { display: none; }
	section.result .search .tap.index { display: flex; }
	section.result .search .tap.index li { flex: 1; padding: 0; margin: 0; }
	section.result .search .tap.index li ~ li { margin-left: 1px; }
	section.result .search .tap.index li::after { display: none; }
	section.result .search .tap.index li span { height: 40px; line-height: 40px; font-size: 14px; background-color: #efefef; padding: 0; }
	section.result .search .tap.index li.on { height: 40px; }
	section.result .search .tap.index li.on span { line-height: 40px; background-color: #0a3b64; }
	section.result .content > .btMore { display: none; }
	section.result .pages .btMore { display: inline-block; }
	section.result .pages .pgBtn,
	section.result .pages .pg { display: none; }
	 */

	 .search .tap li{
		 width: 25%;
	 }
	
	 .tap.index li{
		padding-right: 15px;
	 }

	 .tap.index li span{
		width: calc(100% + 15px);
		border-top-right-radius: 40px;
	 }


	
	/* 한학기 한권 */
	section.semester.main .title h3 { font-size: 20px; }
	
	section.semester.view .content .title { margin-bottom: 10px; }
	section.semester.view .content dt { display: block; float: none; width: 100%; color: #000; font-size: 16px; text-align: left; padding: 15px 25px; }
	section.semester.view .content dt br { display: none; }
	section.semester.view .content dd { border-top: 0; padding: 15px 25px; }
	
	section.semester.view .content .ex::before { background-position: 130px top; }
	section.semester.view .content .ex .tit { font-size: 16px; }
	section.semester.view .content .ex .tit em { font-size: 14px; }
	section.semester.view .content .ex .tit .btClose { top: 0; right: 0; }
	section.semester.view .content .ex .con { height: auto; background: #ececec; }
	section.semester.view .content .ex .con img { opacity: 1; }
	
	
	
	
	/* 교과독서 */
	section.subject.view .content .words .tap { display: block; overflow: hidden; overflow-x: scroll; -ms-overflow-style: none; height: 50px; white-space: nowrap; }
	section.subject.view .content .words .tap::-webkit-scrollbar { width: 0; display: none !important; }
	section.subject.view .content .words .tap li { font-size: 16px; padding: 0 20px; }
	
	/* 교과독서 > 교과서 파헤치기 */
	section.subject.plumb .title h3 { display: inline-block; padding-right: 10px; }
	section.subject.plumb .detail { background: none; padding-top: 20px; }
	section.subject.plumb .detail .book { min-height: auto; padding: 0 12px; }
	section.subject.plumb .detail .book .tit { position: absolute; left: 180px; font-size: 20px; }
	section.subject.plumb .detail .book .txt { position: absolute; left: 180px; margin: 10px 0; }
	section.subject.plumb .detail .book .info { position: absolute; left: 180px; margin-bottom: 20px; }
	section.subject.plumb .detail .book .intro { left: 180px; right: 12px; bottom: 0; }
	section.subject.plumb .detail .book .intro dt { display: none; }
	section.subject.plumb .detail .book .intro dd.drop { border: 0; }
	section.subject.plumb .detail .book .intro dd.drop::before { display: none; }
	section.subject.plumb .detail .book .intro dd.drop::after { display: none; }
	section.subject.plumb .detail .book .pic { width: 150px; margin: 0; }
	section.subject.plumb .detail .book > .btTxt { left: 180px; }
	section.subject.plumb .detail .dropBox { left: 180px; right: 12px; }
	section.subject.plumb .tapScroll { margin: 0; }
	section.subject.plumb .tap.index li { width: 50%; }
	section.subject.plumb .tap.index li span { font-size: 14px; padding: 0; }
	
	section.subject.plumb.view .title h3 { display: block; padding-right: 0; }
	
	/* 진로독서 */
	section.career .visual .banner { background: #f6989d url("/resources/img/talks/acc01.png") no-repeat 30px calc(100% - 30px); background-size: 180px; }
	section.career .visual .banner .inner { background: url("/resources/img/talks/acc03.png") no-repeat calc(100% - 10px) 40%; background-size: 80px; padding: 20px 30px 0 30px; }
	section.career .visual .scroll { margin-top: 30px; }
	
	section.career .content.today .cate { width: 100%; height: auto; margin-bottom: 10px; }
	section.career .content.today .cate .txt { height: auto; }
	section.career .content.today .scroll { display: block; float: none; width: 100%; }
	
	section.career.test .scroll .tit { right: auto; left: 20px; top: 10px; }
	
	
	/* 교양독서 */
	section.refine .visual .banner { background: #a8a8a8 url("/resources/img/talks/acc04.png") no-repeat center calc(100% - 30px); background-size: 300px; }
	section.refine .visual .banner .inner { background: url("/resources/img/talks/acc05.png") no-repeat calc(100% - 10px) 30%; background-size: 70px; padding: 30px 80px 0 30px; }
	section.refine .visual .scroll { margin-top: 50px; }
	section.refine .visual .tap.full { display: block; overflow: hidden; overflow-x: scroll; -ms-overflow-style: none; height: 65px; white-space: nowrap; }
	section.refine .visual .tap.full::-webkit-scrollbar { width: 0; display: none !important; }
	section.refine .visual .tap.full li { float: none; }
	section.refine .visual .tap.full li span { padding: 0 30px; }
	
	section.refine.view .title h4 ~ .btns { display: none; }
	
	
	/* 소통하기 */
	section.commu .btns .btWrite ~ .btTxt { display: none; }

	section.commu.data .btCategory { display: none; }
	section.commu.data.view .btCategory { display: block; }
	
	section.commu.hope .write { margin: 0; }
	
	/* 마이페이지 */
	section.my .sort { border-bottom: 0; margin-bottom: 0; }
	section.my .sort .btSort { display: block; }
	
	section.my.act .sort .btSort ~ .btns { display: none; }
	section.my.act .border { border-top: 1px solid #0a3b64; border-bottom: 1px solid #0a3b64; padding: 20px 0; margin: 30px 0 20px 0; }
	section.my.act .border .step { margin-bottom: 20px; }
	section.my.act .border .field { width: 100%; margin: 10px 0; }
	section.my.act .border .field::before { display: none; }
	section.my.act .border .field .input { width: 80%; }

	section.my.act .detail { background: none; }
	section.my.act .detail .book { padding: 0; padding-bottom: 50px; }
	section.my.act .detail .book .tit { position: absolute; left: 140px; font-size: 20px; }
	section.my.act .detail .book .intro { display: block; top: 50px; left: 140px; right: 12px; }
	section.my.act .detail .book .pic { width: 120px; margin: 0; }
	
	section.my.info .grid { margin-top: 0; }
	section.my.info .grid ul > li .td.lg { width: 100px; }
	section.my.info .input { width: 100%; }
	

	/* 메인 */

	section.main .search + .content .title {
		padding-top: 50px;
	}

	.title_acc {
		padding-left: 15px;
	}

	.title_acc img{
		width: 80%;
	}

	.title_sub{
		padding-left: 95px;
	}

	.my_debate_room .left{
		width: 100%;
	}

	.debate_making {
		width: 45%;
	}
	.debate_playing {
		width: 53%;
	}
	.debate_completion {
		width: 53%;
	}

	.debate_making .icon {
		height: 130px;
	}

	.debate_playing .icon {
		width: 115px;
	}

	.debate_completion .icon {
		width: 115px;
	}

	.debate_playing .sj {
		margin-top: 30px;
	}

	.debate_completion .sj {
		margin-top: 32px;
	}

	.my_debate_room .right{
		width: 100%;
	}

	.my_debate_room .right h4 {
		margin-top: 20px;
		text-align: center;
		font-size: 24px;
		display: block;
		padding-left: 0px;
	}
	
	.debate_recent{
    	height : 160px;
	}

	.debate_recent .pic {
		width: 210px;
	}

	.debate_recent .txt_box{
		width: calc(100% - 210px);
	}

	.debate_recent .txt_box {
		font-size: 16px;
	}

	.debate_recent .sj{
		font-size: 18px;
	}
	
	.main .list{
		padding-top: 0;
	}

	
	.main .list ul > li {
		margin: 0;
		margin-right: 10px;
		min-width: 186px;
	}

	.main .list ul > li:last-child{
		margin-right: 0;
	}

	.sub .list.sc{
		padding-top: 30px;
	}
	

	.sub .list.sc ul > li {
		margin: 0;
		margin-right: 10px;
		min-width: 186px;
		position: relative;
    	width: 16%;
	}

	.sub .list.sc ul > li:nth-of-type(2n) {
		margin-right: 10px;
	}

	.sub .list.sc ul > li:nth-of-type(4n) {
		margin-right: 10px;
	}

	.sub .list.sc ul > li:last-child{
		margin-right: 0;
	}


	/* 메인 토론방 둘러보기 */

	.main .debate_room_wrap{
		min-width: 1000px;
	}

	.main .debate_room_wrap li {
		margin-right: 1.5%;
		width: 23.875%;
	}

	.main .debate_room_wrap li:last-child {
		margin-right: 0px;
	}

	.debate_room_wrap .txt_box .sj{
		font-size: 16px;
		min-height: 50px;
	}

	.debate_room_wrap .txt_box{
		font-size: 14px;
	}

	.debate_room_wrap .txt_box .txt span:nth-child(1) {
		width: 50px;
	}

	.debate_room_wrap .txt_box .txt span:nth-child(1)::after {
		height: 15px;
		background: #5a5a5a;
		top: 4px;
	}

	.pic_ic {
		width: 40px;
		height: 40px;
		color: #fff;
		font-size: 14px;
		text-align: center;
		line-height: 35px;
		position: absolute;
		left: 10px;
		top: -5px;
		z-index: 10;
	}

	.pic_ic.p {
		background-size: 40px;
	}
	.pic_ic.e {
		background-size: 40px;
	}

	.pic_ic.c {
		background-size: 40px;
	}

	.nodata.scrap2 .sj{
		font-size: 18px;
	}
	.nodata_interest .sj{
		font-size: 18px;
	}

	.content.interest .nodata_around .txt_box .sj{
		font-size: 18px;
	}
	
	.mdr_box .pic_ic {
    	left: unset;
    	right: 10px;
    	top: -15px;
	}

	/* 과목별도서 */

	section.sub .title {
		padding-top: 10px;
	}
	section.sub .title h3 {
		font-size: 22px;
	}
	.content.debate_book .title h3{font-size: 22px;}

	.sub .tap li {
		height: 50px;
		line-height: 50px;
	}

	.sub .list{
		padding-top: 0;	
	}

	.sub .list ul > li {
		position: relative;
		display: inline-block;
		overflow: visible;
		width: 21.25%;
		margin: 0;
		margin-right: 5%;
		margin-bottom: 30px;
		vertical-align: top;
	}

	.sub .list ul > li:nth-of-type(4n){
		margin-right: 0;
	}


	.sub .list.on ul > li{
		width: 100%;
	}

	.sub .list.on .book .con{
		display: none;
	}


	.sub .list.on .book .tit{
		font-size: 20px;
	}

	.sub .list.on .book .info{
		font-size: 18px;
		color: #5a5a5a;
	}
	
	.topic_box .topic_sj .pop_bt.wi{
		width: 130px;
	}


	/* 북앤토픽 */


	.bnt_month{
		width: 90%;
		margin: 0 auto;
		margin-top: 70px;
		margin-bottom: 50px;
		position: relative;
	}
	
	.bnt_month li{
		width: 50%;
		height: 350px;
		margin-right: 0;
		float: left;
		opacity: 0.5;
		text-align: center;
		position: relative;
	}

	
	.bnt_month li.on{
		z-index: 10;
		position: absolute;
		opacity: 1;
		top: 10px;
		left: 50%;
		transform: translateX(-50%) scale(1.2, 1.2) ;
	}

	.bnt_month li img{
		width: 250px;
		height: 250px;
	}
	
	.bnt_month li p{
		color: #323232;
		font-size: 16px;
		width: 250px;
		text-align: left;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		display: none;
	}

	.bnt_month li.on p{
		display: block;    display: -webkit-box;
	}
	
	.bnt_month.lib{
		width: 100%;
	}

	.bnt_month.lib li{
		opacity: 1;
		height: 255px;
		margin-bottom: 30px;
	}

	.bnt_month.lib li img {
		height: 200px;
	}

	.bnt_month.lib li p{
		display: block;
		display: -webkit-box;
		width: 100%;
		margin-top: 10px;
	}

	.step_box .st_sub_title{
		font-size: 18px;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.contents_box {
		height: 40px;
		line-height: 40px;
	}

	.link_box .st_sub_title{
		font-size: 16px;
		margin-top: 10px;
	}

	.topic_box .topic_sj div{
		min-height: 50px;
	}

	.topic_box .topic_sj div.on{
		height: 50px;
	}

	/* 메인 북앤토픽 */

	.main .bnt_month{
		overflow-x: scroll;
	}



	.main .bnt_month.lib li{
		float: left;
		margin-right: 1.5%;
		/* width: 23.875%; */
		width: 48%;
	}

	.main .bnt_month.lib li:nth-of-type(2n){
		margin-right: 1.5%;
	}

	.main .bnt_month.lib li:last-child{
		margin-right: 0;
	}

	.main .bnt_month.lib li{
		height: 290px;
	}

	/* nodata */

	.nodata {
		font-size: 18px;
		color: #323232;
		text-align: center;
		background: url(/resources/img/talks/no_data01.png) top+40px center no-repeat;
		background-size: 90px;
		padding-top: 150px;
		padding-bottom: 40px;
	}

	.step_wrap.student .nodata {
		font-size: 18px;
		color: #323232;
		text-align: center;
		background: url(/resources/img/talks/no_data01.png) top+80px center no-repeat;
		background-size: 90px;
		padding-top: 60px;
		padding-bottom: 40px;
	}


	.inner.mdr .debate_room_wrap li .pic_ic {
		left: 10px;
	}

	.pic_box_hover p {
		font-size: 16px;
	}

	.debate_sj{
		font-size: 24px;
	}

	.mdr_num .more{
		width: 120px;
	}

	.debate_sj .more{
		width: 120px;
	}

	.mdr_search_box{
		display: none;
		position: fixed;
		z-index: 400;
		width: 100%;
		height: 100%;
		background: #fff;
		top: 0;
		left: 0;
		margin-top: 0;
	}

	.mdr.date{
		width: 100%;
		padding: 15px 8px;
	}

	.detail_search_bt{
		display: block;
	}

	.detail_search_bt2{
		display: block;
	}

	.mdr_search_top{
		display: block;
		width: 100%;
		padding: 0 30px;
		background-color: #0a3b64;
		color: #fff;
		text-align: center;
		height: 55px;
		line-height: 55px;
		font-size: 20px;
	}

	.mdr.date .left{
		width: 100%;
		color: #323232;
	}

	.mdr.date .right{
		width: 100%;
	}

	.mdr.date .right.date div:nth-of-type(1),	.mdr.date .right div:nth-of-type(3){
		width: 70px;
		margin-bottom: 20px;
	}

	.mdr.date .right.date div:nth-of-type(2),	.mdr.date .right div:nth-of-type(4){
		width: calc(100% - 70px);
		margin-bottom: 20px;
	}

	.mdr.date .right .pop_bt.wi02{
		display: none;
	}

	.mdr.date .stxt{
		display: block;
		height: 40px;
		line-height: 40px;
		color: #5a5a5a;
	}

	.mdr.date .right .input.name{
		width: 100%;
	}

	.mdr.date .right .field.date .input.date{
		background: #f5f5f5 url(/resources/img/talks/bt_cal.png) right+10px center no-repeat;
		box-shadow: none;
		width: 47%;
		border: 1px solid #d7d7d7;
		padding-left: 10px;
	}

	.mdr.date .right .field.date::before {
		left: 47%;
	}

	.mdr.date .right .month .bt_month{
		width: 32.666%;
		box-shadow: none;
		background: #ececec;
	}

	.mdr.date .right .month button~button {
		margin-left: 1%;
	}
	
	.mdr.date .btns.mo{
		display: block;
		width: 330px;
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
	}

	.mdr.date .drName{
		margin-top: 10px;
	}

	.mdr.date .right .input.name{
		background: #f5f5f5;
		border: 1px solid #d7d7d7;
		box-shadow: none;
	}

	.nodata .txt_box .sj{
		font-size: 20px;
	}

	/* 토론방 만들기 */

	.step_wrap {
		margin-top: 20px;
	}

	.step li.on{
		width: 60%;
		color: #fff;
		line-height: none;
		padding-left: 20px;
	}

	.step li{
		color: #366999;
		height: 50px;
		line-height: 50px;
		text-align: center;
		padding-left: 30px;
	} 

	.step li.on p:nth-child(1){
		margin-top: 0;
	}

	.step li::before {
		border: 25px solid transparent;
		border-left: 25px solid #ececec;
	}

	.step li.on::before {
		border-left: 25px solid #366999;
	}

	.step li::after {
		border: 25px solid transparent;
		border-left: 25px solid #fff;
	}

	.step_wrap>div {
		margin-bottom: 30px;
	}

	.step_wrap>.date{
		margin-bottom: 40px;
	}


	.step_box h4 span{
		display: none;
	}

	.step_box .name div{
		width: 100%;
	}

	.step_box .ssj div{
		width: 100%;
	}

	.step_box .date div{
		width: 100%;
	}

	.btTip.sj{
		display: inline-block;
		left: 5px;
	}

	.bt_ta{
		width: 140px;
	}

	.date .right .field.date .check .notice{
		display: none;
	}

	
.step_wrap .date .right p{
    display: block;
}
	
	.step_wrap .img .left{
		width: 120px;
	}

	.step_wrap .img .right{
		width: calc(100% - 120px);
	}

	.bt_ta.b{
		display: block;
	}

	.step_wrap .img .right .open_box.img{
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		z-index: 999;
		border-radius: 0;
		margin-top: 0;
	} 

	.step_wrap .img .right .open_box.img li{
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 50px;
		line-height: 50px;
		background: #fff;
		color: #323232;
		width: 80%;
	}

	.step_wrap .img .right .open_box.img li:nth-of-type(1){
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		border-bottom: 1px solid #b4b4b4;
	}

	.step_wrap .img .right .open_box.img li:nth-of-type(2){
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.open_box .btTxt{
		display: block;
		position: absolute;
		bottom: 30%;
		width: 80%;
		left: 50%;
		transform: translateX(-50%);
	}

	.step_wrap .img .right .basic_img{
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		z-index: 999;
		border-radius: 0;
		margin-top: 0;
	}

	.img .basic_img>div{
		display: block;
		background: #0a3b64;
		color: #fff;
		height: 55px;
		line-height: 55px;
		text-align: center;
		font-size: 20px;
		position: relative;
	}
	.img .basic_img>div .img_popbt{
		position: absolute;
		font-size: 16px;
		right: 25px;
		top: 50%;
		transform: translateY(-50%);
	}

	.step_wrap .img .right .basic_img ul{
		padding: 20px;
	}


	.img .right .attach{
		display: none;
	}
	

	.step_wrap .secret .left {
		width: 120px;
	}

	.step_wrap .secret .right{
		width: calc(100% - 120px);
	}

	.step_wrap .teacher .left {
		width: 120px;
	}

	.step_wrap .teacher .right{
		width: calc(100% - 120px);
	}

	.teacher .right .sub {
		width: 140%;
   		position: relative;
    	left: -120px;
	}

	.date .right .field.date .check{
		width: 85px;
	}

	.mo_img_box{
		display: block;
	}

	.bnt_box .left{
		width: 100%;
	}
	.bnt_box .right{
		display: none;
	}

	.step_wrap .bk_search h4{
		display: none;
	}

	.step_wrap .bk_search .search{
		width: 100%;
		margin-top: 10px;
		margin-bottom: 15px;
	}

	.step_wrap .bk_search .search .find{
		width: 100%;
	}

	.bnt_box.detail .shuffle li .book .tit{
		display: block;
	}
	
	.bnt_box .left .shuffle{
		width: 80%;
		margin: 0 auto;
	}

	.bnt_box .left .shuffle .book {
		width: 190px;
		height: 300px;
	}

	.step_wrap>.bnt_box {
		height: 400px;
	}

	.bnt_box.detail.case2 .left{
		width: 100%;
	}

	.nodata.choose {
		background: url(/resources/img/talks/bg_nodata_book.png) top+40px center no-repeat;
		background-size: 80px;
	}

	.bnt_box.case2 .left .shuffle .book {
		width: 180px;
		height: 290px;
	}

	.bnt_box.detail.case2 .left .shuffle li.on .book .pic {
		height: 240px;
	}

	.debate_room_com {
		background: url(/resources/img/talks/bg_com.png) top+70px center no-repeat;
		background-size: 90px;
		padding-top: 180px;
		padding-bottom: 100px;
	}

	.btns .btTxt ~ .btTxt {
		margin-left: 15px;
	}

	.contents_book_box {
		width: 100%;
		height: 310px;
	}

	.contents_book_box li {
		min-width: 186px;
		height: 230px;
		margin-right: 10px;
	}

	.contents_book_box li .book_minus{
		height: 100%;
	}

	.contents_book_box li img {
		height: 230px;
	}

	.debate_choice_box{
		width: 100%;
	}

	.debate_choice_box div{
		width: 49%;
		padding: 0;
		text-align: center;
		padding-top: 120px;
		min-height: 230px;
	}

	.debate_choice_box div p{
		width: 95%;
		margin: 0 auto;
	}

	.debate_choice_box div:nth-child(1){
		margin-right: 2%;
	}

	.debate_choice_box .one.on {
		background: #6eb92c url(/resources/img/talks/chat_on.png) center top+20px no-repeat;
		background-size: 90px;
	}

	.debate_choice_box .one {
		background: #ececec url(/resources/img/talks/chat.png) center top+20px  no-repeat;
		background-size: 90px;
	}

	.debate_choice_box .two.on {
		background: #6eb92c url(/resources/img/talks/write_on.png) center top+25px  no-repeat;
		background-size: 70px;
	}

	.debate_choice_box .two {
		background: #ececec url(/resources/img/talks/write.png) center top+25px  no-repeat;
		background-size: 70px;
	}

	.st_title span{
		display: none;
	}

	.topic_box .topic_sj {
		margin-bottom: 30px;
	}

	.topic_box.mt30 .topic_sj {
		margin-bottom: 0px;
	}

	.more.gr.big.bl{
		display: block;
	}


	.step_wrap.student .left{
		width: 100%;
		height: 400px;
	}

	.step_wrap.student .left article.facet .facet_sc_box {
		height: 348px;
	}
	

	.step_wrap.student .bt_box{
		width: 100%;
		height: 120px;
		position: relative;
	}

	.step_wrap.student .bt_box div{
		display: inline-block;
		position: absolute;
		height: 90px;
	}

	.bt_box div:nth-of-type(1){
		top: 50%;
		left: 43%;
		transform: translate(-50%, -50%);
		width: 70px;
	}

	.bt_box div:nth-of-type(2){
		top: 50%;
		left: 56%;
		transform: translate(-50%, -50%);
	}

	.bt_box div.on{
		height: 100px;
	}

	.bt_box .next{
		transform: rotate(90deg);
	}

	.bt_box .prev{
		transform: rotate(90deg);
	}

	.bt_box div~div {
		margin-bottom: 0px;
	}

	.bt_box button {
		width: 70px;
		height: 70px;
	}

	.step_wrap.student .right{
		width: 100%;
		height: 400px;
	}

	article.facet .grid.box { overflow-y: scroll;  height: 296px; }

	.step_wrap.student .right .txt {
		line-height: 320px;
		font-size: 18px;
	}

	.sort.mo{
		display: block;
		padding: 0px;
		padding-top: 10px;
	}

	.sort.mo .total {
		line-height: 20px;
		padding: 10px 0px 0px 0;
		font-size: 16px;
	}

	.step_wrap.student>.left_top{
		display: none;
	}

	.moSearch{
		display: block;
		border-radius: 20px;
		width: 75px;
		padding-left: 10px;
		background: #ececec url(/resources/img/talks/mo_search.png) right+10px center no-repeat;
		background-size: 18px;
		color: #888888;
		font-size: 16px;
		line-height: 40px;
		margin-top: 2px;
	}

	.moSearch.on{
		width: 90px;
		background: #6eb92c url(/resources/img/talks/mo_search_on.png) right+10px center no-repeat;
		background-size: 18px;
		color: #fff;
	}
	
	.step_box .sj_step{
		width: 70px;
		margin-right: 5px;
	}

	.step_wrap.student .left article.facet .drop.sub{
		padding: 0;
	}

	.step_wrap.student .left article.facet .drop.sub li {
		width: 100%;
		padding-left: 40px;
		height: 56px;
		line-height: 70px;
	}

	.step_wrap.student .left article.facet .drop.sub li.on{
		background: #f5f5f5;
	}

	.step_wrap.student .grid ul > li.on{
		background: #f5f5f5;
	}
	
	.mo_student_s .select{
		width: 100%;
	}

	.mo_student_s .input{
		width: 100%;
	}
	
	.msj{
		font-size: 16px;
		text-align: left;
		padding: 20px 0 5px 0;
		color: #323232;
	}

	.inner.exp3{
		padding: 0;
	}

	.score {
		height: 50px;
		line-height: 50px;
		font-size: 18px;
	}

	.score_list li .num {
		font-size: 16px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.score_list li .sc {
		font-size: 16px;
		padding-right: 10px;
	}

	.tap.index li.on {
		height: 60px;
	}

	.card_sj div{
		font-size: 16px;
		padding-left: 20px;
	}

	.inf_wrap{
		padding: 10px;
	}

	.comment_box .top .more.gr{
		width: 120px;
	}

	.blind .blind_top{
		margin: 0;
		margin-top: 10px;
		margin-right: 10px;
	}

	.blind p {
		padding-top: 80px;
		padding-bottom: 50px;
		font-size: 16px;
	}

	.blind_top h4{
		font-size: 17px;
	}

	.inf_wrap .id{
		width: 50px;
		height: 50px;
		line-height: 50px;
	}

	.inf_wrap .id_name{
		padding-left: 10px;
	}

	.inf_wrap .id_name p:nth-of-type(1){
		margin-top: 6px;
	}



	
.cm_bt li:nth-of-type(1){
    background: #fff url(/resources/img/talks/rec.png) 27% center no-repeat;
    padding-left: 18%;
}

.cm_bt li.on:nth-of-type(1){
    background: #fff url(/resources/img/talks/rec_on.png) 27% center no-repeat;
}

.cm_bt li.on:nth-of-type(2){
    background: #fff url(/resources/img/talks/comment_on.png) 32% center no-repeat;
}

.cm_bt li:nth-of-type(2){
    background: #fff url(/resources/img/talks/comment.png) 32% center no-repeat;
    padding-left: 20%;
}

.cmt_list .drop.op {
    padding: 0px 10px 10px 10px;
}

.cmt_list .drop.op::before {
    bottom: 12px;
	right: 2px;
}

.cmt_list .drop.op::after {
    bottom: 20px;
	right: 8px;
}

.cmt_list .drop.op.on::after {
    bottom: 16px;
}

.an_comment {
    padding: 10px 10px;
}

.an_comment .user{
	background-size: 40px;
	width: 55px;
}

.an_comment .nc {
    width: calc(100% - 55px);
}

.nodata.scrap {
    background: url(/resources/img/talks/bg_nodata_scrap.png) top+50px center no-repeat;
	background-size: 70px;
    padding-bottom: 130px;
}

/* .comment.box .t { display: block; } */
.comment.box .textarea { padding: 10px 20px; }
.comment.box > .btTxt.on { position: static; float: right; width: 120px; height: 40px; line-height: 40px; color: #fff; border: 0; border-radius: 20px; background-color: #0a3b64; margin-top: 10px; }
.comment.box > .btTxt { position: static; float: right; width: 120px; height: 40px; line-height: 40px; color: #323232; border: 0; border-radius: 20px; background-color: #d7d7d7; margin-top: 10px; }
.comment.box > .btTxt ~ .txt { position: absolute; right: 20px; bottom: 60px; }

.btns.por{
	overflow: unset;
	width: 415px;
	left: 50%;
	transform: translateX(-50%);
	height: 125px;
}

.btTxt.end{
	margin-top: 70px;
}

.st_sub_title{
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: 15px;
}

.nodata.scrap2{
	background-size: 80px;
}

.nodata.scrap2.bkt{
	background-size: 120px;
	padding-top: 220px;
}


.inf_wrap .pop_bt {
    width: 80px;
}

.pop_bt2 {
    width: 80px;
}

.more.gr.big2{
	width: 120px;
}


.popup.op h4::before{
	display: none;
}

.radio_bt_box span {
    margin-bottom: 20px;
}

.select_box .select.wi04{
	width: 100%;
	margin-right: 0;
}

.nodata.scrap2.secret {
    background: url(/resources/img/talks/acc02.png) top+40px center no-repeat;
    padding-bottom: 120px;
	background-size: 100px;
}

.bnt_box.detail.case2.mdr .right .bkt_book_detail .book .intro{
	display: none;
}

.bnt_box.detail.case2.mdr .right{
	display: block;
}

.step_wrap > .bnt_box.detail.case2.mdr .left .shuffle li.on .book {
    transform: scale(0.65);
	margin-top: -15px;
}

.bnt_box .left .shuffle li.on {
    margin-top: -8px;
}

.cm_bt .answer .pop_bt{
	width: 80px;
}

.cm_bt .answer .input {
    width: calc(100% - 110px);
}

.step_wrap > .mdr_box {
    width: calc(100% - 140px);
    height: 230px;
    margin-right: 20px;
	padding: 20px;
	transition: 0.5s;
}

.step_wrap > .mdr_box.off {
    width: 120px;
    height: 230px;
	padding: 0;
	background: #ececec;
	transition: 0.5s;
}

.step_wrap > .mdr_box.off p {
    padding-top: 155px;
	text-align: center;
	background: url(/resources/img/talks/acc10.png) top+55px center no-repeat;
	background-size: 60px;
	color: #323232;
}

.step_wrap > .mdr_box.off>p{
    display: block;
}

.step_wrap > .mdr_box.off>div{
	display: none;
}

.step_wrap > .bnt_box.detail.case2.mdr{
	width: calc(100% - 140px);
    height: 230px;	
	transition: 0.5s;
}

.bnt_box.detail.case2.mdr.off{
	width: 120px;
	height: 230px;
	background: #ececec;
	transition: 0.5s;
}

.bnt_box.detail.case2.mdr.off .left{
	display: none;
}

.bnt_box.detail.case2.mdr.off .right{
	display: none;
}

.bnt_box.detail.case2.mdr.off p{
	display: block;
	width: 100%;
	height: 100%;
	background: url(/resources/img/talks/acc09.png) top+55px center no-repeat;
	background-size: 60px;
	padding-top: 155px;
	text-align: center;
	color: #323232;
}

.bnt_box.detail.case2.mdr.off p a{
	display: block;
	width: 100%;
	height: 100%;
}

.mdr_box .txt_box .sj {
    margin-bottom: 20px;
}

.bnt_box.detail.case2.mdr .right .bkt_book_detail .book .intro{
	display: none;
}

.bnt_box.detail.case2.mdr .left {
    width: 140px;
}

.bnt_box.detail.case2.mdr .right {
    width: calc(100% - 140px);
}

.step_box .book h3 {
    font-size: 22px;
}

.bnt_box.detail.case2 .tit{
	line-height: 24px;
}

.comment_box .top .more.gr2 {
    background: #7bbf3e url(/resources/img/talks/bt_whole.png) left+15px center no-repeat;
    width: 120px;
}

.nodata.student {
    background: url(/resources/img/talks/bg_nodata_student.png) top+40px center no-repeat;
	background-size: 80px;
	padding-top: 130px;
}

.st_title .btns.re{
	display: none;
}

.st_title .btns.re.on{
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.75);
	top: 0;
	left: 0;
	z-index: 499;
}

.st_title .btns.re.on div{
	position: absolute;
	right: 20px;
	width: 50px;
	top: 300px;
}

.st_title .btns.re.on div button{
	margin: 0;
	margin-bottom: 10px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	color: transparent;
	position: relative;
	overflow:unset;
}

.st_title .btns.re.on div button:nth-of-type(1){
	background: #cc5ba7 url(/resources/img/talks/mo_ic01.png) center/cover no-repeat; 
	background-size: 30px;
}

.st_title .btns.re.on div button:nth-of-type(2){
	background: #448ccd url(/resources/img/talks/mo_ic02.png) center/cover no-repeat; 
	background-size: 30px;
}

.st_title .btns.re.on div button:nth-of-type(3){
	background: #6eb92c url(/resources/img/talks/mo_ic03.png) center/cover no-repeat; 
	background-size: 30px;
}

.st_title .btns.re.on div button:nth-of-type(1)::after{
	content: "평가항목설정";
	color: #fff;
	position: absolute;
	font-size: 16px;
	right: 60px;
	top: 5px;
}

.st_title .btns.re.on div.mob button:nth-of-type(1)::after{
	content: "평가하기";
	color: #fff;
	position: absolute;
	font-size: 16px;
	right: 60px;
	top: 5px;
}

.st_title .btns.re.on div button:nth-of-type(2)::after{
	content: "학생초대";
	color: #fff;
	position: absolute;
	font-size: 16px;
	right: 60px;
	top: 5px;
}

.st_title .btns.re.on div button:nth-of-type(3)::after{
	content: "승인대기";
	color: #fff;
	position: absolute;
	font-size: 16px;
	right: 60px;
	top: 5px;
}

.mo_tab_bt.on{
	position: fixed;
	z-index: 500;
	right: 27px;
	top: 485px;
	background: url(/resources/img/talks/mobile_tab_bt_close.png) center/cover no-repeat;
}

.st_title.exp .al{
	display: none;
}

.grid ul > li .td.sm {
    width: 15%;
}

.grid ul > li .td.xs {
    width: 16%;
}

.grid ul > li .td.md {
    width: 16%;
    word-break: break-all;
}

.grid ul > li .td.lg {
    width: 20%;
}

.grid.box .td.chk {
    width: 5%;
}

.grid.box2 .td.chk {
    width: 5%;
}

.mo_write{
	display: block;
}

.mo_tab_bt {
   display: block;
}

.attach .txt{
	color: #f5f5f5;
	font-size: 0;
	padding-top: 30px;
}

.attach .txt b{
	color: #f5f5f5;
	font-size: 0;
}

.notice_write_box .input{
	width: 100%;
}

.notice_write_box{
	position: relative;
}

.notice_write_box .check{
	position: absolute;
	top: -40px;
	right: 0;
}

.msg.cir::before{
	display: none;
}

.grade_list .contents.link input:nth-of-type(1){
	width: calc(100% - 135px);
}

.popup.custom .student{
    max-height: 800px;
}


.bnt_box .left .shuffle.exp li.on{
	margin-top: unset;
}

.bnt_box.detail.case2 .shuffle.exp .tit{
	line-height: 20px;
}

.contents_book_box li p {
	font-size: 16px;
	margin-top: 10px;
}

.key_box{
	margin-top: 15px;
}

.topic_box.mt30{
	margin-top: 15px;
}

.topic_box .topic_sj div{
	margin-bottom: 10px;
}

.contents_box{
	margin-bottom: 10px;
}

.contents .drop{
	margin-bottom: 10px;
}

.sort{
	padding: 10px 0;
}

.select > label {
    padding: 0 30px 0 5px;
}

.popBox.debate_room .select_box .select {
    width: calc((100% - 10px)/2);
}

.popBox.debate_room .select_box .select.wi04 {
    width: 100%;
}


.popBox.debate_room .select_box .find {
    width: 100%;
    margin-top: 10px;
}

.popBox.debate_room .select_box .select:nth-of-type(2) {
    margin-right: 0;
}

}

/* --------------------------------------------------------770px */

@media all and ( max-width : 840px ){
	.bnt_month.lib li img {
		height: 170px;
	}

	.bnt_month.lib li {
		opacity: 1;
		height: 225px;
		margin-bottom: 30px;
	}
}

/* ------------------------------------------------------   720px */

@media all and ( max-width : 720px ){
	
	.popup.custom .sub.popup2{
		height: 300px;
	}
	
	.debate_choice_box{
		margin-bottom: 20px;
	}
	
	.debate_choice{
		margin-top:40px;
	}
	/* 메인 */

	.debate_making .icon {
		height: 130px;
	}

	.debate_playing .sj {
		margin-top: 25px;
	}

	.debate_completion .sj {
		margin-top: 25px;
	}


		/* 북앤토픽 */
		.bnt_month{
			width: 100%;
			margin: 0 auto;
			margin-top: 60px;
			margin-bottom: 20px;
			position: relative;
		}
		
		.bnt_month li{
			width: 50%;
			height: 300px;
			margin-right: 0;
			float: left;
			opacity: 0.5;
			text-align: center;
			position: relative;
		}
	
		
		.bnt_month li.on{
			z-index: 10;
			position: absolute;
			opacity: 1;
			left: 50%;
			transform: translateX(-50%) scale(1.2, 1.2) ;
			top: 10px;
		}
	
		.bnt_month li img{
			width: 200px;
			height: 200px;
		}
		
		.bnt_month li p{
			color: #323232;
			font-size: 14px;
			width: 200px;
			text-align: left;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			display: none;
			margin-top: 10px;
		}
	
		.bnt_month li.on p{
			display: block;    display: -webkit-box;
		}
		
		.bnt_month.lib li{
			width: 48%;
			height: 350px;
			margin-bottom: 30px;
		}
	
		.bnt_month.lib li:nth-of-type(2n){
			margin-right: 0;
		}


		.bnt_month.lib li img {
			height: 300px;
		}
	
		.bnt_month.lib li p{
			display: block;
			display: -webkit-box;
			width: 100%;
			margin-top: 10px;
		}

		
	.key_box{
		float: left;	
		display: unset;
	}

	.key_box div{
		margin-bottom: 10px;
		margin-right: 10px;
		display: inline-flex;
		align-content: center;
		flex: 1;
	}

	.key_box div~div {
		margin-left: 0px;
	}

	.sub .list ul > li {
		width: 23.5%;
		margin: 0;
		margin-right: 2%;
		margin-bottom: 30px;
		vertical-align: top;
	}

	.book .pic {
		height: 200px;
	}


	.debate_room_wrap li {
		float: left;
		width: 23.5%;
		margin-right: 2%;
		margin-bottom: 30px;
	}

	.inner.mdr .debate_room_wrap li {
		float: left;
		width: 23.5%;
		margin-right: 2%;
		margin-bottom: 30px;
	}

	.step_wrap .img .right .basic_img ul li{
		width: 48%;
		margin-right: 4%;
	}

	.step_wrap .img .right .basic_img ul li:nth-of-type(2n){
		margin-right: 0;
	}


	.date .right .input.date{
		width: 180px;
	}

	.date .right .field.date::before {
		left: 174px;
	}


	.step_wrap>.bnt_box {
		height: 360px;
	}

	.bnt_box .left .shuffle li.on .book .pic {
		height: 215px;
	}

	.bnt_box .left .shuffle .book {
		width: 170px;
		height: 260px;
	}


	
	.bnt_box.case2 .left .shuffle .book {
		width: 160px;
		height: 270px;
	}

	.bnt_box.detail.case2 .left .shuffle li.on .book .pic {
		height: 220px;
	}

	
	.contents_book_box li {
		height: 200px;
	}

	.contents_book_box.border li .book_minus{
		height: 200px;
	}

	.contents_book_box li img {
		height: 200px;
	}

	
	.bt_box div:nth-of-type(1){
		left: 41%;
	}

	.bt_box div:nth-of-type(2){
		left: 59%;
	}

	.cm_bt li:nth-of-type(1){
		background: #fff url(/resources/img/talks/rec.png) 26% center no-repeat;
		padding-left: 19%;
	}
	
	.cm_bt li.on:nth-of-type(1){
		background: #fff url(/resources/img/talks/rec_on.png) 26% center no-repeat;
	}
	
	.cm_bt li.on:nth-of-type(2){
		background: #fff url(/resources/img/talks/comment_on.png) 28% center no-repeat;
	}
	
	.cm_bt li:nth-of-type(2){
		background: #fff url(/resources/img/talks/comment.png) 28% center no-repeat;
		padding-left: 19%;
	}

	.banner_box {
		width: 100%;
		min-height: 80px;
		background: #448ccd url(/resources/img/talks/acc07.png) left+15px bottom no-repeat;
		border-radius: 12px;
		box-shadow: 0px 6px 6px rgb(0 0 0 / 12%);
		color: #fff;
		font-size: 16px;
		/* line-height: 80px; */
		padding-left: 100px;
		margin-bottom: 60px;
		line-height: 1.4;
		display: flex;
		align-items: center;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.bnt_box .left .shuffle li.on {
		margin-top: -4px;
	}

	.step_wrap > .bnt_box.detail.case2.mdr .left .shuffle li.on .book {
		transform: scale(0.5);
		margin-top: -7px;
		margin-left: -10px;
	}

	.bnt_box.detail.case2.mdr .left {
		width: 110px;
	}

	.shuffle li.on {
		margin-left: -115px;
	}

	.bnt_box.detail.case2.mdr .right {
		width: calc(100% - 110px);
	}

	.tap.index li span{
		font-size: 16px;
	}

	.popup.custom .student{
		max-height: 450px;
	}

	.contents_book_box {
		height: 280px;
	}
	
		/* BT_TIP */
	.btTip span {top: 0; width: 200px; white-space: normal;}
	.btTip span br { display: none; }
	.btTip.on span { display: block; }
}

@media all and ( max-width : 650px ){
	.bnt_month.lib li img {
		height: 270px;
	}

	.bnt_month.lib li {
		opacity: 1;
		height: 320px;
		margin-bottom: 30px;
	}
	
	.btns.mdr.exp .pop_bt ~ .pop_bt{
		margin-left:0;
	}
	
	.bnt_box.detail.case2.mdr .right .bkt_book_detail .book .btns.mdr .pop_bt.open {
    margin-bottom: 5px;
	}
	
	.bnt_box.detail.case2.mdr .right .bkt_book_detail .book .btns.mdr.exp {
    width: 145px;
	}
}




/*-------------------------------------------------------MOBILE-------------------------------------------------------*/
@media all and (max-width: 550px) {
	

	
	article.popup.search .list {
    	max-height: 260px;
	}

	h1 {
		width: 135px;
		height: 35px;
		background-position: center 50%;
	}


	h3 {
		font-size: 22px;
	}

	nav.gnb .m_gnb{
		margin-right: 10px;
	}



	.al_box{
		margin-left: 0;
		right: 10px;
		width: 35px;
    	height: 35px;
		top: 15px;
	}

	.search .find {
		margin: 15px 0;
	}

	.search .find .btFind {
		right: 5px;
	}

	.my_debate_room .right h4{
		font-size: 20px;
	}
	
	header .btFinder{
		right: 50px;
		top: 15px;
		width: 35px;
		height: 35px;
		background-size: auto 22px;
	}

	.al_box.num .al {
		width: 20px;
		height: 20px;
		right: -8px;
		bottom: -2px;
	}

	.al_box .al p{
		font-size: 14px;
	}
	

	/* 메인 내토론방 */

	.debate_playing .txt{
		display: none;
	}

	.debate_completion .txt{
		display: none;
	}

	.debate_playing .icon {
		background-size: 58px;
		width: 80px;
		margin-right: 10px;
	}
	.debate_playing .sj , .debate_completion .sj{
		margin: 0;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		line-height: 1.5;
	}

	.debate_completion .icon {
		width: 80px;
		margin-right: 10px;
	}

	.debate_making .icon {
		height: 115px;
	}

	.debate_playing .icon {
		background: url(/resources/img/talks/debate_play.png) left+13px center no-repeat;
		background-size: 57px;
	}

	.debate_completion .icon {
		background: url(/resources/img/talks/debate_com.png) left+13px center no-repeat;
		background-size: 57px;
	}


	.debate_making .icon.code {
		background: url(/resources/img/talks/debate_making_code.png) center no-repeat;
		background-size: 60px;
	}

	.debate_recent .pic {
		width: 140px;
		background: url(/resources/img/talks/sample10.png) right center no-repeat;
	}

	.debate_recent .txt_box {
		width: calc(100% - 140px);
	}

	.debate_recent .txt span:nth-child(1) {
		width: 70px;
		display: inline-block;
	}

	.shuffle li.on .book {
		width: 175px;
	}

	.shuffle li.on .book .pic {
		height: 175px;
	}

	.shuffle li .book .pic {
		height: 160px;
	}

	.shuffle {
		height: 300px;
	}

	.shuffle .book {
		width: 140px;
	}

	.shuffle li .wrap {
		vertical-align: bottom;
	}

	.main .debate_room_wrap {
		min-width: 800px;
	}

	.main .debate_room_wrap li{
		margin-bottom: 0px;
	}

	.main .debate_room_wrap li:nth-of-type(2n) {
		margin-right: 1.5%;
	}

	.main .debate_room_wrap li:last-child {
		margin-right: 0%;
	}




	.main .list.one li{
		max-width: 140px;
	}


	.main .list ul > li {
		min-width: 140px;
	}

	.sub .list.sc ul > li {
		min-width: 140px;
	}
	
	
	.book .pic {
		height: 188px;
	}

	section.main .content.interest {
		margin-bottom: 35px;
	}

	.debate_recent .nodata_room .ic_box {
		width: 25%;
		background: url(/resources/img/talks/acc01.png) right center no-repeat;
		background-size: auto 110px;
	}

	.debate_recent .nodata_room .txt_box {
		width: 75%;
	}

	.nodata.bkt {
		background: url(/resources/img/talks/acc08.png) top+60px center no-repeat;
		padding-top: 200px;
		background-size: auto 110px;
		padding-bottom: 70px;
	}

	.nodata.scrap2.bkt {
		background: url(/resources/img/talks/acc08.png) top+60px center no-repeat;
		padding-top: 170px;
		background-size: auto 90px;
		padding-bottom: 70px;
	}

	.content.interest .nodata_around .ic_box {
		background: url(/resources/img/talks/acc02.png) no-repeat;
		width: 120px;
		height: 120px;
		margin: 0 auto;
		margin-top: 40px;
		background-size: auto 120px;
	}

	.bt_debate {
		margin-bottom: 30px;
	}

	.nodata_interest .ic_box {
		background: url(/resources/img/talks/acc03.png) no-repeat;
		width: 110px;
		height: 120px;
		margin: 0 auto;
		margin-top: 30px;
		background-size: 110px;
	}

	.nodata_interest .txt_box {
		margin-bottom: 30px;
	}

	.nodata.scrap2 .sj{
		font-size: 16px;
	}
	.nodata_interest .sj{
		font-size: 16px;
	}

	.content.interest .nodata_around .txt_box .sj{
		font-size: 16px;
	}
	.content.interest .nodata_around .txt_box {
		font-size: 14px;
	}

	.nodata.scrap2 p{
		font-size: 14px;
	}

	.sub .list ul > li {
		width: 47.5%;
		margin: 0;
		margin-right: 5%;
		margin-bottom: 30px;
		vertical-align: top;
	}

	.sub .list ul > li:nth-of-type(2n){
		margin-right: 0;
	}

	.sub .book .pic {
		height: 270px;
	}

	.sub .list.on .book .pic {
		width: 120px;
		height: 180px;
		margin-right: 15px;
	}

	.sub .list.on .book .tit {
		font-size: 18px;
	}

	.sub .list.on .book .info {
		margin-top: 5px;
		font-size: 16px;
	}

	.sub .book .btns {
		left: 125px;
	}

	article.detail .book .intro {
		right: 10px;
	}

	.topic_box .topic_sj div {
		padding-left: 60px;
		background: #ececec url(/resources/img/talks/topic_bg.png) left+20px center no-repeat;
		background-size: auto 40%;
	}

	.topic_box .topic_sj div.on {
		padding-left: 60px;
		background: #448ccd url(/resources/img/talks/topic_bg_on.png) left+20px center no-repeat;
		background-size: auto 45%;
	}

	.bnt_month.lib li{
		width: 48%;
		height: 280px;
		margin-bottom: 30px;
	}

	.bnt_month.lib li:nth-of-type(2n){
		margin-right: 0;
	}


	.bnt_month.lib li img {
		height: 230px;
	}

	.bnt_month.lib li p{
		display: block;
		display: -webkit-box;
		width: 100%;
		margin-top: 10px;
	}


	.main .bnt_month.lib li img {
		height: 191px;
	}

	.main .bnt_month.lib li {
		height: 240px;
	}


	/* 팝업 */

	.popup .msg.cir::before{
		display: none;
	}

	article.popup.custom .popBox .con {
		padding: 20px;
	}

	article.popup.custom .popBox .tit h6{
		text-align: center;
	}

	article.popup.search .popBox dd .field ~ .select{
		width: 55px;
	}

	.popup.search .select > label::after {
		right: 5px;
	}

	article.popup.search .popBox dd .field {
		width: calc(100% - 60px);
	}


	.field .select {
		float: left;
		width: 35%;
	}

	.field .input {
		float: left;
		width: 65%;
	}

	.search_left {
		width: 25%;
	}

	.search_right {
		width: 75%;
	}


	
	/* 북앤토픽 */

	.bnt_month{
		width: 100%;
		margin: 0 auto;
		margin-top: 50px;
		margin-bottom: 50px;
		position: relative;
	}
	
	.bnt_month li{
		width: 50%;
		height: 200px;
		margin-right: 0;
		float: left;
		opacity: 0.5;
		text-align: center;
		position: relative;
	}

	
	.bnt_month li.on{
		z-index: 10;
		position: absolute;
		opacity: 1;
		left: 50%;
		transform: translateX(-50%) scale(1.3, 1.3) ;
		top: 5px;
	}

	.bnt_month li img{
		width: 150px;
		height: 150px;
	}
	
	.bnt_month li p{
		width: 150px;
	}

	/* 토론방둘러보기 */

	.debate_room_wrap li {
		float: left;
		width: 48.5%;
		margin-right: 3%;
		margin-bottom: 30px;
	}

	
	.debate_room_wrap li:nth-of-type(2n) {
		margin-right: 0%;
	}

	.debate_room_wrap .txt_box .sj {
		margin: 5px 0;
	}

	.inner.mdr .debate_room_wrap li {
		float: left;
		width: 48.5%;
		margin-right: 3%;
		margin-bottom: 30px;
	}

	
	.inner.mdr .debate_room_wrap li:nth-of-type(2n) {
		margin-right: 0%;
	}

	.inner.mdr .debate_room_wrap .txt_box .sj {
		margin: 5px 0;
	}

	.btTxt{
		min-width: 130px;
		padding: 0 10px;
	}

	.btns.por{
		width: 270px;
	}

	.date .right .input.date{
		width: 140px;
		background-size: 20px;
    	padding-left: 40px;
	}

	.date .right .field.date::before {
		left: 137px;
	}

	.date .right .field.date .check {
		margin-left: 5px;
	}

	.bnt_box .left .shuffle{
		width: 100%;
	}

	.step_wrap>.bnt_box {
		height: 300px;
	}

	.bnt_box .left .shuffle li.on .book .pic {
		height: 185px;
	}

	.bnt_box .left .shuffle li.on .book .pic {
		height: 175px;
	}

	.bnt_box .left .shuffle .book {
		width: 140px;
		height: 255px;
	}

	.bnt_box.case2 .left .shuffle .book {
		width: 130px;
		height: 260px;
	}

	.bnt_box.detail.case2 .left .shuffle li.on .book .pic {
		height: 180px;
	}

	.btns .btTxt ~ .btTxt {
		margin-left: 10px;
	}

		
	.contents_book_box li {
		min-width: 140px;
		height: 188px;
	}

	.contents_book_box.border li .book_minus{
		height: 188px;
	}

	.contents_book_box li img {
		height: 188px;
	}

	article.popup.search .book .pic {
		width: 85px;
		height: 120px;
		min-height: 120px;
		margin-right: 20px;
	}

	.popup .list.on .book .info {
		margin-top: 22px;
	}

	.bt_box div:nth-of-type(1){
		left: 40%;
	}

	.bt_box div:nth-of-type(2){
		left: 60%;
	}


	.cm_bt li:nth-of-type(1){
		background: #fff url(/resources/img/talks/rec.png) 19% center no-repeat;
		padding-left: 18%;
	}
	
	.cm_bt li.on:nth-of-type(1){
		background: #fff url(/resources/img/talks/rec_on.png) 19% center no-repeat;
	}
	
	.cm_bt li.on:nth-of-type(2){
		background: #fff url(/resources/img/talks/comment_on.png) 10% center no-repeat;
	}
	
	.cm_bt li:nth-of-type(2){
		background: #fff url(/resources/img/talks/comment.png) 10% center no-repeat;
		padding-left: 15%;
	}

	.inf_wrap .pop_bt{
		width: 60px;
	}

	.pop_bt2 {
		width: 60px;
	}

	.inf_wrap .btns .pop_bt ~ .pop_bt {
		margin-left: 5px;
	}

	.inf_wrap .btns{
		padding-top: 5px;
	}

	.radio_bt_box span {
		margin-right: 15px;
	}

	.bnt_box.detail.case2.mdr .right .bkt_book_detail .book .btns.mdr{
		position: absolute;
		z-index: 10;
	}

	.step_wrap > .bnt_box.detail.case2.mdr .left .shuffle li.on .book {
		transform: scale(0.5);
		margin-top: -5px;
		margin-left: -25px;
	}

	.step_wrap > .mdr_box {
		width: calc(100% - 90px);
		height: 230px;
		margin-right: 10px;
		padding: 20px;
		transition: 0.5s;
	}

	.step_wrap > .mdr_box.off {
		width: 80px;
		height: 230px;
		padding: 0;
		background: #ececec;
		transition: 0.5s;
	}

	.step_wrap > .bnt_box.detail.case2.mdr.off {
		width: 80px;
		height: 230px;
		background: #ececec;
		transition: 0.5s;
	}

	.step_wrap > .bnt_box.detail.case2.mdr {
		width: calc(100% - 90px);
		height: 230px;
		transition: 0.5s;
	}

	.bnt_box.detail.case2.mdr .right .bkt_book_detail .book .btns.mdr.exp {
		bottom: -10px;
		width: 145px;
	}

	.bnt_box.detail.case2.mdr .right .bkt_book_detail .book .btns.mdr {
		bottom: -10px;
	}

	.popup.custom .student .box .list_tit span{
		display: none;
	}

	.grade_list.student .box.heauto span:nth-of-type(4){
		margin-right: 0;
	}

	.grade_list.student .drop_bt{
		margin-left: 10px;
	}

	.grade_list.student .drop_bt_subbox{
		padding: 0 10px;
	}

	.grade_list.student .drop_bt_subbox .grade span:nth-of-type(2){
		display: none;
	}

	.popup.custom .student .box .col{
		padding: 0;
	}

	.popup.custom .student .box .col{
		width: calc(100% - 150px);
	}

	.popBox.debate_room .select_box .find{
		width: 100%;
		margin-top: 10px;
	}

	.popBox.debate_room .select_box .select{
		width: calc((100% - 10px)/2);
	}

	.popBox.debate_room .select_box .select:nth-of-type(2){
		margin-right: 0;
	}

	article.popup.custom .popBox .con { padding: 30px; overflow-y: auto; max-height: 540px ; }

	.contents.book .contents_book_box {
		height: 270px;
	}

	.mdr.date .right .field.date .input.date{
		background: #f5f5f5;
	}

	.popBox.debate_room .field.date .input {
		background: #f5f5f5;
		padding-left: 10px;
	}
}



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




	.sort .field { float: none; width: 100%; }
	
	/* TAP */
	.tap li { font-size: 16px; }
	
	/* FILTER */
	.filter .tit { position: static; display: table-cell; width: 100px; height: 100%; border: 0; vertical-align: middle; padding: 5px; }
	.filter .con { width: calc(100% - 100px); text-align: left; border: 0; padding: 5px; }
	.filter .item { margin: 5px; }

	.filter ul li { float: none; width: 100%; height: auto; border-bottom: 1px solid #3e71ad; padding-top: 0; }
	.filter ul li:last-of-type { width: 100%; border: 0; }

	/* LIST */
	/* .list .book { display: inline-block; width: 140px; }
	.list .rent { display: inline-block; width: 140px; }
	
	.list ul > li { width: 45%; margin: 0; margin-bottom: 30px; }
	.list ul > li:nth-of-type(5n + 1) { margin: 0; margin-bottom: 30px; }
	.list ul > li:nth-of-type(5n) { margin: 0; margin-bottom: 30px; }
	.list ul > li:nth-of-type(4n + 1) { margin: 0; margin-bottom: 30px; }
	.list ul > li:nth-of-type(4n) { margin: 0; margin-bottom: 30px; }
	.list ul > li:nth-of-type(even) { text-align: right; margin-left: 10%; }

	.list ul.four > li { width: 45%; margin: 0; margin-bottom: 30px; }
	.list ul.four > li:nth-of-type(4n + 1) { margin: 0; margin-bottom: 30px; }
	.list ul.four > li:nth-of-type(4n) { margin: 0; margin-bottom: 30px; }
	.list ul.four > li:nth-of-type(even) { margin-left: 10%; }
	
	.list.on ul > li { padding-bottom: 50px; margin-bottom: 50px; }
	.list.on ul > li:nth-of-type(even) { text-align: left; margin-left: 0; }
	.list.on .book .pic { width: 120px; height: auto; }
	.list.on .book .tit { font-size: 20px; }
	.list.on .book .info { font-size: 16px; } */
	
	
	/* NO DATA */
	.noData .txt { font-size: 16px; background-size: 60px; padding-top: 80px; margin: 50px 0 30px 0; }
	.noData .txt br ~ b { font-size: 24px; }
	.noData.book .txt,
	.noData.docu .txt,
	.noData.reply .txt,
	.noData.write .txt,
	.noData.scrap .txt { font-size: 18px; background-size: 60px; padding-top: 80px; }
	
	
	/* SCROLL */
	.scroll > ul > li .book { width: 140px; }
	
	
	/* WRITE */
	.write h4 { display: block; }
	.write .input { width: 100%; background-color: #fff; margin-bottom: 10px; }
	.write .select { width: calc(50% - 5px); margin-right: 0; }
	.write .select ~ .select { margin-left: 10px; }
	.write .select ~ .input { width: 100%; }
	.write .select + .select ~ .input { width: 100%; }

	.write .involve { width: 100%; }
	.write .involve > .btTxt { left: auto; top: auto; bottom: 100%; right: 0; margin-bottom: 5px; }
	.write .attach .txt { height: 60px; font-size: 0; background-position: center 50%; padding: 0; margin: 0; }
	.write .check { margin-left: 0; margin-right: 30px; }
	
	
	.write dt { display: block; float: none; width: 100%; }
	.write dt:nth-of-type(3) { display: inline-block; float: left; width: auto; border-color: #448ccb; }
	.write dd { border: 0; background-color: #f9f9f9; padding: 10px 20px; }
	.write dd:nth-of-type(3) { text-align: right; border-top: 1px solid #448ccb; background-color: #fff; padding: 10px 0; }
	

	
	/* BAND BANNER */
	.bandBnr .inner { padding-left: 100px; background-size: 80px; }
	.bandBnr .txt { font-size: 14px; }
	.bandBnr .txt b { font-size: 20px; line-height: 120%; }


	/****************************** RAYOUT ******************************/


	/* GNB */
	nav.gnb .m { font-size: 18px; letter-spacing: -2px; }
	
	/* GNB : COMMU */
	nav.gnb.commu ul { display: flex; }
	nav.gnb.commu li { flex: 1; }
	nav.gnb.commu li ~ li { padding-left: 0; }


	/* HEADER */
	header .inner { padding: 0; padding-top: 10px; }


	/* SECTION */

	/* FOOTER */
	footer .inner .fnb { right: auto; left: 10px; bottom: 10px; }
	
	
	article.popup.custom .popBox .items { padding: 20px; }
	article.popup.custom .popBox .items br { display: none; }
	
	article.popup.custom.step1 .popBox .items { padding: 20px 0; }
	article.popup.custom.step1 .popBox .item { min-width: 80px; height: 80px; line-height: 80px; padding: 0; margin: 5px; }
	
	
	/* 도서상세 */
	article.detail .inner > .btns .btTxt { padding: 0; }
	
	
	
	/****************************** CONTENTS ******************************/
	
	section.main .title .tap li { min-width: 80px; }
	
	section.main .content.floating .title .btMore { float: right; margin-left: 0; }
	
	/* 우리학교 인기도서 */
	section.popular h3 em { display: block; padding-left: 0; }
	
	
	
	
	/* 진로독서 > 진로검사 */
	section.career.test .enneagram ul { overflow: hidden; overflow-x: scroll; -ms-overflow-style: none; width: 100%; height: 100%; white-space: nowrap; margin: 0; padding: 10px; }
	section.career.test .enneagram ul::-webkit-scrollbar { width: 0; display: none !important; }
	section.career.test .scroll { width: 320px; margin: 30px auto; }
	section.career.test .scroll img { width: 320px; height: 320px; }
	
	
	/* 교과독서 > 도서상세 */
	section.subject.view .content .title ~ .inner .tap { margin-top: 20px; }
	section.subject.view .content .title ~ .inner .tap li { height: 50px; line-height: 50px; color: #fff; background-color: #448ccb; }
	section.subject.view .content .title ~ .inner .tap li.on { color: #448ccb; background-color: #f2f2f2; }
	section.subject.view .content .title ~ .inner .tapCon { color: #000; font-size: 16px; font-weight: 300; line-height: 28px; text-align: left; background-color: #f2f2f2; padding: 30px; }
	
	/* 한학기 한권 > 도서상세 */
	section.semester.view .content .file a { display: block; }
	section.semester.view .content .file a::after { right: 10px; }

	.bnt_month.lib li img {
		height: 210px;
	}

	.bnt_month.lib li {
		opacity: 1;
		height: 260px;
		margin-bottom: 30px;
	}

	
}


@media all and (max-width: 420px){
	
	.sub .book .pic {
    	height: 220px;
	}
	
	article.popup.search .list {
    	max-height: 190px;
	}
	
	.popup.search .nodata {
    font-size: 18px;
    border-top: 1px solid #b4b4b4;
    background: url(/resources/img/talks/no_data01.png) top+40px center no-repeat;
    background-size: 18%;
    padding-top: 110px;
}
	
	.btTxt{
		min-width: 90px;
		padding: 0 10px;
	}
	
	.debate_recent .pic {
		width: 100px;
	}
	.debate_recent .txt_box {
		width: calc(100% - 100px);
		padding: 15px 5px;
	}
	.debate_recent .sj {
		font-size: 16px;
	}

	.debate_recent .txt{
		font-size: 14px;
	}


	.debate_recent .nodata_room .ic_box {
		width: 30%;
		background: url(/resources/img/talks/acc01.png) right+5px center no-repeat;
		background-size: auto 100px;
	}

	.debate_recent .nodata_room .txt_box {
		width: 70%;
		padding: 50px 0;
	}


		/* SLIDER */
		.step_wrap >  .slider { width: 250px; height: 250px; }
		.bx-wrapper {
			position: relative;
			width: 250px !important;
			height: 250px !important;
		}
	
		.bx-wrapper .bx-viewport {
			display: block;
			width: 250px !important;
			height: 250px !important;
		}
	
		.slider .bx-prev {
			left: -40px;
			margin-left: 0;
			background-image: url(/resources/img/talks/bt_prev_view.png);
			background-size: 20px;
		}
	
		.slider .bx-next {
			right: -40px;
			margin-right: 0;
			background-image: url(/resources/img/talks/bt_next_view.png);
			background-size: 20px;
		}

		.card {
			width: 250px;
			height: 250px;
		}

		/* 북앤토픽 */

		.bnt_month.lib li{
			width: 48%;
			height: 230px;
			margin-bottom: 30px;
		}
	
		.bnt_month.lib li:nth-of-type(2n){
			margin-right: 0;
		}
	
	
		.bnt_month.lib li img {
			height: 180px;
		}
	
		.bnt_month.lib li p{
			display: block;
			display: -webkit-box;
			width: 100%;
			margin-top: 10px;
		}
		.st_title .btns {
			left: 145px;
		}

		.st_title .pop_bt.wi02{
			width: 60px;
		}

		.st_title .pop_bt.wi{
			width: 100px;
		}

		.debate_choice_box div{
			width: 49%;
			padding: 0;
			text-align: center;
			padding-top: 100px;
			min-height: 240px;
		}
	
		.debate_choice_box div:nth-child(1){
			margin-right: 2%;
		}
	
		.debate_choice_box .one.on {
			background: #6eb92c url(/resources/img/talks/chat_on.png) center top+15px no-repeat;
			background-size: 80px;
		}
	
		.debate_choice_box .one {
			background: #ececec url(/resources/img/talks/chat.png) center top+15px  no-repeat;
			background-size: 80px;
		}
	
		.debate_choice_box .two.on {
			background: #6eb92c url(/resources/img/talks/write_on.png) center top+15px  no-repeat;
			background-size: 60px;
		}
	
		.debate_choice_box .two {
			background: #ececec url(/resources/img/talks/write.png) center top+15px  no-repeat;
			background-size: 60px;
		}

		.bt_box div:nth-of-type(1){
			left: 37%;
		}
	
		.bt_box div:nth-of-type(2){
			left: 61%;
		}

		.comment_box .top .more.gr{
			width: 95px;
			background: #7bbf3e url(/resources/img/talks/bt_op.png) left+7px center no-repeat;
			padding-left: 28px;
		}

		.check.onoff label {
			padding: 0;
			padding-right: 54px;
		}
		.check.onoff label::before {
			left: auto;
			right: 0;
			margin-top: -15px;
			width: 53px;
			height: 30px;
			border: 0;
			border-radius: 15px;
			background-color: #e2e2e2;
			text-indent: 0;
			padding: 0 8px 0 5px;
			transition: all 0.3s ease;
		}

		.check.onoff label::after {
			left: auto;
			right: 22px;
			margin-top: -15px;
			content: "OFF";
			display: block;
			width: 32px;
			height: 30px;
			line-height: 31px;
			color: #fff;
			font-size: 14px;
			font-weight: 300;
			text-align: center;
			border: 0;
			border-radius: 15px;
			background-color: #808080;
			transform: none;
			opacity: 1;
			transition: all 0.3s ease;
		}

		.inf_wrap .id {
			width: 40px;
			height: 40px;
			line-height: 40px;
			margin-top: 5px;
		}

		.inf_wrap .id_name p{
			font-size: 16px;
		}

		.mdr_box .txt_box .sj{
			font-size: 18px;
			margin-bottom: 10px;
		}
		
		.mdr_box .txt_box .txt{
			font-size: 16px;
		}

		.step_wrap > .mdr_box {
			padding: 20px 10px 10px 10px;
		}


		.bnt_box.detail.case2 .right h3 {
			margin-top: 0px;
		}

		.mdr_box .txt_box .txt span:nth-child(1) {
			padding-right: 5px;
		}

		.mdr_box .txt_box .txt span:nth-child(1)::after {
			position: absolute;
			content: "";
			width: 1px;
			height: 17px;
			background: #5a5a5a;
			top: 3px;
			right: 0px;
		}

		.btns.exp3 .pop_bt {
			width: 115px;
		}

		.btns.exp3 {
			bottom: 10px;
		}
		.step_wrap > .bnt_box.detail.case2.mdr .left .shuffle li.on .book {
			transform: scale(0.5);
			margin-top: 8px;
			margin-left: -25px;
		}

		.bnt_box.detail.case2.mdr .right .bkt_book_detail .book .btns.mdr.exp {
			width: 145px;
		}

		.bnt_box.detail.case2.mdr .right .bkt_book_detail .book .btns.mdr  {
			width: auto;
		}

		.bnt_box.detail.case2.mdr .right .bkt_book_detail .book .btns.mdr .pop_bt.open {
			margin-bottom: 5px;
		}

		.bnt_box.detail.case2 .right h3{
			font-size: 18px;
			line-height: 20px;
		}

		.popup.custom .student .box{
			font-size: 14px;
		}

		.grade_list.student .drop_bt_subbox span{
			font-size: 14px;
		}

		.popup.custom .student .box .col{
			width: calc(100% - 145px);
		}


		.mdr_num .more{
			width: 100px;
		}
	
		.detail_search_bt{
			width: 45px;
		}
		
		
		.btTip span {left:100%; width: 170px;}

}




@media all and (max-width: 370px){
	.debate_playing .icon{
		margin-right: 0;
		width: 76px;
		background-size: 54px;
	}

	.debate_completion .icon{
		margin-right: 0;
		width: 76px;
		background-size: 54px;
	}

	article.popup .popBox .btns{
		width: 250px;
	}

	article.popup .popBox .btns .pop_bt{
		width: 120px;
	}

	.search .find .input{
		padding: 0 50px 0 90px;
	}

	.search .find .select {
		width: 105px;
	}

	article.popup.custom .popBox .con {
		padding: 15px;
	}

	.mdr.date .drName .btns.mo button{
		width: 120px;
	}

	article.popup.search .book .pic {
		width: 65px;
		height: 70px;
		min-height: 120px;
		margin-right: 10px;
	}

	.popup .list.on .book .info {
		margin-top: 5px;
		font-size: 14px;
	}

	.bt_box div:nth-of-type(1){
		left: 36%;
	}

	.bt_box div:nth-of-type(2){
		left: 64%;
	}

	.cm_bt li:nth-of-type(1){
		background: #fff url(/resources/img/talks/rec.png) 12% center no-repeat;
		padding-left: 17%;
		background-size: 20px;
	}
	
	.cm_bt li.on:nth-of-type(1){
		background: #fff url(/resources/img/talks/rec_on.png) 12% center no-repeat;
		background-size: 20px;
	}
	
	.cm_bt li.on:nth-of-type(2){
		background: #fff url(/resources/img/talks/comment_on.png) 4% center no-repeat;
		background-size: 20px;
	}
	
	.cm_bt li:nth-of-type(2){
		background: #fff url(/resources/img/talks/comment.png) 4% center no-repeat;
		padding-left: 9%;
		background-size: 20px;
	}

	.inf_wrap .pop_bt {
		width: 45px;
	}


	.inf_wrap {
		padding: 10px;s
	}

	.inf_wrap .id_name p:nth-of-type(2){
		font-size: 14px;
	}

	.drop.op {
		padding: 10px;
	}

	.an_comment {
		padding: 10px;
	}

	.drop.op::before {
		bottom: 12px;
	}

	.drop.op::after {
		bottom: 20px;
	}

	.step_wrap > .bnt_box.detail.case2.mdr .left .shuffle li.on .book {
		transform: scale(0.4);
	}

	.shuffle li.on {
		margin-left: -113px;
	}

	.bnt_box.detail.case2.mdr .left {
		width: 80px;
	}

	.bnt_box.detail.case2.mdr .right {
		width: calc(100% - 80px);
	}

	.bnt_box.detail.case2 .right h3{
		font-size: 18px;
	}

	.bnt_box.detail.case2 .txt{
		font-size: 14px;
	}

	.bnt_box.detail.case2 .tit{
		line-height: 20px;
	}

	.blind_top h4 {
		font-size: 14px;
		display: block;
    height: 20px;
    margin-top: -5px;
    line-height: 20px;
	}

	.blind_top .check{
		padding-left: 5px;
	}

	/* .check.onoff label::after {
		width: 25px;
		border-radius: 50%;
	}

	.check.onoff label::before {
		width: 45px;
	}

	.check.onoff label {
		padding-right: 50px;
	} */

	.grade_list .contents.link input:nth-of-type(1){
		width: calc(100% - 115px);
	}
	

	.grade_list .contents.link input:nth-of-type(2){
		width: 50px;
	}
	.grade_list.student .drop_bt{
		margin-left: 5px;
	}


	.popup.custom .student{
		max-height: 350px;
	}
	
	.popup.custom .student .box .list_tit{
		padding: 0;
	}

	.grade_list.student .box.heauto span:nth-of-type(4){
		padding: 0;
	}

	.popup.custom .student.maxh{
		max-height: 120px;
	}

	nav.gnb .m_gnb{
		margin-right: 5px;
		padding: 0 10px;
	}

	
	.bnt_month.lib li img {
		height: 160px;
	}

	.bnt_month.lib li {
		opacity: 1;
		height: 210px;
		margin-bottom: 30px;
	}


	
	.debate_sj .more{
		width: 80px;
		margin-left: 5px;
	}
	
	.mdr_num .more{
		width: 80px;
	}

	.detail_search_bt{
		width: 35px;
	}

	.btTip span {width: 120px;}
	
	.st_title .pop_bt.wi02 {
    	width: 50px;
	}

}


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

	.sub .book .pic {
		height: 200px;
	}
	
	article.popup.search .list {
    	max-height: 150px;
    	margin-bottom:10px;
	}
	
	.popup.search .nodata {
    font-size: 18px;
    border-top: 1px solid #b4b4b4;
    background: url(/resources/img/talks/no_data01.png) top+40px center no-repeat;
    background-size: 18%;
    padding-top: 90px;
}
	
	
	article.popup.search .popBox .btns{
		bottom:0;
		padding-bottom:0;
		padding-top:0;
	}
	
	article.popup.custom .popBox .con { overflow-y: auto; max-height: 440px ; }


	.sub .book .btns {
		left: 125px;
	}

	.bnt_month.lib li img {
		height: 142px;
	}

	.bnt_month.lib li {
		width: 48%;
		height: 190px;
		margin-bottom: 30px;
	}
	
		.popup.custom .sub.popup2{
		height: 200px;
	}
	
}