.main-section{
    margin: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.main-section .content{
    position: absolute;
    margin: 0;
    z-index: 1;
    color: white
}  


.main-content{
    display: flex;
    flex-direction: column;
}

.main-section img{
    position: fixed;
    width: 100%;
}

.second-section{
    background-color: white;
    z-index: 2;
    padding: 8% 8% 5%;
    position: relative;
    margin-top: 48%;
}

.second-section .title h1{
    text-align: center;
    font-size: 2.2vw;
    margin-top: -4%;
}

.second-section .sub-title h3{
    text-align: center;
    font-size: 1.3vw;
    font-weight: normal;
    color: #e3a021;
    margin-top: 3%;
}

.second-section .content p{
    text-align: center;
    font-size: 0.95vw;
    margin-top: 2%;
}

.second-section .button-see{
    text-align: center;
}

.second-section button{
    margin-top: 2%;
    background-color: white;
    border: 1px solid black;
    transition-duration: 0.2s;
    padding: 0.7% 2.5% 0.7%;
    font-size: 1vw;
}
.second-section button:hover{
    background-color: #421e08;
    color: #e3a021;
    border: 1px solid #421e08;

}


.three-section{
    z-index: 2;
    position: relative;
}

.three-section img{
    width: 100%;
}

nav{
    position: absolute;
    z-index: 1;
    color: white;
    width: 100%;
}

nav div{
    display: inline-block;
    margin-top: 1.5%;
    margin-left: 1.5%;
}

nav .middle{
    margin-left: 10%;
    width: 100%;
    max-width: 58%;
}

nav .middle a{
    font-size: 1vw;
    font-weight: bold;
    transition-duration: 0.3s;
    text-decoration: none;
    color: #dedad6;
    margin-right: 3.5%;
}

nav a:hover{
    color: #e3a021;
}

nav h6{
    font-size: 1.3vw;
    color: #dedad6;
    font-weight: bold;
}

nav b{
    color: #e3a021;
}

nav i{
    font-size: 1vw;
    color: #e3a021;
    margin-left: 35%;
}

nav .right{
    width: 12%;
    max-width: 12%;
    height: 10%;
    margin-left: 10%;
}

nav .right .block-social{
    width: 15%;
    height: 10%;
    align-items: center;
    cursor: pointer;
}

#selectpage{
    background-color: #6f736e;
    color: #e3a021;
    padding: 0.5% 2%;
}

.main-section .content{
    margin-top: 15%;
    margin-left: 20%;
}

.main-section .special{
    color: #e3a021;
    font-size: 1.2vw;
}

.main-section h1{
    font-size: 3.3vw;
}

.main-section p{
    font-size: 1.1vw;
    margin-bottom: 8%;
}

.main-section .content a{
    text-decoration: none;
    color: #0f0f0f;
    background-color: #e3a021;
    border: #e3a021 2px solid;
    padding: 1.7% 3.5% 2.4%;
    top: 6%;
    transition-duration: 0.2s;
    font-weight: bold;
    font-size: 0.9vw;
}

.main-section .content a:hover{
    background-color: transparent;
    color: #e3a021;
}




.block-section{
    position: absolute;
    z-index: 3;
    padding: 2% 2% 2%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

#block-1{
    background-color: white;
    width: 100%;
    max-width: 20%;
    height: 100%;
    max-height: 68%;
    margin-right: 4%;
    margin-left: 14%;
}

#block-1 .content h4{
text-align: center;
margin-top: -5%;
font-size: 1.3vw;

}

#block-1 .content p{
    text-align: center;
    margin-top: 5%;
    margin-bottom: 16%;
    font-size: 0.9vw;
    }

#block-1 a{
    justify-content: center;
    text-decoration: none;
    color: #0f0f0f;
    background-color: #e3a021;
    border: #e3a021 2px solid;
    padding: 2.4% 6% 3.2%;
    transition-duration: 0.2s;
    font-size: 0.8vw;
    margin-left: 31%;
    font-weight: bold;
}

#block-1 a:hover{
    border: #421e08 2px solid;
    color: #e3a021;
    background-color: #421e08;
}

#block-2{
    background-color: #e3a021;
    width: 100%;
    max-width: 20%;
    height: 100%;
    max-height: 68%;
    margin-right: 4%;

}

#block-2 .content h4{
    text-align: center;
    margin-top: -5%;
    font-size: 1.3vw;
    
    }
    
    #block-2 .content p{
        text-align: center;
        margin-top: 5%;
        margin-bottom: 16%;
        font-size: 0.9vw;
        }
    
    #block-2 a{
        justify-content: center;
        text-decoration: none;
        color: #e3a021;
        background-color: #421e08;
        border: #421e08 2px solid;
        padding: 2.4% 6% 3.2%;
        transition-duration: 0.2s;
        font-size: 0.8vw;
        margin-left: 31%;
        font-weight: bold;
    }
    
    #block-2 a:hover{
        border: #421e08 2px solid;
        color: #421e08;
        background-color: transparent;
    }

#block-3{
    background-color: white;
    width: 100%;
    max-width: 20%;
    height: 100%;
    max-height: 68%;
    margin-right: 4%;

}

#block-3 .content h4{
    text-align: center;
    margin-top: -5%;
    font-size: 1.3vw;
    
    }
    
    #block-3 .content p{
        text-align: center;
        margin-top: 5%;
        margin-bottom: 16%;
        font-size: 0.9vw;
        }

    #block-3 a{
        justify-content: center;
        text-decoration: none;
        color: #0f0f0f;
        background-color: #e3a021;
        border: #e3a021 2px solid;
        padding: 2.4% 6% 3.2%;
        transition-duration: 0.2s;
        font-size: 0.8vw;
        margin-left: 31%;
        font-weight: bold;
    }
    
    #block-3 a:hover{
        border: #421e08 2px solid;
        color: #e3a021;
        background-color: #421e08;
    }
    

  .losange-design{
    display: flex;
    align-items: center;
    margin-left: 28%;
    height: 30%;
    width: 100%;
    max-width: 40%;
  }

  .line{
    background-color: #e3a021;
    padding: 0.2%;
    width: 18%;
  }

  .line2{
    background-color: #421e08;
    padding: 0.2%;
    width: 18%;
  }

  .losange{
    display: flex;
    justify-content: center;
    width: 15%;
    margin-top: -6%;
  }

  #losange-90{
    width  : 0;
    height : 0;
    position : relative;
    margin-left: 3%;
    border : 0.6vw solid transparent;
    border-bottom-color : #e3a021;
  }
  #losange-90:after {
    width  : 0;
    height : 0;
    content : '';
    position : absolute;
    margin-left: -0.55vw;
    margin-top: 0.60vw;
    border : 0.6vw solid transparent;
    border-top-color : #e3a021; 
  }

  #losange-902{
    width  : 0;
    height : 0;
    position : relative;
    margin-left: 3%;
    border : 0.6vw solid transparent;
    border-bottom-color : #421e08;
  }
  #losange-902:after {
    width  : 0;
    height : 0;
    content : '';
    position : absolute;
    left: -0.55vw;
    top: 0.60vw;
    border : 0.6vw solid transparent;
    border-top-color : #421e08; 
  }

  .four-section{
    background-color: white;
    z-index: 2;
    padding: 8% 8% 6%;
    position: relative;
}

.four-section .content{
    display: flex;
    justify-content: center;
}

.four-section .title{
    text-align: center;
    margin-top: -3%;
}

.four-section .title h1{
    font-size: 2.1vw;
}

.four-section .content-right{
    display: flex;
    flex-direction: column;
    margin-top: 7%;
    margin-left: 1.2%;
}

.four-section .content-left{
    margin-top: 7%;
    background-color: beige;
}

.four-section .content-right .img2{
    margin-top: 4.5%;
}

.four-section .button-see{
    text-align: center;
}
.four-section button{
    margin-top: 4.5%;
    background-color: white;
    border: 2px solid black;
    transition-duration: 0.2s;
    padding: 0.7% 1.6% 0.7%;
}
.four-section button:hover{
    background-color: #421e08;
    color: #e3a021;
    border: 2px solid #421e08;

}

.five-section{
    background-color: #e3a021;
    z-index: 2;
    position: relative;
    display: flex;
}

.five-section .title{
    color: #421e08;
    margin-left: 30%;
}

.five-section .title h1{
    font-size: 2.1vw;
}

.five-section .sub-title{
    margin-top: 2%;
    font-size: 0.85vw;
}

.five-section .content{
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    margin-top: 4%;
}

.five-section form{
    max-width: 40%;
    width: 100%;
    margin-left: 30%;
}

.five-section input{
    background-color: #421e08;
    font-size: 0.8vw;
    width: 22.5em;
    height: 4em;
    padding: 0% 2% 0%;
    border: solid 1px #361805;
    color: #e3a021;
    margin-right: 1.6%;
    margin-top: 1.5%;
}

.five-section input::placeholder{
    color: #e3a021;
}


.five-section input[type="text"]{
    text-align: left;
}

.five-section input[type="text"]:focus{
    outline: none;
}

.five-section img{
    margin-left: -16%;
    z-index: 3;
    width: 100%;
    max-width: 80%;
    margin-top: -20%;
    position: relative;
    top: 2%;
}

.five-section textarea{
    margin-top: 2%;
    background-color: #421e08;
    border: solid 1px #361805;
    width: 46.25em;
    height: 9em;
    font-size: 0.8vw;
    z-index: 3;
}

.five-section textarea::placeholder{
    color: #e3a021;
}

.five-section textarea:focus{
    outline: none;
    color: #e3a021;
}

.five-section textarea:after{
    color: #e3a021;
}

.subbut button{
    justify-content: center;
    text-decoration: none;
    color: #421e08;
    background-color: #e3a021;
    border: #421e08 2px solid;
    padding: 1% 2% 1.2%;
    transition-duration: 0.2s;
    font-size: 0.8vw;
    font-weight: bold;
    margin-left: 43%;
    margin-top: 2.5%;
    margin-bottom: 3%;
}

.subbut button:hover{
    border: black 2px solid;
    color: #e3a021;
    background-color: #421e08;
}

.six-section{
    z-index: 1;
    position: relative;
}

.six-section .banner{
    width: 100%;
}

.six-section .content{
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}

.six-section .content-left{
    color: white;
    margin-top: 2.5%;
    margin-left: 15.5%;
}

.six-section .content-left h5{
    font-size: 1.3vw;
}

.six-section .content-left h6{
    font-size: 1vw;
    font-weight: 100;
}

.six-section .content-right{
    color: white;
    display: flex;
    margin-top: 2.5%;
    margin-left: 14%;
}

.six-section .content-right .text{
    margin-left: 5%;
}

.six-section .content-right .text h5{
    margin-top: 3%;
    font-size: 1vw;
}

.six-section .content-right .text h4{
    line-height: 50%;
    font-size: 1.6vw;
}

.six-section .imgbox img{
    aspect-ratio: 11/9;
    width: 100%;
    height: 55%;
}

.final-section{
    background-color: #200e03;
    z-index: 2;
    padding: 25% 8% 0%;
    position: relative;
}

.final-section .content{
    display: flex;
    margin-top: -22%;
    margin-left: 14%;
}

.final-section .content-1{
color: white;
margin-right: 6%;
}

.final-section .content-1 h3{
    font-size: 1.45vw;
}

.final-section .content-1 b{
    color: #e3a021;
}

.final-section .content-1 p{
    margin-top: 7%;
    font-size: 0.8vw;
    margin-bottom: 13%;
}

.final-section .content-1 .social{
    color: #e3a021;
}

.final-section .content-1 .social .facebook{
    border: solid 1px #e3a021;
    padding: 4% 5% 4%;
    transition-duration: 0.2s;
}

.final-section .content-1 .social .twitter, .googleplus{
    border: solid 1px #e3a021;
    padding: 4% 4% 4%;
    transition-duration: 0.2s;
}

.final-section .content-1 .social .googleplus:hover, .facebook:hover, .twitter:hover{
    border: solid 1px #e3a021;
    padding: 4% 4% 4%;
    background-color:  #e3a021;
    color: white;
}

.final-section .content-2{
    color: white;
    display: flex;
    flex-direction: column;
    margin-right: 10%;
    width: 10.5%;
}

.final-section .content-2 h4{
    color: #e3a021;
    font-weight: 400;
    margin-bottom: 24%;
    font-size: 1.25vw;
}

.final-section .content-2 a{
    text-decoration: none;
    color: white;
    margin-right: 8%;
    margin-top: 3%;
    font-size: 0.85vw;
}

.final-section .content-2 a:hover{
    color: #e3a021;
}

.final-section .content-3{
    color: white;
    display: flex;
    flex-direction: column;
    margin-right: 10%;
}

.final-section .content-3 h4{
    color: #e3a021;
    font-weight: 400;
    margin-bottom: 16%;
    font-size: 1.25vw;
}

.final-section .content-3 a{
    text-decoration: none;
    color: white;
    margin-top: 3%;
    font-size: 0.85vw;
}

.final-section .content-3 a:hover{
    color: #e3a021;
}

.final-section .content-4{
    color: white;
    display: flex;
    flex-direction: column;
    width: 20%;

}

.final-section .content-4 h4{
    color: #e3a021;
    font-weight: 400;
    font-size: 1.25vw;
}

.final-section .content-4 a{
    text-decoration: none;
    color: white;
    font-size: 0.8vw;
}

.final-section .content-4 a:hover{
    color: #e3a021;
}



.final-section .content-4 .city-info, .final-section .content-4 .phone-info, .final-section .content-4 .mail-info {
    display: flex;
    color: #e3a021;
}

.final-section .content-4 .city-info, .phone-info, .mail-info {
    align-items: center;
    width: 100%;
    margin-top: 6%;
}

.final-section .content-4 .city-info i, .phone-info i, .mail-info i{
    font-size: 1vw;
    margin-right: 6%;
}