@import url(../css/reset.css);

body {
    background-color: #ecf3f6;
    overflow-x: hidden;
}

/* 
.gsap-marker {
    z-index: 9999 !important;
} */

/* header */

#header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20000;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#header .logo {
    font-size: 30px;
    line-height: 1;
    padding: 20px;
    font-family: "AfricaTrial-Rainfall";
    color: var(--black);
}

#header .logo span {
    display: block;
}

#header .logo span:nth-child(2) {
    transform: rotate(180deg);
}

#header .menu ul {
    display: flex;
    gap: 20px;
    margin-right: 30px;
}

#header .menu li a {
    font-size: 16px;
    font-family: var(--fontNGL);
    text-transform: uppercase;
    line-height: 151%;
    cursor: pointer;
}

/* section1 */

#section1 {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 13000;
}

#section1 .nav__msg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: var(--fontKor);
    white-space: nowrap;
    line-height: 141%;
}

#section1 .sky {
    max-width: 100%;
    height: 100vh;
    background-image: url(../img/sky-min.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#section1 .black {
    width: 100px;
    height: 100px;
    border: 1.3px solid rgb(38, 35, 34);
    border-radius: 100%;
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
    background-color: var(--black);
    overflow: hidden;
    display: flex;
    justify-content: center;
    opacity: 0;
}

.black .black__btn {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: var(--white);
    cursor: none;
}

.black__btn .down__btn {
    width: 15px;
    height: 15px;
    padding: 20px 0;
    background: url(../svg/arrow.svg) no-repeat;
    background-position: center bottom 20px;
    background-size: 20px;
}

.black__btn .scroll {
    width: min-content;
    text-align: center;
    line-height: 40px;
    text-transform: uppercase;
    padding-top: 20px;
}

#section1 .progress {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 10px;
}

.progress .percent {
    font-size: 20px;
    font-family: var(--fontEng);
}

/* section2 */

#section2 {
    background-color: var(--black);
    color: var(--white);
    padding: 10vw;
    position: relative;
    z-index: 2000;
}

.about .sec__title {
    font-size: 16px;
    text-align: left;
    color: #999;
}

.about .sec__msg {
    font-family: var(--fontNGL);
}

.sec__msg .desc1 {
    padding: 10% 0 10% 40%;
    font-size: 30px;
}

.sec__msg .desc2 {
    padding: 0 0 0 60%;
    word-break: keep-all;
    font-size: 16px;
    line-height: 1.7;
    color: #f1f1f1;
    font-family: var(--fontKor);
}

.about .foto_begin {
    width: 35vw;
    height: 45vw;
    background-color: #fff;
    margin: 15% auto 5%;
    position: relative;
}

.about .foto_begin .img_begin1 {
    width: 100%;
    height: 100%;
    background-image: url(../img/jin.jpg);
    background-size: cover;
    background-position: center;
}


.about .foto_begin .img_begin2 {
    width: 80%;
    height: 90%;
    background-image: url(https://www.danilodemarco.com/img/mystory/albe.webp);
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 10%;
    top: 5%;
    transform: rotate(45deg);
}

.about .foto_begin .img_begin3 {
    width: 80%;
    height: 90%;
    background-image: url(https://www.danilodemarco.com/img/adaptive/adaptive_color_sf.webp);
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 10%;
    top: 5%;
    transform: rotate(-45deg);
}

@media(max-width:1820px) {
    #section2 {
        padding: 10vw;
    }

}

@media(max-width:764px) {
    .sec__msg .desc1 {
        font-size: 20px;
        padding: 10% 0 10% 20%;
    }

    .sec__msg .desc2 {
        font-size: 14px;
        padding: 0 0 0 30%;
    }

}

@keyframes foldUnfold {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}


/* #section3 */

#section3 {
    background-color: var(--black);
    padding: 10vw;
    margin: auto;

}

#section3 .sec__title {
    font-size: 16px;
    text-align: left;
    color: #999;
    padding-bottom: 12%;
}

#section3 .sec__msg {
    font-family: var(--fontNGL);
}

#section3 .sec__msg .desc2 {
    padding: 0 0 10% 40%;
    word-break: keep-all;
    font-size: 16px;
    line-height: 1.7;
    color: var(--white);
    font-family: var(--fontKor);
}


#section3 .skillWrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 1fr;
    gap: 20px;
}

.skillWrap .skill .num {
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 16px;
    font-family: "Abel";
    color: #555;
}

.skillWrap .skill {
    position: relative;
    perspective: 1000px;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.skillWrap .skill .front,
.skillWrap .skill .back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 1s;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    border-radius: 20px;
    padding: 7%;
    border: 1px solid #363636;
    font-family: "Almendra Display", serif;
    font-size: 45px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}

.skillWrap .skill .back {
    transform: rotateY(-180deg);
    font-size: 14px;
}

.skillWrap .skill .back p {
    font-size: 50px;
}

.skillWrap .skill:hover .front {
    transform: rotateY(180deg);
}

.skillWrap .skill:hover .back {
    transform: rotateY(0);
}

.skillWrap .skill:nth-child(2) .front h3 {
    font-family: "Sixtyfour", sans-serif;
    letter-spacing: -5px;
}

.skillWrap .skill:nth-child(3) .front h3 {
    font-family: "Bungee Shade", sans-serif;
    font-size: 35px;
    line-height: 100%;
    letter-spacing: 1.5px;
}

.skillWrap .skill:nth-child(4) .front h3 {
    font-family: "Fredericka the Great", serif;
}

.skillWrap .skill:nth-child(5) .front h3 {
    font-family: "Codystar", sans-serif;
    font-size: 45px;

}

.skillWrap .skill:nth-child(6) .front h3 {
    font-family: "Griffy", system-ui;
    font-size: 45px;

}

.skillWrap .skill:nth-child(7) .front h3 {
    font-family: "Rubik Puddles", system-ui;
    font-size: 45px;

}

.skillWrap .skill:nth-child(8) .front h3 {
    font-family: "Rubik Glitch", system-ui;
    letter-spacing: 5px;
}

.skillWrap .skill:nth-child(9) .front h3 {
    font-family: "Moirai One", system-ui;
    font-size: 45px;
    letter-spacing: 2px;
}

.skillWrap .skill:nth-child(10) .front h3 {
    font-family: "Foldit", sans-serif;
}

.skillWrap .skill:nth-child(11) .front h3 {
    font-family: "Rubik Beastly", system-ui;
    font-size: 40px;
    line-height: 120%;
}

.skillWrap .skill:nth-child(12) .front h3 {
    font-family: "Splash", cursive;
    font-size: 35px;
}

/* #section4 */

#section4 {
    display: flex;
    flex-wrap: nowrap;
    width: 600%;
    background-image: url(../img/bg-min.jpg);
    background-size: cover;
    align-items: center;
    position: relative;
    z-index: 15000;
}

#section4 .title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 90vw;
    font-size: 30vw;
    font-family: var(--fontNGE);
    font-weight: lighter;
    text-transform: uppercase;
    line-height: 109%;
    color: var(--white);
    display: block;
    letter-spacing: 5rem;
}

#section4>section {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
}

#section4 .sec4__cont1 {
    padding: 10vw;
    align-items: flex-start !important;
}

.sec4__cont1 .sec__title {
    font-size: 16px;
    text-align: left;
    color: #999;
    white-space: nowrap;

}

.sec4__cont1 .sec__msg {
    font-family: var(--fontKor);
}

.sec4__cont1 .sec__msg .desc1 {
    padding: 10% 0% 10% 30%;
    font-size: 25px;
}

.sec4__cont1 .sec__msg .desc2 {
    padding: 0 20% 0 40%;
    word-break: keep-all;
    font-size: 16px;
    line-height: 1.7;
    color: #010101;
    font-family: var(--fontKor);
}

.imgWrap {
    position: absolute;
    object-fit: fill;
}

#section4 .sec4__cont2 .imgWrap {
    bottom: 5%;
    left: 20%;
    transform: translateX(50%);
    width: 30%;
    height: 60%;
}

.imgWrap .img {
    width: 100%;
    height: 100%;
    background-image: url(../img/like1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

#section4 .sec4__cont3 .imgWrap {
    top: 10%;
    right: 40%;
    transform: translateX(50%);
    width: 40%;
    height: 65%;
}

.sec4__cont3 .imgWrap .img {
    background-image: url(../img/like6.png);
}

#section4 .sec4__cont4 .imgWrap {
    top: 60%;
    right: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 62%;
}

.sec4__cont4 .imgWrap .img {
    background-image: url(../img/like2.png);
}

#section4 .sec4__cont5 .imgWrap {
    bottom: 0;
    left: 30%;
    transform: translateX(-50%);
    width: 40%;
    height: 65%;

}

.sec4__cont5 .imgWrap .img {
    background-image: url(../img/like4.png);
}

#section4 .sec4__cont6 .imgWrap {
    bottom: 0;
    left: 30%;
    transform: translateX(-50%);
    width: 40%;
    height: 65%;

}

.sec4__cont6 .imgWrap .img {
    background-image: url(../img/like5.png);
}

.circle {
    position: absolute;
    top: 25%;
    left: 50%;
    width: 300px;
    height: 300px;
    background-color: var(--black);
    border-radius: 100%;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sec4__cont3 .circle {
    top: 50%;
    left: 30%;
}

.sec4__cont4 .circle {
    top: 30%;
    left: 27%;
}

.sec4__cont5 .circle {
    top: 20%;
    left: 30%;
}

.sec4__cont6 .circle {
    top: 40%;
    left: 80%;
}

.circle p {
    font-family: var(--fontNGL);
    margin: 5px 0;
}

.circle p:nth-child(1) {
    font-size: 40px;
    font-family: var(--fontNGL);
    font-weight: bold;
    line-height: 109%;
}

.circle p:nth-child(2) {
    width: 65%;
    font-size: 16px;
    font-family: var(--fontKor);
    line-height: 132%;
    text-align: center;
    /* position: relative; */
}

.circle p:nth-child(3) {
    font-size: 16px;
    font-family: var(--fontNGL);
    line-height: 109%;
    text-align: center;
    padding-bottom: 60px;
    /* position: relative; */
}

.circle a {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 40px;
    border: 1.5px solid var(--white);
    border-radius: 50px;
    cursor: pointer;
}

.circle a span {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    font-size: 25px;
    text-align: left;
    width: 55%;
    font-family: var(--fontNGL);
}

.arrow {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    width: 80px;
    height: 12px;
    background-image: url(../img/Arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.one {
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: var(--white);
    border-radius: 100%;
}

.one a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    font-family: var(--fontNGL);
    color: var(--black);
}

.sec4__cont2 .one {
    top: 60%;
    left: 70%;
}

.sec4__cont3 .one {
    width: 100px;
    height: 100px;
    top: 40%;
    left: 30%;
}

.sec4__cont4 .one {
    width: 150px;
    height: 150px;
    top: 20%;
    left: 50%;
}

.sec4__cont5 .one {
    width: 120px;
    height: 120px;
    top: 60%;
    left: 30%;
}

.sec4__cont6 .one {
    width: 100px;
    height: 100px;
    top: 30%;
    left: 80%;
}

/* #section5 */

#section5 {
    background-color: var(--black);
    width: 100%;
    overflow: hidden;
    padding: 10vw;
}

#section5 .title {
    display: flex;
    flex-direction: column;
}

#section5 .title .sec__title {
    font-size: 16px;
    text-align: left;
    color: #999;
}

#section5 .title .sec__msg .desc2 {
    padding: 10% 0 10% 40%;
    word-break: keep-all;
    font-size: 16px;
    line-height: 1.7;
    font-family: var(--fontKor);
}

#section5 .masonry {
    column-count: 0;
    column-gap: 0;
}

@media screen and (min-width: 400px) {
    .masonry {
        column-count: 2;
    }
}

@media screen and (min-width: 600px) {
    .masonry {
        column-count: 3;
    }
}

@media screen and (min-width: 800px) {
    .masonry {
        column-count: 4;
    }
}

@media screen and (min-width: 1100px) {
    .masonry {
        column-count: 5;
    }
}

.masonry .item {
    box-sizing: border-box;
    break-inside: avoid;
    padding: 10px;
}

.masonry .item:nth-child(1) .item__content {
    background-image: url(../img/i1.jpg);
}

.masonry .item:nth-child(2) .item__content {
    background-image: url(../img/i2.jpg);
}

.masonry .item:nth-child(3) .item__content {
    background-image: url(../img/i3.jpg);
}

.masonry .item:nth-child(4) .item__content {
    background-image: url(../img/i4.jpg);
}

.masonry .item:nth-child(5) .item__content {
    background-image: url(../img/i5.jpg);
}


.masonry .item.last .item__content:hover {
    background: #ffffff27;
}

.item .item__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    box-sizing: border-box;
    color: #fff;
    background-color: #ffffff27;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    backdrop-filter: blur(5px);
    padding: 20px;
    z-index: 10;
    transition: all 0.3s;
}

.item__content::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #0000007e;
    backdrop-filter: blur(2px);
    z-index: -1;
}

.item.last .item__content .cmt_h {
    font-size: 16px;
    font-family: "IropkeBatang";
    color: #ffffff5e;
    margin-bottom: 10px;
    font-size: 14px;
}

.item.last .item__content input {
    border: 0;
    margin-bottom: 5px;
    background-color: transparent;
    border: 1px solid #ffffff50;
    padding: 3px 10px;
    font-family: "IropkeBatang";
    font-size: 14px;
    width: 100%;
}

.item.last {
    padding: 10px;
}

.item.last .item__content button {
    width: 100%;
    display: block;
    font-family: "IropkeBatang";
    background: transparent;
    padding: 3px;
    border: 0;
    color: #fff;
    background-color: #555;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;

}

.item.last .item__content button:hover {
    background-color: var(--black);
}

.item__content .text {
    word-break: keep-all;
    font-size: 16px;
    line-height: 1.7;
    color: #f1f1f1;
    position: relative;
    z-index: 100;
    font-family: var(--fontKor);
}

.item__content .date {
    word-break: keep-all;
    font-size: 16px;
    line-height: 1.7;
    color: #f1f1f1;
    position: relative;
    z-index: 100;
    font-family: var(--fontKor);
}

@media (max-width:1553px) {
    .item__content .text {
        font-size: 16px;
        width: 100%;
    }

    .item__content .date {
        font-size: 14px;
    }
}

.item__content:hover {
    background: #DAA39C;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* .item__content:before {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 13px;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
} */
.item__content--small {
    min-height: 100px;
}

.item__content--medium {
    height: 175px;
}

.item__content--large {
    height: 280px;

}


/* contact */

#contact {
    width: 100%;
    height: 100vh;
    background-image: url(../img/bg-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    /* color: var(--white); */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#contact .contact {
    padding: 6vw 6vw 4vw;
    font-size: 12vw;
    font-family: var(--fontNGL);
    line-height: 12.2vw;
}

#contact .text__info {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

#contact .text__info h5,
#contact .text__info p:first-child {
    font-weight: bold;
}

#contact .text__info h5,
#contact .text__info p {
    padding: 0 100px;
    font-family: var(--fontNGL);
    font-size: 1.2rem;

}

#contact .text__info .kor {
    font-family: var(--fontKor);
    font-size: 1.2rem;
}

#contact .text__info li a {
    padding: 0 100px;
    font-size: 1.2rem;
    font-family: var(--fontNGL);
}

@media (max-width:912px) {

    #contact .text__info h5,
    #contact .text__info p,
    #contact .text__info li a {
        padding: 0 30px;
    }
}