@import url('record.css');
/*
section-record2
*/

.section-record2{ 
    margin-top: var(--sectionpd);
    padding: 0 var(--sectionper);
    position: relative;
}
.site-title-vertical{
    position: relative;
    z-index: 3;
}

.p-1-1 img{ position: relative;
    z-index: 0;}
 @media screen and (min-width: 768px) {
 .p-1-1{
       margin-bottom: 10%;
    }
.p-1-1:after{
    content:'';
    position: absolute;
    z-index: -1;
    background-image: url(../img/record/record4/bg-p-1-1.svg);
    background-position: left bottom;
    background-repeat:no-repeat ;
    background-size:cover;  
    width: 80%;
    height: 80%;
    bottom: -15%;
    left:-18%;
    
    }
 }
 /*
section-record3
*/

.section-record3{ 
    padding: 0 var(--sectionper);
    position: relative;
}
 /*
section-record4
*/

.section-record4{ 
    margin-top: var(--rowpd);
    padding: var(--sectionpd) var(--sectionper);
    position: relative;
    background-image: url(../img/record/record4/bg-section1.jpg);
    background-size:100% auto ;
    background-position: right top;
    background-repeat:no-repeat ;
    background-attachment:scroll ;
}
.article4-1{
    width: 100%;
}
.tiile4{
    margin-top: 40%;
}
.tiile4 br{
    display: none;
}
.figure-rec4-4 .img-mask{
    opacity: 1;
}
@media screen and (min-width: 1024px) {
    .tiile4{
        margin-top: 0%;
        margin-bottom: var(--titlepd);
    }
    .article4-1{
        width: 35%;
    }
    .section-record4{ 
        margin-top: var(--rowpd);
        padding: var(--sectionpd) var(--sectionper);
        background-image: url(../img/record/record4/bg-section1.jpg);
        background-size:60% auto ;
        background-position: right top;
        background-attachment:fixed ;
    }
}
@media screen and (min-width: 1400px) {
    .article4-1{
        width: 30%;
    }
    .section-record4{ 
        background-size:70% auto ;
     }
}

 /*
section-record5
*/

.section-record5{ 
    padding: var(--sectionpd) var(--sectionper);
    padding-bottom: calc(var(--sectionpd) + 0px);
    margin:0 var(--sectionper) var(--sectionpd) var(--sectionper);
    position: relative;
    border: 1px solid rgba(201, 202, 202,0.3);
}
.title5{ margin-bottom: var(--rowpd)}
.photo-item{
    margin:1rem;   
}
.photo-item img{
    width: 100%;
}
.section-record6{
    margin-top: -30%;
    margin-bottom: var(--rowpd);
}
@media screen and (min-width: 768px) {
.section-record5{ 
    border: 2px solid #C9CACA;
}
}
@media screen and (min-width: 1024px) {
    .section-record6{
        margin-top: -20%;
    }
    .section-record5{ 
        padding-bottom: calc(var(--sectionpd) + 50px);
    }
}