@charset "UTF-8"; 

/********************************
 section01 - 메인이미지,검색,바로가기아이콘
 *******************************/
.section01 {position:relative;}
.section01:before {content:''; position:absolute; left:-25%; bottom:10px; width:888px; height:693px; background:url(../images/main/icon_pattern.png) 0 0 no-repeat; background-size:100%;}
.section01:after {content:''; position:absolute; right:0; top:0; border-radius:0 0 0 500px; width:50%; height:100%; background:url(../images/main/main_img.jpg) 0 0 no-repeat; background-size:cover;}
 
.section01 .inner {padding:150px 0;}
.leftBox {padding-right:80px; width:50%;}
.leftBox .tbox {font-family:'SBAggro'; color:#000821;}
.leftBox .tbox .mini_tit {font-size:3.5rem;}
.leftBox .tbox .main_tit {font-size:5.5rem; line-height:1.2;}
.leftBox .tbox .main_tit strong {color:#036ee6;}



 /*검색창*/
.search_box {display:block; margin-top:40px; width:100%; z-index:16;}
.search_box form {position:relative; margin:0 auto;}
.search_box .searchInner {position:relative;;}
.search_box .srch_txt {position:relative; display:flex; align-items:center; border:3px solid #1766b0; border-radius:40px 20px 40px 20px; background-origin:border-box; box-shadow:8px 6px 20px 0 rgb(125 125 125 / 7%);}

.search_box .srch_txt input {position:relative; padding:0 60px 0 40px; width:100%; height:74px; border-radius:40px 20px 40px 20px; border:none; font-size:2.0rem; font-weight:500; color:#444; background:#fff;}
.search_box .srch_txt input::placeholder {color:#444;}

.search_box .btn_sch {position:absolute; right:-20px; top:calc(50% - 30px); width:60px; height:60px; background-color:#1766b0; border-radius:50%;}
.search_box .btn_sch:before {content:''; position:absolute; left:50%; top:50%; margin:-12px 0 0 -12px; width:24px; height:24px; background:url(../images/main/main_sch.png) 0 0 no-repeat;}
 
 
/*아이콘*/
.shortcut_box {display:flex; margin-top:50px; gap:25px;}
.shortcut_box li {width:25%; border-radius:25px;}
.shortcut_box li.item01 {background-color:#ddfadf;}
.shortcut_box li.item02 {background-color:#fce4e4;}
.shortcut_box li.item03 {background-color:#fef4d3;}
.shortcut_box li.item04 {background-color:#e4e1fd;}

.shortcut_box li a {display:block; padding:25px 10px; font-size:1.6rem; line-height:1.2; text-align:center; color:#222; font-weight:500;}

.shortcut_box li a:hover,
.shortcut_box li a:focus,
.shortcut_box li a:active {text-decoration:none;}

.shortcut_box li a i {position:relative; display:block; margin:0 auto 10px; width:65px; height:65px; background-position:0 0; background-repeat:no-repeat; background-size:100%;}
.shortcut_box li a i.icon01 {background-image:url(../images/main/main_icon01.png);}
.shortcut_box li a i.icon02 {background-image:url(../images/main/main_icon02.png);}
.shortcut_box li a i.icon03 {background-image:url(../images/main/main_icon03.png);}
.shortcut_box li a i.icon04 {background-image:url(../images/main/main_icon04.png);}
.shortcut_box li a i.icon05 {background-image:url(../images/main/main_icon05.png);}

.shortcut_box li a:hover i {top:-5px;}




 /* media query */
@media screen and (max-width:1600px){
	.section01 .inner {padding:150px 20px;}	
}

@media screen and (max-width:1400px){
	.section01:before {left:-35%;}
	.section01:after {border-radius:0 0 0 300px; width:40%;}
	
	.section01 .inner {padding:120px 20px;}
	.leftBox {width:60%;}
	
	.leftBox .tbox .mini_tit {font-size:3.0rem;}
	.leftBox .tbox .main_tit {font-size:5.0rem;}
	
	.search_box .srch_txt input {padding:0 60px 0 30px;}
}

@media screen and (max-width:1240px){
	.section01:before {left:-45%;}
	
	.leftBox .tbox .mini_tit {font-size:2.4rem;}
	.leftBox .tbox .main_tit {font-size:4.0rem;}
	
	.shortcut_box {gap:15px;}
}

@media screen and (max-width:1024px){
	.section01:before {left:-600px; bottom:-150px;}
	.section01:after {display:none;}
	.section01 .inner {padding:80px 20px 0;}
	
	.leftBox {padding-right:0; width:100%;}
	.leftBox .tbox {text-align:center;}
	.search_box {margin:30px auto 0; width:80%;}
	.search_box .srch_txt input {font-size:1.7rem;}
	
	.shortcut_box {gap:20px;}
	
}

@media screen and (max-width:920px){
	.section01:before {left:-600px; bottom:-150px;}
	.leftBox .tbox .mini_tit {font-size:2.0rem;}
	.leftBox .tbox .main_tit {font-size:3.4rem;}
	
	
	.search_box .srch_txt input {padding:0 40px 0 30px;}
	.search_box .srch_txt {border-radius:35px 15px 35px 15px;}
	.search_box .srch_txt input {height:60px; border-radius:35px 15px 35px 15px;}
	.search_box .btn_sch {top:calc(50% - 22px); width:45px; height:45px;}
	.search_box .btn_sch:before {margin:-10px 0 0 -10px; width:20px; height:20px; background-size:100%;}
	
	.shortcut_box li a i {width:45px; height:45px;}	
}

@media screen and (max-width:767px){
	.section01:before {left:-250px; bottom:50px; width:500px; height:390px;}
	.section01 .inner {padding:50px 20px 0;}
	
	
	.shortcut_box {gap:10px; margin-top:30px;}
	.shortcut_box li a {font-size:1.4rem;}
}

@media screen and (max-width:640px){
	.leftBox .tbox .mini_tit {font-size:1.7rem;}
	.leftBox .tbox .main_tit {font-size:2.6rem;}
	
	.search_box {margin:20px auto 0;}
}

@media screen and (max-width:480px){
	.shortcut_box {flex-wrap:wrap; gap:15px;}
	.shortcut_box li {width:calc(50% - 8px); border-radius:20px;}
	.shortcut_box li a {padding:15px 10px;}
}
 



/********************************
 section02 - 알림존,공지사항
 *******************************/
 
/*공통*/
.section02 {margin:6% 0 12%;}
.section02 .inner {display:flex; flex-wrap:wrap; justify-content:space-between; gap:60px;}

.section02 .inner .item {position:relative; width:calc(50% - 30px);}
.section02 .inner .item .title {font-size:4.0rem; font-family:'SBAggro';}


/*알림존*/
.alrimPopup {position:relative; padding-right:20px;}
.alrimPopup .slider {display:block; position:relative; margin-top:30px; height:470px; border-radius:30px 100px 30px 30px; overflow:hidden; background-color:#f9f9f9;}
.alrimPopup li > a {overflow:hidden; display:block; position:relative; height:470px; background-color:#f9f9f9;}
.alrimPopup li > a img {display:block; width:100%; height:100%;}

.alrim_ctrl {z-index:30;}
.alrim_ctrl > dl.arrow {position:absolute; right:10px; bottom:0;}
.alrim_ctrl > dl dd {position:relative;}

.alrim_ctrl > dl.arrow dd {position:absolute; bottom:0; right:-10px;}
.alrim_ctrl > dl.arrow dd.next {bottom:50px;}

.alrim_ctrl > dl dd a {position:relative; display:block; width:50px; height:50px; border-radius:50%; box-sizing:border-box;}
.alrim_ctrl > dl dd a.ctrl_prev {background-color:#0d4a95;}
.alrim_ctrl > dl dd a.ctrl_next {background-color:#2768ba}

.alrim_ctrl > dl dd a:before {content:''; position:absolute; left:50%; top:50%; margin:-9px 0 0 -6px; width:12px; height:18px; background:url(../images/main/main_ctrl.png) 0 0 no-repeat;}
.alrim_ctrl > dl dd a.ctrl_prev:before {background-position:-75px 0;}
.alrim_ctrl > dl dd a.ctrl_stop:before {background-position:-101px 0;}
.alrim_ctrl > dl dd a.ctrl_next:before {background-position:-88px 0;}
.alrim_ctrl > dl dd a.ctrl_play:before {background-position:-114px 0;}

.alrim_ctrl > dl.stop_count {position:absolute; top:-83px; left:120px; display:flex; align-items:center; gap:10px;}
.alrim_ctrl > dl.stop_count dd a {width:36px; height:36px; background-color:#333; border-radius:50%;}
.alrim_ctrl > dl dd span.ctrl_cont strong {padding-right:3px; font-weight:600;}

 

/*공지사항*/
.mainBoard {display:block;}

.noticeList {margin-top:30px; border-bottom:1px dashed #ddd;}
.noticeList li {display:block;}
.noticeList li a {position:relative; display:flex; align-items:center; padding:20px 0; border-top:1px dashed #ddd;}
.noticeList li a:hover,
.noticeList li a:active,
.noticeList li a:focus {text-decoration:none;}

.noticeList li a .txt {display:flex; align-items:center; width:calc(100% - 105px); padding:0 20px 0 5px;}
.noticeList li a .txt .new {margin-right:5px; width:19px; height:19px; line-height:19px; text-align:center; color:#fff; background-color:#fc2c1e; font-size:1.1rem; border-radius:6px;}
.noticeList li a .txt em {overflow:hidden; width:calc(100% - 19px); font-size:2.0rem; color:#121212; font-weight:500; white-space:nowrap; text-overflow:ellipsis;}

.noticeList li a .date {width:105px; color:#333; text-align:right;}
.noticeList li.listNone {padding:35px 0; text-align:center;}



.mainBoard .noticeCtrl {display:flex; position:absolute; top:12px; right:0; z-index:30;}
.mainBoard .noticeCtrl > dl {}
.mainBoard .noticeCtrl > dl dd {position:relative; display:inline-block; float:left; color:#fff;}
.mainBoard .noticeCtrl > dl dd a {position:relative; display:block; margin-right:5px; width:40px; height:40px; background-color:#edf0f4; border-radius:15px; box-sizing:border-box;}
.mainBoard .noticeCtrl > dl dd a:before {content:''; position:absolute; left:50%; top:50%;  margin:-7px 0 0 -7px; width:14px; height:14px; background-image:url(../images/main/main_ctrl.png); background-repeat:no-repeat;}
.mainBoard .noticeCtrl > dl dd a.ctrl_prev:before {background-position:0 0;}
.mainBoard .noticeCtrl > dl dd a.ctrl_stop:before {background-position:-14px 0;}
.mainBoard .noticeCtrl > dl dd a.ctrl_next:before {background-position:-29px 0;}
.mainBoard .noticeCtrl > dl dd a.ctrl_play:before {background-position:-45px 0;}

.mainBoard .noticeCtrl .more {position:relative; display:inline-block; width:40px; height:40px; border-radius:15px; background:#0e3793;}
.mainBoard .noticeCtrl .more:before {content:''; position:absolute; left:50%; top:50%;  margin:-7px 0 0 -7px; width:14px; height:14px; background:url(../images/main/main_ctrl.png) -60px 0 no-repeat;}






 
 /* media query */
@media screen and (max-width:1600px){	
	.section02 .inner {padding:0 20px;}	
}

@media screen and (max-width:1350px){
}

@media screen and (max-width:1300px){
	.section02 {margin:10% 0;}
	.section02 .inner {gap:40px;}
	
	.section02 .inner .item {width:calc(50% - 20px);}
}

@media screen and (max-width:1240px){
	.item .title {font-size:3.6rem;}
	.alrim_ctrl > dl.stop_count {top:-78px; left:122px;}
}

@media screen and (max-width:1024px){
	
}

@media screen and (max-width:920px){
	.section02 .inner .item {width:100%;}
	.section02 .inner .item .title {font-size:3.2rem;}
	
	.alrimPopup .slider {margin-top:10px; height:510px;}
	.alrimPopup li > a {height:510px;}
	
	.alrim_ctrl > dl.stop_count {top:-54px; left:100px;}
	
	.noticeList {margin-top:15px;}
	.noticeList li {height:62px !important;}
	.noticeList li a {padding:15px 0;}
	.noticeList li a .txt {width:calc(100% - 95px);}
	.noticeList li a .txt .new {margin-right:5px;}
	.noticeList li a .txt em {font-size:1.8rem;}
	.noticeList li a .date {width:95px; font-size:1.5rem;}
	
	
	.mainBoard .noticeCtrl {top:8px;}
	.mainBoard .noticeCtrl > dl dd a {width:35px; height:35px; border-radius:12px;}
	.mainBoard .noticeCtrl .more {width:35px; height:35px; border-radius:12px;}
	
	
}

@media screen and (max-width:850px){
	.alrimPopup .slider {height:470px;}
	.alrimPopup li > a {height:470px;}
}

@media screen and (max-width:767px){
	.alrimPopup .slider {height:410px;}
	.alrimPopup li > a {height:410px;}
	
	.noticeList li a .txt {padding:0 40px 0 10px;}
}

@media screen and (max-width:640px){
	.section02 .inner {gap:50px;}
	
	.section02 .inner .item .title {font-size:3.0rem;}
	
	.alrimPopup {padding-right:0;}
	.alrimPopup .slider {height:350px; border-radius:20px 70px 20px 20px;}
	.alrimPopup li > a {height:350px;}
	.alrim_ctrl > dl dd a {width:40px; height:40px;}
	.alrim_ctrl > dl.arrow dd {bottom:-20px; right:0;}
	.alrim_ctrl > dl.arrow dd.prev {right:40px;}
	.alrim_ctrl > dl.arrow dd.next {bottom:-20px;}
	.alrim_ctrl > dl.stop_count {top:-51px; left:95px;}
	.alrim_ctrl > dl.stop_count dd a {width:34px; height:34px;}
}

@media screen and (max-width:550px){
	.section02 .inner .item .title {font-size:2.8rem;}
	
	.alrimPopup .slider {height:300px;}
	.alrimPopup li > a {height:300px;}
}


@media screen and (max-width:480px){
	.section02 .inner .item .title {font-size:2.8rem;}
	
	.alrimPopup .slider {height:260px;}
	.alrimPopup li > a {height:260px;}
	
	.noticeList li a .txt {padding:0 20px 0 5px;}
	.mainBoard .noticeCtrl {top:5px;}
}





/********************************
 section03
 *******************************/

.section03 {position:relative; padding:150px 0; background-color:#fef8f8;}
.section03 .inner {display:flex; justify-content: flex-end;}
.section03 .inner:before {content:''; position:absolute; left:0; bottom:50px; width:564px; height:526px; background:url(../images/main/icon_bookbg.png) 0 0 no-repeat; background-size:100%; z-index:1;}
.section03 .inner:after {content:'BOOK Curation'; position:absolute; left:10%;; bottom:0; font-size:7.0rem; line-height:1; font-family:'SBAggro'; font-weight:600; color:#f3f3f3; letter-spacing:-5px; z-index:0;}
.section03 .inbox {position:relative; width:65%; z-index:1;}



.TopTitle {position:absolute; left:0; top:10px; margin:0 auto; font-family:'SBAggro'; font-size:4.0rem; color:#333; line-height:1.2;}

/*탭*/
.mainBooks .tabs {display:flex;}
.mainBooks .tabs ul {display:flex; justify-content:flex-start; background-color:#fff; border:1px dashed #bfbfbf; border-radius:50px;}
.mainBooks .tabs ul li {}
.mainBooks .tabs ul li .tab_btn {position:relative; padding:0 40px; height:65px; line-height:67px; color:#333; font-size:2.2rem; font-family:'SBAggro'; box-sizing:border-box;}
.mainBooks .tabs ul li.active .tab_btn {padding:0 40px 0 70px; color:#fff; background-color:#0064b2; border-color:#0064b2; border-radius:50px;}
.mainBooks .tabs ul li.active .tab_btn:before {content:''; position:absolute; left:40px; top:calc(50% - 11px); width:20px; height:23px; background:url(../images/main/icon_tab.png) 0 0 no-repeat;}

.tab-group .tab-con {display:none;}
.tab-group .tab-con.on {display:block;}

.collection_box {position:relative; margin-top:50px;}

/*책리스트 - 큰책*/
.collection_Big {position:relative;}
.collection_Big:before {content:''; position:absolute; left:0; top:50%; margin:-195px 0 0 -45px; width:390px; height:390px; border-radius:50%; background-color:#e1dbdb; z-index:0;}
.collection_Big .item {}
.collection_Big .item .img {position:relative; display:inline-block; float:left; width:303px; height:443px;}
.collection_Big .item .img:after {content:''; display:block; visibility:hidden; clear:both;}
.collection_Big .item .img img {position:relative; width:100%; height:100%; border:1px solid #ddd; box-sizing:border-box; z-index:1;}

.collection_Big .item .info {display:inline-block; float:left; width:calc(100% - 303px); padding:30px 20px 0 100px;}
.collection_Big .item .info:after {content:''; display:block; visibility:hidden; clear:both;}

.collection_Big .item .info a {overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:70px; font-size:2.5rem; line-height:1.4; font-weight:500; color:#222;}
.collection_Big .item .info .info_list {margin-top:20px;}


/*책리스트 - 작은책*/
.collection_Mini.slick-slider {display:block; position:absolute; right:0; bottom:0; padding-left:370px; width:100%;}
.collection_Mini .slick-track {display:flex;}
.collection_Mini a {display:block; margin:0 12px; width:120px; height:180px;}
.collection_Mini a img {width:100%; height:100%;}



/*리스트없을떄*/

.collection_box.noList {display:flex; min-height:443px; justify-content:center; align-items:center;}
.collection_box.noList:before {left:50%; margin-left:-195px;}
.collection_box.noList p {position:relative; z-index:0;}
.collection_box.noList p:before {content:''; position:absolute; left:0; top:50%; margin:-195px 0 0 -97px; width:390px; height:390px; border-radius:50%; background-color:#e1dbdb; z-index:-1;}
.collection_box.noList .collection_Big:before {display:none;}
.collection_box.noList .collection_arrow,
.collection_box.noList .collection_arrow:before {display:none;}


/*컨트롤*/
.collection_arrow {display:flex; position:absolute; right:0; bottom:200px; justify-content:flex-end; width:68%;}
.collection_arrow:before {content:''; position:absolute; left:45px; top:50%; width:68%; height:1px; background-color:#121212;}
.collection_arrow dl {display:flex;}
.collection_arrow dd {position:relative; display:inline-block;}
.collection_arrow dd a {position:relative; display:block; width:40px; height:40px; box-sizing:border-box;}
.collection_arrow dd a:before {content:''; position:absolute; left:50%; top:50%; margin:-9px 0 0 -6px; width:12px; height:18px; background:url(../images/main/main_ctrl.png) 0 0 no-repeat;}
.collection_arrow dd a.prev:before {background-position:0 -15px;}
.collection_arrow dd a.stop:before {background-position:-26px -15px;}
.collection_arrow dd a.next:before {background-position:-13px -15px;}
.collection_arrow dd a.play:before {background-position:-39px -15px;}


/*더보기*/
.collection_arrow dd a.more {background-color:#222; border-radius:50%;}
.collection_arrow dd a.more:before {content:''; position:absolute; margin:-7px 0 0 -7px; width:14px; height:14px; background:url(../images/main/main_ctrl.png) -60px 0 no-repeat;}



/* media query */
@media screen and (max-width:1650px){
	.section03 .inner:before {width:464px; height:433px;}
	.section03 .inner:after {font-size:6.5rem;}
	
	/*책리스트 - 작은책*/
	.collection_Mini.slick-slider {padding-left:390px;}

	/*컨트롤*/
	.collection_arrow {width:61%;}
	.collection_arrow:before {left:0; width:70%;}
}

@media screen and (max-width:1600px){
	.section03 .inner {padding:0 20px;}
}

@media screen and (max-width:1520px){
	.section03 {padding:120px 0;}
	.section03 .inbox {width:72%;}
	
}

@media screen and (max-width:1420px){
	/*책리스트 - 작은책*/
	.collection_Mini.slick-slider {padding-left:380px; width:100%;}
	
}

@media screen and (max-width:1380px){
	.section03 .inner:after {display:none;}
	.section03 .inbox {width:80%;}
		
	
	/*책리스트 - 큰책*/
	.collection_Big .item .info {padding:15px 20px 0 100px;}
	
	/*책리스트 - 작은책*/
	.collection_Mini a {height:170px;}
	
	/*컨트롤*/
	.collection_arrow {width:62%; bottom:190px;}
}

@media screen and (max-width:1240px){
	/*책리스트 - 큰책*/
	.collection_Big:before {margin:-195px 0 0 -17px;}
	.collection_Big .item .img {height:405px;}
	
	/*책리스트 - 작은책*/
	.collection_Mini a {margin:0 15px; height:148px;}
	
	/*컨트롤*/
	.collection_arrow {width:58%; bottom:170px;}
	
}

@media screen and (max-width:1200px){
	.section03 .inbox {width:100%;}
	
	.TopTitle {font-size:3.6rem;}
	
	/*탭*/
	.mainBooks .tabs {justify-content:center;}
	.mainBooks .tabs ul li .tab_btn {padding:0 30px; height:55px; line-height:59px;}
	.mainBooks .tabs ul li.active .tab_btn {padding:0 30px 0 60px;}
	.mainBooks .tabs ul li.active .tab_btn:before {left:30px;}
	

	/*책리스트 - 큰책*/
	.collection_Big:before {margin:-180px 0 0; width:360px; height:360px;}
	.collection_Big .item .img {width:290px; height:399px; margin-left:45px;}
	.collection_Big .item .info {width:calc(100% - 340px);}
	
	
	/*책리스트 - 작은책*/
	.collection_Mini.slick-slider {padding-left:385px;}
	.collection_Mini a {margin:0 24px;}

	/*컨트롤*/
	.collection_arrow {width:64%;}
}

@media screen and (max-width:1100px){
	/*컨트롤*/
	.collection_arrow {width:62%;}
}

@media screen and (max-width:1024px){
	.section03 .inner:before {bottom:-50px;}
	
	/*탭*/
	.mainBooks .tabs ul li .tab_btn {font-size:1.8rem;}
	
	.collection_box.noList:before {margin:-150px 0 0 -150px;}
	.collection_Big:before {margin:-135px 0 0 -3px; width:300px; height:300px;}
	
	/*책리스트 - 큰책*/
	.collection_Big .item .img {width:260px; height:325px; margin-left:20px;}
	.collection_Big .item .info {width:calc(100% - 280px);}
	.collection_Big .item .info {padding:0 20px 0 100px;}
	
	
	/*책리스트 - 작은책*/
	.collection_Mini.slick-slider {position:relative; margin-top:40px; padding-left:0;}
	.collection_Mini a {height:185px;}

	/*컨트롤*/
	.collection_arrow {width:63%; bottom:210px;}
}

@media screen and (max-width:920px){
	.section03 {padding:100px 0 120px;}
	.section03 .inner:before {left:unset; right:0; bottom:0; width:400px; height:374px;}
	
	.TopTitle {font-size:3.2rem;}
		
	.collection_Big:before {margin:-150px 0 0;}
	
	/*리스트없을떄*/
	.collection_box.noList {min-height:325px;}
	
	/*책리스트 - 큰책*/
	.collection_Big .item .info a {height:62px; font-size:2.2rem;}
	
	
	/*책리스트 - 작은책*/
	.collection_Mini.slick-slider {display:none;}
	
	
	/*컨트롤*/
	.collection_arrow {width:58%; bottom:0;}
	.collection_arrow:before {width:65%;}
	
}


@media screen and (max-width:850px){
	/*책리스트 - 큰책*/
	.collection_Big .item .info {padding:0 20px 0 70px;}
}

@media screen and (max-width:767px){
	.section03 .inner:before {bottom:unset; top:20%; width:350px; height:326px;}
	.TopTitle {position:relative; left:inherit; top:inherit; font-size:3.0rem; text-align:center;}
	
	/*탭*/
	.mainBooks .tabs ul li .tab_btn {padding:0 20px; height:45px; line-height:49px;}
	
	
	/*책리스트 - 큰책*/
	.collection_Big:before {display:none;}
	.collection_Big .item .img {display:block; float:none; margin:0 auto;}
	.collection_Big .item .img:before {content:''; position:absolute; left:50%; top:50%; margin:-150px 0 0 -150px; width:300px; height:300px; border-radius:50%; background-color:#e1dbdb; z-index:0;}
	.collection_Big .item .info {display:block; float:none; width:100%; padding:25px 0 0;}
	.collection_Big .item .info a {height:inherit;}
	
	
	/*리스트없을떄*/
	.collection_box.noList {min-height:200px; text-align:center; border:1px solid #ddd; border-radius:20px; background-color:#fff;}
	.collection_box.noList p {width:100%;}
	.collection_box.noList p:before {display:none;}

	/*컨트롤*/
	.collection_arrow {position:relative; width:100%; margin-top:20px;}
	.collection_arrow:before {width:calc(100% - 180px);}
	
}

@media screen and (max-width:640px){
	.section03 .inner:before {display:none;}
	
	/*탭*/
	.mainBooks .tabs ul li .tab_btn {font-size:1.7rem;}
	
	/*책리스트 - 큰책*/
	.collection_Big .item .img {width:230px; height:286px;}
	.collection_Big .item .info a {font-size:2.0rem;}
}

@media screen and (max-width:480px){
	.section03 {padding:80px 0 100px;}
	.section03:before {right:-20%; top:26%; width:450px; height:441px;}
	
	/*탭*/
	.mainBooks .tabs ul {width:100%;}
	.mainBooks .tabs ul li {width:30%; text-align:center;}
	.mainBooks .tabs ul li .tab_btn {padding:0;}
	.mainBooks .tabs ul li.active {width:40%;}
	.mainBooks .tabs ul li.active .tab_btn {padding:0 0 0 30px; width:100%;}
	
	
	/*책리스트 - 큰책*/
	.collection_Big .item .info a {font-size:1.8rem;}
}

@media screen and (max-width:390px){
	/*탭*/
	.mainBooks .tabs ul li.active .tab_btn:before {left:20px;}
}








/********************************
 section04 - 배너
 *******************************/

.section04 {border-top:1px solid #aaa; background-color:#fff;}
.section04 .inner {padding:30px 0;}

.bannerBox {display:flex; align-items:center;}
.bannerBox .ctrl_area {display:flex; align-items:center; gap:20px; width:215px;}
.bannerBox .ctrl_area .tit {font-size:2.0rem; font-family:'SBAggro';}

/*컨트롤*/
.ctrl_area .control {}
.ctrl_area .control > dl {}
.ctrl_area .control > dl dd {position:relative; display:inline-block; float:left; margin-left:-1px; color:#fff;}
.ctrl_area .control > dl dd .ctrl_cont,
.ctrl_area .control > dl dd a {position:relative; display:block; width:40px; height:40px; box-sizing:border-box;}
.ctrl_area .control > dl dd:last-child a {border-right:0;}
.ctrl_area .control > dl dd a:before {content:''; position:absolute; left:50%; top:50%; margin:-7px 0 0 -7px; width:14px; height:14px; background:url(../images/main/main_ctrl.png) 0 0 no-repeat;}
.ctrl_area .control > dl dd a.ctrl_prev:before {background-position:0 0;}
.ctrl_area .control > dl dd a.ctrl_stop:before {background-position:-15px 0;}
.ctrl_area .control > dl dd a.ctrl_next:before {background-position:-30px 0;}
.ctrl_area .control > dl dd a.ctrl_play:before {background-position:-45px 0;}

.ctrl_area .control > dl dd span.ctrl_cont {display:inline-flex; width:70px; justify-content:center; align-items:center; line-height:39px; color:rgba(255,255,255,0.8); font-weight:600; font-size:1.6rem;}
.ctrl_area .control > dl dd span.ctrl_cont strong {padding-right:3px; font-weight:600; color:#fff;}
.ctrl_area .control > dl dd span.ctrl_cont .dash {padding:0 3px;}

/*배너리스트*/
.banner_area {width:calc(100% - 215px);} 
.banner_area li {margin:0 15px; padding:2px 0;}
.banner_area li a {display:block; padding:8px 6px; font-size:1.5rem; text-decoration:none; border:2px solid #ddd; border-radius:30px; text-align:center;}

 
/* media query */
@media screen and (max-width:1600px){
	.section04 .inner {padding:30px 20px;}
}

@media screen and (max-width:1240px){
	.bannerBox .ctrl_area {gap:10px; width:193px;}
	.bannerBox .ctrl_area .tit {font-size:1.7rem;}
	
	/*배너리스트*/
	.banner_area {width:calc(100% - 193px);} 
	.banner_area li {margin:0 3px 0 17px;}
}

@media screen and (max-width:1024px){
}

@media screen and (max-width:920px){
	.bannerBox .ctrl_area {width:147px;}
	.bannerBox .ctrl_area .tit {overflow:hidden; position:absolute; top:-99999px; width:0; height:0; line-height:0; text-indent:-99999px;}
	.ctrl_area .control > dl dd a {margin:5px; background-color:#f6f6f6; border-radius:10px;}
	
	/*배너리스트*/
	.banner_area {width:calc(100% - 147px);}
	.banner_area li a {font-size:1.5rem;}
}

@media screen and (max-width:767px){
	.bannerBox .ctrl_area {width:132px;}
	
	/*배너리스트*/
	.banner_area {width:calc(100% - 132px);}
	/*컨트롤*/
	.ctrl_area .control > dl dd .ctrl_cont,
	.ctrl_area .control > dl dd a {height:35px; width:35px;}
}

@media screen and (max-width:640px){
	.section04 .inner {padding:15px 20px;}
}