@charset "utf-8";
#container > .wrap02{position: relative;}

/* 비주얼 */
.vis_wrap{max-width: 1660px;background: linear-gradient(90deg, #e2e9f9, #f0f4fd, #e8edff); border-radius: 50rem 50rem 50rem 100rem; position: relative;}
.vis_wrap::before{position: absolute; content: ""; background: url('../img/main/vis_bg.png') no-repeat right top; width: 110px; height: 155px; right: 0; top: 0;}
.vis_wrap::after{position: absolute; content: ""; background: url('../img/main/vis_bg02.png') no-repeat right bottom; width: 763px; height: 267px; right: 0; bottom: 0;}

.map_wrap{display: flex;}
.lib_map{width: 850rem; height: 581px; position: relative; margin-left: 100rem; background: url('../img/main/map_line.png') no-repeat center center / contain;}
.lib_map::before, .lib_map::after{position: absolute; content: '';}
.lib_map::before{background: url('../img/main/map01.png') no-repeat center center / contain; width:100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.lib_map.map02::before{background-image: url('../img/main/map02.png');}
.lib_map.map03::before{background-image: url('../img/main/map03.png');}
.lib_map.map04::before,
.lib_map.map05::before,
.lib_map.map06::before,
.lib_map.map07::before,
.lib_map.map11::before{background-image: url('../img/main/map04.png');}
.lib_map.map08::before{background-image: url('../img/main/map05.png');}
.lib_map.map09::before{background-image: url('../img/main/map06.png');}
.lib_map.map10::before{background-image: url('../img/main/map07.png');}


.lib_map li{position: absolute;}
.lib_map li a{display: block; text-align: center; padding-top: 40rem;}
.lib_map li a span{display: none; font-size: 15rem; color: #6d88af; font-family: 'MICEGothic'; font-weight: 600; position: absolute; left: 50%; transform: translateX(-50%); }
.lib_map li a::before{position: absolute; content: ''; width: 32rem; height: 40rem; background: url('../img/main/mark_basic.png') no-repeat center center / 100%; left: 50%; transform: translateX(-50%); top: 0;}

.lib_map li a:hover span{display: block; }
.lib_map li a:hover::before{background-image: url('../img/main/mark_hover.png');}
.lib_map li a.on::before{background-image: url('../img/main/mark_on.png'); width: 48px; height: 55px; top: -23px;}
.lib_map li a.on span{display: inline-block; color: #fff; padding: 2rem 14rem; background: #223465; border-radius: 50rem; z-index: 10;}

.lib_map li.map01{left: 27%; top: 35%;}
.lib_map li.map02{left: 15%; top: 20%;}
.lib_map li.map03{left: 45%; top: 40%;}
.lib_map li.map04{left: 58%; top: 42%;}
.lib_map li.map05{left: 63%; top: 43%;}
.lib_map li.map06{left: 58%; top: 54%;}
.lib_map li.map07{left: 63%; top: 53%;}
.lib_map li.map08{left: 71%; top: 30%;}
.lib_map li.map09{left: 59%; top: 69%;}
.lib_map li.map10{left: 49%; top: 59%;}
.lib_map li.map11{left: 60%; top: 48%;}
.lib_map li.map12{left: 60%; top: 29%;}

.lib_right{position: relative; width: 536rem; margin: 20rem 20rem 0 100rem;}
.lib_cont dl{display: none; background: #fff; position: relative; border-radius: 30rem 30rem 50rem 30rem; max-height: 370rem; width:100%; padding: 20rem; box-shadow: 3px 3px 13px #cdd2e5;}
.lib_cont dl.on{display: block;}
.lib_cont dl dt{height: 180rem; width: 100%; position: relative;}
.lib_cont dl dt img{border-radius: 20rem; width: 100%; height: 100%;}
.lib_cont dl dt span{position: absolute; bottom: 0; left: 0; color: #fff; display: inline-block; padding: 6rem 33rem; background: #223465; border-radius: 0 20rem; font-family: 'MICEGothic'; font-weight: 600; font-size: 22rem;}
.lib_cont dl dd{margin: 16rem 10rem; max-height: 136rem; overflow-x: auto;}
.lib_cont dl dd ul li{padding-left: 100rem; position: relative; font-size: 17rem; margin: 4rem 0;}
.lib_cont dl dd ul li strong{display: inline-block; position: absolute; left: 0; width: 100rem; color: #373737; font-family: 'MICEGothic'; padding-left: 16rem;}
.lib_cont dl dd ul li strong::before{position: absolute; content: ""; width: 4px; height: 4px; border-radius: 50rem; left: 0; top: 10px; background: #d4dee7;}

.announce{position: absolute; color: #253c62; left: 90rem; bottom: 40rem; font-weight: 500; font-size: 18rem; padding-left: 36rem;}
.announce::before{position: absolute; content: ""; background: url('../img/main/vis_ana.png') no-repeat center center / contain; left: 0; top: 0; width: 22px; height: 30px;}
.announce span{font-weight: 700; font-family: 'MICEGothic';}

/* 도서검색 */
.lib_search{position: absolute; width: 536rem; right: 66rem; bottom: 15rem; z-index: 1;}
.lib_search h2{color: #293c5d; font-weight: 700; font-family: 'MICEGothic'; font-size: 23rem; padding-left: 40rem; position: relative; margin: 0 0 17rem 42rem;}
.lib_search h2::before{position: absolute; content: ""; left: 0; top: 0; background: url('../img/main/search_tit.png') no-repeat; width: 33rem; height: 34rem;}
.lib_search #search{display: flex; line-height: 54px;}
.lib_search #search form{width: 78%; border: 2px solid #293c5d; background: #fff; border-radius: 50rem; padding: 0px 25rem 0 35rem; height: 100%;}
.lib_search #search form > div{display: flex; justify-content: space-between;}
.lib_search #search form input[type = "text"]{border: none; width: 100%;}
.lib_search #search form input::placeholder{color: #919191; font-weight: 300;}
.lib_search #search form .search_btn{text-indent: -9999px; display: block; background: url('../img/main/search.png') no-repeat center center / contain; width: 30rem;}

/* 상세검색 */
.lib_search #search a.d_search{display: block; color: #fff; background: #293c5d; border-radius: 50rem; border: 2px solid #293c5d; width: 23%; text-align: center; font-weight: 700; font-family: 'MICEGothic'; font-size: 20rem; margin-left: 10rem;}


/* 퀵 */
/* .quick_wrap{position: absolute; right: 18rem; top: 0; width: 100rem; } */
.quick_wrap{position: fixed; top: 100rem; width: 100rem; margin-left: 1700rem; transition: 0.3s;}
.quick_wrap.on{top: 30rem;}
.quick_wrap .quick{background: #3e61bc; border-radius: 50rem; padding: 10rem 0;}
.quick_wrap .quick li{border-bottom: 1px solid rgba(255, 255, 255, 0.14);}
.quick_wrap .quick li:last-child{border: none;}
.quick_wrap .quick li a{color: #fff; padding: 61rem 0 14rem 0; display: block; text-align: center; font-size: 15rem; font-weight: 600; position: relative;}
.quick_wrap .quick li a::before{position: absolute; content: ""; background: url('../img/main/quick.png') no-repeat; width: 31rem; height: 30rem; top: 25px; left: 50%; transform: translateX(-50%);background-position-x: 2px;}
.quick_wrap .quick li:nth-child(1) a::before{width: 29rem; background-position-x: 0;}
.quick_wrap .quick li:nth-child(2) a::before{background-position-x: -30px;}
.quick_wrap .quick li:nth-child(3) a::before{background-position-x: -61px;}
.quick_wrap .quick li:nth-child(4) a::before{background-position-x: -90px;}

a.saseo{display: block; width: 100%; text-align: center; font-size: 16rem; font-weight: 600; line-height: 1.3; position: relative; padding-top: 110rem; margin-top: 20rem;}

a.saseo::before{position: absolute; content: ""; width: 100rem; height: 100rem; border: 2px solid #fff; background: #e8eeff url('../img/main/ask_saseo.png') no-repeat center bottom; top: 0; left: 0; border-radius: 50em; box-shadow: 3px 3px 10px rgba(0,0,0,0.1);}

@media all and (max-width:1810px){
    #container > .wrap02{max-width: 1615rem;}
    .map_wrap{justify-content: space-between;}
    .lib_map{margin-left: 50rem; width: 800rem;}
    .lib_right{margin-left: 0;}

    .lib_search{right: 1%;}
    .lib_search::after{width: 707px; height: 279px;right: -21px;bottom: -16px;}
  
    .quick_wrap{width: 80rem; margin-left: 0; right: 0;}
  }
  @media all and (max-width:1720px){
    .lib_right,     
    .lib_search{width: 560rem;}
    .quick_wrap{display: none;}
  }
  @media all and (max-width:1530px){
    .vis_wrap::after{width: 700rem; background-size: 100%;}
    .lib_map{background-image: none; width: 736rem; height: 550rem; margin-left: 30rem;}
    .lib_cont dl{max-height: 355rem;}
    .lib_cont dl dd{margin: 14rem 10rem;}
    .lib_cont dl dd ul li{font-size: 16rem;}

    .announce{left: 40rem; bottom: 30rem; font-size: 16rem;}
}  
@media all and (max-width:1320px){
    .vis_wrap::after{width: 642rem; height: 187rem;}
    .lib_map{height: 480rem;}
    .lib_right{margin-top: 70rem; width: 510rem;}
    .lib_search{width: 41%;}
    .lib_cont dl dt{height: 0;}
    .lib_cont dl dt img{display: none;}
    .lib_cont dl dt span{border-radius: 50rem; font-size: 19rem;}
    .lib_cont dl dd{max-height: 157rem;}
    .lib_search h2{font-size: 21rem; margin: 0 0 10rem 42rem;}
    .lib_search #search{line-height: 45px;}
}
@media all and (max-width:1180px){
    .vis_wrap::after{width: 609rem;}
    .lib_map li a{padding-top: 24rem;}
    .lib_map li a::before{width: 26rem; height: 31rem;}
    .lib_map li a.on::before{width: 35px; height: 43px;}
    .lib_map li a.on span{font-size: 15rem; padding: 1rem 10rem;}
}
@media all and (max-width:1118px){
    .vis_wrap::after{width: 580rem;}
    .lib_map {height: 467rem;}
    .lib_search #search{line-height: 40px;}
}
@media all and (max-width:1076px){
    .vis_wrap::after{width: 540rem;}
    .lib_map{height: 428rem;}
    .lib_search h2{margin: 0 0 3rem 10rem; padding-left: 0;}
    .lib_search h2::before{display: none;}
    .lib_search #search{line-height: 38px;}
    .lib_right{margin-top: 56rem;}
}
@media all and (max-width:1020px){
    .vis_wrap{background: none;}
    .vis_wrap::after{display: none;}
    .map_wrap{background: linear-gradient(90deg, #e2e9f9, #f0f4fd, #e8edff); border-radius: 50rem; align-items: center; margin-top: 120rem;}
    .lib_right{margin-top: 0;}
    .lib_search{position: absolute; width: 100%; height: 100rem; top: -114rem; background: #fff; right: inherit; }
    .announce{display: none;} 
}
@media all and (max-width:985px){
    .map_wrap{flex-wrap: wrap; justify-content: center;}
    .lib_map{text-align: center; height: 140rem; width: 100%; margin: 30rem 20rem 0 20rem;}
    .lib_map li{display: inline-block; width: 23%; margin-right: 5rem; position: inherit; left: inherit !important; top: inherit !important; height: 36px;}
    .lib_map li:nth-child(3n){margin-right: 0;}
    .lib_map li a{padding-top: 0; width: 100%;}
    .lib_map li a::before{display: none;}
    .lib_map li a span{display: block; width: 100%; border-radius: 50rem; line-height: 36px; border-radius: 50rem !important; background: #fff; font-size: 16rem !important; border: 1px solid #d2dae5;}
    .lib_map::before{display: none;}

    .lib_right{width: 100%; margin: 20rem;}
    .lib_cont dl dt{height: 40rem;}
    .lib_cont dl dt span{padding: 3rem 33rem;}
}

@media all and (max-width:540px){
    .lib_map{height: auto;}
    .lib_map li{width: 30%; height: 32px;}
    .lib_map li a span{line-height: 32px;}
}

@media all and (max-width:470px){
    .lib_map{height: auto;}
    .lib_map li{width: 48%; height: 32px; margin-right: 0;}
    .lib_map li a span{line-height: 32px;}
    .lib_search #search a.d_search{font-size: 18rem;}
}

/* 프로그램 소개 */
.program{position: relative; align-items: center; margin-top: 62rem; height: 400rem;}
.program h2{float: left; font-size: 30rem; font-family: 'MICEGothic'; font-weight: 700;}
.program h2 span{color: #223465;}

.program .more{float: left; display: block; text-indent: -99999px; width: 34rem; height: 34rem; background: url('../img/main/more.png') no-repeat center center / 100%; margin: 5rem 0 0 16rem;}

.pro_tab{float: left; display: flex; align-items: center; margin-left: 40rem;}
.pro_tab > li > a{display: block; color: #343434; font-weight: 400; font-size: 18rem; font-family: 'MICEGothic'; padding: 2rem 16rem; margin-right: 6rem;}
.pro_tab > li.on > a{color: #293c5d; font-weight: 700; border: 1px solid #293c5d; border-radius: 50rem;}

.pro_list{display: none; width: 100%; position: absolute; top: 72rem; left: 0; overflow: hidden;}
.pro_tab > li.on .pro_list{display: block;}
.pro_list a{display: block; width: calc((100% - 90rem) / 4); height: 300rem; background: #f8f9fd; border-radius: 30rem; border: 1px solid #ebeefb; box-shadow: 4px 2px 12px #f1f1f9; position: relative;}
/* .pro_list a:last-child{margin-right: 0;} */

.pro_list a > span{background: #3e61bc; color: #fff; display: block; width: 100%; position: absolute; bottom: 0; left: 0; text-align: center; font-size: 19rem; padding: 10rem; font-weight: 600; border-radius: 0 0 30rem 30rem;}

.pro_list a dl{padding: 24rem 33rem;}
.pro_list a dl dt{border-bottom: 1px dashed #c9cfeb;}
.pro_list a dl dt .name{display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 5rem;}
.pro_list a dl dt .name em{color: #314ca5; position: relative; display: block; padding-left: 28rem; font-size: 17rem;}
.pro_list a dl dt .name em::before{position: absolute; content: ""; background: url('../img/main/program_icon.png') no-repeat; width: 21rem; height: 20rem; left: 0; top: 3px;}

.pro_list a dl dt .name b{font-size: 18rem;}
.pro_list a dl dt .name b.waiting {color: #1c6c48;}
.pro_list a dl dt .name b.ongoing {color: #f84c4f;}
.pro_list a dl dt .name b.closed {color: #626676;}

.pro_list a dl dt .tit{font-size: 22rem; font-weight: 700; color: #2b2b2b; display: block; width: 98%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 10rem;}


.pro_list a dl dd{margin: 21rem 0;}
.pro_list a dl dd ul li{margin: 5rem 0; color: #343434; position: relative; padding-left: 86rem; width: 98%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pro_list a dl dd ul li strong{display: block; padding-left: 13rem; width: 70rem; position: absolute; left: 0; top: 0;}
.pro_list a dl dd ul li strong::before{position: absolute; content: ""; background: #a0afda; width: 3px; height: 3px; border-radius: 50rem; left: 0; top: 50%; transform: translateY(-50%);}
.pro_list a dl dd ul li strong em{margin-right: 28rem;}

.pro_list .slick-slide{margin: 8px 15px;}
.pro_list .slick-list{margin: 0 -8px;}


.pro_list .slick-track, .pro_list .slick-list{margin-left: inherit;}

@media all and (max-width:1000px){
    .pro_list a dl dt .tit{font-size: 20rem;}
    .pro_list .slick-slide{margin: 6px 10px;}
}

/* 접수마감 색깔 */
.pro_list a.end{background: #fafafa; border-color: #e9e9e9;}
.pro_list a.end,
.pro_list a.end dl dt .name em,
.pro_list a.end dl dt .tit,
.pro_list a.end dl dt .name b,
.pro_list a.end  dl dd ul li{color: #999;}
.pro_list a.end dl dt{border-bottom-color: #999;}
.pro_list a.end dl dt .name em::before{background-position-x: -20px;}
.pro_list a.end > span{background: #8f8f8f}

.pro_list .slick-arrow{position: absolute; width: 30rem; height: 30rem; text-indent: -9999px; top: 150rem; background-repeat: no-repeat; border: none; background: transparent; background-size: 100%;} 

.pro_list .slick-prev{left: 0; background-image: url('../img/main/pro_prev.png');  z-index: 10;}
.pro_list .slick-next{right: 0; background-image: url('../img/main/pro_next.png');}

@media all and (max-width:1000px){
    .pro_list a dl dt .tit{font-size: 20rem;}
    .pro_list .slick-slide{margin: 6px 10px;}
}
@media all and (max-width:770px){
    .program{height: 420rem;}
    .pro_tab{width: 100%; position: absolute; top: 60rem; margin-left: 0;}
    .pro_list{top: 0;}
}
@media all and (max-width:535px){
    .pro_tab > li > a{font-size: 17rem; padding: 0 3rem;}
    .pro_tab > li.on > a{border: none; text-decoration: underline;}
}
@media all and (max-width:350px){
    .pro_tab{flex-wrap: wrap;}
    .pro_tab > li > a{font-size: 17rem; padding: 0 3rem;}
    /* .pro_list{top: 67rem;} */
}



.cont02{display: flex; justify-content: space-between; margin-top: 52rem;}
/* 공지사항 */
.notice{width: 54%; position: relative;}
.notice h2{display: inline-block; float: left; font-family: 'MICEGothic'; font-size: 23rem; color: #fff; background: #223465; font-weight: 700; border-radius: 26rem 26rem 0 0; padding: 0 30rem; line-height: 55rem;}
.not_sel{float: left; position: relative;}
.not_sel > a{display: block; min-width: 130rem; line-height: 55rem; color: #223465; font-family: 'MICEGothic'; font-weight: 700; font-size: 18rem; background: url('../img/main/notice_sel.png') no-repeat center right; padding-right: 33rem; margin-left: 30rem;}
.not_sel > ul{display: none; position: absolute; width: 100%; top: 55rem; left: 18rem; background: #fff; background: #f8f9fd; box-shadow: 3px 3px 10px #e3e7ed; z-index: 10; border-radius: 10rem; border: 1px solid #7f858e;}
.not_sel > ul li{ border-bottom: 1px dashed #ddd;}
.not_sel > ul li:last-child{border-bottom: none;}
.not_sel > ul li a{display: block; padding: 6rem 12rem; font-size: 15rem;}
.not_sel > ul li a.txt_on,
.not_sel > ul li a:hover{font-weight: 700; color: #223465; text-decoration: underline;}
.not_sel > a.open + ul{display: block;}



.not_txt{width: 100%; position: absolute; top: 55rem; left: 0;}
.not_txt > ul li{display: none;}
.not_txt > ul li.on{display: block;}

.not_txt .latest > a{display: flex; justify-content: space-between; align-items: center; padding: 24rem 10rem; border-top: 1px solid #ddd; border-bottom: 1px dashed #ddd;}
.not_txt .latest > a .date{width: 100rem; height: 100rem; border-radius: 50rem; text-align: center; border: 4px solid #f1f2f2; line-height: normal; position: relative;}
.not_txt .latest > a .date b{display: block; font-size: 37rem; font-weight: 800; padding-top: 14rem;}
.not_txt .latest > a .date span{display: block; font-size: 16rem; color: #505050;}
.not_txt .latest > a .date .new{display: block; width: 27rem; height: 27rem; background: url('../img/main/new.png') no-repeat center center / 100%; text-indent: -9999px; position: absolute; right: -2px; top: -2px;}

.not_txt .latest > a .detail{width: calc(100% - 130rem);}

.not_txt .detail .d_tit{align-items: center; font-size: 21rem; font-weight: 700; color: #2b2b2b;}
.not_txt .detail .d_txt{display: block; font-size: 18rem; color: #5e5e5e; margin-top: 10rem;}
.not_txt .detail p{width: 98%; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.not_txt .list{margin: 28rem 16rem 0;}
.not_txt .list a{display: block; height: 38rem;}
.not_txt .list a dl{margin: 16rem 0;width: 100%;}
.not_txt .list a dl dt{float: left; display: flex; align-items: center; font-size: 19rem; font-weight: 600; width: 80%;}
.not_txt .list a dl dt span{display: inline-block;width: calc(100% - 100rem);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.not_txt .list a dl dd{font-size: 18rem;color: #828282;width: 17%;float: right;}

.not_txt .lib{width: 80rem; text-align: center;font-size: 17rem;font-weight: 600;color: #2a2a2a;display: inline-block;background: #f0f1f4;border-radius: 50rem;margin-right: 14rem;white-space: nowrap;overflow: hidden;display: inline-block;}
.d_tit > span{width: calc(100% - 100rem); display: inline-block; float: right;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.not_txt .more{position: absolute; top: -47px; right: 0; display: block; text-indent: -99999px; width: 34rem; height: 34rem; background: url('../img/main/more.png') no-repeat center center / 100%; margin: 5rem 0 0 16rem;}


/* 팝업존 */
.popup{width: 42%; margin-top: -20rem;}
.popup > div{display: flex; justify-content: space-between; align-items: center;}
.popup h2{font-size: 30rem; font-family: 'MICEGothic'; font-weight: 700;}

.pop_slide{margin-top: 10rem;}
.pop_slide li a{display: block;}
.pop_slide .slick-slide{margin: 0 15px;}
.pop_slide .slick-list{margin: 0 -15px;}
.pop_slide img{width: 100%; border-radius: 20rem 20rem 40rem 20rem;  border: 1px solid #fff; box-shadow: 3px 3px 14px rgba(0,0,0,0.1); margin: 16rem 0; height: 329rem;}
.pop_btn{display: flex; align-items: center;}
.pop_btn a{text-indent: -9999px; display: block; width: 20px; height: 20px; background: url('../img/main/popup_btn.png') no-repeat;}
.pop_btn a.prev{margin-right: 20rem;}
.pop_btn a.stop{background-position-x: -40px;}
.pop_btn a.play{background-position-x: -60px; display: none;}
.pop_btn a.next{background-position-x: -20px; margin-left: 14rem;}
.pop_btn .pager{margin-right: 8rem;}
.pop_btn .pager .current{position: relative; margin-right: 26rem; color: #ff4c4b; font-weight: 800;}
.pop_btn .pager .current::before{position: absolute; content: ""; background: url('../img/main/popup_btn.png') no-repeat; background-position-x: -82px; width: 20rem; height: 20rem; right: -25px; top: 2px;}

.pop_btn .pager li {display:none;}
.pop_btn .pager li.slick-active {display:block;}

@media all and (max-width:1123px){
    .notice{width: 62%;}
    .popup{width: 34%; margin-top: 0;}
    .not_txt .latest > a .date{width: 96rem; height: 96rem;}
    .not_txt .latest > a .date b{font-size: 30rem;}
}
@media all and (max-width:950px){
    .notice h2{font-size: 21rem; line-height: 46rem; padding: 0 24rem;}
    .not_txt{top: 46rem;}
    .not_txt .list a{height: 32rem;}
    .not_txt .list a dl dt{font-size: 18rem;}
    .not_txt .list a dl dd{font-size: 16rem; width: auto;}
    .pop_slide img{margin-top: 0; height: 370rem;}
}
@media all and (max-width:856px){
    .cont02{flex-wrap: wrap; margin-top: 0;}
    .notice{width: 100%; height: 410rem;}
    .popup{width: 100%;}
}
@media all and (max-width:480px){
    .notice{height: 540rem;}
    .not_txt .latest > a{padding: 18rem 0;}
    .not_txt .latest > a .date{width: 90rem; height: 90rem;}
    .not_txt .latest > a .detail{width: calc(100% - 110rem);}
    .not_txt .list{margin: 23rem 0 0;}
    .not_txt .list a{height: auto;}
    .not_txt .list a dl{display: flex; align-items: flex-start; margin: 16rem 0; padding-bottom: 16rem; border-bottom: 1px solid #ddd;}
    .not_txt .list a dl dt{width: 100%; flex-wrap: wrap;}
    .not_txt .list a dl dt span{width: 100%; margin-top: 10rem;}
    .not_txt .list a dl dd{position: absolute; right: 0; width: auto;}
    .not_txt .detail .d_tit{font-size: 20rem;}
    .pop_slide{padding: 0 10rem;}
    .pop_slide img{height: 400rem; box-shadow: 3px 3px 9px rgba(0,0,0,0.06);}
    .not_txt .more{top: -38px; width: 30rem; height: 30rem;}
}
@media all and (max-width:342px){
    .notice h2{font-size: 19rem; padding: 0 20rem;}
    .not_sel > a{font-size: 17rem; margin-left: 22rem; min-width: 126rem;}
}

/* 도서소개 */
.book{background: linear-gradient(90deg, #deebf5, #eff3fa); border-radius: 50rem; display: flex; padding: 30rem 90rem 94rem 70rem; margin: 113rem 0 50rem 0; font-family: 'MICEGothic'; position: relative;}
.book::before{position: absolute; content: ""; background: url('../img/main/doseo_bg01.png') no-repeat; background-size: contain; width: 173rem; height: 136rem; left: 0; bottom: 40px;}

.book .bo_tab{width: 235rem; margin: 19rem 75rem 0 0;}
.book .bo_tab h2{color: #323232; font-size: 31rem; font-weight: 700; padding: 0 0 13rem 15rem;}

.tab_list a{display: inline-block; background: #fff; border-radius: 50rem; border: 1px solid #cae0ef; width: 198rem; padding: 6rem 24rem; margin-top: 10rem; position: relative;}
.tab_list li.on a{background: #3456b0; border-color: #3456b0; color: #fff; font-weight: 600; box-shadow: 0 0 20px #abb8c7;}

.tab_list a::before{position: absolute; content: ""; background: url('../img/main/doseo_arrow.png') no-repeat; width: 8px; height: 12px; right: 20px; top: 15px; background-position-x: -4px;}
.tab_list li.on a::before{background-position-x: -20px;}


.bo_show{width: calc(100% - 270rem); margin-top: -78rem; position: relative;}

.bo_show ul{display: none;}
.bo_show ul.on{display: block;}
.bo_show::after{position: absolute; content: ""; background: url('../img/main/doseo_bg02.png') no-repeat; width: 44rem; height: 46rem; bottom: 133px; left: -33px;}

.book .bo_show ul{position: relative; z-index: 1;}
.bo_show ul li{float: left; margin-right: 60rem; width: calc((100% - 180rem) / 4); height: 330rem; border: 1px solid #fff; box-shadow: 3px 3px 15px rgba(0,0,0,0.15);}
.bo_show ul li:nth-child(4){margin-right: 0;}
.bo_show ul li a{display: block; height: 100%;}
.bo_show ul li p{margin-top: 17rem; padding-left: 15rem; position: relative; font-size: 17rem; line-height: 1.6; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

.bo_show ul li p::before{position: absolute; content: ""; width: 4px; height: 4px; border-radius: 50rem; background: #96a9d7; left: 0; top: 11rem;}
.bo_show ul li img{object-fit: fill; width: 100%; height: 100%;}

@media all and (max-width:1500px){
    .book{padding: 30rem 70rem 92rem 47rem;}
    .book .bo_tab{width: 206rem;}
    .bo_show ul li{width: calc((100% - 90rem) / 4); margin-right: 30rem;}
    .bo_show ul li p{font-size: 16rem;}
}
@media all and (max-width:1300px){
    .book{padding:30rem 48rem 92rem 47rem;}
    .book .bo_tab{width: 185rem; margin: 19rem 56rem 0 0;}
    .bo_show{width: calc(100% - 240rem);}
}
@media all and (max-width:1050px){
    .bo_show ul li{width: calc((100% - 60rem) / 3);}
    .bo_show ul li:nth-child(3){margin-right: 0;}
    .bo_show ul li:nth-child(4){display: none;}
}
@media all and (max-width:950px){
    .bo_show ul li{width: calc((100% - 30rem) / 2);}
    .bo_show ul li:nth-child(2){margin-right: 0;}
    .bo_show ul li:nth-child(3){display: none;}
}
@media all and (max-width:720px){
    .book .bo_tab{width: 40%;}
    .bo_show{width: 300rem;}
    .bo_show ul li{width: 100%; margin-right: 0; height: 370rem;}
    .bo_show ul li:nth-child(2){display: none;}
    .bo_show ul li:nth-child(3){display: none;}
}
@media all and (max-width:530px){
    .book{padding: 30rem 32rem 92rem 28rem;}
}
@media all and (max-width:513px){
    .bo_show::after{display: none;}
    .book .bo_tab{margin: 19rem 30rem 0 0;}
    .tab_list a{width: 166rem;}
    .tab_list a::before{display: none;}
}
@media all and (max-width:460px){
    .book{flex-wrap: wrap; margin: 50rem 0 50rem 0; padding: 10rem 18rem 92rem 18rem; border-radius: 30rem;}
    .book::before{left: inherit; bottom: inherit; top: 0; right: 0; transform: scale(-1);}
    .book .bo_tab{width: 100%; margin-right: 0;}
    .book .bo_tab h2{padding-left: 0; text-align: center; margin-top: 0;}
    .tab_list{text-align: center;}
    .tab_list ul li{display: inline-block;}
    .tab_list a{width: auto; font-size: 16rem; padding: 3rem 14rem;} 
    .bo_show{width: 100%; max-width: 315rem; margin: 20rem auto 0 auto;}
    .bo_show ul li{height: 450rem;}
}
@media all and (max-width:320px){
    .bo_show ul li{height: 400rem;}
}


/* h2 */
@media all and (max-width:1012px){
    .program h2,
    .popup h2,
    .book .bo_tab h2{font-size: 26rem;}
}