@charset "UTF-8";

     @media screen and (max-width: 1023px){ }
@media (max-width: 768px) {
.hide-on-mobile {
display: none !important; }
} @media screen and (max-width: 834px){ } @media screen and (max-width: 480px){ } .video-thumb {
position: relative;
display: inline-block;
width: 100%;
max-width: 100%;
cursor: pointer;
} .video-thumb img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
} .video-thumb .play-button {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease;
}
.video-thumb .play-button:hover {
transform: translate(-50%, -50%) scale(1.1);
}
.video-thumb .play-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-left: 40px solid white;
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
transform: translate(-40%, -50%);
} .video-thumb .video-text {
position: absolute;
top: calc(50% + 80px); left: 50%;
transform: translateX(-50%);
color: red;
font-weight: bold;
font-size: 20px;
background-color: rgba(128,128,128,0.8); padding: 4px 10px;
border-radius: 6px;
text-align: center;
text-shadow: 1px 1px 2px black; pointer-events: none; } @media screen and (max-width: 768px) {
.video-thumb .play-button {
width: 80px;
height: 80px;
}
.video-thumb .play-button::after {
border-left: 26px solid red;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
}
.video-thumb .video-text {
top: calc(50% + 55px);
font-size: 16px;
padding: 3px 8px;
}
}
@media screen and (max-width: 480px) {
.video-thumb .play-button {
width: 60px;
height: 60px;
}
.video-thumb .play-button::after {
border-left: 20px solid red;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.video-thumb .video-text {
top: calc(50% + 45px);
font-size: 14px;
padding: 2px 6px;
}
}
.site-banner{
width: 100%;
box-sizing: border-box;
background: #d32f2f; color: #ffffff; font-weight: 600; font-size: clamp(16px, 2.6vw, 24px);
line-height: 1.2;
text-align: center;
padding: 12px 16px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%; }
.btn,
a.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
a.btn-flat {
display: block; width: 100%; box-sizing: border-box; overflow: hidden;
padding: 1.5rem 0; color: #fff;
border-radius: 0;
background: #000;
text-align: center; max-width: 100%; }
a.btn-flat span {
position: relative;
display: inline-block; }
a.btn-flat:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
transition: all .5s ease-in-out;
transform: translateX(-96%);
background: #eb6877;
}
a.btn-flat:hover:before {
transform: translateX(0%);
}