@charset "utf-8";

.hover-effect[data-effect-name="direction-top"] img, .hover-effect[data-effect-name="direction-right"] img, .hover-effect[data-effect-name="direction-bottom"] img, .hover-effect[data-effect-name="direction-left"] img, .hover-effect[data-effect-name="direction-origin"] img { transition: 0.3s ease-in-out; }

.hover-effect[data-effect-name="direction-top"] .layer, .hover-effect[data-effect-name="direction-right"] .layer, .hover-effect[data-effect-name="direction-bottom"] .layer, .hover-effect[data-effect-name="direction-left"] .layer, .hover-effect[data-effect-name="direction-origin"] .layer, .hover-effect[data-effect-name="zoom-in"] .layer, .hover-effect[data-effect-name="flash-full"] .layer, .hover-effect[data-effect-name="flash-line"] .layer, .hover-effect[data-effect-name="flash-disperse"] .layer, .hover-effect[data-effect-name="xxx"] .layer { position: absolute; width: 100%; height: 100%; opacity: 0; transition: 0.3s ease-in-out; display: flex; align-items: center; align-content: center; flex-wrap: wrap; pointer-events: none; }

.hover-effect[data-effect-name="direction-top"] .layer { top: -100%; left: 0px; }

.hover-effect[data-effect-name="direction-right"] .layer { top: 0px; right: -100%; }

.hover-effect[data-effect-name="direction-bottom"] .layer { bottom: -100%; left: 0px; }

.hover-effect[data-effect-name="direction-left"] .layer { left: -100%; top: 0px; }

.hover-effect[data-effect-name="direction-origin"] .layer { bottom: 0px; left: 0px; }

.hover-effect[data-effect-name="direction-top"]:hover img, .hover-effect[data-effect-name="direction-right"]:hover img, .hover-effect[data-effect-name="direction-bottom"]:hover img, .hover-effect[data-effect-name="direction-left"]:hover img, .hover-effect[data-effect-name="direction-origin"]:hover img { transform: scale(1.2); }

.hover-effect[data-effect-name="direction-top"]:hover .layer, .hover-effect[data-effect-name="direction-right"]:hover .layer, .hover-effect[data-effect-name="direction-bottom"]:hover .layer, .hover-effect[data-effect-name="direction-left"]:hover .layer, .hover-effect[data-effect-name="direction-origin"]:hover .layer { opacity: 1; }

.hover-effect[data-effect-name="direction-top"]:hover .layer { top: 0px; }

.hover-effect[data-effect-name="direction-right"]:hover .layer { right: 0px; }

.hover-effect[data-effect-name="direction-bottom"]:hover .layer { bottom: 0px; }

.hover-effect[data-effect-name="direction-left"]:hover .layer { left: 0px; }

.hover-effect[data-effect-name="extend-border"] img, .hover-effect[data-effect-name="full-border"] img { transition: 0.3s ease-in-out; }

.hover-effect[data-effect-name="extend-border"] .layer, .hover-effect[data-effect-name="full-border"] .layer { position: absolute; left: 0px; top: 0px; padding: 30px; width: 100%; height: 100%; transition: 0.3s ease-in-out; display: flex; align-items: center; align-content: center; flex-wrap: wrap; box-sizing: border-box; pointer-events: none; }

.hover-effect[data-effect-name="extend-border"] .title, .hover-effect[data-effect-name="full-border"] .title, .hover-effect[data-effect-name="extend-border"] .desc, .hover-effect[data-effect-name="full-border"] .desc { transition: 0.3s ease-in-out; }

.hover-effect[data-effect-name="extend-border"] .title, .hover-effect[data-effect-name="full-border"] .title { padding-bottom: 42px; }

.hover-effect[data-effect-name="extend-border"] .title, .hover-effect[data-effect-name="full-border"] .title, .hover-effect[data-effect-name="extend-border"] .desc, .hover-effect[data-effect-name="full-border"] .desc { opacity: 0; }

.hover-effect[data-effect-name="extend-border"]::before { border-top: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); transform: scale(0, 1); }

.hover-effect[data-effect-name="extend-border"]::after { border-left: 1px solid rgb(255, 255, 255); border-right: 1px solid rgb(255, 255, 255); transform: scale(1, 0); }

.hover-effect[data-effect-name="extend-border"]::before, .hover-effect[data-effect-name="extend-border"]::after { position: absolute; inset: 30px; content: ""; opacity: 0; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; z-index: 2; }

.hover-effect[data-effect-name="full-border"]::before { position: absolute; inset: 30px; content: ""; opacity: 0; transform: scale(0); border: 1px solid rgb(255, 255, 255); transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; z-index: 2; }

.hover-effect[data-effect-name="extend-border"]:hover::before, .hover-effect[data-effect-name="extend-border"]:hover::after, .hover-effect[data-effect-name="full-border"]:hover::before, .hover-effect[data-effect-name="full-border"]:hover::after { opacity: 1; transform: scale(1); }

.hover-effect[data-effect-name="extend-border"]:hover img, .hover-effect[data-effect-name="full-border"]:hover img { transform: scale(1.2); }

.hover-effect[data-effect-name="extend-border"]:hover .title, .hover-effect[data-effect-name="full-border"]:hover .title { transform: translateY(16px); opacity: 1; }

.hover-effect[data-effect-name="extend-border"]:hover .desc, .hover-effect[data-effect-name="full-border"]:hover .desc { transform: translateY(-16px); opacity: 1; }

.hover-effect[data-effect-name="zoom-in"] img { transition: transform 0.3s ease-in-out; }

.hover-effect[data-effect-name="zoom-in"]:hover img { transform: scale(1.2); }

.hover-effect[data-effect-name="zoom-in"] .layer, .hover-effect[data-effect-name="flash-full"] .layer, .hover-effect[data-effect-name="flash-line"] .layer, .hover-effect[data-effect-name="flash-disperse"] .layer, .hover-effect[data-effect-name="xxx"] .layer { top: 0px; opacity: 0; background: transparent; }

.hover-effect[data-effect-name="zoom-in"]:hover .layer, .hover-effect[data-effect-name="flash-full"]:hover .layer, .hover-effect[data-effect-name="flash-line"]:hover .layer, .hover-effect[data-effect-name="flash-disperse"]:hover .layer { opacity: 1; background: transparent !important; }

.hover-effect[data-effect-name="xxx"]:hover .layer { opacity: 1; }

.hover-effect[data-effect-name="flash-full"]:hover img { opacity: 1; animation: 1.5s ease 0s 1 normal none running full; }

.hover-effect[data-effect-name="flash-line"]::before, .hover-effect[data-effect-name="flash-shadow"]::before { position: absolute; top: 0px; left: -100%; z-index: 2; display: block; content: ""; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); transform: skewX(-25deg); }

.hover-effect[data-effect-name="flash-line"]:hover::before, .hover-effect[data-effect-name="flash-shadow"]:hover::before { animation: 0.75s ease 0s 1 normal none running line; }

.hover-effect[data-effect-name="flash-disperse"]::before { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ""; width: 0px; height: 0px; background: rgba(255, 255, 255, 0.2); border-radius: 100%; transform: translate(-50%, -50%); opacity: 0; }

.hover-effect[data-effect-name="flash-disperse"]:hover::before { animation: 0.75s ease 0s 1 normal none running disperse; }

@-webkit-keyframes full { 
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

@keyframes full { 
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

@-webkit-keyframes line { 
  100% { left: 125%; }
}

@keyframes line { 
  100% { left: 125%; }
}

@-webkit-keyframes disperse { 
  0% { opacity: 1; }
  40% { opacity: 1; }
  100% { width: 200%; height: 200%; opacity: 0; }
}

@keyframes disperse { 
  0% { opacity: 1; }
  40% { opacity: 1; }
  100% { width: 200%; height: 200%; opacity: 0; }
}

.hover-effect[data-effect-name="grow"], .hover-effect[data-effect-name="shrink"], .hover-effect[data-effect-name="sink"], .hover-effect[data-effect-name="forward"], .hover-effect[data-effect-name="backward"] { transition: 300ms ease-in-out; }

.hover-effect[data-effect-name="grow"]:hover { transform: scale(1.1); }

.hover-effect[data-effect-name="shrink"]:hover { transform: scale(0.9); }

.hover-effect[data-effect-name="float"]:hover { transform: translateY(-8px); }

.hover-effect[data-effect-name="sink"]:hover { transform: translateY(8px); }

.hover-effect[data-effect-name="forward"]:hover { transform: translateX(8px); }

.hover-effect[data-effect-name="backward"]:hover { transform: translateX(-8px); }

.hover-effect[data-effect-name="sweep-to-right"]:hover { transform: perspective(1px) translateZ(0px); position: relative; }

.hover-effect[data-effect-name="sweep-to-right"]:hover::before { transform: scaleX(1); }

.hover-effect[data-effect-name="sweep-to-right"]::before { content: ""; position: absolute; z-index: -1; inset: 0px; transform: scaleX(0); transform-origin: 0px 50%; transition: 0.3s ease-out; }

.hover-effect[data-effect-name="rectangle-out"]:hover { transform: perspective(1px) translateZ(0px); position: relative; }

.hover-effect[data-effect-name="rectangle-out"]::before { content: ""; position: absolute; z-index: -1; inset: 0px; transform: scale(0); transition: 0.3s ease-out; }

.hover-effect[data-effect-name="rectangle-out"]:hover::before { transform: scale(1); }

.hover-effect[data-effect-name="shutter-out-horizontal"]:hover { transform: perspective(1px) translateZ(0px); position: relative; transition-property: color; transition-duration: 0.3s; }

.hover-effect[data-effect-name="shutter-out-horizontal"]::before { content: ""; position: absolute; z-index: -1; inset: 0px; transform: scaleX(0); transform-origin: 50% center; transition: 0.3s ease-out; }

.hover-effect[data-effect-name="shutter-out-horizontal"]:hover::before { transform: scaleX(1); }

.hover-effect[data-effect-name="shutter-out-vertical"]:hover { display: inline-block; vertical-align: middle; transform: perspective(1px) translateZ(0px); position: relative; background: rgb(225, 225, 225); transition-property: color; transition-duration: 0.3s; }

.hover-effect[data-effect-name="shutter-out-vertical"]::before { content: ""; position: absolute; z-index: -1; inset: 0px; transform: scaleY(0); transform-origin: 50% center; transition: 0.3s ease-out; }

.hover-effect[data-effect-name="shutter-out-vertical"]:hover::before { transform: scaleY(1); }

.hover-effect[data-effect-name="underline-from-center"]:hover { transform: perspective(1px) translateZ(0px); position: relative; overflow: hidden; }

.hover-effect[data-effect-name="underline-from-center"]::before { content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; bottom: 0px; height: 2px; transition: 0.3s ease-out; }

.hover-effect[data-effect-name="underline-from-center"]:hover::before { left: 0px; right: 0px; }

.hover-effect[data-effect-name="overline-from-center"]:hover { display: inline-block; vertical-align: middle; transform: perspective(1px) translateZ(0px); box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px; position: relative; overflow: hidden; }

.hover-effect[data-effect-name="overline-from-center"]::before { content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; top: 0px; height: 2px; transition: 0.3s ease-out; }

.hover-effect[data-effect-name="overline-from-center"]:hover::before { left: 0px; right: 0px; }

.hover-effect[data-effect-name="mirror-opacity"] img, .hover-effect[data-effect-name="opacity-border"], .hover-effect[data-effect-name="float-border"], .hover-effect[data-effect-name="float"], .hover-effect[data-effect-name="float-shadow"], .hover-effect[data-effect-name="shadow"], .hover-effect[data-effect-name="border"], .hover-effect[data-effect-name="puff"] { transition: 300ms ease-in-out; }

.hover-effect[data-effect-name="mirror-opacity"]:hover img { opacity: 0.7; }

.hover-effect[data-effect-name="shadow"]:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 12px; }

.hover-effect[data-effect-name="float-shadow"]:hover { transform: translateY(-8px); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 12px; }

.hover-effect[data-effect-name="flash-shadow"]:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 12px; }

.hover-effect[data-effect-name="flash-shadow"] { position: relative; }

.hover-effect[data-effect-name="opacity-border"]:hover { opacity: 0.7; }

.hover-effect[data-effect-name="float-border"]:hover { transform: translateY(-8px); }

.hover-effect[data-effect-name="puff"]:hover { transform: scale(1.05) translate3d(0px, 0px, 8px); }

.hover-effect[data-effect-name="flash-line"] { position: relative; }

.hover-effect[data-effect-name="direction-top"] > .smAreaC:last-of-type { opacity: 0; transform: translateY(-100%); pointer-events: none; }

.hover-effect[data-effect-name="direction-top"]:hover > .smAreaC:last-of-type { opacity: 1; z-index: 2; transform: translateY(0px); pointer-events: auto; }

.hover-effect[data-effect-name="direction-right"] > .smAreaC:last-of-type { opacity: 0; transform: translateX(100%); pointer-events: none; }

.hover-effect[data-effect-name="direction-right"]:hover > .smAreaC:last-of-type { opacity: 1; z-index: 9999; transform: translateX(0px); pointer-events: auto; }

.hover-effect[data-effect-name="direction-bottom"] > .smAreaC:last-of-type { opacity: 0; transform: translateY(100%); pointer-events: none; }

.hover-effect[data-effect-name="direction-bottom"]:hover > .smAreaC:last-of-type { opacity: 1; z-index: 9999; transform: translateY(0px); pointer-events: auto; }

.hover-effect[data-effect-name="direction-left"] > .smAreaC:last-of-type { opacity: 0; transform: translateX(-100%); pointer-events: none; }

.hover-effect[data-effect-name="direction-left"]:hover > .smAreaC:last-of-type { opacity: 1; z-index: 9999; transform: translateX(0px); pointer-events: auto; }

.hover-effect[data-effect-name="fade-in"] > .smAreaC:last-of-type { opacity: 0; }

.hover-effect[data-effect-name="fade-in"]:hover > .smAreaC:last-of-type { opacity: 1; z-index: 9999; animation: 1s ease-in-out 0s 1 normal none running fadeCenter; }

.hover-effect[data-effect-name="fade-out"] > .smAreaC:first-of-type { z-index: 2; transition: 0.3s ease-in-out; }

.hover-effect[data-effect-name="fade-out"]:hover > .smAreaC:first-of-type { transform: scale(2); opacity: 0; z-index: -1; }

.hover-effect[data-effect-name="fade-out"]:hover > .smAreaC:last-of-type { z-index: 9999; opacity: 1; }

.hover-effect[data-effect-name="filp-top"] > .smAreaC:last-of-type { opacity: 0; transform-origin: 50% 0px; transform: perspective(900px) rotateX(180deg); pointer-events: none; }

.hover-effect[data-effect-name="filp-top"]:hover > .smAreaC:last-of-type { opacity: 1; z-index: 9999; transform: perspective(900px) rotateX(0deg); transition: 1s ease-in-out; pointer-events: auto; }

.hover-effect[data-effect-name="filp-right"] > .smAreaC:last-of-type { opacity: 0; transform-origin: 100% 50%; transform: perspective(900px) rotateY(180deg); pointer-events: none; }

.hover-effect[data-effect-name="filp-right"]:hover > .smAreaC:last-of-type { opacity: 1; z-index: 9999; transform: perspective(900px) rotateY(0deg); transition: 1s ease-in-out; pointer-events: auto; }

.hover-effect[data-effect-name="filp-bottom"] > .smAreaC:last-of-type { opacity: 0; transform-origin: 50% 100%; transform: perspective(900px) rotateX(-180deg); pointer-events: none; }

.hover-effect[data-effect-name="filp-bottom"]:hover > .smAreaC:last-of-type { opacity: 1; z-index: 9999; transform: perspective(900px) rotateX(0deg); transition: 1s ease-in-out; pointer-events: auto; }

.hover-effect[data-effect-name="filp-left"] > .smAreaC:last-of-type { opacity: 0; transform-origin: 0px 50%; transform: perspective(900px) rotateY(-180deg); pointer-events: none; }

.hover-effect[data-effect-name="filp-left"]:hover > .smAreaC:last-of-type { opacity: 1; z-index: 9999; transform: perspective(900px) rotateY(0deg); transition: 1s ease-in-out; pointer-events: auto; }

.hover-effect[data-effect-name="filp-origin"] > .smAreaC:first-of-type { z-index: 3; backface-visibility: visible; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; }

.hover-effect[data-effect-name="filp-origin"]:hover > .smAreaC:first-of-type { opacity: 0; animation: 0.5s ease-in-out 0s 1 normal none running ladderin; }

.hover-effect[data-effect-name="filp-origin"]:hover > .smAreaC:last-of-type { z-index: 9999; opacity: 1; }

.hover-effect[data-effect-name="slash-fly-out"] > .smAreaC:first-of-type { z-index: 3; backface-visibility: visible; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; }

.hover-effect[data-effect-name="slash-fly-out"]:hover > .smAreaC:last-of-type { z-index: 9999; opacity: 1; }

.hover-effect[data-effect-name="slash-fly-out"]:hover > .smAreaC:first-of-type { animation: 1s ease 0s 1 normal both running bombout; pointer-events: none; }

@-webkit-keyframes fadeCenter { 
  0% { opacity: 0; z-index: -1; }
  40% { opacity: 1; z-index: 2; transform: scale(1.2); }
  100% { opacity: 1; z-index: 2; transform: scale(1); }
}

@-webkit-keyframes ladderin { 
  0% { opacity: 1; transform-origin: 0px 0px; transform: perspective(800px) rotate(0deg) translateZ(0px); }
  100% { opacity: 0; transform-origin: 50% 0px; transform: perspective(800px) rotateY(180deg) translateZ(300px); }
}

@keyframes ladderin { 
  0% { opacity: 1; transform-origin: 0px 0px; transform: perspective(800px) rotate(0deg) translateZ(0px); }
  100% { opacity: 0; transform-origin: 50% 0px; transform: perspective(800px) rotateY(180deg) translateZ(300px); }
}

@-webkit-keyframes bombout { 
  0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); }
  50% { opacity: 1; transform-origin: 200% 50%; transform: rotate(160deg); }
  100% { opacity: 0; transform-origin: 200% 50%; transform: rotate(160deg); }
}

@keyframes bombout { 
  0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); }
  50% { opacity: 1; transform-origin: 200% 50%; transform: rotate(160deg); }
  100% { opacity: 0; transform-origin: 200% 50%; transform: rotate(160deg); }
}

.hover-effect[data-effect-name="text-shadow"] p > span:hover { text-shadow: rgb(204, 204, 204) 0px 1px 0px, rgb(201, 201, 201) 0px 2px 0px, rgb(187, 187, 187) 0px 3px 0px, rgb(185, 185, 185) 0px 4px 0px, rgb(170, 170, 170) 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 6px 1px, rgba(0, 0, 0, 0.1) 0px 0px 5px, rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(0, 0, 0, 0.2) 0px 3px 5px, rgba(0, 0, 0, 0.25) 0px 5px 10px; }

.hover-effect[data-effect-name="text-bottom-shadow"] p > span { position: relative; }

.hover-effect[data-effect-name="text-bottom-shadow"] p > span::before { position: absolute; top: 100%; left: 5%; display: block; content: ""; width: 90%; height: 10px; z-index: -1; opacity: 0; background: radial-gradient(rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); transition: 0.3s linear; }

.hover-effect[data-effect-name="text-bottom-shadow"] p > span:hover { transform: translateY(-5px); }

.hover-effect[data-effect-name="text-bottom-shadow"] p > span:hover::before { opacity: 1; transform: translateY(5px); }

.hover-effect[data-effect-name="text-3d-shadow"] p > span:hover { color: rgb(40, 80, 120); text-shadow: currentcolor 0px 0px 1px, rgb(8, 48, 88) 2px 0px 1px, rgb(152, 192, 232) 0px 2px 1px, rgb(8, 48, 88) 2px 1px 1px, rgb(152, 192, 232) 1px 2px 1px, rgb(72, 112, 152) 2px 2px 1px, rgb(8, 48, 88) 3px 1px 1px, rgb(152, 192, 232) 1px 3px 1px, rgb(8, 48, 88) 3px 2px 1px, rgb(152, 192, 232) 2px 3px 1px, rgb(72, 112, 152) 3px 3px 1px, rgb(8, 48, 88) 4px 2px 1px, rgb(152, 192, 232) 2px 4px 1px, rgb(8, 48, 88) 4px 3px 1px, rgb(152, 192, 232) 3px 4px 1px, rgb(72, 112, 152) 4px 4px 1px, rgb(8, 48, 88) 5px 3px 1px, rgb(152, 192, 232) 3px 5px 1px, rgb(8, 48, 88) 5px 4px 1px, rgb(152, 192, 232) 4px 5px 1px, rgb(72, 112, 152) 5px 5px 1px; }

.hover-effect[data-effect-name="text-3d-shadow"] p > span:hover::before { color: rgb(40, 80, 120); text-shadow: currentcolor 0px 0px 1px, rgb(0, 0, 51) -1px -1px 1px, rgb(0, 0, 51) 0px -1px 1px, rgb(0, 0, 51) 1px -1px 1px, rgb(0, 0, 51) 1px 0px 1px, rgb(0, 0, 51) 1px 1px 1px, rgb(0, 0, 51) 0px 1px 1px, rgb(0, 0, 51) -1px 1px 1px, rgb(0, 0, 51) -1px 0px 1px; }

.hover-effect[data-effect-name="text-3d-shadow"] p > span:hover::after { color: rgba(40, 80, 120, 0.1); text-shadow: rgba(40, 80, 120, 0.8) 1px -1px 1px, rgba(255, 255, 255, 0.8) -1px 1px 1px; }

.hover-effect[data-effect-name="text-bold-shadow"] p > span:hover { font-weight: bold; color: orange; text-shadow: currentcolor 0px 0px 1px, rgb(0, 51, 0) -1px -1px 1px, rgb(0, 51, 0) 0px -1px 1px, rgb(0, 51, 0) 1px -1px 1px, rgb(0, 51, 0) 1px 0px 1px, rgb(0, 51, 0) 1px 1px 1px, rgb(0, 51, 0) 0px 1px 1px, rgb(0, 51, 0) -1px 1px 1px, rgb(0, 51, 0) -1px 0px 1px; }

.hover-effect .smAreaC .yibuFrameContent:not(.image_Style6) img { transform: none !important; }