/* 공통 */
.sub-title span { display: block; margin-bottom: 20px; color: #E61E15; font-size: 16px; font-weight: 500; line-height: 1; }
.sub-title span::after { display: none; }
.sub-title h3 { margin-bottom: 48px; font-size: 48px; font-weight: 700; line-height: 1.32;  }
.sub-title p { font-size: 20px; font-weight: 400; line-height: 1.6; opacity: 0.8; }
@media (max-width: 1180px){
    .sub-title span { margin-bottom: calc(100vw * (20 / 1180)); font-size: calc(100vw * (16 / 1180)); }
    .sub-title h3 { margin-bottom: calc(100vw * (48 / 1180)); font-size: calc(100vw * (48 / 1180)); }
    .sub-title p { font-size: calc(100vw * (20 / 1180)); }
}
@media (max-width: 767px){
    .sub-title span { margin-bottom: calc(100vw * (20 / 767)); font-size: calc(100vw * (28 / 767)); }
    .sub-title h3 { margin-bottom: calc(100vw * (40 / 767)); font-size: calc(100vw * (48 / 767)); }
    .sub-title p { font-size: calc(100vw * (32 / 767)); }
}
/* type1 */
.dark { background-color: #1B1B1B; color:#fff; overflow: hidden; }
.games-visual { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.games-visual::after { content: ""; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width: 980px; height: 980px; border-radius: 980px; opacity: 0.9; background: radial-gradient(50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.00) 100%); }
.games-visual .container { height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; }
.games-visual .sub-visual-title { position: relative; z-index: 10; color:#fff; }
.games-visual .sub-visual-title h2 { margin-bottom: 28px; font-size: 80px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.games-visual .link-box { 
    width: 100%;
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; 
    display: flex; 
    flex-wrap: nowrap; 
    align-items: center; 
    justify-content: center; 
    color:#fff; 
}
.games-visual .link-box .link-inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; }
.games-visual .link-box .ic { display: none; }
.games-visual .link-box li { margin: auto 24px; }
.games-visual .link-box li a { display: block; padding: 20px 24px; font-size: 20px; font-weight: 600; line-height: 1; border:1px solid #fff; }
@media (min-width: 1181px){
    .games-visual .link-box li a:hover { background: rgba(0, 0, 0, 0.74); border-color:rgba(0, 0, 0, 0.74); }
}   

/* 링크버튼 4개 초과 */
.games-visual .link-box.on {  
    width: 220px;    
    display: block; 
    width: auto;     
    color: #fff;
} 
.games-visual .link-box.on .link-inner { position: relative; display: block; }
.games-visual .link-box.on .link-inner::after {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    content: "Related Links";  
    width: 100%;
    height: 62px;
    padding: 0 48px 0 24px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    border: 1px solid #FFF;
}
.games-visual .link-box.on .ic { display: block; position: absolute; width: 24px; height: 24px; bottom: 19px; right: 20px; }
.games-visual .link-box.on .ic span { position: relative; display: block; width: 100%; height: 100%; }
.games-visual .link-box.on .ic span::after {  
    content: ""; 
    width: 16px; 
    height: 2px; 
    background-color: #fff;     
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);     
}
.games-visual .link-box.on .ic span::before {  
    content: ""; 
    width: 2px; 
    height: 16px; 
    background-color: #fff;    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .2s; 
}
.games-visual .link-box.on li { opacity: 0; margin: 0; padding-bottom: 22px; background: #000; }
.games-visual .link-box.on li:first-child { padding-top: 30px; }
.games-visual .link-box.on li:last-child { margin-bottom: 10px; padding-bottom: 30px; }
.games-visual .link-box.on li a { padding: 0 24px; border:none; font-weight: 500; opacity: 0.4; text-align: left; line-height: 1.4; }
@media (min-width: 1181px){
    .games-visual .link-box.on:hover li { opacity: 1; }
    .games-visual .link-box.on:hover .link-inner::after { border-color: rgba(0, 0, 0, 0.74); background: rgba(0, 0, 0, 0.74); }
    .games-visual .link-box.on:hover .ic span::before { transform: translate(-50%, -50%) rotate(90deg); }
    .games-visual .link-box.on li a:hover { opacity: 1; }  
}
@media (max-width: 1180px){
    .games-visual .link-box.on.click li { opacity: 1; }
    .games-visual .link-box.on.click .link-inner::after { border-color: rgba(0, 0, 0, 0.74); background: rgba(0, 0, 0, 0.74); }
    .games-visual .link-box.on.click .ic span::before { transform: translate(-50%, -50%) rotate(90deg); }
    .games-visual .link-box.on li a { opacity: 1; }
}

.games-visual .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.games-visual .bg .img { width: 100%; height: 100%; }
.games-visual .bg .img img { width: 100%; height: 100%; object-fit: cover; }
.games-visual .bg .video { height: 100%; }
.games-visual .bg video { width: 100%; height: 100%; object-fit: cover; }
.games-visual .bg iframe { width: 100%; height: 100%; object-fit: cover; }

.type1-spec { margin: 160px 0 200px; }
.type1-spec ul { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0 48px; text-align: center; }
.type1-spec ul li span { font-size: 16px; font-weight: 500; line-height: 1; text-transform: uppercase; opacity: 0.8; }
.type1-spec ul li p { position: relative; margin-top: 19px; padding-bottom: 10px; font-size: 20px; font-weight: 700; line-height: 1; }
.type1-spec ul li p::after { content: ""; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; bottom: 0; }

.type-content { margin-bottom: 140px; }
.type-content ul.content>li { height: 880px; position: relative; display: flex; flex-wrap: nowrap; align-items: flex-start; overflow: hidden; }
.type-content ul.content>li:last-child { margin-bottom: 0; }
.type-content ul.content>li .txt-box { width: calc(420px + 180px); padding-right: 180px; }
.type-content ul.content>li.content-box1 { margin-bottom: 240px; }
.type-content ul.content>li.content-box2 { margin-bottom: 160px; }
.type-content ul.content>li.content-box2 .img-slide { right: auto; left: 0; }
.type1.type-content ul.content>li.content-box2 .txt-box { float: right; padding: 0 0 0 180px; }
.type-content ul.content>li.content-box2 .content-character { left: calc(50% + 208px); }
.type1.type-content ul.content>li.content-box2 .img-slide .btn-box { left: 0; right: auto; } 

.img-slide { width: 1180px; height: 667px; position: absolute; top:0; right:0; }
.img-slide .slide-box { width: 100%; height: 100%; overflow: hidden; } 
.img-slide .slide-box a { position: relative; display: block; width: 100%; height: 100%; cursor: pointer; }
.img-slide .slide-box a::before { content: ""; background: url(../images/play.svg)no-repeat; background-size: contain; width: 100px; height: 100px; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
.img-slide .btn-box { position: absolute; bottom: 0; right: 0; height: 56px; width: 112px; z-index: 1; display: flex; flex-wrap: nowrap; background: #1B1B1B; }
.img-slide .btn-box div { width: 50%; height: 56px; top: auto; bottom: 0; background: #1B1B1B; }
.img-slide .btn-box div::after { top:50%; left: 50%; transform: translate(-50%,-50%); width: 24px; height: 24px; }
.img-slide .btn-box .swiper-button-prev { left: 0; }
.img-slide .btn-box .swiper-button-next { right: 0; }
.img-slide .swiper-button-next.swiper-button-disabled, .img-slide .swiper-button-prev.swiper-button-disabled { opacity: 1; }
.img-slide .swiper-button-next.swiper-button-disabled::after, .img-slide .swiper-button-prev.swiper-button-disabled::after { opacity: 0.2; }
.img-slide .swiper-pagination { left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1; }
.img-slide .swiper-pagination-bullet { width: 24px; height: 24px; margin-right: -10px; background: transparent; position: relative; }
.img-slide .swiper-pagination-bullet::after { content: ""; background: url(../images/bar-pagination.svg)no-repeat; background-size: contain; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } 

.type-content .content-character { width: 620px; height: 620px; position: absolute; bottom: 0; left: calc(50% - 208px); transform: translateX(-50%); z-index: 1; text-align: center; }
.type-content .content-character img { max-height: 100%; }
.character-slide-wrap { position: relative; z-index: 1; padding-bottom: 240px; overflow: hidden; }
.character-slide-wrap .width { width: 100vw; overflow: hidden; }
.character-slide-wrap .character-slide { max-width: 1440px; padding-top: 160px; }
.character-slide-wrap .character-slide .swiper-slide { width: fit-content; }
.character-slide-wrap .character-slide .img { position: relative; z-index: 2; width: 720px; height: 720px; text-align: center; }
.character-slide-wrap .character-slide .img img { max-width: 100%; max-height: 100%; }
.character-slide-wrap .character-slide .character-name { 
    width: 724px;
    height: 54px; 
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    padding-right: 100px;
    color: #FFF;
    font-size: 28px;
    font-weight: 700;
    line-height: 1; 
    background: url(../images/character-name.png)no-repeat; 
    background-size: contain;
    position: relative;
    top: -62px;
    z-index: 1;
}
.character-slide-wrap .bg { position: absolute; top:0; left: 0; z-index: -1; }

.character-slide .btn-box {  
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}
.character-slide .btn-box div { width: 60px; height: 60px; }
.character-slide .btn-box div::after { background: url(../images/character-btn-ic.svg)no-repeat; background-size: contain; }
.character-slide .swiper-button-next.swiper-button-disabled, 
.character-slide.swiper-button-prev.swiper-button-disabled { opacity: .2; }
@media (min-width: 2000px){  
    .type-content .content-character { left: calc(50% + 100px); }
    .type-content ul.content>li.content-box2 .content-character { left: calc(50% - 100px); }
}
@media (max-width: 1700px){    
    .type-content ul.content>li { height: calc(100vw * (880 / 1700)); }
    .type-content ul.content>li .txt-box { width: calc(100vw * (600 / 1700)); padding-right: calc(100vw * (180 / 1700)); }
    .type-content ul.content>li.content-box1 { margin-bottom: calc(100vw * (240 / 1700)); }
    .type-content ul.content>li.content-box2 { margin-bottom: calc(100vw * (160 / 1700)); }
    .type1.type-content ul.content>li.content-box2 .txt-box { padding: 0 0 0 calc(100vw * (180 / 1700)); }
    .type-content ul.content>li.content-box2 .content-character { left: calc(50% + calc(100vw * (280 / 1700))); }

    .img-slide { width: calc(100vw * (1180 / 1700)); height: calc(100vw * (667 / 1700)); }
    .img-slide .slide-box a::before { width: calc(100vw * (100 / 1700)); height: calc(100vw * (100 / 1700)); }
    .img-slide .btn-box { height: calc(100vw * (56 / 1700)); width: calc(100vw * (112 / 1700)); }
    .img-slide .btn-box div { height: calc(100vw * (56 / 1700)); }
    .img-slide .btn-box div::after { width: calc(100vw * (24 / 1700)); height: calc(100vw * (24 / 1700)); }
    .img-slide .swiper-pagination { bottom: calc(100vw * (16 / 1700)); }
    .img-slide .swiper-pagination-bullet { width: calc(100vw * (24 / 1700)); height: calc(100vw * (24 / 1700)); margin-right: calc(100vw * (-10 / 1700)); }
    .type-content .content-character {  width: calc(100vw * (620 / 1700)); height:  calc(100vw * (620 / 1700)); left: calc(50% - calc(100vw * (208 / 1700))); }

}
@media (max-width: 1180px){
    .games-visual::after { width: calc(100vw * (980 / 1180)); height: calc(100vw * (980 / 1180)); border-radius: calc(100vw * (980 / 1180)); }
    .games-visual .sub-visual-title h2 { margin-bottom: calc(100vw * (14 / 1180)); font-size: calc(100vw * (80 / 1180)); }
    .games-visual .link-box { bottom: calc(100vw * (56 / 1180)); }
    .games-visual .link-box li { margin: auto calc(100vw * (24 / 1180)); }
    .games-visual .link-box li a { padding: calc(100vw * (20 / 1180)) calc(100vw * (24 / 1180)); font-size: calc(100vw * (20 / 1180)); }

    /* 링크버튼 4개 초과 */
    /* .games-visual .link-box.on { width: calc(100vw * (220 / 1180)); }  */
    .games-visual .link-box.on .link-inner::after { 
        height: calc(100vw * (60 / 1180));
        padding: 0 calc(100vw * (48 / 1180)) 0 calc(100vw * (24 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }
    .games-visual .link-box.on .ic { width: calc(100vw * (24 / 1180)); height: calc(100vw * (24 / 1180)); bottom: calc(100vw * (19 / 1180)); right: calc(100vw * (20 / 1180)); }
    .games-visual .link-box.on .ic span::after { width: calc(100vw * (16 / 1180)); height: calc(100vw * (2 / 1180)); }
    .games-visual .link-box.on .ic span::before { width: calc(100vw * (2 / 1180)); height: calc(100vw * (16 / 1180)); }
    .games-visual .link-box.on li { padding-bottom: calc(100vw * (22 / 1180)); }
    .games-visual .link-box.on li:first-child { padding-top: calc(100vw * (30 / 1180)); }
    .games-visual .link-box.on li:last-child { margin-bottom: calc(100vw * (10 / 1180)); padding-bottom: calc(100vw * (30 / 1180)); }
    .games-visual .link-box.on li a { padding: 0 calc(100vw * (24 / 1180)); }

    .type1-spec { margin: calc(100vw * (160 / 1180)) 0 calc(100vw * (200 / 1180)); }
    .type1-spec ul { gap: 0 calc(100vw * (48 / 1180)); }
    .type1-spec ul li span { font-size: calc(100vw * (16 / 1180)); }
    .type1-spec ul li p { margin-top: calc(100vw * (19 / 1180)); padding-bottom: calc(100vw * (10 / 1180)); font-size: calc(100vw * (20 / 1180)); }

    .type-content { margin-bottom: calc(100vw * (140 / 1180)); }
    .type-content ul.content>li { height: calc(100vw * (620 / 1180)); }
    .type-content ul.content>li .txt-box { width: calc(calc(100vw * (420 / 1180)) + calc(100vw * (110 / 1180))); padding-right: calc(100vw * (110 / 1180)); }
    .type-content ul.content>li.content-box1 { margin-bottom: calc(100vw * (200 / 1180)); }
    .type-content ul.content>li.content-box2 { margin-bottom: calc(100vw * (200 / 1180)); }
    .type1.type-content ul.content>li.content-box2 .txt-box { padding: 0 0 0 calc(100vw * (110 / 1180)); }
    .type-content ul.content>li.content-box2 .content-character { left: calc(50% - calc(100vw * (55 / 1180))); }

    .img-slide { width: calc(100vw * (600 / 1180)); height: calc(100vw * (340 / 1180)); }
    .img-slide .slide-box a::before { width:  calc(100vw * (60 / 1180)); height: calc(100vw * (60 / 1180)); }
    .img-slide .btn-box { height: calc(100vw * (56 / 1180)); width: calc(100vw * (112 / 1180)); }
    .img-slide .btn-box div { height: calc(100vw * (56 / 1180)); }
    .img-slide .btn-box div::after { width: calc(100vw * (24 / 1180)); height: calc(100vw * (24 / 1180)); }

    .img-slide .swiper-pagination-bullet { width: calc(100vw * (24 / 1180)); height: calc(100vw * (24 / 1180)); margin-right: calc(100vw * (-10 / 1180)); }
    .type-content .content-character { width: calc(100vw * (420 / 1180)); height: calc(100vw * (420 / 1180)); left: calc(50% + calc(100vw * (55 / 1180))); }
    .character-slide-wrap { padding-bottom: calc(100vw * (240 / 1180)); } 
    .character-slide-wrap .character-slide { max-width: calc(100vw * (1008 / 1180)); padding-top: calc(100vw * (140 / 1180)); }
    .character-slide-wrap .character-slide .img { width: calc(100vw * (504 / 1180)); height: calc(100vw * (504 / 1180)); }
    .character-slide-wrap .character-slide .character-name { top: calc(100vw * (-44 / 1180)); width: calc(100vw * (504 / 1180)); height: calc(100vw * (38 / 1180)); padding-right: calc(100vw * (72 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .character-slide .btn-box div { width: calc(100vw * (60 / 1180)); height: calc(100vw * (60 / 1180)); }
}
@media (max-width: 767px){
    .games-visual::after { width: calc(100vw * (542 / 767)); height: calc(100vw * (542 / 1180)); border-radius: calc(100vw * (542 / 767)); }
    .games-visual .sub-visual-title h2 { margin-bottom: calc(100vw * (48 / 767)); font-size: calc(100vw * (56 / 767)); }
    .games-visual .link-box { bottom: calc(100vw * (48 / 750)); }
    .games-visual .link-box li { margin: auto calc(100vw * (24 / 767)); }
    .games-visual .link-box li a { padding: calc(100vw * (20 / 767)) calc(100vw * (24 / 767)); font-size: calc(100vw * (20 / 767)); }

    /* 링크버튼 4개 초과 */
    .games-visual .link-box.on { width: calc(100vw * (385 / 767)); } 
    .games-visual .link-box.on .link-inner::after { 
        height: calc(100vw * (96 / 767));
        padding: 0 calc(100vw * (72 / 767)) 0 calc(100vw * (40 / 767));
        font-size: calc(100vw * (32 / 767));
    }
    .games-visual .link-box.on .ic { width: calc(100vw * (32 / 767)); height: calc(100vw * (34 / 767)); bottom: calc(100vw * (31 / 767)); right: calc(100vw * (20 / 767)); }
    .games-visual .link-box.on .ic span::after { width: calc(100vw * (22 / 767)); height: 2px; }
    .games-visual .link-box.on .ic span::before { width: 2px; height: calc(100vw * (22 / 767)); }
    .games-visual .link-box.on li { padding: calc(100vw * (25 / 767)) calc(100vw * (40 / 767)); }
    .games-visual .link-box.on li:first-child { padding-top: calc(100vw * (55 / 767)); }
    .games-visual .link-box.on li:last-child { margin-bottom: calc(100vw * (20 / 767)); padding-bottom: calc(100vw * (55 / 767)); }
    .games-visual .link-box.on li a { padding: 0; font-size: calc(100vw * (32 / 767)); }

    .type1-spec { margin: calc(100vw * (180 / 767)) 0; }
    .type1-spec ul { flex-wrap: wrap; gap: calc(100vw * (72 / 767)) 0; }
    .type1-spec ul li { width: 100%; } 
    .type1-spec ul li span { display: block; width: 100%; font-size: calc(100vw * (24 / 767)); }
    .type1-spec ul li p { display: inline-block; margin-top: calc(100vw * (19 / 767)); padding-bottom: calc(100vw * (10 / 767)); font-size: calc(100vw * (32 / 767)); }

    .type-content { margin-bottom: calc(100vw * (280 / 767)); }
    .type-content ul.content>li { display: block; height: auto; }
    .type-content ul.content>li .txt-box { width: 100%; padding-right: 0; }
    .type-content ul.content>li.content-box1 { margin-bottom: calc(100vw * (200 / 767)); }
    .type-content ul.content>li.content-box2 { margin-bottom: calc(100vw * (200 / 767)); }
    .type1.type-content ul.content>li.content-box2 .txt-box { padding: 0; }
    .type-content ul.content>li.content-box2 .content-character { display: none; }

    .type-content ul.content>li .sub-title h3 { margin-bottom: calc(100vw * (115 / 767)); padding-bottom: calc(100vw * (483 / 767)); }
    .img-slide { padding: 0 calc(100vw * (40 / 767)); top: calc(100vw * (130 / 767)); width: 100%; height: calc(100vw * (483 / 767)); }
    .img-slide .swiper-slide .img { width: calc(100vw * (670 / 767)); height: calc(100vw * (483 / 767)); }
    .img-slide .swiper-slide .img img { width: 100%; height: 100%; object-fit: cover; }
    .img-slide .slide-box { overflow: visible; }
    .img-slide .slide-box a::before { width: calc(100vw * (100 / 767)); height: calc(100vw * (100 / 767)); }
    .img-slide .btn-box { display: none; }
    .img-slide .swiper-pagination { bottom: calc(100vw * (-52 / 767)); }
    .img-slide .swiper-pagination-bullet { width: calc(100vw * (24 / 767)); height: calc(100vw * (24 / 767)); margin-right: calc(100vw * (-10 / 767)); }
    .type-content .content-character { display: none; }
    .character-slide-wrap { padding-bottom: calc(100vw * (280 / 767)); } 
    .character-slide-wrap .character-slide { max-width: calc(100vw * (504 / 767)); padding-top: calc(100vw * (90 / 767)); }
    .character-slide-wrap .character-slide .img { width: calc(100vw * (504 / 767)); height: calc(100vw * (504 / 767)); }
    .character-slide-wrap .character-slide .character-name { top: calc(100vw * (-43 / 767)); width: calc(100vw * (504 / 767)); height: calc(100vw * (46 / 767)); padding-right: calc(100vw * (70 / 767)); font-size: calc(100vw * (28 / 767)); background: url(../images/character-name-m.png)no-repeat; background-size: contain; }
    .character-slide .btn-box div { width: calc(100vw * (64 / 767)); height: calc(100vw * (64 / 767)); }
    .character-slide .btn-box div::after { background: url(../images/character-btn-ic-m.svg)no-repeat; background-size: contain; }
}

/* type2 */
.type2 { background-color: #1B1B1B; color:#fff; overflow: hidden; }
.type2 section:last-child { padding-bottom: 0; }
.type2.type-content ul.content>li { height: 540px; margin-bottom: 180px; }
.type2.type-content .img-slide { width: 960px; height: 100%; position: relative; }

.type2.type-content ul.content>li .txt-box { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; width: 680px; padding: 0 90px; height: 100%; }
.type2.type-content ul.content>li.content-box2 { flex-direction: row-reverse; }

.sub section.slide-tab-wrap { position: relative; z-index: 1; padding-bottom: 0; }
.slide-tab-wrap .silde-tab { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; background: rgba(0, 0, 0, 0.60); backdrop-filter: blur(2px); }
.slide-tab-wrap .silde-tab h2 { position: relative; color: #FFF; text-align: center; font-size: 18px; font-weight: 700; line-height: 1; text-transform: uppercase; opacity: 0.4; text-align: center; }
.slide-tab-wrap .silde-tab h2.on { opacity: 1; }
.slide-tab-wrap .silde-tab h2::after { content: ""; background: #E61E15; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; opacity: 0; }
.slide-tab-wrap .silde-tab h2.on::after { opacity: 1; }
.slide-tab-wrap .silde-tab h2 span { display: inline-block; position: relative; padding-left: 30px; }
.slide-tab-wrap .silde-tab h2 span::before { content: ""; width: 24px; height: 24px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-size: contain; }
.slide-tab-wrap .silde-tab h2:nth-child(1) span:before { background: url(../images/silde-tab-ic1.svg)no-repeat; background-size: contain; }
.slide-tab-wrap .silde-tab h2:nth-child(2) span:before { background: url(../images/silde-tab-ic2.svg)no-repeat; background-size: contain; }
.slide-tab-wrap .silde-tab h2 a { display: block; width: 400px; padding: 27px 0; }

.slide-tab-wrap .swiper-button-next, .slide-tab-wrap .swiper-button-prev { width: 56px; height: 56px; }
.slide-tab-wrap .swiper-button-next::after, .slide-tab-wrap .swiper-button-prev::after { background: url(../images/silde-tab-next.svg)no-repeat; background-size: contain; }

.slide-tab-wrap .content-box { position: relative; width: 100%; height: 100vh; z-index: 1; }
.slide-tab-wrap .content-box::before { 
    content: "";     
    position: absolute;
    left: 0;
    top: 0; 
    width: 138px; 
    height: 100%;
    opacity: 0.9;
    background: url(../images/slide-dimmed.png)no-repeat;
    background-size: cover;
    z-index: 2;
    transform: rotate(-180deg);
}
.slide-tab-wrap .content-box::after { 
    content: "";     
    position: absolute;
    right: 0;
    top: 0; 
    width: 138px; 
    height: 100%; 
    opacity: 0.9; 
    background: url(../images/slide-dimmed.png)no-repeat;    
    background-size: cover;
    z-index: 2;;
}
.slide-tab-wrap .content-box>li { height: 100%; }
.slide-tab-wrap .content-box>li>div { height: 100%; overflow: hidden; }
.slide-tab-wrap .content-box>li>div .btn-wrap { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 56px; 
}
.slide-tab-wrap .content-box>li img { width: 100%; height: 100%; object-fit: cover; }
.tab-cont { display: none; }
.tab-cont.show { display: block; }
@media (max-width: 1700px){
    .type2.type-content ul.content>li { height: auto; }
    .type2.type-content .img-slide { width: calc(100vw * (960 / 1700)); }
    .type2.type-content ul.content>li .txt-box { width: calc(100vw * (680 / 1700)); padding: 0 calc(100vw * (90 / 1700)); }

}
@media (max-width: 1180px){
    .type2.type-content ul.content>li { display: block; height: auto; margin-bottom: calc(100vw * (212 / 1180)); }
    .type2.type-content ul.content>li:last-child { margin-bottom: calc(100vw * (20 / 1180)); }
    .type2.type-content .img-slide { width: 100%; height: calc(100vw * (608 / 1180)); }
    .type2.type-content ul.content>li .txt-box { display: block; width: 100%; padding: calc(100vw * (70 / 1180)) 0 0; }
    .slide-tab-wrap .silde-tab h2 { font-size: calc(100vw * (18 / 1180)); }
    .slide-tab-wrap .silde-tab h2::after { height: 2px; }
    .slide-tab-wrap .silde-tab h2 span { padding-left: calc(100vw * (30 / 1180)); }
    .slide-tab-wrap .silde-tab h2 span::before { width: calc(100vw * (24 / 1180)); height: calc(100vw * (24 / 1180)); }
    .slide-tab-wrap .silde-tab h2 a { width: calc(100vw * (400 / 1180)); padding: calc(100vw * (28 / 1180)) 0; }
    .slide-tab-wrap .swiper-button-next, .slide-tab-wrap .swiper-button-prev { width: calc(100vw * (56 / 1180)); height: calc(100vw * (56 / 1180)); }
    .slide-tab-wrap .content-box { height: calc(100vw * (602 / 1180)); }  
    .slide-tab-wrap .content-box::before { width: calc(100vw * (138 / 1180)); }
    .slide-tab-wrap .content-box::after { width: calc(100vw * (138 / 1180)); }
    .slide-tab-wrap .content-box>li>div .btn-wrap  { padding: calc(100vw * (30 / 1180)); }
}
@media (min-width: 768px){
    .type2.type-content .img-slide { 
        -webkit-clip-path: polygon(35% 0, 65% 0, 65% 100%, 35% 100%);
        clip-path: polygon(35% 0, 65% 0, 65% 100%, 35% 100%);
        transition: all .7s cubic-bezier(0.42, 0, 0.58, 1); 
    }
    .type2.type-content .aos-animate .img-slide {     
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 
    }
}
@media (max-width: 767px){
    .type2.type-content ul.content>li { margin-bottom: calc(100vw * (200 / 767)); overflow: visible; }
    .type2.type-content .img-slide .slide-box { height: 100%; }
    .type2.type-content .img-slide { position: relative; top:0; width:100vw; margin: 0 calc(100vw * (-40 / 767)); padding: 0 calc(100vw * (40 / 767)); overflow: visible; height: calc(100vw * (535 / 767)); padding-bottom: calc(100vw * (52 / 767)); }
    .type2.type-content .aos-init { opacity: 1!important; transform: translateZ(0)!important; }
    .type2.type-content .img-slide .swiper-slide .img { width: 100%; height: 100%; padding-right: calc(100vw * (20 / 767)); }
    .type2.type-content ul.content>li .txt-box { display: block; width: 100%; padding: calc(100vw * (92 / 767)) 0 0; }
    .type2.type-content .img-slide .swiper-pagination { bottom: 0; } 
    .type2.type-content ul.content>li .sub-title h3 { padding-bottom: calc(100vw * (48 / 767)); margin-bottom: 0; }
    .slide-tab-wrap .silde-tab h2 { width: 50%; font-size: calc(100vw * (32 / 767)); }
    .slide-tab-wrap .silde-tab h2::after { height: 1px; }
    .slide-tab-wrap .silde-tab h2 span { padding-left: 0; }
    .slide-tab-wrap .silde-tab h2 span::before { display: none; }
    .slide-tab-wrap .silde-tab h2 a { width: 100%; padding: calc(100vw * (32 / 767)) 0; }
    .slide-tab-wrap .swiper-button-next, .slide-tab-wrap .swiper-button-prev { width: calc(100vw * (56 / 767)); height: calc(100vw * (56 / 767)); }
    .slide-tab-wrap .content-box { height: calc(100vw * (542 / 767)); }  
    .slide-tab-wrap .content-box::before { width: calc(100vw * (140 / 767)); }
    .slide-tab-wrap .content-box::after { width: calc(100vw * (140 / 767)); }
    .slide-tab-wrap .content-box>li>div .btn-wrap { height: calc(100% - calc(100vw * (96 / 767))); top: calc(100vw * (96 / 767)); padding: calc(100vw * (26 / 767)); }
}

/* type3 */
.video-slide-wrap { padding-bottom: 200px; }
.sub .video-slide-wrap:last-of-type { padding-bottom: 0; }
.light { overflow: hidden; }
.light .type1-spec ul li p::after { background: #191919; }
.video-slide-wrap .sub-title { max-width: 800px; margin: 0 auto 72px; text-align: center; }
.video-slide-wrap .video-box { position: relative; height: 928px; margin-bottom: 88px; }
.video-slide-wrap .video-box a { position: relative; display: block; height: 100%; cursor: pointer; }
.video-slide-wrap .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; }
.video-slide-wrap .video-box .img { height: 100%; }
.video-slide-wrap .video-box video, .video-slide-wrap .video-box img { width: 100%; height: 100%; object-fit: cover; }
.video-slide-wrap .video-title { color: #191919; font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 24px; }
.video-slide-wrap .video-slide { position: relative; width: 100%; max-width: 1680px; padding-bottom: 50px; }
.video-slide-wrap .video-slide .swiper-slide>a { display: block; padding-right: 40px; cursor: pointer; }
.video-slide-wrap .video-slide .swiper-slide .img { width: 100%; height: 423px; }
.video-slide-wrap .video-slide .swiper-slide .img img { width: 100%; height: 100%; object-fit: cover; }
.video-slide-wrap .video-slide .swiper-slide span { display: block; margin-top: 16px; color: #333; font-size: 24px; font-weight: 400; line-height: 1; }
.video-slide-wrap .video-slide-box { position: relative; width: 100vw; margin-bottom: 180px; overflow: hidden; }
.video-slide-wrap .video-slide-box .swiper-scrollbar { max-width: 1640px; width: 100%; height: 2px; opacity: 1!important; z-index: 5; background: rgba(199, 199, 199, 1); }
.video-slide-wrap .video-slide-box .swiper-scrollbar-drag { background: #191919; border-radius: 0; }

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

.diagonal { position: relative; display: flex; flex-wrap: nowrap; align-items: center; height: 440px; overflow: hidden; }
.diagonal li { width: 56%; height: 100%; position: absolute; top: 0; }
.diagonal li:nth-child(1) { left: 0; -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%); z-index: 1; }
.diagonal li:nth-child(2) { right: 0; }
.diagonal li img { width: 100%;height: 100%; object-fit: cover; }
@media (max-width: 1700px){
    .video-slide-wrap .video-slide { max-width: calc(100vw * (1680 / 1700)); }
    .video-slide-wrap .video-slide .swiper-slide>a { padding-right: calc(100vw * (40 / 1700)); }
    .video-slide-wrap .video-slide-box .swiper-pagination-progressbar { max-width: calc(100vw * (1640 / 1700));  }
}
@media (max-width: 1180px){
    .video-slide-wrap { padding-bottom: calc(100vw * (200 / 1180)); }
    .video-slide-wrap .sub-title { max-width: 800px; margin: 0 auto calc(100vw * (72 / 1180)); }
    .video-slide-wrap .video-box { height: calc(100vw * (611 / 1180)); margin-bottom: calc(100vw * (144 / 1180)); }
    .video-slide-wrap .video-box a::before { width: calc(100vw * (100 / 1180)); height: calc(100vw * (100 / 1180)); }
    .video-slide-wrap .video-title { font-size: calc(100vw * (32 / 1180)); margin-bottom: calc(100vw * (24 / 1180)); }
    .video-slide-wrap .video-slide-box { margin-bottom: calc(100vw * (140 / 1180)); }
    .video-slide-wrap .video-slide { padding-bottom: calc(100vw * (50 / 1180)); max-width: calc(100vw * (1100 / 1180)); }
    .video-slide-wrap .video-slide .swiper-slide>a { padding-right: calc(100vw * (20 / 1180)); }
    .video-slide-wrap .video-slide .swiper-slide .img { height: calc(100vw * (280 / 1180)); }
    .video-slide-wrap .video-slide .swiper-slide span { margin-top: calc(100vw * (18 / 1180)); font-size: calc(100vw * (24 / 1180)); }
    .video-slide-wrap .video-slide-box .swiper-scrollbar { width: calc(100% - calc(100vw * (100 / 1180))); height: 2px; }
    .video-slide-wrap .video-slide-box .swiper-pagination-progressbar  { width: calc(100% - calc(100vw * (100 / 1180))); height: 2px; }
    .diagonal { height: calc(100vw * (280 / 1180)); }    
}
@media (max-width: 767px){
    .video-slide-wrap { padding-bottom: calc(100vw * (240 / 767)); }
    .video-slide-wrap .sub-title { padding-top: calc(100vw * (606 / 767)); margin: 0 auto calc(100vw * (120 / 767)); }
    .video-slide-wrap .video-box { position: absolute; top:0; left: 0; height: calc(100vw * (542 / 767)); margin: 0 calc(100vw * (-40 / 767)) 0; }
    .video-slide-wrap .video-box a::before { width: calc(100vw * (100 / 767)); height: calc(100vw * (100 / 767)); }
    .video-slide-wrap .video-title { display: none; }
    .video-slide-wrap .video-slide-box { margin-bottom: calc(100vw * (120 / 767)); }
    .video-slide-wrap .video-slide { padding-bottom: calc(100vw * (58 / 767)); max-width: calc(100vw * (644 / 767)); }
    .video-slide-wrap .video-slide .swiper-slide>a { padding-right: calc(100vw * (30 / 767)); }
    .video-slide-wrap .video-slide .swiper-slide .img { height: calc(100vw * (210 / 767)); }
    .video-slide-wrap .video-slide .swiper-slide span { display: none; }
    .video-slide-wrap .video-slide-box .swiper-scrollbar { width: calc(100% - calc(100vw * (80 / 767))); height: 2px; }
    .video-slide-wrap .video-slide-box .swiper-pagination-progressbar { width: calc(100% - calc(100vw * (80 / 767))); height: 2px; }
    .diagonal { height: calc(100vw * (220 / 767)); }
    .diagonal li { width: 60%; }
}