@charset "utf-8";

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body{
    width: 100vw;
    height: 100vh;
    }
ul{    padding-left: 0;}
.bg {display: flex;justify-content: center;}
li {list-style: none !important;}
h1{font-family: 'GmarketSansMedium'; font-weight: 700; font-size:50px; line-height:165px; height:16vh; display:flex; justify-content: center; align-items: center;margin: 0; text-align: center; word-break: keep-all;}
.bg{background-color: #f1f3f7;}
.wrap{width:82%; margin: 0; padding-top:30px; box-sizing: border-box;
    justify-content: space-between; height: 75%;}
.left{width:100%; margin-right:calc(7% - 20px);}
.left ul{padding-left:0; width:100%;height:735px;}
.left ul>li{display:flex; justify-content: space-between; height:50%;}
.left p
{
    width: 25%;
    background-position: center;
    background-size: cover;
    margin: 0 4px 0 0;
}
.left p:last-child{margin-right:0;}
.p1{background:url(../img/resources1.jpg)}
.p2{background:url(../img/resources2.jpg)}
.p3{background:url(../img/resources3.jpg)}
.p4{background:url(../img/resources4.jpg)}
.p5{background:url(../img/resources5.jpg)}
.p6{background:url(../img/resources6.jpg)}
.p7{background:url(../img/resources7.jpg)}
.p8{background:url(../img/resources8.jpg)}


.left ul>li:first-child{margin-bottom:4px;}
    .left > h2 {
        color: #fff;
        background-color: #6F4A28;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 4px;
        font-family: GmarketSansMedium; font-size:25px;
        padding: 4px 0;
        width: 100%;
    }
.right{width:100%; margin-top: 10px;height: 100%;} 
.right>ul{width:100%;display: flex; justify-content:stretch;justify-content: space-between;
    padding-left: 0; }
.right>ul>li{height:329px; display: flex; gap:4px}
 
.right>ul>li:not(.no-margin){width:34%; margin-left: 8px;}

/* .right>ul>li >img {margin-right: 21px;} */

.contect img{margin-right:7px;}
.location {
    width: 100%;
    overflow: hidden;
    object-fit: cover;
    max-height: 329px;
}
.location_box{
    background: url(../img/location.jpg);
    background-position: center;
    background-size: cover;

}

.right > ul > li:nth-child(2) {

    background: #ddd;
    overflow: hidden;

    display: flex;
    justify-content: center;
}
.right>ul>li>h3{font-size:45px;margin: 10px 0 22px 0;}
.right > ul > li:nth-child(3) li {
    display: flex;
    align-items: center;
    font-size: 25px;
    margin-bottom: 25px;
    padding: 0 0 16px 16px;
    box-sizing: border-box;
}
.right>ul>li:nth-child(3)>img{margin-right:14px;}
.adress {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    padding: 10px;
    margin: 0;
    background: #6f4a28;
    color: #fff;
    box-sizing:border-box;
}    
.adress>img{margin-right:7px;}

li{list-style:none;}
footer{width:82%; margin:20px auto;}



@media screen and (max-width: 1658px) {
    .right #contect{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 177px;}
    .right>ul {flex-wrap:wrap;}
    .right>ul>li:not(.no-margin) {
        width: 50%;
        margin-left: 0px;
    }
    #contect ul{
        display:flex;
        width:70%;
        justify-content: space-between;
    }
    .contect span {
        display: inline-block;
        width: 100%;
        font-size: 30px;
    }
    .right > ul > li:nth-child(3) li{
        margin:0;
        padding:0;
        flex-direction: column;
    }
    .right>ul>li>h3{
        margin-right:50px;
    }
    footer {
        width: 82%;
        margin: 20px auto 50px;
        padding-bottom: 50px;
    }
}
@media screen and (max-width: 1350px){
    .left ul {
        height: 500px;
    }
    .right>ul>li:not(.no-margin) {
        width: 100%;
    }
    .right > ul > li:nth-child(3) li {
        flex-direction: row;
    }
    #contect ul {
        flex-direction: column;
    }
    .contect span {
        width: auto;
    }
    .right > ul > li:nth-child(3) li {
        line-height: 80px;}
        .right #contect {
            height:auto;
            padding: 20px 0;
        }
}
@media screen and (max-width: 993px){
    .right #contect {

        flex-direction: column;}
        .left ul {
            height: 400px;
        }
}
@media screen and (max-width: 766px){
    h1 {
        font-size: 32px;
        line-height: 120px;
        height: 12vh;
        padding: 0 10px;
        word-break: keep-all;
    }
    .left ul {
        height: 150px;
    }
    .right > ul > li:nth-child(3) li {
        line-height: 80px;
        flex-direction: column;
    }
    .right>ul>li>h3 {
        margin-right: 0px;
    }

   
    .left p {
        width: 33%;
        height: 200px;
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat;
        background-position: top;
    background-size: contain;
    }

}

@media screen and (max-width: 480px){
    h1 {
        font-size: 24px;
        line-height: 100px;
        height: 10vh;
        padding: 0 5px;
        word-break: keep-all;
    }
}