﻿

.bg_root {
 box-sizing: border-box;
 height: 100vh;
 width: 100vw;
 background-color: transparent;
 position: relative;
 overflow: hidden;
}

.bg_video {
 position: absolute;
 width: 100%;
 height: 100%;
 min-width: 100%;
 min-height: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: -1;
}

.bg_video video {
 width: 100%;
 position: absolute;
 right: 0;
 bottom: 0;
}

.logo_con {
 padding-top: 12.7vh;
 padding-bottom: 8.33vh;
}

.boot_logo {
 width: 70%;
 margin: 0 auto;
}

.menu_con {
 width: 67%;
 margin: 0 auto;
}

.menu_list {
 float: left;
 width: 17.27vw;
 text-align: center;
 color: #fff;
}

.menu_item {
 display: block;
}

.menu_item_con {

 transition: all 0.5s linear;
 height: 15.2vh;
 box-sizing: border-box;
 padding: 1.9vw;
 margin-bottom: 4.6vh;
 cursor: pointer;
 overflow: hidden;
 position: relative;
}

.show {
 display: flex;
 width: 100%;
 height: 100%;
 justify-content: center;
 align-items: center;
 transition: all 0.3s linear;
 top: 0;
 left: 0;
 position: absolute;
}

.menu_item_con .hoverShow {
 opacity: 0;
 z-index: -1;

 transition: all 0.3s linear;
}

.menu_item:hover {
 box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.4);
}

.menu_item:hover .menu_item_con {
 transform: scale(1.05);

}

.menu_item:hover .menu_item_con .hoverShow {
 z-index: 1;
 opacity: 1;

}

.menu_item:hover .show {
 z-index: -1;
 opacity: 0;

}

.menu_item1 .menu_svg {
 width: 10vw;
}

.menu_item2 .menu_svg {
 width: 10vw;
}

.menu_item3 .menu_svg {
 width: 4.2vw;
}
.menu_svg_pro {
 transition: all 0.3s linear;
 opacity: 0;
 display: none;
}
.menu_svg_pro svg{
 width: 100%;
}
.menu_item:hover .menu_svg_pro {
 opacity: 1;
 display: block;
}

.menu_item1 {
 background: #846e37;
}

.menu_item2 {
 background: #113aa2;
}

.menu_item3 {
 background: #233a7e;
}

.menu_tit {
 font-size: 1.6vw;
 word-break: keep-all;
}

.menu_tit {
 margin-left: 1vw;
 color: #fff;
}

.menu_item:hover {
 transform: scale(1.02);
}

.menu_item1 path {
 fill: none;
 stroke: #fff;
 stroke-width: 1;
 stroke-dasharray: 1200;
 stroke-dashoffset: 1200;
 animation: move1200 3s ease forwards;
}

.menu_item2 path {
 fill: none;
 stroke: #fff;
 stroke-width: 1;
 stroke-dasharray: 470;
 stroke-dashoffset: 470;

 animation: move470 3s ease forwards;
}

.menu_item3 path {
 fill: none;
 stroke: #fff;
 stroke-width: 0.015vw;
 stroke-dasharray: 130;
 stroke-dashoffset: 130;
 animation: move130 3s ease forwards;
}


@keyframes move130 {
 0% {
 stroke-dashoffset: 130;
 }

 to {
 stroke-dashoffset: 0;
 }
}

@keyframes move470 {
 0% {
 stroke-dashoffset: 470;
 }

 to {
 stroke-dashoffset: 0;
 }
}

@keyframes move1200 {
 0% {
 stroke-dashoffset: 1200;
 }

 to {
 stroke-dashoffset: 0;
 }
}
.boot_logo img {
 width: 22vw;
}
.menu_ico img {
 width: 3.3vw;
}
@media only screen and (max-width: 768px){
.menu_con {
 width: 68%;
 margin: 0 auto;
}
 .logo_con{
 padding: 14.93vw 0 20.13vw;
 }
 .boot_logo img{
 width: 100%;
 }
 .menu_list{
 float: none;
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 position: relative;
 z-index: 1;
 }
 .menu_ico img{
 width: auto;
 margin-bottom: 3.27vw;
 height: 10.53vw;
 }
 .menu_tit{
 font-size: 20px;
 }
 .menu_item:hover .show{
 opacity:1;
 z-index: 1;
 }
 .menu_item:hover .menu_item_con .hoverShow{
 opacity:0;
 z-index: -1;
 }
   .menu_item1 {
 width: 31.33vw;
}

.menu_item2 {
 width: 31.33vw;
}

.menu_item3 {
 width: 100%;
 margin-top: 5.33vw;
}

.boot_logo {
 width: 48.53vw;
}

.show {
 flex-direction: column;
}

.menu_tit::after {
 content: "";
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 height: 0.67vw;
 width: 6.93vw;
 background: #fff;
 bottom: -2.8vw;
}

.menu_item_con {
 height: 42.67vw;
 margin-bottom: 0;
 padding: 0;
}

.menu_item {
 border-radius: 1.33vw;
 overflow: hidden;
}

.menu_tit {
 font-size: 4.53vw;
 margin: 0;
 position: relative;
}

.menu_item_con .hoverShow {
 display: none;
}

* {
 margin: 0;
 padding: 0;
}

.menu_item3 .show {
 flex-direction: row;
}

.menu_item3 img {
 margin: 0 4.13vw 0 0;
 height: 10.8vw;
}

.menu_item3 .menu_tit {
 margin-top: -3vw;
}

.menu_item3 .menu_tit::after {
 left: 0;
 transform: initial;
 bottom: -1.8vw;
}

.menu_item3 .menu_item_con {
 height: 28.8vw;
}
 .bg_root {
 background: url(/Sites/Uploaded/UserUpLoad/20241021/20241021110849.jpg) no-repeat;
 background-size: cover;
}
 .phone_bottom {
 display: block !important;
 height: 38.09vw;
 position: absolute;
 bottom: 0;
 width: 100%;
 text-align: center;
 background: url(/Sites/Uploaded/UserUpLoad/20241021/20241021134641.png) center no-repeat;
 background-size: contain;
}

.phone_bottom img {
 height: 100%;
 display: block;
 margin: 0 auto;
}
} 