/* A A A : A : A : A : */ #link_Slider { width : 100%; height : auto; aspect-ratio : 1920 / 920; 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 .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;} #link_Slider .textWrap { width : 95%; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; position : absolute; bottom : 10%; left : 50%; transform : translateX(-50%); z-index : 1; max-width : 810px;} #link_Slider .textWrap .topTit { width : auto; height : 0.9em; display : flex; align-items : flex-start; justify-content : center; font-size : 1.65em; font-weight : 600; color : #ffef00; line-height : 1em; text-shadow : 3px 3px 3px #000000bf; overflow : hidden; padding : 0em 0.2em; z-index : 1;} #link_Slider .textWrap .topTit .bold { font-weight : 800; line-height : inherit;} #link_Slider .textWrap .topTit .white { font-weight : 800; line-height : inherit; color : #fff;} #link_Slider .textWrap .textBox { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; padding : 1em 0; background : #ffffffb3; box-shadow : 0px 0px 10px 0px #000000b3; text-align : center;} #link_Slider .textWrap .textBox .blue { color : #0068b5;} #link_Slider .textWrap .textBox .blue span { font-weight : 800; font-size : 1.3em;} #link_Slider .textWrap .textBox .black { font-size : 1.2em; font-weight : 800; word-break : keep-all;} #link_Slider .textWrap .textBox .black .back { line-height : 1em; background : #980000; color : #fff; font-weight : 700; padding : 0.1em; margin : 0 0.2em } #link_Slider .textWrap .textBox .black .normal { font-weight : 400;} #slideShadow { 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 .paginationWrap { left : 1%; padding-top : 75px;} #link_Slider .textWrap { max-width : 600px;} } @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 p.bigTit.column { flex-direction : column; gap : 0.3em;} #link_Slider .paginationWrap { display : none;} #link_Slider .textWrap { bottom : 5%;} } /* ---------------------------------------------- * 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; } }