@charset "UTF-8"; 

/********************************
 section01
 *******************************/
 
 .section01 {background-color:#f5f5f5;}
 
 /*검색창*/
.search_box {display:block; width:100%; z-index:16;}
.search_box form {position:relative; margin:0 auto; padding:160px 0 310px; width:66%;}
.search_box .searchInner {position:relative;;}
.search_box .srch_txt {position:relative; display:flex; align-items:center; padding:3px; border-width:0; border-color:transparent; border-radius:50px; background-origin:border-box; background-image:linear-gradient(#fff, #fff), linear-gradient(135deg, #a6dc6e 5%, #88cb5a 30%, #61b341 65%, #0e8e0e 90%); background-clip:content-box, border-box; box-shadow:8px 6px 20px 0 rgb(125 125 125 / 7%);}

.search_box .srchSelect {padding:0 30px 0 12px; margin-left:30px; width:180px; height:74px; border:none; background:url(../images/main/select_Marrow.png) right 11px center no-repeat; color:#222; font-size:2.0rem;}
.search_box .srch_txt input {position:relative; padding:0 120px 0 20px; width:calc(100% - 180px); height:74px; line-height:40px; border-radius:0 50px 50px 0; border:none; font-size:2.0rem; font-weight:500; color:#555; background:none;}

.search_box .btn_sch {position:absolute; right:0; top:-10px; width:100px; height:100px; background-color:#0e8e0e; border-radius:50px 50px 20px 50px; box-shadow:7px 6px 15px rgb(152 152 152 / 90%);}
.search_box .btn_sch:before {content:''; position:absolute; left:50%; top:50%; margin:-15px 0 0 -16px; width:33px; height:30px; background:url(../images/main/icon_sch2.png) 0 0 no-repeat;}
 
 
 
 
 /* media query */
@media screen and (max-width:1520px){
	.search_box form {padding:100px 0 300px; width:76%;}
	
}

@media screen and (max-width:1400px){
	.search_box form {padding:80px 0 280px;}
}

@media screen and (max-width:1240px){
	.search_box form {padding:80px 0 250px;}
}

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

@media screen and (max-width:920px){ 
	.search_box form {padding:80px 0 215px; width:85%;}
	.search_box .srchSelect {display:none;}
	.search_box .srch_txt input {padding:0 90px 0 30px; width:100%; height:60px; font-size:1.8rem; border-radius:50px;}
	
	.search_box .btn_sch {top:-8px; width:80px; height:80px;}
	.search_box .btn_sch:before {margin:-12px 0 0 -12px; width:24px; height:24px; background-image:url(../images/main/icon_sch3.png);}
	
}

@media screen and (max-width:767px){
	.search_box .srch_txt input {font-size:1.6rem;}
}

@media screen and (max-width:640px){
	.search_box form {padding:60px 0 200px; width:90%;}
}

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

/********************************
 section02
 *******************************/
.section02 {margin-top:-210px;}
.section02 .inner {position:relative; z-index:1;}
.section02 .inner:before {content:'Children and Young Adults'; position:absolute; right:0; bottom:90px; width:133%; font-size:15.0rem; font-family:'OneMobile'; color:#fff; letter-spacing:-10px;}

/*자주찾는메뉴*/
.shortcut_box {position:relative; width:100%;}
.shortcut_box:after {content:""; display:block; position:absolute; top:60px; right:-50px; bottom:0; background:#fff; width:3000px; border-radius:0 150px 0 0; z-index:-1;}
.shortcut_box li {width:16.6666%;}
.shortcut_box li a {display:block; padding:10px 0 30px; text-align:center;}
.shortcut_box li a:hover,
.shortcut_box li a:active,
.shortcut_box li a:focus {text-decoration:none;}

.shortcut_box li a .icon {position:relative; display:block; width:120px; height:120px; margin:0 auto 20px; border-radius:40px; background-color:#fff8d5; transition:.3s; box-shadow:5px 3px 15px rgb(152 152 152 / 0.2);}
.shortcut_box li a:hover .icon {top:-5px;}

.shortcut_box li a .icon:before {content:''; position:absolute; left:50%; top:50%; margin:-60px 0 0 -60px; width:120px; height:120px; background-position:0 0; background-repeat:no-repeat;}
.shortcut_box li a .icon.icon01:before {background-image:url(../images/main/icon_shortcut01.png);}/*스터디룸*/
.shortcut_box li a .icon.icon02:before {background-image:url(../images/main/icon_shortcut02.png);}/*독서문화진흥*/
.shortcut_box li a .icon.icon03:before {background-image:url(../images/main/icon_shortcut03.png);}/*책바다*/
.shortcut_box li a .icon.icon04:before {background-image:url(../images/main/icon_shortcut04.png);}/*책값*/
.shortcut_box li a .icon.icon05:before {background-image:url(../images/main/icon_shortcut05.png);}/*올해의책*/
.shortcut_box li a .icon.icon06:before {background-image:url(../images/main/icon_shortcut06.png);}/*희망도서*/
.shortcut_box li a .icon.icon07:before {background-image:url(../images/main/icon_shortcut07.png);}/*전자도서관*/
.shortcut_box li a .icon.icon08:before {background-image:url(../images/main/icon_shortcut08.png);}/*책나래*/

.shortcut_box li a .icon:after {content:''; position:absolute; top:0; right:0; bottom:0; left:0; border:2px solid #fff8d5; border-radius:40px; transition:.3s;}
.shortcut_box li a:hover .icon:after {border-color:#158576;}

.shortcut_box li a span {font-family:'OneMobile'; font-size:2.2rem; color:#333; line-height:1.2;}
.shortcut_box li a:hover span,
.shortcut_box li a:active span,
.shortcut_box li a:focus span {color:#158576;}

/*자주찾는메뉴 롤링버튼*/
.part_ctrl {display:none;}
.part_ctrl .pct_btn {display:inline-block; position:absolute; top:52px; width:35px; height:35px; border:1px solid #ddd; border-radius:12px; background-color:#fff;}
.part_ctrl .pct_btn:before {content:''; position:absolute; left:50%; top:50%; margin:-18px 0 0 -18px; width:35px; height:35px; background-image:url(../images/main/main_ir.png); background-repeat:no-repeat;}
.part_ctrl .pct_btn.prev {left:20px;}
.part_ctrl .pct_btn.prev:before {background-position:0 0;}
.part_ctrl .pct_btn.next {right:20px;}
.part_ctrl .pct_btn.next:before {background-position:-72px 0;}

 
 
 /* media query */
@media screen and (max-width:1520px){
	.section02 .inner {padding:0 20px;}
	.section02 .inner:before {font-size:10.0rem; letter-spacing:-5px; width:100%; right:unset; left:0; bottom:100px;}
}

@media screen and (max-width:1400px){
	.section02 .inner:before {text-align:center;}
	.shortcut_box:after {top:70px; right:0; width:100%; border-radius:100px 100px 0 0; }
}

@media screen and (max-width:1240px){
	.section02 .inner:before {display:none;}
}

@media screen and (max-width:1200px){
	.shortcut_box {padding:0 40px;}
	
	.part_ctrl {display:block;}
}

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

@media screen and (max-width:920px){ 
	.section02 {margin-top:-187px;}
	.shortcut_box li a .icon {width:100px; height:100px; border-radius:35px;}
	.shortcut_box li a .icon:before {margin:-50px 0 0 -50px; width:100px; height:100px; background-size:100%;}
	.shortcut_box li a .icon:after {border-radius:35px;}
	
	.shortcut_box li a span {font-size:2.0rem;}
}

@media screen and (max-width:767px){
	.shortcut_box li a span {font-size:1.8rem;}
}

@media screen and (max-width:640px){
	.section02 {margin-top:-184px;}
	.shortcut_box li a span {font-size:1.6rem;}
}

@media screen and (max-width:360px){
	.shortcut_box li a span {font-size:1.5rem;}
}
 
 
 
 
 
 
 

/********************************
 section03
 *******************************/
 
.section03 .inner {display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; padding:100px 0;}
.section03 .item {width:calc(50% - 20px); min-height:450px; transition:.3s;}



/* media query */
@media screen and (max-width:1520px){
	.section03 .inner {gap:30px; padding:100px 30px;}
	.section03 .item {width:calc(50% - 15px);}
}

@media screen and (max-width:1240px){
	.section03 .inner {padding:70px 30px;}
}

@media screen and (max-width:1200px){
	.section03 .inner {gap:20px;}
	.section03 .item {width:calc(50% - 10px);}
}

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

@media screen and (max-width:920px){ 
	.section03 .inner {padding:50px 25px;}
	.section03 .item {width:100%;}
	.section03 .item.right {min-height:unset;}
}

@media screen and (max-width:767px){
	.section03 .inner {padding:50px 20px;}
	.section03 .item.left {min-height:380px;}
}

@media screen and (max-width:640px){
	.section03 .item.left {min-height:320px;}
}

@media screen and (max-width:480px){
	.section03 .item.left {min-height:280px;}
}





/* 팝업존 */
.mainPopup {position:relative;}
.mainPopup .slider {display:block; position:relative; height:450px; border-radius:20px; overflow:hidden; background-color:#f9f9f9;}
.mainPopup li > a {overflow:hidden; display:block; position:relative; height:450px; background-color:#f9f9f9;}
.mainPopup li > a img {display:block; width:100%; height:100%;}

.mainPopup .control {position:absolute; bottom:0; right:0; padding:0 5px; background:rgba(0,0,0,.5); border-radius:20px 0 20px 0; z-index:30;}
.mainPopup .control > dl {}
.mainPopup .control > dl dd {position:relative; display:inline-block; float:left; margin-left:-1px; color:#fff;}
.mainPopup .control > dl dd .ctrl_cont,
.mainPopup .control > dl dd a {position:relative; display:block; width:40px; height:40px; box-sizing:border-box;}
.mainPopup .control > dl dd:last-child a {border-right:0;}
.mainPopup .control > dl dd a:before {content:''; position:absolute; left:50%; top:50%; margin:-20px 0 0 -20px; width:40px; height:40px; background-image:url(../images/main/main_ir.png); background-repeat:no-repeat;}
.mainPopup .control > dl dd a.ctrl_prev:before {background-position:0 -37px;}
.mainPopup .control > dl dd a.ctrl_stop:before {background-position:-41px -37px;}
.mainPopup .control > dl dd a.ctrl_next:before {background-position:-82px -37px;}
.mainPopup .control > dl dd a.ctrl_play:before {background-position:-123px -37px;}
.mainPopup .control > dl dd span.ctrl_cont {display:inline-flex; width:71px; justify-content:center; align-items:center; line-height:39px; color:#fff; font-weight:600; font-size:1.6rem;}
.mainPopup .control > dl dd span.ctrl_cont strong {padding-right:3px; font-weight:600;}


/* media query */
@media screen and (max-width:1200px){
}

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

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

@media screen and (max-width:767px){
	.mainPopup .slider {height:380px;}	
	.mainPopup li > a {height:380px;}
	
}

@media screen and (max-width:640px){
	.mainPopup .slider {height:320px;}
	.mainPopup li > a {height:320px}
}

@media screen and (max-width:480px){
	.mainPopup .slider {height:280px;}
	.mainPopup li > a {height:280px;}
}

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


/* 공지사항 */
.section03 .right {padding:20px 0;}
.mainBoard {position:relative; display:block;}
.mainBoard .tit {display:block; font-family:'OneMobile'; color:#222; font-size:4.0rem;}

.noticeList {margin-top:30px; border-bottom:1px dashed #ddd;}
.noticeList li {display:block;}
.noticeList li a {position:relative; display:block; padding:35px 120px 35px 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 {font-size:2.2rem; font-weight:500; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.noticeList li a:hover .txt,
.noticeList li a:active .txt,
.noticeList li a:focus .txt {font-weight:600; text-decoration:underline;}

.noticeList li a .txt img {display:inline-block; margin:0px 5px 2px 0;}

.noticeList li a .date {position:absolute; right:0; top:40px; font-size:1.7rem; color:#555;}
.noticeList li a:hover .date,
.noticeList li a:active .date,
.noticeList li a:focus .date {font-weight:400;}
.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 .ctrl_cont,
.mainBoard .noticeCtrl > dl dd a {position:relative; display:block; margin-right:5px; width:35px; height:35px; background-color:#edf0f4; border-radius:12px; box-sizing:border-box;}
.mainBoard .noticeCtrl > dl dd a:before {content:''; position:absolute; left:50%; top:50%; margin:-18px 0 0 -17px; width:35px; height:35px; background-image:url(../images/main/main_ir.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:-36px 0;}
.mainBoard .noticeCtrl > dl dd a.ctrl_next:before {background-position:-72px 0;}
.mainBoard .noticeCtrl > dl dd a.ctrl_play:before {background-position:-108px 0;}

.mainBoard .noticeCtrl .more {position:relative; display:inline-block; width:35px; height:35px; border-radius:12px; background:#158576 url(../images/main/main_ir.png) -144px 0 no-repeat;}




/* media query */
@media screen and (max-width:1520px){
}


@media screen and (max-width:1240px){
	.mainBoard .tit {font-size:3.6rem;}
	
	
	.mainBoard .noticeCtrl {top:9px;}
}

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

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

@media screen and (max-width:920px){
	.mainBoard .tit {font-size:3.2rem;}
	
	.noticeList {margin-top:20px;}
	.noticeList li a {padding:25px 100px 25px 0;}
	.noticeList li a .txt {font-size:2.0rem;}
	.noticeList li a .date {top:28px; font-size:1.6rem;}
	
	.mainBoard .noticeCtrl {top:6px;}
}

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

@media screen and (max-width:640px){
	.mainBoard .tit {font-size:3.0rem;}
	
	.noticeList li a {padding:20px 100px 20px 0;}
	.noticeList li a .txt {font-size:1.8rem;}
	.noticeList li a .date {top:23px; font-size:1.5rem;}
	
	.mainBoard .noticeCtrl {top:4px;}
}

@media screen and (max-width:480px){
	.section03 .right {padding:10px 0;}
	
	.mainBoard .tit {font-size:2.8rem;}
	
	.mainBoard .noticeCtrl {top:3px;}
}




 
 

/********************************
 section04
 *******************************/
.section04 {position:relative; display:block; padding:30px 0; background-color:#fff;}
.section04:after {content:''; display:block; visibility:hidden; clear:both;}
.section04 .inner {display:flex; flex-wrap:wrap; justify-content:space-between; padding:50px 0 90px; z-index:0;}
.section04 .inner:before {content:""; display:block; position:absolute; top:0; left:-100px; bottom:0; background:#e7f4ee; width:3000px; border-radius:15px 0 0 180px; z-index:-1;}
 
 /* media query */
@media screen and (max-width:1520px){
	.section04 .inner {padding:60px 30px 80px;}
}

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

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

@media screen and (max-width:920px){ 
	.section04 {padding:0;}
	.section04 .inner {padding:40px 20px;}
	.section04 .inner:before {left:0; width:100%; border-radius:0;}
}

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

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

@media screen and (max-width:480px){
}
 
 
 
/* 독서문화진흥신청 */
.lecture {position:relative; width:calc(100% - 420px);}
.lecture .tit {display:block; font-family:'OneMobile'; color:#222; font-size:4.0rem;}
.lecture .lectList {display:block; margin-top:20px; margin-left:-15px;}
.lecture .lectList:after {content:''; display:block; visibility:hidden; clear:both;}

.lecture .lectList li {display:inline-block; float:left; width:33.3333%; padding:20px 15px 50px;}
.lecture .lectList li:after {content:''; display:block; visibility:hidden; clear:both;}

.lecture .lectList .item {position:relative; display:block; padding:30px; border:1px solid #fff; border-radius:30px; background-color:#fff; box-shadow:5px 3px 15px rgb(152 152 152 / 0.2); box-sizing:border-box; z-index:0;}
.lecture .lectList .item:hover,
.lecture .lectList .item:active,
.lecture .lectList .item:focus {text-decoration:none; border-color:#158576;}

.lecture .lectList .item .tag {font-size:1.4rem; color:#ca5a09; font-weight:500;}
.lecture .lectList .item .subj {overflow:hidden; display:block; position:relative; min-height:60px; font-weight:600; color:#333; word-break:keep-all; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.lecture .lectList .item:hover .subj,
.lecture .lectList .item:active .subj,
.lecture .lectList .item:focus .subj {color:#158576;}

.lecture .lectList .item .txt {padding-top:10px; font-size:1.6rem; color:#555;}
.lecture .lectList .item .txt dl {display:table; color:#333; table-layout:fixed; width:100%;}
.lecture .lectList .item .txt dl + dl {margin-top:5px;}
.lecture .lectList .item .txt dl dt,
.lecture .lectList .item .txt dl dd {position:relative; display:table-cell; }
.lecture .lectList .item .txt dl dt {position:relative; width:20px; height:20px;}
.lecture .lectList .item .txt dl dt:before {content:''; position:absolute; left:0; top:0; width:20px; height:20px; background-image:url(../images/main/main_ir.png); background-repeat:no-repeat;}
.lecture .lectList .item .txt dl dt.pp:before {background-position:-204px 0;}
.lecture .lectList .item .txt dl dt.date:before {background-position:-225px 0;}
.lecture .lectList .item .txt dl dd {padding-left:10px; letter-spacing:-1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lecture .lectList .item .txt dl dd.line2 {white-space:unset; text-overflow:unset; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.lecture .lectList .item .txt span.next_line {display:block;}

.lecture .lectList .item .stateBox {position:absolute; right:-10px; bottom:-30px;}
.lecture .lectList .item .stateBox span {position:relative; display:block; width:80px; height:80px; line-height:80px; color:#fff; font-weight:500; border-radius:30px; font-size:1.8rem; text-align:center; z-index:0;}
.lecture .lectList .item .stateBox span:before {content:''; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:30px; transform:rotate(45deg); z-index:-1;}
.lecture .lectList .item .stateBox span.state:before {background:#25a308;} /*접수대기*/
.lecture .lectList .item .stateBox span.state.ing:before {background:#4274c4;} /*접수중*/

.lecture .slick-track {margin-left:0 !important;}


/*강좌없을 경우*/
.nolist {display:table; padding:50px 10px 30px; width:100%; min-height:254px; text-align:center; border:1px solid #d5dae5; border-radius:20px; z-index:0;}
.nolist span {display:table-cell; position:relative; padding-top:80px; vertical-align:middle;}
.nolist span:before {content:''; position:absolute; top:0; left:50%; margin-left:-50px; width:100px; height:100px; background:#fff8d5 url(../images/main/icon_shortcut02.png) 50% 50% no-repeat; background-size:contain; border-radius:35px;}


/*컨트롤*/
.lecture .lectureCtrl {display:flex; position:absolute; top:12px; right:0; z-index:30;}
.lecture .lectureCtrl > dl {}
.lecture .lectureCtrl > dl dd {position:relative; display:inline-block; float:left; color:#fff;}
.lecture .lectureCtrl > dl dd .ctrl_cont,
.lecture .lectureCtrl > dl dd a {position:relative; display:block; margin-right:5px; width:40px; height:40px; background-color:#fff; border-radius:15px; box-sizing:border-box;}
.lecture .lectureCtrl > dl dd a:before {content:''; position:absolute; left:50%; top:50%; margin:-18px 0 0 -17px; width:40px; height:40px; background-image:url(../images/main/main_ir.png); background-repeat:no-repeat;}
.lecture .lectureCtrl > dl dd a.ctrl_prev:before {background-position:0 0;}
.lecture .lectureCtrl > dl dd a.ctrl_stop:before {background-position:-36px 0;}
.lecture .lectureCtrl > dl dd a.ctrl_next:before {background-position:-72px 0;}
.lecture .lectureCtrl > dl dd a.ctrl_play:before {background-position:-108px 0;}

.lecture .lectureCtrl .more {position:relative; display:inline-block; width:40px; height:40px; border-radius:15px; background:#158576 url(../images/main/main_ir.png) -141px 2px no-repeat;}




/* media query */

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

@media screen and (max-width:1240px){
	.lecture {width:calc(100% - 400px);}
	
	.lecture .tit {font-size:3.6rem;}
	.lecture .lectureCtrl {top:8px;}
}

@media screen and (max-width:1200px){
	.lecture {width:calc(100% - 400px);}
}

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

@media screen and (max-width:920px){
	.lecture {width:100%;}
	.lecture .tit {padding-left:5px; font-size:3.2rem;}
	.lecture .lectureCtrl {top:5px; right:5px;}
	.lecture .lectList li {padding:20px 14px 40px;}
	.lecture .lectList .item .stateBox {right:-5px; bottom:-25px;}
	
	/*강좌없을 경우*/
	.nolist {margin-top:15px; padding:30px; min-height:inherit;}
	.nolist span {padding-top:90px;}
	.nolist span:before {margin-left:-40px; width:80px; height:80px;}
}

@media screen and (max-width:767px){
	.lecture .lectList .item .subj {font-size:2.0rem;}
	
	.lecture .tit {padding-left:0;}
	.lecture .lectureCtrl {right:0;}
	.lecture .lectureCtrl > dl dd a {width:35px; height:35px; border-radius:12px;}
	.lecture .lectureCtrl > dl dd a:before {width:35px; height:35px;} 
	.lecture .lectureCtrl .more {width:35px; height:35px; background-position:-144px 0; border-radius:12px;}
	
}

@media screen and (max-width:640px){
	.lecture .tit {font-size:3.0rem;}
	.lecture .lectureCtrl {top:4px;}
}

@media screen and (max-width:480px){
	.lecture .tit {font-size:2.8rem;}
	.lecture .lectList {margin-top:40px;}
	.lecture .lectureCtrl {top:50px;}
}

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



/* 이달의 휴관안내 */
.calendarBox {position:relative; margin:-101px 0 -20px; width:370px; background-color:#158576; border-radius:20px;}
.calendarBox .closure {padding:30px;}

.closeInfo {text-align:center;}
.closeInfo .tit {font-family:'OneMobile'; font-size:3.5rem; color:#fff;}
.closeInfo .tip.yellow {display:inline-block; color:#ded70e; font-size:1.6rem;}
.closeInfo .tip.yellow:before {top:1px; width:20px; height:20px; background:#ded70e url(../images/main/main_ir.png) -246px 0 no-repeat;} 
 
 
  
 /* media query */
@media screen and (max-width:1520px){
}

@media screen and (max-width:1240px){
	.closeInfo .tit {font-size:3.2rem;}
}

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

@media screen and (max-width:920px){
	.calendarBox {margin:20px 5px 0; width:100%;}
}

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

@media screen and (max-width:640px){
	.calendarBox {margin:20px auto 0;}
	.closeInfo .tit {font-size:3.0rem;}
}

@media screen and (max-width:480px){
	.closeInfo .tit {font-size:2.8rem;}
	.calendarBox .closure {padding:20px 20px 25px;}
}
 


/* 달력 */
.calendar_box {}
.calendar_box:after {content:''; display:block; visibility:hidden; clear:both;}

.calendar_box .cal_ctrlbox {position:relative; margin:0 auto; width:185px;}
.cal_ctrlbox .cal_year {padding:12px 0; font-size:2.4rem; line-height:1.2; color:#fff; text-align:center;}
.cal_ctrlbox .cal_btnset {position:absolute; top:50%; margin-top:-10px;}
.cal_ctrlbox .cal_btnset button {display:block; width:20px; height:20px;}
.cal_ctrlbox .cal_btnset button:before {content:''; position:absolute; left:3px; top:2px; width:11px; height:16px; background-image:url(../images/main/main_ir.png); background-repeat:no-repeat;}
.cal_ctrlbox .cal_btnset.cal_btn_pre {left:0;}
.cal_ctrlbox .cal_btnset.cal_btn_pre button:before {background-position:-180px 0;}
.cal_ctrlbox .cal_btnset.cal_btn_next {right:0;}
.cal_ctrlbox .cal_btnset.cal_btn_next button:before {background-position:-192px 0;}

.calendar_box .cal_cont {}
.calendar_box .cal_cont:after {content:''; display:block; visibility:hidden; clear:both;}

.tbl_cal_list {padding:20px 30px; border-collapse:separate; table-layout:fixed;width:100%; line-height:1.2; background-color:#fff; border-radius:20px;}
.tbl_cal_list thead th {padding:10px 0; font-size:1.6rem; color:#121212; text-align:center;}
.tbl_cal_list thead th .sun {color:#ed1d1d;}
.tbl_cal_list thead th .sat {color:#0073e9;}

.tbl_cal_list tbody td {height:42px; font-size:1.6rem; vertical-align:middle; background-color:#fff; text-align:center; color:#222;}

.tbl_cal_list tbody td .day {position:relative; display:block; text-decoration:none;}
.tbl_cal_list tbody td .day b {}
.tbl_cal_list tbody td .day.sun b,
.tbl_cal_list tbody td .day.holiday b {color:#ed1d1d;}
.tbl_cal_list tbody td .day.sat b {color:#0073e9;}
.tbl_cal_list tbody td .day .closed {position:relative; z-index:0;}
.tbl_cal_list tbody td .day .closed:before {content:''; position:absolute; left:50%; top:50%; margin:-15px 0 0 -15px; width:30px; height:30px; background-color:#ffb8d9; border-radius:15px; z-index:-1;}
.tbl_cal_list tbody td.no_day b {overflow:hidden; position:absolute; top:-99999px; width:0; height:0; line-height:0; text-indent:-99999px;}




/** media query **/

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

}

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

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

@media screen and (max-width:767px) {
	.cal_ctrlbox .cal_year {font-size:2.2rem;}

}

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

}

@media screen and (max-width:480px) {
	.tbl_cal_list {padding:15px;}
	.tbl_cal_list thead th {padding:5px 0;}
	.tbl_cal_list tbody td {height:35px;}
	.tbl_cal_list tbody td .day .closed:before {margin:-13px 0 0 -13px; width:26px; height:26px;}
}

@media screen and (max-width:350px) {
	.tbl_cal_list tbody td {font-size:1.5rem;}
}
 
 
 

/********************************
 section05
 *******************************/
.section05 {position:relative;}
.section05 .inner {position:relative;}
.section05 .inner:before {content:''; position:absolute; left:-400px; bottom:-200px; width:705px; height:628px; background:url(../images/main/ptLeft.png) 0 0 no-repeat; z-index:-1;}
.section05 .inner:after {content:''; position:absolute; right:-400px; top:160px; width:733px; height:743px; background:url(../images/main/ptRight.png) 0 0 no-repeat; z-index:-1;}

.TopTitle {margin:0 auto; padding-top:100px; font-family:'OneMobile'; font-size:4.0rem; color:#333; text-align:center;}

.tabs {margin:20px auto 100px;}
.tabs ul {display:flex; justify-content:center;}
.tabs ul li {}
.tabs ul li .tab_btn {position:relative; padding:0 30px; color:#aaa; font-size:2.5rem; font-family:'OneMobile';}
.tabs ul li .tab_btn:before {content:''; position:absolute; left:0; top:calc(50% - 3px); width:6px; height:6px; background-color:#aaa; border-radius:5px;}
.tabs ul li:first-child .tab_btn:before {display:none;}
.tabs ul li.active .tab_btn {color:#158527;}

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

.collection_box {position:relative; margin-bottom:100px; min-height:200px;}
.collection_list {}
.collection_list:after {content:''; display:block; visibility:hidden; clear:both;}

.collection_list .collection_item {position:relative;}
.collection_list .collection_item:after {content:''; display:block; visibility:hidden; clear:both;}

.collection_list .collection_item .clt_inner {display:flex; align-items:stretch;}

.collection_list .collection_item.slick-current .collection_con .collection_title, 
.collection_list .collection_item.slick-active .collection_con .collection_title, 
.collection_list .collection_item.slick-current .collection_con p, 
.collection_list .collection_item.slick-active .collection_con p, 
.collection_list .collection_item.slick-current .collection_info, 
.collection_list .collection_item.slick-active .collection_info {opacity:1; transform:translateY(0);}



/*왼쪽 - 책이미지*/
.clt_inner .collection_img {position:relative; width:45%; z-index:0;}
.clt_inner .collection_img .clt_imgbox {margin:0 auto 210px; width:220px; height:317px;}
.clt_inner .collection_img .clt_imgbox:before {content:''; position:absolute; left:50%; bottom:0; margin-left:-313px; width:627px; height:320px; background:url(../images/main/bookUnder.png) 0 0 no-repeat; background-size:100%; z-index:-1;}
.clt_inner .collection_img .clt_imgbox img {width:100%; height:100%; border-radius:15px; box-shadow:5px 3px 15px rgb(152 152 152 / 0.2);}



/*오른쪽 - 책정보*/
 .collection_con {padding:40px 50px 50px; width:55%;}
 .collection_con .cltTbox {position:relative; display:flex; flex-direction:column;}
 .collection_con .collection_title {font-size:4.5rem; font-family:'OneMobile'; color:#158527; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:0; transform:translateY(50px); transition:1000ms opacity, 1000ms transform;}
/* .collection_con p {margin:22px 0 29px; font-size:2.3rem; line-height:1.6; color:#444; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; opacity:0; transform:translateY(50px); transition:1000ms opacity, 1000ms transform; transition-delay:500ms;} */
.cltTbox .collection_info {margin:40px 0 60px; opacity:0; transform:translateY(50px); transition:1000ms opacity, 1000ms transform; transition-delay:500ms;}
.cltTbox .collection_info li {padding-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:2.4rem;}
.cltTbox .collection_info li strong {font-weight:600; padding-right:15px;} 
.cltTbox .collection_info.list li:before {top:12px;}



/*자세히보기*/
.cltTbox .collection_more {position:absolute; left:-225px; bottom:-155px; display:inline-block;}
.cltTbox .collection_more a {display:table; width:150px; height:150px; border-radius:50%; background:linear-gradient(135deg, #1cfbad 0%, #1a8fe9 100%); font-size:2.2rem; color:#fff; text-align:center; box-shadow:5px 3px 15px rgb(152 152 152 / 0.2);}
.cltTbox .collection_more a:hover,
.cltTbox .collection_more a:active,
.cltTbox .collection_more a:focus {text-decoration:none;}
.cltTbox .collection_more a span {display:table-cell; vertical-align:middle;}



/*컨트롤러*/
.collection_control {display:inline-block; position:absolute; left:calc(50% - 25px); bottom:140px;}
.collection_control .collection_arrow {display:flex; justify-content:flex-start; align-items:center;}

.collection_control .collection_arrow > dl {display:flex;}
.collection_control .collection_arrow > dl dd a {position:relative; display:block; margin-right:5px; width:70px; height:70px; background-color:#fff; border-radius:50%; box-shadow:5px 3px 15px rgb(152 152 152 / 0.2); box-sizing:border-box;}
.collection_control .collection_arrow > dl dd a.stop_btn,
.collection_control .collection_arrow > dl dd a.play_btn {background-color:#4c4c4c;}
.collection_control .collection_arrow > dl dd a:before {content:''; position:absolute; left:calc(50% - 6px); top:calc(50% - 12px); width:16px; height:25px; background-image:url(../images/main/main_ir.png); background-repeat:no-repeat;}
.collection_control .collection_arrow > dl dd a.prev_btn:before {background-position:-164px -37px;}
.collection_control .collection_arrow > dl dd a.stop_btn:before {background-position:-181px -37px;}
.collection_control .collection_arrow > dl dd a.next_btn:before {background-position:-198px -37px;}
.collection_control .collection_arrow > dl dd a.play_btn:before {background-position:-215px -37px;}

/*리스트없을떄*/
.collection_box.noList {}
.collection_box.noList .collection_item {padding:30px; border:1px solid #ddd; border-radius:30px; text-align:center;}
.collection_box.noList .collection_control {display:none;}




/* media query */
@media screen and (max-width:1520px){
	.section05 .inner {padding:0 30px;}
}

@media screen and (max-width:1400px){
	.tabs {margin:20px auto 80px;}
	.TopTitle {padding-top:50px;}
	.collection_box {margin-bottom:50px;}
	
	
	/*오른쪽 - 책정보*/
	 .collection_con {padding:30px 40px; width:60%;}
	 .collection_con .collection_title {font-size:4.0rem;}
	 
	 
	/*왼쪽 - 책이미지*/
	.clt_inner .collection_img {width:40%;}
	.clt_inner .collection_img .clt_imgbox {margin: 0 auto 155px;/* width:240px; *//* height:346px; */}
	.clt_inner .collection_img .clt_imgbox:before {margin-left:-50%;width:100%;height: 267px;}
	
	
	/*자세히보기*/
	.cltTbox .collection_more {left:-170px; bottom:-130px;}
	
	
	/*컨트롤러*/
	.collection_control {left:calc(50% - 80px); bottom:135px;}
}


@media screen and (max-width:1240px){
	.section05 .inner:after {top:10px;}
	
	.TopTitle {font-size:3.6rem;}
	.tabs ul li .tab_btn {padding:0 20px; font-size:2.3rem;}
	
	/*오른쪽 - 책정보*/
	 .collection_con {padding:0 30px;}
	 .collection_con .collection_title {font-size:3.6rem;}
	 .cltTbox .collection_info li {font-size:2.2rem;}
	
	
	/*자세히보기*/
	.cltTbox .collection_more {left:-160px; bottom:-165px;}
	.cltTbox .collection_more a {width:130px; height:130px; font-size:2.0rem;}
	
	
	/*컨트롤러*/
	.collection_control {left:calc(50% - 85px); bottom:180px;}
}

@media screen and (max-width:1200px){
	/*왼쪽 - 책이미지*/
	.clt_inner .collection_img .clt_imgbox {margin:0 auto 195px; width:200px; height:289px;}
	
	
	/*자세히보기*/
	.cltTbox .collection_more {bottom:-140px;}
	
	/*컨트롤러*/
	.collection_control {left:calc(50% - 75px); bottom:170px;}
}

@media screen and (max-width:1024px){
	.section05 .inner:before {width:600px; height:534px; background-size:100%;}
	.section05 .inner:after {width:600px; height:608px; background-size:100%;}
	
	.tabs {margin:20px auto 60px;}
	.collection_con .collection_title {font-size:3.3rem;}
	
	/*자세히보기*/
	.cltTbox .collection_more {bottom:-125px;}
	
	/*컨트롤러*/
	.collection_control {left:calc(50% - 63px); bottom:110px;}
	.collection_control .collection_arrow > dl dd a {width:60px; height:60px;}
	.collection_control .collection_arrow > dl dd a:before {left:calc(50% - 7px);}
	
	
	/*왼쪽 - 책이미지*/
	.clt_inner .collection_img .clt_imgbox {margin:0 auto 120px; width:180px; height:260px;}
	.clt_inner .collection_img .clt_imgbox:before {height:190px;}
	
	/*자세히보기*/
	.cltTbox .collection_more {bottom:-105px;}
	
	/*컨트롤러*/
	.collection_control {left:calc(50% - 63px);}
	.collection_control .collection_arrow > dl dd a {width:60px; height:60px;}
	.collection_control .collection_arrow > dl dd a:before {left:calc(50% - 7px);}
}

@media screen and (max-width:920px){ 
	.section05 .inner {padding:0 25px;}
	
	.TopTitle {font-size:3.2rem;}
	
	.collection_list .collection_item .clt_inner {flex-direction: column;}
	
	
	/*왼쪽 - 책이미지*/
	.clt_inner .collection_img {display:block; width:100%;}
	.clt_inner .collection_img .clt_imgbox {margin:0 auto 110px;}
	.clt_inner .collection_img .clt_imgbox:before {margin-left:-200px; width:400px; height:182px;}
	
	
	/*오른쪽 - 책정보*/
	.collection_con {display:block; width:100%; padding:30px 0;}
	.collection_con .collection_title {font-size:3.0rem;}
	.cltTbox .collection_info {margin:30px 0;}
	.cltTbox .collection_info li {font-size:2.0rem;}
  	.cltTbox .collection_info.list li:before {top:10px;}
	
	
	/*자세히보기*/
	.cltTbox .collection_more {bottom:unset; left:unset; right:180px; top:-150px;}
	
	
	/*컨트롤러*/
	.collection_control {bottom:0; left:unset; right:0;}
}

@media screen and (max-width:840px){
	/*자세히보기*/
	.cltTbox .collection_more {right:150px; top:-150px;}
	
}

@media screen and (max-width:767px){
	.section05 .inner {padding:0 20px;}
	
	
	/*오른쪽 - 책정보*/
	.cltTbox .collection_info {margin:20px 0;}
	
	
	/*자세히보기*/
	.cltTbox .collection_more {right:130px;}
}

@media screen and (max-width:700px){
	/*자세히보기*/
	.cltTbox .collection_more {right:90px;}
	
}

@media screen and (max-width:640px){
	.section05 .inner:before {left:-200px; width:450px; height:401px;}
	.section05 .inner:after {right:-200px; width:450px; height:458px;}
	
	
	.TopTitle {font-size:3.0rem;}
	.tabs {margin:20px auto 40px;}
	.tabs ul li .tab_btn {font-size:2.1rem;}
	.collection_box {margin-bottom:20px;}
	
	
	/*왼쪽 - 책이미지*/
	.clt_inner .collection_img .clt_imgbox {margin:0 auto 95px; width:160px; height:231px;}
	.clt_inner .collection_img .clt_imgbox:before {height:159px; width:350px; margin-left:-175px;}
	
	
	/*오른쪽 - 책정보*/
	.collection_con {padding:30px 0 50px;}
	.collection_con .collection_title {font-size:2.8rem; white-space:unset; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.2;}
	.cltTbox .collection_info li {font-size:1.8rem;}
  	.cltTbox .collection_info.list li:before {top:9px;}
	
	
	/*컨트롤러*/
	.collection_control {bottom:15px;}
	.collection_control .collection_arrow > dl dd a {width:50px; height:50px;}
	.collection_control .collection_arrow > dl dd a:before {top:calc(50% - 10px); width:13px; height:21px;}
	.collection_control .collection_arrow > dl dd a.prev_btn:before {background-position:-164px -63px;}
	.collection_control .collection_arrow > dl dd a.stop_btn:before {background-position:-178px -63px;}
	.collection_control .collection_arrow > dl dd a.next_btn:before {background-position:-192px -63px;}
	.collection_control .collection_arrow > dl dd a.play_btn:before {background-position:-206px -63px;}
	
	
	/*자세히보기*/
	.cltTbox .collection_more {right:90px; top:-140px;}
	.cltTbox .collection_more a {width:110px; height:110px; font-size:1.8rem;}
}

@media screen and (max-width:560px){
	/*자세히보기*/
	.cltTbox .collection_more {right:50px;}
}

@media screen and (max-width:480px){
	.TopTitle {font-size:2.8rem;}
	.tabs {margin:15px auto 30px;}
	.tabs ul li .tab_btn {padding:0 15px; font-size:1.9rem;}
	.tabs ul li .tab_btn:before {top:calc(50% - 2px); width:4px; height:4px;}
	
	
	/*왼쪽 - 책이미지*/
	.clt_inner .collection_img .clt_imgbox {margin:0 auto 80px; width:140px; height:202px;}
	.clt_inner .collection_img .clt_imgbox:before {height:132px; width:290px; margin-left:-145px;}
	
	
	/*오른쪽 - 책정보*/
	.collection_con .collection_title {font-size:2.6rem;}
	
	/*자세히보기*/
	.cltTbox .collection_more {right:20px;}
}

@media screen and (max-width:365px){
	/*자세히보기*/
	.cltTbox .collection_more {right:0;}
}
	


 
 
 

/********************************
 section06
 *******************************/
 
.section06 .inner {display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center;}

.lolbn_box {position:relative; box-sizing:border-box;}
.lolbn_box:after {content:''; display:block; visibility:hidden; clear:both;}


.lolControl {display:flex; justify-content:flex-start; flex-wrap:wrap; align-items:center; gap:20px; padding:25px 0; width:250px;}
.lolControl .lol_tit {font-size:2.0rem; font-family:'OneMobile'; color:#121212;}
.lolb_ctrl {}
.lolb_ctrl > dl dd {position:relative; display:inline-block; float:left; margin:3px;}
.lolb_ctrl > dl dd:after {content:''; display:block; visibility:hidden; clear:both;}
.lolb_ctrl > dl dd .ctrl_cont,
.lolb_ctrl > dl dd a {position:relative; display:block; width:25px; height:25px; box-sizing:border-box; color:#444;}
.lolb_ctrl > dl dd a:before {content:''; position:absolute; left:0; top:0; width:25px; height:25px; background:url(../images/main/main_ir.png); background-repeat:no-repeat;}
.lolb_ctrl > dl dd a.ctrl_prev:before {background-position:-5px -6px;}
.lolb_ctrl > dl dd a.ctrl_stop:before {background-position:-41px -6px;}
.lolb_ctrl > dl dd a.ctrl_next:before {background-position:-77px -6px;}
.lolb_ctrl > dl dd a.ctrl_play:before {background-position:-113px -6px;}


.lolbn {width:calc(100% - 250px);}
.lolbn > ul {overflow:hidden; }
.lolbn > ul:after {content:''; display:block; visibility:hidden; clear:both;}
.lolbn > ul li {display:inline-block; float:left; margin-right:30px; text-align:center;}
.lolbn > ul li:after {content:''; display:block; visibility:hidden; clear:both;}
.lolbn > ul li a {display:block; padding:8px; font-size:1.6rem; color:#444; text-decoration:none; border:2px solid #ddd; border-radius:30px;}
.lolbn > ul li a:after {content:''; display:block; visibility:hidden; clear:both;}



/* media query */
@media screen and (max-width:1520px) {
	.section06 .inner {padding:0 30px;}
}

@media screen and (max-width:1240px) {
  	.section06 .inner {padding:0 20px;}
	.lolControl {width:130px;}
	.lolControl .lol_tit {display:none;}
	
	.lolbn {width:calc(100% - 130px);}
	.lolb_ctrl > dl dd .ctrl_cont,
	.lolb_ctrl > dl dd a {width:30px; height:30px;}
	.lolb_ctrl > dl dd a:before {width:30px; height:30px; background-color:#edf0f4; border-radius:10px;}
	.lolb_ctrl > dl dd a.ctrl_prev:before {background-position:-3px -3px;}
	.lolb_ctrl > dl dd a.ctrl_stop:before {background-position:-39px -3px;}
	.lolb_ctrl > dl dd a.ctrl_next:before {background-position:-74px -3px;}
	.lolb_ctrl > dl dd a.ctrl_play:before {background-position:-110px -3px;}
}

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

@media screen and (max-width:920px) {
	.section06 .inner {padding:0 25px;}
	
	.lolbn > ul li {margin-right:20px;}
	

}
@media screen and (max-width:767px) {
	.section06 .inner {padding:0 20px;}
	
	
}
@media screen and (max-width:640px) {
}

@media screen and (max-width:480px) {
	.lolbn > ul li {margin-right:15px;}
}
 
 
 
 
 

/********************************
 section07
 *******************************/
 
.section07 {background-color:#f8f8f8;}
.section07 .inner {padding:25px 0;}
 
.site_list {position:relative; display:flex; justify-content:space-between; gap:20px;}
.site_list .site_item {display:flex; position:relative; width:25%; border:1px solid #ddd; border-radius:10px; background-color:#fff;}
.site_list .site_show {display:block; position:relative; width:100%; padding:15px 50px 15px 18px; color:#666; border-radius:0 0 5px 5px; font-size:1.8rem; text-align:left;}
.site_list .site_show:before {content:''; display:block; position:absolute; top:0; right:18px; bottom:0; margin-top:auto; margin-bottom:auto; width:15px; height:9px; background: url(../images/foot_arrowB.png) no-repeat;  transform:rotate(0deg); transition:transform 0.2s ease;}
.site_list .site_item.active .site_show:before {background:url(../images/foot_arrow.png) 0 0 no-repeat; transform:rotate(180deg); transition:transform 0.2s ease;}

.site_list .site_panel {display:none; position:absolute; bottom:100%; left:0; width:100%; padding:1px; border-color:transparent; background-image:linear-gradient(#fff, #fff), linear-gradient(309deg, #a6dc6e 5%, #88cb5a 30%, #61b341 65%, #0e8e0e 90%); background-origin:border-box; background-clip:content-box,border-box; border-top-right-radius:20px; transition-property:background-image, color; transition-duration:250ms; transition-timing-function:ease-in-out;}
.site_list .site_ul {padding:14px 10px 10px 15px;}
.site_list .site_li {position:relative; padding-left:12px;}
.site_list .site_li:before {content:''; display:block; position:absolute; top:15px; left:0; width:6px; height:1px; background-color:#8c8c8c;}
.site_list .site_li:hover:before {background-color:#000;}
.site_list .site_anchor {color:#666; line-height:26px; letter-spacing:-0.025em; font-size:1.6rem;}
.site_list .site_li:hover .site_anchor {color:#000;}

/* 활성화 */
.site_list .site_item.active {border:none;}
.site_list .site_item.active .site_show {
    background:#0e8e0e; /* Old browsers */
    background:-moz-linear-gradient(45deg, #0e8e0e 5%, #61b341 40%, #88cb5a 75%, #a6dc6e 90%); /* FF3.6-15 */
    background:-webkit-linear-gradient(45deg,  #0e8e0e 5%,#61b341 40%,#88cb5a 75%,#a6dc6e 90%); /* Chrome10-25,Safari5.1-6 */
    background:linear-gradient(120deg, #0e8e0e 5%, #61b341 40%, #88cb5a 75%, #a6dc6e 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color:#fff;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#203274', endColorstr='#33a7d9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.site_list .site_item.active .site_panel {}

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

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

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

@media screen and (max-width:920px){
	.section07 .inner {padding:20px 25px;}
	
	.site_list {flex-wrap:wrap; gap:15px;}
	.site_list .site_item {width:calc(50% - 8px);}
}

@media screen and (max-width:767px){
	.section07 .inner {padding:20px;}
}

@media screen and (max-width:640px){
	.site_list .site_show {padding:12px 50px 12px 15px; font-size:1.6rem;}
}

@media screen and (max-width:480px){
	.site_list {gap:10px;}
	.site_list .site_item {width:100%;}
}
 

/* 레이어 팝업 */
#divpop{position:absolute;left:0px; top:8%; border:0px solid #747474;width:100%; max-width:360px;z-index:5000;background:#fff;
box-shadow:0 3px 0 rgba(0,0,0,0.24)
,0 4px 1px -3px rgba(0,0,0,0.32)
,0 1px 6px 0 rgba(0,0,0,0.5);
}

#divpop .popImg img{width:100%; max-width:360px;}
#divpop .close{height:auto; height:30px; min-width:30px;color:#fff;text-align:right;background:#222; padding:5px 10px 0px 0px;}
#divpop input{width:20px;}