.login_btn_nav.dt {
    padding: 8px  10px;
}

.imageAvatar {

    /* make a square container */
    width: 42px;
    height: 42px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: top center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;

}

.imageAvatar.sub {
    margin-right: 0.5em;
    width: 40px;
    height: 40px;
}

._cartBtn {
    position: relative;
}

.cart_notif {
    top: -3px;
    right: -1px;
    position: absolute;
    display: none;
    width: 13px;
    height: 13px;
    background-color: #FF0000;
    border-radius: 40px;
}
._post_0 { grid-area: _post_0; }
._post_1 { grid-area: _post_1; }
._post_2 { grid-area: _post_2; }
._post_3 { grid-area: _post_3; }

.post_container {
    
    height: 38em;
    display: grid;
    grid-template-areas:
    '_post_0 _post_0 _post_1 _post_2'
    '_post_0 _post_0 _post_1 _post_3'
  
}
.post_item {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    height: 100%;

}
.caption_conn.main {
  padding: 43px;
}

.caption_conn.main h2{
    font-size: 45px;
}
.caption_conn.main p{
    font-size: 20px;
}


.caption_conn.sub {
    padding: 20px;
  }
  
  .caption_conn.sub h2{
      font-size: 20px;
  }
  .caption_conn.sub p{
      font-size: 13px;
  }
  



.post_item .item-caption{
    width: 100%;
    color: #fff;
      position: absolute;
      bottom: 0px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000000 100%);
}
._post_1 {
    height: 101.4%;
    margin: 0px 8px;
}

._post_0 {
    height: 101.4%;
}
._post_2 {
   
}
._post_3 {
    margin-top: 8px;
}


.page-material .post_item .item-caption h2:after {
    position: absolute;
    content: "";
    width: 100px;
    margin-left: -50px;
    left: 50%;
    bottom: 7px;
    height: 1px;
    background: #fff;
}

.page-material .post_item .item-caption h2 {
    line-height: 1.2;
    font-weight: 700;
    padding-bottom: 20px;
    position: relative;
}

._pageIntro {
    background: rgb(0 0 0 / 69%) !important;

}


._pageIntroContent {
    width: 80% !important;
    background: #fff0 !important;
   
}

._pageIntroContent img{
    cursor: pointer;
}

._pageIntroContent .swal2-close{
    right: -24px;
    position: absolute;
    background: #F58635;
    color: aliceblue;
    border-radius: 40px;
    align-items: self-end;

}

li.line a:hover{
    background: #06bd51;
}

@media (min-width: 992px) {
    .navbar .dropdown .user-button {
        margin-top: 0px;
        margin-left: 8px;
    }

    
}





@media (max-width: 992px) {
    .navbar .dropdown .user-button {
        margin-top: 6px;
margin-left: 9px;
    }

    .imageAvatar {

        /* make a square container */
        width: 36px;
        height: 36px;

    

    }

    .post_container {
        grid-template-areas:
        '_post_0 _post_1'
        '_post_2 _post_3'
      
    }
    .post_item {
        margin: 0;
        height: 100%;
    }

    .post_item .caption_conn h2{
        font-size: 20px;
    }
    .post_item .caption_conn p{
        font-size: 13px;
    }
    
}


@media (min-width: 580px) {
     
    .post_container_mb {
     display: none;
    }

   
   


 
}

@media (max-width: 580px) {
     
       .post_container_pc {
        display: none;
       }

       .post_container_mb {
        
       }
       ._pageIntroContent {
        width: 96% !important;
       
    }
    ._pageIntroContent .swal2-close {
        width: 40px;
    height: 40px;
    top: 14px;
    right: -8px;
    font-size: 22px;
    justify-content: center;
    align-items: center;
    }
    /* ._pageIntroContent .swal2-close {
        color: #F58635;
        content:none;
    }
    ._pageIntroContent .swal2-close::before {
 
    } */

      
    
}