@charset "utf-8";

/* layout ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
body {padding-top:167px;min-width: 320px;}
#container {padding:70px 0 100px;}
.inner_wrap {width:100%;max-width:1199px;margin:auto;text-align:left;padding-left:20px;padding-right:20px;}
.outer_wrap {width:100%;text-align:center;padding:0 20px;min-width:320px;}
.HeaderWrap {background-color:#fff;position:fixed;top:0;left:0;z-index:100;}
.HeaderWrap .inner_wrap {padding-left:0;padding-right:0;}
header .nav_top {position:relative;padding:20px 0 26px;border-bottom:1px solid #e8e8e8;display:flex;width:100%;align-items:flex-end;}
header .nav_top h1 {flex-shrink:0;}
header .nav_top h1 a {display:inline-block;font-size:0;line-height:0;}
header .nav_top .search_wrap {flex:1;}
header .nav_top .sns {flex-shrink:0;}
header .nav_top .search_wrap .search_group {display:flex;width:calc(100% - 178px);align-items:center;margin:auto;}
header .nav_top .search_wrap .search_group .SearchMini, header .nav_top .search_wrap .search_group .SearchMini input {transition: all 0.3s ease-in-out 0s;}
header .nav_top .search_wrap .search_group .SearchMini {position:absolute;top:-5px;right:5px;overflow:hidden;width:0;z-index:0;}
header .nav_top .search_wrap .search_group .SearchMini.open {width:100% !important;max-width:320px;min-width:250px;text-align:right;}
header .nav_top .search_wrap .search_group .SearchMini.open input {width:100%;}
header .nav_top .search_wrap .search_group .SearchMini input {width:0%;}
header .nav_top .search_wrap .search_group .mb {display:none;position:relative;}
header .nav_top .search_wrap .search_group .pc {flex:1;border-bottom:2px solid #33336e;}
header .nav_top .search_wrap .search_group .pc input {border:0;font-size:16px;width:calc(100% - 30px);height:38px;line-height:38px;text-indent:0;background-color:transparent;}
header .nav_top .search_wrap .search_group .pc input::placeholder {color:#bcbcc2;}
header .nav_top .search_wrap .search_group div button {width:30px;height:38px;background:url(/image/common/zoom1.png) 100% 50% no-repeat;position:relative;z-index:1;}
header .nav_top .search_wrap .search_group a {flex-shrink:0;}
header .nav_top .search_wrap .recommend {border-radius:50px;line-height:38px;margin-left:20px;}
header .nav_top .search_wrap .recommend::before {
    content:"";display:inline-block;background:url(/image/common/zoom2.png) 0 0 no-repeat;width:21px;height:15px;
    margin:-4px 6px 0 0;vertical-align:middle;
}
header .nav_top .sns {display:flex;flex-wrap: nowrap;column-gap:10px;margin-bottom:5px;}
header .sns a {display:block;width:29px;height:29px;border-radius:100%;}
header .sns a:nth-child(1) {background:#fbd900 url(/image/common/sns01.png) 50% 50% no-repeat;}
header .sns a:nth-child(2) {background:#ff0000 url(/image/common/sns02.png) 50% 50% no-repeat;}
header .sns a:nth-child(3) {background:#3d559d url(/image/common/sns03.png) 50% 50% no-repeat;}
nav .SiteMapWrap .MobileGnbWrap .sns {display:none;}

#header.scrolled {box-shadow: 0 4px 10px rgba(0,0,0,0.07);transition: all 0.3s ease-in-out 0s;border-bottom:1px solid #e8e8e8;}
.SubWrap, .SubWrapA {display:flex;flex-direction:column;}
.SubWrap #frmList, .SubWrapA #container {flex-grow: 1;flex-shrink: 0;}
.SubWrap footer {flex-grow: 0;flex-shrink: 0;}

/* top가기 */
#topBtn {
    position: fixed;right: 30px;bottom: 30px;display: none;border-radius:100%;width:50px;height:50px;
    background-color:rgba(25, 53, 134, 0.8);color: #fff;z-index: 100;text-align:center;transition: all 0.3s ease-in-out 0s;
}
#topBtn:hover {background-color:rgba(25, 53, 134, 1);}
#topBtn span {font-size:30px;line-height:50px;font-weight: 200;}

/* gnb */
nav .btn_all_menu {flex-shrink:0;}
nav .btn_all_menu a {display:block;position:relative;width:30px;height:26px;}
nav .btn_all_menu a span {display:block;position:absolute;height:2px;width:26px;background-color:#6c6c7b;left:2px;transition: all 0.3s ease-in-out 0s;}
nav .btn_all_menu a span:nth-child(1) {top:2px;}
nav .btn_all_menu a span:nth-child(2) {top:12px;}
nav .btn_all_menu a span:nth-child(3) {bottom:2px;}
nav .btn_all_menu.open a span:nth-child(1) {rotate: 45deg;top:12px;background-color:#8dc63f;}
nav .btn_all_menu.open a span:nth-child(2) {opacity:0;width:0;background-color:#8dc63f;}
nav .btn_all_menu.open a span:nth-child(3) {rotate: -45deg;bottom:12px;background-color:#8dc63f;}
nav .btn_all_menu.open ~ .SiteMapWrap {opacity:1;height:auto;padding-bottom:40px;}
nav .MobileGnbWrap .sns {display:flex;column-gap:10px;justify-content:center;}

nav {display:flex;align-items:flex-end;width:100%;align-items:center;column-gap:30px;}
nav .gnb {display:flex;flex: 1;}
nav .gnb li {width:calc(100% / 6);text-align:center;font-family: noto;position:relative;}
nav .gnb li > a {font-size:19px;font-weight:500;color:#000;transition: all 0.3s ease-in-out 0s;display:block;width:100%;padding:20px 0;}
nav .gnb li > a:hover {color:#8dc63f;}
nav .gnb li > .none::after {content:"";}
nav .gnb li > a::after {content:"\e313";display:inline-block;font-family: 'Material Symbols Outlined';font-size:16px;vertical-align:middle;margin:-2px 0 0 3px;}
nav .gnb li:hover a + .popcover {height:auto;opacity:1;}
nav .gnb li:hover a + .popcover dt {height:auto;}
nav .gnb li:nth-child(4) .popcover {width:226px;margin-left:-113px;left:50%;}
nav .gnb li .popcover {
    overflow:hidden;height:0;position:absolute;background-color:#33336e;padding:5px 15px;border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;width:100%;left:0;top:59px;transition: all 0.3s ease-in-out 0s;opacity:0;
}
nav .gnb li .popcover dt {border-top:1px solid #515184;overflow:hidden;height:0;}
nav .gnb li .popcover dt:first-child {border-top:0;}
nav .gnb li .popcover dt a {
    color:#fff;font-size:16px;letter-spacing:-1px;padding:10px 5px;display:block;word-wrap: break-word;word-break:keep-all;
    overflow-wrap:break-word;line-height:140%;
}
nav .gnb li .popcover dt a:hover {color:#8dc63f;}

nav .btn_member {flex-shrink:0;display:flex;column-gap:20px;}
nav .btn_member a {font-size:14px;}
nav .btn_member a::before {
    content:"";display:inline-block;vertical-align:middle;margin:-3px 5px 0 0;width:15px;height:14px;
}
nav .btn_member .login::before {background:url(/image/common/icon_login.png) 0 0 no-repeat;}
nav .btn_member .logOut::before {background:url(/image/common/icon_logout.png) 0 0 no-repeat;}
nav .btn_member .join::before {background:url(/image/common/icon_member.png) 0 0 no-repeat;}
nav .btn_member .UserEdit::before {background:url(/image/common/icon_edit.png) 0 0 no-repeat;height:15px;}

/* 전체메뉴 */
nav .SiteMapWrap {
    position:absolute;width:100%;top:167px;left:0;border-top:1px solid #e2e2e2;background-color:#fff;border-bottom:1px solid #e2e2e2;
    -webkit-box-shadow:0px 5px 6px rgba(0,0,0,0.05);-moz-box-shadow:0px 5px 6px rgba(0,0,0,0.05);box-shadow:0px 5px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease-in-out 0s;opacity:0;overflow:hidden;height:0;
}
nav .SiteMapWrap .inner_wrap {padding:0 20px;}
nav .SiteMapWrap .sitemap_group {max-width:1199px;width:100%;margin:auto;padding:0 180px 0 60px;}
nav .SiteMapWrap ul {display:flex;justify-content:center;}
nav .SiteMapWrap ul li {width:calc(100% / 6);text-align:center;border-right:1px solid #e2e2e2;padding:12px 0;}
nav .SiteMapWrap ul li:first-child {border-left:1px solid #e2e2e2;}
nav .SiteMapWrap ul dt a {
    font-size:16px;color:#666;display:block;padding:6px 5px;word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;line-height:140%;
}
nav .SiteMapWrap ul dt a:hover {color:#8dc63f;}
nav .SiteBannerWrap {border-top:1px solid #e2e2e2;}
nav .SiteBannerWrap .inner_wrap {padding-top:20px;display:flex;column-gap:30px;} 
nav .SiteBannerWrap .inner_wrap div {border-radius:5px;width:calc(100% / 2);overflow:hidden;}
nav .SiteBannerWrap a {display:block;width:100%;height:78px;}
nav .SiteBannerWrap .apple a {background:url(/image/common/gnb_banner01.jpg) 50% 50% no-repeat;background-size:cover;}
nav .SiteBannerWrap .live a {background:url(/image/common/gnb_banner02.jpg) 50% 50% no-repeat;background-size:cover;}
nav .MobileGnbWrap {display:none;}
nav .MobileGnbWrap .content {
    padding:20px;font-size:18px;color:#666;background-color:#f4f4fb;word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;
    line-height:140%;border-radius:20px;
}
nav .MobileGnbWrap h3 + div {
    height: 0px;padding: 0px;overflow: hidden;display: block!important;-webkit-transform: translateZ(0);transition: all 0.3s ease;
}
nav .MobileGnbWrap h3 {font-size:20px;padding:19px;border-top:1px solid #e8e8e8;font-family: noto;font-weight:600;position:relative;}
nav .MobileGnbWrap h3 a {display:block;width:100%;}
nav .MobileGnbWrap h3::after {
    content:"\e313";font-family: 'Material Symbols Outlined';font-size:20px;position:absolute;right:0;font-weight:500;
    top: 50%;-ms-transform: translate(0%, -50%);-webkit-transform: translate(0%, -50%);-moz-transform: translate(0%, -50%);transform: translate(0, -50%);
}
nav .MobileGnbWrap h3.open::after {content:"\e316";}
nav .MobileGnbWrap h3:first-child {border-top:0;}
nav .MobileGnbWrap .content dt {padding:10px 0;border-bottom:1px solid #e8e8e8;}
nav .MobileGnbWrap .content dt:last-child {border-bottom:0;}
nav .MobileGnbWrap h3.open + div + h3 {border-top:0;}


/* footer ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
footer {background-color:#f0f0f0;padding:35px 20px;}
footer .inner_wrap {position:relative;padding:0;}
footer .footer_gnb {margin-bottom:35px;}
footer .footer_gnb select {display:none;}
footer .footer_gnb li {padding-left:20px;margin-left:20px;float:left;border-left:1px solid #d4d4d4;font-size:15px;}
footer .footer_gnb li:first-child {padding-left:0px;margin-left:0px;border-left:0;}
footer .footer_gnb li a {color:#333333;}
footer .info li {padding:5px 0;font-size:15px;color:#636363;}
footer .info li strong {color:#000;}
footer .info li span {margin-right:30px;white-space:nowrap;line-height:130%;}
footer .info li:last-child  {margin-top:10px;}
footer .FooterLogo {position:absolute;right:0;bottom:0;}

/* 서브헤더 -------------------------------------------------------------------------------------------------------------- */
.SubHeaderWrap {width:100%;height:78px;background-attachment: fixed !important;background-size:cover !important;}
.SubHeaderWrap .inner_wrap {position:relative;height:100%;}
.SubHeaderWrap .SubTitleWrap {
    position:absolute;bottom:-1px;left:50%;-ms-transform: translate(-50%, 0%);-webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);transform: translate(-50%, 0%);width:405px;height:68px;background:url(/image/common/header_box.png) 0 0 no-repeat;
    text-align:center;display:flex;flex-direction: column;justify-content: flex-end;
}
.SubHeaderWrap .SubTitleWrap h2 {color:#000;font-family: sbfont;font-weight:700;font-size:24px;margin-bottom:5px;}
.SubHeaderWrap .SubTitleWrap span {color:#666;font-family: lato;font-weight:200;font-size:16px;}
.SubHeaderWrap .Anchor {
    position:absolute;right:20px;top: 50%;-ms-transform: translate(0%, -50%);-webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);transform: translate(0, -50%);border-radius:50px;line-height:30px;padding:0 10px;
    background-color:rgba(255, 255, 255, 0.5);
}
.SubHeaderWrap .Anchor .material-symbols-outlined {
    font-variation-settings:
    'FILL' 1,
    'wght' 0,
    'GRAD' 0,
    'opsz' 24
}
.SubHeaderWrap .Anchor ul {display:flex;}
.SubHeaderWrap .Anchor ul a span {vertical-align:middle;margin-top:-5px;}
.SubHeaderWrap .Anchor ul li::after {content:"\e5cc";font-family: 'Material Symbols Outlined';display:inline-block;font-size:18px;color:#000;vertical-align:middle;margin-top: -2px;font-weight:200;}
.SubHeaderWrap .Anchor ul li:last-child::after {display:none;}
.SubHeaderWrap .Anchor ul li {color:#000;font-weight:400;}


/* 학년별 도서추천 ------------------------------------------------------------------------------------------------------- */
.BooksRecommendWrap {
    position:fixed;right:-265px;top:0;height:100vh;background-color:#fff;z-index:101;width:265px;transition: all 0.3s ease-in-out 0s;
    -webkit-box-shadow:-7px 0px 14px rgba(0,0,0,0.07);-moz-box-shadow:-7px 0px 14px rgba(0,0,0,0.07);box-shadow:-7px 0px 14px rgba(0,0,0,0.07);
}
.BooksRecommendWrap.open {right:0;}
.BooksRecommendWrap .scrollY {padding:35px 30px 30px;height:100%;}
.BooksRecommendWrap h2 {font-size:20px;color:#000;letter-spacing:-1px;font-family: sbfont;font-weight:700;position:relative;width:100%;text-align:left;}
.BooksRecommendWrap h2::before {
    content:"";display:inline-block;width:33px;height:33px;background:#33336e url(/image/common/zoom2.png) 50% 50% no-repeat;
    border-radius:100%;margin-right:7px;vertical-align:middle;
}
.BooksRecommendWrap #css3-animated-example h3 {padding:14px 0;border-bottom:1px solid #dcdce6;font-size:18px;font-weight:500;position:relative;}
.BooksRecommendWrap #css3-animated-example h3::after {
    content:"\e984";display:block;width:18px;height:18px;line-height:18px;border-radius:100%;border:1px solid #000;
    text-align:center;font-family: 'Material Symbols Outlined';font-size:17px;color:#000;position:absolute;font-weight:300;
    right:0;top:50%;margin-top:-9px;
}
.BooksRecommendWrap #css3-animated-example h3 a {display:block;width:100%;}
.BooksRecommendWrap #css3-animated-example h3.open::after {content:"\e986";}
.BooksRecommendWrap #css3-animated-example h3, .BooksRecommendWrap #css3-animated-example h3 + div {text-align:left;}
.BooksRecommendWrap #css3-animated-example h3 + div {
    height: 0px;padding: 0px;overflow: hidden;background: #000;display: block!important;-webkit-transform: translateZ(0);transition: all 0.3s ease;
}
.BooksRecommendWrap #css3-animated-example .content {padding:10px 20px;}
.BooksRecommendWrap #css3-animated-example h3.open + div {height: auto;background: #f4f4fb;border-bottom:1px solid #dcdce6;}
.BooksRecommendWrap #css3-animated-example li {font-weight:400;padding:10px 0;font-size:16px;}
.BooksRecommendWrap .RBookClose {
    background-color:#fff;border-radius:100%;position:absolute;top:20px;left:0;
}
.BooksRecommendWrap.open .RBookClose {left:-34px;}
.BooksRecommendWrap .RBookClose, .BooksRecommendWrap .RBookClose span {display:block;width:62px;height:62px;line-height:62px;}
.BooksRecommendWrap .RBookClose span {display:block;width:100%;text-align:center;font-size:18px;}


/* global ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.clearfix {*zoom:1;}
.clearfix::after, .clearfix::before {content:"";display: block;clear: both;line-height:0;}
.clearfix::after {clear: both;}
.ani_Fnc {transition: all 0.3s ease-in-out 0s;}
.text_left {text-align:left;}
.text_right {text-align:right;}
.text_center {text-align:center;}
.scrollY {overflow-y: auto;overflow-x:hidden;}
.scrollY::-webkit-scrollbar {width: 5px;}
.scrollY::-webkit-scrollbar-thumb {background-color:rgba(102, 102, 161, 0.3);border-radius: 10px;}
.scrollY::-webkit-scrollbar-thumb:hover {background-color: #6666a1;}
.scrollY::-webkit-scrollbar-track {
    background-color: #ddd;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
}

.scrollX {overflow-x: auto;overflow-y:visible;}
.scrollX::-webkit-scrollbar {height: 5px;}
.scrollX::-webkit-scrollbar-thumb {background-color:rgba(102, 102, 161, 0.3);border-radius: 10px;}
.scrollX::-webkit-scrollbar-thumb:hover {background-color: #6666a1;}
.scrollX::-webkit-scrollbar-track {
    background-color: #eeeeee;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
}

.scroll {overflow: auto;}
.scroll::-webkit-scrollbar {height: 5px;width:5px;}
.scroll::-webkit-scrollbar-thumb {background-color:rgba(102, 102, 161, 0.1);border-radius: 10px;}
.scroll::-webkit-scrollbar-thumb:hover {background-color:rgba(102, 102, 161, 0.3);}
.scroll::-webkit-scrollbar-track {
    background-color: #eeeeee;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
}

.hid {display: block;overflow: hidden !important;position: absolute;top: -1000px !important;left: 0;width: 0 !important;height: 0 !important;line-height: 0 !important;font-size: 0 !important;}
.float_wrap {width:100%;}
.float_wrap .left, .float_wrap .right {vertical-align:middle;}
.float_wrap .left {float:left;}
.float_wrap .right {float:right;}

.SelectBox {width:100%;}


.imp::before {
    content:"";
    display: block;
    width: 12px;
    height: 13px;
    position: absolute;
    background: url(/image/common/icon_star.png) 0 0 no-repeat;
    top: 4px;
    left: 0;
}

.PointColorA {color:#ff6c00;}

.BtnBorderWrap {text-align:center;margin-top:30px;}
.BtnBorderWrap.One a {width:30%;}
.BtnBorderWrap.Two {display:flex;column-gap:10px;justify-content:center;}
.BtnBorderWrap.Two a {width:20%;min-width:100px;}


/* title ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.TitleA {position:relative;margin-bottom:20px;}
.TitleA h3 {font-size:26px;font-family: sbfont;font-weight:700;color:#000;letter-spacing:-1px;}
.TitleA.plus::after {content:"";height:2px;width:calc(100% - 28px);background-color:#33336e;position:absolute;left:0;top:50%;margin-top:-1px;z-index:-1;}
.TitleA.plus h3 {background-color:#fff;padding-right:15px;display:inline-block;position:relative;z-index:1;}
.TitleA.plus a {
    position:absolute;display:block;width:22px;height:22px;background:#fff url(/image/common/icon_plus.gif) 100% 50% no-repeat;
    right:0;top:50%;margin-top:-11px;
}


/* 버튼 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.btnTypeA {background-color:#434349;display:inline-block;zoom:1;padding:0 20px;color:#fff;border-radius:50px;text-align:center;transition: all 0.3s ease-in-out 0s;font-size:16px;}
.btnTypeA:hover {background-color:#6d6d74;color:#fff;}

.btnTypeB {background-color:#33336e;display:inline-block;zoom:1;padding:0 20px;color:#fff;border-radius:50px;text-align:center;transition: all 0.3s ease-in-out 0s;font-size:16px;}
.btnTypeB:hover {background-color:#4646c5;color:#fff;}

.btnTypeC {background-color:#8dc63f;display:inline-block;zoom:1;padding:0 20px;color:#fff;border-radius:50px;text-align:center;transition: all 0.3s ease-in-out 0s;font-size:16px;}
.btnTypeC:hover {background-color:#7dd700;color:#fff;}

.btnTypeD {background-color:#fff;display:inline-block;zoom:1;padding:0 20px;color:#000;border-radius:10px;text-align:center;transition: all 0.3s ease-in-out 0s;font-size:16px;border:1px solid #c1c1d3;}
.btnTypeD:hover {background-color:#fff;border-color:#8dc63f;}

.SizeA {line-height:54px;font-size:18px;}
.SizeB {line-height:50px;}
.BtnW100 {width:100%;text-align:center;}

/* tabmenu ---------------------------------------------------------------------------------------------------------------------*/
.TabStyleA {border-bottom:1px solid #33336e;width:100%;}
.TabStyleA ul {display:flex;column-gap:3px;justify-content:flex-end;margin:0 14px;}
.TabStyleA ul li {position:relative;}
.TabStyleA ul li a {
    padding:0 20px;line-height:42px;display:block;color:#fff;background-color:#cbcbde;border-radius:13px;position:relative;transition: all 0.3s ease-in-out 0s;
}
.TabStyleA ul li a:hover {background-color:#33336e;}
.TabStyleA ul li.on {bottom:-1px;}
.TabStyleA ul li.on a, .TabStyleA ul li.on a:hover {
    border-top:1px solid #33336e;border-left:1px solid #33336e;border-right:1px solid #33336e;
    border-bottom-left-radius:0;border-bottom-right-radius:0;background-color:#fff;color:#000;line-height:44px;
}
.TabStyleA ul li.on a::before, .TabStyleA ul li.on a::after {
    content:"";display:block;position:absolute;width:14px;height:14px;
}
.TabStyleA ul li.on a::before {background:url(/image/common/tab_l.png) 0 0 no-repeat;left:-14px;bottom:0;}
.TabStyleA ul li.on a::after {background:url(/image/common/tab_r.png) 0 0 no-repeat;right:-14px;bottom:0;}

.TabStyleB {width:100%;border-bottom:2px solid #33336e;}
.TabStyleB ul {display:flex;align-items:flex-end;}
.TabStyleB ul li {width:calc(100% / 2);}
.TabStyleB ul li a {
    display:block;width:100%;text-align:center;line-height:47px;background-color:#72728e;font-size:18px;color:#cbcbde;
    border-top-left-radius:15px;border-top-right-radius:15px;transition: all 0.3s ease-in-out 0s;
}
.TabStyleB ul li.on, .TabStyleB ul li:hover {position:relative;z-index:1;top:3px;border-bottom: 1px solid #fff;}
.TabStyleB ul li.on a, .TabStyleB ul li a:hover {
    background-color:#fff;color:#33336e;border-left:2px solid #33336e;border-top:2px solid #33336e;
    border-right:2px solid #33336e;line-height:47px;
}

.TabStyleC ul {display:flex;background-color:#fff;border-radius:15px;overflow:hidden;}
.TabStyleC ul li {border-left:1px solid #c1c1d3;width: calc(100% / 7);}
.TabStyleC ul li:first-child {border-left:0;}
.TabStyleC ul li a {
    display:block;width:100%;text-align:center;height:100%;line-height:45px;font-size:18px;font-family:lato;font-weight:700;color:#8787ab;
    transition: all 0.3s ease-in-out 0s;
}
.TabStyleC ul .on a, .TabStyleC ul li a:hover {background-color:#8dc63f;color:#fff;}
.TabStyleC ul .on, .TabStyleC ul .on + li {border-left:0;}

.TabStyleD {text-align:center;}
.TabStyleD .TabGroup {margin:auto;display:inline-block;position:relative;z-index:1;}
.TabStyleD ul {display:flex;line-height:56px;background-color:#33336e;}
.TabStyleD ul, .TabStyleD li a {border-top-left-radius:50px;border-top-right-radius:50px;}
.TabStyleD li {text-align:center;}
.TabStyleD li a {
    color:#a1a1c8;display:block;width:100%;font-weight:600;transition: all 0.3s ease-in-out 0s;font-size:18px;white-space:nowrap;
    border-left:2px solid #33336e;border-top:2px solid #33336e;border-right:2px solid #33336e;position:relative;
}
.TabStyleD li.on a, .TabStyleD li a:hover {background-color:#fff;color:#33336e;}
.TabStyleD .Tab {
    width:100%;background-color:#fff;border:2px solid #33336e;border-radius:50px;text-align:center;line-height:58px;margin-top:-2px;
    -webkit-box-shadow:0px 5px 6px rgba(0,0,0,0.05);-moz-box-shadow:0px 5px 6px rgba(0,0,0,0.05);box-shadow:0px 5px 6px rgba(0,0,0,0.05);
}
.TabStyleD .Tab dl {display:inline-flex;}
.TabStyleD .Tab dl dt {padding:0 20px;font-size:18px;}
.TabStyleD .Tab dl dt a {color:#676770;white-space:nowrap;}
.TabStyleD .Tab dl dt.on a {color:#33336e;font-weight:600;}
.TabStyleD .Tab dl dt.on a::before {
    content:"\e5c8";display:inline-block;width:19px;height:19px;line-height:17px;text-align:center;border-radius:100%;
    border:1px solid #434349;vertical-align:middle;margin:-3px 4px 0 0;font-family: 'Material Symbols Outlined';font-size:11px;
}


/* margin ---------------------------------------------------------------------------------------------------------------------*/
.marginB7 {margin-bottom:7px;}
.marginB10 {margin-bottom:10px;}
.marginB15 {margin-bottom:15px;}
.marginB20 {margin-bottom:20px;}
.marginB25 {margin-bottom:25px;}
.marginB30 {margin-bottom:30px;}
.marginB40 {margin-bottom:40px;}
.marginB45 {margin-bottom:45px;}
.marginB50 {margin-bottom:50px;}
.marginB60 {margin-bottom:60px;}
.marginB70 {margin-bottom:70px;}



/* 모바일 ------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1080px){
    /* header */
    .HeaderWrap {height:167px;}
    header .nav_top .search_wrap .search_group {width: calc(100% - 100px);}
    nav .gnb li > a {font-size: 18px;}
    nav {margin-top:16px;}
    nav .gnb {display:none;}
    nav .btn_all_menu {flex: 1;}
    nav .SiteMapWrap .sitemap_group.pc {display:none;}
    nav .SiteMapWrap ul dt a {font-size:15px;}
    nav .btn_all_menu.open ~ .SiteMapWrap {height:100vh;}
    nav .SiteMapWrap .scrollY {height:100%;padding-bottom:50px;}
    nav .SiteMapWrap .scrollY::-webkit-scrollbar-thumb {display:none;}
    nav .SiteMapWrap .scrollY::-webkit-scrollbar-track {background-color:#fff;}
    nav .SiteMapWrap .scrollY::-webkit-scrollbar {width:0;}
    nav .MobileGnbWrap {display:block;height: calc(100vh - 287px);}

}

@media screen and (max-width: 1000px){
    /* header */
    header .nav_top h1 {width:280px;}
    header .nav_top .search_wrap .search_group {width: calc(100% - 100px);}
}

@media screen and (max-width: 960px){
    /* header */
    body {padding-top:151px;}
    nav .SiteMapWrap {top: 151px;}
    .HeaderWrap {height:151px;}
    header .nav_top {padding-bottom:15px;}
    header .nav_top .search_wrap .search_group a span, header .nav_top .search_wrap .recommend::before {display:none;}
    header .nav_top .search_wrap .recommend {width:33px;height:33px;padding:0;background:#fff url(/image/common/zoom2_1.png) 50% 50% no-repeat;border-radius:0;}
    header .nav_top .search_wrap .search_group {justify-content:flex-end;width:100%;padding-right:30px;}
    header .nav_top .search_wrap .search_group .pc {display:none;border-bottom:0;}
    header .nav_top .search_wrap .search_group .mb {display:block;padding-right:20px;border-right:1px solid #e3e3e3;}
}


@media screen and (max-width: 768px){
    /* 서브헤더 */
    .SubHeaderWrap .SubTitleWrap {width:365px;height:61px;background-size:contain;}
    .SubHeaderWrap .Anchor ul li {font-size:14px;}

    /* footer */
    footer .info li:nth-child(2) span:nth-child(3) {display:block;margin-top:7px;}

    /* 탭메뉴 */
    .TabStyleD ul {line-height: 52px;}
    .TabStyleD .Tab {line-height: 52px;}
    .TabStyleD li a, .TabStyleD .Tab dl dt {font-size: 17px;}
}


@media screen and (max-width:640px){
    /* header */
    body {padding-top:135px;}
    .HeaderWrap {height:135px;}
    header .nav_top {flex-wrap:wrap;padding-top:15px;padding-bottom:10px;border-bottom:0;}
    header .nav_top h1 {width:100%;text-align:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #e8e8e8;}
    header .nav_top h1 img {max-width:250px;}
    header .nav_top .search_wrap .search_group {justify-content:flex-start;}
    header .nav_top .search_wrap {padding-left:60px;}
    nav {display:block;margin:auto;}
    nav .SiteMapWrap {top:135px;}
    nav .SiteMapWrap .scrollY {border-top:1px solid #e8e8e8;}
    nav .MobileGnbWrap {padding-top:57px;height: calc(100vh - 339px);}
    nav .MobileGnbWrap h3 {font-size: 17px;font-weight:500;}
    nav .MobileGnbWrap .content dt {font-size:16px;}
    nav .MobileGnbWrap .content {padding:10px 20px;}
    nav .btn_member a {font-size:18px;}
    nav .btn_member {column-gap:40px;}
    header .nav_top .search_wrap .search_group .SearchMini.open {right:auto;left:65px;text-align:left;min-width:calc(100vw - 240px);}
    nav .btn_member {opacity: 0;height: 0;overflow: hidden;justify-content: center;}
    nav .btn_all_menu {flex:0;position: relative;top:-42px;display:inline-block;}
    nav .btn_all_menu.open ~ .btn_member {opacity: 1;height: auto;position:relative;z-index:10;top: -7px;}
    nav .SiteBannerWrap .inner_wrap {flex-wrap:wrap;column-gap:0;row-gap:10px;}
    nav .SiteBannerWrap .inner_wrap div {width:100%;}

    /* 서브헤더 */
    .SubHeaderWrap .SubTitleWrap {width:315px;height:53px;background-size:contain;}
    .SubHeaderWrap .SubTitleWrap span {display:none;}
    .SubHeaderWrap .Anchor {
        top:88px;-ms-transform: translate(0%, 0%);-webkit-transform: translate(0%, 0%);-moz-transform: translate(0%, 0%);transform: translate(0%, 0%);
    }
    .SubHeaderWrap .Anchor ul li {font-size:13px;}

    /* 학년별 도서추천 */
    .BooksRecommendWrap h2 {margin-bottom:40px;}
    .BooksRecommendWrap #css3-animated-example h3 {font-size: 16px;}
    .BooksRecommendWrap #css3-animated-example .content {padding:5px 20px;}
    .BooksRecommendWrap #css3-animated-example h3::after {width: 16px;height: 16px;line-height:16px;margin-top:-8px;}

    /* 버튼 */
    .BtnBorderWrap.One a {width:100%;}
    .SizeA {font-size:16px;line-height: 50px;}

    /* 탭메뉴 */
    .TabStyleD .Tab, .TabStyleD ul {line-height: 50px;}
    .TabStyleD li a, .TabStyleD .Tab dl dt {font-size: 16px;}
    .TabStyleD .Tab dl dt.on a::before {font-size: 10px;width: 17px;height: 17px;line-height: 15px;}
    .TabStyleD ul, .TabStyleD li a {border-top-left-radius: 45px;border-top-right-radius: 45px;}
    .TabStyleD .Tab dl dt {padding:0 15px;}
    
}

@media screen and (max-width:480px){
    /* header */
    nav .btn_member a {font-size:16px;}
    nav .btn_member {column-gap: 30px;}
    nav .MobileGnbWrap h3 {padding-left:0;}
    header .nav_top .search_wrap .search_group {justify-content:flex-end;padding-right:0;}
    header .nav_top .search_wrap .search_group .mb {border-right:0;padding-right:10px;}
    header .nav_top .search_wrap .recommend {margin-left:10px;}
    nav .SiteMapWrap .scrollY {display:flex;flex-direction:column;}
    nav .SiteMapWrap #Gnb-animated-example {flex:1;}
    nav .SiteMapWrap .sns {flex-shrink:0;}
    nav .SiteMapWrap .sns a {width:40px;height:40px;}
    header .nav_top .search_wrap .search_group .SearchMini.open {right:-3px;left: auto;text-align:right;min-width: calc(100vw - 130px);}
    .SubHeaderWrap .Anchor {width:100%;}
    .SubHeaderWrap .Anchor ul {justify-content: center;}

    /* 서브헤더 */
    .SubHeaderWrap .Anchor {
        right:auto;left:50%;top:88px;-ms-transform: translate(-50%, 0%);-webkit-transform: translate(-50%, 0%);-moz-transform: translate(-50%, 0%);transform: translate(-50%, 0%);
    }

    /* footer */
    footer .footer_gnb {margin-bottom:20px;}
    footer .info li:first-child span {margin-right:0;display:block;}
    footer .info li:first-child strong {display:block;margin-bottom:7px;}
    footer .footer_gnb li {padding-left:10px;margin-left:10px;font-size:14px;}
    footer .info li {padding:10px 0;}
    footer .info li:nth-child(2) span {display:block;margin-top:7px;}
    footer .info li:nth-child(2) span:first-child {margin-top:0;}
    footer .info li:nth-child(3) span {font-size:14px;white-space:normal;line-height:130%;}
    footer .FooterLogo {position:relative;margin-top:20px;}

    /* sns */
    header .nav_top .sns {display:none;}

    /* 학년별 도서추천 */
    .BooksRecommendWrap h2 {font-size: 19px;}
    .BooksRecommendWrap h2::before {width: 31px;height: 31px;background-size:18px auto;}

    /* global */
    .SizeA {font-size:15px;}
    .SelectBox.One select {width:100%;}
    .BtnBorderWrap.Two {flex-direction:column;row-gap:10px;}
    .BtnBorderWrap.Two a {width:100%;}

    /* 탭메뉴 */
    .TabStyleB ul li a {font-size: 15px;line-height: 44px;}
    .TabStyleB ul li.on a, .TabStyleB ul li a:hover {line-height: 45px;}
    
    .TabStyleD .Tab, .TabStyleD ul {line-height: 48px;}
    .TabStyleD .Tab dl dt {padding:0 10px;}

}

@media screen and (max-width:380px){
    /* footer */
    footer .footer_gnb ul {display:none;}
    footer .footer_gnb select {display:block;width:100%;background-color:#fff;}
    footer .info li span {white-space:normal;}

    /* 탭메뉴 */
    .TabStyleD .Tab, .TabStyleD ul {line-height: 42px;}
    .TabStyleD li a, .TabStyleD .Tab dl dt {font-size: 15px;}
    
}


@media screen and (max-width:320px){
    /* header */
    nav .btn_all_menu a {height: 22px;}
    nav .btn_all_menu a span:nth-child(2) {top: 10px;}
    nav .btn_all_menu.open a span:nth-child(1) {top: 8px;}
    header .nav_top .search_wrap .search_group div button {background-size:17px auto;}
    header .nav_top .search_wrap .recommend {background-size:25px auto;}
    header .nav_top h1 img {max-width: 210px;}
    header .nav_top h1 {margin-bottom: 5px;}
    .HeaderWrap {height: 117px;}
    body {padding-top: 117px;}
    nav .SiteMapWrap {top:116px;}
    nav .MobileGnbWrap {padding-top: 54px;}
    nav .btn_member a {font-size: 15px;}
    nav .btn_all_menu.open ~ .btn_member {top: -8px;}
    nav .MobileGnbWrap h3 {font-size: 16px;padding:16px 0;}
    nav .MobileGnbWrap .content {border-radius:15px;padding:5px 20px;}
    nav .MobileGnbWrap .content dt {padding: 8px 0;}
    header .nav_top .search_wrap .search_group .SearchMini {top: -2px;}
    header .nav_top .search_wrap .search_group .SearchMini input {line-height:38px;}

    /* 서브헤더 */
    .SubHeaderWrap .SubTitleWrap {justify-content:flex-start;padding-top:15px;}
    .SubHeaderWrap .SubTitleWrap h2 {font-size: 22px;}
    .SubHeaderWrap .Anchor {top: 78px;}

    /* margin */
    .marginB60 {margin-bottom:50px;}

    /* button */
    .SizeA {line-height: 46px;}
}