@charset "UTF-8";
/* This CSS is generated by My Snazzy Framework version 1.2.3 */
@import url("../css/header.css");
@import url("../css/foot.css");
@media screen and (max-width: 1024px) { .section01 .item01 { height: 28vw; }
  .section01 .item01 img { width: auto; height: 100%; object-fit: cover; } }

.section02 { background-color: #efe3cd; }

.section02 .itemBox2 { align-items: center; }

.section02 .itemBox2 .item02 { width: 100%; }

.section02 .itemBox2 .item02 ul { display: flex; gap: 10%; padding-top: 30px; }

@media screen and (max-width: 1024px) { .section02 .itemBox2 .item02 ul { display: flex; } }

.section02 .itemBox2 .item02 ul li { width: auto; }

@media screen and (max-width: 1024px) { .section02 .itemBox2 .item02 ul li { width: auto; } }

.section02 .itemBox2 .item02 ul li a { width: 100%; font-size: 18px; text-align: center; }

@media screen and (max-width: 1024px) { .section02 .itemBox2 .item02 ul li a { font-size: 14px; } }

.section02 .itemBox2 .item02 ul li::after { content: url("../img/icon/nei_items.png"); margin: 0 auto; display: table; opacity: 0; -webkit-filter: blur(50px); filter: blur(50px); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); position: relative; transform: translateY(50%); }

.section02 .itemBox2 .item02 ul li:hover::after, .section02 .itemBox2 .item02 ul li.active::after { opacity: 1; -webkit-filter: blur(0); filter: blur(0); transform: translateY(0%); }

.section02 .itemBox2 .item02 ul li:hover a, .section02 .itemBox2 .item02 ul li.active a { color: var(--base); }

.section02 .itemBox2 .item03 { margin-top: 40px; border: 1px solid #999; }

@media screen and (max-width: 1024px) { .section02 .itemBox2 .item03 { display: none; } }

.section02 .itemBox2 .item03 .imgs { max-width: 100%; height: auto; }

.section02 .itemBox2 .item03 .textel { margin-top: 10%; width: 85%; margin: 5% auto; }

.section02 .itemBox2 .item03 .textel h5 { font-size: 24px; color: #333333; }

.section02 .itemBox2 .item03 .textel h4 { font-size: 18px; color: #666; }

.section02 .itemBox3 { flex-basis: 80%; width: auto; max-width: 100%; }

.section02 .itemBox3 .item02 { padding-top: 2%; }

.section03 { background: url("../img/list/main_footbag.jpg") no-repeat center bottom; background-size: 100% auto; padding: 3% 0 180px; }

@media screen and (max-width: 1024px) { .section03 { padding: 3% 0 80px;min-height: calc(100vh - 525px); } }

.section03 .item01 { border-bottom: 1px solid #dadada; margin-bottom: 2%; padding-bottom: 25px; position: relative; }

.section03 .item01::after { content: ''; width: 120px; position: absolute; bottom: -3px; height: 5px; background-color: var(--base); margin: 0 auto; left: 50%; transform: translateX(-50%); }

.section03 .item01 .text { text-align: center; }

.section03 .item01 .text span { font-size: 32px; font-weight: 600; }

@media screen and (max-width: 1024px) { .section03 .item01 .text span { font-size: 22px; } }

.section03 .item01 .muenPa { flex: auto; }

.section03 .item01 .muenPa .page_muen_nav { margin-right: 0; margin-left: auto; max-width: fit-content; }

#news-01 .newslistairm .commslist ul { display: flex; justify-content: unset; align-items: unset; gap: 40px; flex-wrap: wrap; }

#news-01 .newslistairm .commslist ul li { width: calc((100% - 0px) /1); }

#news-01 .newslistairm .commslist ul li .imgs { aspect-ratio: 4/3; width: 100%; overflow: hidden; }

#news-01 .newslistairm .commslist ul li .imgs img { width: 100%; height: 100%; object-fit: cover; transition: all 1.2s ease; transform: scale(1); }

#news-01 .newslistairm .commslist ul li .imgs img:hover { transform: scale(1.1); }

#news-01 .newslistairm .commslist ul li .titel { padding: 15px 5px; width: calc(100% - 10px); margin: 0 auto; display: flex; justify-content: space-around; align-items: center; flex-direction: column; gap: 10px; }

#news-01 .newslistairm .commslist ul li .titel h5 { font-size: 18px; color: #333; }

#news-01 .newslistairm .commslist ul li .titel p { color: #666; line-height: 1.5em; -webkit-line-clamp: 2; text-align: center; }

#news-01 .newslistairm .commslist ul li .titel .more { width: 100%; text-align: center; color: var(--base); font-size: 14px; }

#news-01 .newslistairm .commslist ul li .titel:hover h5, #news-01 .newslistairm .commslist ul li .titel:hover h4, #news-01 .newslistairm .commslist ul li .titel:hover p { color: var(--base); }

@media screen and (max-width: 1024px) { #news-01 .newslistairm .commslist ul li { width: 100%; } }

#news-01 .newslistairm .commslist ul li { display: flex; gap: 40px; box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0); background-color: #f5f5f5; }

#news-01 .newslistairm .commslist ul li .imgs { flex: 0 0 21vw; height: 13vw; overflow: hidden; }

#news-01 .newslistairm .commslist ul li .imgs img { transition: all 1.2s ease; transform: scale(1); }

#news-01 .newslistairm .commslist ul li .imgs img:hover { transform: scale(1.1); }

#news-01 .newslistairm .commslist ul li .titel { align-items: flex-start; padding: 15px; width: calc(100% - 30px); }

#news-01 .newslistairm .commslist ul li .titel h5 { font-size: 20px; color: #000; }

#news-01 .newslistairm .commslist ul li .titel h5:hover { color: var(--base); }

#news-01 .newslistairm .commslist ul li .titel span, #news-01 .newslistairm .commslist ul li .titel p { color: #999999; font-size: 16px; }

#news-01 .newslistairm .commslist ul li .titel p { text-indent: 0em; }

#news-01 .newslistairm .commslist ul li .titel .more { width: auto; color: var(--base); }

@media screen and (max-width: 1024px) { #news-01 .newslistairm .commslist ul li { flex-direction: column; gap: 10px; }
  #news-01 .newslistairm .commslist ul li .imgs { flex: 0 0 40vw; } }

#news-01 .newslistairm ul li { display: flex; gap: 40px; box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0); background-color: #f5f5f5; }

#news-01 .newslistairm ul li .imgs { flex: 0 0 21vw; height: 13vw; overflow: hidden; }

#news-01 .newslistairm ul li .imgs img { transition: all 1.2s ease; transform: scale(1); }

#news-01 .newslistairm ul li .imgs img:hover { transform: scale(1.1); }

#news-01 .newslistairm ul li .titel { align-items: flex-start; padding: 15px; width: calc(100% - 30px); }

#news-01 .newslistairm ul li .titel h5 { font-size: 20px; color: #000; }

#news-01 .newslistairm ul li .titel h5:hover { color: var(--base); }

#news-01 .newslistairm ul li .titel span, #news-01 .newslistairm ul li .titel p { color: #999999; font-size: 16px; }

#news-01 .newslistairm ul li .titel p { text-indent: 0em; }

#news-01 .newslistairm ul li .titel .more { width: auto; color: var(--base); }

@media screen and (max-width: 1024px) { #news-01 .newslistairm ul li { flex-direction: column; gap: 10px; }
  #news-01 .newslistairm ul li .imgs { flex: 0 0 40vw; } }

#news-02 .commslist ul { display: flex; justify-content: unset; align-items: unset; gap: 20px; flex-wrap: wrap; }

#news-02 .commslist ul li { width: calc((100% - 60px) /4); }

#news-02 .commslist ul li .imgs { aspect-ratio: 4/3; width: 100%; overflow: hidden; }

#news-02 .commslist ul li .imgs img { width: 100%; height: 100%; object-fit: cover; transition: all 1.2s ease; transform: scale(1); }

#news-02 .commslist ul li .imgs img:hover { transform: scale(1.1); }

#news-02 .commslist ul li .titel { padding: 15px 5px; width: calc(100% - 10px); margin: 0 auto; display: flex; justify-content: space-around; align-items: center; flex-direction: column; gap: 10px; }

#news-02 .commslist ul li .titel h5 { font-size: 18px; color: #333; }

#news-02 .commslist ul li .titel p { color: #666; line-height: 1.5em; -webkit-line-clamp: 2; text-align: center; }

#news-02 .commslist ul li .titel .more { width: 100%; text-align: center; color: var(--base); font-size: 14px; }

#news-02 .commslist ul li .titel:hover h5, #news-02 .commslist ul li .titel:hover h4, #news-02 .commslist ul li .titel:hover p { color: var(--base); }

@media screen and (max-width: 1024px) { #news-02 .commslist ul li { width: 100%; } }

#news-02 .commslist ul li .swSlide { flex-direction: column; width: 100%; }

#news-02 .commslist ul li .swSlide .item02abag { height: 100%; max-height: 380px; overflow: hidden; }

#news-02 .commslist ul li .swSlide .item02abag img { vertical-align: c; }

#news-02 .commslist ul li .swSlide .item02atxt { padding: 15px 5%; }

#news-02 .commslist ul li .swSlide .item02atxt .text { margin-bottom: 20px; }

#news-02 .commslist ul li .swSlide .item02atxt .title { font-size: 24px; text-align: center; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

#news-02 .commslist ul li .swSlide:hover { background-color: #f0e3cd; }

#news-02 .commslist ul li .swSlide:hover .title { color: var(--base); }

@media screen and (max-width: 1024px) { #news-02 .commslist ul { gap: 10px; }
  #news-02 .commslist ul li { width: calc((100% - 14px) / 2); } }

#news-02 .item_prc { margin-bottom: 3%; display: flex; justify-content: space-between; align-items: stretch; }

#news-02 .item_prc .button { transition: 0.5s; outline: none; position: absolute; width: auto; z-index: 10; top: 50%; transform: translateY(-50%); cursor: pointer; }

#news-02 .item_prc .button .iconfont { color: var(--base); font-size: 60px; font-weight: bold; }

@media screen and (max-width: 1024px) { #news-02 .item_prc .button .iconfont { font-size: 24px; } }

@media screen and (max-width: 1024px) { #news-02 .item_prc { display: block; } }

#news-02 .item_prc .item02_box1 { overflow: hidden; flex: 1; max-width: 550px; width: 100%; position: relative; }

#news-02 .item_prc .item02_box1 .button-prev { left: 15px; }

#news-02 .item_prc .item02_box1 .button-next { right: 0; }

#news-02 .item_prc .item02_box1 ul li img { width: 100%; height: 100%; object-fit: cover; }

#news-02 .item_prc .item02_box2 { flex: 1; width: 100%; max-width: 50%; }

@media screen and (max-width: 1024px) { #news-02 .item_prc .item02_box2 { max-width: 100%; } }

#news-02 .item_prc .item02_box2 .item02_box2_01 { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 3%; }

#news-02 .item_prc .item02_box2 .item02_box2_01 h2 { font-size: 24px; color: #000; }

@media screen and (max-width: 1024px) { #news-02 .item_prc .item02_box2 .item02_box2_01 h2 { font-size: 24px; } }

#news-02 .item_prc .item02_box2 .item02_box2_01 span { font-size: 28px; color: #333333; }

#news-02 .item_prc .item02_box2 .item02_box2_02 h5, #news-02 .item_prc .item02_box2 .item02_box2_03 h5 { font-size: 24px; color: #000; }

#news-02 .item_prc .item02_box2 .item02_box2_02 p, #news-02 .item_prc .item02_box2 .item02_box2_02 dt, #news-02 .item_prc .item02_box2 .item02_box2_03 p, #news-02 .item_prc .item02_box2 .item02_box2_03 dt { font-size: 16px; color: #333333; }

#news-02 .item_prc .item02_box2 .item02_box2_03 { width: 100%; }

#news-02 .item_prc .item02_box2 .item02_box2_03 dl { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }

#news-02 .item_prc .item02_box2 .item02_box2_03 dl dt { flex: 1; }

#news-03 .text span { font-weight: 500; font-size: 24px; color: var(--base); margin: 0 auto; width: auto; display: block; text-align: center; }

@media screen and (max-width: 1024px) { #news-03 .text span { font-size: 18px; } }

#news-03 .item01-1 { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; margin: 2% auto; }

#news-03 .item01-1 span { font-size: 18px; }

@media screen and (max-width: 1024px) { #news-03 .item01-1 span { font-size: 12px; } }

#news-03 .item01-2 .videoes { width: auto; max-width: 1200px; height: auto; margin: 0 auto; display: block; }

#news-04 ul li { width: auto; background-color: #f8f8f8; justify-content: space-between; align-items: center; padding: 10px 2%; }

#news-04 ul li:nth-child(2n) { background-color: #fff; }

#news-04 ul li h5 { font-size: 18px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

#news-04 ul li a { font-size: 18px; white-space: pre; }

#news-04 ul li:hover { background-color: #efe3cd; }

#news-04 ul li:hover h5, #news-04 ul li:hover a { color: var(--base); }

@media screen and (max-width: 1024px) { #news-04 ul li h5, #news-04 ul li a { font-size: 14px; } }

#news-05 { margin-top: 20px; }

#news-05 .commslist ul { display: flex; justify-content: unset; align-items: unset; gap: 30px; flex-wrap: wrap; }

#news-05 .commslist ul li { width: calc((100% - 90px) /4); }

#news-05 .commslist ul li .imgs { aspect-ratio: 4/3; width: 100%; overflow: hidden; }

#news-05 .commslist ul li .imgs img { width: 100%; height: 100%; object-fit: cover; transition: all 1.2s ease; transform: scale(1); }

#news-05 .commslist ul li .imgs img:hover { transform: scale(1.1); }

#news-05 .commslist ul li .titel { padding: 15px 5px; width: calc(100% - 10px); margin: 0 auto; display: flex; justify-content: space-around; align-items: center; flex-direction: column; gap: 10px; }

#news-05 .commslist ul li .titel h5 { font-size: 18px; color: #333; }

#news-05 .commslist ul li .titel p { color: #666; line-height: 1.5em; -webkit-line-clamp: 2; text-align: center; }

#news-05 .commslist ul li .titel .more { width: 100%; text-align: center; color: var(--base); font-size: 14px; }

#news-05 .commslist ul li .titel:hover h5, #news-05 .commslist ul li .titel:hover h4, #news-05 .commslist ul li .titel:hover p { color: var(--base); }

@media screen and (max-width: 1024px) { #news-05 .commslist ul li { width: 100%; } }

#news-05 .commslist ul li { display: flex; flex-wrap: wrap; }

#news-05 .commslist ul li .imgs { flex: unset; height: auto; overflow: hidden; }

#news-05 .commslist ul li .imgs img { transition: all 1.2s ease; transform: scale(1); }

#news-05 .commslist ul li .imgs img:hover { transform: scale(1.1); }

#news-05 .commslist ul li .titel { align-items: flex-start; padding: 15px; width: calc(100% - 30px); }

#news-05 .commslist ul li .titel h5 { font-size: 18px; color: #000; font-weight: 500; margin: 0 auto; }

#news-05 .commslist ul li .titel span { color: #ea8a1c; font-size: 14px; }

#news-05 .commslist ul li .titel p { color: #999999; font-size: 16px; }

#news-05 .commslist ul li .titel p { text-indent: 0em; }

#news-05 .commslist ul li .titel .mores { display: flex; justify-content: space-between; align-items: center; width: 100%; }

#news-05 .commslist ul li .titel .mores .more { font-size: 16px; color: #fff; text-align: center; height: auto; width: auto; padding: 12px 15px; background-color: var(--base); background-size: 100% 100%; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 0; margin-left: auto; }

#news-05 .commslist ul li .titel .mores .more img { margin-right: 10px; }

#news-05 .commslist ul li .titel:hover .mores .more { background-color: #ea8a1c; color: #fff; }

#news-05 .commslist ul li .titel:hover .mores span { color: var(--base); }

@media screen and (max-width: 1024px) { #news-05 .commslist ul li { flex-direction: column; gap: 10px; }
  #news-05 .commslist ul li .imgs { flex: 0 0 40vw; } }

#news-05 ul li { display: flex; flex-wrap: wrap; }

#news-05 ul li .imgs { flex: unset; height: auto; overflow: hidden; }

#news-05 ul li .imgs img { transition: all 1.2s ease; transform: scale(1); }

#news-05 ul li .imgs img:hover { transform: scale(1.1); }

#news-05 ul li .titel { align-items: flex-start; padding: 15px; width: calc(100% - 30px); }

#news-05 ul li .titel h5 { font-size: 18px; color: #000; font-weight: 500; margin: 0 auto; }

#news-05 ul li .titel span { color: #ea8a1c; font-size: 14px; }

#news-05 ul li .titel p { color: #999999; font-size: 16px; }

#news-05 ul li .titel p { text-indent: 0em; }

#news-05 ul li .titel .mores { display: flex; justify-content: space-between; align-items: center; width: 100%; }

#news-05 ul li .titel .mores .more { font-size: 16px; color: #fff; text-align: center; height: auto; width: auto; padding: 12px 15px; background-color: var(--base); background-size: 100% 100%; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 0; margin-left: auto; }

#news-05 ul li .titel .mores .more img { margin-right: 10px; }

#news-05 ul li .titel:hover .mores .more { background-color: #ea8a1c; color: #fff; }

#news-05 ul li .titel:hover .mores span { color: var(--base); }

@media screen and (max-width: 1024px) { #news-05 ul li { flex-direction: column; gap: 10px; }
  #news-05 ul li .imgs { flex: 0 0 40vw; } }

#video-01 { margin-top: 20px; }

#video-01 .commslist ul { display: flex; justify-content: unset; align-items: unset; gap: 30px; flex-wrap: wrap; }

#video-01 .commslist ul li { width: calc((100% - 60px) /3); }

#video-01 .commslist ul li .imgs { aspect-ratio: 4/3; width: 100%; overflow: hidden; }

#video-01 .commslist ul li .imgs img { width: 100%; height: 100%; object-fit: cover; transition: all 1.2s ease; transform: scale(1); }

#video-01 .commslist ul li .imgs img:hover { transform: scale(1.1); }

#video-01 .commslist ul li .titel { padding: 15px 5px; width: calc(100% - 10px); margin: 0 auto; display: flex; justify-content: space-around; align-items: center; flex-direction: column; gap: 10px; }

#video-01 .commslist ul li .titel h5 { font-size: 18px; color: #333; }

#video-01 .commslist ul li .titel p { color: #666; line-height: 1.5em; -webkit-line-clamp: 2; text-align: center; }

#video-01 .commslist ul li .titel .more { width: 100%; text-align: center; color: var(--base); font-size: 14px; }

#video-01 .commslist ul li .titel:hover h5, #video-01 .commslist ul li .titel:hover h4, #video-01 .commslist ul li .titel:hover p { color: var(--base); }

@media screen and (max-width: 1024px) { #video-01 .commslist ul li { width: 100%; } }

#video-01 .commslist ul li { display: flex; flex-wrap: wrap; }

#video-01 .commslist ul li .imgs { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* -webkit-box-pack: center; */ -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: auto; overflow: hidden; }

#video-01 .commslist ul li .imgs img.lists { transition: all 1.2s ease; transform: scale(1); }

#video-01 .commslist ul li .imgs img.lists:hover { transform: scale(1.1); }

#video-01 .commslist ul li .imgs .play { z-index: 9; }

#video-01 .commslist ul li .titel { align-items: flex-start; padding: 15px; width: calc(100% - 30px); }

#video-01 .commslist ul li .titel h5 { font-size: 18px; color: #000; font-weight: 500; margin: 0 auto; }

@media screen and (max-width: 1024px) { #video-01 .commslist ul li { flex-direction: column; gap: 10px; }
  #video-01 .commslist ul li .imgs { flex: 0 0 40vw; } }

#video-01 ul li { display: flex; flex-wrap: wrap; }

#video-01 ul li .imgs { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* -webkit-box-pack: center; */ -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: auto; overflow: hidden; }

#video-01 ul li .imgs img.lists { transition: all 1.2s ease; transform: scale(1); }

#video-01 ul li .imgs img.lists:hover { transform: scale(1.1); }

#video-01 ul li .imgs .play { z-index: 9; }

#video-01 ul li .titel { align-items: flex-start; padding: 15px; width: calc(100% - 30px); }

#video-01 ul li .titel h5 { font-size: 18px; color: #000; font-weight: 500; margin: 0 auto; }

@media screen and (max-width: 1024px) { #video-01 ul li { flex-direction: column; gap: 10px; }
  #video-01 ul li .imgs { flex: 0 0 40vw; } }

/****面包宵*****/
.page_muen_nav { display: flex; align-items: center; }

.page_muen_nav .ab { margin-right: 2%; display: flex; align-items: center; }

.page_muen_nav a { color: #666; font-size: 14px; white-space: pre; }

.page_muen_nav a.kuohao { font-family: 宋体; margin: 0 5px; }

.page_muen_nav a.act { color: var(--base); }

@media screen and (max-width: 1024px) { .page_muen_nav { display: none; } }

/*****详细页面设计*****/
.text_content p, .text_content span, .news_content p, .news_content span, .product_content p, .product_content span { font-size: 18px !important; line-height: 3em !important; }

@media screen and (max-width: 1024px) { .text_content p, .text_content span, .news_content p, .news_content span, .product_content p, .product_content span { font-size: 14px !important; line-height: 2em !important; } }

.text_content img, .news_content img, .product_content img { width: auto; max-width: 100% !important; }

/*****页码********/
#scms-pager { padding: 5% 0; }

#scms-pager .scms-pages { display: flex; justify-content: center; align-items: center; gap: 20px; }

#scms-pager .scms-pages a { font-size: 14px; background: #ddd; padding: 4px 10px; }

#scms-pager .scms-pages a.pgCurrent, #scms-pager .scms-pages a:hover { background-color: var(--base); color: #fff; }

@media screen and (max-width: 1024px) { #scms-pager .scms-pages a.pgNext { display: none; } }

/***/
iframe { margin: 0 auto; display: block; max-width: 100% !important; }

.wrapx { max-width: 100%; margin-bottom: 15px; }

.wrapx table { width: 100%; border: 1px solid rgba(64, 64, 64, 0.2); }

.wrapx table tbody, .wrapx table tr, .wrapx table td { border: 1px solid rgba(64, 64, 64, 0.2); line-height: 3em; font-size: 16px; }

@media screen and (max-width: 1024px) { .wrapx table tbody, .wrapx table tr, .wrapx table td { font-size: 12px; } }

.wrapx table tbody b, .wrapx table tr b, .wrapx table td b { margin-left: 5%; font-weight: 500; }

.wrapx table tbody a.download, .wrapx table tr a.download, .wrapx table td a.download { background-color: var(--base); color: #fff; margin: 0 auto; text-align: center; max-width: 120px; }

.text_content { width: 100%; }

.text_content img, .text_content video { width: auto; max-width: 100%; }

.text_content p, .text_content span { text-wrap: wrap !important; font-size: 16px; }

@media screen and (max-width: 1024px) { .text_content p, .text_content span { font-size: 12px; } }

.news_content { line-height: 3em; }

.news_content span, .news_content p { font-size: 16px; }

.news_content span, .news_content p, .news_content h4, .news_content h5, .news_content h3, .news_content h2, .news_content h1 { line-height: 2em; }

.news_content img, .news_content video { width: auto; max-width: 100%; }

/**视频弹出**/
.videos { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); }

.videos video { width: 100%;height: 90vh; }

#video_bg { width: 100%; max-width: 1400px;background-color: #000; height: auto; top: 50%; position: absolute; left: 50%; transform: translate(-50%, -50%); }

.vclose { position: absolute; right: 2%; top: 10%; border-radius: 100%; cursor: pointer; }