/* Reset CSS */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Global Style */
:root {
--main-color: #000;
--sub-color: #e47140;
}
img {
max-width: 100%;
height: auto;
}
h1 {
background-image: url("/img/logo.svg");
width: 100%;
height: 60px;
text-indent: 101%;
white-space: nowrap;
overflow: hidden;
background-size: 270px;
background-position: center;
background-repeat: no-repeat;
}
video {
width: 100%;
height: auto;
position: relative;
z-index: 100;
}
body {
font-family: "Source Sans 3", sans-serif;
letter-spacing: 1px;
}
.banner-text {
position: relative;
}
@media (max-width: 767px) {
.banner-text {
display: flex;
align-items: center;
justify-content: center;
}
}
.banner-text section {
position: absolute;
z-index: 100;
top: 6vw;
left: 5vw;
color: #fff;
text-align: center;
}
@media (max-width: 1200px) {
.banner-text section {
left: 3vw;
}
}
@media (max-width: 767px) {
.banner-text section {
padding: 0 5px;
top: unset;
left: unset;
}
}
.banner-text section h2 {
font-size: 50px;
font-weight: 500;
line-height: 66px;
margin-bottom: 40px;
}
@media (max-width: 1200px) {
.banner-text section h2 {
font-size: 40px;
line-height: 60px;
margin-bottom: 20px;
}
}
@media (max-width: 991px) {
.banner-text section h2 {
font-size: 38px;
line-height: 44px;
margin-bottom: 10px;
}
}
@media (max-width: 767px) {
.banner-text section h2 {
margin-bottom: 30px;
}
.banner-text section h2 span {
font-size: 26px;
}
}
@media (max-width: 575px) {
.banner-text section h2 {
font-size: 30px;
line-height: 30px;
}
.banner-text section h2 span {
font-size: 20px;
}
}
.banner-text section p {
font-size: 24px;
font-weight: 400;
line-height: 34px;
max-width: 870px;
}
@media (max-width: 1200px) {
.banner-text section p {
font-size: 20px;
max-width: 740px;
}
}
@media (max-width: 991px) {
.banner-text section p {
font-size: 18px;
max-width: 670px;
line-height: 28px;
}
}
@media (max-width: 767px) {
.banner-text section p {
max-width: 100%;
}
}
@media (max-width: 575px) {
.banner-text section p {
font-size: 16px;
line-height: 20px;
}
}
.content {
padding: 150px 0 200px;
margin-top: -3px;
position: relative;
background-image: linear-gradient(to bottom, #040203 0%, #101d32 100%);
overflow: hidden;
}
@media (max-width: 767px) {
.content {
padding: 100px 0 150px;
}
}
.content .top-bg,
.content .bottom-bg {
width: 100vw;
position: absolute;
}
.content .top-bg {
top: -25vw;
}
.content .bottom-bg {
bottom: 0;
}
.content .title {
display: flex;
justify-content: center;
margin: 90px auto;
}
.content .title h2 {
color: #fff;
text-align: center;
font-size: 46px;
}
@media (max-width: 575px) {
.content .title h2 {
font-size: 36px;
}
}
.content .title h2::before {
content: "";
display: block;
width: 285px;
height: 1px;
position: relative;
top: -10px;
left: -25px;
background-color: #fff;
}
.content .title h2::after {
content: "";
display: block;
width: 285px;
height: 1px;
position: relative;
top: 10px;
right: -25px;
background-color: #fff;
}
.content .title img {
width: 350px;
}
@media (max-width: 767px) {
.content .title img {
width: 250px;
}
}
.content .img-block,
.content .video-block {
position: relative;
z-index: 10;
}
.content .img-block {
max-height: 300px;
transition: max-height 1s ease;
overflow: hidden;
}
.content .img-block img {
width: 100%;
height: 185px;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 767px) {
.content .img-block img {
height: 120px;
}
}
.content .video-block h3 {
margin-bottom: 10px;
text-align: center;
color: #fff;
font-size: 26px;
}
.content .video-block section {
overflow: hidden;
}
.content .video-block section .cover-img {
transition: all 0.5s;
}
.content .video-block section .cover-img:hover {
transform: scale(1.1);
}
.content .video-block section span {
display: block;
position: relative;
}
.content .video-block section span:hover .cover-img {
transform: scale(1.1);
}
.content .video-block .play-icon {
position: absolute;
width: 25%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}
.content .coming-block img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
}
.content .dropdown {
width: 40px;
position: relative;
top: 0;
transition: all 0.3s;
cursor: pointer;
filter: invert(100%) sepia(92%) saturate(1%) hue-rotate(247deg) brightness(108%) contrast(99%);
}
.content .dropdown:hover {
top: 5px;
}
.content .dropdown-rotate {
transform: rotate(180deg);
}
.content .show {
max-height: 2800px !important;
}
.media-btn {
display: flex;
flex-direction: column;
position: fixed;
right: 15px;
bottom: 10px;
}
.media-btn img {
width: 45px;
transition: all 0.3s;
}
.media-btn img:hover {
opacity: 0.8;
}
footer {
position: relative;
display: flex;
justify-content: center;
}
footer h3 {
position: absolute;
bottom: 10px;
z-index: 10;
color: #fff;
font-size: 14px;
}/*# sourceMappingURL=style.css.map */