/* A A A : A : A : A : */ #link_Slider { width : 100%; height : auto; aspect-ratio : 1920 / 830; position : relative; font-size : min(1.6vw,23px); font-family : "nanum"; min-height : 600px; cursor : ew-resize; } #link_Slider .link { width : 100%; height : 100%;} #link_Slider img { width : 100%; height : 100%; object-fit : cover; z-index : 1;} #link_Slider .textWrap { width : 100%; height : 100%; display : flex; justify-content : center; align-items : center; position : absolute; top : 0; left : 0; z-index : 2; flex-direction : column; gap : 1.2em; padding-top : 80px;} #link_Slider .textWrap p { line-height : 1em; display : flex; align-items : center; justify-content : center; color : #fff; flex-wrap : wrap; filter : drop-shadow(2px 2px 2px #000000b3);} #link_Slider .textWrap p span { line-height : inherit;} #link_Slider .textWrap p.bigTit { font-size : 2.15em; font-weight : 800; } #link_Slider .swiper-slide-active .textWrap p.bigTit { -webkit-animation: focus-in-expand-fwd 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: focus-in-expand-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } #link_Slider .textWrap p.bigTit .yellow { color : #fff000;} #link_Slider .textWrap p.bigTit .yellow .dot { position : relative;} #link_Slider .textWrap p.bigTit .yellow .dot::after { content : ""; width : max(3px,0.16em); height : max(3px,0.16em); background : #fff000; border-radius : 50%; display : block; position : absolute; top : -20%; left : 50%; transform : translateX(-50%);} #link_Slider .swiper-slide-active .textWrap p.smallTit { -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both; animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both; } #link_Slider .textWrap p.smallTit .red { background : #930000; padding : 0.1em;} #link_Slider .paginationWrap { position : absolute; top : 0; left : 3%; width : auto; height : 100%; display : flex; flex-direction : column; gap : 1em; z-index : 2; align-items : center; justify-content : center; opacity : 1; padding-top : 80px; } #link_Slider .paginationWrap .swiper-pagination { position : relative; width : auto; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; gap : 4em; opacity : 1; bottom : 0; left : 0;} #link_Slider .paginationWrap .active-indicator { position : absolute; top : 0; left : 50%; width : calc(0.65em - calc(max(2px,0.14em))); height : calc(0.65em - calc(max(2px,0.14em))); background : #980000; border-radius : 50%; transform : translate(-50%, 0); transition : transform .4s ease; opacity : 0; z-index : 3; } #link_Slider .paginationWrap .swiper-pagination::after { content : ""; width : 2px; height : 100%; background : #fff; position : absolute; top : 0; left : 50%; transform : translateX(-50%); opacity : 1; z-index : 1;} #link_Slider .paginationWrap .swiper-pagination .swiper-pagination-bullet { width : 0.7em; height : 0.7em; background : #fff; opacity : 1; margin : 0; position : relative; display : flex; align-items : center; justify-content : center; border : max(2px,0.14em) solid #fff; z-index : 2; transition : .2s;} #link_Slider .paginationWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { animation: bulletColorDelay 0s ease 0.335s forwards; } #link_Slider .paginationWrap .swiper-page-counter { width : 5em; height : auto; display : flex; align-items : flex-end; justify-content : center; font-size : max(12px,0.65em); color : #fff; gap : 0.3em; line-height : 1em;} #link_Slider .paginationWrap .swiper-page-counter .current { font-size : 1.3em; font-weight : 800; line-height : 1em;} #link_Slider .paginationWrap .swiper-page-counter .total { font-weight : 700; color : #959595; line-height : 1em;} #slideShadow { position : absolute; z-index : 1;} #slideShadow, #slideShadow img { width : 100%; height : auto; } @media(max-width : 1024px){ /* A A A : A : A : A : */ #link_Slider { aspect-ratio : 1920 / 1080; min-height : 500px; font-size : min(2.3vw,18px);} #link_Slider .textWrap { padding-top : 75px;} #link_Slider .paginationWrap { left : 1%; padding-top : 75px;} } @media(max-width : 640px){ /* A A A : A : A : A : */ #link_Slider { aspect-ratio : 640 / 640; min-height : 340px; font-size : min(3.8vw,16px);} #link_Slider .textWrap { padding-top : 60px;} #link_Slider .textWrap p.bigTit.column { flex-direction : column; gap : 0.3em;} #link_Slider .paginationWrap { display : none;} } /* ---------------------------------------------- * Generated by Animista on 2025-5-28 9:35:44 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation focus-in-expand-fwd * ---------------------------------------- */ @-webkit-keyframes focus-in-expand-fwd { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-800px) translateY(-1em); transform: translateZ(-800px) translateY(-1em); -webkit-filter: blur(12px) drop-shadow(2px 2px 2px #000000b3); filter: blur(12px) drop-shadow(2px 2px 2px #000000b3); opacity: 0; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); -webkit-filter: blur(0) drop-shadow(2px 2px 2px #000000b3); filter: blur(0) drop-shadow(2px 2px 2px #000000b3); opacity: 1; } } @keyframes focus-in-expand-fwd { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-800px) translateY(-1em); transform: translateZ(-800px) translateY(-1em); -webkit-filter: blur(12px) drop-shadow(2px 2px 2px #000000b3); filter: blur(12px) drop-shadow(2px 2px 2px #000000b3); opacity: 0; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); -webkit-filter: blur(0) drop-shadow(2px 2px 2px #000000b3); filter: blur(0) drop-shadow(2px 2px 2px #000000b3); opacity: 1; } } /* ---------------------------------------------- * Generated by Animista on 2025-5-28 9:41:5 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation focus-in-expand * ---------------------------------------- */ @-webkit-keyframes focus-in-expand { 0% { letter-spacing: -0.5em; -webkit-filter: blur(12px) drop-shadow(2px 2px 2px #000000b3); filter: blur(12px) drop-shadow(2px 2px 2px #000000b3); opacity: 0; } 100% { -webkit-filter: blur(0px) drop-shadow(2px 2px 2px #000000b3); filter: blur(0px) drop-shadow(2px 2px 2px #000000b3); opacity: 1; } } @keyframes focus-in-expand { 0% { letter-spacing: -0.5em; -webkit-filter: blur(12px) drop-shadow(2px 2px 2px #000000b3); filter: blur(12px) drop-shadow(2px 2px 2px #000000b3); opacity: 0; } 100% { -webkit-filter: blur(0px) drop-shadow(2px 2px 2px #000000b3); filter: blur(0px) drop-shadow(2px 2px 2px #000000b3); opacity: 1; } } @keyframes bulletColorDelay { 0% { background-color: #fff; } 100% { background-color: #980000; } }