@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

body {
    font-family: 'IBM Plex Sans', 'Noto Sans KR', 'arial', serif;
    background-color: #000;
}

.visual {
    width: 100vw;
    height: 100vh;
    background: #000;
    margin-bottom: 400px;
}

.visual .titleBox {
    width: 80vw;
    height: 70vh;
    font-size: 9vw;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.visual .titleWrap {
    position: absolute;
    left: 0;
    top: 0;
}

.visual .titleWrap p {
    font-weight: bold;
    color: transparent;
    line-height: 1.1;
}

.visual .titleWrap.border1 {
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
    -webkit-text-stroke: 2px #444;
    z-index: 1;
}

.visual .titleWrap.border2 {
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
    -webkit-text-stroke: 2px #999;
    z-index: 2;
}

.visual .titleWrap.border3 {
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
    -webkit-text-stroke: 2px #fff;
    z-index: 3;
}

.visual .titleWrap.innerText1 {
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
    z-index: 4;
}

.visual .titleWrap.innerText1 em {
    font-style: normal;
    color: #fff;
}

.visual .titleWrap.innerText2 {
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
    z-index: 5;
}

.visual .titleWrap.innerText2 span.moveTitle1,
.visual .titleWrap.innerText2 span.moveTitle2,
.visual .titleWrap.innerText2 span.moveTitle3,
.visual .titleWrap.innerText2 span.moveTitle4 {
    display: inline-block;
    font-style: normal;
    color: transparent;
}

.visual .titleWrap.innerText2 p {
    position: relative;
}

.visual .titleWrap.innerText2 p span {
    position: relative;
}

.visual .titleWrap.innerText2 span.moveTitle1:after {
    content: 'D';
    font-size: inherit;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    line-height: inherit;
}

.visual .titleWrap.innerText2 span.moveTitle2:after {
    content: '&';
    font-size: inherit;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    line-height: inherit;
}

.visual .titleWrap.innerText2 span.moveTitle3:after {
    content: 'D';
    font-size: inherit;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    line-height: inherit;
}

.visual .titleWrap.innerText2 span.moveTitle4:after {
    content: 'Expert';
    font-size: inherit;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    line-height: inherit;
}

.visual .title2Box {
    font-size: 40px;
    text-align: center;
    position: absolute;
    top: 90%;
    left: 0;
    width: 100%;
    color: #fff;
    opacity: 0;
}


.intro {
    width: 100%;
    height: 100vh;
    position: relative;
    margin-bottom: 1800px;
}

.intro .backgroundVideo {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.intro .backgroundVideo video {
    filter: brightness(45%);
    position: absolute;
    left: 0;
    top: -3.2%;
    width: 100%;
    height: 107%;
    object-fit: cover;
    clip-path: circle(0%);
}

.intro .backgroundVideo h2.title {
    position: absolute;
    left: 0;
    top: 40%;
    text-align: center;
    width: 100%;
    opacity: 0;
    color: #fff;
    z-index: 10;
    font-size: 6vw;
}


.intro .contentWrap {
    opacity: 0;
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    perspective: 4500px;
}

.intro .contentWrap > ul {
    width: 31vw;
    height: 20vw;
    transform-style: preserve-3d;
    position: relative;
}

.intro .contentWrap > ul > li {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    border: 1px solid #666;
}

.intro .contentWrap > ul > li .box {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.9);
    padding: 20px;
    color: #000;
    box-sizing: border-box;
}

.intro .contentWrap > ul > li.box1 {
    transform: rotateX(0deg) translateZ(14vw);
}
.intro .contentWrap > ul > li.box2 {
    transform: rotateX(72deg) translateZ(14vw);
}
.intro .contentWrap > ul > li.box3 {
    transform: rotateX(144deg) translateZ(14vw);
}
.intro .contentWrap > ul > li.box4 {
    transform: rotateX(216deg) translateZ(14vw);
}
.intro .contentWrap > ul > li.box5 {
    transform: rotateX(288deg) translateZ(14vw);
}

.intro .contentWrap > ul > li .box span {
    font-size: 4vw;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
    margin-bottom: 15px;
}

.intro .contentWrap > ul > li .box .title {
    font-size: 1vw;
    margin-bottom: 15px;
}

.intro .contentWrap > ul > li .box .subTitle {
    font-size: 0.9vw;
    margin-bottom: 25px;
    opacity: 0.7;
}

.intro .contentWrap > ul > li .box ul {
    width: 100%;
    height: -webkit-fill-available;
    padding-left: 15px;
}

.intro .contentWrap > ul > li .box ul li {
    list-style: disc;
    font-size: 0.8vw;
    margin-bottom: 8px;
    width: calc(100% - 20px);
}

@media screen and (max-width: 1500px) {

    .visual .title2Box {
        font-size: 40px;
    }

    .intro .backgroundVideo h2.title {
        top: 35%;
        font-size: 7vw;
    }

    .intro .contentWrap > ul {
        width: 36vw;
        height: 25.41vw;
    }

    .intro .contentWrap > ul > li.box1 {
        transform: rotateX(0deg) translateZ(17.7vw);
    }
    .intro .contentWrap > ul > li.box2 {
        transform: rotateX(72deg) translateZ(17.7vw);
    }
    .intro .contentWrap > ul > li.box3 {
        transform: rotateX(144deg) translateZ(17.7vw);
    }
    .intro .contentWrap > ul > li.box4 {
        transform: rotateX(216deg) translateZ(17.7vw);
    }
    .intro .contentWrap > ul > li.box5 {
        transform: rotateX(288deg) translateZ(17.7vw);
    }

}

@media screen and (max-width: 1300px) {

    .visual .title2Box {
        font-size: 40px;
    }

    .intro .backgroundVideo h2.title {
        top: 31%;
        font-size: 8vw;
    }

    .intro .contentWrap > ul {
        width: 38vw;
        height: 36vw;
    }

    .intro .contentWrap > ul > li.box1 {
        transform: rotateX(0deg) translateZ(25vw);
    }
    .intro .contentWrap > ul > li.box2 {
        transform: rotateX(72deg) translateZ(25vw);
    }
    .intro .contentWrap > ul > li.box3 {
        transform: rotateX(144deg) translateZ(25vw);
    }
    .intro .contentWrap > ul > li.box4 {
        transform: rotateX(216deg) translateZ(25vw);
    }
    .intro .contentWrap > ul > li.box5 {
        transform: rotateX(288deg) translateZ(25vw);
    }

    .intro .contentWrap > ul > li .box span {
        font-size: 5.4vw;
        padding-bottom: 5px;
        margin-bottom: 12px;
    }

    .intro .contentWrap > ul > li .box .title {
        font-size: 2.1vw;
        margin-bottom: 15px;
    }

    .intro .contentWrap > ul > li .box .subTitle {
        font-size: 1.4vw;
        margin-bottom: 25px;
        opacity: 0.7;
    }

    .intro .contentWrap > ul > li .box ul li {
        font-size: 1.2vw;
    }

}

@media screen and (max-width: 1100px) {

    .visual .title2Box {
        font-size: 40px;
    }

    .intro .backgroundVideo h2.title {
        top: 30%;
        font-size: 8.5vw;
    }

    .intro .contentWrap > ul {
        width: 38vw;
        height: 40vw;
    }

    .intro .contentWrap > ul > li.box1 {
        transform: rotateX(0deg) translateZ(28vw);
    }
    .intro .contentWrap > ul > li.box2 {
        transform: rotateX(72deg) translateZ(28vw);
    }
    .intro .contentWrap > ul > li.box3 {
        transform: rotateX(144deg) translateZ(28vw);
    }
    .intro .contentWrap > ul > li.box4 {
        transform: rotateX(216deg) translateZ(28vw);
    }
    .intro .contentWrap > ul > li.box5 {
        transform: rotateX(288deg) translateZ(28vw);
    }

    .intro .contentWrap > ul > li .box span {
        font-size: 6.6vw;
        padding-bottom: 5px;
        margin-bottom: 12px;
    }

    .intro .contentWrap > ul > li .box .title {
        font-size: 2.2vw;
        margin-bottom: 15px;
    }

    .intro .contentWrap > ul > li .box .subTitle {
        font-size: 1.5vw;
        margin-bottom: 25px;
        opacity: 0.7;
    }

    .intro .contentWrap > ul > li .box ul li {
        font-size: 1.3vw;
    }

}

@media screen and (max-width: 1000px) {

    .visual .title2Box {
        font-size: 40px;
    }

    .intro .backgroundVideo h2.title {
        top: 30%;
        font-size: 9vw;
    }

    .intro .contentWrap > ul {
        width: 45vw;
        height: 45vw;
    }

    .intro .contentWrap > ul > li.box1 {
        transform: rotateX(0deg) translateZ(31.5vw);
    }
    .intro .contentWrap > ul > li.box2 {
        transform: rotateX(72deg) translateZ(31.5vw);
    }
    .intro .contentWrap > ul > li.box3 {
        transform: rotateX(144deg) translateZ(31.5vw);
    }
    .intro .contentWrap > ul > li.box4 {
        transform: rotateX(216deg) translateZ(31.5vw);
    }
    .intro .contentWrap > ul > li.box5 {
        transform: rotateX(288deg) translateZ(31.5vw);
    }

    .intro .contentWrap > ul > li .box span {
        font-size: 7.4vw;
        padding-bottom: 5px;
        margin-bottom: 12px;
    }

    .intro .contentWrap > ul > li .box .title {
        font-size: 2.3vw;
        margin-bottom: 15px;
    }

    .intro .contentWrap > ul > li .box .subTitle {
        font-size: 1.9vw;
        margin-bottom: 25px;
        opacity: 0.7;
    }

    .intro .contentWrap > ul > li .box ul li {
        font-size: 1.45vw;
    }

}

@media screen and (max-width: 900px) {

    .visual .title2Box {
        font-size: 4vw;
    }

    .intro .backgroundVideo h2.title {
        top: 25%;
        font-size: 9vw;
    }

    .intro .contentWrap {
        top: 55%;
    }

    .intro .contentWrap > ul {
        width: 63vw;
        height: 55vw;
    }

    .intro .contentWrap > ul > li.box1 {
        transform: rotateX(0deg) translateZ(38.5vw);
    }
    .intro .contentWrap > ul > li.box2 {
        transform: rotateX(72deg) translateZ(38.5vw);
    }
    .intro .contentWrap > ul > li.box3 {
        transform: rotateX(144deg) translateZ(38.5vw);
    }
    .intro .contentWrap > ul > li.box4 {
        transform: rotateX(216deg) translateZ(38.5vw);
    }
    .intro .contentWrap > ul > li.box5 {
        transform: rotateX(288deg) translateZ(38.5vw);
    }

    .intro .contentWrap > ul > li .box span {
        font-size: 8.3vw;
        padding-bottom: 5px;
        margin-bottom: 12px;
    }

    .intro .contentWrap > ul > li .box .title {
        font-size: 3.3vw;
        margin-bottom: 15px;
    }

    .intro .contentWrap > ul > li .box .subTitle {
        font-size: 2.4vw;
        margin-bottom: 25px;
        opacity: 0.7;
    }

    .intro .contentWrap > ul > li .box ul li {
        font-size: 1.9vw;
    }

}

@media screen and (max-width: 768px) {

    .visual .titleWrap.border1 {
        -webkit-text-stroke: 1px #444;
    }

    .visual .titleWrap.border2 {
        -webkit-text-stroke: 1px #444;
    }

    .visual .titleWrap.border3 {
        -webkit-text-stroke: 1px #444;
    }
    
    .visual .title2Box {
        font-size: 4vw;
    }

    .intro .backgroundVideo h2.title {
        top: 25%;
        font-size: 11vw;
    }

    .intro .contentWrap {
        top: 55%;
    }

    .intro .contentWrap > ul {
        width: 73vw;
        height: 65vw;
    }

    .intro .contentWrap > ul > li.box1 {
        transform: rotateX(0deg) translateZ(45.5vw);
    }
    .intro .contentWrap > ul > li.box2 {
        transform: rotateX(72deg) translateZ(45.5vw);
    }
    .intro .contentWrap > ul > li.box3 {
        transform: rotateX(144deg) translateZ(45.5vw);
    }
    .intro .contentWrap > ul > li.box4 {
        transform: rotateX(216deg) translateZ(45.5vw);
    }
    .intro .contentWrap > ul > li.box5 {
        transform: rotateX(288deg) translateZ(45.5vw);
    }

    .intro .contentWrap > ul > li .box span {
        font-size: 8.9vw;
        padding-bottom: 8px;
        margin-bottom: 15px;
    }

    .intro .contentWrap > ul > li .box .title {
        font-size: 3.7vw;
        margin-bottom: 15px;
    }

    .intro .contentWrap > ul > li .box .subTitle {
        font-size: 2.7vw;
        margin-bottom: 19px;
        opacity: 0.7;
    }

    .intro .contentWrap > ul > li .box ul li {
        font-size: 2.3vw;
    }

}

@media screen and (max-width: 600px) {

    .visual .titleWrap.border1 {
        -webkit-text-stroke: 1px #444;
    }

    .visual .titleWrap.border2 {
        -webkit-text-stroke: 1px #444;
    }

    .visual .titleWrap.border3 {
        -webkit-text-stroke: 1px #444;
    }

    .visual .title2Box {
        font-size: 5vw;
    }

    .intro .backgroundVideo h2.title {
        top: 22%;
        font-size: 11vw;
    }

    .intro .contentWrap {
        top: 55%;
    }

    .intro .contentWrap > ul {
        width: 73vw;
        height: 77vw;
    }

    .intro .contentWrap > ul > li.box1 {
        transform: rotateX(0deg) translateZ(53.5vw);
    }
    .intro .contentWrap > ul > li.box2 {
        transform: rotateX(72deg) translateZ(53.5vw);
    }
    .intro .contentWrap > ul > li.box3 {
        transform: rotateX(144deg) translateZ(53.5vw);
    }
    .intro .contentWrap > ul > li.box4 {
        transform: rotateX(216deg) translateZ(53.5vw);
    }
    .intro .contentWrap > ul > li.box5 {
        transform: rotateX(288deg) translateZ(53.5vw);
    }

    .intro .contentWrap > ul > li .box span {
        font-size: 8.5vw;
        padding-bottom: 8px;
        margin-bottom: 15px;
    }

    .intro .contentWrap > ul > li .box .title {
        font-size: 4.5vw;
        margin-bottom: 15px;
    }

    .intro .contentWrap > ul > li .box .subTitle {
        font-size: 3.1vw;
        margin-bottom: 15px;
        opacity: 0.7;
    }

    .intro .contentWrap > ul > li .box ul li {
        font-size: 2.8vw;
    }

}

@media screen and (max-width: 530px) {

    .visual .titleWrap.border1 {
        -webkit-text-stroke: 1px #444;
    }

    .visual .titleWrap.border2 {
        -webkit-text-stroke: 1px #444;
    }

    .visual .titleWrap.border3 {
        -webkit-text-stroke: 1px #444;
    }

    .visual .title2Box {
        font-size: 5.5vw;
    }

    .intro .contentWrap > ul {
        width: 73vw;
        height: 80vw;
    }

    .intro .contentWrap > ul > li.box1 {
        transform: rotateX(0deg) translateZ(56vw);
    }
    .intro .contentWrap > ul > li.box2 {
        transform: rotateX(72deg) translateZ(56vw);
    }
    .intro .contentWrap > ul > li.box3 {
        transform: rotateX(144deg) translateZ(56vw);
    }
    .intro .contentWrap > ul > li.box4 {
        transform: rotateX(216deg) translateZ(56vw);
    }
    .intro .contentWrap > ul > li.box5 {
        transform: rotateX(288deg) translateZ(56vw);
    }

    .intro .contentWrap > ul > li .box span {
        font-size: 7.3vw;
        padding-bottom: 8px;
        margin-bottom: 15px;
    }

    .intro .contentWrap > ul > li .box .title {
        font-size: 3.9vw;
        margin-bottom: 15px;
    }

    .intro .contentWrap > ul > li .box .subTitle {
        font-size: 3.1vw;
        margin-bottom: 18px;
        opacity: 0.7;
    }

    .intro .contentWrap > ul > li .box ul li {
        font-size: 2.8vw;
    }

}


@media screen and (max-width: 400px) {

    .visual .titleWrap.border1 {
        -webkit-text-stroke: 1px #444;
    }

    .visual .titleWrap.border2 {
        -webkit-text-stroke: 1px #444;
    }

    .visual .titleWrap.border3 {
        -webkit-text-stroke: 1px #444;
    }

    .visual .title2Box {
        font-size: 5.5vw;
    }

    .intro .contentWrap > ul {
        width: 73vw;
        height: 80vw;
    }

    .intro .contentWrap > ul > li.box1 {
        transform: rotateX(0deg) translateZ(55vw);
    }
    .intro .contentWrap > ul > li.box2 {
        transform: rotateX(72deg) translateZ(55vw);
    }
    .intro .contentWrap > ul > li.box3 {
        transform: rotateX(144deg) translateZ(55vw);
    }
    .intro .contentWrap > ul > li.box4 {
        transform: rotateX(216deg) translateZ(55vw);
    }
    .intro .contentWrap > ul > li.box5 {
        transform: rotateX(288deg) translateZ(55vw);
    }

    .intro .contentWrap > ul > li .box span {
        font-size: 7.3vw;
        padding-bottom: 8px;
        margin-bottom: 15px;
    }

    .intro .contentWrap > ul > li .box .title {
        font-size: 4vw;
        margin-bottom: 15px;
    }

    .intro .contentWrap > ul > li .box .subTitle {
        font-size: 3vw;
        margin-bottom: 18px;
        opacity: 0.7;
    }

    .intro .contentWrap > ul > li .box ul li {
        font-size: 2.8vw;
    }

}