@charset "UTF-8";
/* ====================== cast ====================== */
#cast.full3{ background:#111; width: inherit; height: inherit; position: relative; transition: all 0.3s linear; }

/* ---------------- cast landing ---------------- */

#cast.full3 .landing{ position: absolute; top: 0; left: 0; width: inherit; height: inherit; z-index: 98; background: url(../img/cast/landing/landing_bg.jpg) center 50% no-repeat; background-size: cover; }
#cast.full3 .landing .mask_con { position: absolute; bottom: 54%; left: calc(50% - 114px); width: 238px; z-index: 1; }
#cast.full3 .landing .mask_con .mask { width: 100%; cursor: pointer; }

#cast.full3 .landing .icon_con { position: absolute; top: calc(50% - 40px); left: calc(50% - 56px); display: inline-flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100px; z-index: 2; opacity: 0.9; }
#cast.full3 .landing .icon_con .mouse { width: 40%; margin-bottom: 20px; z-index: inherit; }
#cast.full3 .landing .icon_con h3 { text-align: center; font-size: 12px; z-index: inherit; }
#cast.full3 .width_con { background: transparent; }

/* ---------------- cast bg ---------------- */
#cast.full3 .bg_typo { width: inherit; height: inherit; position: relative; z-index: 1; }
#cast.full3 .bg_typo ul { width: 1400px; height: 394px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: space-between; z-index: 10; }
#cast.full3 .bg_typo ul li { font-family: 'Anton', sans-serif; font-size: 400px; text-transform: uppercase; margin-bottom: -8px; }
#cast.full3 .bg_typo ul li span { color: transparent; -webkit-text-stroke: 2px #eee; opacity: 0.5; }
#cast.full3 .bg_typo ul:first-child li{ margin-left: -13px; }
#cast.full3 .bg_typo ul:last-child li { margin-right: -4px; }
#cast.full3 .bg_typo ul li:nth-child(3) { padding-right: 15px !important; } 

#cast.full3 .glitch_con .glitch-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; transition: opacity 0.5s linear; }
#cast.full3.show_detail .glitch_con .glitch-img { opacity: 0.4; }

/* ---------------- cast main ---------------- */
#cast.full3 .main_con { position: relative; display:inline-block; *display:inline; *zoom:1; margin: 0 -15px; width: inherit; height: inherit; transition: all 750ms ease-in-out; z-index: 2; }

#cast.full3 .main_con .boxes { position: absolute; top: calc(50% - 24px); left: calc(50% + 40px);transform: translate(-50%, -50%); width: 1200px; height: 648px; z-index: 2; }
#cast.full3 .main_con .boxes .box { position: relative; bottom: 0; left: 50%; width: 346px !important; height: 596px; margin: 48px 25px 0; border: 2px solid #cc0018; transition: inherit; }

#cast.full3 .main_con .boxes .box img{ position: absolute; left: 0; bottom: 0; width: 100%; margin: 0 auto; }
#cast.full3 .main_con .boxes .box img.men{ transition: all 0.15s ease-out; bottom: 0; transform: scale(0.9995); margin-bottom: -2px; }

/* ---------------- cast main - box stroke ---------------- */
#cast.full3 .main_con #cast_list.boxes .box:before, 
#cast.full3 .main_con #cast_list.boxes .box:after { content:''; position: absolute; left: 0; width: 348px; z-index: 999; }
/* 위 테두리 */
#cast.full3 .main_con #cast_list.boxes .box:before{ top: -52px; height: 50px; border-bottom: 2px solid #cc0018; background: #000; }
/* 밑 테두리 */
#cast.full3 .main_con #cast_list.boxes .box:after { bottom: -2px; height: 0; border-top: 2px solid #cc0018; }

#cast.full3 .main_con #cast_list.boxes .box .brdr1:after,
#cast.full3 .main_con #cast_list.boxes .box .brdr2:before{ content:''; height: 597px; width: 0; position: absolute; bottom: 0; border-left: 2px solid #cc0018; z-index: 999; }
/* 좌 테두리 */
#cast.full3 .main_con #cast_list.boxes .box .brdr1:after{ left: -2px; }
/* 우 테두리 */
#cast.full3 .main_con #cast_list.boxes .box .brdr2:before{ right:-2px; }


#cast.full3 .main_con #cast_list.boxes .box:hover { cursor: pointer; }
#cast.full3 .main_con #cast_list.boxes .box:hover:before{ transition: all 0.3s linear; background: transparent; border: none; cursor: pointer; overflow-y: visible; }

/* ---------------- cast main - person effect ---------------- */
#cast.full3 .main_con .boxes .box img.men{ z-index: 3; transition: all 0.3s linear 0.15s; }
#cast.full3 .main_con .boxes .box:hover img.men{ transform: scale(1.005); } 

#cast.full3 .main_con .boxes .box img.bg { z-index: 2; height: 100%; }

/* ---------------- cast main - text ---------------- */
#cast.full3 .main_con #cast_list.boxes .box .title_con { display: none; }
#cast.full3 .main_con #cast_list.boxes .box .title_con > * { transition: all 0.3s linear; }
#cast.full3 .main_con #cast_list.boxes .box span{ z-index: 3; width: 100%; position: absolute; bottom: 0; left: 0; margin-bottom: 25px; color: #eee; font-family: "Anton", sans-serif; font-size: 18px; text-align: center; text-transform: uppercase; }

/* ---------------- cast main - dots to slider style ---------------- */
#cast.full3 .slick-dots { bottom: -50px; margin-left: -25px; opacity: 1; }
#cast.full3 .slick-dots li { width: 50px; margin: 0; }
#cast.full3 .slick-dots li.slick-active button:before
{ background: red !important; }
#cast.full3 .slick-dots li button { width: 50px; height: 20px; transition: all 0.15s linear; }
#cast.full3 .slick-dots li button:before
{ content: ''; line-height: 3px; position: absolute; top: 10px; left: 0; width: 100%; height: 3px; opacity: 1; background: #555; border-radius: 0px; transition: inherit; margin-top: -1.5px; }
#cast.full3 .slick-dots li button:hover, .slick-dots li button:focus {}
#cast.full3 .slick-dots li button:hover:before, .slick-dots li button:focus:before { background: #999 !important; }

/* ---------------- cast main - slick arrow ---------------- */
#cast.full3 .slick-arrow { top: 100%; margin-top: 36px; } /* ******************** */
#cast.full3 .slick-arrow.slick-prev { left: 70%; } 
#cast.full3 .slick-arrow.slick-next { right: calc(70% + 40px); }
#cast.full3 .slick-arrow:before { color: #999; }

#cast.full3 .slick-dots,
#cast.full3 .slick-arrow { opacity: 1; transition: all 0.3s linear; }

#cast.full3.show_detail .slick-dots,
#cast.full3.show_detail .slick-arrow { opacity: 0 !important; }

#cast.full3.show_detail .main_con {}
#cast.full3.show_detail .main_con #cast_detail.boxes { opacity: 1; pointer-events: all; transition: opacity 0.3s linear; border-radius: 10px; } 
#cast.full3.show_detail .main_con #cast_detail.boxes:before{ content: ''; background-image: url(../img/cast/bg_paper_detail.jpg); -webkit-text-fill-color: transparent; background-size: cover; opacity: 0.4; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
#cast.full3.show_detail .main_con #cast_detail.boxes:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 20px); height: calc(100% - 20px); box-shadow: 0 0 2px 2px #eee; border-radius: 5px; mix-blend-mode: overlay; pointer-events: none; }

#cast.full3.show_detail .main_con #cast_detail.boxes .box { margin: 0 0 0 -60px; width: 450px !important; height: calc(100% - 3px); }

#cast.full3.show_detail .main_con #cast_detail.boxes .box .box_bg{ position: relative; width: 100%; height: 100%; overflow: hidden; }

#cast.full3.show_detail .main_con #cast_detail.boxes .box .box_bg img.bg{ bottom: auto; top: 0; height: auto; }

#cast.full3.show_detail .main_con #cast_detail.boxes img.men{ margin-bottom: -155px; clip-path: path('M 0 700 L 0,41 A 20,5 -3,0,1 453,200 L 700 700 z'); pointer-events: none; transform: none; transition: none; }

#cast.full3.show_detail .main_con #cast_detail.boxes .title_con.detail { display: block !important; margin-right: 60px; width: 40%; height: fit-content; }
#cast.full3.show_detail .main_con #cast_detail.boxes .title_con.detail h2{ margin-bottom: 15px; font-size: 100px; }
#cast.full3.show_detail .main_con #cast_detail.boxes .title_con.detail h3{ margin-bottom: 60px; }
#cast.full3.show_detail .main_con #cast_detail.boxes .title_con.detail h4{ font-size: 16px; }
#cast.full3.show_detail .main_con #cast_detail.boxes .title_con.detail h4 span{ margin-top: 5px; margin-left: 1em; color: #ccc; }
/* ---------------- cast close btn (인물 상세) ---------------- */
#cast.full3 .main_con #cast_detail.boxes .close_btn { position: absolute; top: 0; right: 0; margin: 20px; }
#cast.full3 .main_con #cast_detail.boxes .close_btn i{ font-size: 20px; color: #eee; cursor: pointer; transition: all 0.15s linear; }
#cast.full3 .main_con #cast_detail.boxes .close_btn i:hover { color: #ccc; }
/* $%%%%%%% */

/* ---------------- cast cast_detail (인물 상세) ---------------- */
#cast.full3 .main_con #cast_detail.boxes { display: inline-flex; flex-direction: row; opacity: 0; transition: all 0.3s linear 0.25s; pointer-events: none; padding: 50px 0; justify-content: space-between; align-items: center; background: #111;box-shadow: 0 0 14px #222; z-index: 3; }

/* ---------------- cast animation bg ---------------- */
.slide-tb { 
    -webkit-animation: slide-tb 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
            animation: slide-tb 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
}
@-webkit-keyframes slide-tb { 
    0% { 
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    100% { 
        -webkit-transform: translateY(-7px);
                transform: translateY(-7px);
    }
}
@keyframes slide-tb { 
    0% { 
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    100% { 
        -webkit-transform: translateY(-7px);
                transform: translateY(-7px);
                
    }
}

.done { 
	-webkit-animation: puff-out-center 1s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	        animation: puff-out-center 1s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
@-webkit-keyframes puff-out-center { 
    0% { 
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 1;
        visibility: visible;
    }
    100% { 
        -webkit-transform: scale(2);
                transform: scale(2);
        -webkit-filter: blur(4px);
                filter: blur(4px);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes puff-out-center { 
    0% { 
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 1;
        visibility: visible;
    }
    100% { 
        -webkit-transform: scale(2);
                transform: scale(2);
        -webkit-filter: blur(4px);
                filter: blur(4px);
        opacity: 0;
        visibility: hidden;
    }
} 


.slide-left { 
        -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
@-webkit-keyframes slide-left { 
    0% { 
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% { 
        -webkit-transform: translateX(-468px);
                transform: translateX(-468px);
    }
}
@keyframes slide-left { 
    0% { 
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% { 
        -webkit-transform: translateX(-468px);
                transform: translateX(-468px);
    }
}

/* ==================== cast done ==================== */