@charset "utf-8";

*, *::before, *::after{
    box-sizing: border-box;
}

body{
    /* width: 1920px;  */
     /* margin: 0 auto;  */
    min-height: 100vh;
    background-color: #dff1f5;
    display: grid;
    grid-template:
   "... .... ...... ...... ...... ...... ..." 
   "... left ...... header header header ..." 400px
   "... left ...... ...... ...... ...... ..." 10px
   "... left ...... center center center ..." 
   "... left ...... center center center ..." 
   "... left ...... mainA  ...... ...... ..."
   "... left footer footer footer footer footer" 150px
   "... ...... ...... ...... ...... ...... ..."
   / 0 300px 0 minmax(500px,1fr) auto 200px 0;
 
}

main{
    background-color:rgb(255, 255, 255);
    border-radius: 10px;
    margin: 10px 5% 10px;
    padding-top: 10px;
}







main .breadcrumb{
    border-radius: 20px;
    margin: 0 20px 0;
}

.text_link{
    color:blue;
}
.text_link:hover{
    background-color:lightsteelblue;   
}

ul{
    list-style-type: none;
}

a{
    text-decoration: none;
    color: #333;
}


@media screen and (max-width: 1200px){
    body {
       
        grid-template:
        "... ...... ...... ...... ...... ...... ..." 
        "... header header header header header ..." 430px
        "... ...... ...... ...... ...... ...... ..." 10px
        "... center center center center center ..." 1fr
        "... ...... ......   left   ......  ...... ..." 
        "... footer footer footer footer footer ..." 150px
        "... ...... ...... ...... ...... ...... ..."
        / 0 auto auto 500px auto auto 0;
    }

    .nav_list {
        display: none;

  
}


@media screen and (max-width: 980px){
    body {
       
        grid-template:
        "... header header header header header ..." 320px
        "... ...... ...... ...... ...... ...... ..." 10px
        "... center center center center center ..." 1fr
        "... ...... left   left   ......  ...... ..." 
        "... mainA  mainA  mainA  mainA  mainA  ..."
        "... footer footer footer footer footer ..." 150px
        "... ...... ...... ...... ...... ...... ..."
        / 0 auto auto 500px auto auto 0;

        max-width: 980;
        width: 100%;
    }

    header{
        max-width:980px;
        width: 100%;
        font-size: 10px;
    }

    header img{
        max-width: 700px;
        width: 100%;
    }

    .list_nav_header2{
font-size: 15px;
    }



    main{
        max-width:980px;
        margin-top: 20px;
    }

  
  .se_container{
      max-width: 700px;
  }


  .nav_list {
    display: none;
 }
    

}