* {
    box-sizing: border-box;
}

:root {
    --scroll: 0;
    --content: 0;
}

html,
body {

    font-family: "mtdbt2f-F";
    /*Arial, Helvetica, sans-serif;*/
    font-size: 23px;
    line-height: 1.2;
    font-weight: 700;
}

/* bar qui indique la longeur de lecture*/
html:after,
body:after {
    content: '';
    height: 6px;
    background: blue;
    position: fixed;
    top: 0;
    left: 0;
    width: calc((var(--content)) * 1%);
    z-index: 8;
}


@media (min-width: 768px) {
    h1 {

        top: 40vh;
        font-size: 35px;
        color:black; /*pink*/
    }



}

h1,
h2,
body > p:nth-of-type(1) {
    position: fixed;
    margin-top: 40vh;
    z-index: 5;
    left: 50%;
    width: 100vw;
    text-align: left;
    padding-left: 5vw;
    -webkit-transform: translate(0, calc((var(--scroll) / 90) * -45vh)) translate(-50%, -50%);
    transform: translate(0, calc((var(--scroll) / 90) * -45vh)) translate(-50%, -50%);

}

p.two {
    margin-left: 70vw;

}

p.three {
    margin-top: -10vh;

}

@media (min-width: 768px) {

    h1,
    h2,
    body > p:nth-of-type(1) {
        left: 50%;
        min-width: 45vw;
        width: calc((100 - var(--scroll)) * 2vw);
        text-align: center;
        padding-left: 0;
        opacity: 1;
        -webkit-transform: translate(calc(((var(--scroll) / 90) * -45vw)), calc(((var(--scroll) / 90) * 22.5vh) + ((var(--scroll) / 90) * calc((3 + (((3 * 1) - 3)) - ((((3 * 1) - 3)) * (var(--scroll) / 90))) * 1rem)))) translate(calc((((90 - var(--scroll)) / 90)) * -50%), -50%);
        transform: translate(calc(((var(--scroll) / 90) * -45vw)), calc(((var(--scroll) / 90) * -5vh)
                    /*hauteur de titre apres une fois croller*/
                    + ((var(--scroll) / 90) * calc((3 + (((3 * 1) - 3)) - ((((3 * 1) - 3)) * (var(--scroll) / 90))) * 1rem)))) translate(calc((((90 - var(--scroll)) / 90)) * -50%), -50%);
    }
}


@media (min-width: 768px) {
    body > p:nth-of-type(1):after {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
}



/* image*/
/* image*/
/* image*/
/* image*/
/* image*/
/* image*/
/* image*/
/* image*/
img {
    /*border: 1px solid red;*/
    height: 75vh;
    object-fit: contain;


}

@media (min-width: 768px) {

    /*메인 페이지 이미지 위치*/
    img {
        margin: 0px;
        margin-top: -100px;
        /*이미지 스크롤시 위치 조정*/
        min-height: 55vh;
        min-width: 45vw;
        width: calc((100 - var(--scroll)) * 1vw);
    }
}

/* image*/
/* image*/
/* image*/
/* image*/
/* image*/
/* image*/
/* image*/
/* image*/
p:nth-of-type(2) {
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    z-index: 4;

}

@media (min-width: 768px) {
    p:nth-of-type(2) {
        min-height: 45vh;
        min-width: 45vw;
        -webkit-transform: translate(calc((var(--scroll) / 90) * 5vw), calc((var(--scroll) / 90) * 50vh)) translate(0, calc((var(--scroll) / 90) * -50%));
        transform: translate(calc((var(--scroll) / 90) * 5vw), calc((var(--scroll) / 90) * 50vh)) translate(0, calc((var(--scroll) / 90) * -50%));
        width: calc((100 - var(--scroll)) * 1vw);
    }
}

@media (min-width: 768px) {

    p:nth-of-type(2):before,
    p:nth-of-type(2):after {
        opacity: calc(1 - ((var(--scroll) / 90) * 1));
    }
}

p:nth-of-type(2):before {

    bottom: -2px;
    content: '';
    position: fixed;
    top: 0;
    z-index: 2;
}

p:nth-of-type(2):after {

    content: '';
    height: 10vh;

    position: fixed;
    top: 100%;
    width: 100vw;
    z-index: 2;
}

@media (min-width: 768px) {
    p:nth-of-type(2):after {
        display: none;
    }
}


/*text courant*/
/*text courant*/
/*text courant*/
/*text courant*/
/*text courant*/
/*text courant*/
p:nth-of-type(3) {
    margin-top: 100vh;

    line-height: 1.2;

}

@media (min-width: 768px) {
    p:nth-of-type(3) {
        margin-top: 120vh;
    }
}


body > p:last-of-type {
    margin-bottom: 20vh;

}

body {
    padding: 5vw;
}

@media (min-width: 768px) {

    body > p,
    body > strong,
    body > blockquote,
    body > h3,
    body > ul,
    body > ol body > a {
        margin-left: 50vw;
        margin-right: 0vw;
    }
}

ol {
    margin-top: 15px;
}

p {
    line-height: 1.5rem;
    padding-top: 2rem;
}

  .col-5{
            width: 40vw;
            height: auto;
          	display:inline;
	float: left;
	position: relative;
	margin-left: 1%;
	margin-right: 1%;
        }
    

/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
/*작은 화면*/
@media only screen and (max-width: 768px) {


    
    /*작은 화면 이미지*/
    p:nth-of-type(2) {
        position: absolute;
        z-index: 4;
        padding-top: 10vh;
        margin: auto;
    }

    img {
        margin: 0px;
        margin-top: 2vh;
        margin-left: 3vw;
        width: 90vw;
           z-index: 4;
    }

    /*text courant*/
    p:nth-of-type(3) {
        margin-top: 80vh;
           z-index: 4;
    }

    /*lien PDF*/
    p:nth-of-type(4) {
        margin-top: -30vh;
   z-index: 4;
    }

    h1 {

        top: -34.5vh;
        background-color: none;
        color:black;
        font-size: 25px;
        z-index: 8;
    }


    p {
        font-size: 20px;
        line-height: 1.2;
        font-weight: 600;

    }

    p.two {
    margin-left: 0vw;
        margin-top: 0vh;
}
    
    .nav {
        overflow: hidden;
        top: 0;
        width: 100%;
        position: fixed;
        z-index: 8;
    }


    .nav a {
        text-decoration: none;

    }
    
      .col-5{
            width: 100%;
            height: auto;
          	display:relative;
	
        }
    
 

}