@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 {}
.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}

.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 {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;}

/*******Form & Table******/
input[type='text'], input[type='password'] {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;}


/*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);}
/*총수량,책정렬 부분 */
.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(54%) sepia(42%) saturate(4094%) hue-rotate(168deg) brightness(103%) contrast(105%);}

/*사용안함 --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 {min-height:240px;display: flex;justify-content: center;align-items: flex-end;}
.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}



/*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;}




/*********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 {font-size: 14px;line-height:120%;font-family: var(--noto);font-weight: 400;color:var(--lightblack);}

/****학습내역 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;}
/*인기주제*/
.topic_area {display: flex;justify-content: flex-start;align-items: flex-start;align-content: flex-start;flex-wrap: wrap;gap:40px 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_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}
/*라디오버튼*/
.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;}
.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;}


/******무료체험******/
/*상단버튼*/
.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)}