@charset "utf-8";
@import url("/include/css/common/default.css");
@import url("/include/css/common/common.css");
@import url("/include/css/common/button.css");
@import url("/include/css/common/board.css");
@import url("layout.css");
@import url("/include/css/common/contents.css");

/* 연혁 */
.historyList {overflow:hidden; position:relative;}
.historyList::before {content:""; display:block; position:absolute; top:10px; left:95px; bottom:13px; border-left:1px solid #9fb2d3;}
.historyList li {overflow:hidden; position:relative; padding-left:100px; }
.historyList li + li {margin-top:20px;}
.historyList .year {position:absolute; left:0; top:0; min-width:100px; font-size:1.563em; line-height:1; font-weight:400; color:#3780ca; background:url(/include/image/reading/contents/bul_history.png) no-repeat right center;}
.historyList li dl {overflow:hidden; position:relative; font-size:1.125em;}
.historyList li dl dt {position:absolute; left:0; top:0; min-width:48px; padding-left:30px; color:#333;}
.historyList li dl dd {color:#777;}

/* 도서관현황 */
.libStatus {border-top:2px solid #666}
.libStatus > li {position:relative;min-height:170px;padding:30px 0;border-bottom:1px solid #e2e2e2}
.libStatus .thumb {position:absolute;top:30px;left:0;width:340px;height:170px;background:#eee url("/include/image/common/noimg_smlib.png") center center no-repeat}
.libStatus .cont {margin-left:365px}
.libStatus .title {font-size:1.25em;font-weight:300;line-height:1.2;margin-bottom:10px}
.libStatus.small > li {min-height:230px}
.libStatus.small .thumb {height:230px}


/* 올해의책 투표하기 */
.vote_wrap {margin-left: -20px; padding-bottom: 30px; position: relative}
.vote_wrap .list {float: left; width: calc(25% - 20px); margin-left: 20px}
.vote_wrap .list > a {display: block;}
.vote_wrap .text_wrap .title{font-size: 18px; font-weight: 800; margin-top: 15px;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;}
.text_wrap p {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.text_wrap p strong {margin-right: 5px; color: #777; font-weight: 600}
.vote_wrap .list .img{position: relative; padding-top: 140%; box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);}
.vote_wrap .list .img.no_shadow {box-shadow: none;}
.vote_wrap .list .img img {position: absolute;left: 0;top: 0;width: 100%;height:100%;}
.line {height: 1px; background: #dedede}

/* 올해의책 투표하기 상세 팝업*/
.vote_layer_pop {width: 885px; background: #fff; position: fixed; z-index: 999; top: 50%; left: 50%; margin-left: -442.5px; top: 150px; box-sizing: border-box; border: 1px solid #ddd; display: none}
.vote_layer_pop {padding: 40px 50px 60px 50px}
.vote_layer_pop .layer_container {margin-top: 30px}
.vote_layer_pop .adu_part {display: inline-block; background: #013595; padding: 5px 15px; color: #fff; border-radius: 20px; font-size: 20px}
.vote_layer_pop .img {float: left; width: 40%; box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);}
.vote_layer_pop .img.no_shadow {box-shadow: none;}
.vote_layer_pop .img  img{width: 100%}
.vote_layer_pop .cont {float: left; width: 54%; margin-left: 40px}
.vote_layer_pop .cont p strong {margin-right: 10px; font-weight: 600;}
.vote_layer_pop .cont .title {font-size: 25px; font-weight: 600; margin-bottom: 20px}
.vote_layer_pop .cont .txt {margin-top: 20px; max-height: 300px; overflow-y: auto}
.vote_layer_close {position: absolute; top: 40px; right: 50px}

/* 독서3종경기 - 참가신청 */
.managing-group-wrap {margin-top: 40px;}
.managing-group > li ~ li {margin-top: 10px;}
.managing-group .mg-box {box-sizing: border-box; position: relative; display: flex; align-items: center; width: 100%; padding: 12px 140px 12px 20px; background-color: #f8f8f8;}
.managing-group .mg-box .select-area {flex: none; display: flex; align-items: center; flex-wrap: wrap; margin: -4px -8px;}
.managing-group .mg-box .select-area dl {flex: none; display: flex; align-items: center; padding: 4px 8px;}
.managing-group .mg-box .select-area dl dt {flex: none; margin-right: 8px;}
.managing-group .mg-box .select-area dl dd {flex: none; display: flex; align-items: center;}
.managing-group .mg-box .btn {height: 36px;}
.managing-group .mg-box .btn-area {position: absolute; right: 20px; top: 50%; transform: translateY(-50%); flex: none; display: flex; align-items: center;}
.managing-group .mg-box .btn-area .btn.cncl {border: 1px solid #dadada;}
.managing-group .mg-box input[type='text'], .managing-group .mg-box select {width: 120px;}
.managing-group .btn-add-row {display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; padding: 12px 20px; border: 1px solid #ccc; background-color: #fff; text-align: center; font-weight: 500; color: #333;}
.managing-group .btn-add-row:before {content: ""; display: block; width: 12px; height: 12px; margin-right: 4px; background: url("/include/image/button/btn_more.png") no-repeat 50% 50%;}
.managing-group .btn-add-row:hover {background-color: #fafafa; border-color: #999;}

/* 독서3종경기 - 완주자현황 */
.rank-list-wrap {box-sizing: border-box; width: 100%; margin-top: 30px; margin-bottom: 20px;}
.rank-list-wrap * {box-sizing: border-box;}
.rank-list-wrap .rank-head {display: flex; width: 100%; height: 52px; border-top: 2px solid #666; border-bottom: 1px solid #666; font-weight: 500;}
.rank-list-wrap .rank-list {width: 100%;}
.rank-list-wrap .rank-list > ul > li {flex: none; display: flex; width: 100%; height: 50px; border-bottom: 1px solid #e4e4e4;}
.rank-list-wrap .rank-data {flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; padding: 4px; line-height: 1.2; font-size: 1.0625em; text-align: center;}
.rank-list-wrap .rank-data small {font-weight: 400; font-size: 0.875em;}
.rank-list-wrap .rank-list > ul > li:nth-child(1) .number, .rank-list-wrap .rank-list > ul > li:nth-child(2) .number, .rank-list-wrap .rank-list > ul > li:nth-child(3) .number {overflow: hidden; display: block; width: 40px; height: 40px; text-indent: -9999px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto;}
.rank-list-wrap .rank-list > ul > li:nth-child(1) .number {background-image: url("/include/image/reading/contents/ico_rank_1.png");}
.rank-list-wrap .rank-list > ul > li:nth-child(2) .number {background-image: url("/include/image/reading/contents/ico_rank_2.png");}
.rank-list-wrap .rank-list > ul > li:nth-child(3) .number {background-image: url("/include/image/reading/contents/ico_rank_3.png");}

/* 마이페이지 독서 마라톤 현황 */
.reading-status * {box-sizing: border-box;}
.reading-status .innerBox {display: block; width: 100%; padding: 92px 30px 32px; background-color: #fff;}
.reading-status .innerBox.status-graph-wrap {}
.reading-status .status-graph {position: relative; left: auto; top: 0; width: 100%; max-width: 850px; margin-left: auto; margin-right: auto;}
.reading-status .status-graph.bg-ruler {padding-top: 50px;}
.reading-status .status-graph.bg-ruler:before {content: ""; position: absolute; left: 0; bottom: 20px; display: block; width: calc(100% + 1px); height: 40px; background: url("/include/image/reading500/contents/bg_status_marking.png") no-repeat left 0 bottom 0; background-size: 100% 100%;}
.reading-status .status-graph .status-bar-wrap {position: relative; width: 100%; height: 8px; border-radius: 4px; background-color: #ceebd3;}
.reading-status .status-graph .status-bar-wrap .status-bar {position: relative; width: 0; min-width: 8px; height: 8px; border-radius: 4px; background-color: transparent; transition: width 1s ease-in-out;}
.reading-status .status-graph .status-bar-wrap .status-bar .status-info-box {position: absolute; right: -50px; bottom: 40px; display: flex; align-items: center; justify-content: center; width: 100px; height: 60px; padding: 12px; border-radius: 8px; background-color: #339143;}
.reading-status .status-graph .status-bar-wrap .status-bar .status-info-box:after {content: ""; position: absolute; left: calc(50% - 6px); bottom: -8px; display: block; width: 0; height: 0; border-top: 8px solid #339143; border-left: 6px solid transparent; border-right: 6px solid transparent;}
.reading-status .status-graph .status-bar-wrap .status-bar .status-info-box dl {flex: none; text-align: center; font-weight: 400; color: #fff; line-height: 1.2;}
.reading-status .status-graph .status-bar-wrap .status-bar .status-info-box dl > dd {margin-top: 4px;}
.reading-status .status-graph .status-bar-wrap .status-bar .status-character {z-index: 1; position: absolute; left: calc(50% - 24px); bottom: -56px; display: block; width: 48px; height: 48px;}
.reading-status .status-graph .status-marking {position: absolute; left: 0; bottom: 0; width: 100%;}
.reading-status .status-graph .status-marking .marking {position: absolute; left: 0; top: -4px; display: block; padding-top: 16px; text-align: center; font-size: 1.125em; line-height: 1.1; transform: translateX(-50%);}
.reading-status .status-graph .status-marking .marking:before {content: ""; position: absolute; left: calc(50% - 8px); top: -8px; display: block; width: 10px; height: 10px; background-color: #fff; border: 3px solid #339143; border-radius: 50%;}
.reading-status .status-graph .status-marking .marking:nth-child(2) {left: 50%;}
.reading-status .status-graph .status-marking .marking:nth-child(3) {left: 100%;}
.reading-status .status-table {position: relative; width: 100%; min-height: 110px; margin-top: 60px; padding: 32px 0 32px 180px; background-color: #f7f7f7;}
.reading-status .status-table dt {position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 180px; height: 100%; text-align: center; font-size: 1.375em; color: #555; font-weight: 500;}
.reading-status .status-table dt:after {content: ""; position: absolute; right: 0; top: 32px; bottom: 32px; display: block; width: 1px; background-color: #d7d7d7;}
.reading-status .status-table dd {display: flex; padding: 0 50px;}
.reading-status .status-table dd [class*='-list'] {flex: 1;}
.reading-status .status-btn-area {display: flex; margin-top: 12px;}
.reading-status .status-btn-area .left, .reading-status .status-btn-area .right {display: flex;}
.reading-status .status-btn-area .right {margin-left: auto;}
.reading-status .status-btn-area .btn {display: flex; justify-content: center; align-items: center;}

.reading-apply-info {box-sizing: border-box; display: flex; gap: 20px; width: 100%; padding: 32px 40px; background-color: #f1f1f1;}
.reading-apply-info * {box-sizing: border-box;}
.reading-apply-info .item {width: 50%;}
.reading-apply-info .item .stitle {font-size: 1.1875em;}
.reading-apply-info .item .box {height: calc(100% - 34px); padding: 32px; background-color: #fff;}
.reading-apply-info + [class*='-list'] {margin-top: 12px;}
.reading-character {display: flex; gap: 5px; width: 100%; margin-top: 24px;}
.reading-character * {box-sizing: border-box;}
.reading-character > li {flex: 1;}
.reading-character .character-box {overflow: hidden; width: 100%;}
.reading-character .character-box input[type='radio'] {position: absolute; left: -9999px;}
.reading-character .character-box label {display: flex; justify-content: center; align-items: center; width: 100%; height: 120px; background-color: #f8f8f8; border: 1px solid #d5d5d5; cursor: pointer;}
.reading-character .character-box label img {display: block;}
.reading-character .character-box input[type='radio']:checked + label {border-color: #999; border-width: 2px; background-color: #fff;}

/* 나의활동 - 독서마라톤 활동정보 - 나의독서기록장 */
.record-read-guide {margin: 20px 0 36px;}

@media screen and (max-width:1000px){
	.libStatus > li {min-height:120px}
	.libStatus .thumb {width:240px;height:120px}
	.libStatus .cont {margin-left:255px}
	.libStatus.small > li {min-height:160px}
	.libStatus.small .thumb {height:160px}

	/* 독서3종경기 - 참가신청 */
	.managing-group .mg-box {display: block;}

	/* 마이페이지 독서 마라톤 현황 */
	.reading-status .innerBox {padding-left: 20px; padding-right: 20px;}
	.reading-status .status-graph {width: calc(100% - 60px);}
	.reading-status .status-table {padding-left: 120px; padding-top: 24px; padding-bottom: 24px;}
	.reading-status .status-table dt {width: 120px;}
	.reading-status .status-table dd {padding: 0 20px;}
	.reading-apply-info {padding: 24px 30px;}
	.reading-apply-info .item .box {padding: 24px;}
}
@media screen and (max-width:800px){

	.vote_layer_pop {width: 100%; top: 100px; left: 0; margin-left: 0; }

	.vote_layer_pop .cont {margin-left: 30px}

	.rank-list-wrap {margin-top: 20px; margin-bottom: 12px;}

	/* 마이페이지 독서 마라톤 현황 */
	.reading-status .innerBox {padding-top: 100px;}
	.reading-status .status-graph.bg-ruler {padding-top: 42px;}
	.reading-status .status-graph.bg-ruler:before {height: 32px; background-image: url("/include/image/reading500/contents/bg_status_marking_landscape.png");}
	.reading-status .status-graph .status-bar-wrap .status-bar .status-info-box {right: -50px; width: 100px; height: 68px; }
	.reading-status .status-graph .status-bar-wrap .status-bar .status-info-box dl {font-size: 1.125em;}
	.reading-status .status-table {margin-top: 48px; padding: 20px;}
	.reading-status .status-table dt {position: static; display: block; width: 100%; height: auto; text-align: left;}
	.reading-status .status-table dt:after {display: none;}
	.reading-status .status-table dd {display: block; padding: 0; margin-top: 8px;}
	.reading-apply-info {display: block; padding: 20px;}
	.reading-apply-info .item {width: 100%;}
	.reading-apply-info .item ~ .item {margin-top: 20px;}
	.reading-apply-info .item .box {height: auto; padding: 16px 20px;}
	.reading-status .status-btn-area {display: block; margin-top: 8px;}
	.reading-status .status-btn-area .left + .right {margin-top: 4px;}
	.reading-status .status-btn-area .btn {flex: 1; padding-left: 5px; padding-right: 5px;}

	/* 나의활동 - 독서마라톤 활동정보 - 나의독서기록장 */
	.record-read-guide {margin: 16px 0 30px;}

}


@media screen and (max-width:640px){
	.historyList::before {left:80px;}
	.historyList li {padding-left:85px;}
	.historyList li + li {margin-top:10px;}
	.historyList .year {min-width:85px;}
	.historyList li dl + dl {margin-top:5px;}
	.historyList li dl dt {padding-left:20px;}
	.historyList li dl dd {padding-left:82px;}
	
	.libStatus > li {min-height:inherit}
	.libStatus .thumb {position:relative;top:inherit;left:inherit;width:auto;height:auto;padding-top:50%}
	.libStatus .thumb img {position:absolute;top:0;left:0;width:100%;height:100%}
	.libStatus .cont {margin-left:0;margin-top:20px}
	.libStatus.small .thumb {height:auto;padding-top:67%}

	.vote_wrap {margin-left: -20px}
	.vote_wrap .list {float: left; width: calc(50% - 20px); margin-left: 20px; margin-top: 20px}
	
	.vote_wrap .list > a {display: block}
	.vote_wrap .text_wrap .title{font-size: 18px; font-weight: 800; margin-top: 15px}
	.vote_layer_pop .cont {margin-left: 20px}
	.vote_layer_pop {padding: 30px 40px 50px 40px;}

	/* 독서3종경기 - 참가신청 */
	.managing-group-wrap {margin-top: 30px;}
	.managing-group .mg-box {padding: 12px 16px;}
	.managing-group .mg-box .select-area {display: block; margin: 0;}
	.managing-group .mg-box .select-area dl {display: block; padding: 0;}
	.managing-group .mg-box .select-area dl ~ dl {margin-top: 8px;}
	.managing-group .mg-box input[type='text'], .managing-group .mg-box select {width: 100%;}
	.managing-group .mg-box .btn-area {position: static; transform: none; justify-content: flex-end; margin-top: 8px;}
	.managing-group .mg-box .select-area .btn {box-sizing: border-box; display: block; width: 100%; margin: 8px auto 0;}
	.managing-group .btn-add-row {height: 48px;}

}
@media screen and (max-width:480px){
	.historyList::before {bottom:34px;}
	.historyList li dl dt {position: relative;}
	.historyList li dl dd {padding-left:20px;}
	.vote_layer_pop .cont {margin-left: 10px}
	.vote_layer_pop .cont .title {margin-bottom: 5px; font-size: 20px}
	.vote_layer_pop .cont .txt {max-height: 150px; margin-top: 5px}

	/* 독서3종경기 - 참가신청 */

	/* 마이페이지 독서 마라톤 현황 */
	.reading-status .innerBox {padding: 80px 16px 20px;}
	.reading-status .status-graph {}
	.reading-status .status-graph.bg-ruler:before {bottom: 16px; height: 24px; background-image: url("/include/image/reading500/contents/bg_status_marking_portrait.png");}
	.reading-status .status-graph .status-bar-wrap {height: 8px; border-radius: 4px;}
	.reading-status .status-graph .status-bar-wrap .status-bar {min-width: 8px; height: 8px; border-radius: 4px;}
	.reading-status .status-graph .status-bar-wrap .status-bar .status-info-box {right: -40px; bottom: 28px; width: 80px; height: 52px; padding: 8px;}
	.reading-status .status-graph .status-bar-wrap .status-bar .status-info-box:after {left: calc(50% - 5px); bottom: -5px; border-top-width: 5px; border-left-width: 5px; border-right-width: 5px;}
	.reading-status .status-graph .status-bar-wrap .status-bar .status-character {left: calc(50% - 18px); bottom: -40px; width: 36px; height: 36px;}
	.reading-character .character-box label {height: 80px;}
	.reading-character .character-box label img {width: 40px;}

	/* 나의활동 - 독서마라톤 활동정보 - 나의독서기록장 */
	.record-read-guide {margin: 12px 0 24px;}

}
@media screen and (max-width:375px){
	.libraryInfoList .top span {display:block}
}

@media screen and (min-width:640px){
	.historyList li dl + dl {margin-top:13px;}
	.historyList li dl dt {min-width:48px; padding-left:30px;}
	.historyList li dl dd {padding-left:108px;}
}
@media screen and (min-width:800px){
}
@media screen and (min-width:1001px){
}