@charset "utf-8";

/***************** 후원 서브 메인 css 추가 *****************/
/* font */
@import url("/common/mainRenewal2023/css/font.css");

.suprt-wrap { font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD 산돌고딕 Neo', sans-serif; }
.suprt-wrap button { font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD 산돌고딕 Neo', sans-serif; }

.border-text { font-size: 200px; line-height: 1.15em; font-weight: 800; position: relative; letter-spacing: -.035rem; }
.border-text .org { text-shadow: calc(-1*1px) 0 #111827,0 1px #111827,1px 0 #111827,0 calc(-1*1px) #111827; color: #fff; display: inline-block; white-space: nowrap; }
.border-text .ovr { position: absolute; top: 0; left: 0; background-image: linear-gradient(45deg, #111827 50%, #fff 50%); background-position: 100% 50%; background-size: 300%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0,0,0,0); white-space: nowrap; }

.suprt-section-1 { padding-top: 299px; }
.suprt-section-1 .sub-title { font-size: 40px; font-weight: 100; color: #D41616; margin-bottom: 30px; }
.suprt-section-1 .sub-title > span { font-weight: bold; }
.suprt-section-1 .scroll_down { margin-top: 32px; margin-bottom: 48px; }
.suprt-section-1 .scroll_down .bar { width: 1px; height: 116px; background-color: #D41616; margin: 0 auto; animation: scrollDown 1.5s cubic-bezier(0.5, 0, 0, 1) infinite; -webkit-animation: scrollDown 1.5s cubic-bezier(0.5, 0, 0, 1) infinite; }
.suprt-section-1 .scroll_down .txt { font-size: 14px; font-weight: 600; color: #D41616; text-align: center; margin-top: 6px; }

@keyframes scrollDown {
    0% { transform: scaleY(0); transform-origin: 50% 0%; }
    49% { transform: scaleY(1); transform-origin: 50% 0%; }
    50% { transform: scaleY(1); transform-origin: 50% 50%; }
    51% { transform: scaleY(1); transform-origin: 50% 100%; }
    100% { transform: scaleY(0); transform-origin: 50% 100%; }
}

.suprt-section-1 .navigation { max-width: 989px; width: 100%; height: 130px; display: flex; align-items: center; justify-content: space-between; background-color: #F3F4F6; border-radius: 92px; -webkit-border-radius: 92px; -moz-border-radius: 92px; -ms-border-radius: 92px; -o-border-radius: 92px; padding: 0 80px; margin: 0 auto; }
.suprt-section-1 .navigation li { position: relative; max-width: 132px; width: 100%; height: 166px; text-align: center; border-radius: 200px; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; -webkit-border-radius: 200px; -moz-border-radius: 200px; -ms-border-radius: 200px; -o-border-radius: 200px; }
.suprt-section-1 .navigation li + li { margin-left: 8px;}
.suprt-section-1 .navigation li + li::after { content: ""; display: block; width: 1px; height: 70px; background-color: #D7D9DD; position: absolute; top: 50%; left: -8px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.suprt-section-1 .navigation li > a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 8px; }
.suprt-section-1 .navigation li .icon { display: block; width: 40px; height: 40px; margin: 0 auto; }
.suprt-section-1 .navigation li .icon > img { width: 100%; }
.suprt-section-1 .navigation li .txt { display: block; font-weight: 600; color: #1E293B; }

.suprt-section-2 { padding-top: 80px; padding-bottom: 160px; }
.suprt-section-2 .filter-wrap { display: flex; align-items: center; padding-bottom: 80px; }
.suprt-section-2 .filter-wrap .filter { position: relative; padding-right: 24px; }
.suprt-section-2 .filter-wrap .filter::after { content: ""; display: block; width: 1px; height: 46px; background-color: #D1D5DB; position: absolute; top: 50%; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.suprt-section-2 .filter-btn { width: 327px; padding: 19px 20px 19px 24px; background-color: #E30613; font-size: 18px; font-weight: bold; color: #fff; line-height: 1.4; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; }
.suprt-section-2 .filter-btn:focus-visible { border: none; }
.suprt-section-2 .filter-btn::before,
.suprt-section-2 .filter-btn::after { content: ""; display: inline-block; background-repeat: no-repeat; vertical-align: sub; }
.suprt-section-2 .filter-btn::before { width: 24px; height: 24px; margin-right: 6px; background-image: url(../img/suprt/icon_filter_btn.svg);  }
.suprt-section-2 .filter-btn::after { width: 20px; height: 20px; margin-left: 16px; background-image: url(../img/suprt/icon_arrow_down.svg);  }
.suprt-section-2 .filter-btn.active::after { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); }
.suprt-section-2 .filter-list { display: none; position: absolute; top: 72px; width: 214px; border: 1px solid #D1D5DB; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; padding: 16px; background-color: #fff; z-index: 1; box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.25); }
.suprt-section-2 .filter-list.active { display: block; }
.suprt-section-2 .filter-list > button { display: block; width: 100%; height: 56px; font-size: 16px; font-weight: 600; color: #0F172A; text-align: left; padding: 12px 24px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; }
.suprt-section-2 .filter-list > button > .filter-icon { display: inline-block; vertical-align: middle; padding-right: 8px; position: relative; z-index: -1; }
.suprt-section-2 .filter-list > button.on { color: #D41616; }
.suprt-section-2 .filter-wrap .hash-tag-wrap { width: 100%; overflow-x: auto; white-space: nowrap; }
.suprt-section-2 .filter-wrap .hash-tag-wrap > button:first-child { padding-left: 24px; }
.suprt-section-2 .filter-wrap .hash-tag-wrap > button:focus-visible { border: 2px solid #2460C5; }
.suprt-section-2 .filter-wrap .hash-tag-wrap > button { display: inline-block; }
.suprt-section-2 .filter-wrap .hash-tag-wrap > button + button { padding-left: 10px; }
.suprt-section-2 .filter-wrap .hash-tag-wrap > button > span { display: block; padding: 8px 16px; border: 1px solid #D1D5DB; border-radius: 46px; -webkit-border-radius: 46px; -moz-border-radius: 46px; -ms-border-radius: 46px; -o-border-radius: 46px; font-size: 15px; color: #1E293B; font-weight: 600; }
.suprt-section-2 .filter-wrap .hash-tag-wrap > button > span::after { content: ""; display: inline-block; width: 16px; height: 16px; background-image: url(../img/suprt/icon_close.svg); background-repeat: no-repeat; margin-left: 8px; vertical-align: text-top; }

.suprt-section-2 .contents-1 .image-wrapper { row-gap: 97px; justify-content: normal; }
.suprt-section-2 .contents-3 .image-wrapper .big-image-layer:last-child { margin-top: 116px; margin-left: 193px; }
.suprt-section-2 .image-wrapper { position: relative; display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.suprt-section-2 .image-wrapper .image-layer { position: relative; width: 100%; filter: drop-shadow(0px 15px 30px rgba(0, 0, 0, 0.25)); -webkit-filter: drop-shadow(0px 15px 30px rgba(0, 0, 0, 0.25)); border-radius: 32px; -webkit-border-radius: 32px; -moz-border-radius: 32px; -ms-border-radius: 32px; -o-border-radius: 32px; overflow: hidden;  will-change: transform; }
.suprt-section-2 .image-wrapper .image-layer::after { content: ""; display: block; width: 100%; height: 223px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%); position: absolute; bottom: 0; left: 0; }
.suprt-section-2 .image-area { position: relative; width: 100%; height: 100%; }
.suprt-section-2 .image-area > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.suprt-section-2 .info-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.suprt-section-2 .info-wrap .hash-tag { display: flex; align-items: center; gap: 8px; }
.suprt-section-2 .info-wrap .hash-tag > span { padding: 6px 16px; border: 1px solid #111827; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; font-size: 14px; color: #111827; font-weight: 600; }
.suprt-section-2 .info-wrap .hash-tag.white > span { border-color: #fff; color: #fff; }
.suprt-section-2 .info-wrap .txt-area { position: absolute; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; }
.suprt-section-2 .info-wrap .txt-area strong { display: block; font-size: 32px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 12px; }
.suprt-section-2 .info-wrap .txt-area > p { font-size: 18px; color: #fff; line-height: 1.4; }
.suprt-section-2 .info-wrap .txt-area .btn-wrap { position: absolute; bottom: -224px; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; }
.suprt-section-2 .info-wrap .txt-area .btn-wrap a { display: flex; align-items: center; justify-content: space-between; width: 164px; height: 55px; line-height: 55px; border: 1px solid #fff; font-size: 18px; font-weight: 800; color: #fff; border-radius: 64px; -webkit-border-radius: 64px; -moz-border-radius: 64px; -ms-border-radius: 64px; -o-border-radius: 64px; padding-left: 24px; padding-right: 24px; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; }
.suprt-section-2 .info-wrap .txt-area .btn-wrap a:last-child { margin-top: 10px; }
.suprt-section-2 .info-wrap .txt-area .btn-wrap a::after { content: ""; display: inline-block; width: 20px; height: 20px; background-image: url(../img/suprt/icon_arrow_w.svg); background-repeat: no-repeat; flex-shrink: 0; }

/* 웹접근성 */
.suprt-section-2 .image-layer.hover::after { height: 100%; background-color: #111827; opacity: .6; }
.suprt-section-2 .image-layer.hover .info-wrap::after { display: none; }
.suprt-section-2 .image-layer.hover .info-wrap .txt-area { bottom: 264px; }
.suprt-section-2 .image-layer.hover .hash-tag > span { border-color: #fff; color: #fff; }

.suprt-section-2 .info-wrap .txt-area .btn-wrap a:hover,
.suprt-section-2 .info-wrap .txt-area .btn-wrap a:focus-visible { background-color: #fff; color: #1E293B !important; }
.suprt-section-2 .info-wrap .txt-area .btn-wrap a:hover::after,
.suprt-section-2 .info-wrap .txt-area .btn-wrap a:focus-visible::after { background-image: url(../img/suprt/icon_arrow.svg); }

.suprt-section-2 .image-layer.card-1 { margin-left: 106px; }
.suprt-section-2 .image-layer.card-17 { margin-left: 32%; }

/* 스크롤 트리거가 설정된 카드 스타일 */
.suprt-section-2 .image-layer.card-2 { top: 293px; }
.suprt-section-2 .image-layer.card-3 { top: 292px; }
.suprt-section-2 .image-layer.card-5 { top: 256px; }
.suprt-section-2 .image-layer.card-6 { top: 130px; }
.suprt-section-2 .image-layer.card-8 { top: 240px; }
.suprt-section-2 .image-layer.card-10 { top: 310px; }
.suprt-section-2 .image-layer.card-12 { top: 101px; }
.suprt-section-2 .image-layer.card-13 { top: 314px; }
.suprt-section-2 .image-layer.card-15 { top: 288px; }
.suprt-section-2 .image-layer.card-17 { top: 157px; }

.suprt-section-2 .image-layer.card-9 { background-color: #131E21; }
.suprt-section-2 .image-layer.card-9 .gif-img2 { top: -36px; }
.suprt-section-2 .image-layer.card-12 .gif-img3 { background-color: #FFC3CB; }
.suprt-section-2 .image-layer.card-12 .gif-img3 > img { top: -90px; }
.suprt-section-2 .image-layer.card-13 { background-color: #83E588; }
.suprt-section-2 .image-layer.card-15 { background-color: #EF7E06; }
.suprt-section-2 .image-layer.card-15 .image-area > img { top: -40px; }
.suprt-section-2 .image-layer.card-16 { background-color: #5891FB; }

.suprt-section-2 .image-layer .info-wrap .txt-area { bottom: 48px; width: 100%; height: auto; left: 0; padding: 0 32px; }
.suprt-section-2 .big-image-layer .info-wrap .txt-area { padding: 0 56px; }

.suprt-section-2 .big-image-layer { max-width: 540px; height: 542px; }
.suprt-section-2 .big-image-layer .info-wrap { padding: 40px 56px 48px; }

.suprt-section-2 .small-image-layer { max-width: 354px; height: 518px; }
.suprt-section-2 .small-image-layer .info-wrap { padding: 24px 31px 48px; }

.suprt-section-2 .contents-1 { padding-bottom: 300px; }
.suprt-section-2 .contents-1 .small-image-layer:nth-child(n+2) { width: calc(33.333% - 23px); margin-bottom: 28px; }
.suprt-section-2 .contents-2 { padding-top: 82px; padding-bottom: 157px; }
.suprt-section-2 .contents-2 .small-image-layer:nth-child(n+3),
.suprt-section-2 .contents-3 .small-image-layer:nth-child(n+3) { width: calc(33.333% - 19px); }
.suprt-section-2 .contents-3 { padding-top: 145px; }

.suprt-section-3 ul { display: grid; grid-template-columns: 2fr 1fr 1fr; box-shadow: inset 0px 4px 40px 0px rgba(0, 0, 0, 0.25); background-color: #F4F3F8; }
.suprt-section-3 ul li > a { display: flex !important; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; background-repeat: no-repeat; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; text-align: left; }
.suprt-section-3 ul li .btn-area { display: block; border: 1px solid #9CA3AF; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background-image: url(../img/suprt/icon_item_arrow.svg); background-repeat: no-repeat; background-position: center; }
.suprt-section-3 ul li:not(.item-1) > a { padding: 40px; border-left: 1px solid #CDCDD4; background-position: right 40px bottom 40px; background-size: 80px 80px; }
.suprt-section-3 ul li:not(.item-1) .tit { display: block; font-size: 28px; font-weight: 700; color: #111827; line-height: 1.25; }
.suprt-section-3 ul li:not(.item-1) .sub-tit { display: block; font-size: 16px; color: #4B5563; margin-top: 8px; }
.suprt-section-3 ul li:not(.item-1) .btn-area { width: 56px; height: 56px; }

.suprt-section-3 ul li.item-1 { grid-column: 1 / 2; grid-row: 1 / 3; }
.suprt-section-3 ul li.item-1 .tit { display: block; font-size: 48px; font-weight: 800; color: #111827; }
.suprt-section-3 ul li.item-1 .btn-area { width: 96px; height: 96px; background-size: 43px 20px; }
.suprt-section-3 ul li.item-4 { grid-column: 2 / 2; grid-row: 2 / 2; border-top: 1px solid #CDCDD4; }

.suprt-section-3 ul li.item-1 > a { padding: 40px 64px 56px; background-position: right 56px bottom 56px; background-size: 198px; }
.suprt-section-3 ul li.item-1 > a { background-image: url(../img/suprt/icon_item01.png); }
.suprt-section-3 ul li.item-2 > a { background-image: url(../img/suprt/icon_item02.png); }
.suprt-section-3 ul li.item-3 > a { background-image: url(../img/suprt/icon_item03.png); }
.suprt-section-3 ul li.item-4 > a { background-image: url(../img/suprt/icon_item04.png); }
.suprt-section-3 ul li.item-5 > a { border-top: 1px solid #CDCDD4; background-image: url(../img/suprt/icon_item05.png); }

.suprt-section-3 ul .slick-slide a:focus { border: none; }

@media all and (max-width: 1024px){
    .suprt-wrap { padding-top: 96px; }
    .suprt-section-1 { padding-top: 40px; }
    .suprt-section-1 .sub-title { font-size: 30px; margin-bottom: 12px; }
    .border-text { font-size: 128px; }
    .suprt-section-1 .scroll_down { margin-top: 16px; margin-bottom: 26px; }
    .suprt-section-1 .scroll_down .bar { height: 51px; }
    .suprt-section-1 .navigation { max-width: 100%; height: auto; flex-wrap: wrap; padding: 32px 27px; row-gap: 32px; column-gap: 18px; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; justify-content: space-around; }
    .suprt-section-1 .navigation li { max-width: none; min-width: 84px; width: calc(33.333% - 18px); height: 70px; }
    .suprt-section-1 .navigation li + li { margin-left: 0; }
    .suprt-section-1 .navigation li + li::after { display: none; }

    .suprt-section-2 { padding-top: 64px; padding-bottom: 120px; }
    .suprt-section-2 .contents-1 { padding-bottom: 100px; }
    .suprt-section-2 .filter-wrap { flex-direction: column; gap: 24px; align-items: flex-start; padding-bottom: 64px; }
    .suprt-section-2 .filter-wrap .filter { width: 100%; padding-right: 0; }
    .suprt-section-2 .filter-btn { position: relative; width: 100%; font-size: 16px; padding: 19px 15px 19px 24px; text-align: left; }
    .suprt-section-2 .filter-btn::after { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
    .suprt-section-2 .filter-btn.active::after { transform: translateY(-50%) rotate(180deg); -webkit-transform: translateY(-50%) rotate(180deg); -moz-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); -o-transform: translateY(-50%) rotate(180deg); }
    .suprt-section-2 .filter-wrap .filter::after { display: none; }
    .suprt-section-2 .filter-wrap .hash-tag-wrap > button:first-child { padding-left: 0; }
    .suprt-section-2 .filter-wrap .hash-tag-wrap > button + button { padding-left: 8px; }
    .suprt-section-2 .filter-wrap .hash-tag-wrap::-webkit-scrollbar { display: none; }

    .suprt-section-2 .info-wrap:after { content: ""; display: block; width: 23px; height: 23px; background-image: url(../img/suprt/icon_plus.svg); background-repeat: no-repeat; position: absolute; bottom: 37px; right: 30px; }

    .suprt-section-2 .image-wrapper { flex-direction: column; gap: 24px; }
    .suprt-section-2 .contents-1 .image-wrapper { row-gap: 24px; }
    .suprt-section-2 .contents-3 .image-wrapper .big-image-layer:last-child { margin-left: 0; margin-top: 0; }
    .suprt-section-2 .big-image-layer { max-width: 100%; height: auto; }
    .suprt-section-2 .big-image-layer .image-area { padding-bottom: 100%; }

    .suprt-section-2 .image-layer { cursor: pointer; }

    .suprt-section-2 .image-layer.active::after { height: 100%; background-color: #111827; opacity: .6; }
    .suprt-section-2 .image-layer.active .info-wrap::after { display: none; }
    .suprt-section-2 .image-layer.active .info-wrap .txt-area { bottom: 264px; }
    .suprt-section-2 .image-layer.active .hash-tag > span { border-color: #fff; color: #fff; }

    .suprt-section-2 .contents-1 .small-image-layer:nth-child(n+2) { width: 100%; margin-bottom: 0; }
    .suprt-section-2 .contents-2 { padding-top: 0; padding-bottom: 100px; }
    .suprt-section-2 .contents-2 .small-image-layer:nth-child(n+3),
    .suprt-section-2 .contents-3 .small-image-layer:nth-child(n+3) { width: 100%; }
    .suprt-section-2 .small-image-layer { max-width: 100%; height: auto; }
    .suprt-section-2 .small-image-layer .image-area { padding-bottom: 64.328%; }

    .suprt-section-2 .small-image-layer--move { top: 0 !important; }

    .suprt-section-2 .image-layer.card-1,
    .suprt-section-2 .image-layer.card-17 { margin-left: 0; }

    .suprt-section-2 .image-layer.card-12 .gif-img3 > img { top: 50%; }

    .suprt-section-2 .image-layer.card-15 .image-area > img { object-position: 50% 40%; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);
}

    .suprt-section-2 .contents-3 { padding-top: 0; }

    .suprt-section-2 .border-text { display: none; }

    .suprt-section-2 .image-area.gif-img2 > img { object-position: 50% 65%; }

    .suprt-section-2 .image-area.gif-img3 > img { top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); object-position: 50% 70%; }

    .suprt-section-2 .image-area.gif-img4 > img { top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); width: 80%; object-position: 50% 18%; }

    .suprt-section-2 .image-layer.card-5 { background-position: top 70% left 10px, top 40% center; background-size: 120%, cover; }
    .suprt-section-2 .image-layer.card-5::before { position: absolute; background-image: url(../img/suprt/small_con1_img4_1_mo.gif); width: 70%; left: 320px; top: -40px; }

    .suprt-section-3 ul { position: relative; display: block; }
    .suprt-section-3 ul.slick-dotted.slick-slider { margin-bottom: 0; }
    .suprt-section-3 ul .slick-track { height: 284px; }
    .suprt-section-3 ul li.item-1 > a { padding: 40px 36px 56px; background-size: right 36px bottom 56px; }
    .suprt-section-3 ul li.item-1 .btn-area { width: 56px; height: 56px; background-size: auto; }
    .suprt-section-3 ul li:not(.item-1) > a { padding: 40px 36px 56px; border-left: none; background-position: right 36px bottom 56px; }
    .suprt-section-3 ul .slick-dots { position: absolute; bottom: 24px; display: flex; gap: 7px; justify-content: center; align-items: center; box-shadow: none; background-color: transparent; }
    .suprt-section-3 ul .slick-dots li { width: 8px; height: 8px; background-color: #D1D5DB; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; margin: 0; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; }
    .suprt-section-3 ul .slick-dots li.slick-active { width: 26px; background-color: #374151; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
    .slick-dots li button:before { display: none; }
    .suprt-section-3 ul li.item-1 > a { background-size: 100px; }
    .suprt-section-3 ul li.item-1 > a .tit { font-size: 32px; }
    .suprt-section-3 ul li.item-5 > a { border-top: none; }
}

@media all and (max-width: 768px){
    .border-text { font-size: 69px; }
    .suprt-section-1 .sub-title { font-size: 20px; }

    .suprt-section-2 .info-wrap .hash-tag > span { padding: 4px 14px; }
    .suprt-section-2 .info-wrap .txt-area strong { font-size: 28px; margin-bottom: 0; }
    .suprt-section-2 .info-wrap .txt-area > p { display: none; }

    .suprt-section-2 .image-wrapper .image-layer::after { height: 146px; }

    .suprt-section-2 .big-image-layer .info-wrap { padding: 28px 32px; }

    .suprt-section-2 .small-image-layer .info-wrap { padding: 28px 32px; }

    .suprt-section-2 .info-wrap .txt-area .btn-wrap { display: flex; gap: 4px; align-items: center; bottom: -105px; }
    .suprt-section-2 .info-wrap .txt-area .btn-wrap a:last-child { margin-top: 0; }

    .suprt-section-2 .big-image-layer .info-wrap .txt-area { padding: 0 32px; }

    .suprt-section-2 .image-layer.active::after { height: 100%; background-color: #111827; opacity: .6; }
    .suprt-section-2 .image-layer.active .info-wrap::after { display: none; }
    .suprt-section-2 .image-layer.active .info-wrap .txt-area { bottom: 264px; }
    .suprt-section-2 .image-layer.active .hash-tag > span { border-color: #fff; color: #fff; }

    .suprt-section-2 .image-layer.active .info-wrap .txt-area { bottom: 126px; }
    .suprt-section-2 .image-layer.active .info-wrap .btn-wrap { bottom: -98px; }

    .suprt-section-2 .image-layer.card-5::before { left: 250px; top: -10px; }

}

@media all and (max-width: 500px){
    .suprt-section-2 .image-layer .info-wrap { padding: 28px 20px 32px; }
    .suprt-section-2 .image-layer .info-wrap .txt-area { padding: 0 20px 0 23px; }
    .suprt-section-2 .image-layer .info-wrap .btn-wrap { width: 100%; padding: 0 20px; left: 0; }
    .suprt-section-2 .info-wrap .txt-area .btn-wrap a { max-width: 100%; width: 50%; }

    .suprt-section-2 .image-layer.active .info-wrap .hash-tag { display: none; }

    .suprt-section-2 .image-layer.card-5::before { width: 100%; left: 170px; top: 10px; }
}

@media all and (max-width: 390px){
    .suprt-section-2 .info-wrap .hash-tag { gap: 4px; }
    .suprt-section-2 .info-wrap .hash-tag > span { font-size: 12px; padding: 4px 12px; }
    .suprt-section-2 .image-layer.card-5::before { left: 140px; top: 40px; }

    .suprt-section-2 .image-layer.card-9 .gif-img2 { top: -20px; }
}

@media all and (max-width: 375px){
    .suprt-section-2 .filter-btn { padding-left: 15px; }
    .suprt-section-2 .filter-btn::after { right: 15px; }

    .suprt-section-2 .info-wrap:after { bottom: 32px; }
    .suprt-section-2 .image-layer .info-wrap .txt-area { bottom: 32px; }
    .suprt-section-2 .info-wrap .txt-area strong { font-size: 20px; }
}

@media all and (max-width: 320px){
    .suprt-section-2 .info-wrap .hash-tag > span { padding: 4px 8px; }
    .suprt-section-2 .info-wrap .txt-area strong { width: 85%; }
    .suprt-section-2 .image-layer.active .info-wrap .txt-area { bottom: 90px; }
    .suprt-section-2 .image-layer.active .info-wrap .btn-wrap { bottom: -70px; }
}

@media all and (min-width:1024px){
    .suprt-section-1 .navigation li:hover { background-color: #E30613; border-radius: 200px; box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25); -webkit-border-radius: 200px; -moz-border-radius: 200px; -ms-border-radius: 200px; -o-border-radius: 200px; }
    .suprt-section-1 .navigation li:hover .txt { color: #fff; }
    .suprt-section-1 .navigation li:hover::after,
    .suprt-section-1 .navigation li:hover + li::after { display: none; }

    .suprt-section-2 .filter-list > button:hover,
    .suprt-section-2 .filter-list > button:focus-visible { background-color: #F7F8F9; position: relative; z-index: -1; }

    .suprt-section-2 .image-layer:hover::after { height: 100%; background-color: #111827; opacity: .6; }
    .suprt-section-2 .image-layer:hover .info-wrap::after { display: none; }
    .suprt-section-2 .image-layer:hover .info-wrap .txt-area { bottom: 264px; }
    .suprt-section-2 .image-layer:hover .hash-tag > span { border-color: #fff; color: #fff; }

    .suprt-section-3 ul li > a:hover,
    .suprt-section-3 ul li > a:focus-visible { background-color: #FF5959; border: none; }
    .suprt-section-3 ul li > a:hover .tit,
    .suprt-section-3 ul li > a:focus-visible .tit,
    .suprt-section-3 ul li > a:hover .sub-tit,
    .suprt-section-3 ul li > a:focus-visible .sub-tit { color: #fff; }
    .suprt-section-3 ul li > a:hover .btn-area,
    .suprt-section-3 ul li > a:focus-visible .btn-area { background-color: #fff; border: 1px solid #fff; box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.20);; }
    .suprt-section-3 ul li.item-1 > a:hover,
    .suprt-section-3 ul li.item-1 > a:focus-visible { background-image: url(../img/suprt/icon_item01_on.png); }
    .suprt-section-3 ul li.item-2 > a:hover,
    .suprt-section-3 ul li.item-2 > a:focus-visible { background-image: url(../img/suprt/icon_item02_on.png); }
    .suprt-section-3 ul li.item-3 > a:hover,
    .suprt-section-3 ul li.item-3 > a:focus-visible { background-image: url(../img/suprt/icon_item03_on.png); }
    .suprt-section-3 ul li.item-4 > a:hover,
    .suprt-section-3 ul li.item-4 > a:focus-visible { background-image: url(../img/suprt/icon_item04_on.png); }
    .suprt-section-3 ul li.item-5 > a:hover,
    .suprt-section-3 ul li.item-5 > a:focus-visible { background-image: url(../img/suprt/icon_item05_on.png); }
}