/* article List */

.main .articles {
    margin: 6.4rem auto 0;
}

.articles-header {
    min-height: 5.6rem;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}

.articles-header-leftside {
    position: absolute;
    left: 1.6rem;
    display: none;
}

.articles-header-leftside .btn_level {
    display: block;
    background: #fff;
    border: 1px solid #c8c8c8;
    padding: 0.8rem;
    border-radius: 1.0rem;
}

.articles-header-leftside .btn_category {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 3.6rem;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 1.0rem;
    font-size: 20px;
    font-weight: 700;
}

.articles-header-leftside .popup_level, .articles-header-leftside .popup_category {
    position: absolute;
    top: 5.6rem;
    left: 0;
    padding: 1.6rem;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 0.8rem;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    display: none;
}

.articles-header-leftside .popup_category {
    width: calc(100vw - 4.8rem);
    flex-direction: row;
    flex-wrap: wrap;
}

.articles-header-leftside .popup_level li a, .articles-header-leftside .popup_category li a {
    display: block;
    min-width: 12.8rem;
    padding: 1rem;
    text-align: center;
    border: 1px solid #c8c8c8;
    border-radius: 1.0rem;
}

.articles-header-leftside .popup_category li {
    width: calc( (100% - 4.8rem) / 5);
}

.articles-header-leftside .popup_level li a.active, .articles-header-leftside .popup_category li a.active {
    background: #34b197;
    border: none;
    color: #fff;
}


#btn_level:checked + label .popup_level, #btn_category:checked + label .popup_category {
    display: flex;
}

#btn_level:checked + label::after, #btn_category:checked + label::after {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
}

.articles-header .btn_more {
    position: absolute;
    right: 0;
}

.articles-header select {
    position: absolute;
    right: 0;
}

.articles-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -1.6rem;
}

.articles-list-item {
    margin-top: 4.0rem;
    padding: 0 1.6rem;
    position: relative; 
}

.row-4 .articles-list-item {
    width: calc(100%/4);
}

.row-3 .articles-list-item {
    width: calc(100%/3);
}

.articles-list-item::before {
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #d8d8d8;    
}

.row-4 .articles-list-item:nth-child(4n+1):before {
    display: none;
}

.row-3 .articles-list-item:nth-child(3n+1):before {
    display: none;
}

.articles-list-item-thumbsarea {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    padding-top: 60%;
    border-radius: 9px;
    /*
    border: 1px solid #ffffff;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
    */
    border: 1px solid #cccfcc;
    box-shadow: 0 3px 7px 0 rgba( 0, 0, 0, 0.1 );

}

.articles-list-item-thumbsarea .lv {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0.8rem 0.4rem 0.8rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    padding: 0.5rem 1.3rem 0.5rem 0.7rem;
    border-top-right-radius: 1.2rem;
    border-bottom-right-radius: 1.2rem;
    background: linear-gradient(to right, #7fb9dd, #34b197);
    z-index: 1;
    border: 1px solid #ffffff;
    border-left: none;
}

.articles-list-item-thumbsarea .write {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0.8rem 0.4rem 0.8rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    padding: 0.6rem 1.6rem 0.4rem 0.4rem;
    border-top-right-radius: 1.2rem;
    border-bottom-right-radius: 1.2rem;
    background: linear-gradient(to right, #f59ab2, #f35a78);
    z-index: 1;
}

.articles-list-item-thumbsarea .thumbs {
    position: absolute;
    width: 103%;
    height: 103%;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease all;
    border-radius: 9px;
}

.articles-list-item a:hover .articles-list-item-thumbsarea .thumbs {
}

.articles-list-item a:hover .articles-list-item-thumbsarea .thumbs {
    transform: translate(-50%, -50%) scale(1.2);
}

.articles-list-item-info {
    margin-top: 1.6rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 1.4rem;
}

.articles-list-item-title {
    font-size: 1.8rem;
    line-height: 1.5;
    margin: 1.6rem 0;
}

.articles-week {
    background: #ffffff;
    box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.5);
    border-bottom:1px solid #ccc;
    padding-top: 5px;

    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
}

.article-wrapper {
    margin: 0 auto;
    padding: 2.2rem 2.4rem;
    max-width: 1280px;
    /*
    box-shadow: 2px 5px 7px 0 rgba(0, 0, 0, 0.3);
    background:url(/images/weekback4.png) no-repeat;
    background-color: #ffffff;
    background-size: cover;
     */

    background: rgba(255,255,255,0.65);
    box-shadow: 0 1px 11px 0 rgba(255, 255, 255, 0.9);
    margin-top: 30px;
    margin-bottom: 30px;
    border: 1px solid #fafafa;
    border-radius: 13px;

    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
}

.articles-list-item2 {
    margin-bottom: 30px;
    padding: 30px;
    border: 1px solid #ffffff;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    margin-left: 10px;
    margin-right: 10px;
    background: rgba( 255, 255, 255, 0.05 );
    /*
    box-shadow: 3px 3px 9px 0 rgba( 0, 0, 0, 0.57 ), -1px -1px 11px 0 rgba( 255, 255, 255, 0.99 );

     */
    box-shadow: 1px 1px 3px 0 rgba( 55, 55, 55, 0.17 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
}

.row-4 .articles-list-item2 {
    width: calc(100%/4);
}

.row-3 .articles-list-item2 {
    width: calc(100%/3 - 20px);
    padding-left: 15px;
    padding-right: 15px;
}

.row-4 .articles-list-item2:nth-child(4n+1):before {
    display: none;
}

.row-3 .articles-list-item2:nth-child(3n+1):before {
    display: none;
}

.articles-list-item2-thumbsarea {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    padding-top: 60%;
    border-radius: 9px;
    border: 1px solid #ffffff;
    box-shadow: 0 1px 3px 0 rgba( 56,56,89,0.47059 );

}

.articles-list-item2-thumbsarea .lv {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0.8rem 0.4rem 0.8rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    padding: 0.5rem 1.3rem 0.5rem 0.7rem;
    border-top-right-radius: 1.2rem;
    border-bottom-right-radius: 1.2rem;
    background: linear-gradient(to right, #7fb9dd, #34b197);
    z-index: 1;
    border: 1px solid #ffffff;
    border-left: none;
}

.articles-list-item2-thumbsarea .write {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0.8rem 0.4rem 0.8rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    padding: 0.6rem 1.6rem 0.4rem 0.4rem;
    border-top-right-radius: 1.2rem;
    border-bottom-right-radius: 1.2rem;
    background: linear-gradient(to right, #f59ab2, #f35a78);
    z-index: 1;
}

.articles-list-item2-thumbsarea .thumbs {
    position: absolute;
    width: 103%;
    height: 100%;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease all;
    border-radius: 9px;
}

.articles-list-item2 a:hover .articles-list-item2-thumbsarea .thumbs {
}

.articles-list-item2 a:hover .articles-list-item2-thumbsarea .thumbs {
    transform: translate(-50%, -50%) scale(1.2);
}

.articles-list-item2-info {
    margin-top: 1.6rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 1.4rem;
}

.articles-list-item2-title {
    font-size: 1.8rem;
    line-height: 1.5;
    margin: 1.6rem 0;
    text-shadow: 1px 1px 1px #ffffff;
}


/* articles List for subpage */

.articles_container {
    display: flex;
}


.articles_container .category {
    min-width: 20.8rem;
}

.articles_container .article-list {
    flex: 1;
}

.articles_container .category ul {
    border: solid 4px #f5f5f5;
    max-width: 18.0rem;
    padding: 2.4rem 2.0rem;
}

.articles_container .category ul li {
    font-size: 1.8rem;
    color: #787878;
    padding: 0.6rem 0;
    margin-bottom: 1.6rem;
}

.articles_container .category ul li.active {
    color: #34b197;
    font-weight: 700;
}

.articles_container .articles {
    flex: 1;
}


/* article View */

.article_view {
    background: #f5f5f5;
    padding-bottom: 8rem;
    margin-bottom: 8rem;
}

.article_view-header {
    display: flex;
    justify-content: space-between;
    height: 8rem;
    align-items: center;
}

.article_view-header div {
    display: flex;
    align-items: center;
    position: relative;
}

.article_view-header .bookmark {
    width: 4rem;
    height: 4rem;
    border: 0.2rem solid #34b197;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.article_view-header span {
    display: flex;
    align-items: center;
    margin-left: 1.6rem;
}

.article_view-header span + span::before {
    content: '';
    margin-right: 1.6rem;
    width: 1px;
    height: 2.4rem;
    background: #d8d8d8;
}

.article_view-header .zoom button, .article_view-header .btn_list {
    background: #fff;
    border: 0.1rem solid #c8c8c8;
    border-radius: 1rem;
    min-width: 4.0rem;
    min-height: 4.0rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #444;
}

.article_view-header .zoom {
    gap: 0.4rem;
}

.article_view-header .btn_list {
    margin-left: 1.6rem;
    padding: 0 3.0rem;
}

.article_view-body {
    background: #fff;
    padding: 3.6rem 1.5rem;
    border-radius: 1rem;
    line-height: 1.75;
    position: relative;
    font-size: 1.6rem;
}

.article_view-body h1 {
    font-family: 'Roboto', 'NotoSans', sans-serif;
    font-size: 3.2rem;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 4rem;
}

.article_view-body h2 {
    font-size: 2.8rem;
    line-height: normal;
    margin-bottom: 0.8rem;
}

.article_view-body h3 {
    font-size: 2.2rem;
    line-height: normal;
    margin-bottom: 0.8rem;
}

.article_view-body h4 {
    font-size: 1.8rem;
    line-height: normal;
    margin-bottom: 0.8rem;
}

.article_view-body h5 {
    font-size: 1.6rem;
    line-height: normal;
    margin-bottom: 0.8rem;
}

.article_view-body img {
    width: 100%;
    margin: 4rem 0;
    /*
    border: 1px solid #ffffff;
    border-radius: 7px;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
    */
}

.article_view-body p + p {
    margin-top: 2.4rem;
}

.article_view-body button.article_more {
    z-index: 99;
    position: absolute;
    left: 3.2rem;
    bottom: 1.6rem;
    width: calc(100% - 6.4rem);
    height: 8rem;
    border-radius: 10px;
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 0.95);
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
}

.article_view-body button.article_more img {
    width:  2.4rem !important;
    height: 2.4rem !important;
    margin: 0 0.4rem 0 0 !important;
}

	
.article_view-body::after {
    z-index: 10;
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff 90%);
}


.relation_article {
    margin-bottom: 0.1rem;
}


/* article view quiz */


.quiz, .writing {
    font-size: 1.8rem;
    line-height: 1.7;
    max-width: 100% !important;
}

.quiz h1, .writing h1 {
    height: 6.2rem;
    font-size: 2.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    border-bottom: 2px dashed #787878;
    margin-bottom: 4rem;
}

.quiz li {
    margin-top: 4rem;
}

.quiz h2, .writing h2 {
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 700;
    position: relative;

}

.quiz h2::after, .writing h2::after {
    content:'';
    width: 100%;
    height: 0.8rem;
    background: #c9f2e9;
    display: block;
    position: absolute;
    bottom: 0.4rem;
    z-index: -1;
}

.q_no {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #34b197;
    width: 1.8rem;
    height: 1.8rem;
    font-size: 1.4rem;
    border: 1px solid #34b197;
    border-radius: 0.9rem;
}

.q_answer {
    color: #34b197;
}

.unl {
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-thickness: 2px;
}

.quiz .input_wrap {
    display: inline-block;
    position: relative;
    margin-top: 1.2rem;
}

.quiz .input_wrap + .input_wrap {
    margin-left: 0.8rem;
}


.quiz .a_correct::after {
    content:'';
    width: 4rem;
    height: 4rem;
    background: url(../images/ic_right@2x.png) no-repeat;
    background-size: 4rem 4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50%);
}

.quiz .a_wrong::after {
    content:'';
    width: 4rem;
    height: 4rem;
    background: url(../images/ic_wrong@2x.png) no-repeat;
    background-size: 4rem 4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50%);
}

.quiz .quiz-type + .quiz-type {
    margin-top: 4rem;
    border-top: 1px solid #d8d8d8;
    padding-top: 4rem;
}

.quiz textarea, .writing textarea {
    width: 100%;
}

.quiz .model_answer {
    color: #34b197;
    margin-top: 1.2rem;
}

.quiz .button_container, .writing .button_container {
    margin-top: 6.4rem;
    display: flex;
    justify-content: center;
    gap: 1.6rem
}

.quiz .button_container button, .writing .button_container button {
    min-width: 19.2rem;
}

.quiz .button_container .score {
    display: inline-block;
    min-width: 19.2rem;
    border-radius: 10rem;
    border: 2px solid #34b197;
    background-color: #fff;
    padding: 1.6rem;
    font-size: 2rem;
    color: #34b197;
    text-align: center;
}

.writing .question {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    
}

.writing .text_counter {
    color: #999999;
    text-align: right;
}

.writing .tip {
    font-size: 1.4rem;
    color: #787878;
    line-height: 1.43;
}

.writing .tip a {
    color: #34b197;
}

.writing .tip a:hover {
    text-decoration: underline;
}

.quizpopup-buttons {
    display: none;
    height: 60px;
    padding: 5px 5px;
    box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.05);
}

.quizpopup-buttons .wrapper {
    display: flex;
    gap: 0.8rem;
}

.quizpopup-buttons label {
    flex: 1;
}

.quiz .popup-header, .writing .popup-header {
    display: none;
}

.writing .writing_answer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.writing .writing_answer-header .tab_btn1 ul li a {
    min-width: 14.8rem;
}

.writing .writing_answer {
    margin-top: 4rem;
}

.writing .writing_answer-header ~ .writing_answer-header {
    margin-top: 4rem;
}

.writing .writing_answer img {
    max-width: 100%;
}

.writing .teachers_opinion {
    line-height: 1.75;
    margin: 4rem 0; 
}



/* 반응형 */

@media(max-width: 1024px) {
    
    /* article List - tablet */
    
    .main .articles {
    margin-top: 3.2rem;  
    }
    
    .article_view {
        padding-bottom: 4.8rem;
        margin-bottom: 4.8rem;
    }
    
    .articles-header-leftside {
        display: flex;
        gap: 0.8rem;
    }
    
    .articles-header .tab_btn1 {
        display: none;
    }
    
    .articles_container .category {
        display: none;
    }
    
    .articles-list  {
        margin: 0;
        padding: 0 0 !important;
    }
    
    .articles-list-item::before {
        display: none;
    }
    
    .articles-list .articles-list-item {
        width: 100%;
        margin: 0;
        padding: 1.6rem 0;
        border-bottom: 1px solid #d8d8d8;
    }
    
    .articles-list-item a {
        display: flex;
        flex-direction: row;
    }
    
    .articles-list-item-thumbsarea {
        width: 29rem;
        padding-top: 22.5rem;
    }
    
    .articles-list-item-thumbsarea + div {
        flex: 1;
        margin-left: 1.6rem;
    }

    .articles-list-item2 {
        margin-bottom: 10px !important;
        padding: 10px 10px !important;
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    .articles-list-item2 a {
        display: flex;
        flex-direction: row;
    }

    .articles-list-item2-thumbsarea {
        width: 29rem;
        padding-top: 22.5rem;
    }

    .articles-list-item2-thumbsarea + div {
        flex: 1;
        margin-left: 1.6rem;
    }

    .articles-header-leftside {
        left: 0;
    }
    
    .articles_container .articles-header select {
        right: 0;
    }
    
    .article_view-body button.article_more {
        bottom: 4.8rem;
        color: #444;
    }
    
    .article_view-body button.article_more a {
        color: #444;
    }

    .writing .teachers_opinion {
        margin: 6.5rem 0;
    }

    .relation_article {
        margin-bottom: 4.8rem;
    }
    
    /* article view quiz - tablet */

    .quiz h1, .writing h1 {
        margin-bottom: 3.2rem;
    }
    
    .quiz li {
        margin-top: 3.2rem;
    }
    
    .quiz .quiz-type + .quiz-type {
        margin-top: 3.2rem;
        padding-top: 3.2rem;
    }
    
    .quiz .button_container, .writing .button_container {
        margin-top: 4.8rem;
    }
    
    .writing .writing_answer {
        margin-top: 3.2rem;
    }
}


@media(max-width: 1024px) {
    
    /* articles list - mobile */
     
    .main .articles {
        margin-top: 2.4rem;  
    }

    .article-wrapper {
        padding: 0 0 !important;
    }

    .main .articles-list-item {
        width: calc(100%);
    }
    
    .articles-list-item:before {
        display: none;
    }
    
    .articles-list-item-thumbsarea {
        width: 16.3rem;
        height: 12.3rem;
        padding-top: 12.6rem;
    }
    
    .articles-list-item-info {
        margin-top: 0;
        font-size: 1.4rem;
    }
    
    .articles-list-item-title {
        font-size: 1.6rem;
    }

    .main .articles-list-item2 {
        width: calc(100%);
        color: black;
    }

    .articles-list-item2:before {
        display: none;
    }

    .articles-list-item2-thumbsarea {
        width: 16.3rem;
        height: 12.3rem;
        padding-top: 12.6rem;
    }

    .articles-list-item2-info {
        margin-top: 0;
        font-size: 1.4rem;
    }

    .articles-list-item2-title {
        font-size: 1.6rem;
        margin-top:1.2rem !important;
        margin-bottom:0 !important;
    }

    .articles-header-leftside .popup_category {
        width: calc(100vw - 3.2rem);
    }
    
    .articles-header-leftside .popup_category li {
        width: calc( (100% - 1.2rem) / 2);
    }
    
    
    /* article View - mobile */
    
    .article_view {
        padding-bottom: 2.4rem;
        margin-bottom: 2.4rem;
    }
    
    .article_view-header {
        flex-direction: column-reverse;
        padding: 1.6rem 0;
        height: auto;
        align-items: stretch;
    }
    
    .article_view-header > div:nth-child(1) {
        justify-content: flex-start;
    }
    
    .article_view-header > div:nth-child(2) {
        justify-content: flex-end;
    }
    
    .article_view > .wrapper:nth-child(2) {
        padding: 0;
    }
    
    .article_view-body {
        border-radius: 0;
        margin: 0 auto;
        font-size: 1.6rem;
    }
    
    .article_view-body h1 {
        font-size: 2.6rem;
        margin-bottom: 2.4rem;
    }
    
    .article_view-body h2 {
        font-size: 2.2rem;
        margin-bottom: 0.4rem;
    }

    .article_view-body h3 {
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
    }

    .article_view-body img {
        width: 100% !important;
        margin: 2.4rem auto !important;
    }
    
    .article_view-body button.article_more {
        bottom: 2.4rem;
    }
    
    .relation_article {
        margin-bottom: 3.2rem;
    }
    
    
    /* article view quiz - mobile */
    
    .quiz, .writing {
        display: none;
        font-size: 1.6rem;
    }
    
    .quizpopup-buttons {
        display: block;
    }
    
    .quiz h1, .writing h1 {
        font-size: 2.4rem;
        height: 5.4rem;
        margin-bottom: 2.4rem;
    }
    
    .quiz h2, .writing h2 {
        font-size: 1.8rem;
    }
    
    .quiz .quiz-type + .quiz-type {
        margin-top: 2.4rem;
        padding-top: 2.4rem;
    }
    
    .quiz .button_container, .writing .button_container {
        margin-top: 2.2rem;
        margin-bottom: 2.0rem;
    }
    
    .quiz, .writing {
        position: fixed;
        top: 55%;
        bottom: 0;
        left: 0;
        background: #fff;
        z-index: 10;
        overflow: auto;
        border-top: 2px solid #55aa99;
        box-shadow: 0 0.2rem 1.0rem rgba(0,0,0, 0.75);
        width: 100%;
    }
    
    .quiz .popup-header, .writing .popup-header {
        display: flex;
    }
    
    .quiz input {
        width: 100%;
    }
    
    .quiz .input_wrap {
        display: block;
    }
    
    .quiz .input_wrap + .input_wrap {
        margin-top: 0.8rem;
        margin-left: 0;
    }
    
    .quiz .model_answer {
        margin-top: 0.8rem;   
    }
    
    .writing .writing_answer {
        margin-top: 2.4rem;
    }
    
    .writing .writing_answer-header {
        flex-direction: column;
        
        align-items: flex-start;
        gap: 2.4rem;
    }
    
    .writing .writing_answer-header .time {
/*        margin-top: 2.4rem;*/
    }
    
    .quiz .button_container button, .writing .button_container button {
        min-width: auto;
        flex: 1;
    }

}

@media(max-width: 768px) {
    .article_view-body p {
        padding: 10px 10px !important;
    }
}

@media(max-width: 360px) {
    .article_view-header .btn_list {
        margin-left: 1.0rem;
        padding: 0 1.0rem;
    }
}