@charset "UTF-8";
/* Media Query Size */
/*=================================================================
color
1. 색상이 변동되거나 background-color적용시 함수사용
ex)
.container {
background-color: color(main_bg);
}
.title {
color: color(gray_900);
}
2. 색상이 고정일 경우 class로 사용 => base.scss 파일 참고
====================================================================*/
/* 수빈 */
.sub-container:has(.base-page-cont.type-flex-row) .location .location-wrap::after {
display: none;
}
@media (min-width: 801px) {
.sub-container:has(.base-page-cont.type-flex-row) .location .location-wrap {
display: flex;
justify-content: space-between;
padding: 40px 0 20px;
}
}
.sub-container:has(.base-page-cont.type-flex-col) .location .location-wrap::after {
display: none;
}
@media (min-width: 801px) {
.sub-container:has(.base-page-cont.type-flex-col) .location .location-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
position: relative;
gap: 8px;
padding: 40px 0;
}
.sub-container:has(.base-page-cont.type-flex-col) .location .location-wrap .sub-top-text .icon {
position: absolute;
right: 0;
width: 315px;
height: auto;
bottom: 0;
}
.sub-container:has(.base-page-cont.type-flex-col) .location .location-wrap .sub-top-text .icon .icon-img {
width: 100%;
}
}
.sub-container:has(.base-page-cont.page-supple-essay) .page-supple-essay-layout .header_wrap .header-container .header-top {
max-width: 1200px;
padding: 22px 0;
display: flex;
gap: 34px;
justify-content: flex-start;
align-items: flex-end;
}
.sub-container:has(.base-page-cont.page-supple-essay) .page-supple-essay-layout .header_wrap .header-container .header-top .logo {
position: relative;
}
.sub-container:has(.base-page-cont.page-supple-essay) .page-supple-essay-layout .header_wrap .header-container .header-top .logo::before {
content: "";
position: absolute;
bottom: 4px;
right: -16px;
transform: translateX(50%);
background: #d9d9d9;
width: 2px;
height: 20px;
}
.sub-container:has(.base-page-cont.page-supple-essay) .page-supple-essay-layout .header_wrap .header-container .header-top .page-title {
color: #00ab93;
font-size: 28px;
font-weight: 700;
line-height: 114.286%;
}
.sub-container .base-top-container {
background: #f4f8fb;
}
@media (min-width: 801px) {
.sub-container .base-top-container {
padding: 0 0 40px;
}
}
.sub-container .base-page-cont .no-result {
margin: 0;
height: auto;
border: none;
background: none;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
@media (min-width: 801px) {
.sub-container .base-page-cont .no-result {
padding: 40px 0;
gap: 16px;
}
}
.sub-container .base-page-cont .no-result td {
background: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
gap: 10px;
}
.sub-container .base-page-cont .no-result__img {
width: 64px;
height: 100px;
display: block;
}
.sub-container .base-page-cont .no-result__text {
color: #999999;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.16px;
font-weight: 400;
}
.sub-container .base-page-cont .no-result__text.text1 {
font-size: 24px;
line-height: 32px;
letter-spacing: -0.24px;
}
.sub-container .sub-floating {
display: none;
}
@media (min-width: 801px) {
.sub-container .sub-floating {
display: block;
position: fixed;
bottom: 30px;
right: 18px;
z-index: 1;
opacity: 0;
transition: all 0.5s ease-in;
}
.sub-container .sub-floating.move {
bottom: 320px;
}
.sub-container .sub-floating.show {
opacity: 1;
}
.sub-container .sub-floating.sub-floating-banner {
bottom: 107px;
right: 0;
margin: 0;
}
.sub-container .sub-floating.sub-floating-banner.move {
bottom: 420px;
}
}
.sub-container .visible {
visibility: visible;
z-index: 99999;
opacity: 1;
}
.sub-container .sub-floating-banner {
max-width: 100px;
margin-bottom: 16px;
}
.sub-container .sub-floating-banner > a {
display: block;
width: 100%;
height: 100%;
}
.sub-container .sub-floating-banner img {
border-radius: 20px 0px 0px 20px;
width: 100%;
}
.sub-container .sub-floating-quick-menu {
margin-bottom: 16px;
padding: 16px 10px;
border-radius: 20px 0px 0px 20px;
border: 1px solid #ebebeb;
background-color: #fff;
}
.sub-container .sub-floating-quick-menu > p {
text-align: center;
font-size: 13px;
font-weight: 700;
line-height: 18px;
/* 138.462% */
letter-spacing: -0.13px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.sub-container .sub-floating-quick-menu > ul {
margin-top: 16px;
}
.sub-container .sub-floating-quick-menu > ul > li {
margin-bottom: 8px;
}
.sub-container .quick-menu-btn {
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
width: 100%;
max-width: 80px;
padding: 6px 0;
margin: 0 auto;
font-size: 12px;
font-weight: 700;
line-height: 18px;
/* 150% */
letter-spacing: -0.12px;
background-color: #ebebeb;
color: #999999;
}
.sub-container .quick-menu-btn.active {
background-color: #333333;
color: #fff;
}
.sub-container .quick-move-top-btn {
margin: 0 auto;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
}
.sub-container .quick-move-top-btn > img {
width: 100%;
}
@media (min-width: 801px) {
.sub-container .quick-move-top-btn {
width: 64px;
height: 64px;
}
}
/* ---------------------------------------------------------------------------------------
상품안내
-----------------------------------------------------------------------------------------*/
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 {
width: 100%;
display: flex;
flex-direction: column;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm {
display: flex;
flex-direction: column-reverse;
gap: 10px;
}
@media (max-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm {
padding-left: 30px;
position: relative;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm::before, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm::before {
content: "";
display: block;
width: 20px;
height: 20px;
border: 4px solid #8165fe;
border-radius: 20px;
background: #fff;
position: absolute;
left: 10px;
top: 3px;
transform: translateX(-50%);
z-index: 1;
box-sizing: border-box;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type)::after, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type)::after {
content: "";
display: block;
width: 1px;
height: 100%;
background: #8165fe;
position: absolute;
left: 10px;
top: 3px;
transform: translateX(-50%);
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm {
gap: 88px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .img-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .img-box {
flex-basis: calc(50% - 44px);
display: flex;
justify-content: flex-end;
position: relative;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .img-box img, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .img-box img {
max-width: 378px;
max-height: 250px;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box {
flex-basis: calc(50% - 44px);
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box {
gap: 16px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box .tit, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box .tit {
color: #121212;
font-size: 18px;
font-weight: 700;
line-height: 144.444%;
display: flex;
flex-direction: column;
gap: 4px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box .tit, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box .tit {
font-size: 28px;
line-height: 114.286%;
gap: 8px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box .tit span, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box .tit span {
color: #8165fe;
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box .desc, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box .desc {
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
color: #666;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box .desc, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm .txt-box .desc {
font-size: 16px;
line-height: 150%;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type) .img-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type) .img-box {
padding-bottom: 40px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type) .img-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type) .img-box {
padding-bottom: 84px;
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type):nth-of-type(2n-1), .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type):nth-of-type(2n-1) {
flex-direction: row;
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type):nth-of-type(2n-1) div:nth-of-type(1), .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type):nth-of-type(2n-1) div:nth-of-type(1) {
position: relative;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type):nth-of-type(2n-1) div:nth-of-type(1)::after, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type):nth-of-type(2n-1) div:nth-of-type(1)::after {
content: "";
display: block;
width: 1px;
height: 100%;
background: #8165fe;
position: absolute;
right: -44px;
top: 0;
transform: translateX(50%);
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type):nth-of-type(2n) div:nth-of-type(2), .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type):nth-of-type(2n) div:nth-of-type(2) {
position: relative;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type):nth-of-type(2n) div:nth-of-type(2)::after, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:not(:last-of-type):nth-of-type(2n) div:nth-of-type(2)::after {
content: "";
display: block;
width: 1px;
height: 100%;
background: #8165fe;
position: absolute;
right: -44px;
top: 0;
transform: translateX(50%);
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:nth-of-type(2n-1) div:nth-of-type(1), .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:nth-of-type(2n-1) div:nth-of-type(1) {
position: relative;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:nth-of-type(2n-1) div:nth-of-type(1)::before, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:nth-of-type(2n-1) div:nth-of-type(1)::before {
content: "";
display: block;
width: 28px;
height: 28px;
border: 6px solid #8165fe;
border-radius: 28px;
background: #fff;
position: absolute;
right: -44px;
top: 0;
transform: translateX(50%);
z-index: 1;
box-sizing: border-box;
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:nth-of-type(2n), .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:nth-of-type(2n) {
flex-direction: row-reverse;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:nth-of-type(2n) div:nth-of-type(1), .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:nth-of-type(2n) div:nth-of-type(1) {
display: flex;
justify-content: flex-start;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:nth-of-type(2n) div:nth-of-type(2), .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:nth-of-type(2n) div:nth-of-type(2) {
position: relative;
text-align: right;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:nth-of-type(2n) div:nth-of-type(2)::before, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst2 .book-itm:nth-of-type(2n) div:nth-of-type(2)::before {
content: "";
display: block;
width: 28px;
height: 28px;
border: 6px solid #8165fe;
border-radius: 28px;
background: #fff;
position: absolute;
right: -44px;
top: 0;
transform: translateX(50%);
z-index: 1;
box-sizing: border-box;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 {
flex-direction: row;
flex-wrap: wrap;
row-gap: 60px;
column-gap: 80px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm {
flex: 1 1 100%;
display: flex;
flex-direction: column;
border-radius: 20px;
border: 1px solid #ddd;
background: #fff;
overflow: hidden;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm:nth-of-type(1) .img-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm:nth-of-type(1) .img-box {
background: linear-gradient(180deg, #88e5db 0%, #78cbe5 100%);
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm:nth-of-type(2) .img-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm:nth-of-type(2) .img-box {
background: linear-gradient(180deg, #ffd0db 0%, #f3b3c2 100%);
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm:nth-of-type(3) .img-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm:nth-of-type(3) .img-box {
background: linear-gradient(180deg, #ffdb76 0%, #ffbf74 100%);
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm:nth-of-type(4) .img-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm:nth-of-type(4) .img-box {
background: linear-gradient(180deg, #a7d6ff 0%, #57afff 100%);
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm:nth-of-type(5) .img-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm:nth-of-type(5) .img-box {
background: linear-gradient(180deg, #b9c0fe 0%, #b3a3fe 100%);
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm:nth-of-type(6) .img-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm:nth-of-type(6) .img-box {
background: linear-gradient(180deg, #d4ec75 0%, #a1e150 100%);
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm {
flex: 1 1 calc(50% - 40px);
border-radius: 40px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm .img-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm .img-box {
display: flex;
justify-content: center;
align-items: center;
padding: 34px 0;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm .img-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm .img-box {
padding: 36px 0;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm .img-box img, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm .img-box img {
width: auto;
height: 171px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm .img-box img, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .book-itm .img-box img {
height: 227px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box {
padding: 40px 24px;
position: relative;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box {
padding: 40px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box .box-label, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box .box-label {
border-radius: 16px;
background: #01416c;
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 32px;
width: 80px;
height: 32px;
display: block;
position: absolute;
top: 0;
left: 40px;
transform: translateY(-50%);
text-align: center;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box .box-label, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box .box-label {
border-radius: 20px;
font-size: 18px;
line-height: 40px;
width: 100px;
height: 40px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box .tit, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box .tit {
font-size: 18px;
font-weight: 700;
line-height: 144.444%;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box .tit, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box .tit {
font-size: 20px;
line-height: 140%;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box .tit span, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box .tit span {
color: #00ab93;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box .desc, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont .cont-sec .book-lst3 .txt-box .desc {
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
margin-top: 10px;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type1 .sec01 .sec-info, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type1 .sec01 .sec-info {
padding: 0 0 50px;
background: #fff;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type1 .sec01 .sec-info, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type1 .sec01 .sec-info {
padding: 0 0 60px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 {
padding: 0 0 100px;
flex-direction: column;
gap: 20px;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.on, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.on {
display: flex !important;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec00, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec00 {
padding: 0 !important;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec00 .sec-info, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec00 .sec-info {
background: #fff;
padding: 60px 0 30px;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 {
padding: 0 16px !important;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 {
padding: 0 !important;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner {
width: 100%;
background: #f4f8fb;
border-radius: 20px;
padding: 30px 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner {
border-radius: 40px;
padding: 60px 70px;
flex-direction: row;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit {
flex-wrap: nowrap;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
margin-bottom: 10px;
color: #8165fe;
font-size: 20px;
font-weight: 700;
line-height: 140%;
order: 0;
align-items: center;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit {
flex: 1 1 auto;
margin-bottom: 20px;
flex-wrap: wrap;
justify-content: unset;
flex-direction: row;
gap: 8px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit > span,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit > span,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit > span,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit > span, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit > span,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit > span,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit > span,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit > span {
border-radius: 16px;
background: #8165fe;
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 32px;
margin-top: 0;
height: 32px;
padding: 0 20px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit > span,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit > span,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit > span,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit > span, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit > span,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit > span,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit > span,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit > span {
border-radius: 20px;
font-size: 18px;
line-height: 40px;
padding: 0 25px;
height: 40px;
margin-right: 8px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit .desc, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit .desc,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit .desc,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit .desc {
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
margin-top: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit .desc, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit .desc,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit .desc,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit .desc {
flex: 1 1 100%;
font-size: 18px;
line-height: 144.444%;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit .desc b, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit .desc b,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc b,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit .desc b,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit .desc b {
color: #121212;
font-size: 20px;
font-weight: 700;
line-height: 140%;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit .desc b, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit .desc b,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc b,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit .desc b,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .cont-tit .desc b {
font-size: 24px;
line-height: 133.333%;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .info-list,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .info-list,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .info-list, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .info-list,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .info-list,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .info-list {
order: 2;
margin-top: 20px;
gap: 10px;
display: flex;
flex-direction: column;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .info-list,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .info-list,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .info-list, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .info-list,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .info-list,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .info-list {
width: auto;
gap: 16px;
margin-top: 0;
order: 1;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .info-list li,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .info-list li,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .info-list li, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .info-list li,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .info-list li,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .info-list li {
font-size: 16px;
font-weight: 400;
line-height: 150%;
background: #fff;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
display: flex;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .info-list li,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .info-list li,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .info-list li, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .info-list li,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .info-list li,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .info-list li {
padding: 11px 20px;
font-size: 18px;
line-height: 144.444%;
gap: 12px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li span,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .info-list li span,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .info-list li span,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .info-list li span, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li span,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .info-list li span,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .info-list li span,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .info-list li span {
color: #8165fe;
font-size: 16px;
line-height: 150%;
font-weight: 700;
display: flex;
gap: 4px;
align-items: center;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li span,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .info-list li span,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .info-list li span,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .info-list li span, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li span,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .info-list li span,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .info-list li span,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner .info-list li span {
gap: 8px;
font-size: 18px;
line-height: 144.444%;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner > img,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner > img,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner > img,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner > img, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner > img,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner > img,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner > img,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner > img {
order: 1;
max-width: 200px;
margin: 0 auto;
height: fit-content;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner > img,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner > img,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner > img,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner > img, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner > img,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner > img,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner > img,
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec04 .inner > img {
max-width: 368px;
order: 2;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner {
flex-wrap: wrap;
padding: 30px 14px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner {
padding: 60px 48px 60px 80px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list {
margin-top: 0;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li {
flex-direction: column;
padding: 12px 12px 12px 34px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li {
padding: 12px 12px 12px 46px;
justify-content: center;
flex-direction: column;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li span, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .info-list li span {
transform: translateX(-22px);
}
@media (max-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec01 .inner .cont-tit {
margin-bottom: 0;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner {
gap: 20px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner {
flex-direction: row-reverse;
align-items: center;
gap: 100px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit {
align-items: center;
height: fit-content;
color: #00ab93;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit > span, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit > span {
background: #00ab93;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc > span, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc > span {
font-size: 14px;
font-weight: 400;
margin-top: 12px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc > span, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc > span {
margin-top: 20px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc > span b, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec02 .inner .cont-tit .desc > span b {
font-size: 14px;
font-weight: 700;
line-height: 128.571%;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner {
gap: 20px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner {
align-items: center;
gap: 100px;
flex-direction: row;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit {
height: fit-content;
color: #f04d69;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit > span, .page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2 .sec03 .inner .cont-tit > span {
background: #f04d69;
}
.page-productguide.page-productInfo04 .sec-visual > .inner::after {
background: url("/assets/renewal2023/img/productInfo/child/visual.png") no-repeat center/cover;
}
.page-productguide.page-productInfo04 .sec-cont .tab-wrap .tab-lst {
flex-wrap: nowrap;
}
.page-productguide.page-productInfo04 .sec-cont .tab-wrap .tab-lst .tab-itm {
flex: 0 0 33.3333333333%;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec02 .inner,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec03 .inner,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec03 .inner,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner {
padding: 60px 65px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec02 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec03 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner .cont-tit .desc, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec03 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner .cont-tit .desc {
font-size: 22px;
font-weight: 400;
line-height: 140.909%;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec02 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec03 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner .cont-tit .desc, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec03 .inner .cont-tit .desc,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner .cont-tit .desc {
font-size: 32px;
line-height: 137.5%;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec02 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec03 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner .cont-tit .desc b, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec03 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner .cont-tit .desc b {
font-size: 22px;
font-weight: 900;
line-height: 140.909%;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec02 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec03 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner .cont-tit .desc b, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec03 .inner .cont-tit .desc b,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner .cont-tit .desc b {
font-size: 32px;
line-height: 137.5%;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec02 .inner .cont-tit,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec03 .inner .cont-tit,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner .cont-tit, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner .cont-tit,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec03 .inner .cont-tit,
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner .cont-tit {
margin-bottom: 0;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner {
gap: 35px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner {
gap: 0;
position: relative;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner .cont-tit .desc, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .cont-tit .desc {
display: block;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner .cont-tit .desc b, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .cont-tit .desc b {
color: #8165fe;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner .info-list, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .info-list {
order: 1;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner .info-list, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .info-list {
flex: 0 0 calc(100% - 460px);
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner .info-list li, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .info-list li {
display: flex;
flex-direction: row;
align-items: unset;
justify-content: unset;
padding: 12px;
gap: 4px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner .info-list li, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .info-list li {
flex-direction: row;
justify-content: unset;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner .info-list li span, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .info-list li span {
transform: unset;
justify-content: center;
align-items: center;
height: 24px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner .info-list li span, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .info-list li span {
transform: unset;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner > img, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner > img {
max-width: 260px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec01 .inner > img, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner > img {
max-width: 358px;
position: absolute;
right: 82px;
top: 86px;
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec02 .inner, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner {
gap: 60px;
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec02 .inner .cont-tit, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner .cont-tit {
margin: 0;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec02 .inner .cont-tit .desc, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner .cont-tit .desc {
display: block;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec02 .inner .cont-tit .desc b, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner .cont-tit .desc b {
color: #00ab93;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec02 .inner > img, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner > img {
max-width: 288px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec02 .inner > img, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner > img {
max-width: 578px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec03 .inner .cont-tit .desc, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec03 .inner .cont-tit .desc {
display: block;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec03 .inner .cont-tit .desc b, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec03 .inner .cont-tit .desc b {
color: #f04d69;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner {
flex-direction: row-reverse;
align-items: center;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner .cont-tit .desc, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner .cont-tit .desc {
display: block;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner .cont-tit .desc b, .page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner .cont-tit .desc b {
color: #01416c;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec03 .inner > img {
max-width: 260px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec03 .inner > img {
max-width: 335px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner .cont-tit {
margin-bottom: 20px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner .cont-tit {
margin-bottom: 0;
margin-left: 60px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner > img {
max-width: 260px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner > img {
max-width: 189px;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner > img:nth-of-type(1) {
margin-bottom: 10px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont02 .sec04 .inner > img:nth-of-type(1) {
margin-left: 10px;
margin-bottom: 0;
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .info-list li {
flex-direction: row;
justify-content: unset;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .info-list li span {
transform: unset;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec03 .inner > img {
max-width: 300px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec03 .inner > img {
max-width: 472px;
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner {
gap: 100px;
justify-content: center;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner .cont-tit {
margin-bottom: 20px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner .cont-tit {
flex: unset;
flex-wrap: nowrap;
flex-direction: column;
align-items: unset;
margin-bottom: 0;
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner .cont-tit span {
width: fit-content;
}
}
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner > img {
max-width: 140px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo04 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec04 .inner > img {
max-width: 189px;
margin: 0;
}
}
.page-productguide.page-productInfo05 .sec-visual > .inner::after {
background: url("/assets/renewal2023/img/productInfo/plus/visual.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .info-list {
margin-right: 10px;
flex: 1 1 calc(100% - 378px);
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .info-list li {
flex-direction: row;
justify-content: unset;
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner .info-list li span {
transform: unset;
gap: 2px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner > img {
max-width: 200px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec01 .inner > img {
max-width: 368px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner > img {
max-width: 240px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec02 .inner > img {
max-width: 290px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec03 .inner > img {
max-width: 240px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont03 .sec03 .inner > img {
max-width: 290px;
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont04 .sec01 .inner .info-list {
margin-right: 40px;
flex: 1 1 calc(100% - 400px);
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont04 .sec01 .inner .info-list li {
gap: 4px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont04 .sec01 .inner > img {
max-width: 200px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont04 .sec01 .inner > img {
max-width: 360px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont04 .sec02 .inner > img {
max-width: 240px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont04 .sec02 .inner > img {
max-width: 290px;
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont04 .sec03 .inner {
padding: 60px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont04 .sec03 .inner > img {
max-width: 300px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type2.cont04 .sec03 .inner > img {
max-width: 546px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec .cont-tit {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 20px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec .cont-tit {
align-items: flex-start;
margin-bottom: 30px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec .cont-tit .step {
font-size: 14px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec .cont-tit .step {
font-size: 18px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec .cont-tit .step b {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
background: #b3a3fe;
margin-left: 2px;
font-weight: 700;
text-align: center;
line-height: 24px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec .cont-tit .step b {
width: 32px;
height: 32px;
margin-left: 4px;
font-weight: 900;
line-height: 32px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec .cont-tit h4 {
font-weight: 700;
font-size: 28px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec .cont-tit h4 {
font-size: 40px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec .cont-tit p.desc {
margin-top: 0;
font-size: 14px;
color: #777;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec .cont-tit p.desc {
font-size: 18px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec00 {
padding-top: 50px;
padding-bottom: 60px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec00 {
padding: 60px 0;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec00 .sec-info {
padding: 0;
background: #fff;
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec01 {
padding-top: 0;
padding-bottom: 60px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec01 {
padding-top: 0;
padding-bottom: 80px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec01 .img-box {
width: 100%;
height: 288px;
padding: 20px 28px;
border-radius: 20px;
background: #f4f8fb;
box-shadow: 0px 4px 8px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec01 .img-box {
height: 316px;
padding: 40px 60px;
border-radius: 40px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec01 .img-box img {
width: auto;
height: 100%;
margin: 0 auto;
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec02 {
padding-top: 0;
padding-bottom: 60px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec02 {
padding-top: 0;
padding-bottom: 90px;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec03 {
padding-top: 0;
padding-bottom: 100px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec03 {
padding-top: 0;
}
}
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec03 > .inner {
display: flex;
flex-direction: column;
gap: 60px;
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec03 > .inner {
flex-direction: row;
align-items: baseline;
gap: 80px;
}
}
@media (min-width: 801px) {
.page-productguide.page-productInfo05 .sec-cont .cont-wrap .cont-lst .cont.cont-type3 .cont-sec.sec03 > .inner .cont-right .cont-tit {
margin-bottom: 82px;
}
}
/* ---------------------------------------------------------------------------------------
문제은행
-----------------------------------------------------------------------------------------*/
.base-page-cont.page-examList .tab-cont-wrap, .base-page-cont.page-userTestExamList .tab-cont-wrap, .base-page-cont.page-simulPaperNow .tab-cont-wrap, .base-page-cont.page-myExamList .tab-cont-wrap, .base-page-cont.page-myWrongAnswer .tab-cont-wrap {
padding: 20px 16px;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap, .base-page-cont.page-userTestExamList .tab-cont-wrap, .base-page-cont.page-simulPaperNow .tab-cont-wrap, .base-page-cont.page-myExamList .tab-cont-wrap, .base-page-cont.page-myWrongAnswer .tab-cont-wrap {
padding: 40px 0;
}
}
.base-page-cont.page-examList .tab-cont-wrap .tab-contents, .base-page-cont.page-userTestExamList .tab-cont-wrap .tab-contents, .base-page-cont.page-simulPaperNow .tab-cont-wrap .tab-contents, .base-page-cont.page-myExamList .tab-cont-wrap .tab-contents, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .tab-contents {
padding-top: 0;
}
.base-page-cont.page-examList .tab-cont-wrap .card, .base-page-cont.page-userTestExamList .tab-cont-wrap .card, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card, .base-page-cont.page-myExamList .tab-cont-wrap .card, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card {
display: flex;
flex-direction: column;
position: relative;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card, .base-page-cont.page-userTestExamList .tab-cont-wrap .card, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card, .base-page-cont.page-myExamList .tab-cont-wrap .card, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 38px 40px;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__title {
width: 100%;
display: flex;
align-items: center;
gap: 3px;
position: absolute;
top: 0;
left: 0;
padding: 10px 24px;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__title {
padding: 0;
margin: 0;
border: none;
position: unset;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__title img, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__title img, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__title img, .base-page-cont.page-myExamList .tab-cont-wrap .card__title img, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__title img {
width: 24px;
height: 24px;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__title img, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__title img, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__title img, .base-page-cont.page-myExamList .tab-cont-wrap .card__title img, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__title img {
width: 32px;
height: 32px;
}
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__header .card__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__header .card__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__header .card__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__header .card__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__header .card__title {
gap: 20px;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__body, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__body, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__body, .base-page-cont.page-myExamList .tab-cont-wrap .card__body, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__body {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
padding: 73px 20px 20px;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__body, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__body, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__body, .base-page-cont.page-myExamList .tab-cont-wrap .card__body, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__body {
flex-wrap: nowrap;
flex-grow: 1;
gap: 134px;
position: unset;
padding: 0;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__body .col-group, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__body .col-group, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__body .col-group, .base-page-cont.page-myExamList .tab-cont-wrap .card__body .col-group, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__body .col-group {
width: 50%;
display: flex;
flex-direction: column;
gap: 50px;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__body .col-group, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__body .col-group, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__body .col-group, .base-page-cont.page-myExamList .tab-cont-wrap .card__body .col-group, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__body .col-group {
width: 100%;
gap: 5px;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__body .col-group .card__info__list, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__body .col-group .card__info__list, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__body .col-group .card__info__list, .base-page-cont.page-myExamList .tab-cont-wrap .card__body .col-group .card__info__list, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__body .col-group .card__info__list {
display: flex;
align-items: center;
justify-content: unset;
gap: 8px;
position: absolute;
bottom: 20px;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__body .col-group .card__info__list, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__body .col-group .card__info__list, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__body .col-group .card__info__list, .base-page-cont.page-myExamList .tab-cont-wrap .card__body .col-group .card__info__list, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__body .col-group .card__info__list {
gap: 40px;
position: unset;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__body .col-group2, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__body .col-group2, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__body .col-group2, .base-page-cont.page-myExamList .tab-cont-wrap .card__body .col-group2, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__body .col-group2 {
width: 50%;
display: flex;
flex-direction: column;
gap: 10px;
text-align: right;
align-items: flex-end;
justify-content: center;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__body .col-group2, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__body .col-group2, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__body .col-group2, .base-page-cont.page-myExamList .tab-cont-wrap .card__body .col-group2, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__body .col-group2 {
width: auto;
flex-direction: row;
align-items: center;
margin-right: 128px;
justify-content: unset;
}
.base-page-cont.page-examList .tab-cont-wrap .card__body .col-group2:has(.card__result__img), .base-page-cont.page-userTestExamList .tab-cont-wrap .card__body .col-group2:has(.card__result__img), .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__body .col-group2:has(.card__result__img), .base-page-cont.page-myExamList .tab-cont-wrap .card__body .col-group2:has(.card__result__img), .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__body .col-group2:has(.card__result__img) {
margin-right: 0;
}
.base-page-cont.page-examList .tab-cont-wrap .card__body .col-group2:has(.card__result__img) .card__result, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__body .col-group2:has(.card__result__img) .card__result, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__body .col-group2:has(.card__result__img) .card__result, .base-page-cont.page-myExamList .tab-cont-wrap .card__body .col-group2:has(.card__result__img) .card__result, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__body .col-group2:has(.card__result__img) .card__result {
gap: 0;
padding-right: 130px;
position: relative;
}
.base-page-cont.page-examList .tab-cont-wrap .card__body .col-group2:has(.card__result__img) .card__result .card__result__img, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__body .col-group2:has(.card__result__img) .card__result .card__result__img, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__body .col-group2:has(.card__result__img) .card__result .card__result__img, .base-page-cont.page-myExamList .tab-cont-wrap .card__body .col-group2:has(.card__result__img) .card__result .card__result__img, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__body .col-group2:has(.card__result__img) .card__result .card__result__img {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.base-page-cont.page-examList .tab-cont-wrap .card__body .col-group2:has(.no-test), .base-page-cont.page-userTestExamList .tab-cont-wrap .card__body .col-group2:has(.no-test), .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__body .col-group2:has(.no-test), .base-page-cont.page-myExamList .tab-cont-wrap .card__body .col-group2:has(.no-test), .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__body .col-group2:has(.no-test) {
margin-right: 20px;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__sub__title {
width: 100%;
color: #121212;
font-size: 18px;
font-weight: 700;
line-height: 26px;
letter-spacing: -0.18px;
height: 100%;
display: flex;
flex-direction: column;
margin: 30px 0;
justify-content: center;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__sub__title {
margin: 0;
font-weight: 400;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__result, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result, .base-page-cont.page-myExamList .tab-cont-wrap .card__result, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result {
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
align-items: center;
}
.base-page-cont.page-examList .tab-cont-wrap .card__result:has(.card__result__img) .card__result__num, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result:has(.card__result__img) .card__result__num, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result:has(.card__result__img) .card__result__num, .base-page-cont.page-myExamList .tab-cont-wrap .card__result:has(.card__result__img) .card__result__num, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result:has(.card__result__img) .card__result__num {
flex-direction: row;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__result:has(.card__result__img) .card__result__num, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result:has(.card__result__img) .card__result__num, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result:has(.card__result__img) .card__result__num, .base-page-cont.page-myExamList .tab-cont-wrap .card__result:has(.card__result__img) .card__result__num, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result:has(.card__result__img) .card__result__num {
flex-direction: column-reverse;
}
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__result, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result, .base-page-cont.page-myExamList .tab-cont-wrap .card__result, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result {
order: 0;
height: 100%;
position: relative;
box-sizing: content-box;
flex-direction: row-reverse;
padding-bottom: 0;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__result__img, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result__img, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result__img, .base-page-cont.page-myExamList .tab-cont-wrap .card__result__img, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result__img {
width: 100px;
height: 100px;
display: flex;
align-self: flex-end;
z-index: 1;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__result__img, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result__img, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result__img, .base-page-cont.page-myExamList .tab-cont-wrap .card__result__img, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result__img {
align-self: unset;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__result__num, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result__num, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result__num, .base-page-cont.page-myExamList .tab-cont-wrap .card__result__num, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result__num {
display: flex;
flex-direction: column-reverse;
gap: 6px;
align-items: center;
width: 100%;
justify-content: flex-end;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__result__num, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result__num, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result__num, .base-page-cont.page-myExamList .tab-cont-wrap .card__result__num, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result__num {
min-width: 120px;
align-items: center;
justify-content: center;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__result__num .sub, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result__num .sub, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result__num .sub, .base-page-cont.page-myExamList .tab-cont-wrap .card__result__num .sub, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result__num .sub {
color: #121212;
font-size: 16px;
font-weight: 400;
line-height: 16px;
letter-spacing: -0.16px;
}
.base-page-cont.page-examList .tab-cont-wrap .card__result__num .sub b, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result__num .sub b, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result__num .sub b, .base-page-cont.page-myExamList .tab-cont-wrap .card__result__num .sub b, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result__num .sub b {
font-size: 22px;
letter-spacing: -0.22px;
}
.base-page-cont.page-examList .tab-cont-wrap .card__result__num .sup, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result__num .sup, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result__num .sup, .base-page-cont.page-myExamList .tab-cont-wrap .card__result__num .sup, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result__num .sup {
color: #121212;
font-size: 24px;
font-weight: 700;
line-height: 18px;
letter-spacing: -0.24px;
text-decoration-line: underline;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__result__num .sup, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result__num .sup, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result__num .sup, .base-page-cont.page-myExamList .tab-cont-wrap .card__result__num .sup, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result__num .sup {
display: flex;
align-items: baseline;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__result__num .sup .total-num, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__result__num .sup .total-num, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__result__num .sup .total-num, .base-page-cont.page-myExamList .tab-cont-wrap .card__result__num .sup .total-num, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__result__num .sup .total-num {
color: #f04d69;
text-decoration-line: underline;
align-items: center;
}
.base-page-cont.page-examList .tab-cont-wrap .card .btn-report-card, .base-page-cont.page-userTestExamList .tab-cont-wrap .card .btn-report-card, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card .btn-report-card, .base-page-cont.page-myExamList .tab-cont-wrap .card .btn-report-card, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card .btn-report-card {
font-size: 14px;
font-weight: 700;
line-height: 128.571%;
display: flex;
gap: 6px;
align-items: center;
border-bottom: 1px solid #777777;
position: relative;
padding: 0 14px 0 0;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card .btn-report-card, .base-page-cont.page-userTestExamList .tab-cont-wrap .card .btn-report-card, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card .btn-report-card, .base-page-cont.page-myExamList .tab-cont-wrap .card .btn-report-card, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card .btn-report-card {
border-bottom: 0;
border-radius: 4px;
border: 1px solid #dddddd;
color: #777777;
font-size: 16px;
font-weight: 400;
line-height: 150%;
padding: 2px 32px 2px 15px;
display: flex;
justify-content: center;
align-items: center;
}
.base-page-cont.page-examList .tab-cont-wrap .card .btn-report-card span, .base-page-cont.page-userTestExamList .tab-cont-wrap .card .btn-report-card span, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card .btn-report-card span, .base-page-cont.page-myExamList .tab-cont-wrap .card .btn-report-card span, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card .btn-report-card span {
color: #f04d69;
font-weight: 700;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card .btn-report-card::after, .base-page-cont.page-userTestExamList .tab-cont-wrap .card .btn-report-card::after, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card .btn-report-card::after, .base-page-cont.page-myExamList .tab-cont-wrap .card .btn-report-card::after, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card .btn-report-card::after {
content: "";
display: block;
background-image: url(/assets/renewal2023/img/ico/ico-right-arrow-black.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 8px;
height: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card .btn-report-card::after, .base-page-cont.page-userTestExamList .tab-cont-wrap .card .btn-report-card::after, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card .btn-report-card::after, .base-page-cont.page-myExamList .tab-cont-wrap .card .btn-report-card::after, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card .btn-report-card::after {
background-image: url(/assets/renewal2023/img/ico/ico-right-arrow-b.png);
width: 14px;
height: 14px;
right: 14px;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card .no-test, .base-page-cont.page-userTestExamList .tab-cont-wrap .card .no-test, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card .no-test, .base-page-cont.page-myExamList .tab-cont-wrap .card .no-test, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card .no-test {
color: #121212;
font-size: 24px;
font-weight: 700;
line-height: 32px;
letter-spacing: -0.24px;
text-decoration: underline;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card .no-test, .base-page-cont.page-userTestExamList .tab-cont-wrap .card .no-test, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card .no-test, .base-page-cont.page-myExamList .tab-cont-wrap .card .no-test, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card .no-test {
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.16px;
text-decoration: unset;
width: max-content;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card .checkbox-secondary, .base-page-cont.page-userTestExamList .tab-cont-wrap .card .checkbox-secondary, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card .checkbox-secondary, .base-page-cont.page-myExamList .tab-cont-wrap .card .checkbox-secondary, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card .checkbox-secondary {
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type1, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type1, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type1, .base-page-cont.page-myExamList .tab-cont-wrap .card__type1, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type1 {
padding: 38px 40px 38px 52px;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type1::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type1::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type1::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type1::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type1::before {
content: "";
display: block;
width: 12px;
height: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
background-color: #79d1c7;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type1:has(.card__info__list) .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type1:has(.card__info__list) .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type1:has(.card__info__list) .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type1:has(.card__info__list) .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type1:has(.card__info__list) .card__sub__title {
margin: 20px 0 50px 0;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type1:has(.card__info__list) .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type1:has(.card__info__list) .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type1:has(.card__info__list) .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type1:has(.card__info__list) .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type1:has(.card__info__list) .card__sub__title {
margin: 0;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type1.korean::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type1.korean::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type1.korean::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type1.korean::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type1.korean::before {
background: #79d1c7;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type1.math::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type1.math::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type1.math::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type1.math::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type1.math::before {
background: #f3b3d1;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type2, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 {
padding: 0;
flex-direction: row;
position: relative;
align-items: unset;
gap: 0;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type2.type1 .card__header, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2.type1 .card__header, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2.type1 .card__header, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2.type1 .card__header, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2.type1 .card__header {
background: #79d1c7;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type2.type2 .card__header, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2.type2 .card__header, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2.type2 .card__header, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2.type2 .card__header, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2.type2 .card__header {
background: #f3b3d1;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type2.type3 .card__header, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2.type3 .card__header, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2.type3 .card__header, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2.type3 .card__header, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2.type3 .card__header {
background: #bdd533;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type2:has(.card__header) .card__body .col-group .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2:has(.card__header) .card__body .col-group .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2:has(.card__header) .card__body .col-group .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2:has(.card__header) .card__body .col-group .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2:has(.card__header) .card__body .col-group .card__sub__title {
margin: 15px 0 30px;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type2:has(.card__header) .card__body .col-group .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2:has(.card__header) .card__body .col-group .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2:has(.card__header) .card__body .col-group .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2:has(.card__header) .card__body .col-group .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2:has(.card__header) .card__body .col-group .card__sub__title {
margin: 0;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type2:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2:has(.card__info__list) .card__body .col-group .card__sub__title {
margin: 15px 0 50px;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type2:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2:has(.card__info__list) .card__body .col-group .card__sub__title {
margin: 0;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type2 .card__header, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2 .card__header, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2 .card__header, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2 .card__header, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 .card__header {
padding: 14px 20px 8px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px dashed #dddddd;
margin: 0 20px;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type2 .card__header, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2 .card__header, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2 .card__header, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2 .card__header, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 .card__header {
padding: 38px 0;
width: 144px;
min-width: 144px;
max-width: 144px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: none;
margin: 0;
background: #79d1c7;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type2 .card__header .card__main-title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2 .card__header .card__main-title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2 .card__header .card__main-title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2 .card__header .card__main-title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 .card__header .card__main-title {
color: #121212;
font-size: 20px;
font-weight: 700;
line-height: 140%;
text-align: center;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type2 .card__header .card__main-title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2 .card__header .card__main-title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2 .card__header .card__main-title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2 .card__header .card__main-title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 .card__header .card__main-title {
color: #fff;
font-size: 16px;
line-height: 150%;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type2 .card__body, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2 .card__body, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2 .card__body, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2 .card__body, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 .card__body {
flex-grow: 1;
padding: 20px 24px;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type2 .card__body .col-group, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2 .card__body .col-group, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2 .card__body .col-group, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2 .card__body .col-group, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 .card__body .col-group {
gap: 0;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type2 .card__body .col-group, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2 .card__body .col-group, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2 .card__body .col-group, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2 .card__body .col-group, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 .card__body .col-group {
gap: 5px;
}
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type2 .card__body, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2 .card__body, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2 .card__body, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2 .card__body, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 .card__body {
gap: 0;
padding: 38px 20px 40px 40px;
}
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type2 .card__footer, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2 .card__footer, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2 .card__footer, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2 .card__footer, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 .card__footer {
display: flex;
align-items: center;
padding: 0 40px 0 0;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type2 .card__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2 .card__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2 .card__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2 .card__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 .card__title {
border-bottom: none;
padding: 0;
margin-bottom: 0;
position: unset;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type2 .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2 .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2 .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2 .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 .card__sub__title {
margin: 15px 0 0;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type2 .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type2 .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type2 .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type2 .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type2 .card__sub__title {
margin: 0;
justify-content: center;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3:has(.card__info__list) .card__body .col-group .card__sub__title {
margin: 30px 0 50px;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type3:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3:has(.card__info__list) .card__body .col-group .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3:has(.card__info__list) .card__body .col-group .card__sub__title {
margin: 0;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3:has(.card__info__list) .card__body:has(.card__title) .col-group .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3:has(.card__info__list) .card__body:has(.card__title) .col-group .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3:has(.card__info__list) .card__body:has(.card__title) .col-group .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3:has(.card__info__list) .card__body:has(.card__title) .col-group .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3:has(.card__info__list) .card__body:has(.card__title) .col-group .card__sub__title {
margin: 15px 0 50px;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type3:has(.card__info__list) .card__body:has(.card__title) .col-group .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3:has(.card__info__list) .card__body:has(.card__title) .col-group .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3:has(.card__info__list) .card__body:has(.card__title) .col-group .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3:has(.card__info__list) .card__body:has(.card__title) .col-group .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3:has(.card__info__list) .card__body:has(.card__title) .col-group .card__sub__title {
margin: 0;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3 .card__body .col-group, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3 .card__body .col-group, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3 .card__body .col-group, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3 .card__body .col-group, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3 .card__body .col-group {
gap: 0;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type3 .card__body .col-group, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3 .card__body .col-group, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3 .card__body .col-group, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3 .card__body .col-group, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3 .card__body .col-group {
gap: 5px;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3 .card__body .col-group .card__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3 .card__body .col-group .card__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3 .card__body .col-group .card__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3 .card__body .col-group .card__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3 .card__body .col-group .card__title {
position: unset;
padding: 0;
border: none;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type3, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3 {
flex-direction: row;
align-items: unset;
gap: 0;
padding: 38px 40px 38px 32px;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3:has(.card__subject-tit) .card__body .card__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3:has(.card__subject-tit) .card__body .card__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3:has(.card__subject-tit) .card__body .card__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3:has(.card__subject-tit) .card__body .card__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3:has(.card__subject-tit) .card__body .card__title {
gap: 20px;
}
}
@media (min-width: 801px) and (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type3:has(.card__subject-tit) .card__body .card__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3:has(.card__subject-tit) .card__body .card__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3:has(.card__subject-tit) .card__body .card__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3:has(.card__subject-tit) .card__body .card__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3:has(.card__subject-tit) .card__body .card__title {
gap: 0;
}
}
@media (min-width: 801px) {
.base-page-cont.page-examList .tab-cont-wrap .card__type3:has(.card__subject-tit) .checkbox-secondary input[type=checkbox] + label,
.base-page-cont.page-examList .tab-cont-wrap .card__type3:has(.card__subject-tit) .base-checkbox-secondary input[type=checkbox] + label, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3:has(.card__subject-tit) .checkbox-secondary input[type=checkbox] + label,
.base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3:has(.card__subject-tit) .base-checkbox-secondary input[type=checkbox] + label, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3:has(.card__subject-tit) .checkbox-secondary input[type=checkbox] + label,
.base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3:has(.card__subject-tit) .base-checkbox-secondary input[type=checkbox] + label, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3:has(.card__subject-tit) .checkbox-secondary input[type=checkbox] + label,
.base-page-cont.page-myExamList .tab-cont-wrap .card__type3:has(.card__subject-tit) .base-checkbox-secondary input[type=checkbox] + label, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3:has(.card__subject-tit) .checkbox-secondary input[type=checkbox] + label,
.base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3:has(.card__subject-tit) .base-checkbox-secondary input[type=checkbox] + label {
padding-left: 32px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Ccircle cx='15' cy='15' r='14.5' fill='%23F5F5F5' stroke='%23DDDDDD'/%3E%3C/svg%3E") no-repeat center/contain;
background-size: 30px 30px;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3:has(.card__subject-tit) .checkbox-secondary input[type=checkbox]:checked + label,
.base-page-cont.page-examList .tab-cont-wrap .card__type3:has(.card__subject-tit) .base-checkbox-secondary input[type=checkbox]:checked + label, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3:has(.card__subject-tit) .checkbox-secondary input[type=checkbox]:checked + label,
.base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3:has(.card__subject-tit) .base-checkbox-secondary input[type=checkbox]:checked + label, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3:has(.card__subject-tit) .checkbox-secondary input[type=checkbox]:checked + label,
.base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3:has(.card__subject-tit) .base-checkbox-secondary input[type=checkbox]:checked + label, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3:has(.card__subject-tit) .checkbox-secondary input[type=checkbox]:checked + label,
.base-page-cont.page-myExamList .tab-cont-wrap .card__type3:has(.card__subject-tit) .base-checkbox-secondary input[type=checkbox]:checked + label, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3:has(.card__subject-tit) .checkbox-secondary input[type=checkbox]:checked + label,
.base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3:has(.card__subject-tit) .base-checkbox-secondary input[type=checkbox]:checked + label {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Ccircle cx='15' cy='15' r='15' fill='%2301416C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.4551 8.54673C25.1816 9.27571 25.1816 10.4576 24.4551 11.1866L14.2225 21.4533C13.496 22.1822 12.318 22.1822 11.5914 21.4533L5.54492 15.3866C4.81836 14.6576 4.81836 13.4757 5.54492 12.7467C6.27147 12.0178 7.44946 12.0178 8.17601 12.7467L12.907 17.4935L21.824 8.54673C22.5505 7.81776 23.7285 7.81776 24.4551 8.54673Z' fill='white'/%3E%3C/svg%3E") no-repeat center/contain;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3::before {
content: "";
display: block;
width: 12px;
height: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
background: #79d1c7;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.korean::before, .base-page-cont.page-examList .tab-cont-wrap .card__type3.type1::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.korean::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type1::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.korean::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type1::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.korean::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type1::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.korean::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type1::before {
background: #79d1c7;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.korean .card__subject-tit, .base-page-cont.page-examList .tab-cont-wrap .card__type3.type1 .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.korean .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type1 .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.korean .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type1 .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.korean .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type1 .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.korean .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type1 .card__subject-tit {
background: #79d1c7;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.math::before, .base-page-cont.page-examList .tab-cont-wrap .card__type3.type2::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.math::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type2::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.math::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type2::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.math::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type2::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.math::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type2::before {
background: #f3b3d1;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.math .card__subject-tit, .base-page-cont.page-examList .tab-cont-wrap .card__type3.type2 .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.math .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type2 .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.math .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type2 .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.math .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type2 .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.math .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type2 .card__subject-tit {
background: #f3b3d1;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.common::before, .base-page-cont.page-examList .tab-cont-wrap .card__type3.type3::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.common::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type3::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.common::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type3::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.common::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type3::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.common::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type3::before {
background: #4bc8f5;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.common .card__subject-tit, .base-page-cont.page-examList .tab-cont-wrap .card__type3.type3 .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.common .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type3 .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.common .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type3 .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.common .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type3 .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.common .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type3 .card__subject-tit {
background: #4bc8f5;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.society::before, .base-page-cont.page-examList .tab-cont-wrap .card__type3.type4::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.society::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type4::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.society::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type4::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.society::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type4::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.society::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type4::before {
background: #4bc8f5;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.society .card__subject-tit, .base-page-cont.page-examList .tab-cont-wrap .card__type3.type4 .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.society .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type4 .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.society .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type4 .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.society .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type4 .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.society .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type4 .card__subject-tit {
background: #4bc8f5;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.science::before, .base-page-cont.page-examList .tab-cont-wrap .card__type3.type5::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.science::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type5::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.science::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type5::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.science::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type5::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.science::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type5::before {
background: #bdd533;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.science .card__subject-tit, .base-page-cont.page-examList .tab-cont-wrap .card__type3.type5 .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.science .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type5 .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.science .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type5 .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.science .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type5 .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.science .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type5 .card__subject-tit {
background: #bdd533;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3 .card__header, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3 .card__header, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3 .card__header, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3 .card__header, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3 .card__header {
display: flex;
align-items: center;
gap: 20px;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3 .card__body, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3 .card__body, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3 .card__body, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3 .card__body, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3 .card__body {
align-items: center;
justify-content: space-between;
flex-grow: 1;
padding: 0 20px 0 40px;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3 .card__footer, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3 .card__footer, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3 .card__footer, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3 .card__footer, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3 .card__footer {
display: flex;
align-items: center;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3 .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3 .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3 .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3 .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3 .card__subject-tit {
border-radius: 10px;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: -0.16px;
text-align: center;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3 .card__sub__title, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3 .card__sub__title, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3 .card__sub__title, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3 .card__sub__title, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3 .card__sub__title {
color: #121212;
font-size: 20px;
font-weight: 700;
line-height: 28px;
letter-spacing: -0.2px;
}
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.type1 .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type1 .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type1 .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type1 .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type1 .card__subject-tit {
background: #b3a3fe;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.type1::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type1::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type1::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type1::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type1::before {
background: #b3a3fe;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.type2 .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type2 .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type2 .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type2 .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type2 .card__subject-tit {
background: #ffd349;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.type2::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type2::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type2::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type2::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type2::before {
background: #ffd349;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.type3 .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type3 .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type3 .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type3 .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type3 .card__subject-tit {
background: #f3b3d1;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.type3::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type3::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type3::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type3::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type3::before {
background: #f3b3d1;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.type4 .card__subject-tit, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type4 .card__subject-tit, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type4 .card__subject-tit, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type4 .card__subject-tit, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type4 .card__subject-tit {
background: #79d1c7;
}
.base-page-cont.page-examList .tab-cont-wrap .card__type3.type4::before, .base-page-cont.page-userTestExamList .tab-cont-wrap .card__type3.type4::before, .base-page-cont.page-simulPaperNow .tab-cont-wrap .card__type3.type4::before, .base-page-cont.page-myExamList .tab-cont-wrap .card__type3.type4::before, .base-page-cont.page-myWrongAnswer .tab-cont-wrap .card__type3.type4::before {
background: #79d1c7;
}
.base-page-cont.page-examList .tab-cont-wrap ~ .gray-box.type1, .base-page-cont.page-userTestExamList .tab-cont-wrap ~ .gray-box.type1, .base-page-cont.page-simulPaperNow .tab-cont-wrap ~ .gray-box.type1, .base-page-cont.page-myExamList .tab-cont-wrap ~ .gray-box.type1, .base-page-cont.page-myWrongAnswer .tab-cont-wrap ~ .gray-box.type1 {
padding: 0;
border-bottom: none;
}
.base-page-cont.page-examList .gray-box.type1, .base-page-cont.page-userTestExamList .gray-box.type1, .base-page-cont.page-simulPaperNow .gray-box.type1, .base-page-cont.page-myExamList .gray-box.type1, .base-page-cont.page-myWrongAnswer .gray-box.type1 {
margin: 0;
padding: 40px 0 10px;
background: none;
border-bottom: 2px solid #79d1c7;
}
.base-page-cont.page-examList .gray-box.type1::after, .base-page-cont.page-examList .gray-box.type1::before, .base-page-cont.page-userTestExamList .gray-box.type1::after, .base-page-cont.page-userTestExamList .gray-box.type1::before, .base-page-cont.page-simulPaperNow .gray-box.type1::after, .base-page-cont.page-simulPaperNow .gray-box.type1::before, .base-page-cont.page-myExamList .gray-box.type1::after, .base-page-cont.page-myExamList .gray-box.type1::before, .base-page-cont.page-myWrongAnswer .gray-box.type1::after, .base-page-cont.page-myWrongAnswer .gray-box.type1::before {
display: none;
}
.base-page-cont.page-examList .gray-box.type2, .base-page-cont.page-userTestExamList .gray-box.type2, .base-page-cont.page-simulPaperNow .gray-box.type2, .base-page-cont.page-myExamList .gray-box.type2, .base-page-cont.page-myWrongAnswer .gray-box.type2 {
background: #f4f8fb;
padding: 22px 20px;
border-radius: 20px;
}
.base-page-cont.page-examList .tbl-basic, .base-page-cont.page-userTestExamList .tbl-basic, .base-page-cont.page-simulPaperNow .tbl-basic, .base-page-cont.page-myExamList .tbl-basic, .base-page-cont.page-myWrongAnswer .tbl-basic {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 801px) {
.base-page-cont.page-examList .function-group, .base-page-cont.page-userTestExamList .function-group, .base-page-cont.page-simulPaperNow .function-group, .base-page-cont.page-myExamList .function-group, .base-page-cont.page-myWrongAnswer .function-group {
padding: 20px 0 17px;
border-bottom: 2px solid #79d1c7;
}
}
.base-page-cont.page-examList {
background-color: #f4f8fb;
}
@media (min-width: 801px) {
.base-page-cont.page-examList {
background-color: #fff;
}
}
.base-page-cont.page-examList .base-top-container .base-inner {
padding-top: 0;
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
gap: 40px;
}
.base-page-cont.page-examList .base-top-container .base-inner .base-date-picker .date-picker {
background-color: unset;
padding: 0;
}
.base-page-cont.page-examList #searchForm > .base-inner {
padding: 10px 0 0;
}
.base-page-cont.page-examList #searchForm > .base-inner .sub-wrap {
padding-top: 0;
}
.base-page-cont.page-examList #searchForm > .base-inner .gray-box {
padding: 22px 20px;
border-radius: 20px;
}
.base-page-cont.page-examList #searchForm > .base-inner .gray-box p {
color: #666666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.sub-container:has(.page-examList) ~ #popupLayer .popupContent .popupContent__header {
display: flex;
justify-content: space-between;
padding: 11px 24px;
}
.sub-container:has(.page-examList) ~ #popupLayer .popupContent .popupContent__header .b-close img {
width: 24px;
height: 24px;
}
.base-page-cont.page-userTestExamList {
background-color: #f4f8fb;
}
@media (min-width: 801px) {
.base-page-cont.page-userTestExamList {
background-color: #fff;
}
}
.base-page-cont.page-userTestExamList .base-inner {
padding: 50px 0 0;
}
.base-page-cont.page-userTestExamList .base-inner .mock-test-term .tab {
margin-top: 0;
}
.base-page-cont.page-userTestExamList .base-inner .sub-wrap {
padding-top: 0;
}
.base-page-cont.page-userTestExamList .base-inner .gray-box p {
color: #666666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-simulPaperNow {
padding: 0 !important;
}
.base-page-cont.page-simulPaperNow .base-inner .gray-box p {
color: #666666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-simulPaperNow .base-container {
display: flex;
gap: 70px;
padding: 40px 0 100px;
}
.base-page-cont.page-simulPaperNow .base-container__title {
font-size: 28px;
font-weight: 700;
line-height: 114.286%;
}
.base-page-cont.page-simulPaperNow .base-container .left-container,
.base-page-cont.page-simulPaperNow .base-container .right-container {
width: 50%;
display: flex;
flex-direction: column;
gap: 30px;
}
.base-page-cont.page-simulPaperNow .base-container .left-container .base-table.type-gray {
border-left: none;
border-right: none;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.base-page-cont.page-simulPaperNow .base-container .left-container .base-table.type-gray th {
background-color: #f4f8fb;
color: #121212;
}
.base-page-cont.page-simulPaperNow .base-container .left-container .base-table.type-gray tr:last-child {
border-bottom: none;
}
.base-page-cont.page-simulPaperNow .base-container .left-container .base-table.type-gray td {
text-align: left;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .base-card-wrap {
display: flex;
flex-direction: column;
gap: 20px;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .cards {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .cards .card {
width: calc(50% - 12px);
flex-grow: 1;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .cards .card__title {
text-align: center;
padding: 18px 0;
background: #ffd349;
color: #fff;
border-bottom: 0;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .cards .card__footer {
padding: 28px 0;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .cards .card.korean .card__title {
background-color: #ffd349;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .cards .card.math .card__title {
background-color: #b3a3fe;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .cards .card.society .card__title {
background-color: #4bc8f5;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .cards .card.science .card__title {
background-color: #bdd533;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .gray-box.type1 {
margin: 0;
padding: 0;
border-bottom: 0;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .btn-grade-view {
border-radius: 24px;
min-width: 268px;
margin: 0 auto;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .btn-result-view {
display: flex;
align-items: center;
gap: 4px;
border: none;
color: #121212;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .btn-result-view > img {
width: 14px;
height: 14px;
}
.base-page-cont.page-simulPaperNow .base-container .right-container .btn-result-view > span {
border-bottom: 1px solid #121212;
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container {
flex-direction: column;
gap: 40px;
background: #f4f8fb;
padding: 40px 0 100px;
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container .base-inner {
display: flex;
flex-direction: column;
gap: 20px;
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container .base-inner .cards {
display: flex;
gap: 20px;
align-items: center;
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container .base-inner .card {
border-radius: 50px;
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container .base-inner .card__title {
color: #fff;
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
border-bottom: 0;
padding: 0;
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container .base-inner .card__title__sub {
display: inline-flex;
padding: 2px 22px;
justify-content: center;
align-items: center;
gap: 10px;
color: #fff;
border-radius: 200px;
background: rgba(255, 255, 255, 0.19);
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container .base-inner .card__body .col-group {
padding: 50px 0;
border-radius: 40px 40px 0px 0px;
background: #00ab93;
display: flex;
flex-direction: column;
gap: 26px;
justify-content: center;
align-items: center;
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container .base-inner .card__body .col-group2 {
display: flex;
flex-direction: column;
gap: 4px;
justify-content: flex-start;
align-items: center;
padding-bottom: 40px;
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container .base-inner .card__body .col-group2 img {
height: 330px;
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container .base-inner .card__body .col-group2 span {
color: #333333;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container .base-inner .card:nth-of-type(2) .card__body .col-group {
background: #01416c;
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container .base-inner .gray-box.type1 {
padding: 0;
border-bottom: none;
}
.base-page-cont.page-simulPaperNow .base-container.bottom-container .base-inner .gray-box.type1 i {
text-decoration: underline;
}
.sub-container:has(.page-simulPaperNow) .base-select-wrap .select-menu .options {
max-width: unset;
width: 100%;
}
.sub-container:has(.page-myExamList) ~ #popupLayer {
width: max-content;
}
.base-page-cont.page-myExamList .base-inner {
padding-top: 50px;
}
.base-page-cont.page-myExamList .base-inner .gray-box p {
color: #666666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-myExamList .base-inner .exam-wrap {
margin-top: 0;
}
.base-page-cont.page-myExamList .base-inner .exam-wrap .card__info__list .btn-area {
width: auto;
display: flex;
gap: 16px;
align-items: center;
margin-top: 0;
}
.base-page-cont.page-myExamList .base-inner .exam-wrap .chinese-search,
.base-page-cont.page-myExamList .base-inner .exam-wrap .test-search {
margin-bottom: 0;
}
.base-page-cont.page-myExamList .base-inner .exam-wrap p::before {
display: none;
}
.sub-container:has(.page-myExamList) ~ #popupLayer .base-popup-inner .exam-wrap {
margin-top: 0;
}
.base-page-cont.page-myWrongAnswer .base-top-container .base-inner {
padding-top: 0;
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
gap: 40px;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section {
width: 100%;
height: 210px;
background-color: #f4f8fb;
display: flex;
gap: 42px;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
flex-grow: 1;
gap: 10px;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__item__tit {
display: flex;
align-items: center;
color: #121212;
font-size: 20px;
font-weight: 700;
line-height: 140%;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__item__img {
width: 32px;
height: auto;
display: block;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__item .percent-num {
color: #00ab93;
font-size: 28px;
font-weight: 700;
line-height: 114.286%;
display: flex;
gap: 8px;
align-items: center;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__item .percent-num__100 {
color: #f04d69;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__item .totalCompletionCount-num {
color: #777777;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__item .totalCompletionCount-num span {
font-weight: 700;
color: #121212;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__main {
width: 100%;
max-width: 240px;
background: url("/assets/renewal2023/img/common/calendar-bg.png") no-repeat center/contain;
transform: scale(1.1);
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__main__item .percent-num {
font-size: 48px;
font-weight: 700;
line-height: 125%;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__main__item .totalCompletionCount-num {
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__sub {
display: flex;
flex-direction: column;
gap: 30px;
flex-grow: 1;
padding-top: 20px;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__sub > strong {
display: flex;
gap: 42px;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__sub > strong > span {
color: #777777;
font-size: 18px;
font-weight: 400;
line-height: 144.444%;
display: flex;
gap: 6px;
align-items: center;
position: relative;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__sub > strong > span::after {
content: "";
width: 2px;
height: 100%;
background-color: #cccccc;
position: absolute;
left: -21px;
transform: translateX(50%);
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__sub > strong > span i {
font-weight: 700;
display: flex;
gap: 4px;
align-items: center;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__sub > strong > span i.incorrectRate-up {
color: #f04d69;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__sub > strong > span i.incorrectRate-up svg path {
fill: #f04d69;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__sub > strong > span i.incorrectRate-down {
color: #8165fe;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__sub > strong > span i.incorrectRate-down svg path {
fill: #8165fe;
}
.base-page-cont.page-myWrongAnswer .base-top-container .resolve-wrong-answers-section .card__list {
display: flex;
gap: 10px;
align-items: center;
height: 100%;
}
.base-page-cont.page-myWrongAnswer .base-inner {
padding-top: 50px;
}
/* ---------------------------------------------------------------------------------------
푸르넷
-----------------------------------------------------------------------------------------*/
.base-page-cont.page-purunet .thumbnail-banner {
margin-top: 30px;
}
.base-page-cont.page-purunet .thumbnail-banner__img {
width: 100%;
height: auto;
}
.base-page-cont.page-purunet .thumbnail-banner__img img {
width: 100%;
height: 100%;
background-size: cover;
display: block;
}
.base-page-cont.page-purunet .thumbnail-banner__info {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.base-page-cont.page-purunet .thumbnail-banner__tit {
color: #121212;
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
}
.base-page-cont.page-purunet .thumbnail-banner__desc {
color: #666666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-purunet .base-inner .gray-box.type1 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 40px 0 10px;
padding: 0;
}
.base-page-cont.page-purunet .base-inner .gray-box.type1 .gray-box-txt {
color: #666666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-purunet .base-inner .gray-box.type2 {
display: flex;
flex-direction: row;
gap: 48px;
align-items: center;
padding: 30px 0 30px 300px;
margin-top: 80px;
position: relative;
}
.base-page-cont.page-purunet .base-inner .gray-box__img {
width: 181px;
height: 200px;
position: absolute;
bottom: 0;
left: 70px;
}
.base-page-cont.page-purunet .base-inner .gray-box__text {
display: flex;
flex-direction: column;
gap: 8px;
}
.base-page-cont.page-purunet .base-inner .gray-box__text p {
color: #999999;
font-size: 16px;
font-weight: 400;
line-height: 150%;
padding-left: 16px;
position: relative;
}
.base-page-cont.page-purunet .base-inner .gray-box__text p::after {
content: "";
display: block;
width: 8px;
height: 8px;
background: #00ab93;
position: absolute;
top: 8px;
left: 0;
border-radius: 8px;
}
.base-page-cont.page-purunet .base-inner .gray-box__text p i {
color: #121212;
font-weight: 700;
}
.base-page-cont.page-purunet .base-inner .tab-contents {
padding-top: 0;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic {
padding: 40px 0 60px;
display: flex;
row-gap: 60px;
column-gap: 26px;
flex-direction: row;
flex-wrap: wrap;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic::after {
display: none;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic.no-result {
flex-direction: column;
gap: 10px;
align-items: center;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card {
width: calc(25% - 19.5px);
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
box-shadow: none;
border: none;
position: relative;
padding: 8px;
background-color: unset;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card:hover .card__header::after {
background: #000;
opacity: 0.5;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card:hover .ebook-view-btn,
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card:hover .download-btn,
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card:hover .listen-btn,
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card:hover .play-btn {
opacity: 1;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__header {
width: 100%;
height: 350px;
min-height: 350px;
max-height: 350px;
background-color: #eee;
position: relative;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
border-radius: 20px;
overflow: hidden;
border-radius: 20px;
border: 1px solid #d9d9d9;
box-sizing: content-box;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__header::after {
content: "";
width: 100%;
height: 100%;
border-radius: 20px;
opacity: 0.5;
background: #000;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.1s ease-in;
z-index: 1;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__thumbnail {
width: 100%;
height: 100%;
background-size: cover;
display: block;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .ebook-view-btn,
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .download-btn,
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .listen-btn,
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .play-btn {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 20px;
font-weight: 700;
line-height: 140%;
position: absolute;
opacity: 0;
transition: all 0.1s ease-in;
z-index: 10;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .ebook-view-btn img,
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .download-btn img,
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .listen-btn img,
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .play-btn img {
width: 100%;
height: 100%;
display: block;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .ebook-view-btn {
height: 64px;
border-radius: 0px 0px 20px 20px;
background: #8165fe;
color: #fff;
bottom: 0;
left: 0;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .ebook-view-btn img {
width: 48px;
height: 48px;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .play-btn,
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .listen-btn {
width: 56px;
height: 56px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card .download-btn {
width: 96px;
height: 96px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__body {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__tag {
border: 1px solid #00ab93;
display: flex;
align-items: center;
overflow: hidden;
border-radius: 14px;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__tag span {
color: #00ab93;
font-size: 16px;
font-weight: 700;
line-height: 150%;
display: flex;
align-items: center;
justify-content: center;
padding: 2px 16px;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__tag span:nth-child(1) {
color: #00ab93;
background: #fff;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__tag span:nth-child(2) {
color: #fff;
background: #00ab93;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__tag2 {
width: 100%;
border: none;
border-radius: 0px 0px 20px 20px;
position: relative;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__tag2::after {
content: url("/assets/renewal2023/img/common/thumbnail-tag-bg.png");
display: block;
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__tag2 span {
width: 50%;
color: #fff;
padding: 8px 0;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__tag2 span:nth-of-type(1) {
background-color: #8165fe;
color: #fff;
z-index: 2;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__tag2 span:nth-of-type(2) {
background-color: #121212;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__tag3 {
border: none;
justify-content: center;
width: 100%;
border: none;
border-radius: 0px 0px 20px 20px;
position: relative;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__tag3 span:nth-child(1) {
background: none;
color: #fff;
}
.base-page-cont.page-purunet .base-inner .tab-contents .tbl-basic .card__info {
font-size: 20px;
font-weight: 700;
line-height: 140%;
text-align: center;
}
.base-page-cont.page-purunet .base-inner .tab-contents .paging {
margin-top: 0;
padding-top: 50px;
border-top: 2px solid #121212;
}
.base-page-cont.page-purunet .text-align-left {
text-align: left;
}
.base-page-cont.page-purunet .base-popup .popup-gray-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 48px;
margin: 30px 0 20px;
}
.base-page-cont.page-purunet .base-popup .popup-gray-box .item {
color: #666666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
display: flex;
gap: 8px;
align-items: center;
}
.base-page-cont.page-purunet .base-popup .popup-gray-box .item .point {
color: #01416c;
font-size: 14px;
font-weight: 700;
line-height: 128.571%;
padding: 4px 8px;
border-radius: 14px;
border: 1px solid #01416c;
background: rgba(121, 209, 199, 0);
}
.base-page-cont.page-purunet .base-ipt-wrap {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.base-page-cont.page-purunet .base-ipt-wrap .btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.base-page-cont.page-purunet .base-ipt-wrap .btn .btn-icon {
width: auto;
height: 16px;
display: block;
}
/* ---------------------------------------------------------------------------------------
푸르넷 플러스
-----------------------------------------------------------------------------------------*/
.base-page-cont.page-chineseCharCatoon > .base-inner, .base-page-cont.page-chineseCharStudyDataList > .base-inner, .base-page-cont.page-chineseCharQExamList > .base-inner {
padding-top: 50px;
}
.base-page-cont.page-chineseCharCatoon > .base-inner .base-tab.type-depth3 .tab__list, .base-page-cont.page-chineseCharStudyDataList > .base-inner .base-tab.type-depth3 .tab__list, .base-page-cont.page-chineseCharQExamList > .base-inner .base-tab.type-depth3 .tab__list {
gap: 24px;
}
.base-page-cont.page-chineseCharCatoon > .base-inner .tab-contents, .base-page-cont.page-chineseCharStudyDataList > .base-inner .tab-contents, .base-page-cont.page-chineseCharQExamList > .base-inner .tab-contents {
padding-top: 0;
}
.base-page-cont.page-readTest > .base-inner, .base-page-cont.page-assayMovie > .base-inner, .base-page-cont.page-teacherGuide > .base-inner, .base-page-cont.page-teacherGuideWrite > .base-inner, .base-page-cont.page-teacherGuideDetail > .base-inner, .base-page-cont.page-cookieAnswer > .base-inner, .base-page-cont.page-rReading > .base-inner, .base-page-cont.page-dReading > .base-inner, .base-page-cont.page-supple-essay > .base-inner {
padding-top: 50px;
}
.base-page-cont.page-readTest > .base-inner .tab-contents, .base-page-cont.page-assayMovie > .base-inner .tab-contents, .base-page-cont.page-teacherGuide > .base-inner .tab-contents, .base-page-cont.page-teacherGuideWrite > .base-inner .tab-contents, .base-page-cont.page-teacherGuideDetail > .base-inner .tab-contents, .base-page-cont.page-cookieAnswer > .base-inner .tab-contents, .base-page-cont.page-rReading > .base-inner .tab-contents, .base-page-cont.page-dReading > .base-inner .tab-contents, .base-page-cont.page-supple-essay > .base-inner .tab-contents {
padding-top: 0;
}
.base-page-cont.page-readTest > .base-inner .montserrat, .base-page-cont.page-assayMovie > .base-inner .montserrat, .base-page-cont.page-teacherGuide > .base-inner .montserrat, .base-page-cont.page-teacherGuideWrite > .base-inner .montserrat, .base-page-cont.page-teacherGuideDetail > .base-inner .montserrat, .base-page-cont.page-cookieAnswer > .base-inner .montserrat, .base-page-cont.page-rReading > .base-inner .montserrat, .base-page-cont.page-dReading > .base-inner .montserrat, .base-page-cont.page-supple-essay > .base-inner .montserrat {
display: flex;
justify-content: center;
gap: 15px;
padding-bottom: 30px;
border-bottom: 2px solid #00ab93;
margin: 0;
font-size: 40px;
font-weight: 400;
line-height: 135%;
}
.base-page-cont.page-readTest > .base-inner .montserrat .arrow_wrap, .base-page-cont.page-assayMovie > .base-inner .montserrat .arrow_wrap, .base-page-cont.page-teacherGuide > .base-inner .montserrat .arrow_wrap, .base-page-cont.page-teacherGuideWrite > .base-inner .montserrat .arrow_wrap, .base-page-cont.page-teacherGuideDetail > .base-inner .montserrat .arrow_wrap, .base-page-cont.page-cookieAnswer > .base-inner .montserrat .arrow_wrap, .base-page-cont.page-rReading > .base-inner .montserrat .arrow_wrap, .base-page-cont.page-dReading > .base-inner .montserrat .arrow_wrap, .base-page-cont.page-supple-essay > .base-inner .montserrat .arrow_wrap {
display: flex;
gap: 12px;
align-items: center;
}
.base-page-cont.page-readTest > .base-inner .montserrat .arrow_wrap a, .base-page-cont.page-assayMovie > .base-inner .montserrat .arrow_wrap a, .base-page-cont.page-teacherGuide > .base-inner .montserrat .arrow_wrap a, .base-page-cont.page-teacherGuideWrite > .base-inner .montserrat .arrow_wrap a, .base-page-cont.page-teacherGuideDetail > .base-inner .montserrat .arrow_wrap a, .base-page-cont.page-cookieAnswer > .base-inner .montserrat .arrow_wrap a, .base-page-cont.page-rReading > .base-inner .montserrat .arrow_wrap a, .base-page-cont.page-dReading > .base-inner .montserrat .arrow_wrap a, .base-page-cont.page-supple-essay > .base-inner .montserrat .arrow_wrap a {
left: -36px;
padding: 0;
display: flex;
align-items: center;
}
.base-page-cont.page-readTest > .base-inner .montserrat .arrow_wrap a:last-of-type, .base-page-cont.page-assayMovie > .base-inner .montserrat .arrow_wrap a:last-of-type, .base-page-cont.page-teacherGuide > .base-inner .montserrat .arrow_wrap a:last-of-type, .base-page-cont.page-teacherGuideWrite > .base-inner .montserrat .arrow_wrap a:last-of-type, .base-page-cont.page-teacherGuideDetail > .base-inner .montserrat .arrow_wrap a:last-of-type, .base-page-cont.page-cookieAnswer > .base-inner .montserrat .arrow_wrap a:last-of-type, .base-page-cont.page-rReading > .base-inner .montserrat .arrow_wrap a:last-of-type, .base-page-cont.page-dReading > .base-inner .montserrat .arrow_wrap a:last-of-type, .base-page-cont.page-supple-essay > .base-inner .montserrat .arrow_wrap a:last-of-type {
right: -36px;
left: auto;
}
.base-page-cont.page-readTest > .base-inner .img-list, .base-page-cont.page-assayMovie > .base-inner .img-list, .base-page-cont.page-teacherGuide > .base-inner .img-list, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list, .base-page-cont.page-cookieAnswer > .base-inner .img-list, .base-page-cont.page-rReading > .base-inner .img-list, .base-page-cont.page-dReading > .base-inner .img-list, .base-page-cont.page-supple-essay > .base-inner .img-list {
border-top: none;
display: flex;
flex-direction: column;
}
.base-page-cont.page-readTest > .base-inner .img-list li, .base-page-cont.page-assayMovie > .base-inner .img-list li, .base-page-cont.page-teacherGuide > .base-inner .img-list li, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li, .base-page-cont.page-cookieAnswer > .base-inner .img-list li, .base-page-cont.page-rReading > .base-inner .img-list li, .base-page-cont.page-dReading > .base-inner .img-list li, .base-page-cont.page-supple-essay > .base-inner .img-list li {
padding: 24px 20px;
display: flex;
flex-direction: row;
gap: 40px;
border-bottom: 1px dashed #cccccc;
}
.base-page-cont.page-readTest > .base-inner .img-list li .img-wrap, .base-page-cont.page-assayMovie > .base-inner .img-list li .img-wrap, .base-page-cont.page-teacherGuide > .base-inner .img-list li .img-wrap, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li .img-wrap, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li .img-wrap, .base-page-cont.page-cookieAnswer > .base-inner .img-list li .img-wrap, .base-page-cont.page-rReading > .base-inner .img-list li .img-wrap, .base-page-cont.page-dReading > .base-inner .img-list li .img-wrap, .base-page-cont.page-supple-essay > .base-inner .img-list li .img-wrap {
margin: 0;
width: 120px;
height: 150px;
margin: 0;
}
.base-page-cont.page-readTest > .base-inner .img-list li .img-wrap img, .base-page-cont.page-assayMovie > .base-inner .img-list li .img-wrap img, .base-page-cont.page-teacherGuide > .base-inner .img-list li .img-wrap img, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li .img-wrap img, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li .img-wrap img, .base-page-cont.page-cookieAnswer > .base-inner .img-list li .img-wrap img, .base-page-cont.page-rReading > .base-inner .img-list li .img-wrap img, .base-page-cont.page-dReading > .base-inner .img-list li .img-wrap img, .base-page-cont.page-supple-essay > .base-inner .img-list li .img-wrap img {
background-color: #eee;
}
.base-page-cont.page-readTest > .base-inner .img-list li .txt-list, .base-page-cont.page-assayMovie > .base-inner .img-list li .txt-list, .base-page-cont.page-teacherGuide > .base-inner .img-list li .txt-list, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li .txt-list, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li .txt-list, .base-page-cont.page-cookieAnswer > .base-inner .img-list li .txt-list, .base-page-cont.page-rReading > .base-inner .img-list li .txt-list, .base-page-cont.page-dReading > .base-inner .img-list li .txt-list, .base-page-cont.page-supple-essay > .base-inner .img-list li .txt-list {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 16px;
text-align: unset;
height: 100%;
}
.base-page-cont.page-readTest > .base-inner .img-list li .txt-list > h4, .base-page-cont.page-assayMovie > .base-inner .img-list li .txt-list > h4, .base-page-cont.page-teacherGuide > .base-inner .img-list li .txt-list > h4, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li .txt-list > h4, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li .txt-list > h4, .base-page-cont.page-cookieAnswer > .base-inner .img-list li .txt-list > h4, .base-page-cont.page-rReading > .base-inner .img-list li .txt-list > h4, .base-page-cont.page-dReading > .base-inner .img-list li .txt-list > h4, .base-page-cont.page-supple-essay > .base-inner .img-list li .txt-list > h4 {
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
display: flex;
gap: 16px;
align-items: center;
}
.base-page-cont.page-readTest > .base-inner .img-list li .txt-list > p, .base-page-cont.page-assayMovie > .base-inner .img-list li .txt-list > p, .base-page-cont.page-teacherGuide > .base-inner .img-list li .txt-list > p, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li .txt-list > p, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li .txt-list > p, .base-page-cont.page-cookieAnswer > .base-inner .img-list li .txt-list > p, .base-page-cont.page-rReading > .base-inner .img-list li .txt-list > p, .base-page-cont.page-dReading > .base-inner .img-list li .txt-list > p, .base-page-cont.page-supple-essay > .base-inner .img-list li .txt-list > p {
height: 100%;
color: #666666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-readTest > .base-inner .img-list li .txt-list .txt-list-tags, .base-page-cont.page-assayMovie > .base-inner .img-list li .txt-list .txt-list-tags, .base-page-cont.page-teacherGuide > .base-inner .img-list li .txt-list .txt-list-tags, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li .txt-list .txt-list-tags, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li .txt-list .txt-list-tags, .base-page-cont.page-cookieAnswer > .base-inner .img-list li .txt-list .txt-list-tags, .base-page-cont.page-rReading > .base-inner .img-list li .txt-list .txt-list-tags, .base-page-cont.page-dReading > .base-inner .img-list li .txt-list .txt-list-tags, .base-page-cont.page-supple-essay > .base-inner .img-list li .txt-list .txt-list-tags {
display: flex;
gap: 8px;
align-items: center;
}
.base-page-cont.page-readTest > .base-inner .img-list li .txt-list .txt-list-tags span, .base-page-cont.page-assayMovie > .base-inner .img-list li .txt-list .txt-list-tags span, .base-page-cont.page-teacherGuide > .base-inner .img-list li .txt-list .txt-list-tags span, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li .txt-list .txt-list-tags span, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li .txt-list .txt-list-tags span, .base-page-cont.page-cookieAnswer > .base-inner .img-list li .txt-list .txt-list-tags span, .base-page-cont.page-rReading > .base-inner .img-list li .txt-list .txt-list-tags span, .base-page-cont.page-dReading > .base-inner .img-list li .txt-list .txt-list-tags span, .base-page-cont.page-supple-essay > .base-inner .img-list li .txt-list .txt-list-tags span {
display: flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
border-radius: 17px;
background: #ebebeb;
}
.base-page-cont.page-readTest > .base-inner .img-list li .txt-list .solution-btn, .base-page-cont.page-assayMovie > .base-inner .img-list li .txt-list .solution-btn, .base-page-cont.page-teacherGuide > .base-inner .img-list li .txt-list .solution-btn, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li .txt-list .solution-btn, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li .txt-list .solution-btn, .base-page-cont.page-cookieAnswer > .base-inner .img-list li .txt-list .solution-btn, .base-page-cont.page-rReading > .base-inner .img-list li .txt-list .solution-btn, .base-page-cont.page-dReading > .base-inner .img-list li .txt-list .solution-btn, .base-page-cont.page-supple-essay > .base-inner .img-list li .txt-list .solution-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
border-radius: 6px;
border: 1px solid #cccccc;
padding: 6px 12px;
cursor: pointer;
}
.base-page-cont.page-readTest > .base-inner .img-list li .align-r, .base-page-cont.page-assayMovie > .base-inner .img-list li .align-r, .base-page-cont.page-teacherGuide > .base-inner .img-list li .align-r, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li .align-r, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li .align-r, .base-page-cont.page-cookieAnswer > .base-inner .img-list li .align-r, .base-page-cont.page-rReading > .base-inner .img-list li .align-r, .base-page-cont.page-dReading > .base-inner .img-list li .align-r, .base-page-cont.page-supple-essay > .base-inner .img-list li .align-r {
position: unset;
display: flex;
flex-direction: column;
height: auto;
justify-content: center;
}
.base-page-cont.page-readTest > .base-inner .img-list li .align-r .align-wrap, .base-page-cont.page-assayMovie > .base-inner .img-list li .align-r .align-wrap, .base-page-cont.page-teacherGuide > .base-inner .img-list li .align-r .align-wrap, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li .align-r .align-wrap, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li .align-r .align-wrap, .base-page-cont.page-cookieAnswer > .base-inner .img-list li .align-r .align-wrap, .base-page-cont.page-rReading > .base-inner .img-list li .align-r .align-wrap, .base-page-cont.page-dReading > .base-inner .img-list li .align-r .align-wrap, .base-page-cont.page-supple-essay > .base-inner .img-list li .align-r .align-wrap {
display: flex;
flex-direction: column;
justify-content: center;
}
.base-page-cont.page-readTest > .base-inner .img-list li .align-r .align-v, .base-page-cont.page-assayMovie > .base-inner .img-list li .align-r .align-v, .base-page-cont.page-teacherGuide > .base-inner .img-list li .align-r .align-v, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li .align-r .align-v, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li .align-r .align-v, .base-page-cont.page-cookieAnswer > .base-inner .img-list li .align-r .align-v, .base-page-cont.page-rReading > .base-inner .img-list li .align-r .align-v, .base-page-cont.page-dReading > .base-inner .img-list li .align-r .align-v, .base-page-cont.page-supple-essay > .base-inner .img-list li .align-r .align-v {
display: flex;
flex-direction: column;
gap: 16px;
}
.base-page-cont.page-readTest > .base-inner .img-list li .align-r .align-v.btns .btn, .base-page-cont.page-assayMovie > .base-inner .img-list li .align-r .align-v.btns .btn, .base-page-cont.page-teacherGuide > .base-inner .img-list li .align-r .align-v.btns .btn, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list li .align-r .align-v.btns .btn, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list li .align-r .align-v.btns .btn, .base-page-cont.page-cookieAnswer > .base-inner .img-list li .align-r .align-v.btns .btn, .base-page-cont.page-rReading > .base-inner .img-list li .align-r .align-v.btns .btn, .base-page-cont.page-dReading > .base-inner .img-list li .align-r .align-v.btns .btn, .base-page-cont.page-supple-essay > .base-inner .img-list li .align-r .align-v.btns .btn {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
text-indent: unset;
text-align: center;
min-width: auto;
padding: 14px 38px;
width: 100%;
}
.base-page-cont.page-readTest > .base-inner .img-list .no-result, .base-page-cont.page-assayMovie > .base-inner .img-list .no-result, .base-page-cont.page-teacherGuide > .base-inner .img-list .no-result, .base-page-cont.page-teacherGuideWrite > .base-inner .img-list .no-result, .base-page-cont.page-teacherGuideDetail > .base-inner .img-list .no-result, .base-page-cont.page-cookieAnswer > .base-inner .img-list .no-result, .base-page-cont.page-rReading > .base-inner .img-list .no-result, .base-page-cont.page-dReading > .base-inner .img-list .no-result, .base-page-cont.page-supple-essay > .base-inner .img-list .no-result {
padding: 40px 0;
gap: 16px;
}
.base-page-cont.page-readTest > .base-inner .cards, .base-page-cont.page-assayMovie > .base-inner .cards, .base-page-cont.page-teacherGuide > .base-inner .cards, .base-page-cont.page-teacherGuideWrite > .base-inner .cards, .base-page-cont.page-teacherGuideDetail > .base-inner .cards, .base-page-cont.page-cookieAnswer > .base-inner .cards, .base-page-cont.page-rReading > .base-inner .cards, .base-page-cont.page-dReading > .base-inner .cards, .base-page-cont.page-supple-essay > .base-inner .cards {
display: flex;
gap: 16px;
align-items: center;
margin-top: 40px;
justify-content: center;
}
.base-page-cont.page-readTest .base-popup-wrap .b-modal, .base-page-cont.page-assayMovie .base-popup-wrap .b-modal, .base-page-cont.page-teacherGuide .base-popup-wrap .b-modal, .base-page-cont.page-teacherGuideWrite .base-popup-wrap .b-modal, .base-page-cont.page-teacherGuideDetail .base-popup-wrap .b-modal, .base-page-cont.page-cookieAnswer .base-popup-wrap .b-modal, .base-page-cont.page-rReading .base-popup-wrap .b-modal, .base-page-cont.page-dReading .base-popup-wrap .b-modal, .base-page-cont.page-supple-essay .base-popup-wrap .b-modal {
background-color: rgb(0, 0, 0);
position: fixed;
inset: 0px;
opacity: 0.7;
z-index: 9998;
cursor: pointer;
}
.base-page-cont.page-readTest .base-popup, .base-page-cont.page-assayMovie .base-popup, .base-page-cont.page-teacherGuide .base-popup, .base-page-cont.page-teacherGuideWrite .base-popup, .base-page-cont.page-teacherGuideDetail .base-popup, .base-page-cont.page-cookieAnswer .base-popup, .base-page-cont.page-rReading .base-popup, .base-page-cont.page-dReading .base-popup, .base-page-cont.page-supple-essay .base-popup {
display: block;
}
.base-page-cont.page-readTest .base-popup.type2, .base-page-cont.page-assayMovie .base-popup.type2, .base-page-cont.page-teacherGuide .base-popup.type2, .base-page-cont.page-teacherGuideWrite .base-popup.type2, .base-page-cont.page-teacherGuideDetail .base-popup.type2, .base-page-cont.page-cookieAnswer .base-popup.type2, .base-page-cont.page-rReading .base-popup.type2, .base-page-cont.page-dReading .base-popup.type2, .base-page-cont.page-supple-essay .base-popup.type2 {
width: auto;
margin: 0 auto;
overflow: hidden;
display: block;
margin: 0 auto;
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
.base-page-cont.page-readTest .base-popup .popupContent__body, .base-page-cont.page-assayMovie .base-popup .popupContent__body, .base-page-cont.page-teacherGuide .base-popup .popupContent__body, .base-page-cont.page-teacherGuideWrite .base-popup .popupContent__body, .base-page-cont.page-teacherGuideDetail .base-popup .popupContent__body, .base-page-cont.page-cookieAnswer .base-popup .popupContent__body, .base-page-cont.page-rReading .base-popup .popupContent__body, .base-page-cont.page-dReading .base-popup .popupContent__body, .base-page-cont.page-supple-essay .base-popup .popupContent__body {
min-height: 650px;
max-height: 650px;
overflow-y: scroll;
}
.base-page-cont.page-historyEssayList .base-tab.type-depth3 .tab__list, .base-page-cont.page-historyEssayQuizList .base-tab.type-depth3 .tab__list, .base-page-cont.page-korHistoryEssay .base-tab.type-depth3 .tab__list {
padding: 16px 180px;
}
.base-page-cont.page-historyEssayList .base-tab.type-depth3 .tab__list .tab__item, .base-page-cont.page-historyEssayQuizList .base-tab.type-depth3 .tab__list .tab__item, .base-page-cont.page-korHistoryEssay .base-tab.type-depth3 .tab__list .tab__item {
min-width: 92px;
}
.base-page-cont.page-mathCountryConceptList > .base-inner, .base-page-cont.page-mathCountryProblem > .base-inner, .base-page-cont.page-mathEssayUnitTest > .base-inner {
padding-top: 50px;
}
.base-page-cont.page-mathCountryConceptList > .base-inner .tab-contents, .base-page-cont.page-mathCountryProblem > .base-inner .tab-contents, .base-page-cont.page-mathEssayUnitTest > .base-inner .tab-contents {
padding-top: 0;
}
.base-page-cont.page-wholeBook > .base-inner {
padding-top: 50px;
}
.base-page-cont.page-wholeBook > .base-inner .tab-contents {
padding-top: 0;
}
.base-page-cont.page-chineseCharQExamList .base-inner .tab-contents .tbl-basic .card .ebook-view-btn {
width: 96px;
height: 96px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 96px;
}
.base-page-cont.page-readTest .base-inner .sm-tab-contents {
margin-top: 0;
}
.base-page-cont.page-readTest .base-inner .sm-tab-contents .description {
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 10px;
}
.base-page-cont.page-readTest .base-inner .sm-tab-contents .description__title {
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
}
.base-page-cont.page-readTest .base-inner .sm-tab-contents .description .text-area {
width: 100%;
height: auto;
max-height: 280px;
overflow-y: scroll;
padding: 20px;
gap: 10px;
border: 1px solid #cccccc;
background: #fff;
}
.base-page-cont.page-readTest .base-inner .sm-tab-contents .description__desc {
color: #666666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-teacherGuide .base-inner .teacher_guide,
.base-page-cont.page-teacherGuideWrite .base-inner .teacher_guide,
.base-page-cont.page-teacherGuideDetail .base-inner .teacher_guide {
margin-top: 0;
}
.base-page-cont.page-teacherGuide .base-inner .btns,
.base-page-cont.page-teacherGuideWrite .base-inner .btns,
.base-page-cont.page-teacherGuideDetail .base-inner .btns {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.base-page-cont.page-teacherGuide .base-inner .btns > div,
.base-page-cont.page-teacherGuideWrite .base-inner .btns > div,
.base-page-cont.page-teacherGuideDetail .base-inner .btns > div {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 16px;
}
.base-page-cont.page-teacherGuide .base-table tr td:nth-child(2),
.base-page-cont.page-teacherGuideWrite .base-table tr td:nth-child(2),
.base-page-cont.page-teacherGuideDetail .base-table tr td:nth-child(2) {
text-align: left;
}
.base-page-cont.page-teacherGuide .base-table tr:nth-of-type(2n),
.base-page-cont.page-teacherGuideWrite .base-table tr:nth-of-type(2n),
.base-page-cont.page-teacherGuideDetail .base-table tr:nth-of-type(2n) {
background-color: #fff;
}
.base-page-cont.page-teacherGuide .base-board-view .view-card-bottom .row-tit,
.base-page-cont.page-teacherGuideWrite .base-board-view .view-card-bottom .row-tit,
.base-page-cont.page-teacherGuideDetail .base-board-view .view-card-bottom .row-tit {
text-align: unset;
margin-bottom: 0;
}
.base-page-cont.page-cookieAnswer .base-inner .gray-box.type1 {
margin: 0 0 10px;
justify-content: flex-end;
}
.base-page-cont.page-cookieAnswer .base-inner .tab-contents {
padding: 0;
}
.base-page-cont.page-cookieAnswer .base-inner .tab-contents .base-table.type-circle {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.base-page-cont.page-cookieAnswer .base-inner .tab-contents .base-table.type-circle tr:nth-of-type(2n) {
background-color: #fff;
}
.base-page-cont.page-cookieAnswer .base-inner .tab-contents .base-table.type-circle thead tr th {
border-radius: 24px 24px 0px 0px;
}
.base-page-cont.page-cookieAnswer .base-inner .tab-contents .base-table.type-circle thead tr th + th {
border-left: 1px solid #fff;
}
.base-page-cont.page-cookieAnswer .base-inner .tab-contents .base-table.type-circle tbody tr {
border-bottom: 1px dashed #dddddd;
}
.base-page-cont.page-cookieAnswer .base-inner .tab-contents .base-table.type-circle tbody tr td {
border: none;
}
.base-page-cont.page-cookieAnswer .base-inner .tab-contents .base-table.type-circle tbody tr td + td {
border-left: 1px solid #fff;
}
.base-page-cont.page-cookieAnswer .base-inner .tab-contents .base-table.type-circle tbody tr td.level-num {
color: #121212;
font-size: 20px;
font-weight: 400;
line-height: 140%;
}
.base-page-cont.page-cookieAnswer .base-inner .tab-contents .base-table.type-circle tbody tr td.circle-list {
display: flex;
flex-direction: row;
gap: 16px;
padding: 20px 0;
justify-content: center;
}
.base-page-cont.page-cookieAnswer .base-inner .tab-contents .base-table.type-circle tbody tr td.circle-list .circle-item {
display: flex;
align-items: center;
justify-content: center;
background: #ebebeb;
color: #121212;
border-radius: 100%;
width: 64px;
height: 64px;
}
.base-page-cont.page-cookieAnswer .base-inner .tab-contents .base-table.type-circle tbody tr td.circle-list .circle-item:hover, .base-page-cont.page-cookieAnswer .base-inner .tab-contents .base-table.type-circle tbody tr td.circle-list .circle-item:active {
background-color: #00ab93;
color: #fff;
}
.base-page-cont.page-rReading .base-inner .read_report,
.base-page-cont.page-dReading .base-inner .read_report {
margin-top: 30px;
}
.base-page-cont.page-rReading .base-inner .btn-view-ebook,
.base-page-cont.page-dReading .base-inner .btn-view-ebook {
max-width: 127px;
margin: 0 auto;
}
.base-page-cont.page-dReading .base-inner .read_report {
margin-top: 0;
}
.base-page-cont.page-historyEssayList > .base-inner,
.base-page-cont.page-historyEssayQuizList > .base-inner {
padding-top: 50px;
}
.base-page-cont.page-historyEssayList > .base-inner .tab-contents,
.base-page-cont.page-historyEssayQuizList > .base-inner .tab-contents {
padding-top: 0;
}
.base-page-cont.page-historyEssayList .base-inner .tab-contents .tbl-basic .card__header {
height: 158px;
min-height: 158px;
max-height: 158px;
}
.base-page-cont.page-korHistoryEssay .base-ipt-wrap {
margin: 50px 0 20px;
}
.base-page-cont.page-korHistoryEssay .base-inner .tab-contents .tbl-basic {
padding: 0 0 60px;
}
.base-page-cont.page-mathCountryConceptList .base-inner .tab-contents .tbl-basic .card__header {
height: 180px;
min-height: 180px;
max-height: 180px;
}
.base-page-cont.page-mathCountryConceptList .base-inner .tab-contents .tbl-basic .card .download-btn {
width: 56px;
height: 56px;
}
.base-page-cont.page-mathCountryConceptList .base-inner .tab-contents .tbl-basic .card__tag {
border: none;
}
.base-page-cont.page-mathCountryConceptList .base-inner .tab-contents .tbl-basic .card__tag span:nth-child(1) {
color: #fff;
background: #00ab93;
}
.base-page-cont.page-mathCountryConceptList .base-inner .tab-contents .tbl-basic,
.base-page-cont.page-mathCountryProblem .base-inner .tab-contents .tbl-basic,
.base-page-cont.page-mathEssayUnitTest .base-inner .tab-contents .tbl-basic {
padding: 0 0 60px;
}
.base-page-cont.page-mathCountryConceptList .base-select-wrap,
.base-page-cont.page-mathCountryProblem .base-select-wrap,
.base-page-cont.page-mathEssayUnitTest .base-select-wrap {
display: flex;
justify-content: flex-start;
margin: 40px 0 20px;
}
.base-page-cont.page-readingWorldList > .base-inner,
.base-page-cont.page-readingWorldQuizList > .base-inner {
padding-top: 50px;
}
.base-page-cont.page-readingWorldList > .base-inner .tab-contents,
.base-page-cont.page-readingWorldQuizList > .base-inner .tab-contents {
padding-top: 0;
}
.base-page-cont.page-readingWorldList .base-inner .tab-contents .tbl-basic .card__header {
height: 158px;
min-height: 158px;
max-height: 158px;
}
.base-page-cont.page-bicReadingWorld .base-ipt-wrap {
margin: 50px 0 20px;
}
.base-page-cont.page-bicReadingWorld .base-inner .tab-contents .tbl-basic {
padding: 0 0 60px;
}
.base-page-cont.page-wholeBook .base-ipt-wrap {
margin: 50px 0 20px;
}
.base-page-cont.page-wholeBook .base-inner .tab-contents .tbl-basic .type-thumb-video .card__tag span:nth-child(1) {
color: #fff;
background: #00ab93;
}
.base-page-cont.page-wholeBook .base-inner .base-tab.type-depth3:has(.only-tit) {
background: none;
border-bottom: 1px dashed #ccc;
border-radius: 0;
}
.base-page-cont.page-wholeBook .base-inner .base-tab.type-depth3:has(.only-tit) .tab__list {
justify-content: unset;
}
.base-page-cont.page-wholeBook .base-inner .base-tab.type-depth3:has(.only-tit) .tab__list .tab__item {
background: none;
color: #333;
border: none;
}
.base-page-cont.page-wholeBook .base-inner .base-tab.type-depth3:has(.only-tit) .tab__list .tab__item a {
color: #333;
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
background: none;
position: relative;
padding: 0;
}
.base-page-cont.page-wholeBook .base-inner .base-tab.type-depth3:has(.only-tit) .tab__list .tab__item a::after {
content: "";
width: 28px;
height: 28px;
border-radius: 28px;
background: #4bc8f5;
position: absolute;
top: -4px;
left: -12px;
z-index: -1;
}
/* ---------------------------------------------------------------------------------------
푸르넷 유아
-----------------------------------------------------------------------------------------*/
.base-page-cont.page-readingBookList > .base-inner, .base-page-cont.page-korWriteList > .base-inner, .base-page-cont.page-korCardList > .base-inner, .base-page-cont.page-littlePrnFreeList > .base-inner {
padding-top: 50px;
}
.base-page-cont.page-readingBookList > .base-inner .tab-contents, .base-page-cont.page-korWriteList > .base-inner .tab-contents, .base-page-cont.page-korCardList > .base-inner .tab-contents, .base-page-cont.page-littlePrnFreeList > .base-inner .tab-contents {
padding-top: 0;
}
.base-page-cont.page-readingBookList .base-inner .tab-contents .tbl-basic, .base-page-cont.page-korWriteList .base-inner .tab-contents .tbl-basic, .base-page-cont.page-korCardList .base-inner .tab-contents .tbl-basic, .base-page-cont.page-littlePrnFreeList .base-inner .tab-contents .tbl-basic {
padding: 0 0 60px;
}
.base-page-cont.page-readingBookList .base-inner .base-select-wrap, .base-page-cont.page-korWriteList .base-inner .base-select-wrap, .base-page-cont.page-korCardList .base-inner .base-select-wrap, .base-page-cont.page-littlePrnFreeList .base-inner .base-select-wrap {
display: flex;
justify-content: space-between;
margin: 40px 0 20px;
}
.base-page-cont.page-readingBookList .base-inner .base-select-wrap .gray-box.type1, .base-page-cont.page-korWriteList .base-inner .base-select-wrap .gray-box.type1, .base-page-cont.page-korCardList .base-inner .base-select-wrap .gray-box.type1, .base-page-cont.page-littlePrnFreeList .base-inner .base-select-wrap .gray-box.type1 {
margin: 0;
}
.base-page-cont.page-readingBookList .base-inner .base-select-wrap .gray-box.type1 p, .base-page-cont.page-korWriteList .base-inner .base-select-wrap .gray-box.type1 p, .base-page-cont.page-korCardList .base-inner .base-select-wrap .gray-box.type1 p, .base-page-cont.page-littlePrnFreeList .base-inner .base-select-wrap .gray-box.type1 p {
display: flex;
align-items: center;
gap: 8px;
color: #666666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-purunetMasterKor .base-tab-depth2 .tab__item, .base-page-cont.page-purunetMasterKorPlus .base-tab-depth2 .tab__item, .base-page-cont.page-purunetMasterKorSci .base-tab-depth2 .tab__item {
display: flex;
align-items: center;
justify-content: center;
max-width: 130px;
}
.base-page-cont.page-purunetMasterKor .base-tab-depth2 .tab__item:nth-child(7), .base-page-cont.page-purunetMasterKor .base-tab-depth2 .tab__item:nth-child(8), .base-page-cont.page-purunetMasterKorPlus .base-tab-depth2 .tab__item:nth-child(7), .base-page-cont.page-purunetMasterKorPlus .base-tab-depth2 .tab__item:nth-child(8), .base-page-cont.page-purunetMasterKorSci .base-tab-depth2 .tab__item:nth-child(7), .base-page-cont.page-purunetMasterKorSci .base-tab-depth2 .tab__item:nth-child(8) {
max-width: unset;
}
.base-page-cont.page-purunetMasterKor .base-tab-depth2 .tab__item:nth-child(7) a, .base-page-cont.page-purunetMasterKor .base-tab-depth2 .tab__item:nth-child(8) a, .base-page-cont.page-purunetMasterKorPlus .base-tab-depth2 .tab__item:nth-child(7) a, .base-page-cont.page-purunetMasterKorPlus .base-tab-depth2 .tab__item:nth-child(8) a, .base-page-cont.page-purunetMasterKorSci .base-tab-depth2 .tab__item:nth-child(7) a, .base-page-cont.page-purunetMasterKorSci .base-tab-depth2 .tab__item:nth-child(8) a {
width: max-content;
padding: 10.5px 25px;
}
.base-page-cont.page-purunetMasterMat .base-tab-depth2 .tab__item, .base-page-cont.page-purunetMasterMatPlus .base-tab-depth2 .tab__item, .base-page-cont.page-purunetMasterMatSci .base-tab-depth2 .tab__item {
display: flex;
align-items: center;
justify-content: center;
max-width: 130px;
}
.base-page-cont.page-purunetMasterMat .base-tab-depth2 .tab__item:nth-child(7), .base-page-cont.page-purunetMasterMat .base-tab-depth2 .tab__item:nth-child(8), .base-page-cont.page-purunetMasterMatPlus .base-tab-depth2 .tab__item:nth-child(7), .base-page-cont.page-purunetMasterMatPlus .base-tab-depth2 .tab__item:nth-child(8), .base-page-cont.page-purunetMasterMatSci .base-tab-depth2 .tab__item:nth-child(7), .base-page-cont.page-purunetMasterMatSci .base-tab-depth2 .tab__item:nth-child(8) {
max-width: unset;
}
.base-page-cont.page-purunetMasterMat .base-tab-depth2 .tab__item:nth-child(7) a, .base-page-cont.page-purunetMasterMat .base-tab-depth2 .tab__item:nth-child(8) a, .base-page-cont.page-purunetMasterMatPlus .base-tab-depth2 .tab__item:nth-child(7) a, .base-page-cont.page-purunetMasterMatPlus .base-tab-depth2 .tab__item:nth-child(8) a, .base-page-cont.page-purunetMasterMatSci .base-tab-depth2 .tab__item:nth-child(7) a, .base-page-cont.page-purunetMasterMatSci .base-tab-depth2 .tab__item:nth-child(8) a {
width: max-content;
padding: 10.5px 25px;
}
.base-page-cont.page-readingBookList .base-inner .tab-contents .tbl-basic .card {
gap: 0;
}
.base-page-cont.page-readingBookList .base-inner .tab-contents .tbl-basic .card__header {
border: none;
box-shadow: none;
border-radius: 0;
}
.base-page-cont.page-readingBookList .base-inner .tab-contents .tbl-basic .card__header::after {
border-radius: 0;
}
#readingBookListPopup .popupContent__body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 36px;
width: 670px;
max-width: 670px;
height: 520px;
max-height: 520px;
}
#readingBookListPopup .popupContent__body .btns {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
padding: 0 15px;
}
#readingBookListPopup .popupContent__body .btns > .disabled {
opacity: 0.12;
cursor: default;
}
#readingBookListPopup .popupContent__body__img {
height: 300px;
max-height: 300px;
background-color: #eee;
padding: 30px 75px;
border-radius: 20px;
box-sizing: content-box;
}
#readingBookListPopup .popupContent__body__img.no-thumbnail {
height: 360px;
max-height: 360px;
padding: 0;
background-color: unset;
}
.base-page-cont.page-korCardList .base-inner .base-select-wrap {
justify-content: flex-end;
margin: 0 0 20px;
}
.base-page-cont.page-korCardList .base-inner .tab-contents .tbl-basic .card__header {
border-radius: 0;
}
.base-page-cont.page-korCardList .base-inner .tab-contents .tbl-basic .card__header::after {
border-radius: 0;
}
.base-page-cont.page-littlePrnFreeList .base-inner .tab-contents .tbl-basic {
column-gap: 60px;
}
.base-page-cont.page-littlePrnFreeList .base-inner .tab-contents .tbl-basic .card {
width: calc(33.3333333333% - 40px);
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
padding: 0;
border-radius: 40px;
gap: 0;
}
.base-page-cont.page-littlePrnFreeList .base-inner .tab-contents .tbl-basic .card__header {
border-radius: 40px 40px 0 0;
box-shadow: none;
border: none;
height: 430px;
min-height: 430px;
max-height: 430px;
}
.base-page-cont.page-littlePrnFreeList .base-inner .tab-contents .tbl-basic .card__header::after {
border-radius: 40px 40px 0 0;
}
.base-page-cont.page-littlePrnFreeList .base-inner .tab-contents .tbl-basic .card__header .download-btn {
width: 96px;
height: auto;
}
.base-page-cont.page-littlePrnFreeList .base-inner .tab-contents .tbl-basic .card__body {
border-radius: 0 0 40px 40px;
padding: 20px 30px 42px;
display: flex;
flex-direction: column;
align-items: unset;
gap: 10px;
}
.base-page-cont.page-littlePrnFreeList .base-inner .tab-contents .tbl-basic .card__tit {
color: #00ab93;
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
.base-page-cont.page-purunetMasterKor > .base-inner .tab-contents,
.base-page-cont.page-purunetMasterKorPlus > .base-inner .tab-contents,
.base-page-cont.page-purunetMasterMat > .base-inner .tab-contents,
.base-page-cont.page-purunetMasterKorPlus > .base-inner .tab-contents {
padding-top: 0;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon {
display: flex;
justify-content: space-between;
padding: 25px 0;
border-bottom: 1px dashed #cccccc;
gap: 20px;
align-items: center;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .know,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .know {
display: flex;
gap: 40px;
flex-grow: 1;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .know .knowCover,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .know .knowCover {
width: 241px;
height: fit-content;
border: 1px solid #ddd;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .know .knowCover img,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .know .knowCover img {
width: 100%;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .know .knowInfo h3,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .know .knowInfo h3 {
font-size: 28px;
font-weight: 700;
line-height: 114.286%;
display: flex;
gap: 16px;
align-items: center;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .know .knowInfo h5,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .know .knowInfo h5 {
display: flex;
align-items: center;
gap: 10px;
width: fit-content;
margin: 16px 0 10px;
color: #666666 666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .know .knowInfo h5 span,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .know .knowInfo h5 span {
color: #01416c;
font-size: 16px;
font-weight: 400;
line-height: 150%;
padding: 0 16px;
border: 1px solid #01416c;
height: 28px;
width: fit-content;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .know .knowInfo .studyList,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .know .knowInfo .studyList {
color: #666666 666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .know .knowInfo .studyList p,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .know .knowInfo .studyList p {
padding-left: 14px;
position: relative;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .know .knowInfo .studyList p::after,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .know .knowInfo .studyList p::after {
content: "";
width: 6px;
height: 6px;
border-radius: 6px;
background-color: #01416c;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .know .knowInfo .know_down,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .know .knowInfo .know_down {
width: fit-content;
margin-top: 16px;
display: flex;
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
padding: 0 12px;
height: 30px;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: 6px;
border: 1px solid #cccccc;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowVideo.cont-box,
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowImg.cont-box,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowVideo.cont-box,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowImg.cont-box {
margin: 0;
display: flex;
flex-direction: column-reverse;
gap: 16px;
justify-content: flex-end;
align-items: center;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowVideo.cont-box .videoTit,
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowImg.cont-box .videoTit,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowVideo.cont-box .videoTit,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowImg.cont-box .videoTit {
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowVideo.cont-box .img_center .img_wrap,
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowImg.cont-box .img_center .img_wrap,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowVideo.cont-box .img_center .img_wrap,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowImg.cont-box .img_center .img_wrap {
width: 270px;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowVideo.cont-box .img_center .img_wrap .bg,
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowImg.cont-box .img_center .img_wrap .bg,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowVideo.cont-box .img_center .img_wrap .bg,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowImg.cont-box .img_center .img_wrap .bg {
display: flex;
align-items: center;
justify-content: center;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowVideo.cont-box .img_center .img_wrap .bg > img,
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowImg.cont-box .img_center .img_wrap .bg > img,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowVideo.cont-box .img_center .img_wrap .bg > img,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowImg.cont-box .img_center .img_wrap .bg > img {
width: 56px;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowVideo.cont-box .img_center .img_wrap > img,
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowImg.cont-box .img_center .img_wrap > img,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowVideo.cont-box .img_center .img_wrap > img,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowImg.cont-box .img_center .img_wrap > img {
width: 100%;
position: unset;
transform: unset;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowImg.cont-box,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowImg.cont-box {
justify-content: flex-end;
flex-direction: column;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon .knowImg.cont-box .img_wrap > img,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowImg.cont-box .img_wrap > img {
width: auto;
height: 263px;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .ani .sample-video,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .ani .sample-video {
display: flex;
flex-direction: column;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .ani .sample-video .base-tab .tab__list,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .ani .sample-video .base-tab .tab__list {
gap: 20px;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .ani .sample-video .base-tab .tab__list .tab__item,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .ani .sample-video .base-tab .tab__list .tab__item {
flex-grow: unset;
padding: 4px 8px 10px;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .ani .sample-video .base-tab .tab__list .tab__item.on,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .ani .sample-video .base-tab .tab__list .tab__item.on {
border: 0;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .ani .sample-video .base-tab .tab__list .tab__item.on .tab__item__text,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .ani .sample-video .base-tab .tab__list .tab__item.on .tab__item__text {
color: #00ab93;
font-weight: 700;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .ani .sample-video .base-tab .tab__list .tab__item.on::after,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .ani .sample-video .base-tab .tab__list .tab__item.on::after {
content: "";
display: block;
width: 100%;
height: 4px;
background-color: #00ab93;
position: absolute;
bottom: -2px;
left: 0;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .ani .sample-video .base-tab .tab__list .tab__item .tab__item__text,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .ani .sample-video .base-tab .tab__list .tab__item .tab__item__text {
font-size: 18px;
font-weight: 400;
line-height: 144.444%;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .ani .sample-video .tbl-basic .card,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .ani .sample-video .tbl-basic .card {
display: flex;
align-items: center;
flex-direction: column;
gap: 12px;
border-radius: 0;
padding: 0;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .ani .sample-video .tbl-basic .card__header,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .ani .sample-video .tbl-basic .card__header {
width: 100%;
height: 180px;
max-height: 180px;
min-height: 180px;
display: flex;
align-items: center;
border: 1px solid #ebebeb;
border-radius: 0;
box-shadow: unset;
background: none;
box-sizing: border-box;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .ani .sample-video .tbl-basic .card__header::after,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .ani .sample-video .tbl-basic .card__header::after {
border-radius: 0;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .ani .sample-video .tbl-basic .card__thumbnail,
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .ani .sample-video .tbl-basic .card__thumbnail {
height: auto;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .ani .sample-video .tbl-basic .card__tag span:nth-child(1),
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .ani .sample-video .tbl-basic .card__tag span:nth-child(1) {
background: #00ab93;
color: #fff;
}
.base-page-cont.page-purunetMasterKorSci > .base-inner,
.base-page-cont.page-purunetMasterMatSci > .base-inner {
padding-top: 50px;
}
.base-page-cont.page-purunetMasterKorSci > .base-inner .tab-contents,
.base-page-cont.page-purunetMasterMatSci > .base-inner .tab-contents {
padding-top: 0;
}
.base-page-cont.page-purunetMasterKorSci .base-inner .btn-view-ebook,
.base-page-cont.page-purunetMasterMatSci .base-inner .btn-view-ebook {
max-width: 127px;
margin: 0 auto;
}
.base-page-cont.page-purunetMasterKorSci .base-table,
.base-page-cont.page-purunetMasterMatSci .base-table {
border: none;
}
.base-page-cont.page-purunetMasterKorSci .base-table.type-navy th + th,
.base-page-cont.page-purunetMasterMatSci .base-table.type-navy th + th {
border-left: 1px solid #fff;
}
.base-page-cont.page-purunetMasterKorSci .base-table.type-navy td + td,
.base-page-cont.page-purunetMasterMatSci .base-table.type-navy td + td {
border-left: none;
}
.base-page-cont.page-purunetMasterKor .base-inner .tab-contents .knowCon {
margin-bottom: 20px;
}
.base-page-cont.page-purunetMasterMat .base-inner .tab-contents .knowCon .knowImg.cont-box .img_wrap > img {
height: 263px;
}
/* ---------------------------------------------------------------------------------------
푸르넷 수학
-----------------------------------------------------------------------------------------*/
.base-page-cont.page-deepProblems .base-inner {
padding-top: 24px;
}
.base-page-cont.page-deepProblems .base-inner .sub-wrap {
padding-top: 0;
}
.base-page-cont.page-mathFoundation .base-inner .base-date-picker .date-picker, .base-page-cont.page-levelAssessment .base-inner .base-date-picker .date-picker {
background-color: unset;
}
@media (min-width: 801px) {
.base-page-cont.page-mathFoundation .base-inner .base-date-picker .date-picker, .base-page-cont.page-levelAssessment .base-inner .base-date-picker .date-picker {
background-color: #fff;
}
}
.base-page-cont.page-mathFoundation .base-inner .sub-wrap, .base-page-cont.page-levelAssessment .base-inner .sub-wrap {
padding: 0;
}
.base-page-cont.page-mathFoundation .base-inner .sub-wrap .tab-contents .tbl-basic, .base-page-cont.page-levelAssessment .base-inner .sub-wrap .tab-contents .tbl-basic {
gap: 12px;
justify-content: center;
}
@media (min-width: 801px) {
.base-page-cont.page-mathFoundation .base-inner .sub-wrap .tab-contents .tbl-basic, .base-page-cont.page-levelAssessment .base-inner .sub-wrap .tab-contents .tbl-basic {
gap: 50px;
}
}
.base-page-cont.page-mathFoundation .base-inner .sub-wrap .tab-contents .tbl-basic .card, .base-page-cont.page-levelAssessment .base-inner .sub-wrap .tab-contents .tbl-basic .card {
width: calc(50% - 6px);
}
@media (min-width: 801px) {
.base-page-cont.page-mathFoundation .base-inner .sub-wrap .tab-contents .tbl-basic .card, .base-page-cont.page-levelAssessment .base-inner .sub-wrap .tab-contents .tbl-basic .card {
width: 428px;
}
}
.base-page-cont.page-mathFoundation .base-inner .sub-wrap .tab-contents .tbl-basic .card__header, .base-page-cont.page-levelAssessment .base-inner .sub-wrap .tab-contents .tbl-basic .card__header {
height: 174px;
min-height: 174px;
max-height: 174px;
}
@media (min-width: 801px) {
.base-page-cont.page-mathFoundation .base-inner .sub-wrap .tab-contents .tbl-basic .card__header, .base-page-cont.page-levelAssessment .base-inner .sub-wrap .tab-contents .tbl-basic .card__header {
height: 535px;
min-height: 535px;
max-height: 535px;
}
}
.base-page-cont.page-mathFoundation .base-inner .sub-wrap .tab-contents .tbl-basic .card__info, .base-page-cont.page-levelAssessment .base-inner .sub-wrap .tab-contents .tbl-basic .card__info {
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
}
@media (min-width: 801px) {
.base-page-cont.page-mathFoundation .base-inner .sub-wrap .tab-contents .tbl-basic .card__info, .base-page-cont.page-levelAssessment .base-inner .sub-wrap .tab-contents .tbl-basic .card__info {
font-size: 20px;
font-weight: 700;
line-height: 140%;
}
}
.base-page-cont.page-mathCartoon .thumbnail-banner {
margin-top: 0;
}
@media (max-width: 801px) {
.base-page-cont.page-mathCartoon .thumbnail-banner {
height: 120px;
overflow: hidden;
border-radius: 20px;
padding: 20px 0;
box-sizing: content-box;
}
.base-page-cont.page-mathCartoon .thumbnail-banner .thumbnail-banner__img {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 20px;
}
.base-page-cont.page-mathCartoon .thumbnail-banner .thumbnail-banner__img img {
width: auto;
height: 100%;
background-size: cover;
}
.base-page-cont.page-mathCartoon .base-inner .sub-wrap {
padding: 0;
}
.base-page-cont.page-mathCartoon .base-inner .sub-wrap .tbl-basic {
justify-content: center;
padding: 0;
gap: 24px;
}
.base-page-cont.page-mathCartoon .base-inner .sub-wrap .tbl-basic .card {
width: calc(50% - 12px);
}
.base-page-cont.page-mathCartoon .base-inner .sub-wrap .tbl-basic .card__header {
height: auto;
min-height: auto;
max-height: auto;
}
.base-page-cont.page-mathCartoon .base-inner .sub-wrap .tbl-basic .card__tag span {
font-size: 12px;
font-weight: 400;
line-height: 133.333%;
}
.base-page-cont.page-mathCartoon .base-inner .sub-wrap .tbl-basic .card__info {
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
.base-page-cont.page-mathCartoon .base-inner .sub-wrap .tbl-basic .card .ebook-view-btn {
font-size: 14px;
font-weight: 700;
line-height: 128.571%;
gap: 4px;
height: 30px;
}
.base-page-cont.page-mathCartoon .base-inner .sub-wrap .tbl-basic .card .ebook-view-btn img {
width: 24px;
height: 24px;
}
}
/* ---------------------------------------------------------------------------------------
i 놀이터
-----------------------------------------------------------------------------------------*/
.base-page-cont.page-challengeList .base-inner .tab-contents .tbl-basic {
column-gap: 48px;
row-gap: 80px;
}
.base-page-cont.page-challengeList .base-inner .tab-contents .tbl-basic .card-wrap {
width: calc(33.3333333333% - 32px);
}
.base-page-cont.page-challengeList .base-inner .tab-contents .tbl-basic .card-wrap:has(.card__footer) .card {
height: auto;
}
.base-page-cont.page-challengeList .base-inner .tab-contents .tbl-basic .card-wrap:has(.card__footer) .card__body {
border-bottom: none;
border-radius: 0;
}
.base-page-cont.page-challengeList .base-inner .tab-contents .tbl-basic .card {
width: 100%;
height: 100%;
gap: 0;
padding: 0;
border-radius: 0;
}
.base-page-cont.page-challengeList .base-inner .tab-contents .tbl-basic .card__header {
border-radius: 20px 20px 0px 0px;
border: none;
box-shadow: unset;
height: 207px;
min-height: 207px;
max-height: 207px;
}
.base-page-cont.page-challengeList .base-inner .tab-contents .tbl-basic .card__header::after {
border-radius: 20px 20px 0px 0px;
}
.base-page-cont.page-challengeList .base-inner .tab-contents .tbl-basic .card__body {
padding: 17px 20px 34px;
border-radius: 0px 0px 20px 20px;
background: #fff;
height: 100%;
align-items: unset;
border: 1px solid #dddddd;
}
.base-page-cont.page-challengeList .base-inner .tab-contents .tbl-basic .card__body p {
text-align: left;
font-size: 18px;
font-weight: 400;
line-height: 144.444%;
}
.base-page-cont.page-challengeList .base-inner .tab-contents .tbl-basic .card__footer {
width: 100%;
padding: 0 20px;
border-radius: 0px 0px 20px 20px;
border: 1px solid #dddddd;
background: #fff;
border-top: 0;
display: flex;
justify-content: center;
align-items: center;
}
.base-page-cont.page-challengeList .base-inner .tab-contents .tbl-basic .card__footer span {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
color: #00ab93;
font-size: 16px;
font-weight: 700;
line-height: 150%;
border-top: 1px dashed #cccccc;
padding: 12px 0;
}
.base-page-cont.page-playOfPoetry {
background: url(/assets/renewal2023/img/challenge/challengeList-page-bg.png) no-repeat top/contain;
background-size: 1920px 840px;
}
.base-page-cont.page-playOfPoetry .base-date-picker .date-picker {
gap: 20px;
background: none;
}
.base-page-cont.page-playOfPoetry .base-date-picker .date-picker .select-month {
font-size: 40px;
font-weight: 700;
line-height: 135%;
}
.base-page-cont.page-playOfPoetry .base-date-picker .date-picker .select-month span {
color: #00ab93;
}
.base-page-cont.page-playOfPoetry > .base-inner {
padding: 50px 0 0;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .base-date-picker {
width: 960px;
margin: 0 auto 20px;
justify-content: center;
background: none;
border-radius: 0;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .base-date-picker .mySwiper-navigation .mySwiper-button-next,
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .base-date-picker .mySwiper-navigation .mySwiper-button-prev {
position: unset;
margin: 0;
width: 24px;
height: 24px;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .base-date-picker .mySwiper-navigation .mySwiper-button-next img,
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .base-date-picker .mySwiper-navigation .mySwiper-button-prev img {
width: 100%;
height: 100%;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .base-date-picker .mySwiper-navigation .mySwiper-button-next::after,
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .base-date-picker .mySwiper-navigation .mySwiper-button-prev::after {
display: none;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .base-date-picker .mySwiper-navigation .swiper-button-next {
right: 0;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .base-date-picker .mySwiper-navigation .swiper-button-prev {
left: 0;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work {
padding: 0 0 60px;
display: flex;
flex-direction: column;
align-items: center;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work__video {
width: 960px;
margin: 0 auto;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work__title {
font-size: 40px;
font-weight: 700;
line-height: 135%;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work__writer {
color: #666666;
font-size: 18px;
font-weight: 400;
line-height: 144.444%;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work .card {
box-shadow: unset;
border: none;
border-radius: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
background: none;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work .card__header {
width: 100%;
height: 484px;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work .card .btn-wrap {
position: relative;
align-self: flex-start;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work .card .btn-wrap .btn-input {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work .card .btn-wrap .btn-label {
width: 132px;
height: 36px;
justify-content: center;
align-items: center;
border-radius: 18px;
background: #333;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 400;
line-height: 36px;
position: relative;
z-index: 1;
display: none;
cursor: pointer;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work .card .btn-wrap .btn-label.on {
display: flex;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work .card__body {
width: 100%;
gap: 16px;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work .card__body .btns {
display: flex;
flex-direction: row;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work .card__body .btns .btn {
border-radius: 10px;
border: 1px solid #79d1c7;
background: #fff;
padding: 7px 23px;
display: flex;
align-items: center;
gap: 4px;
color: #79d1c7;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-playOfPoetry > .base-inner .tab-contents .work .card__bottom {
display: flex;
justify-content: space-between;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 {
position: relative;
padding: 0 75px;
margin: 60px auto;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper {
border-radius: 10px;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper .swiper-slide {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper .swiper-slide .img-wrap {
width: 100%;
max-width: 240px;
height: 135px;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper .swiper-slide .img-wrap img {
width: 100%;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper .swiper-slide .text-wrap {
width: 100%;
display: flex;
flex-direction: column;
gap: 4px;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper .swiper-slide .text-wrap .title {
color: #79d1c7;
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper .swiper-slide .text-wrap .desc {
overflow: hidden;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper .swiper-slide.swiper-slide-thumb-active .img-wrap {
border: 3px solid #8165fe;
border-radius: 10px;
overflow: hidden;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper-navigation .mySwiper-button-next,
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper-navigation .mySwiper-button-prev {
top: 33.5%;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper-navigation .mySwiper-button-next::after,
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper-navigation .mySwiper-button-prev::after {
font-size: 29.2px;
color: #121212;
font-weight: 700;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper-navigation .swiper-button-next {
right: 0;
}
.base-page-cont.page-playOfPoetry > .base-inner.base-inner2 .mySwiper-navigation .swiper-button-prev {
left: 0;
}
.base-page-cont.page-playOfPoetry .introduction {
background: url(/assets/renewal2023/img/challenge/challengeList-page-bg2.png) no-repeat center/cover;
background-color: #f4f8fb;
padding: 60px 0;
min-height: 442px;
}
.base-page-cont.page-playOfPoetry .introduction .base-inner {
max-width: 960px;
display: flex;
flex-direction: column;
gap: 60px;
}
.base-page-cont.page-playOfPoetry .introduction .introduction-wrap,
.base-page-cont.page-playOfPoetry .introduction .introduction-wrap2 {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 880px;
}
.base-page-cont.page-playOfPoetry .introduction .introduction-wrap .title,
.base-page-cont.page-playOfPoetry .introduction .introduction-wrap2 .title {
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
}
.base-page-cont.page-playOfPoetry .introduction .introduction-wrap .desc,
.base-page-cont.page-playOfPoetry .introduction .introduction-wrap2 .desc {
color: #777777;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.base-page-cont.page-playOfPoetry .btns-wrap {
border-radius: 20px;
background: #f5f5f5;
padding: 30px 40px;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 20px auto 0;
}
.base-page-cont.page-playOfPoetry .btns-wrap p {
font-size: 24px;
line-height: 133.333%;
}
.base-page-cont.page-playOfPoetry .btns-wrap .btns {
display: flex;
gap: 16px;
align-items: center;
}
.base-page-cont.page-playOfPoetry .btns-wrap .btns .btn-default {
padding: 14px 30px;
border-radius: 10px;
font-size: 18px;
font-weight: 700;
line-height: 144.444%;
}
.base-page-cont.page-playOfPoetry .btns-wrap .btns .btn-default.bg-light-purple {
color: #fff;
border: none;
}
.base-page-cont.page-wordPlay .base-date-picker {
justify-content: center;
margin: 0 auto 20px;
}
.base-page-cont.page-wordPlay .base-date-picker .date-picker {
gap: 20px;
}
.base-page-cont.page-wordPlay .base-date-picker .date-picker .select-month {
font-size: 40px;
font-weight: 700;
line-height: 135%;
}
.base-page-cont.page-wordPlay .base-date-picker .date-picker .select-month span {
color: #00ab93;
}
.base-page-cont.page-wordPlay .base-inner {
padding: 50px 0 0;
}
.base-page-cont.page-wordPlay .base-inner .tab-contents .tbl-basic .card {
width: calc(25% - 24px);
padding: 0;
}
.base-page-cont.page-wordPlay .base-inner .tab-contents .tbl-basic .card__header {
display: flex;
align-items: center;
justify-content: center;
height: 276px;
min-height: 276px;
max-height: 276px;
box-shadow: unset;
border: none;
}
.base-page-cont.page-wordPlay .base-inner .tab-contents .tbl-basic .card__header::after {
opacity: 0.5;
}
.base-page-cont.page-wordPlay .base-inner .tab-contents .tbl-basic .card__info {
color: #fff;
font-size: 40px;
font-weight: 700;
line-height: 135%;
position: relative;
z-index: 10;
}
.base-page-cont.page-wordPlay .base-inner .tab-contents .tbl-basic .card .play-btn {
right: 16px;
bottom: 16px;
top: auto;
transform: unset;
left: auto;
}
#challengePopupLayer {
width: 860px;
}
#challengePopupLayer .popupContent {
display: flex;
flex-direction: column;
}
#challengePopupLayer .popupContent .scroll-text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row-reverse;
gap: 8px;
margin-top: 20px;
color: #121212;
font-size: 18px;
font-weight: 400;
line-height: 144.444%;
}
#challengePopupLayer .popupContent .scroll-text svg {
width: 23px;
height: 43.999px;
}
#challengePopupLayer .popupContent__body {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px 0;
}
#challengePopupLayer .slider {
width: 800px;
overflow: hidden;
}
#challengePopupLayer .slider .swiper-container {
width: 100%;
height: 100%;
}
#challengePopupLayer .slider__tit {
font-size: 40px;
font-weight: 700;
line-height: 135%;
margin-bottom: 10px;
text-align: center;
}
#challengePopupLayer .slider__tit span {
color: #00ab93;
}
#challengePopupLayer .slider__flex {
display: flex;
flex-direction: row-reverse;
justify-content: center;
gap: 20px;
}
#challengePopupLayer .slider__col {
display: flex;
flex-direction: column;
width: 260px;
}
#challengePopupLayer .slider__thumbs {
height: 460px;
position: relative;
}
#challengePopupLayer .slider__thumbs::after {
content: "";
display: block;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 9.84%, rgba(255, 255, 255, 0.5) 68.08%, #fff 89.89%);
width: 100%;
height: 134px;
position: absolute;
bottom: -70px;
left: 0;
z-index: 1;
}
#challengePopupLayer .slider__thumbs .swiper-container {
overflow: visible;
}
#challengePopupLayer .slider__thumbs .slider__image {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.5;
width: 100%;
height: 84px;
border-radius: 20px;
overflow: visible;
border: 1px solid #8165fe;
background: #fff;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 8px 30px;
gap: 4px;
}
#challengePopupLayer .slider__thumbs .slider__image:hover {
opacity: 1;
}
#challengePopupLayer .slider__thumbs .slider__image span {
color: #121212;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
#challengePopupLayer .slider__thumbs .slider__image strong {
color: #121212;
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
}
#challengePopupLayer .slider__thumbs .swiper-slide-thumb-active .slider__image {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
background: #8165fe;
color: #fff;
}
#challengePopupLayer .slider__thumbs .swiper-slide-thumb-active .slider__image span {
color: #fff;
}
#challengePopupLayer .slider__thumbs .swiper-slide-thumb-active .slider__image strong {
color: #fff;
}
#challengePopupLayer .slider__images {
width: 520px;
height: 520px;
overflow: hidden;
}
#challengePopupLayer .slider__images video {
width: 100%;
height: 520px;
}
#challengePopupLayer .slider__image {
width: 100%;
height: 100%;
border-radius: 30px;
overflow: hidden;
}
#challengePopupLayer .slider__image img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
#challengePopupLayer .slider__prev, #challengePopupLayer .slider__next {
cursor: pointer;
text-align: center;
font-size: 14px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#challengePopupLayer .slider__prev:focus, #challengePopupLayer .slider__next:focus {
outline: none;
}
/* ---------------------------------------------------------------------------------------
card & tag
type-thumb-book: PDF download type + character list
type-thumb-book1 > character list
type-thumb-book2 > character list2
type-thumb-book3 > character list3
<썸네일 4가지 case>
1. ebook보기 버튼 (디폴트 타입 )
2. download버튼 + 썸네일 텍스트 ( type-thumb-book1 or type-thumb-book2 or type-thumb-book3 )
3. download버튼 + 썸네일 이미지 (디폴트 타입 )
4. video play 버튼 (디폴트 타입 )
-----------------------------------------------------------------------------------------*/
.sub-container:has(.base-page-cont.type-thumb-book1) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video), .sub-container:has(.base-page-cont.type-thumb-book2) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video), .sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) {
height: fit-content;
position: relative;
gap: 0;
}
.sub-container:has(.base-page-cont.type-thumb-book1) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) .card__header, .sub-container:has(.base-page-cont.type-thumb-book2) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) .card__header, .sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) .card__header {
width: 100%;
height: 244px;
min-height: 244px;
max-height: 244px;
background: #79d1c7;
border: none;
box-shadow: none;
border-radius: 0;
}
.sub-container:has(.base-page-cont.type-thumb-book1) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) .card__header::after, .sub-container:has(.base-page-cont.type-thumb-book2) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) .card__header::after, .sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) .card__header::after {
border-radius: 0;
}
.sub-container:has(.base-page-cont.type-thumb-book1) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) .card__info, .sub-container:has(.base-page-cont.type-thumb-book2) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) .card__info, .sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) .card__info {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
background: #fff;
padding: 20px 20px 44px;
width: calc(100% - 40px);
height: calc(100% - 64px);
word-break: keep-all;
}
.sub-container:has(.base-page-cont.type-thumb-book1) .base-inner .tab-contents .tbl-basic .card.type-thumb-video .card__header, .sub-container:has(.base-page-cont.type-thumb-book2) .base-inner .tab-contents .tbl-basic .card.type-thumb-video .card__header, .sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card.type-thumb-video .card__header {
height: 158px;
min-height: 158px;
max-height: 158px;
}
.sub-container:has(.base-page-cont.type-thumb-book1) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) .card__header::before, .sub-container:has(.base-page-cont.type-thumb-book2) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) .card__header::before {
content: "";
width: 79px;
height: 89px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.sub-container:has(.base-page-cont.type-thumb-book1) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(5n + 1) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-character01.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book1) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(5n + 2) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-character02.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book1) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(5n + 3) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-character03.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book1) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(5n + 4) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-character04.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book1) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(5n + 5) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-character05.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book2) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(4n + 1) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-character01.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book2) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(4n + 2) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-character02.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book2) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(4n + 3) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-character03.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book2) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(4n + 4) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-character05.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) {
gap: 0;
}
.sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video) .card__header::before {
content: "";
width: 236px;
height: 118px;
position: absolute;
bottom: -12px;
right: 0;
z-index: 1;
}
.sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(6n + 1) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-animal-character01.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(6n + 2) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-animal-character02.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(6n + 3) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-animal-character03.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(6n + 4) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-animal-character04.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(6n + 5) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-animal-character05.png) no-repeat center/contain;
}
.sub-container:has(.base-page-cont.type-thumb-book3) .base-inner .tab-contents .tbl-basic .card:not(.type-thumb-video):nth-of-type(6n + 6) .card__header::before {
background: url(/assets/renewal2023/img/common/character/thumbnail-animal-character06.png) no-repeat center/contain;
}
.sub-container:has(.card__tag3) .base-inner .tab-contents .tbl-basic .card__body {
border-radius: 0px 0px 20px 20px;
background: #01416c;
padding: 8px 0;
}
/* Media Query Size */
/*=================================================================
color
1. 색상이 변동되거나 background-color적용시 함수사용
ex)
.container {
background-color: color(main_bg);
}
.title {
color: color(gray_900);
}
2. 색상이 고정일 경우 class로 사용 => base.scss 파일 참고
====================================================================*/
/* =============================================================
서브페이지 레이아웃 공통
============================================================= */
.box-board .board-top {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 20px;
}
.box-board .board-top .col {
display: flex;
gap: 8px;
}
.box-board .board-top .ipt-chk-all {
height: 24px;
margin-left: 30px;
}
.box-board .board-top .ipt-chk-all label {
height: 24px;
padding-left: 24px;
}
.box-board .board-bottom {
margin-top: 40px;
}
.box-board .board-bottom .board-btns {
display: flex;
justify-content: center;
gap: 16px;
}
@media (min-width: 801px) {
.box-board .board-bottom .board-btns {
justify-content: space-between;
}
}
.box-board .board-bottom .board-btns .col {
display: flex;
gap: 16px;
}
.box-board .no-data {
margin: 80px 0;
}
.box-board .no-data::before {
content: "";
display: block;
width: 64px;
height: 100px;
margin: 0 auto 10px;
background: url("/assets/renewal2023/img/common/character-nodata.png") no-repeat center/cover;
}
.box-board .no-data p {
text-align: center;
font-size: 24px;
color: #999999;
}
.popupContent__body .no-data {
margin: 80px 0;
}
.popupContent__body .no-data::before {
content: "";
display: block;
width: 64px;
height: 100px;
margin: 0 auto 10px;
background: url("/assets/renewal2023/img/common/character-nodata.png") no-repeat center/cover;
}
.popupContent__body .no-data p {
text-align: center;
font-size: 24px;
color: #999999;
}
/* =============================================================
초등 푸르넷
============================================================= */
/* 초등 푸르넷 공통*/
.page-elementary .top-cont-wrap {
background: #f4f8fb;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap {
padding: 0 0 1px 0;
}
}
.page-elementary .top-cont-wrap > .base-date-picker {
overflow: hidden;
padding: 0;
margin-bottom: 30px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap > .base-date-picker {
max-width: 1200px;
margin: 0 auto 40px auto;
padding: 20px 40px;
box-shadow: none;
}
}
.page-elementary .top-cont-wrap > .base-date-picker .date-pickers {
display: flex;
gap: 26px;
padding: 19px 16px;
background: #fff;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap > .base-date-picker .date-pickers {
gap: 40px;
padding: 0;
}
}
.page-elementary .top-cont-wrap > .base-date-picker .date-pickers .date-picker {
gap: 8px;
padding: 0;
}
.page-elementary .top-cont-wrap > .base-date-picker .date-pickers .date-picker > button {
width: 20px;
height: 20px;
background: url("/assets/renewal2023/img/ico/ico-arrow-circle.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap > .base-date-picker .date-pickers .date-picker > button {
width: 24px;
height: 24px;
}
}
.page-elementary .top-cont-wrap > .base-date-picker .date-pickers .date-picker .next-btn {
transform: rotate(-180deg);
}
.page-elementary .top-cont-wrap > .base-date-picker .date-pickers .date-picker > strong {
font-size: 18px;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap > .base-date-picker .date-pickers .date-picker > strong {
font-size: 20px;
}
}
.page-elementary .top-cont-wrap > .base-date-picker .now-month {
gap: 4px;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap > .base-date-picker .now-month {
min-height: 40px;
padding: 5px 20px;
}
}
.page-elementary .top-cont-wrap > .base-date-picker .now-month::before {
content: "";
display: block;
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-calendar-white.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap > .base-date-picker .now-month::before {
background-image: url("/assets/renewal2023/img/ico/ico-calendar-green.png");
}
}
.page-elementary .top-cont-wrap .box-select-day .day-lst {
display: flex;
justify-content: space-between;
margin-bottom: 26px;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap .box-select-day .day-lst {
margin-bottom: 40px;
}
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm {
position: relative;
flex: 1;
font-size: 16px;
color: #01416c;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm {
flex: none;
width: 88px;
height: 88px;
background: #fff;
border: 1px solid #01416c;
border-radius: 100%;
}
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm > a {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm > a dt {
display: none;
line-height: 1;
font-weight: 700;
font-size: 14px;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm > a dt {
line-height: 120%;
font-size: 24px;
}
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm > a dd {
line-height: 1;
text-align: center;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm > a dd {
line-height: 120%;
}
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm > a dd span {
line-height: 120%;
font-size: 16px;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm > a dd span {
font-size: 24px;
}
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm > a dd .txt {
display: none;
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm > a .month {
font-size: 24px;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm + li::before {
content: "";
position: absolute;
top: 50%;
left: -30px;
transform: translateX(-50%);
width: 32px;
height: 4px;
background: url("/assets/renewal2023/img/mystudy/day-select-dot.png") no-repeat center/cover;
}
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm.active {
position: relative;
min-height: 42px;
background: #01416c;
border-radius: 44px;
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm.active > a {
padding: 5px 12px;
color: #fff;
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm.active > a dt {
display: block;
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm.active > a dd span {
font-size: 12px;
}
@media (min-width: 801px) {
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm.active > a dd span {
font-size: 14px;
font-weight: 700;
}
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm.active > a dd .txt {
display: inline;
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm.active > a .month {
font-weight: 700;
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm.active::after {
content: "";
position: absolute;
left: 50%;
bottom: -14px;
transform: translateX(-50%);
width: 14px;
height: 12px;
background: url("/assets/renewal2023/img/mystudy/ico-day-arrow.png") no-repeat center/cover;
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm.disabled {
background: #ebebeb;
border: 1px solid #cccccc;
color: #cccccc;
}
.page-elementary .top-cont-wrap .box-select-day .day-lst .itm.disabled > a {
cursor: default;
}
/* 오늘의 학습 */
.page-mystudy {
/* 주간 학습 계획표 3-4학년 */
/* 주간 학습 계획표 1-2학년 */
}
.page-mystudy .mystudy-curiculum-wrap {
padding: 20px 0 60px;
background: #f4f8fb;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap {
padding: 0 0 64px 0;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-ing {
overflow: hidden;
background: #ffffff;
border: 2px solid #79d1c7;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-ing {
display: flex;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .tit {
padding: 7px;
background: #79d1c7;
line-height: 150%;
text-align: center;
font-size: 16px;
font-weight: 900;
color: #ffffff;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-ing .tit {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
font-size: 20px;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst {
display: flex;
padding: 17px 0;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst {
flex: 1;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst .itm {
flex: 1;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst .itm {
padding: 6px;
border-right: 1px dashed #dddddd;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst .itm a {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
line-height: 150%;
text-align: center;
font-size: 16px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst .itm a {
gap: 10px;
font-size: 20px;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst .itm a::before {
content: "";
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-sizing: border-box;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst .itm a::before {
width: 64px;
height: 64px;
padding: 8px;
background-color: #f4f8fb;
background-size: 48px auto;
border-radius: 100%;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst .itm a.kor::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-kr.png");
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst .itm a.math::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-math.png");
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst .itm a.soc::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-society.png");
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst .itm a.sci::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-science.png");
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst .itm a.total::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-total.png");
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .ing-lst .itm a.lit::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-literacy.png");
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-ing .btns {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
padding: 0 30px;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .btns .btn-xsm {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 150px;
min-height: 32px;
padding: 4px 16px;
border-radius: 16px;
font-size: 16px;
font-weight: 700;
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .btns .btn-xsm::after {
content: "";
display: block;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center;
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .btns .btn-eng {
background-color: #79d1c7;
color: #ffffff;
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .btns .btn-eng::after {
background-image: url("/assets/renewal2023/img/ico/ico-out.png");
background-size: 13px auto;
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .btns .btn-answer {
background-color: #ffffff;
border: 1px solid #79d1c7;
color: #79d1c7;
}
.page-mystudy .mystudy-curiculum-wrap .box-ing .btns .btn-answer::after {
background-image: url("/assets/renewal2023/img/ico/ico-answer.png");
background-size: 14px auto;
}
.page-mystudy .mystudy-curiculum-wrap > .base-tab {
margin-top: 20px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap > .base-tab {
max-width: 1200px;
margin: 40px auto 0 auto;
}
}
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker {
overflow: hidden;
padding: 0;
margin-bottom: 30px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker {
max-width: 1200px;
margin: 0 auto 40px auto;
padding: 20px 40px;
box-shadow: none;
}
}
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker .date-pickers {
display: flex;
gap: 26px;
padding: 19px 16px;
background: #fff;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker .date-pickers {
gap: 40px;
padding: 0;
}
}
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker .date-pickers .date-picker {
gap: 8px;
padding: 0;
}
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker .date-pickers .date-picker > button {
width: 20px;
height: 20px;
background: url("/assets/renewal2023/img/ico/ico-arrow-circle.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker .date-pickers .date-picker > button {
width: 24px;
height: 24px;
}
}
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker .date-pickers .date-picker .next-btn {
transform: rotate(-180deg);
}
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker .date-pickers .date-picker > strong {
font-size: 18px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker .date-pickers .date-picker > strong {
font-size: 20px;
}
}
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker .now-month {
gap: 4px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker .now-month {
min-height: 40px;
padding: 5px 20px;
}
}
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker .now-month::before {
content: "";
display: block;
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-calendar-white.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap > .base-date-picker .now-month::before {
background-image: url("/assets/renewal2023/img/ico/ico-calendar-green.png");
}
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst {
display: flex;
justify-content: space-between;
margin-bottom: 26px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst {
margin-bottom: 40px;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm {
position: relative;
flex: 1;
font-size: 16px;
color: #01416c;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm {
flex: none;
width: 88px;
height: 88px;
background: #fff;
border: 1px solid #01416c;
border-radius: 100%;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm > a {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm > a dt {
display: none;
line-height: 1;
font-weight: 700;
font-size: 14px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm > a dt {
line-height: 120%;
font-size: 24px;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm > a dd {
line-height: 1;
text-align: center;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm > a dd {
line-height: 120%;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm > a dd span {
line-height: 120%;
font-size: 16px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm > a dd span {
font-size: 24px;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm > a dd .txt {
display: none;
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm > a .month {
font-size: 24px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm + li::before {
content: "";
position: absolute;
top: 50%;
left: -30px;
transform: translateX(-50%);
width: 32px;
height: 4px;
background: url("/assets/renewal2023/img/mystudy/day-select-dot.png") no-repeat center/cover;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm.active {
position: relative;
min-height: 42px;
background: #01416c;
border-radius: 44px;
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm.active > a {
padding: 5px 12px;
color: #fff;
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm.active > a dt {
display: block;
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm.active > a dd span {
font-size: 12px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm.active > a dd span {
font-size: 14px;
font-weight: 700;
}
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm.active > a dd .txt {
display: inline;
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm.active > a .month {
font-weight: 700;
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm.active::after {
content: "";
position: absolute;
left: 50%;
bottom: -14px;
transform: translateX(-50%);
width: 14px;
height: 12px;
background: url("/assets/renewal2023/img/mystudy/ico-day-arrow.png") no-repeat center/cover;
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm.disabled {
background: #ebebeb;
border: 1px solid #cccccc;
color: #cccccc;
}
.page-mystudy .mystudy-curiculum-wrap .box-select-day .day-lst .itm.disabled > a {
cursor: default;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap {
position: relative;
max-width: 1216px;
margin: 0 auto;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .swiper.mystudy {
padding: 4px 36px 36px 36px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .swiper.mystudy {
padding: 4px 8px 36px;
margin: 0 60px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm {
position: relative;
background: #ffffff;
border-radius: 40px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
height: auto;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm > a {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .top {
display: flex;
margin: 0 12px;
padding: 11px 4px 6px;
border-bottom: 1px dashed #dddddd;
font-size: 20px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .top {
margin: 0 30px;
padding: 11px 1px 6px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .top::before {
content: "";
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 24px 16px 36px 16px;
height: 100%;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid {
min-height: 190px;
padding: 24px 30px 36px 30px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts {
min-width: 0;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .tag {
width: fit-content;
min-height: 27px;
margin-bottom: 10px;
padding: 2px 16px;
border: 1px solid #00ab93;
border-radius: 14px;
font-size: 14px;
color: #00ab93;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .tit {
font-size: 18px;
font-weight: 700;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .desc {
margin-top: 6px;
line-height: 150%;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap: break-word;
color: #666666;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .desc .total {
color: #121212;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .desc .current {
color: #00ab93;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .bookPage {
margin-top: 5px;
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .time {
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
text-align: center;
line-height: 128%;
font-size: 14px;
color: #999999;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .time {
bottom: 10px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .time > strong {
margin-left: 6px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .tip {
position: absolute;
left: 52%;
bottom: -12px;
padding: 4px 20px;
background: #00ab93;
border-radius: 15px 15px 15px 0;
line-height: 150%;
color: #fff;
white-space: nowrap;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .tip span {
font-size: 16px;
font-weight: 700;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .tip p {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 14px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .texts .tip p strong {
line-height: 130%;
font-size: 24px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .img {
flex-shrink: 0;
width: 80px;
height: 100px;
border: 1px solid #dddddd;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .mid .img > img {
width: 100%;
height: 100%;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .bottom {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 0;
background: #01416c;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
font-size: 20px;
font-weight: 900;
color: #ffffff;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm .bottom::before {
content: "";
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-kr .top::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-kr.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-math .top::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-math.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-soc .top::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-society.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-sci .top::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-science.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-total .top::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-total.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-literacy .top::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-literacy.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-will-play::before {
position: absolute;
top: -4px;
right: 20px;
content: "학습 전";
width: 80px;
height: 72px;
padding-top: 15px;
background: url("/assets/renewal2023/img/mystudy/tag-mint.png") no-repeat center/cover;
box-sizing: border-box;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-will-play .bottom {
background: #79d1c7;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-will-play .bottom::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-learning.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-will-play .bottom::after {
content: "학습 하기";
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-ing-play::before {
position: absolute;
top: -4px;
right: 20px;
content: "학습 중";
width: 80px;
height: 72px;
padding-top: 15px;
background: url("/assets/renewal2023/img/mystudy/tag-pink.png") no-repeat center/cover;
box-sizing: border-box;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-ing-play .bottom {
background: #f3b3d1;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-ing-play .bottom::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-learning.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-ing-play .bottom::after {
content: "이어 하기";
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-did-play::before {
position: absolute;
top: 10px;
right: 20px;
content: "";
width: 100px;
height: 100px;
background: url("/assets/renewal2023/img/mystudy/tag-good.png") no-repeat center/cover;
box-sizing: border-box;
text-align: center;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-did-play .bottom {
background: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-did-play .bottom::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-learning.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-did-play .bottom::after {
content: "복습 하기";
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-will-test::before {
position: absolute;
top: -4px;
right: 20px;
content: "미응시";
width: 80px;
height: 72px;
padding-top: 15px;
background: url("/assets/renewal2023/img/mystudy/tag-red.png") no-repeat center/cover;
box-sizing: border-box;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-will-test .bottom {
background: #f04d69;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-will-test .bottom::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-test.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-will-test .bottom::after {
content: "시험 보기";
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-did-test::before {
position: absolute;
top: 10px;
right: 20px;
content: "";
width: 100px;
height: 100px;
background: url("/assets/renewal2023/img/mystudy/tag-praise.png") no-repeat center/cover;
box-sizing: border-box;
text-align: center;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-did-test .bottom {
background: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-did-test .bottom::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-test.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-did-test .bottom::after {
content: "결과 보기";
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-will-homework::before {
position: absolute;
top: -4px;
right: 20px;
content: "제출 전";
width: 80px;
height: 72px;
padding-top: 15px;
background: url("/assets/renewal2023/img/mystudy/tag-purple.png") no-repeat center/cover;
box-sizing: border-box;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-will-homework .bottom {
background: #8165fe;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-will-homework .bottom::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-homework.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-will-homework .bottom::after {
content: "과제 하기";
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-did-homework::before {
position: absolute;
top: 10px;
right: 20px;
content: "";
width: 100px;
height: 100px;
background: url("/assets/renewal2023/img/mystudy/tag-good.png") no-repeat center/cover;
box-sizing: border-box;
text-align: center;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-did-homework .bottom {
background: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-did-homework .bottom::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-homework.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-did-homework .bottom::after {
content: "제출 완료";
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-reading .bottom {
background: #ffd349;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .itm.type-reading .bottom::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-reading.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .mystudy-pagination {
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .mystudy-pagination {
display: none;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .mystudy-pagination .swiper-pagination-bullet {
display: block;
width: 16px;
height: 16px;
margin: 0;
background: none;
border: 3px solid #121212;
opacity: 1;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .mystudy-pagination .swiper-pagination-bullet-active {
width: 40px;
background: #121212;
border-radius: 8px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .mystudy-button-prev {
left: 0;
z-index: 9;
width: 32px;
height: 32px;
background: url("/assets/renewal2023/img/ico/ico-arrow-prev2.png") no-repeat center/14px auto;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .mystudy-button-prev {
display: block;
background-size: 20px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .mystudy-button-prev::after {
display: none;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .mystudy-button-next {
right: 0;
z-index: 9;
width: 32px;
height: 32px;
background: url("/assets/renewal2023/img/ico/ico-arrow-next2.png") no-repeat center/14px auto;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .mystudy-button-next {
display: block;
background-size: 20px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .mystudy-button-next::after {
display: none;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .no-data {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 20px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .no-data::before {
content: "";
display: block;
width: 102px;
height: 160px;
background: url("/assets/renewal2023/img/common/character-nodata-color.png") no-repeat center/contain;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .no-data dt {
line-height: 135%;
font-size: 40px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-card-wrap .no-data dd {
margin: 5px 0 15px 0;
font-size: 18px;
color: #999999;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar {
margin-top: -30px;
padding: 40px 16px;
background-color: #ffffff;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar {
max-width: 1200px;
margin: 0 auto;
padding: 40px 45px;
border-radius: 40px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-legend .legend-lst {
display: flex;
flex-wrap: wrap;
row-gap: 12px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-legend .legend-lst {
gap: 40px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-legend .legend-lst .itm {
flex: 0 0 33.3333%;
display: flex;
align-items: center;
gap: 6px;
font-size: 16px;
color: #666666;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-legend .legend-lst .itm {
flex: none;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-legend .legend-lst .itm i {
display: block;
width: 20px;
height: 20px;
border-radius: 100%;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .tit-lst {
display: none;
margin-top: 43px;
border-bottom: 2px solid #333333;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .tit-lst {
display: flex;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .tit-lst .itm {
flex: 0 0 16.6666%;
padding: 8px 0;
line-height: 150%;
text-align: center;
font-size: 16px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .tit-lst .itm:last-of-type {
color: #46a5f0;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .tit-lst .itm + .itm {
border-left: 1px solid #dddddd;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst {
margin-top: 20px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst {
display: flex;
flex-wrap: wrap;
margin-top: 0;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm {
display: flex;
gap: 10px;
padding: 10px;
border-top: 1px solid #dddddd;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm {
flex: 0 0 16.6666%;
flex-direction: column;
min-height: 165px;
padding: 10px 0;
border-left: 1px solid #dddddd;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm:nth-of-type(6n-5) {
border-left: none;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm > strong {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
background: #f5f5f5;
border-radius: 100%;
font-size: 14px;
font-weight: 400;
color: #666666;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm > strong {
width: fit-content;
margin-left: 20px;
background: none;
font-size: 16px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl {
width: 100%;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd {
border-bottom: 1px dashed #ebebeb;
font-size: 18px;
color: #777777;
padding: 8px 0px 8px 10px;
}
@media (max-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd {
padding: 0;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd > a {
display: flex;
align-items: center;
gap: 8px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd > a::before {
content: "";
display: block;
width: 37px;
min-width: 37px;
height: 37px;
border-radius: 18px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
@media (max-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd > a::before {
border-radius: unset !important;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd > a > p {
display: flex;
flex-direction: column;
}
@media (max-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd > a > p {
display: flex;
flex-direction: row;
align-items: center;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd > a > p > span {
overflow: hidden;
color: var(--gray-color-variation-999999, #999);
text-overflow: ellipsis;
font-family: "Noto Sans KR";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px;
letter-spacing: -0.14px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd:last-of-type {
border-bottom: 0;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd.reading a::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-calendar-reading.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd.will a::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-calendar-will.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd.ing a::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-calendar-ing.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd.did a::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-calendar-did.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd.test a::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-calendar-test.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd.test-did a::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-calendar-test-did.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd.homework a::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-calendar-homework.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm dl dd.homework-did a::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-calendar-homework-did.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm.today {
border: 2px solid #121212;
}
@media (max-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-calendar .calendar-box .cont-lst .itm.empty {
display: none;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map {
max-width: 1200px;
margin: 0 auto;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map + .mystudy-progress-map {
margin-top: 20px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map + .mystudy-progress-map {
margin-top: 40px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst {
display: flex;
flex-direction: column;
gap: 20px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm {
overflow: hidden;
min-height: 114px;
background: #ffffff;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm {
border-radius: 40px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 16px 0 16px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top {
padding: 40px 40px 0 40px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .tit .name {
line-height: 133%;
font-size: 24px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .tit .name {
font-size: 28px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .tit .name > span {
margin-left: 10px;
line-height: 133%;
color: #00ab93;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .tit .desc {
margin-top: 10px;
font-size: 16px;
color: #666666;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .tit .desc .current {
color: #f04d69;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .btn-toggle {
position: relative;
width: 60px;
height: 56px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .btn-toggle {
height: 30px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .btn-toggle .bar {
position: absolute;
left: 0;
bottom: 7px;
z-index: 1;
width: 60px;
height: 16px;
border-radius: 8px;
background: #d9d9d9;
transition: all 0.3s;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .btn-toggle .handle {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
width: 30px;
height: 30px;
border-radius: 100%;
background: #666666 url("/assets/renewal2023/img/ico/ico-toggle-off.png") no-repeat center/cover;
transition: all 0.2s;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .btn-toggle::before {
content: "전체보기";
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
width: 60px;
font-size: 14px;
color: #666666;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .btn-toggle::before {
left: -65px;
top: 50%;
transform: translate(0, -50%);
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .btn-toggle.on .bar {
background: #79d1c7;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .btn-toggle.on .handle {
left: 30px;
background: #01416c url("/assets/renewal2023/img/ico/ico-toggle-on.png") no-repeat center/cover;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .top .btn-toggle.on::before {
content: "닫기";
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid {
margin-top: 30px;
padding: 0 40px 40px 40px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
gap: 4px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm {
position: relative;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .day-tit {
position: absolute;
top: 10px;
left: 20px;
width: fit-content;
min-height: 24px;
padding: 1px 10px;
background: #f4f8fb;
border: 1px solid #cbdde9;
border-radius: 12px;
line-height: 128%;
font-size: 14px;
color: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
gap: 4px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm {
padding: 42px 20px 16px;
border-radius: 10px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm > .unit-tit {
width: fit-content;
margin-bottom: 10px;
font-size: 18px;
white-space: nowrap;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm > .unit-tit.type-btn {
padding-right: 30px;
background: url("/assets/renewal2023/img/ico/ico-down-arrow-b.png") no-repeat right 2px center/20px auto;
cursor: pointer;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm .learning-lst {
display: flex;
gap: 10px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm .learning-lst .learning-itm {
position: relative;
min-width: 80px;
height: 88px;
background-color: #ffffff;
background-repeat: no-repeat;
background-position: center top 10px;
background-size: 40px auto;
border: 1px solid #ebebeb;
border-radius: 10px;
text-align: center;
font-size: 16px;
color: #777777;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm .learning-lst .learning-itm > a {
width: 100%;
height: 100%;
padding: 54px 5px 5px 5px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm .learning-lst .learning-itm .base-tooltip {
bottom: -42px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm .learning-lst .learning-itm.type-play-will {
background-image: url("/assets/renewal2023/img/mystudy/ico-play-will.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm .learning-lst .learning-itm.type-play-ing {
background-image: url("/assets/renewal2023/img/mystudy/ico-play-ing.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm .learning-lst .learning-itm.type-play-did {
background-image: url("/assets/renewal2023/img/mystudy/ico-play-did.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm .learning-lst .learning-itm.type-interactive-will {
background-image: url("/assets/renewal2023/img/mystudy/ico-interactive-will.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm .learning-lst .learning-itm.type-interactive-ing {
background-image: url("/assets/renewal2023/img/mystudy/ico-interactive-ing.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm .learning-lst .learning-itm.type-interactive-did {
background-image: url("/assets/renewal2023/img/mystudy/ico-interactive-did.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm .learning-lst .learning-itm.type-test-will {
background-image: url("/assets/renewal2023/img/mystudy/ico-test-will.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm .learning-lst .learning-itm.type-test-did {
background-image: url("/assets/renewal2023/img/mystudy/ico-test-did.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm.on {
background: #f5f5f5;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .day-lst .day-itm .unit-lst .unit-itm.on > .unit-tit.type-btn {
background: url("/assets/renewal2023/img/ico/ico-up-arrow-b.png") no-repeat right 2px center/20px auto;
cursor: pointer;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .mCustomScrollBox .mCSB_container {
overflow: visible;
margin-bottom: 36px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .mCustomScrollBox .mCSB_scrollTools.mCSB_scrollTools_horizontal {
height: 24px;
background-color: #ffffff;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .mCustomScrollBox .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
margin: 0 40px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .mCustomScrollBox .mCSB_scrollTools {
opacity: 1;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .mCustomScrollBox .mCSB_draggerContainer::before {
content: "";
width: 100%;
height: 8px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: #f5f5f5;
border-radius: 4px;
z-index: 1;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .mCustomScrollBox .mCSB_dragger_bar {
height: 8px !important;
margin: 8px 0 !important;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .mCustomScrollBox .mCSB_buttonLeft,
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .mCustomScrollBox .mCSB_buttonRight {
width: 24px;
height: 24px;
background: #cccccc;
border-radius: 100%;
opacity: 1;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .mCustomScrollBox .mCSB_buttonLeft {
background: url("/assets/renewal2023/img/ico/ico-scroll-left-on.png") no-repeat center/24px auto;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid .mCustomScrollBox .mCSB_buttonRight {
background: url("/assets/renewal2023/img/ico/ico-scroll-right-on.png") no-repeat center/24px auto;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid.scroll-first .mCustomScrollBox .mCSB_buttonLeft {
background: url("/assets/renewal2023/img/ico/ico-scroll-left-off.png") no-repeat center/24px auto;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .mid.scroll-last .mCustomScrollBox .mCSB_buttonRight {
background: url("/assets/renewal2023/img/ico/ico-scroll-right-off.png") no-repeat center/24px auto;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom {
margin-top: 24px;
background: #f4f8fb;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .day-lst {
padding: 20px 16px 40px 16px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .day-lst {
padding: 30px 80px 60px 72px;
}
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .day-lst .day-itm {
display: flex;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .day-lst .day-itm .day-tit {
display: flex;
gap: 3px;
padding: 6px 16px;
background: #01416c url("/assets/renewal2023/img/ico/ico-right-arrow-white.png") no-repeat right 10px center/12px auto;
border-radius: 10px;
font-size: 16px;
color: #ffffff;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .day-lst .day-itm .day-tit {
flex-direction: column;
align-items: center;
gap: 0;
flex-shrink: 0;
width: 104px;
padding: 24px 0 0 0;
background: url("/assets/renewal2023/img/common/calendar-b2.png") no-repeat left top/100% auto;
border-radius: 0;
font-size: 14px;
color: #121212;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .day-lst .day-itm .day-tit strong {
font-size: 24px;
font-weight: 700;
}
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .lesson-lst {
flex: 1;
margin-top: 10px;
}
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .lesson-lst .lesson-itm {
position: relative;
display: flex;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .lesson-lst .lesson-itm .unit-group-tit {
display: flex;
flex-direction: column;
gap: 10px;
margin: 20px 0 40px 0;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .lesson-lst .lesson-itm .unit-group-tit {
gap: 20px;
width: 200px;
margin: 0 54px 0 20px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .lesson-lst .lesson-itm .unit-group-tit .unit-tit {
font-size: 18px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .lesson-lst .lesson-itm .unit-group-tit .unit-tit {
font-size: 24px;
font-weight: 700;
}
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .subjdiv-lst {
flex: 1;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .subjdiv-lst .lesson-tit {
position: relative;
padding: 9px 20px;
margin-bottom: 10px;
border-radius: 20px;
border: 1px solid #01416c;
background: #ffffff;
line-height: 150%;
font-size: 16px;
font-weight: 700;
color: #01416c;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .subjdiv-lst .lesson-tit {
padding: 7.5px 30px;
margin-bottom: 30px;
font-size: 18px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .subjdiv-lst .lesson-tit::before {
display: none;
content: "";
position: absolute;
top: 22px;
left: -47px;
width: 52px;
height: 1px;
background: #01416c;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .subjdiv-lst .lesson-tit::before {
display: block;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .subjdiv-lst .lesson-tit::after {
display: none;
content: "";
position: absolute;
top: 16px;
left: -6px;
width: 12px;
height: 12px;
background: #01416c;
border-radius: 100%;
box-sizing: border-box;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .subjdiv-lst .lesson-tit::after {
display: block;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .subjdiv-lst .subjdiv-itm .subjdiv-tit {
position: relative;
margin-bottom: 10px;
margin-left: 25px;
font-size: 18px;
font-weight: 700;
color: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .subjdiv-lst .subjdiv-itm .subjdiv-tit::before {
content: "";
position: absolute;
top: 9px;
left: -24px;
width: 1px;
height: calc(100% + 12px);
background: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .subjdiv-lst .subjdiv-itm .subjdiv-tit::after {
content: "";
position: absolute;
top: 9px;
left: -29px;
width: 12px;
height: 12px;
background: #ffffff;
border: 2px solid #01416c;
border-radius: 100%;
box-sizing: border-box;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst {
margin-bottom: 40px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst:last-of-type {
margin-bottom: 0;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst:last-of-type .learning-itm:last-of-type::before {
height: 100%;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm {
position: relative;
display: flex;
flex-direction: column;
margin-left: 24px;
padding: 20px 20px 10px 20px;
background-color: #ffffff;
background-repeat: no-repeat;
background-position: right 10px center;
border: 1px solid #dddddd;
border-radius: 10px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm {
flex-direction: row;
gap: 40px;
padding: 20px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm::before {
content: "";
position: absolute;
top: 0;
left: -24px;
width: 1px;
height: calc(100% + 12px);
background: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm::after {
content: "";
position: absolute;
top: 0;
left: -29px;
width: 12px;
height: 12px;
background: #ffffff;
border: 2px solid #01416c;
border-radius: 100%;
box-sizing: border-box;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .txt-box {
flex: 1;
display: flex;
flex-direction: column;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .txt-box .header {
display: flex;
align-items: center;
gap: 10px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .txt-box .header::before {
content: "학습 전";
display: block;
width: fit-content;
padding: 1.5px 12px;
background: #79d1c7;
border-radius: 14px;
text-align: center;
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .txt-box .header dl {
display: flex;
font-size: 12px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .txt-box .header dl {
font-size: 16px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .txt-box .header dt {
color: #666666;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .txt-box .header dd {
margin-left: 3px;
color: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .txt-box .body .learning-tit {
margin: 4px 0 2px;
font-size: 16px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .txt-box .body .learning-tit {
margin: 10px 0 4px;
font-size: 18px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .txt-box .body .learning-desc {
line-height: 150%;
font-size: 16px;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
height: 48px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .btn-box {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
padding: 5px;
margin-top: 10px;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .btn-box {
flex-direction: column;
gap: 2px;
min-width: 80px;
padding: 0;
margin: 0;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .btn-box::before {
content: "";
width: 36px;
height: 36px;
display: block;
background-repeat: no-repeat;
background-position: left center;
background-size: cover;
background-image: url("/assets/renewal2023/img/mystudy/ico-play-will.png");
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .btn-box::before {
width: 64px;
height: 64px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .btn-box .txt::before {
content: "학습하기";
line-height: 128%;
font-size: 16px;
font-weight: 700;
color: #79d1c7;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .btn-box .date {
margin-top: 2px;
font-size: 12px;
color: #999999;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm .btn-box .date {
margin-top: -2px;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm + .learning-itm {
margin-top: 10px;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm:last-of-type::before {
height: calc(100% + 50px);
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-play-will .txt-box .header::before {
content: "학습 전";
background: #79d1c7;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-play-will .btn-box::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-play-will.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-play-will .btn-box .txt::before {
content: "학습하기";
color: #79d1c7;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-play-ing .txt-box .header::before {
content: "학습 중";
background: #f3b3d1;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-play-ing .btn-box::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-play-ing.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-play-ing .btn-box .txt::before {
content: "이어하기";
color: #f3b3d1;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-play-did .txt-box .header::before {
content: "학습 완료";
background: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-play-did .btn-box::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-play-did.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-play-did .btn-box .txt::before {
content: "복습하기";
color: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-interactive-will .txt-box .header::before {
content: "학습 전";
background: #79d1c7;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-interactive-will .btn-box::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-interactive-will.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-interactive-will .btn-box .txt .txt::before {
content: "학습하기";
color: #79d1c7;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-interactive-ing .txt-box .header::before {
content: "학습 중";
background: #f3b3d1;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-interactive-ing .btn-box::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-interactive-ing.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-interactive-ing .btn-box .txt::before {
content: "이어하기";
color: #f3b3d1;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-interactive-did .txt-box .header::before {
content: "학습 완료";
background: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-interactive-did .btn-box::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-interactive-did.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-interactive-did .btn-box .txt::before {
content: "복습하기";
color: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-test-will .txt-box .header::before {
content: "미응시";
background: #f04d69;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-test-will .btn-box::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-test-will.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-test-will .btn-box .txt::before {
content: "시험보기";
color: #f04d69;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-test-did .txt-box .header::before {
content: "응시 완료";
background: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-test-did .btn-box::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-test-did.png");
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .learning-lst .learning-itm.type-test-did .btn-box .txt::before {
content: "결과보기";
color: #01416c;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom:has(.subjdiv-tit) .learning-lst .learning-itm::after {
display: none;
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .btn-close-detail {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px;
background: #ffffff;
line-height: 150%;
font-size: 16px;
color: #666666;
}
@media (min-width: 801px) {
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .btn-close-detail {
padding: 18px 0;
}
}
.page-mystudy .mystudy-curiculum-wrap .mystudy-progress-map .subject-lst .subject-itm > .bottom .btn-close-detail::before {
content: "";
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-close-gray.png") no-repeat center/15px auto;
}
.page-mystudy .sec-tit {
margin-bottom: 8px;
font-size: 20px;
font-weight: 700;
}
.page-mystudy .sec-tit > span {
color: #00ab93;
}
.page-mystudy .sec-tab {
border-top: 1px solid #79d1c7;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.page-mystudy .sec-btn-answer {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 48px;
margin-top: 40px;
padding: 9px;
border-radius: 44px;
font-size: 18px;
font-weight: 700;
background-color: #ffffff;
border: 1px solid #79d1c7;
color: #79d1c7;
}
.page-mystudy .sec-btn-answer::after {
content: "";
display: block;
width: 24px;
height: 24px;
background: url(/assets/renewal2023/img/ico/ico-answer.png) no-repeat center/17px auto;
}
@media (min-width: 801px) {
.page-mystudy .sec-btn-answer {
display: none;
}
}
.page-mystudy .self-wrap {
display: flex;
flex-direction: column;
gap: 40px;
margin-top: 20px;
}
@media (min-width: 801px) {
.page-mystudy .self-wrap {
flex-direction: row;
gap: 30px;
margin-top: 40px;
}
}
.page-mystudy .self-wrap .video-lst {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
@media (min-width: 801px) {
.page-mystudy .self-wrap .video-lst {
gap: 10px;
}
}
.page-mystudy .self-wrap .video-lst.no-data {
flex-direction: column;
align-items: center;
}
.page-mystudy .self-wrap .video-lst.no-data::before {
content: "";
display: block;
width: 64px;
height: 100px;
background: url("/assets/renewal2023/img/common/character-nodata.png") no-repeat center/contain;
}
.page-mystudy .self-wrap .video-lst.no-data::after {
content: "학습 영상이 없습니다.";
font-size: 24px;
color: #999999;
word-break: keep-all;
text-align: center;
}
.page-mystudy .self-wrap .video-lst .itm {
flex: 0 0 calc(50% - 4px);
max-width: calc(50% - 4px);
border: 1px solid #dddddd;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-mystudy .self-wrap .video-lst .itm {
flex: 1;
max-width: 200px;
}
}
.page-mystudy .self-wrap .video-lst .itm > a {
padding: 20px 16px;
}
.page-mystudy .self-wrap .video-lst .itm > a .tit {
margin-bottom: 10px;
font-size: 20px;
font-weight: 700;
}
.page-mystudy .self-wrap .video-lst .itm > a .tit .tag {
margin-left: 8px;
padding: 2px 12px;
background: #79d1c7;
border-radius: 14px;
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.page-mystudy .self-wrap .video-lst .itm > a .desc {
height: 48px;
margin-bottom: 14px;
line-height: 150%;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap: break-word;
color: #666666;
}
.page-mystudy .self-wrap .video-lst .itm > a .btn {
font-size: 14px;
font-weight: 700;
text-decoration: underline;
color: #79d1c7;
}
.page-mystudy .self-wrap .video-lst .itm > a .btn::after {
content: "";
display: inline-block;
width: 8px;
height: 10px;
margin-left: 6px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.page-mystudy .self-wrap .video-lst .itm.will > a .tit .tag {
background-color: #79d1c7;
}
.page-mystudy .self-wrap .video-lst .itm.will > a .btn {
color: #79d1c7;
}
.page-mystudy .self-wrap .video-lst .itm.will > a .btn::before {
content: "학습하기";
}
.page-mystudy .self-wrap .video-lst .itm.will > a .btn::after {
background-image: url("/assets/renewal2023/img/mystudy/ico-arrow-mint.png");
}
.page-mystudy .self-wrap .video-lst .itm.ing > a .tit .tag {
background-color: #f3b3d1;
}
.page-mystudy .self-wrap .video-lst .itm.ing > a .btn {
color: #f3b3d1;
}
.page-mystudy .self-wrap .video-lst .itm.ing > a .btn::before {
content: "학습하기";
}
.page-mystudy .self-wrap .video-lst .itm.ing > a .btn::after {
background-image: url("/assets/renewal2023/img/mystudy/ico-arrow-pink.png");
}
.page-mystudy .self-wrap .video-lst .itm.did > a .tit .tag {
background-color: #01416c;
}
.page-mystudy .self-wrap .video-lst .itm.did > a .btn {
color: #01416c;
}
.page-mystudy .self-wrap .video-lst .itm.did > a .btn::before {
content: "복습하기";
}
.page-mystudy .self-wrap .video-lst .itm.did > a .btn::after {
background-image: url("/assets/renewal2023/img/mystudy/ico-arrow-navy.png");
}
.page-mystudy .self-wrap .test-lst {
padding: 19px 10px 27px 10px;
border: 1px solid #dddddd;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-mystudy .self-wrap .test-lst {
flex-shrink: 0;
width: 340px;
}
}
.page-mystudy .self-wrap .test-lst .tit {
margin-bottom: 24px;
text-align: center;
font-size: 20px;
}
.page-mystudy .self-wrap .test-lst .cont {
display: flex;
justify-content: center;
}
.page-mystudy .self-wrap .test-lst .cont.no-data::after {
content: "학습이 없습니다.";
font-size: 16px;
color: #999999;
word-break: keep-all;
text-align: center;
}
.page-mystudy .self-wrap .test-lst .cont .itm {
flex: 1;
text-align: center;
font-size: 14px;
}
.page-mystudy .self-wrap .test-lst .cont .itm > a::before {
content: "";
display: block;
width: 36px;
height: 36px;
margin: 0 auto 4px auto;
border-radius: 100%;
background: #01416c url("/assets/renewal2023/img/mystudy/ico-download.png") no-repeat center/24px auto;
}
.page-mystudy .self-wrap .test-lst .cont .itm + li {
border-left: 1px dashed #dddddd;
}
.page-mystudy .test-wrap {
margin-top: 20px;
}
@media (min-width: 801px) {
.page-mystudy .test-wrap {
margin-top: 40px;
}
}
.page-mystudy .test-wrap .test-lst {
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 801px) {
.page-mystudy .test-wrap .test-lst {
flex-direction: row;
gap: 30px;
}
}
.page-mystudy .test-wrap .test-lst.no-data {
flex-direction: column;
align-items: center;
}
@media (min-width: 801px) {
.page-mystudy .test-wrap .test-lst.no-data {
gap: 10px;
}
}
.page-mystudy .test-wrap .test-lst.no-data::before {
content: "";
display: block;
width: 64px;
height: 100px;
background: url("/assets/renewal2023/img/common/character-nodata.png") no-repeat center/contain;
}
.page-mystudy .test-wrap .test-lst.no-data::after {
content: "학습이 없습니다. 배운 내용을 복습하세요.";
font-size: 24px;
color: #999999;
word-break: keep-all;
text-align: center;
}
.page-mystudy .test-wrap .test-lst .itm {
border: 1px solid #dddddd;
border-radius: 10px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-mystudy .test-wrap .test-lst .itm {
flex: 1;
}
}
.page-mystudy .test-wrap .test-lst .itm a {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 8px 20px;
}
.page-mystudy .test-wrap .test-lst .itm a span {
flex: 1;
font-size: 20px;
}
.page-mystudy .test-wrap .test-lst .itm a::before {
content: "";
display: block;
width: 64px;
height: 64px;
border-radius: 100%;
background: url("/assets/renewal2023/img/mystudy/math-step1.png") no-repeat center/cover;
}
.page-mystudy .test-wrap .test-lst .itm a::after {
content: "";
display: block;
width: 36px;
height: 36px;
border-radius: 100%;
background: #01416c url("/assets/renewal2023/img/mystudy/ico-download.png") no-repeat center/24px auto;
}
.page-mystudy .test-wrap .test-lst .itm:nth-of-type(1) a::before {
background-image: url("/assets/renewal2023/img/mystudy/math-step1.png");
}
.page-mystudy .test-wrap .test-lst .itm:nth-of-type(2) a::before {
background-image: url("/assets/renewal2023/img/mystudy/math-step2.png");
}
.page-mystudy .test-wrap .test-lst .itm:nth-of-type(3) a::before {
background-image: url("/assets/renewal2023/img/mystudy/math-step3.png");
}
.popup-answer .popupContent__header .tag {
display: inline-block;
min-height: 26px;
margin-right: 8px;
padding: 2px 10px;
background: #ffffff;
border-radius: 20px;
vertical-align: middle;
font-size: 14px;
font-weight: 700;
color: #00ab93;
}
@media (min-width: 801px) {
.popup-answer .popupContent__header .tag {
margin-top: -5px;
}
}
.popup-answer .popupContent__body {
height: 100%;
padding: 20px 16px;
background: #ffffff;
}
@media (min-width: 801px) {
.popup-answer .popupContent__body {
width: 960px;
height: 540px;
}
}
.popup-answer .popupContent__body .tit {
text-align: center;
font-size: 28px;
}
@media (min-width: 801px) {
.popup-answer .popupContent__body .tit {
font-size: 40px;
}
}
.popup-answer .popupContent__body .tit strong,
.popup-answer .popupContent__body .tit strong em {
font-weight: 700;
color: #00ab93;
}
.popup-answer .popupContent__body .tit strong {
margin-bottom: 4px;
}
.popup-answer .popupContent__body .desc {
line-height: 150%;
text-align: center;
font-size: 16px;
color: #777777;
}
.popup-answer .popupContent__body .answer-lst {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 20px;
row-gap: 40px;
padding: 20px 0;
}
@media (min-width: 801px) {
.popup-answer .popupContent__body .answer-lst {
padding: 50px 0;
}
}
.popup-answer .popupContent__body .answer-lst .itm {
flex: 0 0 120px;
}
.popup-answer .popupContent__body .answer-lst .itm > a .img {
overflow: hidden;
position: relative;
width: 120px;
height: 150px;
border: 1px solid #dddddd;
border-radius: 10px;
transition: all 0.2s;
}
.popup-answer .popupContent__body .answer-lst .itm > a .img::before {
display: none;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
width: 48px;
height: 48px;
background: #00ab93 url("/assets/renewal2023/img/ico/ico-download.png") no-repeat center/32px auto;
border-radius: 100%;
}
.popup-answer .popupContent__body .answer-lst .itm > a .img::after {
display: none;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
}
.popup-answer .popupContent__body .answer-lst .itm > a .img > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.popup-answer .popupContent__body .answer-lst .itm > a .p {
margin-top: 4px;
line-height: 150%;
text-align: center;
font-size: 16px;
}
.popup-answer .popupContent__body .answer-lst .itm > a:hover .img {
transform: translateY(-10px);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
}
.popup-answer .popupContent__body .answer-lst .itm > a:hover .img::before, .popup-answer .popupContent__body .answer-lst .itm > a:hover .img::after {
display: block;
}
.popup-answer .popupContent__footer button {
margin: 0 auto;
}
@media (min-width: 801px) {
.page-myStudyWeekList .mystudy-curiculum-wrap .box-select-day .day-lst {
justify-content: center;
gap: 64px;
}
}
.page-myStudyMonthList .mystudy-curiculum-wrap > .base-date-picker .date-pickers {
justify-content: center;
}
.page-myStudyMonthList .mystudy-curiculum-wrap .box-select-day .day-lst .itm {
font-size: 24px;
}
.page-myStudyMonthList .mystudy-curiculum-wrap .box-select-day .day-lst .itm.active {
font-weight: 700;
}
.page-myStudyLearnProgressMap .mystudy-curiculum-wrap {
background: #fff;
}
.page-myStudyLearnProgressMap .mystudy-curiculum-wrap > .base-date-picker .date-pickers {
justify-content: center;
}
/* 학습 문의 */
.page-studyInquire .top-cont-wrap {
background: #f4f8fb;
padding-bottom: 40px;
}
.page-studyInquire .base-page-desc.type2 {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
}
.page-studyInquire .base-page-desc.type2 .btn-qna {
border-radius: 100px;
}
.page-studyInquire .tag {
display: block;
width: fit-content;
min-width: 55px;
min-height: 20px;
padding: 0 5px;
margin: 0 auto;
border-radius: 999px;
text-align: center;
font-size: 12px;
}
@media (min-width: 801px) {
.page-studyInquire .tag {
min-width: 95px;
min-height: 24px;
padding: 1px 15px;
font-size: 16px;
}
}
.page-studyInquire .tag.did {
border: 1px solid #01416c;
color: #01416c;
}
.page-studyInquire .tag.ing {
border: 1px solid #f04d69;
color: #f04d69;
}
.page-studyInquire .box-board-update .board-mid .base-table .box-flex-wrap {
gap: 8px;
}
.page-studyInquire .box-board-update .board-mid .base-table tr {
border-bottom: 1px solid #dddddd;
}
.page-studyInquire .box-board-update .board-mid .base-table tr:nth-of-type(2n) {
background: none;
}
.page-studyInquire .box-board-update .board-mid .base-table th {
width: 236px;
}
.page-studyInquire .box-board-update .board-mid .base-table .qna-file {
padding-bottom: 46px;
}
.page-studyInquire .box-board-update .board-mid .base-table .qna-file .box-flex-wrap {
padding-bottom: 20px;
}
.page-studyInquire .box-board-update .board-mid .base-table .qna-file .base-file {
position: relative;
}
.page-studyInquire .box-board-update .board-mid .base-table .qna-file .base-file::after {
content: "이미지 또는 문서 파일만 등록 가능 (gif, png, jpg, hwp, doc, pdf, xls)";
position: absolute;
bottom: -25px;
right: 0;
font-size: 14px;
color: #666666;
}
.page-studyInquire .box-board-update .board-mid .base-table .qna-file .base-ipt-text {
flex: 1;
}
.page-studyInquire .box-board-update .board-mid .base-table .qna-file .btn-file {
width: 143px;
}
.page-studyInquire .box-board-update .board-mid .base-table .qna-textarea > div {
display: flex;
flex-direction: column;
}
.page-studyInquire .box-board-update .board-mid .base-table .qna-textarea > div .base-textarea {
height: 220px;
}
.page-studyInquire .box-board-update .board-mid .base-table .qna-textarea .txt {
margin-top: 26px;
text-align: left;
font-size: 14px;
color: #999999;
}
.page-learnInquireList .board-top > .col {
margin-left: auto;
}
.page-learnInquireList .board-mid .base-table .user-info {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.page-learnInquireList .board-mid .base-table .user-info .user-img {
overflow: hidden;
flex-shrink: 0;
width: 40px;
height: 40px;
background: #f5f5f5;
border-radius: 100%;
}
.page-learnInquireList .board-mid .base-table .user-info .user-img > img {
width: 100%;
height: auto;
}
.page-learnInquireList .board-mid .base-table .user-info .user-id {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-learnInquireList .board-bottom {
position: relative;
}
.page-learnInquireList .board-bottom .btn-write {
position: absolute;
top: -6px;
right: 0;
}
/* 학습 자료실 */
.page-multimedia .top-cont-wrap {
background: #f4f8fb;
padding-bottom: 40px;
}
.page-multimedia .top-cont-wrap .media_top {
margin-top: 0;
}
.page-multimedia .top-cont-wrap .media_top .tbl-basic {
overflow: hidden;
border: none;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
}
.page-multimedia .top-cont-wrap .media_top .tbl-basic tr {
border: none;
}
.page-multimedia .top-cont-wrap .media_top .tbl-basic tr th {
background: #00ab93;
border-right: 1px solid #ebebeb;
text-align: center;
color: #fff;
text-indent: 0;
}
.page-multimedia .top-cont-wrap .media_top .tbl-basic tr td {
background: #fff;
border-right: 1px solid #ebebeb;
}
.page-multimedia .top-cont-wrap .media_top .tbl-basic tr td ul {
height: 360px;
padding: 18px 0;
}
.page-multimedia .top-cont-wrap .media_top .tbl-basic tr td ul li {
height: 54px;
padding: 14px 32px;
line-height: 144%;
color: #666666;
}
.page-multimedia .top-cont-wrap .media_top .tbl-basic tr td ul li.on {
background: #e4f6f4;
}
.page-multimedia .base-content-wrap .media_list {
border: none;
}
.page-multimedia .base-content-wrap .media_list + .media_list {
margin-top: 44px;
}
.page-multimedia .base-content-wrap .media_list:first-of-type {
margin-top: 0;
}
.page-multimedia .base-content-wrap .media_list dt {
position: relative;
z-index: 2;
height: auto;
padding: 0 0 20px 12px;
line-height: 133.333%;
font-size: 24px;
font-weight: 700;
color: #121212;
}
.page-multimedia .base-content-wrap .media_list dt::before {
content: "";
position: absolute;
top: -4px;
left: 0;
z-index: -1;
width: 28px;
height: 28px;
border-radius: 100%;
background: #79d1c7;
}
.page-multimedia .base-content-wrap .media_list dd {
padding: 0;
}
.page-multimedia .base-content-wrap .media_list dd ul li p {
margin-top: 16px;
line-height: 150%;
color: #121212;
}
.page-multimedia .base-content-wrap .media_list .img_center > img {
width: 100%;
height: 100%;
}
.page-multimedia .base-content-wrap .media_list .bg > img {
width: 56px;
height: 56px;
}
/* 과제하기 */
@media (max-width: 801px) {
.page-homeworkView .top-cont-wrap > .base-date-picker {
margin-bottom: 0;
}
}
.page-homeworkView .top-cont-wrap > .base-date-picker .date-pickers {
justify-content: center;
}
@media (max-width: 801px) {
.page-homeworkView .base-content-wrap {
padding-top: 0 !important;
}
}
.page-homeworkView .tabs-wrap {
max-width: 1200px;
margin: 0 auto;
}
.page-homeworkView .homework-lst {
padding-top: 16px;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst {
padding-top: 40px;
}
}
.page-homeworkView .homework-lst .itm + .itm {
margin-top: 16px;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm + .itm {
margin-top: 20px;
}
}
.page-homeworkView .homework-lst .itm .homework-con {
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-con {
min-height: 144px;
padding: 0;
align-items: unset;
}
}
.page-homeworkView .homework-lst .itm .homework-con::before {
content: "";
position: absolute;
top: 20px;
right: 22px;
padding: 2px 10px;
border-radius: 100px;
line-height: 133.333%;
font-size: 12px;
font-weight: 700;
color: #ffffff;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-con::before {
top: 0;
right: 27px;
width: 80px;
height: 72px;
padding: 18px 0 0 0;
border-radius: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-sizing: border-box;
text-align: center;
font-size: 18px;
}
}
.page-homeworkView .homework-lst .itm .homework-top {
display: none;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-top {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 112px;
padding: 5px;
text-align: center;
font-size: 16px;
color: #ffffff;
word-break: keep-all;
}
}
.page-homeworkView .homework-lst .itm .homework-mid {
flex: 1;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-mid {
padding: 24px 60px 24px 40px;
}
}
.page-homeworkView .homework-lst .itm .homework-mid > dl {
display: flex;
flex-direction: column;
gap: 13px;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-mid > dl {
flex-direction: row;
align-items: center;
}
}
.page-homeworkView .homework-lst .itm .homework-mid > dl dt {
display: flex;
align-items: center;
gap: 4px;
font-size: 18px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-mid > dl dt {
gap: 0;
font-size: 20px;
}
}
.page-homeworkView .homework-lst .itm .homework-mid > dl dt::before {
content: "";
display: block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-mid > dl dt::before {
width: 32px;
height: 32px;
}
}
.page-homeworkView .homework-lst .itm .homework-mid > dl dd {
font-size: 16px;
line-height: 150%;
color: #777777;
}
.page-homeworkView .homework-lst .itm .homework-mid > h3 {
font-size: 18px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-mid > h3 {
min-height: 29px;
margin-top: 6px;
font-size: 20px;
font-weight: 400;
}
}
.page-homeworkView .homework-lst .itm .homework-mid > .dates {
display: flex;
gap: 8px;
width: calc(100% + 30px);
margin-top: 24px;
font-size: 14px;
color: #777777;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-mid > .dates {
width: auto;
margin-top: 6px;
gap: 16px;
font-size: 16px;
}
}
.page-homeworkView .homework-lst .itm .homework-mid > .dates span {
color: #121212;
}
.page-homeworkView .homework-lst .itm .homework-mid > .dates strong {
color: #f04d69;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-bottom {
display: flex;
align-items: center;
justify-content: center;
padding-right: 144px;
}
}
.page-homeworkView .homework-lst .itm .homework-bottom .btn-submit {
display: flex;
align-items: center;
gap: 4px;
min-width: 98px;
background: #e0e7ec;
color: #01416c;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-bottom .btn-submit {
justify-content: center;
min-width: 126px;
height: 36px;
font-size: 16px;
}
}
.page-homeworkView .homework-lst .itm .homework-bottom .btn-submit::before {
content: "";
display: block;
width: 18px;
height: 18px;
background: url("/assets/renewal2023/img/ico/ico-submit.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-bottom .btn-submit::before {
width: 20px;
height: 20px;
}
}
.page-homeworkView .homework-lst .itm .homework-bottom .btn-toggle {
position: relative;
width: 60px;
height: 30px;
}
.page-homeworkView .homework-lst .itm .homework-bottom .btn-toggle .bar {
position: absolute;
left: 0;
bottom: 7px;
z-index: 1;
width: 60px;
height: 16px;
border-radius: 8px;
background: #d9d9d9;
transition: all 0.3s;
}
.page-homeworkView .homework-lst .itm .homework-bottom .btn-toggle .handle {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
width: 30px;
height: 30px;
border-radius: 100%;
background: #666666 url("/assets/renewal2023/img/ico/ico-toggle-off.png") no-repeat center/cover;
transition: all 0.2s;
}
.page-homeworkView .homework-lst .itm .homework-bottom .btn-toggle::before {
content: "자세히";
position: absolute;
top: 50%;
left: -60px;
transform: translate(0, -50%);
width: 60px;
font-size: 14px;
color: #666666;
}
.page-homeworkView .homework-lst .itm .homework-bottom .btn-toggle.on .bar {
background: #79d1c7;
}
.page-homeworkView .homework-lst .itm .homework-bottom .btn-toggle.on .handle {
left: 30px;
background: #01416c url("/assets/renewal2023/img/ico/ico-toggle-on.png") no-repeat center/cover;
}
.page-homeworkView .homework-lst .itm .homework-bottom .btn-toggle.on::before {
content: "닫기";
}
.page-homeworkView .homework-lst .itm .homework-detail {
display: none;
}
.page-homeworkView .homework-lst .itm .homework-detail .box {
overflow: hidden;
display: flex;
border: 1px solid #dddddd;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
.page-homeworkView .homework-lst .itm .homework-detail .box dl {
flex: 1;
}
.page-homeworkView .homework-lst .itm .homework-detail .box dl + dl {
border-left: 1px solid #dddddd;
}
.page-homeworkView .homework-lst .itm .homework-detail .box dl dt {
padding: 9.5px;
background: #f5f5f5;
border-bottom: 1px solid #dddddd;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
.page-homeworkView .homework-lst .itm .homework-detail .box dl dd {
padding: 10px;
text-align: center;
font-size: 16px;
}
.page-homeworkView .homework-lst .itm .homework-detail .box dl dd.file-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-homeworkView .homework-lst .itm .homework-detail .box dl dd.file-wrap .file-name {
display: none;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm .homework-detail .box dl dd.file-wrap .file-name {
display: block;
font-size: 16px;
}
}
.page-homeworkView .homework-lst .itm .homework-detail .box dl dd.file-wrap .btn-download {
width: 24px;
height: 24px;
border-radius: 100%;
background: #01416c url("/assets/renewal2023/img/ico/ico-download.png") no-repeat center/16px auto;
}
.page-homeworkView .homework-lst .itm .homework-detail .box dl.view-result-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.page-homeworkView .homework-lst .itm .homework-detail .box dl.view-result-wrap dd {
padding: 0;
width: 100%;
height: 100%;
}
.page-homeworkView .homework-lst .itm .homework-detail .box dl.view-result-wrap .btn-view {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
height: 100%;
font-size: 16px;
font-weight: 700;
}
.page-homeworkView .homework-lst .itm .homework-detail .box dl.view-result-wrap .btn-view::after {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-paper2.png") no-repeat center/16px auto;
}
.page-homeworkView .homework-lst .itm .homework-detail.on {
display: block;
position: relative;
z-index: 2;
}
.page-homeworkView .homework-lst .itm.kr .homework-mid > dl dt::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-kr.png");
}
.page-homeworkView .homework-lst .itm.math .homework-mid > dl dt::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-math.png");
}
.page-homeworkView .homework-lst .itm.soc .homework-mid > dl dt::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-society.png");
}
.page-homeworkView .homework-lst .itm.sci .homework-mid > dl dt::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-science.png");
}
.page-homeworkView .homework-lst .itm.total .homework-mid > dl dt::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-total.png");
}
.page-homeworkView .homework-lst .itm.not-homework .homework-con::before {
content: "과제 전";
background-image: url("/assets/renewal2023/img/common/tag-red.png");
}
.page-homeworkView .homework-lst .itm.not-submit .homework-con::before {
content: "미제출";
background-image: url("/assets/renewal2023/img/common/tag-black.png");
}
.page-homeworkView .homework-lst .itm.did .homework-con::before {
content: "과제 완료";
background-image: url("/assets/renewal2023/img/common/tag-navy.png");
}
.page-homeworkView .homework-lst .itm.deaeline .btn-submit {
position: relative;
}
.page-homeworkView .homework-lst .itm.deaeline .btn-submit::after {
content: "오늘 마감";
position: absolute;
top: -20px;
left: 30%;
padding: 2px 9px;
border-radius: 15px 15px 15px 0;
background: #00ab93;
font-size: 12px;
font-weight: 700;
line-height: 133%;
color: #ffffff;
}
@media (min-width: 801px) {
.page-homeworkView .homework-lst .itm.deaeline .btn-submit::after {
padding: 3.5px 13px;
font-size: 14px;
}
}
.page-homeworkView .homework-lst .itm.type1 .homework-top {
background: #8165fe;
}
.page-homeworkView .homework-lst .itm.type2 .homework-top {
background: #ffd349;
}
.page-homeworkView .no-homework-lst {
background: url("/assets/renewal2023/img/learningContainer/character3.png") no-repeat center top/64px auto;
}
.page-homeworkView .no-homework-lst > p {
padding-top: 110px;
text-align: center;
font-size: 24px;
color: #999999;
}
@media (min-width: 801px) {
.popup-homeworkView-submit {
width: 960px;
margin-bottom: 50px;
}
}
.popup-homeworkView-submit .popupContent__body {
padding: 0;
background: #ffffff;
}
.popup-homeworkView-submit .popupContent__body .submit-header {
position: relative;
padding: 24px 16px 16px 16px;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-header {
display: flex;
gap: 40px;
padding: 32px 40px;
}
}
.popup-homeworkView-submit .popupContent__body .submit-header::after {
content: "";
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
padding: 2px 10px;
border-radius: 100px;
font-size: 12px;
font-weight: 700;
color: #ffffff;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-header::after {
right: 40px;
padding: 2.5px 12px;
font-size: 18px;
font-weight: 400;
}
}
.popup-homeworkView-submit .popupContent__body .submit-header .category {
display: none;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-header .category {
display: flex;
align-items: center;
justify-content: center;
width: 119px;
border-radius: 10px;
background: pink;
font-size: 18px;
font-weight: 700;
color: #ffffff;
}
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-header .texts {
flex: 1;
}
}
.popup-homeworkView-submit .popupContent__body .submit-header .texts .tit {
display: flex;
align-items: center;
gap: 8px;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-header .texts .tit {
flex-direction: column;
align-items: start;
gap: 5px;
}
}
.popup-homeworkView-submit .popupContent__body .submit-header .texts .tit dt {
display: flex;
font-size: 20px;
font-weight: 700;
}
.popup-homeworkView-submit .popupContent__body .submit-header .texts .tit dt::before {
content: "";
display: block;
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.popup-homeworkView-submit .popupContent__body .submit-header .texts .tit dd {
font-size: 16px;
color: #777777;
}
.popup-homeworkView-submit .popupContent__body .submit-header .texts .desc {
display: flex;
flex-direction: column;
gap: 10px;
margin: 30px 0 0 0;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-header .texts .desc {
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 5px 0 0 0;
}
}
.popup-homeworkView-submit .popupContent__body .submit-header .texts .desc dt {
font-size: 18px;
font-weight: 700;
}
.popup-homeworkView-submit .popupContent__body .submit-header .texts .desc dd {
font-size: 14px;
color: #777777;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-header .texts .desc dd {
font-size: 16px;
}
}
.popup-homeworkView-submit .popupContent__body .submit-header .texts .desc dd span {
color: #121212;
}
.popup-homeworkView-submit .popupContent__body .submit-body {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.popup-homeworkView-submit .popupContent__body .submit-body .con {
min-height: 150px;
padding: 16px;
font-size: 16px;
color: #777777;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-body .con {
min-height: 190px;
padding: 32px 40px;
font-size: 24px;
color: #121212;
}
}
.popup-homeworkView-submit .popupContent__body .submit-body .btn-download {
padding: 18px 70px 18px 16px;
border-top: 1px solid #dddddd;
background: #f4f8fb url("/assets/renewal2023/img/ico/ico-download-circle-navy.png") no-repeat right 16px center/36px auto;
font-size: 16px;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-body .btn-download {
text-align: right;
}
}
.popup-homeworkView-submit .popupContent__body .submit-footer {
padding: 32px 16px;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-footer {
padding: 32px 40px;
}
}
.popup-homeworkView-submit .popupContent__body .submit-footer .base-file {
align-items: center;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-footer .base-file {
gap: 24px;
}
}
.popup-homeworkView-submit .popupContent__body .submit-footer .base-file h4 {
flex-shrink: 0;
font-size: 16px;
font-weight: 700;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-footer .base-file h4 {
font-size: 24px;
font-weight: 400;
}
}
.popup-homeworkView-submit .popupContent__body .submit-footer .base-file label {
flex-shrink: 0;
}
.popup-homeworkView-submit .popupContent__body .submit-footer .info-file {
margin-top: 8px;
line-height: 133%;
text-align: right;
font-size: 12px;
color: #777777;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-footer .info-file {
margin-right: 126px;
font-size: 14px;
}
}
.popup-homeworkView-submit .popupContent__body .submit-footer .info-submit {
margin-top: 60px;
line-height: 133%;
font-size: 12px;
color: #999999;
}
@media (min-width: 801px) {
.popup-homeworkView-submit .popupContent__body .submit-footer .info-submit {
text-align: center;
font-size: 14px;
}
}
.popup-homeworkView-submit .popupContent__body.not-homework .submit-header::after {
content: "과제 전";
background: #f04d69;
}
.popup-homeworkView-submit .popupContent__body.not-submit .submit-header::after {
content: "미제출";
background: #121212;
}
.popup-homeworkView-submit .popupContent__body.did .submit-header::after {
content: "과제 완료";
background: #01416c;
}
.popup-homeworkView-submit .popupContent__body.kr .texts .tit dt::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-kr.png");
}
.popup-homeworkView-submit .popupContent__body.math .texts .tit dt::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-math.png");
}
.popup-homeworkView-submit .popupContent__body.soc .texts .tit dt::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-society.png");
}
.popup-homeworkView-submit .popupContent__body.sci .texts .tit dt::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-science.png");
}
.popup-homeworkView-submit .popupContent__body.total .texts .tit dt::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-total.png");
}
/* 학습 현황 */
.notification-message ~ .b-modal.__b-popup1__ {
pointer-events: none;
}
@media (max-width: 801px) {
.page-psStudySttusMonthList .top-cont-wrap > .base-date-picker {
margin-bottom: 0;
}
}
.page-psStudySttusMonthList .top-cont-wrap > .base-date-picker .date-pickers {
justify-content: center;
}
.page-psStudySttusMonthList .mid-cont-wrap {
padding: 30px 0 40px;
background: #f4f8fb;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap {
padding: 0 0 40px 0;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap {
display: flex;
gap: 10px;
padding: 10px;
background-color: #fafdff;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap {
gap: 24px;
padding: 10px 140px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap::before {
flex-shrink: 0;
content: "";
display: block;
width: 134px;
height: 86px;
background: url("/assets/renewal2023/img/studySttus/grade1.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap::before {
width: 327px;
height: 210px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap dl {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 133%;
font-size: 12px;
color: #01416c;
}
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap dl dt {
font-weight: 700;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap dl dt {
font-size: 20px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap dl dd {
margin-top: 4px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap dl dd {
margin-top: 0;
font-size: 16px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap:has(.grade1)::before {
background: url("/assets/renewal2023/img/studySttus/grade1.png") no-repeat center/cover;
}
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap:has(.grade2)::before {
background: url("/assets/renewal2023/img/studySttus/grade2.png") no-repeat center/cover;
}
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap:has(.grade3)::before {
background: url("/assets/renewal2023/img/studySttus/grade3.png") no-repeat center/cover;
}
.page-psStudySttusMonthList .mid-cont-wrap .comment-wrap:has(.grade4)::before {
background: url("/assets/renewal2023/img/studySttus/grade4.png") no-repeat center/cover;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap {
position: relative;
max-width: 1200px;
margin: 40px auto;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap {
background: #ffffff;
border-radius: 40px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper {
padding-top: 82px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper {
height: 287px;
padding: 20px 60px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide {
padding: 4px 16px 8px 16px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide {
padding: 0;
}
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide:nth-of-type(1) {
width: 244px;
}
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide:nth-of-type(2) {
width: 400px;
}
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide:nth-of-type(3) {
width: 300px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 110px;
padding: 0 40px;
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con {
justify-content: flex-start;
height: 100%;
padding: 0;
border-radius: 0;
box-shadow: none;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .summary-tit {
width: 100%;
text-align: left;
font-size: 20px;
font-weight: 700;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap {
width: 100%;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap {
flex: 1;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress {
display: flex;
gap: 24px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress {
flex-direction: column;
justify-content: center;
gap: 30px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-progress {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-progress {
gap: 14px;
flex: 0;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-progress .progress-bar {
overflow: hidden;
position: relative;
width: 100%;
height: 25px;
background: #ebebeb;
border-radius: 6px;
box-sizing: border-box;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-progress .progress-bar {
height: 31px;
border-radius: 10px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-progress .progress-bar .now-progress-bar {
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #00ab93;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-progress .now-status {
position: relative;
width: 34px;
height: 20px;
padding: 0 4px;
background: #f04d69;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
color: #ffffff;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-progress .now-status {
width: fit-content;
height: 30px;
padding: 0 8px;
border-radius: 10px;
font-size: 19px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-progress .now-status::before {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
width: 5px;
height: 6px;
background: url("/assets/renewal2023/img/ico/ico-arrow-red.png") no-repeat center/cover;
transform: translateX(-50%) rotate(-90deg);
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-progress .now-status::before {
bottom: -10px;
width: 12px;
height: 18px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-txts {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-txts {
gap: 8px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-txts .tag {
width: fit-content;
padding: 3px 23px 3px 6px;
border: 1px solid #00ab93;
border-radius: 100px;
font-size: 12px;
font-weight: 700;
color: #00ab93;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-txts .tag {
padding: 3px 30px 3px 16px;
font-size: 14px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-txts .tag.up {
background: url("/assets/renewal2023/img/ico/ico-select-arrow-on.png") no-repeat right 8px center/10px auto;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-txts .tag.up {
background-position: right 14px center;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-txts .tag.down {
background: url("/assets/renewal2023/img/ico/ico-select-arrow.png") no-repeat right 8px center/10px auto;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-txts .tag.down {
background-position: right 14px center;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-txts .desc {
font-size: 12px;
color: #666666;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-prgoress .box-txts .desc {
font-size: 16px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar {
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 0;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar {
padding: 0;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst {
display: flex;
flex-direction: column;
align-items: center;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm {
display: flex;
align-items: center;
gap: 4px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm {
gap: 8px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm + .itm {
margin-top: 4px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm + .itm {
margin-top: 5px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .label {
width: 40px;
flex-shrink: 0;
font-size: 10px;
color: #666666;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .label {
width: 46px;
font-size: 12px;
text-align: center;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .box-progress {
width: 215px;
display: flex;
align-items: center;
gap: 7px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .box-progress {
width: 379px;
gap: 16px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .box-progress .progress-bar {
overflow: hidden;
position: relative;
width: 133px;
height: 10px;
background: #ebebeb;
border-radius: 2px;
box-sizing: border-box;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .box-progress .progress-bar {
width: 279px;
height: 20px;
border-radius: 4px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .box-progress .progress-bar .now-progress-bar {
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #00ab93;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .box-progress .now-status {
flex-shrink: 0;
position: relative;
width: fit-content;
height: 16px;
padding: 0 4px;
background: #666666;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
color: #ffffff;
word-break: break-all;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .box-progress .now-status {
height: 24px;
padding: 2px 4px;
border-radius: 6px;
font-size: 12px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .box-progress .now-status::before {
content: "";
position: absolute;
top: 5px;
left: -4px;
width: 5px;
height: 6px;
background: url("/assets/renewal2023/img/ico/ico-arrow-gray.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .box-progress .now-status::before {
left: -6px;
width: 8px;
height: 12px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .box-progress .now-status.end {
background: #f04d69;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .bar-lst .itm .box-progress .now-status.end::before {
background: url("/assets/renewal2023/img/ico/ico-arrow-red.png") no-repeat center/cover;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .scale-lst {
display: flex;
align-items: center;
justify-content: space-between;
width: 133px;
margin: 5px auto 0 auto;
border-top: 1px solid #dddddd;
transform: translateX(-24px);
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .scale-lst {
width: 279px;
transform: translateX(-29px);
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .scale-lst li {
font-size: 8px;
font-weight: 700;
color: #666666;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-bar .scale-lst li {
font-size: 12px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
width: 100%;
height: 100%;
padding: 15px 0;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut {
justify-content: flex-start;
gap: 22px;
padding: 0;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut #myDoughnutChart {
width: 78px !important;
height: 78px !important;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut #myDoughnutChart {
width: 144px !important;
height: 144px !important;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut .legend-lst li {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #666666;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut .legend-lst li {
font-size: 16px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut .legend-lst li::before {
content: "";
width: 6px;
height: 6px;
border-radius: 100%;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut .legend-lst li::before {
width: 8px;
height: 8px;
margin-right: 10px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut .legend-lst li + li {
margin-top: 8px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut .legend-lst li + li {
margin-top: 6px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut .legend-lst li:nth-of-type(1)::before {
background: #01416c;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut .legend-lst li:nth-of-type(2)::before {
background: #f3b3d1;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-wrapper .swiper-slide .summary-con .chart-wrap.type-doughnut .legend-lst li:nth-of-type(3)::before {
background: #79d1c7;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-pagination {
top: 0;
bottom: auto;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-pagination .swiper-pagination-bullet {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
max-width: 70px;
min-height: 46px;
margin: 0;
background: none;
border-radius: 44px;
line-height: 128%;
font-size: 14px;
color: #01416c;
opacity: 1;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-pagination .swiper-pagination-bullet-active {
position: relative;
background: #01416c;
font-weight: 700;
color: #ffffff;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-pagination .swiper-pagination-bullet-active::after {
content: "";
position: absolute;
left: 50%;
bottom: -14px;
transform: translateX(-50%);
width: 14px;
height: 12px;
background: url("/assets/renewal2023/img/mystudy/ico-day-arrow.png") no-repeat center/cover;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-button-prev {
top: 75%;
left: 16px;
width: 16px;
height: 16px;
background: url("/assets/renewal2023/img/ico/ico-arrow-prev2.png") no-repeat center/6px auto;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-button-prev::after {
display: none;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-button-next {
top: 75%;
right: 16px;
width: 16px;
height: 16px;
background: url("/assets/renewal2023/img/ico/ico-arrow-next2.png") no-repeat center/6px auto;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-summary-wrap .swiper-button-next::after {
display: none;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap {
max-width: 1200px;
margin: 0 auto;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm {
background: #ffffff;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm {
overflow: hidden;
border-radius: 40px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm + .itm {
margin-top: 16px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm + .itm {
margin-top: 40px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-tit {
display: flex;
justify-content: space-between;
padding: 10px 16px;
background: #79d1c7;
font-size: 18px;
font-weight: 700;
color: #ffffff;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-tit {
padding: 28px 80px;
font-size: 28px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-tit span {
color: #121212;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst {
padding: 0 16px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst {
padding: 0 40px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm {
padding: 16px 0;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm + .itm {
border-top: 1px dashed #dddddd;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top {
align-items: flex-start;
margin: 24px 0 44px 0;
padding: 0 35px;
}
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top .left {
display: flex;
align-items: center;
gap: 8px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top .left h4 {
line-height: 150%;
font-size: 16px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top .left h4 {
font-size: 20px;
font-weight: 400;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top .left .btn-more {
margin-top: 8px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top .left .btn-more {
margin-top: 0;
border: none;
width: 24px;
height: 24px;
min-height: 24px;
padding: 0;
border-radius: 100%;
background: url("/assets/renewal2023/img/ico/ico-arrow-circle-right.png") no-repeat center/cover;
}
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top .left .btn-more span {
display: none;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top .right {
font-size: 14px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top .right {
padding-right: 93px;
font-size: 18px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top .right p {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top .right p::before {
content: "";
display: block;
width: 4px;
height: 4px;
margin-right: 4px;
background: #121212;
border-radius: 100%;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top .right p::before {
width: 8px;
height: 8px;
margin-right: 16px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .top .right p + p {
margin-top: 4px;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid {
border: 1px solid #dddddd;
border-radius: 20px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid {
border: none;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl {
display: flex;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl {
padding: 0 35px 15px 35px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl + dl {
border-top: 1px solid #dddddd;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl + dl {
border: none;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dt,
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd {
min-height: 64px;
padding: 10px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dt,
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd {
min-height: auto;
padding: 0;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dt {
min-width: 50px;
border-right: 1px solid #dddddd;
line-height: 150%;
font-size: 16px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dt {
padding-right: 24px;
border-right: none;
font-size: 20px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd {
flex: 1;
flex-direction: column;
gap: 7px;
display: flex;
justify-content: center;
font-size: 16px;
font-weight: 400;
color: #666666;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd .box-txt {
font-size: 12px;
color: #777777;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd .box-txt {
font-size: 16px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd .box-progress {
display: flex;
gap: 10px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd .box-progress {
gap: 24px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd .box-progress .progress-bar {
overflow: hidden;
position: relative;
width: 100%;
height: 20px;
background: #ebebeb;
border-radius: 6px;
box-sizing: border-box;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd .box-progress .progress-bar {
height: 53px;
border-radius: 10px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd .box-progress .progress-bar .now-progress-bar {
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #00ab93;
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd .box-progress .now-status {
position: relative;
height: 20px;
padding: 0 3px;
background: #f04d69;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
color: #ffffff;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd .box-progress .now-status {
height: 52px;
padding: 13px 10px;
border-radius: 6px;
font-size: 16px;
}
}
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd .box-progress .now-status::before {
content: "";
position: absolute;
top: 6px;
left: -4px;
width: 5px;
height: 6px;
background: url("/assets/renewal2023/img/ico/ico-arrow-red.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .mid-cont-wrap .status-detail-wrap .status-detail-lst > .itm .box-lst > .itm .mid dl dd .box-progress .now-status::before {
top: 17px;
left: -9px;
width: 13px;
height: 14px;
}
}
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom {
margin-top: 0;
}
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li {
margin-bottom: 0;
}
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li + li {
margin-top: 24px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li + li {
margin-top: 40px;
}
}
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart-tit {
margin-bottom: 24px;
font-size: 18px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart-tit {
margin-bottom: 20px;
font-size: 24px;
}
}
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart_column {
background: #fbfcfe;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart_column .chart_top li span {
background: #ebebeb;
}
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart_column .chart_top li:first-of-type span {
background: #00ab93;
}
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart_column .chart ul li .bar {
width: 32px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart_column .chart ul li .bar {
width: 82px;
}
}
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart_column .chart ul li .bar div {
width: 16px;
background: #ebebeb;
border-radius: 100px 100px 0 0;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart_column .chart ul li .bar div {
width: 41px;
}
}
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart_column .chart ul li .bar div:first-of-type {
background: #00ab93;
}
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart_column .chart ul li p {
margin-top: 5px;
}
@media (min-width: 801px) {
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart_column .chart ul li p {
margin-top: 20px;
}
}
.page-psStudySttusMonthList .base-content-wrap .pmMonth_bottom > ul > li .chart_line {
background: #fbfcfe;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
/* 수학 진도 맟춤 */
.page-custMath .mystudy-curiculum-wrap {
padding: 0;
}
.page-custMath .mystudy-curiculum-wrap .info-box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-bottom: 46px;
padding: 20px 36px;
border-radius: 20px;
border: 2px solid #79d1c7;
background: #fff;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-custMath .mystudy-curiculum-wrap .info-box {
flex-direction: row;
height: 112px;
margin-bottom: 92px;
padding-top: 0;
padding-left: 20px;
padding-right: 40px;
padding-bottom: 0;
}
}
.page-custMath .mystudy-curiculum-wrap .info-box .info {
padding-bottom: 20px;
}
@media (min-width: 801px) {
.page-custMath .mystudy-curiculum-wrap .info-box .info {
display: flex;
align-items: center;
gap: 20px;
padding-bottom: 0;
}
}
.page-custMath .mystudy-curiculum-wrap .info-box .btn-modal {
display: flex;
justify-content: center;
align-items: center;
width: 254px;
padding: 0;
}
.page-custMath .mystudy-curiculum-wrap .info-box .btn-modal i {
display: inline-block;
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/mystudy/ico-modal.png") no-repeat;
background-size: 100%;
}
.page-custMath .mystudy-curiculum-wrap .date-picker {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding: 0;
}
@media (min-width: 801px) {
.page-custMath .mystudy-curiculum-wrap .date-picker {
display: none;
}
}
.page-custMath .mystudy-curiculum-wrap .date-picker > button {
width: 20px;
height: 20px;
background: url("/assets/renewal2023/img/ico/ico-arrow-circle.png") no-repeat center/cover;
}
.page-custMath .mystudy-curiculum-wrap .date-picker .next-btn {
transform: rotate(-180deg);
}
.page-custMath .mystudy-curiculum-wrap .date-picker > strong {
font-size: 18px;
}
.page-custMath .mystudy-curiculum-wrap .base-tab-depth2-m {
padding: 12px 0;
background: #00ab93;
}
.page-custMath .mystudy-curiculum-wrap .base-tab-depth2-m ul.tab__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
}
.page-custMath .mystudy-curiculum-wrap .base-tab-depth2-m ul.tab__list li {
padding: 6px 12px;
border-radius: 100px;
border: 1px solid #79d1c7;
background: #00ab93;
}
.page-custMath .mystudy-curiculum-wrap .base-tab-depth2-m ul.tab__list li a {
font-size: 14px;
color: #fff;
}
.page-custMath .mystudy-curiculum-wrap .base-tab-depth2-m ul.tab__list li.on {
background: #fff;
}
.page-custMath .mystudy-curiculum-wrap .base-tab-depth2-m ul.tab__list li.on a {
font-weight: 700;
color: #121212;
}
.page-custMath .custMath-contents {
padding-top: 30px;
background: #fff;
}
@media (min-width: 801px) {
.page-custMath .custMath-contents {
padding-top: 60px;
}
}
.page-custMath .custMath-contents .custMath-contents-top {
display: flex;
flex-direction: column;
}
@media (min-width: 801px) {
.page-custMath .custMath-contents .custMath-contents-top {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
border-bottom: 2px solid #e0e7ec;
}
}
.page-custMath .custMath-contents .custMath-contents-top .title-depth2-wrap {
display: flex;
align-items: center;
gap: 3px;
border-bottom: 2px solid #e0e7ec;
}
@media (min-width: 801px) {
.page-custMath .custMath-contents .custMath-contents-top .title-depth2-wrap {
border-bottom: none;
}
}
.page-custMath .custMath-contents .custMath-contents-top .title-depth2-wrap figure.img {
width: 48px;
height: 48px;
background: url("/assets/renewal2023/img/mystudy/char-title-depth2.png") no-repeat;
background-size: 100%;
}
@media (min-width: 801px) {
.page-custMath .custMath-contents .custMath-contents-top .title-depth2-wrap figure.img {
width: 56px;
height: 56px;
}
}
.page-custMath .custMath-contents .custMath-contents-top .title-depth2-wrap .title-depth2 {
font-weight: 700;
font-size: 18px;
}
@media (min-width: 801px) {
.page-custMath .custMath-contents .custMath-contents-top .title-depth2-wrap .title-depth2 {
font-size: 24px;
}
}
.page-custMath .custMath-contents .custMath-contents-top .title-depth2-wrap .title-depth2 > span {
padding-left: 2px;
font-weight: 400;
font-size: 16px;
}
@media (min-width: 801px) {
.page-custMath .custMath-contents .custMath-contents-top .title-depth2-wrap .title-depth2 > span {
font-size: 18px;
}
}
.page-custMath .custMath-contents .custMath-contents-top .btns-wrap {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 20px;
}
@media (min-width: 801px) {
.page-custMath .custMath-contents .custMath-contents-top .btns-wrap {
flex-direction: row;
margin-top: 0;
}
}
.page-custMath .custMath-contents .custMath-contents-top .btns-wrap button {
display: flex;
justify-content: center;
align-items: center;
height: 36px;
}
.page-custMath .custMath-contents .custMath-contents-top .btns-wrap button > i {
width: 20px;
height: 20px;
}
.page-custMath .custMath-contents .custMath-contents-top .btns-wrap button.btn-pdf {
width: 100%;
border: 1px solid #cccccc;
}
@media (min-width: 801px) {
.page-custMath .custMath-contents .custMath-contents-top .btns-wrap button.btn-pdf {
width: fit-content;
}
}
.page-custMath .custMath-contents .custMath-contents-top .btns-wrap button.btn-pdf > i {
background: url("/assets/renewal2023/img/ico/ico-pdf.png") no-repeat;
background-size: 100%;
}
.page-custMath .custMath-contents .custMath-contents-top .btns-wrap button.btn-download > i {
background: url("/assets/renewal2023/img/ico/ico-download.png") no-repeat;
background-size: 100%;
}
.page-custMath .custMath-contents .custMath-contents-top .btns-wrap .btn-download-wrap {
display: flex;
gap: 16px;
}
.page-custMath .custMath-contents .custMath-contents-top .btns-wrap .btn-download-wrap .btn-download {
width: 50%;
}
@media (min-width: 801px) {
.page-custMath .custMath-contents .custMath-contents-top .btns-wrap .btn-download-wrap .btn-download {
width: fit-content;
}
}
.page-custMath .custMath-contents .mystudy-card-wrap .no-data {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
.page-custMath .custMath-contents .mystudy-card-wrap .no-data::before {
content: none;
}
.page-custMath .custMath-contents .mystudy-card-wrap .no-data > p {
color: #999999;
text-align: center;
}
@media (min-width: 801px) {
.page-custMath .custMath-contents .mystudy-card-wrap .no-data > p {
font-size: 24px;
}
}
.popup-mathYearlySchedule .popupContent .popupContent__body .tbl-schedule {
height: calc(100% - 193px);
margin-top: 20px;
overflow-y: auto;
}
@media (min-width: 801px) {
.popup-mathYearlySchedule .popupContent .popupContent__body .tbl-schedule {
height: 460px;
}
}
.popup-mathYearlySchedule .popupContent .popupContent__footer {
position: absolute;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
width: 100%;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail {
width: 872px;
height: 885px;
}
}
.popup-psStudySttusMonthList-detail .popupContent {
display: flex;
flex-direction: column;
height: 100%;
}
.popup-psStudySttusMonthList-detail .popupContent__body {
flex: 1;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .popupContent__body {
height: 100%;
max-height: 749px;
}
}
.popup-psStudySttusMonthList-detail .unit-tit {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 16px;
}
.popup-psStudySttusMonthList-detail .unit-tit > dt {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 700;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .unit-tit > dt {
font-size: 20px;
}
}
.popup-psStudySttusMonthList-detail .unit-tit > dt::before {
content: "";
display: block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .unit-tit > dt::before {
width: 32px;
height: 32px;
}
}
.popup-psStudySttusMonthList-detail .unit-tit > dt::after {
display: none;
content: "";
width: 16px;
height: 16px;
background: url("/assets/renewal2023/img/ico/ico-arrow-next2.png") no-repeat center/auto 10px;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .unit-tit > dt::after {
display: block;
}
}
.popup-psStudySttusMonthList-detail .unit-tit > dt.kr::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-kr.png");
}
.popup-psStudySttusMonthList-detail .unit-tit > dt.math::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-math.png");
}
.popup-psStudySttusMonthList-detail .unit-tit > dt.soc::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-society.png");
}
.popup-psStudySttusMonthList-detail .unit-tit > dt.sci::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-science.png");
}
.popup-psStudySttusMonthList-detail .unit-tit > dt.total::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-total.png");
}
.popup-psStudySttusMonthList-detail .unit-tit > dd {
font-size: 16px;
color: #777777;
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm {
border: 1px solid #dddddd;
border-radius: 20px;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm {
border: none;
border-radius: 0;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm + .lesson-itm {
margin-top: 16px;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm + .lesson-itm {
margin-top: 0;
}
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm:first-of-type .lesson-con thead {
display: table-header-group;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con {
overflow: hidden;
border: 1px solid #dddddd;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con {
border-radius: 0;
box-shadow: none;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con colgroup col:last-of-type {
width: 80px;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con colgroup col:last-of-type {
width: 190px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con th,
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con td {
padding: 10px 8px;
border: 1px solid #dddddd;
text-align: center;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con th,
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con td {
padding: 11.5px 24px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con th {
font-size: 16px;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con th {
font-size: 18px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con thead {
display: none;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con thead th {
padding: 21.5px 24px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody {
background: #ffffff;
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody tr {
display: none;
border-bottom: 1px solid #dddddd;
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody .lesson-tit-group {
display: table-row;
background-color: #f4f8fb;
cursor: pointer;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody .lesson-tit-group {
background-color: #e4f6f4;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody .lesson-tit-group td:first-of-type {
padding: 16px 24px;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody .lesson-tit-group td:first-of-type {
padding: 19px 30px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody .lesson-tit-group td .lesson-tit {
line-height: 150%;
font-size: 16px;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody .lesson-tit-group td .lesson-tit {
font-size: 18px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody .lesson-tit-group td .lesson-tit::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin: 0 0 -3px 8px;
background: url("/assets/renewal2023/img/ico/ico-arrow-circle-bottom.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody .lesson-tit-group td .lesson-tit::after {
width: 20px;
height: 20px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody .lesson-tit-group td .lesson-desc {
margin-top: 8px;
line-height: 133%;
font-size: 12px;
color: #01416c;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody .lesson-tit-group td .lesson-desc {
font-size: 14px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody .lesson-tit-group td .lesson-desc .lesson-day {
margin-left: 8px;
color: #777777;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody .lesson-tit-group td .lesson-desc .lesson-day {
margin-left: 12px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .learning-tit {
font-size: 14px;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .learning-tit {
font-size: 16px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .learning-time {
font-size: 12px;
color: #01416c;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .learning-time {
font-size: 14px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .learning-day {
margin-left: 8px;
font-size: 12px;
color: #777777;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .learning-day {
margin-left: 12px;
font-size: 14px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .status {
display: inline-block;
width: fit-content;
min-height: 20px;
padding: 2px 10px;
margin: 0 auto;
border-radius: 100px;
font-size: 12px;
color: #ffffff;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .status {
padding: 2px 18px;
font-size: 18px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .status.will {
background: #79d1c7;
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .status.ing {
background: #f3b3d1;
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .status.did {
background: #01416c;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .status.did {
padding: 2px 14px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .lesson-count {
display: inline-block;
margin: 10px 0 0 0;
line-height: 128%;
font-size: 14px;
}
@media (min-width: 801px) {
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm .lesson-con tbody td .lesson-count {
margin: 0;
vertical-align: text-top;
font-size: 16px;
display: block;
margin-top: 6px;
}
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm.on tbody tr {
display: table-row;
}
.popup-psStudySttusMonthList-detail .lesson-lst .lesson-itm.on tbody .lesson-tit-group td .lesson-tit::after {
background: url("/assets/renewal2023/img/ico/ico-arrow-circle-top.png") no-repeat center/cover;
}
/* =============================================================
초등푸르넷 > 웹컨테이너
============================================================= */
.learning-modal {
display: none;
width: 1000px;
height: 720px;
max-height: 100%;
}
.learning-modal .modal-wrap {
position: relative;
width: 100%;
height: 100%;
background: #ffffff;
}
.learning-modal .modal-top {
height: 90px;
border-bottom: 4px solid #f5f5f5;
box-sizing: border-box;
}
.learning-modal .modal-top .modal-tit {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
gap: 5px;
}
@media (min-width: 801px) {
.learning-modal .modal-top .modal-tit {
gap: 12px;
height: 100%;
font-size: 40px;
line-height: 135%;
}
}
.learning-modal .modal-top .modal-tit::before {
flex-shrink: 0;
content: "";
display: block;
width: 22px;
height: 22px;
border-radius: 100%;
background-color: #79d1c7;
background-repeat: no-repeat;
background-size: cover;
}
@media (min-width: 801px) {
.learning-modal .modal-top .modal-tit::before {
width: 44px;
height: 44px;
}
}
.learning-modal .modal-mid {
overflow: auto;
height: calc(100% - 90px);
padding: 40px 50px;
box-sizing: border-box;
}
.learning-modal .modal-close {
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
background: url("/assets/renewal2023/img/learningContainer/ico-close.png") no-repeat center/cover;
border-radius: 100%;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.learning-modal:has(#learningMap) {
height: 100%;
}
.notification-message {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
z-index: 99999;
display: none;
gap: 10px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.notification-message img {
width: 274px;
height: 156px;
}
.notification-message__tit {
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
text-align: center;
}
.notification-message__tit b {
color: #f04d69;
}
.notification-message__tit2 {
color: #666;
font-size: 18px;
font-weight: 400;
line-height: 144.444%;
margin-top: 10px;
text-align: center;
}
#learningMap {
width: 100%;
min-width: 560px;
max-width: 560px;
}
@media (min-width: 1200px) {
#learningMap {
width: 90%;
min-width: 950px;
max-width: 1200px;
height: auto;
max-height: 100vh;
}
}
#learningMap .btn-test {
min-height: 36px;
padding: 3px 22px;
background: #ffffff;
border: 1px solid #cccccc;
border-radius: 10px;
line-height: 150%;
cursor: pointer;
}
#learningMap .btn-test::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin: 0 4px -2px 0;
background: url("/assets/renewal2023/img/learningContainer/ico-test.png") no-repeat center/cover;
}
#learningMap .btn-test.type-month {
background: #00ab93;
border: 1px solid #00ab93;
color: #ffffff;
}
#learningMap .btn-test.type-month::before {
background: url("/assets/renewal2023/img/learningContainer/ico-test-month.png") no-repeat center/cover;
}
#learningMap .btn-test.type-refer::before {
background: url("/assets/renewal2023/img/learningContainer/ico-test-refer.png") no-repeat center/cover;
}
#learningMap .btn-test.type-refer:disabled::before {
background: url("/assets/renewal2023/img/learningContainer/ico-test-refer-disabled.png") no-repeat center/cover;
}
#learningMap .btn-test:disabled {
background-color: #ebebeb;
color: #999999;
cursor: default;
}
#learningMap .modal-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 16px;
height: auto;
}
@media (min-width: 1200px) {
#learningMap .modal-top {
height: 140px;
padding: 0 60px;
}
}
#learningMap .modal-top .modal-tit::before {
background-image: url("/assets/renewal2023/img/learningContainer/ico-tit-map.png");
}
#learningMap .modal-top .modal-tit .txt-class {
position: relative;
font-size: 18px;
font-weight: 400;
line-height: 144.444%;
margin-left: 29px;
}
@media (min-width: 1200px) {
#learningMap .modal-top .modal-tit .txt-class {
margin-left: 50px;
line-height: 100%;
}
}
#learningMap .modal-top .modal-tit .txt-class::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -28px;
width: 2px;
height: 32px;
background: #4b505a;
}
#learningMap .modal-top .map-tab {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
@media (min-width: 1200px) {
#learningMap .modal-top .map-tab {
gap: 10px;
}
}
#learningMap .modal-top .map-tab li {
border: none;
}
#learningMap .modal-top .map-tab li button {
min-height: 26px;
padding: 4px 16px;
font-size: 14px;
line-height: 128.571%;
background: #ebebeb;
color: #666666;
cursor: pointer;
border-radius: 999px;
}
@media (min-width: 1200px) {
#learningMap .modal-top .map-tab li button {
min-height: 48px;
padding: 6.5px 24px;
font-size: 20px;
}
}
#learningMap .modal-top .map-tab li.active.kor button {
background: #ffd349;
}
#learningMap .modal-top .map-tab li.active.math button {
background: #b3a3fe;
}
#learningMap .modal-top .map-tab li.active.society button {
background: #bdd533;
}
#learningMap .modal-top .map-tab li.active.lit button {
background: #ff9900;
}
#learningMap .modal-top .map-tab li.active.science button {
background: #4bc8f5;
}
#learningMap .modal-top .map-tab li.active.all.grade1 button {
background: #bdd533;
}
#learningMap .modal-top .map-tab li.active.all.grade2 button {
background: #4bc8f5;
}
#learningMap .modal-top .map-tab li.active button {
font-weight: 700;
color: #ffffff;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
#learningMap .modal-section {
display: flex;
align-items: center;
padding: 10px 16px;
gap: 10px;
background: #f5f5f5;
}
@media (min-width: 1200px) {
#learningMap .modal-section {
gap: 20px;
padding: 14px 60px;
}
}
#learningMap .modal-section .box-desc {
font-size: 12px;
font-weight: 400;
line-height: 133.333%;
}
@media (min-width: 1200px) {
#learningMap .modal-section .box-desc {
font-size: 18px;
line-height: 144.444%;
}
}
#learningMap .modal-section .box-desc .txt-subject {
font-weight: 700;
}
#learningMap .modal-section .box-progress {
display: flex;
gap: 10px;
}
#learningMap .modal-section .box-progress .progress-bar {
overflow: hidden;
position: relative;
width: 200px;
height: 20px;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 999px;
box-sizing: border-box;
}
@media (min-width: 1200px) {
#learningMap .modal-section .box-progress .progress-bar {
width: 400px;
}
}
#learningMap .modal-section .box-progress .progress-bar .now-progress-bar {
display: block;
position: absolute;
left: 0;
top: 0;
height: 20px;
background: linear-gradient(270deg, #00ab93 8.69%, #547ccb 97.3%);
}
#learningMap .modal-section .box-progress .now-status {
font-size: 14px;
}
#learningMap .modal-section .btn-test {
flex-shrink: 0;
margin-left: 10px;
}
@media (min-width: 1200px) {
#learningMap .modal-section .btn-test {
margin-left: auto;
}
}
#learningMap .modal-mid {
padding: 26px 20px;
}
@media (min-width: 1200px) {
#learningMap .modal-mid {
padding: 30px 60px;
height: calc(100% - 164px);
max-height: calc(90vh - 110px);
overflow-y: auto;
}
}
#learningMap .modal-mid .unit + .unit {
margin-top: 60px;
}
@media (min-width: 1200px) {
#learningMap .modal-mid .unit + .unit {
margin-top: 80px;
}
}
#learningMap .modal-mid .unit .box-tit {
flex-direction: column;
gap: 10px;
}
#learningMap .modal-mid .unit .box-tit .tit {
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
#learningMap .modal-mid .unit .box-tit {
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 1200px) {
#learningMap .modal-mid .unit .box-tit {
flex-direction: row;
margin-bottom: 12px;
}
}
#learningMap .modal-mid .unit .box-tit .tit {
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
@media (min-width: 1200px) {
#learningMap .modal-mid .unit .box-tit .tit {
font-size: 24px;
line-height: 133.333%;
}
}
#learningMap .modal-mid .unit .box-tit .btn-list {
display: flex;
gap: 16px;
margin-bottom: 10px;
}
@media (min-width: 1200px) {
#learningMap .modal-mid .unit .box-tit .btn-list {
gap: 13px;
margin-left: auto;
margin-bottom: 0;
}
}
#learningMap .modal-mid .unit .table-tit {
display: flex;
background: #79d1c7;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
#learningMap .modal-mid .unit .table-tit li {
min-height: 56px;
padding: 14.5px;
box-sizing: border-box;
font-size: 18px;
font-weight: 700;
color: #ffffff;
}
#learningMap .modal-mid .unit .table-tit li.date {
flex-shrink: 0;
width: 140px;
text-align: center;
}
#learningMap .modal-mid .unit .table-tit li.date::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin: -3px 2px 0 0;
background: url("/assets/renewal2023/img/learningContainer/ico-calendar.png") no-repeat center/cover;
vertical-align: middle;
}
#learningMap .modal-mid .unit .table-tit li.title {
flex: 1;
}
#learningMap .modal-mid .unit .table {
border: 1px solid #79d1c7;
}
#learningMap .modal-mid .unit .table th,
#learningMap .modal-mid .unit .table td {
font-size: 14px;
line-height: 128.571%;
}
#learningMap .modal-mid .unit .table th {
padding: 16px;
background: #f5f5f5;
border-left: 1px solid #79d1c7;
font-weight: 700;
}
#learningMap .modal-mid .unit .table th:nth-of-type(1) {
width: 16%;
}
#learningMap .modal-mid .unit .table th:nth-of-type(2) {
width: 50%;
}
#learningMap .modal-mid .unit .table th:nth-of-type(3) {
width: 14%;
}
#learningMap .modal-mid .unit .table th:nth-of-type(4) {
width: 20%;
}
#learningMap .modal-mid .unit .table th .ico-info {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: -3px 0 0 8px;
background: url("/assets/renewal2023/img/learningContainer/ico-info.png") no-repeat center/cover;
vertical-align: middle;
}
#learningMap .modal-mid .unit .table th .ico-info.active::before {
content: "학습 주제를 클릭하면 해당 학습으로 이동합니다.";
position: absolute;
left: -25px;
bottom: -65px;
padding: 16px 12px;
width: fit-content;
min-width: 313px;
background: #fff6db;
border: 1px solid #ffd349;
border-radius: 10px;
box-sizing: border-box;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
font-size: 14px;
font-weight: 400;
font-style: normal;
}
#learningMap .modal-mid .unit .table th .ico-info.active::after {
content: "";
position: absolute;
left: 4px;
bottom: -12px;
width: 12px;
height: 10px;
background: url("/assets/renewal2023/img/learningContainer/ico-info-arrow.png") no-repeat center/cover;
}
#learningMap .modal-mid .unit .table td {
padding: 12.5px;
border-left: 1px solid #79d1c7;
color: #666666;
font-weight: 400;
}
#learningMap .modal-mid .unit .table td:has(a) {
padding: 0;
}
#learningMap .modal-mid .unit .table td a {
display: block;
width: 100%;
height: 100%;
min-height: 56px;
padding: 16px;
box-sizing: border-box;
}
#learningMap .modal-mid .unit .table td a:hover {
background: #fefae7;
color: #222222;
}
#learningMap .modal-mid .unit .table td a:hover.btn-quiz {
background: none;
}
#learningMap .modal-mid .unit .table td:nth-of-type(2) {
text-align: center;
}
#learningMap .modal-mid .unit .table thead tr {
border-bottom: 1px solid #79d1c7;
}
#learningMap .modal-mid .unit .table tbody tr + tr {
border-top: 1px solid #79d1c7;
}
#learningMap .modal-mid .unit .table .ico-step {
display: block;
width: fit-content;
margin: 0 auto;
padding: 5px 14px;
border-radius: 999px;
box-sizing: border-box;
font-size: 12px;
text-align: center;
font-weight: 700;
color: #ffffff;
}
@media (min-width: 1200px) {
#learningMap .modal-mid .unit .table .ico-step {
font-size: 14px;
min-width: 80px;
margin: 0 auto;
}
}
#learningMap .modal-mid .unit .table .ico-step.type-prev {
background: #79d1c7;
}
#learningMap .modal-mid .unit .table .ico-step.type-now {
background: #f3b3d1;
}
#learningMap .modal-mid .unit .table .ico-step.type-next {
background: #01416c;
}
#learningMap .modal-mid .unit .table .btn-quiz {
padding: 10px;
text-align: center;
font-size: 24px;
color: #666666;
text-decoration: underline;
}
#learningMap .modal-mid .unit .table .btn-quiz.type-closed {
color: #121212;
}
#learningMap .modal-mid .unit .table .btn-quiz.type-quiz {
color: #f04d69;
}
#learningMap .modal-close {
width: 36px;
height: 36px;
top: 10px;
right: -46px;
}
@media (min-width: 1200px) {
#learningMap .modal-close {
top: 40px;
right: -100px;
width: 80px;
height: 80px;
}
}
#learningMemo .modal-top .modal-tit::before {
background-image: url("/assets/renewal2023/img/learningContainer/ico-tit-memo.png");
}
#learningMemo .modal-mid .memo-boxes {
display: flex;
gap: 20px;
}
#learningMemo .modal-mid .memo-boxes .box-wrap {
flex: 1;
width: 50%;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box {
overflow: hidden;
display: flex;
flex-direction: column;
height: 440px;
border: 1px solid #cccccc;
border-radius: 20px;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .top {
padding: 10px 30px;
border-bottom: 1px solid #ebebeb;
font-size: 18px;
font-weight: 700;
color: #666666;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid {
flex: 1;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .textarea {
width: 100%;
height: 100%;
padding: 20px;
color: #666666;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list {
height: 100%;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list .item {
display: flex;
gap: 16px;
align-items: center;
padding-right: 20px;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list .item .btn-toggle {
flex: 1;
max-width: 355px;
padding: 20px;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list .item .btn-toggle dt {
display: flex;
gap: 10px;
margin-bottom: 10px;
font-size: 14px;
color: #999999;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list .item .btn-toggle dt p {
color: #00ab93;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list .item .btn-toggle dd {
max-width: 320px;
color: #666666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list .item .btn-delete {
flex-shrink: 0;
width: 40px;
height: 40px;
background: #ffffff url("/assets/renewal2023/img/learningContainer/ico-delete.png") no-repeat center/24px auto;
border: 1px solid #dddddd;
border-radius: 100%;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list .item + .item {
border-top: 1px solid #dddddd;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list .item.active {
background-color: #f4f8fb;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list .item.active .btn-toggle dd {
white-space: wrap;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list .item:hover {
background-color: #ebf9f7;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list.no-data {
position: relative;
background: url("/assets/renewal2023/img/learningContainer/character3.png") no-repeat center top 105px/64px auto;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .mid .list.no-data::after {
content: "등록된 학습 메모가 없습니다.";
position: absolute;
top: 215px;
width: 100%;
margin-top: 10px;
text-align: center;
font-size: 24px;
color: #999999;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .bottom {
height: 40px;
background: #f5f5f5;
padding: 0 20px;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .bottom .dl-text {
display: flex;
gap: 15px;
justify-content: end;
align-items: center;
height: 100%;
font-size: 14px;
color: #666666;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .bottom .dl-text strong {
color: #121212;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .bottom .pagination {
display: flex;
gap: 2px;
justify-content: center;
align-items: center;
height: 100%;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .bottom .pagination > span {
padding: 5px;
font-size: 14px;
color: #121212;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .bottom .pagination > span.active {
color: #00ab93;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .bottom .pagination > a > img {
width: auto;
height: 15px;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .bottom .pagination > a.prev_paging > img {
height: 13px;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box .bottom .pagination > a.next_paging > img {
height: 13px;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box:has(:focus) {
border: 1px solid #79d1c7;
}
#learningMemo .modal-mid .memo-boxes .box-wrap .box:has(:focus) .top {
color: #79d1c7;
}
#learningMemo .modal-mid .memo-boxes .box-wrap.left .btn-submit {
margin: 20px auto 0;
}
#learningMemo .modal-mid .memo-boxes .box-wrap.right .box .mid {
overflow-y: auto;
}
#learningMemo .modal-mid .memo-boxes .box-wrap.right .txt-cf {
margin: 35px auto 0;
text-align: center;
font-size: 16px;
color: #666666;
}
#learningMemo .modal-mid .memo-boxes .box-wrap.right .txt-cf span {
color: #01416c;
}
#learningInquire .modal-top .modal-tit::before {
background-image: url("/assets/renewal2023/img/learningContainer/ico-tit-qna.png");
}
#learningInquire .modal-mid .box-alert {
padding: 19px 19px 19px 215px;
margin-bottom: 30px;
background: #f4f8fb url("/assets/renewal2023/img/learningContainer/character2.png") no-repeat left 107px bottom/100px auto;
border-radius: 20px;
font-size: 16px;
color: #666666;
}
#learningInquire .modal-mid .box-forms .box-form {
display: flex;
align-items: center;
gap: 10px;
}
#learningInquire .modal-mid .box-forms .box-form > dt {
flex-shrink: 0;
width: 80px;
line-height: 36px;
}
#learningInquire .modal-mid .box-forms .box-form > dd {
display: flex;
gap: 16px;
width: 100%;
}
#learningInquire .modal-mid .box-forms .box-form > dd .base-select-wrap .select-menu {
width: 100%;
}
#learningInquire .modal-mid .box-forms .box-form > dd .base-select-wrap .option-text {
text-align: left;
}
#learningInquire .modal-mid .box-forms .box-form > dd .base-select-wrap.type-subject {
width: 160px;
}
#learningInquire .modal-mid .box-forms .box-form > dd .base-select-wrap.type-unit {
flex: 1;
}
#learningInquire .modal-mid .box-forms .box-form > dd input {
max-height: 36px;
padding: 5px 20px;
border-radius: 10px;
}
#learningInquire .modal-mid .box-forms .box-form > dd .base-file form {
width: 100%;
}
#learningInquire .modal-mid .box-forms .box-form > dd .base-file .btn-file {
flex-shrink: 0;
}
#learningInquire .modal-mid .box-forms .box-form .base-textarea {
height: 200px;
}
#learningInquire .modal-mid .box-forms .box-form .txt-cf {
flex: 1;
font-size: 16px;
color: #666666;
}
#learningInquire .modal-mid .box-forms .box-form .txt-cf > span {
color: #01416c;
}
#learningInquire .modal-mid .box-forms .box-form + .box-form {
margin-top: 20px;
}
#learningDictionary .modal-top .modal-tit::before {
background-image: url("/assets/renewal2023/img/learningContainer/ico-tit-dict.png");
}
#learningDictionary .modal-mid .line {
border: none;
}
#learningDictionary .modal-mid .dictionary_midTab {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
border: none;
}
#learningDictionary .modal-mid .dictionary_midTab > li {
flex: 1;
height: 64px;
padding: 0;
margin: -1px 0 0 -1px;
border: 1px solid #cccccc;
box-sizing: border-box;
}
#learningDictionary .modal-mid .dictionary_midTab > li > a {
height: 100%;
line-height: 64px;
font-size: 18px;
font-weight: 400;
}
#learningDictionary .modal-mid .dictionary_midTab > li.on {
border-top: 2px solid #00ab93;
border-bottom: 0;
}
#learningDictionary .modal-mid .dictionary_midTab > li.on > a {
font-weight: 700;
color: #00ab93;
}
#learningDictionary .modal-mid .dictionaryCon {
margin-top: 18px;
}
#learningDictionary .modal-mid .dictionaryCon .dictionaryTop {
padding: 20px;
}
#learningDictionary .modal-mid .dictionaryCon .dictionaryTop > dt {
display: none;
}
#learningDictionary .modal-mid .dictionaryCon .dictionaryTop > dd {
display: flex;
gap: 10px;
margin-top: 0;
}
#learningDictionary .modal-mid .dictionaryCon .dictionaryTop > dd input[type=text] {
margin: 0;
border: 1px solid #dddddd;
}
#learningDictionary .modal-mid .dictionaryCon .dictionaryTop > dd > a {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 140px;
height: 50px;
border-radius: 100px;
color: white;
text-align: center;
line-height: 128%;
font-size: 14px;
font-weight: 700;
}
#learningDictionary .modal-mid .dictionaryCon .dictionaryTop > dd .btn-bg.gray {
background: #00ab93;
font-size: 16px;
}
#learningDictionary .modal-mid .dictionaryCon .dictionaryTop > dd .btn-must {
width: 140px;
}
#learningDictionary .modal-mid .dictionaryCon .chClass {
display: none;
}
#learningDictionary .modal-mid .dictionaryCon .chClass.on {
display: block;
}
#learningDictionary .modal-mid .dictionaryCon .chClass h2 {
line-height: 133%;
font-size: 24px;
margin: 40px 0 20px;
color: #121212;
}
#learningDictionary .modal-mid .dictionaryCon .chClass ul {
display: flex;
}
#learningDictionary .modal-mid .dictionaryCon .chClass ul li {
flex: 1;
border: 1px solid #dddddd;
margin-left: -1px;
}
#learningDictionary .modal-mid .dictionaryCon .chClass ul li input {
display: none;
}
#learningDictionary .modal-mid .dictionaryCon .chClass ul li label {
display: block;
width: 100%;
height: 100%;
padding: 19px;
text-align: center;
font-size: 18px;
color: #999999;
}
#learningDictionary .modal-mid .dictionaryCon .chClass ul li.on {
background: #00ab93;
}
#learningDictionary .modal-mid .dictionaryCon .chClass ul li.on label {
color: #ffffff;
font-weight: 700;
}
#learningDictionary .modal-mid .dictionary_smallTab {
display: flex;
gap: 20px;
margin: 40px 0 0 0;
border-width: 1px;
}
#learningDictionary .modal-mid .dictionary_smallTab > li {
height: auto;
padding: 0;
}
#learningDictionary .modal-mid .dictionary_smallTab > li > a {
height: 100%;
padding: 4.5px 8px;
line-height: inherit;
font-size: 18px;
color: #121212;
}
#learningDictionary .modal-mid .dictionary_smallTab > li.on {
border-width: 4px;
}
#learningDictionary .modal-mid .dictionary_smallTab > li.on > a {
color: #00ab93;
}
#learningDictionary .modal-mid .searchResultCon .btn-back::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url(/assets/renewal2023/img/ico/ico-arrow-prev2.png) no-repeat center/8px auto;
}
#learningDictionary .modal-mid .searchResultCon .searchResult h3 {
width: fit-content;
margin-right: auto;
}
#learningDictionary .modal-mid .searchResultCon .resultView .box {
border-color: #79d1c7;
}
#learningDictionary .modal-mid .searchResultCon .resultView .blue,
#learningDictionary .modal-mid .searchResultCon .resultView .blue5,
#learningDictionary .modal-mid .searchResultCon .resultView .blue3,
#learningDictionary .modal-mid .searchResultCon .resultView .bigh,
#learningDictionary .modal-mid .searchResultCon .resultView .bigh2 {
color: #00ab93;
}
#learningDictionary .modal-mid .searchResultCon .resultView .blue2 {
color: #79d1c7;
}
#learningDictionary .modal-mid .searchResultCon .resultView .orengy12n {
color: #f04d69;
}
#learningDictionary .modal-mid .searchResult04 {
padding-top: 0;
}
#learningDictionary .modal-mid .searchResult04 .list {
padding-top: 2px;
}
#learningDictionary .modal-mid .searchResult04 .list li a {
display: flex;
align-items: center;
justify-content: center;
}
/* =============================================================
푸르넷 수학
============================================================= */
/* 이 달의 학습*/
.page-textBook .top-cont-wrap {
background: #f4f8fb;
}
.page-textBook .top-cont-wrap .base-date-picker {
overflow: hidden;
padding: 0;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-textBook .top-cont-wrap .base-date-picker {
max-width: 1200px;
margin: 0 auto;
padding: 20px 40px;
box-shadow: none;
}
}
.page-textBook .top-cont-wrap .base-date-picker .date-pickers {
display: flex;
flex-direction: column;
gap: 20px;
padding: 19px 16px;
background: #fff;
}
@media (min-width: 801px) {
.page-textBook .top-cont-wrap .base-date-picker .date-pickers {
flex-direction: row;
align-items: center;
gap: 40px;
padding: 0;
}
}
.page-textBook .top-cont-wrap .base-date-picker .date-pickers .date-picker {
gap: 8px;
padding: 0;
}
.page-textBook .top-cont-wrap .base-date-picker .date-pickers .date-picker > button {
width: 20px;
height: 20px;
background: url("/assets/renewal2023/img/ico/ico-arrow-circle.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-textBook .top-cont-wrap .base-date-picker .date-pickers .date-picker > button {
width: 24px;
height: 24px;
}
}
.page-textBook .top-cont-wrap .base-date-picker .date-pickers .date-picker .next-btn {
transform: rotate(-180deg);
}
.page-textBook .top-cont-wrap .base-date-picker .date-pickers .date-picker > strong {
font-size: 18px;
}
@media (min-width: 801px) {
.page-textBook .top-cont-wrap .base-date-picker .date-pickers .date-picker > strong {
font-size: 20px;
}
}
.page-textBook .top-cont-wrap .base-date-picker .date-pickers .date-tab .week-lst {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
@media (min-width: 801px) {
.page-textBook .top-cont-wrap .base-date-picker .date-pickers .date-tab .week-lst {
gap: 16px;
}
}
.page-textBook .top-cont-wrap .base-date-picker .date-pickers .date-tab .week-lst li button {
min-width: 64px;
padding: 5px 0;
border: 1px solid #79d1c7;
border-radius: 20px;
font-size: 14px;
line-height: 128%;
color: #666666;
}
@media (min-width: 801px) {
.page-textBook .top-cont-wrap .base-date-picker .date-pickers .date-tab .week-lst li button {
min-width: 128px;
padding: 8px;
line-height: 150%;
font-size: 16px;
}
}
.page-textBook .top-cont-wrap .base-date-picker .date-pickers .date-tab .week-lst li.active button {
background: #79d1c7;
font-weight: 700;
color: #fff;
}
.page-textBook .top-cont-wrap .base-date-picker .now-month {
gap: 4px;
}
@media (min-width: 801px) {
.page-textBook .top-cont-wrap .base-date-picker .now-month {
min-height: 40px;
padding: 5px 20px;
}
}
.page-textBook .top-cont-wrap .base-date-picker .now-month::before {
content: "";
display: block;
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-calendar-white.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-textBook .top-cont-wrap .base-date-picker .now-month::before {
background-image: url("/assets/renewal2023/img/ico/ico-calendar-green.png");
}
}
.page-textBook .base-content-wrap {
padding-top: 0 !important;
}
.page-textBook .base-content-wrap .sec-wrap {
padding: 40px 0 80px 0;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-wrap {
padding: 64px 0 80px 0;
}
}
.page-textBook .base-content-wrap .sec-tit {
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px;
margin-bottom: 20px;
border-bottom: 2px solid #e0e7ec;
font-size: 20px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-tit {
padding: 0;
margin-bottom: 36px;
font-size: 24px;
}
}
.page-textBook .base-content-wrap .sec-tit::before {
content: "";
display: block;
width: 40px;
height: 38px;
background: url("/assets/renewal2023/img/study/sec-tit-crt1.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-tit::before {
position: relative;
bottom: -6px;
width: 55px;
height: 52px;
}
}
.page-textBook .base-content-wrap .sec-card-wrap {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper {
padding: 4px 36px 36px 36px;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-card-wrap .swiper {
padding: 4px 4px 36px 4px;
margin: 0 60px;
}
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide {
background: #ffffff;
border-radius: 40px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
height: auto;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide > a {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide .top {
display: flex;
margin: 0 12px;
padding: 14px 0 8px;
border-bottom: 1px dashed #dddddd;
font-size: 20px;
font-weight: 700;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide .top::before {
content: "";
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide .mid {
display: flex;
gap: 12px;
padding: 24px 16px 10px 16px;
height: 100%;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide .mid .texts {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: unset;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide .mid .texts .tag {
width: fit-content;
min-height: 27px;
margin-bottom: 10px;
padding: 2px 16px;
border: 1px solid #00ab93;
border-radius: 14px;
font-size: 14px;
color: #00ab93;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide .mid .texts .tit {
font-size: 18px;
font-weight: 700;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide .mid .texts .desc {
height: auto;
max-height: 96px;
margin-top: 6px;
line-height: 150%;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap: break-word;
color: #121212;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide .mid .texts .bookPage {
margin-top: 5px;
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide .mid .texts .time {
margin-top: 44px;
text-align: center;
font-size: 14px;
line-height: 128.571%;
color: #999999;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide .bottom {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 0;
background: #01416c;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
font-size: 20px;
font-weight: 900;
color: #ffffff;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide .bottom::before {
content: "";
width: 32px;
height: 32px;
background: url("/assets/renewal2023/img/ico/ico-play.png") no-repeat center/cover;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide.type-will > a::before {
position: absolute;
top: -4px;
right: 20px;
content: "학습 전";
width: 80px;
height: 72px;
padding-top: 15px;
background: url("/assets/renewal2023/img/mystudy/tag-will.png") no-repeat center/cover;
box-sizing: border-box;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide.type-will .bottom {
background: #79d1c7;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide.type-will .bottom::after {
content: "학습하기";
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide.type-ing > a::before {
position: absolute;
top: -4px;
right: 20px;
content: "학습 중";
width: 80px;
height: 72px;
padding-top: 15px;
background: url("/assets/renewal2023/img/mystudy/tag-ing.png") no-repeat center/cover;
box-sizing: border-box;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide.type-ing .bottom {
background: #f3b3d1;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide.type-ing .bottom::after {
content: "이어하기";
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide.type-did > a::before {
position: absolute;
top: 10px;
right: 20px;
content: "";
width: 100px;
height: 100px;
background: url("/assets/renewal2023/img/mystudy/tag-did.png") no-repeat center/cover;
box-sizing: border-box;
text-align: center;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide.type-did .bottom {
background: #01416c;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-slide.type-did .bottom::after {
content: "복습하기";
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-pagination {
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-card-wrap .swiper-pagination {
display: none;
}
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-pagination .swiper-pagination-bullet {
display: block;
width: 16px;
height: 16px;
margin: 0;
background: none;
border: 3px solid #121212;
opacity: 1;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-pagination .swiper-pagination-bullet-active {
width: 40px;
background: #121212;
border-radius: 8px;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-button-prev {
left: 0;
width: 32px;
height: 32px;
background: url("/assets/renewal2023/img/ico/ico-arrow-prev2.png") no-repeat center/14px auto;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-card-wrap .swiper-button-prev {
background-size: 20px;
}
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-button-prev::after {
display: none;
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-button-next {
right: 0;
width: 32px;
height: 32px;
background: url("/assets/renewal2023/img/ico/ico-arrow-next2.png") no-repeat center/14px auto;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-card-wrap .swiper-button-next {
background-size: 20px;
}
}
.page-textBook .base-content-wrap .sec-card-wrap .swiper-button-next::after {
display: none;
}
.page-textBook .base-content-wrap .sec-test-wrap {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-test-wrap {
gap: 40px;
}
}
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm {
overflow: hidden;
padding: 16px;
background: #fff;
border: 1px solid #dddddd;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm {
padding: 0;
border: none;
}
}
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm .test-top h3 {
font-size: 18px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm .test-top h3 {
padding: 13px 40px;
background: #e0e7ec;
}
}
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm .test-bottom {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 16px;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm .test-bottom {
flex-direction: row;
flex-wrap: wrap;
gap: 0;
padding: 10px;
}
}
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm .test-bottom .btn-group {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm .test-bottom .btn-group {
flex: 0 0 50%;
justify-content: center;
padding: 10px 0;
}
}
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm .test-bottom .btn-group h4 {
flex: 1;
font-size: 16px;
font-weight: 400;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm .test-bottom .btn-group h4 {
flex: none;
padding: 0 24px;
}
}
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm .test-bottom .btn-group .btn-test::before {
content: "";
width: 20px;
height: 20px;
background: url("/assets/renewal2023/img/ico/ico-download-green.png") no-repeat center/16px auto;
}
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm .test-bottom .btn-group .btn-answer::before {
content: "";
width: 20px;
height: 20px;
background: url("/assets/renewal2023/img/ico/ico-download-purple.png") no-repeat center/16px auto;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm .test-bottom .btn-group:nth-of-type(2n-1) {
border-right: 1px dashed #dddddd;
}
}
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm.itm {
margin-top: 16px;
}
@media (min-width: 801px) {
.page-textBook .base-content-wrap .sec-test-wrap .test-lst .itm.itm {
margin-top: 40px;
}
}
.page-textBook .text-book12-wrap {
background: #f4f8fb;
}
.page-textBook .text-book12-wrap .sec-tit p {
margin-left: auto;
font-size: 14px;
font-weight: 400;
color: #666666;
}
@media (min-width: 801px) {
.page-textBook .text-book12-wrap .sec-tit p {
font-size: 16px;
}
}
.page-textBook .text-book12-wrap .sec-tit p span {
font-weight: 700;
}
.page-textBook .text-book12-wrap .sec-tit p .total {
color: #121212;
}
.page-textBook .text-book12-wrap .sec-tit p .crt {
color: #f04d69;
}
.page-textBook .plus-book-wrap .sec-tit::before {
background: url("/assets/renewal2023/img/study/sec-tit-crt2.png") no-repeat center/cover;
}
.page-textBook .level-up-wrap {
background: #f4f8fb;
}
.page-textBook .level-up-wrap .sec-tit::before {
background: url("/assets/renewal2023/img/study/sec-tit-crt3.png") no-repeat center/cover;
}
.page-textBook .text-book36-wrap {
background: #f4f8fb;
}
.page-textBook .text-book36-wrap .btn-play {
margin: 0 auto;
}
.page-textBook .text-book36-wrap .btn-play::before {
content: "";
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.page-textBook .text-book36-wrap .btn-play.type-will {
border: 1px solid #79d1c7;
}
.page-textBook .text-book36-wrap .btn-play.type-will::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-play-will.png");
}
.page-textBook .text-book36-wrap .btn-play.type-ing {
border: 1px solid #f3b3d1;
}
.page-textBook .text-book36-wrap .btn-play.type-ing::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-play-ing.png");
}
.page-textBook .text-book36-wrap .btn-play.type-did {
border: 1px solid #01416c;
}
.page-textBook .text-book36-wrap .btn-play.type-did::before {
background-image: url("/assets/renewal2023/img/mystudy/ico-play-did.png");
}
.page-textBook .text-book36-wrap .btn-download {
margin: 0 auto;
background: #f4f8fb;
border: 1px solid #aac0ce;
}
.page-textBook .text-book36-wrap .btn-download::before {
background-image: url("/assets/renewal2023/img/ico/ico-download-navy.png");
}
.page-textBook .text-book36-wrap .m-only .textbook-lst .itm + .itm {
margin-top: 20px;
}
.page-textBook .text-book36-wrap .m-only .textbook-lst .itm .tit-group {
padding: 8px 20px;
background: #01416c;
line-height: 150%;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.page-textBook .text-book36-wrap .m-only .textbook-lst .itm .desc-group {
display: table-row;
background: #fff;
color: #666666;
}
.page-textBook .text-book36-wrap .m-only .textbook-lst .itm .desc-group .col {
display: table-cell;
align-content: center;
padding: 10px;
border-bottom: 1px solid #dddddd;
}
.page-textBook .text-book36-wrap .m-only .textbook-lst .itm .desc-group .col + .col {
border-left: 1px solid #dddddd;
}
.page-textBook .text-book36-wrap .m-only .textbook-lst .itm .desc-group .col .btns {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 124px;
text-align: center;
}
/* =============================================================
보충학습실
============================================================= */
.page-supple .lbr-wrap .tab-wrap {
border-bottom: 1px solid #79d1c7;
}
.page-readingArgTopList .visual-wrap {
display: flex;
gap: 135px;
}
.page-readingArgTopList .visual-wrap .con-wrap {
flex: 1;
}
.page-readingArgTopList .visual-wrap .con-wrap .row + .row {
margin-top: 80px;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .tit {
margin-bottom: 20px;
line-height: 114%;
font-size: 28px;
font-weight: 700;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm {
flex: 0 0 160px;
min-width: 0;
height: 200px;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm > a {
position: relative;
height: 100%;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm > a::before {
display: none;
content: "e북 보기";
position: absolute;
left: 19%;
bottom: 0;
z-index: 3;
width: fit-content;
height: 36px;
line-height: 36px;
padding-left: 44px;
background: url("/assets/renewal2023/img/ico/ico-fill-ebook.png") no-repeat left center/36px auto;
font-size: 16px;
font-weight: 700;
color: #ffffff;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm > a:hover::before {
display: block;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm > a:hover .img::before, .page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm > a:hover .img::after {
display: block;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm > a .img {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
border-radius: 20px;
box-shadow: 0px 4px 8px rgba(12, 50, 75, 0.16);
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm > a .img > img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm > a .img::before {
display: none;
content: "";
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm > a .img::after {
display: none;
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
height: 36px;
background: #f04d69;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm > a .desc {
display: none;
margin-top: 20px;
font-size: 20px;
color: #666666;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm:first-of-type {
flex: 0 0 280px;
margin-right: 24px;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm:first-of-type > a {
height: 350px;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm:first-of-type > a::before {
left: 50%;
bottom: 1px;
transform: translateX(-50%);
height: 64px;
background-size: 48px auto;
line-height: 64px;
padding-left: 56px;
font-size: 20px;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm:first-of-type > a .img::after {
height: 64px;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm:first-of-type > a .desc {
display: block;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .ebook-lst .itm:nth-of-type(4) {
margin-left: 324px;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm {
flex: 1;
min-width: 0;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm > a:hover .img::before, .page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm > a:hover .img::after {
display: block;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm .img {
overflow: hidden;
position: relative;
width: 148px;
height: 148px;
border-radius: 100%;
box-shadow: 0px 4px 8px rgba(12, 50, 75, 0.16);
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm .img > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm .img::before {
display: none;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm .img::after {
display: none;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
background: url("/assets/renewal2023/img/ico/ico-play-circle-purple.png") no-repeat center/cover;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm .desc {
text-align: center;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm .desc dd,
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm .desc dt {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm .desc dd {
margin: 16px 0 4px;
line-height: 128%;
font-size: 14px;
color: #666666;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm .desc dt {
line-height: 150%;
font-size: 16px;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm.type-play .img::after {
background: url("/assets/renewal2023/img/ico/ico-play-circle-purple.png") no-repeat center/cover;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm.type-ebook .img::after {
background: url("/assets/renewal2023/img/ico/ico-ebook-circle.png") no-repeat center/cover;
}
.page-readingArgTopList .visual-wrap .con-wrap .row .vod-lst .itm.type-audio .img::after {
background: url("/assets/renewal2023/img/ico/ico-headset-circle.png") no-repeat center/cover;
}
.page-readingArgTopList .visual-wrap .menu-wrap {
flex-shrink: 0;
width: 400px;
height: fit-content;
margin-top: -50px;
background: #f4f8fb;
border-bottom-right-radius: 100px;
}
.page-readingArgTopList .visual-wrap .menu-wrap .menu-lst {
display: flex;
flex-wrap: wrap;
}
.page-readingArgTopList .visual-wrap .menu-wrap .menu-lst .itm {
flex: 0 0 50%;
border-bottom: 1px dashed #cccccc;
text-align: center;
}
.page-readingArgTopList .visual-wrap .menu-wrap .menu-lst .itm > a {
padding: 30px 0;
}
.page-readingArgTopList .visual-wrap .menu-wrap .menu-lst .itm .img {
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
margin: 0 auto;
background: #ffffff;
border-radius: 100%;
}
.page-readingArgTopList .visual-wrap .menu-wrap .menu-lst .itm .img > img {
width: 88px;
height: auto;
}
.page-readingArgTopList .visual-wrap .menu-wrap .menu-lst .itm .img + span {
margin-top: 10px;
}
.page-readingArgTopList .visual-wrap .menu-wrap .menu-lst .itm:nth-of-type(2n) {
border-left: 1px dashed #cccccc;
}
.page-readingArgTopList .visual-wrap .menu-wrap .menu-lst .itm:last-of-type {
flex: 2;
border-bottom: none;
}
.page-readingArgTopList .visual-wrap .menu-wrap .menu-lst .itm:last-of-type > a {
padding: 50px 0 0 0;
}
.page-readingArgTopList .visual-wrap .menu-wrap .menu-lst .itm:last-of-type > a .img {
width: 100%;
height: 164px;
background: none;
}
.page-readingArgTopList .visual-wrap .menu-wrap .menu-lst .itm:last-of-type > a .img > img {
width: 200px;
}
.page-reading_lst .base-tab.type-depth3 {
margin-bottom: 64px;
}
.page-reading_lst .lbr-wrap .tab-wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
.page-reading_lst .lbr-wrap .tab-wrap .btn-home::before {
content: "";
display: inline-block;
width: 18px;
height: 20px;
background: url("/assets/renewal2023/img/ico/ico-home.png") no-repeat center/18px auto;
}
.page-reading_lst .lbr-wrap .con-wrap {
margin-top: 24px;
}
.page-reading_lst .lbr-wrap .con-wrap .lbr-lst {
display: flex;
flex-wrap: wrap;
row-gap: 40px;
column-gap: 26px;
}
.page-reading_lst .lbr-wrap .con-wrap .lbr-lst .itm {
overflow: hidden;
position: relative;
flex: 0 0 calc(25% - 20px);
max-height: 350px;
border-radius: 20px;
box-shadow: 0px 4px 8px rgba(12, 50, 75, 0.16);
}
.page-reading_lst .lbr-wrap .con-wrap .lbr-lst .itm > a {
width: 100%;
height: 100%;
}
.page-reading_lst .lbr-wrap .con-wrap .lbr-lst .itm .img {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.page-reading_lst .lbr-wrap .con-wrap .lbr-lst .itm .img::before {
display: none;
content: "";
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
.page-reading_lst .lbr-wrap .con-wrap .lbr-lst .itm .img > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-reading_lst .lbr-wrap .con-wrap .lbr-lst .itm.type-ebook > a::before {
display: none;
content: "e북 보기";
position: absolute;
left: 50%;
bottom: 1px;
z-index: 3;
transform: translateX(-50%);
width: fit-content;
height: 64px;
line-height: 64px;
padding-left: 56px;
background: url(/assets/renewal2023/img/ico/ico-fill-ebook.png) no-repeat left center/48px auto;
font-size: 20px;
font-weight: 700;
color: #ffffff;
}
.page-reading_lst .lbr-wrap .con-wrap .lbr-lst .itm.type-ebook .img::after {
display: none;
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
height: 64px;
background: #f04d69;
}
.page-reading_lst .lbr-wrap .con-wrap .lbr-lst .itm.type-ebook:hover > a::before {
display: block;
}
.page-reading_lst .lbr-wrap .con-wrap .lbr-lst .itm.type-play .img::after {
display: none;
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
transform: translate(-50%, -50%);
width: 96px;
height: 96px;
background: url("/assets/renewal2023/img/ico/ico-play-circle-purple.png") no-repeat center/cover;
}
.page-reading_lst .lbr-wrap .con-wrap .lbr-lst .itm.type-audio .img::after {
display: none;
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
transform: translate(-50%, -50%);
width: 96px;
height: 96px;
background: url("/assets/renewal2023/img/ico/ico-headset-circle.png") no-repeat center/cover;
}
.page-reading_lst .lbr-wrap .con-wrap .lbr-lst .itm:hover .img::before, .page-reading_lst .lbr-wrap .con-wrap .lbr-lst .itm:hover .img::after {
display: block;
}
.page-history .con-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.page-history .con-header .tit {
line-height: 133%;
font-size: 24px;
font-weight: 700;
}
.page-history .con-header .btn-today {
min-height: 40px;
padding: 5px 20px 6px 48px;
background: url("/assets/renewal2023/img/ico/ico-calendar-green.png") no-repeat left 20px center/24px auto;
border: 1px solid #00ab93;
border-radius: 999px;
font-size: 18px;
}
.page-history .con-body .calendar {
border-top: 2px solid #333333;
border-bottom: 1px solid #dddddd;
}
.page-history .con-body .calendar tr + tr {
border-top: 1px solid #dddddd;
}
.page-history .con-body .calendar thead {
position: relative;
border-bottom: 4px solid #f4f8fb;
}
.page-history .con-body .calendar thead::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: #333333;
}
.page-history .con-body .calendar thead th {
padding: 8px;
line-height: 150%;
font-size: 18px;
font-weight: 400;
}
.page-history .con-body .calendar thead th + th {
border-left: 1px solid #dddddd;
}
.page-history .con-body .calendar thead th:first-of-type {
color: #f04d69;
}
.page-history .con-body .calendar tbody td {
height: 330px;
vertical-align: top;
}
.page-history .con-body .calendar tbody td + td {
border-left: 1px solid #dddddd;
}
.page-history .con-body .calendar tbody td:first-of-type .date {
color: #f04d69;
}
.page-history .con-body .calendar tbody td > div {
height: 100%;
padding: 10px;
border: 2px solid transparent;
}
.page-history .con-body .calendar tbody td > div .date {
display: block;
margin: 0 0 10px 10px;
line-height: 150%;
font-size: 16px;
font-weight: 400;
color: #666666;
}
.page-history .con-body .calendar tbody td > div .image > img {
width: 150px;
height: 115px;
}
.page-history .con-body .calendar tbody td > div .lst li > a {
position: relative;
margin-top: 10px;
padding: 6px 10px 6px 22px;
background: #f5f5f5;
border-radius: 8px;
line-height: 150%;
font-size: 16px;
font-weight: 400;
color: #777777;
}
.page-history .con-body .calendar tbody td > div .lst li > a::before {
content: "";
position: absolute;
top: 14px;
left: 10px;
width: 8px;
height: 8px;
background: url("/assets/renewal2023/img/ico/ico-arrow-mini.png") no-repeat center/cover;
}
.page-history .con-body .calendar tbody td > div .lst li > a:hover {
background: #fff6db;
color: #121212;
}
.page-history .con-body .calendar tbody td > div .lst li.on > a {
background: #fff6db;
color: #121212;
}
.page-history .con-body .calendar tbody td .disable {
background: #f5f5f5;
}
.page-history .con-body .calendar tbody td:hover > div,
.page-history .con-body .calendar tbody td .today {
border: 2px solid #8165fe;
}
.page-history_lst .tab-wrap {
margin-bottom: 60px;
}
.page-history_view .con-header .btns {
display: flex;
gap: 10px;
}
.page-history_view .con-header .btns .btn-arrow {
width: 36px;
height: 36px;
border: 1px solid #dddddd;
border-radius: 10px;
}
.page-history_view .con-header .btns .btn-prev {
background: url(/assets/renewal2023/img/ico/ico-arrow-prev2.png) no-repeat center/11px auto;
}
.page-history_view .con-header .btns .btn-next {
background: url(/assets/renewal2023/img/ico/ico-arrow-next2.png) no-repeat center/11px auto;
}
.page-history_view .con-header .btns .btn-back {
margin-left: 10px;
}
.page-history_view .con-header .btns .btn-back::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url(/assets/renewal2023/img/ico/ico-calendar-white2.png) no-repeat center/13px auto;
}
.page-history_view .con-body .calendar tbody td {
height: 260px;
}
.page-history_view .con-body .calendar tbody td:hover > div,
.page-history_view .con-body .calendar tbody td .today {
position: relative;
}
.page-history_view .con-body .calendar tbody td:hover > div::after,
.page-history_view .con-body .calendar tbody td .today::after {
content: "";
position: absolute;
left: 50%;
bottom: -21px;
transform: translateX(-50%);
width: 1px;
height: 1px;
border: 10px solid #8165fe; /* border굵기로 삼각형 크기 조절 */
border-color: #8165fe transparent transparent transparent;
}
.page-history_view .con-body .base-board-view {
margin-top: 73px;
}
.page-history_view .con-body .base-board-view .row-desc .col {
border-bottom: 1px dashed #dddddd;
}
.page-history_view .con-body .base-board-view .row-desc .col dt {
margin: 20px 0;
font-size: 20px;
font-weight: 700;
color: #8165fe;
}
.page-history_view .con-body .base-board-view .row-desc .col dt::before {
content: "";
display: inline-block;
width: 18px;
height: 20px;
margin: 0px 8px -3px 0px;
background: url("/assets/renewal2023/img/ico/ico-calendar-purple.png") no-repeat center/cover;
}
.page-history_view .con-body .base-board-view .row-desc .col dd {
line-height: 150%;
font-size: 16px;
}
.page-history_view .con-body .base-board-view .row-cont {
line-height: 150%;
font-size: 16px;
}
.page-history_view .con-body .base-board-view .row-cont * {
font-family: "Noto Sans KR", sans-serif !important;
}
.page-history_view .con-footer > ul {
display: flex;
gap: 16px;
justify-content: end;
margin-top: 20px;
}
.page-history_view .con-footer > ul .btn-back::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url(/assets/renewal2023/img/ico/ico-calendar-white2.png) no-repeat center/15px auto;
}
.page-history_view-print-area.base-board-view {
display: flex;
flex-direction: column;
gap: 0;
box-shadow: none;
}
.page-history_view-print-area.base-board-view .view-card-top {
overflow: hidden;
border: 1px solid #cccccc;
border-radius: 20px;
box-shadow: none;
}
.page-history_view-print-area.base-board-view .view-card-top .row-tit {
line-height: 150%;
font-size: 16px;
font-weight: 700;
padding: 13px 40px;
background-color: #cccccc !important;
-webkit-print-color-adjust: exact;
font-size: 18px;
color: #121212;
}
.page-history_view-print-area.base-board-view .view-card-top .row-tit .tit {
background-color: #cccccc !important;
-webkit-print-color-adjust: exact;
}
.page-history_view-print-area.base-board-view .view-card-top .row-desc {
padding: 0 40px;
}
.page-history_view-print-area.base-board-view .view-card-top .row-desc .col {
padding-bottom: 10px;
border-bottom: 1px dashed #dddddd !important;
-webkit-print-color-adjust: exact;
}
.page-history_view-print-area.base-board-view .view-card-top .row-desc .col dt {
margin: 20px 0;
font-size: 20px;
font-weight: 700;
color: #8165fe;
}
.page-history_view-print-area.base-board-view .view-card-top .row-desc .col dt::before {
content: "";
display: inline-block;
width: 18px;
height: 20px;
margin: 0px 8px -3px 0px;
background: url("/assets/renewal2023/img/ico/ico-calendar-purple.png") no-repeat center/cover !important;
-webkit-print-color-adjust: exact;
}
.page-history_view-print-area.base-board-view .view-card-top .row-desc .col dd {
line-height: 150%;
font-size: 16px;
}
.page-history_view-print-area.base-board-view .view-card-top .row-cont {
padding: 20px 40px;
background-color: #ffffff !important;
-webkit-print-color-adjust: exact;
line-height: 150%;
font-size: 16px;
color: #666666 !important;
-webkit-print-color-adjust: exact;
}
.page-history_view-print-area.base-board-view .view-card-top .row-cont * {
font-family: "Noto Sans KR", sans-serif !important;
}
.page-debate .box-debate-date {
display: flex;
justify-content: flex-start;
align-items: flex-end;
gap: 20px;
width: 100%;
margin-bottom: 40px;
}
.page-debate .box-debate-date .txt-date {
font-size: 40px;
}
.page-debate .box-debate-date .txt-term {
display: flex;
align-items: center;
gap: 4px;
height: 40px;
font-size: 18px;
}
.page-debate .box-debate-date .txt-term::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-calendar-green.png") no-repeat center/cover;
}
.page-debate .box-debate {
overflow: hidden;
background: #fafdff url("/assets/renewal2023/img/supple/debate-bg.png") no-repeat center top/100% auto;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
.page-debate .box-debate .tit {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 81px;
padding: 23px;
background: #01416c;
line-height: 133%;
text-align: center;
font-size: 24px;
font-weight: 700;
color: #ffffff;
}
.page-debate .box-debate .tit .tag {
display: block;
height: 23px;
padding: 0 12px;
background: #f3b3d1;
border-radius: 999px;
font-size: 14px;
}
.page-debate .box-debate .tit .tag.end {
background: #8165fe;
}
.page-debate .box-debate .con {
padding: 0 72px 40px 72px;
}
.page-debate .box-debate .con .img {
margin: 0 auto 40px auto;
}
.page-debate .box-debate .con .img img {
width: 100%;
}
.page-debate .box-debate .con .txt {
line-height: 150%;
font-size: 16px;
color: #666666;
}
.page-debate .box-vote {
position: relative;
display: flex;
gap: 100px;
margin: 35px 0;
}
.page-debate .box-vote li {
flex: 1;
}
.page-debate .box-vote li > button {
display: block;
width: 100%;
height: 114px;
padding: 0 170px 0 38px;
background-color: #ebebeb;
border-radius: 10px;
text-align: left;
font-size: 18px;
font-weight: 700;
}
.page-debate .box-vote li > button.btn-yes {
background: #ebebeb url("/assets/renewal2023/img/supple/debate-o.png") no-repeat right 38px center/auto 100%;
}
.page-debate .box-vote li > button.btn-no {
background: #ebebeb url("/assets/renewal2023/img/supple/debate-x.png") no-repeat right 38px center/auto 100%;
}
.page-debate .box-vote li > button:hover {
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
.page-debate .box-vote li > button.selected {
background-color: #cee8ff;
border: 3px solid #4f60ff;
}
.page-debate .box-vote li > button.won {
position: relative;
background-color: #cee8ff;
border: 3px solid #4f60ff;
}
.page-debate .box-vote li > button.won::before {
content: "";
position: absolute;
top: -45px;
left: -40px;
width: 166px;
height: 105px;
background: url("/assets/renewal2023/img/supple/debate-win.png") no-repeat center/cover;
}
.page-debate .box-vote::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translate(-0.5px, -0.5px);
width: 73px;
height: 59px;
background: url(/assets/renewal2023/img/supple/debate-vs.png) no-repeat center/cover;
}
.page-debate .box-textarea .base-textarea {
height: 340px;
}
.page-debate .box-textarea .note {
margin-top: 16px;
line-height: 200%;
font-size: 16px;
color: #999999;
}
.page-debate .box-textarea .btn-submit {
margin: 0 auto;
}
.page-debate .box-comment .comment-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: 100px;
border-bottom: 2px solid #79d1c7;
}
.page-debate .box-comment .comment-top .base-tab {
border-bottom: none;
}
.page-debate .box-comment .comment-top .base-tab .tab__item__text {
padding: 0 20px;
}
.page-debate .box-comment .comment-top .tab-order .tab__item {
padding: 12px 0;
}
.page-debate .box-comment .comment-top .tab-order .tab__item__text {
font-size: 16px;
}
.page-debate .box-comment .comment-mid .comment-lst .itm {
padding: 20px;
border-bottom: 1px dashed #cccccc;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .top {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
color: #666666;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .top .yes-img {
width: 30px;
height: 30px;
background: url("/assets/renewal2023/img/ico/ico-poll-yes.png") no-repeat center/cover;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .top .no-img {
width: 25px;
height: 25px;
background: url("/assets/renewal2023/img/ico/ico-poll-no.png") no-repeat center/cover;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .top .user-img {
overflow: hidden;
width: 40px;
height: 40px;
background: #f5f5f5;
border-radius: 100%;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .top .user-img > img {
width: 100%;
height: auto;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .top .debate-date {
margin-left: 12px;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .top .btn-del {
margin-left: auto;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .mid {
padding: 20px 0;
font-size: 16px;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .bottom .btn-good-wrap {
position: relative;
width: fit-content;
margin-left: auto;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .bottom .btn-good-wrap .btn-good {
border: 1px solid #00ab93;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .bottom .btn-good-wrap .btn-good::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url(/assets/renewal2023/img/ico/ico-good.png) no-repeat center/16px auto;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .bottom .btn-good-wrap .layer-num {
cursor: pointer;
visibility: hidden;
opacity: 0;
position: absolute;
top: -8px;
right: 2px;
padding: 3px 5px;
background: #f04d69;
border-radius: 999px;
line-height: 1;
font-size: 10px;
color: #ffffff;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .bottom .btn-good-wrap .layer-txt {
cursor: pointer;
visibility: hidden;
opacity: 0;
position: absolute;
top: 39px;
width: fit-content;
height: auto;
padding: 16px 20px;
background: #fff6db;
border: 1px solid #ffd349;
border-radius: 10px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
font-size: 14px;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .bottom .btn-good-wrap .layer-txt::before {
position: absolute;
top: -10px;
content: "";
width: 13px;
height: 10px;
background: url(/assets/renewal2023/img/ico/ico-layer-arrow.png) no-repeat center/cover;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .bottom .btn-good-wrap.clickOn .btn-good {
background: #00ab93;
color: #ffffff;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .bottom .btn-good-wrap.clickOn .btn-good::before {
background: url(/assets/renewal2023/img/ico/ico-good-white.png) no-repeat center/16px auto;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .bottom .btn-good-wrap.clickOn .layer-num,
.page-debate .box-comment .comment-mid .comment-lst .itm .bottom .btn-good-wrap.clickOn .layer-txt {
animation-name: fadeInOut;
animation-duration: 3s;
}
.page-debate .box-comment .comment-mid .comment-lst .itm .bottom .btn-good-wrap.clickOff .layer-num,
.page-debate .box-comment .comment-mid .comment-lst .itm .bottom .btn-good-wrap.clickOff .layer-txt {
animation-name: fadeInOut;
animation-duration: 3s;
}
.page-debate .box-comment .comment-bottom .base-paging {
margin-top: 40px;
}
.page-debate .box-best-comment {
display: flex;
background: linear-gradient(178deg, #00ab93 47.86%, #9747ff 168.85%);
border-radius: 20px;
border: 1px solid #00ab93;
box-shadow: 0px 4px 8px rgba(12, 50, 75, 0.16);
}
.page-debate .box-best-comment .best-user {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
flex-shrink: 0;
width: 306px;
padding: 13px;
color: #ffffff;
}
.page-debate .box-best-comment .best-user > p {
position: relative;
z-index: 2;
width: fit-content;
font-size: 18px;
font-weight: 700;
}
.page-debate .box-best-comment .best-user > p::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 8px;
background-color: #8165fe;
opacity: 0.4;
}
.page-debate .box-best-comment .best-user .user-info {
display: flex;
align-items: center;
gap: 8px;
}
.page-debate .box-best-comment .best-user .user-info .user-img {
overflow: hidden;
flex-shrink: 0;
width: 40px;
height: 40px;
background: #f5f5f5;
border-radius: 100%;
}
.page-debate .box-best-comment .best-user .user-info .user-img > img {
width: 100%;
height: auto;
}
.page-debate .box-best-comment .best-user .user-info .user-id {
flex: 1;
font-size: 24px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-debate .box-best-comment .best-txt {
flex: 1;
display: flex;
align-items: center;
gap: 60px;
padding: 25px 60px;
background: #ffffff;
border-radius: 20px;
}
.page-debate .box-best-comment .best-txt dt {
position: relative;
z-index: 2;
flex-shrink: 0;
font-size: 18px;
font-weight: 700;
}
.page-debate .box-best-comment .best-txt dt::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 8px;
background-color: #8165fe;
opacity: 0.4;
}
.page-debate .box-best-comment .best-txt dd {
line-height: 150%;
font-size: 16px;
}
.page-readingArgWhatIsDebate .info-img-wrap .img {
width: 100%;
}
.page-readingArgWhatIsDebate .info-lst-wrap .tit {
position: relative;
z-index: 2;
padding: 0 0 0 12px;
margin: 68px 0 20px;
line-height: 133%;
font-size: 24px;
font-weight: 700;
}
.page-readingArgWhatIsDebate .info-lst-wrap .tit::before {
content: "";
position: absolute;
top: -4px;
left: 0;
z-index: -1;
width: 28px;
height: 28px;
border-radius: 100%;
background: #79d1c7;
}
.page-readingArgWhatIsDebate .info-lst-wrap .info-lst {
display: flex;
flex-wrap: wrap;
row-gap: 40px;
column-gap: 27px;
}
.page-readingArgWhatIsDebate .info-lst-wrap .info-lst .itm {
flex: 0 0 calc(33% - 14px);
}
.page-readingArgWhatIsDebate .info-lst-wrap .info-lst .itm .img {
overflow: hidden;
border-radius: 20px;
box-shadow: 0px 4px 8px rgba(12, 50, 75, 0.16);
}
.page-readingArgWhatIsDebate .info-lst-wrap .info-lst .itm .img img {
width: 100%;
}
.page-readingArgWhatIsDebate .info-lst-wrap .info-lst .itm .desc {
margin-top: 20px;
text-align: center;
font-size: 20px;
font-weight: 700;
}
.page-talkSchool_lst .con-body .base-table {
margin-top: 48px;
}
.page-talkSchool_lst .con-body .base-table .tag {
display: inline-block;
padding: 2px 20px;
background: #01416c;
border-radius: 999px;
color: #ffffff;
}
.page-talkSchool_lst .con-body .base-table .tag:nth-of-type(2) {
background-color: #f04d69;
}
.page-talkSchool_lst .con-body .base-table .tag + .tag {
margin-left: 15px;
}
.page-talkSchool_lst .con-body .base-table .tag.won {
border: 5px solid #9af995;
}
.page-talkSchool_lst .con-body .base-table .user-info {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.page-talkSchool_lst .con-body .base-table .user-info .user-img {
overflow: hidden;
flex-shrink: 0;
width: 40px;
height: 40px;
background: #f5f5f5;
border-radius: 100%;
}
.page-talkSchool_lst .con-body .base-table .user-info .user-img > img {
width: 100%;
height: auto;
}
.page-talkSchool_lst .con-body .base-table .user-info .user-id {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-talkSchool_lst .con-body .base-paging {
margin-top: 40px;
}
.page-talkSchool_view .con-header .box-debate-date .btn-primary {
margin-left: auto;
}
.page-talkSchool_view .con-body .box-vote li > button {
cursor: default;
}
.page-talkSchool_view .con-body .result-wrap {
margin-top: 40px;
background-image: url("/assets/renewal2023/img/supple/debate-prev-bg.png");
}
.page-talkSchool_view .con-body .result-wrap .con {
padding-top: 24px;
}
.page-talkSchool_view .con-body .result-wrap .con .total-num {
text-align: right;
font-size: 18px;
}
@media (max-width: 801px) {
.page-english {
background: #f4f8fb;
}
}
.page-english .con-header {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
margin-bottom: 20px;
}
@media (min-width: 801px) {
.page-english .con-header {
flex-direction: row;
justify-content: flex-end;
margin-bottom: 40px;
}
}
.page-english .con-header .col {
display: flex;
gap: 8px;
}
.page-english .base-paging {
margin-top: 40px;
}
@media (min-width: 801px) {
.page-engNaesinPre .con-header {
justify-content: space-between;
}
}
.page-engNaesinPre .con-header .btn-sm.type-download::before {
background-image: url("/assets/renewal2023/img/ico/ico-download.png");
}
@media (min-width: 801px) {
.page-engNaesinPre .con-header .base-select-wrap {
margin-left: auto;
}
}
.page-engNaesinPre .con-body .learning-lst {
display: flex;
flex-direction: column;
}
@media (min-width: 801px) {
.page-engNaesinPre .con-body .learning-lst {
flex-direction: row;
flex-wrap: wrap;
gap: 40px;
}
}
.page-engNaesinPre .con-body .learning-lst .itm {
min-width: 0;
padding: 16px 0;
border-bottom: 1px solid #dddddd;
}
@media (min-width: 801px) {
.page-engNaesinPre .con-body .learning-lst .itm {
flex: 0 0 calc(25% - 30px);
padding: 0;
border: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.page-engNaesinPre .con-body .learning-lst .itm > a .img {
position: relative;
}
@media (min-width: 801px) {
.page-engNaesinPre .con-body .learning-lst .itm > a .img {
height: 180px;
}
}
.page-engNaesinPre .con-body .learning-lst .itm > a .img::before {
display: none;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.page-engNaesinPre .con-body .learning-lst .itm > a .img::after {
display: none;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
background: url("/assets/renewal2023/img/ico/ico-play.png") no-repeat center/cover;
}
.page-engNaesinPre .con-body .learning-lst .itm > a .img > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-engNaesinPre .con-body .learning-lst .itm > a .desc {
margin: 8px 0 17px 0;
line-height: 150%;
font-size: 16px;
}
.page-engNaesinPre .con-body .learning-lst .itm > a:hover .img::before, .page-engNaesinPre .con-body .learning-lst .itm > a:hover .img::after {
display: block;
}
.page-engNaesinPre .con-body .learning-lst .itm .btns {
display: flex;
gap: 8px;
}
.page-engNaesinPre .con-body .learning-lst .itm .btns .btn-total {
background-color: #f3b3d1;
}
.page-basicGrammar .con-header .select-menu {
width: 100%;
}
.page-basicGrammar .con-header .select-menu .options {
max-width: max-content;
min-width: max-content;
}
.page-basicGrammar .con-body .learning-lst {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 801px) {
.page-basicGrammar .con-body .learning-lst {
flex-direction: row;
flex-wrap: wrap;
column-gap: 32px;
row-gap: 40px;
}
}
.page-basicGrammar .con-body .learning-lst .itm {
flex: 0 0 calc(50% - 16px);
}
.page-basicGrammar .con-body .learning-lst .itm dl {
overflow: hidden;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-basicGrammar .con-body .learning-lst .itm dl {
border: none;
}
}
.page-basicGrammar .con-body .learning-lst .itm dl dt {
padding: 7px 24px;
border-bottom: 1px solid #dddddd;
line-height: 150%;
font-size: 16px;
font-weight: 700;
color: #01416c;
}
@media (min-width: 801px) {
.page-basicGrammar .con-body .learning-lst .itm dl dt {
padding: 12px 30px;
background: #e0e7ec;
font-size: 18px;
color: #121212;
}
}
.page-basicGrammar .con-body .learning-lst .itm dl dd {
padding: 0 24px 16px 24px;
}
@media (min-width: 801px) {
.page-basicGrammar .con-body .learning-lst .itm dl dd {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 24px 58px;
}
}
.page-basicGrammar .con-body .learning-lst .itm dl dd .desc {
margin: 9px 0 12px;
line-height: 150%;
font-size: 16px;
}
@media (min-width: 801px) {
.page-basicGrammar .con-body .learning-lst .itm dl dd .desc {
flex: 1;
margin: 0;
text-align: right;
}
}
.page-basicGrammar .con-body .learning-lst .itm dl dd .btns {
display: flex;
gap: 8px;
}
@media (min-width: 801px) {
.page-basicGrammar .con-body .learning-lst .itm dl dd .btns {
margin-left: 25px;
}
}
/* =============================================================
상품안내
============================================================= */
.wrap.sub-container:has(.page-productguide) .location {
display: none;
}
.page-productguide {
padding-top: 56px;
}
@media (min-width: 801px) {
.page-productguide {
padding-top: 0;
}
}
.page-productguide img {
width: 100%;
}
.page-productguide .inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: 801px) {
.page-productguide .inner {
padding: 0;
}
}
.page-productguide .sec-visual {
padding: 40px 0;
background-color: #fff;
}
@media (min-width: 801px) {
.page-productguide .sec-visual {
height: 526px;
padding: 70px 0 60px;
}
}
.page-productguide .sec-visual > .inner {
position: relative;
}
.page-productguide .sec-visual > .inner::after {
content: "";
position: absolute;
bottom: -70px;
right: 36px;
width: 132px;
height: 122px;
background: url("/assets/renewal2023/img/productInfo/ischool/visual.png") no-repeat center/cover;
}
@media (min-width: 801px) {
.page-productguide .sec-visual > .inner::after {
bottom: auto;
top: 30px;
right: -60px;
width: 513px;
height: 474px;
}
}
.page-productguide .sec-visual .tit-wrap {
margin-bottom: 18px;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tit-wrap {
margin-bottom: 100px;
}
}
.page-productguide .sec-visual .tit-wrap > img {
margin: 0 auto;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tit-wrap > img {
margin: 0;
}
}
.page-productguide .sec-visual .tit-wrap .m-only {
max-width: 400px;
}
.page-productguide .sec-visual .tit-wrap .pc-only {
width: 635px;
}
.page-productguide .sec-visual .tab-wrap {
position: relative;
z-index: 9;
margin: 0 11px;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap {
margin: 0;
}
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm {
flex: 0 0 calc(50% - 5px);
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm {
flex: 0;
min-width: 164px;
}
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm > a {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
height: 100%;
padding: 10px;
background: #00ab93;
border-radius: 10px;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm > a {
height: auto;
padding: 14px;
}
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm > a::before {
content: "";
display: block;
width: 48px;
height: 48px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm > a > span {
line-height: 128%;
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm > a > span {
line-height: 144%;
font-size: 18px;
}
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.tab-itm01 > a::before {
background-image: url("/assets/renewal2023/img/productInfo/tab-01.png");
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.tab-itm02 > a::before {
background-image: url("/assets/renewal2023/img/productInfo/tab-02.png");
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.tab-itm03 > a::before {
background-image: url("/assets/renewal2023/img/productInfo/tab-03.png");
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.tab-itm04 > a::before {
background-image: url("/assets/renewal2023/img/productInfo/tab-04.png");
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.tab-itm05 > a::before {
background-image: url("/assets/renewal2023/img/productInfo/tab-05.png");
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.on {
margin-top: -20px;
}
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.on > a {
background: #ffffff;
box-shadow: 0px 2px 8px 0px rgba(12, 50, 75, 0.16);
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.on > a > span {
color: #121212;
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.on.tab-itm01 > a::before {
background-image: url("/assets/renewal2023/img/productInfo/on-tab-01.png");
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.on.tab-itm02 > a::before {
background-image: url("/assets/renewal2023/img/productInfo/on-tab-02.png");
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.on.tab-itm03 > a::before {
background-image: url("/assets/renewal2023/img/productInfo/on-tab-03.png");
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.on.tab-itm04 > a::before {
background-image: url("/assets/renewal2023/img/productInfo/on-tab-04.png");
}
.page-productguide .sec-visual .tab-wrap .tab-lst.type-depth1 .tab-itm.on.tab-itm05 > a::before {
background-image: url("/assets/renewal2023/img/productInfo/on-tab-05.png");
}
.page-productguide .sec-visual .tab-wrap.fixed {
position: fixed;
top: 56px;
left: 0;
right: 0;
z-index: 10;
margin: 0;
background: #00ab93;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap.fixed {
top: 66px;
}
}
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 {
overflow-x: auto;
flex-wrap: nowrap;
padding: 0 16px;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 {
overflow: unset;
justify-content: center;
margin: 0;
}
}
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm {
flex: 1;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm {
flex: 0;
}
}
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm > a {
padding: 8px;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm > a {
padding: 14px;
}
}
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm > a::before {
display: none;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm > a::before {
display: block;
}
}
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm > a > span {
white-space: nowrap;
}
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm > a > span br {
display: none;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm > a > span br {
display: block;
}
}
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm.on {
margin-top: 6px;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm.on {
margin-top: 0;
}
}
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm.on > a {
border-radius: 10px 10px 0 0;
}
@media (min-width: 801px) {
.page-productguide .sec-visual .tab-wrap.fixed .tab-lst.type-depth1 .tab-itm.on > a {
margin-top: 10px;
padding: 9px;
}
}
.page-productguide .sec-info {
background: #f5f5f5;
padding: 50px 0;
text-align: center;
}
@media (min-width: 801px) {
.page-productguide .sec-info {
padding: 60px 0;
}
}
.page-productguide .sec-info .target-wrap {
margin: 0 0 10px 0;
}
@media (min-width: 801px) {
.page-productguide .sec-info .target-wrap {
margin: 0 0 20px 0;
}
}
.page-productguide .sec-info .desc-wrap {
margin: 0 0 8px 0;
font-size: 16px;
color: #666666;
}
@media (min-width: 801px) {
.page-productguide .sec-info .desc-wrap {
margin: 0 0 16px 0;
line-height: 114%;
font-size: 24px;
}
}
.page-productguide .sec-info .desc-wrap strong {
color: #121212;
}
@media (min-width: 801px) {
.page-productguide .sec-info .desc-wrap strong {
line-height: 114%;
}
}
.page-productguide .sec-info .tit-wrap {
font-size: 33px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-productguide .sec-info .tit-wrap {
line-height: 125%;
font-size: 56px;
}
}
@media (min-width: 801px) {
.page-productguide .sec-info .tit-wrap span {
line-height: 125%;
}
}
@media (min-width: 801px) {
.page-productguide .sec-cont {
padding-top: 40px;
}
}
.page-productguide .sec-cont .tab-wrap {
max-width: 1200px;
margin: 0 auto;
}
.page-productguide .sec-cont .tab-wrap .tab-lst {
display: flex;
flex-wrap: wrap;
}
.page-productguide .sec-cont .tab-wrap .tab-lst .tab-itm {
border-bottom: 1px solid #dddddd;
}
.page-productguide .sec-cont .tab-wrap .tab-lst .tab-itm:first-child {
width: 100%;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .tab-wrap .tab-lst .tab-itm:first-child {
flex: 1;
width: auto;
}
}
.page-productguide .sec-cont .tab-wrap .tab-lst .tab-itm:not(:first-child) {
flex: 0 0 50%;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .tab-wrap .tab-lst .tab-itm:not(:first-child) {
flex: 1;
}
}
.page-productguide .sec-cont .tab-wrap .tab-lst .tab-itm button {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 11px 0;
text-align: center;
font-size: 18px;
color: #777777;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .tab-wrap .tab-lst .tab-itm button {
padding: 14.5px 0;
font-size: 24px;
}
}
.page-productguide .sec-cont .tab-wrap .tab-lst .tab-itm button::after {
display: none;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: #00ab93;
}
.page-productguide .sec-cont .tab-wrap .tab-lst .tab-itm:nth-of-type(2n) {
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .tab-wrap .tab-lst .tab-itm:nth-of-type(2n) {
border: none;
border-bottom: 1px solid #dddddd;
}
}
.page-productguide .sec-cont .tab-wrap .tab-lst .tab-itm.on button {
font-weight: 700;
color: #00ab93;
}
.page-productguide .sec-cont .tab-wrap .tab-lst .tab-itm.on button::after {
display: block;
}
.page-productguide .sec-cont .cont-wrap .cont-lst > .cont {
display: none;
}
.page-productguide .sec-cont .cont-wrap .cont-lst > .cont.on {
display: block;
}
.page-productguide .sec-cont .cont-wrap .cont-sec {
padding: 60px 0 80px;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-sec {
padding: 60px 0 100px;
}
}
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit {
margin-bottom: 20px;
line-height: 128%;
text-align: center;
font-size: 28px;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit {
margin-bottom: 40px;
font-size: 40px;
}
}
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit .top {
display: block;
font-size: 18px;
font-weight: 700;
color: #00ab93;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit .top {
font-size: 24px;
}
}
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit .desc {
margin-top: 10px;
text-align: center;
line-height: 128%;
font-size: 14px;
font-weight: 400;
color: #777777;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit .desc {
text-align: left;
line-height: 144%;
font-size: 18px;
}
}
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit.type-line .line {
position: relative;
z-index: 1;
border: none;
line-height: 114%;
}
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit.type-line .line::after {
content: "";
position: absolute;
left: 0;
bottom: 3px;
z-index: -1;
width: 100%;
height: 8px;
background: #79d1c7;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit.type-line .line::after {
height: 12px;
}
}
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit.type-circle {
font-weight: 700;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit.type-circle {
text-align: left;
}
}
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit.type-circle .top {
margin-bottom: 2px;
font-size: 14px;
font-weight: 400;
color: #121212;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit.type-circle .top {
margin-bottom: 6px;
font-size: 18px;
}
}
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit.type-circle .top > em {
display: inline-block;
margin-left: 6px;
padding: 2px 3px;
font-weight: 700;
border-radius: 100%;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit.type-circle .top > em {
padding: 3px 6px;
}
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-sec .cont-tit.type-circle .desc {
text-align: left;
}
}
.page-productguide .sec-cont .cont-wrap .cont-swiper {
position: relative;
padding-top: 84px;
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper {
margin-top: 20px;
border-radius: 20px;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper {
margin-top: 40px;
}
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper .swiper-slide {
padding: 20px;
background: #ffffff;
border-radius: 20px;
text-align: center;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper .swiper-slide {
padding: 30px;
}
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper .swiper-slide > dl dt {
font-size: 18px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper .swiper-slide > dl dt {
font-size: 24px;
}
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper .swiper-slide > dl dd {
margin: 4px 0 20px;
font-size: 14px;
color: #666666;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper .swiper-slide > dl dd {
margin: 10px 0 30px;
font-size: 18px;
}
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper .swiper-slide > img {
width: auto;
height: 402px;
margin: 0 auto;
}
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-pagination {
display: flex;
justify-content: center;
gap: 20px;
top: 0;
z-index: 8;
bottom: auto;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-pagination {
gap: 12px;
}
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-pagination .swiper-pagination-bullet {
width: 64px;
height: 64px;
margin: 0;
background: transparent;
border: 1px solid #ffffff;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
opacity: 1;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-pagination .swiper-pagination-bullet {
width: 80px;
height: 80px;
}
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-pagination .swiper-pagination-bullet > p {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
font-size: 16px;
color: #ffffff;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-pagination .swiper-pagination-bullet > p {
font-size: 20px;
}
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-pagination .swiper-pagination-bullet > p em {
font-size: 14px;
font-weight: 700;
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-pagination .swiper-pagination-bullet-active {
background: #fff27b;
border: none;
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-pagination .swiper-pagination-bullet-active > p {
font-weight: 700;
color: #8165fe;
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-button {
display: none;
}
@media (min-width: 801px) {
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-button {
display: block;
top: calc(50% + 40px);
width: 80px;
height: 80px;
margin-top: 0;
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-button::after {
display: none;
}
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-button-prev {
left: -80px;
background: url("/assets/renewal2023/img/ico/ico-arrow-prev2-white.png") no-repeat center/30px auto;
}
.page-productguide .sec-cont .cont-wrap .cont-swiper .swiper-button-next {
right: -80px;
background: url("/assets/renewal2023/img/ico/ico-arrow-next2-white.png") no-repeat center/30px auto;
}
.page-productguide .sec-banner {
position: sticky;
bottom: 0;
left: 0;
z-index: 9;
}
.page-productguide .sec-banner .banner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.page-productguide .tag-target {
overflow: hidden;
display: flex;
justify-content: center;
width: fit-content;
margin: 0 auto;
background: #f3b3d1;
border-radius: 20px;
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
@media (min-width: 801px) {
.page-productguide .tag-target {
font-size: 16px;
}
}
.page-productguide .tag-target dt {
padding: 7px 16px;
background: #00ab93;
border-radius: 20px;
}
@media (min-width: 801px) {
.page-productguide .tag-target dt {
padding: 8px 20px;
}
}
.page-productguide .tag-target dd {
padding: 7px 16px 7px 6px;
}
@media (min-width: 801px) {
.page-productguide .tag-target dd {
padding: 8px 25px 8px 10px;
}
}
.page-productguide .btns-samples {
overflow: hidden;
border: 1px solid #00ab93;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-productguide .btns-samples {
display: flex;
}
}
.page-productguide .btns-samples .tit {
display: flex;
flex-direction: column;
padding: 10px;
background: #00ab93;
text-align: center;
color: #ffffff;
}
@media (min-width: 801px) {
.page-productguide .btns-samples .tit {
flex-shrink: 0;
justify-content: center;
gap: 8px;
width: 240px;
padding: 38px 50px;
text-align: left;
}
}
.page-productguide .btns-samples .tit dt {
font-size: 18px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-productguide .btns-samples .tit dt {
background: url("/assets/renewal2023/img/ico/ico-right-arrow-w.png") no-repeat right center/20px auto;
font-size: 24px;
}
}
.page-productguide .btns-samples .tit dd {
font-size: 14px;
}
@media (min-width: 801px) {
.page-productguide .btns-samples .tit dd {
line-height: 150%;
font-size: 16px;
}
}
.page-productguide .btns-samples .row {
padding: 0 14px 10px;
}
@media (min-width: 801px) {
.page-productguide .btns-samples .row {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: calc(100% - 240px);
padding: 0 4px;
}
}
.page-productguide .btns-samples .row .col {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 4px;
padding: 12px 6px;
border-bottom: 1px dashed #dddddd;
}
@media (min-width: 801px) {
.page-productguide .btns-samples .row .col {
flex: 1;
justify-content: flex-start;
align-items: center;
gap: 16px;
padding: 20px 0;
border-top: none;
}
.page-productguide .btns-samples .row .col:nth-child(4), .page-productguide .btns-samples .row .col:nth-child(5), .page-productguide .btns-samples .row .col:nth-child(6) {
border-bottom: none;
}
}
@media (min-width: 801px) {
.page-productguide .btns-samples .row .col:not(:first-child, :nth-child(4)) {
border-left: 1px dashed #dddddd;
}
}
.page-productguide .btns-samples .row .col dt {
display: flex;
gap: 4px;
font-size: 18px;
}
@media (min-width: 801px) {
.page-productguide .btns-samples .row .col dt {
justify-content: center;
gap: 6px;
font-size: 20px;
}
}
.page-productguide .btns-samples .row .col dt::before {
content: "";
display: block;
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.page-productguide .btns-samples .row .col dt.kr::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-kr.png");
}
.page-productguide .btns-samples .row .col dt.math::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-math.png");
}
.page-productguide .btns-samples .row .col dt.total::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-total.png");
}
.page-productguide .btns-samples .row .col dt.literacy::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-literacy.png");
}
.page-productguide .btns-samples .row .col dt.society::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-society.png");
}
.page-productguide .btns-samples .row .col dt.science::before {
background-image: url("/assets/renewal2023/img/common/subject/ico-science.png");
}
.page-productguide .btns-samples .row .col dd {
display: flex;
gap: 8px;
}
@media (min-width: 801px) {
.page-productguide .btns-samples .row .col dd {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
max-width: 200px;
}
}
.page-productguide .btns-samples .row .col a,
.page-productguide .btns-samples .row .col button {
max-width: 68px;
height: 30px;
padding: 4px 17px;
background: #e0e7ec;
border-radius: 6px;
font-size: 14px;
color: #01416c;
}
@media (min-width: 801px) {
.page-productguide .btns-samples .row .col a,
.page-productguide .btns-samples .row .col button {
max-width: 74px;
padding: 5px 20px;
}
}
.page-productInfo {
background: #8165fe;
}
.page-productInfo .sec-visual > .inner::after {
background: url("/assets/renewal2023/img/productInfo/ischool/visual.png") no-repeat center/cover;
}
.page-productInfo .sec-info {
padding-bottom: 103px;
}
@media (min-width: 801px) {
.page-productInfo .sec-info {
padding-bottom: 280px;
}
}
.page-productInfo .sec-cont {
padding-top: 0;
}
.page-productInfo .sec-cont .cont-wrap {
padding: 0 0 100px 0;
background: #8165fe;
}
@media (min-width: 801px) {
.page-productInfo .sec-cont .cont-wrap {
padding: 0 0 120px 0;
}
}
.page-productInfo .sec-cont .cont-wrap .img.m-only {
max-width: 400px;
margin: 0 auto;
}
.page-productInfo .sec-cont .cont-wrap .cont-sec {
padding: 0;
}
.page-productInfo .sec-cont .cont-wrap .cont-sec + .cont-sec {
padding-top: 70px;
}
@media (min-width: 801px) {
.page-productInfo .sec-cont .cont-wrap .cont-sec + .cont-sec {
padding-top: 120px;
}
}
.page-productInfo .sec-cont .cont-wrap .sec01 > .inner {
position: relative;
top: -87px;
margin-bottom: -87px;
}
@media (min-width: 801px) {
.page-productInfo .sec-cont .cont-wrap .sec01 > .inner {
top: -270px;
margin-bottom: -270px;
}
}
@media (min-width: 801px) {
.page-productInfo .sec-cont .cont-wrap .sec03.cont-sec {
padding-top: 100px;
}
}
.page-productInfo02 .sec-visual > .inner::after {
background: url("/assets/renewal2023/img/productInfo/ele/visual.png") no-repeat center/cover;
}
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst {
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst {
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
column-gap: 48px;
row-gap: 60px;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm {
overflow: hidden;
position: relative;
display: flex;
border: 1px solid #dddddd;
border-radius: 10px;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm {
overflow: visible;
flex-direction: column;
flex: 0 0 calc(25% - 36px);
border: none;
border-radius: 20px;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .img-box {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
min-height: 136px;
background: #e4f6f4;
border-right: 1px solid #dddddd;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .img-box {
width: 264px;
min-height: 264px;
border: 1px solid #dddddd;
border-radius: 20px;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .img-box img {
width: 76px;
height: 95px;
box-shadow: 0px 2px 6px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .img-box img {
width: 162px;
height: 216px;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .txt-box {
flex: 1;
padding: 16px 18px;
background: #ffffff;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .txt-box {
display: none;
position: absolute;
top: 264px;
z-index: 9;
width: 328px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .txt-box::before {
content: "";
position: absolute;
top: -20px;
right: 87px;
z-index: 9;
width: 29px;
height: 26px;
background: url("/assets/renewal2023/img/ico/ico-top-arrow-white.png") no-repeat center/cover;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .txt-box .tit {
line-height: 150%;
font-size: 16px;
font-weight: 700;
}
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .txt-box .desc {
margin-top: 4px;
font-size: 14px;
color: #666666;
}
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .tit-box {
display: none;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .tit-box {
display: block;
margin-top: 20px;
text-align: center;
font-size: 18px;
font-weight: 700;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .btn-more {
display: none;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm .btn-more {
display: block;
position: absolute;
top: 197px;
right: 10px;
width: 56px;
height: 56px;
background: rgba(0, 0, 0, 0.6) url("/assets/renewal2023/img/ico/ico-search.png") no-repeat center/28px auto;
border-radius: 100%;
}
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm.on .txt-box {
display: block;
}
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont01 .cont-sec .book-lst .book-itm.on .btn-more {
background: rgba(0, 0, 0, 0.6) url("/assets/renewal2023/img/ico/ico-close-w.png") no-repeat center/36px auto;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont01 .sec02 {
background: #f5f8fd;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont01 .sec02 .book-lst {
padding: 0 10px;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont01 .sec03 {
background: #8165fe;
}
.page-productInfo02 .sec-cont .cont-wrap .cont01 .sec03 .cont-tit {
color: #ffffff;
}
.page-productInfo02 .sec-cont .cont-wrap .cont02 .cont-sec + .cont-sec {
padding-top: 0;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont02 .cont-sec.sec01 > .inner {
display: flex;
}
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont02 .cont-sec.sec01 .cont-tit {
flex: 1;
}
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont02 .cont-sec.sec01 .cont-desc {
flex: 1;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-tit {
font-weight: 700;
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-swiper .swiper {
margin-top: 0;
padding: 0 16px 16px 16px;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-swiper .swiper {
margin-top: 40px;
padding: 0 10px 10px 10px;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-swiper .swiper .swiper-slide {
background: #f4f8fb;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-swiper .swiper .swiper-slide > dl dd {
line-height: 150%;
font-size: 16px;
color: #333333;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-swiper .swiper .swiper-slide > dl dd {
font-size: 24px;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-swiper .swiper-pagination .swiper-pagination-bullet {
border: 1px solid #dddddd;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-swiper .swiper-pagination .swiper-pagination-bullet > p {
font-size: 12px;
color: #121212;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-swiper .swiper-pagination .swiper-pagination-bullet > p {
font-size: 14px;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-swiper .swiper-pagination .swiper-pagination-bullet-active {
background: #8165fe;
border: none;
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-swiper .swiper-pagination .swiper-pagination-bullet-active > p {
font-weight: 700;
color: #ffffff;
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-swiper .swiper-button-prev {
background: url("/assets/renewal2023/img/ico/ico-arrow-prev2.png") no-repeat center/30px auto;
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .cont-swiper .swiper-button-next {
background: url("/assets/renewal2023/img/ico/ico-arrow-next2.png") no-repeat center/30px auto;
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .sec00 .cont-tit .desc {
text-align: center;
font-size: 20px;
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .sec01 {
padding-top: 0;
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .sec01 > .inner {
padding: 0;
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .sec02 {
background: #8165fe;
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .sec02 .cont-tit {
color: #ffffff;
}
.page-productInfo02 .sec-cont .cont-wrap .cont03 .sec02 .txt-info {
margin-top: 20px;
text-align: center;
line-height: 128%;
font-size: 14px;
color: #ffffff;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont03 .sec02 .txt-info {
margin-top: 40px;
font-size: 16px;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec00 .cont-tit {
font-weight: 700;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec00 .cont-tit .desc {
text-align: center;
}
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec00 .btns-samples .tit {
padding: 18px 50px;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec00 .btns-samples .row {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 20px 16px 30px;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec00 .btns-samples .row {
gap: 0;
padding: 32px 76px;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec00 .btns-samples .row .col {
flex: 0 0 calc(50% - 8px);
justify-content: center;
padding: 0;
border: none;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec00 .btns-samples .row .col {
flex: 1;
padding: 3px 30px;
}
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec00 .btns-samples .row .col:first-child {
border-right: 1px dashed #dddddd;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec00 .btns-samples .row .col a,
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec00 .btns-samples .row .col button {
width: 100%;
max-width: 140px;
height: 54px;
max-height: 54px;
background: #e0e7ec;
border-radius: 10px;
font-size: 18px;
font-weight: 700;
color: #01416c;
}
@media (min-width: 801px) {
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec00 .btns-samples .row .col a,
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec00 .btns-samples .row .col button {
max-width: 320px;
}
}
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec01 {
padding-top: 0;
}
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec02,
.page-productInfo02 .sec-cont .cont-wrap .cont04 .sec04 {
background: #f4f8fb;
}
.popup-sample36 {
width: calc(100% - 32px);
min-width: 328px;
max-width: 960px;
}
.popup-sample36 .popupContent__body {
padding: 0;
}
.popup-sample36 .sbj-wrap .tab-lst {
display: flex;
}
.popup-sample36 .sbj-wrap .tab-lst .tab-itm {
flex: 1;
border-bottom: 1px solid #dddddd;
text-align: center;
font-size: 18px;
color: #777777;
}
@media (min-width: 801px) {
.popup-sample36 .sbj-wrap .tab-lst .tab-itm {
font-size: 24px;
}
}
.popup-sample36 .sbj-wrap .tab-lst .tab-itm > button {
width: 100%;
padding: 9px 0;
}
@media (min-width: 801px) {
.popup-sample36 .sbj-wrap .tab-lst .tab-itm > button {
padding: 13px 0;
}
}
.popup-sample36 .sbj-wrap .tab-lst .tab-itm + .tab-itm {
border-left: 1px solid #dddddd;
}
.popup-sample36 .sbj-wrap .tab-lst .tab-itm.on {
font-weight: 700;
color: #00ab93;
border-bottom: 4px solid #00ab93;
}
.popup-sample36 .video-wrap {
overflow: hidden;
padding: 16px;
}
@media (min-width: 801px) {
.popup-sample36 .video-wrap {
display: flex;
flex-direction: row-reverse;
gap: 20px;
padding: 40px 32px;
}
}
.popup-sample36 .video-wrap .tab-lst {
display: flex;
flex-wrap: nowrap;
gap: 5px;
width: 100%;
overflow: auto;
}
@media (min-width: 801px) {
.popup-sample36 .video-wrap .tab-lst {
flex-shrink: 0;
flex-direction: column;
gap: 10px;
width: 274px;
max-height: 340px;
margin-top: 36px;
}
}
.popup-sample36 .video-wrap .tab-lst .tab-itm > button {
display: flex;
flex-direction: column;
align-items: center;
width: 136px;
min-height: 52px;
padding: 7px;
background: #fff;
border: 1px solid #8165fe;
border-radius: 10px;
text-align: center;
}
@media (min-width: 801px) {
.popup-sample36 .video-wrap .tab-lst .tab-itm > button {
align-items: flex-start;
width: calc(100% - 14px);
padding: 10px;
margin-left: auto;
text-align: left;
}
}
.popup-sample36 .video-wrap .tab-lst .tab-itm > button > span {
font-size: 12px;
}
@media (min-width: 801px) {
.popup-sample36 .video-wrap .tab-lst .tab-itm > button > span {
font-size: 14px;
}
}
.popup-sample36 .video-wrap .tab-lst .tab-itm > button > strong {
font-size: 12px;
width: 100%;
}
@media (min-width: 801px) {
.popup-sample36 .video-wrap .tab-lst .tab-itm > button > strong {
font-size: 18px;
}
}
.popup-sample36 .video-wrap .tab-lst .tab-itm.on > button {
background: #8165fe;
color: #fff;
}
@media (min-width: 801px) {
.popup-sample36 .video-wrap .tab-lst .tab-itm.on > button {
position: relative;
}
}
@media (min-width: 801px) {
.popup-sample36 .video-wrap .tab-lst .tab-itm.on > button::before {
content: "";
position: absolute;
top: 50%;
left: -17px;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-left-arrow-purple.png") no-repeat center/16px auto;
}
}
.popup-sample36 .video-wrap .tab-cont {
margin-top: 20px;
}
@media (min-width: 801px) {
.popup-sample36 .video-wrap .tab-cont {
min-width: 0;
margin-top: 0;
}
}
.popup-sample36 .video-wrap .tab-cont .unit-tit {
margin-bottom: 4px;
line-height: 128%;
font-size: 14px;
font-weight: 700;
}
@media (min-width: 801px) {
.popup-sample36 .video-wrap .tab-cont .unit-tit {
margin-bottom: 10px;
line-height: 144%;
font-size: 18px;
}
}
.popup-sample36 .video-wrap .tab-cont .unit-img {
position: relative;
width: 100%;
}
@media (min-width: 801px) {
.popup-sample36 .video-wrap .tab-cont .unit-img {
min-width: 600px;
}
}
.popup-sample36 .video-wrap .tab-cont .unit-img::before {
display: none;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
.popup-sample36 .video-wrap .tab-cont .unit-img::after {
display: none;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
background: url(/assets/renewal2023/img/ico/ico-play-circle-purple.png) no-repeat center/cover;
}
.popup-sample36 .video-wrap .tab-cont .unit-img > img {
width: 100%;
}
.popup-sample36 .video-wrap .tab-cont .unit-img:hover::before {
display: block;
}
.popup-sample36 .video-wrap .tab-cont .unit-img:hover::after {
display: block;
}
.popup-sample36 .video-wrap .tab-cont > video {
width: 100%;
}
.page-productInfo03 .sec-visual > .inner::after {
background: url("/assets/renewal2023/img/productInfo/math/visual.png") no-repeat center/cover;
}
.page-productInfo03 .sec-info .desc-wrap svg {
width: 13px;
height: auto;
margin-bottom: -3px;
}
@media (min-width: 801px) {
.page-productInfo03 .sec-info .desc-wrap svg {
width: 21px;
}
}
@media (min-width: 801px) {
.page-productInfo03 .sec-cont {
padding-top: 0;
}
}
.page-productInfo03 .sec-cont .cont-wrap .img.m-only {
max-width: 400px;
margin: 0 auto;
}
@media (min-width: 801px) {
.page-productInfo03 .sec-cont .cont-wrap .cont .sec01 {
padding-top: 120px;
background: url("/assets/renewal2023/img/productInfo/math/cont01-bg.png") no-repeat center bottom/1920px auto;
}
}
.page-productInfo03 .sec-cont .cont-wrap .cont .sec01 .cont-group + .cont-group {
margin-top: 60px;
}
.page-productInfo03 .sec-cont .cont-wrap .cont .sec02 .cont-tit.type-line {
font-weight: 700;
color: #fff;
}
.page-productInfo03 .sec-cont .cont-wrap .cont .sec02 .cont-tit.type-line .line::after {
background: #b3a3fe;
}
.page-productInfo03 .sec-cont .cont-wrap .cont .sec02 .cont-tit.type-line .top {
font-weight: 400;
color: #fff;
}
.page-productInfo03 .sec-cont .cont-wrap .cont .sec03 .cont-tit {
font-weight: 700;
}
.wrap.sub-container:has(.page-freeTrialLectPs) .location {
display: none;
}
/* =============================================================
마이페이지
============================================================= */
/* 마이페이지 */
@media (max-width: 801px) {
.page-mypage .base-content-wrap {
padding-top: 0;
}
}
@media (max-width: 801px) {
.page-mypage.page-bbsHistReportDetail .base-content-wrap, .page-mypage.page-bbsHistQuestion .base-content-wrap {
padding: 40px 0 100px;
}
}
.page-mypage .mypage-profile-wrap {
display: none;
padding-bottom: 112px;
background: #f4f8fb;
}
@media (min-width: 801px) {
.page-mypage .mypage-profile-wrap {
display: block;
}
}
.page-mypage .mypage-profile-wrap .box-row {
display: flex;
gap: 20px;
width: 100%;
}
.page-mypage .mypage-profile-wrap .my-info .my-character .box-profile {
position: relative;
width: 200px;
height: 200px;
}
.page-mypage .mypage-profile-wrap .my-info .my-character .box-profile .btn-change-character {
overflow: hidden;
width: 100%;
height: 100%;
background: #2d378a url("/assets/renewal2023/img/mypage/member-character-bg.png") no-repeat center/cover;
border: 10px solid #ffffff;
border-radius: 100%;
box-shadow: 0px 4px 8px rgba(12, 50, 75, 0.16);
}
.page-mypage .mypage-profile-wrap .my-info .my-character .box-profile .btn-change-character > img {
width: auto;
height: 100%;
margin: 0 auto;
}
.page-mypage .mypage-profile-wrap .my-info .my-character .box-profile::after {
content: "";
position: absolute;
bottom: 10px;
right: 10px;
width: 48px;
height: 48px;
background: url("/assets/renewal2023/img/mypage/ico-change.png") no-repeat center/cover;
border-radius: 100%;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
cursor: pointer;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile {
max-width: 327px;
margin-right: auto;
padding: 0 6px 0 20px;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .name-wrap {
display: flex;
align-items: end;
flex-wrap: wrap;
gap: 6px;
margin: 16px 0;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .name-wrap > p {
display: flex;
align-items: flex-end;
width: calc(100% - 76px);
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .name-wrap > p .name {
width: auto;
white-space: nowrap;
line-height: 32px;
font-size: 24px;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .name-wrap > p .id {
width: auto;
max-width: 100px;
font-size: 16px;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .name-wrap > button {
flex-shrink: 0;
display: block;
width: 32px;
height: 32px;
border-radius: 100%;
background-repeat: no-repeat;
background-size: 24px auto;
background-position: center;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .name-wrap .btn-setting {
background-color: #666666;
background-image: url("/assets/renewal2023/img/ico/ico-setting.png");
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .name-wrap .btn-msg {
position: relative;
background-color: #8165fe;
background-image: url("/assets/renewal2023/img/ico/ico-msg.png");
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .name-wrap .btn-msg .num {
display: block;
position: absolute;
top: 0;
right: -6px;
min-width: 16px;
height: 16px;
padding: 0 5px;
background: #f04d69;
border-radius: 99px;
font-size: 10px;
font-weight: 700;
color: #ffffff;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile > dl.box-row {
gap: 10px;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile > dl.box-row dt {
padding: 1px 16px;
background: #ffffff;
border: 1px solid #01416c;
border-radius: 14px;
font-size: 16px;
color: #01416c;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile > dl.box-row dd {
font-size: 16px;
color: #666666;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile > dl.box-row + dl {
margin-top: 10px;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook {
position: relative;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook .btn-my-textbook {
margin-top: 18px;
border: 1px solid #01416c;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook .btn-my-textbook::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-book2.png") no-repeat center/cover;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook .layer-my-textbook {
top: 0;
min-width: 500px;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook .layer-my-textbook .layer-header::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-book2.png") no-repeat center/cover;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook .layer-my-textbook .base-table {
width: fit-content;
border: 1px solid #dddddd;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook .layer-my-textbook .base-table tr {
border-top: 1px solid #dddddd;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook .layer-my-textbook .base-table th,
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook .layer-my-textbook .base-table td {
width: 120px;
height: 40px;
padding: 16px;
text-align: center;
font-size: 14px;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook .layer-my-textbook .base-table th {
color: #01416c;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook .layer-my-textbook .base-table th + th {
border-left: 1px solid #dddddd;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook .layer-my-textbook .base-table td + td {
border-left: 1px solid #dddddd;
}
.page-mypage .mypage-profile-wrap .my-info .my-profile .box-mytextbook .layer-my-textbook .txt-cf {
margin-top: 10px;
text-align: center;
font-size: 14px;
color: #666666;
}
.page-mypage .mypage-profile-wrap .my-info .box-my-info {
overflow: hidden;
display: flex;
flex-direction: column;
width: 306px;
min-height: 220px;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
.page-mypage .mypage-profile-wrap .my-info .box-my-info > .tit {
padding: 7px;
background: #e0e7ec;
text-align: center;
font-size: 18px;
font-weight: 700;
}
.page-mypage .mypage-profile-wrap .my-info .box-my-info > .cont {
flex: 1;
padding: 20px;
background: #ffffff;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper {
width: 100%;
padding: 10px 5px 40px;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide {
height: 90px;
border-radius: 10px;
background-color: #fff6db;
background-repeat: no-repeat;
background-position: center top 10px;
background-size: 36px auto;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 50px 4px 10px;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide > a > span {
line-height: 136%;
text-align: center;
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide.mybook01 {
background-image: url("/assets/renewal2023/img/common/mybook/mybook-01.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide.mybook02 {
background-image: url("/assets/renewal2023/img/common/mybook/mybook-02.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide.mybook03 {
background-image: url("/assets/renewal2023/img/common/mybook/mybook-03.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide.mybook04 {
background-image: url("/assets/renewal2023/img/common/mybook/mybook-04.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide.mybook05 {
background-image: url("/assets/renewal2023/img/common/mybook/mybook-05.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide.mybook06 {
background-image: url("/assets/renewal2023/img/common/mybook/mybook-06.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide.mybook07 {
background-image: url("/assets/renewal2023/img/common/mybook/mybook-07.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide.mybook08 {
background-image: url("/assets/renewal2023/img/common/mybook/mybook-08.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide.mybook09 {
background-image: url("/assets/renewal2023/img/common/mybook/mybook-09.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide.mybook10 {
background-image: url("/assets/renewal2023/img/common/mybook/mybook-10.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide.mybook11 {
background-image: url("/assets/renewal2023/img/common/mybook/mybook-11.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide.mybook12 {
background-image: url("/assets/renewal2023/img/common/mybook/mybook-12.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide:nth-of-type(1) {
background-color: #fff6db;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide:nth-of-type(2) {
background-color: #e4f6f4;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide:nth-of-type(3) {
background-color: #fdf0f6;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide:nth-of-type(4) {
background-color: #e6e0ff;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide:nth-of-type(5) {
background-color: #d7f8e8;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide:nth-of-type(6) {
background-color: #daedfc;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide:nth-of-type(7) {
background-color: #ffe7cf;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide:nth-of-type(8) {
background-color: #fcdbe1;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide:nth-of-type(9) {
background-color: #fff6db;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide:nth-of-type(10) {
background-color: #e4f6f4;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide:nth-of-type(11) {
background-color: #fdf0f6;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-slide:nth-of-type(12) {
background-color: #e6e0ff;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-button {
top: auto;
bottom: 0;
width: 24px;
height: 24px;
margin-top: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 7px auto;
border: 1px solid #dddddd;
border-radius: 100%;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-button::after {
display: none;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-button.mybook-button-prev {
left: 80px;
background-image: url("/assets/renewal2023/img/ico/ico-arrow-prev2.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-button.mybook-button-next {
right: 80px;
background-image: url("/assets/renewal2023/img/ico/ico-arrow-next2.png");
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-pagination {
top: auto;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
width: fit-content;
margin: 0 auto;
font-size: 14px;
color: #666666;
}
.page-mypage .mypage-profile-wrap .my-info .box-textbook .mybook.swiper .swiper-pagination .swiper-pagination-current {
font-weight: 700;
color: #121212;
}
.page-mypage .mypage-profile-wrap .my-info .box-studyroom dl {
display: flex;
gap: 6px;
}
.page-mypage .mypage-profile-wrap .my-info .box-studyroom .teacher-img {
margin-right: 14px;
}
.page-mypage .mypage-profile-wrap .my-info .box-studyroom .teacher-img > .img {
overflow: hidden;
width: 80px;
height: 80px;
background-image: url("/assets/renewal2023/img/mypage/teacher-profile-sample.png");
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
border-radius: 100%;
}
.page-mypage .mypage-profile-wrap .my-info .box-studyroom .teacher-name {
margin-bottom: 6px;
font-size: 16px;
}
.page-mypage .mypage-profile-wrap .my-info .box-studyroom .teacher-name strong {
margin-right: 2px;
font-size: 18px;
font-weight: 700;
}
.page-mypage .mypage-profile-wrap .my-info .box-studyroom .teacher-branch {
line-height: 150%;
color: #666666;
}
.page-mypage .mypage-profile-wrap .my-info .box-studyroom .btn-send-msg {
display: block;
width: 32px;
height: 32px;
background: #8165fe url("/assets/renewal2023/img/ico/ico-alarm2.png") no-repeat center/24px auto;
border-radius: 100%;
}
.page-mypage .mypage-profile-wrap .my-info .box-studyroom .btn-alarm {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
min-height: 30px;
padding: 4px;
margin-top: 30px;
background: #f5f5f5;
border-radius: 10px;
font-size: 14px;
}
.page-mypage .mypage-profile-wrap .my-info .box-studyroom .btn-alarm .num {
min-width: 16px;
height: 16px;
padding: 0 5px;
background: #f04d69;
border-radius: 99px;
font-size: 10px;
font-weight: 700;
color: #ffffff;
}
.page-mypage .mypage-profile-wrap .my-learning {
margin-top: 40px;
}
.page-mypage .mypage-profile-wrap .my-learning > h4 {
margin-bottom: 10px;
font-size: 20px;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row {
display: flex;
gap: 60px;
padding: 30px 40px;
background: #ffffff;
border-top: 1px solid #00ab93;
border-radius: 0px 0px 40px 40px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .link {
display: flex;
justify-content: start;
align-items: center;
gap: 10px;
text-align: center;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .link + .link {
position: relative;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .link + .link::before {
content: "";
position: absolute;
top: 50%;
left: -30px;
transform: translateY(-50%);
width: 1px;
height: 100%;
border-left: 1px dashed #cccccc;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-learning {
width: 506px;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-learning .textbook-img {
overflow: hidden;
margin-right: 10px;
border: 1px solid #dddddd;
border-radius: 10px;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-learning .textbook-img > .img {
width: 80px;
height: 100px;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-learning > dl {
width: 128px;
padding: 19px 10px;
background: #f4f8fb;
border-radius: 10px;
text-align: center;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-learning > dl dt {
margin-bottom: 6px;
font-size: 16px;
color: #777777;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-learning > dl dt::after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-left: 4px;
background: url("/assets/renewal2023/img/ico/ico-right-arrow-b.png") no-repeat center/cover;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-learning > dl dd {
font-size: 28px;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-homework,
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-test {
flex-direction: column;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-homework .txt-tag,
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-test .txt-tag {
width: fit-content;
min-height: 27px;
padding: 2px 16px;
border: 1px solid #01416c;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
color: #01416c;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-homework .txt-lg,
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-test .txt-lg {
width: 100%;
height: 32px;
font-size: 24px;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-homework .txt-lg strong,
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-test .txt-lg strong {
font-size: 28px;
color: #00ab93;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-homework .txt-sm,
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-test .txt-sm {
font-size: 16px;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-homework {
width: 320px;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-homework.type-not-ing {
gap: 20px;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-homework.type-not-ing .txt-lg {
display: none;
}
.page-mypage .mypage-profile-wrap .my-learning > .box-row .box-status-test {
flex: 1;
}
.page-mypage .mypage-profile-wrap .my-learning.type-red-sign .box-status-homework .txt-lg,
.page-mypage .mypage-profile-wrap .my-learning.type-red-sign .box-status-test .txt-lg {
color: #f04d69;
}
.page-mypage .mypage-profile-wrap .my-learning.type-red-sign .box-status-homework .txt-lg strong,
.page-mypage .mypage-profile-wrap .my-learning.type-red-sign .box-status-test .txt-lg strong {
color: #f04d69;
}
.page-mypage .mypage-profile-wrap .my-learning.type-red-sign .box-status-homework .txt-tag {
border-color: #f04d69;
color: #f04d69;
}
.page-mypage #myPageTab {
display: none;
}
@media (min-width: 801px) {
.page-mypage #myPageTab {
display: block;
}
}
.page-mypage.type-only-pc .mypage-profile-wrap,
.page-mypage.type-only-pc #myPageTab {
display: block;
}
.sub-container .location .location-wrap .select-wrap .select-menu .select-btn:has(.btn-setting) {
gap: 34px;
align-items: center;
}
.sub-container .location .location-wrap .select-wrap .select-menu .select-btn:has(.btn-setting) .btn-setting {
background: none;
display: flex;
align-items: center;
gap: 2px;
color: #00ab93;
font-size: 16px;
font-weight: 700;
line-height: 150%;
position: relative;
}
.sub-container .location .location-wrap .select-wrap .select-menu .select-btn:has(.btn-setting) .btn-setting::after {
content: "";
display: block;
width: 2px;
height: 24px;
background: #ccc;
position: absolute;
left: -17px;
top: 50%;
transform: translate(-50%, -50%);
}
.popup-write-msg2 .popupContent__body .dl {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
}
@media (min-width: 801px) {
.popup-write-msg2 .popupContent__body .dl {
flex-direction: row;
align-content: center;
gap: 20px;
margin-bottom: 20px;
}
.popup-write-msg2 .popupContent__body .dl dt {
font-size: 18px;
}
.popup-write-msg2 .popupContent__body .dl dd {
display: flex;
gap: 8px;
}
.popup-write-msg2 .popupContent__body .dl dd .base-select-wrap {
flex-shrink: 0;
min-width: 121px;
}
.popup-write-msg2 .popupContent__body .dl dd .base-ipt-text {
flex: 1;
}
}
.popup-write-msg2 .popupContent__body .base-textarea {
height: 360px;
}
@media (min-width: 801px) {
.popup-write-msg2 .popupContent__body .base-textarea {
width: 880px;
height: 250px;
}
}
.popup-set-character {
width: 720px;
}
.popup-set-character .popupContent__body {
padding: 30px;
}
.popup-set-character .popupContent__body .select-character {
display: flex;
gap: 30px;
}
.popup-set-character .popupContent__body .select-character .left .crt-img {
overflow: hidden;
width: 180px;
height: 180px;
background: #2d378a url("/assets/renewal2023/img/mypage/member-character-bg.png") no-repeat center/cover;
border: 10px solid #ffffff;
border-radius: 100%;
box-shadow: 0px 4px 8px rgba(12, 50, 75, 0.16);
}
.popup-set-character .popupContent__body .select-character .left .crt-img > img {
width: auto;
height: 100%;
margin: 0 auto;
}
.popup-set-character .popupContent__body .select-character .right .crt-desc {
position: relative;
padding: 16px 27px 16px 30px;
background: #f4f8fb;
border-radius: 20px;
}
.popup-set-character .popupContent__body .select-character .right .crt-desc::before {
content: "";
position: absolute;
top: 40px;
left: -14px;
width: 18px;
height: 20px;
background: url("/assets/renewal2023/img/mypage/ico-arrow.png") no-repeat center/cover;
}
.popup-set-character .popupContent__body .select-character .right .crt-desc dt {
margin-bottom: 4px;
font-size: 20px;
font-weight: 700;
}
.popup-set-character .popupContent__body .select-character .right .crt-desc dd {
line-height: 150%;
font-size: 16px;
color: #666666;
}
.popup-set-character .popupContent__body .select-character .right .crt-list {
display: flex;
gap: 10px;
margin-top: 20px;
}
.popup-set-character .popupContent__body .select-character .right .crt-list .item button .img {
width: 70px;
height: 70px;
background: #f4f8fb;
border: 4px solid #f4f8fb;
border-radius: 100%;
}
.popup-set-character .popupContent__body .select-character .right .crt-list .item button .img > img {
width: 100%;
height: auto;
}
.popup-set-character .popupContent__body .select-character .right .crt-list .item button .desc {
line-height: 128%;
font-size: 14px;
color: #666666;
}
.popup-set-character .popupContent__body .select-character .right .crt-list .item button.active .img {
border: 4px solid #8165fe;
}
.popup-set-character .popupContent__body .select-character.papa dt span {
color: #4bc8f5;
}
.popup-set-character .popupContent__body .select-character.bobo dt span {
color: #8165fe;
}
.popup-set-character .popupContent__body .select-character.dudu dt span {
color: #bdd533;
}
.popup-set-character .popupContent__body .select-character.nono dt span {
color: #ffd349;
}
.popup-set-character .popupContent__body .select-character.juju dt span {
color: #ffa600;
}
.popup-set-character .popupContent__body .select-mood {
margin: 42px 52px;
}
.popup-set-character .popupContent__body .select-mood .tit {
margin-bottom: 10px;
font-size: 18px;
font-weight: 700;
}
.popup-set-character .popupContent__body .select-mood .tit::before {
content: "";
display: inline-block;
width: 19px;
height: 19px;
margin: 0 4px -2px 0;
margin-right: 4px;
background: url("/assets/renewal2023/img/ico/ico-check.png") no-repeat center/cover;
}
.popup-set-character .popupContent__body .select-mood .list {
display: flex;
gap: 10px;
margin-top: 20px;
}
.popup-set-character .popupContent__body .select-mood .list .item button .img {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid #cccccc;
border-radius: 10px;
}
.popup-set-character .popupContent__body .select-mood .list .item button .img > img {
width: 88px;
height: auto;
}
.popup-set-character .popupContent__body .select-mood .list .item button .desc {
margin-top: 6px;
line-height: 128%;
font-size: 14px;
color: #666666;
}
.popup-set-character .popupContent__body .select-mood .list .item button.active .img {
border: 2px solid #8165fe;
}
.popup-set-character .popupContent__body .txt-cf {
text-align: center;
font-size: 14px;
color: #666666;
}
.popup-set-character .popupContent__footer button {
margin: 0 auto;
}
body:has(.base-popup.type-full.fixed) {
overflow: hidden;
}
.page-mypage .tag {
display: block;
width: fit-content;
min-width: 55px;
min-height: 20px;
padding: 0 5px;
margin: 0 auto;
border-radius: 999px;
text-align: center;
font-size: 12px;
}
@media (min-width: 801px) {
.page-mypage .tag {
min-width: 95px;
min-height: 24px;
padding: 1px 15px;
font-size: 16px;
}
}
.page-mypage .tag.did {
border: 1px solid #01416c;
color: #01416c;
}
.page-mypage .tag.ing {
border: 1px solid #f04d69;
color: #f04d69;
}
.page-mypage .box-board-list .board-mid .base-table .td-links {
display: flex;
align-items: center;
padding: 0;
}
.page-mypage .box-board-list .board-mid .base-table .td-links button {
vertical-align: middle;
}
.page-mypage .box-board-list .board-mid .base-table .td-links .btn-update {
flex: 1;
padding: 16px;
text-align: left;
}
.page-mypage .box-board-list .board-mid .base-table .td-links .btn-delete {
flex-shrink: 0;
margin: 0 16px 0 8px;
margin-left: 8px;
margin-right: 16px;
}
.page-mypage .box-board-update .board-mid .base-table .box-flex-wrap {
gap: 8px;
}
.page-mypage .box-board-update .board-mid .base-table tr {
border-bottom: 1px solid #dddddd;
}
.page-mypage .box-board-update .board-mid .base-table tr:nth-of-type(2n) {
background: none;
}
.page-mypage .box-board-update .board-mid .base-table th {
width: 236px;
}
.page-mypage .box-board-update .board-mid .base-table .qna-file {
padding-bottom: 46px;
}
.page-mypage .box-board-update .board-mid .base-table .qna-file .box-flex-wrap {
padding-bottom: 20px;
}
.page-mypage .box-board-update .board-mid .base-table .qna-file .base-file {
position: relative;
}
.page-mypage .box-board-update .board-mid .base-table .qna-file .base-file::after {
content: "이미지 또는 문서 파일만 등록 가능 (gif, png, jpg, hwp, doc, pdf, xls)";
position: absolute;
bottom: -20px;
right: 0;
font-size: 14px;
color: #666666;
}
.page-mypage .box-board-update .board-mid .base-table .qna-file .base-ipt-text {
flex: 1;
}
.page-mypage .box-board-update .board-mid .base-table .qna-file .btn-file {
width: 143px;
}
.page-mypage .box-board-update .board-mid .base-table .qna-textarea > div {
display: flex;
flex-direction: column;
}
.page-mypage .box-board-update .board-mid .base-table .qna-textarea > div .base-textarea {
height: 220px;
}
.page-mypage .box-board-update .board-mid .base-table .qna-textarea .txt {
margin-top: 26px;
text-align: left;
font-size: 14px;
color: #999999;
}
@media (max-width: 801px) {
.type-only-pc .base-tab.type-depth3 {
margin-bottom: 40px;
}
}
.popup-update-memo .base-textarea {
min-height: 320px;
margin-top: 10px;
}
.popup-update-memo .popupContent__body {
width: 640px;
}
.popup-update-memo .popupContent__footer {
display: flex;
gap: 16px;
}
.popup-update-memo .popupContent__footer .btn-save {
margin-left: auto;
}
.page-bbsHistLearningDetail .box-board-update .base-textarea {
height: 261px;
}
.page-pollCommentHist .board-mid .base-table .my-poll-txt dt,
.page-pollCommentHist .board-mid .base-table .my-poll-txt dd {
display: flex;
align-items: center;
gap: 6px;
}
.page-pollCommentHist .board-mid .base-table .my-poll-txt dt::before,
.page-pollCommentHist .board-mid .base-table .my-poll-txt dd::before {
flex-shrink: 0;
content: "";
display: inline-block;
width: 40px;
box-sizing: border-box;
}
.page-pollCommentHist .board-mid .base-table .my-poll-txt dt {
margin-bottom: 5px;
font-size: 18px;
font-weight: 700;
color: #333333;
}
.page-pollCommentHist .board-mid .base-table .my-poll-txt dt::before {
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
background-size: 25px auto;
}
.page-pollCommentHist .board-mid .base-table .my-poll-txt dd {
line-height: 150%;
color: #666666;
}
.page-pollCommentHist .board-mid .base-table .my-poll-txt dd::before {
content: "주제";
padding: 0 8px;
min-height: 21px;
background: #e0e7ec;
border-radius: 999px;
text-align: center;
color: #666666;
font-size: 13px;
}
.page-pollCommentHist .board-mid .base-table .my-poll-txt.type-yes dt::before {
background-image: url("/assets/renewal2023/img/mypage/ico-poll-yes.png");
}
.page-pollCommentHist .board-mid .base-table .my-poll-txt.type-no dt::before {
background-image: url("/assets/renewal2023/img/mypage/ico-poll-no.png");
}
.page-bbsHistQuestion .box-board .board-top .col {
display: flex;
gap: 30px;
align-items: center;
}
.page-list-msg .base-page-desc {
margin-bottom: 20px !important;
}
.page-list-msg .box-board .board-top {
align-items: center;
position: relative;
margin-bottom: 66px;
}
@media (min-width: 801px) {
.page-list-msg .box-board .board-top {
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 2px solid #79d1c7;
}
}
.page-list-msg .box-board .board-top .base-checkbox-secondary {
position: absolute;
bottom: -58px;
}
@media (min-width: 801px) {
.page-list-msg .box-board .board-top .base-checkbox-secondary {
position: static;
}
}
.page-list-msg .box-board .board-top .btns {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
display: flex;
justify-content: center;
gap: 10px;
padding: 20px 16px;
background: #e0e7ec;
}
@media (min-width: 801px) {
.page-list-msg .box-board .board-top .btns {
position: static;
padding: 0 0 0 32px;
background: none;
}
}
.page-list-msg .box-board .board-top .btns > button {
flex: 1;
padding: 0 10px;
}
@media (min-width: 801px) {
.page-list-msg .box-board .board-top .btns > button {
width: 132px;
padding: 0 20px;
}
}
.page-list-msg .box-board .board-top .btns > button::before {
display: none;
}
@media (min-width: 801px) {
.page-list-msg .box-board .board-top .btns > button::before {
display: inline-block;
}
}
.page-list-msg .box-board .board-top .btns > button.btn-save {
background: #01416c;
color: #fff;
}
@media (min-width: 801px) {
.page-list-msg .box-board .board-top .btns > button.btn-save {
background: #fff;
color: #121212;
order: 1;
}
.page-list-msg .box-board .board-top .btns > button.btn-save::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url(/assets/renewal2023/img/ico/ico-file.png) no-repeat center/20px auto;
}
}
.page-list-msg .box-board .board-top .btns > button.btn-write {
background: #8165fe;
color: #fff;
}
@media (min-width: 801px) {
.page-list-msg .box-board .board-top .btns > button.btn-write {
order: 2;
}
.page-list-msg .box-board .board-top .btns > button.btn-write::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url(/assets/renewal2023/img/ico/ico-msg.png) no-repeat center/21px auto;
}
}
.page-list-msg .box-board .board-top .base-ipt-text {
margin-left: auto;
}
.page-list-msg .box-board .board-mid .list .item + .item {
margin-top: 10px;
}
@media (min-width: 801px) {
.page-list-msg .box-board .board-mid .list .item + .item {
margin-top: 20px;
}
}
@media (min-width: 801px) {
.page-list-msg .box-board .board-mid .list .item .msg-body {
padding: 10px 71px 10px 30px;
}
}
.popup-detail-msg .popupContent__header .popupContent__title {
display: flex;
align-items: center;
}
.popup-detail-msg .popupContent__header .popupContent__title .char {
display: none;
width: 40px;
height: 40px;
margin-right: 10px;
background: #f5f5f5;
border-radius: 100%;
}
@media (min-width: 801px) {
.popup-detail-msg .popupContent__header .popupContent__title .char {
display: block;
}
}
.popup-detail-msg .popupContent__header .popupContent__title .char > img {
width: 100%;
height: 100%;
}
.popup-detail-msg .popupContent__header .popupContent__title small {
margin: 0 20px 0 8px;
font-size: 14px;
font-weight: 400;
}
.popup-detail-msg .popupContent__header .btn-reject {
background: #008673;
font-weight: 400;
color: #fff;
}
.popup-detail-msg .popupContent__body {
max-height: calc(100% - 223px);
}
.popup-detail-msg .popupContent__body .btn-del-chk {
margin-bottom: 10px;
}
.popup-detail-msg .popupContent__body .msg-wrap {
overflow: auto;
width: 100%;
height: 100%;
}
@media (min-width: 801px) {
.popup-detail-msg .popupContent__body .msg-wrap {
width: 880px;
height: 430px;
padding: 24px 20px;
background: #f4f8fb;
border: 1px solid #cccccc;
border-radius: 10px;
}
}
.popup-detail-msg .popupContent__body .msg-wrap .msg-box {
position: relative;
width: fit-content;
min-width: 170px;
max-width: 328px;
padding: 10px 38px 10px 14px;
background: #fff;
border: 1px solid #dddddd;
border-radius: 20px;
}
@media (min-width: 801px) {
.popup-detail-msg .popupContent__body .msg-wrap .msg-box {
display: flex;
gap: 20px;
align-items: center;
padding: 20px;
max-width: 520px;
}
}
.popup-detail-msg .popupContent__body .msg-wrap .msg-box + .msg-box {
margin-top: 40px;
}
@media (min-width: 801px) {
.popup-detail-msg .popupContent__body .msg-wrap .msg-box + .msg-box {
margin-top: 15px;
}
}
.popup-detail-msg .popupContent__body .msg-wrap .msg-box::before {
content: "";
position: absolute;
bottom: -13px;
width: 13px;
height: 14px;
background: url("/assets/renewal2023/img/mypage/msg-receive-arrow.png") no-repeat center/cover;
}
.popup-detail-msg .popupContent__body .msg-wrap .msg-box .msg > p {
line-height: 150%;
color: #333333;
}
.popup-detail-msg .popupContent__body .msg-wrap .msg-box .msg .btn-del-this {
position: absolute;
top: 10px;
right: 14px;
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-close-b.png") no-repeat center/13px auto;
}
.popup-detail-msg .popupContent__body .msg-wrap .msg-box .msg .date {
position: absolute;
bottom: -20px;
display: flex;
gap: 3px;
font-size: 14px;
color: #777777;
}
@media (min-width: 801px) {
.popup-detail-msg .popupContent__body .msg-wrap .msg-box .msg .date {
position: static;
margin-top: 20px;
justify-content: end;
}
}
.popup-detail-msg .popupContent__body .msg-wrap .msg-box.type-receive {
margin-right: auto;
}
.popup-detail-msg .popupContent__body .msg-wrap .msg-box.type-receive::before {
left: 17px;
}
.popup-detail-msg .popupContent__body .msg-wrap .msg-box.type-receive .date {
right: 10px;
}
.popup-detail-msg .popupContent__body .msg-wrap .msg-box.type-send {
margin-left: auto;
border: none;
background: #b1f2eb;
}
@media (min-width: 801px) {
.popup-detail-msg .popupContent__body .msg-wrap .msg-box.type-send {
flex-direction: row-reverse;
}
}
.popup-detail-msg .popupContent__body .msg-wrap .msg-box.type-send::before {
left: auto;
right: 17px;
background: url("/assets/renewal2023/img/mypage/msg-send-arrow.png") no-repeat center/cover;
}
.popup-detail-msg .popupContent__body .msg-wrap .msg-box.type-send .date {
left: 10px;
}
@media (min-width: 801px) {
.popup-detail-msg .popupContent__footer {
padding: 0;
background: #fff;
}
}
@media (min-width: 801px) {
.popup-detail-msg .popupContent__footer .answer-wrap {
padding: 0 40px;
}
}
.popup-detail-msg .popupContent__footer .answer-wrap .tit {
margin-bottom: 10px;
font-size: 20px;
}
.popup-detail-msg .popupContent__footer .btn-area {
margin-top: 10px;
}
@media (min-width: 801px) {
.popup-detail-msg .popupContent__footer .btn-area {
margin-top: 14px;
padding: 14px 0;
background: #f4f8fb;
border-radius: 0 0 40px 40px;
}
}
.popup-detail-msg .popupContent__footer .btn-area .btn-send::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-right-arrow-w-type2.png") no-repeat center/12px auto;
}
.popup-write-msg .popupContent__body .dl {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
}
@media (min-width: 801px) {
.popup-write-msg .popupContent__body .dl {
flex-direction: row;
align-content: center;
gap: 20px;
margin-bottom: 20px;
}
}
.popup-write-msg .popupContent__body .dl dt {
font-size: 18px;
}
.popup-write-msg .popupContent__body .dl dd {
display: flex;
gap: 8px;
}
.popup-write-msg .popupContent__body .dl dd .base-select-wrap {
flex-shrink: 0;
min-width: 121px;
}
.popup-write-msg .popupContent__body .dl dd .base-ipt-text {
flex: 1;
}
.popup-write-msg .popupContent__body .base-textarea {
height: 360px;
}
@media (min-width: 801px) {
.popup-write-msg .popupContent__body .base-textarea {
width: 880px;
height: 250px;
}
}
.page-friends .box-board .board-top .tit {
display: flex;
gap: 5px;
align-items: end;
}
.page-friends .box-board .board-top .tit dt,
.page-friends .box-board .board-top .tit dd {
font-weight: 700;
}
.page-friends .box-board .board-top .tit dt {
font-size: 24px;
}
.page-friends .box-board .board-top .tit dd {
font-size: 20px;
}
.page-friends .box-board .board-mid .base-table .tbl-mb {
display: table-cell;
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .base-table .tbl-mb {
display: none;
}
}
.page-friends .box-board .board-mid .base-table .tbl-pc {
display: none;
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .base-table .tbl-pc {
display: table-cell;
}
}
.page-friends .box-board .board-mid .base-table th span {
display: inline;
}
.page-friends .box-board .board-mid .base-table th:nth-of-type(1) {
width: 45px;
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .base-table th:nth-of-type(1) {
width: 6%;
}
}
.page-friends .box-board .board-mid .base-table th:nth-of-type(2) {
width: auto;
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .base-table th:nth-of-type(2) {
width: 8%;
}
}
.page-friends .box-board .board-mid .base-table th:nth-of-type(3) {
width: auto;
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .base-table th:nth-of-type(3) {
width: auto;
}
}
.page-friends .box-board .board-mid .base-table th:nth-of-type(4) {
width: auto;
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .base-table th:nth-of-type(4) {
width: 13%;
}
}
.page-friends .box-board .board-mid .base-table th:nth-of-type(5) {
width: auto;
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .base-table th:nth-of-type(5) {
width: 15%;
}
}
.page-friends .box-board .board-mid .base-table th:nth-of-type(6) {
width: 145px;
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .base-table th:nth-of-type(6) {
width: 15%;
}
}
.page-friends .box-board .board-mid .base-table td.td-info > .row {
color: #121212;
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .base-table td.td-info > .row {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .base-table td.td-info .img {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
background: #f4f8fb;
border-radius: 100%;
}
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .base-table td.td-info .img > img {
width: auto;
height: 88%;
}
}
.page-friends .box-board .board-mid .base-table td.td-info .grade {
font-size: 14px;
}
.page-friends .box-board .board-mid .base-table td.td-info .name {
display: flex;
margin-bottom: 8px;
font-size: 16px;
}
.page-friends .box-board .board-mid .base-table td.td-info .date {
font-size: 14px;
}
.page-friends .box-board .board-mid .base-table td .btns {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.page-friends .box-board .board-mid .base-table td .btns button {
width: fit-content;
min-width: 100px;
padding: 0 3px;
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .base-table td .btns button {
min-width: 132px;
padding: 0 20px;
}
}
.page-friends .box-board .board-mid .board-btns {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
padding: 20px 16px;
background: #e0e7ec;
}
@media (min-width: 801px) {
.page-friends .box-board .board-mid .board-btns {
position: static;
padding: 20px 0 0 0;
background: #fff;
}
}
.page-friends .box-board .board-mid .board-btns > div {
display: flex;
justify-content: space-between;
}
@media (min-width: 801px) {
.popup-add-freind .popupContent__body {
height: 580px;
}
}
.popup-add-freind .dl {
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 801px) {
.popup-add-freind .dl {
flex-direction: row;
}
}
.popup-add-freind .dl dt,
.popup-add-freind .dl dd {
display: flex;
gap: 10px;
}
.popup-add-freind .tbl-tit {
margin: 20px 0 10px;
font-size: 18px;
}
@media (min-width: 801px) {
.popup-add-freind .base-table {
width: 860px;
}
}
.popup-add-freind .base-table td.td-info > .row {
color: #121212;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.popup-add-freind .base-table td.td-info > .row .img {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
background: #f4f8fb;
border-radius: 100%;
}
.popup-add-freind .base-table td.td-info > .row .img > img {
width: auto;
height: 88%;
}
.popup-add-freind .base-table td.td-info > .row .name {
display: flex;
flex-direction: column;
}
@media (min-width: 801px) {
.popup-add-freind .base-table td.td-info > .row .name {
flex-direction: row;
}
}
.popup-add-freind .base-paging {
margin-top: 40px;
}
.page-friends.page-msgFriendList .box-board .board-mid .base-table th:nth-of-type(1) {
width: 13%;
}
.page-friends.page-msgFriendList .box-board .board-mid .base-table th:nth-of-type(3) {
width: 47%;
}
.page-friends.page-msgFriendList .box-board .board-mid .base-table th:nth-of-type(6) {
width: 40%;
}
.page-friends.page-msgRecvDenial .box-board .board-mid .base-table th:nth-of-type(1) {
width: 13%;
}
.page-friends.page-msgRecvDenial .box-board .board-mid .base-table th:nth-of-type(3) {
width: 87%;
}
.page-friends.page-msgFriendFind .box-board .board-mid {
overflow: hidden;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
@media (min-width: 801px) {
.page-friends.page-msgFriendFind .box-board .board-mid {
box-shadow: none;
}
}
.page-friends.page-msgFriendFind .box-board .board-mid .top {
padding: 30px;
background-color: #79d1c7;
text-align: center;
word-break: keep-all;
}
@media (min-width: 801px) {
.page-friends.page-msgFriendFind .box-board .board-mid .top {
padding: 55px 0 20px;
background-color: #f4f8fb;
font-size: 20px;
}
}
.page-friends.page-msgFriendFind .box-board .board-mid .bottom {
padding: 20px 0;
background-color: #fff;
}
@media (min-width: 801px) {
.page-friends.page-msgFriendFind .box-board .board-mid .bottom {
padding: 20px 0 55px;
background-color: #f4f8fb;
}
}
.page-friends.page-msgFriendFind .box-board .board-mid .bottom .base-radio-primary {
display: flex;
justify-content: center;
gap: 15px;
}
@media (min-width: 801px) {
.page-friends.page-msgFriendFind .box-board .board-mid .bottom .base-radio-primary {
gap: 108px;
}
}
.page-friends.page-msgFriendFind .box-board .board-bottom .board-btns {
justify-content: center;
}
@media (min-width: 801px) {
.page-studyAlarmDetail .base-board-view .view-card-top .row-tit {
background: #79d1c7;
color: #121212;
}
}
/* 회원정보 수정 */
.wrap.sub-container:has(.page-checkUserPassword) .location .location-wrap .sub-top-text {
display: none;
}
.page-checkUserPassword {
min-height: 780px;
}
.page-checkUserPassword .box-member-modify {
padding: 50px;
background: #f4f8fb;
border-radius: 20px;
}
.page-checkUserPassword .box-member-modify .my-id {
margin-bottom: 20px;
text-align: center;
font-size: 20px;
font-weight: 700;
}
.page-checkUserPassword .box-member-modify .box-ipts {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
.page-checkUserPassword .box-member-modify .box-ipts .user-pwd {
flex-shrink: 0;
width: 300px;
border-radius: 10px;
}
.page-checkUserPassword .box-member-modify .box-ipts .btn-check {
height: 44px;
}
.wrap.sub-container:has(.page-updateUserInfoForm) .location .location-wrap .sub-top-text {
display: none;
}
.page-updateUserInfoForm .base-table th {
border-right: 1px solid #dddddd;
}
.page-updateUserInfoForm .btn-edit {
margin: 80px auto 100px;
}
.page-updateUserInfoForm .base-ipt-text {
border-radius: 10px;
}
.page-updateUserInfoForm .box-update-my-info #tdSchool .base-ipt-text {
width: 270px;
}
.page-updateUserInfoForm .box-update-my-info .box-search-address .box-flex-wrap {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.page-updateUserInfoForm .box-update-my-info .box-search-address .box-flex-wrap #userAddr {
width: 730px;
}
.page-updateUserInfoForm .box-update-my-info .box-search-address #userAddrDetail {
width: 730px;
}
.page-updateUserInfoForm .box-update-my-info .box-tels > div {
display: flex;
gap: 7px;
}
.page-updateUserInfoForm .box-update-my-info .box-tels > div .base-ipt-text {
width: 150px;
}
.page-updateUserInfoForm .box-update-my-info #trRcmNum .base-ipt-text {
width: 320px;
}
.page-updateUserInfoForm .box-update-pwd .base-ipt-text {
width: 320px;
}
.page-updateUserInfoForm .box-update-pwd .base-table .box-flex-wrap {
overflow: visible;
gap: 11px;
}
.page-updateUserInfoForm .box-update-pwd .btn-tooltip {
position: relative;
width: 18px;
height: 18px;
}
.page-updateUserInfoForm .box-update-pwd .btn-tooltip > img {
width: 100%;
height: auto;
}
.page-updateUserInfoForm .box-update-pwd .btn-tooltip .tooltip-layer {
display: none;
position: absolute;
top: -136px;
left: 34px;
width: 324px;
padding: 26px;
border: 1px solid #222;
background: #fff;
z-index: 1;
}
.page-updateUserInfoForm .box-update-pwd .btn-tooltip .tooltip-layer .desc {
font-size: 14px;
font-weight: 500;
color: #222;
line-height: 1.2em;
}
.page-updateUserInfoForm .box-update-pwd .btn-tooltip .tooltip-layer .ex {
font-size: 12px;
font-weight: 500;
color: #ff842a;
}
.page-updateUserInfoForm .box-update-pwd .btn-tooltip .tooltip-layer .desc + .desc {
margin-top: 20px;
}
.page-updateUserInfoForm .box-update-pwd .btn-tooltip .tooltip-layer .desc + .ex {
margin-top: 10px;
}
.page-updateUserInfoForm .box-update-pwd .btn-tooltip .tooltip-layer .ex + .desc {
margin-top: 20px;
}
.page-updateUserInfoForm .box-update-pwd .btn-tooltip + p {
color: #777777;
}
.page-updateUserInfoForm .box-withdraw {
padding: 36px 50px 36px 30px;
background: #fbfbfb;
}
.page-updateUserInfoForm .box-withdraw dl {
display: flex;
align-items: center;
gap: 70px;
}
.page-updateUserInfoForm .box-withdraw dl dt {
font-size: 24px;
color: #00ab93;
}
.page-updateUserInfoForm .box-withdraw dl dd .withdraw-tel {
margin-bottom: 5px;
font-size: 20px;
font-weight: 700;
color: #666666;
}
.page-updateUserInfoForm .box-withdraw dl dd .withdraw-desc {
font-size: 16px;
line-height: 150%;
color: #999999;
}
.page-updateUserInfoForm .box-withdraw dl dd:nth-child(2) {
flex: 1;
}
/* =============================================================
고객센터
============================================================= */
.wrap.sub-container:has(.page-customer) .location .location-wrap .sub-top-text {
display: none;
}
.page-iSchoolNewsList,
.page-iSchoolNewsDetail {
background: #f4f8fb;
}
.page-studyProgramSetup .base-content-wrap {
padding-top: 0;
background: #f4f8fb;
}
.page-studyProgramSetup .base-page-desc {
margin-top: 0;
}
.page-studyProgramSetup .tbl-wrap .tbl-tit {
position: relative;
z-index: 2;
padding: 0 0 20px 12px;
line-height: 133.333%;
font-size: 24px;
font-weight: 700;
}
.page-studyProgramSetup .tbl-wrap .tbl-tit::before {
content: "";
position: absolute;
top: -4px;
left: 0;
z-index: -1;
width: 28px;
height: 28px;
border-radius: 100%;
background: #79d1c7;
}
.page-studyProgramSetup .tbl-wrap .btn-sm.type-download {
margin: 0 auto;
background: #f4f8fb;
border: 1px solid #aac0ce;
color: #01416c;
}
.page-studyProgramSetup .tbl-wrap + .tbl-wrap {
margin-top: 84px;
}
.page-useInquireForm .desc-wrap {
background: #f4f8fb;
padding: 0;
}
@media (min-width: 801px) {
.page-useInquireForm .desc-wrap {
padding: 40px 0;
}
}
.page-useInquireForm .desc-wrap .base-page-desc {
display: flex;
justify-content: space-between;
margin: 0 auto;
}
.page-useInquireForm .dl-wrap dt {
margin-bottom: 8px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-useInquireForm .dl-wrap dt {
margin-bottom: 20px;
}
}
.page-useInquireForm .dl-wrap + .dl-wrap {
margin-top: 16px;
}
@media (min-width: 801px) {
.page-useInquireForm .dl-wrap + .dl-wrap {
margin-top: 40px;
}
}
.page-useInquireForm .dl-wrap + .dl-wrap .select-wrap .select-menu,
.page-useInquireForm .dl-wrap + .dl-wrap .base-select-wrap .select-menu {
width: 100%;
}
.page-faqList .base-tab .tab__item {
padding: 12px 30px;
}
.page-faqList .top-cont-wrap {
padding-bottom: 30px;
background: #f4f8fb;
}
@media (min-width: 801px) {
.page-faqList .top-cont-wrap {
padding-bottom: 40px;
}
}
@media (min-width: 801px) {
.page-faqList .base-page-desc.type2 {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0;
}
}
.page-faqList .base-page-desc.type2 .btn-qna {
border-radius: 100px;
}
.page-faqList .search-wrap {
display: flex;
gap: 8px;
}
.page-faqList .search-wrap .ipt-search {
flex: 1;
}
.page-faqList .base-content-wrap .tab-cont-wrap {
background: #fff;
}
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr {
border-bottom: 1px dashed #cccccc;
}
@media (min-width: 801px) {
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr th,
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr td {
font-size: 18px;
}
}
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr th {
padding: 10px 34px 10px 10px;
background: url("/assets/renewal2023/img/ico/ico-toggle-arrow-bottom.png") no-repeat right 10px center/14px auto;
}
@media (min-width: 801px) {
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr th {
padding: 26px 34px 26px 20px;
}
}
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr th p {
padding: 0;
background: none;
text-align: left;
font-weight: 400;
}
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr th p::before {
content: "Q.";
display: inline-block;
margin: 2px 7px 0 0;
}
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr th p::after {
display: none;
}
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr th.on {
background-image: url("/assets/renewal2023/img/ico/ico-toggle-arrow-top.png");
}
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr th.on p {
font-weight: 700;
color: #121212;
}
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr td img {
width: auto;
max-width: 100%;
}
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr td.left {
padding: 10px;
background: #f5f5f5;
color: #777777;
}
@media (min-width: 801px) {
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr td.left {
padding: 26px 20px;
}
}
.page-faqList .base-content-wrap .tab-cont-wrap .faq_table.detail tr td.left > div {
padding: 0;
background: none;
}
/* =============================================================
푸터 footer
============================================================= */
/* 고객센터 */
.wrap.sub-container:has(.page-notice) .location__title_con::before {
content: "공지사항";
}
/* Media Query Size */
/*=================================================================
color
1. 색상이 변동되거나 background-color적용시 함수사용
ex)
.container {
background-color: color(main_bg);
}
.title {
color: color(gray_900);
}
2. 색상이 고정일 경우 class로 사용 => base.scss 파일 참고
====================================================================*/
/* =============================================================
common
============================================================= */
.base-page-tit {
padding: 40px 0 30px;
background-color: #f4f8fb;
}
@media (min-width: 801px) {
.base-page-tit {
padding: 60px 0 40px;
}
}
.base-page-tit .tit {
font-size: 40px;
font-weight: 700;
line-height: 135%;
text-align: center;
}
.base-page-tit .desc {
margin-top: 10px;
font-size: 18px;
font-weight: 400;
text-align: center;
color: #666666;
}
/* =============================================================
로그인
============================================================= */
.page-login .base-content-wrap.login-wrapper {
padding-top: 0;
}
@media (max-width: 801px) {
.page-login .base-content-wrap.login-wrapper {
padding-bottom: 0;
}
}
.page-login .login-con {
display: flex;
flex-direction: column;
}
@media (min-width: 801px) {
.page-login .login-con {
overflow: hidden;
flex-direction: row;
max-width: 960px;
min-height: 419px;
margin: 0 auto;
border-radius: 40px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
}
.page-login .login-con .login-form {
background-color: white;
}
@media (min-width: 801px) {
.page-login .login-con .login-form {
flex: 1;
}
}
.page-login .login-con .login-form .row {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 30px 16px 60px;
}
@media (min-width: 801px) {
.page-login .login-con .login-form .row {
padding: 0 80px;
}
}
.page-login .login-con .login-form .row label {
padding-bottom: 8px;
line-height: 150%;
font-size: 16px;
font-weight: 400;
}
.page-login .login-con .login-form .row .login-input {
display: block;
width: 100%;
margin-bottom: 16px;
}
.page-login .login-con .login-form .row .login-input:last-of-type {
margin-bottom: 0;
}
.page-login .login-con .login-form .row .login-btn {
width: 100%;
margin-top: 30px;
}
.page-login .login-con .login-form .row .singup-btn {
width: 100%;
margin-top: 16px;
}
.page-login .login-con .login-form .row .main-btn {
width: 100%;
margin-top: 16px;
}
.page-login .login-con .login-form .row .login-form-col {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
}
.page-login .login-con .login-form .row .login-form-col #id_save + label {
padding-bottom: 0;
background-position: 0 center;
}
.page-login .login-con .login-form .row .login-form-col .col-group {
display: flex;
gap: 25px;
align-items: center;
}
.page-login .login-con .login-form .row .login-form-col .col-group .sch-info {
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.page-login .login-con .login-form .row .login-form-col .col-group .sch-info.reset-id {
position: relative;
}
.page-login .login-con .login-form .row .login-form-col .col-group .sch-info.reset-id::after {
content: "";
display: block;
width: 1px;
height: 12px;
background: #D9D9D9;
position: absolute;
top: 50%;
right: -12.5px;
transform: translate(50%, -50%);
}
.page-login .login-con .login-form .row .login-user-info {
margin-bottom: 20px;
}
.page-login .login-con .login-form .row .login-user-info strong {
font-size: 18px;
font-weight: 700;
line-height: 144.444%;
}
.page-login .login-con .login-form .row .login-user-info span {
color: #00AB93;
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
display: block;
margin-top: 6px;
}
.page-login .login-con .login-form .row .login_image3 {
display: block;
width: 160px;
height: 160px;
margin: 0 auto;
}
@media (min-width: 801px) {
.page-login .login-con .login-form .row .login_image3 {
width: 220px;
height: 220px;
}
}
.page-login .login-con .login-bottom {
flex-wrap: wrap;
align-items: center;
justify-content: center;
display: flex;
padding: 40px 16px;
background: #f4f8fb;
}
@media (min-width: 801px) {
.page-login .login-con .login-bottom {
width: 400px;
flex-shrink: 0;
flex-direction: column;
justify-content: center;
align-items: center;
background: #FAFDFF;
}
}
.page-login .login-con .login-bottom > li:nth-child(1) {
width: 100%;
text-align: center;
order: -1;
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
margin-bottom: 16px;
}
@media (min-width: 801px) {
.page-login .login-con .login-bottom > li:nth-child(1) {
order: 2;
font-size: 16px;
line-height: 150%;
margin: 15px 0 10px;
}
}
.page-login .login-con .login-bottom > li:nth-child(2) {
flex-basis: 100px;
}
@media (min-width: 801px) {
.page-login .login-con .login-bottom > li:nth-child(2) {
order: 1;
}
}
.page-login .login-con .login-bottom > li:nth-child(2) .login_image {
width: 100%;
}
.page-login .login-con .login-bottom > li:nth-child(3) {
margin-left: 20px;
}
@media (min-width: 801px) {
.page-login .login-con .login-bottom > li:nth-child(3) {
order: 3;
text-align: center;
}
}
.page-login .login-con .login-bottom .cs-tel {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
}
.page-login .login-con .login-bottom .cs-time {
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
display: flex;
flex-direction: column;
}
@media (min-width: 801px) {
.page-login .login-con .login-bottom .cs-time {
font-size: 16px;
line-height: 150%;
}
}
.page-loginPwReset .login-con .login-form .row {
justify-content: flex-start;
}
.page-loginPwReset .login-con .login-form .row .check-user-id {
color: #121212;
text-align: center;
font-family: "Noto Sans KR";
font-size: 40px;
font-weight: 700;
line-height: 135%;
letter-spacing: -0.4px;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
@media (min-width: 801px) {
.page-loginPwReset .login-con .login-form .row {
padding: 60px 80px;
}
}
/* =============================================================
회원가입
============================================================= */
.page-signUp .base-content-wrap.signup-wrapper {
padding-top: 0;
}
.page-signUp .signup-top {
padding: 0 0 30px;
background-color: #f4f8fb;
}
@media (min-width: 801px) {
.page-signUp .signup-top {
padding: 0 0 100px;
}
}
.page-signUp .signup-step-container {
width: 100%;
padding-bottom: 40px;
background: #f4f8fb;
}
@media (min-width: 801px) {
.page-signUp .signup-step-container {
padding-bottom: 70px;
}
}
.page-signUp .signup-step-container > .base-inner {
max-width: 800px;
}
.page-signUp .signup-step {
display: flex;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
.page-signUp .signup-step > li {
width: 25%;
text-align: center;
padding: 10px 0;
}
.page-signUp .signup-step > li > p {
font-size: 20px;
font-weight: 700;
line-height: 140%;
color: #999999;
}
.page-signUp .signup-step > li > span {
display: block;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 128.571%;
color: #999999;
}
@media (min-width: 801px) {
.page-signUp .signup-step > li {
padding: 10px 0 14px;
}
.page-signUp .signup-step > li > p {
font-size: 28px;
font-weight: 700;
line-height: 114.286%;
}
.page-signUp .signup-step > li > span {
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
}
.page-signUp .signup-step > .on {
position: relative;
}
.page-signUp .signup-step > .on > p,
.page-signUp .signup-step > .on span {
color: #00ab93;
}
.page-signUp .signup-step > .on::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
border-radius: 20px;
border: 4px solid #00ab93;
box-sizing: border-box;
}
.page-signUp .signup-step .on-arrow-icon {
display: block;
position: absolute;
width: 100%;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
}
.page-signUp .signup-terms {
border: none;
margin-top: 0;
padding-top: 0;
}
.page-signUp .signup-terms .terms-table {
min-width: 100%;
}
.page-signUp .signup-terms .terms-table tr {
border-bottom: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
.page-signUp .signup-terms .terms-table thead th {
background-color: #ebebeb;
border-right: 1px solid #999 !important;
padding: 16px 0;
font-weight: 700;
letter-spacing: -0.16px;
border-right: 1px solid #999;
text-align: center;
}
.page-signUp .signup-terms .terms-table tbody th {
font-weight: 400;
border-right: 1px solid #999;
text-align: center;
}
.page-signUp .signup-terms .terms-table td {
padding: 20px 0px;
line-height: 150%;
border-right: 1px solid #999;
text-align: center;
}
.page-signUp .signup-btn-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
@media (min-width: 801px) {
.page-signUp .signup-btn-wrap {
gap: 16px;
}
}
.page-signUp .signup-btn-wrap .sign-up-btn {
width: 100%;
}
@media (min-width: 801px) {
.page-signUp .signup-btn-wrap .sign-up-btn {
width: 200px;
}
}
.page-signUp .login-con {
display: flex;
flex-direction: column;
}
@media (min-width: 801px) {
.page-signUp .login-con {
overflow: hidden;
flex-direction: row;
max-width: 960px;
min-height: 419px;
margin: 0 auto;
border-radius: 40px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
}
.page-signUp .login-con .login-form {
background-color: white;
}
@media (min-width: 801px) {
.page-signUp .login-con .login-form {
flex: 1;
}
}
.page-signUp .login-con .login-form .row {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 30px 16px;
}
@media (min-width: 801px) {
.page-signUp .login-con .login-form .row {
padding: 0 80px;
}
}
.page-signUp .login-con .login-form .row label {
padding-bottom: 8px;
line-height: 150%;
font-size: 16px;
font-weight: 400;
}
.page-signUp .login-con .login-form .row .login-input {
display: block;
width: 100%;
margin-bottom: 16px;
}
.page-signUp .login-con .login-form .row .login-input:last-of-type {
margin-bottom: 0;
}
.page-signUp .login-con .login-form .row .login-btn {
width: 100%;
margin-top: 30px;
}
.page-signUp .login-con .login-form .row .singup-btn {
width: 100%;
margin-top: 16px;
}
.page-signUp .login-con .login-form .row .main-btn {
width: 100%;
margin-top: 16px;
}
.page-signUp .login-con .login-form .row .login-form-col {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
}
.page-signUp .login-con .login-form .row .login-form-col .reset-password {
font-size: 16px;
font-weight: 400;
line-height: 150%;
border-bottom: 1px solid #121212;
}
.page-signUp .login-con .login-bottom {
flex-wrap: wrap;
align-items: center;
justify-content: center;
display: flex;
padding: 40px 16px;
background: #f4f8fb;
}
@media (min-width: 801px) {
.page-signUp .login-con .login-bottom {
width: 400px;
flex-shrink: 0;
flex-direction: column;
justify-content: center;
align-items: center;
background: #FAFDFF;
}
}
.page-signUp .login-con .login-bottom > li:nth-child(1) {
width: 100%;
text-align: center;
order: -1;
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
margin-bottom: 16px;
}
@media (min-width: 801px) {
.page-signUp .login-con .login-bottom > li:nth-child(1) {
order: 2;
font-size: 16px;
line-height: 150%;
margin: 15px 0 10px;
}
}
.page-signUp .login-con .login-bottom > li:nth-child(2) {
flex-basis: 100px;
}
@media (min-width: 801px) {
.page-signUp .login-con .login-bottom > li:nth-child(2) {
order: 1;
}
}
.page-signUp .login-con .login-bottom > li:nth-child(2) .login_image {
width: 100%;
}
.page-signUp .login-con .login-bottom > li:nth-child(3) {
margin-left: 20px;
}
@media (min-width: 801px) {
.page-signUp .login-con .login-bottom > li:nth-child(3) {
order: 3;
text-align: center;
}
}
.page-signUp .login-con .login-bottom .cs-tel {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
}
.page-signUp .login-con .login-bottom .cs-time {
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
display: flex;
flex-direction: column;
}
@media (min-width: 801px) {
.page-signUp .login-con .login-bottom .cs-time {
font-size: 16px;
line-height: 150%;
}
}
.page-signUpDiv .base-content-wrap.signup-wrapper {
padding-bottom: 0;
}
.page-signUpDiv .signup-select {
display: flex;
flex-direction: column;
gap: 20px;
}
.page-signUpDiv .signup-select > li {
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
.page-signUpDiv .signup-select > li > a {
padding: 20px 30px;
display: flex;
align-items: center;
gap: 20px;
}
.page-signUpDiv .signup-select-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
text-align: center;
border-radius: 50%;
}
.page-signUpDiv .signup-select-icon > img {
max-width: 84px;
}
.page-signUpDiv .signup-select-text {
font-size: 24px;
font-weight: 400;
line-height: 114.286%;
}
.page-signUpDiv .signup-select-text > strong {
font-weight: 900;
}
@media (min-width: 801px) {
.page-signUpDiv .signup-select {
flex-direction: row;
justify-content: center;
gap: 30px;
}
.page-signUpDiv .signup-select > li {
min-width: 380px;
border-radius: 40px;
}
.page-signUpDiv .signup-select > li > a {
flex-direction: column;
justify-content: center;
}
.page-signUpDiv .signup-select-icon {
width: 136px;
height: 136px;
}
.page-signUpDiv .signup-select-icon > img {
max-width: 100px;
}
}
.page-signUpDiv .member-benefit-info {
padding: 30px 0 80px;
background-color: #fff;
}
@media (min-width: 801px) {
.page-signUpDiv .member-benefit-info {
padding-top: 60px;
}
}
.page-signUpDiv .free-benefit,
.page-signUpDiv .charge-benefit {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.page-signUpDiv .member-benefit-title {
margin-bottom: 10px;
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
}
@media (min-width: 801px) {
.page-signUpDiv .member-benefit-title {
margin-bottom: 8px;
font-size: 28px;
font-weight: 700;
line-height: 114.286%;
}
}
.page-signUpDiv .member-benefit-description {
font-size: 16px;
font-weight: 400;
line-height: 150%;
margin-bottom: 20px;
}
.page-signUpDiv .member-benefit-description > span {
text-decoration: underline;
}
.page-signUpDiv .benefit-detail {
display: inline-flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
border-radius: 17px;
background-color: #f4f8fb;
color: #01416c;
font-size: 14px;
line-height: 128.571%;
margin-bottom: 8px;
}
@media (min-width: 801px) {
.page-signUpDiv .benefit-detail {
font-size: 16px;
line-height: 150%;
margin-bottom: 10px;
}
}
.page-signUpDiv .arrow-icon-wrap {
align-self: center;
}
.page-signUpDiv .member-benefit-info-mobile .free-benefit {
margin-bottom: 50px;
}
.page-signUpDiv .member-benefit-info-mobile .member-benefit-description:last-child {
font-size: 14px;
line-height: 128.571%;
}
.page-signUpDiv .member-benefit-info-pc {
display: none;
max-width: 1440px;
margin: 0 auto;
}
.page-signUpDiv .member-benefit-info-pc .benefit-detail-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.page-signUpDiv .member-benefit-info-pc .cs-tel-warp {
margin-top: 40px;
}
.page-signUpDiv .member-benefit-info-pc .cs-tel-warp > span {
padding: 0 20px;
}
.page-signUpDiv .member-benefit-info-pc .cs-tel-warp > span:nth-child(1) {
display: inline-block;
position: relative;
}
.page-signUpDiv .member-benefit-info-pc .cs-tel-warp > span:nth-child(1)::after {
content: "";
position: absolute;
width: 1px;
height: 29px;
top: 50%;
margin-top: -14px;
right: -1px;
background-color: #d9d9d9;
}
@media (min-width: 801px) {
.page-signUpDiv .member-benefit-info-pc {
display: flex;
justify-content: space-around;
}
}
.page-signUpTerm .policy-agree {
max-width: 1200px;
margin: 0 auto;
padding: 20px 16px 0;
border: 0;
}
@media (min-width: 801px) {
.page-signUpTerm .policy-agree {
padding: 60px 0 0 0;
}
}
.page-signUpTerm .policy-agree .agree-set {
margin-top: 0;
}
.page-signUpTerm .policy-agree .agree-set + .agree-set {
margin-top: 40px;
}
@media (min-width: 801px) {
.page-signUpTerm .policy-agree .agree-set + .agree-set {
margin-top: 60px;
}
}
.page-signUpTerm .policy-agree .agree-set .policy-content {
margin-top: 16px;
}
.page-signUpTerm .agree-set-checkbox span {
display: inline;
font-size: 16px;
line-height: 150%;
}
.page-signUpTerm .all-agree-checkbox {
margin: 60px 0 20px;
}
@media (min-width: 801px) {
.page-signUpTerm .all-agree-checkbox {
text-align: center;
}
}
.page-signUpTerm .all-agree-checkbox label {
height: auto;
}
.page-signUpCert .certify {
padding: 20px 16px 0;
}
@media (min-width: 801px) {
.page-signUpCert .certify {
padding: 60px 0 0 0;
max-width: 800px;
margin: 0 auto;
}
}
.page-signUpCert .certify .certify-info {
text-align: center;
}
.page-signUpCert .certify .certify-info-title {
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
}
.page-signUpCert .certify .certify-info-description {
margin: 6px 0 4px;
font-weight: 400;
line-height: 150%;
}
.page-signUpCert .certify .certify-info-warning {
font-weight: 700;
line-height: 150%;
}
.page-signUpCert .certify .certify-con {
margin-top: 20px;
border-radius: 40px;
padding: 40px 18px;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.page-signUpCert .certify .certify-con-icon {
width: 80px;
}
.page-signUpCert .certify .certify-con-icon img {
width: 100%;
}
.page-signUpCert .certify .certify-con-text {
grid-column: 2/4;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.page-signUpCert .certify .certify-con-text > p:nth-child(1) {
font-size: 18px;
font-weight: 700;
line-height: 144.444%;
}
.page-signUpCert .certify .certify-con-text > p:nth-child(2) {
font-size: 14px;
line-height: 128.571%;
}
.page-signUpCert .certify .certify-con-btn {
grid-column: 1/4;
width: 100%;
margin-top: 20px;
}
.page-signUpCert .certify .certify-con-btn > a {
width: 100%;
}
@media (min-width: 801px) {
.page-signUpCert .certify .certify-con-btn > a {
width: fit-content;
}
}
@media (min-width: 801px) {
.page-signUpCert .certify .certify-con {
margin-top: 34px;
padding: 30px 80px;
gap: 0 80px;
}
.page-signUpCert .certify .certify-con-icon {
width: 220px;
grid-row: 1/4;
}
.page-signUpCert .certify .certify-con-text {
justify-content: flex-end;
margin-top: 20px;
}
.page-signUpCert .certify .certify-con-text > p:nth-child(1) {
font-size: 28px;
font-weight: 700;
line-height: 114.286%;
}
.page-signUpCert .certify .certify-con-text > p:nth-child(2) {
font-size: 20px;
line-height: 140%;
}
.page-signUpCert .certify .certify-con-btn {
grid-column: 2/4;
grid-row: 2/4;
}
}
.page-signUpInsertInfo .signup-form {
padding-top: 10px;
}
@media (min-width: 801px) {
.page-signUpInsertInfo .signup-form {
padding-top: 30px;
}
}
.page-signUpInsertInfo .signup-form .signup-box {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 0;
border-bottom: 1px dashed #cccccc;
}
@media (min-width: 801px) {
.page-signUpInsertInfo .signup-form .signup-box {
flex-direction: row;
gap: 0;
max-width: 840px;
margin: 0 auto;
padding: 20px 34px;
}
}
.page-signUpInsertInfo .signup-form .signup-box dt {
font-size: 18px;
}
@media (min-width: 801px) {
.page-signUpInsertInfo .signup-form .signup-box dt {
width: 170px;
}
}
@media (min-width: 801px) {
.page-signUpInsertInfo .signup-form .signup-box dd {
flex: 1;
}
}
.page-signUpInsertInfo .signup-form .signup-box dd .row {
display: flex;
align-items: center;
gap: 8px;
}
.page-signUpInsertInfo .signup-form .signup-box dd .row .btn-sm {
flex-shrink: 0;
}
.page-signUpInsertInfo .signup-form .signup-box dd .row + .row {
margin-top: 10px;
}
.page-signUpInsertInfo .signup-form .signup-box dd .col {
width: 100%;
}
.page-signUpInsertInfo .signup-form .signup-box dd .info-txt {
position: relative;
margin-top: 10px;
padding-left: 30px;
line-height: 150%;
font-size: 16px;
color: #666666;
}
.page-signUpInsertInfo .signup-form .signup-box dd .info-txt::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-info-primary.png") no-repeat center/cover;
}
.page-signUpInsertInfo .signup-form .signup-box dd .info-box {
margin-top: 20px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 20px;
}
.page-signUpInsertInfo .signup-form .signup-box dd .info-box li {
position: relative;
padding-left: 10px;
color: #666666;
}
.page-signUpInsertInfo .signup-form .signup-box dd .info-box li::before {
content: "";
position: absolute;
top: 11px;
left: 0;
width: 4px;
height: 4px;
background: #00ab93;
border-radius: 100%;
line-height: 128%;
}
.page-signUpInsertInfo .signup-form .signup-box dd .info-box li + li {
margin-top: 10px;
}
.page-signUpInsertInfo .signup-form .signup-box dd .info-tip {
position: relative;
width: fit-content;
height: auto;
margin-top: 10px;
padding: 16px 20px;
background: #FFF6DB;
border: 1px solid #FFD349;
border-radius: 10px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
font-size: 14px;
}
.page-signUpInsertInfo .signup-form .signup-box dd .info-tip::before {
position: absolute;
top: -10px;
content: "";
width: 13px;
height: 10px;
background: url(/assets/renewal2023/img/ico/ico-layer-arrow.png) no-repeat center/cover;
}
.page-signUpInsertInfo .signup-form .signup-box dd .val-txt {
overflow: hidden;
position: relative;
margin-top: 10px;
padding-left: 30px;
line-height: 150%;
font-size: 16px;
color: #f04d69;
}
.page-signUpInsertInfo .signup-form .signup-box dd .val-txt::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
background: url("/assets/renewal2023/img/ico/ico-x.png") no-repeat center/cover;
}
.page-signUpInsertInfo .signup-form .signup-box dd .base-ipt-text {
max-width: 480px;
}
.page-signUpInsertInfo .signup-form .signup-box dd .base-ipt-text[type=tes] {
max-width: 160px;
}
.page-signUpInsertInfo .signup-form .signup-box dd .base-select-wrap {
width: 100%;
}
.page-signUpInsertInfo .signup-form .signup-box dd .row-school {
flex-direction: column;
}
@media (min-width: 801px) {
.page-signUpInsertInfo .signup-form .signup-box dd .row-school {
flex-direction: row;
}
}
.page-signUpInsertInfo .signup-form .signup-box dd .row-school .select-menu {
width: 100%;
}
.page-signUpInsertInfo .signup-form .signup-box dd .row-grade {
flex-wrap: wrap;
width: 100%;
}
.page-signUpInsertInfo .signup-form .signup-box dd .row-grade .col {
flex: 0 0 32%;
}
.page-signUpInsertInfo .signup-form .btns-wrap {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 40px;
}
.page-signUpInsertInfo .FindSchool_input {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px 0;
gap: 8px;
}
@media (max-width: 801px) {
.page-signUpInsertInfo .FindSchool_input #searchSchoolName {
width: 100%;
min-width: auto;
max-width: unset;
}
.page-signUpInsertInfo .FindSchool_input .base-select-wrap {
width: 100%;
}
.page-signUpInsertInfo .FindSchool_input .base-select-wrap .select-menu {
width: 100%;
}
}
.page-signUpInsertInfo .no-school-lst {
margin: 40px 0 100px 0;
}
.page-signUpInsertInfo .no-school-lst::before {
content: "";
display: block;
width: 64px;
height: 100px;
margin: 0 auto 10px;
background: url("/assets/renewal2023/img/common/character-nodata.png") no-repeat center/cover;
}
.page-signUpInsertInfo .no-school-lst p {
text-align: center;
font-size: 24px;
color: #999999;
}
.page-signUpInsertInfo .base-popup-wrap .b-modal {
background-color: rgb(0, 0, 0);
position: fixed;
inset: 0px;
opacity: 0.7;
z-index: 9998;
cursor: pointer;
}
.page-signUpInsertInfo .base-popup {
display: block;
}
.page-signUpInsertInfo .base-popup.type2 {
width: auto;
margin: 0 auto;
overflow: hidden;
display: block;
margin: 0 auto;
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
.page-signUpInsertInfo .base-popup .popupContent__body {
max-width: 640px;
min-height: unset;
max-height: unset;
overflow: hidden;
}
.page-signUpInsertInfo .base-popup .popupContent__body .base-paging {
margin: 40px 0;
}
.page-signUpInsertInfo .base-ipt-wrap {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.page-signUpInsertInfo .base-ipt-wrap .btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.page-signUpInsertInfo .base-ipt-wrap .btn .btn-icon {
width: auto;
height: 16px;
display: block;
}
@media (max-width: 801px) {
.page-signUpInsertInfo #popupLayer {
width: 100%;
margin: 0;
border-radius: 0;
}
.page-signUpInsertInfo #popupLayer .popupContent__body,
.page-signUpInsertInfo #popupLayer .base-popup .popupContent__body {
padding: 20px 40px 0;
}
.page-signUpInsertInfo #popupLayer .popupContent__header {
padding: 15px 16px;
border-radius: 0;
}
.page-signUpInsertInfo #popupLayer .popupContent__body {
padding: 20px 16px 0;
height: 512px;
overflow-y: scroll;
}
.page-signUpInsertInfo #popupLayer .popupContent__body p {
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
.page-signUpInsertInfo .base-table tbody tr th:nth-child(1) {
width: 76%;
}
.page-signUpInsertInfo .base-table tbody tr th:nth-child(2) {
width: 24%;
}
.page-signUpInsertInfo .base-table tbody tr td {
padding: 16px 0;
line-height: 0;
}
.page-signUpInsertInfo .base-paging {
gap: 3px;
}
}
.page-signUpInsert .base-content-wrap.signup-wrapper {
padding-bottom: 0;
}
@media (min-width: 801px) {
.page-signUpInsert .base-content-wrap.signup-wrapper {
padding-bottom: 100px;
}
}
.page-signUpInsert .signup-completed-text {
text-align: center;
font-size: 18px;
margin-bottom: 10px;
}
@media (min-width: 801px) {
.page-signUpInsert .signup-completed-text {
line-height: 133%;
font-size: 24px;
}
}
/*===============================================================
푸터 내 페이지 (개인정보처리방침, 이용약관, 찾아오시는 길)
=================================================================*/
.page-footer .terms-top-wrap {
margin-bottom: 50px;
}
@media (min-width: 801px) {
.page-footer .terms-top-wrap {
margin-bottom: 60px;
}
}
.page-footer .terms-top-wrap > h3 {
margin-bottom: 20px;
line-height: 140%;
font-size: 20px;
font-weight: 700;
}
@media (min-width: 801px) {
.page-footer .terms-top-wrap > h3 {
font-size: 24px;
}
}
.page-footer .terms-top-wrap p {
margin-bottom: 20px;
word-break: keep-all;
font-size: 16px;
line-height: 150%;
color: #666666;
}
@media (min-width: 801px) {
.page-footer .terms-sort-wrap .base-select-wrap .select-menu {
margin-left: auto;
}
}
.page-footer .terms-select-wrap .privacy-select {
margin-top: 40px;
border-top: 2px solid #121212;
padding-top: 40px;
}
@media (min-width: 801px) {
.page-footer .terms-select-wrap .privacy-select {
margin-top: 60px;
padding-top: 60px;
}
}
@media (min-width: 801px) {
.page-footer .terms-select-wrap .privacy-select:first-of-type {
margin-top: 20px;
}
}
.page-footer .terms-select-wrap .privacy-select > li + li {
margin-top: 50px;
}
@media (min-width: 801px) {
.page-footer .terms-select-wrap .privacy-select > li + li {
margin-top: 80px;
}
}
.page-footer .terms-select-wrap .privacy-select > li > h4 {
margin-bottom: 20px;
font-size: 18px;
font-weight: 700;
line-height: 150%;
color: #00ab93;
}
@media (min-width: 801px) {
.page-footer .terms-select-wrap .privacy-select > li > h4 {
font-size: 20px;
}
}
.page-footer .terms-select-wrap .privacy-select > li p, .page-footer .terms-select-wrap .privacy-select > li h5 {
margin-bottom: 20px;
word-break: keep-all;
font-size: 16px;
line-height: 150%;
color: #666666;
}
.page-footer .terms-select-wrap .privacy-select > li > strong {
display: block;
margin: 25px 0 8px;
}
.page-footer .terms-select-wrap .privacy-select > li a {
color: #00ab93;
}
.page-footer .terms-select-wrap .privacy-select > li p strong {
color: #00ab93;
font-weight: 500;
}
.page-footer .terms-tbl-wrap {
margin-bottom: 20px;
}
.page-footer .terms-tbl-wrap .terms-table {
margin-bottom: 10px;
min-width: 1200px;
border: 1px solid #999;
}
.page-termsAndConditions .terms-sort-wrap {
display: flex;
gap: 16px;
}
@media (min-width: 801px) {
.page-termsAndConditions .terms-sort-wrap {
justify-content: flex-end;
}
}
.page-direction .direction-table {
margin: 60px auto 0;
}
.page-direction .direction-table > h4 {
margin-bottom: 20px;
font-size: 20px;
font-weight: 700;
line-height: 140%;
}
.page-direction .direction-table table {
width: 100%;
border-top: 2px solid #121212;
}
.page-direction .direction-table table tr {
border-bottom: 1px solid #dddddd;
}
.page-direction .direction-table table th {
border-right: 1px solid #dddddd;
}
.page-direction .direction-table table td {
padding: 20px 0 20px 40px;
font-size: 16px;
font-weight: 400;
line-height: 150%;
color: #666666;
}
.page-direction .direction-table table td > p {
font-weight: 700;
color: #121212;
margin-bottom: 6px;
}
.page-direction .subway {
margin-bottom: 10px !important;
}
.page-direction .subway > span {
margin-right: 10px;
display: inline-flex;
height: 27px;
padding: 4px 12px 5px 12px;
align-items: flex-start;
gap: 10px;
flex-shrink: 0;
border-radius: 14px;
font-size: 14px;
line-height: 128.571%;
background-color: #fff;
}
.page-direction .subway > span:nth-child(1) {
color: #8936df;
border: 1px solid #8936df;
}
.page-direction .subway > span:nth-child(2) {
color: #b5510c;
border: 1px solid #b5510c;
}
.page-direction .subway > span:nth-child(3) {
color: #73b6e4;
border: 1px solid #73b6e4;
}
.page-direction .subway > span:nth-child(4) {
color: #7bc3a4;
border: 1px solid #7bc3a4;
}
/*========================================================
초등 푸르넷
공통
-학습 이어하기
-자기주도 학습 영상
-학습이 없을 떄
-팝업
==========================================================*/
.my-study-room-week,
.page-myStudyRoomMonth,
.page-myStudyLearnProgressMap {
max-width: 100%;
background-color: #f4f8fb;
padding-top: 20px;
}
@media (min-width: 801px) {
.my-study-room-week-inner,
.page-myStudyRoomMonth-inner,
.page-myStudyLearnProgressMap-inner {
max-width: 1200px;
margin: 0 auto;
}
}
.my-study-room-week .date-wrap,
.page-myStudyRoomMonth .date-wrap,
.page-myStudyLearnProgressMap .date-wrap {
margin: 40px 0 56px;
}
.my-study-room-week .date-wrap .tab__item.on,
.page-myStudyRoomMonth .date-wrap .tab__item.on,
.page-myStudyLearnProgressMap .date-wrap .tab__item.on {
background-color: #01416c;
}
.my-study-room-week .date-wrap .tab__item.on .tab__item__text,
.page-myStudyRoomMonth .date-wrap .tab__item.on .tab__item__text,
.page-myStudyLearnProgressMap .date-wrap .tab__item.on .tab__item__text {
color: #fff;
}
.my-study-room-week .date-wrap .tab__item.on::after,
.page-myStudyRoomMonth .date-wrap .tab__item.on::after,
.page-myStudyLearnProgressMap .date-wrap .tab__item.on::after {
content: "";
display: block;
background: url(/assets/renewal2023/img/ico/ico-arrow-bottom.png) no-repeat center/contain;
width: 16px;
height: 14px;
position: absolute;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
}
.answerAndExplanList-popup .popupContent__title > span {
padding: 4px 10px;
border-radius: 20px;
font-size: 14px;
font-weight: 700;
line-height: 128.571%;
background-color: #fff;
color: #00ab93;
}
.answerAndExplanList-popup .answer-explan-list-title {
text-align: center;
}
.answerAndExplanList-popup .answer-explan-list-title > h4 {
font-size: 28px;
line-height: 114.286%;
margin-bottom: 4px;
}
.answerAndExplanList-popup .answer-explan-list-con {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 24px;
}
.answerAndExplanList-popup .answer-explan-list-con > li {
position: relative;
border: 1px solid #ddd;
border-radius: 10px;
background-color: white;
overflow: hidden;
width: 120px;
height: 150px;
}
.answerAndExplanList-popup .answer-explan-list-con > li > a {
display: block;
width: 100%;
height: 100%;
}
.answerAndExplanList-popup .answer-explan-list-con > li > a > img {
width: 100%;
}
.answerAndExplanList-popup .answer-explan-list-con > li > a:hover {
background-color: rgba(18, 18, 18, 0.5);
}
.answerAndExplanList-popup .answer-explan-list-con > li > a:hover::after {
display: block;
content: "";
background-color: #00ab93;
width: 48px;
height: 48px;
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M15.9993 21.9603C15.7793 21.9603 15.566 21.927 15.3727 21.8537C15.1793 21.7803 14.9993 21.667 14.8327 21.5003L8.83268 15.5003C8.49935 15.167 8.33935 14.7803 8.35268 14.3337C8.36602 13.887 8.52602 13.5003 8.83268 13.167C9.16602 12.8337 9.55935 12.6603 10.0193 12.647C10.4793 12.6337 10.8727 12.7937 11.206 13.127L14.3327 16.2537V4.33366C14.3327 3.86033 14.4927 3.46699 14.8127 3.14699C15.1327 2.82699 15.526 2.66699 15.9993 2.66699C16.4727 2.66699 16.866 2.82699 17.186 3.14699C17.506 3.46699 17.666 3.86033 17.666 4.33366V16.2537L20.7927 13.127C21.126 12.7937 21.5193 12.6337 21.9793 12.647C22.4393 12.6603 22.8327 12.8337 23.166 13.167C23.4727 13.5003 23.6327 13.887 23.646 14.3337C23.6593 14.7803 23.4993 15.167 23.166 15.5003L17.166 21.5003C16.9993 21.667 16.8193 21.787 16.626 21.8537C16.4327 21.9203 16.226 21.9603 15.9993 21.9603ZM5.99935 29.3337C5.07935 29.3337 4.29935 29.007 3.64602 28.3537C2.99268 27.7003 2.66602 26.9137 2.66602 26.0003V22.667C2.66602 22.1937 2.82602 21.8003 3.14602 21.4803C3.46602 21.1603 3.85935 21.0003 4.33268 21.0003C4.80602 21.0003 5.19935 21.1603 5.51935 21.4803C5.83935 21.8003 5.99935 22.1937 5.99935 22.667V26.0003H25.9993V22.667C25.9993 22.1937 26.1594 21.8003 26.4794 21.4803C26.7994 21.1603 27.1927 21.0003 27.666 21.0003C28.1393 21.0003 28.5327 21.1603 28.8527 21.4803C29.1727 21.8003 29.3327 22.1937 29.3327 22.667V26.0003C29.3327 26.9203 29.006 27.7003 28.3527 28.3537C27.6993 29.007 26.9127 29.3337 25.9993 29.3337H5.99935Z' fill='white'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 50% 50%;
display: inline-flex;
align-items: center;
justify-self: center;
position: absolute;
top: 50%;
left: 50%;
margin-top: -24px;
margin-left: -24px;
}
@media (min-width: 801px) {
.answerAndExplanList-popup .popupContent {
min-width: 960px;
max-width: 960px;
}
.answerAndExplanList-popup .popupContent__title > span {
font-size: 20px;
font-weight: 700;
line-height: 140%;
}
.answerAndExplanList-popup .popupContent__body {
min-height: 544px;
max-height: 544px;
overflow-y: auto;
}
.answerAndExplanList-popup .answer-explan-list-title > div > h4 {
font-size: 28px;
line-height: 114.286%;
}
.answerAndExplanList-popup .answer-explan-list-con {
margin-top: 59px;
}
}
.my-study-con-inner {
padding: 0 16px;
}
@media (min-width: 801px) {
.my-study-con-inner {
padding: 0;
}
}
.study-continue {
margin: 0 16px 20px 16px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
border-radius: 20px;
overflow: hidden;
}
.study-continue > div {
display: flex;
flex-direction: column;
border-radius: 20px;
box-shadow: 0 0 0 2px #79d1c7 inset;
}
.study-continue > div > h4 {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 8px 0;
font-size: 16px;
font-weight: 900;
line-height: 150%;
}
.study-continue > div > ul {
display: flex;
gap: 20px;
padding: 16px 20px;
justify-content: space-around;
flex-grow: 1;
}
.study-continue-btn {
margin-left: auto;
padding: 20px 30px 20px 20px;
}
.study-continue-btn > a {
display: block;
width: 150px;
border-radius: 16px;
padding: 4px 0;
display: flex;
align-items: center;
justify-content: center;
}
.study-continue-btn > a:first-child {
margin-bottom: 8px;
}
@media (min-width: 801px) {
.study-continue {
margin: 0 0 40px 0;
flex: 1;
}
.study-continue > div {
flex-direction: row;
}
.study-continue > div > h4 {
flex-basis: 200px;
}
.study-continue > div > ul {
padding: 24px 0;
}
}
.subject-item > a {
display: flex;
align-items: center;
}
.subject-item > a > p {
width: 24px;
}
.subject-item > a > p > img {
width: 100%;
}
.subject-item > a > span {
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
@media (min-width: 801px) {
.subject-item {
padding-right: 44px;
border-right: 1px dotted #dddddd;
}
.subject-item > a {
gap: 10px;
}
.subject-item > a > p {
width: 64px;
height: 64px;
border-radius: 50%;
background-color: #f4f8fb;
display: inline-flex;
align-items: center;
justify-content: center;
}
.subject-item > a > p > img {
max-width: 48px;
}
}
.study-week-plan-date .selected-date {
padding: 20px 16px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
}
.study-week-plan-date .selected-date > div {
display: flex;
align-items: center;
gap: 8px;
}
.study-week-plan-date .selected-date > div > a {
display: inline-flex;
align-items: center;
justify-content: center;
}
.study-week-plan-date .selected-date > div > span {
font-size: 18px;
font-weight: 700;
line-height: 144.444%;
}
.study-week-plan-date .today {
padding: 7px 20px;
background-color: #79d1c7;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 801px) {
.study-week-plan-date {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
border-radius: 0px 0px 20px 20px;
padding: 20px 40px;
}
.study-week-plan-date .selected-date {
justify-content: space-between;
padding: 0;
gap: 40px;
}
.study-week-plan-date .today {
background-color: transparent;
border: 1px solid #00ab93;
border-radius: 20px;
color: #121212;
}
}
.date-prev-icon {
display: inline-block;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20ZM8.87792 10.0037L12.9515 6.24091C13.2109 6.00127 13.3421 5.69702 13.3333 5.36584C13.3217 5.06159 13.1992 4.78156 12.9748 4.55539C12.9719 4.55135 12.9682 4.54799 12.9646 4.54462C12.9609 4.54126 12.9573 4.53789 12.9544 4.53385C12.7037 4.30499 12.3918 4.17844 12.0508 4.16767C11.6864 4.15421 11.3658 4.27806 11.1034 4.52039L6.29387 8.96304C6.13064 9.11382 6.01113 9.28614 5.93534 9.47731C5.8683 9.64963 5.83332 9.82734 5.83332 10.0024C5.83332 10.1774 5.8683 10.3551 5.93534 10.5274C6.01113 10.7186 6.13064 10.8936 6.29387 11.0417L11.0889 15.4708C11.3425 15.7051 11.666 15.829 12.0187 15.829C12.3714 15.829 12.695 15.7051 12.9486 15.4708C12.9544 15.4655 12.9631 15.4574 12.969 15.4493C13.1992 15.2178 13.3217 14.927 13.3217 14.6092C13.3217 14.2915 13.1934 13.9873 12.9486 13.7638L8.87792 10.0037Z' fill='%2301416C'/%3E%3C/svg%3E") no-repeat 50% 50%;
}
@media (min-width: 801px) {
.date-prev-icon {
width: 24px;
height: 24px;
}
}
.date-next-icon {
display: inline-block;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM11.1221 10.0037L7.04853 6.24091C6.7891 6.00127 6.65794 5.69702 6.66668 5.36584C6.67834 5.06159 6.80076 4.78156 7.02521 4.55539C7.02813 4.55135 7.03177 4.54799 7.03541 4.54462C7.03906 4.54126 7.0427 4.53789 7.04561 4.53385C7.29629 4.30499 7.60819 4.17844 7.94923 4.16767C8.31359 4.15421 8.63423 4.27806 8.89657 4.52039L13.7061 8.96304C13.8694 9.11382 13.9889 9.28614 14.0647 9.47731C14.1317 9.64963 14.1667 9.82734 14.1667 10.0024C14.1667 10.1774 14.1317 10.3551 14.0647 10.5274C13.9889 10.7186 13.8694 10.8936 13.7061 11.0417L8.91114 15.4708C8.65755 15.7051 8.33399 15.829 7.98129 15.829C7.62859 15.829 7.30504 15.7051 7.05144 15.4708C7.04561 15.4655 7.03687 15.4574 7.03104 15.4493C6.80076 15.2178 6.67834 14.927 6.67834 14.6092C6.67834 14.2915 6.80659 13.9873 7.05144 13.7638L11.1221 10.0037Z' fill='%2301416C'/%3E%3C/svg%3E") no-repeat 50% 50%;
}
@media (min-width: 801px) {
.date-next-icon {
width: 24px;
height: 24px;
}
}
.date-next-disabled-icon {
display: inline-block;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath opacity='0.1' fill-rule='evenodd' clip-rule='evenodd' d='M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM11.1221 10.0037L7.04853 6.24091C6.7891 6.00127 6.65794 5.69702 6.66668 5.36584C6.67834 5.06159 6.80076 4.78156 7.02521 4.55539C7.02813 4.55135 7.03177 4.54799 7.03541 4.54462C7.03906 4.54126 7.0427 4.53789 7.04561 4.53385C7.29629 4.30499 7.60819 4.17844 7.94923 4.16767C8.31359 4.15421 8.63423 4.27806 8.89657 4.52039L13.7061 8.96304C13.8694 9.11382 13.9889 9.28614 14.0647 9.47731C14.1317 9.64963 14.1667 9.82734 14.1667 10.0024C14.1667 10.1774 14.1317 10.3551 14.0647 10.5274C13.9889 10.7186 13.8694 10.8936 13.7061 11.0417L8.91114 15.4708C8.65755 15.7051 8.33399 15.829 7.98129 15.829C7.62859 15.829 7.30504 15.7051 7.05144 15.4708C7.04561 15.4655 7.03687 15.4574 7.03104 15.4493C6.80076 15.2178 6.67834 14.927 6.67834 14.6092C6.67834 14.2915 6.80659 13.9873 7.05144 13.7638L11.1221 10.0037Z' fill='black'/%3E%3C/svg%3E") no-repeat 50% 50%;
}
@media (min-width: 801px) {
.date-next-disabled-icon {
width: 24px;
height: 24px;
}
}
.study-week-plan-day {
margin: 20px 16px;
}
.study-week-plan-day .tab__type2 .tab__list {
justify-content: center;
}
.study-week-plan-day .tab__type2 .tab__item {
max-width: 89px;
}
.study-week-plan-day .tab__item__text {
color: #01416c;
}
@media (min-width: 801px) {
.study-week-plan-day {
margin: 40px 0;
}
}
.study-week-plan-day .tab__item[selected=selected] {
background-color: #01416c;
color: #fff;
border-radius: 44px;
padding: 4px 12px;
}
.study-plan-tab .tab {
border-bottom: 1px solid #ccc;
}
.study-plan-tab span {
display: none;
}
@media (min-width: 801px) {
.study-plan-tab span {
display: inline;
}
}
/*=================================================================
초등 푸르넷
* tag
1.이어하기(학습중), 2.시험보기(미응시), 3.과제하기(제출전), 4.학습하기(학습전 ) tag
* stamp
복습하기(참잘했어요), 결과보기(수고하셨습니다), 제출완료(참 잘했어요)
* 없음
독서하기
툴팁(모양만/ 항상 노출)
결과보기 => 응시가 완료된 경우 "응시날짜 + 점수표시"
과제하기 => 마감일이 포커싱이 된 날짜인 경우 "오늘 마감"
푸르넷 수학(1-2학년)
*tag
1.학습하기(학습전), 2.이어하기(진행중)
*stamp
1.복습하기(참잘했어요)
======================================================================*/
.study-week-plan-contents {
position: relative;
margin-bottom: 100px;
}
.study-week-plan-contents .swiper-button-prev,
.study-week-plan-contents .swiper-button-next {
width: 48px;
height: 48px;
background-size: 48px;
margin-top: -48px;
}
.study-week-plan-contents .swiper-button-prev {
left: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M32.673 8.32074L32.6732 8.32057L32.6807 8.32845C33.0432 8.70867 33.2274 9.16695 33.2274 9.69076C33.2274 10.215 33.0426 10.6637 32.673 11.019L19.182 23.9891L32.673 36.9593C33.0668 37.3378 33.266 37.7942 33.249 38.3165C33.2325 38.8256 33.0399 39.2732 32.6807 39.6498L32.6809 39.65L32.673 39.6576C32.2829 40.0326 31.8192 40.2332 31.2914 40.2491C30.7581 40.2651 30.2884 40.0778 29.8948 39.6993L15.5649 25.9227C15.2805 25.6493 15.0701 25.3404 14.9399 24.996C14.8141 24.6636 14.75 24.3275 14.75 23.9891C14.75 23.6508 14.8141 23.3147 14.9399 22.9823C15.0701 22.6379 15.2805 22.329 15.5649 22.0555L29.8513 8.32074C30.2448 7.94244 30.7193 7.75 31.2622 7.75C31.8051 7.75 32.2795 7.94244 32.673 8.32074Z' fill='%23121212' stroke='black' stroke-width='0.5'/%3E%3C/svg%3E");
}
.study-week-plan-contents .swiper-button-next {
right: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M16.327 8.32074L16.3268 8.32057L16.3193 8.32845C15.9568 8.70867 15.7726 9.16695 15.7726 9.69076C15.7726 10.215 15.9574 10.6637 16.327 11.019L29.818 23.9891L16.327 36.9593C15.9332 37.3378 15.734 37.7942 15.751 38.3165C15.7675 38.8256 15.9601 39.2731 16.3193 39.6498L16.3191 39.65L16.327 39.6575C16.7171 40.0326 17.1808 40.2332 17.7086 40.2491C18.2419 40.2651 18.7116 40.0778 19.1052 39.6993L33.4351 25.9227C33.7195 25.6493 33.9299 25.3404 34.0601 24.996C34.1859 24.6636 34.25 24.3275 34.25 23.9891C34.25 23.6508 34.1859 23.3147 34.0601 22.9823C33.9299 22.6379 33.7195 22.329 33.4351 22.0555L19.1487 8.32074C18.7552 7.94244 18.2807 7.75 17.7378 7.75C17.1949 7.75 16.7205 7.94244 16.327 8.32074Z' fill='%23121212' stroke='black' stroke-width='0.5'/%3E%3C/svg%3E");
}
.learning-card-wrapper {
position: relative;
border-radius: 40px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
height: 296px;
display: flex;
flex-direction: column;
background-color: #fff;
max-width: 288px;
margin: 8px;
}
@media (min-width: 801px) {
.learning-card-wrapper {
max-width: 344px;
}
}
.learning-card-state {
position: absolute;
top: -4px;
right: 20px;
}
.learning-card-state > i {
background-repeat: no-repeat;
background-position: 50% 50%;
display: block;
width: 80px;
height: 72px;
}
.learning-card-state > span {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
font-size: 18px;
font-weight: 700;
line-height: 144.444%;
margin-top: -13px;
}
.learning-card-stamp {
position: absolute;
top: 10px;
right: 20px;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-size: 100%;
}
.learning-card-title {
display: flex;
align-items: center;
height: 18%;
margin: 0 30px;
padding: 12px 0 8px;
font-size: 20px;
font-weight: 700;
line-height: 140%;
border-bottom: 1px dotted #ddd;
}
.learning-card-title > img {
width: 32px;
height: 32px;
}
.learning-card-main {
height: 70%;
padding: 24px 30px 0px;
}
.learning-card-main .state {
background-color: white;
border: 1px solid #00AB93;
color: #00AB93;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 128.571%;
display: inline-flex;
padding: 4px 16px 5px 16px;
justify-content: center;
align-items: center;
border-radius: 14px;
margin-bottom: 11px;
}
.learning-card-main .title {
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 144.444%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
.learning-card-main .text {
margin-top: 6px;
}
.learning-card-main .text > li {
margin-bottom: 6px;
font-size: 16px;
font-weight: 400;
line-height: 150%;
color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.learning-card-button {
margin-top: auto;
position: relative;
width: 100%;
height: 22%;
background-color: #01416c;
color: white;
border-radius: 0px 0px 40px 40px;
}
.learning-card-button > button {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 16px 0;
font-size: 20px;
font-weight: 900;
line-height: 140%;
}
.learning-card-button-icon {
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.learning-card-button-tooltip {
display: flex;
align-items: center;
position: absolute;
top: -30px;
left: 48%;
border-radius: 20px 20px 20px 0px;
background: #00ab93;
border: none;
font-weight: 700;
line-height: 150%;
padding: 4px 20px;
}
.learning-card-button-tooltip > span {
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
}
.learning-card-continue .tag {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='72' viewBox='0 0 80 72' fill='none'%3E%3Cpath d='M75.9636 0H4.03636C1.8 0 0 1.4816 0 3.30396V68.6875C0 71.1025 3.07273 72.7174 5.74545 71.6803L40 58.5534L74.2545 71.6803C76.9273 72.7026 80 71.1025 80 68.6875V3.30396C80 1.4816 78.2 0 75.9636 0Z' fill='%23F3B3D1'/%3E%3C/svg%3E");
}
.learning-card-continue .learning-card-button {
background-color: #f3b3d1;
}
.learning-card-continue .learning-card-button-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M7.32 23.5003C6.87333 23.2603 6.52667 22.9403 6.28 22.5403C6.03333 22.1403 5.91333 21.6937 5.91333 21.1937V14.9603L2.7 13.2403C2.45333 13.1137 2.27333 12.947 2.16667 12.7537C2.06 12.5603 2 12.3403 2 12.107C2 11.8737 2.05333 11.6537 2.16667 11.4603C2.28 11.267 2.45333 11.1003 2.7 10.9737L14.0067 4.99366C14.2067 4.88699 14.4133 4.80699 14.6267 4.74699C14.84 4.68699 15.0533 4.66699 15.28 4.66699C15.5067 4.66699 15.72 4.69366 15.9333 4.74699C16.1467 4.80033 16.3533 4.88033 16.5533 4.99366L29.3 11.747C29.52 11.8537 29.6933 12.0137 29.82 12.2203C29.9467 12.427 30.0067 12.647 30.0067 12.887V21.2003C30.0067 21.567 29.88 21.8737 29.62 22.127C29.36 22.3803 29.0467 22.5003 28.6667 22.5003C28.2867 22.5003 27.9667 22.3737 27.7133 22.127C27.46 21.8803 27.3267 21.567 27.3267 21.2003V13.5337L24.6533 14.9603V21.1937C24.6533 21.6937 24.5333 22.1403 24.2867 22.5403C24.04 22.9403 23.6933 23.2603 23.2467 23.5003L16.5533 27.007C16.3533 27.1137 16.1467 27.1937 15.9333 27.2537C15.72 27.3137 15.5067 27.3337 15.28 27.3337C15.0533 27.3337 14.84 27.307 14.6267 27.2537C14.4133 27.2003 14.2067 27.1203 14.0067 27.007L7.31333 23.5003H7.32ZM15.28 16.907L24.4467 12.1003L15.28 7.29366L6.11333 12.1003L15.28 16.907ZM15.28 24.7337L21.9733 21.227V16.3203L16.5867 19.2137C16.3867 19.3203 16.1733 19.4003 15.9533 19.4603C15.7333 19.5203 15.5067 19.5403 15.2867 19.5403C15.0667 19.5403 14.84 19.5137 14.62 19.4603C14.4 19.407 14.1867 19.327 13.9867 19.2137L8.6 16.3203V21.227L15.2933 24.7337H15.28Z' fill='white'/%3E%3C/svg%3E");
}
.learning-card-exam .tag {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='72' viewBox='0 0 80 72' fill='none'%3E%3Cpath d='M75.9636 0H4.03636C1.8 0 0 1.4816 0 3.30396V68.6875C0 71.1025 3.07273 72.7174 5.74545 71.6803L40 58.5534L74.2545 71.6803C76.9273 72.7026 80 71.1025 80 68.6875V3.30396C80 1.4816 78.2 0 75.9636 0Z' fill='%23F04D69'/%3E%3C/svg%3E");
}
.learning-card-exam .learning-card-button {
background-color: #f04d69;
}
.learning-card-exam .learning-card-button-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M14.5673 20.833L12.7007 18.9663C12.5673 18.833 12.4207 18.733 12.2673 18.6663C12.114 18.5997 11.954 18.5663 11.7807 18.5663C11.6073 18.5663 11.4473 18.5997 11.2807 18.6663C11.114 18.733 10.9673 18.833 10.834 18.9663C10.5673 19.233 10.434 19.553 10.434 19.913C10.434 20.273 10.5673 20.593 10.834 20.8663L13.6673 23.733C13.8007 23.8663 13.9473 23.9597 14.1006 24.0197C14.254 24.0797 14.4207 24.0997 14.6006 24.0997C14.7807 24.0997 14.9473 24.073 15.1006 24.0197C15.254 23.9663 15.4007 23.8663 15.534 23.733L21.1673 18.0997C21.434 17.833 21.5673 17.513 21.5673 17.133C21.5673 16.753 21.434 16.433 21.1673 16.1663C20.9007 15.8997 20.5806 15.7663 20.2006 15.7663C19.8207 15.7663 19.5007 15.8997 19.234 16.1663L14.5673 20.833ZM8.00065 29.9997C7.26732 29.9997 6.64065 29.7397 6.12065 29.2197C5.60065 28.6997 5.33398 28.0663 5.33398 27.333V5.99967C5.33398 5.26634 5.59398 4.63967 6.12065 4.11301C6.64732 3.58634 7.26732 3.33301 8.00065 3.33301H17.5673C17.9207 3.33301 18.2606 3.39967 18.5873 3.53301C18.914 3.66634 19.194 3.85301 19.4406 4.09967L25.9073 10.5663C26.154 10.813 26.3406 11.093 26.474 11.4197C26.6073 11.7463 26.674 12.0797 26.674 12.433V27.333C26.674 28.0663 26.414 28.693 25.8873 29.2197C25.3606 29.7463 24.7407 29.9997 24.0073 29.9997H8.00065ZM17.334 11.333V5.99967H8.00065V27.333H24.0007V12.6663H18.6673C18.2873 12.6663 17.974 12.5397 17.7207 12.2863C17.4673 12.033 17.334 11.713 17.334 11.3397V11.333Z' fill='white'/%3E%3C/svg%3E");
}
.learning-card-homework .exam {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='72' viewBox='0 0 80 72' fill='none'%3E%3Cpath d='M75.9636 0H4.03636C1.8 0 0 1.4816 0 3.30396V68.6875C0 71.1025 3.07273 72.7174 5.74545 71.6803L40 58.5534L74.2545 71.6803C76.9273 72.7026 80 71.1025 80 68.6875V3.30396C80 1.4816 78.2 0 75.9636 0Z' fill='%23F04D69'/%3E%3C/svg%3E");
}
.learning-card-homework .learning-card-button {
background-color: #8165fe;
}
.learning-card-homework .learning-card-button-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M8.53398 22.114C8.23398 22.114 7.98065 22.0073 7.77398 21.8006C7.56732 21.594 7.46732 21.334 7.46732 21.0206V18.4873C7.46732 18.3406 7.49398 18.2006 7.54732 18.0673C7.60065 17.934 7.68065 17.8073 7.78732 17.7006L17.114 8.15397L21.114 12.2473L11.7873 21.794C11.6807 21.9006 11.5607 21.9873 11.4273 22.0406C11.294 22.094 11.154 22.1206 11.014 22.1206H8.53398V22.114ZM9.60065 19.934H10.5607L18.1273 12.2406L17.114 11.2073L9.60065 18.954V19.934ZM22.314 11.0406L18.314 6.9473L20.234 4.98064C20.4273 4.76064 20.6807 4.66064 20.9807 4.6673C21.2807 4.67397 21.534 4.78064 21.7273 4.98064L24.234 7.5473C24.4273 7.7473 24.5273 7.99397 24.5273 8.29397C24.5273 8.59397 24.4273 8.85397 24.234 9.07397L22.314 11.0406ZM27.3273 27.3406H4.66732C3.93398 27.3406 3.33398 26.7473 3.33398 26.0073C3.33398 25.274 3.92732 24.674 4.66732 24.674H27.3207C28.054 24.674 28.654 25.2673 28.654 26.0073C28.654 26.7406 28.0607 27.3406 27.3207 27.3406H27.3273Z' fill='white'/%3E%3C/svg%3E");
}
.learning-card-homework .learning-card-button-tooltip {
top: -20px;
}
.learning-card-edu .tag {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='72' viewBox='0 0 80 72' fill='none'%3E%3Cpath d='M75.9636 0H4.03636C1.8 0 0 1.4816 0 3.30396V68.6875C0 71.1025 3.07273 72.7174 5.74545 71.6803L40 58.5534L74.2545 71.6803C76.9273 72.7026 80 71.1025 80 68.6875V3.30396C80 1.4816 78.2 0 75.9636 0Z' fill='%2379D1C7'/%3E%3C/svg%3E");
}
.learning-card-edu .learning-card-button {
background-color: #79d1c7;
}
.learning-card-edu .learning-card-button-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M7.32 23.5003C6.87333 23.2603 6.52667 22.9403 6.28 22.5403C6.03333 22.1403 5.91333 21.6937 5.91333 21.1937V14.9603L2.7 13.2403C2.45333 13.1137 2.27333 12.947 2.16667 12.7537C2.06 12.5603 2 12.3403 2 12.107C2 11.8737 2.05333 11.6537 2.16667 11.4603C2.28 11.267 2.45333 11.1003 2.7 10.9737L14.0067 4.99366C14.2067 4.88699 14.4133 4.80699 14.6267 4.74699C14.84 4.68699 15.0533 4.66699 15.28 4.66699C15.5067 4.66699 15.72 4.69366 15.9333 4.74699C16.1467 4.80033 16.3533 4.88033 16.5533 4.99366L29.3 11.747C29.52 11.8537 29.6933 12.0137 29.82 12.2203C29.9467 12.427 30.0067 12.647 30.0067 12.887V21.2003C30.0067 21.567 29.88 21.8737 29.62 22.127C29.36 22.3803 29.0467 22.5003 28.6667 22.5003C28.2867 22.5003 27.9667 22.3737 27.7133 22.127C27.46 21.8803 27.3267 21.567 27.3267 21.2003V13.5337L24.6533 14.9603V21.1937C24.6533 21.6937 24.5333 22.1403 24.2867 22.5403C24.04 22.9403 23.6933 23.2603 23.2467 23.5003L16.5533 27.007C16.3533 27.1137 16.1467 27.1937 15.9333 27.2537C15.72 27.3137 15.5067 27.3337 15.28 27.3337C15.0533 27.3337 14.84 27.307 14.6267 27.2537C14.4133 27.2003 14.2067 27.1203 14.0067 27.007L7.31333 23.5003H7.32ZM15.28 16.907L24.4467 12.1003L15.28 7.29366L6.11333 12.1003L15.28 16.907ZM15.28 24.7337L21.9733 21.227V16.3203L16.5867 19.2137C16.3867 19.3203 16.1733 19.4003 15.9533 19.4603C15.7333 19.5203 15.5067 19.5403 15.2867 19.5403C15.0667 19.5403 14.84 19.5137 14.62 19.4603C14.4 19.407 14.1867 19.327 13.9867 19.2137L8.6 16.3203V21.227L15.2933 24.7337H15.28Z' fill='white'/%3E%3C/svg%3E");
}
.learning-card-review .learning-card-stamp {
background-image: url("../../renewal2023/img//ico/ico-praise-stamp.png");
}
.learning-card-review .learning-card-button-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M7.32 23.5003C6.87333 23.2603 6.52667 22.9403 6.28 22.5403C6.03333 22.1403 5.91333 21.6937 5.91333 21.1937V14.9603L2.7 13.2403C2.45333 13.1137 2.27333 12.947 2.16667 12.7537C2.06 12.5603 2 12.3403 2 12.107C2 11.8737 2.05333 11.6537 2.16667 11.4603C2.28 11.267 2.45333 11.1003 2.7 10.9737L14.0067 4.99366C14.2067 4.88699 14.4133 4.80699 14.6267 4.74699C14.84 4.68699 15.0533 4.66699 15.28 4.66699C15.5067 4.66699 15.72 4.69366 15.9333 4.74699C16.1467 4.80033 16.3533 4.88033 16.5533 4.99366L29.3 11.747C29.52 11.8537 29.6933 12.0137 29.82 12.2203C29.9467 12.427 30.0067 12.647 30.0067 12.887V21.2003C30.0067 21.567 29.88 21.8737 29.62 22.127C29.36 22.3803 29.0467 22.5003 28.6667 22.5003C28.2867 22.5003 27.9667 22.3737 27.7133 22.127C27.46 21.8803 27.3267 21.567 27.3267 21.2003V13.5337L24.6533 14.9603V21.1937C24.6533 21.6937 24.5333 22.1403 24.2867 22.5403C24.04 22.9403 23.6933 23.2603 23.2467 23.5003L16.5533 27.007C16.3533 27.1137 16.1467 27.1937 15.9333 27.2537C15.72 27.3137 15.5067 27.3337 15.28 27.3337C15.0533 27.3337 14.84 27.307 14.6267 27.2537C14.4133 27.2003 14.2067 27.1203 14.0067 27.007L7.31333 23.5003H7.32ZM15.28 16.907L24.4467 12.1003L15.28 7.29366L6.11333 12.1003L15.28 16.907ZM15.28 24.7337L21.9733 21.227V16.3203L16.5867 19.2137C16.3867 19.3203 16.1733 19.4003 15.9533 19.4603C15.7333 19.5203 15.5067 19.5403 15.2867 19.5403C15.0667 19.5403 14.84 19.5137 14.62 19.4603C14.4 19.407 14.1867 19.327 13.9867 19.2137L8.6 16.3203V21.227L15.2933 24.7337H15.28Z' fill='white'/%3E%3C/svg%3E");
}
.learning-card-result .learning-card-stamp {
background-image: url("../../renewal2023/img//ico/ico-praise-stamp2.png");
}
.learning-card-result .learning-card-button-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M14.5673 20.833L12.7007 18.9663C12.5673 18.833 12.4207 18.733 12.2673 18.6663C12.114 18.5997 11.954 18.5663 11.7807 18.5663C11.6073 18.5663 11.4473 18.5997 11.2807 18.6663C11.114 18.733 10.9673 18.833 10.834 18.9663C10.5673 19.233 10.434 19.553 10.434 19.913C10.434 20.273 10.5673 20.593 10.834 20.8663L13.6673 23.733C13.8007 23.8663 13.9473 23.9597 14.1006 24.0197C14.254 24.0797 14.4207 24.0997 14.6006 24.0997C14.7807 24.0997 14.9473 24.073 15.1006 24.0197C15.254 23.9663 15.4007 23.8663 15.534 23.733L21.1673 18.0997C21.434 17.833 21.5673 17.513 21.5673 17.133C21.5673 16.753 21.434 16.433 21.1673 16.1663C20.9007 15.8997 20.5806 15.7663 20.2006 15.7663C19.8207 15.7663 19.5007 15.8997 19.234 16.1663L14.5673 20.833ZM8.00065 29.9997C7.26732 29.9997 6.64065 29.7397 6.12065 29.2197C5.60065 28.6997 5.33398 28.0663 5.33398 27.333V5.99967C5.33398 5.26634 5.59398 4.63967 6.12065 4.11301C6.64732 3.58634 7.26732 3.33301 8.00065 3.33301H17.5673C17.9207 3.33301 18.2606 3.39967 18.5873 3.53301C18.914 3.66634 19.194 3.85301 19.4406 4.09967L25.9073 10.5663C26.154 10.813 26.3406 11.093 26.474 11.4197C26.6073 11.7463 26.674 12.0797 26.674 12.433V27.333C26.674 28.0663 26.414 28.693 25.8873 29.2197C25.3606 29.7463 24.7407 29.9997 24.0073 29.9997H8.00065ZM17.334 11.333V5.99967H8.00065V27.333H24.0007V12.6663H18.6673C18.2873 12.6663 17.974 12.5397 17.7207 12.2863C17.4673 12.033 17.334 11.713 17.334 11.3397V11.333Z' fill='white'/%3E%3C/svg%3E");
}
.learning-card-submit .learning-card-stamp {
background-image: url("../../renewal2023/img//ico/ico-praise-stamp.png");
}
.learning-card-submit .learning-card-button-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M8.53398 22.114C8.23398 22.114 7.98065 22.0073 7.77398 21.8006C7.56732 21.594 7.46732 21.334 7.46732 21.0206V18.4873C7.46732 18.3406 7.49398 18.2006 7.54732 18.0673C7.60065 17.934 7.68065 17.8073 7.78732 17.7006L17.114 8.15397L21.114 12.2473L11.7873 21.794C11.6807 21.9006 11.5607 21.9873 11.4273 22.0406C11.294 22.094 11.154 22.1206 11.014 22.1206H8.53398V22.114ZM9.60065 19.934H10.5607L18.1273 12.2406L17.114 11.2073L9.60065 18.954V19.934ZM22.314 11.0406L18.314 6.9473L20.234 4.98064C20.4273 4.76064 20.6807 4.66064 20.9807 4.6673C21.2807 4.67397 21.534 4.78064 21.7273 4.98064L24.234 7.5473C24.4273 7.7473 24.5273 7.99397 24.5273 8.29397C24.5273 8.59397 24.4273 8.85397 24.234 9.07397L22.314 11.0406ZM27.3273 27.3406H4.66732C3.93398 27.3406 3.33398 26.7473 3.33398 26.0073C3.33398 25.274 3.92732 24.674 4.66732 24.674H27.3207C28.054 24.674 28.654 25.2673 28.654 26.0073C28.654 26.7406 28.0607 27.3406 27.3207 27.3406H27.3273Z' fill='white'/%3E%3C/svg%3E");
}
.learning-card-reading .learning-card-main {
display: flex;
gap: 12px;
}
.learning-card-reading .learning-card-main > div {
overflow: hidden;
}
.learning-card-reading .book-img {
align-self: center;
flex-shrink: 0;
width: 80px;
height: 100px;
background-color: #00AB93;
}
.learning-card-reading .learning-card-button {
background-color: #ffd349;
}
.learning-card-reading .learning-card-button-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M17.2667 23.5291C18.2 23.0761 19.14 22.7363 20.08 22.5098C21.02 22.2832 21.9933 22.17 22.9933 22.17C23.76 22.17 24.5067 22.2366 25.2333 22.3632C25.96 22.4898 26.7 22.683 27.4467 22.9428V10.158C26.7467 9.8582 26.02 9.63168 25.2667 9.47845C24.5133 9.32522 23.7533 9.25194 22.9933 9.25194C21.9933 9.25194 21.0133 9.37852 20.0333 9.63834C19.0533 9.89817 18.1333 10.2846 17.2667 10.7976V23.5224V23.5291ZM15.9933 26.6603C15.6933 26.6603 15.4133 26.6204 15.1533 26.5471C14.8933 26.4738 14.64 26.3672 14.4067 26.2406C13.58 25.7476 12.7067 25.3745 11.8 25.128C10.8933 24.8815 9.95333 24.7549 9 24.7549C8.10667 24.7549 7.23333 24.8749 6.37333 25.108C5.51333 25.3412 4.69333 25.681 3.90667 26.1074C3.46 26.3472 3.03333 26.3339 2.62 26.0741C2.20667 25.8142 2 25.4411 2 24.9415V9.38518C2 9.14534 2.06 8.92549 2.17333 8.70563C2.28667 8.48578 2.46667 8.32589 2.7 8.21929C3.7 7.72629 4.72 7.33988 5.77333 7.07339C6.82667 6.8069 7.9 6.66699 9 6.66699C10.2333 6.66699 11.4333 6.82689 12.6133 7.15333C13.7933 7.47978 14.92 7.95946 16 8.6057C17.08 7.95946 18.2133 7.47312 19.3867 7.15333C20.56 6.83355 21.7667 6.66699 23 6.66699C24.1 6.66699 25.18 6.80024 26.2267 7.07339C27.2733 7.34654 28.3 7.72629 29.3 8.21929C29.5333 8.32589 29.7067 8.48578 29.8267 8.70563C29.9467 8.92549 30 9.14534 30 9.38518V24.9481C30 25.4411 29.7933 25.8209 29.38 26.0807C28.9667 26.3405 28.54 26.3472 28.0933 26.114C27.3067 25.681 26.4867 25.3479 25.6267 25.1147C24.7667 24.8815 23.8933 24.7616 23 24.7616C22.0467 24.7616 21.1133 24.8882 20.2 25.1347C19.2867 25.3812 18.42 25.7543 17.5933 26.2473C17.36 26.3739 17.1133 26.4804 16.8467 26.5537C16.58 26.627 16.3 26.667 16.0067 26.667L15.9933 26.6603ZM18.54 12.8429C18.54 12.6497 18.6067 12.4498 18.7467 12.2433C18.8867 12.0367 19.04 11.9035 19.2067 11.8369C19.82 11.6237 20.44 11.4571 21.0533 11.3505C21.6667 11.2439 22.3133 11.1906 22.9933 11.1906C23.42 11.1906 23.8333 11.2173 24.2533 11.2706C24.6733 11.3239 25.0733 11.3972 25.48 11.4838C25.6733 11.5238 25.8333 11.637 25.9733 11.8036C26.1133 11.9701 26.18 12.17 26.18 12.3832C26.18 12.7496 26.06 13.0161 25.8333 13.1893C25.6067 13.3625 25.3 13.4025 24.94 13.3159C24.64 13.2493 24.3333 13.2026 24 13.1693C23.6667 13.136 23.34 13.1227 23 13.1227C22.4467 13.1227 21.9067 13.176 21.38 13.2826C20.8533 13.3892 20.34 13.5291 19.8533 13.7023C19.4733 13.8555 19.16 13.8422 18.9133 13.669C18.6667 13.4958 18.5467 13.216 18.5467 12.8296L18.54 12.8429ZM18.54 19.9448C18.54 19.7516 18.6067 19.5517 18.7467 19.3452C18.8867 19.1387 19.04 19.0054 19.2067 18.9388C19.82 18.7256 20.44 18.5591 21.0533 18.4525C21.6667 18.3459 22.3133 18.2926 22.9933 18.2926C23.42 18.2926 23.8333 18.3192 24.2533 18.3725C24.6733 18.4258 25.0733 18.4991 25.48 18.5857C25.6733 18.6257 25.8333 18.7389 25.9733 18.9055C26.1133 19.0721 26.18 19.2719 26.18 19.4851C26.18 19.8515 26.06 20.118 25.8333 20.2912C25.6067 20.4645 25.3 20.5044 24.94 20.4178C24.64 20.3512 24.3333 20.3046 24 20.2713C23.6667 20.2379 23.34 20.2246 23 20.2246C22.4467 20.2246 21.9067 20.2713 21.38 20.3712C20.8533 20.4711 20.34 20.6044 19.8533 20.7776C19.4733 20.9308 19.16 20.9242 18.9133 20.7643C18.6667 20.6044 18.5467 20.3312 18.5467 19.9381L18.54 19.9448ZM18.54 16.3938C18.54 16.2006 18.6067 16.0008 18.7467 15.7942C18.8867 15.5877 19.04 15.4545 19.2067 15.3878C19.82 15.1747 20.44 15.0081 21.0533 14.9015C21.6667 14.7949 22.3133 14.7416 22.9933 14.7416C23.42 14.7416 23.8333 14.7683 24.2533 14.8216C24.6733 14.8749 25.0733 14.9481 25.48 15.0347C25.6733 15.0747 25.8333 15.188 25.9733 15.3545C26.1133 15.5211 26.18 15.721 26.18 15.9341C26.18 16.3006 26.06 16.5671 25.8333 16.7403C25.6067 16.9135 25.3 16.9535 24.94 16.8669C24.64 16.8002 24.3333 16.7536 24 16.7203C23.6667 16.687 23.34 16.6737 23 16.6737C22.4467 16.6737 21.9067 16.727 21.38 16.8335C20.8533 16.9401 20.34 17.0801 19.8533 17.2533C19.4733 17.4065 19.16 17.3932 18.9133 17.22C18.6667 17.0467 18.5467 16.7669 18.5467 16.3805L18.54 16.3938Z' fill='white'/%3E%3C/svg%3E");
}
.state-btn {
display: flex;
padding: 2px 12px 3px 12px;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
line-height: 128.571%;
color: #fff;
border-radius: 14px;
}
.study-week-plan-empty {
padding: 100px 0;
}
.study-week-plan-empty > div {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.study-week-plan-empty > div > div > p:nth-child(1) {
font-size: 40px;
font-weight: 400;
line-height: 135%;
}
.study-week-plan-empty > div > div > p:nth-child(2) {
font-size: 18px;
font-weight: 400;
line-height: 144.444%;
color: #999999;
}
.study-tab {
border-top: 2px solid #00ab93;
border-radius: 0px 0px 20px 20px;
background: #E4F6F4;
}
.study-tab .tab__list {
gap: 10px;
}
.study-tab .tab__item {
border-radius: 20px;
border: 1px solid #00ab93;
background-color: #fff;
}
.study-video-wrap {
padding: 40px 0 80px;
}
.study-video-wrap-inner {
padding: 0 16px;
}
.study-video-wrap h3 {
font-size: 20px;
font-weight: 700;
line-height: 140%;
margin-bottom: 8px;
}
@media (min-width: 801px) {
.study-video-wrap {
padding-: 60px 0 100px;
}
.study-video-wrap-inner {
padding: 0;
max-width: 1200px;
margin: 0 auto;
}
}
@media (min-width: 801px) {
.study-video {
display: flex;
}
}
.self-study .empty-list {
width: 100%;
padding: 30px 0 42px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.self-study .empty-list > p {
margin-top: 8px;
font-size: 24px;
line-height: 133.333%;
color: #999999;
}
@media (min-width: 801px) {
.self-study {
flex-grow: 1;
}
.self-study .empty-list {
padding: 40px 0;
}
}
.self-study-box {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
justify-content: space-between;
}
.self-study-box > li {
width: calc(50% - 10px);
min-width: 160px;
min-height: 160px;
border-radius: 20px;
border: 1px solid #ddd;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
margin-bottom: 10px;
}
.self-study-box > li > a {
display: block;
width: 100%;
height: 100%;
padding: 20px 16px;
}
@media (min-width: 801px) {
.self-study-box > li {
width: 200px;
}
}
.self-study-box .title {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20px;
font-weight: 700;
line-height: 140%;
}
.self-study-box .text {
min-height: 48px;
margin: 10px 0 14px;
font-size: 16px;
line-height: 150%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
color: #666666;
}
.self-study-box .btn {
text-decoration: underline;
display: flex;
align-items: center;
gap: 6px;
}
@media (min-width: 801px) {
.self-study-box {
gap: 10px;
justify-content: flex-start;
}
.self-study-box > li {
margin-bottom: 0px;
}
}
.low-grade-study .self-study-box > li {
width: 100%;
min-width: auto;
min-height: auto;
border: 1px solid #ddd;
}
.low-grade-study .self-study-box > li > a {
display: flex;
align-items: center;
font-size: 20px;
line-height: 140%;
}
.low-grade-study .self-study-box > li > a > i {
margin-left: auto;
}
@media (min-width: 801px) {
.low-grade-study .self-study-box {
flex-wrap: nowrap;
}
.low-grade-study .self-study-box > li {
width: calc(33.33333% - 10px);
}
}
.math-case {
border: 1px solid #dddddd;
background-color: #fff;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
padding: 20px;
text-align: center;
min-height: 160px;
margin-top: 40px;
}
.math-case > h4 {
font-size: 20px;
line-height: 140%;
}
.math-case > ul {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.math-case > ul > li {
background-color: #fff;
}
.math-case > ul > li > a {
position: relative;
color: #121212;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 33px;
gap: 4px;
}
.math-case > ul > li > a::after {
content: "";
position: absolute;
right: 0;
border-right: 1px dotted #dddddd;
width: 1px;
height: 80%;
}
.math-case > ul > li > a > span {
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
}
.math-case > ul > li:last-child > a::after {
display: none;
}
.math-case .empty-text {
font-size: 16px;
font-weight: 400;
line-height: 150%;
color: #999999;
}
@media (min-width: 801px) {
.math-case {
min-width: 340px;
}
}
.download-ico {
display: block;
background-color: #01416c;
border-radius: 50%;
width: 36px;
height: 36px;
background-image: url("../../renewal2023/img/ico/ico-download.png");
background-repeat: no-repeat;
background-position: center center;
display: inline-flex;
align-items: center;
justify-content: center;
}
.correct-answer-download-btn {
margin-top: 40px;
}
.correct-answer-download-btn > a {
border-radius: 44px;
font-size: 18px;
font-weight: 700;
line-height: 144.444%;
}
/*========================================================
월간 학습 계획표 - 캘린더
==========================================================*/
.page-myStudyRoomMonth {
/*[S]page-myStudyRoomMonth*/
/*[E]page-myStudyRoomMonth*/
}
.page-myStudyRoomMonth .calendar {
background-color: #fff;
margin-bottom: 40px;
padding: 40px 16px;
}
@media (min-width: 801px) {
.page-myStudyRoomMonth .calendar {
margin-bottom: 100px;
padding: 40px 45px;
border-radius: 40px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
}
.page-myStudyRoomMonth .calendar-label {
margin-bottom: 22px;
}
.page-myStudyRoomMonth .calendar-label > ul {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.page-myStudyRoomMonth .calendar-label > ul > li {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
line-height: 128.571%;
color: #666666;
flex-basis: 30%;
}
.page-myStudyRoomMonth .calendar-label > ul > li:nth-child(3) {
margin-left: auto;
}
@media (min-width: 801px) {
.page-myStudyRoomMonth .calendar-label {
margin-bottom: 42px;
}
.page-myStudyRoomMonth .calendar-label > ul {
flex-wrap: nowrap;
gap: 40px;
}
.page-myStudyRoomMonth .calendar-label > ul > li {
flex-basis: auto;
margin-right: 0;
}
.page-myStudyRoomMonth .calendar-label > ul > li:nth-child(3) {
margin-left: 0;
}
}
.page-myStudyRoomMonth .calendar-table th {
text-align: center;
border-bottom: 2px solid #333;
border-right: 1px solid #ddd;
font-weight: 400;
padding: 8px 0;
}
.page-myStudyRoomMonth .calendar-table th:last-child {
border-right: none;
}
.page-myStudyRoomMonth .calendar-table .sat {
color: #46a5f0;
}
.page-myStudyRoomMonth .calendar-table tr {
border-bottom: 1px solid #ddd;
}
.page-myStudyRoomMonth .calendar-table tr:last-child {
border: none;
}
.page-myStudyRoomMonth .calendar-table td {
border-right: 1px solid #ddd;
height: 8.5rem;
text-align: left;
padding: 0.94rem 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #666;
vertical-align: top;
}
.page-myStudyRoomMonth .calendar-table td:last-child {
border: none;
}
.page-myStudyRoomMonth .calendar-table td > span {
display: inline-block;
padding: 0 0.94rem;
margin-bottom: 10px;
}
.page-myStudyRoomMonth .calendar-table-mobile {
width: 100%;
table-layout: auto;
}
.page-myStudyRoomMonth .calendar-table-mobile table tr {
border-top: 1px solid #ddd;
}
.page-myStudyRoomMonth .calendar-table-mobile table th {
padding: 10px 0;
vertical-align: top;
}
.page-myStudyRoomMonth .calendar-table-mobile table th span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #f5f5f5;
font-size: 14px;
line-height: 128.571%;
color: #666;
}
.page-myStudyRoomMonth .calendar-table-mobile table td {
display: flex;
flex-direction: column;
height: auto;
padding: 10px 0;
}
.page-myStudyRoomMonth .calendar-subject {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
background-color: white;
color: #777;
text-align: left;
border-bottom: 1px dotted #ebebeb;
padding: 5px 10px;
}
.page-myStudyRoomMonth .calendar-subject-icon {
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.page-myStudyRoomMonth .reading {
border-left: 6px solid #ffd349;
}
.page-myStudyRoomMonth .reading > i {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12.95 17.6466C13.65 17.3068 14.355 17.052 15.06 16.8821C15.765 16.7122 16.495 16.6272 17.245 16.6272C17.82 16.6272 18.38 16.6772 18.925 16.7722C19.47 16.8671 20.025 17.012 20.585 17.2069V7.61825C20.06 7.3934 19.515 7.22352 18.95 7.10859C18.385 6.99367 17.815 6.93871 17.245 6.93871C16.495 6.93871 15.76 7.03364 15.025 7.22851C14.29 7.42338 13.6 7.71319 12.95 8.09793V17.6416V17.6466ZM11.995 19.995C11.77 19.995 11.56 19.965 11.365 19.9101C11.17 19.8551 10.98 19.7752 10.805 19.6802C10.185 19.3105 9.53 19.0306 8.85 18.8458C8.17 18.6609 7.465 18.566 6.75 18.566C6.08 18.566 5.425 18.6559 4.78 18.8308C4.135 19.0057 3.52 19.2605 2.93 19.5803C2.595 19.7602 2.275 19.7502 1.965 19.5553C1.655 19.3604 1.5 19.0806 1.5 18.7059V7.03864C1.5 6.85876 1.545 6.69387 1.63 6.52898C1.715 6.36409 1.85 6.24417 2.025 6.16422C2.775 5.79447 3.54 5.50466 4.33 5.3048C5.12 5.10493 5.925 5 6.75 5C7.675 5 8.575 5.11992 9.46 5.36476C10.345 5.60959 11.19 5.96935 12 6.45403C12.81 5.96935 13.66 5.6046 14.54 5.36476C15.42 5.12492 16.325 5 17.25 5C18.075 5 18.885 5.09993 19.67 5.3048C20.455 5.50966 21.225 5.79447 21.975 6.16422C22.15 6.24417 22.28 6.36409 22.37 6.52898C22.46 6.69387 22.5 6.85876 22.5 7.03864V18.7109C22.5 19.0806 22.345 19.3654 22.035 19.5603C21.725 19.7552 21.405 19.7602 21.07 19.5853C20.48 19.2605 19.865 19.0107 19.22 18.8358C18.575 18.6609 17.92 18.571 17.25 18.571C16.535 18.571 15.835 18.6659 15.15 18.8508C14.465 19.0356 13.815 19.3155 13.195 19.6852C13.02 19.7801 12.835 19.8601 12.635 19.9151C12.435 19.97 12.225 20 12.005 20L11.995 19.995ZM13.905 9.63191C13.905 9.48701 13.955 9.33711 14.06 9.18221C14.165 9.02732 14.28 8.92738 14.405 8.87741C14.865 8.71752 15.33 8.5926 15.79 8.51266C16.25 8.43271 16.735 8.39274 17.245 8.39274C17.565 8.39274 17.875 8.41272 18.19 8.4527C18.505 8.49267 18.805 8.54763 19.11 8.61259C19.255 8.64257 19.375 8.72751 19.48 8.85243C19.585 8.97735 19.635 9.12725 19.635 9.28714C19.635 9.56196 19.545 9.76183 19.375 9.89174C19.205 10.0217 18.975 10.0516 18.705 9.98668C18.48 9.93671 18.25 9.90173 18 9.87675C17.75 9.85177 17.505 9.84177 17.25 9.84177C16.835 9.84177 16.43 9.88175 16.035 9.96169C15.64 10.0416 15.255 10.1466 14.89 10.2765C14.605 10.3914 14.37 10.3814 14.185 10.2515C14 10.1216 13.91 9.91173 13.91 9.62192L13.905 9.63191ZM13.905 14.9584C13.905 14.8135 13.955 14.6636 14.06 14.5087C14.165 14.3538 14.28 14.2538 14.405 14.2039C14.865 14.044 15.33 13.9191 15.79 13.8391C16.25 13.7592 16.735 13.7192 17.245 13.7192C17.565 13.7192 17.875 13.7392 18.19 13.7791C18.505 13.8191 18.805 13.8741 19.11 13.939C19.255 13.969 19.375 14.054 19.48 14.1789C19.585 14.3038 19.635 14.4537 19.635 14.6136C19.635 14.8884 19.545 15.0883 19.375 15.2182C19.205 15.3481 18.975 15.3781 18.705 15.3131C18.48 15.2632 18.25 15.2282 18 15.2032C17.75 15.1782 17.505 15.1682 17.25 15.1682C16.835 15.1682 16.43 15.2032 16.035 15.2781C15.64 15.3531 15.255 15.453 14.89 15.5829C14.605 15.6979 14.37 15.6929 14.185 15.573C14 15.453 13.91 15.2482 13.91 14.9534L13.905 14.9584ZM13.905 12.2951C13.905 12.1502 13.955 12.0003 14.06 11.8454C14.165 11.6905 14.28 11.5906 14.405 11.5406C14.865 11.3807 15.33 11.2558 15.79 11.1759C16.25 11.0959 16.735 11.056 17.245 11.056C17.565 11.056 17.875 11.0759 18.19 11.1159C18.505 11.1559 18.805 11.2109 19.11 11.2758C19.255 11.3058 19.375 11.3907 19.48 11.5157C19.585 11.6406 19.635 11.7905 19.635 11.9504C19.635 12.2252 19.545 12.425 19.375 12.555C19.205 12.6849 18.975 12.7149 18.705 12.6499C18.48 12.5999 18.25 12.565 18 12.54C17.75 12.515 17.505 12.505 17.25 12.505C16.835 12.505 16.43 12.545 16.035 12.6249C15.64 12.7049 15.255 12.8098 14.89 12.9397C14.605 13.0546 14.37 13.0446 14.185 12.9147C14 12.7848 13.91 12.5749 13.91 12.2851L13.905 12.2951Z' fill='%23FFD349'/%3E%3C/svg%3E");
}
.page-myStudyRoomMonth .edu-ready {
border-left: 6px solid #79d1c7;
}
.page-myStudyRoomMonth .edu-ready > i {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.49 17.625C5.155 17.445 4.895 17.205 4.71 16.905C4.525 16.605 4.435 16.27 4.435 15.895V11.22L2.025 9.93C1.84 9.835 1.705 9.71 1.625 9.565C1.545 9.42 1.5 9.255 1.5 9.08C1.5 8.905 1.54 8.74 1.625 8.595C1.71 8.45 1.84 8.325 2.025 8.23L10.505 3.745C10.655 3.665 10.81 3.605 10.97 3.56C11.13 3.515 11.29 3.5 11.46 3.5C11.63 3.5 11.79 3.52 11.95 3.56C12.11 3.6 12.265 3.66 12.415 3.745L21.975 8.81C22.14 8.89 22.27 9.01 22.365 9.165C22.46 9.32 22.505 9.485 22.505 9.665V15.9C22.505 16.175 22.41 16.405 22.215 16.595C22.02 16.785 21.785 16.875 21.5 16.875C21.215 16.875 20.975 16.78 20.785 16.595C20.595 16.41 20.495 16.175 20.495 15.9V10.15L18.49 11.22V15.895C18.49 16.27 18.4 16.605 18.215 16.905C18.03 17.205 17.77 17.445 17.435 17.625L12.415 20.255C12.265 20.335 12.11 20.395 11.95 20.44C11.79 20.485 11.63 20.5 11.46 20.5C11.29 20.5 11.13 20.48 10.97 20.44C10.81 20.4 10.655 20.34 10.505 20.255L5.485 17.625H5.49ZM11.46 12.68L18.335 9.075L11.46 5.47L4.585 9.075L11.46 12.68ZM11.46 18.55L16.48 15.92V12.24L12.44 14.41C12.29 14.49 12.13 14.55 11.965 14.595C11.8 14.64 11.63 14.655 11.465 14.655C11.3 14.655 11.13 14.635 10.965 14.595C10.8 14.555 10.64 14.495 10.49 14.41L6.45 12.24V15.92L11.47 18.55H11.46Z' fill='%2379D1C7'/%3E%3C/svg%3E");
}
.page-myStudyRoomMonth .edu {
border-left: 6px solid #f3b3d1;
}
.page-myStudyRoomMonth .edu > i {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.49 17.625C5.155 17.445 4.895 17.205 4.71 16.905C4.525 16.605 4.435 16.27 4.435 15.895V11.22L2.025 9.93C1.84 9.835 1.705 9.71 1.625 9.565C1.545 9.42 1.5 9.255 1.5 9.08C1.5 8.905 1.54 8.74 1.625 8.595C1.71 8.45 1.84 8.325 2.025 8.23L10.505 3.745C10.655 3.665 10.81 3.605 10.97 3.56C11.13 3.515 11.29 3.5 11.46 3.5C11.63 3.5 11.79 3.52 11.95 3.56C12.11 3.6 12.265 3.66 12.415 3.745L21.975 8.81C22.14 8.89 22.27 9.01 22.365 9.165C22.46 9.32 22.505 9.485 22.505 9.665V15.9C22.505 16.175 22.41 16.405 22.215 16.595C22.02 16.785 21.785 16.875 21.5 16.875C21.215 16.875 20.975 16.78 20.785 16.595C20.595 16.41 20.495 16.175 20.495 15.9V10.15L18.49 11.22V15.895C18.49 16.27 18.4 16.605 18.215 16.905C18.03 17.205 17.77 17.445 17.435 17.625L12.415 20.255C12.265 20.335 12.11 20.395 11.95 20.44C11.79 20.485 11.63 20.5 11.46 20.5C11.29 20.5 11.13 20.48 10.97 20.44C10.81 20.4 10.655 20.34 10.505 20.255L5.485 17.625H5.49ZM11.46 12.68L18.335 9.075L11.46 5.47L4.585 9.075L11.46 12.68ZM11.46 18.55L16.48 15.92V12.24L12.44 14.41C12.29 14.49 12.13 14.55 11.965 14.595C11.8 14.64 11.63 14.655 11.465 14.655C11.3 14.655 11.13 14.635 10.965 14.595C10.8 14.555 10.64 14.495 10.49 14.41L6.45 12.24V15.92L11.47 18.55H11.46Z' fill='%23F3B3D1'/%3E%3C/svg%3E");
}
.page-myStudyRoomMonth .edu-completed {
border-left: 6px solid #01416c;
}
.page-myStudyRoomMonth .edu-completed > i {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.49 17.625C5.155 17.445 4.895 17.205 4.71 16.905C4.525 16.605 4.435 16.27 4.435 15.895V11.22L2.025 9.93C1.84 9.835 1.705 9.71 1.625 9.565C1.545 9.42 1.5 9.255 1.5 9.08C1.5 8.905 1.54 8.74 1.625 8.595C1.71 8.45 1.84 8.325 2.025 8.23L10.505 3.745C10.655 3.665 10.81 3.605 10.97 3.56C11.13 3.515 11.29 3.5 11.46 3.5C11.63 3.5 11.79 3.52 11.95 3.56C12.11 3.6 12.265 3.66 12.415 3.745L21.975 8.81C22.14 8.89 22.27 9.01 22.365 9.165C22.46 9.32 22.505 9.485 22.505 9.665V15.9C22.505 16.175 22.41 16.405 22.215 16.595C22.02 16.785 21.785 16.875 21.5 16.875C21.215 16.875 20.975 16.78 20.785 16.595C20.595 16.41 20.495 16.175 20.495 15.9V10.15L18.49 11.22V15.895C18.49 16.27 18.4 16.605 18.215 16.905C18.03 17.205 17.77 17.445 17.435 17.625L12.415 20.255C12.265 20.335 12.11 20.395 11.95 20.44C11.79 20.485 11.63 20.5 11.46 20.5C11.29 20.5 11.13 20.48 10.97 20.44C10.81 20.4 10.655 20.34 10.505 20.255L5.485 17.625H5.49ZM11.46 12.68L18.335 9.075L11.46 5.47L4.585 9.075L11.46 12.68ZM11.46 18.55L16.48 15.92V12.24L12.44 14.41C12.29 14.49 12.13 14.55 11.965 14.595C11.8 14.64 11.63 14.655 11.465 14.655C11.3 14.655 11.13 14.635 10.965 14.595C10.8 14.555 10.64 14.495 10.49 14.41L6.45 12.24V15.92L11.47 18.55H11.46Z' fill='%2301416C'/%3E%3C/svg%3E");
}
.page-myStudyRoomMonth .exam {
border-left: 6px solid #f04d69;
}
.page-myStudyRoomMonth .exam > i {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.925 15.625L9.525 14.225C9.425 14.125 9.315 14.05 9.2 14C9.085 13.95 8.965 13.925 8.835 13.925C8.705 13.925 8.585 13.95 8.46 14C8.335 14.05 8.225 14.125 8.125 14.225C7.925 14.425 7.825 14.665 7.825 14.935C7.825 15.205 7.925 15.445 8.125 15.65L10.25 17.8C10.35 17.9 10.46 17.97 10.575 18.015C10.69 18.06 10.815 18.075 10.95 18.075C11.085 18.075 11.21 18.055 11.325 18.015C11.44 17.975 11.55 17.9 11.65 17.8L15.875 13.575C16.075 13.375 16.175 13.135 16.175 12.85C16.175 12.565 16.075 12.325 15.875 12.125C15.675 11.925 15.435 11.825 15.15 11.825C14.865 11.825 14.625 11.925 14.425 12.125L10.925 15.625ZM6 22.5C5.45 22.5 4.98 22.305 4.59 21.915C4.2 21.525 4 21.05 4 20.5V4.5C4 3.95 4.195 3.48 4.59 3.085C4.985 2.69 5.45 2.5 6 2.5H13.175C13.44 2.5 13.695 2.55 13.94 2.65C14.185 2.75 14.395 2.89 14.58 3.075L19.43 7.925C19.615 8.11 19.755 8.32 19.855 8.565C19.955 8.81 20.005 9.06 20.005 9.325V20.5C20.005 21.05 19.81 21.52 19.415 21.915C19.02 22.31 18.555 22.5 18.005 22.5H6ZM13 8.5V4.5H6V20.5H18V9.5H14C13.715 9.5 13.48 9.405 13.29 9.215C13.1 9.025 13 8.785 13 8.505V8.5Z' fill='%23F04D69'/%3E%3C/svg%3E");
}
.page-myStudyRoomMonth .exam-completed {
border-left: 6px solid #01416c;
}
.page-myStudyRoomMonth .exam-completed > i {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.925 15.625L9.525 14.225C9.425 14.125 9.315 14.05 9.2 14C9.085 13.95 8.965 13.925 8.835 13.925C8.705 13.925 8.585 13.95 8.46 14C8.335 14.05 8.225 14.125 8.125 14.225C7.925 14.425 7.825 14.665 7.825 14.935C7.825 15.205 7.925 15.445 8.125 15.65L10.25 17.8C10.35 17.9 10.46 17.97 10.575 18.015C10.69 18.06 10.815 18.075 10.95 18.075C11.085 18.075 11.21 18.055 11.325 18.015C11.44 17.975 11.55 17.9 11.65 17.8L15.875 13.575C16.075 13.375 16.175 13.135 16.175 12.85C16.175 12.565 16.075 12.325 15.875 12.125C15.675 11.925 15.435 11.825 15.15 11.825C14.865 11.825 14.625 11.925 14.425 12.125L10.925 15.625ZM6 22.5C5.45 22.5 4.98 22.305 4.59 21.915C4.2 21.525 4 21.05 4 20.5V4.5C4 3.95 4.195 3.48 4.59 3.085C4.985 2.69 5.45 2.5 6 2.5H13.175C13.44 2.5 13.695 2.55 13.94 2.65C14.185 2.75 14.395 2.89 14.58 3.075L19.43 7.925C19.615 8.11 19.755 8.32 19.855 8.565C19.955 8.81 20.005 9.06 20.005 9.325V20.5C20.005 21.05 19.81 21.52 19.415 21.915C19.02 22.31 18.555 22.5 18.005 22.5H6ZM13 8.5V4.5H6V20.5H18V9.5H14C13.715 9.5 13.48 9.405 13.29 9.215C13.1 9.025 13 8.785 13 8.505V8.5Z' fill='%2301416C'/%3E%3C/svg%3E");
}
.page-myStudyRoomMonth .homework {
border-left: 6px solid #8165fe;
}
.page-myStudyRoomMonth .homework-completed {
border-left: 6px solid #01416c;
}
.page-myStudyRoomMonth .homework-completed > i {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.4 16.5852C6.175 16.5852 5.985 16.5052 5.83 16.3502C5.675 16.1952 5.6 16.0002 5.6 15.7652V13.8652C5.6 13.7552 5.62 13.6502 5.66 13.5502C5.7 13.4502 5.76 13.3552 5.84 13.2752L12.835 6.11523L15.835 9.18523L8.84 16.3452C8.76 16.4252 8.67 16.4902 8.57 16.5302C8.47 16.5702 8.365 16.5902 8.26 16.5902H6.4V16.5852ZM7.2 14.9502H7.92L13.595 9.18023L12.835 8.40523L7.2 14.2152V14.9502ZM16.735 8.28023L13.735 5.21023L15.175 3.73523C15.32 3.57023 15.51 3.49523 15.735 3.50023C15.96 3.50523 16.15 3.58523 16.295 3.73523L18.175 5.66023C18.32 5.81023 18.395 5.99523 18.395 6.22023C18.395 6.44523 18.32 6.64023 18.175 6.80523L16.735 8.28023ZM20.495 20.5052H3.5C2.95 20.5052 2.5 20.0602 2.5 19.5052C2.5 18.9552 2.945 18.5052 3.5 18.5052H20.49C21.04 18.5052 21.49 18.9502 21.49 19.5052C21.49 20.0552 21.045 20.5052 20.49 20.5052H20.495Z' fill='%2301416C'/%3E%3C/svg%3E");
}
/*========================================================
학습 진도맵
==========================================================*/
.page-myStudyLearnProgressMap .progress-map {
margin-top: 40px;
}
.page-myStudyLearnProgressMap .learn-state {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.page-myStudyLearnProgressMap .learn-detail-state {
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 801px) {
.page-myStudyLearnProgressMap .learn-detail-state {
flex-direction: column;
}
}
.page-myStudyLearnProgressMap .progress-wrap {
margin-bottom: 20px;
padding: 24px 0;
background-color: #fff;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
border: none;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-inner {
padding: 0 16px;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-cont {
height: auto;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-cont .progress-list {
height: auto;
display: flex;
align-items: flex-end;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-cont .progress-list li {
border-right: none;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-cont .progress-list li .progress-study-state-wrap {
display: flex;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-cont .progress-list li h5 {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-cont .toggle-table {
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-cont .toggle-table > p {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
border: 1px solid #CBDDE9;
background-color: #f4f8fb;
font-size: 14px;
line-height: 128.571%;
color: #01416c;
margin-bottom: 8px;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-study-state {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 80px;
height: 88px;
border: 1px solid #ebebeb;
border-radius: 10px;
background-color: #fff;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-study-state > span {
color: #777777;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 24px;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title h4 {
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title h4 > span {
font-weight: 400;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title p {
margin-top: 10px;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title .progress-title-toggle-btn {
display: flex;
flex-direction: column;
align-items: center;
/* Hide default HTML checkbox */
/* The slider */
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title .progress-title-toggle-btn > a {
color: #666666;
margin-bottom: 5px;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title .progress-title-toggle-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 16px;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title .progress-title-toggle-btn .switch input {
opacity: 0;
width: 0;
height: 0;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title .progress-title-toggle-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 34px;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title .progress-title-toggle-btn .slider:before {
position: absolute;
content: "";
height: 30px;
width: 30px;
left: 0px;
bottom: -8px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 50%;
background-repeat: no-repeat;
background-position: 0%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30' fill='none'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23666666'/%3E%3Crect x='5' y='14' width='20' height='3' fill='%23D9D9D9'/%3E%3C/svg%3E");
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title .progress-title-toggle-btn input:checked + .slider {
background-color: #79d1c7;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title .progress-title-toggle-btn input:focus + .slider {
box-shadow: 0 0 1px #79d1c7;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title .progress-title-toggle-btn input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='30 0 60 30' fill='none'%3E%3Ccircle cx='45' cy='15' r='15' fill='%2301416C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M54.4551 8.54673C55.1816 9.27571 55.1816 10.4576 54.4551 11.1866L44.2225 21.4533C43.496 22.1822 42.318 22.1822 41.5914 21.4533L35.5449 15.3866C34.8184 14.6576 34.8184 13.4757 35.5449 12.7467C36.2715 12.0178 37.4495 12.0178 38.176 12.7467L42.907 17.4935L51.824 8.54673C52.5505 7.81776 53.7285 7.81776 54.4551 8.54673Z' fill='%23F5F5F5'/%3E%3C/svg%3E");
}
.page-myStudyLearnProgressMap .progress-wrap .progress-map-card-detail {
display: none;
}
@media (min-width: 801px) {
.page-myStudyLearnProgressMap .progress-wrap {
border-radius: 40px;
padding: 40px 0px;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-inner {
padding: 0 80px;
}
.page-myStudyLearnProgressMap .progress-wrap .progress-title-toggle-btn {
flex-direction: row;
gap: 10px;
}
}
/*
1.학습 진도맵 - progress 아이콘
1) ico-play-mint-blue 학습전 (동영상)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.9993 34.5833C27.5933 34.5833 33.7493 28.4272 33.7493 20.8333C33.7493 13.2394 27.5933 7.08333 19.9993 7.08333C12.4054 7.08333 6.24935 13.2394 6.24935 20.8333C6.24935 28.4272 12.4054 34.5833 19.9993 34.5833ZM19.9993 36.6667C28.7439 36.6667 35.8327 29.5778 35.8327 20.8333C35.8327 12.0888 28.7439 5 19.9993 5C11.2548 5 4.16602 12.0888 4.16602 20.8333C4.16602 29.5778 11.2548 36.6667 19.9993 36.6667Z' fill='%2379D1C7'/%3E%3Cpath d='M26.0075 19.6119C26.8855 20.1889 26.8855 21.4784 26.0075 22.0554L18.0915 27.2584C17.1214 27.896 15.8327 27.1989 15.8327 26.0366L15.8327 15.6307C15.8327 14.4684 17.1215 13.7713 18.0915 14.4089L26.0075 19.6119Z' fill='%2379D1C7'/%3E%3C/svg%3E");
2) ico-play-pink 학습중 (동영상)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.9993 34.5833C27.5933 34.5833 33.7493 28.4272 33.7493 20.8333C33.7493 13.2394 27.5933 7.08333 19.9993 7.08333C12.4054 7.08333 6.24935 13.2394 6.24935 20.8333C6.24935 28.4272 12.4054 34.5833 19.9993 34.5833ZM19.9993 36.6667C28.7439 36.6667 35.8327 29.5778 35.8327 20.8333C35.8327 12.0888 28.7439 5 19.9993 5C11.2548 5 4.16602 12.0888 4.16602 20.8333C4.16602 29.5778 11.2548 36.6667 19.9993 36.6667Z' fill='%23F3B3D1'/%3E%3Cpath d='M26.0075 19.6119C26.8855 20.1889 26.8855 21.4784 26.0075 22.0554L18.0915 27.2584C17.1214 27.896 15.8327 27.1989 15.8327 26.0366L15.8327 15.6307C15.8327 14.4684 17.1215 13.7713 18.0915 14.4089L26.0075 19.6119Z' fill='%23F3B3D1'/%3E%3C/svg%3E");
3) ico-play-navy 학습완료 (동영상)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.9993 34.5833C27.5933 34.5833 33.7493 28.4272 33.7493 20.8333C33.7493 13.2394 27.5933 7.08333 19.9993 7.08333C12.4054 7.08333 6.24935 13.2394 6.24935 20.8333C6.24935 28.4272 12.4054 34.5833 19.9993 34.5833ZM19.9993 36.6667C28.7439 36.6667 35.8327 29.5778 35.8327 20.8333C35.8327 12.0888 28.7439 5 19.9993 5C11.2548 5 4.16602 12.0888 4.16602 20.8333C4.16602 29.5778 11.2548 36.6667 19.9993 36.6667Z' fill='%2301416C'/%3E%3Cpath d='M26.0075 19.6119C26.8855 20.1889 26.8855 21.4784 26.0075 22.0554L18.0915 27.2584C17.1214 27.896 15.8327 27.1989 15.8327 26.0366L15.8327 15.6307C15.8327 14.4684 17.1215 13.7713 18.0915 14.4089L26.0075 19.6119Z' fill='%2301416C'/%3E%3C/svg%3E");
4) ico-interective-mint-blue 학습전(인터랙티브 24년추가)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cg clip-path='url(%23clip0_2446_8830)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.9993 29.7503C23.591 29.7503 29.7493 23.592 29.7493 16.0003C29.7493 8.40866 23.591 2.25033 15.9993 2.25033C8.40768 2.25033 2.24935 8.40866 2.24935 16.0003C2.24935 23.592 8.40768 29.7503 15.9993 29.7503ZM15.9993 31.8337C24.741 31.8337 31.8327 24.742 31.8327 16.0003C31.8327 7.25866 24.741 0.166992 15.9993 0.166992C7.25768 0.166992 0.166016 7.25866 0.166016 16.0003C0.166016 24.742 7.25768 31.8337 15.9993 31.8337Z' fill='%2379D1C7'/%3E%3Cpath d='M23.6656 16.1497C22.8656 16.4081 22.4239 17.2664 22.6822 18.0664L22.3072 16.8914C22.0489 16.0914 21.1906 15.6497 20.3906 15.9081C19.5906 16.1664 19.1489 17.0247 19.4072 17.8247L19.0989 16.8747C18.8406 16.0747 17.9822 15.6331 17.1822 15.8914C16.3822 16.1497 15.9406 17.0081 16.1989 17.8081L14.0822 11.1997C13.8239 10.3997 12.9656 9.95805 12.1656 10.2164C11.3656 10.4747 10.9239 11.3331 11.1822 12.1331L14.8739 23.6664C14.0072 23.1081 12.8656 22.1997 11.6572 21.3831C10.6822 20.7247 9.92391 20.8497 9.48224 21.2997C8.99891 21.7831 8.90724 22.6497 9.81557 23.7581C10.5239 24.6164 13.0489 27.4997 16.2989 29.3581C18.2739 30.4914 20.1239 30.0831 21.1656 29.7497L24.0239 28.8331C27.1406 27.8331 28.0072 24.7081 27.2906 22.4664L25.5906 17.1497C25.3322 16.3497 24.4739 15.9081 23.6739 16.1664L23.6656 16.1497Z' fill='%2379D1C7'/%3E%3Cpath d='M11.5738 9.16686C11.8572 9.07519 12.0155 8.77519 11.9238 8.49186L11.1155 5.96686C11.0238 5.68352 10.7238 5.52519 10.4405 5.61686C10.1572 5.70852 9.99882 6.00852 10.0905 6.29186L10.8988 8.81686C10.9905 9.10019 11.2905 9.25852 11.5738 9.16686Z' fill='%2379D1C7'/%3E%3Cpath d='M14.1751 9.38341C14.3084 9.34174 14.4167 9.25008 14.4917 9.11674L15.7084 6.75841C15.8417 6.49174 15.7417 6.17508 15.4751 6.03341C15.2084 5.90008 14.8834 6.00008 14.7501 6.26674L13.5334 8.62508C13.4001 8.89174 13.5001 9.21674 13.7667 9.35008C13.9001 9.41674 14.0417 9.42508 14.1751 9.38341Z' fill='%2379D1C7'/%3E%3Cpath d='M15.1921 11.025C15.2837 11.3083 15.5837 11.4667 15.8671 11.375L18.3921 10.5667C18.6754 10.475 18.8337 10.175 18.7421 9.89166C18.6504 9.60833 18.3504 9.45 18.0671 9.54166L15.5421 10.35C15.2587 10.4417 15.1004 10.7417 15.1921 11.025Z' fill='%2379D1C7'/%3E%3Cpath d='M9.17391 10.8168C9.30724 10.8835 9.44891 10.8918 9.58224 10.8501C9.71557 10.8085 9.83224 10.7168 9.89891 10.5835C10.0322 10.3168 9.93224 10.0001 9.66557 9.85848L7.30724 8.64181C7.04057 8.50848 6.72391 8.60848 6.58224 8.87514C6.44891 9.14181 6.54891 9.46681 6.81557 9.60014L9.17391 10.8168Z' fill='%2379D1C7'/%3E%3Cpath d='M9.37447 13.4505C9.65781 13.3588 9.81614 13.0588 9.72447 12.7755C9.63281 12.4921 9.33281 12.3338 9.04947 12.4255L6.52447 13.2338C6.24114 13.3255 6.08281 13.6255 6.17447 13.9088C6.26614 14.1921 6.56614 14.3505 6.84947 14.2588L9.37447 13.4505Z' fill='%2379D1C7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2446_8830'%3E%3Crect width='31.6667' height='31.6667' fill='white' transform='translate(0.166016 0.166992)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
5) ico-interective-pink 학습중(인터랙티브 24년추가)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cg clip-path='url(%23clip0_2446_6645)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.9993 29.7503C23.591 29.7503 29.7493 23.592 29.7493 16.0003C29.7493 8.40866 23.591 2.25033 15.9993 2.25033C8.40768 2.25033 2.24935 8.40866 2.24935 16.0003C2.24935 23.592 8.40768 29.7503 15.9993 29.7503ZM15.9993 31.8337C24.741 31.8337 31.8327 24.742 31.8327 16.0003C31.8327 7.25866 24.741 0.166992 15.9993 0.166992C7.25768 0.166992 0.166016 7.25866 0.166016 16.0003C0.166016 24.742 7.25768 31.8337 15.9993 31.8337Z' fill='%23F3B3D1'/%3E%3Cpath d='M23.6656 16.1497C22.8656 16.4081 22.4239 17.2664 22.6822 18.0664L22.3072 16.8914C22.0489 16.0914 21.1906 15.6497 20.3906 15.9081C19.5906 16.1664 19.1489 17.0247 19.4072 17.8247L19.0989 16.8747C18.8406 16.0747 17.9822 15.6331 17.1822 15.8914C16.3822 16.1497 15.9406 17.0081 16.1989 17.8081L14.0822 11.1997C13.8239 10.3997 12.9656 9.95805 12.1656 10.2164C11.3656 10.4747 10.9239 11.3331 11.1822 12.1331L14.8739 23.6664C14.0072 23.1081 12.8656 22.1997 11.6572 21.3831C10.6822 20.7247 9.92391 20.8497 9.48224 21.2997C8.99891 21.7831 8.90724 22.6497 9.81557 23.7581C10.5239 24.6164 13.0489 27.4997 16.2989 29.3581C18.2739 30.4914 20.1239 30.0831 21.1656 29.7497L24.0239 28.8331C27.1406 27.8331 28.0072 24.7081 27.2906 22.4664L25.5906 17.1497C25.3322 16.3497 24.4739 15.9081 23.6739 16.1664L23.6656 16.1497Z' fill='%23F3B3D1'/%3E%3Cpath d='M11.5738 9.16686C11.8572 9.07519 12.0155 8.77519 11.9238 8.49186L11.1155 5.96686C11.0238 5.68352 10.7238 5.52519 10.4405 5.61686C10.1572 5.70852 9.99882 6.00852 10.0905 6.29186L10.8988 8.81686C10.9905 9.10019 11.2905 9.25852 11.5738 9.16686Z' fill='%23F3B3D1'/%3E%3Cpath d='M14.1751 9.38341C14.3084 9.34174 14.4167 9.25008 14.4917 9.11674L15.7084 6.75841C15.8417 6.49174 15.7417 6.17508 15.4751 6.03341C15.2084 5.90008 14.8834 6.00008 14.7501 6.26674L13.5334 8.62508C13.4001 8.89174 13.5001 9.21674 13.7667 9.35008C13.9001 9.41674 14.0417 9.42508 14.1751 9.38341Z' fill='%23F3B3D1'/%3E%3Cpath d='M15.1921 11.025C15.2837 11.3083 15.5837 11.4667 15.8671 11.375L18.3921 10.5667C18.6754 10.475 18.8337 10.175 18.7421 9.89166C18.6504 9.60833 18.3504 9.45 18.0671 9.54166L15.5421 10.35C15.2587 10.4417 15.1004 10.7417 15.1921 11.025Z' fill='%23F3B3D1'/%3E%3Cpath d='M9.17391 10.8168C9.30724 10.8835 9.44891 10.8918 9.58224 10.8501C9.71557 10.8085 9.83224 10.7168 9.89891 10.5835C10.0322 10.3168 9.93224 10.0001 9.66557 9.85848L7.30724 8.64181C7.04057 8.50848 6.72391 8.60848 6.58224 8.87514C6.44891 9.14181 6.54891 9.46681 6.81557 9.60014L9.17391 10.8168Z' fill='%23F3B3D1'/%3E%3Cpath d='M9.37447 13.4505C9.65781 13.3588 9.81614 13.0588 9.72447 12.7755C9.63281 12.4921 9.33281 12.3338 9.04947 12.4255L6.52447 13.2338C6.24114 13.3255 6.08281 13.6255 6.17447 13.9088C6.26614 14.1921 6.56614 14.3505 6.84947 14.2588L9.37447 13.4505Z' fill='%23F3B3D1'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2446_6645'%3E%3Crect width='31.6667' height='31.6667' fill='white' transform='translate(0.166016 0.166992)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
6) ico-interective-navy 학습완료(인터랙티브 24년추가)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cg clip-path='url(%23clip0_2446_3342)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.9993 29.7503C23.591 29.7503 29.7493 23.592 29.7493 16.0003C29.7493 8.40866 23.591 2.25033 15.9993 2.25033C8.40768 2.25033 2.24935 8.40866 2.24935 16.0003C2.24935 23.592 8.40768 29.7503 15.9993 29.7503ZM15.9993 31.8337C24.741 31.8337 31.8327 24.742 31.8327 16.0003C31.8327 7.25866 24.741 0.166992 15.9993 0.166992C7.25768 0.166992 0.166016 7.25866 0.166016 16.0003C0.166016 24.742 7.25768 31.8337 15.9993 31.8337Z' fill='%2301416C'/%3E%3Cpath d='M23.6656 16.1497C22.8656 16.4081 22.4239 17.2664 22.6822 18.0664L22.3072 16.8914C22.0489 16.0914 21.1906 15.6497 20.3906 15.9081C19.5906 16.1664 19.1489 17.0247 19.4072 17.8247L19.0989 16.8747C18.8406 16.0747 17.9822 15.6331 17.1822 15.8914C16.3822 16.1497 15.9406 17.0081 16.1989 17.8081L14.0822 11.1997C13.8239 10.3997 12.9656 9.95805 12.1656 10.2164C11.3656 10.4747 10.9239 11.3331 11.1822 12.1331L14.8739 23.6664C14.0072 23.1081 12.8656 22.1997 11.6572 21.3831C10.6822 20.7247 9.92391 20.8497 9.48224 21.2997C8.99891 21.7831 8.90724 22.6497 9.81557 23.7581C10.5239 24.6164 13.0489 27.4997 16.2989 29.3581C18.2739 30.4914 20.1239 30.0831 21.1656 29.7497L24.0239 28.8331C27.1406 27.8331 28.0072 24.7081 27.2906 22.4664L25.5906 17.1497C25.3322 16.3497 24.4739 15.9081 23.6739 16.1664L23.6656 16.1497Z' fill='%2301416C'/%3E%3Cpath d='M11.5738 9.16686C11.8572 9.07519 12.0155 8.77519 11.9238 8.49186L11.1155 5.96686C11.0238 5.68352 10.7238 5.52519 10.4405 5.61686C10.1572 5.70852 9.99882 6.00852 10.0905 6.29186L10.8988 8.81686C10.9905 9.10019 11.2905 9.25852 11.5738 9.16686Z' fill='%2301416C'/%3E%3Cpath d='M14.1751 9.38341C14.3084 9.34174 14.4167 9.25008 14.4917 9.11674L15.7084 6.75841C15.8417 6.49174 15.7417 6.17508 15.4751 6.03341C15.2084 5.90008 14.8834 6.00008 14.7501 6.26674L13.5334 8.62508C13.4001 8.89174 13.5001 9.21674 13.7667 9.35008C13.9001 9.41674 14.0417 9.42508 14.1751 9.38341Z' fill='%2301416C'/%3E%3Cpath d='M15.1921 11.025C15.2837 11.3083 15.5837 11.4667 15.8671 11.375L18.3921 10.5667C18.6754 10.475 18.8337 10.175 18.7421 9.89166C18.6504 9.60833 18.3504 9.45 18.0671 9.54166L15.5421 10.35C15.2587 10.4417 15.1004 10.7417 15.1921 11.025Z' fill='%2301416C'/%3E%3Cpath d='M9.17391 10.8168C9.30724 10.8835 9.44891 10.8918 9.58224 10.8501C9.71557 10.8085 9.83224 10.7168 9.89891 10.5835C10.0322 10.3168 9.93224 10.0001 9.66557 9.85848L7.30724 8.64181C7.04057 8.50848 6.72391 8.60848 6.58224 8.87514C6.44891 9.14181 6.54891 9.46681 6.81557 9.60014L9.17391 10.8168Z' fill='%2301416C'/%3E%3Cpath d='M9.37447 13.4505C9.65781 13.3588 9.81614 13.0588 9.72447 12.7755C9.63281 12.4921 9.33281 12.3338 9.04947 12.4255L6.52447 13.2338C6.24114 13.3255 6.08281 13.6255 6.17447 13.9088C6.26614 14.1921 6.56614 14.3505 6.84947 14.2588L9.37447 13.4505Z' fill='%2301416C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2446_3342'%3E%3Crect width='31.6667' height='31.6667' fill='white' transform='translate(0.166016 0.166992)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
7) ico-exam-red-pink 미응시(시험)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M18.2077 26.042L15.8744 23.7087C15.7077 23.542 15.5243 23.417 15.3327 23.3337C15.141 23.2503 14.941 23.2087 14.7243 23.2087C14.5077 23.2087 14.3077 23.2503 14.0993 23.3337C13.891 23.417 13.7077 23.542 13.541 23.7087C13.2077 24.042 13.041 24.442 13.041 24.892C13.041 25.342 13.2077 25.742 13.541 26.0837L17.0827 29.667C17.2494 29.8337 17.4327 29.9503 17.6243 30.0253C17.816 30.1003 18.0243 30.1253 18.2494 30.1253C18.4744 30.1253 18.6827 30.092 18.8744 30.0253C19.066 29.9587 19.2494 29.8337 19.416 29.667L26.4577 22.6253C26.791 22.292 26.9577 21.892 26.9577 21.417C26.9577 20.942 26.791 20.542 26.4577 20.2087C26.1244 19.8753 25.7244 19.7087 25.2494 19.7087C24.7744 19.7087 24.3744 19.8753 24.041 20.2087L18.2077 26.042ZM9.99935 37.5003C9.08268 37.5003 8.29935 37.1753 7.64935 36.5253C6.99935 35.8753 6.66602 35.0837 6.66602 34.167V7.50033C6.66602 6.58366 6.99102 5.80033 7.64935 5.14199C8.30768 4.48366 9.08268 4.16699 9.99935 4.16699H21.9577C22.3994 4.16699 22.8244 4.25033 23.2327 4.41699C23.641 4.58366 23.991 4.81699 24.2994 5.12533L32.3827 13.2087C32.691 13.517 32.9244 13.867 33.091 14.2753C33.2577 14.6837 33.341 15.1003 33.341 15.542V34.167C33.341 35.0837 33.016 35.867 32.3577 36.5253C31.6994 37.1837 30.9244 37.5003 30.0077 37.5003H9.99935ZM21.666 14.167V7.50033H9.99935V34.167H29.9994V15.8337H23.3327C22.8577 15.8337 22.466 15.6753 22.1494 15.3587C21.8327 15.042 21.666 14.642 21.666 14.1753V14.167Z' fill='%23F04D69'/%3E%3C/svg%3E");
8) ico-exam-navy 응시 완료(시험)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M18.2077 26.042L15.8744 23.7087C15.7077 23.542 15.5243 23.417 15.3327 23.3337C15.141 23.2503 14.941 23.2087 14.7243 23.2087C14.5077 23.2087 14.3077 23.2503 14.0993 23.3337C13.891 23.417 13.7077 23.542 13.541 23.7087C13.2077 24.042 13.041 24.442 13.041 24.892C13.041 25.342 13.2077 25.742 13.541 26.0837L17.0827 29.667C17.2494 29.8337 17.4327 29.9503 17.6243 30.0253C17.816 30.1003 18.0243 30.1253 18.2494 30.1253C18.4744 30.1253 18.6827 30.092 18.8744 30.0253C19.066 29.9587 19.2494 29.8337 19.416 29.667L26.4577 22.6253C26.791 22.292 26.9577 21.892 26.9577 21.417C26.9577 20.942 26.791 20.542 26.4577 20.2087C26.1244 19.8753 25.7244 19.7087 25.2494 19.7087C24.7744 19.7087 24.3744 19.8753 24.041 20.2087L18.2077 26.042ZM9.99935 37.5003C9.08268 37.5003 8.29935 37.1753 7.64935 36.5253C6.99935 35.8753 6.66602 35.0837 6.66602 34.167V7.50033C6.66602 6.58366 6.99102 5.80033 7.64935 5.14199C8.30768 4.48366 9.08268 4.16699 9.99935 4.16699H21.9577C22.3994 4.16699 22.8244 4.25033 23.2327 4.41699C23.641 4.58366 23.991 4.81699 24.2994 5.12533L32.3827 13.2087C32.691 13.517 32.9244 13.867 33.091 14.2753C33.2577 14.6837 33.341 15.1003 33.341 15.542V34.167C33.341 35.0837 33.016 35.867 32.3577 36.5253C31.6994 37.1837 30.9244 37.5003 30.0077 37.5003H9.99935ZM21.666 14.167V7.50033H9.99935V34.167H29.9994V15.8337H23.3327C22.8577 15.8337 22.466 15.6753 22.1494 15.3587C21.8327 15.042 21.666 14.642 21.666 14.1753V14.167Z' fill='%2301416C'/%3E%3C/svg%3E");
2. 학습 진도맵 - 카드 상태 아이콘
1) ico-play-mint-blue-big 학습하기 (동영상)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.9993 55.3333C44.1496 55.3333 53.9993 45.4836 53.9993 33.3333C53.9993 21.1831 44.1496 11.3333 31.9993 11.3333C19.8491 11.3333 9.99935 21.1831 9.99935 33.3333C9.99935 45.4836 19.8491 55.3333 31.9993 55.3333ZM31.9993 58.6667C45.9906 58.6667 57.3327 47.3245 57.3327 33.3333C57.3327 19.3421 45.9906 8 31.9993 8C18.0081 8 6.66602 19.3421 6.66602 33.3333C6.66602 47.3245 18.0081 58.6667 31.9993 58.6667Z' fill='%2379D1C7'/%3E%3Cpath d='M41.6124 31.3788C43.0172 32.3021 43.0172 34.3652 41.6124 35.2885L28.9467 43.6133C27.3947 44.6334 25.3327 43.518 25.3327 41.6584L25.3327 25.0089C25.3327 23.1493 27.3947 22.034 28.9467 23.054L41.6124 31.3788Z' fill='%2379D1C7'/%3E%3C/svg%3E");
2) ico-play-pink-big 이어하기(마지막 학습일) (동영상)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.9993 55.3333C44.1496 55.3333 53.9993 45.4836 53.9993 33.3333C53.9993 21.1831 44.1496 11.3333 31.9993 11.3333C19.8491 11.3333 9.99935 21.1831 9.99935 33.3333C9.99935 45.4836 19.8491 55.3333 31.9993 55.3333ZM31.9993 58.6667C45.9906 58.6667 57.3327 47.3245 57.3327 33.3333C57.3327 19.3421 45.9906 8 31.9993 8C18.0081 8 6.66602 19.3421 6.66602 33.3333C6.66602 47.3245 18.0081 58.6667 31.9993 58.6667Z' fill='%23F3B3D1'/%3E%3Cpath d='M41.6124 31.3788C43.0172 32.3021 43.0172 34.3652 41.6124 35.2885L28.9467 43.6133C27.3947 44.6334 25.3327 43.518 25.3327 41.6584L25.3327 25.0089C25.3327 23.1493 27.3947 22.034 28.9467 23.054L41.6124 31.3788Z' fill='%23F3B3D1'/%3E%3C/svg%3E");
3) ico-play-navy-big 복습하기(학습 완료일) (동영상)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.9993 55.3333C44.1496 55.3333 53.9993 45.4836 53.9993 33.3333C53.9993 21.1831 44.1496 11.3333 31.9993 11.3333C19.8491 11.3333 9.99935 21.1831 9.99935 33.3333C9.99935 45.4836 19.8491 55.3333 31.9993 55.3333ZM31.9993 58.6667C45.9906 58.6667 57.3327 47.3245 57.3327 33.3333C57.3327 19.3421 45.9906 8 31.9993 8C18.0081 8 6.66602 19.3421 6.66602 33.3333C6.66602 47.3245 18.0081 58.6667 31.9993 58.6667Z' fill='%2301416C'/%3E%3Cpath d='M41.6124 31.3788C43.0172 32.3021 43.0172 34.3652 41.6124 35.2885L28.9467 43.6133C27.3947 44.6334 25.3327 43.518 25.3327 41.6584L25.3327 25.0089C25.3327 23.1493 27.3947 22.034 28.9467 23.054L41.6124 31.3788Z' fill='%2301416C'/%3E%3C/svg%3E");
4) ico-interective-mint-blue-big 학습하기 (인터랙티브 24년추가)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52' fill='none'%3E%3Cg clip-path='url(%23clip0_2446_16345)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M25.9993 48.0003C38.146 48.0003 47.9993 38.147 47.9993 26.0003C47.9993 13.8537 38.146 4.00033 25.9993 4.00033C13.8527 4.00033 3.99935 13.8537 3.99935 26.0003C3.99935 38.147 13.8527 48.0003 25.9993 48.0003ZM25.9993 51.3337C39.986 51.3337 51.3327 39.987 51.3327 26.0003C51.3327 12.0137 39.986 0.666992 25.9993 0.666992C12.0127 0.666992 0.666016 12.0137 0.666016 26.0003C0.666016 39.987 12.0127 51.3337 25.9993 51.3337Z' fill='%2379D1C7'/%3E%3Cpath d='M38.2661 26.2403C36.9861 26.6537 36.2794 28.027 36.6928 29.307L36.0928 27.427C35.6794 26.147 34.3061 25.4403 33.0261 25.8537C31.7461 26.267 31.0394 27.6403 31.4528 28.9203L30.9594 27.4003C30.5461 26.1203 29.1728 25.4137 27.8928 25.827C26.6128 26.2403 25.9061 27.6137 26.3194 28.8937L22.9328 18.3203C22.5194 17.0403 21.1461 16.3337 19.8661 16.747C18.5861 17.1603 17.8794 18.5337 18.2928 19.8137L24.1994 38.267C22.8128 37.3737 20.9861 35.9203 19.0528 34.6137C17.4928 33.5603 16.2794 33.7603 15.5728 34.4803C14.7994 35.2537 14.6528 36.6403 16.1061 38.4137C17.2394 39.787 21.2794 44.4003 26.4794 47.3737C29.6394 49.187 32.5994 48.5337 34.2661 48.0003L38.8394 46.5337C43.8261 44.9337 45.2128 39.9337 44.0661 36.347L41.3461 27.8403C40.9328 26.5603 39.5594 25.8537 38.2794 26.267L38.2661 26.2403Z' fill='%2379D1C7'/%3E%3Cpath d='M18.9209 15.0674C19.3742 14.9207 19.6275 14.4407 19.4809 13.9874L18.1875 9.94736C18.0409 9.49403 17.5609 9.2407 17.1075 9.38736C16.6542 9.53403 16.4009 10.014 16.5475 10.4674L17.8409 14.5074C17.9875 14.9607 18.4675 15.214 18.9209 15.0674Z' fill='%2379D1C7'/%3E%3Cpath d='M23.0797 15.414C23.2931 15.3474 23.4664 15.2007 23.5864 14.9874L25.5331 11.214C25.7464 10.7874 25.5864 10.2807 25.1597 10.054C24.7331 9.84071 24.2131 10.0007 23.9997 10.4274L22.0531 14.2007C21.8397 14.6274 21.9997 15.1474 22.4264 15.3607C22.6397 15.4674 22.8664 15.4807 23.0797 15.414Z' fill='%2379D1C7'/%3E%3Cpath d='M24.7057 18.041C24.8524 18.4943 25.3324 18.7476 25.7857 18.601L29.8257 17.3076C30.2791 17.161 30.5324 16.681 30.3857 16.2276C30.2391 15.7743 29.7591 15.521 29.3057 15.6676L25.2657 16.961C24.8124 17.1076 24.5591 17.5876 24.7057 18.041Z' fill='%2379D1C7'/%3E%3Cpath d='M15.0806 17.7069C15.2939 17.8136 15.5206 17.8269 15.7339 17.7602C15.9473 17.6936 16.1339 17.5469 16.2406 17.3336C16.4539 16.9069 16.2939 16.4002 15.8673 16.1736L12.0939 14.2269C11.6673 14.0136 11.1606 14.1736 10.9339 14.6002C10.7206 15.0269 10.8806 15.5469 11.3073 15.7602L15.0806 17.7069Z' fill='%2379D1C7'/%3E%3Cpath d='M15.3999 21.9209C15.8533 21.7743 16.1066 21.2943 15.9599 20.8409C15.8133 20.3876 15.3333 20.1343 14.8799 20.2809L10.8399 21.5743C10.3866 21.7209 10.1333 22.2009 10.2799 22.6543C10.4266 23.1076 10.9066 23.3609 11.3599 23.2143L15.3999 21.9209Z' fill='%2379D1C7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2446_16345'%3E%3Crect width='50.6667' height='50.6667' fill='white' transform='translate(0.666016 0.666992)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
5) ico-interective-pink-big 이어하기(마지막 학습일)(인터랙티브 24년추가)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52' fill='none'%3E%3Cg clip-path='url(%23clip0_2446_3471)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M25.9993 48.0003C38.146 48.0003 47.9993 38.147 47.9993 26.0003C47.9993 13.8537 38.146 4.00033 25.9993 4.00033C13.8527 4.00033 3.99935 13.8537 3.99935 26.0003C3.99935 38.147 13.8527 48.0003 25.9993 48.0003ZM25.9993 51.3337C39.986 51.3337 51.3327 39.987 51.3327 26.0003C51.3327 12.0137 39.986 0.666992 25.9993 0.666992C12.0127 0.666992 0.666016 12.0137 0.666016 26.0003C0.666016 39.987 12.0127 51.3337 25.9993 51.3337Z' fill='%23F3B3D1'/%3E%3Cpath d='M38.2661 26.2403C36.9861 26.6537 36.2794 28.027 36.6928 29.307L36.0928 27.427C35.6794 26.147 34.3061 25.4403 33.0261 25.8537C31.7461 26.267 31.0394 27.6403 31.4528 28.9203L30.9594 27.4003C30.5461 26.1203 29.1728 25.4137 27.8928 25.827C26.6128 26.2403 25.9061 27.6137 26.3194 28.8937L22.9328 18.3203C22.5194 17.0403 21.1461 16.3337 19.8661 16.747C18.5861 17.1603 17.8794 18.5337 18.2928 19.8137L24.1994 38.267C22.8128 37.3737 20.9861 35.9203 19.0528 34.6137C17.4928 33.5603 16.2794 33.7603 15.5728 34.4803C14.7994 35.2537 14.6528 36.6403 16.1061 38.4137C17.2394 39.787 21.2794 44.4003 26.4794 47.3737C29.6394 49.187 32.5994 48.5337 34.2661 48.0003L38.8394 46.5337C43.8261 44.9337 45.2128 39.9337 44.0661 36.347L41.3461 27.8403C40.9328 26.5603 39.5594 25.8537 38.2794 26.267L38.2661 26.2403Z' fill='%23F3B3D1'/%3E%3Cpath d='M18.9209 15.0674C19.3742 14.9207 19.6275 14.4407 19.4809 13.9874L18.1875 9.94736C18.0409 9.49403 17.5609 9.2407 17.1075 9.38736C16.6542 9.53403 16.4009 10.014 16.5475 10.4674L17.8409 14.5074C17.9875 14.9607 18.4675 15.214 18.9209 15.0674Z' fill='%23F3B3D1'/%3E%3Cpath d='M23.0797 15.414C23.2931 15.3474 23.4664 15.2007 23.5864 14.9874L25.5331 11.214C25.7464 10.7874 25.5864 10.2807 25.1597 10.054C24.7331 9.84071 24.2131 10.0007 23.9997 10.4274L22.0531 14.2007C21.8397 14.6274 21.9997 15.1474 22.4264 15.3607C22.6397 15.4674 22.8664 15.4807 23.0797 15.414Z' fill='%23F3B3D1'/%3E%3Cpath d='M24.7057 18.041C24.8524 18.4943 25.3324 18.7476 25.7857 18.601L29.8257 17.3076C30.2791 17.161 30.5324 16.681 30.3857 16.2276C30.2391 15.7743 29.7591 15.521 29.3057 15.6676L25.2657 16.961C24.8124 17.1076 24.5591 17.5876 24.7057 18.041Z' fill='%23F3B3D1'/%3E%3Cpath d='M15.0806 17.7069C15.2939 17.8136 15.5206 17.8269 15.7339 17.7602C15.9473 17.6936 16.1339 17.5469 16.2406 17.3336C16.4539 16.9069 16.2939 16.4002 15.8673 16.1736L12.0939 14.2269C11.6673 14.0136 11.1606 14.1736 10.9339 14.6002C10.7206 15.0269 10.8806 15.5469 11.3073 15.7602L15.0806 17.7069Z' fill='%23F3B3D1'/%3E%3Cpath d='M15.3999 21.9209C15.8533 21.7743 16.1066 21.2943 15.9599 20.8409C15.8133 20.3876 15.3333 20.1343 14.8799 20.2809L10.8399 21.5743C10.3866 21.7209 10.1333 22.2009 10.2799 22.6543C10.4266 23.1076 10.9066 23.3609 11.3599 23.2143L15.3999 21.9209Z' fill='%23F3B3D1'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2446_3471'%3E%3Crect width='50.6667' height='50.6667' fill='white' transform='translate(0.666016 0.666992)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
6) ico-interective-navy-big 복습하기(학습 완료일)(인터랙티브 24년추가)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52' fill='none'%3E%3Cg clip-path='url(%23clip0_2446_19392)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M25.9993 48.0003C38.146 48.0003 47.9993 38.147 47.9993 26.0003C47.9993 13.8537 38.146 4.00033 25.9993 4.00033C13.8527 4.00033 3.99935 13.8537 3.99935 26.0003C3.99935 38.147 13.8527 48.0003 25.9993 48.0003ZM25.9993 51.3337C39.986 51.3337 51.3327 39.987 51.3327 26.0003C51.3327 12.0137 39.986 0.666992 25.9993 0.666992C12.0127 0.666992 0.666016 12.0137 0.666016 26.0003C0.666016 39.987 12.0127 51.3337 25.9993 51.3337Z' fill='%2301416C'/%3E%3Cpath d='M38.2661 26.2403C36.9861 26.6537 36.2794 28.027 36.6928 29.307L36.0928 27.427C35.6794 26.147 34.3061 25.4403 33.0261 25.8537C31.7461 26.267 31.0394 27.6403 31.4528 28.9203L30.9594 27.4003C30.5461 26.1203 29.1728 25.4137 27.8928 25.827C26.6128 26.2403 25.9061 27.6137 26.3194 28.8937L22.9328 18.3203C22.5194 17.0403 21.1461 16.3337 19.8661 16.747C18.5861 17.1603 17.8794 18.5337 18.2928 19.8137L24.1994 38.267C22.8128 37.3737 20.9861 35.9203 19.0528 34.6137C17.4928 33.5603 16.2794 33.7603 15.5728 34.4803C14.7994 35.2537 14.6528 36.6403 16.1061 38.4137C17.2394 39.787 21.2794 44.4003 26.4794 47.3737C29.6394 49.187 32.5994 48.5337 34.2661 48.0003L38.8394 46.5337C43.8261 44.9337 45.2128 39.9337 44.0661 36.347L41.3461 27.8403C40.9328 26.5603 39.5594 25.8537 38.2794 26.267L38.2661 26.2403Z' fill='%2301416C'/%3E%3Cpath d='M18.9209 15.0674C19.3742 14.9207 19.6275 14.4407 19.4809 13.9874L18.1875 9.94736C18.0409 9.49403 17.5609 9.2407 17.1075 9.38736C16.6542 9.53403 16.4009 10.014 16.5475 10.4674L17.8409 14.5074C17.9875 14.9607 18.4675 15.214 18.9209 15.0674Z' fill='%2301416C'/%3E%3Cpath d='M23.0797 15.414C23.2931 15.3474 23.4664 15.2007 23.5864 14.9874L25.5331 11.214C25.7464 10.7874 25.5864 10.2807 25.1597 10.054C24.7331 9.84071 24.2131 10.0007 23.9997 10.4274L22.0531 14.2007C21.8397 14.6274 21.9997 15.1474 22.4264 15.3607C22.6397 15.4674 22.8664 15.4807 23.0797 15.414Z' fill='%2301416C'/%3E%3Cpath d='M24.7057 18.041C24.8524 18.4943 25.3324 18.7476 25.7857 18.601L29.8257 17.3076C30.2791 17.161 30.5324 16.681 30.3857 16.2276C30.2391 15.7743 29.7591 15.521 29.3057 15.6676L25.2657 16.961C24.8124 17.1076 24.5591 17.5876 24.7057 18.041Z' fill='%2301416C'/%3E%3Cpath d='M15.0806 17.7069C15.2939 17.8136 15.5206 17.8269 15.7339 17.7602C15.9473 17.6936 16.1339 17.5469 16.2406 17.3336C16.4539 16.9069 16.2939 16.4002 15.8673 16.1736L12.0939 14.2269C11.6673 14.0136 11.1606 14.1736 10.9339 14.6002C10.7206 15.0269 10.8806 15.5469 11.3073 15.7602L15.0806 17.7069Z' fill='%2301416C'/%3E%3Cpath d='M15.3999 21.9209C15.8533 21.7743 16.1066 21.2943 15.9599 20.8409C15.8133 20.3876 15.3333 20.1343 14.8799 20.2809L10.8399 21.5743C10.3866 21.7209 10.1333 22.2009 10.2799 22.6543C10.4266 23.1076 10.9066 23.3609 11.3599 23.2143L15.3999 21.9209Z' fill='%2301416C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2446_19392'%3E%3Crect width='50.6667' height='50.6667' fill='white' transform='translate(0.666016 0.666992)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
7) ico-exam-red-pink-big 시험보기(시험)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M29.1327 41.667L25.3993 37.9337C25.1327 37.667 24.8393 37.467 24.5327 37.3337C24.226 37.2003 23.906 37.1337 23.5593 37.1337C23.2127 37.1337 22.8927 37.2003 22.5593 37.3337C22.226 37.467 21.9327 37.667 21.666 37.9337C21.1327 38.467 20.866 39.107 20.866 39.827C20.866 40.547 21.1327 41.187 21.666 41.7337L27.3327 47.467C27.5993 47.7337 27.8927 47.9203 28.1993 48.0403C28.506 48.1603 28.8393 48.2003 29.1993 48.2003C29.5593 48.2003 29.8927 48.147 30.1993 48.0403C30.506 47.9337 30.7993 47.7337 31.066 47.467L42.3327 36.2003C42.866 35.667 43.1327 35.027 43.1327 34.267C43.1327 33.507 42.866 32.867 42.3327 32.3337C41.7993 31.8003 41.1593 31.5337 40.3993 31.5337C39.6393 31.5337 38.9993 31.8003 38.466 32.3337L29.1327 41.667ZM15.9993 60.0003C14.5327 60.0003 13.2793 59.4803 12.2393 58.4403C11.1993 57.4003 10.666 56.1337 10.666 54.667V12.0003C10.666 10.5337 11.186 9.28033 12.2393 8.22699C13.2927 7.17366 14.5327 6.66699 15.9993 6.66699H35.1327C35.8393 6.66699 36.5193 6.80033 37.1727 7.06699C37.826 7.33366 38.386 7.70699 38.8793 8.20033L51.8127 21.1337C52.306 21.627 52.6793 22.187 52.946 22.8403C53.2127 23.4937 53.346 24.1603 53.346 24.867V54.667C53.346 56.1337 52.826 57.387 51.7727 58.4403C50.7193 59.4937 49.4793 60.0003 48.0127 60.0003H15.9993ZM34.666 22.667V12.0003H15.9993V54.667H47.9993V25.3337H37.3327C36.5727 25.3337 35.946 25.0803 35.4393 24.5737C34.9327 24.067 34.666 23.427 34.666 22.6803V22.667Z' fill='%23F04D69'/%3E%3C/svg%3E");
8) ico-exam-navy-big 결과보기(시험)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M29.1327 41.667L25.3993 37.9337C25.1327 37.667 24.8393 37.467 24.5327 37.3337C24.226 37.2003 23.906 37.1337 23.5593 37.1337C23.2127 37.1337 22.8927 37.2003 22.5593 37.3337C22.226 37.467 21.9327 37.667 21.666 37.9337C21.1327 38.467 20.866 39.107 20.866 39.827C20.866 40.547 21.1327 41.187 21.666 41.7337L27.3327 47.467C27.5993 47.7337 27.8927 47.9203 28.1993 48.0403C28.506 48.1603 28.8393 48.2003 29.1993 48.2003C29.5593 48.2003 29.8927 48.147 30.1993 48.0403C30.506 47.9337 30.7993 47.7337 31.066 47.467L42.3327 36.2003C42.866 35.667 43.1327 35.027 43.1327 34.267C43.1327 33.507 42.866 32.867 42.3327 32.3337C41.7993 31.8003 41.1593 31.5337 40.3993 31.5337C39.6393 31.5337 38.9993 31.8003 38.466 32.3337L29.1327 41.667ZM15.9993 60.0003C14.5327 60.0003 13.2793 59.4803 12.2393 58.4403C11.1993 57.4003 10.666 56.1337 10.666 54.667V12.0003C10.666 10.5337 11.186 9.28033 12.2393 8.22699C13.2927 7.17366 14.5327 6.66699 15.9993 6.66699H35.1327C35.8393 6.66699 36.5193 6.80033 37.1727 7.06699C37.826 7.33366 38.386 7.70699 38.8793 8.20033L51.8127 21.1337C52.306 21.627 52.6793 22.187 52.946 22.8403C53.2127 23.4937 53.346 24.1603 53.346 24.867V54.667C53.346 56.1337 52.826 57.387 51.7727 58.4403C50.7193 59.4937 49.4793 60.0003 48.0127 60.0003H15.9993ZM34.666 22.667V12.0003H15.9993V54.667H47.9993V25.3337H37.3327C36.5727 25.3337 35.946 25.0803 35.4393 24.5737C34.9327 24.067 34.666 23.427 34.666 22.6803V22.667Z' fill='%2301416C'/%3E%3C/svg%3E");
*/
/* 학습진도맵 스크롤 기존 스타일 커스텀*/
.mCSB_scrollTools .mCSB_draggerRail {
background: #ddd !important;
height: 4px !important;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar:hover {
background-color: #00AB93 !important;
position: relative;
height: 12px !important;
margin: 3px 0 !important;
}
.dragger_bar_left {
display: none;
}
.dragger_bar_right {
display: none;
}
/*=======================================================
학습진도맵 디테일
========================================================*/
.page-subjUnitStudyDetail .base-select-wrap {
display: block !important;
margin-bottom: 20px;
}
.page-subjUnitStudyDetail .base-select-wrap .select-menu {
width: 100%;
}
.page-subjUnitStudyDetail .base-select-wrap .select-menu .select-btn {
background-color: #01416c;
border: none;
}
.page-subjUnitStudyDetail .base-select-wrap .select-menu .select-btn .sBtn-text {
color: #fff;
}
.page-subjUnitStudyDetail .study-detail {
padding: 50px 16px;
}
.page-subjUnitStudyDetail .study-detail .study-detail-title {
margin-bottom: 40px;
}
.page-subjUnitStudyDetail .study-detail .study-detail-title > h3 {
font-size: 18px;
font-weight: 700;
line-height: 144.444%;
margin-bottom: 10px;
}
.page-subjUnitStudyDetail .calendar-bg {
width: 112px;
height: 104px;
background: url("../../renewal2023/img/ico/ico-calendar.png") no-repeat 0 0;
align-items: center;
justify-content: center;
flex-direction: column;
}
.page-subjUnitStudyDetail .calendar-bg > p:first-child {
margin-top: 4px;
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
}
.page-subjUnitStudyDetail .calendar-bg > p:last-child {
font-size: 14px;
line-height: 128.571%;
}
@media (min-width: 801px) {
.page-subjUnitStudyDetail .base-select-wrap {
display: none !important;
}
.page-subjUnitStudyDetail .study-detail {
display: flex;
padding: 60px 80px;
gap: 30px;
justify-content: space-between;
}
.page-subjUnitStudyDetail .study-detail > ul {
display: flex;
justify-content: space-between;
}
.page-subjUnitStudyDetail .study-detail .study-detail-title {
flex-basis: 200px;
}
.page-subjUnitStudyDetail .study-detail .study-detail-title > h3 {
font-size: 24px;
font-weight: 700;
line-height: 133.333%;
margin-bottom: 20px;
}
.page-subjUnitStudyDetail .calendar-bg {
display: flex;
flex-shrink: 0;
}
}
.page-subjUnitStudyDetail .study-detail-card-list {
padding: 0 15px;
flex-basis: 660px;
}
.page-subjUnitStudyDetail .study-detail-card-list .lesson-title {
position: relative;
width: calc(100% + 30px);
border-radius: 20px;
border: 1px solid #01416c;
padding: 9px 20px;
color: #01416c;
font-weight: 700;
margin-bottom: 30px;
margin-left: -15px;
margin-right: -15px;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card {
position: relative;
display: flex;
justify-content: space-between;
flex-direction: column;
max-width: 640px;
background-color: #fff;
border-radius: 10px;
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 10px;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card::before {
content: none;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card::after {
content: none;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card .study-detail-card-info {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card .study-detail-card-info .state-btn {
margin-right: 10px;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card .study-detail-card-info > p {
font-size: 12px;
line-height: 133.333%;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card .study-detail-card-info > p > span {
padding: 0 5px;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card .study-detail-card-btn {
margin-top: 30px;
align-self: center;
display: flex;
align-items: center;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card .study-detail-card-btn img {
width: 36px;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card .study-detail-card-btn span {
font-size: 12px;
line-height: 133.333%;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card-title {
position: relative;
font-size: 18px;
font-weight: 700;
line-height: 144.444%;
color: #01416c;
margin-top: 40px;
margin-bottom: 10px;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card-title::after {
display: block;
content: "";
position: absolute;
top: 6px;
left: -20px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #01416c;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card__type2::before {
display: block;
content: "";
position: absolute;
top: -15px;
left: -13px;
height: calc(100% + 64px);
width: 1px;
background-color: #01416c;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card__type2::after {
content: none;
}
@media (min-width: 801px) {
.page-subjUnitStudyDetail .study-detail-card-list .lesson-title {
margin-left: 0;
margin-right: 0;
width: 100%;
}
.page-subjUnitStudyDetail .study-detail-card-list .lesson-title::before {
content: "";
position: absolute;
top: 50%;
margin-top: -6px;
left: -46px;
background: url("../../renewal2023/img/ico/ico-card-line.png") no-repeat 0 0;
width: 52px;
height: 12px;
background-size: contain;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card {
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-left: auto;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card::before {
display: block;
content: "";
position: absolute;
top: 12px;
left: -13px;
height: 100%;
width: 1px;
background-color: #01416c;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card::after {
display: block;
content: "";
position: absolute;
top: -2px;
left: -20px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #01416c;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card .study-detail-card-info {
margin-bottom: 10px;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card .study-detail-card-info > p {
font-size: 16px;
line-height: 150%;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card .study-detail-card-btn {
margin-top: 0px;
flex-direction: column;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card .study-detail-card-btn img {
width: 64px;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card .study-detail-card-btn span {
display: block;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card__type2::after {
content: none;
}
.page-subjUnitStudyDetail .study-detail-card-list .study-detail-card__type2::before {
top: -15px;
height: calc(100% + 64px);
}
}
.page-subjUnitStudyDetail .close-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 0;
background-color: #fff;
gap: 8px;
}
.page-subjUnitStudyDetail .close-btn > img {
width: 24px;
height: 24px;
}
@media (min-width: 801px) {
.page-subjUnitStudyDetail .close-btn {
padding: 18px 0;
}
}
/*=================================================================
푸르넷 수학 - 심화 문제
(문제 박스는 이달의 학습 1-2학년도 사용)
======================================================================*/
.sub-container:has(.page-deepProblems) .location .sub-top-text .icon, .sub-container:has(.page-levelAssessment) .location .sub-top-text .icon, .sub-container:has(.page-lowGradeLevelAssessment) .location .sub-top-text .icon, .sub-container:has(.page-mathFoundation) .location .sub-top-text .icon, .sub-container:has(.page-mathCartoon) .location .sub-top-text .icon, .sub-container:has(.page-textBook) .location .sub-top-text .icon {
width: 320px;
height: inherit;
position: absolute;
bottom: -22px;
right: 0;
}
.sub-container:has(.page-deepProblems) .location .sub-top-text .icon .icon-img, .sub-container:has(.page-levelAssessment) .location .sub-top-text .icon .icon-img, .sub-container:has(.page-lowGradeLevelAssessment) .location .sub-top-text .icon .icon-img, .sub-container:has(.page-mathFoundation) .location .sub-top-text .icon .icon-img, .sub-container:has(.page-mathCartoon) .location .sub-top-text .icon .icon-img, .sub-container:has(.page-textBook) .location .sub-top-text .icon .icon-img {
width: 100%;
height: 106px;
}
.sub-container:has(.page-deepProblems) .base-page-cont.page-textBook .top-cont-wrap .base-date-picker, .sub-container:has(.page-levelAssessment) .base-page-cont.page-textBook .top-cont-wrap .base-date-picker, .sub-container:has(.page-lowGradeLevelAssessment) .base-page-cont.page-textBook .top-cont-wrap .base-date-picker, .sub-container:has(.page-mathFoundation) .base-page-cont.page-textBook .top-cont-wrap .base-date-picker, .sub-container:has(.page-mathCartoon) .base-page-cont.page-textBook .top-cont-wrap .base-date-picker, .sub-container:has(.page-textBook) .base-page-cont.page-textBook .top-cont-wrap .base-date-picker {
border-top: 1px solid #00AB93;
}
.page-deepProblems .problem-box-wrap,
.page-levelAssessment .problem-box-wrap {
margin-top: 12px;
}
@media (min-width: 801px) {
.page-deepProblems .problem-box-wrap,
.page-levelAssessment .problem-box-wrap {
margin-top: 40px;
padding: 0;
}
.page-deepProblems .problem-box-wrap + .problem-box-wrap,
.page-levelAssessment .problem-box-wrap + .problem-box-wrap {
margin-top: 42px;
}
}
.page-deepProblems .problem-box-wrap .problem-box-tit,
.page-levelAssessment .problem-box-wrap .problem-box-tit {
font-size: 20px;
font-weight: 700;
display: flex;
gap: 4px;
}
@media (min-width: 801px) {
.page-deepProblems .problem-box-wrap .problem-box-tit,
.page-levelAssessment .problem-box-wrap .problem-box-tit {
font-size: 24px;
line-height: 133.333%;
}
}
.page-deepProblems .problem-box-wrap .problem-box-tit img,
.page-levelAssessment .problem-box-wrap .problem-box-tit img {
width: 40px;
height: auto;
margin-bottom: 8px;
}
@media (min-width: 801px) {
.page-deepProblems .problem-box-wrap .problem-box-tit img,
.page-levelAssessment .problem-box-wrap .problem-box-tit img {
width: 55px;
margin-bottom: 0;
}
}
.page-deepProblems .problem-box-con,
.page-levelAssessment .problem-box-con {
width: 100%;
margin-bottom: 16px;
border-radius: 20px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
border: 1px solid #ddd;
background-color: white;
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px 24px;
}
@media (min-width: 801px) {
.page-deepProblems .problem-box-con,
.page-levelAssessment .problem-box-con {
padding: 0;
gap: 0;
border: none;
}
}
.page-deepProblems .problem-box-top,
.page-levelAssessment .problem-box-top {
border-radius: 20px 20px 0px 0px;
}
.page-deepProblems .problem-box-top > h3,
.page-levelAssessment .problem-box-top > h3 {
font-size: 18px;
font-weight: 700;
line-height: 144.444%;
}
@media (min-width: 801px) {
.page-deepProblems .problem-box-top,
.page-levelAssessment .problem-box-top {
padding: 13px 40px;
background: #e0e7ec;
}
}
.page-deepProblems .problem-box-bottom,
.page-levelAssessment .problem-box-bottom {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 801px) {
.page-deepProblems .problem-box-bottom,
.page-levelAssessment .problem-box-bottom {
padding: 20px 40px;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
border-radius: 0px 0px 20px 20px;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 0;
}
}
.page-deepProblems .problem-box-btn-group,
.page-levelAssessment .problem-box-btn-group {
width: 100%;
display: flex;
align-items: center;
padding: 0;
}
.page-deepProblems .problem-box-btn-group > h4,
.page-levelAssessment .problem-box-btn-group > h4 {
margin-right: 40px;
}
.page-deepProblems .problem-box-btn-group > button:last-child,
.page-levelAssessment .problem-box-btn-group > button:last-child {
margin-left: 10px;
}
.page-deepProblems .problem-box-btn-group > button,
.page-levelAssessment .problem-box-btn-group > button {
width: auto;
flex-grow: 1;
padding: 0;
max-width: 100px;
min-width: 100px;
}
@media (min-width: 801px) {
.page-deepProblems .problem-box-btn-group,
.page-levelAssessment .problem-box-btn-group {
padding: 10px 0;
flex-basis: 50%;
justify-content: center;
}
.page-deepProblems .problem-box-btn-group:nth-child(odd),
.page-levelAssessment .problem-box-btn-group:nth-child(odd) {
border-right: 1px dotted #ddd;
}
.page-deepProblems .problem-box-btn-group > button:last-child,
.page-levelAssessment .problem-box-btn-group > button:last-child {
margin-left: 16px;
}
}
/*=================================================================
푸르넷 수학 - 기초력/서술형 문제 , 수학 학습만화
* 공통 - 이미지/hover : download 버튼 ,title
======================================================================*/
.page-mathFoundation .reference-list,
.page-mathCartoon .reference-list {
padding: 0 16px;
margin-top: 32px;
}
.page-mathFoundation .reference-list > ul,
.page-mathCartoon .reference-list > ul {
display: flex;
gap: 26px;
}
@media (min-width: 801px) {
.page-mathFoundation .reference-list,
.page-mathCartoon .reference-list {
margin-top: 80px;
padding: 0;
}
.page-mathFoundation .reference-list > ul,
.page-mathCartoon .reference-list > ul {
gap: 40px;
}
}
.page-mathFoundation .image-card-wrap,
.page-mathCartoon .image-card-wrap {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
}
@media (min-width: 801px) {
.page-mathFoundation .image-card-wrap,
.page-mathCartoon .image-card-wrap {
width: 25%;
}
}
.page-mathFoundation .book-image,
.page-mathCartoon .book-image {
width: 100%;
aspect-ratio: 0.8;
position: relative;
flex-shrink: 0;
margin-bottom: 10px;
border-radius: 20px;
border: 1px solid #ddd;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
.page-mathFoundation .book-image > img,
.page-mathCartoon .book-image > img {
width: 100%;
border-radius: 20px;
}
@media (min-width: 801px) {
.page-mathFoundation .book-image,
.page-mathCartoon .book-image {
margin-bottom: 20px;
}
}
.page-mathFoundation .grade,
.page-mathCartoon .grade {
display: flex;
margin-bottom: 6px;
}
.page-mathFoundation .grade > p,
.page-mathCartoon .grade > p {
min-width: 70px;
display: inline-flex;
padding: 2px 0px;
justify-content: center;
align-items: center;
gap: 10px;
flex-basis: 50%;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 133.333% */
letter-spacing: -0.12px;
}
.page-mathFoundation .grade > p:first-child,
.page-mathCartoon .grade > p:first-child {
border-radius: 14px 0px 0px 14px;
border: 1px solid #79d1c7;
color: #79d1c7;
}
.page-mathFoundation .grade > p:last-child,
.page-mathCartoon .grade > p:last-child {
border-radius: 0px 14px 14px 0px;
background-color: #79d1c7;
color: white;
}
@media (min-width: 801px) {
.page-mathFoundation .grade,
.page-mathCartoon .grade {
margin-bottom: 12px;
}
.page-mathFoundation .grade > p,
.page-mathCartoon .grade > p {
padding: 2px 0px;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */
letter-spacing: -0.16px;
}
}
.page-mathFoundation .unit,
.page-mathCartoon .unit {
font-size: 12px;
line-height: 133.333%;
color: #666;
margin-bottom: 2px;
}
@media (min-width: 801px) {
.page-mathFoundation .unit,
.page-mathCartoon .unit {
margin-bottom: 6px;
font-size: 16px;
line-height: 150%;
}
}
.page-mathFoundation .title,
.page-mathCartoon .title {
font-weight: 700;
}
@media (min-width: 801px) {
.page-mathFoundation .title,
.page-mathCartoon .title {
font-size: 20px;
line-height: 140%;
}
}
.page-mathFoundation .ebook:hover::before,
.page-mathCartoon .ebook:hover::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(18, 18, 18, 0.5);
border-radius: 20px;
}
.page-mathFoundation .ebook:hover::after,
.page-mathCartoon .ebook:hover::after {
display: block;
content: "e북 보기";
text-align: center;
background-color: #f04d69;
width: 100%;
height: 28px;
border-radius: 0 0 20px 20px;
background-image: url("../../renewal2023/img/ico/ico-fill-ebook.png");
background-repeat: no-repeat;
background-position: 30% 50%;
background-size: 24px;
display: inline-flex;
align-items: center;
justify-self: center;
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 128.571%;
color: white;
text-indent: 24px;
}
@media (min-width: 801px) {
.page-mathFoundation .ebook:hover::after,
.page-mathCartoon .ebook:hover::after {
height: 64px;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 140%;
text-indent: 48px;
background-size: 48px;
}
}
.page-mathFoundation .download:hover::before,
.page-mathCartoon .download:hover::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(18, 18, 18, 0.5);
border-radius: 20px;
}
.page-mathFoundation .download:hover::after,
.page-mathCartoon .download:hover::after {
display: block;
content: "";
background-color: #00ab93;
width: 48px;
height: 48px;
border-radius: 50%;
background-image: url("../../renewal2023/img/ico/ico-download-circle-green.png");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100%;
display: inline-flex;
align-items: center;
justify-self: center;
position: absolute;
top: 50%;
left: 50%;
margin-top: -24px;
margin-left: -24px;
}
@media (min-width: 801px) {
.page-mathFoundation .download:hover::after,
.page-mathCartoon .download:hover::after {
width: 96px;
height: 96px;
margin-top: -48px;
margin-left: -48px;
}
}
.page-mathFoundation .reference-list > ul {
justify-content: center;
}
@media (min-width: 801px) {
.page-mathFoundation .image-card-wrap {
min-width: 428px;
}
}
.page-mathFoundation .title {
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
}
@media (min-width: 801px) {
.page-mathFoundation .title {
font-size: 20px;
font-weight: 700;
line-height: 140%;
}
}
.page-mathCartoon .banner-image {
width: 100%;
height: 160px;
background-color: white;
}
.page-mathCartoon .banner-image > img {
width: 100%;
border-radius: 20px;
}
@media (min-width: 801px) {
.page-mathCartoon .reference-list {
padding-bottom: 60px;
border-bottom: 2px solid #121212;
}
}/*# sourceMappingURL=sub.css.map */