._s._work{ padding-top: 210px; padding-bottom: 100px; }


.gallery{ margin-top: 40px; }
.gallery .list{ display: flex; gap: calc(35 / 1600 * 100%); flex-wrap: wrap; }
.gallery .list li{ width: calc(510 / 1600 * 100%); position: relative; margin-bottom: 70px; }
.gallery .list li > a{ display: block; position: relative; }
.gallery .list li > a .thumb{ width: 100%; overflow: hidden; border-radius: 20px; position: relative;  }
.gallery .list li > a .thumb::after{ content: ''; display: block; padding-bottom: calc(320 / 510 * 100%); }
.gallery .list li > a .thumb img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; transition-duration: 0.6s; z-index: 0; }
.gallery .list li > a .thumb .circle{
    width: 0;
    height: 0;
    transition: width .5s ease-in-out, height .5s ease-in-out;
    border-radius: 50%;
    background-color: rgba(20, 98, 217, 0.5);
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.gallery .list li > a .thumb .more{ position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition-duration: 0.6s; z-index: 3; opacity: 0; transform: translateY(20%); }
._drift .gallery .list li > a .thumb .more{ transform: translateY(-80%); }
.gallery .list li > a .thumb .more span{ font-size: 17px; font-weight: 500; letter-spacing: -0.04em; margin-right: 10px; }
.gallery .list li > a .thumb .more i{ font-size: 18px; }

.gallery .list li > a dl{ margin-top: 18px; }
.gallery .list li > a dl dt{ font-size: 22px; font-weight: 600; letter-spacing: -0.04em; }
.gallery .list li > a dl dd{ font-size: 16px; letter-spacing: -0.04em; line-height: 1.4; margin-top: 5px; color: rgba(255,255,255,0.7); }

@media screen and (min-width: 821px){
    .gallery .list li:hover > a .thumb img{ transform: scale(1.1); }
    .gallery .list li:hover > a .thumb .more{ opacity: 1; transform: translateY(0); }
    ._drift .gallery .list li:hover > a .thumb .more{ opacity: 1; transform: translateY(-100%); }
    .gallery .list li:hover > a .thumb .circle{ width: 60vw; height: 60vw;  }
}


@media screen and (max-width: 1280px){
    .subtop .txtwrap strong{ font-size: 80px; }
    .gallery{ margin-top: 20px; }
    .gallery .list li{ margin-bottom: 40px; }
    .gallery .list li > a .thumb{ border-radius: 15px; }
    .gallery .list li > a dl{ margin-top: 10px; }
    .gallery .list li > a dl dt{ font-size: 18px; }
    .gallery .list li > a dl dd{ font-size: 14px; }
}

@media screen and (max-width: 820px){
    ._s._work{ padding-top: 120px; padding-bottom: 70px; }
    .subtop .txtwrap strong{ font-size: 60px; }
    .gallery .list{ justify-content: space-between; gap: 0; }
    .gallery .list li{ width: 49%; }
}

@media screen and (max-width: 500px){
    .subtop .txtwrap strong{ font-size: 40px; }
    .gallery .list li{ width: 100%; }
}

/* work - view */
._s._workview{ width: 100%; overflow: hidden; position: relative; color: #fff; } 
._s._workview .black{ background-color: #000; position: relative; z-index: 2; padding-top: 150px; }
._s._workview .viewmain{ position: relative; height: 100vh; overflow: hidden; }
._s._workview .viewmain img{ width: 100%; height: 100%; object-fit: cover; }

._s._workview .titlevid .vidWrap{ margin-top: 40px; }
._s._workview .titlevid{ width: 100%; max-width: 1200px; margin: 0 auto; }
._s._workview .titlevid h1{ font-size: 5.25vw; letter-spacing: -0.04em; font-weight: 600; line-height: 1.3; }
._s._workview .titlevid em{ font-size: 20px; font-weight: 500; letter-spacing: -0.04em; line-height: calc(30 / 20); margin-top: 25px; text-align: right; display: block; color: rgba(255,255,255,0.5); }

._s._workview .txtcont{ margin-top: 230px; text-align: center; }
._s._workview .txtcont .editor{ font-size: 26px; letter-spacing: -0.04em; line-height: calc(40 / 26); font-weight: 600; }
._s._workview .txtcont .imgs{ margin-top: 105px; }
._s._workview .txtcont .imgs li{ margin-bottom: 145px; }
._s._workview .txtcont .imgs li img{ max-width: 70%; }
._s._workview .txtcont .imgs li:last-of-type{ margin-bottom: 0; }
._s._workview .txtcont .imgs li:nth-of-type(2n-1){ text-align: left; }
._s._workview .txtcont .imgs li:nth-of-type(2n){ text-align: right; }

@media screen and (max-width: 1280px){
    ._s._workview .titlevid em{ font-size: 16px; margin-top: 15px; }
    ._s._workview .txtcont{ margin-top: 100px; }
    ._s._workview .txtcont .editor{ font-size: 20px; }
    ._s._workview .txtcont .imgs{ margin-top: 70px; }
    ._s._workview .txtcont .imgs li{ margin-bottom: 70px; }
}

@media screen and (max-width: 820px){
    ._s._workview .black{ padding-top: 100px; }
    ._s._workview .viewmain{ height: auto; }
    ._s._workview .titlevid em{ font-size: 14px; }
    ._s._workview .txtcont{ margin-top: 70px; }
    ._s._workview .txtcont .editor{ font-size: 16px; }
    ._s._workview .txtcont .imgs li{ margin-bottom: 40px; }
    ._s._workview .txtcont .imgs li img{ max-width: 80%; }
}


/* drift */
._s._drift{ padding-top: 215px; padding-bottom: 100px; }
._s._drift .subtop{ text-align: center; }
._s._drift .subtop p{ font-size: 26px; letter-spacing: -0.04em; line-height: calc(40 / 26); font-weight: 600; margin-top: 35px; }
._s._drift .gallery{ margin-top: 80px; }

._s._drift .gallery .list{ gap: unset; }
._s._drift .gallery .list li{ width: calc(33.33% - 55px); margin-bottom: 0; }
._s._drift .gallery .list li:nth-of-type(2){ margin-top: 80px; }
._s._drift .gallery .list li > a .thumb::after{ display: none; }
._s._drift .gallery .list li > a .thumb img{ position: static; }
._s._drift .gallery .list li > a dl{ margin-top: 10px; }
._s._drift .gallery .list li > a dl dt{ line-height: 1.3; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
._s._drift .gallery .list li > a dl dd{ display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #fff; margin-top: 10px; }
._s._drift .gallery .list li > a > em{ display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.04em; margin-top: 20px; color: rgba(255,255,255,0.5); }

._s._drift .gallery .list li > a > b{ font-size: 14px; letter-spacing: -0.04em; display: block; margin-top: 15px; color: rgba(255,255,255,0.3); }

@media screen and (max-width: 1280px){
    ._s._drift{ padding-top: 150px; }
    ._s._drift .subtop img{ width: 250px; }
    ._s._drift .subtop p{ font-size: 20px; margin-top: 20px; }
    
    ._s._drift .gallery .list li{ width: calc(33.33% - 40px); }
}

@media screen and (max-width: 820px){
    ._s._drift{ padding-top: 120px; }
    ._s._drift .subtop img{ width: 160px; }
    ._s._drift .subtop p{ font-size: 16px; margin-top: 10px; }
    
    ._s._drift .gallery .list li{ width: calc(33.33% - 13px); }
}

@media screen and (max-width: 500px){
    ._s._drift .gallery .list li{ width: calc(50% - 10px); }
}

@media screen and (max-width: 360px){
    ._s._drift .gallery .list li{ width: 100%; margin-bottom: 30px; }
    ._s._drift .gallery .list li:nth-of-type(2){ margin-top: 0; }
}




/* drift view */
._s._driftview{ padding-top: 245px; padding-bottom: 150px; width: 100%; overflow: hidden; }
._s._driftview .viewtop{ text-align: center; }
._s._driftview .viewtop em{ font-size: 18px; font-weight: 500; letter-spacing: -0.04em; display: block; color: rgba(255,255,255,0.5); }
._s._driftview .viewtop h1{ font-size: 50px; font-weight: 600; letter-spacing: -0.04em; margin-top: 10px; line-height: 1.4; }
._s._driftview .viewtop h1 span{ color: #1462d9; }
._s._driftview .viewtop b{ font-size: 16px; letter-spacing: -0.04em; margin-top: 20px; color: rgba(255,255,255,0.3); display: block; }
._s._driftview .conttop{ margin-top: 105px; }
._s._driftview .conttop > p{ font-size: 18px; letter-spacing: -0.04em; line-height: calc(28 / 18); }

._s._driftview .conttop .vidWrap{ margin-top: 60px; }

._s._driftview .txtcont{ box-sizing: border-box; }
._s._driftview .txtcont .editor{ line-height: calc(28 / 20); padding: 70px 0; }
._s._driftview .txtcont .editor img{ height: 100% !important; }
._s._driftview .txtcont .expl{ display: flex; border-top: 1px solid #fff; border-bottom: 1px solid #fff; box-sizing: border-box; }
._s._driftview .txtcont .expl > a{ display: flex; align-items: center; width: 50%; padding: 30px 7px; position: relative; }
._s._driftview .txtcont .expl > a p{ font-size: 18px; letter-spacing: -0.04em; padding: 0 25px; box-sizing: border-box; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
._s._driftview .txtcont .expl > a i{ font-size: 20px; }

._s._driftview .txtcont .expl .lbx:first-of-type::after{ content: ''; display: block; width: 1px; height: calc(30 / 80 * 100%); background-color: #fff; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
._s._driftview .txtcont .expl .rbx{ justify-content: flex-end; }

@media screen and (min-width: 821px){
    ._s._driftview .txtcont .expl > a:hover{ background-color: rgba(255,255,255,0.05); }
}

@media screen and (max-width: 1280px){
    ._s._driftview{ padding-top: 150px; }
    ._s._driftview .viewtop em{ font-size: 16px; }
    ._s._driftview .viewtop h1{ font-size: 40px; margin-top: 5px; }
    ._s._driftview .viewtop b{ font-size: 14px; margin-top: 15px; }
    ._s._driftview .conttop{ margin-top: 70px; }
    ._s._driftview .conttop > p{ font-size: 16px; }
    ._s._driftview .txtcont .expl > a{ padding: 20px 7px; }
    ._s._driftview .txtcont .expl > a p{ font-size: 16px; }
}

@media screen and (max-width: 820px){
    ._s._driftview{ padding-top: 100px; }
    ._s._driftview .viewtop em{ font-size: 14px; }
    ._s._driftview .viewtop h1{ font-size: 32px; }
    ._s._driftview .viewtop b{ margin-top: 10px; }
    ._s._driftview .conttop{ margin-top: 50px; }
    ._s._driftview .conttop > p{ font-size: 14px; }
    ._s._driftview .txtcont .expl > a{ padding: 15px 7px; }
    ._s._driftview .txtcont .expl > a p{ font-size: 14px; }
}

@media screen and (max-width: 500px){
    ._s._driftview .viewtop h1{ font-size: 22px; }
    ._s._driftview .conttop{ margin-top: 30px; }
    ._s._driftview .conttop .vidWrap{ margin-top: 30px; }
    ._s._driftview .txtcont .editor{ padding: 40px 0; font-size: 14px; }
    ._s._driftview .txtcont .expl > a{ padding: 13px 5px; }
    ._s._driftview .txtcont .expl > a p{ padding: 0 5px; }
}