.portfolio { margin-top: 120px; }
.portfolio .tab { display: inline-flex; flex-wrap: nowrap; align-items: center; margin-bottom: 80px; }
.portfolio .tab li { margin-right: 16px; }
.portfolio .tab li a { position: relative; display: block; padding: 14px 20px 16px; background: #F8F8F8; color: #9A9A9A; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; }
.portfolio .tab li a.on { background: #191919; color:#fff; clip-path: polygon(100% 0, 100% 75%, 85% 100%, 0 100%, 0 0); }
.portfolio ol { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 72px 22px; }
.portfolio ol li a { display: block; }
.portfolio ol li .img { position: relative; height: 300px; overflow: hidden; }
.portfolio ol li .img::after {     
    opacity: 1;
    content: "";
    width: 35px;
    height: 35px;
    background: #fff;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    position: absolute;
    bottom: -1px;
    right: -1px; 
}
.portfolio ol li .img img { width: 100%; height: 100%; object-fit: cover; transition: transform cubic-bezier(0.4,0,0.2,1) .3s; -webkit-transition: transform cubic-bezier(0.4,0,0.2,1) .3s; will-change: transform; }
.portfolio ol li p { position: relative; margin-top: 22px; color: #191919; font-size: 24px; font-weight: 500; line-height: 1.32;  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.portfolio ol li em {     
    margin-top: 38px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-right: 6px; 
    color: #9A9A9A;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1; 
}
.portfolio ol li em:after {  
    content:"";
    background: url(../images/portfolio-ic.svg)no-repeat;
    background-size: contain;
    width: 14px;
    height: 14px;
}
@media (min-width: 1181px) {
    .portfolio ol li:hover .img img {    
        transform: scale(1.05) rotate( 0.001deg);
        -webkit-transform: scale(1.05) rotate( 0.001deg);
        -ms-transform: scale(1.05) rotate( 0.001deg);    
        will-change: transform; 
    }
    .portfolio ol li:hover p { color: #E61E15; }
    .portfolio ol li:hover em { color: #E61E15; }
    .portfolio ol li:hover em:after { background: url(../images/portfolio-red-ic.svg)no-repeat; background-size: contain; }   
}
@media (max-width: 1180px) {
    .portfolio { margin-top: calc(100vw * (100/ 1180)); }
    .portfolio .tab { margin-bottom: calc(100vw * (80/ 1180)); }
    .portfolio .tab li { margin-right: calc(100vw * (16/ 1180)); }
    .portfolio .tab li a { padding: calc(100vw * (14/ 1180)) calc(100vw * (20/ 1180)) calc(100vw * (16/ 1180)); font-size: calc(100vw * (20/ 1180)); }
    .portfolio ol { grid-template-columns: repeat(2, 1fr); gap: calc(100vw * (72/ 1180)) calc(100vw * (20/ 1180)); }
    .portfolio ol li .img { height: calc(100vw * (300/ 1180)); }
    .portfolio ol li p { margin-top: calc(100vw * (22/ 1180)); font-size: calc(100vw * (24/ 1180)); }
    .portfolio ol li em { margin-top: calc(100vw * (38/ 1180)); padding-right: calc(100vw * (6/ 1180)); font-size: calc(100vw * (16/ 1180)); }
    .portfolio ol li em:after { width: calc(100vw * (14/ 1180)); height: calc(100vw * (14/ 1180)); }
    .portfolio ol li .img::after { width: calc(100vw * (35/ 1180)); height: calc(100vw * (35/ 1180)); }
}
@media (max-width: 767px) {
    .portfolio { margin-top: calc(100vw * (100/ 767)); }
    .portfolio .tab { margin-bottom: calc(100vw * (80/ 767)); }
    .portfolio .tab li { margin-right: calc(100vw * (24/ 767)); }
    .portfolio .tab li a { padding: calc(100vw * (20/ 767)) calc(100vw * (40/ 767)); font-size: calc(100vw * (32/ 767)); }
    .portfolio ol { grid-template-columns: repeat(1, 1fr); gap: calc(100vw * (100/ 767)); }
    .portfolio ol li .img { height: calc(100vw * (377/ 767)); }
    .portfolio ol li p { margin-top: calc(100vw * (30/ 767)); font-size: calc(100vw * (32/ 767)); font-weight: 600; }
    .portfolio ol li em { margin-top: calc(100vw * (42/ 767)); padding-right: calc(100vw * (4/ 767)); font-size: calc(100vw * (24/ 767)); }
    .portfolio ol li em:after { width: calc(100vw * (18/ 767)); height: calc(100vw * (18/ 767)); }
    .portfolio ol li .img::after { width: calc(100vw * (45/ 767)); height: calc(100vw * (45/ 767)); }
}

/* 상세 */
.portfolio-view { margin-bottom: 200px; }
.view-title-box { position: relative; margin-bottom: 48px; }
.view-title-box h2 { display: flex; flex-wrap: nowrap; align-items: center; color: #191919; font-size: 56px; font-weight: 700; line-height: 1.32; cursor: pointer; }
.view-title-box h2 b { display: inline-block; padding-right: 64px; }
.view-title-box .ic { position: relative; }
.view-title-box .ic:after { 
    content: "";
    background: url(../images/drop-ic.svg)no-repeat;
    background-size: contain;
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(180deg);    
    transition: transform .2s; 
}
.view-title-box ul { 
    display: none;
    position: absolute;
    top: 83px;
    left: 0;
    z-index: 3;
    width: fit-content;
    max-height: 524px;
    padding: 32px 24px 0 26px;
    border: 1px solid #191919;
    background: #FFF;
    box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.08); 
    overflow-y: scroll;
}
.view-title-box.on ul { display: block; max-width: 100%; }
.view-title-box.on .ic::after { transform: translateY(-50%) rotate(0); }
.view-title-box ul::-webkit-scrollbar { width: 20px; }
.view-title-box ul::-webkit-scrollbar-thumb { background-clip: padding-box; border: 8px solid transparent; background-color: black; }
.view-title-box ul::-webkit-scrollbar-track { background: transparent; }
.view-title-box ul li { margin-bottom: 24px; }
.view-title-box ul li a { overflow: hidden; color: #9A9A9A; white-space: nowrap; font-size: 24px; font-weight: 400; line-height: 1; cursor: pointer; }
.view-title-box ul li a.on {color: #191919; font-weight: 500; }

.portfolio-view .video-box { margin-bottom: 56px; }
.portfolio-view .video-box a { position: relative; cursor: pointer; }
.portfolio-view .video-box a::before { 
    content: ""; 
    position: absolute; 
    top: 50%;  
    left: 50%; 
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0); 
    width: 100px; 
    height: 100px; 
    z-index: 2; 
    background: url(../images/play.svg)no-repeat; 
    background-size: contain; 
}
.portfolio-view .video-box .img { position: relative;  }
.portfolio-view .video-box a .img::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.48; background: #000; z-index: 1; }
.portfolio-view .video-box .img img { width: 100%; height: 100%; object-fit: cover; }

.video-desc { display: flex; flex-wrap: nowrap; justify-content: space-between; }
.video-desc li { width: 50%; }
.video-desc li:nth-child(1) { max-width: 450px; padding-right: 30px; }
.video-desc li:nth-child(2) { max-width: 800px; }
.video-desc li:nth-child(2) p { line-height: 1.6; }
.video-desc li p { display: flex; flex-wrap: nowrap; align-items: center; margin-bottom: 20px; color: #333; font-size: 20px; font-weight: 400; line-height: 1; }
.video-desc li p:last-child { margin-bottom: 0; }
.video-desc li p b { display: block; width: 110px; margin-right: 30px; color: #191919; font-size: 24px; font-weight: 500; }
.video-desc li p span { display: block; width: calc(100% - 110px); }
.video-desc li a { position: relative; display: inline-block; padding-right: 34px; color: #191919; font-size: 20px; font-weight: 500; line-height: 1; }
.video-desc li a:after { content: ""; background: url(../images/arrow-black.svg)no-repeat; background-size: contain; width: 24px; height: 24px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }

.view-slide { padding-bottom: 200px; overflow: hidden; }
.view-slide .sub-title { max-width: 800px; margin: 0 auto 72px; text-align: center; }
.view-slide .video-box { position: relative; height: 928px; margin-bottom: 88px; }
.view-slide .video-box a { position: relative; display: block; height: 100%; cursor: pointer; }
.view-slide .video-box a::before { content: ""; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url(../images/play.svg)no-repeat; background-size: contain; }
.view-slide .video-box .img { height: 100%; }
.view-slide .video-box video, .view-slide .video-box img { width: 100%; height: 100%; object-fit: cover; }
.view-slide .video-title { color: #191919; font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 24px; }
.view-slide .video-slide-box { width: 100vw; margin-bottom: 180px; overflow: hidden; }
.view-slide .video-slide { position: relative; width: 100%; max-width: 1680px; padding-bottom: 50px; }
.view-slide .video-slide .swiper-slide>a { display: block; padding-right: 40px; cursor: pointer; }
.view-slide .video-slide .swiper-slide .img { width: 100%; height: 423px; }
.view-slide .video-slide .swiper-slide .img img { width: 100%; height: 100%; object-fit: cover; }
.view-slide .video-slide .swiper-slide span { display: block; margin-top: 16px; color: #333; font-size: 24px; font-weight: 400; line-height: 1; }
/* .view-slide .swiper-scrollbar { max-width: 1640px; width: 100%; height: 2px; opacity: 1!important; z-index: 5; background: rgba(199, 199, 199, 1); }
.view-slide .swiper-scrollbar-drag { background: #191919; border-radius: 0; } */

.view-slide .swiper-pagination-progressbar { max-width: 1640px; width: 100%; height: 2px; opacity: 1!important; z-index: 5; background: rgba(199, 199, 199, 1); }
.view-slide .swiper-pagination-progressbar span { background: #191919; border-radius: 0; }

@media (max-width: 1180px){
    .portfolio-view { margin-bottom: calc(100vw * (130 / 1180)); }
    .view-title-box { margin-bottom: calc(100vw * (48 / 1180)); }
    .view-title-box h2 { font-size: calc(100vw * (56 / 1180)); }
    .view-title-box h2 b { padding-right: calc(100vw * (64 / 1180)); }
    .view-title-box .ic:after { width: calc(100vw * (48 / 1180)); height: calc(100vw * (48 / 1180)); }
    .view-title-box ul { top: calc(100vw * (83 / 1180)); max-height: calc(100vw * (534 / 1180)); padding: calc(100vw * (32 / 1180)) calc(100vw * (24 / 1180)) 0 calc(100vw * (26 / 1180)); }
    .view-title-box ul::-webkit-scrollbar { width: calc(100vw * (20 / 1180)); }
    .view-title-box ul::-webkit-scrollbar-thumb { border: calc(100vw * (8 / 1180)) solid transparent; }
    .view-title-box ul li { margin-bottom: calc(100vw * (24 / 1180)); }
    .view-title-box ul li a { font-size: calc(100vw * (24 / 1180)); }

    .portfolio-view .video-box { margin-bottom: calc(100vw * (56 / 1180)); }
    .portfolio-view .video-box a::before {
        top: calc(calc(100vw * (720 / 1180))/2 - calc(100vw * (100 / 1180)));
        left: calc(calc(100vw * (1180 / 1180))/2 - calc(100vw * (100 / 1180))); 
        width: calc(100vw * (100 / 1180)); 
        height: calc(100vw * (100 / 1180)); 
    }
    
    .video-desc li:nth-child(1) { max-width: 100%; padding-right: calc(100vw * (30 / 1180)); }
    .video-desc li:nth-child(2) { max-width: calc(100vw * (530 / 1180)); }
    .video-desc li p { margin-bottom: calc(100vw * (24 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .video-desc li p b { width: calc(100vw * (110 / 1180)); margin-right: calc(100vw * (30 / 1180)); font-size: calc(100vw * (24 / 1180)); }
    .video-desc li p span { width: calc(100% - calc(100vw * (140 / 1180))); }
    .video-desc li a { padding-right: calc(100vw * (36 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .video-desc li a:after { width: calc(100vw * (24 / 1180)); height: calc(100vw * (24 / 1180)); }

    .view-slide { padding-bottom: calc(100vw * (200 / 1180)); }
    .view-slide .sub-title { max-width: 800px; margin: 0 auto calc(100vw * (72 / 1180)); }
    .view-slide .video-box { height: calc(100vw * (611 / 1180)); margin-bottom: calc(100vw * (144 / 1180)); }
    .view-slide .video-box a::before { width: calc(100vw * (100 / 1180)); height: calc(100vw * (100 / 1180)); }
    .view-slide .video-title { font-size: calc(100vw * (32 / 1180)); margin-bottom: calc(100vw * (24 / 1180)); }
    .view-slide .video-slide-box { margin-bottom: calc(100vw * (140 / 1180)); }
    .view-slide .video-slide { padding-bottom: calc(100vw * (50 / 1180)); max-width: calc(100vw * (550 / 1180)); }
    .view-slide .video-slide .swiper-slide>a { padding-right: calc(100vw * (20 / 1180)); }
    .view-slide .video-slide .swiper-slide .img { height: calc(100vw * (280 / 1180)); }
    .view-slide .video-slide .swiper-slide span { margin-top: calc(100vw * (18 / 1180)); font-size: calc(100vw * (24 / 1180)); }
    .view-slide .swiper-scrollbar { width: 100%; height: 2px; }   
}
@media (max-width: 767px){
    .portfolio-view { margin-bottom: calc(100vw * (90 / 767)); }
    .view-title-box { margin-bottom: calc(100vw * (48 / 767)); }
    .view-title-box h2 { align-items: flex-start; font-size: calc(100vw * (56 / 767)); }
    .view-title-box h2 b { padding-right: calc(100vw * (64 / 767)); }
    .view-title-box .ic:after { 
        width: calc(100vw * (48 / 767)); 
        height: calc(100vw * (48 / 767)); 
        top: calc(100vw * (12 / 767));
        transform: translate(0, 0) rotate(180deg);
    }

    .view-title-box.on .ic::after { transform: translateY(0) rotate(0); }
    .view-title-box ul { top: calc(100vw * (94 / 767)); max-height: calc(100vw * (662 / 767)); padding: calc(100vw * (42 / 767)) calc(100vw * (34 / 767)) 0 calc(100vw * (36 / 767)); }
    .view-title-box ul::-webkit-scrollbar { width: calc(100vw * (40 / 767)); }
    .view-title-box ul::-webkit-scrollbar-thumb { border: calc(100vw * (16 / 767)) solid transparent; }
    .view-title-box ul li { margin-bottom: calc(100vw * (28 / 767)); }
    .view-title-box ul li a { font-size: calc(100vw * (32 / 767)); }

    .portfolio-view .video-box { margin-bottom: calc(100vw * (80 / 767)); }
    .portfolio-view .video-box a::before { 
        top: calc(calc(100vw * (458 / 767))/2 );
        left: calc(calc(100vw * (687 / 767))/2 ); 
        width: calc(100vw * (100 / 767)); 
        height: calc(100vw * (100 / 767)); 
    }
    
    .video-desc { display: block; }
    .video-desc li { width: 100%; }
    .video-desc li:nth-child(1) { max-width: 100%; padding-right: 0; }
    .video-desc li:nth-child(2) { max-width: 100%; margin-top: calc(100vw * (80 / 767)); }
    .video-desc li p { margin-bottom: calc(100vw * (28 / 767)); font-size: calc(100vw * (32 / 767)); }
    .video-desc li p b { width: calc(100vw * (160 / 767)); margin-right: calc(100vw * (50 / 767)); font-size: calc(100vw * (36 / 767)); }
    .video-desc li p span { width: calc(100% - calc(100vw * (210 / 767))); }
    .video-desc li a { margin-top: calc(100vw * (32 / 767)); padding-right: calc(100vw * (46 / 767)); font-size: calc(100vw * (32 / 767)); }
    .video-desc li a:after { width: calc(100vw * (34 / 767)); height: calc(100vw * (34 / 767)); }

    .view-slide { padding-bottom: calc(100vw * (240 / 767)); }
    .view-slide .sub-title { padding-top: calc(100vw * (606 / 767)); margin: 0 auto calc(100vw * (120 / 767)); }
    .view-slide .video-box { position: absolute; top:0; left: 0; height: calc(100vw * (542 / 767)); margin: 0 calc(100vw * (-40 / 767)) 0; }
    .view-slide .video-box a::before { width: calc(100vw * (100 / 767)); height: calc(100vw * (100 / 767)); }
    .view-slide .video-title { display: none; }
    .view-slide .video-slide-box { margin-bottom: calc(100vw * (120 / 767)); }
    .view-slide .video-slide { padding-bottom: calc(100vw * (58 / 767)); max-width: calc(100vw * (353 / 767)); }
    .view-slide .video-slide .swiper-slide>a { padding-right: calc(100vw * (20 / 767)); }
    .view-slide .video-slide .swiper-slide .img { height: calc(100vw * (210 / 767)); }
    .view-slide .video-slide .swiper-slide span { display: none; }
    
}