@charset "UTF-8"; /* ==================================================
 * Snapic Plus for Slick Main Stylesheet, Modified by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */

.slick-list .slick-loading { background: transparent url('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==') center center no-repeat; } .slick-slider { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; min-height: 480px; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; height: 100vh; min-height: 480px; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 480px; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-lazyload-error:before { content: 'noPictrue'; color: var(--color-error-text); font-size: small; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } a.prev.slick-arrow, a.next.slick-arrow { display: block; position: absolute; bottom: 1.5em; padding: 0; width: 3em; height: 3em; outline: none; border: 0.25em solid var(--color-icon-border); border-radius: 50%; background-color: var(--color-icon-background); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: .3; z-index: 2; cursor: pointer; } a.prev.slick-arrow:hover, a.next.slick-arrow:hover { opacity: 1; } a.prev.slick-arrow { right: 6em; } a.next.slick-arrow { right: 1.5em; } .slick-prev, .slick-next { display: block; width: 3em; height: 3em; background-size: 2em; background-position: center; background-repeat: no-repeat; filter: var(--color-svg-filter); } .slick-prev { background-image: url(../img/icon/prev.svg); } .slick-next { background-image: url(../img/icon/next.svg); } .slick-dots::-webkit-scrollbar { width: auto; height: 5px; } .slick-dots::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(175 175 175); box-shadow: inset 0 0 5px rgba(0 0 0 / 25%); } .slick-dots::-webkit-scrollbar-track { border-radius: 5px; background-color: rgba(75 75 75); box-shadow: inset 0 0 5px rgba(0 0 0 / 5%); } .slick-dots { scrollbar-width: thin; scrollbar-color: rgba(175 175 175) rgba(75 75 75); } .slick-dots { display: block; margin: 0.5em auto; padding: 0; position: absolute; bottom: 1.5em; right: 11em; width: auto; max-width: calc(50vw - 11em); text-align: right; list-style: none; white-space: nowrap; overflow-x: auto; overflow-y: hidden; z-index: 2; } .slick-dots li { display: inline-block; margin: 0.5em; padding: 0; cursor: pointer; } .slick-dots li button { display: block; margin: 0; padding: 0; width: 1em; height: 1em; font-size: 1em; color: transparent; line-height: 1; border: 0; border-radius: 50%; background-color: var(--color-icon-border); outline: none; cursor: pointer; } .slick-dots li button { opacity: .3; } .slick-dots li.slick-active button { opacity: .7; } .slick-dots li button:hover, .slick-dots li.slick-active button:hover { opacity: 1; } .snapic-bgimg-slick-img img { display: block; margin: 0 auto; margin-top: -1px; width: 100%; height: 100vh; max-width: 100%; max-height: calc(100vh + 1px); min-height: 480px; object-fit: cover; background-color: var(--color-grid-background); cursor: grab; } .snapic-bgimg-slick-img .grid__img:hover { border-radius: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .snapic-bgimg-slick-info { display: flex; align-items: flex-start; flex-direction: column; position: absolute; bottom: 5em; left: calc((100% - 92.5%) / 2); width: 100%; max-width: 92.5%; z-index: 1; } .snapic-bgimg-slick-info div { margin: 1em 0; } .header .snapic-bgimg-slick-description { position: relative; font-size: var(--font-size-l); color: var(--color-bgimg-text); line-height: 1.4; text-align: left; } .slick-active .snapic-bgimg-slick-description { animation-delay: 1s; animation: fadeInUp 1s ease-in-out forwards; -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); opacity: 0; } @-webkit-keyframes fadeInUp { to { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { to { opacity: 1; -moz-transform: translateY(0); } } @-ms-keyframes fadeInUp { to { opacity: 1; -ms-transform: translateY(0); } } @-o-keyframes fadeInUp { to { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .header .snapic-bgimg-slick-description p { margin: 0.25em 0; } .header .snapic-bgimg-slick-description a { color: var(--color-content-text-a); } .header .snapic-bgimg-slick-description a:hover { padding-bottom: 0.1em; color: var(--color-content-text-hover); border-bottom: 0.1em dashed var(--color-content-text-a-decoration); } .header .snapic-bgimg-open { position: absolute; bottom: 1em; left: calc((100% - 92.5%) / 2); margin-left: calc(5.2em / 2 + 0.25em - 3em / 2); } @media screen and (min-width: 1920px) { .snapic-bgimg-slick-info { left: calc(50% - (1920px / 2) + (1920px * 0.075) / 2); max-width: calc(1920px * 0.925); } .slick-dots { right: calc(50% - (1920px / 2) + 11em); } a.prev.slick-arrow { right: calc(50% - (1920px / 2) + 6em); } a.next.slick-arrow { right: calc(50% - (1920px / 2) + 1.5em); } .header .snapic-bgimg-open { left: calc(50% - (1920px / 2) + (1920px * 0.075) / 2); } } @media screen and (max-width: 640px) { .snapic-bgimg-slick-info { bottom: calc(60px + 5em); } .slick-dots, .slick-prev, .slick-next, a.prev.slick-arrow, a.next.slick-arrow { bottom: calc(60px + 1em); } } @media screen and (max-width: 480px) { .slick-dots { display: none !important; } } @media screen and (max-width: 400px) { .slick-dots::-webkit-scrollbar { width: 5px; } .slick-dots::-webkit-scrollbar-thumb { border-radius: 3px; } .slick-dots::-webkit-scrollbar-track { border-radius: 0; } }