@charset "UTF-8";
/* CSS Document */


/* Web Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');



/********* 변수 ************/
:root {
	
/* Font Family */
--noto: 'Noto Sans KR', sans-serif;

/* Color */
--pureblack: #000000;
--darkblack: #161B21;
--lightblack: #27303A;
--puregray: #777777;
--darkgray: #5C7186;
--darkgray-hover: #809FB8;
--lightgray: #809FB8;
--mediumgray: #CAD7E1;
--silvergray: #D9E1E7; 
--gloudygray: #F1F5F7;
--white: #FFFFFF;
--lightblue: #00B4FF;
--lightblue-hover: #4DCBFF;
--darkblue:#217EFD;
--darkblue-hover:#4D98FD;
--gloudyblue: #E7F7FD;
--gloudygreen: #E6F9EC;
--red:#E50012;
--purple:#7453ec;
--purple-hover:#9E87F2;
--green:#00C344;
--green-hover:#4DD57C;
--yellow: #FDF001;

	
/*Effect*/
--roundl:30px;
--roundm:24px;
--rounds:18px;
--roundxs:12px;
--roundxxs:4px;
--roundall:50%;
--bookshadow: 0 4px 12px -2px rgba(0, 0, 0 ,.2);
	

}


/* Reset CSS */
* {
  box-sizing: border-box;
  font-family: var(--noto);
  list-style: none;
  outline: none;
}
a {
  text-decoration: none;
  color: var(--darkblack);
  cursor:pointer;
}

h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
  font-weight: 400;
  line-height: 1.5em;
}
em {
  font-style: normal;
}

ul,dl,ol,li {padding:0;margin:0 }

/* Default CSS */
body {	  
  font-size: 16px;
  line-height: 1.5em;
  font-weight: 400;
  margin: 0;
  background-color: #fff;
  color: var(--darkblack);
}

#wrap {max-width:1370px;margin:0 auto;position: relative;}


/****************공통 Header********************/

.topnavi {background: var(--darkblue);display: flex;align-items: center;justify-content: space-between;height: 80px;position: relative;overflow: hidden;}
.naviblue {text-align: center;position: absolute;left: 50%;translate: -50%;}
/*.navilogo {color: var(--white);font-size: 36px;font-weight: 700;letter-spacing:-0.025em;}*/
.navilogo img {width:auto;height:48px;}
/*.navilogo em {display: inline-block;margin-left:8px; color: var(--white);font-size: 36px;line-height: 1; font-weight: 300;letter-spacing:-0.05em;}*/
.icohome {flex-shrink: 0;width: 60px;height: 60px;position: absolute;left: 20px;overflow: visible;}
.icohome img {width:inherit;height: inherit;}
.topsub {background: var(--white);padding:0 20px;display: flex;align-items: center;justify-content: space-between;height: 80px;overflow: hidden;}
.icolist {margin-right:auto;display:inline-block;width:60px;height: 60px;cursor: pointer;}
.icolist img {width:inherit;height: inherit;}
.icolist:hover .svg {filter: brightness(0) saturate(100%) invert(54%) sepia(42%) saturate(4094%) hue-rotate(168deg) brightness(103%) contrast(105%);}
.topsub_navi {display: flex;gap: 0px;align-items: center;justify-content: flex-start;flex-shrink: 0;position: relative;}
.topsub_navi li {flex:1;}
.topsub_navi li a {display: flex;width:90px;flex-direction: column;gap: 0px;align-items: center;justify-content: center;font-size: 12px;color: var(--darkgray);font-weight:400;}
.topsub_navi li:last-child a {width:70px;}
.topsub_navi .icon {flex-shrink: 0;width: 40px;height: 40px;}
.topsub_navi .icon.library {background:url(../img/ico_library.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi .icon.learning {background:url(../img/ico_learning.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi .icon.test {background:url(../img/ico_test.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi .icon.search {background:url(../img/ico_search.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi li:hover a {color: var(--lightblue);font-weight:500;}
.topsub_navi li:hover .icon.library {background:url(../img/ico_library_on.svg) no-repeat top left;}
.topsub_navi li:hover .icon.learning {background:url(../img/ico_learning_on.svg) no-repeat top left;}
.topsub_navi li:hover .icon.test {background:url(../img/ico_test_on.svg) no-repeat top left;}
.topsub_navi li:hover .icon.search {background:url(../img/ico_search_on.svg) no-repeat top left;}
.topsub_avatar {margin-left:15px;flex-shrink: 0;width: 60px;height: 60px;cursor: pointer;}
.topsub_avatar img {width: inherit;height: inherit;}
.topsub_list {border-radius: 6px;flex-shrink: 0;width: 60px;height: 60px;left: 20px;}

/*top 네이게이션 메뉴 활성화-헤더인클루드용*/
.header_include.library .topsub_navi .icon.library {background:url(../img/ico_library_on.svg) no-repeat top left;}
.header_include.library .topsub_navi li:nth-child(1) a {color: var(--lightblue);font-weight:600;}

.header_include.learning .topsub_navi .icon.learning {background:url(../img/ico_learning_on.svg) no-repeat top left;}
.header_include.learning .topsub_navi li:nth-child(2) a {color: var(--lightblue);font-weight:600;}

.header_include.readingtest .topsub_navi .icon.test {background:url(../img/ico_test_on.svg) no-repeat top left;}
.header_include.readingtest .topsub_navi li:nth-child(3) a {color: var(--lightblue);font-weight:600;}

.header_include.search .topsub_navi .icon.search {background:url(../img/ico_search_on.svg) no-repeat top left;}
.header_include.search .topsub_navi li:nth-child(4) a {color: var(--lightblue);font-weight:600;}

/*top 네이게이션 메뉴 활성화-전체인클루드용*/
.topsub_navi li.active .icon.library {background:url(../img/ico_library_on.svg) no-repeat top left;}
.topsub_navi li.active a {color: var(--lightblue);font-weight:600;}

.topsub_navi li.active .icon.learning {background:url(../img/ico_learning_on.svg) no-repeat top left;}
.topsub_navi li.active a {color: var(--lightblue);font-weight:600;}

.topsub_navi li.active .icon.test {background:url(../img/ico_test_on.svg) no-repeat top left;}
.topsub_navi li.active a {color: var(--lightblue);font-weight:600;}

.topsub_navi li.active .icon.search {background:url(../img/ico_search_on.svg) no-repeat top left;}
.topsub_navi li.active a {color: var(--lightblue);font-weight:600;}



/*서브페이지 헤더 타이틀*/
.top_subpage {background: var(--white);display:flex;align-items: center;justify-content: center;height: 84px;padding:0 20px;position: relative;}
.top_subpage .icoback {flex-shrink: 0;width: 60px;height: 60px;position: absolute;left: 20px;overflow: visible;}
.top_subpage .icoback img {width: inherit;height: inherit;}
.topsub_title {padding-bottom:5px !important;display: flex;padding:0 80px;justify-content: center;align-items: center;font-size: 24px;font-weight:400;letter-spacing: -0.025em;line-height:120%;text-overflow: ellipsis;overflow: hidden;word-break: break-word; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}


/**공통 Body**/
.content {background: var(--gloudygray);padding:40px 80px 80px;}
.content_inner {margin:0 auto;}
.page_title {padding:20px 0 40px;display: flex;align-items: center;justify-content: center;color:var(--lightblue);font-size: 40px;letter-spacing: -0.025em;font-weight: 700;}
.page_title.parent {padding:20px 0 40px;}
.sub_title {position: relative;margin:0 25px 50px;padding: 20px 48px;background: var(--gloudyblue);border-radius: var(--roundxs);display: flex;align-items: center;justify-content: center;color: var(--darkblack);font-size: 20px;font-weight: 500;gap:.5em}
.sub_title .icoback {position: absolute;top:50%;width:36px; height:36px;transform: translateY(-50%);left:12px;}
.sub_title .icoback img {width:inherit; height:inherit}
.sub_title_link {}
.sub_tit {margin-bottom:10px;padding-left:12px;font-size: 24px;font-weight: 500;text-align: left;}
.sub_tit.left {padding-left:0;}
.sub_tit em {font-size:18px;font-weight: 300; color:var(--darkgray)}
.sub_tit strong {color:var(--lightblue)}
.sub_tit_small {margin-bottom:10px;padding-left:12px;font-size: 20px;font-weight: 500;text-align: left;}
.sub_tit_small.w90 {width:90%; margin:0 auto 10px;}
.sub_tit_small.w80 {width:80%; margin:0 auto 10px;}
.page_titsub {text-align: center} /*페이지타이틀 아래 sub_desc들어갈때*/
.sub_desc { }
.sub_desc ul li {padding-left:20px;background:url(../img/bullet_circle24.svg) no-repeat top left;text-align: left;}
.sub_desc ul li .boldred {font-weight:500;color:var(--red);}
.sub_desc ul li .red {color:var(--red);}
.sub_desc ul li .boldblue {font-weight:500;color:var(--lightblue);}
.sub_desc ul li .blue {color:var(--lightblue);}
.sub_desc.center ul {display: inline-block;margin:0 auto;}
.sub_desc ul li.withimg {display: flex;justify-content: flex-start;align-items: center;gap:.4em;background:url(../img/bullet_circle34.svg) no-repeat top left;}
.sub_desc ul li.withimg .txtimg {height:2em}
.sub_desc ul li .txtrdbox.blue {display: inline-block;padding:.15em .85em;font-size:.875em;color:var(--white);background:var(--lightblue);border-radius: var(--roundl);}

.sub_desc.pgcopy {margin-bottom: 40px; text-align: center} 
.sub_desc.pgcopy ul {display: inline-block;margin:0 auto;}

.sub_notice { }
.sub_notice ul {display: inline-block;}
.sub_notice.block ul {display:block;}
.sub_notice ul li {position: relative;padding-left:30px;text-align: left;}
.sub_notice ul li .blue {color:var(--lightblue);}
.noti_red {position: absolute;top:0;left:0;width:24px;height:24px;font-size: 14px; color:var(--white);font-weight: 500; background: var(--red);border-radius: var(--roundall);display: flex;justify-content: center;align-items: center}

.sub_title.guide {margin:0 25px 25px;}
.sub_guide{margin-bottom: 40px; text-align: center;color:var(--darkgray);font-weight: 300}
.sub_guide.blue {color:var(--darkblue);}

.whitebox_arrange {display: flex;flex-direction: column;gap:30px;} /*흰색박스 2개 이상 세로배치 시 간격조정*/
.boxl_white {padding:40px 40px;background:var(--white);border-radius: var(--roundl);text-align: center}
/*.boxl_white.wide {padding:40px 60px;}
.boxl_white.w75 {width:75%;margin: 0 auto;}
.boxl_white.bottom {margin-bottom:30px;}*/

.top_marg30 {margin-top:30px}
.top_marg60 {margin-top:60px}
.bottom_marg10 {margin-bottom:10px}
.bottom_marg20 {margin-bottom:20px}
.bottom_marg30 {margin-bottom:30px}
.bottom_marg40 {margin-bottom:40px}
.bottom_marg60 {margin-bottom:60px}
.w75 {width:75%;margin: 0 auto;}


/**공통 LNB**/
.lnb_left, .lnb_right {padding:25px 0;width:280px;background:var(--white);border:2px solid var(--silvergray);border-radius: var(--roundl);font-size:20px;font-weight:400;z-index:10;transition: .5s;}
.lnb_inner {overflow: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;}
.lnb_left .btn-close, .lnb_right .btn-close {display:none;height:25px;margin-bottom:15px;text-align: center}
.lnb_left a div {padding-left:20px;display:flex;width:100%;height:60px;justify-content:flex-start;align-items:center;gap:10px}
.lnb_left a div:hover, .lnb_right a div:hover {background:var(--gloudygray);color:var(--lightblue);}
.lnb_left a div:hover .svg {filter: brightness(0) saturate(100%) invert(54%) sepia(42%) saturate(4094%) hue-rotate(168deg) brightness(103%) contrast(105%);}
.lnb_right a div {display:flex;width:100%;height:60px;justify-content:center;align-items:center;}
.lnb_right .last {color:var(--red);}
.lnb_left a div em {display: inline-block;margin-top:-.25em;color:var(--red);font-size:2em}

.lnb_left {position:absolute;top:155px;left:0;z-index: 10;opacity: 0;transition: .5s;visibility: hidden;}
.lnb_left.active {opacity: 1; visibility: visible;}
.lnb_right {position:absolute;top:155px;right:0;z-index: 10;opacity: 0;transition: .5s;visibility: hidden;}
.lnb_right.active {opacity: 1; visibility: visible;}
.overlay {position: fixed;width: 100%;height: 100vh;top: 0;left: 0;opacity: 0;transition: .5s;visibility: hidden;}
.overlay.active {opacity: 1;visibility: visible;}


/**공통 버튼**/
.btn_area {display: inline-block;}
.btn_darkblue {display:flex;padding:.75em .5em .75em 1.75em;justify-content: center;align-items: center;background:var(--darkblue);border-radius: var(--roundxs);font-size:20px;line-height: 1; font-weight:300;color:var(--white);letter-spacing: -0.025em;gap:1.5em;transition: .3s}
.btn_darkblue:hover {background:var(--darkblue-hover)}
.btn_purple {display:flex;padding:.75em .5em .75em 1.75em;justify-content: center;align-items: center;background:var(--purple);border-radius: var(--roundxs);font-size:20px;line-height: 1; font-weight:300;color:var(--white);letter-spacing: -0.025em;gap:1.5em;transition: .3s}
.btn_purple:hover {background:var(--purple-hover)}
.btn_purple em {color:var(--yellow)}
.btn_roundblue {display:flex;height:44px;padding:.75em .2em .75em;justify-content: center;align-items: center;background:var(--lightblue);border-radius:var(--roundl);font-size:16px;line-height: 1; font-weight:300;color:var(--white);letter-spacing: -0.025em;transition: .3s}
.btn_roundblue:hover {background:var(--lightblue-hover);}
.btn_roundgreen {display:flex;height:44px;padding:.75em .2em .75em;justify-content: center;align-items: center;background:var(--green);border-radius:var(--roundl);font-size:16px;line-height: 1; font-weight:300;color:var(--white);letter-spacing: -0.025em;transition: .3s}
.btn_roundgreen:hover {background:var(--green-hover);}
.btn_roundgray {display:flex;height:44px;padding:.75em .2em .75em;justify-content: center;align-items: center;background:var(--darkgray);border-radius:var(--roundl);font-size:16px;line-height: 1; font-weight:300;color:var(--white);letter-spacing: -0.025em;transition: .3s}
.btn_roundgray:hover {background:var(--darkgray-hover);}
.btn_txtdarlbue {display: inline-block;font-weight: 400;color:var(--darkblue)}
.btn_desc {padding-top:30px;}
.btn_desc.btmargin {margin-bottom:80px;}
.btn_linegray {display:flex;padding:.75em 1em .75em 2.5em;justify-content: center;align-items: center;background:var(--white);border-radius: var(--roundxs);border:2px solid var(--silvergray);font-size:20px;line-height: 1; font-weight:400;color:var(--lightblack);letter-spacing: -0.025em;gap:2em;transition: .3s}
.btn_linegray:hover {background:var(--darkgray-hover);color:var(--white);border-color:var(--darkgray-hover);}
.btn_linegray:hover .svg {filter: brightness(0) saturate(100%) invert(96%) sepia(0%) saturate(41%) hue-rotate(29deg) brightness(120%) contrast(100%);}


/*******Form & Table******/
input[type='text'], input[type='password'], input[type='number'] {padding:10px 20px;height:60px;border:2px solid var(--silvergray);border-radius: var(--roundxs);font-weight: 400;font-size:18px;font-weight: 400;color:var(--lightblack);align-self: stretch}

input[type='radio'] {-webkit-appearance: none; -moz-appearance: none;appearance: none;width: 24px;height: 24px;border: 2px solid var(--mediumgray); border-radius:var(--roundall);outline: none; cursor: pointer;}
input[type='radio']:checked {border: 8px solid var(--lightblue)}

input[type=checkbox]{display: none;}
input[type=checkbox] + label {padding-left:32px;display:inline-block;cursor: pointer;cursor: pointer;background: url(../img/form_check.svg) no-repeat top left;background-size: 24px 24px;}
input[type=checkbox]:checked + label {background: url(../img/form_check_on.svg) no-repeat top left;background-size: 24px 24px;}

select {width:100%;height:60px;padding:10px 30px 10px 20px;background:var(--white);border:2px solid var(--silvergray);border-radius: var(--roundxs);-webkit-appearance: none;-moz-appearance: none;appearance: none;font-family: var(--noto); font-size:18px;color:var(--lightblack);background-image: url(../img/formicon_below.png);  background-repeat: no-repeat;  background-position: 96% center;  background-size: 20px;}
.select_box select::-ms-expand {display: none;}


/*기본 table - 개별 cell크기는 해당 요소에서 적용*/
.table_box {border:1px solid var(--silvergray);border-radius:var(--roundm);}
.table_box.bottom {margin-bottom:30px}
.table-row {display: flex;width:100%;padding:1em 2em;justify-content: center;align-items: center;gap:1em;border-bottom: 1px solid var(--silvergray);}
.table-row.thead {font-weight:500;}
.table-row.last {border-bottom:none;}
.table-row .cell .boldred {color:var(--red);font-weight:700;}
.table-row .cell .red {color:var(--red);}
.table-row .cell .boldblue {color:var(--lightblue);font-weight:700;}
.table-row .cell .bold {font-weight:500;}


/*paging*/
.paging_box {display: inline-block}
.paging_box.bottom {margin-bottom:60px;}
.table_paging {display: flex;gap: 12px;align-items:center;justify-content:space-between;}
.paging_btn {display: flex;gap: 6px;align-items:center;}
.paging_btn a {width:30px;height:30px;}
.paging_btn a img {width:inherit;height: inherit;}
.paging_number {display: flex;padding:0 40px;gap: 10px;}
.paging_number a {display: inline-block;padding:5px 10px;font-size:14px;}
.paging_number a.active {font-weight:600;color:var(--lightblue);}

/*회색배경 테이블 - 개별 cell크기는 해당 요소에서 적용*/
.graytable {margin-bottom: 10px; display: flex;gap: 2px;align-items: center;justify-content: flex-start;}
.graytable .cell{padding:.5em 2em;background:var(--gloudygray);}

/***********책 리스트**************/
/*책이 없을 때 */
.nodata {display: flex;justify-content: center;align-items:center;height:200px;font-size: 18px;color:var(--darkgray);}
.nodata_txt {display: flex;justify-content: center;align-items:center;margin-bottom:60px;height:200px;font-size: 18px;color:var(--darkgray);}

/*총수량,책정렬 부분 */
.listtop {display: flex;margin:20px 25px 50px;justify-content: space-between;align-items: center;border-bottom:1px solid var(--silvergray);}
.listtop .list_sum {flex:1;text-align: left}
.listtop .list-order ul {display:table;}
.listtop .list-order ul li {display:table-cell;vertical-align: center;}
.listtop .list-order ul li a {display:inline-block;padding:0 10px;}
.listtop .list-order ul li.active a {color:var(--lightblue);font-weight:500;}
.listtop .list_type ul {display:table;}
.listtop .list_type ul li {display:table-cell;vertical-align: center;}
.listtop .list_type ul li a {display:inline-block;padding:0 2px;}
.listtop .list_type ul li.active .svg {filter: brightness(0) saturate(100%) invert(65%) sepia(76%) saturate(6609%) hue-rotate(201deg) brightness(99%) contrast(102%);}

/*사용안함 --Grid View - flex 모듈로변경후 사용안할 예정***
.grid_area {padding:40px 20px 30px;background:var(--white);border-radius: var(--roundl);}
.grid_area.wide {padding:40px 40px 30px;}
.book_grid {overflow: hidden;}
.book_withtxt {float:left;width:20%;margin-bottom:40px;}
.book_img {display:flex;width:100%;height:250px;justify-content: center;align-items: flex-end;}
.book_img img {width:160px;}
.book_desc {padding:5px 10px 0;text-align:left; vertical-align: top}
.book_desc.center {text-align:center;}
.book_grid:after {content: '';display: block;clear: both;}*/

/*Grid View - module - flex이용 오른쪽 여백이 없어지지않는 문제--*/
.grid_module_area {display: flex;width:98%;margin:0 auto;align-items: center;justify-content: center;overflow: hidden;}
.grid_module {display:flex;justify-content:flex-start;align-items:flex-start;align-content:stretch;flex-wrap: wrap; gap:0;width:100%}
.grid_set {width:20%;margin-bottom:50px;}
.grid_book {display: flex;justify-content: center;align-items: flex-end;min-height: 230px}
.grid_book img {flex:0 0 auto; width:160px;}
.grid_status {}
.grid_status ul {display: flex;justify-content: center;align-items: flex-start;gap:12px;}
.grid_status ul li {flex-shrink:0;width:36px; height:36px;}
.grid_status ul li img, .grid_status ul li a, .grid_status ul li a img {width:inherit;height: inherit}
.grid_desc {flex:0 0 auto;padding:0 20px;text-align: left;}

/*List View - flex이용 오른쪽 여백이 없어지지않는 문제*/
.list_module_area {width:90%;margin:0 auto;}
.list_module {display:flex;padding:30px 0;justify-content:center;align-items:flex-start;gap:60px;border-bottom: 1px solid var(--silvergray);}
.list_set {width:160px;}
.list_book {}
.list_book img {width:160px;}
.list_status {}
.list_status ul {display: flex;justify-content: center;align-items: flex-start;gap:20px;}
.list_status ul li {flex-shrink:0;width:36px;height:36px;}
.list_status ul li img, .list_status ul li a, .list_status ul li a img {width:inherit;height: inherit}
.list_data {flex:1;text-align: left;}
.list_title {margin:10px 0 30px;font-size:18px;font-weight:500;}
.list_info {margin-bottom:10px;display: flex;justify-content: space-between;}
.list_info .prop  {width:200px;}
.list_info .data  {flex:1}

/*Grid,List e 아이콘*/
.grid_book a, .list_book a {position:relative;}
.learn_icon {position:absolute;display:inline-block;bottom:0;right:-6px;padding:.1em .4em .3em;font-size:1.6em;line-height: 1; background: var(--darkblue);font-weight:500;color:var(--white);border-radius: var(--roundxxs);box-shadow: var(--bookshadow)}

/*List View - flex 모듈로변경후 사용안할 예정***
.list_area {padding:40px 20px 30px;background:var(--white);border-radius: var(--roundl);}
.book_list {overflow: hidden;padding:30px 0;border-bottom:1px solid var(--silvergray);text-align: left;}
.book_list:first-child {padding-top:0;}
.book_list .book_withtxt {width:20%;margin-bottom:0;}
.book_list .book_data {float:left;margin-left:40px;}
.book_list .book_data .book_title {margin:10px 0 30px;font-size:18px;font-weight:500;}
.book_list .book_data .book_info {margin-bottom:10px;display: flex;justify-content: space-between;}
.book_list .book_data .book_info .prop {width:200px;}
.book_list .book_data .book_info .data {flex:1}*/



/*********탭 메뉴*********/
/*1depth tab*/
.tabmenu {margin: 0 auto 60px;}
.tabmenu.tab3 {width:600px;}
.tabmenu.tab2 {width:400px;}
.tabmenu.tab2wide {width:440px;}
.tabmenu ul {display: flex;justify-content: center;align-items:center;}
.tabmenu ul li{flex:1;}
.tabmenu ul li a {display: flex;justify-content:center;align-items:center;gap:10px;border-bottom:3px solid var(--silvergray);}
.tabmenu ul li .tabicon {width:40px;height:40px;}
.tabmenu ul li .tabicon img {width:inherit;height: inherit}
.tabmenu .tabtxt {font-size:24px;font-weight:500;color:var(--darkgray);}
.tabmenu ul li.active a {border-bottom:3px solid var(--lightblue);}
.tabmenu ul li.active .svg {filter: brightness(0) saturate(100%) invert(54%) sepia(42%) saturate(4094%) hue-rotate(168deg) brightness(103%) contrast(105%);}
.tabmenu ul li.active .tabtxt {color:var(--lightblue);font-weight:600;}
.tabmenu ul li.active .svg.red {filter: invert(56%) sepia(34%) saturate(1056%) hue-rotate(314deg) brightness(101%) contrast(112%);}
.tabmenu.noicon .tabtxt {padding-bottom:10px;font-weight:500;} /*아이콘없을경우*/

/*2depth tab*/
.tabmenu2 {margin: 0 auto 60px;}
.tabmenu2.tab3 {width:480px;}
.tabmenu2 ul {display: flex;justify-content: center;align-items:center;}
.tabmenu2 ul li {flex:1;}
.tabmenu2 ul li a {display: flex;justify-content:center;align-items:center;gap:10px;border-bottom:3px solid var(--silvergray);}
.tabmenu2 .tabtxt {padding-bottom:8px;font-size:22px;font-weight:500;color:var(--darkgray);}
.tabmenu2 ul li.active a {border-bottom:3px solid var(--lightblue);}
.tabmenu2 ul li.active .tabtxt {color:var(--lightblue);}

/*3depth tab*/
.tabmenu3 {margin: 0 auto 40px;}
.tabmenu3 ul {display: flex;justify-content: center;align-items:flex-start; align-content:flex-start;flex-wrap: wrap;gap:10px}
.tabmenu3 ul li {display: inline-block}
.tabmenu3 ul li a {padding:0 2.5em;display: flex;justify-content:center;align-items:center;background:var(--white);border-radius: var(--roundl);border:1px solid var(--silvergray);height: 44px;font-weight: 500;}
.tabmenu3 ul li.active a{background:var(--lightblue);color:var(--white);border-color:transparent;}

/****************e러닝 메인********************/

.user_area {display:flex;margin-bottom:70px;width:100%;justify-content:space-between;align-items: center;gap:60px}
.user_info {flex:2.5;padding:20px;background: var(--white);border-radius: var(--roundm);text-align:center;}
.current_user {margin-bottom:10px;display:flex;justify-content:center;align-items: center;gap:45px}
.current_user .avatar {width:150px;height:150px;}
.current_user.nouser {margin-bottom:30px;}
.current_user.nomargin {margin-bottom:0;}
.current_user.nouser .avatar {width:120px;height:120px;}
.current_user .avatar img {width: inherit;height: inherit;}
.current_user .info {text-align: left}
.current_user .info span{display: block;color: var(--lightblack);font-size: 18px;}
.current_user .info .current {margin-bottom: 6px;}
.current_user .info .name {margin-bottom: 15px;font-size: 32px;font-weight:700;}
.current_user .info .name em {font-size: 24px;font-weight:400;}
.current_user .info .group {color: var(--darkgray)}
.current_info {padding:20px 0;display:flex;justify-content:center;align-items: center;gap:45px;background: var(--gloudygray);border-radius: var(--roundm);}
.book_txt {font-size: 24px;color: var(--lightblack);}
.book_txt span {display: block;text-align: center}
.book_txt .txt {margin-bottom: 25px;font-weight:400;letter-spacing:-0.025em;}
.book_txt .sum {font-size: 48px;font-weight:700;color: var(--lightblue);letter-spacing:-0.025em;}
.book_txt .sum em {font-size: 24px;font-weight:400;color: var(--lightblack);}
.goal_info {flex:2}
.main_tit {margin-bottom:6px;display: flex;justify-content: flex-start;align-items: center;font-size: 24px;font-weight:400;}
.main_tit .icon {display: inline-block;width:48px;height:48px;}
.main_tit .icon img {width:inherit;height:inherit;}
.chart_area {margin-top:20px;display:flex;justify-content:flex-start;align-items: center;gap:45px;}
.chart_area .chart {position: relative;width:240px;height:240px}/*도넛 차트*/
.donut_single {width:inherit;height:inherit;border-radius: 50%;position: relative;}
.donut_single .donut_core {position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);width:87.5%;height:87.5%;background:var(--white);border-radius:var(--roundall);display: flex;justify-content: center;align-items: center;}	
.donut_single .data_percent {font-size: 64px;font-family: var(--noto);font-weight: 700;color:var(--darkblack);letter-spacing:-2px;}
.donut_single .data_percent em {font-size: .5em;}
.chart_area .chart_txt {position: relative;display: flex;justify-content: center;align-items: center;font-size:36px;font-weight:700;color:var(--lightblue);gap:10px}
.chart_area .chart_txt .btn_edit {display: inline-block;width:36px;height:36px;}
.chart_area .chart_txt .btn_edit img {width:inherit;height:inherit;}
.time_area {position: absolute;top:40px;left:-10px;z-index: 10;opacity: 0;transition: .5s;visibility: hidden;}
.time_area.active {opacity: 1; visibility: visible;}
.time_box {display: inline-block;width:180px;} 
.time_overay {position: fixed;width: 100%;height: 100vh;top: 0;left: 0;opacity: 0;transition: .5s;visibility: hidden;}
.time_overay.active {opacity: 1;visibility: visible;}
.moreview_area {}
.btn_moreview {display:flex;margin:0 auto;width:200px;height:36px;justify-content:center;align-items:center;gap:40px;border:1px solid var(--silvergray);border-radius:var(--rounds); font-size: 16px;}
.btn_moreview img {height:8px}

/*이러닝메인 배너영역*/
.main_banners {margin-bottom:50px;}
.main_banners ul {display:flex;flex-wrap: wrap;width:100%;justify-content:space-between;align-items: center;}
.main_banners ul li {width:48.5%; flex-grow: 0;padding-bottom: 24px;}
.main_banners ul li a img {width:100%;border-radius: var(--rounds);cursor:pointer;transition: transform .5s;}
.main_banners ul li a:hover img {transform:scale(1.05);box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}


/*********MY라이브러리**********/
.select_area {margin-bottom:50px;}
.select_box {display: inline-block;width:300px;}



/****책 선택화면 book_view*****/
.step_area {padding-top:30px;display: flex;justify-content: space-between;align-items: flex-start;gap:90px;}
.book_view {padding-top:2.3em;width:346px;}
.step_area .book_img {display: inline-block;width:inherit;}
.step_area .book_img img {width:inherit;box-shadow: var(--bookshadow);}
.step_area .book_status ul {display: flex;justify-content:center;align-items: center;gap:20px;}
.step_area .book_status ul li {width:80px;height:90px;}
.step_area .book_status ul li img, .book_status ul li a, .book_status ul li a img {width:inherit;height: inherit}
.activity_view {flex:1;}
.activity_box {display:flex;flex-direction: column;margin-bottom: 40px; min-height:120px;padding:35px 40px 10px;background:var(--white);border-radius: var(--roundl);text-align: center;overflow: hidden;}
.activity_box .row {flex:0 0 auto;width:100%;margin:0 auto 20px;display:flex;justify-content: flex-start;align-items: flex-start;gap:0;}
.activity_box .row:last-child .stickerset {margin:0 0 10px 0;}
.stickerset {flex:0 0 auto;display:flex;width:25%;flex-direction: column;align-items: center}
.sticker {width:120px;height:120px}
.sticker a, .sticker a img, .sticker img{width:inherit;height: inherit;}
.sticker.goal {background: url(../img/bge_goal_on.png) no-repeat top 1px left 1px;background-size:118px 118px; }
.sticker.read {background: url(../img/bge_read_on.png) no-repeat top 1px left 1px;background-size:118px 118px; }
.sticker.video {background: url(../img/bge_video_on.png) no-repeat top 1px left 1px;background-size:118px 118px; }
.sticker.rhyme {background: url(../img/bge_rhyme_on.png) no-repeat top 1px left 1px;background-size:118px 118px; }
.sticker.words {background: url(../img/bge_words_on.png) no-repeat top 1px left 1px; background-size:118px 118px;}
.sticker.gotit {background: url(../img/bge_gotit_on.png) no-repeat top 1px left 1px;background-size:118px 118px;}
.sticker.say {background: url(../img/bge_say_on.png) no-repeat top 1px left 1px;background-size:118px 118px;}
.sticker.write {background: url(../img/bge_write_on.png) no-repeat top 1px left 1px; background-size:118px 118px;}
.sticker.quiz {background: url(../img/bge_quiz_on.png) no-repeat top 1px left 1px;background-size:118px 118px; }
.sticker.commentary {background: url(../img/bge_commentary_on.png) no-repeat top 1px left 1px;background-size:118px 118px; }
.sticker.vocab {background: url(../img/bge_vocab_on.png) no-repeat top 1px left 1px; background-size:118px 118px;}
.sticker.print {background: url(../img/bge_print_on.png) no-repeat top 1px left 1px; background-size:118px 118px;}
.stickerset:hover .sticker img{opacity: 0;}
.book_copyright {margin-top:60px;font-size: 13px;line-height:120%;font-family: var(--noto);font-weight: 300;color:var(--darkgray);}

/*****책선택화면 라이브러리/이러닝링크*****/
.switch_btn {margin:30px auto 0;}
.switch_btn a {display: flex;justify-content: center;align-items: center;gap:4px;}
.switch_btn a .icon {width:36px;height:36px;}
.switch_btn a .icon img {width:inherit;height:inherit;transition: transform 0.3s ease;}
.switch_btn a .txt {color:var(--darkblue);letter-spacing: -0.05em;transition: transform 0.3s ease;}
.switch_btn a:hover .icon .svg, .switch_btn a:active .icon .svg, .switch_btn a:focus .icon .svg {filter: brightness(0) saturate(100%) invert(36%) sepia(99%) saturate(1664%) hue-rotate(201deg) brightness(98%) contrast(103%);}
.switch_btn a:hover .txt, .switch_btn a:active .txt, .switch_btn a:focus .txt  {transform: scale(1.05);}

/*****티쳐가이드 링크*****/
.tcguide_btn {margin:30px auto 0;display: flex;justify-content: center;align-items: center;gap:8px;}
.tcguide_btn a {padding:.5em 1em;display: flex;justify-content: center;align-items: center;gap:4px;border:1px solid var(--purple);border-radius: var(--roundxs)}
.tcguide_btn a .icon {width:44px;height:44px;}
.tcguide_btn a .icon img {width:inherit;height:inherit;transition: transform 0.3s ease;}
.tcguide_btn a .txt {color:var(-darkblack);line-height:120%;transition: transform 0.3s ease;}
.tcguide_btn a:hover {background: var(--purple)}
.tcguide_btn a:hover .icon .svg, .switch_btn a:active .icon .svg, .switch_btn a:focus .icon .svg {filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(2396%) hue-rotate(352deg) brightness(118%) contrast(101%);}
.tcguide_btn a:hover .txt, .switch_btn a:active .txt, .switch_btn a:focus .txt  {transform: scale(1.05);color:var(--white)}

/****학습내역 book_history*****/
.history_view {display: flex;margin-bottom:60px;width:100%;justify-content: center;align-items:center;gap:60px;}
.history_book {width:300px;}
.history_book img {width:inherit}
.history_box {flex:1}
.history_box .table-row .cell:nth-child(1) {flex:1.5;text-align: left}
.history_box .table-row .cell:nth-child(2) {flex:1;}
.history_box .table-row .cell:nth-child(3) {flex:1;}
.history_box .table-row.last .cell:nth-child(1) {flex:3;text-align: left}
.history_box .table-row.last .cell:nth-child(2) {flex:1.5;text-align: right}
.history_box .table-row .cell .boldred {font-size:20px;color:var(--red);font-weight:700;}
.graytable .cell:nth-child(2) {color:var(--red);font-weight:600;}

/*정오표 테이블*/
.ox_area {margin-bottom: 30px; overflow: hidden;display:flex;justify-content: flex-start;align-items: flex-start;align-content: flex-start;gap:-1px;flex-wrap: wrap;}
.ox_set {align-self: stretch;width:10%;max-width:50px; margin-right:-1px;display: flex;flex-direction: column;align-items:flex-start;gap:0;}
.ox_set .num {flex:1;align-self: stretch;padding:.5em 0;border: 1px solid var(--silvergray);}
.ox_set .ox {flex:1;align-self: stretch;padding:.5em 0;border:1px solid var(--silvergray);border-top:0;}


/*******MY학습활동******/
/*학습활동 기간 조회*/
.lms_inquiry {display: flex;margin: 0 auto 60px;padding:30px 40px;width:80%;justify-content: center;align-items: flex-start;border:1px solid var(--silvergray);border-radius: var(--roundm);gap:30px;}
.inquiry_tit {flex:1.5;font-weight: 500}
.inquiry_period{flex:5}
.period_select {display: flex;margin-bottom:10px; justify-content: flex-start;align-items: center; flex-wrap: wrap; gap:4px;}
.period_select .date {border-radius:var(--roundxxs);border:1px solid var(--silvergray);padding: .25em 1em ;display: flex;justify-content: center;align-items: center;font-size: 14px;font-weight: 400;}
.period_select .date.active {background:var(--darkblack);color:var(--white);border-color:transparent;}
.date_select .date_box {display: flex;margin-bottom:10px;justify-content: flex-start;align-items: center; flex-wrap: wrap; gap:6px;font-size: 16px;font-weight: 400;}
.date_select .txt {text-align: left;font-size:14px}
/*****캘린더 날짜 선택****/
input[type='date']{position: relative;width:200px;height: 44px;padding: 0 36px 0 8px;background: #fff url(../img/inquiry_calendar.svg) no-repeat 97% center;background-size:30px 30px;color:var(--darkblack);font-family:var(--noto);font-size:16px;border:1px solid var(--silvergray);border-radius: var(--roundxxs);cursor:pointer;appearance: none;-webkit-appearance: none;}  /*캘린더의 영역*/
input[type='date']::-webkit-clear-button, input[type='date']::-webkit-inner-spin-button { display: none;appearance: none;-webkit-appearance: none;opacity: 0;} /*캘린더 기본아이콘 제거*/
input[type='date']::-webkit-calendar-picker-indicator {position:absolute;left: 0;top: 0;width: 100%;height: 100%;background:transparent;background-color:transparent;color: transparent;cursor:pointer;} /*인풋타입 전체로 클릭영역 확장,기본아이콘투명처리*/
/*input[type='date']::before {content: attr(data-placeholder);width: 100%;} placeholder 값 적용
input[type='date']:valid::before {display: none;}  유효값 입력시 placeholder 제거*/
.date_box label{font-size:0;line-height:1;text-indent:-999}

/*학습활동 조회 결과*/
.result_area {display: flex;margin:0 auto 40px; padding:30px 50px;flex-wrap:wrap;width:90%;justify-content: center;align-items: center;gap:60px;border:1px solid var(--silvergray);border-radius: var(--roundm);}
.result_area.certificate {align-items:flex-start;width:80%;gap:20px;margin:0 auto 10px;}

/*학습활동결과*/
.dataset_area {display: flex; justify-content:center;align-items: flex-start;flex-wrap:wrap;gap:30px;}
.dataset_area.column {display: flex; flex-direction: column; justify-content:flex-start;align-items: flex-start;flex-wrap:wrap;gap:30px;}
.dataset_area .data_set, .dataset_area.column .data_set {flex:1;min-width:240px;display:flex;justify-content: flex-start;align-items: center;gap:16px;}
.dataset_area .dataicons {width:60px; height: 60px}
.dataset_area .dataicons img {width:inherit; height:inherit}
.datatxt {flex:1;text-align: left;}
.datatxt .type {font-size:14px;}
.datatxt .sum {font-size:20px;font-weight:500;}
.datatxt .sum em {font-weight:300}
.datatxt .desc {font-size:16px;}
/*파이차트*/
.piechart_area {flex:1;display: flex;justify-content: center;align-items: center;gap:60px}	
.piechart_area .pie {width:220px;height:220px;}
.piechart_area .pie .pie_wheel {width:inherit;height: inherit;border-radius: var(--roundall);background:var(--gloudygray);}
.piechart_area .pie_desc {display: flex;flex-direction: column;align-items: flex-start;gap:4px;}
.piechart_area .pie_desc .desc {margin-bottom: 6px}
.piechart_area .pie_desc .desc span {display: inline-block;margin-right: 4px; width:.875em;height:.875em;border-radius: var(--roundall);}
.piechart_area .pie_desc .desc.reading span {background:#F67895;}
.piechart_area .pie_desc .desc.listening span {background:#41BFF3;}
.piechart_area .pie_desc .desc.watching span {background:#A17CF4;}
/*인증서항목안내*/
.result_area.certificate .dataset_area {flex:4; display: flex; justify-content:center;align-items: flex-start;flex-wrap:wrap;gap:30px;}
.result_area.certificate .cert_medal {flex:1;}
.result_area.certificate .cert_medal img {width:100px}
.result_area.certificate .data_set {flex:1;min-width:240px;display:flex;justify-content: flex-start;align-items: center;gap:10px;flex-wrap:wrap;}
.result_area.certificate .dataicons {width:50px; height: 50px}
.result_area.certificate .dataicons img {width:inherit; height: inherit; viewBox:0 0 inherit inherit;}

/*인증서 출력화면*/
.pdf_area {margin: 0 auto 20px;width:850px;border:1px solid var(--silvergray); border-top:0;color:var(--pureblack);}
.cert_title {margin-bottom:60px;height: 60px;background: var(--darkblue);border-radius: 0px 0px 60px 60px;padding: 10px;display: flex;align-items: center;justify-content: center;color: var(--white);font-size: 32px;font-weight: 700;}
.cert_userarea {display: flex;margin:0 auto 40px;padding:25px 55px;width:75%;justify-content: center;align-items: center;gap:20px;background: var(--gloudyblue);border-radius: var(--roundl);}
.cert_avatar {flex:0 0 auto;width:150px; height:150px;}
.cert_avatar img {width:inherit; height:inherit;}
.cert_userinfo {flex:1;text-align: left;}
.cert_userinfo .name {margin-bottom:15px; font-size: 32px;line-height:130%;font-weight: 700;}
.cert_userinfo .name em {font-size:24px;font-weight:300;}
.cert_userinfo .group {font-size: 18px;font-weight:300;color:var(--puregray);}
.cert_userarea .cert_medal {flex:0 0 auto;}
.cert_userarea .cert_medal img {width:86px}
.cert_desc {margin-bottom: 60px; font-size: 18px;font-weight: 300;text-align:center;}
.cert_period {margin-bottom: 10px;font-size: 24px;font-weight: 600;text-align:center;}

.pdf_result {display:flex; margin:0 60px 60px;justify-content:center;align-items:flex-start;align-content: flex-start;flex-wrap:wrap;gap:16px;}
.pdf_result .data_set {flex:1;padding:20px 25px;min-width:320px;display:flex;justify-content: flex-start;align-items: center;gap:16px;border:1px solid var(--silvergray);border-radius:var(--roundm);}
.pdf_result .dataicons {width:60px; height: 60px}
.pdf_result .dataicons img {width:inherit; height: inherit;viewBox:0 0 inherit inherit;}
.cert_date {margin-bottom:5px;font-size: 20px;line-height: 150%;font-weight: 400;text-align:center;}
.cert_logo {margin-bottom:25px;text-align:center;}
.cert_logo img {width:240px;}

/*MY리딩테스트*/
.gotest_box {margin:40px auto 60px;padding: 25px 50px 25px 50px;display: flex;width:60%;flex-direction: column; align-items: center;justify-content: flex-start;gap: 25px;border-radius: var(--roundm);}
.gotest_box.green {background:var(--gloudygreen);}
.gotest_box.blue {background:var(--gloudyblue);}
.gotest_tit {text-align: center;font-size: 24px;font-weight: 700;position: relative;align-self: stretch;display: flex;align-items: center;justify-content: center;}
.gotest_tit.green {color:var(--green);}
.gotest_tit.blue {color:var(--lightblue);}
.gotest {display: flex;flex-direction: row;gap: 30px;align-items: center;justify-content: flex-start;flex-wrap: wrap;align-content: center;align-self: stretch;flex-shrink: 0;position: relative;overflow: hidden;}
.gotest_img {flex-shrink: 0;width: 270px;height: 190px;}
.gotest_txt {flex:1;display: flex;flex-direction: column;gap: 30px;align-items: flex-start;justify-content: flex-start;flex-shrink: 0;width: 150px;}
.gotest_txt .txt {text-align: left;font-weight: 400;}
.gotest_txt .btn {align-self: stretch} 
.testhistory_box {width:90%;margin:0 auto;}
.testhistory_box .table-row .cell:nth-child(1) {flex:1.5;}
.testhistory_box .table-row .cell:nth-child(2) {flex:1;}
.testhistory_box .table-row .cell:nth-child(3) {flex:1;}
.testhistory_box .table-row .cell:nth-child(4) {flex:1;}

/*검색*/
.search_area {display: flex; width:45%;margin:0 auto 30px;gap: 10px;align-items: center;justify-content: center;}
.search_area.margin60 {margin-bottom:60px;}
.search_area .form {flex:1}
.search_area .btn {width:60px}
input.searchbox {padding:10px 20px;width:100%;height:60px;border:2px solid var(--silvergray);border-radius: var(--roundxs);font-weight: 400;font-size:18px;font-weight: 400;}
.btn_search {width:60px;height:60px;display: flex;justify-content: center;align-items:center;background:var(--darkblue);border-radius: var(--roundxs);}
.btn_search img {width:24px;height:24px;}
.search_subtit {margin-bottom:60px;display:flex;justify-content: flex-start;align-items: center;gap:20px}
.search_subtit .icoback {}
.search_subtit .icoback img {height:36px}

/*인기주제*/
.topic_area {display: flex;justify-content: flex-start;align-items: flex-start;align-content: flex-start;flex-wrap: wrap;gap:80px 0 ;}
.topic_set {width:20%;display: flex;flex-direction: column;align-items: center;justify-content: flex-start}
.topic_img {flex: 0 0 auto;width:160px;height: 160px;}
.topic_img a, .topic_img a img {width:inherit;height: inherit} 
/*.topic_img a img {border:1px solid var(--silvergray);border-radius:var(--rounds) }*/
.topic_txt {text-align: center;font-weight: 400;}


/******이용권등록/관리******/
/*이용권 리스트*/
.codehistory_box {width:90%;margin:0 auto;}
.codehistory_box .table-row .cell:nth-child(1) {flex:1.5;}
.codehistory_box .table-row .cell:nth-child(2) {flex:1;}
.codehistory_box .table-row .cell:nth-child(3) {flex:1;}
.codehistory_box .table-row .cell:nth-child(4) {flex:1;}
.codehistory_box .table-row .cell:nth-child(5) {flex:1;}
.codehistory_box .table-row .cell em {display:none;opacity: 0}
.codehistory_box .table-row .cell .icon_q {display:inlie-block;padding:0 .45em; color:var(--red);border:1px solid var(--red);border-radius: var(--roundall);}
/*이용권 등록*/
.code_box {width:60%;margin:0 auto 60px;background:var(--gloudygray);border-radius: var(--roundm);padding: 35px 60px 35px 60px;display: flex;flex-direction: column;gap: 20px;align-items: center;justify-content: flex-start;}
.code_form {align-self: stretch}

/**********자녀등록/관리*************/
/*등록자녀*/
.userlist_area {width:85%;margin: 0 auto}
.userlist_box {padding:25px 30px 25px 30px;display:flex;gap:30px;justify-content: space-between;align-items:flex-end;background:var(--gloudyblue);border-radius: var(--roundm);}
.userlist_box.nouser {margin-bottom:90px;align-items:center;} /*자녀등록 전*/
.my_user {flex:4;display:flex;justify-content:center;align-items: center;gap:35px}
.my_user .avatar {width:120px;height:120px;}
.my_user .avatar img {width: inherit;height: inherit;}
.my_user .info {text-align: left;}
.my_user .info span{display: block;color: var(--lightblack);font-size: 18px;}
.my_user .info .name {margin-bottom: 18px;font-size: 32px;font-weight:700;}
.my_user .info .name em {font-size: 24px;font-weight:400;}
.my_user .info .group {color: var(--darkgray)}
.my_user .info .guide {font-size: 24px}
.user_go, .user_edit {flex:1}

/*자녀정보입력/수정*/
.form_area {width:85%;margin: 0 auto;}
.userinfo_area {margin-bottom:60px;}
/*기본 Input box*/
.info_set {margin-bottom:30px;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start}
.infolabel {padding:0 0 4px 6px;font-weight:400;text-align: left} /*라벨이 인풋타입의 타이틀로 들어갈 때*/
.info_tit {padding:0 0 10px 6px;font-weight:400;text-align: left} /*인풋타입의 타이틀*/

/*셀렉트박스*/
.age_select {display: inline-block;align-self: stretch}

/*셀렉트박스--수정 20260422*/
.info_set .ageform {display:flex;flex-direction: row;width:100%;justify-content:flex-start;align-items:center;gap:8px;}
.info_set .ageform input[type='number'] {width:240px}
.info_set .ageform input::placeholder {font-size:15px;color:var(--mediumgray)}
.info_set .ageform span {width:40px;text-align: left;}



/*라디오버튼*/
.radio_set {align-self: stretch;display: flex;justify-content: flex-start;align-items:center;gap:100px;}
.radio_set li {display: flex;justify-content: flex-start;align-items: center;gap:10px}
.infolabels {cursor: pointer;} /*인풋타입과 함께 사용될 때*/

/*아바타선택하기*/
.avatar_set {align-self: stretch;display: flex;justify-content: flex-start;align-items:center;flex-wrap: wrap;gap:30px 0;}
.avatar_set li{width:12.5%;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;align-content: flex-start;gap:4px;}
.infoavatar {width:60px;height:60px;cursor: pointer;}
.infoavatar img {width:inherit;height:inherit;}
/*사용자동의*/
.agree_area {margin-bottom: 20px;text-align: left}
.checkbox_set {margin-bottom: 10px}

/*리딩클럽자녀리스트 보여주기*/
.rclist_select {width:85%;margin: 0 auto 20px;display: flex;justify-content:center;align-items: center;gap:15px;}
.radio_btn {width:40px}
.rclist_label {flex:1;cursor: pointer}
.rclist_box {padding:25px 20px 25px 50px;display:flex;gap:30px;justify-content: space-between;align-items:center;background:var(--gloudyblue);border-radius: var(--roundm);}
.rc_user {display:flex;justify-content:center;align-items: center;gap:35px}
.rc_user .avatar {width:100px;height:100px;}
.rc_user .avatar img {width: inherit;height: inherit;}
.rc_user .info {text-align: left;}
.rc_user .info span{display: block;color: var(--lightblack);font-size: 18px;}
.rc_user .info .name {margin-bottom: 18px;font-size: 32px;line-height: 130%; font-weight:700;}
.rc_user .info .name em {font-size: 24px;font-weight:400;}
.rc_user .info .group {color: var(--darkgray)}
/*자녀정보 초기화*/
.reset_area {width:90%;margin: 0 auto 30px;display: flex;justify-content: center;align-content: center;gap:30px;}
.reset_avatar {width:120px;height:120px}
.reset_avatar img {width:inherit;height:inherit}
.reset_info {text-align: left;}
.reset_tit {margin-bottom:20px;color:var(--darkblue);font-size: 24px;letter-spacing: -0.025em;font-weight: 700;}
.reset_alert {color:var(--red);letter-spacing: -0.025em;}

/******FAQ******/
.faq_accordion {width:90%;margin: 0 auto 30px;}
.faq_title {border-bottom: 1px solid var(--silvergray);}
.faq_title {position: relative;display:table;width:100%;cursor: pointer;}
.faq_title {position: relative;display: flex;padding:1.2em 1em;justify-content: center;align-items: center;text-align: left;}
.faq_title .q {flex:1;font-weight:400; }
.faq_title .sort {flex:2;color:var(--lightblue);}
.faq_title .title {flex:7;align-self:stretch;padding-right:2em;}
.faq_title:after {content:'+';position:absolute;top:50%;transform: translateY(-50%);right:1em;font-size:22px;transition: .35s;}
.faq_desc {display: none;background:var(--gloudygray);padding:1.5em 1.5em 2.2em 1.8em;text-align: left;}
.faq_table.active .title {font-weight:600;}
.faq_table.active .faq_title:after {content:'--';color:var(--lightblue);letter-spacing: -2px;position:absolute;top:50%;transform: translateY(-50%);right:1em;font-size:22px;transition: 0.35s;}


/******공지사항******/
.noti_accordion {width:90%;margin: 0 auto 30px;}
.noti_title {border-bottom: 1px solid var(--silvergray);}
.noti_title {position: relative;display:table;width:100%;cursor: pointer;}
.noti_title {position: relative;display: flex;padding:1.2em 1em;justify-content: center;align-items: center;text-align: left;}
.noti_title .date {flex:2;font-weight:400;color: var(--lightgray); }
.noti_title .sort {flex:2;color:var(--lightblue);}
.noti_title .title {flex:7;align-self:stretch;padding-right:2em;}
.noti_title:after {content:'+';position:absolute;top:50%;transform: translateY(-50%);right:1em;font-size:22px;transition: .35s;}
.noti_desc {display: none;background:var(--gloudygray);padding:1.5em 1.5em 2.2em 1.8em;text-align: left;}
.noti_table.active .title {font-weight:600;}
.noti_table.active .noti_title:after {content:'--';color:var(--lightblue);letter-spacing: -2px;position:absolute;top:50%;transform: translateY(-50%);right:1em;font-size:22px;transition: 0.35s;}


/******무료체험******/
/*상단버튼*/
.trial_step {margin-bottom:50px;}
.trial_step ul {display: flex;justify-content: center;align-items:center;gap:0;}
.trial_step ul li {}
.trial_step ul li.trial_arrow {width:40px;height:40px;}
.trial_step ul li.trial_arrow img {width:inherit;height:inherit;}
.trial_step ul li a {display:inline-flex;justify-content: center;align-items: center;width:150px;height:90px;border:2px solid var(--lightblue);border-radius:var(--roundxs);background:var(--gloudyblue);font-weight: 400;transition: .35s}
.trial_step ul li a:hover {background:var(--lightblue);color:var(--white);font-size:1.05em;}
.trial_step ul li.active a {background:var(--lightblue);color:var(--white);border-color:transparent;}
/*이미지와 설명*/
.trial_desc {display: flex;margin-bottom:50px;justify-content: center;align-items:center;gap:20px;}
.trial_img {width:338px;}
.trial_img img {width:inherit;height:auto;}
.trial_txt {text-align:left;}
.trial_txt .trial_tit {display: block;margin-bottom: 25px; color:var(--lightblue);font-size:24px;font-weight: 500;letter-spacing:-0.025em;}


/****로그인****/
.loginbox {width:60%;margin:auto;}
.login_form {width:85%;margin:20px auto 40px;}
.login_area {margin-bottom:30px;}
.login_btnarea {display: block;margin-top:30px;}
.btn_login {display:flex;height:60px;width:100%;justify-content: center;align-items: center;background:var(--darkblue);border-radius: var(--roundxs);font-size:24px;line-height: 1; font-weight:400;color:var(--white);letter-spacing: -0.025em;gap:1.5em;transition: .3s;border:0;cursor: pointer;}
.btn_login:hover {background:var(--darkblue-hover)}
.find_area {display:flex;margin-top:24px;width:100%;justify-content: center;align-items: center;gap:40px;}
.find_txt {display:flex;justify-content: center;align-items: center;}
.find_txt img {height:32px;}

/***이용가이드***/
.sub_title_guide {font-size:28px}
.guide_txt {margin: 0 auto 40px;width:80%;}
.guide_txt ul li {position: relative;padding:0 0 30px 24px;text-align: left;font-size:20px;color:var(--lightblack);line-height: 1.5em;}
.guide_txt ul li em {position: absolute;top:0;left:0;font-style:normal;}
.guide_txt ul li strong {font-weight: 700}
.guide_txt ul li .blue {display:block;color:var(--darkblue);}
.guide_txt ul li .icon {margin-bottom:-4px;margin-right:4px;width:28px;}
.guide_subtxt {position: relative;margin: 80px auto 0;padding:0 0 12px 32px;width:80%;text-align: left;font-size:20px;color:var(--lightblack);}
.guide_subtxt.first {margin: 10px auto 0}
.guide_subtxt em {position: absolute;top:0;left:0;width:24px;}
.guide_subtxt em img {width:inherit}
.guide_img {margin-bottom:40px;}
.guide_img .imgL {width:80%;box-shadow:var(--bookshadow);}
.guide_img .imgL.none {box-shadow:none;}
.guide_img .imgM {width:50%;box-shadow:var(--bookshadow);}


/*****월정액구독******/
.boxl_white.monthlyinfo {margin: 0 auto;padding: 40px 48px;width:60%;}
.momthly_info .table-row {padding:1em 4em;justify-content: space-around;gap:0}
.momthly_info .table-row .cell {text-align: left}
.momthly_info .table-row .cell:nth-child(1) {flex: 1;}
.momthly_info .table-row .cell:nth-child(2) {flex: 1.5;}
.momthly_info .cell {font-size:20px;}
.momthly_info .cell.thead {color:var(--darkgray);font-weight: 300;}
.momthly_info .btn_area {display: inline-block;margin:24px auto 0;}
.btn_lineblue {display:flex;padding:.65em 1.8em .65em;justify-content: center;align-items: center;background:var(--white);border:1px solid var(--darkblue);border-radius:var(--roundl);font-size:18px;line-height: 1; font-weight:300;color:var(--darkblue);letter-spacing: -0.025em;transition: .3s}
.btn_lineblue:hover {background:var(--darkblue);color:var(--white);}
.btn_lineblue em {display: inline-block;padding-right:.5em;font-size:1.25em;}

.boxl_white.monthlylist {padding: 40px 0;}
.boxl_white.monthlylist .sub_tit {display:flex;justify-content: flex-start;align-items:center;gap:16px;width:90%;margin:0 auto 16px;}
.boxl_white.monthlylist .sub_tit .icoback {width:36px;height:36px;}
.boxl_white.monthlylist .sub_tit .icoback img {width:inherit;height:inherit;}
.monthlylist_box {width:90%;margin:0 auto;}
.monthlylist_box .table-row .cell {line-height:120%;}
.monthlylist_box .table-row .cell:nth-child(1) {flex:1.5;}
.monthlylist_box .table-row .cell:nth-child(2) {flex:1;}
.monthlylist_box .table-row .cell:nth-child(3) {flex:1;}
.monthlylist_box .table-row .cell:nth-child(4) {flex:1;}
.monthlylist_box .table-row .cell:nth-child(5) {flex:1;}
.monthlylist_box .table-row .cell:nth-child(6) {flex:1;}
.monthlylist_box .table-row .cell:nth-child(7) {flex:1.2;}
.monthlylist_box .table-row .cell em {display:none;opacity: 0}
.btn_txtdarkblue {display: inline-block;text-decoration: underline;color:var(--darkblue)}

.boxl_white.monthlycancel {width:60%;margin:0 auto;}
.boxl_white.monthlycancel .sub_tit {display:flex;justify-content: flex-start;align-items:center;gap:16px;width:100%;margin:0 auto 12px;}
.boxl_white.monthlycancel .sub_tit .icoback {width:36px;height:36px;}
.boxl_white.monthlycancel .sub_tit .icoback img {width:inherit;height:inherit;}
.boxl_white.monthlycancel .sub_tit_copy {margin:0 0 16px 64px;font-size:16px;color:var(--darkgray);text-align:left;line-height:150%;}
.monthlycancel_box {width:90%;margin:48px auto 0;}
.monthlycancel_area {padding-top:48px;border-top:1px solid var(--silvergray) !important;}
.monthlycancel_area .info_set.column {margin-bottom: 30px;display: flex;flex-direction: row;justify-content: flex-start;align-items:center;gap:40px;}
.monthlycancel_area .info_set label {font-size:16px;color:var(--darkblack);}
.cancel_select {display: inline-block;flex:1;}
.cancel_select select {font-size:16px;}
.monthlycancel_area textarea {margin-top:4px;padding:10px 20px;width:100%;height:130px;border:2px solid var(--silvergray);border-radius: var(--roundxs);font-weight: 400;font-size:16px;color:var(--lightblack);}

.page_title.subscribe {position:relative;width:85%;margin:0 auto;padding: 20px 0;}
.page_title .icoback {position: absolute;top:50%;left:0;transform: translateY(-50%);width:48px;height:48px;border-radius: var(--roundall);background:var(--white);}
.page_title .icoback img {width:inherit;height: inherit;}
.page_title .icoback .svg{filter: invert(52%) sepia(41%) saturate(4034%) hue-rotate(171deg) brightness(105%) contrast(109%);}
.page_title_subcopy {padding-bottom:40px;font-size:16px;font-weight:400;line-height: 150%; text-align: center}
.whitebox_arrange.monthly {width:85%;margin:0 auto 60px}
.whitebox_arrange.monthlyagree {width:85%;margin:0 auto 20px}
.boxl_white.monthlyprod {position:relative;padding: 40px 0 24px;}
.boxl_white.monthlyprod .allpass_img {position: absolute;top:50%;right:10%;transform: translateY(-50%);width:180px;height:84px;}
.boxl_white.monthlyprod .allpass_img img {width:inherit;height:inherit;}
.boxl_white.monthlyprod ul {width:90%;margin:0 auto;}
.boxl_white.monthlyprod ul li {display: flex;margin-bottom:20px;justify-content: flex-start;align-items: center;gap:40px; font-size: 24px;color:var(--darkblack)}
.boxl_white.monthlysub > ul {width:96%;margin:20px auto 0;}
.boxl_white.monthlysub {padding:40px 40px 24px}
.boxl_white.monthlyprod > ul li .pdlabel {width:180px;padding:8px 0;color:var(--white);font-size: 20px; background:var(--lightgray);border-radius: var(--roundl);}
.boxl_white.monthlysub > ul li {position:relative; padding: 0 0 16px 24px; font-size: 18px;color:var(--darkgray);text-align: left;line-height: 150%;}
.boxl_white.monthlysub > ul li .num {position: absolute;top:0;left:0;width:24px;font-size:18px;}
.boxl_white.monthlysub > ul li .break {display: block;}
.boxl_white.monthlysub > ul li strong {color:var(--darkblack);font-weight: 500}
.agree_area.center {margin-bottom: 60px;text-align:center;}
.agree_area.center input[type=checkbox] + label {font-size: 20px}
.payinfo_area {padding-top:12px}
.payinfo_area .info_set.column {margin-bottom: 8px;display: flex;flex-direction: row;justify-content: flex-start;align-items:center;}
.payinfo_area .info_set.column .info_tit {padding: 0 0 16px 0;width:160px;font-size:18px;}
.payinfo_area .info_set label {color:var(--darkblack);font-size:18px;} 
.payinfo_area .info_set.column .radio_set .blue {color:var(--darkblue)}
.btn_area.monthly {display:inline-block;margin:0 auto;}

.page_title.monthlyend {position:relative;width:70%;margin:0 auto;padding: 20px 0;}
.whitebox_arrange.monthlyend {width:70%;margin:20px auto 60px;}
.sub_welcome {padding:16px 0 36px 14px;margin-bottom: 36px; color:var(--darkblack);font-size:18px;text-align:left;border-bottom:1px solid var(--silvergray);}
.sub_welcome .user {display: block;margin-bottom: 8px}
.whitebox_arrange.monthlyend .sub_tit_small {color:var(--darkgray)}
.sub_welcome .blue, .sub_tit_small.blue, .sub_tit.blue {color:var(--darkblue) !important}
.sub_welcome .break {display: block;}
.boxl_white.monthlyend ul {margin:36px auto 0;}
.boxl_white.monthlyend ul li {margin-bottom:36px;padding-bottom:36px;display: flex;justify-content: flex-start;align-items: center;gap:36px;border-bottom:1px solid var(--silvergray);}
.boxl_white.monthlyend ul li.last {margin-bottom:0;padding-bottom:0;border-bottom:0;}
.monthlyend_img {width:360px;}
.monthlyend_img img {width:inherit;}
.monthlyend_txt {flex:1;color:var(--darkblack);font-size:18px;text-align:left;}
.monthlyend_txt .btn {display: block;margin-top:24px}
.monthlyend_txt .btn {display: flex;justify-content: flex-start;align-items: center;gap:40px}
.monthlyend_txt .break {display: block}